/* ============================================================
   KENTRA — feuille de style
   0. Polices · 1. Jetons · 2. Base · 3. Utilitaires
   4. En-tête · 5. Actes et bords · 6. Acte I — l'accroche
   7. Acte II — le constat · 8. Acte III — la démonstration
   9. Réalisations · 10. Acte IV — la méthode
   11. Acte IV — le devis · 12. Acte V — l'atelier
   13. Acte VII — les réponses · 14. Acte VIII — le contact
   15. Pied de page · 16. Mentions légales
   17. Adaptation aux écrans · 18. Préférences et impression
   ============================================================ */

/* ── 0. POLICES ───────────────────────────────────────────── */
/* Servies depuis ce serveur, en Europe : aucun appel à un tiers,
   aucune adresse IP de visiteur transmise, et un affichage plus rapide. */
@font-face{font-family:"Inter";font-style:normal;font-weight:400 600;font-display:swap;
  src:url("assets/polices/inter-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter";font-style:normal;font-weight:400 600;font-display:swap;
  src:url("assets/polices/inter-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:700 800;font-display:swap;
  src:url("assets/polices/montserrat-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:700 800;font-display:swap;
  src:url("assets/polices/montserrat-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ── 1. JETONS ────────────────────────────────────────────── */
:root{
  --bg:#FAFAF8;
  --surface:#FFFFFF;
  --ink:#1C222E;
  --muted:#606775;
  --accent:#F97316;
  --accent-deep:#EA580C;
  --accent-txt:#9A3412;
  /* Orange assombri : seuil AA (>=4.5:1) sur les fonds clairs du site. */
  --accent-aa:#C2410C;
  --gold:#FBBF24;
  --soft:#FFF7ED;
  --line:#E7E5E1;

  --ink-90:rgba(28,34,46,.90);
  --ink-70:rgba(28,34,46,.68);
  --ink-45:rgba(28,34,46,.65);
  --ink-deep:#141922;
  --ink-deeper:#10141C;
  --bg-warm:#F5F3EF;

  --d-70:rgba(255,255,255,.66);
  --d-45:rgba(255,255,255,.44);
  --d-line:rgba(255,255,255,.13);
  --d-surface:rgba(255,255,255,.045);

  --sh-xs:0 1px 2px rgba(28,34,46,.05);
  --sh-sm:0 1px 2px rgba(28,34,46,.04), 0 4px 12px -6px rgba(28,34,46,.10);
  --sh-md:0 2px 4px rgba(28,34,46,.03), 0 14px 32px -16px rgba(28,34,46,.18);
  --sh-lg:0 4px 8px rgba(28,34,46,.03), 0 34px 64px -28px rgba(28,34,46,.26);
  --sh-o:0 8px 20px -10px rgba(234,88,12,.48), 0 2px 4px rgba(234,88,12,.14);
  --sh-o-h:0 14px 30px -10px rgba(234,88,12,.55), 0 2px 4px rgba(234,88,12,.16);

  --r-xs:8px; --r-sm:12px; --r-md:16px; --r-lg:22px; --r-xl:30px; --r-pill:999px;

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,.84,.44,1);
  --ease-io:cubic-bezier(.65,.05,.36,1);
  --spring:cubic-bezier(.34,1.32,.52,1);

  --pad:clamp(20px,5vw,48px);
  --sec:clamp(84px,10.5vw,164px);
  --max:1220px;

  --fs-display:clamp(2.6rem,1.15rem + 5.7vw,5.4rem);
  --fs-h2:clamp(2rem,1.14rem + 3.05vw,3.5rem);
  --fs-h3:clamp(1.28rem,1.1rem + .78vw,1.75rem);
  --fs-lead:clamp(1.03rem,.98rem + .38vw,1.24rem);
  --fs-sm:.875rem;
  --fs-xs:.775rem;

  --font-t:"Montserrat",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-b:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
}

/* ── 2. BASE ──────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:96px;overflow-x:clip}
body{
  background:var(--bg);color:var(--ink);
  font-family:var(--font-b);font-size:1rem;line-height:1.62;
  font-weight:400;letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  /* clip et non hidden : hidden crée un conteneur de défilement
     qui casserait toutes les séquences épinglées (position:sticky). */
  overflow-x:clip;
}
body.lock{overflow:hidden}
img,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
ul,ol{list-style:none}
h1,h2,h3,h4{font-family:var(--font-t);font-weight:800;line-height:1.06;letter-spacing:-.035em}
strong{font-weight:600}
::selection{background:var(--accent);color:#fff}

/* Anneau de focus : même dessin partout, halo discret pour rester
   lisible sur fond clair comme sur fond foncé. */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,
select:focus-visible,summary:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--accent-deep);outline-offset:3px;border-radius:5px;
  box-shadow:0 0 0 5px rgba(234,88,12,.16);
}
.acte-sombre a:focus-visible,.acte-sombre button:focus-visible,
.acte-sombre input:focus-visible,.acte-sombre [tabindex]:focus-visible,
.mnav a:focus-visible,.mnav button:focus-visible{
  outline-color:var(--gold);box-shadow:0 0 0 5px rgba(251,191,36,.24);
}
.ct-card a:focus-visible,.ct-card button:focus-visible,.ct-card input:focus-visible,
.ct-card textarea:focus-visible,.ct-card [tabindex]:focus-visible{
  outline-color:var(--accent-deep);box-shadow:0 0 0 5px rgba(234,88,12,.16);
}

.sprite{position:absolute;width:0;height:0;overflow:hidden}
.ic{width:1em;height:1em;fill:none;flex:none}
.skip{position:absolute;left:16px;top:-70px;z-index:300;background:var(--ink);color:#fff;padding:12px 20px;border-radius:0 0 var(--r-sm) var(--r-sm);font-size:var(--fs-sm);font-weight:600;transition:top .25s var(--ease)}
.skip:focus{top:0}

/* ── 3. UTILITAIRES ───────────────────────────────────────── */
.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--pad)}

.h-display{font-size:var(--fs-display);letter-spacing:-.05em;line-height:.94}
.h-sec{font-size:var(--fs-h2);letter-spacing:-.045em;line-height:.99}
.h-sec-d{color:#fff}
.h-ter{font-family:var(--font-t);font-size:var(--fs-h3);font-weight:800;letter-spacing:-.038em;line-height:1.1}
.h-ter-d{color:#fff}
.lead{font-size:var(--fs-lead);color:var(--ink-70);line-height:1.6;max-width:48ch;margin-top:26px}
.sec-lead{font-size:var(--fs-lead);color:var(--muted);line-height:1.6;max-width:52ch;margin-top:22px}
.sec-lead-d{color:var(--d-70)}

/* Le marqueur : le mot qui porte la phrase, souligné d'un trait chevronné. */
.mark,.mark-d{position:relative;display:inline-block;color:var(--accent-deep)}
.mark-d{color:var(--gold)}
.mark::after,.mark-d::after{
  content:"";position:absolute;left:-.02em;right:-.02em;bottom:.02em;height:.09em;border-radius:2px;
  background:linear-gradient(90deg,var(--accent),var(--gold));
  transform:scaleX(0);transform-origin:left;
  animation:markIn .72s var(--ease-out) .34s forwards;
}
.mark-d::after{background:linear-gradient(90deg,var(--gold),var(--accent))}
@keyframes markIn{to{transform:scaleX(1)}}

.eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  font-size:var(--fs-xs);font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);
}
.odot{width:6px;height:6px;border-radius:50%;background:var(--accent);position:relative;flex:none}
.odot::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1px solid var(--accent);opacity:.4;animation:pulse 2.6s var(--ease-io) infinite}
@keyframes pulse{0%{transform:scale(.7);opacity:.55}70%{transform:scale(1.7);opacity:0}100%{opacity:0}}

/* Boutons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  font-family:var(--font-b);font-size:.945rem;font-weight:600;letter-spacing:-.012em;
  padding:15px 26px;border-radius:var(--r-sm);min-height:48px;
  position:relative;isolation:isolate;white-space:nowrap;
  transition:transform .22s var(--ease),box-shadow .28s var(--ease),background-color .22s var(--ease),color .22s var(--ease),border-color .22s var(--ease);
}
.btn .ic{width:.72em;height:.9em;transition:transform .28s var(--spring)}
.btn:hover .ic{transform:translateX(4px)}
.btn:active{transform:translateY(1px) scale(.994)}
.btn-p{background:var(--accent);color:#fff;box-shadow:var(--sh-o)}
.btn-p::before{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(102deg,var(--accent-deep),var(--accent) 46%,var(--gold) 148%);opacity:0;transition:opacity .28s var(--ease);z-index:-1}
.btn-p:hover{box-shadow:var(--sh-o-h);transform:translateY(-2px)}
.btn-p:hover::before{opacity:1}
.btn-g{background:var(--surface);color:var(--ink);border:1px solid var(--line);box-shadow:var(--sh-xs)}
.btn-g:hover{border-color:var(--ink);box-shadow:var(--sh-sm);transform:translateY(-2px)}
.acte-sombre .btn-g{background:transparent;color:#fff;border-color:var(--d-line)}
.acte-sombre .btn-g:hover{border-color:var(--gold);color:var(--gold);background:rgba(251,191,36,.06)}
.btn-sm{padding:11px 19px;font-size:.875rem;border-radius:var(--r-xs);min-height:44px}
.btn-lg{padding:18px 32px;font-size:1.02rem}
.btn-blk{display:flex;width:100%}

/* Révélations au défilement — l'angle du chevron donne la direction. */
.js [data-reveal]{opacity:0;transform:translate3d(-10px,22px,0)}
.js [data-reveal].in{
  opacity:1;transform:none;
  transition:opacity .6s var(--ease-out) var(--d,0ms),transform .8s var(--ease-out) var(--d,0ms);
}
/* Filet : si le script ne s'exécute pas (réseau, blocage, erreur),
   tout le contenu redevient visible au bout d'une seconde. */
.reveler-tout [data-reveal]{opacity:1!important;transform:none!important}
/* Sans JavaScript, on n'affiche pas les commandes qui n'auraient aucun effet. */

/* ── 4. EN-TÊTE ───────────────────────────────────────────── */
/* Le fond n'est PAS animé : dès le premier pixel de défilement il est opaque.
   Une transition, même de 220 ms, laisse le contenu transparaître au travers
   de l'en-tête pendant ce laps de temps — c'est exactement le défaut signalé. */
.hdr{position:sticky;top:0;z-index:120;transition:box-shadow .22s var(--ease)}
/* Bascule clair ↔ sombre : le fond, le logo et les libellés changent dans la
   même image. Sans cela, le fond met 220 ms à virer pendant que le logo a déjà
   basculé — c'est ce décalage qui rendait l'en-tête illisible au défilement. */
.hdr.fige,.hdr.fige *{transition:none!important}
.hdr-in{
  max-width:var(--max);margin-inline:auto;padding:20px var(--pad);
  display:flex;align-items:center;gap:clamp(12px,1.6vw,26px);
  transition:padding .32s var(--ease);
}
/* Fond franchement opaque : le contenu de la page ne doit jamais transparaître
   au travers de l'en-tête, quelle que soit la hauteur de défilement. */
.hdr.on{
  background:rgba(250,250,248,.97);
  backdrop-filter:saturate(180%) blur(14px);-webkit-backdrop-filter:saturate(180%) blur(14px);
  box-shadow:0 1px 0 rgba(28,34,46,.07),0 10px 30px -26px rgba(28,34,46,.45);
}
.hdr.on .hdr-in{padding-block:11px}
.hdr-line{height:1px;background:linear-gradient(90deg,transparent,var(--line) 12%,var(--line) 88%,transparent);opacity:0;transition:opacity .3s var(--ease)}
.hdr.on .hdr-line{opacity:1}
.hdr-line::after{content:"";display:block;height:1px;width:var(--p,0%);background:linear-gradient(90deg,var(--accent-deep),var(--gold));transition:width .1s linear}
/* En-tête inversé au-dessus des actes sombres */
.hdr.sombre.on{background:rgba(13,17,25,.97);box-shadow:0 1px 0 rgba(255,255,255,.07),0 10px 30px -24px rgba(0,0,0,.8)}
.hdr.sombre .nav a{color:var(--d-70)}
.hdr.sombre .nav a:hover{color:#fff}
.hdr.sombre .burger{background:rgba(255,255,255,.06);border-color:var(--d-line)}
.hdr.sombre .burger span{background:#fff}
.hdr.sombre .hdr-line{background:linear-gradient(90deg,transparent,var(--d-line) 12%,var(--d-line) 88%,transparent)}
.hdr.sombre .hdr-tel{color:#fff;border-color:rgba(255,255,255,.2);background:rgba(255,255,255,.06)}
.hdr.sombre .hdr-tel:hover{border-color:var(--gold);background:rgba(251,191,36,.12)}
.hdr.sombre .hdr-tel .ic{color:var(--gold)}
@supports not ((backdrop-filter:blur(4px)) or (-webkit-backdrop-filter:blur(4px))){
  .hdr.on{background:#FAFAF8}
  .hdr.sombre.on{background:#0D1119}
}

/* Deux variantes du logo superposées : une seule peut être peinte à la fois.
   Le calage en position absolue interdit tout affichage côte à côte. */
.brand{
  position:relative;display:block;flex:none;margin-right:auto;border-radius:6px;
  width:134px;height:48px;transition:width .32s var(--ease),height .32s var(--ease);
}
.brand img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:contain;object-position:left center;
  /* Bascule instantanée : jamais deux variantes peintes en même temps. */
  transition:none;
}
.brand .logo-sur-clair{opacity:1;visibility:visible}
.brand .logo-sur-sombre{opacity:0;visibility:hidden}
.hdr.sombre .brand .logo-sur-clair{opacity:0;visibility:hidden}
.hdr.sombre .brand .logo-sur-sombre{opacity:1;visibility:visible}
.hdr.on .brand{width:112px;height:44px}

/* Téléphone en en-tête */
.hdr-tel{
  display:inline-flex;align-items:center;gap:9px;flex:none;
  min-height:44px;padding:8px 15px 8px 10px;border-radius:var(--r-pill);
  border:1px solid var(--line);background:var(--surface);
  font-size:.92rem;font-weight:700;letter-spacing:-.01em;color:var(--ink);
  font-variant-numeric:tabular-nums;white-space:nowrap;
  transition:border-color .24s var(--ease),background-color .24s var(--ease),transform .24s var(--ease),color .24s var(--ease);
}
.hdr-tel:hover{border-color:var(--accent);background:var(--soft);transform:translateY(-1px)}
.hdr-tel-p{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--soft);flex:none}
.hdr-tel .ic{width:14px;height:14px;color:var(--accent-deep)}
.hdr.sombre .hdr-tel-p{background:rgba(255,255,255,.1)}

.nav ul{display:flex;gap:2px}
.nav a{
  display:inline-flex;align-items:center;min-height:44px;padding:9px 13px;border-radius:var(--r-xs);
  font-size:.9rem;font-weight:500;color:var(--ink-70);position:relative;
  transition:color .22s var(--ease);
}
.nav a::after{
  content:"";position:absolute;left:13px;right:13px;bottom:6px;height:1.5px;
  background:linear-gradient(90deg,var(--accent-deep),var(--gold));
  transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease);
}
.nav a:hover{color:var(--ink)}
.nav a:hover::after{transform:scaleX(1)}
.hdr-cta{display:flex}

.burger{display:none;width:44px;height:44px;border-radius:var(--r-xs);position:relative;border:1px solid var(--line);background:var(--surface);transition:background-color .25s var(--ease),border-color .25s var(--ease)}
.burger span{position:absolute;left:12px;width:20px;height:1.8px;background:var(--ink);border-radius:2px;transition:transform .3s var(--ease),width .3s var(--ease),opacity .2s}
.burger span:nth-child(1){top:15px}
.burger span:nth-child(2){top:21px;width:14px}
.burger span:nth-child(3){top:27px}
.burger:hover span:nth-child(2){width:20px}

/* Menu mobile plein écran */
.mnav{
  position:fixed;inset:0;z-index:200;background:var(--ink-deep);color:#fff;
  display:flex;flex-direction:column;padding:20px var(--pad) max(24px,env(safe-area-inset-bottom));
  opacity:0;transition:opacity .3s var(--ease);
}
.mnav.on{opacity:1}
.mnav-top{display:flex;align-items:center;justify-content:space-between;padding-block:4px 8px}
.mnav-top img{height:40px;width:auto}
.mclose{width:44px;height:44px;border:1px solid var(--d-line);border-radius:var(--r-xs);background:rgba(255,255,255,.05);display:grid;place-items:center;color:#fff}
.mclose svg{width:22px;height:22px}
.mnav-body{flex:1;display:flex;flex-direction:column;justify-content:center;gap:2px;border-block:1px solid var(--d-line);margin-block:18px}
.mnav-body a{
  display:flex;align-items:center;gap:16px;padding:15px 4px;
  font-family:var(--font-t);font-size:clamp(1.42rem,6.4vw,1.95rem);font-weight:800;letter-spacing:-.045em;
  border-bottom:1px solid var(--d-line);
  opacity:0;transform:translate3d(-10px,14px,0);
}
.mnav-body a:last-child{border-bottom:0}
.mnav.on .mnav-body a{opacity:1;transform:none;transition:opacity .42s var(--ease-out) var(--d,0ms),transform .5s var(--ease-out) var(--d,0ms)}
.mnav-body .ic{width:.42em;height:.52em;color:var(--d-45);margin-left:auto;transition:transform .28s var(--spring),color .2s}
.mnav-body a:hover .ic,.mnav-body a:focus-visible .ic{transform:translateX(6px);color:var(--gold)}
.mnav-foot{display:grid;gap:14px;text-align:center}
.mtel{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:10px 18px;
  border-radius:var(--r-pill);border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.06);
  font-size:1.06rem;font-weight:700;letter-spacing:-.01em;color:#fff;font-variant-numeric:tabular-nums}
.mtel .ic{width:1.05em;height:1.05em;color:var(--gold)}
.mmail{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:44px;font-size:.94rem;font-weight:500;color:var(--d-70)}
.mmail .ic{width:1.05em;height:1.05em;color:var(--gold)}

/* ── 5. ACTES ET BORDS ────────────────────────────────────── */
.acte{position:relative;padding-block:var(--sec)}
.acte-clair{background:var(--bg);color:var(--ink)}
.acte-sombre{background:var(--ink-deep);color:#fff;overflow:clip}
.acte-sombre .h-ter{color:#fff}
.acte-grain{
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(1200px 460px at 78% -12%,rgba(249,115,22,.15),transparent 68%),
    radial-gradient(900px 420px at 4% 106%,rgba(251,191,36,.07),transparent 70%);
}

/* Le chevron du logo devient la charnière entre deux actes. */
.bord{position:relative;height:clamp(46px,5.6vw,92px);background:var(--ink-deep);z-index:1;pointer-events:none}
.bord-vers-sombre{clip-path:polygon(0 100%,0 36%,50% 0,100% 36%,100% 100%)}
.bord-vers-clair{clip-path:polygon(0 0,100% 0,100% 36%,50% 100%,0 36%)}
.bord::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(249,115,22,.24),rgba(251,191,36,.1) 52%,transparent);
  mix-blend-mode:screen;
}
.bord-vers-sombre+.acte-sombre{padding-top:clamp(30px,3.4vw,54px)}
.bord-vers-clair+.acte-clair{padding-top:clamp(46px,5.4vw,86px)}

/* Titre d'acte : numéro déporté à gauche, titre très grand, rien de centré. */
.acte-head{position:relative;display:grid;grid-template-columns:auto 1fr;gap:0 clamp(18px,2.6vw,44px);
  margin-bottom:clamp(46px,5.6vw,88px);max-width:1000px}
.acte-no{
  font-family:var(--font-t);font-size:var(--fs-xs);font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent-aa);writing-mode:vertical-rl;text-orientation:mixed;
  padding-top:.32em;white-space:nowrap;
}
.acte-sombre .acte-no{color:var(--gold)}
.acte-head .h-sec,.acte-head .sec-lead,.acte-head .eyebrow{grid-column:2}
.acte-head .sec-lead{margin-top:24px}
.acte-head-2{margin-top:clamp(72px,9vw,140px);grid-template-columns:1fr}
.acte-head-2>*{grid-column:1!important}

/* ── 6. OUVERTURE — L'ACCROCHE ────────────────────────────── */
.hero{padding-block:clamp(26px,3.6vw,58px) clamp(72px,8vw,116px);overflow:clip}
.hero-bg{
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(760px 420px at 84% 4%,rgba(249,115,22,.13),transparent 66%),
    radial-gradient(560px 340px at 2% 88%,rgba(251,191,36,.11),transparent 70%);
}
/* Filigrane de marque : bridé pour ne jamais occuper un écran entier. */
.hero-chev{position:absolute;right:-4%;top:50%;transform:translateY(-50%);height:min(42vh,340px);color:var(--ink);opacity:.05;pointer-events:none}
.hero-chev svg{height:100%;width:auto}
.hero-grid{
  position:relative;display:grid;grid-template-columns:1.04fr .96fr;
  gap:clamp(34px,4.6vw,78px);align-items:center;
}
.hero-txt .eyebrow{margin-bottom:22px}
.hero-txt .h-display{max-width:15ch}
.hero-act{display:flex;flex-wrap:wrap;gap:13px;margin-top:34px}
.hero-trust{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:30px}
.hero-trust li{display:flex;align-items:center;gap:9px;font-size:.9rem;color:var(--ink-70);font-weight:500}
.hero-trust .ic{width:.68em;height:.68em;color:var(--accent);flex:none}

/* Cibles tactiles : les liens en pleine phrase conservent 44 px
   de hauteur utile, sans influer sur la mise en page. */
.faq-ask a,.heb-note a{display:inline-block;padding-block:15px;margin-block:-15px}

/* L'accroche est animée par le CSS seul : le titre ne dépend jamais
   du JavaScript, et il est entièrement lisible en 300 ms. */
.hero-txt .eyebrow{animation:hIn .34s var(--ease-out) both}
.hero-txt .h-display{animation:hIn .24s var(--ease-out) both}
#heroLead{animation:hIn .42s var(--ease-out) .1s both}
#heroAct{animation:hIn .46s var(--ease-out) .17s both}
#heroTrust{animation:hIn .46s var(--ease-out) .24s both}
.hero-mock{animation:hMock .68s var(--ease-out) .12s both}
@keyframes hIn{from{opacity:0;transform:translate3d(-8px,16px,0)}to{opacity:1;transform:none}}
@keyframes hMock{from{opacity:0;transform:translate3d(14px,26px,0) rotate(1.2deg)}to{opacity:1;transform:none}}

/* La fausse recherche */
.serp{
  position:relative;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);box-shadow:var(--sh-lg);overflow:hidden;
  transform:rotate(-.7deg);
}
.serp-bar{display:flex;align-items:center;gap:12px;padding:16px 18px;border-bottom:1px solid var(--line);background:var(--bg-warm)}
.serp-caret{width:34px;height:34px;border-radius:50%;background:var(--surface);border:1px solid var(--line);display:grid;place-items:center;color:var(--muted);flex:none}
.serp-caret .ic{width:17px;height:17px}
.serp-field{
  flex:1;display:flex;align-items:center;gap:2px;min-height:44px;padding:11px 16px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-pill);
  box-shadow:var(--sh-xs);
}
.serp-q{font-size:.95rem;letter-spacing:-.012em;color:var(--ink);white-space:nowrap;overflow:hidden}
.serp-cur{width:1.6px;height:1.05em;background:var(--accent);border-radius:1px;animation:blink 1s steps(1) infinite}
.serp.fini .serp-cur{animation:none;opacity:0}
@keyframes blink{50%{opacity:0}}

.serp-body{padding:20px 22px 24px;min-height:236px}
.serp-stat{font-size:var(--fs-xs);color:var(--ink-45);letter-spacing:.02em;margin-bottom:16px}
.serp-list{display:grid;gap:15px}
.serp-r{
  display:grid;gap:3px;opacity:0;transform:translate3d(-8px,7px,0);
  animation:rIn .34s var(--ease-out) forwards;
}
@keyframes rIn{to{opacity:1;transform:none}}
.serp-r .u{font-size:var(--fs-xs);color:#3B7A3F;letter-spacing:.01em}
.serp-r .t{font-size:1rem;font-weight:500;color:#1A5FB4;letter-spacing:-.015em;line-height:1.3}
.serp-r .d{font-size:.82rem;color:var(--muted);line-height:1.5}
.serp-r .m{display:flex;gap:12px;font-size:var(--fs-xs);color:var(--ink-45);margin-top:2px}
.serp-r .m b{color:#B45309;font-weight:600}

.serp-miss{
  margin-top:18px;padding:16px 18px;border-radius:var(--r-sm);
  background:#FFF5F3;border:1px solid #F6CFC6;border-left:3px solid var(--accent-deep);
  opacity:0;transform:translate3d(-8px,8px,0);animation:rIn .38s var(--ease-out) forwards;
}
.serp-miss-t{
  position:relative;display:inline-block;
  font-family:var(--font-t);font-size:1.06rem;font-weight:800;letter-spacing:-.03em;color:var(--ink);
}
.serp-miss-t::after{
  content:"";position:absolute;left:-2px;top:52%;height:2.4px;width:0;border-radius:2px;
  background:var(--accent-deep);animation:strike .42s var(--ease-out) .22s forwards;
}
@keyframes strike{to{width:calc(100% + 4px)}}
.serp-miss-txt{margin-top:7px;font-size:.88rem;line-height:1.55;color:#8C3A21}
.mock-cap{margin-top:16px;font-size:var(--fs-xs);color:var(--ink-45);line-height:1.55;text-align:right;padding-right:6px}

/* ── 7. ACTE I — LE CONSTAT ───────────────────────────────── */
.chiffres{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(26px,3.8vw,60px)}
.chiffre{position:relative;padding-left:clamp(0px,2.4vw,34px)}
.chiffre+.chiffre::before{
  content:"";position:absolute;left:0;top:4px;bottom:4px;width:1px;
  background:linear-gradient(180deg,transparent,var(--d-line) 20%,var(--d-line) 80%,transparent);
}
.ch-v{display:flex;align-items:baseline}
.tnum{
  font-family:var(--font-t);font-weight:800;letter-spacing:-.06em;line-height:.88;
  font-size:clamp(3.3rem,2rem + 4.6vw,5.8rem);
  background:linear-gradient(96deg,var(--accent) 6%,var(--gold) 94%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.ch-suf{font-family:var(--font-t);font-weight:800;font-size:clamp(1.05rem,.9rem + .7vw,1.6rem);letter-spacing:-.03em;color:var(--d-45);margin-left:.35em}
.ch-l{margin-top:16px;color:var(--d-70);font-size:.96rem;line-height:1.6;max-width:30ch}

/* Avant / après — un seul geste, deux mondes */
.ap-bloc{margin-top:clamp(64px,8vw,120px)}
.ap-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:14px 32px;margin-bottom:24px}
.ap-lead{font-size:.94rem;color:var(--d-70);max-width:44ch;line-height:1.58}
.ap{position:relative;border-radius:var(--r-lg);overflow:hidden;box-shadow:0 44px 90px -44px rgba(0,0,0,.72);touch-action:pan-y}
.ap-stage{position:relative;aspect-ratio:16/9.4;background:var(--ink-deeper)}
.ap-face{position:absolute;inset:0;padding:clamp(14px,2vw,26px)}
.ap-avant{clip-path:inset(0 calc(100% - var(--pos,50%)) 0 0)}
.ap-apres{clip-path:inset(0 0 0 var(--pos,50%))}
.ap-range{
  position:absolute;inset:0;width:100%;height:100%;margin:0;
  -webkit-appearance:none;appearance:none;background:transparent;cursor:ew-resize;z-index:4;
}
.ap-range::-webkit-slider-thumb{-webkit-appearance:none;width:52px;height:100%;background:transparent;cursor:ew-resize}
.ap-range::-moz-range-thumb{width:52px;height:220px;border:0;background:transparent;cursor:ew-resize}
.ap-range::-moz-range-track{background:transparent}
.ap-handle{
  position:absolute;top:0;bottom:0;left:var(--pos,50%);width:2px;translate:-1px 0;z-index:3;
  background:linear-gradient(180deg,transparent,#fff 12%,#fff 88%,transparent);pointer-events:none;
}
.ap-handle .ic{
  position:absolute;top:50%;left:50%;translate:-50% -50%;
  width:44px;height:44px;padding:13px;border-radius:50%;
  background:#fff;color:var(--ink);box-shadow:0 6px 20px rgba(0,0,0,.4);
}
.ap-range:focus-visible+.ap-handle .ic{outline:2px solid var(--gold);outline-offset:3px}
.ap-tag{
  position:absolute;bottom:14px;z-index:3;padding:7px 13px;border-radius:var(--r-pill);
  font-size:max(.75rem,var(--fs-xs));font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);pointer-events:none;
}
.ap-tag-a{left:14px;background:rgba(20,25,34,.72);color:var(--d-70);border:1px solid var(--d-line)}
.ap-tag-b{right:14px;background:rgba(249,115,22,.9);color:#fff}

/* Fenêtre de navigateur maquettée, réutilisée dans plusieurs actes */
.win{background:var(--surface);border-radius:var(--r-md);overflow:hidden;box-shadow:var(--sh-lg);height:100%;display:flex;flex-direction:column}
.win-bar{display:flex;align-items:center;gap:7px;padding:11px 14px;background:#F0EEEA;border-bottom:1px solid var(--line);flex:none}
.wd{width:9px;height:9px;border-radius:50%;background:#D4D0CA;flex:none}
.win-url{
  display:flex;align-items:center;gap:6px;margin-left:8px;padding:5px 12px;border-radius:var(--r-pill);
  background:var(--surface);border:1px solid var(--line);
  font-size:.75rem;color:var(--muted);letter-spacing:.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.win-url .ic{width:.8em;height:.8em;color:#3B7A3F;flex:none}
.win-shot{flex:1;padding:clamp(16px,2.2vw,28px);display:flex;flex-direction:column;justify-content:center;overflow:hidden}

.win-mort .win-shot{background:#F7F6F4;justify-content:center;text-align:left}
.mort-t{font-family:var(--font-t);font-size:clamp(1.7rem,1.2rem + 1.9vw,2.9rem);font-weight:800;letter-spacing:-.05em;color:#B9B5AE}
.mort-p{margin-top:10px;font-size:.86rem;line-height:1.55;color:var(--muted)}
.mort-l{margin-top:16px;display:grid;gap:7px}
.mort-l li{position:relative;padding-left:18px;font-size:.8rem;color:#9A958D;line-height:1.45}
.mort-l li::before{content:"";position:absolute;left:0;top:.52em;width:8px;height:1.5px;background:#C9C4BC}

.win-vif .win-shot{
  background:linear-gradient(150deg,#1A2130,#2B1B10 68%,#3D200D);
  color:#fff;justify-content:flex-end;gap:14px;position:relative;
}
.win-vif .win-shot::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(520px 260px at 80% 8%,rgba(249,115,22,.4),transparent 68%);
}
.vif-hero{position:relative}
.vif-eyebrow{font-size:var(--fs-xs);font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--gold)}
.vif-t{margin-top:8px;font-family:var(--font-t);font-size:clamp(1.3rem,.95rem + 1.5vw,2.35rem);font-weight:800;letter-spacing:-.048em;line-height:1.02}
.vif-cta{
  display:inline-block;margin-top:14px;padding:11px 20px;border-radius:var(--r-xs);
  background:var(--accent);color:#fff;font-size:.88rem;font-weight:600;letter-spacing:-.01em;
  box-shadow:var(--sh-o);
}
.vif-tags{position:relative;display:flex;flex-wrap:wrap;gap:7px}
.vif-tags li{padding:6px 11px;border-radius:var(--r-pill);background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16);font-size:.75rem;color:rgba(255,255,255,.86)}

/* ── 8. ACTE II — LES RÉALISATIONS ────────────────────────── */
.works{position:relative}
.works-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:clamp(26px,3vw,42px)}
.wtab{
  display:inline-flex;align-items:center;gap:9px;min-height:46px;padding:11px 18px;
  border-radius:var(--r-pill);background:var(--surface);border:1px solid var(--line);
  font-size:.9rem;font-weight:600;color:var(--ink-70);box-shadow:var(--sh-xs);
  transition:transform .22s var(--ease),background-color .22s var(--ease),color .22s var(--ease),border-color .22s var(--ease),box-shadow .24s var(--ease);
}
.wtab .ic{width:1.08em;height:1.08em;color:var(--ink-45);transition:color .22s var(--ease)}
.wtab:hover{border-color:var(--ink);color:var(--ink);transform:translateY(-2px);box-shadow:var(--sh-sm)}
.wtab:hover .ic{color:var(--accent)}
.wtab[aria-selected="true"]{background:var(--ink);border-color:var(--ink);color:#fff;box-shadow:var(--sh-md)}
.wtab[aria-selected="true"] .ic{color:var(--gold)}

.works-stage{position:relative}
.works-prov{
  display:inline-flex;align-items:center;gap:9px;margin-bottom:16px;
  padding:7px 14px;border-radius:var(--r-pill);
  background:var(--soft);border:1px dashed #F3BC7E;
  font-size:var(--fs-xs);color:#9A4A10;font-weight:600;letter-spacing:.01em;
}
.works-prov .ic{width:1em;height:1em;color:var(--accent-deep)}

.wstage{position:relative;padding-bottom:clamp(28px,4vw,52px)}
.frame-lap{
  position:relative;border-radius:var(--r-lg);overflow:hidden;background:var(--surface);
  border:1px solid var(--line);box-shadow:var(--sh-lg);
}
.lap-top{display:flex;align-items:center;gap:7px;padding:12px 16px;background:var(--bg-warm);border-bottom:1px solid var(--line)}
.lap-url{
  display:flex;align-items:center;gap:7px;margin-left:10px;padding:6px 14px;border-radius:var(--r-pill);
  background:var(--surface);border:1px solid var(--line);font-size:.75rem;color:var(--muted);
}
.lap-url .ic{width:.82em;height:.82em;color:#3B7A3F}
.lap-screen{position:relative;aspect-ratio:16/9.6;display:flex;flex-direction:column;background:var(--surface);--wa:#C2410C;--wb:#7C2D12}
.lap-screen[data-work="resto"]{--wa:#C2410C;--wb:#7C2D12;--wimg:url("https://images.unsplash.com/photo-1517248135467-4c7edcad34c4?w=1100&q=68&auto=format&fit=crop")}
.lap-screen[data-work="sante"]{--wa:#0E7490;--wb:#134E4A;--wimg:url("https://images.unsplash.com/photo-1487958449943-2429e8be8625?w=1100&q=68&auto=format&fit=crop")}
.lap-screen[data-work="artisan"]{--wa:#EA580C;--wb:#78350F;--wimg:url("https://images.unsplash.com/photo-1504328345606-18bbc8c9d7d1?w=1100&q=68&auto=format&fit=crop")}
.lap-screen[data-work="auto"]{--wa:#334155;--wb:#0F172A;--wimg:url("https://images.unsplash.com/photo-1560472354-b33ff0c44a43?w=1100&q=68&auto=format&fit=crop")}
.lap-screen[data-work="commerce"]{--wa:#9D174D;--wb:#4C0519;--wimg:url("https://images.unsplash.com/photo-1441986300917-64674bd600d8?w=1100&q=68&auto=format&fit=crop")}

.shot-nav{display:flex;align-items:center;gap:11px;padding:13px 20px;border-bottom:1px solid var(--line);flex:none;font-family:var(--font-t);font-size:.9rem;font-weight:800;letter-spacing:-.032em}
.shot-mono{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:linear-gradient(140deg,var(--wa),var(--wb));color:#fff;font-size:.75rem;flex:none;transition:background .45s var(--ease)}
.shot-links{display:flex;gap:14px;margin-left:auto}
.shot-links i{display:block;width:34px;height:6px;border-radius:3px;background:var(--line)}
.shot-hero{
  position:relative;flex:1;min-height:0;display:flex;align-items:flex-end;
  padding:clamp(16px,2.4vw,34px);color:#fff;overflow:hidden;
  background-image:var(--wimg);background-size:cover;background-position:center;background-color:var(--wb);
}
.shot-ov{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,12,18,.1) 14%,rgba(10,12,18,.84)),linear-gradient(112deg,var(--wa),transparent 58%);opacity:.94;transition:background .45s var(--ease)}
.shot-tx{position:relative;max-width:34ch}
.shot-kick{font-family:var(--font-t);font-size:clamp(1.05rem,.8rem + 1.15vw,1.9rem);font-weight:800;letter-spacing:-.045em;line-height:1.06}
.shot-sub{margin-top:8px;font-size:.86rem;color:rgba(255,255,255,.82);line-height:1.45}
.shot-btn{display:inline-block;margin-top:15px;padding:11px 20px;border-radius:var(--r-xs);background:#fff;color:var(--ink);font-size:.82rem;font-weight:700;letter-spacing:-.01em;box-shadow:0 8px 22px -10px rgba(0,0,0,.5)}
.shot-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;flex:none;height:24%;background:var(--line)}
.shot-grid span{
  display:block;background-image:var(--t);background-size:cover;background-position:center;
  background-color:var(--bg-warm);transition:transform .5s var(--ease),filter .4s var(--ease);
}
.frame-lap:hover .shot-grid span{transform:scale(1.05)}
.frame-lap:hover .shot-grid span:nth-child(2){transition-delay:.05s}
.frame-lap:hover .shot-grid span:nth-child(3){transition-delay:.1s}

/* Le téléphone déborde volontairement du cadre ordinateur */
.frame-ph{
  position:absolute;right:clamp(-10px,-.6vw,0px);bottom:0;z-index:2;
  width:clamp(112px,13vw,168px);aspect-ratio:9/18;
  border-radius:26px;padding:7px;background:linear-gradient(150deg,#2C323C,#171C25);
  box-shadow:0 32px 60px -26px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.07) inset;
  transform:rotate(-2.2deg) translateY(clamp(14px,2.4vw,34px));
  transition:transform .48s var(--ease);
}
.works-stage:hover .frame-ph{transform:rotate(0) translateY(clamp(8px,1.6vw,22px))}
.fph-screen{height:100%;border-radius:20px;overflow:hidden;background:var(--surface);display:flex;flex-direction:column;--wa:#C2410C;--wb:#7C2D12}
.fph-top{padding:9px 10px;border-bottom:1px solid var(--line);font-family:var(--font-t);font-size:.56rem;font-weight:800;letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:none}
.fph-hero{position:relative;height:36%;flex:none;display:flex;align-items:flex-end;padding:8px;background-image:var(--wimg);background-size:cover;background-position:center;background-color:var(--wb)}
.fph-ov{position:absolute;inset:0;background:linear-gradient(180deg,transparent,rgba(10,12,18,.85)),linear-gradient(120deg,var(--wa),transparent 60%);opacity:.94}
.fph-hero p{position:relative;font-family:var(--font-t);font-size:.56rem;font-weight:800;letter-spacing:-.02em;line-height:1.2;color:#fff}
.fph-btn{margin:8px;padding:7px;border-radius:6px;background:linear-gradient(120deg,var(--wa),var(--wb));color:#fff;font-size:.54rem;font-weight:700;text-align:center;flex:none}
.fph-l{padding:0 8px 8px;display:grid;gap:4px;flex:1;align-content:start}
.fph-l li{height:5px;border-radius:3px;background:var(--line)}
.fph-l li:nth-child(2){width:82%}
.fph-l li:nth-child(3){width:64%}
.fph-l li:nth-child(4){width:74%}

.works-panes{margin-top:clamp(22px,2.6vw,34px);max-width:64ch}
.wpane{animation:wpIn .38s var(--ease-out) both}
@keyframes wpIn{from{opacity:0;transform:translate3d(-8px,8px,0)}to{opacity:1;transform:none}}
.wp-d{font-size:1rem;color:var(--ink-70);line-height:1.66}
.wp-m{margin-top:10px;font-size:var(--fs-xs);color:var(--ink-45);letter-spacing:.02em}
.wp-m .wp-a{color:var(--accent-aa);font-weight:600}

/* ── 9. ACTE III — LA MÉTHODE ─────────────────────────────── */
.mt-seq{display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(32px,4.6vw,80px);align-items:start}
.mt-steps{display:grid;gap:clamp(14px,1.8vw,24px)}
.mt-step{
  position:relative;padding:clamp(18px,2.2vw,28px) clamp(18px,2.2vw,30px);
  border-radius:var(--r-md);border:1px solid var(--d-line);background:var(--d-surface);
  transition:background-color .4s var(--ease),border-color .4s var(--ease),transform .4s var(--ease);
}
.mt-step::before{
  content:"";position:absolute;left:0;top:14px;bottom:14px;width:2px;border-radius:2px;
  background:linear-gradient(180deg,var(--accent),var(--gold));
  transform:scaleY(0);transform-origin:top;transition:transform .45s var(--ease);
}
.mt-step.is-on{background:rgba(255,255,255,.075);border-color:rgba(251,191,36,.34);transform:translateX(6px)}
.mt-step.is-on::before{transform:scaleY(1)}
.mt-k{display:flex;align-items:center;gap:11px;font-size:var(--fs-xs);font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--d-45)}
.mt-k span{font-family:var(--font-t);font-size:1.02rem;letter-spacing:-.02em;color:var(--d-45);transition:color .4s var(--ease)}
.mt-step.is-on .mt-k span{color:var(--gold)}
.mt-k i{display:block;width:22px;height:1px;background:var(--d-line)}
.mt-t{margin-top:12px;font-size:clamp(1.1rem,1rem + .5vw,1.42rem);letter-spacing:-.038em;color:#fff;line-height:1.16}
.mt-p{margin-top:10px;font-size:.94rem;color:var(--d-70);line-height:1.62;max-width:44ch}

.mt-visu{position:relative;height:100%}
.mt-pin{position:sticky;top:clamp(96px,12vh,140px)}
.mt-screens{position:relative;aspect-ratio:16/11.4}
.mt-sc{position:absolute;inset:0;opacity:0;transform:translate3d(10px,14px,0) scale(.985);pointer-events:none;
  transition:opacity .46s var(--ease),transform .56s var(--ease)}
.mt-sc.is-on{opacity:1;transform:none;pointer-events:auto}
.mt-sc>.win{height:auto;max-height:100%}
.sc-cap{margin-top:12px;font-size:var(--fs-xs);color:var(--d-45);line-height:1.5}

.sc-call,.sc-fix,.sc-live{
  background:rgba(255,255,255,.05);border:1px solid var(--d-line);border-radius:var(--r-md);
  padding:clamp(18px,2.2vw,28px);
}
.sc-call-h{display:flex;align-items:center;gap:10px;font-size:var(--fs-xs);font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#4ADE80}
.sc-call-h .ic{width:1.1em;height:1.1em}
.sc-call-n{margin-top:10px;font-family:var(--font-t);font-size:1.16rem;font-weight:800;letter-spacing:-.035em;color:#fff}
.sc-notes{margin-top:18px;display:grid;gap:11px}
.sc-notes li{position:relative;padding-left:22px;font-size:.92rem;color:var(--d-70);line-height:1.5}
.sc-notes li::before{content:"";position:absolute;left:0;top:.55em;width:11px;height:1.5px;background:var(--gold)}
.sc-fix-h{font-family:var(--font-t);font-size:1.06rem;font-weight:800;letter-spacing:-.032em;color:#fff}
.sc-fix-l{margin-top:16px;display:grid;gap:10px}
.sc-fix-l li{display:flex;align-items:flex-start;gap:11px;font-size:.92rem;color:var(--d-70);line-height:1.5}
.fx-t,.fx-w{flex:none;padding:3px 9px;border-radius:var(--r-pill);font-size:.75rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;margin-top:.1em}
.fx-t{background:rgba(74,222,128,.16);color:#6EE7A0;border:1px solid rgba(74,222,128,.28)}
.fx-w{background:rgba(251,191,36,.14);color:var(--gold);border:1px solid rgba(251,191,36,.3)}
.sc-live-url{
  display:inline-flex;align-items:center;gap:9px;padding:9px 16px;border-radius:var(--r-pill);
  background:rgba(255,255,255,.07);border:1px solid var(--d-line);
  font-size:.92rem;font-weight:600;letter-spacing:-.015em;color:#fff;
}
.sc-live-url .ic{width:.95em;height:.95em;color:#4ADE80}
.sc-live-l{margin-top:18px;display:grid;gap:11px}
.sc-live-l li{display:flex;align-items:flex-start;gap:11px;font-size:.92rem;color:var(--d-70);line-height:1.5}
.sc-live-l .ic{width:.6em;height:.6em;color:var(--gold);margin-top:.55em;flex:none}

.mt-rail{margin-top:22px;height:2px;border-radius:2px;background:var(--d-line);overflow:hidden}
.mt-rail-fill{display:block;height:100%;width:var(--f,25%);border-radius:2px;background:linear-gradient(90deg,var(--accent),var(--gold));transition:width .4s var(--ease)}

/* ── 10. ACTE IV — LE DEVIS ───────────────────────────────── */
.devis{
  position:relative;display:grid;grid-template-columns:1.35fr .85fr;
  gap:clamp(26px,3.4vw,54px);align-items:start;
  padding:clamp(28px,3.4vw,50px) clamp(24px,3.2vw,50px);
  border-radius:var(--r-xl);background:var(--surface);
  border:1px solid var(--line);box-shadow:var(--sh-lg);overflow:hidden;
}
.devis::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(620px 300px at 8% -20%,rgba(249,115,22,.11),transparent 66%);
}
.devis>*{position:relative}
.dv-k{display:inline-flex;align-items:center;gap:10px;font-size:var(--fs-xs);font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--accent-deep)}
.dv-k .ic{width:1.1em;height:1.1em}
.dv-t{margin-top:14px;font-family:var(--font-t);font-weight:800;letter-spacing:-.045em;line-height:1.08;
  font-size:clamp(1.7rem,1.24rem + 1.9vw,2.7rem);color:var(--ink)}
.dv-p{margin-top:16px;font-size:1.02rem;color:var(--ink-70);line-height:1.68;max-width:48ch}
.dv-l{margin-top:20px;display:grid;gap:11px}
.dv-l li{display:flex;align-items:flex-start;gap:11px;font-size:.95rem;color:var(--ink);line-height:1.55}
.dv-l .ic{width:1.05em;height:1.05em;color:var(--accent);margin-top:.18em;flex:none}
.dv-act{display:grid;gap:12px;align-content:start;
  padding:clamp(20px,2.2vw,26px);border-radius:var(--r-lg);background:var(--soft);border:1px solid #FBD9B6}
.dv-act .btn{width:100%}
.dv-tel{gap:10px;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.dv-tel .ic{width:1.05em;height:1.05em;color:var(--accent-deep)}
.dv-dispo{margin-top:2px;font-size:.86rem;color:#8A4413;line-height:1.55;text-align:center}
.dv-m{grid-column:1/-1;margin-top:clamp(6px,1vw,12px);padding-top:20px;
  border-top:1px solid var(--line);display:grid;gap:9px}
.dv-m li{font-size:var(--fs-xs);color:var(--ink-45);line-height:1.6;max-width:78ch}
.dv-cgv{grid-column:1/-1;margin-top:14px;font-size:var(--fs-xs);color:var(--ink-45);line-height:1.6}
.dv-cgv a{display:inline-block;padding:13px 4px;margin:-13px -4px;color:var(--accent-aa);
  font-weight:600;text-decoration:underline;text-underline-offset:3px}

.heb{margin-top:clamp(64px,8vw,116px)}
.heb-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 32px;margin-bottom:26px}
.heb-lead{font-size:.96rem;color:var(--muted);max-width:44ch}
.heb-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.8vw,24px)}
.hb{
  display:flex;flex-direction:column;padding:clamp(20px,2.4vw,30px);border-radius:var(--r-md);
  background:var(--surface);border:1px solid var(--line);box-shadow:var(--sh-xs);
  transition:transform .26s var(--ease),box-shadow .3s var(--ease),border-color .26s var(--ease);
}
.hb:hover{transform:translateY(-3px);box-shadow:var(--sh-md);border-color:#D8D4CE}
.hb-k{font-size:var(--fs-xs);font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--accent-aa)}
.hb-t{display:flex;align-items:flex-start;gap:11px;margin-top:12px;font-size:1.06rem;letter-spacing:-.032em;line-height:1.22}
.hb-t .ic{width:1.15em;height:1.15em;color:var(--accent);margin-top:.06em}
.hb-p{margin-top:12px;font-size:.92rem;color:var(--muted);line-height:1.6}
/* Quatre réponses, dans le même ordre et à la même hauteur d'une carte
   à l'autre : l'œil compare verticalement sans effort. */
.hb-q{margin-top:auto;padding-top:18px;display:grid;gap:2px}
.hq{display:grid;gap:5px;padding:12px 0;border-top:1px solid var(--line);min-height:86px;align-content:start}
.hq:first-child{border-top:0;padding-top:4px}
.hq dt{display:flex;align-items:center;gap:8px;font-size:var(--fs-xs);font-weight:700;
  letter-spacing:.11em;text-transform:uppercase;color:var(--muted)}
.hq dt .ic{width:1.15em;height:1.15em;color:var(--accent);flex:none}
.hq dd{display:grid;gap:2px}
.hq dd b{font-family:var(--font-t);font-size:1.02rem;font-weight:800;letter-spacing:-.03em;color:var(--ink);line-height:1.25}
.hq dd small{font-size:.83rem;color:var(--muted);line-height:1.45}
.hb-dom{display:flex;align-items:center;gap:9px;margin-top:14px;padding-top:14px;
  border-top:1px dashed var(--line);font-size:.86rem;font-weight:600;color:var(--accent-txt)}
.hb-dom .ic{width:1em;height:1em;flex:none}

/* Sécurité de l'option 1 : six protections réellement en place, chacune
   traduite en bénéfice, suivies de ce qui n'est pas promis. Le texte reste
   strictement aligné sur l'article 12 des conditions générales de vente. */
.sec{margin-top:clamp(30px,3.6vw,48px);padding:clamp(24px,3vw,40px);
  border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--line);box-shadow:var(--sh-xs)}
.sec-head{max-width:56ch;margin-bottom:clamp(22px,2.6vw,32px)}
.sec-k{display:flex;align-items:center;gap:9px;margin-bottom:12px;
  font-size:var(--fs-xs);font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--accent-aa)}
.sec-k .ic{width:1.15em;height:1.15em;flex:none}
.sec-sub{margin-top:10px;font-size:.96rem;color:var(--muted);line-height:1.6}
.sec-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.8vw,22px)}
.sq{display:grid;align-content:start;gap:7px;padding:clamp(18px,2vw,24px);
  border-radius:var(--r-md);background:var(--bg);border:1px solid var(--line)}
.sq-i{display:grid;place-items:center;width:40px;height:40px;margin-bottom:5px;
  border-radius:11px;background:var(--soft);border:1px solid #FBD9B6}
.sq-i .ic{width:20px;height:20px;color:var(--accent-deep)}
.sq-t{font-family:var(--font-t);font-weight:700;font-size:1rem;letter-spacing:-.03em;
  color:var(--ink);line-height:1.3}
.sq-d{font-size:.88rem;color:var(--muted);line-height:1.55}
.sq-b{margin-top:4px;padding-top:9px;border-top:1px dashed var(--line);
  font-size:.88rem;color:var(--accent-txt);line-height:1.55;font-weight:500}
.sec-hon{margin-top:clamp(18px,2.2vw,26px);padding:clamp(16px,1.9vw,22px) clamp(18px,2vw,24px);
  border-radius:var(--r-md);background:#F6F5F2;border:1px solid var(--line);border-left:3px solid var(--ink-45)}
.sec-hon-t{display:flex;align-items:center;gap:9px;font-family:var(--font-t);font-weight:700;
  font-size:.95rem;letter-spacing:-.02em;color:var(--ink)}
.sec-hon-t .ic{width:1.05em;height:1.05em;color:var(--ink-70);flex:none}
.sec-hon-p{margin-top:9px;font-size:.9rem;color:var(--ink-70);line-height:1.65;max-width:82ch}
.sec-hon-p b{font-weight:700;color:var(--ink)}
.sec-hon-p a{color:var(--accent-aa);text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:rgba(194,65,12,.4);transition:text-decoration-color .2s}
.sec-hon-p a:hover{text-decoration-color:var(--accent-aa)}
.sec-opt{display:flex;align-items:flex-start;gap:12px;margin-top:clamp(14px,1.7vw,20px);
  font-size:.9rem;color:var(--muted);line-height:1.6;max-width:88ch}
.sec-opt .ic{width:1em;height:.85em;color:var(--accent);margin-top:.34em;flex:none}

/* Nom de domaine et messagerie : le bloc OVHcloud. */
.dom{
  display:flex;align-items:flex-start;gap:clamp(16px,2vw,26px);
  margin-top:clamp(18px,2.2vw,26px);padding:clamp(18px,2.2vw,26px);
  border-radius:var(--r-md);background:var(--surface);border:1px solid var(--line);box-shadow:var(--sh-xs);
}
.dom-logo{flex:none;display:grid;place-items:center;width:150px;min-height:56px;padding:12px 15px;
  border-radius:12px;background:#fff;border:1px solid var(--line)}
.dom-logo img{display:block;width:100%;height:auto;max-width:120px}
.dom-tx{display:grid;gap:9px;min-width:0}
.dom-p{font-size:.98rem;color:var(--ink);line-height:1.62}
.dom-p b{font-weight:700}
.dom-mail{font-weight:700;color:var(--accent-txt);white-space:nowrap}
.dom-x{font-size:.9rem;color:var(--muted);line-height:1.6}
.heb-impose{
  display:flex;align-items:flex-start;gap:13px;margin-top:clamp(16px,2vw,24px);
  padding:16px 20px;border-radius:var(--r-md);background:var(--soft);border:1px solid #FBD9B6;
  font-size:.94rem;color:#8A4413;line-height:1.6;
}
.heb-impose .ic{width:1em;height:.85em;color:var(--accent-deep);margin-top:.36em;flex:none}

.own{
  position:relative;margin-top:clamp(52px,6.4vw,92px);
  padding:clamp(26px,3.2vw,46px) clamp(24px,3.4vw,54px);
  border-radius:var(--r-lg);background:var(--ink);color:#fff;overflow:hidden;
  box-shadow:var(--sh-lg);
}
.own::before{content:"";position:absolute;inset:0;background:radial-gradient(680px 300px at 92% 0%,rgba(251,191,36,.22),transparent 66%)}
.own::after{
  content:"";position:absolute;right:-40px;top:-30px;bottom:-30px;width:220px;opacity:.09;
  background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 900'%3E%3Cpath d='M60 60 480 450 60 840M240 60 660 450 240 840' fill='none' stroke='%23fff' stroke-width='16'/%3E%3C/svg%3E");
}
.own-k{position:relative;display:inline-flex;align-items:center;gap:11px;font-size:var(--fs-xs);font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.own-k .ic{width:1.2em;height:1.2em}
.own-p{
  position:relative;margin-top:16px;max-width:52ch;
  font-family:var(--font-t);font-size:clamp(1.1rem,.98rem + .78vw,1.6rem);font-weight:700;
  letter-spacing:-.035em;line-height:1.34;color:#fff;
}
.own-p strong{color:var(--gold);font-weight:800}
.own-hi{color:var(--gold)}

/* ── 11. ACTE V — L'ATELIER ───────────────────────────────── */
.moi{display:grid;grid-template-columns:.86fr 1.14fr;gap:clamp(28px,4vw,66px);align-items:stretch}

/* Plaque typographique — aucune photo, aucun emplacement vide. */
.plaque{
  position:relative;display:flex;flex-direction:column;justify-content:space-between;
  gap:clamp(22px,3vw,40px);
  padding:clamp(26px,3.2vw,44px);border-radius:var(--r-lg);
  background:linear-gradient(158deg,rgba(255,255,255,.075),rgba(255,255,255,.018) 58%);
  border:1px solid var(--d-line);overflow:hidden;
}
.plaque::after{
  content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,var(--accent),var(--gold));
}
.pq-mark{display:block;width:clamp(38px,3.4vw,50px);height:clamp(31px,2.8vw,41px);color:var(--accent);flex:none}
.pq-mark svg{width:100%;height:100%;fill:currentColor}
.pq-q{margin:0}
.pq-q p{
  font-family:var(--font-t);font-weight:800;letter-spacing:-.04em;line-height:1.2;
  font-size:clamp(1.25rem,1.02rem + 1.05vw,1.9rem);color:#fff;
}
.pq-q em{font-style:normal;color:var(--gold)}
.pq-sig{display:grid;gap:5px;padding-top:clamp(16px,1.8vw,22px);border-top:1px solid var(--d-line)}
.pq-n{font-family:var(--font-t);font-size:1.02rem;font-weight:800;letter-spacing:-.03em;color:#fff}
.pq-r{font-size:var(--fs-xs);letter-spacing:.09em;text-transform:uppercase;color:var(--d-45)}

.moi-txt{padding-top:clamp(0px,1.4vw,20px)}
.moi-p1{font-family:var(--font-t);font-size:clamp(1.16rem,1rem + .95vw,1.75rem);font-weight:700;letter-spacing:-.04em;line-height:1.28;color:#fff;max-width:34ch}
.moi-p2{margin-top:20px;font-size:1rem;color:var(--d-70);line-height:1.7;max-width:48ch}
.moi-f{display:grid;grid-template-columns:repeat(3,auto);gap:clamp(18px,2.6vw,44px);justify-content:start;
  margin-top:clamp(28px,3.4vw,46px);padding-top:clamp(24px,2.8vw,36px);border-top:1px solid var(--d-line)}
.mf-v{display:block;font-family:var(--font-t);font-size:clamp(1.4rem,1.1rem + 1.2vw,2.1rem);font-weight:800;letter-spacing:-.05em;line-height:1;
  background:linear-gradient(96deg,var(--accent),var(--gold));-webkit-background-clip:text;background-clip:text;color:transparent}
.mf-l{display:block;margin-top:8px;font-size:.84rem;color:var(--d-45);line-height:1.45;max-width:19ch}
.moi-sign{margin-top:clamp(22px,2.6vw,34px);font-size:var(--fs-xs);color:var(--d-45);letter-spacing:.02em}

/* ── Parcours : d'où vient Quentin. Texte à gauche, repères datés à droite. ── */
.parc{margin-top:clamp(64px,7vw,110px);display:grid;grid-template-columns:1.05fr .95fr;
  gap:clamp(30px,4.4vw,72px);align-items:start}
.parc-k{display:flex;align-items:center;gap:10px;font-size:var(--fs-xs);letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.parc-k .ic{width:.86em;height:.86em;flex:none}
.parc-h{margin-top:16px;font-family:var(--font-t);font-weight:800;letter-spacing:-.05em;line-height:1.04;color:#fff;
  font-size:clamp(1.9rem,1.4rem + 2.1vw,3.1rem)}
.parc-p{margin-top:20px;font-size:1rem;color:var(--d-70);line-height:1.72;max-width:50ch}
.parc-hi{margin-top:24px;padding-left:18px;border-left:2px solid var(--accent);color:#fff}

.parc-l{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.pl{display:grid;grid-template-columns:auto 1fr;gap:clamp(14px,1.6vw,22px);align-items:start;
  padding:20px clamp(18px,2vw,26px);border-radius:var(--r-md);background:var(--d-surface);border:1px solid var(--d-line);
  transition:background-color .28s var(--ease),border-color .28s var(--ease)}
.pl:hover{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.2)}
.pl-y{font-family:var(--font-t);font-size:1.02rem;font-weight:800;letter-spacing:-.03em;color:var(--gold);
  min-width:3.4em;padding-top:.08em}
.pl-auto .pl-y{color:var(--accent)}
.pl-t{display:block;font-family:var(--font-t);font-size:1rem;font-weight:800;letter-spacing:-.03em;color:#fff;line-height:1.35}
.pl-d{display:block;margin-top:6px;font-size:.88rem;color:var(--d-45);line-height:1.55}
.pl-sum{display:flex;align-items:flex-start;gap:11px;margin-top:4px;padding:0 clamp(18px,2vw,26px);
  font-size:.92rem;color:var(--d-70);line-height:1.62}
.pl-sum .ic{width:.6em;height:.74em;color:var(--accent);margin-top:.42em;flex:none}

.tech-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.2vw,30px)}
.tc{padding:clamp(26px,3vw,40px);border-radius:var(--r-lg);background:var(--d-surface);border:1px solid var(--d-line);
  transition:background-color .3s var(--ease),border-color .3s var(--ease),transform .26s var(--ease)}
.tc:hover{background:rgba(255,255,255,.075);border-color:rgba(251,191,36,.3);transform:translateY(-3px)}
.tc-t{display:flex;align-items:center;gap:13px;font-family:var(--font-t);font-weight:800;font-size:clamp(1.14rem,1.04rem + .34vw,1.34rem);letter-spacing:-.038em;color:#fff}
.tc-t .ic{width:1.15em;height:1.15em;color:var(--gold);flex:none}
.tc-p{margin-top:18px;font-size:1rem;color:var(--d-70);line-height:1.72}
.tc-q{display:flex;align-items:flex-start;gap:11px;margin-top:22px;padding-top:20px;border-top:1px solid var(--d-line);
  font-size:.95rem;color:#fff;line-height:1.62}
.tc-q .ic{width:.6em;height:.74em;color:var(--accent);margin-top:.42em;flex:none}
.tc-a11y{display:flex;align-items:flex-start;gap:10px;margin-top:14px;
  font-size:.88rem;color:var(--d-70);line-height:1.55}
.tc-a11y .ic{width:.86em;height:.86em;color:var(--gold);margin-top:.34em;flex:none}

/* La matière : une case par technologie, logo officiel sur pastille
   claire pour rester lisible sur fond sombre. Quatre par ligne. */
.stack{margin-top:clamp(46px,5.4vw,74px)}
.st-grid{margin-top:26px;display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:1fr;gap:clamp(12px,1.5vw,18px)}
.st{display:grid;grid-template-rows:auto auto 1fr;justify-items:center;gap:4px;
  padding:22px 16px 20px;border-radius:var(--r-md);text-align:center;
  background:var(--d-surface);border:1px solid var(--d-line);
  transition:background-color .28s var(--ease),border-color .28s var(--ease),transform .24s var(--ease)}
.st:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.22);transform:translateY(-2px)}
.st-mark{--lw:80px;--lh:48px;display:grid;place-items:center;width:112px;height:72px;margin-bottom:14px;padding:12px 16px;
  border-radius:14px;background:#fff;box-shadow:0 1px 0 rgba(255,255,255,.5) inset,0 6px 16px -10px rgba(0,0,0,.7)}
.st-mark img{display:block;width:var(--lw);height:var(--lh);object-fit:contain}
.st-n{font-family:var(--font-t);font-size:1rem;font-weight:800;letter-spacing:-.03em;color:#fff;line-height:1.2}
.st-p{font-size:.86rem;color:var(--d-70);line-height:1.45;max-width:22ch}

.outils{margin-top:clamp(52px,6vw,86px)}
/* Cinq outils : trois en haut, deux centrés en dessous. La rangée
   incomplète est centrée, jamais laissée avec un trou à droite. */
.ot-grid{margin-top:28px;display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(14px,1.8vw,22px)}
.ot{flex:1 1 288px;max-width:calc(33.333% - clamp(14px,1.8vw,22px) * 2 / 3);
  display:flex;align-items:center;gap:18px;padding:18px 22px;border-radius:var(--r-md);min-height:96px;
  background:var(--d-surface);border:1px solid var(--d-line);
  transition:background-color .28s var(--ease),border-color .28s var(--ease),transform .24s var(--ease)}
.ot:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.22);transform:translateY(-2px)}
.ot-mark{--lw:42px;--lh:42px;width:60px;height:60px;flex:none;display:grid;place-items:center;border-radius:14px;background:#fff;padding:9px;
  box-shadow:0 1px 0 rgba(255,255,255,.5) inset,0 6px 16px -10px rgba(0,0,0,.7)}
.ot-mark img{display:block;width:var(--lw);height:var(--lh);object-fit:contain}
.ot-mark-w{--lw:108px;width:132px;padding:9px 12px}
.ot-tx{display:grid;gap:2px;min-width:0}
.ot-tx b{font-family:var(--font-t);font-size:1.06rem;font-weight:800;letter-spacing:-.032em;color:#fff}
.ot-tx{font-size:.9rem;color:var(--d-70);line-height:1.45}
.ot-legal{margin-top:18px;font-size:var(--fs-xs);color:var(--d-45);letter-spacing:.02em}

.ia{
  position:relative;margin-top:clamp(46px,5.6vw,80px);
  padding:clamp(24px,3vw,42px) clamp(24px,3.2vw,48px);
  border-radius:var(--r-lg);background:rgba(255,255,255,.05);
  border:1px solid var(--d-line);border-left:3px solid var(--accent);
}
.ia-k{font-size:var(--fs-xs);font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.ia-p{margin-top:16px;font-size:clamp(1rem,.96rem + .38vw,1.14rem);color:var(--d-70);line-height:1.74;max-width:66ch}
.ia-hi{color:#fff;font-weight:600}

/* Ce que je ne fais pas : le périmètre, dit franchement. */
.nope{
  margin-top:clamp(46px,5.6vw,80px);
  padding:clamp(24px,3vw,40px) clamp(24px,3.2vw,44px);
  border-radius:var(--r-lg);background:rgba(255,255,255,.035);
  border:1px solid var(--d-line);
}
.nope-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 20px}
.nope-lead{font-size:.95rem;color:var(--d-70)}
.nope-l{list-style:none;margin:clamp(20px,2.4vw,28px) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(2,1fr);gap:14px clamp(20px,3vw,44px)}
.nope-l li{display:flex;align-items:flex-start;gap:12px;
  font-size:clamp(1rem,.97rem + .2vw,1.08rem);font-weight:600;color:#fff;line-height:1.45}
.nope-l .ic{width:1.05em;height:1.05em;color:var(--d-45);margin-top:.18em;flex:none}
.nope-p{margin-top:clamp(22px,2.6vw,30px);padding-top:clamp(18px,2vw,22px);
  border-top:1px solid var(--d-line);
  font-size:1rem;color:var(--d-70);line-height:1.7;max-width:64ch}
.nope-hi{color:#fff;font-weight:600}

/* ── 12. ACTE VI — LES RÉPONSES ──────────────────────────── */
.faq-grid{display:grid;grid-template-columns:.78fr 1.22fr;gap:clamp(32px,4.4vw,80px);align-items:start}
.faq-head{position:sticky;top:clamp(96px,12vh,132px);display:grid;grid-template-columns:auto 1fr;gap:0 clamp(16px,2.2vw,34px)}
.faq-head .acte-no{grid-row:1/span 3}
.faq-ask{grid-column:2;margin-top:26px;font-size:.94rem;color:var(--muted);line-height:1.7}
.faq-ask a{color:var(--accent-aa);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.acc{display:grid}
.acc-i{border-top:1px solid var(--line)}
.acc-i:last-child{border-bottom:1px solid var(--line)}
.acc-q{
  width:100%;display:flex;align-items:flex-start;gap:18px;text-align:left;
  padding:24px 4px;min-height:44px;
  font-family:var(--font-t);font-size:clamp(1rem,.96rem + .3vw,1.16rem);font-weight:700;letter-spacing:-.03em;line-height:1.35;
  color:var(--ink);transition:color .22s var(--ease);
}
.acc-q:hover{color:var(--accent-deep)}
.acc-ic{width:.6em;height:.74em;color:var(--ink-45);margin-left:auto;margin-top:.24em;flex:none;transition:transform .34s var(--ease),color .24s var(--ease)}
.acc-q[aria-expanded="true"]{color:var(--accent-deep)}
.acc-q[aria-expanded="true"] .acc-ic{transform:rotate(90deg);color:var(--accent)}
.acc-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .38s var(--ease)}
.acc-a>div{overflow:hidden}
.acc-i.open .acc-a{grid-template-rows:1fr}
.acc-a p{padding:0 44px 26px 4px;color:var(--muted);font-size:.98rem;line-height:1.68;max-width:62ch;opacity:0;transform:translateY(-4px);transition:opacity .3s var(--ease) .06s,transform .3s var(--ease) .06s}
.acc-i.open .acc-a p{opacity:1;transform:none}

/* ── 13. ACTE VII — LE CONTACT ───────────────────────────── */
.contact{overflow:clip}
.ct-bg{position:absolute;inset:0;pointer-events:none;background:radial-gradient(920px 480px at 86% 6%,rgba(249,115,22,.17),transparent 66%)}
.ct-grid{position:relative;display:grid;grid-template-columns:1fr 1.04fr;gap:clamp(38px,5vw,84px);align-items:start}
.ct-left .acte-no{writing-mode:horizontal-tb;margin-bottom:18px}
.ct-lead{font-size:var(--fs-lead);color:var(--d-70);margin-top:22px;max-width:44ch;line-height:1.62}
.ct-facts{display:grid;gap:13px;margin-top:32px}
.ct-facts li{display:flex;gap:12px;align-items:flex-start;font-size:.96rem;color:var(--d-70);line-height:1.55}
.ct-facts .ic{width:.5em;height:.62em;color:var(--gold);margin-top:.5em;flex:none}
/* Appeler : alternative de plein droit au formulaire */
.ct-joindre{
  margin-top:clamp(28px,3vw,38px);padding:clamp(20px,2.4vw,28px);
  border-radius:var(--r-lg);border:1px solid var(--d-line);
  background:linear-gradient(150deg,rgba(255,255,255,.07),rgba(255,255,255,.02));
}
.ct-joindre-k{font-size:var(--fs-xs);font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.ct-tel{
  display:inline-flex;align-items:center;gap:14px;margin-top:12px;min-height:56px;
  font-family:var(--font-t);font-weight:800;letter-spacing:-.04em;
  font-size:clamp(1.5rem,1.16rem + 1.4vw,2.15rem);color:#fff;font-variant-numeric:tabular-nums;
  transition:color .24s var(--ease)
}
.ct-tel:hover{color:var(--gold)}
.ct-tel-p{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;
  background:var(--accent);flex:none;box-shadow:0 8px 20px -10px rgba(249,115,22,.9)}
.ct-tel-p .ic{width:19px;height:19px;color:#fff}
.ct-joindre-p{margin-top:12px;font-size:.94rem;color:var(--d-70);line-height:1.62;max-width:42ch}
.ct-mail{
  display:inline-flex;align-items:flex-end;gap:10px;margin-top:16px;
  font-size:.98rem;font-weight:600;letter-spacing:-.02em;color:var(--d-70);
  min-height:44px;padding:10px 0 4px;border-bottom:1px solid rgba(255,255,255,.22);
  transition:border-color .25s var(--ease),color .25s var(--ease);
}
.ct-mail .ic{width:1.05em;height:1.05em;color:var(--gold)}
.ct-mail:hover{border-color:var(--gold);color:var(--gold)}

.ct-card{position:relative;background:var(--surface);color:var(--ink);border-radius:var(--r-xl);
  padding:clamp(26px,3.2vw,46px);border-top:4px solid var(--accent);
  box-shadow:0 56px 100px -44px rgba(0,0,0,.72),0 4px 14px rgba(0,0,0,.18)}
.ct-btns{display:grid;grid-template-columns:1.25fr .95fr;gap:12px}
.ct-btns .btn{width:100%}
.ct-btn-tel{gap:10px;font-variant-numeric:tabular-nums;letter-spacing:-.015em}
.ct-btn-tel .ic{width:1.05em;height:1.05em;color:var(--accent-deep)}
.ct-form{display:grid;gap:18px}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field-big{grid-column:1/-1}
.field label{display:block;font-size:var(--fs-sm);font-weight:600;letter-spacing:-.01em;margin-bottom:7px}
.req{color:var(--accent-deep)}
.fac{font-weight:400;color:var(--ink-45);font-size:var(--fs-xs)}
.ct-form input,.ct-form textarea{
  width:100%;padding:14px 16px;background:var(--bg);
  border:1px solid var(--line);border-radius:var(--r-sm);
  font-size:.965rem;letter-spacing:-.01em;
  transition:border-color .2s var(--ease),box-shadow .24s var(--ease),background-color .2s var(--ease);
}
.ct-form textarea{resize:vertical;min-height:96px;line-height:1.55}
.ct-form input::placeholder,.ct-form textarea::placeholder{color:#AEABA5}
.ct-form input:hover,.ct-form textarea:hover{border-color:#D8D4CE}
.ct-form input:focus,.ct-form textarea:focus{outline:none;background:var(--surface);border-color:var(--accent);box-shadow:0 0 0 4px rgba(249,115,22,.13)}
.ct-form input[aria-invalid="true"]{border-color:#DC2626;background:#FEF6F6}
.ct-form input[aria-invalid="true"]:focus{box-shadow:0 0 0 4px rgba(220,38,38,.12)}
.err{font-size:var(--fs-xs);color:#C22B2B;line-height:1.4;display:none;margin-top:6px}
.err.on{display:block;animation:errin .26s var(--ease)}
@keyframes errin{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:none}}
.rgpd{font-size:var(--fs-xs);color:var(--muted);line-height:1.55;text-align:center}
.rgpd a{display:inline-block;padding:13px 3px;margin:-13px -3px;color:var(--accent-aa);text-decoration:underline;text-underline-offset:2px}

/* Champ piège anti-robot : hors écran, hors tabulation, hors lecteurs d'écran. */
.piege{display:none}

.ct-erreur{
  font-size:var(--fs-sm);line-height:1.6;color:#8C1F1F;
  background:#FEF2F2;border:1px solid #F3C4C4;border-left:3px solid #C22B2B;
  border-radius:var(--r-sm);padding:14px 16px;animation:errin .26s var(--ease);
}
.cte-t{font-family:var(--font-t);font-size:1rem;font-weight:800;letter-spacing:-.03em;color:#8C1F1F}
.cte-p{margin-top:6px}
.cte-act{display:flex;flex-wrap:wrap;gap:9px;margin-top:14px}
#ctSend[disabled]{opacity:.62;cursor:progress}

.ct-ok{display:grid;gap:14px;justify-items:center;text-align:center;padding:clamp(6px,2vw,20px) 0;animation:okin .5s var(--ease-out)}
@keyframes okin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.ok-mark{width:58px;height:58px;color:var(--accent);display:grid;place-items:center;border-radius:50%;background:var(--soft);border:1px solid #FBD9B6}
.ok-mark svg{width:26px;height:26px}
.ok-t{font-family:var(--font-t);font-size:clamp(1.4rem,1.2rem + .8vw,1.85rem);font-weight:800;letter-spacing:-.04em}
.ok-p{color:var(--muted);font-size:.98rem;line-height:1.62;max-width:40ch}
.ok-s{font-size:var(--fs-xs);color:var(--ink-45);line-height:1.55;max-width:44ch}

/* ── 14. PIED DE PAGE ─────────────────────────────────────── */
.ft{position:relative;background:var(--bg-warm);border-top:1px solid var(--line);padding-top:clamp(56px,6vw,86px);overflow:clip}
.ft-chev{position:absolute;right:-2%;top:50%;transform:translateY(-50%);height:min(34vh,240px);color:var(--ink);opacity:.045;pointer-events:none}
.ft-chev svg{height:100%;width:auto}
.ft-grid{position:relative;display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:clamp(28px,3.4vw,52px)}
.ft-brand img{height:52px;width:auto;margin-bottom:18px}
.ft-brand p{font-size:.9rem;color:var(--muted);line-height:1.6;max-width:34ch}
.ft-france{display:flex;align-items:center;gap:9px;margin-top:14px;font-weight:600;color:var(--ink)!important;font-size:.9rem}
.ft-france .ic{width:.85em;height:.7em;color:var(--accent)}
.ft-h{font-family:var(--font-t);font-size:.76rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--ink);margin-bottom:10px}
.ft-col ul{display:grid}
.ft-col a{font-size:.9rem;color:var(--muted);display:inline-flex;align-items:center;min-height:44px;gap:6px;transition:color .2s var(--ease)}
.ft-col a::before{content:"";width:0;height:1px;background:var(--accent);transition:width .26s var(--ease)}
.ft-col a:hover{color:var(--ink)}
.ft-col a:hover::before{width:9px}
.ft-note{font-size:var(--fs-xs);color:var(--muted);margin-top:16px;line-height:1.6}
.ft-tel{display:inline-flex;align-items:center;gap:10px;min-height:48px;margin:2px 0 4px;
  font-family:var(--font-t);font-size:1.28rem;font-weight:800;letter-spacing:-.035em;
  color:var(--ink);font-variant-numeric:tabular-nums;transition:color .22s var(--ease)}
.ft-tel .ic{width:1em;height:1em;color:var(--accent-deep)}
.ft-tel:hover{color:var(--accent-deep)}
/* Réseaux sociaux — le bloc reste absent tant qu'aucune adresse
   n'est renseignée dans la constante RESEAUX de script.js. */
.ft-soc[hidden]{display:none}
.ft-soc{margin-top:clamp(22px,2.4vw,30px);padding-top:18px;border-top:1px solid var(--line)}
.ft-soc-l{display:flex;flex-wrap:wrap;gap:10px;list-style:none;margin:0;padding:0}
.ft-soc-l a{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:12px;
  color:var(--ink-70);background:rgba(15,17,21,.04);border:1px solid var(--line);
  transition:color .22s var(--ease),background-color .22s var(--ease),border-color .22s var(--ease),transform .22s var(--ease)}
.ft-soc-l a::before{content:none}
.ft-soc-l a:hover{color:#fff;background:var(--ink);border-color:var(--ink);transform:translateY(-2px)}
.ft-soc-l .ic{width:19px;height:19px}
.ft-bot{
  position:relative;display:flex;flex-wrap:wrap;gap:10px 26px;align-items:center;justify-content:space-between;
  margin-top:clamp(30px,3.6vw,52px);padding-block:18px;border-top:1px solid var(--line);
  font-size:var(--fs-xs);color:var(--muted);
}
.ft-legal{display:flex;flex-wrap:wrap;gap:8px 20px;align-items:center}
.ft-legal a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;color:var(--ink-70);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line);transition:text-decoration-color .2s,color .2s}
.ft-legal a:hover{color:var(--accent-deep);text-decoration-color:var(--accent)}

/* Bouton flottant mobile */
.fab{
  position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:110;
  display:none;align-items:center;gap:9px;min-height:48px;
  padding:13px 18px;border-radius:var(--r-pill);
  background:var(--ink);color:#fff;font-size:.88rem;font-weight:600;letter-spacing:-.01em;
  box-shadow:0 12px 28px -12px rgba(28,34,46,.6),0 2px 6px rgba(28,34,46,.2);
  opacity:0;transform:translateY(14px) scale(.96);pointer-events:none;
  transition:opacity .34s var(--ease),transform .38s var(--spring);
}
.fab .ic{width:1.05em;height:1.05em;color:var(--gold)}
.fab.on{opacity:1;transform:none;pointer-events:auto}

/* ── 15. MENTIONS LÉGALES ─────────────────────────────────── */
.legal{padding-block:clamp(40px,5vw,72px) var(--sec)}
.legal-head{max-width:760px;margin-bottom:clamp(32px,4vw,56px)}
.legal-head .eyebrow{margin-bottom:18px}
.legal-head h1{font-size:clamp(2.1rem,1.5rem + 2.4vw,3.2rem);letter-spacing:-.042em}
.legal-head p{margin-top:16px;color:var(--muted);font-size:var(--fs-lead)}
.legal-body{max-width:780px;display:grid;gap:clamp(28px,3vw,42px)}
.legal-body section{scroll-margin-top:110px}
.legal-body h2{font-size:clamp(1.24rem,1.1rem + .6vw,1.5rem);letter-spacing:-.032em;display:flex;align-items:center;gap:11px;margin-bottom:14px}
.legal-body h2 .ic{width:.5em;height:.62em;color:var(--accent);flex:none}
.legal-body h3{font-size:1.02rem;letter-spacing:-.025em;margin:18px 0 8px}
.legal-body p,.legal-body li{color:var(--ink-70);font-size:.985rem;line-height:1.72}
.legal-body p+p{margin-top:12px}
.legal-body ul{display:grid;gap:9px;margin-top:12px}
.legal-body ul li{display:flex;gap:11px;align-items:flex-start}
.legal-body ul .ic{width:.48em;height:.6em;color:var(--accent);margin-top:.52em;flex:none}
.legal-body a{color:var(--accent-aa);text-decoration:underline;text-underline-offset:3px}
.legal-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(22px,2.4vw,32px);box-shadow:var(--sh-sm)}
.legal-card dl{display:grid;grid-template-columns:auto 1fr;gap:10px 22px;font-size:.955rem}
.legal-card dt{color:var(--muted);font-size:var(--fs-sm)}
.legal-card dd{color:var(--ink);font-weight:500}
.legal-updated{margin-top:20px;padding-top:16px;border-top:1px dashed var(--line);color:var(--ink-45)!important;font-size:var(--fs-sm)!important}
.legal-back{display:inline-flex;align-items:center;gap:9px;min-height:44px;margin-top:clamp(30px,3.4vw,46px);font-weight:600;font-size:.94rem;color:var(--accent-aa)}
.legal-back .ic{width:.5em;height:.62em;transform:scaleX(-1);transition:transform .28s var(--spring)}
.legal-back:hover .ic{transform:scaleX(-1) translateX(4px)}

/* ── 15 bis. CONDITIONS GÉNÉRALES DE VENTE ─────────────────
   Le texte est contractuel : seule la mise en page change. */
.cgv-version{font-size:var(--fs-sm)!important;letter-spacing:.02em}
.cgv-intro{max-width:780px;margin-bottom:clamp(30px,3.4vw,44px);
  padding:clamp(20px,2.2vw,28px) clamp(22px,2.4vw,32px);
  background:var(--accent-soft);border-left:3px solid var(--accent);
  border-radius:0 var(--r-md) var(--r-md) 0}
.cgv-intro p{color:var(--ink-70);font-size:.985rem;line-height:1.72}

.cgv-toc{max-width:780px;margin-bottom:clamp(38px,4.4vw,64px);
  padding:clamp(22px,2.4vw,30px) clamp(22px,2.6vw,34px);
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);box-shadow:var(--sh-sm)}
.cgv-toc-h{font-family:var(--f-t);font-weight:700;font-size:var(--fs-xs);
  letter-spacing:.15em;text-transform:uppercase;color:var(--muted);margin-bottom:16px}
.cgv-toc ol{list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px clamp(18px,2.4vw,34px)}
.cgv-toc a{display:flex;align-items:baseline;gap:12px;min-height:44px;padding:11px 0;
  font-size:.94rem;color:var(--ink-70);line-height:1.4;
  transition:color .2s var(--ease)}
.cgv-toc a:hover{color:var(--accent-aa)}
.cgv-toc-n{font-family:var(--f-t);font-weight:700;font-size:.78rem;
  color:var(--accent-aa);flex:none;font-variant-numeric:tabular-nums}

.cgv-body{gap:clamp(34px,3.6vw,52px)}
.cgv-body h2{align-items:baseline;padding-top:clamp(22px,2.4vw,30px);
  border-top:1px solid var(--line)}
.cgv-body section:first-child h2{padding-top:0;border-top:0}
.cgv-num{font-family:var(--f-t);font-weight:700;color:var(--accent-aa);
  flex:none;font-variant-numeric:tabular-nums}
.cgv-body .legal-card{margin-top:4px}

.cgv-box,.cgv-warn{margin-top:16px;padding:clamp(16px,1.8vw,20px) clamp(18px,2vw,24px);
  border-radius:0 var(--r-md) var(--r-md) 0}
.cgv-box{background:var(--accent-soft);border-left:3px solid var(--accent)}
.cgv-warn{background:#FFFBEB;border-left:3px solid #B45309}
.cgv-box p,.cgv-warn p{font-size:.95rem;line-height:1.68}

.cgv-foot{max-width:780px;margin-top:clamp(38px,4vw,56px);
  padding-top:clamp(24px,2.6vw,32px);border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;align-items:center;gap:16px clamp(20px,2.6vw,34px)}
.cgv-print .ic{width:1em;height:1em;transition:none}
.cgv-print:hover .ic{transform:none}
.cgv-ask{flex:1 1 300px;min-width:0;color:var(--ink-70);font-size:.94rem;line-height:1.6}
.cgv-ask a{color:var(--accent-aa);font-weight:600;white-space:nowrap;
  text-decoration:underline;text-underline-offset:3px}
.cgv-liens{display:flex;flex-wrap:wrap;gap:8px clamp(24px,3vw,40px);
  margin-top:clamp(28px,3.2vw,42px)}
.cgv-liens .legal-back{margin-top:0}

@media (max-width:700px){
  .cgv-toc ol{grid-template-columns:1fr}
}
@media print{
  .cgv-toc,.cgv-foot,.cgv-liens{display:none}
  .cgv-body h2{break-after:avoid}
  .cgv-box,.cgv-warn,.legal-card{break-inside:avoid}
}

/* ── 15 ter. PAGE INTROUVABLE (404) ────────────────────────
   Fond sombre, chevron en filigrane, un retour et un numéro. */
.body-404{background:var(--ink);color:#fff}
.e404{position:relative;overflow:hidden;min-height:100vh;min-height:100svh;
  display:flex;align-items:center;padding-block:clamp(56px,9vw,110px)}
.e404-chev{position:absolute;right:-6%;top:50%;transform:translateY(-50%);
  width:min(52vw,620px);color:rgba(255,255,255,.05);pointer-events:none}
.e404-chev svg{width:100%;height:auto;display:block}
.e404-in{position:relative;max-width:760px}
.e404-brand{display:inline-flex;align-items:center;min-height:44px;margin-bottom:clamp(34px,4.4vw,58px)}
.e404-brand img{height:clamp(42px,4.4vw,55px);width:auto;display:block}
.e404-code{font-family:var(--f-t);font-weight:700;font-size:var(--fs-xs);
  letter-spacing:.19em;text-transform:uppercase;color:var(--gold);margin-bottom:14px}
.e404-t{font-family:var(--f-t);font-weight:800;
  font-size:clamp(2.1rem,1.35rem + 3.6vw,4rem);line-height:1.06;letter-spacing:-.035em}
.e404-hi{color:var(--gold)}
.e404-p{margin-top:clamp(18px,2vw,26px);max-width:52ch;
  font-size:clamp(1rem,.97rem + .25vw,1.13rem);line-height:1.68;color:var(--d-70)}
.e404-act{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(28px,3.2vw,40px)}
.e404-tel{gap:10px;font-variant-numeric:tabular-nums;letter-spacing:-.015em}
.e404-tel .ic{width:1.05em;height:1.05em;color:var(--accent);transition:none}
.e404-tel:hover .ic{transform:none}
.e404-dispo{margin-top:14px;font-size:var(--fs-sm);color:var(--d-70)}
.e404-nav{display:flex;flex-wrap:wrap;gap:4px clamp(18px,2.4vw,34px);
  margin-top:clamp(34px,4vw,52px);padding-top:clamp(22px,2.4vw,30px);
  border-top:1px solid var(--d-line)}
.e404-nav a{display:inline-flex;align-items:center;gap:9px;min-height:44px;
  font-size:.94rem;color:var(--d-70);transition:color .2s var(--ease)}
.e404-nav a:hover{color:#fff}
.e404-nav .ic{width:.9em;height:.76em;color:var(--accent);flex:none}

/* ── 16. ADAPTATION AUX ÉCRANS ────────────────────────────── */
@media (max-width:1180px){
  .hero-grid{grid-template-columns:1fr;gap:44px}
  .hero-txt .h-display{max-width:18ch}
  .hero-mock{max-width:580px}
  .serp{transform:none}
}
@media (max-width:1080px){
  .mt-seq{grid-template-columns:1fr;gap:34px}
  .mt-visu{order:-1}
  .mt-pin{position:static}
  .mt-step{transform:none}
  .mt-step.is-on{transform:none}
  .est{grid-template-columns:1fr;gap:32px}
  .faq-grid{grid-template-columns:1fr;gap:36px}
  .faq-head{position:static}
  .ct-grid{grid-template-columns:1fr;gap:40px}
  .moi{grid-template-columns:1fr;gap:32px}
  .parc{grid-template-columns:1fr;gap:34px}
  .devis{grid-template-columns:1fr}
  .tech-grid{grid-template-columns:1fr 1fr}
  .sec-grid{grid-template-columns:repeat(2,1fr)}
  .ot{max-width:calc(50% - clamp(14px,1.8vw,22px) / 2)}
  .ap-stage{aspect-ratio:16/12}
}
@media (max-width:900px){
  html{scroll-padding-top:88px}
  .nav,.hdr-cta{display:none}
  .burger{display:block}
  .hdr-tel{padding:8px 14px 8px 9px;font-size:.9rem}
  .fab{display:inline-flex}
  .acte-head{grid-template-columns:1fr}
  .acte-no{writing-mode:horizontal-tb;padding-top:0;margin-bottom:14px}
  .acte-head .h-sec,.acte-head .sec-lead,.acte-head .eyebrow{grid-column:1}
  .faq-head{grid-template-columns:1fr}
  .faq-head .acte-no{grid-row:auto}
  .faq-ask{grid-column:1}
  .chiffres{grid-template-columns:1fr;gap:28px}
  .chiffre{padding-left:0;padding-top:24px}
  .chiffre+.chiffre::before{left:0;right:auto;top:0;bottom:auto;width:62px;height:1px;
    background:linear-gradient(90deg,rgba(255,255,255,.22),transparent)}
  .ch-l{max-width:44ch}
  .heb-grid{grid-template-columns:1fr;max-width:560px}
  .hq{min-height:0}
  .st-grid{grid-template-columns:repeat(2,1fr)}
  .dom{flex-direction:column;align-items:stretch}
  .dom-logo{width:auto;max-width:180px}
  .moi-f{grid-template-columns:1fr;gap:18px}
  .mf-l{max-width:36ch}
  .ft-grid{grid-template-columns:1fr 1fr}
  .ft-brand{grid-column:1/-1}
  .frame-ph{width:clamp(96px,17vw,132px)}
}
@media (max-width:720px){
  .tech-grid{grid-template-columns:1fr;max-width:620px}
  .sec-grid{grid-template-columns:1fr;max-width:620px}
  .ot-grid{max-width:620px;margin-inline:auto}
  .ot{max-width:100%}
  .ap-stage{aspect-ratio:4/3.4}
  .mort-l,.vif-tags{display:none}
  .works-panes{max-width:none}
}
@media (max-width:620px){
  :root{--sec:clamp(66px,14vw,96px)}
  .nope-l{grid-template-columns:1fr}
  .hero{padding-block:16px 56px}
  .hero-act{gap:10px}
  .hero-act .btn{width:100%}
  .hero-trust{gap:8px 20px}
  .serp-body{padding:16px 16px 20px;min-height:212px}
  .serp-field{padding:11px 14px}
  .serp-q{font-size:.88rem}
  .mock-cap{text-align:left;padding-right:0}
  .cte-act .btn{width:100%}
  .ct-btns{grid-template-columns:1fr}
  .hdr-tel{gap:7px;padding:7px 12px 7px 8px;font-size:.86rem}
  .hdr-tel-p{width:24px;height:24px}
  .wtab{padding:10px 14px;font-size:.85rem}
  /* Le libellé reste lu par les lecteurs d’écran, seul l’affichage est réduit. */
  .wtab span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .wtab .ic{width:1.3em;height:1.3em}
  .frame-ph{display:none}
  .shot-grid{height:28%}
  .fgrid{grid-template-columns:1fr}
  .ft-grid{grid-template-columns:1fr;gap:26px}
  .ft-bot{flex-direction:column;align-items:flex-start}
  .acc-q{gap:12px;padding:20px 2px}
  .acc-a p{padding-right:24px}
  .legal-card dl{grid-template-columns:1fr;gap:2px 0}
  .legal-card dt{margin-top:10px}
  .own{padding-inline:22px}
  .own::after{display:none}
  .ap-tag{padding:6px 10px}
}
@media (max-width:400px){
  .works-tabs{gap:6px}
  .ot-mark{--lw:34px;--lh:34px;width:52px;height:52px}
  .ot-mark-w{--lw:100px;width:124px}
  .st-mark{--lw:68px;--lh:40px;width:96px;height:64px}
  .st-p{font-size:.82rem}
  /* Le numéro reste annoncé aux lecteurs d’écran, seul l’affichage se réduit. */
  .hdr-tel-n{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .hdr-tel{padding:8px;gap:0;min-width:46px;justify-content:center}
  .hdr.on .brand{width:100px;height:44px}
}

/* ── 17. PRÉFÉRENCES ET IMPRESSION ────────────────────────── */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    animation-delay:0ms!important;
    transition-duration:.001ms!important;transition-delay:0ms!important;
    scroll-behavior:auto!important;
  }
  /* Tout reste lisible et utilisable sans une seule animation. */
  .js [data-reveal],
  .hero-txt .eyebrow,.hero-txt .h-display,#heroLead,#heroAct,#heroTrust,.hero-mock,
  .serp-r,.serp-miss,.serp-stat,.mnav.on .mnav-body a{
    opacity:1!important;transform:none!important;animation:none!important;
  }
  .mark::after,.mark-d::after{transform:scaleX(1)!important;animation:none!important}
  .serp-miss-t::after{width:calc(100% + 4px)!important;animation:none!important}
  .serp-cur,.odot::after{animation:none!important}
  .serp-cur{opacity:0}
  .mt-sc{transition:none!important}
  .frame-lap:hover .shot-grid span,.works-stage:hover .frame-ph{transform:none!important}
}
@media print{
  .hdr,.mnav,.fab,.hero-bg,.hero-chev,.acte-grain,.ct-bg,.ft-chev,
  .bord,.ap-range,.ap-handle,.works-tabs{display:none!important}
  body{background:#fff;color:#000}
  .acte-sombre,.contact,.own{background:#fff!important;color:#000!important}
  .acte-sombre .h-sec-d,.acte-sombre .h-ter,.own-p,.moi-p1,.mt-t,.tc-t{color:#000!important}
  .ch-l,.mt-p,.tc-p,.ia-p,.moi-p2,.ct-lead{color:#333!important}
  .tnum,.mf-v{-webkit-text-fill-color:#EA580C;color:#EA580C}
  .acc-a{grid-template-rows:1fr!important}
  .acc-a p{opacity:1!important;transform:none!important}
  .mt-sc{position:static;opacity:1!important;transform:none!important}
}