/* =========================================================
   SITE.CSS — Vitrine publique « Dexter » (accueil + pages métier + FAQ)
   Direction artistique « Atelier honnête » : crème chaud, encre tiède,
   accents chauds par métier. Mécanique de PARITÉ : le chrome lit --accent
   (NEUTRE encre sur l'accueil) ; chaque page métier ne change qu'une ligne
   (html[data-metier="…"]) pour reteinter tout le chrome.
   Partagé par index/auto/crm/gmao/compta/faq.html (header/footer recopiés).
   ========================================================= */

/* Geist — auto-hébergé (identique à l'app). Instrument Serif chargé par <link>. */
@font-face{font-family:'Geist';src:url('../fonts/geist-latin.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}

:root{
  --serif:'Instrument Serif',Georgia,serif;
  --sans:'Geist',system-ui,-apple-system,'Segoe UI',sans-serif;
  /* neutres « Atelier honnête » */
  --fond:#faf8f4; --surface:#ffffff; --surface-bas:#f4f1ea; --surface-bas2:#efe9dd;
  --encre:#1c1a17; --encre-douce:#6b6358; --encre-tres-douce:#938a7c;
  --bordure:#e7e1d6; --bordure-forte:#d8d0c2;
  /* couleurs métier (n'apparaissent qu'à parité sur l'accueil) */
  --auto:#c25a3a; --auto-fort:#a8472b; --auto-clair:#f7e7df;
  --crm:#4f7a5e;  --crm-fort:#3f6450;  --crm-clair:#e3ece6;
  --gmao:#b07d2a; --gmao-fort:#946718; --gmao-clair:#f1e4cb;
  --cpta:#2f6e6a; --cpta-fort:#245450; --cpta-clair:#d9e8e6;
  --or:#cf9636; --succes:#3f6f5a; --alerte:#b23a2a;
  --ombre-s:0 1px 2px rgba(40,33,24,.05),0 1px 3px rgba(40,33,24,.04);
  --ombre-m:0 4px 14px rgba(40,33,24,.06),0 2px 6px rgba(40,33,24,.04);
  --ombre-l:0 24px 60px rgba(40,33,24,.12),0 8px 24px rgba(40,33,24,.07);
  --ease:cubic-bezier(.22,.61,.36,1);
  --rayon:16px;
  /* PILOTAGE D'ACCENT — neutre encre sur l'accueil (parité) */
  --accent:#27241f; --accent-fort:#1c1a17; --accent-clair:#efe9e0;
}
/* Pages métier : une ligne suffit à reteinter tout le chrome */
html[data-metier="auto"]  {--accent:#c25a3a;--accent-fort:#a8472b;--accent-clair:#f7e7df}
html[data-metier="crm"]   {--accent:#4f7a5e;--accent-fort:#3f6450;--accent-clair:#e3ece6}
html[data-metier="gmao"]  {--accent:#b07d2a;--accent-fort:#946718;--accent-clair:#f1e4cb}
html[data-metier="compta"]{--accent:#2f6e6a;--accent-fort:#245450;--accent-clair:#d9e8e6}

body{font-family:var(--sans);background:var(--fond);color:var(--encre);line-height:1.62;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
::selection{background:var(--accent-clair);color:var(--accent-fort)}
img,svg{display:block}

/* skip-link accessibilité */
.skip{position:absolute;left:-999px;top:.5rem;z-index:1000;background:var(--encre);color:#fff;padding:.5rem .9rem;border-radius:8px;font-size:.85rem}
.skip:focus{left:.5rem}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}

/* ── logo « Dexter » + marque forge ── */
.lgx{font-family:var(--serif);letter-spacing:-.015em;display:inline-flex;align-items:center;gap:.34em;line-height:1;color:var(--encre)}
.lgx svg{width:.92em;height:.92em;flex-shrink:0}

/* ── bandeau de conformité (neutre, non bloquant) ── */
.bandeau{display:flex;align-items:center;justify-content:center;gap:.85rem;flex-wrap:wrap;padding:.5rem 1.1rem;font-size:.8rem;color:var(--encre-douce);background:var(--surface-bas);border-bottom:1px solid var(--bordure);overflow:hidden;transition:height .25s var(--ease),opacity .25s var(--ease)}
.bandeau b{color:var(--encre);font-weight:600}
.bandeau-x{font:inherit;font-size:1.05rem;line-height:1;color:var(--encre-tres-douce);background:transparent;border:none;cursor:pointer;padding:.1rem .3rem;transition:color .2s}
.bandeau-x:hover{color:var(--encre)}
.bandeau.parti{height:0;opacity:0;padding-block:0;border:none}

/* ── header sticky partagé ── */
.hd{position:sticky;top:0;z-index:400;display:flex;align-items:center;justify-content:space-between;gap:1rem;height:62px;padding:0 clamp(1rem,4vw,3rem);background:color-mix(in srgb,var(--fond) 82%,transparent);backdrop-filter:blur(16px) saturate(140%);border-bottom:1px solid transparent;transition:height .2s var(--ease),border-color .2s var(--ease)}
.hd.compact{height:54px;border-bottom-color:var(--bordure)}
.hd-nav{display:flex;align-items:center;gap:1.25rem}
.hd-link{font-size:.84rem;color:var(--encre-douce);transition:color .2s;background:none;border:none;font-family:inherit;cursor:pointer}
.hd-link:hover,.hd-link[aria-current="page"]{color:var(--encre)}
.hd-cta{background:var(--accent);color:#fff;font-size:.84rem;font-weight:600;padding:.48rem 1.15rem;border-radius:9px;transition:background .2s;box-shadow:var(--ombre-s)}
.hd-cta:hover{background:var(--accent-fort)}
/* mega-menu Produits */
.hd-prod{position:relative}
.hd-prod-btn{display:inline-flex;align-items:center;gap:.3rem}
.hd-prod-btn svg{width:11px;height:11px;transition:transform .2s}
.hd-prod[data-open="1"] .hd-prod-btn svg{transform:rotate(180deg)}
.hd-menu{position:absolute;top:calc(100% + .55rem);left:50%;transform:translateX(-50%) translateY(-6px);min-width:300px;background:var(--surface);border:1px solid var(--bordure);border-radius:14px;box-shadow:var(--ombre-l);padding:.5rem;opacity:0;visibility:hidden;transition:opacity .2s var(--ease),transform .2s var(--ease)}
.hd-prod[data-open="1"] .hd-menu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.hd-mi{display:flex;align-items:center;gap:.7rem;padding:.55rem .65rem;border-radius:10px;transition:background .15s}
.hd-mi:hover{background:var(--surface-bas)}
.hd-mi i{width:9px;height:9px;border-radius:50%;flex-shrink:0;background:var(--mc)}
.hd-mi .nm{font-size:.85rem;font-weight:600;color:var(--encre)}
.hd-mi .ds{font-size:.72rem;color:var(--encre-tres-douce)}
@media(max-width:820px){.hd-nav .hd-link,.hd-prod{display:none}}

/* ── boutons ── */
.btn-main{display:inline-flex;align-items:center;gap:.45rem;background:var(--accent);color:#fff;font-size:.98rem;font-weight:600;padding:.85rem 1.85rem;border-radius:11px;box-shadow:var(--ombre-m);transition:background .2s,transform .2s,box-shadow .2s;position:relative;overflow:hidden}
.btn-main:hover{background:var(--accent-fort);transform:translateY(-2px);box-shadow:var(--ombre-l)}
.btn-main .sheen{position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.25) 50%,transparent 70%);transform:translateX(-120%)}
.btn-main:hover .sheen{transform:translateX(120%);transition:transform .6s var(--ease)}
.btn-ghost{display:inline-flex;align-items:center;gap:.45rem;border:1px solid var(--bordure-forte);color:var(--encre);background:var(--surface);font-size:.98rem;font-weight:550;padding:.85rem 1.65rem;border-radius:11px;transition:all .2s;box-shadow:var(--ombre-s)}
.btn-ghost:hover{border-color:var(--encre-tres-douce);transform:translateY(-2px)}

/* ── briques de section ── */
.sec{max-width:1080px;margin:0 auto;padding:clamp(4rem,8vw,7rem) clamp(1rem,4vw,3rem)}
.sec-large{max-width:none;background:var(--surface-bas)}
.sec-large > .sec-in{max-width:1080px;margin:0 auto}
.sec-tete{max-width:620px;margin:0 auto 2.6rem;text-align:center}
.sec-tete.gauche{margin-left:0;text-align:left}
.sec-ey{display:block;font-size:.72rem;font-weight:650;letter-spacing:.09em;text-transform:uppercase;color:var(--accent);margin-bottom:.85rem}
.sec-t{font-family:var(--serif);font-weight:400;font-size:clamp(1.9rem,4vw,2.9rem);line-height:1.1;letter-spacing:-.015em;color:var(--encre)}
.sec-t em{font-style:italic;color:var(--accent)}
.sec-sub{color:var(--encre-douce);margin-top:1rem;line-height:1.7;font-size:1.02rem}

/* ── hero ── */
.hero{max-width:1080px;margin:0 auto;padding:clamp(3.5rem,6vw,5.5rem) clamp(1rem,4vw,3rem) 2.5rem;text-align:center}
.eyebrow{display:inline-flex;align-items:center;gap:.5rem;background:var(--surface);border:1px solid var(--bordure);color:var(--encre-douce);font-size:.72rem;font-weight:550;letter-spacing:.06em;text-transform:uppercase;padding:.34rem .9rem;border-radius:99px;box-shadow:var(--ombre-s)}
.eyebrow b{width:6px;height:6px;border-radius:50%;background:var(--accent)}
h1.h1{font-family:var(--serif);font-weight:400;font-size:clamp(3rem,7vw,5.4rem);line-height:1.02;letter-spacing:-.025em;color:var(--encre);margin-top:1.6rem}
h1.h1 em{font-style:italic;color:var(--accent)}
.sub{font-size:clamp(1.05rem,1.6vw,1.28rem);color:var(--encre-douce);line-height:1.62;max-width:620px;margin:1.5rem auto 0}
.sub b{color:var(--encre);font-weight:600}
.ctas{display:flex;gap:.7rem;justify-content:center;flex-wrap:wrap;margin-top:2.1rem}
.micro{margin-top:1.1rem;font-size:.78rem;color:var(--encre-tres-douce)}

/* ── vitrine produit (fenêtre claire) ── */
.vitrine{max-width:920px;margin:3.2rem auto 0}
.vit-fen{background:var(--surface);border:1px solid var(--bordure);border-radius:var(--rayon);box-shadow:var(--ombre-l);overflow:hidden;text-align:left}
.vit-bar{display:flex;align-items:center;gap:.6rem;padding:.7rem 1rem;border-bottom:1px solid var(--bordure);background:var(--surface-bas)}
.vit-dots i{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:5px;background:var(--bordure-forte)}
.vit-url{flex:1;max-width:340px;margin:0 auto;text-align:center;font-size:.7rem;color:var(--encre-tres-douce);background:var(--surface);border:1px solid var(--bordure);border-radius:7px;padding:.24rem .9rem}
.vit-corps{display:grid;grid-template-columns:172px 1fr;min-height:288px}
.vit-side{border-right:1px solid var(--bordure);padding:.9rem .7rem;display:flex;flex-direction:column;gap:.18rem;background:var(--surface-bas)}
.vit-side .lo{display:flex;align-items:center;gap:.34rem;font-family:var(--serif);font-size:1.05rem;padding:.2rem .55rem .7rem;color:var(--encre)}
.vit-side .lo svg{width:1em;height:1em}
.vit-mi{display:flex;align-items:center;gap:.55rem;font-size:.77rem;font-weight:500;color:var(--encre-douce);border-radius:8px;padding:.44rem .6rem}
.vit-mi i{width:7px;height:7px;border-radius:50%;background:var(--mc,currentColor);flex-shrink:0}
.vit-mi.on{color:var(--encre);background:var(--surface);font-weight:600;box-shadow:var(--ombre-s)}
.vit-main{padding:1.1rem 1.2rem 1.3rem;min-width:0}
.vit-hd{display:flex;align-items:center;justify-content:space-between;gap:.8rem;margin-bottom:1rem}
.vit-hd .t{font-size:.96rem;font-weight:700;color:var(--encre)}
.vit-hd .t span{display:block;font-size:.7rem;font-weight:500;color:var(--encre-tres-douce);margin-top:.12rem}
.vit-av{width:30px;height:30px;border-radius:50%;background:var(--accent);display:grid;place-items:center;font-size:.66rem;font-weight:700;color:#fff;flex-shrink:0}
.vit-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem;margin-bottom:.9rem}
.vit-k{background:var(--surface-bas);border:1px solid var(--bordure);border-radius:11px;padding:.65rem .75rem}
.vit-k b{font-size:1.1rem;font-weight:700;display:block;color:var(--encre);font-variant-numeric:tabular-nums}
.vit-k span{font-size:.66rem;color:var(--encre-tres-douce)}
.vit-rows{display:flex;flex-direction:column;gap:.45rem}
.vit-row{display:flex;align-items:center;gap:.7rem;background:var(--surface-bas);border:1px solid var(--bordure);border-radius:11px;padding:.6rem .78rem}
.vit-ic{width:32px;height:32px;border-radius:9px;background:var(--accent-clair);display:grid;place-items:center;flex-shrink:0;color:var(--accent-fort)}
.vit-ic svg{width:16px;height:16px}
.vit-row .inf{flex:1;min-width:0}
.vit-row .n{font-size:.79rem;font-weight:600;color:var(--encre);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vit-row .s{font-size:.67rem;color:var(--encre-tres-douce)}
.pill{font-size:.64rem;font-weight:700;padding:.2rem .55rem;border-radius:99px;flex-shrink:0;background:var(--accent-clair);color:var(--accent-fort)}
.pill.amb{background:#f7ecd6;color:#8a6516}
.pill.ok{background:#e3efe7;color:var(--succes)}

/* ── grille « douleurs » (problème) ── */
.tri{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.carte{background:var(--surface);border:1px solid var(--bordure);border-radius:var(--rayon);padding:1.5rem 1.4rem;box-shadow:var(--ombre-s);transition:transform .2s,box-shadow .2s}
.carte:hover{transform:translateY(-3px);box-shadow:var(--ombre-m)}
.carte-ic{width:40px;height:40px;border-radius:11px;background:var(--surface-bas);border:1px solid var(--bordure);color:var(--accent);display:grid;place-items:center;margin-bottom:.9rem}
.carte-ic svg{width:20px;height:20px}
.carte h3{font-size:1rem;font-weight:700;color:var(--encre);margin-bottom:.3rem}
.carte p{font-size:.85rem;color:var(--encre-douce);line-height:1.55}
.bascule{font-family:var(--serif);font-style:italic;font-size:clamp(1.4rem,3vw,2rem);text-align:center;color:var(--encre);margin-top:2.4rem;line-height:1.25}

/* ── 4 métiers (hero-router, parité) ── */
.met-g{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.met{position:relative;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--bordure);border-radius:var(--rayon);padding:1.5rem 1.4rem;box-shadow:var(--ombre-s);transition:transform .15s var(--ease),box-shadow .15s var(--ease),border-color .15s var(--ease)}
.met::before{content:'';position:absolute;left:0;top:0;width:100%;height:3px;background:var(--mc);border-radius:var(--rayon) var(--rayon) 0 0}
.met:hover{transform:translateY(-4px);box-shadow:var(--ombre-m);border-color:color-mix(in srgb,var(--mc) 35%,var(--bordure))}
.met-ic{width:42px;height:42px;border-radius:11px;background:color-mix(in srgb,var(--mc) 11%,transparent);color:var(--mc);display:grid;place-items:center;margin-bottom:1rem}
.met-ic svg{width:21px;height:21px}
.met h3{font-size:1.08rem;font-weight:700;color:var(--encre)}
.met .who{font-size:.72rem;color:var(--mc);font-weight:600;margin:.1rem 0 .6rem}
.met p{font-size:.85rem;color:var(--encre-douce);line-height:1.55}
.met-list{list-style:none;margin:.85rem 0 0;display:flex;flex-direction:column;gap:.4rem}
.met-list li{display:flex;gap:.5rem;font-size:.78rem;color:var(--encre-douce);line-height:1.4}
.met-list .pt{color:var(--mc);flex-shrink:0;font-weight:700}
.met .go{margin-top:1.05rem;font-size:.82rem;font-weight:600;color:var(--mc);display:inline-flex;align-items:center;gap:.35rem}
.met .go svg{transition:transform .2s}.met:hover .go svg{transform:translateX(3px)}

/* ── socle commun ── */
.socle-schema{max-width:680px;margin:0 auto 2.6rem}
.socle-blocs{display:grid;grid-template-columns:repeat(4,1fr);gap:.6rem;margin-bottom:.7rem}
.socle-bloc{height:54px;border-radius:10px;display:grid;place-items:center;font-size:.74rem;font-weight:700;color:#fff;text-align:center}
.socle-base{background:var(--surface);border:1px solid var(--bordure);border-radius:12px;padding:.85rem;display:flex;justify-content:space-around;flex-wrap:wrap;gap:.5rem;font-size:.78rem;font-weight:600;color:var(--encre-douce);box-shadow:var(--ombre-s)}
.socle-base span{display:inline-flex;align-items:center;gap:.4rem}
.socle-base i{width:6px;height:6px;border-radius:50%;background:var(--encre-tres-douce)}
.quatre{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.ben{background:var(--surface);border:1px solid var(--bordure);border-radius:var(--rayon);padding:1.4rem 1.3rem;box-shadow:var(--ombre-s)}
.ben-ic{width:40px;height:40px;border-radius:11px;background:var(--accent-clair);color:var(--accent-fort);display:grid;place-items:center;margin-bottom:.85rem}
.ben-ic svg{width:19px;height:19px}
.ben h4{font-size:.96rem;font-weight:700;color:var(--encre);margin-bottom:.3rem}
.ben p{font-size:.83rem;color:var(--encre-douce);line-height:1.55}

/* ── chiffres (count-up) ── */
.chiffres{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.ch{text-align:center;padding:1.4rem .8rem;background:var(--surface);border:1px solid var(--bordure);border-radius:var(--rayon);box-shadow:var(--ombre-s)}
.ch b{font-family:var(--serif);font-size:clamp(2.2rem,4vw,3rem);display:block;color:var(--accent);font-variant-numeric:tabular-nums;line-height:1}
.ch span{font-size:.8rem;color:var(--encre-douce);display:block;margin-top:.45rem}

/* ── conformité (marquee) ── */
.marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee-track{display:inline-flex;gap:.7rem;white-space:nowrap;will-change:transform;animation:defile 38s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes defile{to{transform:translateX(-50%)}}
.badge{display:inline-flex;align-items:center;gap:.5rem;font-size:.85rem;font-weight:600;color:var(--encre);background:var(--surface);border:1px solid var(--bordure);border-radius:99px;padding:.5rem 1rem;box-shadow:var(--ombre-s)}
.badge svg{width:15px;height:15px;color:var(--accent);flex-shrink:0}

/* ── parole d'éditeur ── */
.parole{max-width:760px;margin:0 auto;background:var(--surface);border:1px solid var(--bordure);border-radius:var(--rayon);padding:2.6rem 2.4rem;text-align:center;box-shadow:var(--ombre-s)}
.parole q{font-family:var(--serif);font-style:italic;font-size:clamp(1.3rem,2.6vw,1.8rem);line-height:1.35;color:var(--encre);display:block}
.parole cite{display:block;margin-top:1.2rem;font-style:normal;font-size:.85rem;font-weight:600;color:var(--encre-douce)}

/* ── FAQ (accordéon natif) ── */
.faq{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:.6rem}
.faq details{background:var(--surface);border:1px solid var(--bordure);border-radius:12px;box-shadow:var(--ombre-s);overflow:hidden}
.faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.05rem 1.25rem;font-size:.96rem;font-weight:600;color:var(--encre)}
.faq summary::-webkit-details-marker{display:none}
.faq summary .chev{flex-shrink:0;width:18px;height:18px;color:var(--encre-tres-douce);transition:transform .3s var(--ease)}
.faq details[open] summary .chev{transform:rotate(180deg)}
.faq .rep{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s var(--ease)}
.faq details[open] .rep{grid-template-rows:1fr}
.faq .rep > div{overflow:hidden}
.faq .rep p{padding:0 1.25rem 1.15rem;font-size:.89rem;color:var(--encre-douce);line-height:1.6}
.faq .rep p b{color:var(--encre);font-weight:600}
.faq-cat{font-size:.74rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--accent);margin:1.6rem 0 .2rem}
.faq-cat:first-child{margin-top:0}

/* ── CTA final ── */
.cta-carte{max-width:1080px;margin:0 auto;background:linear-gradient(165deg,#fffdfb,var(--surface-bas));border:1px solid var(--bordure-forte);border-radius:22px;padding:clamp(2.6rem,5vw,3.6rem) 2rem;text-align:center;box-shadow:var(--ombre-m)}
.cta-carte h2{font-family:var(--serif);font-weight:400;font-size:clamp(2rem,4.5vw,3.2rem);line-height:1.05;letter-spacing:-.02em;color:var(--encre);margin-bottom:.8rem}
.cta-carte h2 em{font-style:italic;color:var(--accent)}
.cta-carte p{color:var(--encre-douce);max-width:520px;margin:0 auto 1.8rem;line-height:1.65}
.cta-dots{display:flex;gap:.5rem;justify-content:center;margin-top:1.8rem}
.cta-dots i{width:8px;height:8px;border-radius:50%}

/* ── cross-sell (pages métier) ── */
.cross{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.cross-c{display:flex;align-items:center;gap:.8rem;background:var(--surface);border:1px solid var(--bordure);border-radius:12px;padding:1rem 1.1rem;box-shadow:var(--ombre-s);transition:transform .2s,box-shadow .2s}
.cross-c:hover{transform:translateY(-3px);box-shadow:var(--ombre-m)}
.cross-c i{width:10px;height:10px;border-radius:50%;background:var(--mc);flex-shrink:0}
.cross-c .nm{font-size:.9rem;font-weight:700;color:var(--encre)}
.cross-c .ds{font-size:.74rem;color:var(--encre-tres-douce)}

/* ── zigzag fonctionnalités (pages métier) ── */
.feat{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,4vw,3.5rem);align-items:center;margin:0 auto;max-width:1000px}
.feat + .feat{margin-top:clamp(2.5rem,5vw,4rem)}
.feat.inv .feat-txt{order:2}
.feat-txt h3{font-family:var(--serif);font-weight:400;font-size:clamp(1.4rem,2.4vw,1.9rem);line-height:1.15;color:var(--encre);margin-bottom:.6rem}
.feat-txt p{font-size:.92rem;color:var(--encre-douce);line-height:1.6;margin-bottom:1rem}
.feat-list{list-style:none;display:flex;flex-direction:column;gap:.45rem}
.feat-list li{display:flex;gap:.55rem;font-size:.85rem;color:var(--encre-douce)}
.feat-list .pt{color:var(--accent);flex-shrink:0;font-weight:700}
.feat-mock{background:var(--surface);border:1px solid var(--bordure);border-radius:var(--rayon);box-shadow:var(--ombre-m);padding:1.1rem;min-height:200px}

/* ── footer partagé ── */
.foot{border-top:1px solid var(--bordure);background:var(--surface-bas)}
.foot-in{max-width:1080px;margin:0 auto;padding:3rem clamp(1rem,4vw,3rem) 2rem;display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:2rem}
.foot-marque .lgx{font-size:1.3rem}
.foot-tag{font-size:.82rem;color:var(--encre-douce);margin-top:.5rem;max-width:260px;line-height:1.5}
.foot-col h4{font-size:.72rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--encre);margin-bottom:.7rem}
.foot-col a{display:block;font-size:.82rem;color:var(--encre-douce);padding:.2rem 0;transition:color .2s}
.foot-col a:hover{color:var(--encre)}
.foot-bar{border-top:1px solid var(--bordure);max-width:1080px;margin:0 auto;padding:1rem clamp(1rem,4vw,3rem);font-size:.76rem;color:var(--encre-tres-douce);display:flex;justify-content:space-between;flex-wrap:wrap;gap:.6rem}
.foot-dots{display:flex;gap:.4rem}.foot-dots i{width:6px;height:6px;border-radius:50%}

/* ── reveal au scroll (mutualisé par site.js) ── */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .45s var(--ease),transform .45s var(--ease);transition-delay:calc(var(--i,0)*70ms)}
.reveal.vu{opacity:1;transform:none}

/* ── garde-fou mouvement réduit ── */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
}

/* ── responsive ── */
@media(max-width:880px){
  .met-g{grid-template-columns:repeat(2,1fr)}
  .quatre{grid-template-columns:repeat(2,1fr)}
  .chiffres{grid-template-columns:repeat(2,1fr)}
  .tri{grid-template-columns:1fr}
  .cross{grid-template-columns:1fr}
  .feat{grid-template-columns:1fr;gap:1.4rem}
  .feat.inv .feat-txt{order:0}
  .foot-in{grid-template-columns:1fr 1fr}
}
@media(max-width:720px){.vit-corps{grid-template-columns:1fr}.vit-side{display:none}}
@media(max-width:520px){
  .met-g{grid-template-columns:1fr}
  .chiffres{grid-template-columns:1fr 1fr}
  .socle-blocs{grid-template-columns:1fr 1fr}
  .foot-in{grid-template-columns:1fr 1fr}
}

/* ════ TARIFS (page tarifs.html) ════ */
.prix-ctrl{display:flex;flex-direction:column;align-items:center;gap:1.1rem;margin-bottom:2.4rem}
.seg{display:inline-flex;gap:.3rem;background:var(--surface-bas);border:1px solid var(--bordure);border-radius:99px;padding:.28rem}
.seg button{font:inherit;font-size:.82rem;font-weight:600;color:var(--encre-douce);background:transparent;border:none;border-radius:99px;padding:.4rem .95rem;cursor:pointer;display:inline-flex;align-items:center;gap:.4rem;transition:background .2s,color .2s}
.seg button i{width:8px;height:8px;border-radius:50%;background:var(--mc,currentColor)}
.seg button[aria-pressed="true"]{background:var(--surface);color:var(--encre);box-shadow:var(--ombre-s)}
.bascule-an{display:inline-flex;align-items:center;gap:.7rem;font-size:.85rem;color:var(--encre-douce)}
.bascule-an b{color:var(--encre)}
.interrupteur{position:relative;width:46px;height:26px;border-radius:99px;background:var(--bordure-forte);border:none;cursor:pointer;transition:background .25s var(--ease);flex-shrink:0}
.interrupteur::after{content:'';position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:var(--ombre-s);transition:transform .25s var(--ease)}
.interrupteur[aria-checked="true"]{background:var(--accent)}
.interrupteur[aria-checked="true"]::after{transform:translateX(20px)}
.eco{font-size:.74rem;font-weight:700;color:var(--accent);background:var(--accent-clair);border-radius:99px;padding:.16rem .55rem}

.tarifs{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;align-items:start;max-width:1000px;margin:0 auto}
.plan{position:relative;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--bordure);border-radius:var(--rayon);padding:1.7rem 1.5rem;box-shadow:var(--ombre-s)}
.plan.pop{border-color:color-mix(in srgb,var(--accent) 45%,var(--bordure));box-shadow:var(--ombre-m);transform:translateY(-6px)}
.plan-pop-tag{position:absolute;top:-11px;left:50%;transform:translateX(-50%);font-size:.62rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:#fff;background:var(--accent);padding:.22rem .7rem;border-radius:99px;white-space:nowrap}
.plan h3{font-size:1.1rem;font-weight:700;color:var(--encre)}
.plan .cible{font-size:.78rem;color:var(--encre-tres-douce);margin:.15rem 0 1rem;min-height:2.4em}
.plan .prix{font-family:var(--serif);font-size:3rem;line-height:1;color:var(--encre);font-variant-numeric:tabular-nums}
.plan .prix .dev{font-size:1.4rem;vertical-align:.25em;margin-left:.1em}
.plan .par{font-size:.78rem;color:var(--encre-douce);margin-top:.35rem}
.plan .annuel{font-size:.74rem;color:var(--encre-tres-douce);margin-top:.2rem;min-height:1.1em}
.plan .btn{margin:1.3rem 0;width:100%;justify-content:center}
.plan ul{list-style:none;display:flex;flex-direction:column;gap:.55rem;margin-top:.2rem}
.plan li{display:flex;gap:.55rem;font-size:.83rem;color:var(--encre-douce);line-height:1.4}
.plan li svg{width:16px;height:16px;color:var(--accent);flex-shrink:0;margin-top:1px}
.plan li b{color:var(--encre);font-weight:600}

.fondateur{max-width:1000px;margin:2.4rem auto 0;background:var(--accent-clair);border:1px solid color-mix(in srgb,var(--accent) 28%,transparent);border-radius:var(--rayon);padding:1.4rem 1.6rem;display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.fondateur .ic{width:42px;height:42px;border-radius:11px;background:var(--surface);color:var(--accent-fort);display:grid;place-items:center;flex-shrink:0}
.fondateur .ic svg{width:21px;height:21px}
.fondateur h4{font-size:1rem;color:var(--encre);margin-bottom:.2rem}
.fondateur p{font-size:.85rem;color:var(--accent-fort);line-height:1.5}
.addons{max-width:1000px;margin:2.4rem auto 0;display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.addon{background:var(--surface);border:1px solid var(--bordure);border-radius:12px;padding:1.1rem 1.2rem;box-shadow:var(--ombre-s)}
.addon .pr{font-weight:700;color:var(--accent-fort);font-size:.95rem}
.addon .nm{font-size:.88rem;font-weight:600;color:var(--encre);margin:.1rem 0 .25rem}
.addon .ds{font-size:.78rem;color:var(--encre-tres-douce);line-height:1.45}
@media(max-width:820px){.tarifs{grid-template-columns:1fr;max-width:440px}.plan.pop{transform:none}.addons{grid-template-columns:1fr}}

/* ── deux formules : en-tête de section Forge / Core ── */
.formule-tete{max-width:1000px;margin:0 auto 1.8rem;text-align:center}
.formule-tete .k{display:inline-flex;align-items:center;gap:.45rem;font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin-bottom:.5rem}
.formule-tete .k i{width:8px;height:8px;border-radius:50%;background:var(--accent)}
.formule-tete h2{font-family:var(--serif);font-weight:400;font-size:clamp(1.8rem,3.6vw,2.6rem);line-height:1.12;color:var(--encre)}
.formule-tete h2 em{font-style:italic;color:var(--accent)}
.formule-tete p{color:var(--encre-douce);margin-top:.6rem;font-size:.98rem;line-height:1.6;max-width:640px;margin-left:auto;margin-right:auto}

/* pont Forge → Core */
.pont{max-width:1000px;margin:2.4rem auto 0;text-align:center;font-size:.92rem;color:var(--encre-douce);background:var(--surface-bas);border:1px dashed var(--bordure-forte);border-radius:var(--rayon);padding:1.1rem 1.4rem}
.pont b{color:var(--encre)}
.pont a{color:var(--accent-fort);font-weight:600}

/* ── Dexter Core : offre sur mesure (en développement) ── */
.core{max-width:1000px;margin:0 auto;position:relative;background:var(--surface);border:1px solid var(--bordure-forte);border-radius:var(--rayon);padding:clamp(1.8rem,4vw,2.8rem);box-shadow:var(--ombre-m);overflow:hidden}
.core::before{content:'';position:absolute;left:0;top:0;width:100%;height:4px;background:linear-gradient(90deg,var(--auto),var(--crm),var(--gmao),var(--cpta))}
.core-dev{display:inline-flex;align-items:center;gap:.45rem;font-size:.68rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--encre-douce);background:var(--surface-bas);border:1px solid var(--bordure);border-radius:99px;padding:.28rem .72rem;margin-bottom:1rem}
.core-dev i{width:7px;height:7px;border-radius:50%;background:var(--or)}
.core-grid{display:grid;grid-template-columns:1.45fr 1fr;gap:clamp(1.5rem,3vw,2.4rem);align-items:center}
.core h2{font-family:var(--serif);font-weight:400;font-size:clamp(1.8rem,3.4vw,2.5rem);color:var(--encre);line-height:1.12;margin-bottom:.5rem}
.core h2 em{font-style:italic}
.core .lead{color:var(--encre-douce);line-height:1.65;margin-bottom:1.2rem;font-size:.96rem}
.core ul{list-style:none;display:flex;flex-direction:column;gap:.55rem}
.core li{display:flex;gap:.55rem;font-size:.88rem;color:var(--encre-douce);line-height:1.45}
.core li svg{width:17px;height:17px;color:var(--accent);flex-shrink:0;margin-top:1px}
.core li b{color:var(--encre);font-weight:600}
.core-aside{background:var(--surface-bas);border:1px solid var(--bordure);border-radius:var(--rayon);padding:1.6rem 1.4rem;text-align:center}
.core-aside .devis{font-family:var(--serif);font-size:1.9rem;color:var(--encre);line-height:1.05}
.core-aside .devis-sub{font-size:.78rem;color:var(--encre-tres-douce);margin:.55rem 0 1.2rem;line-height:1.5}
.core-aside .cadeau{display:flex;align-items:center;gap:.5rem;justify-content:center;font-size:.84rem;font-weight:600;color:var(--accent-fort);background:var(--accent-clair);border-radius:10px;padding:.65rem .8rem;margin-bottom:1rem;line-height:1.3}
.core-aside .cadeau svg{width:18px;height:18px;flex-shrink:0}
.core-aside .btn{width:100%;justify-content:center}
@media(max-width:820px){.core-grid{grid-template-columns:1fr}}

/* ---- sous-titre de section + vidéo de présentation 9:16 (page métier) ---- */
.sec-p{max-width:48ch;margin:1.1rem auto 0;color:var(--encre-douce);font-size:1.05rem;line-height:1.62;text-align:center}
.video-pres{position:relative;display:flex;justify-content:center;margin-top:clamp(2rem,4vw,3.2rem)}
.video-pres::before{content:"";position:absolute;width:min(1040px,96vw);height:min(620px,58vw);top:50%;left:50%;transform:translate(-50%,-50%);background:radial-gradient(ellipse,color-mix(in srgb,var(--accent) 18%,transparent),transparent 68%);z-index:0;pointer-events:none}
.video-pres video{position:relative;z-index:1;width:min(960px,94vw);aspect-ratio:16 / 9;border-radius:18px;background:#14110d;box-shadow:var(--ombre-l),0 0 0 1px var(--bordure);display:block;cursor:pointer}