/* =========================================================
   ACCUEIL.CSS — index.html · système « Manuel d'atelier »
   -----------------------------------------------------------
   Principe : la page est un DOCUMENT TECHNIQUE, pas un empilement
   de cartes. Une grille 12 colonnes tient tout ; les repères
   (numéro + label mono) vivent dans la MARGE, à gauche ; les
   séparations sont des FILETS, pas des ombres.

   Ce qu'on s'interdit ici (marqueurs de page générée) :
   fausse fenêtre de navigateur, cartes flottantes partout,
   sections centrées empilées, dégradés décoratifs, emojis.
   Cf. docs/site-public.md.
   ========================================================= */

:root{
  --lg:1280px;                        /* largeur de la grille */
  --marge:clamp(1.25rem,4vw,3.5rem);  /* marge de page */
  --gout:clamp(1rem,1.9vw,1.75rem);   /* gouttière */
  --filet:var(--bordure);
  --filet-fort:var(--encre);
  --mesure:60ch;                      /* mesure de lecture */
}
/* ragging : évite les fins de ligne orphelines (ignoré si non supporté) */
p,li,dd{text-wrap:pretty}

/* ── la grille : tout s'y accroche ── */
.g{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gout);max-width:var(--lg);margin-inline:auto;padding-inline:var(--marge)}
.s{padding-block:clamp(3.5rem,7vw,6rem)}
.s--filet > .g{border-top:1px solid var(--filet-fort);padding-top:clamp(1.4rem,2.5vw,2rem)}
.s--pap{background:var(--surface);border-block:1px solid var(--filet)}

/* ── marginalia : le repère de section (numéro + label) ── */
.rep{grid-column:1/3;font-family:var(--mono);font-size:.68rem;line-height:1.5;color:var(--encre-tres-douce);display:flex;flex-direction:column;gap:.2rem;padding-top:.35rem}
.rep b{font-weight:400;color:var(--accent);font-variant-numeric:tabular-nums}
.rep span{letter-spacing:.1em;text-transform:uppercase}

/* ── titres de section ── */
.tt{grid-column:3/10;font-family:var(--display);font-weight:700;font-size:clamp(1.75rem,3.6vw,2.7rem);line-height:1.04;letter-spacing:-.028em;color:var(--encre);text-wrap:balance}
.tt em{font-style:normal;color:var(--accent)}
.chapo{grid-column:3/9;max-width:var(--mesure);margin-top:1rem;color:var(--encre-douce);font-size:1rem;line-height:1.7}

/* ═══════════════════════ 01 · HÉROS ═══════════════════════ */
.hero-g{padding-block:clamp(2.5rem,5vw,4.5rem) clamp(2.5rem,5vw,4rem);align-items:start}
.hero-txt{grid-column:1/8}
.hero-doc{grid-column:8/13;align-self:end;padding-top:clamp(1rem,3vw,3.2rem)}

.kicker{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--encre-douce)}
.kicker i{width:7px;height:7px;border-radius:1px;background:var(--or);flex-shrink:0}
@media(prefers-reduced-motion:no-preference){.kicker i{animation:pouls 3.6s ease-in-out infinite}@keyframes pouls{0%,100%{opacity:1}50%{opacity:.4}}}

.titre{margin-left:-.022em;font-family:var(--display);font-weight:800;font-size:clamp(2.6rem,6.4vw,5rem);line-height:.98;letter-spacing:-.038em;color:var(--encre);margin-top:1.4rem}
.titre .l2{display:block}
/* mot-métier rotatif — la couleur suit --accent (reteinté par data-metier) */
.rot{position:relative;display:inline-block;color:var(--accent);transition:color .5s var(--ease-doux);white-space:nowrap}
.rot::after{content:'';position:absolute;left:0;right:0;bottom:.04em;height:.055em;background:currentColor;opacity:.32;transition:background .5s var(--ease-doux)}
.rot .mot{display:none}
.rot .mot.on{display:inline}
@media(prefers-reduced-motion:no-preference){
  .rot .mot.on{display:inline-block;animation:mot .55s var(--ease-doux)}
  @keyframes mot{from{opacity:0;transform:translateY(.14em)}to{opacity:1;transform:none}}
}
.accroche{margin-top:1.5rem;max-width:34rem;font-size:clamp(1rem,1.25vw,1.14rem);line-height:1.66;color:var(--encre-douce)}
.accroche b{color:var(--encre);font-weight:600}
.actions{display:flex;gap:.65rem;flex-wrap:wrap;margin-top:2rem}
.mentions{margin-top:1.15rem;font-family:var(--mono);font-size:.67rem;letter-spacing:.09em;text-transform:uppercase;color:var(--encre-tres-douce)}

/* ── le document métier (remplace la fausse fenêtre de navigateur) ── */
.doc{background:var(--surface);border:1px solid var(--bordure-forte)}
.doc-tete{display:flex;align-items:baseline;justify-content:space-between;gap:.8rem;padding:.7rem .95rem;border-bottom:1px solid var(--filet);font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--encre-tres-douce)}
.doc-index{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid var(--filet)}
.doc-onglet{appearance:none;background:transparent;border:none;border-right:1px solid var(--filet);border-bottom:2px solid transparent;font-family:var(--mono);font-size:.63rem;letter-spacing:.08em;text-transform:uppercase;color:var(--encre-tres-douce);padding:.7rem .25rem;min-height:40px;cursor:pointer;transition:color .2s,border-color .2s,background .2s}
.doc-onglet:last-child{border-right:none}
.doc-onglet:hover{color:var(--encre);background:var(--fond)}
.doc-onglet[aria-selected="true"]{color:var(--encre);border-bottom-color:var(--mc)}
.doc-corps{padding:1.1rem 1.15rem 1.2rem;min-height:250px}
.doc-corps[hidden]{display:none}
@media(prefers-reduced-motion:no-preference){
  .doc-corps:not([hidden]){animation:pan .45s var(--ease-doux)}
  @keyframes pan{from{opacity:0}to{opacity:1}}
}
.doc-obj{font-size:.95rem;font-weight:650;letter-spacing:-.012em;color:var(--encre);line-height:1.25}
.doc-meta{display:block;font-family:var(--mono);font-size:.62rem;font-weight:400;letter-spacing:.06em;text-transform:uppercase;color:var(--encre-tres-douce);margin-top:.3rem}
.doc-lignes{margin-top:1rem;border-top:1px solid var(--filet)}
.doc-l{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;padding:.55rem 0;border-bottom:1px solid var(--filet)}
.doc-l dt{font-size:.81rem;color:var(--encre-douce)}
.doc-l dd{font-family:var(--mono);font-size:.81rem;color:var(--encre);font-variant-numeric:tabular-nums;white-space:nowrap}
.doc-l dd.fort{color:var(--accent-fort)}
.doc-pied{margin-top:.9rem;display:flex;align-items:center;gap:.45rem;font-family:var(--mono);font-size:.62rem;letter-spacing:.05em;text-transform:uppercase;color:var(--encre-tres-douce)}
.doc-pied i{width:6px;height:6px;border-radius:1px;background:var(--succes);flex-shrink:0}
.doc-note{margin-top:.75rem;font-size:.76rem;line-height:1.55;color:var(--encre-tres-douce)}

/* ── bande de faits (filets, pleine largeur) ── */
.faits{border-block:1px solid var(--filet);background:var(--surface)}
.faits-in{max-width:var(--lg);margin-inline:auto;padding:.8rem var(--marge);display:flex;flex-wrap:wrap;justify-content:space-between;gap:.35rem 1.6rem;font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--encre-douce)}
.faits-in span{display:inline-flex;align-items:center;gap:.5rem}
.faits-in i{width:5px;height:5px;border-radius:1px;background:var(--or);flex-shrink:0}

/* ═══════════════════════ 02 · DEX ═══════════════════════ */
.dex-sprite{grid-column:1/3;justify-self:start;width:132px;height:132px;display:grid;place-items:center}
.dex-sprite img{width:126px;height:126px;image-rendering:pixelated;display:block}
.dex-sprite canvas{pointer-events:none!important;cursor:default!important}
@media(prefers-reduced-motion:no-preference){
  .dex-sprite img{animation:respire 4.8s ease-in-out infinite}
  @keyframes respire{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
}
.dex-txt{grid-column:3/11}
.dex-txt .rep-in{font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin-bottom:.7rem;display:block}
.dex-titre{font-family:var(--display);font-weight:750;font-size:clamp(1.7rem,3.4vw,2.5rem);line-height:1.05;letter-spacing:-.03em;color:var(--encre)}
.dex-lead{margin-top:.9rem;max-width:var(--mesure);color:var(--encre-douce);font-size:1rem;line-height:1.68}
.dex-verbes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--gout);margin-top:1.6rem}
.dex-verbes > div{border-top:1px solid var(--filet);padding:.7rem 0}
.dex-verbes b{display:block;font-family:var(--display);font-weight:700;font-size:1rem;letter-spacing:-.012em;color:var(--encre)}
.dex-verbes span{display:block;font-size:.83rem;color:var(--encre-douce);line-height:1.6;margin-top:.2rem}
.dex-garantie{margin-top:1.5rem;padding-top:.8rem;border-top:1px solid var(--filet-fort);font-family:var(--mono);font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;color:var(--encre-douce)}

/* ═══════════════ 03 · LES QUATRE LOGICIELS (index) ═══════════════ */
.cat{grid-column:1/13;margin-top:clamp(1.8rem,3.5vw,2.8rem)}
.cat-l{position:relative;display:grid;grid-template-columns:2.2rem minmax(0,3.2fr) minmax(0,5fr) 2.5rem;column-gap:var(--gout);align-items:baseline;padding:1.5rem 0;border-top:1px solid var(--filet);color:inherit;transition:background .25s var(--ease-doux)}
.cat-l:last-child{border-bottom:1px solid var(--filet)}
.cat-l::before{content:'';position:absolute;left:calc(var(--marge)*-1);right:calc(var(--marge)*-1);top:-1px;bottom:0;background:var(--mc);opacity:0;transition:opacity .25s var(--ease-doux);pointer-events:none}
.cat-l:hover::before{opacity:.045}
.cat-n{font-family:var(--mono);font-size:.72rem;color:var(--encre-tres-douce);font-variant-numeric:tabular-nums}
.cat-l:hover .cat-n{color:var(--mc)}
.cat-nom h3{font-family:var(--display);font-weight:750;font-size:clamp(1.25rem,2.3vw,1.7rem);line-height:1.05;letter-spacing:-.026em;color:var(--encre)}
.cat-qui{font-family:var(--mono);font-size:.62rem;letter-spacing:.09em;text-transform:uppercase;color:var(--mc);margin-top:.42rem}
.cat-spec{display:inline-block;margin-top:.5rem;font-family:var(--mono);font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;color:#6f4f0e;background:color-mix(in srgb,var(--or) 22%,transparent);padding:.16rem .5rem}
.cat-mid p{font-size:.96rem;font-weight:550;color:var(--encre);line-height:1.5}
.cat-pts{margin-top:.5rem;font-size:.82rem;color:var(--encre-douce);line-height:1.65}
.cat-pts span + span::before{content:'·';margin:0 .5rem;color:var(--bordure-forte)}
.cat-fl{justify-self:end;align-self:center;width:34px;height:34px;display:grid;place-items:center;border:1px solid var(--bordure-forte);border-radius:50%;color:var(--encre);transition:background .25s var(--ease-doux),color .25s var(--ease-doux),border-color .25s var(--ease-doux),transform .25s var(--ease-doux)}
.cat-fl svg{width:15px;height:15px}
.cat-l:hover .cat-fl{background:var(--mc);border-color:var(--mc);color:#fff;transform:translateX(3px)}

/* ═══════════════ 04 · AVANT / AVEC ═══════════════ */
.reg{grid-column:3/13;display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(1.5rem,3.5vw,3rem);margin-top:.4rem}
.reg > div:last-child{border-left:1px solid var(--filet);padding-left:clamp(1.5rem,3.5vw,3rem)}
.reg-t{font-family:var(--mono);font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;margin-bottom:.7rem}
.reg-t.avant{color:var(--encre-tres-douce)}
.reg-t.apres{color:var(--accent)}
.reg-l{list-style:none}
.reg-l li{padding:.7rem 0;border-top:1px solid var(--filet);font-size:.93rem;line-height:1.5}
.reg-l li:last-child{border-bottom:1px solid var(--filet)}
.reg-l.avant li{color:var(--encre-tres-douce);text-decoration:line-through;text-decoration-color:color-mix(in srgb,var(--alerte) 42%,transparent);text-decoration-thickness:1.5px}
.reg-l.apres li{color:var(--encre)}
.reg-l.apres li b{font-weight:650;color:var(--accent-fort)}

/* ═══════════════ 05 · LE SOCLE (table de spécification) ═══════════════ */
.spec{grid-column:3/12;margin-top:.4rem}
.spec > div{display:grid;grid-template-columns:minmax(140px,1fr) minmax(0,2.6fr);column-gap:var(--gout);padding:1.1rem 0;border-top:1px solid var(--filet)}
.spec > div:last-child{border-bottom:1px solid var(--filet)}
.spec dt{font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--encre);padding-top:.15rem}
.spec dd{font-size:.92rem;color:var(--encre-douce);line-height:1.65;max-width:var(--mesure)}
.spec dd b{color:var(--encre);font-weight:650}
.aveu{grid-column:3/11;margin-top:clamp(2rem,4vw,3rem);border-left:2px solid var(--accent);padding:.2rem 0 .2rem 1.4rem}
.aveu q{display:block;font-family:var(--display);font-weight:600;font-size:clamp(1.05rem,1.9vw,1.3rem);line-height:1.45;letter-spacing:-.012em;color:var(--encre);quotes:'« ' ' »'}
.aveu cite{display:block;margin-top:.8rem;font-style:normal;font-family:var(--mono);font-size:.64rem;letter-spacing:.11em;text-transform:uppercase;color:var(--encre-tres-douce)}

/* ═══════════════ 06 · TARIFS ═══════════════ */
.prix{grid-column:3/13;display:grid;grid-template-columns:repeat(3,1fr);column-gap:var(--gout);margin-top:.4rem;border-top:1px solid var(--filet-fort)}
.prix > div{padding:1.4rem 0 1.5rem}
.prix > div + div{border-left:1px solid var(--filet);padding-left:var(--gout)}
.prix .k{font-family:var(--mono);font-size:.63rem;letter-spacing:.11em;text-transform:uppercase;color:var(--encre-douce)}
.prix .v{font-family:var(--display);font-weight:750;font-size:clamp(1.6rem,2.8vw,2.15rem);letter-spacing:-.03em;color:var(--encre);margin:.5rem 0 .35rem;font-variant-numeric:tabular-nums;line-height:1}
.prix .v small{font-size:.42em;font-weight:600;color:var(--encre-douce);letter-spacing:0}
.prix p{font-size:.85rem;color:var(--encre-douce);line-height:1.6}
.fond-off{grid-column:3/13;margin-top:1.1rem;display:flex;align-items:baseline;gap:.75rem;flex-wrap:wrap;font-size:.89rem;color:var(--encre);border-left:2px solid var(--or);padding:.15rem 0 .15rem 1rem;line-height:1.55}
.fond-off .k{font-family:var(--mono);font-size:.6rem;letter-spacing:.11em;text-transform:uppercase;color:#6f4f0e;flex-shrink:0}
.fond-off a{font-weight:600;color:var(--accent-fort);text-decoration:underline;text-underline-offset:.16em}
.prix-pied{grid-column:3/13;margin-top:1.1rem;display:flex;justify-content:space-between;align-items:baseline;gap:1rem;flex-wrap:wrap;font-size:.82rem;color:var(--encre-tres-douce)}
.prix-pied a{font-weight:600;color:var(--accent-fort);display:inline-flex;align-items:center;gap:.4rem}
.prix-pied a:hover{text-decoration:underline;text-underline-offset:.18em}

/* ═══════════════ 07 · QUESTIONS ═══════════════ */
.qa{grid-column:3/12;margin-top:.4rem;border-top:1px solid var(--filet-fort)}
.qa details{border-bottom:1px solid var(--filet)}
.qa summary{list-style:none;cursor:pointer;display:flex;align-items:baseline;justify-content:space-between;gap:1.2rem;padding:1.05rem 0;font-family:var(--display);font-weight:650;font-size:1.02rem;letter-spacing:-.014em;color:var(--encre);transition:color .2s}
.qa summary::-webkit-details-marker{display:none}
.qa summary:hover{color:var(--accent-fort)}
.qa .chev{flex-shrink:0;width:16px;height:16px;color:var(--encre-tres-douce);transition:transform .3s var(--ease-doux)}
.qa details[open] .chev{transform:rotate(180deg)}
.qa .rep-q{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s var(--ease-doux)}
.qa details[open] .rep-q{grid-template-rows:1fr}
.qa .rep-q > div{overflow:hidden}
.qa .rep-q p{padding-bottom:1.15rem;max-width:var(--mesure);font-size:.91rem;color:var(--encre-douce);line-height:1.68}
.qa .rep-q p b{color:var(--encre);font-weight:650}
.qa-plus{grid-column:3/12;margin-top:1.2rem;font-size:.88rem}
.qa-plus a{font-weight:600;color:var(--accent-fort)}
.qa-plus a:hover{text-decoration:underline;text-underline-offset:.18em}

/* ═══════════════ CLÔTURE ═══════════════ */
.fin{background:var(--encre);color:#f3f2ee}
.fin .g{padding-block:clamp(4rem,8vw,6.5rem);align-items:end}
.fin-txt{grid-column:1/8}
.fin h2{font-family:var(--display);font-weight:800;font-size:clamp(2.1rem,5vw,3.6rem);line-height:1;letter-spacing:-.04em}
.fin h2 .pt{color:var(--or)}
.fin p{margin-top:1.1rem;max-width:32rem;color:#a9aeb8;line-height:1.65}
.fin-act{grid-column:9/13;display:flex;flex-direction:column;gap:.65rem}
.fin .btn-main{background:#fff;color:var(--encre);justify-content:center;box-shadow:none}
.fin .btn-main:hover{background:#e6e5e0;box-shadow:none}
.fin .btn-ghost{background:transparent;color:#e6e5e0;border-color:#3b4048;justify-content:center;box-shadow:none}
.fin .btn-ghost:hover{border-color:#767d88}
.fin .mentions{color:#787f8a;text-align:center;margin-top:.15rem}

/* ═══════════════ RESPONSIVE ═══════════════ */
@media(max-width:1020px){
  .hero-txt{grid-column:1/13}
  .hero-doc{grid-column:1/13;align-self:auto;padding-top:2.4rem;max-width:520px}
  .rep{grid-column:1/13;flex-direction:row;gap:.8rem;padding-top:0;margin-bottom:.9rem}
  .tt,.chapo,.dex-txt,.reg,.spec,.aveu,.prix,.fond-off,.prix-pied,.qa,.qa-plus{grid-column:1/13}
  .dex-sprite{grid-column:1/13;margin-bottom:1.2rem}
  .fin-txt{grid-column:1/13}
  .fin-act{grid-column:1/13;margin-top:2rem;max-width:340px}
}
@media(max-width:760px){
  .cat-l{grid-template-columns:2rem minmax(0,1fr) 2.2rem;grid-template-areas:'n nom fl' '. mid mid';row-gap:.7rem}
  .cat-n{grid-area:n}.cat-nom{grid-area:nom}.cat-mid{grid-area:mid}.cat-fl{grid-area:fl}
  .reg{grid-template-columns:1fr;row-gap:1.8rem}
  .reg > div:last-child{border-left:none;padding-left:0}
  .prix{grid-template-columns:1fr}
  .prix > div + div{border-left:none;border-top:1px solid var(--filet);padding-left:0}
  .dex-verbes{grid-template-columns:1fr}
  .spec > div{grid-template-columns:1fr;row-gap:.35rem}
  .faits-in{justify-content:flex-start;gap:.35rem 1.2rem}
}
@media(max-width:520px){
  .doc-onglet{font-size:.56rem;padding-inline:.1rem}
  .doc-corps{min-height:0}
}

/* =========================================================
   AJOUTS AOÛT 2026 — deux blocs, même grammaire que le reste
   · 02 · L'ÉTABLI  : le logiciel EST sur la page. Six véhicules,
     des cases qu'on modifie, la TVA sur marge et la marge nette
     recalculées avec la formule du produit. Sans JS, le tableau
     reste lisible et déjà calculé.
   · 08 · CE QUI N'EST PAS PRÊT : les aveux, sur fond d'encre.
     Personne ne l'écrit — c'est exactement pour ça.
   ========================================================= */

/* ── barre d'avancement du projet (haut de page) ───────────
   Dit vaguement où en est Dexter, sans étaler le détail : quatre
   jalons, celui d'aujourd'hui marqué. Bande à filets, jamais une
   carte. Le détail de ce qui reste est INTERNE — il n'a pas sa
   place sur une page d'accueil (décision du 20 août 2026). */
.avanc{border-bottom:1px solid var(--filet);background:var(--surface)}
.avanc-in{max-width:var(--lg);margin-inline:auto;padding:.75rem var(--marge);
  display:flex;align-items:center;flex-wrap:wrap;gap:.5rem 1.4rem}
.avanc-etq{font-family:var(--mono);font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--encre-tres-douce);flex-shrink:0}
.avanc-piste{flex:1 1 15rem;min-width:11rem;display:flex;align-items:center;gap:.55rem}
.avanc-rail{flex:1;height:3px;background:var(--surface-bas);position:relative;overflow:hidden}
.avanc-rail::after{content:"";position:absolute;inset:0 auto 0 0;width:var(--p,70%);
  background:var(--accent)}
@media(prefers-reduced-motion:no-preference){
  .avanc-rail::after{animation:avanc-pousse 1.1s var(--ease-doux) both}
  @keyframes avanc-pousse{from{width:0}to{width:var(--p,70%)}}
}
.avanc-jalons{display:flex;gap:.9rem;flex-wrap:wrap;font-family:var(--mono);font-size:.63rem;
  letter-spacing:.09em;text-transform:uppercase;color:var(--encre-tres-douce)}
.avanc-jalons b{font-weight:400;color:var(--accent);position:relative}
.avanc-jalons b::before{content:"";position:absolute;left:0;right:0;bottom:-3px;height:1px;
  background:var(--accent)}
.avanc-dit{font-size:.78rem;color:var(--encre-douce);flex-shrink:0}
.avanc-dit a{color:var(--encre);border-bottom:1px solid var(--accent)}
.avanc-dit a:hover{border-bottom-color:var(--encre)}
@media(max-width:820px){
  /* sur téléphone on ne garde que le jalon courant : la barre doit rester
     lisible, pas devenir un rail sans légende */
  .avanc-in{gap:.4rem .9rem}
  .avanc-jalons span{display:none}
  .avanc-piste{flex-basis:100%;order:3}
  .avanc-jalons{order:2}
  .avanc-dit{order:4;flex-basis:100%}
}

/* ═══ Correctifs THÈME SOMBRE (phase 1 rebrand) — sections qui supposaient
   un fond clair. Le reste de l'accueil suit les jetons tout seul. ═══ */
html[data-sombre] .fin{background:var(--surface);color:var(--encre)}
html[data-sombre] .fin p{color:var(--encre-douce)}
html[data-sombre] .fin .btn-main{background:var(--accent);color:#fff}
html[data-sombre] .fin .btn-main:hover{background:var(--accent-fort)}
html[data-sombre] .fin .btn-ghost{background:transparent;color:var(--encre);border-color:var(--bordure-forte)}
html[data-sombre] .fin .btn-ghost:hover{border-color:var(--encre-tres-douce)}
html[data-sombre] .fin .mentions{color:var(--encre-tres-douce)}
html[data-sombre] .cat-spec,html[data-sombre] .fond-off .k{color:var(--gmao-fort)}

/* ═══ Vraies captures : aperçu héros (switch métier) + écran Stock ═══ */
.doc-shots{position:relative;aspect-ratio:1440/900;border-radius:12px;overflow:hidden;border:1px solid var(--bordure);background:#0d0b08}
img.doc-corps{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top left;margin:0;padding:0;border:0}
img.doc-corps[hidden]{display:none}
.capture{grid-column:3/13;margin:2.2rem 0 0}
@media(max-width:900px){.capture{grid-column:1/13}}
.capture img{display:block;width:100%;height:auto;border-radius:14px;border:1px solid var(--bordure);box-shadow:var(--ombre-l)}
.capture figcaption{margin-top:.9rem;font-family:var(--mono);font-size:.66rem;letter-spacing:.05em;line-height:1.5;color:var(--encre-tres-douce);text-align:center;max-width:52ch;margin-inline:auto}

/* ── Mobile : captures lisibles plutôt qu'écrasées ── */
@media(max-width:640px){
  /* la capture Stock (preuve produit) défile horizontalement à taille lisible */
  .capture{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .capture img{min-width:720px;width:720px;max-width:none}
  .capture figcaption{position:sticky;left:0;min-width:0}
  /* l'aperçu du héros reste un teaser : on le montre un peu plus haut */
  .doc-shots{aspect-ratio:16/12}
}