/* charte.css — jetons, primitives et gabarit commun du site.
   À charger sur toutes les pages, AVANT la feuille propre à la page.
   Ne contient rien de spécifique à un gabarit. */

:root{
  --encre:#0C100F; --encre-2:#55605C; --encre-3:#646D69;
  --blanc:#FFFFFF; --papier:#F6F5F2; --papier-2:#EDECE7;
  --vert:#0F6E7A; --vert-f:#0A5058;
  --ambre:#E9960B; --ambre-t:#9C5C00; --ambre-pale:#FCF2E1;
  --filet:rgba(12,16,15,.13); --filet-f:rgba(12,16,15,.22);
  --r:4px; --r-g:6px;
  --f:"Instrument Sans",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  /* MARQUE_LOT119 — la serif des titres, servie depuis le domaine.
     Georgia reste le repli : c'est lui qu'on voyait avant, et il tient. */
  --f-titre:"Instrument Serif",Georgia,"Times New Roman",serif;
  --f-marque:"Bricolage Grotesque",var(--f);
  --max:1320px;
  --tr:.4s cubic-bezier(.2,.8,.25,1);
  --vagues:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%221200%22%20height%3D%22640%22%20fill%3D%22none%22%20stroke%3D%22rgba%2815%2C110%2C122%2C.07%29%22%20stroke-width%3D%221.4%22%3E%3Cpath%20d%3D%22M0%2040%20C%20150%2014%2C%20300%2066%2C%20450%2040%20S%20750%2066%2C%20900%2040%20S%201200%2014%2C%201200%2040%22%20/%3E%3Cpath%20d%3D%22M0%2086%20C%20150%2060%2C%20300%20112%2C%20450%2086%20S%20750%20112%2C%20900%2086%20S%201200%2060%2C%201200%2086%22%20/%3E%3Cpath%20d%3D%22M0%20132%20C%20150%20106%2C%20300%20158%2C%20450%20132%20S%20750%20158%2C%20900%20132%20S%201200%20106%2C%201200%20132%22%20/%3E%3Cpath%20d%3D%22M0%20178%20C%20150%20152%2C%20300%20204%2C%20450%20178%20S%20750%20204%2C%20900%20178%20S%201200%20152%2C%201200%20178%22%20/%3E%3Cpath%20d%3D%22M0%20224%20C%20150%20198%2C%20300%20250%2C%20450%20224%20S%20750%20250%2C%20900%20224%20S%201200%20198%2C%201200%20224%22%20/%3E%3Cpath%20d%3D%22M0%20270%20C%20150%20244%2C%20300%20296%2C%20450%20270%20S%20750%20296%2C%20900%20270%20S%201200%20244%2C%201200%20270%22%20/%3E%3Cpath%20d%3D%22M0%20316%20C%20150%20290%2C%20300%20342%2C%20450%20316%20S%20750%20342%2C%20900%20316%20S%201200%20290%2C%201200%20316%22%20/%3E%3Cpath%20d%3D%22M0%20362%20C%20150%20336%2C%20300%20388%2C%20450%20362%20S%20750%20388%2C%20900%20362%20S%201200%20336%2C%201200%20362%22%20/%3E%3Cpath%20d%3D%22M0%20408%20C%20150%20382%2C%20300%20434%2C%20450%20408%20S%20750%20434%2C%20900%20408%20S%201200%20382%2C%201200%20408%22%20/%3E%3Cpath%20d%3D%22M0%20454%20C%20150%20428%2C%20300%20480%2C%20450%20454%20S%20750%20480%2C%20900%20454%20S%201200%20428%2C%201200%20454%22%20/%3E%3Cpath%20d%3D%22M0%20500%20C%20150%20474%2C%20300%20526%2C%20450%20500%20S%20750%20526%2C%20900%20500%20S%201200%20474%2C%201200%20500%22%20/%3E%3Cpath%20d%3D%22M0%20546%20C%20150%20520%2C%20300%20572%2C%20450%20546%20S%20750%20572%2C%20900%20546%20S%201200%20520%2C%201200%20546%22%20/%3E%3Cpath%20d%3D%22M0%20592%20C%20150%20566%2C%20300%20618%2C%20450%20592%20S%20750%20618%2C%20900%20592%20S%201200%20566%2C%201200%20592%22%20/%3E%3C/svg%3E');
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{font-family:var(--f);color:var(--encre);background:var(--blanc);line-height:1.6;
  overflow-x:hidden;-webkit-font-smoothing:antialiased;font-size:16px}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.titre{font-family:var(--f-titre);font-weight:400;letter-spacing:-.018em}
h1,h2{font-family:var(--f-titre);font-weight:400;letter-spacing:-.018em;line-height:1.02}
h3{font-family:var(--f);font-weight:600;letter-spacing:-.015em;line-height:1.25}
/* MARQUE_LOT119 — l'accent est une italique vraie, plus une couleur : le
   bleu canard etait le seul titre colore du site. Sur fond clair il herite
   de l'encre, sur une photo sombre il herite du blanc. */
em{font-family:var(--f-titre);font-style:italic}
.wrap{width:100%;max-width:var(--max);margin:0 auto;padding:0 22px}
@media(min-width:900px){.wrap{padding:0 44px}}
.ico{flex:0 0 auto}

/* ---- libellés ---- */
.label{display:block;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--encre-3)}
.chapo{margin-top:16px;max-width:52ch;font-size:16px;color:var(--encre-2);line-height:1.65}

/* ---- boutons ---- */
.btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--f);font-size:14.5px;font-weight:600;
  padding:14px 22px;border:1px solid transparent;border-radius:var(--r);cursor:pointer;transition:var(--tr)}
.btn-plein{background:var(--encre);color:#fff}
.btn-plein:hover{background:var(--vert-f)}
.btn-ligne{border-color:var(--filet-f);color:var(--encre);background:transparent}
.btn-ligne:hover{border-color:var(--encre);background:var(--encre);color:#fff}
.btn-clair{border-color:rgba(255,255,255,.5);color:#fff;background:transparent}
.btn-clair:hover{background:#fff;color:var(--encre);border-color:#fff}
.lien{display:inline-flex;align-items:center;gap:9px;font-size:14.5px;font-weight:600;min-height:40px;
  padding:8px 0 5px;border-bottom:1px solid var(--filet-f);transition:var(--tr)}
.lien:hover{border-color:var(--encre);gap:14px}

/* ---- en-tête ---- */
.tete{position:fixed;top:0;left:0;right:0;z-index:60;transition:var(--tr)}
.tete-in{display:flex;align-items:center;justify-content:space-between;gap:16px;height:76px}
.marque{display:flex;align-items:center;gap:10px;padding:6px 0;font-family:var(--f-marque);font-weight:800;
  font-size:17px;letter-spacing:-.03em;color:#fff}
.marque em{font-family:inherit;font-style:normal;opacity:.72}
.marque img{width:30px;height:30px}
.marque span{white-space:nowrap}
.nav{display:none;gap:30px;font-size:14.5px;font-weight:500;color:rgba(255,255,255,.86)}
.nav a{padding:4px 0;border-bottom:1px solid transparent;transition:var(--tr)}
.nav a:hover{border-color:currentColor}
.tete .btn{display:none}
.burger{width:44px;height:40px;border:1px solid rgba(255,255,255,.4);background:transparent;color:#fff;
  display:grid;place-items:center;cursor:pointer;border-radius:var(--r)}

/* Déplacés d'accueil.css : l'évitement et le menu mobile appartiennent à
   l'en-tête, donc à toutes les pages, pas à l'accueil seul. */
.saut{position:absolute;left:-9999px;top:0;background:var(--encre);color:#fff;padding:12px 18px;z-index:100;border-radius:var(--r)}
.saut:focus{left:16px;top:16px}
.menu-mobile{border-bottom:1px solid var(--filet);background:#fff}
.menu-mobile[hidden]{display:none}
.menu-mobile ul{list-style:none;display:grid}
.menu-mobile a{display:block;padding:16px 0;border-bottom:1px solid var(--filet);font-size:16px;font-weight:500}
.menu-mobile li:last-child a{border-bottom:0}
@media(min-width:1000px){.menu-mobile{display:none}}

/* Le bandeau de démonstration s'affiche en bas : l'en-tête est fixe en haut et
   le recouvrirait. */
.demo{position:fixed;left:0;right:0;bottom:0;z-index:90;background:var(--ambre);color:#231400;
  text-align:center;padding:10px 16px;font-size:14px;font-weight:600}

/* `fixée` : compactée au défilement, sur la vitrine. `opaque` : figée dans cet
   état sur les pages sans photo, où l'en-tête claire serait invisible. */
.tete.fixee,.tete.opaque{background:rgba(255,255,255,.96);backdrop-filter:blur(14px);border-bottom:1px solid var(--filet)}
.tete.fixee .marque,.tete.opaque .marque{color:var(--encre)}
.tete.fixee .marque em,.tete.opaque .marque em{color:var(--vert);opacity:1}
.tete.fixee .nav,.tete.opaque .nav{color:var(--encre-2)}
.tete.fixee .burger,.tete.opaque .burger{border-color:var(--filet-f);color:var(--encre)}
.tete.fixee .btn-clair,.tete.opaque .btn-clair{border-color:var(--filet-f);color:var(--encre)}
.tete.fixee .btn-clair:hover,.tete.opaque .btn-clair:hover{background:var(--encre);color:#fff;border-color:var(--encre)}
@media(min-width:1000px){.nav{display:flex}.tete .btn{display:inline-flex}.burger{display:none}}

/* ---- sections ---- */
.section{padding:88px 0}
@media(min-width:900px){.section{padding:124px 0}}
.section.papier{background:var(--papier)}
.tete-section{display:grid;gap:22px;margin-bottom:44px}
@media(min-width:840px){.tete-section{grid-template-columns:1fr auto;align-items:end}}
.section h2{font-size:clamp(34px,6.4vw,62px);max-width:15ch}
.section h2 em{font-style:italic}
.outils{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.outils[hidden]{display:none}
.fl{width:46px;height:46px;border:1px solid var(--filet-f);background:transparent;color:var(--encre);
  display:grid;place-items:center;cursor:pointer;border-radius:var(--r);transition:var(--tr)}
.fl:hover:not([disabled]){background:var(--encre);color:#fff;border-color:var(--encre)}
.fl[disabled]{opacity:.28;cursor:default}

/* ---- rails ---- */
.rail{display:grid;grid-auto-flow:column;gap:20px;overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x proximity;scroll-behavior:smooth;padding:0 22px 4px;margin:0 -22px;scrollbar-width:none}
.rail::-webkit-scrollbar{display:none}
.rail>*{scroll-snap-align:start}
@media(min-width:900px){.rail{padding:0 44px 4px;margin:0 -44px}}
.rail-regions{grid-auto-columns:minmax(198px,1fr)}
.rail-fiches{grid-auto-columns:minmax(272px,1fr)}
.rail-art{grid-auto-columns:minmax(320px,1fr)}

/* ---- pied ---- */
.pied{background:var(--encre);color:#9AA5A2;padding:76px 0 30px;font-size:14px;line-height:1.8}
.pied-grille{display:grid;gap:38px}
@media(min-width:800px){.pied-grille{grid-template-columns:1.7fr 1fr 1fr 1fr;gap:48px}}
.pied h4{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#fff;margin-bottom:18px}
.pied ul{list-style:none;display:grid;gap:11px}
.pied a{transition:color var(--tr)}
.pied a:hover{color:#fff}
.pied .marque{color:#fff}
.pied .marque em{color:#7FC3C7;opacity:1}
.pied .baseline{margin-top:16px;max-width:34ch;color:#78837F}
.pied-bas{margin-top:56px;padding-top:24px;border-top:1px solid rgba(255,255,255,.14);font-size:12.5px;color:#78837F}



/* ================= « ça pétille » ================= */
/* Trois leviers repris de Trvelo : accent chaud saturé, photos en arche
   avec composition qui se chevauche, et apparition au défilement. */

/* 1. accent chaud — #E9960B ne donne que 2,38:1 sur blanc : il ne sert
   qu'en aplat, le texte chaud utilise #9C5C00 (5,32:1). */
.label{color:var(--ambre-t)}
.btn-plein{background:var(--encre)}
.btn-ambre{background:var(--ambre);color:var(--encre)}
.btn-ambre:hover{background:#D98A08}
.puce{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;
  background:rgba(255,255,255,.22);transition:transform var(--tr)}
.btn-ambre .puce,.btn-ligne .puce{background:rgba(12,16,15,.14)}
.btn:hover .puce{transform:translateX(3px)}

/* 2. texture d'arrière-plan des sections teintées */
.section.papier{position:relative;background-color:#F3F6F4;background-image:var(--vagues);background-size:1200px auto}
.section.papier>*{position:relative}

/* 3. apparition au défilement */
.reveal{opacity:0;transform:translateY(20px);
  transition:opacity .75s cubic-bezier(.2,.8,.25,1),transform .75s cubic-bezier(.2,.8,.25,1)}
.reveal.vu{opacity:1;transform:none}