/* =========================================================
   PROMO+ — Design System
   Orange de marque #ED9737 · anthracite produit #2E3338
   Plus Jakarta Sans + JetBrains Mono
   ---------------------------------------------------------
   1. Tokens          11. Timeline
   2. Reset           12. Bento
   3. Typographie     13. Scrollytelling
   4. Boutons         14. Onglets suites
   5. Navigation      15. ROI
   6. Footer          16. Témoignages
   7. Hero            17. Déploiement
   8. Mock produit    18. CTA
   9. Marquee         19. Formulaire
  10. Constat         20. Responsive
   ========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');

/* =========================================================
   1. TOKENS
   ========================================================= */
:root{
  /* Marque
     --orange      : aplats, fonds sombres, états validés. 7,78:1 sur --ink-900.
     --orange-mid  : survols, dégradés, décor. NE JAMAIS porter de texte sur fond clair
                     (3,04:1 seulement — échoue AA).
     --orange-deep : texte orange sur fond clair. 5,02:1 sur blanc, 4,72:1 sur --paper.
                     C'est le seul orange autorisé pour du texte sur fond clair. */
  --orange:#ED9737;
  --orange-mid:#DE7A12;
  --orange-deep:#B45309;
  --orange-glow:#FFB35C;

  /* Encres — canvas sombre */
  --ink-900:#14171A;
  --ink-800:#1C2023;
  --ink-700:#2E3338;
  --ink-600:#3D444B;

  /* Neutres clairs */
  --white:#FFFFFF;
  --paper:#F7F8F9;
  --paper-2:#ECEFF2;
  --slate-600:#5A646E;
  --slate-800:#2B3239;

  /* Donnée — réservé aux interfaces produit reconstruites */
  --blue:#3E7BD8;
  --green:#2FA36B;
  --amber:#E8A317;
  --red:#D9534F;

  /* Rôles */
  --bg:var(--white);
  --ink:var(--slate-800);
  --line:rgba(43,50,57,.12);
  --line-dark:rgba(255,255,255,.10);

  /* Typo */
  --f-sans:'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --f-mono:'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;

  /* Échelle fluide */
  --t-eyebrow:.72rem;
  --t-h1:clamp(2.35rem,1.5rem + 3.2vw,3.7rem);
  --t-h2:clamp(2rem,1.4rem + 2.4vw,3.4rem);
  --t-h3:clamp(1.15rem,1rem + .6vw,1.5rem);
  --t-body:clamp(1rem,.96rem + .25vw,1.125rem);
  --t-lead:clamp(1.1rem,1rem + .7vw,1.45rem);

  /* Rythme */
  --maxw:1320px;
  --pad-x:clamp(1.4rem,5vw,5.5rem);
  --sec-y:clamp(4.5rem,9vw,8.5rem);
  --radius:14px;
  --radius-lg:22px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* =========================================================
   2. RESET
   ========================================================= */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--f-sans);
  font-weight:400;
  color:var(--ink);
  background:var(--bg);
  line-height:1.65;
  font-size:var(--t-body);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0}
ul,ol{list-style:none}
::selection{background:var(--orange);color:var(--ink-900)}

/* Toute règle display: sur une classe l'emporte sur l'attribut hidden.
   Cette règle globale évite d'avoir à neutraliser le cas par cas
   (boutons, menus, panneaux d'onglets…). */
[hidden]{display:none !important}

/* Bannière de secours : présente dans le HTML, masquée dès que cette
   feuille de style est chargée. Si le visiteur ouvre une page depuis une
   archive ZIP non décompressée, le CSS n'est pas atteignable et le message
   d'explication apparaît au lieu d'une page apparemment cassée. */
.zipwarn{display:none}

:focus-visible{outline:2px solid var(--orange);outline-offset:3px;border-radius:4px}

/* Lien d'évitement */
.skip{
  position:absolute;left:.6rem;top:-3rem;z-index:200;
  background:var(--orange);color:var(--ink-900);
  padding:.65rem 1.1rem;border-radius:8px;font-weight:600;font-size:.9rem;
  transition:top .25s var(--ease);
}
.skip:focus{top:.6rem}

.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad-x);width:100%}
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* =========================================================
   3. TYPOGRAPHIE
   ========================================================= */
h1,h2,h3,h4{font-weight:800;letter-spacing:-.025em;line-height:1.06;text-wrap:balance}
h1{font-size:var(--t-h1);letter-spacing:-.03em;line-height:1.02}
h2{font-size:var(--t-h2)}
h3{font-size:var(--t-h3);font-weight:700;letter-spacing:-.015em}
h4{font-size:1.05rem;font-weight:700;letter-spacing:-.01em}
p{text-wrap:pretty}

.eyebrow{
  display:inline-block;
  font-family:var(--f-mono);
  font-size:var(--t-eyebrow);
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:.18em;
  color:var(--orange-deep);
  margin-bottom:1.1rem;
}
.section--dark .eyebrow{color:var(--orange)}

.lead{
  font-size:var(--t-lead);
  color:var(--slate-600);
  max-width:56ch;
  line-height:1.5;
}
.section--dark .lead{color:rgba(255,255,255,.74)}

.section--dark{background:var(--ink-900);color:var(--white)}
.section--dark h2,.section--dark h3{color:var(--white)}

.sec{padding-block:var(--sec-y)}
.sec__head{max-width:64ch;margin-bottom:clamp(2.4rem,4vw,3.6rem)}
.sec__head .lead{margin-top:1.05rem}

/* Chiffres tabulaires */
.num{font-family:var(--f-mono);font-variant-numeric:tabular-nums;font-weight:500}

/* =========================================================
   4. BOUTONS
   ========================================================= */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  font-family:var(--f-sans);font-weight:600;font-size:.92rem;
  padding:.95rem 1.7rem;border-radius:100px;
  border:1px solid transparent;cursor:pointer;
  transition:background .3s var(--ease),color .3s var(--ease),
             border-color .3s var(--ease),transform .3s var(--ease),
             box-shadow .3s var(--ease);
  white-space:nowrap;text-align:center;
}
/* Texte anthracite sur orange : 7,2:1. Le blanc échouerait AA (2,1:1). */
.btn--primary{background:var(--orange);color:var(--ink-900)}
.btn--primary:hover{background:var(--orange-glow);transform:translateY(-2px);
                    box-shadow:0 10px 26px -10px rgba(222,122,18,.55)}
.btn--ghost{border-color:var(--line);color:var(--ink)}
.btn--ghost:hover{background:var(--paper-2);transform:translateY(-2px)}
.btn--ghost-light{border-color:rgba(255,255,255,.28);color:var(--white)}
.btn--ghost-light:hover{background:rgba(255,255,255,.10);transform:translateY(-2px)}
.btn--sm{padding:.7rem 1.3rem;font-size:.85rem}
.btn__ico{width:17px;height:17px;flex:0 0 auto}

/* Lien fléché */
.arrow-link{
  display:inline-flex;align-items:center;gap:.45rem;
  font-weight:600;font-size:.95rem;color:var(--orange-deep);
}
.arrow-link svg{width:16px;height:16px;transition:transform .3s var(--ease)}
.arrow-link:hover svg{transform:translateX(4px)}
.section--dark .arrow-link{color:var(--orange)}

/* =========================================================
   RÉVÉLATIONS AU SCROLL
   L'état masqué n'est posé que si JS tourne (.js-ready).
   Sans JS, tout le contenu reste visible.
   ========================================================= */
.reveal,.reveal-img{transition:opacity .55s var(--ease),transform .55s var(--ease)}
.js-ready .reveal{opacity:0;transform:translateY(20px)}
.js-ready .reveal-img{opacity:0;transform:scale(1.03)}
.js-ready .reveal.is-in,.js-ready .reveal-img.is-in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js-ready .reveal,.js-ready .reveal-img{opacity:1 !important;transform:none !important}
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}

/* =========================================================
   5. NAVIGATION
   ========================================================= */
.nav{
  position:fixed;top:0;left:0;width:100%;z-index:100;
  padding:.4rem 0;
  transition:background .4s var(--ease),backdrop-filter .4s var(--ease),
             box-shadow .4s var(--ease);
}
.nav__inner{
  max-width:1500px;margin-inline:auto;padding-inline:var(--pad-x);
  display:flex;align-items:center;justify-content:space-between;gap:2rem;
  height:72px;
}
.nav__brand{display:flex;align-items:center;flex:0 0 auto}
.nav__logo{height:30px;width:auto;transition:opacity .35s var(--ease)}
.nav__logo--dark{display:none}

.nav__links{display:flex;gap:2rem;align-items:center}
.nav__links a{white-space:nowrap}
.nav__links a{
  position:relative;font-size:.9rem;font-weight:500;color:var(--white);
  padding:.35rem 0;transition:color .35s var(--ease),opacity .3s var(--ease);opacity:.86;
}
.nav__links a::after{
  content:"";position:absolute;left:0;bottom:0;width:0;height:1.5px;
  background:var(--orange);transition:width .35s var(--ease);
}
.nav__links a:hover{opacity:1}
.nav__links a:hover::after{width:100%}
.nav__links a[aria-current="page"]{opacity:1}
.nav__links a[aria-current="page"]::after{width:100%}

.nav__actions{display:flex;align-items:center;gap:1.3rem;flex:0 0 auto}
.nav__phone{
  display:inline-block;padding-block:.15rem;   /* porte la cible à 27px de haut */
  font-family:var(--f-mono);font-size:.86rem;font-weight:500;
  color:var(--white);opacity:.8;transition:color .35s var(--ease),opacity .3s var(--ease);
}
.nav__phone:hover{opacity:1}

/* État scrollé, ou pages à hero clair : verre clair + encre */
.nav.is-stuck{
  background:rgba(255,255,255,.86);
  -webkit-backdrop-filter:blur(14px) saturate(160%);
  backdrop-filter:blur(14px) saturate(160%);
  box-shadow:0 1px 0 var(--line);
}
.nav.is-stuck .nav__links a,
.nav.is-stuck .nav__phone{color:var(--ink)}
.nav.is-stuck .nav__logo--light{display:none}
.nav.is-stuck .nav__logo--dark{display:block}
.nav.is-stuck .nav__burger span{background:var(--ink)}

/* Burger */
/* flex:0 0 44px — sans base fixe, le bouton rétrécit dans le conteneur flex
   et descend sous le minimum de 44 px de cible tactile. */
.nav__burger{
  display:none;flex:0 0 44px;width:44px;height:44px;cursor:pointer;
  flex-direction:column;align-items:center;justify-content:center;gap:5px;
}
.nav__burger span{
  display:block;width:22px;height:2px;background:var(--white);border-radius:2px;
  transition:transform .35s var(--ease),opacity .3s var(--ease),background .35s var(--ease);
}
.nav__burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav__burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav__burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* Menu mobile */
.nav__mobile{
  position:fixed;inset:0;z-index:99;background:var(--ink-900);
  display:flex;flex-direction:column;justify-content:center;
  gap:.4rem;padding:6rem var(--pad-x) 3rem;
}
/* Une règle display: sur la classe l'emporte sur l'attribut hidden :
   il faut la neutraliser explicitement, sinon le menu reste affiché. */
.nav__mobile[hidden]{display:none}
.nav__mobile a{
  font-size:1.5rem;font-weight:700;color:var(--white);
  padding:.7rem 0;border-bottom:1px solid var(--line-dark);
}
/* Le sélecteur ci-dessus est plus spécifique que .btn--primary et rendait
   le texte du bouton blanc sur orange (2,31:1). On rétablit l'encre. */
.nav__mobile .btn--primary{color:var(--ink-900);border-bottom:0;font-size:.92rem;font-weight:600}
.nav__mobile .btn{margin-top:1.6rem;align-self:flex-start}
.nav__mobile-phone{
  font-family:var(--f-mono);font-size:1rem;color:var(--orange);
  margin-top:1.4rem;border:0 !important;
}

/* =========================================================
   6. FOOTER
   ========================================================= */
.foot{background:var(--ink-900);color:rgba(255,255,255,.72);padding-top:clamp(3.5rem,6vw,5rem)}
.foot__grid{
  display:grid;gap:2.6rem;
  grid-template-columns:1.5fr 1fr 1fr 1fr;
  padding-bottom:3rem;
}
.foot__logo{height:30px;width:auto;margin-bottom:1.1rem}
.foot__pitch{font-size:.92rem;line-height:1.6;max-width:30ch}
.foot .foot__h{color:var(--white);font-size:.78rem;font-family:var(--f-mono);font-weight:500;
         text-transform:uppercase;letter-spacing:.16em;margin-bottom:1.1rem}
.foot__list{display:grid;gap:.6rem}
.foot__list a,.foot__list span{font-size:.92rem;transition:color .3s var(--ease)}
.foot__list a:hover{color:var(--orange)}
.foot__badges{display:flex;gap:.8rem;align-items:center;flex-wrap:wrap}
.foot__badges img{height:52px;width:auto;border-radius:8px}
.foot__bottom{
  display:flex;flex-wrap:wrap;gap:1rem 2rem;align-items:center;justify-content:space-between;
  border-top:1px solid var(--line-dark);padding-block:1.4rem;font-size:.84rem;
}
.foot__legal{display:flex;gap:1.4rem;flex-wrap:wrap}
.foot__legal a{display:inline-block;padding-block:.15rem}
.foot__legal a:hover{color:var(--orange)}

/* =========================================================
   7. HERO
   ========================================================= */
.hero{position:relative;overflow:hidden;background:var(--ink-900);color:var(--white)}
.hero__aura{
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(58% 46% at 26% 22%, rgba(255,179,92,.17), transparent 70%),
    radial-gradient(46% 44% at 88% 76%, rgba(62,123,216,.13), transparent 72%);
}
.hero__grain{
  position:absolute;inset:0;pointer-events:none;opacity:.04;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
.hero__inner{
  position:relative;z-index:2;
  display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,1fr);
  gap:clamp(2.2rem,4.5vw,4.5rem);align-items:center;
  padding-top:clamp(7.5rem,14vh,10.5rem);
  padding-bottom:clamp(3rem,6vh,5rem);
  min-height:100vh;
}
.hero__title{color:var(--white);max-width:21ch}
.hero__lead{
  color:rgba(255,255,255,.75);font-size:var(--t-lead);
  max-width:38ch;margin-block:1.5rem 2.2rem;line-height:1.5;
}
.hero__cta{display:flex;flex-wrap:wrap;gap:.85rem}

.hero__proof{
  position:relative;z-index:2;
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:clamp(1.4rem,4vw,3.6rem);
  border-top:1px solid var(--line-dark);
  padding:1.5rem var(--pad-x);
}
.hero__proof li{display:flex;flex-direction:column;align-items:center;gap:.1rem;text-align:center}
.hero__proof strong{
  font-family:var(--f-mono);font-weight:500;font-size:1.4rem;color:var(--orange);
  letter-spacing:-.01em;
}
.hero__proof span{font-size:.8rem;color:rgba(255,255,255,.62)}

/* =========================================================
   8. MOCK PRODUIT — interface Promo+ reconstruite
   Aucune donnée client réelle. Opérations et fournisseurs fictifs.
   ========================================================= */
.hero__stage{position:relative;perspective:1700px}
.mock{
  --mk:11px;
  background:var(--white);color:var(--slate-800);
  border-radius:var(--radius-lg);overflow:hidden;
  box-shadow:0 40px 90px -40px rgba(0,0,0,.75),0 0 0 1px rgba(255,255,255,.07);
  transform:rotateY(-7deg) rotateX(3deg) translateZ(0);
  transform-style:preserve-3d;
  font-size:var(--mk);line-height:1.45;
}
.mock__bar{
  display:flex;align-items:center;gap:.5rem;
  background:var(--paper-2);padding:.5rem .8rem;border-bottom:1px solid var(--line);
}
.mock__dots{display:flex;gap:.3rem}
.mock__dots i{width:8px;height:8px;border-radius:50%;background:#C9CFD5;display:block}
.mock__url{
  flex:1;text-align:center;font-family:var(--f-mono);font-size:9px;
  color:var(--slate-600);background:var(--white);border-radius:100px;
  padding:.22rem .7rem;max-width:210px;margin-inline:auto;
}
.mock__body{display:grid;grid-template-columns:118px 1fr;min-height:392px}

/* Sidebar */
.mock__side{background:var(--ink-700);padding:.75rem .55rem;display:flex;flex-direction:column;gap:.1rem}
.mock__side-logo{height:15px;width:auto;margin:.15rem .3rem .8rem}
.mock__side-lab{
  font-family:var(--f-mono);font-size:7.5px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.55);padding:.55rem .35rem .25rem;
}
.mock__nav{display:flex;align-items:center;gap:.42rem;padding:.32rem .35rem;border-radius:5px;
           color:rgba(255,255,255,.72);font-size:9.5px}
.mock__nav svg{width:11px;height:11px;flex:0 0 auto;opacity:.75}
.mock__nav.is-on{background:rgba(237,151,55,.16);color:var(--orange)}
.mock__nav.is-on svg{opacity:1}

/* Contenu */
.mock__main{padding:.85rem .95rem 1rem;background:var(--paper);display:flex;flex-direction:column;gap:.7rem}
.mock__top{display:flex;align-items:center;justify-content:space-between;gap:.6rem}
.mock__crumb{display:block;font-family:var(--f-mono);font-size:8.5px;letter-spacing:.14em;
             text-transform:uppercase;color:var(--slate-600);line-height:1.3}
.mock__op{display:block;font-weight:700;font-size:12px;letter-spacing:-.01em;line-height:1.25}
.mock__chip{
  font-family:var(--f-mono);font-size:8px;padding:.18rem .5rem;border-radius:100px;
  background:rgba(237,151,55,.16);color:#8A3F06;letter-spacing:.06em;
}

/* KPI */
.mock__kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:.45rem}
.mock__kpi{background:var(--white);border-radius:8px;padding:.5rem .55rem;
           border:1px solid var(--line);border-left:2.5px solid var(--blue)}
.mock__kpi--green{border-left-color:var(--green)}
.mock__kpi--amber{border-left-color:var(--amber)}
.mock__kpi-lab{font-family:var(--f-mono);font-size:7px;letter-spacing:.1em;
               text-transform:uppercase;color:var(--slate-600);display:block}
.mock__kpi-val{font-family:var(--f-mono);font-variant-numeric:tabular-nums;
               font-weight:500;font-size:11.5px;color:var(--slate-800);display:block;
               margin-top:.15rem;white-space:nowrap}

/* Workflow */
.mock__flowhead{display:flex;align-items:center;justify-content:space-between;
                margin-top:.15rem}
.mock__flowtitle{font-weight:700;font-size:10.5px}
.mock__flowmeta{font-family:var(--f-mono);font-size:8px;color:var(--slate-600)}
.mock__flow{display:grid;gap:.24rem}
.mock__step{
  display:grid;grid-template-columns:16px 1fr auto;align-items:center;gap:.5rem;
  background:var(--white);border:1px solid var(--line);border-radius:6px;
  padding:.32rem .5rem;
  transition:border-color .35s var(--ease),background .35s var(--ease);
}
.mock__dot{
  width:15px;height:15px;border-radius:50%;
  border:1.5px solid #CBD2D9;background:var(--white);
  display:grid;place-items:center;
  transition:background .3s var(--ease),border-color .3s var(--ease);
}
.mock__dot svg{width:9px;height:9px;color:var(--ink-900);opacity:0;transition:opacity .25s var(--ease)}
.mock__actor{font-size:9.5px;font-weight:500}
.mock__state{font-family:var(--f-mono);font-size:7.5px;letter-spacing:.08em;
             text-transform:uppercase;color:var(--slate-600)}
.mock__step.is-done{border-color:rgba(237,151,55,.5);background:rgba(237,151,55,.07)}
.mock__step.is-done .mock__dot{background:var(--orange);border-color:var(--orange)}
.mock__step.is-done .mock__dot svg{opacity:1}
.mock__step.is-done .mock__state{color:#8A3F06}

/* Badges d'automatisation */
.mock__badges{display:flex;flex-wrap:wrap;gap:.32rem;margin-top:.15rem}
.mock__badge{
  display:inline-flex;align-items:center;gap:.3rem;
  background:rgba(47,163,107,.12);border:1px solid rgba(47,163,107,.32);
  color:#1B6B44;border-radius:100px;padding:.24rem .55rem;
  font-size:8.5px;font-weight:600;
}
.mock__badge svg{width:9px;height:9px;flex:0 0 auto}

/* Lignes de tableau des mocks réduits */
.mock__rows{display:grid;gap:.22rem}
.mock__rows li{
  display:flex;align-items:center;justify-content:space-between;gap:.5rem;
  background:var(--white);border:1px solid var(--line);border-radius:5px;
  padding:.34rem .55rem;font-size:9.5px;
}
.mock__rows li > span:first-child{
  font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.mock__rows .num{font-family:var(--f-mono);font-variant-numeric:tabular-nums;
                 font-size:9px;color:var(--slate-600);flex:0 0 auto}
.mock__rows em{
  font-family:var(--f-mono);font-size:7.5px;font-style:normal;letter-spacing:.06em;
  text-transform:uppercase;padding:.14rem .42rem;border-radius:100px;flex:0 0 auto;
}
.mock__rows em.ok{background:rgba(47,163,107,.14);color:#1B6B44}
.mock__rows em.wait{background:rgba(232,163,23,.16);color:#8A5A05}
.mock__rows em.off{background:var(--paper-2);color:var(--slate-600)}
.mock__rows--tall li{padding-block:.44rem}

/* Marqueur de fin de barre latérale : signale que la liste continue,
   pour que le visuel ne laisse pas croire à quatre modules seulement. */
.mock__side-more{
  margin-top:auto;padding:.5rem .35rem .15rem;
  font-family:var(--f-mono);font-size:7.5px;letter-spacing:.1em;
  text-transform:uppercase;color:rgba(255,255,255,.55);
  border-top:1px solid rgba(255,255,255,.12);
}

/* Variante réduite, statique — utilisée dans les onglets suites */
.mock--mini{transform:none;box-shadow:0 20px 48px -26px rgba(43,50,57,.34),0 0 0 1px var(--line)}
.mock--mini .mock__body{min-height:334px;grid-template-columns:118px 1fr}
.mock--mini .mock__side{gap:0}
.mock--mini .mock__nav{padding-block:.26rem;font-size:9px}
.mock--mini .mock__side-lab{padding:.5rem .35rem .18rem;font-size:7px}
.mock--mini .mock__nav{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.mock--mini .mock__kpi-val{font-size:10.5px}
.mock--mini .mock__kpi{padding:.42rem .45rem}

/* =========================================================
   9. MARQUEE — bandeau intégrations
   ========================================================= */
.marquee-sec{background:var(--paper);padding-block:clamp(2.6rem,5vw,4rem);border-bottom:1px solid var(--line)}
.marquee-sec__lead{
  text-align:center;font-size:.95rem;color:var(--slate-600);
  margin-bottom:1.8rem;padding-inline:var(--pad-x);
}
.marquee{
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}
.marquee__track{
  display:flex;align-items:center;
  width:max-content;animation:marquee 46s linear infinite;
}
/* Marge portée par chaque vignette plutôt que gap sur la piste :
   avec gap, 30 vignettes donnent 29 espaces et translateX(-50%) ne
   correspond pas exactement à une période — micro-saut à chaque cycle.
   Avec une marge par vignette, la moitié de la piste est une période exacte. */
.marquee img{
  height:30px;width:auto;flex:0 0 auto;
  margin-right:clamp(2.4rem,5vw,4.4rem);
  filter:grayscale(1) contrast(1.08);opacity:.68;
  transition:filter .3s var(--ease),opacity .3s var(--ease);
}
.marquee img:hover{filter:none;opacity:1}
.marquee:hover .marquee__track,.marquee:focus-within .marquee__track{animation-play-state:paused}
@keyframes marquee{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .marquee{-webkit-mask-image:none;mask-image:none}
  .marquee__track{animation:none;flex-wrap:wrap;justify-content:center;width:auto;
                  padding-inline:var(--pad-x)}
  .marquee img{margin:.8rem 1.2rem}
  .marquee__track > [aria-hidden="true"]{display:none}
}

/* =========================================================
  10. LE CONSTAT
   ========================================================= */
.constat{background:var(--paper)}
.constat__grid{display:grid;gap:1.3rem;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.constat__card{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:1.7rem 1.6rem;
}
.constat__num{
  font-family:var(--f-mono);font-size:.78rem;font-weight:500;letter-spacing:.14em;
  color:var(--orange-deep);display:block;margin-bottom:.9rem;
}
.constat__card h3{margin-bottom:.6rem}
.constat__card p{font-size:.97rem;color:var(--slate-600);line-height:1.6}

/* =========================================================
  11. TIMELINE D'ORIGINE
   ========================================================= */
.origine__rail{position:relative;margin-top:clamp(2.4rem,4vw,3.4rem)}
.origine__line{
  position:absolute;left:6px;right:calc(25% - 1.2rem - 6px);top:7px;height:2px;
  background:var(--line-dark);
}
.origine__progress{
  position:absolute;left:0;top:0;width:100%;height:2px;
  background:var(--orange);transform:scaleX(0);transform-origin:left center;
}
.timeline{display:grid;grid-template-columns:repeat(4,1fr);gap:1.6rem}
.timeline__item{position:relative;padding-top:2.4rem}
.timeline__item::before{
  content:"";position:absolute;left:0;top:2px;width:12px;height:12px;border-radius:50%;
  background:var(--ink-900);border:2px solid var(--orange);
}
.timeline__year{
  font-family:var(--f-mono);font-size:1.5rem;font-weight:500;color:var(--orange);
  display:block;margin-bottom:.5rem;letter-spacing:-.02em;
}
.timeline__item h3{font-size:1.02rem;margin-bottom:.5rem}
.timeline__item p{font-size:.9rem;color:rgba(255,255,255,.66);line-height:1.55}

/* =========================================================
  12. BENTO — les 8 piliers
   ========================================================= */
.bento__grid{display:grid;gap:1.15rem;grid-template-columns:repeat(auto-fit,minmax(248px,1fr))}
@media (min-width:1040px){
  .bento__grid{grid-template-columns:repeat(4,1fr)}
  .bento__card--wide{grid-column:span 2}
}
.bento__card{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  padding:1.7rem 1.6rem;display:flex;flex-direction:column;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease);
}
.bento__card:hover{
  transform:translateY(-3px);border-color:rgba(237,151,55,.42);
  box-shadow:0 14px 34px -16px rgba(43,50,57,.24);
}
.bento__icon{color:var(--orange-deep);margin-bottom:1rem}
.bento__icon svg{width:24px;height:24px}
.bento__card h3{margin-bottom:.5rem}
.bento__card p{font-size:.95rem;color:var(--slate-600);line-height:1.6}

/* Micro-graphique décoratif de la carte reporting */
.bento__spark{display:flex;align-items:flex-end;gap:5px;height:46px;margin-top:1.3rem}
.bento__spark i{
  display:block;flex:1;background:var(--orange);border-radius:3px 3px 0 0;
  transform-origin:bottom center;transition:transform .45s var(--ease);
}
.bento__spark i:nth-child(1){height:38%;opacity:.30}
.bento__spark i:nth-child(2){height:58%;opacity:.42}
.bento__spark i:nth-child(3){height:44%;opacity:.54}
.bento__spark i:nth-child(4){height:74%;opacity:.66}
.bento__spark i:nth-child(5){height:60%;opacity:.78}
.bento__spark i:nth-child(6){height:88%;opacity:.9}
.bento__spark i:nth-child(7){height:100%;opacity:1}
.bento__card:hover .bento__spark i{transform:scaleY(1.1)}
@media (prefers-reduced-motion:reduce){
  .bento__card:hover .bento__spark i{transform:none}
}

/* =========================================================
  13. ONGLETS (partagés : démonstration + suites)
   ========================================================= */
.tabs{
  display:flex;gap:.4rem;margin-top:1.8rem;
  overflow-x:auto;scroll-snap-type:x proximity;
  padding-bottom:.3rem;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.tabs::-webkit-scrollbar{display:none}
.tabs__btn{
  flex:0 0 auto;scroll-snap-align:start;cursor:pointer;
  font-family:var(--f-sans);font-weight:600;font-size:.88rem;
  padding:.62rem 1.15rem;border-radius:100px;
  border:1px solid var(--line);color:var(--slate-600);background:var(--white);
  transition:all .28s var(--ease);white-space:nowrap;
}
.tabs__btn:hover{border-color:var(--orange);color:var(--orange-deep)}
.tabs__btn.is-active{background:var(--orange);border-color:var(--orange);color:var(--ink-900)}
.section--dark .tabs__btn{
  background:transparent;border-color:var(--line-dark);color:rgba(255,255,255,.72);
}
.section--dark .tabs__btn:hover{border-color:var(--orange);color:var(--orange)}
.section--dark .tabs__btn.is-active{
  background:var(--orange);border-color:var(--orange);color:var(--ink-900);
}

/* =========================================================
  14. DÉMONSTRATION SCROLLABLE
   Épinglée au-dessus de 900 px uniquement. En dessous, liste statique.
   ========================================================= */
.demoscroll{padding-block:var(--sec-y) 0}
.demoscroll__head{margin-bottom:clamp(2rem,4vw,3rem)}
.demoscroll__pin{
  display:grid;justify-items:center;align-items:start;
  padding-bottom:var(--sec-y);
}
/* Les deux panneaux partagent la même cellule : le conteneur prend la
   hauteur du plus grand et ne varie plus au changement d'onglet. */
.demoscroll__panel{grid-area:1 / 1;width:100%;max-width:940px}
.demoscroll__panel:not(.is-active){visibility:hidden;pointer-events:none}
.demoscroll__panel[hidden]{display:none}

.flow{display:grid;gap:.55rem}
.flow__step{
  display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,1.35fr);
  gap:1.1rem;align-items:start;
  padding:1rem 1.25rem;
  border:1px solid var(--line-dark);border-radius:var(--radius);
  background:rgba(255,255,255,.03);
  opacity:.38;
  transition:opacity .45s var(--ease),border-color .45s var(--ease),
             background .45s var(--ease),transform .45s var(--ease);
}
.flow__step.is-lit{
  opacity:1;border-color:rgba(237,151,55,.42);background:rgba(237,151,55,.065);
}
.flow__num{
  font-family:var(--f-mono);font-size:.86rem;font-weight:500;color:var(--orange);
  min-width:1.6ch;padding-top:.15rem;
}
.flow__actor{font-weight:600;font-size:1rem;color:var(--white);line-height:1.35}
.flow__who{
  display:block;font-family:var(--f-mono);font-size:.7rem;font-weight:400;
  letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.45);
  margin-top:.2rem;
}
.flow__auto{
  font-size:.9rem;color:rgba(255,255,255,.66);line-height:1.5;
  position:relative;padding-left:1.35rem;
}
.flow__auto::before{
  content:"";position:absolute;left:0;top:.5em;width:.85rem;height:1px;
  background:var(--orange);
}
.flow__step--plain .flow__auto{color:rgba(255,255,255,.62);font-style:italic}
.flow__step--plain .flow__auto::before{background:rgba(255,255,255,.45)}
.flow__foot{
  margin-top:1.4rem;font-size:.93rem;color:rgba(255,255,255,.6);
  padding-left:1.25rem;border-left:2px solid var(--orange);
}

/* =========================================================
  15. SUITES MÉTIER
   ========================================================= */
.suites{background:var(--paper)}
.suites__tabs{margin-bottom:clamp(2rem,4vw,3rem)}
.suites__panel[hidden]{display:none}
.suites__grid{
  display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);
  gap:clamp(2rem,4vw,3.4rem);align-items:start;
}
.suites__intro{margin-bottom:1.5rem}
.suites__count{
  display:inline-flex;align-items:baseline;gap:.4rem;
  font-family:var(--f-mono);font-size:.76rem;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--orange-deep);margin-bottom:.7rem;
}
.suites__count b{font-size:1.5rem;font-weight:500;letter-spacing:-.02em}
.suites__intro p{color:var(--slate-600);font-size:1rem;max-width:52ch}
.suites__mods{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));
  gap:.45rem .9rem;
}
.suites__mods li{
  display:grid;grid-template-columns:14px 1fr;gap:.55rem;align-items:start;
  font-size:.93rem;color:var(--slate-800);line-height:1.45;padding:.16rem 0;
}
.suites__mods svg{width:14px;height:14px;color:var(--orange-deep);margin-top:.3em}

/* =========================================================
  16. ROI
   ========================================================= */
.roi__grid{display:grid;gap:1.15rem;grid-template-columns:repeat(auto-fit,minmax(246px,1fr))}
/* Cinq cartes : sur grand écran on passe en grille de 6 colonnes, trois
   cartes de 2 colonnes puis deux de 3. Les deux lignes sont pleines,
   sans carte orpheline. */
@media (min-width:1040px){
  .roi__grid{grid-template-columns:repeat(6,1fr)}
  .roi__card{grid-column:span 2}
  .roi__card:nth-child(4),.roi__card:nth-child(5){grid-column:span 3}
}
.roi__card{
  position:relative;overflow:hidden;
  background:var(--ink-800);border:1px solid var(--line-dark);
  border-radius:var(--radius);padding:2rem 1.7rem 1.8rem;
}
.roi__card::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:var(--orange);opacity:.72;
}
/* min-height sur deux lignes : les titres des quatre cartes restent alignés
   que la valeur tienne sur une ligne (« −30 % ») ou deux (« 5 000 à 8 000 € »). */
.roi__val{
  display:block;font-family:var(--f-mono);font-variant-numeric:tabular-nums;
  font-weight:500;font-size:clamp(1.9rem,1.5rem + 1.5vw,2.7rem);
  color:var(--orange);line-height:1.05;letter-spacing:-.03em;margin-bottom:.2rem;
  min-height:2.1em;
}
.roi__unit{
  display:block;font-family:var(--f-mono);font-size:.74rem;letter-spacing:.12em;
  text-transform:uppercase;color:rgba(255,255,255,.5);margin-bottom:1.1rem;
}
.roi__card h3{font-size:1.05rem;margin-bottom:.6rem}
.roi__card p{font-size:.9rem;color:rgba(255,255,255,.62);line-height:1.55}
.roi__note{
  margin-top:2rem;font-size:.84rem;color:rgba(255,255,255,.55);
  max-width:70ch;font-style:italic;
}

/* =========================================================
  17. TÉMOIGNAGES
   ========================================================= */
.temoignages{background:var(--white)}
.temo__grid{display:grid;gap:1.3rem;grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
@media (min-width:1000px){
  .temo__grid{grid-template-columns:repeat(2,1fr)}
  .temo--wide{grid-column:span 2}
}
.temo{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  padding:2rem 1.9rem;display:flex;flex-direction:column;
}
.temo blockquote{flex:1}
.temo h3{margin-bottom:.8rem;color:var(--slate-800)}
.temo p{font-size:.97rem;color:var(--slate-600);line-height:1.62}
.temo p + p{margin-top:.7rem}
.temo figcaption{
  display:flex;align-items:center;gap:.9rem;
  margin-top:1.6rem;padding-top:1.3rem;border-top:1px solid var(--line);
}
.temo__face{
  width:54px;height:54px;border-radius:50%;object-fit:cover;flex:0 0 auto;
  background:var(--paper-2);
}
/* Témoin sans portrait fourni : monogramme, dans le même esprit que
   les cartes de l'équipe. */
.temo__face--mono{
  display:grid;place-items:center;
  background:linear-gradient(140deg,var(--ink-700),var(--ink-600));
  color:var(--orange);font-family:var(--f-mono);font-size:1.25rem;font-weight:500;
}
.temo__who strong{display:block;font-weight:700;font-size:.98rem;color:var(--slate-800)}
.temo__who span{display:block;font-size:.87rem;color:var(--slate-600)}
.temo__meta{
  font-family:var(--f-mono);font-size:.72rem;letter-spacing:.08em;
  color:var(--orange-deep);margin-top:.9rem;
}

/* =========================================================
  18. DÉPLOIEMENT
   ========================================================= */
.deploi{background:var(--paper)}


/* --- Étapes de déploiement (14 semaines) --------------------------------- */
.deploi__resume{
  display:flex;flex-wrap:wrap;gap:2.4rem 3.4rem;
  padding-bottom:2rem;margin-bottom:2rem;border-bottom:1px solid var(--line);
}
.deploi__chiffre strong{
  display:block;font-family:var(--f-mono);font-variant-numeric:tabular-nums;
  font-weight:500;font-size:2.2rem;color:var(--orange-deep);letter-spacing:-.02em;line-height:1.05;
}
.deploi__chiffre > span{font-size:.9rem;color:var(--slate-600)}

.deploi__etapes{display:grid;gap:1.15rem;grid-template-columns:repeat(auto-fit,minmax(272px,1fr))}
@media (min-width:1080px){ .deploi__etapes{grid-template-columns:repeat(4,1fr)} }

.etape{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:1.6rem 1.5rem;display:flex;flex-direction:column;
  border-top:3px solid var(--orange);
}
/* L'étape préalable n'est pas comptée dans les quatorze semaines :
   on la distingue par une teinte neutre. */
.etape--prereq{border-top-color:var(--slate-600);background:var(--paper)}

.etape__tete{display:flex;align-items:flex-start;gap:.85rem;margin-bottom:1.1rem}
.etape__num{
  display:grid;place-items:center;width:34px;height:34px;border-radius:9px;flex:0 0 auto;
  background:rgba(237,151,55,.15);color:var(--orange-deep);
  font-family:var(--f-mono);font-size:1rem;font-weight:500;
}
.etape--prereq .etape__num{background:var(--paper-2);color:var(--slate-600)}
.etape__tete h3{font-size:1.04rem;margin-bottom:.15rem}
.etape__periode{
  font-family:var(--f-mono);font-size:.72rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--slate-600);
}

.etape__phases{display:flex;flex-wrap:wrap;gap:.35rem;margin-bottom:1.1rem}
.etape__phase{
  font-family:var(--f-mono);font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;
  padding:.28rem .55rem;border-radius:100px;white-space:nowrap;
}
.etape__phase--inst{background:rgba(62,123,216,.12);color:#2A5FA8}
.etape__phase--depl{background:rgba(47,163,107,.13);color:#1B6B44}
.etape__phase--prereq{background:var(--paper-2);color:var(--slate-600)}

.etape__mods{display:grid;gap:.42rem}
.etape__mods li{
  display:grid;grid-template-columns:auto 1fr;gap:.55rem;align-items:start;
  font-size:.89rem;color:var(--slate-600);line-height:1.45;
}
.etape__mods li::before{
  content:"";width:4px;height:4px;border-radius:50%;background:var(--orange);margin-top:.6em;
}
.etape--prereq .etape__mods li::before{background:var(--slate-600)}

.deploi__promises{
  display:grid;gap:1.15rem;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));
  margin-top:clamp(2.2rem,4vw,3.2rem);
}
.deploi__promise{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:1.6rem;
}
.deploi__promise svg{width:22px;height:22px;color:var(--orange-deep);margin-bottom:.9rem}
.deploi__promise h3{font-size:1rem;margin-bottom:.45rem}
.deploi__promise p{font-size:.92rem;color:var(--slate-600);line-height:1.55}

/* =========================================================
  19. CTA FINAL
   ========================================================= */
.cta-final{position:relative;overflow:hidden;text-align:center}
.cta-final__aura{
  position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(52% 62% at 50% 34%, rgba(255,179,92,.16), transparent 70%);
}
.cta-final .wrap{position:relative;z-index:2}
.cta-final h2{max-width:22ch;margin-inline:auto}
.cta-final p{
  color:rgba(255,255,255,.72);font-size:var(--t-lead);
  max-width:52ch;margin:1.2rem auto 2.2rem;line-height:1.5;
}
.cta-final__phone{
  display:block;margin-top:1.5rem;font-family:var(--f-mono);font-size:.95rem;
  color:rgba(255,255,255,.66);transition:color .3s var(--ease);
}
.cta-final__phone:hover{color:var(--orange)}

/* =========================================================
  19b. PAGES INTERNES — hero court, sommaire, listes de modules
   ========================================================= */
.pagehero{background:var(--paper);padding-top:calc(var(--sec-y) + 3rem)}
.pagehero h1{margin-bottom:1.1rem}

.toc{display:grid;grid-template-columns:repeat(auto-fit,minmax(228px,1fr));gap:.7rem;margin-top:1rem}
.toc__item{
  display:flex;align-items:center;gap:.7rem;
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:.85rem 1.1rem;font-weight:600;font-size:.94rem;
  transition:border-color .28s var(--ease),transform .28s var(--ease);
}
.toc__item:hover{border-color:var(--orange);transform:translateY(-2px)}
.toc__n{
  font-family:var(--f-mono);font-size:.78rem;font-weight:500;color:var(--orange-deep);
  background:rgba(237,151,55,.14);border-radius:100px;padding:.16rem .5rem;flex:0 0 auto;
}

.suite{background:var(--white)}
.suite--alt{background:var(--paper)}
.suite__mods{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:1.5rem 2.4rem}
.suite__mods li{display:grid;grid-template-columns:22px 1fr;gap:.85rem;align-items:start}
.suite__ico{
  display:grid;place-items:center;width:22px;height:22px;border-radius:50%;
  background:rgba(237,151,55,.14);margin-top:.15rem;
}
.suite__ico svg{width:12px;height:12px;color:var(--orange-deep)}
.suite__mods h3{font-size:1rem;margin-bottom:.28rem}
.suite__mods p{font-size:.93rem;color:var(--slate-600);line-height:1.55}

.inter{background:var(--ink-900);color:var(--white)}
.inter .eyebrow{color:var(--orange)}
.inter h2,.inter h3{color:var(--white)}
.inter .lead{color:rgba(255,255,255,.74)}
.inter__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:1.15rem}
.inter__card{
  background:var(--ink-800);border:1px solid var(--line-dark);
  border-radius:var(--radius);padding:1.6rem;
}
.inter__card h3{font-size:1.02rem;margin-bottom:.5rem}
.inter__card p{font-size:.92rem;color:rgba(255,255,255,.64);line-height:1.55}

/* =========================================================
  19c. PAGE HISTOIRE
   ========================================================= */
.story{background:var(--white)}
.story__list{display:grid;gap:0;max-width:940px}
.story__item{
  display:grid;grid-template-columns:130px 1fr;gap:2rem;
  padding:2rem 0;border-top:1px solid var(--line);position:relative;
}
.story__item:last-child{border-bottom:1px solid var(--line)}
.story__year{
  font-family:var(--f-mono);font-size:1.55rem;font-weight:500;color:var(--orange-deep);
  letter-spacing:-.02em;padding-top:.1rem;
}
.story__body h3{margin-bottom:.6rem}
.story__body p{color:var(--slate-600);line-height:1.65;max-width:62ch}

.facts__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:1.8rem 2rem}
.facts__item strong{
  display:block;font-family:var(--f-mono);font-variant-numeric:tabular-nums;
  font-weight:500;font-size:2.1rem;color:var(--orange);letter-spacing:-.02em;
}
.facts__item > span{font-size:.9rem;color:rgba(255,255,255,.64)}

.team{background:var(--paper)}
.team__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(238px,1fr));gap:1.15rem}
.team__card{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:1.7rem;
}
/* Monogramme : placeholder soigné en attendant les portraits fournis. */
.team__mono{
  display:grid;place-items:center;width:56px;height:56px;border-radius:14px;
  background:linear-gradient(140deg,var(--ink-700),var(--ink-600));
  color:var(--orange);font-family:var(--f-mono);font-size:1.15rem;font-weight:500;
  letter-spacing:.04em;margin-bottom:1.1rem;
}
.team__card h3{font-size:1.02rem;margin-bottom:.25rem}
.team__role{font-size:.9rem;color:var(--slate-600);margin-bottom:.8rem}
.team__mail{
  font-family:var(--f-mono);font-size:.8rem;color:var(--orange-deep);
  word-break:break-all;transition:color .3s var(--ease);
}
.team__mail:hover{color:var(--orange-mid)}
.team__note{margin-top:1.6rem;font-size:.86rem;color:var(--slate-600);font-style:italic}

.cert{background:var(--white)}
.cert__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.15rem}
.cert__card{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  padding:1.8rem;border-left:3px solid var(--orange);
}
.cert__card h3{margin-bottom:.6rem}
.cert__card p{font-size:.95rem;color:var(--slate-600);line-height:1.6}
.cert__badges{display:flex;gap:1rem;align-items:center;margin-top:2rem}
.cert__badges img{height:72px;width:auto;border-radius:10px}

/* =========================================================
  19d. PAGE DÉMO — formulaire séquencé
   ========================================================= */
.demopage{background:var(--paper);padding-top:calc(var(--sec-y) + 3rem)}
.demopage__grid{
  display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
  gap:clamp(2rem,4vw,3.6rem);align-items:start;
}
.demopage__form h1{margin-bottom:1rem}
.demopage__form .lead{margin-bottom:2.2rem}

.dform{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:clamp(1.6rem,3vw,2.4rem);
}
.dform__progress{height:4px;border-radius:100px;background:var(--paper-2);overflow:hidden}
.dform__bar{display:block;height:100%;background:var(--orange);border-radius:100px;
            transition:width .45s var(--ease)}
.dform__count{
  font-family:var(--f-mono);font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--slate-600);margin:.9rem 0 1.6rem;
}
.dform__count strong{color:var(--orange-deep);font-weight:500}

.dform fieldset{border:0}
.dform legend{font-weight:800;font-size:var(--t-h3);margin-bottom:1.4rem;letter-spacing:-.015em}
.dform legend:focus{outline:none}
.dform__grid{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
.dform__field{margin-bottom:1.1rem}
.dform__field label{
  display:block;font-weight:600;font-size:.88rem;margin-bottom:.42rem;color:var(--slate-800);
}
.dform__field label span{color:var(--orange-deep)}
.dform input,.dform select,.dform textarea{
  width:100%;padding:.82rem 1rem;border:1px solid var(--line);border-radius:10px;
  font-family:var(--f-sans);font-size:1rem;color:var(--ink);background:var(--white);
  transition:border-color .25s var(--ease),box-shadow .25s var(--ease);
}
.dform textarea{resize:vertical;min-height:5.2rem}
.dform input:focus,.dform select:focus,.dform textarea:focus{
  outline:none;border-color:var(--orange);box-shadow:0 0 0 3px rgba(237,151,55,.18);
}
.dform .is-invalid{border-color:var(--red)}
.dform__err{
  display:block;min-height:1.15em;margin-top:.3rem;
  font-size:.82rem;color:var(--red);
}
.dform__check{
  display:grid;grid-template-columns:auto 1fr;gap:.7rem;align-items:start;margin-top:.4rem;
}
.dform__check input{width:18px;height:18px;margin-top:.2rem;accent-color:var(--orange-deep)}
.dform__check label{font-size:.9rem;color:var(--slate-600);line-height:1.5;font-weight:400}
.dform__check .dform__err{grid-column:1 / -1}

.dform__nav{display:flex;gap:.8rem;margin-top:1.6rem;flex-wrap:wrap}
.dform__note{
  margin-top:1.2rem;font-size:.9rem;color:var(--slate-600);line-height:1.55;display:none;
}
.dform__note.is-shown{display:block}
.dform__note a{color:var(--orange-deep);font-weight:600;text-decoration:underline}

/* Colonne latérale */
.demopage__side{display:grid;gap:1.15rem;position:sticky;top:6rem}
.side__card{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:1.7rem;
}
.side__card h2{font-size:1.08rem;margin-bottom:1.1rem}
.side__list{display:grid;gap:1rem}
.side__list li{font-size:.92rem;color:var(--slate-600);line-height:1.55}
.side__k{
  display:block;font-family:var(--f-mono);font-size:.82rem;font-weight:500;
  color:var(--orange-deep);margin-bottom:.18rem;
}
.side__phone a{
  font-family:var(--f-mono);font-size:1.32rem;font-weight:500;color:var(--slate-800);
  letter-spacing:-.01em;transition:color .3s var(--ease);
}
.side__phone a:hover{color:var(--orange-deep)}
.side__contacts{display:grid;gap:.95rem;margin-top:1.4rem;
                padding-top:1.3rem;border-top:1px solid var(--line)}
.side__contacts li{font-size:.9rem;line-height:1.4}
.side__contacts strong{display:block;color:var(--slate-800)}
.side__contacts span{display:block;color:var(--slate-600);font-size:.84rem}
.side__contacts a{
  font-family:var(--f-mono);font-size:.78rem;color:var(--orange-deep);word-break:break-all;
}
.side__contacts a:hover{text-decoration:underline}

/* =========================================================
  19e. PAGES LÉGALES
   Texte juridique inchangé : seule la présentation est travaillée.
   ========================================================= */
.legal{background:var(--paper);padding-top:calc(var(--sec-y) + 3rem)}
.legal__head{max-width:62ch;margin-bottom:clamp(2.2rem,4vw,3rem)}
/* Date de révision : repère de fraîcheur exigé pour un document
   opposable, discret sous le chapô. */
.legal__maj{
  margin-top:1rem;font-family:var(--f-mono);font-size:.78rem;
  letter-spacing:.04em;color:var(--slate-600);
}
.legal__head h1{margin-bottom:1rem}

/* Carte « L'essentiel » — les informations réellement recherchées */
.ess{
  background:var(--ink-900);color:var(--white);
  border-radius:var(--radius-lg);padding:clamp(1.8rem,3vw,2.4rem);
  margin-bottom:clamp(2.4rem,4vw,3.4rem);
}
.ess__titre{
  font-family:var(--f-mono);font-size:.76rem;font-weight:500;letter-spacing:.18em;
  text-transform:uppercase;color:var(--orange);margin-bottom:1.6rem;
}
.ess__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(238px,1fr));gap:1.5rem 2rem}
.ess__k{
  display:block;font-family:var(--f-mono);font-size:.7rem;letter-spacing:.12em;
  text-transform:uppercase;color:rgba(255,255,255,.5);margin-bottom:.4rem;
}
.ess__v{display:block;font-size:.98rem;line-height:1.5;color:rgba(255,255,255,.9)}
.ess__v a{color:var(--orange);text-decoration:underline;text-underline-offset:2px}
.ess__v a:hover{color:var(--orange-glow)}

/* Sommaire collant + colonne de lecture */
.legal__grid{
  display:grid;grid-template-columns:minmax(0,270px) minmax(0,1fr);
  gap:clamp(2rem,4vw,3.6rem);align-items:start;
}
.legal__toc{
  position:sticky;top:6rem;
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:1.5rem 1.3rem;max-height:calc(100vh - 8rem);overflow-y:auto;
}
.legal__toc-titre{
  font-family:var(--f-mono);font-size:.72rem;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--slate-600);margin-bottom:1rem;
}
.legal__toc-list{display:grid;gap:.1rem;counter-reset:none}
.legal__toc-list a{
  display:grid;grid-template-columns:2.3rem 1fr;gap:.3rem;align-items:baseline;
  padding:.42rem .3rem;border-radius:7px;font-size:.88rem;line-height:1.35;
  color:var(--slate-600);transition:background .25s var(--ease),color .25s var(--ease);
}
.legal__toc-list a:hover{background:var(--paper);color:var(--ink)}
.legal__toc-n{font-family:var(--f-mono);font-size:.74rem;color:var(--orange-deep)}
.legal__cross{
  display:flex;align-items:center;gap:.45rem;margin-top:1.3rem;padding-top:1.2rem;
  border-top:1px solid var(--line);
  font-weight:600;font-size:.87rem;color:var(--orange-deep);
}
.legal__cross svg{width:15px;height:15px;flex:0 0 auto;transition:transform .3s var(--ease)}
.legal__cross:hover svg{transform:translateX(4px)}

/* Corps du texte : largeur de lecture confortable */
.legal__corps{max-width:74ch}
.legal__sec{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:clamp(1.6rem,3vw,2.2rem);margin-bottom:1.1rem;
  scroll-margin-top:6.5rem;
}
.legal__sec h2{
  display:grid;grid-template-columns:auto 1fr;gap:.85rem;align-items:baseline;
  font-size:clamp(1.2rem,1.05rem + .5vw,1.55rem);margin-bottom:1.1rem;
}
.legal__n{
  font-family:var(--f-mono);font-size:.82rem;font-weight:500;color:var(--orange-deep);
  background:rgba(237,151,55,.13);border-radius:7px;padding:.28rem .5rem;
  align-self:start;margin-top:.2rem;
}
.legal__sec h3{
  font-size:1.02rem;margin:1.6rem 0 .6rem;
  padding-left:.8rem;border-left:2px solid var(--orange);
}
.legal__sec p{font-size:.97rem;color:var(--slate-600);line-height:1.72;margin-bottom:.9rem}
.legal__sec p:last-child{margin-bottom:0}
.legal__sec a{color:var(--orange-deep);text-decoration:underline;text-underline-offset:2px;
              word-break:break-word}
.legal__sec a:hover{color:var(--orange-mid)}

/* Principe mis en exergue — la source structure elle-même ainsi ses sections */
.legal__principe{
  background:var(--paper);border-left:3px solid var(--orange);border-radius:0 8px 8px 0;
  padding:.85rem 1.1rem !important;font-weight:600 !important;
  color:var(--slate-800) !important;font-size:.98rem !important;
}
.legal__liste{display:grid;gap:.5rem;margin:.4rem 0 1rem}
.legal__liste li{
  display:grid;grid-template-columns:auto 1fr;gap:.7rem;
  font-size:.96rem;color:var(--slate-600);line-height:1.6;
}
.legal__liste li::before{
  content:"";width:5px;height:5px;border-radius:50%;background:var(--orange);
  margin-top:.62em;
}

.legal__contact{
  background:var(--ink-900);color:var(--white);border-radius:var(--radius);
  padding:clamp(1.6rem,3vw,2.1rem);margin-top:1.8rem;
}
.legal__contact h2{font-size:1.2rem;margin-bottom:.7rem;color:var(--white)}
.legal__contact p{font-size:.97rem;color:rgba(255,255,255,.74);line-height:1.65}
.legal__contact a{color:var(--orange);text-decoration:underline;text-underline-offset:2px}
.legal__contact a:hover{color:var(--orange-glow)}

/* =========================================================
  19f. PAGE DE CONFIRMATION
   ========================================================= */
.merci{background:var(--paper);padding-top:calc(var(--sec-y) + 4rem);min-height:70vh}
.merci__inner{max-width:60ch}
.merci__ico{
  display:grid;place-items:center;width:60px;height:60px;border-radius:50%;
  background:rgba(47,163,107,.14);color:#1B6B44;margin-bottom:1.6rem;
}
.merci__ico svg{width:28px;height:28px}
.merci h1{margin-bottom:1rem}
.merci__actions{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:2.2rem}
.merci__contact{
  margin-top:2rem;padding-top:1.6rem;border-top:1px solid var(--line);
  font-size:.95rem;color:var(--slate-600);
}
.merci__contact a{color:var(--orange-deep);font-weight:600;text-decoration:underline;
                  text-underline-offset:2px}

/* Message d'erreur du formulaire */
.dform__note.is-error{color:var(--red)}

/* =========================================================
  19g. TEASERS VIDÉO
   ========================================================= */
.teasers__grid{display:grid;gap:1.3rem;grid-template-columns:repeat(auto-fit,minmax(310px,1fr))}
/* Quatre vidéos : deux colonnes donnent un carré plein, là où trois
   laissaient la dernière seule sur sa ligne. */
@media (min-width:900px){ .teasers__grid{grid-template-columns:repeat(2,1fr);gap:1.8rem} }

.teaser{display:flex;flex-direction:column;margin:0}
.teaser__ecran{
  position:relative;aspect-ratio:16/9;border-radius:var(--radius);overflow:hidden;
  background:var(--ink-800);border:1px solid var(--line-dark);
}
.teaser__video,.teaser__poster{width:100%;height:100%;object-fit:cover;display:block}

/* Aperçu flouté tant que l'accès n'est pas accordé : on donne envie
   sans livrer le contenu. */
/* L'agrandissement doit dépasser le rayon du flou, sinon les bords
   de l'image se délavent et laissent voir le fond de la tuile. */
.teaser--verrou .teaser__poster{filter:blur(9px) saturate(.65) brightness(.62);transform:scale(1.14)}
.teaser__cadenas{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:.7rem;cursor:pointer;
  color:var(--white);background:rgba(20,23,26,.35);
  font-family:var(--f-sans);font-weight:600;font-size:.92rem;
  transition:background .3s var(--ease);
}
.teaser__cadenas:hover{background:rgba(20,23,26,.18)}
.teaser__cadenas svg{
  width:34px;height:34px;padding:7px;border-radius:50%;
  background:var(--orange);color:var(--ink-900);box-sizing:content-box;
}
.teaser figcaption{padding-top:1.1rem}
.teaser__tag{
  display:inline-block;font-family:var(--f-mono);font-size:.7rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--orange);margin-bottom:.5rem;
}
.teaser__tag--verrou{color:rgba(255,255,255,.55)}
.teaser figcaption h3{font-size:1.1rem;margin-bottom:.45rem}
.teaser figcaption p{font-size:.93rem;color:rgba(255,255,255,.66);line-height:1.55}

/* Formulaire d'accès */
.acces{margin-top:clamp(2rem,4vw,3rem)}
.acces[hidden]{display:none}
.acces__form{
  background:var(--ink-800);border:1px solid var(--line-dark);border-radius:var(--radius-lg);
  padding:clamp(1.6rem,3vw,2.3rem);max-width:720px;
}
.acces__form h3{font-size:var(--t-h3);margin-bottom:.5rem;color:var(--white)}
.acces__intro{font-size:.95rem;color:rgba(255,255,255,.68);margin-bottom:1.6rem}
.acces__grid{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
.acces .dform__field label{color:rgba(255,255,255,.88)}
/* Fond sombre : l'orange foncé (réservé aux fonds clairs) n'y passe pas
   le contraste AA. On repasse sur l'orange de marque. */
.acces .dform__field label span{color:var(--orange)}
.acces input[type="text"],.acces input[type="email"]{
  width:100%;padding:.8rem 1rem;border:1px solid var(--line-dark);border-radius:10px;
  font-family:var(--f-sans);font-size:1rem;color:var(--white);background:rgba(255,255,255,.05);
  transition:border-color .25s var(--ease),box-shadow .25s var(--ease);
}
.acces input:focus{outline:none;border-color:var(--orange);box-shadow:0 0 0 3px rgba(237,151,55,.22)}
.acces .is-invalid{border-color:var(--red)}
.acces .dform__check label{color:rgba(255,255,255,.7)}
.acces .dform__check input{accent-color:var(--orange)}
.acces__nav{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.5rem}
.acces__note{margin-top:1rem;font-size:.92rem;color:rgba(255,255,255,.7);display:none;line-height:1.55}
.acces__note.is-shown{display:block}
.acces__note.is-error{color:#FF9B93}
.acces__note a{color:var(--orange);text-decoration:underline}

/* =========================================================
  19h. CONNECTEUR IA
   ========================================================= */
.mcp{background:var(--paper)}
.mcp__grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(2rem,4vw,3.6rem);align-items:center;
}
.mcp__texte h2{margin-bottom:1rem}
.mcp__exemples{display:grid;gap:.55rem;margin:1.8rem 0}
.mcp__exemples li{
  background:var(--white);border:1px solid var(--line);border-radius:100px;
  padding:.65rem 1.1rem;font-size:.93rem;color:var(--slate-800);
  font-style:italic;
}
.mcp__note{font-size:.96rem;color:var(--slate-600);line-height:1.6;margin-bottom:1.5rem}

/* Conversation reconstituée en HTML/CSS, données fictives */
.mcp__visuel{perspective:1400px}
.chat{
  background:var(--ink-900);border-radius:var(--radius-lg);overflow:hidden;
  box-shadow:0 34px 70px -34px rgba(20,23,26,.55);
  border:1px solid var(--ink-700);
}
.chat__barre{
  display:flex;align-items:center;gap:.55rem;
  padding:.8rem 1.1rem;border-bottom:1px solid var(--line-dark);
  background:var(--ink-800);
}
.chat__pastille{width:8px;height:8px;border-radius:50%;background:var(--green);flex:0 0 auto}
.chat__titre{
  font-family:var(--f-mono);font-size:.72rem;letter-spacing:.1em;
  text-transform:uppercase;color:rgba(255,255,255,.6);
}
.chat__fil{padding:1.3rem;display:grid;gap:.9rem}
.chat__msg{border-radius:12px;padding:.85rem 1.05rem;font-size:.92rem;line-height:1.55}
.chat__msg--vous{
  background:rgba(237,151,55,.14);color:var(--white);
  justify-self:end;max-width:88%;border-bottom-right-radius:4px;
}
.chat__msg--ia{
  background:rgba(255,255,255,.055);color:rgba(255,255,255,.86);
  justify-self:start;max-width:96%;border-bottom-left-radius:4px;
}
.chat__msg--ia strong{color:var(--orange)}
.chat__liste{display:grid;gap:.35rem;margin:.75rem 0}
.chat__liste li{
  display:flex;justify-content:space-between;gap:1rem;
  font-size:.86rem;padding:.35rem .6rem;border-radius:6px;
  background:rgba(255,255,255,.05);
}
.chat__liste em{
  font-family:var(--f-mono);font-style:normal;font-variant-numeric:tabular-nums;
  color:var(--white);flex:0 0 auto;
}
.chat__alerte{
  margin-top:.75rem;padding:.55rem .8rem;border-radius:8px;
  background:rgba(232,163,23,.14);border-left:2px solid var(--amber);
  font-size:.86rem;color:#F0C878;
}

/* =========================================================
   20. RESPONSIVE
   ========================================================= */
/* Cinq entrées de menu : en dessous de ce seuil la barre déborderait
   sur le bouton de démo, on bascule sur le menu burger. */
@media (max-width:1180px){
  .nav__links,.nav__phone{display:none}
  .nav__burger{display:flex}
  /* Les liens masqués, space-between centrait le bouton de démo entre
     le logo et le burger : on recolle les actions à droite. */
  .nav__actions{margin-left:auto}
}

@media (max-width:1000px){
  .foot__grid{grid-template-columns:1fr 1fr}
  .suites__grid{grid-template-columns:1fr}
  .suite__mods{grid-template-columns:1fr}
  .story__item{grid-template-columns:1fr;gap:.6rem}
  .demopage__grid{grid-template-columns:1fr}
  .demopage__side{position:static}
  .legal__grid{grid-template-columns:1fr}
  .mcp__grid{grid-template-columns:1fr}
  .legal__toc{position:static;max-height:none}
  .legal__corps{max-width:100%}
  }
@media (max-width:900px){
  /* Aucun épinglage sous 900 px : la démonstration devient une liste. */
  .demoscroll{padding-block:var(--sec-y)}
  .demoscroll__pin{padding-bottom:0;display:block}
  /* Pas d'épinglage à protéger ici : le panneau inactif sort du flux,
     sinon il occuperait la place en restant invisible. */
  .demoscroll__panel:not(.is-active){display:none}
  .flow__step{grid-template-columns:auto 1fr;opacity:1}
  .flow__auto{grid-column:1 / -1;padding-left:0;margin-top:.45rem}
  .flow__auto::before{display:none}
  .flow__step--plain .flow__auto{font-style:normal}
  .timeline{grid-template-columns:1fr;gap:0}
  .timeline__item{padding-top:0;padding-left:2.1rem;padding-bottom:1.8rem}
  .timeline__item::before{left:0;top:6px}
  .origine__rail{padding-left:0}
  .origine__line{left:5px;right:auto;top:6px;bottom:6px;width:2px;height:auto}
  .origine__progress{width:2px;height:100%;transform:scaleY(0);transform-origin:top center}
  .hero__inner{grid-template-columns:1fr;min-height:auto;
               padding-top:clamp(6.5rem,18vh,8.5rem);gap:2.8rem}
  .hero__title,.hero__lead{max-width:100%}
  .hero__stage{perspective:none}
  .mock{transform:none}
}
@media (max-width:640px){
  .nav__inner{gap:.7rem}
  .nav__actions .btn--sm{padding:.62rem 1rem;font-size:.82rem}
  .mock{--mk:10px}
  .mock__body{grid-template-columns:1fr;min-height:0}
  .mock__side{flex-direction:row;overflow-x:auto;gap:.35rem;padding:.5rem}
  .mock__side-lab,.mock__side-logo{display:none}
  .mock__nav{white-space:nowrap;flex:0 0 auto}
  .mock__kpis{grid-template-columns:repeat(2,1fr)}
  .foot__grid{grid-template-columns:1fr;gap:2rem}
    .roi__val{font-size:2rem}
  .dform__grid{grid-template-columns:1fr}
  .acces__grid{grid-template-columns:1fr}
  .hero__proof{gap:1.2rem 2rem}
  .hero__proof li{flex:1 1 40%}
}