/* ============================================================
   SIA PROCESS · FEUILLE DE STYLE PARTAGEE
   Source unique des tokens et composants · index.html + sites.html
   Sommaire :
   00 Tokens & base          07 Marquee
   01 Accessibilite          08 Constat
   02 Transitions de page    09 Automatisations (4 piliers)
   03 Navigation             10 Calculateur ROI
   04 Shell de section       11 Methode
   05 Boutons                12 Tarifs · Renvoi · FAQ
   06 Hero & console         13 Contact & formulaire
                             14 Sites (maquettes vivantes + lightbox)
                             15 Footer · 16 Reduced motion
   ============================================================ */

/* ---------- 00 · TOKENS & BASE ---------- */
:root{
  /* Couleurs primaires */
  --ink:#18140F; --paper:#F4EFE6; --terracotta:#C9502C; --forest:#2B4A3E;
  /* Neutres */
  --ink-80:#2E2A24; --ink-60:#5A544A; --ink-40:#908879; --ink-20:#C9C2B5; --ink-10:#E3DED1;
  --paper-alt:#EBE5D8;
  /* Neutres du fond sombre (console, ROI, methode) */
  --ink-line:#2a2520; --ink-card:#221d17; --ink-deep:#1d1812;
  /* Semantique */
  --success:#2B4A3E; --warning:#B8763E; --danger:#9C2A1F; --info:#3E5C7A;
  /* Typographie */
  --font-display:'Fraunces','Playfair Display',Georgia,serif;
  --font-body:'Hanken Grotesk',-apple-system,sans-serif;
  --font-mono:'JetBrains Mono','SF Mono',Consolas,monospace;
  /* Cadre & mouvement : une seule courbe maitresse pour tout le site */
  --max-width:1240px;
  --ease:cubic-bezier(.22,.61,.18,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  /* Grain reutilisable (demos sites) */
  --noise:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' seed='5'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
body{
  font-family:var(--font-body);font-weight:400;font-size:16px;line-height:1.6;
  color:var(--ink);background:var(--paper);position:relative;overflow-x:hidden;
}
/* Grain texture en overlay sur tout le site (signature de la charte) */
body::before{
  content:'';position:fixed;inset:0;z-index:1;pointer-events:none;opacity:0.06;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' seed='5'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.8 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
}
main{position:relative;z-index:2;}
a{color:inherit;}
img{max-width:100%;height:auto;}
::selection{background:var(--terracotta);color:var(--paper);}

/* ---------- 01 · ACCESSIBILITE ---------- */
/* Lien d'evitement : visible uniquement au focus clavier */
.skip-link{
  position:fixed;top:10px;left:10px;z-index:300;background:var(--ink);color:var(--paper);
  font-family:var(--font-mono);font-size:12px;letter-spacing:0.08em;padding:12px 18px;
  text-decoration:none;transform:translateY(-200%);transition:transform .25s var(--ease);
}
.skip-link:focus-visible{transform:none;}
/* Focus clavier net et coherent partout */
:focus-visible{outline:2px solid var(--terracotta);outline-offset:3px;}

/* ---------- 02 · TRANSITIONS DE PAGE (index <-> sites) ---------- */
/* View Transitions cross-document : fondu doux, logo partage. Fallback : navigation normale. */
@view-transition{navigation:auto;}
::view-transition-old(root){animation:vtOut .28s ease both;}
::view-transition-new(root){animation:vtIn .34s ease both;}
@keyframes vtOut{to{opacity:0;}}
@keyframes vtIn{from{opacity:0;}}

/* ---------- 03 · NAVIGATION ---------- */
.topnav{
  position:fixed;top:0;left:0;right:0;z-index:100;padding:18px 40px;
  background:rgba(244,239,230,0.78);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--ink-10);display:flex;justify-content:space-between;align-items:center;
  font-family:var(--font-mono);font-size:12px;text-transform:uppercase;letter-spacing:0.08em;
  transition:padding .3s var(--ease), background .3s var(--ease), transform .4s var(--ease);
}
/* la nav s'efface en descendant, revient des qu'on remonte (fx.js) */
.topnav.hide{transform:translateY(-100%);}
.topnav.scrolled{padding:12px 40px;background:rgba(244,239,230,0.92);}
.topnav__brand{font-family:var(--font-display);font-size:22px;font-weight:500;font-variation-settings:'opsz'144,'SOFT'0;letter-spacing:-0.02em;text-transform:none;text-decoration:none;display:inline-flex;align-items:baseline;gap:7px;view-transition-name:brand;}
.topnav__brand .dot{color:var(--terracotta);}
.topnav__brand small{font-family:var(--font-mono);font-size:10px;letter-spacing:0.14em;color:var(--ink-40);text-transform:uppercase;}
.topnav__links{display:flex;gap:26px;list-style:none;align-items:center;}
.topnav__links a{color:var(--ink-60);text-decoration:none;transition:color .2s;position:relative;}
/* soulignement qui pousse de gauche a droite */
.topnav__links a:not(.nav-cta)::after{content:'';position:absolute;left:0;bottom:-5px;height:1px;width:100%;background:var(--terracotta);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease);}
.topnav__links a:not(.nav-cta):hover::after,.topnav__links a.active:not(.nav-cta)::after{transform:scaleX(1);}
.topnav__links a:hover{color:var(--terracotta);}
.topnav__links a.active{color:var(--ink);}
.nav-cta{background:var(--ink);color:var(--paper)!important;padding:9px 16px;letter-spacing:0.08em;transition:background .2s;}
.nav-cta:hover{background:var(--terracotta);color:var(--paper)!important;}
.nav-burger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:6px;}
.nav-burger span{width:24px;height:1.5px;background:var(--ink);transition:transform .3s var(--ease),opacity .2s;}
/* burger -> croix */
.nav-burger.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg);}
.nav-burger.open span:nth-child(2){opacity:0;}
.nav-burger.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg);}
.mobile-menu{position:fixed;inset:0;z-index:99;background:var(--paper);transform:translateY(-100%);transition:transform .45s cubic-bezier(.7,0,.2,1);display:flex;flex-direction:column;justify-content:center;padding:40px;gap:8px;visibility:hidden;}
.mobile-menu.open{transform:translateY(0);visibility:visible;}
.mobile-menu a{font-family:var(--font-display);font-size:38px;font-weight:300;font-variation-settings:'opsz'144,'SOFT'40;letter-spacing:-0.03em;text-decoration:none;color:var(--ink);padding:8px 0;border-bottom:1px solid var(--ink-10);opacity:0;transform:translateY(14px);transition:opacity .4s var(--ease),transform .4s var(--ease);}
.mobile-menu.open a{opacity:1;transform:none;}
/* entree en cascade des liens du menu */
.mobile-menu.open a:nth-child(1){transition-delay:.10s;}
.mobile-menu.open a:nth-child(2){transition-delay:.16s;}
.mobile-menu.open a:nth-child(3){transition-delay:.22s;}
.mobile-menu.open a:nth-child(4){transition-delay:.28s;}
.mobile-menu.open a:nth-child(5){transition-delay:.34s;}
.mobile-menu.open a:nth-child(6){transition-delay:.40s;}
.mobile-menu a .dot,.mobile-menu a em{color:var(--terracotta);font-style:italic;}
@media(max-width:980px){
  .topnav__links{display:none;}
  .topnav,.topnav.scrolled{padding:16px 20px;}
  .nav-burger{display:flex;}
}

/* ---------- 04 · SHELL DE SECTION ---------- */
section{padding:84px 40px;max-width:var(--max-width);margin:0 auto;position:relative;}
@media(max-width:700px){section{padding:60px 22px;}}
.section-label{font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:0.14em;color:var(--ink-40);display:flex;align-items:center;gap:12px;margin-bottom:30px;}
.section-label::before{content:'';width:32px;height:1px;background:var(--ink-40);}
.section-title{font-family:var(--font-display);font-weight:300;font-variation-settings:'opsz'144,'SOFT'30;font-size:clamp(40px,6vw,82px);line-height:0.96;letter-spacing:-0.035em;margin-bottom:24px;}
.section-title em{font-style:italic;font-variation-settings:'opsz'144,'SOFT'100,'WONK'1;color:var(--terracotta);}
.section-intro{font-size:20px;line-height:1.55;color:var(--ink-60);max-width:660px;margin-bottom:44px;}
/* Numero de section monumental en filigrane (signature magazine).
   Derive en parallaxe au scroll quand le navigateur supporte animation-timeline. */
.secnum{
  position:absolute;top:18px;right:8px;z-index:0;pointer-events:none;user-select:none;
  font-family:var(--font-display);font-weight:200;font-variation-settings:'opsz'144,'SOFT'40;
  font-size:clamp(110px,16vw,230px);line-height:1;letter-spacing:-0.06em;
  color:var(--ink);opacity:.05;
}
.secnum--paper{color:var(--paper);opacity:.05;}
@supports (animation-timeline: view()){
  .secnum{animation:numDrift linear both;animation-timeline:view();animation-range:entry 0% exit 100%;}
  @keyframes numDrift{from{transform:translateY(70px);}to{transform:translateY(-70px);}}
}
.micro-title{font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:0.14em;color:var(--ink-40);margin:0 0 14px;display:flex;align-items:center;gap:10px;}
.micro-title::before{content:'';width:24px;height:1px;background:var(--terracotta);}
/* fil narratif : petite ligne de liaison entre sections */
.flowlink{font-family:var(--font-mono);font-size:11px;letter-spacing:0.04em;color:var(--ink-40);margin:-6px 0 26px;}
.flowlink b{color:var(--terracotta);font-weight:600;}
.method .flowlink,.roi .flowlink{color:var(--ink-20);}

/* ---------- 05 · BOUTONS ---------- */
/* Nets (radius 0), fleche qui glisse, fond qui balaie de gauche a droite au survol */
.btn{
  font-family:var(--font-body);font-size:14px;font-weight:500;letter-spacing:0.02em;
  padding:14px 24px;border:none;cursor:pointer;display:inline-flex;align-items:center;gap:10px;
  width:fit-content;border-radius:0;text-decoration:none;position:relative;overflow:hidden;z-index:1;
  transition:color .25s var(--ease),border-color .25s var(--ease),translate .35s var(--ease);
}
.btn::before{content:'';position:absolute;inset:0;z-index:-1;transform:translateX(-101%);transition:transform .42s var(--ease);}
.btn:hover::before,.btn:focus-visible::before{transform:none;}
.btn:active{transform:translateY(1px);}
.btn--primary{background:var(--ink);color:var(--paper);}
.btn--primary::before{background:var(--terracotta);}
.btn--accent{background:var(--terracotta);color:var(--paper);}
.btn--accent::before{background:var(--ink);}
.btn--ghost{background:transparent;color:var(--ink);border:1px solid var(--ink);}
.btn--ghost::before{background:var(--ink);}
.btn--ghost:hover,.btn--ghost:focus-visible{color:var(--paper);}
.btn .arrow{display:inline-block;transition:transform .25s var(--ease);}
.btn:hover .arrow,.btn:focus-visible .arrow{transform:translateX(4px);}

/* ---------- 06 · REVEALS AU SCROLL ---------- */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease),transform .9s var(--ease);}
.reveal.in{opacity:1;transform:none;}
.reveal.d1{transition-delay:.08s;} .reveal.d2{transition-delay:.16s;} .reveal.d3{transition-delay:.24s;} .reveal.d4{transition-delay:.32s;} .reveal.d5{transition-delay:.40s;}

/* ---------- 06b · HERO ---------- */
.hero{min-height:100vh;max-width:var(--max-width);margin:0 auto;padding:150px 40px 70px;display:grid;grid-template-columns:1.15fr 0.85fr;gap:56px;align-items:center;position:relative;}
@media(max-width:980px){.hero{grid-template-columns:1fr;gap:44px;padding-top:130px;min-height:auto;}}
@media(max-width:700px){.hero{padding:120px 22px 50px;}}
/* halo terracotta tres discret qui suit le curseur (desktop uniquement) */
@media(hover:hover) and (pointer:fine){
  .hero::after{
    content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
    background:radial-gradient(440px circle at var(--mx,72%) var(--my,28%),rgba(201,80,44,.08),transparent 70%);
  }
}
.hero>div{position:relative;z-index:1;}
.hero__marker{font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:0.14em;color:var(--ink-40);display:flex;gap:22px;margin-bottom:34px;flex-wrap:wrap;}
.hero__marker strong{color:var(--ink);font-weight:500;}
.hero__title{font-family:var(--font-display);font-weight:300;font-variation-settings:'opsz'144,'SOFT'40;font-size:clamp(54px,8.5vw,116px);line-height:0.9;letter-spacing:-0.045em;margin-bottom:30px;}
.hero__title .soft{font-style:italic;font-weight:200;font-variation-settings:'opsz'144,'SOFT'100,'WONK'1;color:var(--terracotta);}
/* mask reveal ligne par ligne */
.hero__line{display:block;overflow:hidden;}
.hero__line span{display:block;transform:translateY(110%);animation:riseIn .95s var(--ease-out) forwards;}
.hero__line:nth-child(2) span{animation-delay:.12s;}
.hero__line:nth-child(3) span{animation-delay:.24s;}
@keyframes riseIn{to{transform:translateY(0);}}
.hero__essence{font-size:19px;line-height:1.55;color:var(--ink-60);max-width:480px;margin-bottom:34px;opacity:0;animation:fadeUp .8s ease forwards .5s;}
.hero__essence em{font-style:italic;color:var(--ink);}
.hero__cta{display:flex;gap:14px;flex-wrap:wrap;opacity:0;animation:fadeUp .8s ease forwards .65s;}
@keyframes fadeUp{from{opacity:0;transform:translateY(18px);}to{opacity:1;transform:none;}}
.hero__note{font-family:var(--font-mono);font-size:11px;line-height:1.6;color:var(--ink-60);letter-spacing:0.02em;margin-top:22px;display:flex;gap:8px;align-items:flex-start;opacity:0;animation:fadeUp .8s ease forwards .8s;max-width:440px;}
.hero__note b{color:var(--ink);font-weight:600;}
.hero__note .i{color:var(--terracotta);}

/* ---------- 06c · CONSOLE (carte sombre du hero) ---------- */
.console{background:var(--ink);color:var(--paper);border:1px solid var(--ink);padding:26px;position:relative;opacity:0;animation:fadeUp .9s ease forwards .55s;box-shadow:0 40px 80px -40px rgba(24,20,15,.55);}
.console::after{content:'';position:absolute;inset:0;pointer-events:none;background-image:var(--noise);opacity:0.05;mix-blend-mode:overlay;}
/* liseret "live" terracotta sur la tranche gauche */
.console::before{content:'';position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--terracotta);}
.console__top{display:flex;justify-content:space-between;align-items:center;font-family:var(--font-mono);font-size:10px;text-transform:uppercase;letter-spacing:0.14em;color:var(--ink-40);margin-bottom:18px;}
.console__top .live{display:inline-flex;align-items:center;gap:7px;color:var(--paper);}
.console__top .live i{width:7px;height:7px;border-radius:50%;background:var(--terracotta);display:inline-block;animation:pulse 1.6s ease-in-out infinite;}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1);}50%{opacity:.4;transform:scale(.7);}}
.console__counter{display:flex;justify-content:space-between;align-items:flex-end;margin-top:20px;padding-top:18px;border-top:1px solid var(--ink-line);}
.console__counter .big{font-family:var(--font-display);font-size:40px;line-height:1;font-weight:400;letter-spacing:-0.03em;color:var(--paper);font-variant-numeric:tabular-nums;}
.console__counter .big .cur{color:var(--terracotta);}
.console__counter .big small{font-size:13px;color:var(--ink-40);font-family:var(--font-mono);letter-spacing:0;}
.console__counter .cap{font-family:var(--font-mono);font-size:10px;text-transform:uppercase;letter-spacing:0.12em;color:var(--ink-40);text-align:right;max-width:170px;line-height:1.5;}
/* pulse du compteur quand un cycle du journal se termine */
.console__counter .big.tick .cur{animation:counterTick .5s var(--ease);}
@keyframes counterTick{0%{color:var(--paper);}100%{color:var(--terracotta);}}

/* ---------- 06d · JOURNAL D'EVENEMENTS (pipeline du devis, en boucle) ---------- */
.journal{list-style:none;display:flex;flex-direction:column;min-height:264px;}
.jline{
  display:flex;align-items:flex-start;gap:12px;padding:9px 0;border-bottom:1px solid var(--ink-line);
  opacity:0;transform:translateY(8px);transition:opacity .5s var(--ease),transform .5s var(--ease);
}
.jline:last-child{border-bottom:none;}
.jline.on{opacity:1;transform:none;}
.jtime{font-family:var(--font-mono);font-size:10px;color:var(--ink-40);letter-spacing:0.06em;min-width:42px;padding-top:3px;text-transform:uppercase;}
.jline.on .jtime{color:var(--terracotta);}
.jbody{flex:1;min-width:0;}
.jbody b{display:block;font-family:var(--font-body);font-size:13.5px;font-weight:600;color:var(--paper);line-height:1.35;}
.jbody span{display:block;font-size:11.5px;color:var(--ink-40);line-height:1.4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.jtag{font-family:var(--font-mono);font-size:9px;text-transform:uppercase;letter-spacing:0.1em;color:var(--forest);background:rgba(43,74,62,.22);padding:3px 7px;white-space:nowrap;margin-top:2px;}
.jtag--trig{color:var(--ink-20);background:rgba(244,239,230,.07);}
.jtag--auto{color:var(--terracotta);background:rgba(201,80,44,.16);}
.jtag--euro{color:var(--paper);background:var(--terracotta);font-weight:700;}
@media(max-width:380px){.jbody span{white-space:normal;}}

/* ---------- 07 · MARQUEE ---------- */
.marquee{border-top:1px solid var(--ink-10);border-bottom:1px solid var(--ink-10);overflow:hidden;padding:18px 0;position:relative;z-index:2;background:var(--paper);}
.marquee__track{display:flex;gap:40px;white-space:nowrap;width:max-content;animation:scrollX 32s linear infinite;font-family:var(--font-display);font-size:26px;font-weight:400;letter-spacing:-0.02em;color:var(--ink);}
.marquee:hover .marquee__track{animation-play-state:paused;}
.marquee__track span{display:inline-flex;align-items:center;gap:40px;}
.marquee__track .star{color:var(--terracotta);font-size:16px;}
@keyframes scrollX{to{transform:translateX(-50%);}}

/* ---------- 08 · CONSTAT (bandeau compact) ---------- */
.constat{padding-bottom:0!important;}
.constat-lead{font-family:var(--font-display);font-size:clamp(24px,3.4vw,38px);font-weight:400;letter-spacing:-0.025em;line-height:1.16;max-width:820px;margin-bottom:30px;}
.constat-lead em{font-style:italic;color:var(--terracotta);font-variation-settings:'opsz'144,'SOFT'100,'WONK'1;}
.constat-points{display:flex;gap:2px;background:var(--ink-10);border:1px solid var(--ink-10);}
.cpt{flex:1;background:var(--paper);padding:22px 24px;font-size:14px;color:var(--ink-60);line-height:1.45;transition:background .3s;}
.cpt:hover{background:var(--paper-alt);}
.cpt b{display:block;font-family:var(--font-display);font-size:18px;color:var(--ink);font-weight:500;margin-bottom:5px;letter-spacing:-0.01em;}
.cpt b .x{color:var(--terracotta);}
@media(max-width:680px){.constat-points{flex-direction:column;}}

/* 3 mots a connaitre */
.wordbox{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--ink-10);border:1px solid var(--ink-10);margin:6px 0 4px;}
@media(max-width:680px){.wordbox{grid-template-columns:1fr;}}
.wordbox__cell{background:var(--paper);padding:18px 20px;transition:background .3s;}
.wordbox__cell:hover{background:var(--paper-alt);}
.wordbox__term{font-family:var(--font-display);font-size:18px;font-weight:500;letter-spacing:-0.01em;color:var(--ink);margin-bottom:5px;}
.wordbox__def{font-size:13px;color:var(--ink-60);line-height:1.45;}

/* ---------- 09 · AUTOMATISATIONS · piliers + visuels ---------- */
.auto{display:flex;flex-direction:column;gap:2px;}
.auto-row{display:grid;grid-template-columns:0.82fr 1.18fr;gap:48px;align-items:center;padding:44px 0;border-top:1px solid var(--ink-10);}
.auto-row:first-child{border-top:none;}
.auto-row--rev .auto-copy{order:2;}
.auto-row--rev .auto-visual{order:1;}
@media(max-width:860px){
  .auto-row{grid-template-columns:1fr;gap:28px;padding:40px 0;}
  .auto-row--rev .auto-copy{order:1;}
  .auto-row--rev .auto-visual{order:2;}
}
.auto-copy .num{font-family:var(--font-mono);font-size:11px;letter-spacing:0.14em;color:var(--ink-40);margin-bottom:20px;}
.auto-copy h3{font-family:var(--font-display);font-size:clamp(28px,3.6vw,40px);font-weight:500;letter-spacing:-0.02em;line-height:1.04;margin-bottom:14px;}
.auto-copy h3 em{font-style:italic;color:var(--terracotta);font-variation-settings:'opsz'14,'SOFT'100,'WONK'1;}
.auto-copy p{font-size:15px;color:var(--ink-60);line-height:1.6;max-width:420px;margin-bottom:22px;}
.auto-visual{position:relative;}
.visual-stack{display:grid;gap:18px;}

/* rail process (sequence en mono, par pilier) */
.rail{display:flex;align-items:center;flex-wrap:wrap;gap:7px;font-family:var(--font-mono);font-size:10px;text-transform:uppercase;letter-spacing:0.05em;color:var(--ink-40);margin-bottom:20px;}
.rail b{color:var(--ink);font-weight:600;}
.rail .ar{color:var(--terracotta);font-weight:700;}
.rail .sia{font-family:var(--font-display);text-transform:none;font-size:14px;letter-spacing:-0.02em;color:var(--terracotta);}
.rail .sia .dot{color:var(--terracotta);}

/* gain en euros (focal, compteur anime au scroll) */
.gain{display:flex;align-items:baseline;gap:12px;border-top:1px solid var(--ink-10);padding-top:16px;flex-wrap:wrap;}
.gain__label{font-family:var(--font-mono);font-size:10px;text-transform:uppercase;letter-spacing:0.1em;color:var(--ink-40);}
.gain__val{font-family:var(--font-display);font-size:clamp(30px,4vw,40px);font-weight:500;letter-spacing:-0.02em;color:var(--forest);line-height:1;font-variant-numeric:tabular-nums;}
.gain__per{font-family:var(--font-mono);font-size:11px;color:var(--ink-40);}

/* statut pastilles partagees */
.status{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:9px;text-transform:uppercase;letter-spacing:0.1em;padding:3px 8px;border-radius:2px;}
.status--done{background:rgba(43,74,62,.14);color:var(--forest);}
.status--run{background:rgba(201,80,44,.14);color:var(--terracotta);}
.status i{width:6px;height:6px;border-radius:50%;background:currentColor;display:inline-block;}
.status--run i{animation:pulse 1.6s ease-in-out infinite;}

/* — visuel · workflow canvas (SVG qui se trace) — */
.wf{background:var(--ink);border:1px solid var(--ink);padding:22px;position:relative;overflow:hidden;box-shadow:0 36px 70px -44px rgba(24,20,15,.55);}
.wf::after{content:'';position:absolute;inset:0;pointer-events:none;background-image:var(--noise);opacity:0.05;mix-blend-mode:overlay;}
.wf__top{display:flex;justify-content:space-between;align-items:center;font-family:var(--font-mono);font-size:10px;text-transform:uppercase;letter-spacing:0.14em;color:var(--ink-40);margin-bottom:6px;position:relative;z-index:2;}
.wf__top b{color:var(--paper);font-weight:500;}
.wf svg{width:100%;height:auto;display:block;position:relative;z-index:2;}
.wf .wlabel{font-family:var(--font-mono);fill:var(--paper);font-size:11px;}
.wf .wsub{font-family:var(--font-mono);fill:var(--ink-40);font-size:8.5px;letter-spacing:0.08em;}
.wf .wnode{fill:var(--ink-card);stroke:#3a342b;stroke-width:1;}
.wf .wnode--live{stroke:var(--terracotta);}
.wf .wpath{stroke:#3a342b;stroke-width:1.4;fill:none;stroke-dasharray:6 6;}
.wf .wprog{stroke:var(--terracotta);stroke-width:1.6;fill:none;stroke-dasharray:520;stroke-dashoffset:520;}
.wf.in .wprog{animation:wdraw 3.4s cubic-bezier(.4,0,.2,1) forwards .2s;}
@keyframes wdraw{to{stroke-dashoffset:0;}}
.wf .wdot{fill:var(--terracotta);opacity:0;}
.wf.in .wdot{animation:wdotIn .01s linear forwards 3.4s;}
@keyframes wdotIn{to{opacity:1;}}
.wf .wcheck{opacity:0;}
.wf.in .wcheck1{animation:wpop .3s ease forwards .9s;}
.wf.in .wcheck2{animation:wpop .3s ease forwards 1.6s;}
.wf.in .wcheck3{animation:wpop .3s ease forwards 2.3s;}
.wf.in .wcheck4{animation:wpop .3s ease forwards 3.0s;}
@keyframes wpop{from{opacity:0;transform:scale(.4);}to{opacity:1;transform:scale(1);}}
.wf .wcheck circle{fill:var(--forest);}
.wf .wcheck path{stroke:var(--paper);stroke-width:1.6;fill:none;}
.wf .wlive circle{fill:var(--terracotta);}
.wf .wlive{transform-box:fill-box;transform-origin:center;}
.wf.in .wlive{animation:pulse 1.6s ease-in-out infinite 3.4s;}

/* — visuel · devis PDF (composant facture de la charte) — */
.invoice{background:var(--paper);padding:26px 24px;border:1px solid var(--ink-10);font-size:12px;font-family:var(--font-mono);line-height:1.6;color:var(--ink-60);position:relative;box-shadow:0 24px 50px -36px rgba(24,20,15,.4);}
.invoice__tag{position:absolute;top:-1px;right:-1px;background:var(--forest);color:var(--paper);font-size:9px;letter-spacing:0.1em;text-transform:uppercase;padding:5px 9px;}
.invoice__header{display:flex;justify-content:space-between;align-items:flex-start;padding-bottom:18px;border-bottom:1px solid var(--ink);margin-bottom:16px;}
.invoice__brand{font-family:var(--font-display);font-weight:500;font-size:34px;color:var(--ink);letter-spacing:-0.03em;line-height:1;}
.invoice__brand .dot{color:var(--terracotta);}
.invoice__meta-right{text-align:right;text-transform:uppercase;letter-spacing:0.08em;font-size:10px;}
.invoice__meta-right .n{font-family:var(--font-display);font-size:18px;color:var(--ink);display:block;text-transform:none;letter-spacing:-0.01em;margin-top:4px;}
.invoice__line{display:flex;justify-content:space-between;padding:7px 0;border-bottom:1px dotted var(--ink-10);opacity:0;transform:translateX(-8px);}
.invoice.in .invoice__line{animation:lineIn .5s ease forwards;}
.invoice.in .invoice__line:nth-child(3){animation-delay:.3s;}
.invoice.in .invoice__line:nth-child(4){animation-delay:.5s;}
.invoice.in .invoice__line:nth-child(5){animation-delay:.7s;}
@keyframes lineIn{to{opacity:1;transform:none;}}
.invoice__line--total{border-bottom:none;border-top:2px solid var(--ink);margin-top:10px;padding-top:12px;color:var(--ink);font-weight:600;font-size:14px;}

/* — visuel · boite mail — */
.mail{border:1px solid var(--ink-10);background:var(--paper);overflow:hidden;box-shadow:0 28px 55px -40px rgba(24,20,15,.45);}
.mail__bar{background:var(--ink-10);padding:10px 14px;display:flex;align-items:center;gap:10px;}
.mail__bar .dots{display:flex;gap:6px;}
.mail__bar .dots i{width:9px;height:9px;border-radius:50%;background:var(--ink-20);display:block;}
.mail__bar .title{font-family:var(--font-mono);font-size:10px;letter-spacing:0.1em;text-transform:uppercase;color:var(--ink-40);}
.mail__row{display:flex;gap:14px;padding:16px 18px;border-bottom:1px solid var(--ink-10);align-items:flex-start;opacity:0;transform:translateY(10px);}
.mail.in .mail__row{animation:lineIn .55s ease forwards;}
.mail.in .mail__row:nth-child(3){animation-delay:.45s;}
.mail.in .mail__row:nth-child(4){animation-delay:.9s;}
.mail__row:last-child{border-bottom:none;}
.mail__row--queued{background:var(--paper-alt);}
.mail__av{width:34px;height:34px;flex:0 0 34px;background:var(--ink);color:var(--paper);display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:15px;}
.mail__av .dot{color:var(--terracotta);}
.mail__av--clock{background:var(--paper);border:1px dashed var(--ink-20);color:var(--ink-40);font-family:var(--font-mono);font-size:13px;}
.mail__body{flex:1;min-width:0;}
.mail__from{display:flex;justify-content:space-between;gap:10px;align-items:center;margin-bottom:3px;}
.mail__from b{font-family:var(--font-body);font-size:14px;font-weight:600;color:var(--ink);}
.mail__from time{font-family:var(--font-mono);font-size:10px;color:var(--ink-40);white-space:nowrap;}
.mail__subj{font-size:13.5px;color:var(--ink-80);margin-bottom:3px;}
.mail__prev{font-size:12.5px;color:var(--ink-40);line-height:1.45;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.mail__tags{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap;}

/* — visuel · fil SMS — */
.sms{border:1px solid var(--ink-10);background:var(--paper-alt);padding:20px;box-shadow:0 28px 55px -40px rgba(24,20,15,.45);}
.sms__head{display:flex;justify-content:space-between;align-items:center;font-family:var(--font-mono);font-size:10px;text-transform:uppercase;letter-spacing:0.12em;color:var(--ink-40);margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid var(--ink-10);}
.sms__head b{color:var(--ink);font-weight:500;}
.bubble{max-width:80%;padding:11px 14px;font-size:13.5px;line-height:1.45;margin-bottom:12px;opacity:0;transform:translateY(10px);}
.sms.in .bubble{animation:lineIn .5s ease forwards;}
.sms.in .bubble:nth-child(2){animation-delay:.35s;}
.sms.in .bubble:nth-child(3){animation-delay:1.1s;}
.bubble--in{background:var(--paper);border:1px solid var(--ink-10);color:var(--ink-80);}
.bubble--out{background:var(--forest);color:var(--paper);margin-left:auto;}
.bubble__meta{display:block;font-family:var(--font-mono);font-size:9px;text-transform:uppercase;letter-spacing:0.1em;margin-top:6px;opacity:.7;}
.sms__foot{font-family:var(--font-mono);font-size:10px;color:var(--ink-40);text-align:center;margin-top:4px;}

/* — visuel · agenda / prise de RDV — */
.booking{border:1px solid var(--ink-10);background:var(--paper);padding:22px;box-shadow:0 28px 55px -40px rgba(24,20,15,.45);}
.booking__head{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;}
.booking__head b{font-family:var(--font-display);font-size:18px;font-weight:500;}
.booking__days{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-bottom:14px;}
.booking__day{text-align:center;font-family:var(--font-mono);font-size:10px;text-transform:uppercase;letter-spacing:0.06em;color:var(--ink-40);padding:8px 0;border:1px solid var(--ink-10);}
.booking__day b{display:block;font-family:var(--font-display);font-size:18px;color:var(--ink);margin-top:3px;letter-spacing:-0.02em;}
.booking__day.sel{background:var(--ink);border-color:var(--ink);color:var(--paper);}
.booking__day.sel b{color:var(--paper);}
.booking__slots{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;}
.slot{font-family:var(--font-mono);font-size:12px;text-align:center;padding:11px 0;border:1px solid var(--ink-10);color:var(--ink-60);opacity:0;transform:translateY(8px);}
.booking.in .slot{animation:lineIn .45s ease forwards;}
.booking.in .slot:nth-child(2){animation-delay:.1s;}
.booking.in .slot:nth-child(3){animation-delay:.2s;}
.booking.in .slot:nth-child(4){animation-delay:.3s;}
.booking.in .slot:nth-child(5){animation-delay:.4s;}
.booking.in .slot:nth-child(6){animation-delay:.5s;}
.slot--booked{background:var(--forest);border-color:var(--forest);color:var(--paper);}
.slot--off{color:var(--ink-20);text-decoration:line-through;}
.booking__foot{display:flex;align-items:center;gap:8px;margin-top:14px;padding-top:12px;border-top:1px solid var(--ink-10);font-size:12.5px;color:var(--ink-60);}

/* — visuel · tableau de bord — */
.dash{border:1px solid var(--ink-10);background:var(--paper);overflow:hidden;box-shadow:0 30px 60px -42px rgba(24,20,15,.45);}
.dash__bar{background:var(--ink);color:var(--paper);padding:14px 18px;display:flex;justify-content:space-between;align-items:center;}
.dash__bar b{font-family:var(--font-display);font-size:17px;font-weight:500;}
.dash__bar .dot{color:var(--terracotta);}
.dash__bar .tag{font-family:var(--font-mono);font-size:9px;text-transform:uppercase;letter-spacing:0.12em;color:var(--ink-40);border:1px solid #3a342b;padding:3px 8px;}
.dash__kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--ink-10);}
.kpi{background:var(--paper);padding:16px 16px;}
.kpi__label{font-family:var(--font-mono);font-size:9px;text-transform:uppercase;letter-spacing:0.1em;color:var(--ink-40);margin-bottom:8px;line-height:1.3;}
.kpi__val{font-family:var(--font-display);font-size:30px;font-weight:400;letter-spacing:-0.02em;line-height:1;color:var(--ink);}
.kpi__val.pos{color:var(--forest);}
.kpi__val.euro{color:var(--terracotta);}
.kpi__sub{font-family:var(--font-mono);font-size:10px;color:var(--ink-40);margin-top:6px;}
.dash__charts{display:grid;grid-template-columns:1.2fr 1fr;gap:1px;background:var(--ink-10);border-top:1px solid var(--ink-10);}
@media(max-width:480px){.dash__charts{grid-template-columns:1fr;}}
.chart{background:var(--paper);padding:16px;}
.chart__title{font-family:var(--font-mono);font-size:9px;text-transform:uppercase;letter-spacing:0.1em;color:var(--ink-40);margin-bottom:12px;}
.chart svg{width:100%;height:auto;display:block;}
.bar{fill:var(--forest);transform:scaleY(0);transform-origin:bottom;transform-box:fill-box;}
.dash.in .bar{animation:barUp .8s var(--ease) forwards;}
.dash.in .bar:nth-child(2){animation-delay:.06s;} .dash.in .bar:nth-child(3){animation-delay:.12s;}
.dash.in .bar:nth-child(4){animation-delay:.18s;} .dash.in .bar:nth-child(5){animation-delay:.24s;}
.dash.in .bar:nth-child(6){animation-delay:.30s;} .dash.in .bar:nth-child(7){animation-delay:.36s;}
.dash.in .bar:last-child{fill:var(--terracotta);}
@keyframes barUp{to{transform:scaleY(1);}}
.chart .gridline{stroke:var(--ink-10);stroke-width:1;}
.chart .axis{font-family:var(--font-mono);font-size:7px;fill:var(--ink-40);}
.chart .line{stroke:var(--terracotta);stroke-width:2;fill:none;stroke-dasharray:240;stroke-dashoffset:240;}
.dash.in .chart .line{animation:wdraw 1.6s ease forwards .2s;}
.chart .area{fill:var(--terracotta);opacity:0;}
.dash.in .chart .area{animation:fadeArea .8s ease forwards 1.2s;}
@keyframes fadeArea{to{opacity:.08;}}
.chart .pt{fill:var(--terracotta);opacity:0;}
.dash.in .chart .pt{animation:wdotIn .01s forwards 1.4s;}

/* ---------- 10 · CALCULATEUR DE ROI ---------- */
.roi{background:var(--ink);color:var(--paper);max-width:100%;margin:0;padding:0;}
.roi__inner{max-width:var(--max-width);margin:0 auto;padding:84px 40px;position:relative;}
@media(max-width:700px){.roi__inner{padding:60px 22px;}}
.roi .section-title{color:var(--paper);}
.roi .section-intro{color:var(--ink-20);}
.roi .section-label{color:var(--ink-40);}
.roi__grid{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:var(--ink-line);border:1px solid var(--ink-line);}
@media(max-width:880px){.roi__grid{grid-template-columns:1fr;}}
.roi__inputs{background:var(--ink);padding:38px 34px;}
.roi__inputs h3,.roi__out h3{font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:0.14em;color:var(--ink-40);margin-bottom:26px;}
.roi-field{margin-bottom:24px;}
.roi-field__top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px;gap:12px;}
.roi-field label{font-size:14px;color:var(--ink-20);line-height:1.3;}
.roi-field .val{font-family:var(--font-display);font-size:22px;font-weight:500;color:var(--paper);letter-spacing:-0.01em;white-space:nowrap;font-variant-numeric:tabular-nums;}
.roi-field .val em{font-family:var(--font-mono);font-size:12px;font-style:normal;color:var(--ink-40);margin-left:3px;}
/* sliders custom : piste remplie terracotta (variable --p posee par roi.js), poignee carree */
.roi-field input[type=range]{
  -webkit-appearance:none;appearance:none;width:100%;height:2px;outline:none;cursor:pointer;
  background:linear-gradient(to right,var(--terracotta) calc(var(--p,50)*1%),#3a342b 0);
  transition:height .15s var(--ease);
}
.roi-field input[type=range]:hover,.roi-field input[type=range]:focus-visible{height:4px;}
.roi-field input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;background:var(--terracotta);cursor:grab;border-radius:0;border:0;transition:transform .15s var(--ease),box-shadow .15s var(--ease);}
.roi-field input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.15);box-shadow:0 0 0 6px rgba(201,80,44,.18);}
.roi-field input[type=range]:active::-webkit-slider-thumb{cursor:grabbing;transform:scale(1.25);}
.roi-field input[type=range]::-moz-range-thumb{width:18px;height:18px;background:var(--terracotta);cursor:grab;border-radius:0;border:0;transition:transform .15s var(--ease),box-shadow .15s var(--ease);}
.roi-field input[type=range]::-moz-range-thumb:hover{transform:scale(1.15);box-shadow:0 0 0 6px rgba(201,80,44,.18);}
.roi-field input[type=range]:focus-visible{outline:none;}
.roi-field input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 6px rgba(201,80,44,.28);}
.roi-field input[type=range]:focus-visible::-moz-range-thumb{box-shadow:0 0 0 6px rgba(201,80,44,.28);}
.roi__assume{margin-top:34px;padding-top:24px;border-top:1px solid var(--ink-line);}
.roi__assume summary{font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:0.1em;color:var(--ink-40);cursor:pointer;list-style:none;display:flex;align-items:center;gap:8px;}
.roi__assume summary::-webkit-details-marker{display:none;}
.roi__assume summary::before{content:'+';color:var(--terracotta);font-size:14px;}
.roi__assume[open] summary::before{content:'–';}
.roi__assume .roi-field{margin-top:22px;margin-bottom:18px;}
.roi__assume p{font-size:12px;color:var(--ink-40);line-height:1.55;margin-top:14px;}
.roi__out{background:var(--ink-deep);padding:38px 34px;display:flex;flex-direction:column;}
.roi__results{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--ink-line);border:1px solid var(--ink-line);margin-bottom:auto;}
.roi-res{background:var(--ink-deep);padding:24px 22px;}
.roi-res__label{font-family:var(--font-mono);font-size:10px;text-transform:uppercase;letter-spacing:0.1em;color:var(--ink-40);margin-bottom:12px;line-height:1.4;}
.roi-res__val{font-family:var(--font-display);font-size:clamp(30px,4vw,46px);font-weight:300;font-variation-settings:'opsz'144,'SOFT'40;letter-spacing:-0.03em;line-height:1;color:var(--paper);font-variant-numeric:tabular-nums;}
.roi-res__val small{font-size:16px;color:var(--ink-40);font-family:var(--font-mono);letter-spacing:0;}
.roi-res--hero{grid-column:span 2;background:var(--terracotta);}
.roi-res--hero .roi-res__label{color:rgba(244,239,230,.75);}
.roi-res--hero .roi-res__val{color:var(--paper);font-size:clamp(40px,6vw,68px);}
.roi-res--hero .roi-res__val small{color:rgba(244,239,230,.7);}
.roi__note{font-family:var(--font-mono);font-size:11px;color:var(--ink-40);margin-top:24px;line-height:1.6;}
.roi__note b{color:var(--ink-20);}
.roi__cta{margin-top:24px;}
.roi__cta .btn--accent{background:var(--terracotta);}
.roi__cta .btn--accent::before{background:var(--paper);}
.roi__cta .btn--accent:hover,.roi__cta .btn--accent:focus-visible{color:var(--ink);}

/* ---------- 11 · METHODE ---------- */
.method{background:var(--ink);color:var(--paper);max-width:100%;padding:0;margin:0;}
.method__inner{max-width:var(--max-width);margin:0 auto;padding:84px 40px;position:relative;}
@media(max-width:700px){.method__inner{padding:60px 22px;}}
.method .section-title{color:var(--paper);}
.method .section-intro{color:var(--ink-20);}
.method .section-label{color:var(--ink-40);}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--ink-line);border:1px solid var(--ink-line);margin-top:20px;}
@media(max-width:800px){.steps{grid-template-columns:1fr;}}
.step{background:var(--ink);padding:34px 30px;display:flex;flex-direction:column;gap:16px;transition:background .3s;}
.step:hover{background:var(--ink-card);}
.step__num{font-family:var(--font-display);font-size:64px;font-weight:300;font-variation-settings:'opsz'144,'SOFT'40;line-height:1;color:var(--terracotta);letter-spacing:-0.04em;}
.step__title{font-family:var(--font-display);font-size:25px;font-weight:500;letter-spacing:-0.01em;margin:0 0 8px;}
.step__text{font-size:14px;color:var(--ink-20);line-height:1.6;}
.step__tag{font-family:var(--font-mono);font-size:10px;text-transform:uppercase;letter-spacing:0.12em;color:var(--ink-40);}

/* ---------- 12 · RENVOI · TARIFS · FAQ ---------- */
/* bandeau renvoi (sites <-> automatisation) */
.handoff{border:1px solid var(--ink-10);background:var(--paper-alt);padding:44px 40px;display:grid;grid-template-columns:1fr auto;gap:32px;align-items:center;}
@media(max-width:700px){.handoff{grid-template-columns:1fr;gap:22px;padding:34px 24px;}}
.handoff__kicker{font-family:var(--font-mono);font-size:10px;text-transform:uppercase;letter-spacing:0.14em;color:var(--ink-40);margin-bottom:12px;}
.handoff__text{font-family:var(--font-display);font-size:clamp(22px,3vw,30px);font-weight:400;letter-spacing:-0.02em;line-height:1.15;max-width:560px;}
.handoff__text em{font-style:italic;color:var(--terracotta);}

/* tarifs */
.track-label{font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:0.14em;color:var(--terracotta);margin:64px 0 24px;display:flex;align-items:center;gap:12px;}
.track-label::before{content:'';width:32px;height:1px;background:var(--terracotta);}
.track-label:first-of-type{margin-top:0;}
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--ink-10);border:1px solid var(--ink-10);}
@media(max-width:820px){.plans{grid-template-columns:1fr;}}
.plan{background:var(--paper);padding:40px 32px;display:flex;flex-direction:column;gap:8px;position:relative;transition:transform .35s var(--ease),box-shadow .35s var(--ease);}
.plan:hover{transform:translateY(-4px);box-shadow:0 30px 50px -36px rgba(24,20,15,.45);z-index:2;}
.plan--feature{background:var(--ink);color:var(--paper);}
.plan__badge{position:absolute;top:20px;right:24px;font-family:var(--font-mono);font-size:9px;text-transform:uppercase;letter-spacing:0.12em;background:var(--terracotta);color:var(--paper);padding:4px 9px;}
.plan__name{font-family:var(--font-display);font-size:24px;font-weight:500;letter-spacing:-0.01em;}
.plan__tagline{font-family:var(--font-mono);font-size:10px;text-transform:uppercase;letter-spacing:0.1em;color:var(--ink-40);margin-bottom:18px;}
.plan--feature .plan__tagline{color:var(--ink-20);}
.plan__price{font-family:var(--font-display);font-size:46px;font-weight:300;font-variation-settings:'opsz'144,'SOFT'40;letter-spacing:-0.03em;line-height:1;margin-bottom:4px;}
.plan__price small{font-size:15px;color:var(--ink-40);font-family:var(--font-mono);letter-spacing:0;}
.plan__setup{font-family:var(--font-mono);font-size:11px;color:var(--ink-40);text-transform:uppercase;letter-spacing:0.06em;margin-bottom:22px;}
.plan--feature .plan__setup{color:var(--ink-20);}
.plan ul{list-style:none;display:flex;flex-direction:column;gap:11px;margin-bottom:30px;flex:1;}
.plan li{font-size:14px;color:var(--ink-60);line-height:1.45;display:flex;gap:10px;align-items:flex-start;}
.plan--feature li{color:var(--ink-20);}
.plan li::before{content:'·';color:var(--terracotta);font-weight:700;}
.plan .btn{width:100%;justify-content:center;}
.plan--feature .btn--ghost{border-color:var(--paper);color:var(--paper);}
.plan--feature .btn--ghost::before{background:var(--paper);}
.plan--feature .btn--ghost:hover,.plan--feature .btn--ghost:focus-visible{color:var(--ink);}
.price-foot{font-family:var(--font-mono);font-size:12px;color:var(--ink-40);margin-top:24px;text-align:center;}
.mrr-note{font-family:var(--font-mono);font-size:12px;color:var(--ink-60);margin-top:22px;text-align:center;letter-spacing:0.06em;text-transform:uppercase;}
.mrr-note b{color:var(--terracotta);}
/* parrainage */
.referral{display:flex;align-items:center;gap:14px;border:1px solid var(--ink-10);background:var(--paper-alt);padding:15px 20px;margin-top:16px;font-size:14px;color:var(--ink-80);}
.referral .i{color:var(--terracotta);font-size:14px;line-height:1;}
.referral b{font-family:var(--font-display);font-weight:600;}

/* FAQ (objections frequentes) */
.faq{display:flex;flex-direction:column;border-top:1px solid var(--ink-10);max-width:860px;}
.faq__item{border-bottom:1px solid var(--ink-10);}
.faq__item summary{
  list-style:none;cursor:pointer;display:flex;align-items:baseline;gap:18px;padding:24px 4px;
  transition:background .25s var(--ease);
}
.faq__item summary::-webkit-details-marker{display:none;}
.faq__item summary:hover{background:var(--paper-alt);}
.faq__num{font-family:var(--font-mono);font-size:11px;color:var(--terracotta);letter-spacing:0.1em;min-width:26px;}
.faq__q{font-family:var(--font-display);font-size:clamp(18px,2.4vw,23px);font-weight:500;letter-spacing:-0.01em;line-height:1.2;flex:1;}
.faq__icon{font-family:var(--font-display);font-size:24px;font-weight:300;color:var(--terracotta);line-height:1;transition:transform .3s var(--ease);}
.faq__item[open] .faq__icon{transform:rotate(45deg);}
.faq__a{padding:0 4px 26px 48px;font-size:15px;line-height:1.6;color:var(--ink-60);max-width:680px;}
.faq__item[open] .faq__a{animation:fadeUp .45s var(--ease) both;}
.faq__a b{color:var(--ink);}
@media(max-width:600px){.faq__a{padding-left:4px;}}

/* ---------- 13 · CONTACT & FORMULAIRE ---------- */
.contact{background:var(--paper-alt);max-width:100%;margin:0;padding:0;border-top:1px solid var(--ink-10);}
.contact__inner{max-width:var(--max-width);margin:0 auto;padding:84px 40px;display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start;position:relative;}
@media(max-width:880px){.contact__inner{grid-template-columns:1fr;gap:44px;padding:60px 22px;}}
.contact__left .section-title{margin-bottom:20px;}
.contact__pts{display:flex;flex-direction:column;gap:18px;margin-top:36px;}
.contact__pt{display:flex;gap:14px;align-items:flex-start;font-size:15px;color:var(--ink-80);}
.contact__pt span.i{color:var(--terracotta);font-size:18px;line-height:1.2;}
.contact__pt b{font-family:var(--font-display);font-weight:500;}
.form{display:flex;flex-direction:column;gap:22px;}
.field{display:flex;flex-direction:column;gap:6px;}
.field label{font-family:var(--font-mono);font-size:10px;text-transform:uppercase;letter-spacing:0.12em;color:var(--ink-60);}
.field input,.field select,.field textarea{background:transparent;border:none;border-bottom:1px solid var(--ink-20);padding:11px 0;font-family:var(--font-body);font-size:16px;color:var(--ink);outline:none;transition:border-color .2s;width:100%;border-radius:0;}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--terracotta);}
/* champ invalide apres interaction (validation HTML5 native) */
.field input:user-invalid,.field select:user-invalid,.field textarea:user-invalid{border-color:var(--danger);}
.field textarea{resize:vertical;min-height:90px;}
/* champ piege anti-spam : invisible pour les humains, rempli par les robots */
.form .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
.form .btn{margin-top:6px;}
.form__ok{font-family:var(--font-mono);font-size:12px;color:var(--forest);display:none;}
.form__err{font-family:var(--font-mono);font-size:12px;color:var(--danger);display:none;}
.form__ok.show,.form__err.show{display:block;animation:fadeUp .4s var(--ease);}
/* emplacement reservation d'audit (Calendly / Cal.com), activable plus tard */
.booking-slot{border:1px dashed var(--ink-20);padding:18px 20px;margin-top:18px;font-family:var(--font-mono);font-size:11px;color:var(--ink-40);line-height:1.6;}
.booking-slot b{color:var(--ink-60);}

/* cadre de decision (est-ce pour vous ?) */
.decide{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:var(--ink-10);border:1px solid var(--ink-10);margin-top:6px;}
@media(max-width:680px){.decide{grid-template-columns:1fr;}}
.decide__col{background:var(--paper);padding:24px 26px;}
.decide__col--no{background:var(--paper-alt);}
.decide__tag{font-family:var(--font-mono);font-size:10px;text-transform:uppercase;letter-spacing:0.12em;margin-bottom:10px;display:flex;align-items:center;gap:8px;}
.decide__tag::before{content:'';width:8px;height:8px;background:currentColor;}
.decide__col--yes .decide__tag{color:var(--forest);}
.decide__col--no .decide__tag{color:var(--ink-40);}
.decide__col p{font-size:15px;line-height:1.5;color:var(--ink-80);}
.decide__col--no p{color:var(--ink-60);}

/* temoignages (gabarit, vide tant qu'aucun client reel) */
.testimonials{display:grid;grid-template-columns:repeat(2,1fr);gap:2px;background:var(--ink-10);border:1px solid var(--ink-10);margin-top:30px;}
@media(max-width:680px){.testimonials{grid-template-columns:1fr;}}
.testi{background:var(--paper);padding:28px 26px;}
.testi__quote{font-family:var(--font-display);font-size:19px;font-style:italic;line-height:1.35;color:var(--ink);}
.testi__by{font-family:var(--font-mono);font-size:10px;text-transform:uppercase;letter-spacing:0.12em;color:var(--ink-40);margin-top:12px;}

/* ressources */
.resources{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--ink-10);border:1px solid var(--ink-10);margin-top:6px;}
@media(max-width:680px){.resources{grid-template-columns:1fr;}}
.res{background:var(--paper);padding:22px 22px;}
.res__k{font-family:var(--font-mono);font-size:10px;letter-spacing:0.12em;color:var(--terracotta);margin-bottom:8px;}
.res__t{font-family:var(--font-display);font-size:17px;font-weight:500;letter-spacing:-0.01em;margin-bottom:6px;line-height:1.15;}
.res__d{font-size:13px;color:var(--ink-60);line-height:1.5;}
.section--tight{padding-top:54px;}
@media(max-width:700px){.section--tight{padding-top:42px;}}

/* ---------- 14 · SITES · maquettes vivantes + lightbox ---------- */
.web-head{display:grid;grid-template-columns:1.3fr 1fr;gap:40px;align-items:end;margin-bottom:60px;}
@media(max-width:800px){.web-head{grid-template-columns:1fr;gap:20px;}}
.web-head__note{font-family:var(--font-mono);font-size:12px;line-height:1.7;color:var(--ink-60);border:1px solid var(--ink-10);padding:20px 22px;background:var(--paper-alt);}
.web-head__note b{color:var(--ink);}
.sites-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:30px;}
@media(max-width:820px){.sites-grid{grid-template-columns:1fr;}}
.site-card{border:1px solid var(--ink-10);background:var(--paper);overflow:hidden;display:flex;flex-direction:column;transition:transform .5s var(--ease),box-shadow .5s var(--ease);}
.site-card:hover{transform:translateY(-6px);box-shadow:0 50px 90px -55px rgba(24,20,15,.6);}

.mock{position:relative;overflow:hidden;cursor:pointer;outline:none;}
.mock:focus-visible{box-shadow:inset 0 0 0 2px var(--terracotta);}
.mock__chrome{display:flex;align-items:center;gap:8px;padding:9px 12px;background:var(--ink-10);position:relative;z-index:4;}
.mock__chrome .dots{display:flex;gap:5px;}
.mock__chrome .dots i{width:8px;height:8px;border-radius:50%;background:var(--ink-20);display:block;}
.mock__chrome .url{flex:1;height:18px;background:var(--paper);font-family:var(--font-mono);font-size:9px;color:var(--ink-40);display:flex;align-items:center;padding:0 9px;letter-spacing:0.04em;}
.mock__view{position:relative;height:360px;overflow:hidden;background:var(--m-bg,#15120D);}
/* defilement automatique : la course (--shift) est mesuree par mocks.js */
.mock__scroll{position:absolute;left:0;right:0;top:0;transform:translateY(0);animation:ascroll 20s ease-in-out infinite alternate;will-change:transform;}
@keyframes ascroll{0%,9%{transform:translateY(0);}91%,100%{transform:translateY(calc(var(--shift,0px) * -1));}}
.site-card:hover .mock__scroll{animation-duration:9s;}
.mock__hint{position:absolute;left:0;right:0;bottom:0;z-index:5;padding:9px 13px;font-family:var(--font-mono);font-size:9px;text-transform:uppercase;letter-spacing:0.14em;color:#fff;background:linear-gradient(to top,rgba(0,0,0,.62),transparent);display:flex;justify-content:space-between;align-items:center;opacity:0;transition:opacity .3s;pointer-events:none;}
.site-card:hover .mock__hint{opacity:1;}

/* — briques de page (pilotees par les variables du theme) — */
.mp{font-family:var(--mb,var(--font-body));color:var(--m-ink);background:var(--m-bg);}
.mp *{box-sizing:border-box;}
.mp-nav{display:flex;justify-content:space-between;align-items:center;padding:15px 20px;border-bottom:1px solid var(--m-line);}
.mp-nav .b{font-family:var(--mf);font-size:19px;font-weight:600;letter-spacing:0.01em;}
.mp-nav .lk{display:flex;gap:13px;font-family:var(--font-mono);font-size:8.5px;text-transform:uppercase;letter-spacing:0.12em;color:var(--m-soft);align-items:center;}
.mp-nav .lk .pill{padding:5px 9px;background:var(--m-acc);color:var(--m-acc-ink);}
.mp-hero{position:relative;padding:36px 22px 40px;overflow:hidden;}
.mp-hero__art{position:absolute;inset:0;background:var(--m-ph);}
.mp-hero__art svg{position:absolute;right:-14px;bottom:-18px;width:170px;height:170px;opacity:.18;color:var(--m-acc);z-index:0;}
.mp-hero__in{position:relative;z-index:3;}
.mp-kick{font-family:var(--font-mono);font-size:8.5px;text-transform:uppercase;letter-spacing:0.22em;color:var(--m-acc);margin-bottom:12px;}
.mp-h{font-family:var(--mf);font-size:34px;font-weight:600;line-height:1.04;letter-spacing:-0.01em;margin-bottom:12px;}
.mp-h em{font-style:italic;}
.mp-sub{font-size:12px;line-height:1.5;color:var(--m-soft);max-width:86%;margin-bottom:18px;}
.mp-cta{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-body);font-size:11px;font-weight:600;padding:10px 18px;background:var(--m-acc);color:var(--m-acc-ink);width:fit-content;}
.mp-sec{padding:26px 22px;}
.mp-st{font-family:var(--mf);font-size:21px;font-weight:600;margin-bottom:16px;display:flex;align-items:baseline;justify-content:space-between;gap:12px;}
.mp-st small{font-family:var(--font-mono);font-size:8px;text-transform:uppercase;letter-spacing:0.16em;color:var(--m-soft);white-space:nowrap;}
.mp-row{display:flex;justify-content:space-between;gap:12px;align-items:baseline;padding:11px 0;border-bottom:1px solid var(--m-line);}
.mp-row:last-child{border-bottom:none;}
.mp-row .n{font-family:var(--mf);font-size:15px;font-weight:600;}
.mp-row .d{font-size:10.5px;color:var(--m-soft);line-height:1.4;margin-top:2px;}
.mp-row .p{font-family:var(--font-mono);font-size:12px;color:var(--m-acc);white-space:nowrap;}
.mp-grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:0 22px 26px;}
.mp-grid4{display:grid;grid-template-columns:1fr 1fr;gap:14px 10px;padding:0 22px 26px;}
.mp-ph{position:relative;aspect-ratio:4/3;background:var(--m-ph);overflow:hidden;display:flex;align-items:flex-end;}
.mp-ph svg{position:absolute;inset:0;margin:auto;width:44%;height:44%;opacity:.32;color:var(--m-acc);z-index:0;}
.mp-ph .cap{position:relative;z-index:3;font-family:var(--font-mono);font-size:8px;text-transform:uppercase;letter-spacing:0.1em;padding:8px 10px;color:#fff;background:linear-gradient(to top,rgba(0,0,0,.55),transparent);width:100%;}
/* vraies images (avec repli degrade + motif si le fichier manque) */
.mp-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;display:block;transition:transform 1.6s var(--ease);}
.site-card:hover .mp-hero__art .mp-img{transform:scale(1.05);}
.site-card:hover .mp-ph .mp-img{transform:scale(1.04);}
/* duotone harmonise a la palette (galerie : photo vive) */
.mp-ph::after{content:'';position:absolute;inset:0;z-index:2;pointer-events:none;background:var(--m-bg);opacity:.20;mix-blend-mode:multiply;}
.mp-ph::before{content:'';position:absolute;inset:0;z-index:2;pointer-events:none;background-image:var(--noise);background-size:180px;opacity:.07;mix-blend-mode:overlay;}
/* hero : assez sombre pour la lisibilite du texte */
.mp-hero__art .mp-img{z-index:1;}
.mp-hero__art::after{content:'';position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(135deg,var(--m-bg) 12%,transparent 62%),var(--m-bg);opacity:.62;}
.mp-hero__art::before{content:'';position:absolute;inset:0;z-index:2;pointer-events:none;background-image:var(--noise);background-size:200px;opacity:.06;mix-blend-mode:overlay;}
.mp-av .ph .mp-img{z-index:1;}
.mp-prod{display:flex;flex-direction:column;gap:5px;}
.mp-prod .mp-ph{aspect-ratio:1;}
.mp-prod .pn{font-family:var(--mf);font-size:13px;font-weight:600;}
.mp-prod .pp{font-family:var(--font-mono);font-size:11px;color:var(--m-acc);}
.mp-band{position:relative;padding:28px 22px;background:var(--m-acc);color:var(--m-acc-ink);}
.mp-band .t{font-family:var(--mf);font-size:23px;font-weight:600;line-height:1.1;}
.mp-band .s{font-size:11px;opacity:.82;margin-top:6px;line-height:1.45;}
.mp-quote{padding:30px 24px;background:var(--m-card);}
.mp-quote p{font-family:var(--mf);font-style:italic;font-size:19px;line-height:1.34;}
.mp-quote .by{font-family:var(--font-mono);font-size:8.5px;text-transform:uppercase;letter-spacing:0.14em;color:var(--m-soft);margin-top:12px;}
.mp-team{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;padding:0 22px 26px;}
.mp-av{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;}
.mp-av .ph{width:56px;height:56px;border-radius:50%;background:var(--m-ph);display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative;}
.mp-av .ph svg{width:54%;height:54%;opacity:.55;color:var(--m-acc);}
.mp-av .nm{font-family:var(--mf);font-size:12px;font-weight:600;}
.mp-av .rl{font-family:var(--font-mono);font-size:7.5px;text-transform:uppercase;letter-spacing:0.1em;color:var(--m-soft);}
.mp-news{padding:26px 22px;background:var(--m-card);}
.mp-news .field{display:flex;gap:6px;margin-top:14px;}
.mp-news .field span{flex:1;height:32px;border:1px solid var(--m-line);display:flex;align-items:center;padding:0 11px;font-size:10px;color:var(--m-soft);}
.mp-news .field b{background:var(--m-acc);color:var(--m-acc-ink);font-size:10px;font-weight:700;display:flex;align-items:center;padding:0 13px;}
.mp-hours{padding:0 22px 26px;}
.mp-hr{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--m-line);font-size:12px;}
.mp-hr:last-child{border-bottom:none;}
.mp-hr span:first-child{color:var(--m-soft);font-family:var(--font-mono);font-size:9px;text-transform:uppercase;letter-spacing:0.08em;}
.mp-feat{padding:6px 22px 24px;display:flex;flex-direction:column;gap:1px;}
.mp-feat .fi{display:flex;gap:12px;align-items:baseline;padding:14px 0;border-top:1px solid var(--m-line);}
.mp-feat .fi .no{font-family:var(--font-mono);font-size:10px;color:var(--m-acc);}
.mp-feat .fi .ft{font-family:var(--mf);font-size:15px;font-weight:600;}
.mp-feat .fi .fd{font-size:11px;color:var(--m-soft);margin-top:2px;line-height:1.45;}
.mp-foot{padding:24px 22px;background:var(--m-foot,var(--m-card));border-top:1px solid var(--m-line);display:flex;flex-direction:column;gap:12px;}
.mp-foot .fb{font-family:var(--mf);font-size:18px;font-weight:600;}
.mp-foot .fr{display:flex;justify-content:space-between;gap:12px;font-family:var(--font-mono);font-size:8.5px;text-transform:uppercase;letter-spacing:0.1em;color:var(--m-soft);}

.site-card__meta{padding:20px 22px;border-top:1px solid var(--ink-10);display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:auto;}
.site-card__meta h4{font-family:var(--font-display);font-size:19px;font-weight:500;letter-spacing:-0.01em;line-height:1.15;}
.site-card__meta p{font-size:13px;color:var(--ink-60);margin-top:3px;}
.site-card__demo{font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:0.1em;color:var(--terracotta);white-space:nowrap;text-decoration:none;}
.site-card__demo .arrow{display:inline-block;transition:transform .2s;}
.site-card__demo:hover .arrow{transform:translateX(4px);}

/* — themes : palette + police par secteur — */
.t-resto{--m-bg:#15120D;--m-ink:#ECDDBC;--m-soft:#9b8d6c;--m-acc:#C9A24B;--m-acc-ink:#15120D;--m-card:#1d190f;--m-line:#2c2417;--m-ph:linear-gradient(135deg,#3a2c12,#15120D 75%);--mf:'Cormorant Garamond',Georgia,serif;}
.t-barber{--m-bg:#17130F;--m-ink:#ECE3D5;--m-soft:#938a7a;--m-acc:#C56A3A;--m-acc-ink:#fff;--m-card:#1f1a14;--m-line:#2c251d;--m-ph:linear-gradient(135deg,#2e2218,#17130F 75%);--mf:'Oswald',sans-serif;}
.t-archi{--m-bg:#F4F2EC;--m-ink:#23211C;--m-soft:#8a8578;--m-acc:#A9744F;--m-acc-ink:#fff;--m-card:#E9E5DC;--m-line:#dcd7cc;--m-ph:linear-gradient(135deg,#d9d3c5,#c2b9a7);--mf:'Cormorant Garamond',Georgia,serif;}
.t-shop{--m-bg:#0F0D0B;--m-ink:#EBD9B4;--m-soft:#998a6b;--m-acc:#D9BE7E;--m-acc-ink:#0F0D0B;--m-card:#18140F;--m-line:#241d14;--m-ph:linear-gradient(135deg,#2c2215,#0F0D0B 75%);--mf:'Cormorant Garamond',Georgia,serif;}
.t-med{--m-bg:#EDF4F3;--m-ink:#163A38;--m-soft:#6d8a87;--m-acc:#2C7A72;--m-acc-ink:#fff;--m-card:#DCEAE8;--m-line:#cfe0dd;--m-ph:linear-gradient(135deg,#cfe6e3,#a6cdc8);--mf:'Nunito',sans-serif;--mb:'Nunito',sans-serif;}
.t-auto{--m-bg:#18140F;--m-ink:#F4EFE6;--m-soft:#908879;--m-acc:#C9502C;--m-acc-ink:#F4EFE6;--m-card:#211d17;--m-line:#2c261f;--m-ph:linear-gradient(135deg,#2a241c,#18140F 75%);--mf:'Fraunces',Georgia,serif;}

/* — lightbox : <dialog> natif (focus piege, Echap natif) — */
.lightbox{
  position:fixed;inset:0;z-index:200;width:100%;height:100%;max-width:none;max-height:none;
  background:transparent;border:none;padding:5vh 5vw;margin:0;
  display:flex;align-items:center;justify-content:center;flex-direction:column;gap:0;
  opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s;
}
.lightbox::backdrop{background:rgba(24,20,15,.88);-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);}
.lightbox[open]{opacity:1;visibility:visible;}
.lightbox__stage{width:min(1000px,94vw);transform:translateY(14px) scale(.985);transition:transform .4s var(--ease);box-shadow:0 60px 120px -40px rgba(0,0,0,.7);}
.lightbox[open] .lightbox__stage{transform:none;}
.lightbox__stage .mock{cursor:default;}
.lightbox__stage .mock__view{height:76vh;overflow-y:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin;}
.lightbox__stage .mock__scroll{position:relative;animation:none!important;transform:none!important;}
.lightbox__stage .mock__hint{display:none;}
.lightbox__close{position:absolute;top:20px;right:24px;width:46px;height:46px;background:transparent;border:1px solid var(--ink-40);color:var(--paper);font-family:var(--font-body);font-size:22px;line-height:1;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center;z-index:2;}
.lightbox__close:hover{background:var(--terracotta);border-color:var(--terracotta);}
.lightbox__cap{position:absolute;bottom:18px;left:0;right:0;text-align:center;font-family:var(--font-mono);font-size:10px;text-transform:uppercase;letter-spacing:0.14em;color:var(--ink-40);}
@media(max-width:520px){
  .mock__view{height:320px;}
  .mp-h{font-size:28px;}
}

/* ---------- 15 · FOOTER ---------- */
footer{background:var(--ink);color:var(--paper);position:relative;z-index:2;padding:70px 40px 40px;}
.footer__inner{max-width:var(--max-width);margin:0 auto;}
.footer__top{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;flex-wrap:wrap;padding-bottom:48px;border-bottom:1px solid var(--ink-line);}
.footer__mark{font-family:var(--font-display);font-size:80px;font-weight:400;font-variation-settings:'opsz'144,'SOFT'20;letter-spacing:-0.04em;line-height:0.8;}
.footer__mark .dot{color:var(--terracotta);}
.footer__essence{font-family:var(--font-display);font-size:22px;font-weight:300;font-variation-settings:'opsz'144,'SOFT'40;max-width:360px;line-height:1.3;color:var(--ink-20);}
.footer__essence em{font-style:italic;color:var(--terracotta);}
.footer__cols{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;padding:42px 0;}
@media(max-width:700px){.footer__cols{grid-template-columns:1fr 1fr;}}
.footer__col h5{font-family:var(--font-mono);font-size:10px;text-transform:uppercase;letter-spacing:0.14em;color:var(--ink-40);margin-bottom:14px;}
.footer__col a,.footer__col p{display:block;font-size:14px;color:var(--ink-20);text-decoration:none;margin-bottom:8px;line-height:1.5;}
.footer__col a:hover{color:var(--terracotta);}
.footer__bottom{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding-top:30px;font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:0.1em;color:var(--ink-40);}

/* ---------- 16 · REDUCED MOTION (bloc maitre : tout se desactive proprement) ---------- */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation:none!important;transition:none!important;}
  .reveal{opacity:1;transform:none;}
  .hero__line span{transform:none;}
  .hero::after{display:none;}
  .hero__essence,.hero__cta,.hero__note,.console{opacity:1;}
  .marquee__track{animation:none!important;}
  .jline{opacity:1;transform:none;}
  .secnum{animation:none!important;transform:none;}
  .wf .wprog{stroke-dashoffset:0;} .wf .wdot,.wf .wcheck,.wf .wlive{opacity:1;}
  .invoice__line,.mail__row,.bubble,.slot{opacity:1;transform:none;}
  .bar{transform:scaleY(1);} .chart .line{stroke-dashoffset:0;} .chart .area{opacity:.08;} .chart .pt{opacity:1;}
  .mock__scroll{animation:none!important;transform:none!important;}
  .mp-img{transform:none!important;}
  .lightbox,.mobile-menu{visibility:visible;}
  .mobile-menu{transform:translateY(-100%);visibility:hidden;}
  .mobile-menu.open{transform:translateY(0);visibility:visible;}
  .mobile-menu a{opacity:1;transform:none;}
  .lightbox{opacity:0;visibility:hidden;}
  .lightbox[open]{opacity:1;visibility:visible;}
}

/* ---------- 17 · FX PREMIUM (intro, curseur, progression, titres, endcap, parallaxe) ---------- */

/* — Intro de marque : rideau ink + "sia." une fois par session (CSS pur, autonome) —
   html.has-intro / html.skip-intro est pose par un mini script inline dans <head>. */
.loader{
  position:fixed;inset:0;z-index:400;background:var(--ink);
  display:flex;align-items:center;justify-content:center;
  animation:loaderHide .55s var(--ease) forwards 1.05s;pointer-events:none;
}
.loader::after{content:'';position:absolute;inset:0;background-image:var(--noise);opacity:.05;mix-blend-mode:overlay;}
.loader span{
  font-family:var(--font-display);font-weight:300;font-variation-settings:'opsz'144,'SOFT'40;
  font-size:clamp(56px,9vw,110px);letter-spacing:-0.04em;color:var(--paper);line-height:1;
  opacity:0;animation:loaderMark .6s var(--ease) forwards .08s;
}
.loader i{font-style:normal;color:var(--terracotta);}
@keyframes loaderMark{from{opacity:0;transform:translateY(26px);}to{opacity:1;transform:none;}}
@keyframes loaderHide{to{transform:translateY(-101%);visibility:hidden;}}
html.skip-intro .loader{display:none;}
/* quand l'intro joue, l'entree du hero attend que le rideau se leve */
html.has-intro .hero__line span{animation-delay:1.05s;}
html.has-intro .hero__line:nth-child(2) span{animation-delay:1.17s;}
html.has-intro .hero__line:nth-child(3) span{animation-delay:1.29s;}
html.has-intro .hero__essence{animation-delay:1.45s;}
html.has-intro .hero__cta{animation-delay:1.6s;}
html.has-intro .hero__note{animation-delay:1.75s;}
html.has-intro .console{animation-delay:1.5s;}

/* — Barre de progression de lecture (transform pose par fx.js) — */
.progress{
  position:fixed;top:0;left:0;right:0;height:2px;z-index:160;pointer-events:none;
  background:var(--terracotta);transform:scaleX(0);transform-origin:left;
}

/* — Curseur compagnon (desktop, pointeur fin uniquement ; le curseur natif reste) — */
.cursor{position:fixed;left:0;top:0;z-index:350;pointer-events:none;opacity:0;transition:opacity .35s ease;}
.cursor.on{opacity:1;}
.cursor::after{
  content:'';position:absolute;left:0;top:0;width:32px;height:32px;border-radius:50%;
  border:1px solid var(--terracotta);background:rgba(201,80,44,0);
  transform:translate(-50%,-50%) scale(1);
  transition:transform .35s var(--ease),background .35s var(--ease);
}
.cursor.big::after{transform:translate(-50%,-50%) scale(1.8);background:rgba(201,80,44,.07);}
.cursor span{
  position:absolute;left:0;top:0;transform:translate(-50%,-50%);
  font-family:var(--font-mono);font-size:13px;color:var(--terracotta);
  opacity:0;transition:opacity .25s ease;
}
.cursor.plus span{opacity:1;}
.cursor.plus::after{transform:translate(-50%,-50%) scale(2.1);background:rgba(201,80,44,.09);}

/* — Titres reveles mot a mot (split par fx.js, masque par mot, cascade) — */
.split{opacity:1!important;transform:none!important;}
.split .w{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.12em;margin-bottom:-.12em;}
.split .w>span{
  display:inline-block;transform:translateY(118%);
  transition:transform .85s var(--ease-out);
  transition-delay:calc(var(--wi,0)*60ms);
}
.split.in .w>span{transform:none;}

/* — Trait du label de section qui se trace — */
.section-label.reveal::before{transform:scaleX(0);transform-origin:left;transition:transform .8s var(--ease) .15s;}
.section-label.reveal.in::before{transform:scaleX(1);}

/* — Console hero : le tilt 3D (fx.js) a besoin d'une transition douce — */
.hero .console{transition:transform .25s ease-out;}

/* — Parallaxe de profondeur : les visuels derivent face a la copie (scroll-driven, natif) — */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .auto-visual{animation:visDrift linear both;animation-timeline:view();animation-range:entry 0% exit 100%;}
    @keyframes visDrift{from{transform:translateY(44px);}to{transform:translateY(-44px);}}
  }
}

/* — Reflet qui balaie les maquettes au survol — */
.mock::before{
  content:'';position:absolute;inset:0;z-index:6;pointer-events:none;
  background:linear-gradient(105deg,transparent 42%,rgba(244,239,230,.13) 50%,transparent 58%);
  transform:translateX(-130%);transition:transform .9s var(--ease);
}
.site-card:hover .mock::before{transform:translateX(130%);}

/* — Plan recommande : liseret terracotta sur la tranche — */
.plan--feature::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--terracotta);}

/* — Endcap : la promesse en tres grand, qui defile, + CTA (avant le footer) — */
.endcap{background:var(--ink);color:var(--paper);border-bottom:1px solid var(--ink-line);position:relative;z-index:2;padding:74px 0 64px;overflow:hidden;}
.endcap::after{content:'';position:absolute;inset:0;pointer-events:none;background-image:var(--noise);opacity:.05;mix-blend-mode:overlay;}
.endcap__marquee{overflow:hidden;}
.endcap__track{
  display:flex;gap:64px;white-space:nowrap;width:max-content;
  animation:scrollX 46s linear infinite;
  font-family:var(--font-display);font-weight:250;font-variation-settings:'opsz'144,'SOFT'60;
  font-size:clamp(44px,7vw,96px);letter-spacing:-0.03em;line-height:1.1;
}
.endcap__marquee:hover .endcap__track{animation-play-state:paused;}
.endcap__track span{display:inline-flex;align-items:center;gap:64px;}
.endcap__track em{font-style:italic;font-variation-settings:'opsz'144,'SOFT'100,'WONK'1;color:var(--terracotta);}
.endcap__track .star{color:var(--terracotta);font-size:.4em;font-style:normal;}
.endcap__cta{display:flex;flex-direction:column;align-items:center;gap:14px;margin-top:46px;padding:0 22px;position:relative;z-index:2;}
.endcap__hint{font-family:var(--font-mono);font-size:10px;text-transform:uppercase;letter-spacing:0.14em;color:var(--ink-40);}

/* — Reduced motion : la couche FX se desactive proprement — */
@media(prefers-reduced-motion:reduce){
  .loader{display:none!important;}
  .cursor{display:none!important;}
  .progress{display:none!important;}
  .topnav.hide{transform:none;}
  .split .w{overflow:visible;}
  .split .w>span{transform:none;}
  .section-label.reveal::before{transform:scaleX(1);}
  .endcap__track{animation:none!important;}
  .mock::before{display:none;}
}