/* ==========================================================================
   Studio Neuf. — direction « Épreuve »
   Feuille de styles unique, partagée par toutes les pages.
   Quatre interdits tenus : aucune ombre portée, aucun dégradé,
   aucun arrondi sauf boutons pilule, jamais de texte courant en repérage.
   L'interdit « un seul accent par page » est levé le 19/09/2026 au profit
   du mouvement : le repérage sert aussi de couleur d'état et de trace.
   ========================================================================== */

:root{
  /* couleur — thème clair */
  --papier:#EDEBE5;
  --papier-2:#F5F3EE;
  --encre:#16161A;
  --encre-2:#4A4A50;
  --encre-3:#6C6A64;
  --filet:#C9C6BC;
  --filet-fort:#847F76;
  --reperage:#0F4C81;
  --sur-reperage:#FFFFFF;

  /* échelle typographique — rien entre les crans */
  --t-xs:.75rem;
  --t-sm:.875rem;
  --t-md:1rem;
  --t-lg:1.25rem;
  --t-xl:1.75rem;
  --t-2xl:2.5rem;
  --t-3xl:3.5rem;
  --t-4xl:5rem;

  /* grille */
  --max:1340px;
  --marge:clamp(20px,5vw,72px);
  --gouttiere:24px;
  /* Une seule échelle verticale. Trois pas, un seul rapport : les écarts ne
     se croisent plus quand on redimensionne la fenêtre. */
  --bande-l:clamp(64px,10vw,132px);
  --bande-m:clamp(38px,6vw,79px);
  --bande-s:clamp(26px,4vw,53px);
  --section:var(--bande-l);
  --nav-h:63px;

  /* mouvement */
  --vite:.22s;
  --moyen:.55s;
  --lent:.9s;
  --courbe:cubic-bezier(.22,.61,.36,1);
  --masque:cubic-bezier(.16,1,.3,1);

  /* variables pilotées par app.js */
  --avancement:0;
  --derive:0px;
}

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --papier:#141416;
    --papier-2:#1C1C1E;
    --encre:#EDEBE5;
    --encre-2:#B4B2AC;
    --encre-3:#8A8880;
    --filet:#2C2C2E;
    --filet-fort:#726F69;
    --reperage:#5FA8D8;
    --sur-reperage:#141416;
  }
}
:root[data-theme="dark"]{
  --papier:#141416;
  --papier-2:#1C1C1E;
  --encre:#EDEBE5;
  --encre-2:#B4B2AC;
  --encre-3:#8A8880;
  --filet:#2C2C2E;
  --filet-fort:#726F69;
  --reperage:#5FA8D8;
  --sur-reperage:#141416;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--nav-h) + 20px);
}
body{
  background:var(--papier);
  color:var(--encre);
  font-family:'Geist',system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:var(--t-md);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,svg,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,textarea,select{font-family:inherit;font-size:inherit;color:inherit}

h1,h2,h3,h4{
  font-family:'Fraunces',Georgia,"Times New Roman",serif;
  font-weight:600;
  font-variation-settings:"SOFT" 0,"WONK" 0;
  line-height:1.02;
  letter-spacing:-.02em;
  text-wrap:balance;
}
h1{font-size:clamp(2.2rem,6vw,var(--t-4xl))}
h2{font-size:clamp(1.75rem,4vw,var(--t-2xl))}
h3{font-size:clamp(1.25rem,2.2vw,var(--t-xl))}
h4{font-size:var(--t-lg)}

.mono,.libelle,.folio,.prix{
  font-family:'Geist Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
}
.libelle{
  font-size:var(--t-xs);
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--reperage);
}
.libelle-gris{color:var(--encre-3)}
.folio{font-size:var(--t-xs);letter-spacing:.08em;color:var(--encre-3)}

p{max-width:70ch}
.chapo{font-size:clamp(1.05rem,1.5vw,1.2rem);color:var(--encre-2);max-width:62ch;line-height:1.5}
.courant{color:var(--encre-2)}
.petit{font-size:var(--t-sm);color:var(--encre-3);line-height:1.5}

strong,b{font-weight:600;color:var(--encre)}
em{font-style:italic}
code{font-family:'Geist Mono',ui-monospace,monospace;font-size:.88em}

.contenu{max-width:var(--max);margin:0 auto;padding-inline:var(--marge);position:relative;z-index:1}
section{padding-block:var(--bande-l)}
/* La marge du premier et du dernier enfant s'ajoutait au remplissage : c'est
   ce qui donnait 268, 269 et 272 là où la règle disait 264. */
section > :first-child{margin-top:0}
section > :last-child{margin-bottom:0}
section.serre{padding-block:var(--bande-m)}
.filet{height:1px;background:var(--filet);border:0}

/* ---------- lien d'évitement ---------- */
.evitement{
  position:absolute;left:var(--marge);top:0;z-index:200;
  transform:translateY(-140%);
  background:var(--encre);color:var(--papier);
  font-family:'Geist Mono',ui-monospace,monospace;font-size:var(--t-xs);
  letter-spacing:.08em;text-transform:uppercase;
  padding:12px 18px;border-radius:999px;
  transition:transform var(--vite) var(--courbe);
}
.evitement:focus-visible{transform:translateY(14px)}

/* ---------- trame de repérage, dérive au défilement ---------- */
.trame{
  position:fixed;inset:-10vh 0;z-index:0;pointer-events:none;
  opacity:.42;
  transform:translate3d(0,var(--derive),0);
  will-change:transform;
}
/* Une marque de calage se tire dans la couleur de repérage. C'est la seule
   raison pour laquelle cet accent existe, autant qu'elle se voie. */
.trame span{position:absolute;width:22px;height:22px}
.trame span::before,.trame span::after{content:"";position:absolute;background:var(--reperage)}
.trame span::before{left:0;right:0;top:50%;height:1px}
.trame span::after{top:0;bottom:0;left:50%;width:1px}
.trame span:nth-child(1){top:12vh;left:3vw}
.trame span:nth-child(2){top:46vh;right:4vw}
.trame span:nth-child(3){bottom:16vh;left:8vw}
.trame span:nth-child(4){top:72vh;right:14vw}
@media (max-width:760px){.trame span:nth-child(4),.trame span:nth-child(3){display:none}}

/* ---------- barre d'avancement ---------- */
.avancement{
  position:fixed;top:0;left:0;right:0;height:2px;z-index:101;
  background:var(--reperage);
  transform:scaleX(var(--avancement));transform-origin:left;
  will-change:transform;
}

/* ---------- navigation ---------- */
.nav{
  position:sticky;
  top:env(safe-area-inset-top,0px);
  z-index:100;
  background:color-mix(in srgb,var(--papier) 90%,transparent);
  backdrop-filter:saturate(150%) blur(16px);
  -webkit-backdrop-filter:saturate(150%) blur(16px);
  border-bottom:1px solid var(--filet);
  transition:transform var(--moyen) var(--courbe),border-color var(--moyen);
}
.nav.repliee{transform:translateY(-102%)}
.nav-inner{
  max-width:var(--max);margin:0 auto;
  padding:14px var(--marge);
  display:flex;align-items:center;justify-content:space-between;gap:20px;
}
.marque{display:inline-flex;align-items:center;gap:10px;font-size:var(--t-sm);font-weight:500;letter-spacing:-.01em;flex:none}
.marque svg{transition:transform var(--moyen) var(--courbe)}
.marque:hover svg{transform:rotate(225deg)}
.nav-liens{display:flex;gap:28px;align-items:center}
.nav-liens a{
  position:relative;font-size:var(--t-sm);color:var(--encre-2);
  padding-block:4px;transition:color var(--vite);
}
.nav-liens a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--reperage);transform:scaleX(0);transform-origin:right;
  transition:transform var(--moyen) var(--courbe);
}
.nav-liens a:hover{color:var(--encre)}
.nav-liens a:hover::after{transform:scaleX(1);transform-origin:left}
.nav-liens a[aria-current="page"]{color:var(--encre)}
.nav-liens a[aria-current="page"]::after{transform:scaleX(1)}
.nav-droite{display:flex;align-items:center;gap:6px}
.bouton-theme{width:44px;height:44px;display:grid;place-items:center;color:var(--encre-2);transition:color var(--vite)}
.bouton-theme:hover{color:var(--encre)}
.bouton-theme svg{width:16px;height:16px;transition:transform var(--moyen) var(--courbe)}
.bouton-theme:hover svg{transform:rotate(-30deg)}
.bouton-theme .lune{display:none}
:root[data-theme="dark"] .bouton-theme .soleil{display:none}
:root[data-theme="dark"] .bouton-theme .lune{display:block}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .bouton-theme .soleil{display:none}
  :root:not([data-theme="light"]) .bouton-theme .lune{display:block}
}
.burger{display:none;flex-direction:column;justify-content:center;align-items:center;gap:5px;width:44px;height:44px}
.burger span{display:block;width:18px;height:1.5px;background:currentColor;transition:transform var(--vite),opacity var(--vite);transform-origin:center}
.burger.ouvert span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.burger.ouvert span:nth-child(2){opacity:0}
.burger.ouvert span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
@media (max-width:900px){
  .nav-liens{display:none}
  .burger{display:flex}
}
.menu{
  display:none;position:fixed;inset:0;z-index:99;background:var(--papier);
  padding:88px var(--marge) 40px;flex-direction:column;overflow-y:auto;
}
.menu.ouvert{display:flex}
.menu a{
  font-family:'Fraunces',Georgia,serif;font-size:clamp(1.75rem,7vw,2.5rem);font-weight:600;
  letter-spacing:-.02em;padding-block:18px;border-bottom:1px solid var(--filet);
  opacity:0;transform:translateY(14px);
  transition:opacity var(--moyen) var(--courbe),transform var(--moyen) var(--masque),color var(--vite);
}
.menu.ouvert a{opacity:1;transform:none;transition-delay:calc(60ms * var(--i,0))}
.menu a:hover{color:var(--reperage)}

/* ---------- boutons ---------- */
.btn{
  position:relative;overflow:hidden;isolation:isolate;
  display:inline-flex;align-items:center;gap:10px;
  padding:14px 24px;border-radius:999px;
  font-size:var(--t-sm);font-weight:500;line-height:1;
  border:1px solid transparent;white-space:nowrap;
  transition:color var(--moyen) var(--courbe),border-color var(--moyen) var(--courbe);
}
.btn::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:var(--reperage);
  transform:scaleY(0);transform-origin:bottom;
  transition:transform var(--moyen) var(--masque);
}
.btn:hover::before,.btn:focus-visible::before{transform:scaleY(1)}
/* Le bouton principal porte l'accent au repos : c'est la plus grande surface
   colorée d'une page courante. Au survol, l'encre le recouvre. */
.btn-plein{background:var(--reperage);color:var(--sur-reperage);border-color:var(--reperage)}
.btn-plein::before{background:var(--encre)}
.btn-plein:hover,.btn-plein:focus-visible{border-color:var(--encre);color:var(--papier)}
.btn-vide{border-color:var(--filet-fort);color:var(--encre)}
.btn-vide:hover,.btn-vide:focus-visible{border-color:var(--reperage);color:var(--sur-reperage)}
.btn .fleche{transition:transform var(--moyen) var(--courbe)}
.btn:hover .fleche{transform:translateX(5px)}
.lien-fleche{
  position:relative;display:inline-flex;align-items:center;gap:8px;
  font-size:var(--t-sm);color:var(--reperage);padding-bottom:2px;
}
.lien-fleche::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:right;
  transition:transform var(--moyen) var(--courbe);
}
.lien-fleche:hover::after,a:hover .lien-fleche::after,.lien-fleche:focus-visible::after{transform:scaleX(1);transform-origin:left}

/* ---------- en-tête de page ---------- */
.entete{padding-block:var(--bande-l) var(--bande-m);border-bottom:1px solid var(--filet)}
.entete h1{margin-top:16px;max-width:17ch}
/* titre de garde de l'accueil : corps d'affiche, interlettrage serré */
.entete h1.affiche{
  font-size:clamp(2.6rem,8.6vw,8rem);line-height:.95;letter-spacing:-.03em;
  max-width:16ch;margin-top:20px;text-wrap:balance;
}
.entete h1.affiche .ligne-mq{padding-bottom:.08em}
.entete .chapo{margin-top:22px}
.entete-pied{
  display:flex;flex-wrap:wrap;gap:10px 32px;
  margin-top:32px;padding-top:18px;position:relative;
}
.entete-pied::before{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;background:var(--filet);
  transform:scaleX(0);transform-origin:left;transition:transform var(--lent) var(--courbe) .35s;
}
.vu .entete-pied::before,.entete-pied.vu::before{transform:none}
.entete-pied span{font-family:'Geist Mono',ui-monospace,monospace;font-size:var(--t-xs);color:var(--encre-3)}
.entete-pied b{color:var(--reperage);font-weight:400}

.titre-section{
  display:flex;gap:18px;align-items:baseline;
  padding-bottom:20px;margin-bottom:40px;position:relative;
}
.titre-section::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--filet);
  transform:scaleX(0);transform-origin:left;transition:transform var(--lent) var(--courbe) .1s;
}
.vu .titre-section::after{transform:none}
.titre-section h2{max-width:24ch}
.titre-section .folio{color:var(--reperage)}

/* ---------- grilles ---------- */
.grille{display:grid;gap:var(--gouttiere)}
.g2{grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(248px,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}

.bloc{
  border:1px solid var(--filet);padding:22px 24px;background:var(--papier-2);
  transition:border-color var(--moyen) var(--courbe),transform var(--moyen) var(--courbe);
}
.bloc:hover{border-color:var(--filet-fort)}
.bloc h3,.bloc h4{margin-bottom:10px}
.bloc h3{font-size:var(--t-lg)}
.bloc p{font-size:var(--t-sm);color:var(--encre-2)}
.bloc-accent{border-left:3px solid var(--reperage)}

/* ---------- listes ---------- */
ul.liste{list-style:none;display:flex;flex-direction:column;gap:12px}
ul.liste li{position:relative;padding-left:26px;color:var(--encre-2);max-width:70ch}
ul.liste li::before{
  content:"";position:absolute;left:0;top:.62em;
  width:9px;height:1px;background:var(--reperage);
  transform:scaleX(0);transform-origin:left;
  transition:transform var(--moyen) var(--courbe);
}
.vu ul.liste li::before{transform:none;transition-delay:calc(70ms * var(--i,0))}
ul.compte{list-style:none;counter-reset:n;display:flex;flex-direction:column}
ul.compte li{
  counter-increment:n;display:flex;gap:16px;
  padding-block:14px;border-top:1px solid var(--filet);
  font-size:var(--t-sm);color:var(--encre-2);
  transition:color var(--vite),padding-left var(--moyen) var(--courbe);
}
ul.compte li:hover{color:var(--encre);padding-left:8px}
ul.compte li:last-child{border-bottom:1px solid var(--filet)}
ul.compte li::before{
  content:counter(n,decimal-leading-zero);
  font-family:'Geist Mono',ui-monospace,monospace;font-size:var(--t-xs);
  color:var(--encre-3);flex:none;width:22px;padding-top:2px;
  transition:color var(--vite);
}
ul.compte li:hover::before{color:var(--reperage)}

/* ---------- catalogue et titres ---------- */
.catalogue{display:flex;flex-direction:column;border-top:1px solid var(--encre)}
.titre-carte{
  display:grid;grid-template-columns:1fr;gap:20px;
  padding:clamp(32px,5vw,52px) clamp(12px,2vw,24px);
  border-bottom:1px solid var(--filet);
  position:relative;isolation:isolate;
  transition:color var(--moyen) var(--courbe),padding-left var(--moyen) var(--courbe);
}
.titre-carte::before{
  content:"";position:absolute;inset:0;z-index:-1;background:var(--encre);
  transform:scaleY(0);transform-origin:bottom;
  transition:transform var(--moyen) var(--masque);
}
.titre-carte:hover::before,.titre-carte:focus-visible::before{transform:scaleY(1)}
.titre-carte:hover,.titre-carte:focus-visible{color:var(--papier);padding-left:clamp(20px,3vw,40px)}
.titre-carte:hover .folio,.titre-carte:hover .desc,.titre-carte:hover .note,
.titre-carte:hover .nom,.titre-carte:hover .lien-fleche{color:var(--papier)}
.titre-carte:hover .folio,.titre-carte:hover .note{opacity:.68}
@media (min-width:900px){.titre-carte{grid-template-columns:1.35fr .9fr;gap:48px;align-items:start}}
.titre-carte .ligne{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:18px}
.titre-carte .nom{
  font-family:'Fraunces',Georgia,serif;font-weight:600;
  font-size:clamp(2rem,5vw,3.5rem);letter-spacing:-.025em;line-height:1;
  transition:color var(--moyen) var(--courbe);
}
.titre-carte .desc{font-size:var(--t-sm);color:var(--encre-2);max-width:52ch;margin-top:14px;transition:color var(--moyen)}
.titre-carte .note{font-size:var(--t-sm);color:var(--encre-2);max-width:34ch;transition:color var(--moyen)}

/* vignette d'un titre — emplacement d'image */
.vignette{
  position:relative;overflow:hidden;background:var(--papier-2);
  border:1px solid var(--filet);aspect-ratio:16/10;
}
.vignette img,.vignette video{
  width:100%;height:100%;object-fit:cover;object-position:top center;
  transition:transform var(--lent) var(--masque),filter var(--moyen);
}
/* au survol la capture grossit et, si app.js pose --px/--py (souris seulement),
   glisse de quelques pour cent vers le curseur. Sans JS : zoom seul. */
.titre-carte:hover .vignette img,.titre-carte:hover .vignette video{
  transform:translate(calc(var(--px,0) * 1%),calc(var(--py,0) * 1%)) scale(1.07);
}
.vignette::after{
  content:"";position:absolute;inset:0;background:var(--papier);
  transform:scaleY(1);transform-origin:top;
  transition:transform var(--lent) var(--masque) .15s;
}
.vu .vignette::after{transform:scaleY(0)}
.vignette-vide{
  display:grid;place-items:center;text-align:center;padding:20px;
  font-family:'Geist Mono',ui-monospace,monospace;font-size:var(--t-xs);
  letter-spacing:.06em;color:var(--encre-3);line-height:1.6;
}
.vignette-vide::after{display:none}

.fiche-meta{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  border-top:1px solid var(--filet);border-left:1px solid var(--filet);margin-block:36px;
}
.fiche-meta div{padding:14px 16px;border-right:1px solid var(--filet);border-bottom:1px solid var(--filet);transition:background var(--vite)}
.fiche-meta div:hover{background:var(--papier-2)}
.fiche-meta dt{font-family:'Geist Mono',ui-monospace,monospace;font-size:var(--t-xs);letter-spacing:.08em;text-transform:uppercase;color:var(--encre-3);margin-bottom:5px}
.fiche-meta dd{font-size:var(--t-sm);color:var(--encre)}

.fiche-corps{max-width:68ch;display:flex;flex-direction:column;gap:32px}
.fiche-corps h2{font-size:clamp(1.25rem,2.2vw,var(--t-xl))}
.fiche-corps h2{padding-top:24px;border-top:1px solid var(--filet)}
.fiche-corps h2+p{margin-top:12px}
.fiche-corps p+p{margin-top:12px}
.fiche-corps p{color:var(--encre-2)}

/* figure et légende — emplacements d'images dans le corps */
figure{margin-block:8px}
figure .cadre{border:1px solid var(--filet);background:var(--papier-2);overflow:hidden}
figure img,figure video{width:100%;height:auto}
figcaption{
  font-family:'Geist Mono',ui-monospace,monospace;font-size:var(--t-xs);
  letter-spacing:.04em;color:var(--encre-3);margin-top:10px;line-height:1.6;
}
.attente{
  aspect-ratio:16/9;display:grid;place-items:center;text-align:center;padding:24px;
  font-family:'Geist Mono',ui-monospace,monospace;font-size:var(--t-xs);
  letter-spacing:.06em;color:var(--encre-3);line-height:1.7;
  border:1px dashed var(--filet-fort);background:var(--papier-2);
}

/* planche de titres : la bande d'aperçus sous le héros */
.planche{
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:1px;background:var(--filet);border:1px solid var(--filet);
}
@media (min-width:980px){.planche{grid-template-columns:repeat(4,1fr)}}
.planche a{display:flex;height:100%}
.planche figure{margin:0;background:var(--papier);display:flex;flex-direction:column;width:100%}
.planche figcaption{margin-top:auto}
.planche .cadre{border:0;background:var(--papier-2)}
.planche figcaption{padding:12px 14px 14px;margin-top:0}
.planche a{transition:background var(--moyen)}
.planche a:hover{background:var(--papier-2)}
.planche a:hover img{transform:translate(calc(var(--px,0) * 1%),calc(var(--py,0) * 1%)) scale(1.07)}
.planche img{transition:transform var(--moyen) var(--courbe)}

/* portrait et images de corps */
.portrait{max-width:420px}
@media (min-width:900px){.portrait.colle{position:sticky;top:calc(var(--nav-h) + 28px)}}
.visuel-large{margin-block:8px 0}
.duo-visuel{display:grid;gap:var(--gouttiere);grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.vignette-vide span{display:block}

/* ---------- offres ---------- */
.offres{display:grid;grid-template-columns:1fr;border-top:1px solid var(--filet)}
@media (min-width:900px){.offres{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1180px){.offres{grid-template-columns:repeat(3,1fr)}}
.offre{
  padding:32px 28px;border-bottom:1px solid var(--filet);border-right:1px solid var(--filet);
  display:flex;flex-direction:column;gap:18px;position:relative;
  transition:background var(--moyen) var(--courbe);
}
.offre::before{
  content:"";position:absolute;left:-1px;top:0;bottom:0;width:2px;background:var(--reperage);
  transform:scaleY(0);transform-origin:top;
  transition:transform var(--moyen) var(--masque);
}
.offre:hover{background:var(--papier-2)}
.offre:hover::before{transform:scaleY(1)}
.offre .nom{font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:var(--t-xl);letter-spacing:-.02em;line-height:1}
.offre .montant{font-family:'Geist Mono',ui-monospace,monospace;font-size:1.75rem;letter-spacing:-.02em;color:var(--encre);font-variant-numeric:tabular-nums}
.offre .montant small{font-size:var(--t-xs);color:var(--encre-3);letter-spacing:.06em;text-transform:uppercase;margin-left:6px}
.offre .desc{font-size:var(--t-sm);color:var(--encre-2)}
.offre ul{list-style:none;display:flex;flex-direction:column;margin-top:auto}
.offre ul li{font-size:var(--t-sm);padding-block:9px;border-top:1px solid var(--filet);color:var(--encre-2)}
.offre .delai{font-family:'Geist Mono',ui-monospace,monospace;font-size:var(--t-xs);color:var(--reperage);letter-spacing:.04em}


.tableau-enveloppe{overflow-x:auto;border:1px solid var(--filet);background:var(--papier-2)}
table{border-collapse:collapse;width:100%;min-width:560px;font-size:var(--t-sm)}
th,td{text-align:left;padding:12px 16px;border-bottom:1px solid var(--filet);vertical-align:top}
thead th{
  font-family:'Geist Mono',ui-monospace,monospace;font-size:var(--t-xs);
  letter-spacing:.08em;text-transform:uppercase;color:var(--encre-3);font-weight:400;
}
tbody tr{transition:background var(--vite)}
tbody tr:hover{background:var(--papier)}
tbody tr:last-child td{border-bottom:none}
td.n,th.n{text-align:right;font-variant-numeric:tabular-nums;font-family:'Geist Mono',ui-monospace,monospace;white-space:nowrap}
td{color:var(--encre-2)}
caption{caption-side:bottom;text-align:left;padding:12px 16px;font-size:var(--t-xs);color:var(--encre-3);border-top:1px solid var(--filet)}

/* ---------- formulaire ---------- */
.formulaire{display:flex;flex-direction:column;gap:18px}
.champ{display:flex;flex-direction:column;gap:7px}
.champ label{
  font-family:'Geist Mono',ui-monospace,monospace;font-size:var(--t-xs);
  letter-spacing:.08em;text-transform:uppercase;color:var(--encre-3);
  transition:color var(--vite);
}
.champ input,.champ select,.champ textarea{
  background:var(--papier-2);
  border:1px solid var(--filet-fort);
  border-radius:0;
  padding:13px 14px;
  min-height:48px;
  font-size:var(--t-md);
  transition:border-color var(--vite),background var(--vite);
}
.champ textarea{resize:vertical;min-height:8rem;line-height:1.5}
.champ input:hover,.champ select:hover,.champ textarea:hover{border-color:var(--encre-2)}
.champ input:focus,.champ select:focus,.champ textarea:focus{border-color:var(--reperage)}
.champ:focus-within label{color:var(--reperage)}
.champ input:focus-visible,.champ select:focus-visible,.champ textarea:focus-visible{
  outline:2px solid var(--reperage);outline-offset:2px;
}
.champ input::placeholder,.champ textarea::placeholder{color:var(--encre-3)}
.champ-duo{display:grid;grid-template-columns:1fr;gap:18px}
@media (min-width:620px){
  .champ-duo{grid-template-columns:1fr 1fr;gap:18px 24px}
}
.envoi{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:12px}
.etat-formulaire{
  font-family:'Geist Mono',ui-monospace,monospace;font-size:var(--t-sm);color:var(--encre-2);
  padding:14px 16px;border-left:2px solid var(--reperage);background:var(--papier-2);margin-top:6px;
}
.etat-formulaire:empty{display:none}

/* ---------- aplat d'appel ----------
   Un tirage en deux couleurs pose un aplat de la couleur d'accompagnement.
   Celui-ci est le seul du site, et il porte la seule action qui compte. */
.appel{
  background:var(--reperage);color:var(--sur-reperage);
  border:1px solid var(--reperage);
  padding:clamp(28px,5vw,56px);
}
.appel h2,.appel .courant,.appel .libelle,.appel p{color:var(--sur-reperage)}
.appel .libelle{opacity:.72}
.appel .courant{opacity:.9}
.appel .btn-plein{background:var(--sur-reperage);color:var(--reperage);border-color:var(--sur-reperage)}
.appel .btn-plein::before{background:var(--encre)}
.appel .btn-plein:hover,.appel .btn-plein:focus-visible{color:var(--papier);border-color:var(--encre)}
.appel .btn-vide{border-color:var(--sur-reperage);color:var(--sur-reperage)}
.appel .btn-vide::before{background:var(--encre)}
.appel .btn-vide:hover,.appel .btn-vide:focus-visible{color:var(--papier);border-color:var(--encre)}
.appel :focus-visible{outline-color:var(--sur-reperage)}

/* ---------- pied ---------- */
footer{border-top:1px solid var(--filet);padding-block:clamp(48px,7vw,80px) 26px;margin-top:var(--section);position:relative;z-index:1;background:var(--papier)}
.pied{max-width:var(--max);margin:0 auto;padding-inline:var(--marge);display:grid;grid-template-columns:1fr;gap:36px}
@media (min-width:780px){.pied{grid-template-columns:2fr 1fr 1fr 1fr}}
.pied-marque p{font-size:var(--t-sm);color:var(--encre-2);max-width:30ch;margin-top:12px}
.pied h5{
  font-family:'Geist Mono',ui-monospace,monospace;font-size:var(--t-xs);font-weight:400;
  letter-spacing:.08em;text-transform:uppercase;color:var(--encre-3);margin-bottom:14px;
}
.pied ul{list-style:none;display:flex;flex-direction:column;gap:8px}
.pied a{font-size:var(--t-sm);color:var(--encre-2);transition:color var(--vite)}
.pied a:hover{color:var(--reperage)}
.pied-bas{
  max-width:var(--max);margin:clamp(36px,5vw,56px) auto 0;
  padding:18px var(--marge) 0;border-top:1px solid var(--filet);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;
}
.pied-bas span{font-family:'Geist Mono',ui-monospace,monospace;font-size:var(--t-xs);color:var(--encre-3)}

/* ---------- pages légales ---------- */
.legal{max-width:72ch;display:flex;flex-direction:column;gap:38px}
.legal-article h2{
  font-family:'Geist',system-ui,sans-serif;font-size:var(--t-md);font-weight:600;letter-spacing:-.005em;
  padding-bottom:10px;border-bottom:1px solid var(--filet);margin-bottom:14px;
}
.legal-article h2 .folio{margin-right:14px}
.legal-article p{font-size:var(--t-sm);line-height:1.65;color:var(--encre-2)}
.legal-article p+p{margin-top:10px}
.legal-article a{color:var(--reperage);border-bottom:1px solid transparent;transition:border-color var(--vite)}
.legal-article a:hover{border-bottom-color:var(--reperage)}
.encadre{border:1px solid var(--filet);padding:18px 20px;font-size:var(--t-sm);color:var(--encre-2);line-height:1.7;background:var(--papier-2)}
.encadre strong{color:var(--encre)}

/* ---------- apparition au défilement ---------- */
.apparait{opacity:1;transform:none}
.js .apparait{
  opacity:0;transform:translateY(18px);
  transition:opacity var(--lent) var(--courbe),transform var(--lent) var(--masque);
}
.js .apparait.vu{opacity:1;transform:none}

/* révélation typographique, ligne par ligne.
   Le titre est masqué le temps que app.js le découpe en lignes ; s'il n'y
   parvient pas, le filet de sécurité pose .pret et le titre reste lisible. */
.js .revele{opacity:0}
.js .revele.pret{opacity:1}
.ligne-mq{display:block;overflow:hidden;padding-bottom:.06em}
.revele.fini .ligne-mq{overflow:visible}
.js .ligne-mq-i{
  display:block;transform:translateY(105%);
  transition:transform var(--lent) var(--masque);
  transition-delay:calc(85ms * var(--i,0));
}
.js .revele.vu .ligne-mq-i{transform:none}

/* chiffre qui se compose */
.compteur{font-variant-numeric:tabular-nums}

:focus-visible{outline:2px solid var(--reperage);outline-offset:4px}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important}
  html{scroll-behavior:auto}
  .js .apparait{opacity:1;transform:none}
  .js .revele{opacity:1}
  .js .ligne-mq-i{transform:none}
  .trame,.avancement{display:none}
  .titre-section::after,.entete-pied::before,ul.liste li::before,.vignette::after{transform:none}
  .vignette::after{display:none}
}

/* transition entre les pages */
@view-transition{navigation:auto}
@media (prefers-reduced-motion:no-preference){
  ::view-transition-old(root){animation:sortie .28s var(--courbe) both}
  ::view-transition-new(root){animation:entree .42s var(--masque) both}
}
@keyframes sortie{to{opacity:0;transform:translateY(-8px)}}
@keyframes entree{from{opacity:0;transform:translateY(12px)}}

@media print{
  .nav,.menu,.burger,.bouton-theme,footer,.trame,.avancement,.evitement{display:none}
  body{background:#fff;color:#000}
  .js .apparait,.js .ligne-mq-i{opacity:1!important;transform:none!important}
}

/* ---------- grilles amputées d'un visuel ---------- */
/* Quand un emplacement d'image n'est pas fourni, build.py retire son conteneur.
   La grille se retrouve avec un seul enfant : elle doit reprendre la largeur
   entière au lieu de laisser le texte dans une demi-colonne. */
.grille.g2:has(> :only-child){grid-template-columns:1fr}
.grille.g3:has(> :only-child){grid-template-columns:1fr}

/* ---------- blocs repliés sur téléphone ---------- */
/* Un <details> part ouvert ; app.js le referme sous 760 px. Sans JavaScript,
   rien n'est caché. */
.repli{border:0}
.repli>summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;gap:12px;
  font-weight:600;font-size:1.05rem;line-height:1.35;
}
.repli>summary::-webkit-details-marker{display:none}
.repli>summary::after{
  content:"";flex:none;margin-left:auto;width:11px;height:11px;
  border-right:1.5px solid var(--reperage);border-bottom:1.5px solid var(--reperage);
  transform:rotate(45deg);transition:transform var(--vite) var(--courbe);
}
.repli[open]>summary::after{transform:rotate(225deg)}
.repli>summary:focus-visible{outline:2px solid var(--reperage);outline-offset:4px}
.repli-corps{padding-top:12px}
@media (min-width:761px){
  .repli>summary{cursor:default}
  .repli>summary::after{display:none}
}

/* ---------- sélecteur de format ---------- */
.selecteur{
  border:1px solid var(--filet-fort);background:var(--papier-2);
  padding:clamp(22px,4vw,34px);margin-top:28px;
}
.selecteur h3{
  font-family:'Fraunces',Georgia,serif;font-weight:600;
  font-size:clamp(1.25rem,3vw,1.7rem);line-height:1.15;letter-spacing:-.015em;
  margin:10px 0 0;max-width:22ch;
}
.selecteur h3:focus{outline:none}
.sel-choix{display:flex;flex-direction:column;gap:10px;margin-top:22px;max-width:46ch}
.sel-choix button{
  text-align:left;font:inherit;font-size:1rem;color:var(--encre);
  background:var(--papier);border:1px solid var(--filet-fort);
  padding:15px 18px;cursor:pointer;min-height:52px;
  transition:background var(--vite) var(--courbe),border-color var(--vite) var(--courbe),
             transform var(--vite) var(--courbe);
}
.sel-choix button:hover{background:var(--encre);color:var(--papier);border-color:var(--encre);transform:translateX(4px)}
.sel-choix button:focus-visible{outline:2px solid var(--reperage);outline-offset:3px}
.sel-retour{
  margin-top:18px;font:inherit;font-size:13px;color:var(--encre-3);
  background:none;border:0;padding:6px 0;cursor:pointer;text-decoration:underline;
  text-underline-offset:3px;
}
.sel-retour:hover{color:var(--reperage)}
.sel-retour:focus-visible{outline:2px solid var(--reperage);outline-offset:3px}
.sel-prix{
  font-family:'Geist Mono',ui-monospace,monospace;font-size:clamp(1.5rem,4vw,2.2rem);
  color:var(--reperage);margin-top:14px;letter-spacing:-.01em;
}
.sel-reponse p{margin-top:14px;max-width:48ch}
.sel-actions{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:24px}
.sel-actions .sel-retour{margin-top:0}
@media (prefers-reduced-motion:reduce){
  .sel-choix button:hover{transform:none}
  .repli>summary::after{transition:none}
}

/* ---------- champs ajoutés au formulaire ---------- */
.champ .aide{
  font-size:var(--t-sm);color:var(--encre-3);line-height:1.45;
}
.champ .fac{
  font-family:'Geist Mono',ui-monospace,monospace;font-size:var(--t-xs);
  letter-spacing:.06em;text-transform:none;color:var(--encre-3);
}
.champ-choix{border:0;padding:0;margin:0;min-width:0}
.champ-choix legend{
  font-family:'Geist Mono',ui-monospace,monospace;font-size:var(--t-xs);
  letter-spacing:.08em;text-transform:uppercase;color:var(--encre-3);padding:0;
}
.choix-lignes{display:flex;flex-wrap:wrap;gap:10px;margin-top:9px}
.choix-lignes label{
  display:inline-flex;align-items:center;gap:9px;cursor:pointer;
  background:var(--papier-2);border:1px solid var(--filet-fort);
  padding:12px 16px;min-height:48px;font-size:var(--t-md);
  transition:border-color var(--vite) var(--courbe),background var(--vite) var(--courbe);
}
.choix-lignes label:hover{border-color:var(--encre-2)}
.choix-lignes input{
  appearance:none;-webkit-appearance:none;margin:0;flex:none;
  width:15px;height:15px;border:1.5px solid var(--filet-fort);border-radius:50%;
  background:var(--papier);
}
.choix-lignes input:checked{
  border-color:var(--reperage);
  box-shadow:inset 0 0 0 3.5px var(--papier),inset 0 0 0 12px var(--reperage);
}
.choix-lignes label:has(input:checked){border-color:var(--reperage)}
.choix-lignes input:focus-visible{outline:2px solid var(--reperage);outline-offset:3px}

/* ---------- comparateur de coût ---------- */
.compare{border:1px solid var(--filet-fort);background:var(--papier-2);padding:clamp(22px,4vw,32px)}
.compare-reglage{display:flex;flex-wrap:wrap;align-items:center;gap:14px 18px}
.compare-reglage label{
  font-family:'Geist Mono',ui-monospace,monospace;font-size:var(--t-xs);
  letter-spacing:.08em;text-transform:uppercase;color:var(--encre-3);flex:none;
}
.compare-annees{
  font-family:'Geist Mono',ui-monospace,monospace;font-size:var(--t-md);
  color:var(--reperage);flex:none;min-width:5ch;
}
.compare input[type=range]{
  flex:1 1 220px;min-width:180px;appearance:none;-webkit-appearance:none;
  background:transparent;height:44px;margin:0;cursor:ew-resize;
}
.compare input[type=range]::-webkit-slider-runnable-track{
  height:2px;background:var(--filet-fort);
}
.compare input[type=range]::-moz-range-track{height:2px;background:var(--filet-fort)}
.compare input[type=range]::-webkit-slider-thumb{
  appearance:none;-webkit-appearance:none;width:26px;height:26px;margin-top:-12px;
  border-radius:50%;background:var(--reperage);border:3px solid var(--papier-2);
  transition:transform var(--vite) var(--courbe);
}
.compare input[type=range]::-moz-range-thumb{
  width:20px;height:20px;border-radius:50%;background:var(--reperage);
  border:3px solid var(--papier-2);
}
.compare input[type=range]:active::-webkit-slider-thumb{transform:scale(1.15)}
.compare input[type=range]:focus-visible{outline:2px solid var(--reperage);outline-offset:6px}
.compare-colonnes{
  display:grid;grid-template-columns:1fr;gap:1px;margin-top:26px;
  background:var(--filet);border:1px solid var(--filet);
}
@media (min-width:620px){.compare-colonnes{grid-template-columns:1fr 1fr}}
.compare-col{background:var(--papier);padding:20px}
.compare-col.compare-nous{background:var(--papier-2)}
.compare-somme{
  font-family:'Geist Mono',ui-monospace,monospace;
  font-size:clamp(1.6rem,4vw,2.4rem);line-height:1.1;margin:10px 0 12px;
  font-variant-numeric:tabular-nums;letter-spacing:-.01em;
}
.compare-nous .compare-somme{color:var(--reperage)}
.compare-lecture{
  margin:22px 0 0;padding-top:18px;border-top:1px solid var(--filet);
  font-size:var(--t-md);color:var(--encre);max-width:58ch;
}

/* ---------- la grille de composition, sur demande ---------- */
.bouton-grille{
  display:none;background:none;border:0;padding:8px;cursor:pointer;color:var(--encre-2);
  line-height:0;transition:color var(--vite) var(--courbe);
}
.bouton-grille svg{width:19px;height:19px}
.bouton-grille:hover{color:var(--reperage)}
.bouton-grille[aria-pressed="true"]{color:var(--reperage)}
.bouton-grille:focus-visible{outline:2px solid var(--reperage);outline-offset:3px}
@media (min-width:1000px){.bouton-grille{display:inline-flex}}

.voir-grille body::before{
  content:"";position:fixed;inset:0;z-index:150;pointer-events:none;
  max-width:1340px;margin:0 auto;padding-inline:var(--marge);
  background:
    repeating-linear-gradient(to right,
      color-mix(in srgb, var(--reperage) 12%, transparent) 0,
      color-mix(in srgb, var(--reperage) 12%, transparent) calc((100% - 11 * 24px) / 12),
      transparent calc((100% - 11 * 24px) / 12),
      transparent calc((100% - 11 * 24px) / 12 + 24px));
  background-clip:content-box;
}
.voir-grille body::after{
  content:"Grille 12 colonnes · gouttière 24 px · justification 1 340 px · Échap pour masquer";
  position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:151;
  font-family:'Geist Mono',ui-monospace,monospace;font-size:11px;letter-spacing:.07em;
  background:var(--encre);color:var(--papier);padding:9px 16px;border-radius:999px;
  white-space:nowrap;pointer-events:none;
}

/* ---------- note d'atelier, au survol d'un titre ---------- */
.titre-carte .note-atelier{
  display:block;margin-top:12px;padding-top:12px;border-top:1px solid var(--filet);
  font-family:'Geist Mono',ui-monospace,monospace;font-size:var(--t-xs);
  line-height:1.5;letter-spacing:.02em;color:var(--reperage);
  opacity:0;transform:translateY(-4px);
  transition:opacity var(--vite) var(--courbe),transform var(--vite) var(--courbe);
}
.titre-carte:hover .note-atelier,
.titre-carte:focus-visible .note-atelier,
.titre-carte:focus-within .note-atelier{opacity:1;transform:none}
@media (hover:none){
  .titre-carte .note-atelier{opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){
  .titre-carte .note-atelier{transition:none}
  .compare input[type=range]::-webkit-slider-thumb{transition:none}
}

/* ---------- [hidden] doit gagner ---------- */
/* .champ pose display:flex, qui bat le display:none du navigateur sur [hidden].
   Le champ « site actuel » restait donc visible quel que soit le format choisi. */
[hidden]{display:none !important}

/* ---------- les colonnes ne s'étirent plus sur la plus haute ---------- */
/* Un bloc court à côté d'un bloc long héritait de sa hauteur et se retrouvait
   aux trois quarts vide. Relevé le 19/09 sur la section « Payer en une fois ». */
.grille{align-items:start}


/* ================================================================
   Passe du 19/09/2026 (soir) — rythme, mesure, gestes.
   ================================================================ */

/* C2 — un appel à l'action termine sa section, il n'ouvre pas une bande.
   Sans :has(), rien ne change : on retombe sur le remplissage normal. */
section:has(> p:last-child .btn){padding-bottom:var(--bande-s)}

/* C5 — plafond de mesure. En dessous de 72 signes l'œil retrouve le début
   de la ligne suivante sans chercher. */
main p{max-width:72ch}
main p.sel-actions,main .compare p,main td p{max-width:none}

/* C6 — une grille qui ne contient que des cartes les met toutes à la même
   hauteur, à deux, trois ou quatre colonnes. Dès qu'un enfant n'est pas une
   carte, la grille retombe sur align-items:start et rien ne s'étire. */
.grille:has(> .bloc):not(:has(> :not(.bloc))){align-items:stretch}

/* L'étalement, écrit sous le prix plutôt qu'à quinze écrans de là. */
.etale{display:block;font-family:'Geist Mono',ui-monospace,monospace;font-size:var(--t-xs);
  letter-spacing:.02em;color:var(--encre-3);margin-top:6px}

/* ---------- geste 1 : le lexique s'ouvre sur place ---------- */
.terme{
  font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;
  border-bottom:1px dotted var(--reperage);
}
.terme:hover{color:var(--reperage)}
.terme:focus-visible{outline:2px solid var(--reperage);outline-offset:2px}
.terme::after{content:"";display:inline-block;width:0;height:0;margin-left:4px;
  border-left:3.5px solid transparent;border-right:3.5px solid transparent;
  border-top:4px solid var(--reperage);vertical-align:middle;
  transition:transform var(--vite) ease}
.terme[aria-expanded="true"]::after{transform:rotate(180deg)}
.terme-def{
  margin-top:10px;margin-bottom:6px;padding:14px 18px;max-width:62ch;
  border-left:2px solid var(--reperage);background:var(--papier-2);
  font-size:var(--t-sm);color:var(--encre-2);
}
.terme-def b{font-weight:500;color:var(--encre)}

/* ---------- geste 2 : la page se démonte ---------- */
.bouton-demonter{
  display:none;align-items:center;justify-content:center;width:38px;height:38px;
  background:none;border:0;color:var(--encre-2);cursor:pointer;
}
.bouton-demonter svg{width:19px;height:19px}
.bouton-demonter:hover{color:var(--reperage)}
.bouton-demonter[aria-pressed="true"]{color:var(--reperage)}
.bouton-demonter:focus-visible{outline:2px solid var(--reperage);outline-offset:3px}
@media (min-width:1000px){.bouton-demonter{display:inline-flex}}

.demontage-etat{
  position:fixed;left:50%;transform:translateX(-50%);bottom:22px;z-index:60;
  background:var(--encre);color:var(--papier);padding:10px 16px;border-radius:999px;
  font-family:'Geist Mono',ui-monospace,monospace;font-size:12px;letter-spacing:.04em;
}
.demontage-etat[hidden]{display:none}

/* niveau 1 — la composition part */
[data-demontage="1"] body,[data-demontage="2"] body,[data-demontage="3"] body{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
}
[data-demontage="1"] h1,[data-demontage="1"] h2,[data-demontage="1"] h3,
[data-demontage="2"] h1,[data-demontage="2"] h2,[data-demontage="2"] h3,
[data-demontage="3"] h1,[data-demontage="3"] h2,[data-demontage="3"] h3{
  font-family:inherit;letter-spacing:0;font-weight:700;
}
/* Les styles en ligne l'emportent sur la feuille : ici, et ici seulement,
   on passe devant. Le jouet éteint, plus une seule de ces règles ne s'applique. */
[data-demontage] main *{font-family:inherit!important;letter-spacing:normal!important}
[data-demontage] img,[data-demontage] video{filter:grayscale(1) contrast(.9);opacity:.75}

/* niveau 2 — la mise en page part */
[data-demontage="2"] .grille,[data-demontage="3"] .grille,
[data-demontage="2"] .offres,[data-demontage="3"] .offres,
[data-demontage="2"] .champ-duo,[data-demontage="3"] .champ-duo{display:block}
[data-demontage="2"] .contenu,[data-demontage="3"] .contenu{max-width:none;padding-inline:18px}
[data-demontage="2"] main p,[data-demontage="3"] main p{max-width:none}
[data-demontage="2"] .bloc,[data-demontage="3"] .bloc,
[data-demontage="2"] .offre,[data-demontage="3"] .offre{border:0;padding:0;background:none;margin-block:14px}
[data-demontage="2"] section,[data-demontage="3"] section{padding-block:22px;border-top:1px solid var(--filet)}
[data-demontage="2"] .portrait,[data-demontage="3"] .portrait{position:static}

/* niveau 3 — le balisage apparaît */
[data-demontage="3"] main h1::before{content:"<h1> "}
[data-demontage="3"] main h2::before{content:"<h2> "}
[data-demontage="3"] main h3::before{content:"<h3> "}
[data-demontage="3"] main p::before{content:"<p> "}
[data-demontage="3"] main li::before{content:"<li> "}
[data-demontage="3"] main table::before{content:"<table>"}
[data-demontage="3"] main h1::before,[data-demontage="3"] main h2::before,
[data-demontage="3"] main h3::before,[data-demontage="3"] main p::before,
[data-demontage="3"] main li::before,[data-demontage="3"] main table::before{
  color:var(--reperage);font-size:12px;letter-spacing:0;
}
[data-demontage="3"] main section{outline:1px dashed var(--filet);outline-offset:6px}

/* ---------- geste 3 : le devis qui s'écrit ---------- */
.devis{margin-top:26px;border-top:1px solid var(--filet);padding-top:22px}
.devis > .libelle{display:block;margin-bottom:12px}
.devis-lignes{display:flex;flex-direction:column;gap:8px;margin-bottom:18px}
.devis-lignes label{
  display:flex;align-items:center;gap:12px;cursor:pointer;
  border:1px solid var(--filet);padding:12px 15px;min-height:48px;
  font-size:var(--t-md);transition:border-color var(--vite) ease;
}
.devis-lignes label:hover{border-color:var(--reperage)}
.devis-lignes label:focus-within{outline:2px solid var(--reperage);outline-offset:2px}
.devis-lignes .n{margin-left:auto;font-family:'Geist Mono',ui-monospace,monospace;color:var(--encre-2);white-space:nowrap}
.devis-total{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px 32px;
  border-top:1px solid var(--filet);padding-top:18px}
.devis-total .libelle{display:block;margin-bottom:4px}
.devis-total .somme{display:block;font-size:clamp(26px,3vw,36px);font-weight:600;letter-spacing:-.02em}
.devis-note{margin-top:10px;font-size:var(--t-sm);color:var(--encre-2);max-width:56ch}


/* ================================================================
   Passe du 21/09/2026 — alignement des fiches, appels à l'action,
   respiration des encadrés.
   ================================================================ */

/* Les fiches de format s'alignent ligne à ligne : même libellé, même nom,
   même prix, même étalement, à la même hauteur d'une carte à l'autre. */
@media (min-width:900px){
  .offres-sept .offre,.offres-trois .offre{
    display:grid;grid-template-rows:subgrid;gap:14px;align-content:start;
  }
  .offres-sept .offre{grid-row:span 8}
  .offres-trois .offre{grid-row:span 7}
}
.offre .etale{
  font-family:'Geist Mono',ui-monospace,monospace;font-size:var(--t-xs);
  letter-spacing:.02em;color:var(--encre-3);
}
.offre .etale a{color:inherit;text-decoration-color:var(--filet-fort)}
.offre .etale a:hover{color:var(--reperage)}
.offre .offre-appel{margin-top:2px}
.offre .offre-appel .btn{width:100%;justify-content:center}
.offre ul{margin-top:0}

/* Une capture n'est jamais agrandie au-delà de sa taille réelle : au-dessus,
   elle devient floue et la page a l'air bâclée. */
.visuel-etroit{max-width:620px}
.visuel-moyen{max-width:840px}
figure img{image-rendering:auto}

/* Les encadrés respirent, et le texte y garde sa mesure. */
.encadre{padding:24px 26px}
.bloc > :last-child{margin-bottom:0}

/* Les choix du formulaire : des cases, pas des pavés. */
.choix-lignes{gap:8px}
.choix-lignes label{
  padding:9px 14px;min-height:42px;font-size:var(--t-sm);
  font-family:inherit;letter-spacing:0;text-transform:none;
}
.champ-choix legend{margin-bottom:4px}

/* Les cartes respirent un peu plus : le texte y touchait le filet. */
.bloc{padding:26px 28px}
.bloc h3{margin-bottom:12px}
.bloc p + p{margin-top:12px}
.fiche-meta > div + div{margin-top:14px}
.titre-sel{font-size:clamp(1.6rem,2.6vw,2.2rem);line-height:1.15;letter-spacing:-.02em}
.sel-aide{font-size:var(--t-sm);color:var(--encre-3);margin-top:10px;max-width:42ch}
.sel-complement{
  margin-top:14px;padding:12px 16px;border-left:2px solid var(--reperage);
  background:var(--papier);font-size:var(--t-sm);color:var(--encre-2);
}

/* Un relevé : un libellé, une valeur, un filet. Le même geste que les
   listes des fiches de format, pour que les deux se lisent pareil. */
.releve{list-style:none;display:flex;flex-direction:column;margin-top:16px}
.releve li{
  display:flex;justify-content:space-between;gap:24px;align-items:baseline;flex-wrap:wrap;
  padding-block:12px;border-top:1px solid var(--filet);font-size:var(--t-sm);color:var(--encre-2);
}
.releve li:first-child{border-top:0;padding-top:0}
.releve .n{font-family:'Geist Mono',ui-monospace,monospace;color:var(--encre);text-align:right}

/* Le questionnaire ne saute pas d'une question à l'autre. */
.selecteur{min-height:352px}
@media (max-width:640px){.selecteur{min-height:0}}

/* Les ronds de choix : nets, et à leur taille. */
.choix-lignes input{width:16px;height:16px}
.choix-lignes input:checked{box-shadow:inset 0 0 0 3px var(--papier),inset 0 0 0 8px var(--reperage)}

/* Le questionnaire demande du JavaScript. Sans lui, la page dit où aller
   plutôt que d'afficher trois boutons qui ne répondent pas. */
.selecteur{display:none}
.js .selecteur{display:block}
.js .sel-sans-js{display:none}

/* Les questions fréquentes : une colonne, une question par ligne. Douze
   réponses côte à côte dans une grille, ça se regarde ; en liste, ça se lit. */
.questions-liste{display:flex;flex-direction:column;gap:10px;max-width:80ch}
.questions-liste .repli{background:var(--papier-2)}
.questions-liste .repli-corps{max-width:68ch}