@font-face{font-family:'Jost';font-style:normal;font-display:swap;font-weight:300 700;
 src:url(/assets/fonts/jost.woff2) format('woff2-variations')}
@font-face{font-family:'Plex';font-style:normal;font-display:swap;font-weight:400;
 src:url(/assets/fonts/plex-400.woff2) format('woff2')}
@font-face{font-family:'Plex';font-style:normal;font-display:swap;font-weight:500;
 src:url(/assets/fonts/plex-500.woff2) format('woff2')}
@font-face{font-family:'Plex';font-style:normal;font-display:swap;font-weight:600;
 src:url(/assets/fonts/plex-600.woff2) format('woff2')}

:root{
  /* ---------- 1. valeurs brutes, relevées chez le client ---------- */
  --bleu-600:#206EB8;   /* logo, parois de la boîte, 61 % */
  --bleu-400:#619BCD;   /* logo, face éclairée, 18 % */
  --bleu-200:#C3D8ED;   /* logo, intérieur dans l'ombre */
  --bleu-100:#E6F0F9;   /* logo, intérieur éclairé */
  --bleu-900:#10243A;   /* dérivée : bleu de marque assombri */
  --bleu-500:#4D8EC7;   /* dérivée : bleu éclairé porté à 3:1 */
  --kraft-500:#B0906C;  /* mesuré sur 548 923 px de carton nu */
  --kraft-700:#846747;  /* dérivée : kraft porté à 4,5:1 */
  --kraft-100:#F5EFE7;  /* dérivée : kraft éclairci, fond */
  --kraft-200:#E3D6C4;  /* dérivée : filet sur surface kraft */
  --ardoise-600:#4A6076;
  --ardoise-300:#728CA6;
  --ardoise-200:#B9CBDD;
  --blanc:#FFFFFF;
  --bleu-550:#4485C3;   /* dérivée : le bleu de marque à 84 % sur blanc */
  --bleu-700:#1A5893;   /* dérivée : le bleu de marque assombri de 20 % */

  /* ---------- 2. à quoi elles servent ---------- */
  --fond:var(--kraft-100);   /* la page entière est en papier kraft */
  --fond-bleu:var(--bleu-100);
  --fond-kraft:var(--kraft-100);
  --encre:var(--bleu-900);
  --texte-second:var(--ardoise-600);
  --action:var(--bleu-600);
  --action-survol:var(--bleu-900);
  --accent:var(--kraft-700);
  --matiere:var(--kraft-500);
  --filet:var(--bleu-200);
  --filet-kraft:var(--kraft-200);
  --filet-champ:var(--bleu-500);
  --sur-sombre:var(--ardoise-200);
  --sur-sombre-faible:var(--ardoise-300);
  --focus:var(--bleu-600);
  /* Les six teintes des dessins isométriques. Quatre sont les couleurs mêmes
     du logo, deux en sont dérivées : un cube fermé doit séparer ses deux
     flancs, et un creux doit se distinguer d'une face. */
  --dessin-1:var(--bleu-600);
  --dessin-2:var(--bleu-550);
  --dessin-3:var(--bleu-400);
  --dessin-4:var(--bleu-200);
  --dessin-5:var(--bleu-100);
  --dessin-6:var(--bleu-700);

  /* ---------- 3. ce que chaque composant consomme ---------- */
  --btn-fond:var(--action);
  --btn-texte:var(--blanc);
  --btn-bord:var(--action);
  --btn-fond-survol:var(--action-survol);
  --btn-haut:52px;
  --btn2-texte:var(--encre);
  --btn2-bord:var(--filet);
  --carte-fond:var(--blanc);  /* le blanc est réservé aux cartes et aux tableaux */
  --carte-bord:var(--filet);
  --carte-bord-survol:var(--bleu-400);
  --carte-image-fond:var(--kraft-100);
  --champ-bord:var(--filet-champ);
  --champ-bord-focus:var(--action);
  --champ-haut:50px;
  --pied-fond:var(--encre);
  --pied-texte:var(--sur-sombre);
  --pied-titre:var(--sur-sombre-faible);

  /* ---------- typographie et rythme ---------- */
  --titres:'Jost',system-ui,sans-serif;
  --texte:'Plex','IBM Plex Sans',system-ui,sans-serif;
  --t-h1:clamp(30px,3.9vw,54px);
  --t-h2:clamp(25px,3.3vw,42px);
  --t-h3:20px;
  --t-h4:17px;
  --t-corps:17px;
  --t-carte:16px;
  --t-etiquette:12px;
  --t-mention:13.5px;
  --t-sub:clamp(16px,1.2vw,18.5px);
  --t-h2-petit:22px;
  --t-kpi:clamp(28px,3.2vw,44px);
  --t-appel:clamp(26px,3vw,38px);
  --t-prose-h2:clamp(22px,2.4vw,30px);
  --t-prose-h3:19px;
  --t-nav:15px;
  --t-menu:19px;
  --t-btn:15.5px;
  --t-btn-sm:14px;
  --t-lien:14.5px;
  --t-tag:13px;
  --t-tel:16px;
  --t-micro:11px;
  --t-sur-titre:11.5px;
  --t-fleche:17px;
  --ombre-entete:rgba(16,36,58,.06);
  --ombre-cadre:0 1px 2px rgba(16,36,58,.05),0 10px 30px rgba(16,36,58,.07);
  --tiret-cadre:rgba(74,96,118,.35);
  --halo-focus:rgba(32,110,184,.15);
  --filet-pied:rgba(185,203,221,.24);
  --marge:clamp(18px,4vw,40px);
  --interligne:1.62;
  --serrage:-.02em;
  --rayon:0;
  --ease:cubic-bezier(.2,.8,.2,1);
  --duree:.3s;
  --e1:8px;  --e2:16px; --e3:24px; --e4:32px; --e5:48px;
  --largeur:1220px;
  --entete-fixe:66px;   /* hauteur de l'en-tête une fois condensé */
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;
 /* L'en-tête est collant : sans cette marge, toute arrivée sur une ancre pose
    le titre visé DERRIÈRE lui. `scroll-padding-top` vaut aussi bien pour un
    lien à fragment que pour un `scrollIntoView`, une ligne suffit donc. */
 scroll-padding-top:calc(var(--entete-fixe) + var(--e3))}
body{background:var(--fond);color:var(--encre);font-family:var(--texte);
 font-size:var(--t-corps);line-height:var(--interligne);-webkit-font-smoothing:antialiased;
 overflow-x:clip}
h1,h2,h3,h4{font-family:var(--titres);font-weight:600;line-height:1.08;letter-spacing:var(--serrage)}
h1{font-size:var(--t-h1)}
h2{font-size:var(--t-h2)}
h3{font-size:var(--t-h3);line-height:1.15}
h4{font-size:var(--t-h4);line-height:1.2}
a{color:inherit;text-decoration:none}
/* ---------- un lien dans du texte doit se voir sans la couleur ----------
   Le bleu de marque et l'encre ne sont séparés que par 2,98:1, le bleu et le
   texte secondaire par 1,23:1. Sous 3:1, la couleur ne suffit pas à distinguer
   un lien de ce qui l'entoure (WCAG 1.4.1) : à l'écran d'un daltonien, la
   phrase est uniforme. D'où le soulignement, sur les liens de texte courant
   seulement — la navigation, les boutons et les listes de liens se lisent déjà
   comme des liens par leur place. */
main :is(p,dd,li,.txt,.sub,.ment) a:not([class]){
 color:var(--action);text-decoration:underline;
 text-underline-offset:.18em;text-decoration-thickness:1px}
main :is(p,dd,li,.txt,.sub,.ment) a:not([class]):hover{
 color:var(--action-survol);text-decoration-thickness:2px}
/* Les numéros de téléphone de la page contact sont composés comme une donnée,
   pas comme un lien : rien ne disait qu'on pouvait les appeler. Ils gardent
   leur graisse et leurs chiffres tabulaires, et prennent le soulignement. */
.fiches .ml{text-decoration:underline;text-underline-offset:.18em;
 text-decoration-thickness:1px;text-decoration-color:var(--filet-champ)}
/* Le numéro reste composé comme une donnée : chiffres tabulaires, pas de
   soulignement au repos. Le trait n'apparaît qu'au survol et au focus — un
   visiteur au clavier a besoin de savoir où il est. */
.fiches .num:hover,.fiches .num:focus-visible,.fiches .ml:hover{color:var(--action);
 text-decoration:underline;text-underline-offset:.18em;
 text-decoration-thickness:2px;text-decoration-color:currentColor}
img{display:block;max-width:100%;height:auto}
::selection{background:var(--action);color:var(--blanc)}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.saut{position:absolute;left:var(--e2);top:-64px;z-index:90;background:var(--action);
 color:var(--blanc);padding:12px 18px;font-family:var(--titres);font-weight:600;
 transition:top var(--duree) var(--ease)}
.saut:focus{top:var(--e2)}

.w{max-width:var(--largeur);margin:0 auto;padding:0 var(--marge)}

/* ---------- boutons ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;background:var(--btn-fond);
 color:var(--btn-texte);border:2px solid var(--btn-bord);padding:14px var(--e3);
 min-height:var(--btn-haut);font-family:var(--titres);font-weight:600;font-size:var(--t-btn);
 cursor:pointer;border-radius:var(--rayon);
 transition:background var(--duree) var(--ease),border-color var(--duree) var(--ease),
            color var(--duree) var(--ease)}
.btn:hover{background:var(--btn-fond-survol);border-color:var(--btn-fond-survol)}
.btn:active{background:var(--btn-fond-survol);border-color:var(--btn-fond-survol)}
.btn[disabled],.btn[aria-disabled="true"]{background:var(--filet);border-color:var(--filet);
 color:var(--texte-second);cursor:not-allowed}
.btn.o{background:transparent;color:var(--btn2-texte);border-color:var(--btn2-bord)}
.btn.o:hover{background:transparent;color:var(--action);border-color:var(--action)}
.btn.sm{padding:10px var(--e2);min-height:44px;font-size:var(--t-btn-sm)}
.btn i{font-style:normal;font-size:var(--t-fleche);line-height:1;
 transition:transform var(--duree) var(--ease)}
.btn:hover i{transform:translateX(3px)}

/* ---------- en-tête, condensé au défilement ---------- */
/*  L'en-tête se condense de 98 à 66 px au défilement. Ce changement de
    hauteur a un effet de retour : la page raccourcit de 32 px, le navigateur
    corrige le défilement d'autant pour que le contenu ne saute pas, et la
    correction peut repasser sous le seuil qui avait déclenché le condensé.
    L'en-tête se déplie, la page rallonge, le navigateur recorrige : la barre
    tremble à un niveau précis du défilement. C'est ce que Nathan a filmé le
    9 septembre.
    Le remède est dans le script, pas ici : DEUX seuils au lieu d'un, écartés
    de 40 px, soit plus que les 32 px que l'en-tête gagne ou perd. La
    correction ne peut plus atteindre l'autre seuil. (`overflow-anchor:none`
    a été essayé et mesuré : sans effet sur ce défaut, il n'est pas resté.) */
header{position:sticky;top:0;z-index:60;background:var(--fond);
 border-bottom:1px solid var(--filet);transition:box-shadow var(--duree) var(--ease)}
header.fixe{box-shadow:0 1px 0 var(--filet),0 6px 18px var(--ombre-entete)}
.hd{display:flex;align-items:center;gap:var(--e3);min-height:98px;
 transition:min-height var(--duree) var(--ease)}
header.fixe .hd{min-height:var(--entete-fixe)}
/* Le logo du client, redessiné en vectoriel le 20 août d'après son PNG. La
   composition entière — marque et mot — est écrite une fois par page dans un
   bloc `defs` caché, puis appelée deux fois. La couleur est héritée : le pied
   de page reprend la même composition en blanc, marque à plat. */
.defs{position:absolute;width:0;height:0;overflow:hidden}
.marque{display:block}
.marque .lg{display:block;width:auto;height:70px;fill:currentColor;
 color:var(--bleu-600);transition:height var(--duree) var(--ease)}
header.fixe .marque .lg{height:48px}
/* Sous 70 px de haut, « CARTONNAGES DEPUIS 1955 » n'est plus qu'une trame :
   la ligne fait alors moins de cinq pixels. C'est le plancher du logo entier. */
@media(max-width:900px){.marque .lg{height:56px}
 header.fixe .marque .lg{height:44px}}
nav.mn{display:flex;gap:var(--e3);margin-left:auto;font-family:var(--titres);
 font-weight:500;font-size:var(--t-nav)}
nav.mn a{padding:6px 0;border-bottom:2px solid transparent;color:var(--texte-second);
 white-space:nowrap;transition:color var(--duree),border-color var(--duree)}
nav.mn a:hover{color:var(--encre);border-bottom-color:var(--bleu-400)}
nav.mn a[aria-current="page"]{color:var(--action);border-bottom-color:var(--action)}
.hd .tel{font-family:var(--titres);font-weight:600;font-size:var(--t-tel);white-space:nowrap}
.hd .tel span{display:block;font-family:var(--texte);font-weight:400;font-size:var(--t-micro);
 letter-spacing:.16em;text-transform:uppercase;color:var(--texte-second)}
.brg{display:none;margin-left:auto;width:46px;height:46px;background:none;
 border:1px solid var(--filet);color:var(--encre);cursor:pointer;position:relative;
 border-radius:var(--rayon)}
.brg span{position:absolute;left:12px;width:20px;height:2px;background:currentColor;
 transition:transform var(--duree) var(--ease),opacity .2s var(--ease)}
.brg span:nth-child(1){top:16px}.brg span:nth-child(2){top:22px}.brg span:nth-child(3){top:28px}
.brg[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.brg[aria-expanded="true"] span:nth-child(2){opacity:0}
.brg[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.mnav{display:none;border-bottom:1px solid var(--filet);background:var(--fond-bleu)}
.mnav.on{display:block}
.mnav a{display:flex;justify-content:space-between;align-items:center;padding:var(--e2) 0;
 border-bottom:1px solid var(--filet);font-family:var(--titres);font-weight:500;font-size:var(--t-menu);
 min-height:56px}
.mnav a:last-of-type{border-bottom:0}
.mnav a em{font-style:normal;color:var(--action);font-size:var(--t-btn-sm)}
.mnav .btn{width:100%;justify-content:center;margin:var(--e2) 0 var(--e3)}
@media(max-width:1080px){nav.mn,.hd .tel{display:none}.brg{display:block}}
@media(min-width:1081px){.mnav{display:none!important}}
@media(max-width:700px){.hd>.btn.sm{display:none}.hd .marque img{height:38px}}

/* ---------- fil d'Ariane ---------- */
.fil{background:var(--fond-bleu);border-bottom:1px solid var(--filet);
 font-size:var(--t-mention);color:var(--texte-second)}
.fil ol{list-style:none;display:flex;flex-wrap:wrap;gap:var(--e1);padding:12px 0}
.fil li::after{content:"›";margin-left:var(--e1);color:var(--bleu-400)}
.fil li:last-child::after{content:""}
.fil a:hover{color:var(--action)}
.fil [aria-current]{color:var(--encre);font-weight:500}

/* ---------- apparitions, tier « subtle » ---------- */
.rv{opacity:0;transform:translateY(8px);
 transition:opacity .3s var(--ease),transform .3s var(--ease)}
.rv.in{opacity:1;transform:none}
.grille>.rv:nth-child(1){transition-delay:0s}
.grille>.rv:nth-child(2){transition-delay:.03s}
.grille>.rv:nth-child(3){transition-delay:.06s}
.grille>.rv:nth-child(4){transition-delay:.09s}
.grille>.rv:nth-child(5){transition-delay:.12s}
.grille>.rv:nth-child(6){transition-delay:.15s}
.grille>.rv:nth-child(7){transition-delay:.18s}
.grille>.rv:nth-child(8){transition-delay:.21s}
@media(prefers-reduced-motion:reduce){
 .rv{opacity:1!important;transform:none!important;transition:none}
 html{scroll-behavior:auto}
 *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}}

/* ---------- cadres d'image en attente ---------- */
.cadre{position:relative;display:grid;place-items:center;text-align:center;
 background:var(--kraft-200);border:1px solid var(--filet-kraft);padding:var(--e3);
 border-radius:var(--rayon);overflow:hidden}
.cadre.photo{background:var(--fond-bleu);border-color:var(--filet)}
.carte .cadre,.carte .ph{background:var(--carte-image-fond)}
.carte .cadre.photo,.carte .ph.photo{background:var(--fond-bleu)}
.cadre::before{content:"";position:absolute;inset:10px;
 border:1px dashed var(--tiret-cadre);pointer-events:none}
/* ---------- la photographie posée ----------
   Deux natures, comme le veut la charte. Un PRODUIT est détouré : il se pose
   sur le kraft, en `contain`, avec de l'air autour — sur fond bleu le carton
   tire vers le sale, sur fond kraft il tire vers le neuf. Une SCÈNE est une
   photographie pleine : elle remplit son cadre en `cover`, sans marge. */
.ph{position:relative;display:block;margin:0;overflow:hidden;
 background:var(--carte-image-fond);border:1px solid var(--filet-kraft);
 border-radius:var(--rayon)}
.ph img{display:block;width:100%;height:100%;object-fit:contain;
 padding:var(--e2)}
.ph.photo{background:var(--fond-bleu);border-color:var(--filet)}
/* Un dessin isométrique remplit son cadre sans marge : il est déjà cadré. */
.ph.ds{background:var(--fond-kraft);display:grid;place-items:center;
 padding:var(--e3)}
.ph.ds svg{width:100%;height:100%}
.ph.ds .d1{fill:var(--dessin-1)}.ph.ds .d2{fill:var(--dessin-2)}
.ph.ds .d3{fill:var(--dessin-3)}.ph.ds .d4{fill:var(--dessin-4)}
.ph.ds .d5{fill:var(--dessin-5)}.ph.ds .d6{fill:var(--dessin-6)}

/* ---------- la carte Google, chargée au clic ----------
   Tant que le visiteur n'a rien demandé, le bloc ne contient que du texte :
   pas de requête vers Google, pas de cookie, donc pas de bannière. */
.gmap{position:relative;display:grid;place-items:center;overflow:hidden;
 background:var(--fond-kraft);border:1px solid var(--filet-kraft);
 border-radius:var(--rayon);text-align:center;padding:var(--e3)}
.gmap.on{padding:0;background:var(--encre)}
.gmap iframe{width:100%;height:100%;border:0;display:block}
.gmap-att{max-width:46ch;display:grid;gap:var(--e2);justify-items:center}
.gmap-att b{font-family:var(--titres);font-weight:600;font-size:var(--t-h4)}
.gmap-att p{font-size:var(--t-mention);color:var(--texte-second);margin:0}
.gmap-pied{margin-top:var(--e2);font-size:var(--t-mention)}
.gmap-pied a{color:var(--action)}
.gmap-pied a:hover{color:var(--action-survol)}
.ph.photo img{object-fit:cover;padding:0}

.cadre b{display:block;font-family:var(--titres);font-weight:600;font-size:var(--t-etiquette);
 letter-spacing:.16em;text-transform:uppercase;color:var(--texte-second);max-width:26ch;
 line-height:1.55}
.cadre em{display:block;font-style:normal;margin-top:var(--e1);font-size:var(--t-micro);
 letter-spacing:.1em;text-transform:uppercase;color:var(--matiere)}
.r-169{aspect-ratio:16/9}.r-1610{aspect-ratio:16/10}.r-43{aspect-ratio:4/3}
/* Bande large : un plan d'accès en pleine largeur, sans occuper un écran. */
.r-bande{aspect-ratio:24/7}
@media(max-width:700px){.r-bande{aspect-ratio:4/3}}
.r-54{aspect-ratio:5/4}.r-11{aspect-ratio:1/1}

/* ---------- bandeau d'ouverture ---------- */
.hero{border-bottom:1px solid var(--filet);
 --marge:max(clamp(18px,4vw,40px),calc((100vw - var(--largeur))/2 + clamp(18px,4vw,40px)))}
.hero-g{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:stretch}
/* Bandeau sans photographie : une seule colonne, mais le texte garde sa
   longueur de ligne. Une accroche qui court sur 1400 px ne se lit plus. */
.hero.plein .hero-g{grid-template-columns:1fr}
/* Le titre a droit à toute la largeur utile, le texte courant non : une ligne
   de soixante signes se lit, une ligne de cent quarante ne se lit plus. Les
   deux mesures sont donc réglées séparément. */
.hero.plein .hero-t{max-width:min(100%,62rem);padding-right:var(--marge)}
.hero.plein .hero-t .sub,.hero.plein .hero-t .txt{max-width:56ch}
.hero-t{padding:clamp(40px,5.4vw,84px) clamp(28px,3.6vw,60px) clamp(40px,5.4vw,84px) var(--marge);
 display:flex;flex-direction:column;justify-content:center}
.hero-im{min-height:clamp(280px,40vw,560px);padding:clamp(24px,3vw,48px)
 clamp(18px,4vw,40px) clamp(24px,3vw,48px) 0;display:flex}
.hero-im .cadre,.hero-im .ph{flex:1;aspect-ratio:auto;box-shadow:var(--ombre-cadre)}
/* Un dessin n'a pas besoin d'être encadré : il est déjà détouré, et un cadre
   autour d'un trait le fait passer pour une image posée. Dans un bandeau il
   respire, il ne remplit pas. */
.hero-im .ph.ds{background:transparent;border:0;box-shadow:none;padding:0}
/* Largeur ET hauteur imposées : un SVG à viewBox se met à l'échelle tout seul
   dans la boîte qu'on lui donne, et se centre. C'est ce qui met le coffret,
   qui est haut, et la palette, qui est large, au même poids visuel. */
.hero-im .ph.ds svg{width:min(78%,380px);height:min(62%,300px)}
.kick{font-family:var(--titres);font-weight:600;font-size:var(--t-etiquette);letter-spacing:.2em;
 text-transform:uppercase;color:var(--action);margin-bottom:var(--e2);
 padding-left:var(--e2);border-left:4px solid var(--action)}
.hero-t p.sub{margin-top:var(--e3);font-size:var(--t-sub);color:var(--texte-second);
 max-width:52ch}
.hero-t p.sub b{color:var(--encre);font-weight:600}
.hcta{margin-top:var(--e4);display:flex;gap:12px;flex-wrap:wrap}
@media(max-width:900px){
 .hero-g{grid-template-columns:1fr}
 .hero-t{padding:clamp(30px,7vw,52px) clamp(18px,4vw,40px)}
 .hero-im{order:-1;min-height:0;padding:clamp(18px,4vw,40px) clamp(18px,4vw,40px) 0}
 .hero-im .cadre,.hero-im .ph{aspect-ratio:16/10}}

/* ---------- sections ---------- */
/* Un seul fond pour toute la page. Les sections se séparent par un filet, pas
   par des blocs de couleur : c'est ce qui donnait sa tenue à la direction du
   19 août. Les deux classes historiques sont conservées pour ne pas casser les
   pages, mais ne posent plus de fond. */
.sec{padding:clamp(48px,6.2vw,96px) 0}
/*  Les pages qui commencent par une image d'ouverture ont leur propre respiration.
    Celles qui commencent directement par du texte — documents, mentions, CGV,
    plan du site, contact, remerciement — n'ont rien à laisser respirer au-dessus
    du titre : le grand pas du haut y devient un trou. On le réduit de moitié. */
main > .sec:first-child{padding-top:clamp(26px,3vw,44px)}
main>section+section{border-top:1px solid var(--filet-kraft)}
.sec.pale,.sec.papier{background:transparent}
.sec.pale .carte,.sec.papier .carte{background:var(--carte-fond)}
.sec-t{display:flex;align-items:flex-end;justify-content:space-between;
 gap:clamp(18px,3vw,40px);flex-wrap:wrap}
.sec-t .sec-h{flex:1 1 30ch}
.sec-h{display:grid;grid-template-columns:78px minmax(0,1fr);gap:clamp(16px,2.4vw,34px);
 align-items:start;max-width:960px}
.sec-h .no{font-family:var(--titres);font-weight:600;font-size:var(--t-tag);letter-spacing:.12em;
 color:var(--action);padding-top:var(--e1);border-top:4px solid var(--action)}
.sec-h p{margin-top:var(--e2);color:var(--texte-second);max-width:60ch}
.sec-h p b{color:var(--encre);font-weight:600}
@media(max-width:640px){.sec-h{grid-template-columns:1fr;gap:14px}
 .sec-h .no{display:inline-block;padding-right:20px}}

/* ---------- chiffres ---------- */
.kpi{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,3vw,48px);
 padding:clamp(26px,3vw,40px) 0;border-top:1px solid var(--filet-kraft);
 border-bottom:1px solid var(--filet-kraft)}
.kpi li{list-style:none}
.kpi v{display:block;font-family:var(--titres);font-weight:600;
 font-size:var(--t-kpi);color:var(--action);line-height:1;
 font-variant-numeric:tabular-nums}
.kpi p{margin-top:var(--e1);font-size:var(--t-carte);color:var(--texte-second);line-height:1.45}
@media(max-width:820px){.kpi{grid-template-columns:1fr 1fr;gap:var(--e4) var(--e3)}}

/* ---------- grilles et cartes ---------- */
.grille{display:grid;gap:clamp(14px,1.6vw,22px);margin-top:clamp(30px,3.6vw,52px)}
.g4{grid-template-columns:repeat(4,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g2{grid-template-columns:repeat(2,1fr)}
@media(max-width:1000px){.g4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:900px){.g3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.g3,.g4,.g2{grid-template-columns:1fr}}

.carte{border:1px solid var(--carte-bord);background:var(--carte-fond);display:flex;
 flex-direction:column;border-radius:var(--rayon);
 transition:border-color var(--duree) var(--ease)}
.carte:hover{border-color:var(--carte-bord-survol)}
.carte .im{border-bottom:1px solid var(--carte-bord)}
.carte .im .cadre,.carte .im .ph{border:0}
.carte .bd{padding:clamp(16px,1.5vw,22px);display:flex;flex-direction:column;flex:1}
.carte p{margin-top:9px;font-size:var(--t-carte);color:var(--texte-second);line-height:1.55}
.carte .lien{margin-top:auto;padding-top:var(--e2);font-family:var(--titres);font-weight:600;
 font-size:var(--t-lien);color:var(--action);display:inline-flex;gap:var(--e1);align-items:center}
.carte .lien i{font-style:normal;transition:transform var(--duree) var(--ease)}
.carte:hover .lien i{transform:translateX(4px)}
.carte ul.tags{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.carte ul.tags li{font-size:var(--t-tag);color:var(--texte-second);border:1px solid var(--carte-bord);
 padding:4px 9px}

/* ---------- caractéristiques ---------- */
.carac{width:100%;border-collapse:collapse;margin-top:14px;font-size:var(--t-carte)}
.carac th{text-align:left;font-family:var(--titres);font-weight:600;font-size:var(--t-micro);
 letter-spacing:.12em;text-transform:uppercase;color:var(--texte-second);
 padding:0 0 6px;border-bottom:1px solid var(--carte-bord)}
.carac td{padding:8px 0;border-bottom:1px solid var(--fond-bleu);vertical-align:top}
.carac td:first-child{color:var(--texte-second);width:44%}
.carac tr:last-child td{border-bottom:0}

/* ---------- tableaux de catalogue, en-tête collant ---------- */
.cat{width:100%;border-collapse:separate;border-spacing:0;margin-top:var(--e3);
 font-size:var(--t-carte);background:var(--carte-fond)}
.cat caption{text-align:left;font-family:var(--titres);font-weight:600;font-size:var(--t-h4);
 padding-bottom:var(--e2)}
.cat th,.cat td{border-bottom:1px solid var(--filet);padding:10px 14px;text-align:left}
.cat thead th{position:sticky;top:var(--entete-fixe);z-index:2;background:var(--encre);color:var(--blanc);
 font-family:var(--titres);font-weight:600;font-size:var(--t-etiquette);letter-spacing:.1em;
 text-transform:uppercase;border-bottom:0}
.cat tbody tr:nth-child(odd) td{background:var(--fond-bleu)}
.cat td:first-child{font-variant-numeric:tabular-nums;font-weight:500}
.cat td:nth-child(2){font-variant-numeric:tabular-nums}
/* `overflow` sur l'enveloppe créerait un conteneur de défilement et
   casserait l'en-tête collant : on ne l'active que sur petit écran. */
/*  `min-width:0` n'est pas décoratif : sans lui, le conteneur est un élément
    de grille, un élément de grille a `min-width:auto`, il ne peut donc pas
    devenir plus étroit que le tableau qu'il contient — et le défilement
    interne ne s'enclenche jamais. La page débordait de 263 px sur téléphone. */
.enveloppe-cat{overflow-x:visible;min-width:0}
.tables{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,44px);
 align-items:start;margin-top:clamp(30px,3.6vw,52px)}
/*  Chaque case de la grille doit pouvoir devenir plus étroite que son tableau,
    sinon le défilement interne posé plus bas ne s'enclenche jamais et c'est la
    PAGE qui se met à défiler de côté. */
.tables > *{min-width:0}
.tables .large{grid-column:1/-1}
.tables .cat{margin-top:0}
/* Contacts et horaires : le tableau de catalogue était fait pour trente-quatre
   références, pas pour cinq lignes et deux plages horaires. Ici, des filets et
   rien d'autre, comme les listes de définition du reste du site. */
.fiches{list-style:none;margin-top:var(--e3);border-top:1px solid var(--filet)}
.fiches li{display:grid;grid-template-columns:minmax(0,1fr) auto;
 gap:2px var(--e2);padding:14px 0;border-bottom:1px solid var(--filet)}
.fiches b{font-family:var(--titres);font-weight:600;font-size:var(--t-h4);
 grid-row:span 2;align-self:center}
.fiches .num{font-family:var(--titres);font-weight:600;font-size:var(--t-carte);
 color:var(--encre);text-align:right;font-variant-numeric:tabular-nums;
 white-space:nowrap}
.fiches .num:hover{color:var(--action)}
.fiches .ml{font-size:var(--t-mention);color:var(--texte-second);text-align:right;
 word-break:break-word}
.fiches .ml:hover{color:var(--action)}

.horaires{margin-top:var(--e3);display:grid;gap:var(--e3)}
.horaires h3{font-family:var(--titres);font-weight:600;font-size:var(--t-etiquette);
 letter-spacing:.14em;text-transform:uppercase;color:var(--action);
 padding-bottom:var(--e1);border-bottom:2px solid var(--action)}
/* Ces listes vivent dans un `.duo` : les règles de `.duo dt` et `.duo dd`
   s'y appliqueraient et ajouteraient un filet au-dessus et des marges. On les
   neutralise ici plutôt que de complexifier le sélecteur d'origine. */
/* Ces listes vivent dans un `.duo` : `.duo dt` et `.duo dd` s'y appliqueraient
   et ajouteraient un filet au-dessus, une graisse de titre et des marges. Le
   sélecteur est donc plus précis d'un cran pour reprendre la main. */
/* Le jour au-dessus de l'horaire, pas à côté : en deux colonnes étroites, une
   plage comme « 9 h – 12 h · 14 h – 17 h » se casse en deux lignes dès qu'elle
   partage la largeur avec son libellé. */
.horaires dl{display:block}
.horaires dl dt,.horaires dl dd{margin:0;border-top:0;text-align:left}
.horaires dl dt{padding:10px 0 0;font-family:var(--texte);font-weight:400;
 font-size:var(--t-mention);letter-spacing:.06em;text-transform:uppercase;
 color:var(--texte-second)}
.horaires dl dd{padding:2px 0 10px;font-size:var(--t-carte);color:var(--encre);
 font-variant-numeric:tabular-nums;border-bottom:1px solid var(--filet)}
.horaires dl dd:last-of-type{border-bottom:0}
.horaires .ferme{margin-top:var(--e2);font-size:var(--t-mention);color:var(--texte-second)}
@media(min-width:1081px){.horaires{grid-template-columns:1fr 1fr;gap:var(--e3)}
 .horaires .ferme{grid-column:1/-1;margin-top:0}}
@media(max-width:900px){.tables{grid-template-columns:1fr}}
@media(max-width:700px){.enveloppe-cat{overflow-x:auto}
 .cat thead th{position:static}}


/* ---------- deux colonnes ---------- */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,3.6vw,60px);align-items:center}
.duo.inv .duo-im{order:2}
.duo-im{border:1px solid var(--filet)}
.duo-im .cadre,.duo-im .ph{border:0}
.duo dl{margin-top:var(--e3)}
.duo dt{font-family:var(--titres);font-weight:600;font-size:var(--t-h4);padding-top:15px;
 border-top:1px solid var(--filet)}
.duo dd{margin:5px 0 15px;color:var(--texte-second);font-size:var(--t-carte)}
@media(max-width:880px){.duo{grid-template-columns:1fr}.duo.inv .duo-im{order:0}}

/* ---------- étapes ---------- */
.etapes{counter-reset:e;margin-top:clamp(30px,3.6vw,52px);border-top:1px solid var(--filet)}
.etapes li{list-style:none;counter-increment:e;display:grid;
 grid-template-columns:76px minmax(0,1fr) minmax(0,1.5fr);gap:clamp(14px,2.2vw,32px);
 padding:22px 0;border-bottom:1px solid var(--filet);align-items:baseline}
.etapes li::before{content:counter(e,decimal-leading-zero);font-family:var(--titres);
 font-weight:600;font-size:var(--t-nav);color:var(--action);font-variant-numeric:tabular-nums}
.etapes p{color:var(--texte-second);font-size:var(--t-carte)}
@media(max-width:760px){.etapes li{grid-template-columns:56px minmax(0,1fr);gap:14px}
 .etapes p{grid-column:2}}
/* En bref : les sept intitulés en bande, sans leurs contrôles. Le détail est
   sur la page de l'entreprise. */
.etapes.bref{display:grid;grid-template-columns:repeat(4,1fr);border-top:0;
 gap:1px;background:var(--filet-kraft);border:1px solid var(--filet-kraft)}
.etapes.bref li{display:block;background:var(--fond);border-bottom:0;
 padding:var(--e3) var(--e2)}
.etapes.bref li::before{display:block;margin-bottom:var(--e1)}
.etapes.bref h3{font-size:var(--t-h4)}
/* Sept cases dans une grille de quatre : la dernière prend la place restante
   pour ne pas laisser un trou. */
.etapes.bref li:last-child{grid-column:span 2}
@media(max-width:900px){.etapes.bref{grid-template-columns:repeat(2,1fr)}
 .etapes.bref li:last-child{grid-column:span 2}}
@media(max-width:520px){.etapes.bref{grid-template-columns:1fr}
 .etapes.bref li:last-child{grid-column:span 1}}

/* ---------- listes ---------- */
.refs{list-style:none;margin-top:12px;display:grid;gap:7px;font-size:var(--t-corps)}
/* Le carré se cale sur la hauteur de la première ligne : `top:50%` le
   centrerait sur tout le bloc, ce qui le fait descendre dès que la ligne
   passe sur deux niveaux. */
.refs li{padding-left:24px;position:relative;color:var(--texte-second)}
.refs li::before{content:"";position:absolute;left:0;top:0;width:9px;height:9px;
 margin-top:calc((1em * var(--interligne) - 9px) / 2);
 border:2px solid var(--bleu-400)}

/* ---------- appel de fin ---------- */
.appel{background:var(--encre);color:var(--blanc)}
/* `.in` est posé SUR le conteneur `.w`, pas dedans. Un raccourci `padding`
   avec `0` en horizontal effaçait donc la gouttière de `.w`, et tout le bloc
   d'appel courait quarante pixels plus à gauche et plus à droite que le reste
   du site — y compris que le pied juste dessous. La gouttière est rétablie,
   et par la variable : elle ne peut plus diverger. */
.appel .in{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.1fr;
 gap:clamp(24px,3.6vw,56px) clamp(20px,3vw,44px);
 align-items:center;padding:clamp(38px,5vw,72px) var(--marge)}
/* Les mêmes quatre pistes que le pied juste dessous : le texte tient les deux
   premières, les coordonnées les deux dernières. Avec une grille à part, la
   colonne de droite tombait à quinze pixels de la colonne du pied — assez pour
   se voir, trop peu pour ressembler à une intention. */
.appel .in > :first-child{grid-column:1/3}
.appel .in > .co{grid-column:3/5}
@media(max-width:820px){.appel .in{grid-template-columns:1fr}
 .appel .in > :first-child,.appel .in > .co{grid-column:auto}}
.appel p{margin-top:var(--e2);color:var(--sur-sombre);max-width:46ch}
.appel .co{display:flex;flex-direction:column;gap:12px}
.appel .co a.gros{font-family:var(--titres);font-weight:600;font-size:var(--t-appel);
 color:var(--blanc);font-variant-numeric:tabular-nums}
.appel .co a.gros span{display:block;font-family:var(--texte);font-weight:400;font-size:var(--t-micro);
 letter-spacing:.16em;text-transform:uppercase;color:var(--pied-titre);margin-bottom:4px}
.appel .btn{background:var(--blanc);color:var(--encre);border-color:var(--blanc);
 align-self:flex-start;margin-top:var(--e3)}
.appel .btn:hover{background:var(--action);border-color:var(--action);color:var(--blanc)}

/* ---------- formulaire ---------- */
.objet{border:0;padding:0;margin:0 0 var(--e3);min-width:0}
.objet legend{font-family:var(--titres);font-weight:600;font-size:var(--t-etiquette);
 letter-spacing:.12em;text-transform:uppercase;color:var(--texte-second);
 margin-bottom:var(--e2);padding:0}
.ajout{margin-top:10px}
.ajout[hidden]{display:none}
.frm .ajout label{display:flex;align-items:flex-start;gap:10px;margin:0;
 border:1px dashed var(--filet-champ);background:transparent;padding:13px 14px;
 font-family:var(--texte);font-weight:400;font-size:var(--t-carte);letter-spacing:0;
 text-transform:none;color:var(--encre);cursor:pointer;
 transition:border-color var(--duree) var(--ease),background var(--duree) var(--ease)}
.frm .ajout label:hover{border-color:var(--action)}
.frm .ajout label:has(input:checked){border-style:solid;border-color:var(--action);
 background:var(--fond-bleu)}
.frm .ajout input{appearance:none;-webkit-appearance:none;flex:none;width:18px;height:18px;
 min-height:0;padding:0;margin:2px 0 0;border:2px solid var(--champ-bord);
 background:var(--carte-fond)}
.frm .ajout input:checked{border-color:var(--action);background:var(--action);
 box-shadow:inset 0 0 0 3px var(--carte-fond)}
.frm .ajout input:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.frm .ajout em{display:block;font-style:normal;font-size:var(--t-mention);
 color:var(--texte-second);margin-top:2px}
.choix{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
/* Les sélecteurs sont préfixés par .frm : sans cela, la règle générique des
   champs de formulaire l'emporterait et étirerait les boutons radio. */
.frm .choix label{display:flex;align-items:center;gap:10px;margin:0;
 border:1px solid var(--champ-bord);background:var(--carte-fond);padding:13px 14px;
 min-height:var(--champ-haut);font-family:var(--texte);font-weight:400;
 font-size:var(--t-carte);letter-spacing:0;text-transform:none;color:var(--encre);
 cursor:pointer;transition:border-color var(--duree) var(--ease),
 background var(--duree) var(--ease)}
.frm .choix label:hover{border-color:var(--action)}
/* Ronds pour le choix exclusif, carré pour le complément : la forme dit déjà
   qu'on ne peut cocher qu'une seule ligne au-dessus. */
.frm .choix input{appearance:none;-webkit-appearance:none;flex:none;width:18px;height:18px;
 min-height:0;padding:0;margin:0;border:2px solid var(--champ-bord);
 background:var(--carte-fond);border-radius:50%}
.frm .choix input:checked{border-color:var(--action);background:var(--action);
 box-shadow:inset 0 0 0 3px var(--carte-fond)}
.frm .choix input:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.frm .choix label:has(input:checked){border-color:var(--action);background:var(--fond-bleu)}
@media(max-width:620px){.choix{grid-template-columns:1fr}}
.rappel-objet{border-left:4px solid var(--action);background:var(--fond-bleu);
 padding:12px 16px;margin-bottom:var(--e3);font-size:var(--t-carte);color:var(--texte-second)}
.rappel-objet b{color:var(--encre)}
.cases{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:6px}
.frm .cases label{display:flex;align-items:center;gap:10px;margin:0;
 font-family:var(--texte);font-weight:400;font-size:var(--t-carte);letter-spacing:0;
 text-transform:none;color:var(--texte-second);cursor:pointer}
.frm .cases input{appearance:none;-webkit-appearance:none;flex:none;width:18px;height:18px;
 min-height:0;padding:0;margin:0;border:2px solid var(--champ-bord);background:var(--carte-fond)}
.frm .cases input:checked{border-color:var(--action);background:var(--action);
 box-shadow:inset 0 0 0 3px var(--carte-fond)}
.frm .cases input:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
@media(max-width:620px){.cases{grid-template-columns:1fr}}
.volet[hidden]{display:none}
.sous{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.sous .ch2{grid-column:1/-1}
@media(max-width:620px){.sous{grid-template-columns:1fr}}
.etiq{display:block;font-family:var(--titres);font-weight:600;font-size:var(--t-etiquette);
 letter-spacing:.12em;text-transform:uppercase;color:var(--texte-second);margin-bottom:6px}
.frm .case-seule label{display:flex;align-items:center;gap:10px;font-family:var(--texte);
 font-weight:400;font-size:var(--t-carte);letter-spacing:0;text-transform:none;
 color:var(--texte-second);cursor:pointer;margin:0}
.frm .case-seule input{appearance:none;-webkit-appearance:none;flex:none;width:18px;height:18px;
 min-height:0;padding:0;margin:0;border:2px solid var(--champ-bord);background:var(--carte-fond)}
.frm .case-seule input:checked{border-color:var(--action);background:var(--action);
 box-shadow:inset 0 0 0 3px var(--carte-fond)}
.rappel-objet{border-left:4px solid var(--action);background:var(--fond-bleu);
 padding:12px 16px;margin-bottom:var(--e3);font-size:var(--t-carte);color:var(--texte-second)}
.rappel-objet b{color:var(--encre)}
.cases{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:6px}
.cases label{display:flex;align-items:center;gap:9px;font-size:var(--t-carte);
 color:var(--texte-second);cursor:pointer}
.cases input{appearance:none;-webkit-appearance:none;flex:none;width:16px;height:16px;
 border:2px solid var(--champ-bord);background:var(--carte-fond);margin:0}
.cases input:checked{border-color:var(--action);background:var(--action);
 box-shadow:inset 0 0 0 3px var(--carte-fond)}
.cases input:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
@media(max-width:620px){.cases{grid-template-columns:1fr}}
.frm{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:var(--e3);max-width:660px}
.frm .full{grid-column:1/-1}
.frm label{display:block;font-family:var(--titres);font-weight:600;font-size:var(--t-etiquette);
 letter-spacing:.12em;text-transform:uppercase;color:var(--texte-second);margin-bottom:6px}
.frm label .req{color:var(--accent)}
.frm input,.frm select,.frm textarea{width:100%;background:var(--blanc);
 border:1px solid var(--champ-bord);padding:13px 14px;font:inherit;font-size:var(--t-carte);
 color:var(--encre);min-height:var(--champ-haut);border-radius:var(--rayon)}
.frm input:focus,.frm select:focus,.frm textarea:focus{border-color:var(--champ-bord-focus);
 outline:none;box-shadow:0 0 0 3px var(--halo-focus)}
.frm textarea{min-height:120px;resize:vertical}
.frm .aide{font-size:var(--t-mention);color:var(--texte-second);margin-top:6px}
.frm .btn{justify-content:center}
.frm small{grid-column:1/-1;font-size:var(--t-mention);color:var(--texte-second)}
/*  Le piège à robots : hors de l'écran, hors du flux de tabulation, et
    `aria-hidden` sur le bloc. Ni vu ni lu par un visiteur, rempli par un
    robot — c'est tout ce qu'on lui demande. Pas de `display:none`, que
    certains robots savent détecter. */
.appat{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
/*  Le message de repli, quand l'envoi n'aboutit pas. Il porte le ton de
    l'avertissement, pas celui de l'erreur : la demande n'est pas perdue. */
.repli{grid-column:1/-1;border-left:3px solid var(--kraft-500);
 background:var(--kraft-100);padding:14px 16px;font-size:var(--t-carte)}
.repli p{margin:0;color:var(--texte)}
.repli a{color:var(--action);text-decoration:underline;text-underline-offset:.18em}
@media(max-width:620px){.frm{grid-template-columns:1fr}}

/* ---------- encadré ---------- */
.avalider{border-left:4px solid var(--matiere);background:var(--fond-kraft);
 padding:14px 18px;margin-top:var(--e3);font-size:var(--t-carte);color:var(--texte-second)}
.avalider b{color:var(--encre);font-weight:600}

/* ---------- prose ---------- */
/*  La colonne de lecture se borne à 70ch, mais par ses blocs : borner
    le conteneur le recentrait, et le texte des pages légales partait
    260 px à droite du logo et du pied. */
.prose > *{max-width:70ch}
.prose h2{font-size:var(--t-prose-h2);margin:var(--e5) 0 12px}
.prose h3{font-size:var(--t-prose-h3);margin:var(--e3) 0 var(--e1)}
.prose p,.prose li{color:var(--texte-second)}
.prose p{margin-bottom:14px}
.prose ul,.prose ol{margin:0 0 var(--e2) 20px}
.prose li{margin-bottom:7px}
.prose a{color:var(--action);border-bottom:1px solid var(--filet)}
.prose table{width:100%;border-collapse:collapse;margin:14px 0 var(--e3);font-size:var(--t-carte)}
.prose th,.prose td{border:1px solid var(--filet);padding:9px 12px;text-align:left}
.prose th{background:var(--fond-bleu);font-family:var(--titres);font-weight:600}

/*  Les deux articles des CGV imprimés en capitales au verso de la facture :
    la réserve de propriété et la clause attributive de compétence. Leur
    caractère apparent est ce qui les rend opposables, on ne le perd donc pas
    en les passant au web. Mais la mise en capitales est faite ICI et non dans
    le texte : un lecteur d'écran lit alors des mots et non des lettres
    épelées, et les capitales gardent leurs accents. L'interlettrage compense
    la perte de lisibilité propre aux capitales. */
.prose p.maj{text-transform:uppercase;letter-spacing:.02em;
 border-left:3px solid var(--kraft-500);padding-left:14px;color:var(--texte)}

/*  La ligne de renvoi sous une grille de cartes. */
.apres{margin:var(--e3) 0 0;font-size:var(--t-carte);color:var(--texte-second)}
.apres a{color:var(--action);border-bottom:1px solid var(--filet)}

/* ---------- les documents de conformité ---------- */
.docs{list-style:none;margin:var(--e3) 0 0;padding:0;display:grid;gap:14px;
 grid-template-columns:repeat(auto-fit,minmax(280px,1fr));max-width:none}
.docs > li{min-width:0;border:1px solid var(--filet);background:var(--carte-fond);
 padding:18px 20px;display:flex;flex-direction:column;gap:8px}
.docs h2.h3,.docs h3{margin:0;font-size:var(--t-prose-h3)}
.docs p{margin:0;font-size:var(--t-carte);color:var(--texte-second)}
.docs .qui{font-family:var(--titres);font-size:var(--t-etiquette);letter-spacing:.06em;
 text-transform:uppercase;color:var(--texte-second)}
.docs .tel{margin-top:auto;padding-top:var(--e2);display:flex;
 flex-wrap:wrap;align-items:center;gap:10px var(--e1)}
/*  `.prose a` est plus spécifique que `.btn` : sans cette ligne, le bouton
    reçoit la couleur des liens de texte — du bleu sur du bleu, et l'intitulé
    disparaît. C'est ce qui venait d'arriver. */
.docs .btn{color:var(--btn-texte);border-bottom:0}
.docs .btn:hover{color:var(--btn-texte)}
/*  La flèche du bouton ordinaire part vers la droite au survol : elle annonce
    « on vous emmène ailleurs ». Celle-ci descend, et elle descend un peu plus
    au survol : c'est un fichier qui vient chez vous. */
.docs .btn i.bas{transform:none}
.docs .btn:hover i.bas{transform:translateY(3px)}
.docs .pds{color:var(--texte-second);font-size:var(--t-etiquette);
 letter-spacing:.02em}

/* ---------- utilitaires, pour ne pas écrire de style en ligne ---------- */
.pb0{padding-bottom:0}
.mt3{margin-top:var(--e3)}
.mt4{margin-top:var(--e4)}
.m18{max-width:18ch}.m20{max-width:20ch}.m58{max-width:58ch}.m60{max-width:60ch}
.haut{align-items:start}
.h2s{font-size:var(--t-h2-petit)}
.txt{color:var(--texte-second);margin-top:var(--e2)}
.txt b{color:var(--encre);font-weight:600}
.sub.plein{margin-top:var(--e3);color:var(--texte-second);font-size:var(--t-sub)}
.bloc{display:block;margin-top:var(--e3)}
.mail{font-size:var(--t-h3)}
.ac{display:inline;padding:2px var(--e1);margin:0;border-left-width:3px}

/* ---------- pied ---------- */
footer{background:var(--pied-fond);color:var(--pied-texte);
 padding:clamp(40px,4.6vw,68px) 0 26px;font-size:var(--t-carte)}
.ft{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.1fr;gap:clamp(20px,3vw,44px)}
footer h2.h4,footer h4{font-family:var(--titres);font-weight:600;font-size:var(--t-sur-titre);letter-spacing:.15em;
 text-transform:uppercase;color:var(--pied-titre);margin-bottom:14px}
footer ul{list-style:none;display:grid;gap:9px}
footer a:hover{color:var(--blanc)}
footer .marque .lg{color:var(--blanc);height:96px;margin-bottom:var(--e2)}
footer .marque .mot b{color:var(--blanc)}
footer .marque .mot i{color:var(--pied-titre)}
footer .baseline{margin-top:14px;max-width:32ch}
footer .region .cadre{background:transparent;border-color:var(--filet-pied);
 padding:12px;aspect-ratio:16/6}
footer .region .cadre::before{border-color:var(--filet-pied)}
footer .region .cadre b{color:var(--sur-sombre)}
footer .region .cadre em{display:none}
/* Le bas du pied reprend LA MÊME grille que les quatre colonnes au-dessus.
   En `space-between`, ses trois blocs se répartissaient tout seuls et ne
   tombaient sous aucune colonne : rien n'était aligné verticalement. Les
   mentions légales occupent les deux colonnes du milieu, la signature la
   dernière. */
footer .bas{margin-top:clamp(28px,3.4vw,46px);padding-top:20px;
 border-top:1px solid var(--filet-pied);display:grid;
 grid-template-columns:1.5fr 1fr 1fr 1.1fr;gap:10px clamp(20px,3vw,44px);
 font-size:var(--t-mention);color:var(--pied-titre)}
footer .bas > :nth-child(2){grid-column:2/4}
footer .bas a{border-bottom:1px solid var(--filet-pied)}
/* Repère de version : permet de reconnaître d'un coup d'œil quelle livraison
   on a sous les yeux quand plusieurs cohabitent dans un dossier. */
footer .tampon{display:block;margin-top:4px;color:var(--pied-titre);font-size:var(--t-micro);
 letter-spacing:.1em;text-transform:uppercase}
@media(max-width:880px){.ft,footer .bas{grid-template-columns:1fr 1fr}
 footer .bas > :nth-child(2){grid-column:auto}}
@media(max-width:520px){.ft,footer .bas{grid-template-columns:1fr}}