/* ===== NoctisOne — Design System D2 · Chaleureux & rassurant ===== */
:root{
  --ink:#1A1F1B; --ink-2:#333A34; --muted:#6C7269; --muted-2:#9AA096;
  --line:#E9E4D9; --line-2:#F1EDE4; --bg:#FBF9F4; --bg-2:#F3F0E7; --card:#FFFFFF;
  --brand:#15795A; --brand-d:#0C4C38; --brand-l:#1F9B73; --mint:#E8F2EC; --mint-2:#F0F6F1;
  --clay:#EBDFCE; --clay-tint:#F6EEE2; --clay-ink:#9a6a2e;
  --r-s:14px; --r-m:20px; --r-l:28px;
  --fdisp:"Schibsted Grotesk",sans-serif; --fbody:"Hanken Grotesk",sans-serif;
  --mx:clamp(20px,5vw,100px);
  --sh:0 22px 54px -28px rgba(20,50,36,.22); --sh-s:0 6px 18px -10px rgba(20,50,36,.16);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;overflow-x:clip}
body{font-family:var(--fbody);color:var(--ink);background:var(--bg);line-height:1.62;-webkit-font-smoothing:antialiased;font-size:17px;overflow-x:clip;max-width:100%}
h1,h2,h3,h4{font-family:var(--fdisp);line-height:1.1;letter-spacing:-.02em;font-weight:700}
a{color:inherit;text-decoration:none}
img,svg{display:block}
.wrap{max-width:1220px;margin:0 auto;padding:0 var(--mx)}
.eyebrow{font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--brand)}
.muted{color:var(--muted)}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--fbody);font-weight:600;font-size:15px;border-radius:100px;padding:14px 24px;cursor:pointer;border:1px solid transparent;transition:transform .16s,background .16s,box-shadow .16s,border-color .16s;white-space:nowrap}
.btn svg{width:17px;height:17px}
.btn-primary{background:var(--brand);color:#fff;box-shadow:0 10px 24px -10px rgba(21,121,90,.5)}
.btn-primary:hover{background:var(--brand-l);transform:translateY(-1px)}
.btn-ghost{background:var(--card);color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--brand);color:var(--brand-d)}
.btn-white{background:#fff;color:var(--brand-d)}.btn-white:hover{transform:translateY(-1px)}
.link-arrow{display:inline-flex;align-items:center;gap:7px;font-weight:600;color:var(--brand-d);font-size:15px}
.link-arrow svg{width:16px;height:16px;transition:transform .2s}
.link-arrow:hover svg{transform:translateX(4px)}

/* Header / footer (injected by site.js) */
header{position:sticky;top:0;z-index:60;background:rgba(251,249,244,.85);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:72px}
.logo{display:flex;align-items:center}
.logo-img{height:44px;width:auto;display:block}
.foot-brand .logo-img{height:48px}
.nav-links{display:flex;gap:28px;align-items:center}
.nav-links a{font-size:15px;color:var(--muted);font-weight:500;transition:color .15s}
.nav-links a:hover,.nav-links a.active{color:var(--ink)}
.nav-links a.active{color:var(--brand-d);font-weight:600}
.nav-cta{display:flex;align-items:center;gap:14px}
.burger{display:none;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:8px;cursor:pointer;color:var(--ink)}
.mobile-menu a{padding:15px 0;border-bottom:1px solid var(--line-2);font-size:19px;font-weight:600}
.mobile-menu .btn{margin-top:20px;justify-content:center}

/* Hero (home) */
.hero{padding:clamp(52px,7vw,104px) 0 clamp(28px,3.5vw,48px);position:relative;overflow:hidden}
.hero-bg{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;background:transparent center/cover no-repeat;background-image:url(fonds/fond-vert-16-9.png);background-image:image-set(url(fonds/fond-vert-16-9.webp) type("image/webp"),url(fonds/fond-vert-16-9.png) type("image/png"));transform-origin:center;animation:seaDrift 8s ease-in-out infinite;will-change:transform}
.hero-bg-veil{position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(90deg,rgba(251,249,244,.92) 0%,rgba(251,249,244,.82) 42%,rgba(251,249,244,.55) 72%,rgba(251,249,244,.35) 100%)}
.halo{position:absolute;top:-12%;right:-6%;width:60%;height:120%;background:radial-gradient(circle at 60% 40%,rgba(31,155,115,.16),rgba(31,155,115,0) 62%);z-index:0;pointer-events:none}
.hero .wrap{position:relative;z-index:1;display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(34px,5vw,76px);align-items:center}
.badge{display:inline-flex;align-items:center;gap:9px;background:var(--mint);border:1px solid rgba(21,121,90,.16);border-radius:100px;padding:8px 16px;font-size:13px;font-weight:600;color:var(--brand-d)}
.dot{width:8px;height:8px;border-radius:50%;background:var(--brand-l);position:relative}
.dot::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1px solid var(--brand-l);animation:pulse 2.4s ease-out infinite}
@keyframes pulse{0%{transform:scale(.6);opacity:.85}100%{transform:scale(1.9);opacity:0}}
h1{font-size:clamp(40px,5.4vw,66px);margin:24px 0 0;font-weight:800;letter-spacing:-.03em}
h1 em{font-style:normal;color:var(--brand)}
.hero p.sub{font-size:clamp(18px,1.5vw,21px);color:var(--muted);margin:24px 0 32px;max-width:29em}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.checks{display:flex;gap:6px;flex-wrap:wrap;margin-top:30px}
.checks span{display:inline-flex;align-items:center;gap:9px;font-size:13px;color:var(--brand-d);font-weight:600;background:var(--mint);border:1px solid rgba(21,121,90,.16);padding:8px 16px;border-radius:100px;white-space:nowrap}
.checks .cdot{width:8px;height:8px;border-radius:50%;background:var(--brand-l);box-shadow:0 0 0 4px rgba(21,121,90,.16);flex:none}
.hero .wrap>.checks{grid-column:1/-1;justify-content:center;margin-top:clamp(4px,0.8vw,10px)}

/* Hero assistant card */
.hero-mock{position:relative}
.acard{background:var(--card);border:1px solid var(--line);border-radius:var(--r-l);box-shadow:var(--sh);padding:22px;position:relative}
.acard-head{display:flex;align-items:center;gap:12px;padding-bottom:16px;border-bottom:1px solid var(--line-2)}
.nox-av{width:46px;height:46px;border-radius:50%;background:radial-gradient(circle at 35% 30%,var(--brand-l),var(--brand-d));color:#fff;display:grid;place-items:center;flex:none}
.nox-av svg{width:22px;height:22px}
.acard-head .nm{font-family:var(--fdisp);font-weight:700;font-size:16px}
.acard-head .rl{font-size:13px;color:var(--muted)}
.acard-head .live{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--brand-d);background:var(--mint);padding:5px 11px;border-radius:100px;font-weight:600}
.thread{display:flex;flex-direction:column;gap:12px;padding:18px 2px 4px}
.bubble{max-width:84%;padding:12px 16px;border-radius:18px;font-size:14px;line-height:1.5}
.bubble.client{align-self:flex-start;background:var(--bg-2);border-bottom-left-radius:6px}
.bubble.nox{align-self:flex-end;background:var(--brand);color:#fff;border-bottom-right-radius:6px}
.confirm{display:flex;align-items:center;gap:10px;margin-top:6px;background:var(--mint-2);border:1px solid rgba(21,121,90,.14);border-radius:14px;padding:12px 14px}
.confirm .ic{width:32px;height:32px;border-radius:9px;background:var(--brand);color:#fff;display:grid;place-items:center}
.confirm .ic svg{width:16px;height:16px}
.confirm .t{font-size:13px;font-weight:600}.confirm .s{font-size:12px;color:var(--muted)}
.float{position:absolute;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:12px 16px;box-shadow:var(--sh-s);font-size:13px;font-weight:600;display:flex;align-items:center;gap:9px;z-index:3}
.float small{display:block;font-weight:500;color:var(--muted);font-size:11px}
.float .ic{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;flex:none}
.float .ic svg{width:17px;height:17px}
.float.a{top:-22px;left:-26px}.float.a .ic{background:var(--mint);color:var(--brand-d)}
.float.b{bottom:-18px;right:-22px}.float.b .ic{background:var(--clay-tint);color:var(--clay-ink)}

/* ===== iPhone 15 Pro hero mockup ===== */
.hero-mock{position:relative;display:flex;justify-content:center;min-width:0}
.phone-wrap{position:relative;width:417px;margin:0 auto;transform-origin:top center;transform:scale(.64);margin-bottom:-315px}
.iphone{position:relative;width:393px;padding:12px;box-sizing:content-box;border-radius:56px;
  background:linear-gradient(135deg,#b6aa9a 0%,#a69a8a 48%,#8c8273 100%);
  box-shadow:0 12px 30px rgba(0,0,0,.35),0 2px 6px rgba(0,0,0,.22)}
.ip-screen{position:relative;width:393px;height:852px;border-radius:44px;overflow:hidden;background:#fff;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.03),inset 0 10px 20px rgba(0,0,0,.35)}
.ip-island{position:absolute;top:12px;left:50%;transform:translateX(-50%);width:126px;height:37px;border-radius:20px;background:#000;z-index:60}
.ip-home{position:absolute;left:50%;bottom:8px;transform:translateX(-50%);width:34%;height:5px;border-radius:3px;background:rgba(0,0,0,.85);z-index:60;transition:background .4s}
.iphone.dark .ip-home{background:rgba(255,255,255,.9)}

/* Scènes empilées + crossfade */
.ip-scene{position:absolute;inset:0;display:flex;flex-direction:column;opacity:0;transition:opacity .5s ease;pointer-events:none}
.ip-scene.active{opacity:1}

/* Révélations temporisées (pilotées par .active) */
.iphone .reveal{opacity:0;transform:translateY(9px)}
.iphone .ip-scene.active .reveal{animation:ipReveal .5s cubic-bezier(.2,.7,.3,1) both;animation-delay:var(--d,0s)}
@keyframes ipReveal{to{opacity:1;transform:none}}

/* En-tête vert */
.ip-head{background:#1B5E3B;color:#fff;padding:52px 18px 13px;display:flex;align-items:center;gap:8px;flex:none}
.ip-head-txt{display:flex;flex-direction:column;line-height:1.18}
.ip-head-txt b{font-family:var(--fdisp);font-size:19.5px;font-weight:700}
.ip-head-txt span{font-size:14px;opacity:.82}
.ip-live{margin-left:auto;font-size:12px;line-height:1}

/* Corps blanc */
.ip-body{flex:1;background:#fff;padding:16px 14px;display:flex;flex-direction:column;gap:9px;overflow:hidden}
.ip-msg{max-width:82%;padding:11px 15px;border-radius:16px;font-size:16.5px;line-height:1.42}
.ip-msg.left{align-self:flex-start;background:#ECECEC;color:#222;border-bottom-left-radius:5px}
.ip-msg.right{align-self:flex-end;background:#15795A;color:#fff;border-bottom-right-radius:5px}
.ip-msg.small{font-size:14.5px;padding:9px 13px;max-width:84%}

/* Notification interne */
.ip-notif{align-self:stretch;background:#FFF7E8;border:1px solid #f1e2bf;color:#7a5b16;font-size:13.5px;font-weight:600;padding:9px 12px;border-radius:12px}

/* Indicateur "en train d'écrire" (apparaît puis disparaît, timing piloté par --d) */
.ip-typing{align-self:flex-start;display:inline-flex;gap:4px;background:#ECECEC;padding:12px 15px;border-radius:16px;border-bottom-left-radius:5px;opacity:0}
.iphone .ip-scene.active .ip-typing{animation:ipFlash .9s ease forwards;animation-delay:var(--d,1.2s)}
.ip-typing i{width:7px;height:7px;border-radius:50%;background:#15795A}
.iphone .ip-scene.active .ip-typing i{animation:ipDot 1s infinite}
.iphone .ip-scene.active .ip-typing i:nth-child(2){animation-delay:.15s}
.iphone .ip-scene.active .ip-typing i:nth-child(3){animation-delay:.3s}
@keyframes ipFlash{0%{opacity:0;transform:translateY(8px)}24%{opacity:1;transform:none}76%{opacity:1}100%{opacity:0;transform:translateY(-3px)}}
@keyframes ipDot{0%,60%,100%{transform:translateY(0);opacity:.45}30%{transform:translateY(-4px);opacity:1}}

/* Pied : badge */
.ip-foot{padding:11px 14px 30px;background:#fff;display:flex;justify-content:center;flex:none}
.ip-badge{background:#E8F2EC;color:#0C4C38;font-size:14px;font-weight:600;padding:8px 15px;border-radius:100px;text-align:center}
.ip-badge.light{background:rgba(255,255,255,.18);color:#fff}

/* Scène agenda */
.ip-agenda{gap:11px}
.ip-week{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;text-align:center}
.ip-week .dow{font-size:13px;font-weight:700;color:#9aa0a0;padding:7px 0;border-radius:8px;background:#F2F4F4}
.ip-week .dow.sat{color:#fff;background:#15795A}
.ip-slots{display:flex;flex-direction:column;gap:6px}
.ip-slot{display:flex;align-items:center;gap:9px;background:#F5F6F7;border-radius:11px;padding:9px 11px}
.ip-slot b{font-size:14px;color:#222;flex:none;width:48px}
.ip-slot span{font-size:13px;color:#9aa0a0}
.ip-slot .slot-fill,.ip-slot .slot-fill2{color:#0C4C38;font-weight:600}
.ip-slot.slot14{background:#E8F2EC}
/* Créneau samedi 10h : vide (blanc) → barre verte qui se remplit de gauche à droite (0.6s) à 3.5s, puis texte blanc en fondu */
.ip-slot.slot10{position:relative;overflow:hidden;background:#fff}
.ip-slot.slot10>b,.ip-slot.slot10>span{position:relative;z-index:1}
.ip-slot.slot10 .slot-bar{position:absolute;inset:0;z-index:0;background:#1B5E3B;transform:scaleX(0);transform-origin:left center}
.ip-slot.slot10 .slot-dash{color:#9aa0a0}
.ip-slot.slot10 .slot-fill{color:#fff;font-weight:600;opacity:0}
.iphone .ip-s2.active .ip-slot.slot10 .slot-bar{animation:ipSlotFill .6s ease 3.5s forwards}
.iphone .ip-s2.active .ip-slot.slot10 b{animation:ipSlotWhite .3s ease 3.9s forwards}
.iphone .ip-s2.active .ip-slot.slot10 .slot-dash{animation:ipFadeOut .3s ease 3.5s forwards}
.iphone .ip-s2.active .ip-slot.slot10 .slot-fill{animation:ipReveal .5s ease 4.1s both}
@keyframes ipSlotFill{to{transform:scaleX(1)}}
@keyframes ipSlotWhite{to{color:#fff}}
.ip-popup{background:#fff;border:1px solid #e4e8e4;border-left:3px solid #15795A;border-radius:12px;padding:11px 13px;box-shadow:0 8px 20px rgba(0,0,0,.08);display:flex;flex-direction:column;gap:2px}
.ip-popup b{font-size:16px;color:#15795A}
.ip-popup span{font-size:15px;color:#444}
.ip-sms{align-self:center;background:#ECECEC;color:#333;font-size:14px;padding:8px 14px;border-radius:100px;text-align:center}

/* Scène appel */
.ip-call{flex:1;background:linear-gradient(160deg,#0C4C38 0%,#15795A 58%,#0a3f2f 100%);color:#fff;padding:58px 18px 30px;display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center}
.ip-call-head{display:flex;flex-direction:column;align-items:center;gap:6px}
.ip-avatar{width:64px;height:64px;border-radius:50%;background:rgba(255,255,255,.16);display:grid;place-items:center;font-size:32px}
.ip-call-name{font-family:var(--fdisp);font-size:21px;font-weight:700}
.ip-call-num{font-size:17px;opacity:.85;letter-spacing:.5px}
.ip-call-sub{font-size:14px;opacity:.7}
.ip-call-btns{display:flex;gap:14px;margin-top:2px;opacity:0}
.iphone .ip-s3.active .ip-call-btns{animation:ipAnswer 1.3s ease 1s forwards}
.ip-btn-refuse,.ip-call-answer{display:inline-flex;align-items:center;justify-content:center;gap:8px;color:#fff;font-weight:700;font-size:15px;padding:11px 22px;border-radius:100px}
.ip-btn-refuse{background:#e0524b}
.ip-call-answer{background:#22b07d}
.iphone .ip-s3.active .ip-call-answer{animation:ipPulseBtn 1.3s ease-in-out 1s infinite}
@keyframes ipAnswer{0%{opacity:0;transform:scale(.82)}30%{opacity:1;transform:scale(1)}100%{opacity:1;transform:scale(1)}}
@keyframes ipPulseBtn{0%,100%{box-shadow:0 0 0 0 rgba(34,176,125,.5)}50%{box-shadow:0 0 0 10px rgba(34,176,125,0)}}
.ip-call-live{font-size:15px;background:rgba(255,255,255,.15);padding:6px 14px;border-radius:100px}
.ip-trans{width:100%;display:flex;flex-direction:column;gap:6px;margin-top:2px}
.ip-trans-line{background:rgba(255,255,255,.1);border-radius:11px;padding:9px 12px;font-size:15px;text-align:left;line-height:1.4}
.ip-trans-line b{color:#bfe9d6;font-weight:600}
.ip-call-result{font-size:15px;background:rgba(255,255,255,.16);padding:9px 13px;border-radius:11px;line-height:1.4}
.ip-call .ip-foot{background:none;padding:0;margin-top:auto}

/* Scène relances & suivi */
.ip-relances{gap:8px}
.ip-prospect{display:grid;grid-template-columns:1fr auto;align-items:center;gap:4px 8px;background:#F5F6F7;border-radius:12px;padding:9px 12px}
.ip-pname{font-size:15px;font-weight:700;color:#222}
.ip-pmeta{font-size:12px;color:#9aa0a0;grid-column:1}
.ip-stat{font-size:12px;font-weight:600;padding:5px 9px;border-radius:100px;white-space:nowrap}
.ip-prospect>.ip-stat{grid-row:1/3;grid-column:2}
.ip-stat.y{background:#FFF4D6;color:#8a6a13}
.ip-stat.r{background:#FCE3E1;color:#b23a31}
.ip-stat.g{background:#E1F3E9;color:#15795A}
/* Bascule de statut 🟡 → 🟢 avec flash (scène 4) */
.ip-stat-wrap{grid-row:1/3;grid-column:2;display:inline-grid;justify-items:end}
.ip-stat-wrap .ip-stat{grid-area:1/1}
.ip-stat-wrap .ip-stat.g{opacity:0}
.iphone .ip-s4.active .ip-stat-wrap .ip-stat.y{animation:ipFadeOut .4s ease 4.8s forwards}
.iphone .ip-s4.active .ip-stat-wrap .ip-stat.g{animation:ipStatFlash .6s ease 4.8s forwards}
@keyframes ipFadeOut{to{opacity:0}}
@keyframes ipStatFlash{0%{opacity:0;transform:scale(.82)}45%{opacity:1;transform:scale(1.14)}100%{opacity:1;transform:scale(1)}}
.ip-sentmark{align-self:flex-end;font-size:11px;color:#9aa0a0;margin-top:-2px}
.ip-amount{align-self:center;font-family:var(--fdisp);font-weight:800;font-size:30px;color:#15795A;letter-spacing:.5px;margin-top:2px}
.ip-statusline{align-self:center;background:#E8F2EC;color:#0C4C38;font-size:14px;font-weight:600;padding:8px 14px;border-radius:100px}
.ip-counter{align-self:stretch;text-align:center;background:#15795A;color:#fff;font-size:13.5px;font-weight:600;padding:9px 12px;border-radius:12px}

/* Mouvement réduit : tout visible, figé sur scène 1 */
.iphone.ip-static .reveal,.iphone.ip-static .ip-typing,.iphone.ip-static .ip-call-btns,.iphone.ip-static .ip-call-answer{opacity:1!important;transform:none!important;animation:none!important}
.iphone.ip-static *{animation:none!important}
/* ===== fin iPhone mockup ===== */

/* ===== Badges flottants — par-dessus le téléphone (+25%) ===== */
.hero-mock .float{z-index:70;padding:13.5px 18px;border-radius:18px;gap:10px;font-size:14.4px}
.hero-mock .float small{font-size:12.2px}
.hero-mock .float .ic{width:38px;height:38px;border-radius:11px}
.hero-mock .float .ic svg{width:19px;height:19px}
.hero-mock .float.a{top:-30px;left:calc(50% - 300px);right:auto;bottom:auto}
.hero-mock .float.b{bottom:-26px;right:calc(50% - 282px);left:auto;top:auto}

/* Integrations */
.integ{background:var(--bg-2);padding:32px 0;overflow:hidden}
.integ .wrap{display:block;padding-top:0;padding-bottom:0}
.integ .lbl{display:block;text-align:center;font-size:16px;font-weight:800;color:var(--brand);letter-spacing:.005em;margin-bottom:22px}
.logo-marquee{position:relative;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)}
.logo-track{display:flex;gap:14px;width:max-content}
/* L'animation n'est PAS sur la règle de base (.logo-track est vide au parse, iOS ne
   relançait pas l'anim après injection innerHTML). Elle est portée par .is-running,
   ajoutée en JS après remplissage + reflow → démarrage fiable dès le 1er chargement. */
.logo-track.is-running{animation:logoscroll 48s linear infinite}
.logo-marquee:hover .logo-track{animation-play-state:paused}
@keyframes logoscroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.logo-chip{display:inline-flex;align-items:center;gap:10px;background:transparent;border:none;box-shadow:none;border-radius:0;padding:6px 16px;white-space:nowrap}
.logo-chip .mono{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;color:#fff;font-family:var(--fdisp);font-weight:800;font-size:14px;flex:none;letter-spacing:-.02em}
.logo-chip .slot{width:30px;height:30px;flex:none;border-radius:8px;background:transparent;border:none;background-size:contain;background-position:center;background-repeat:no-repeat}
.logo-chip .nm{font-family:var(--fdisp);font-weight:700;font-size:16px;color:var(--ink-2);letter-spacing:-.01em}
.integ-row{display:flex;align-items:center;gap:28px;max-width:1220px;margin:0 auto;padding:0 var(--mx)}
.integ-row>.lbl{flex:none;width:auto;white-space:nowrap;text-align:left;font-size:15px;font-weight:800;color:var(--brand);margin:0;line-height:1.3}
.integ-row .logo-marquee{flex:1;min-width:0}
@media(max-width:760px){.integ-row{flex-direction:column;align-items:flex-start;gap:14px}.integ-row>.lbl{width:auto;white-space:normal;text-align:center;align-self:stretch}}

/* Sections */
.sec{padding:clamp(68px,8vw,124px) 0}
.sec.tight{padding:clamp(48px,6vw,84px) 0}
.sec-head{max-width:700px;margin-bottom:52px}
.sec-head.center{margin-left:auto;margin-right:auto;text-align:center}
.sec-head h2{font-size:clamp(30px,3.8vw,48px);margin-top:16px;font-weight:800;letter-spacing:-.03em}
.sec-head p{color:var(--muted);font-size:19px;margin-top:18px}

/* Page hero (interior pages) */
.phero{padding:clamp(56px,7vw,96px) 0 clamp(20px,3vw,40px);position:relative;overflow:hidden}
.phero .halo{top:-30%;left:50%;right:auto;transform:translateX(-50%);width:760px;height:600px}
.phero .wrap{position:relative;z-index:1}
.phero-inner{max-width:760px}
.phero.center .phero-inner{margin:0 auto;text-align:center}
.phero h1{font-size:clamp(34px,4.6vw,56px)}
.phero p.lead{font-size:clamp(18px,1.6vw,21px);color:var(--muted);margin:22px 0 30px;max-width:34em}
.phero.center p.lead{margin-left:auto;margin-right:auto}
.crumb{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted-2);margin-bottom:18px}
.phero.center .crumb{justify-content:center}
.crumb a:hover{color:var(--brand-d)}
.crumb svg{width:14px;height:14px}

/* Problem grid — interactive "ça brûle" badges */
.prob-badges{display:grid;grid-template-columns:1fr 1fr;gap:14px;max-width:900px;margin:0 auto}
.prob-badge{text-align:left;font-family:inherit;color:var(--ink);background:var(--card);border:1px solid var(--line);border-radius:var(--r-m);padding:16px 18px;cursor:pointer;transition:transform .16s,box-shadow .16s,background .25s,color .25s,border-color .25s}
.prob-badge:hover{transform:translateY(-2px);box-shadow:var(--sh-s)}
.pb-row{display:flex;align-items:center;gap:12px}
.pb-ic{width:34px;height:34px;border-radius:10px;background:var(--clay-tint);color:var(--clay-ink);display:grid;place-items:center;flex:none;transition:background .25s,color .25s}
.pb-ic svg{width:18px;height:18px}
.pb-t{font-family:var(--fdisp);font-weight:700;font-size:16px;letter-spacing:-.01em;flex:1;min-width:0;line-height:1.2}
.pb-check{width:24px;height:24px;border-radius:8px;border:2px solid var(--line);display:grid;place-items:center;flex:none;color:transparent;transition:border-color .2s,background .2s,color .2s}
.pb-check svg{width:14px;height:14px}
.pb-d{font-size:13.5px;line-height:1.45;color:var(--muted);margin:8px 0 0 46px;transition:color .25s}
.prob-badge.on{color:#fff;border-color:transparent;animation:burn 1.5s ease-in-out infinite}
.prob-badge.on .pb-ic{background:rgba(255,255,255,.22);color:#fff}
.prob-badge.on .pb-d{color:rgba(255,255,255,.92)}
.prob-badge.on .pb-check{border-color:#fff;background:#fff;color:#E53E1A}
@keyframes burn{0%,100%{background:#E53E1A;box-shadow:0 12px 30px -12px rgba(229,62,26,.55)}50%{background:#FF6A3D;box-shadow:0 16px 40px -10px rgba(255,106,61,.72)}}
@media(prefers-reduced-motion:reduce){.prob-badge.on{animation:none;background:#E53E1A;box-shadow:0 12px 30px -12px rgba(229,62,26,.55)}}

/* Problem totals + CTA */
.prob-totals{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;max-width:900px;margin:42px auto 0}
.tot-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-l);padding:34px 24px;text-align:center;transition:border-color .3s,box-shadow .3s}
.tot-card.hot{border-color:rgba(229,62,26,.35);box-shadow:0 18px 40px -22px rgba(229,62,26,.45)}
.tot-num{font-family:var(--fdisp);font-weight:800;font-size:clamp(36px,4.6vw,56px);letter-spacing:-.03em;color:var(--ink);line-height:1;font-variant-numeric:tabular-nums;transition:color .3s}
.tot-card.hot .tot-num{color:#E53E1A}
.tot-lbl{font-size:14px;color:var(--muted);margin-top:14px;font-weight:600}
.tot-note{font-size:10.5px;font-style:italic;color:var(--muted);margin-top:8px;line-height:1.3;opacity:.85;white-space:nowrap}
.prob-cta{text-align:center;margin-top:38px}

/* "Le coût de l'inaction" — fond dégradé rouge sang + vague de transition */
.sec.cout{position:relative;background:#0a0809;color:#fff;overflow:hidden}
.sec.cout .cout-smoke{position:absolute;inset:0;width:100%;height:100%;z-index:0;display:block;pointer-events:none}
.sec.cout::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(120% 95% at 50% 38%,rgba(0,0,0,0) 42%,rgba(0,0,0,.55) 100%)}
.sec.cout .wrap{position:relative;z-index:1}
.sec.cout .eyebrow{color:#FF5436}
.sec.cout .sec-head h2{color:#fff}
.sec.cout .sec-head p{color:#FFC9BD}
.cout-wave{display:none}

/* "La Réponse" — fond organique vert soyeux, prolongé en vague (continu) */
.sec.reponse{position:relative;z-index:1;background:#e7f1e9;overflow:hidden;margin-top:calc(-1 * clamp(54px,7vw,104px));padding-top:clamp(104px,13vw,184px);clip-path:url(#reponseTop)}
.sec.reponse::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:transparent center/cover no-repeat;transform-origin:center;animation:seaDrift 10s ease-in-out infinite;will-change:transform}
.sec.reponse.bg-on::before{background-image:url(fonds/fond-vert-16-9.png);background-image:image-set(url(fonds/fond-vert-16-9.webp) type("image/webp"),url(fonds/fond-vert-16-9.png) type("image/png"))}
.sec.reponse::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(180deg,rgba(248,251,248,.26),rgba(248,251,248,.32) 55%,rgba(248,251,248,.46))}
.sec.reponse .wrap{position:relative;z-index:1}
.sec.reponse .concept{background:rgba(255,255,255,.74);border:1px solid rgba(255,255,255,.7);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.btn-cta{background:var(--brand-d);color:#fff;font-size:16px;padding:16px 30px}
.btn-cta:hover{background:var(--brand);transform:translateY(-2px);box-shadow:0 16px 32px -14px rgba(12,76,56,.55)}
@media(max-width:640px){.prob-badges{grid-template-columns:1fr}.prob-totals{grid-template-columns:1fr}}

/* Solution concept + benefits */
.concept{background:var(--mint);border-radius:var(--r-l);padding:clamp(28px,3.6vw,46px);font-family:var(--fdisp);font-weight:600;font-size:clamp(20px,2.1vw,27px);line-height:1.42;letter-spacing:-.02em;color:var(--ink);max-width:980px;margin:0 auto}
.concept b{color:var(--brand-d)}
.bgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:44px}
.bcard{position:relative;overflow:hidden;background:var(--bg-2);border:1px solid rgba(20,50,36,.07);border-radius:var(--r-m);padding:28px;box-shadow:var(--sh-s);transition:transform .3s ease,box-shadow .3s ease}
.bcard:hover{transform:translateY(-4px) scale(1.03);box-shadow:var(--sh)}
.bcard-deco{position:absolute;right:-20px;bottom:-26px;z-index:0;opacity:.16;pointer-events:none;line-height:0;transform-origin:bottom right;transition:transform .45s cubic-bezier(.2,.8,.2,1),opacity .3s ease}
.bcard-deco svg{width:150px;height:150px;display:block}
.bcard:hover .bcard-deco{transform:scale(1.1) rotate(3deg);opacity:.24}
.bcard.g-green .bcard-deco{color:#0f9d6b}
.bcard.g-blue .bcard-deco{color:#2f7ed8}
.bcard.g-amber .bcard-deco{color:#d98324}
.bcard.g-purple .bcard-deco{color:#7c5cff}
.bcard .bcard-head,.bcard>p{position:relative;z-index:1}
.bcard .bcard-head{display:flex;align-items:center;gap:13px;margin-bottom:14px}
.bcard .ic{width:42px;height:42px;border-radius:12px;background:var(--mint);color:var(--brand-d);display:grid;place-items:center;flex:none}
.bcard .ic svg{width:21px;height:21px}
.bcard h4{font-size:17px;line-height:1.2;margin:0}
.bcard p{font-size:14px;color:var(--ink-2)}

/* Packs selector */
.packs{background:var(--bg-2)}
.packs .sec-head{margin-bottom:26px}
.selector{max-width:780px;margin:0 auto}
.sel-control{margin-bottom:28px;text-align:center}
.sel-box{position:relative;max-width:460px;margin:0 auto}
.sel-box select{appearance:none;width:100%;font-family:var(--fbody);font-size:17px;font-weight:600;color:var(--ink);background:var(--card);border:1px solid var(--line);border-radius:100px;padding:16px 48px 16px 22px;cursor:pointer;box-shadow:var(--sh-s)}
.sel-box select:focus{outline:none;border-color:var(--brand)}
.sel-box .chev{position:absolute;right:20px;top:50%;transform:translateY(-50%);pointer-events:none;color:var(--muted)}
.offer{background:var(--card);border:1px solid var(--line);border-radius:var(--r-l);padding:clamp(28px,3.4vw,44px);box-shadow:var(--sh)}
.offer-badges{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:20px}
.offer-badges span{font-size:12px;font-weight:600;color:var(--brand-d);background:var(--mint);border-radius:100px;padding:6px 14px}
.offer-top{display:flex;gap:18px;align-items:flex-start}
.offer-ic{width:58px;height:58px;border-radius:16px;background:var(--brand);color:#fff;display:grid;place-items:center;flex:none}
.offer-ic svg{width:28px;height:28px}
.offer h3{font-size:clamp(24px,2.5vw,32px);font-weight:800;letter-spacing:-.02em}
.offer .desc{color:var(--muted);font-size:16px;margin-top:6px}
.offer .price{margin:24px 0;padding:20px 0;border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2);display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.offer .price .big{font-family:var(--fdisp);font-size:36px;font-weight:800;letter-spacing:-.02em}
.offer .price .small{font-size:14px;color:var(--muted)}
.offer-actions{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:28px}
.offer .listttl{font-size:13px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin-bottom:16px}
.agent-list{display:grid;grid-template-columns:1fr 1fr;gap:13px 24px;margin-bottom:30px}
.agent-list li{list-style:none;display:flex;gap:11px;font-size:14.5px;align-items:flex-start}
.agent-list li svg{width:20px;height:20px;color:var(--brand);flex:none;margin-top:1px}
.offer-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;border-top:1px solid var(--line-2);padding-top:26px}
.offer-stats .st{text-align:center;background:var(--mint-2);border-radius:16px;padding:18px 10px}
.offer-stats .st b{font-family:var(--fdisp);font-size:27px;font-weight:800;color:var(--brand-d);display:block}
.offer-stats .st span{font-size:12.5px;color:var(--muted)}
.sel-foot{text-align:center;margin-top:32px}

/* CircularGallery — 16 packs métier (rotation manuelle 3D) */
.cgal{position:relative;width:100%;margin:8px auto 6px;display:flex;align-items:center;justify-content:center;outline:none}
.cgal-viewport{position:relative;width:100%;margin:0 auto;height:min(78vh,680px);perspective:1600px;perspective-origin:50% 50%;overflow:hidden;touch-action:pan-y;cursor:grab;user-select:none;-webkit-user-select:none}
.cgal.is-dragging .cgal-viewport{cursor:grabbing}
.cgal-stage{position:absolute;inset:0;transform-style:preserve-3d}
.cgal-card{position:absolute;left:50%;top:50%;width:min(420px,84vw);height:min(74vh,650px);transform-origin:center center;will-change:transform,opacity;border-radius:var(--r-l);overflow:hidden;box-shadow:0 26px 60px rgba(15,70,42,.18)}
.cgal-card .offer{height:100%;overflow-y:auto;overflow-x:hidden;border-radius:var(--r-l);-webkit-overflow-scrolling:touch;padding:clamp(22px,2.4vw,32px)}
.cgal-card.is-front{box-shadow:0 40px 90px rgba(15,70,42,.34)}
.cgal-card .offer::-webkit-scrollbar{width:8px}
.cgal-card .offer::-webkit-scrollbar-thumb{background:rgba(21,121,90,.32);border-radius:100px}
.cgal-card .offer::-webkit-scrollbar-track{background:transparent}
.cgal-card .agent-list{grid-template-columns:1fr;gap:11px;margin-bottom:24px}
.cgal-card .offer-top h3{font-size:clamp(20px,2vw,26px)}
.cgal-card .price{margin:18px 0;padding:16px 0}
.cgal-card .price .big{font-size:30px}
.cgal-card .offer-actions{margin-bottom:22px}
/* flèches de navigation (position fine ajustée en JS aux bords de la fenêtre) */
.cgal-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:30;width:52px;height:52px;border-radius:50%;border:1px solid var(--line);background:var(--card);color:var(--brand-d);display:grid;place-items:center;cursor:pointer;box-shadow:var(--sh);transition:transform .2s ease,background .2s ease}
.cgal-arrow:hover{background:var(--mint);transform:translateY(-50%) scale(1.06)}
.cgal-arrow:active{transform:translateY(-50%) scale(.96)}
.cgal-arrow svg{width:22px;height:22px}
.cgal-prev{left:clamp(8px,3vw,40px)}
.cgal-prev svg{transform:rotate(180deg)}
.cgal-next{right:clamp(8px,3vw,40px)}
.cgal-hint{position:absolute;bottom:6px;left:50%;transform:translateX(-50%);z-index:30;display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;color:var(--brand-d);background:rgba(255,255,255,.82);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);padding:7px 15px;border-radius:100px;box-shadow:var(--sh-s);pointer-events:none}
.cgal-hint svg{width:16px;height:16px}
@media (max-width:980px){
  .cgal-viewport{height:min(80vh,620px)}
  .cgal-arrow{width:46px;height:46px}
}
@media (max-width:600px){
  .cgal-viewport{height:78vh;perspective:1200px}
  .cgal-card{width:90vw;height:76vh}
  .cgal-card .offer{padding:20px}
  .cgal-arrow{width:42px;height:42px;background:rgba(255,255,255,.9)}
}
@media (prefers-reduced-motion:reduce){.cgal-stage{will-change:auto}}

/* How it works */
.softbg{position:relative;overflow:hidden;background:#e7f1e9}
@keyframes seaDrift{0%{transform:scale(1.12) translate(0%,0%)}25%{transform:scale(1.16) translate(-2.6%,1.6%)}50%{transform:scale(1.12) translate(1.4%,2.6%)}75%{transform:scale(1.15) translate(2.6%,-1.4%)}100%{transform:scale(1.12) translate(0%,0%)}}
@media (prefers-reduced-motion: reduce){.hero-bg,.sec.reponse::before,.softbg::before{animation:none}}

/* ===== Fond animé « mer / vague » — page Nos Packs uniquement ===== */
.packs-bg{display:none}
body[data-page="packs"]{background:transparent}
/* Empêche le rebond de sur-défilement de révéler le fond vert fixe au-dessus du menu / sous le footer (page Nos offres uniquement) */
html:has(body[data-page="packs"]){overscroll-behavior:none}
body[data-page="packs"] .packs-bg{display:block;position:fixed;inset:0;z-index:-1;pointer-events:none;background:transparent center/cover no-repeat;background-image:url(fonds/fond-vert-16-9.png);background-image:image-set(url(fonds/fond-vert-16-9.webp) type("image/webp"),url(fonds/fond-vert-16-9.png) type("image/png"));transform-origin:center;animation:seaDrift 10s ease-in-out infinite;will-change:transform}
@media (prefers-reduced-motion: reduce){body[data-page="packs"] .packs-bg{animation:none}}
/* packs mobile : statique puis léger zoom après chargement (comme l'accueil) */
@media (max-width:768px){
  body[data-page="packs"] .packs-bg{animation:none}
  html.bgloaded body[data-page="packs"] .packs-bg{animation:bgZoom 12s ease-in-out infinite}
}
/* ===== Fonds verts responsive — l'image suit l'orientation/taille de l'écran =====
   Base (paysage) = 16:9 ci-dessus. Portrait tablette → 2:3, portrait mobile → 9:16. */
@media (orientation:portrait) and (min-width:601px){
  .hero-bg,.sec.reponse.bg-on::before,.softbg.bg-on::before,.sem-bg.bg-on::before,
  body[data-page="packs"] .packs-bg{background-image:url(fonds/fond-vert-2-3.png);background-image:image-set(url(fonds/fond-vert-2-3.webp) type("image/webp"),url(fonds/fond-vert-2-3.png) type("image/png"));background-image:url(fonds/fond-vert-2-3.webp)}
}
@media (orientation:portrait) and (max-width:600px){
  .hero-bg,.sec.reponse.bg-on::before,.softbg.bg-on::before,.sem-bg.bg-on::before,
  body[data-page="packs"] .packs-bg{background-image:url(fonds/fond-vert-9-16.png);background-image:image-set(url(fonds/fond-vert-9-16.webp) type("image/webp"),url(fonds/fond-vert-9-16.png) type("image/png"));background-image:url(fonds/fond-vert-9-16.webp)}
}
/* Lisibilité sur le fond vague : passage en blanc des deux intitulés */
body[data-page="packs"] .phero p.lead{color:#1A1A1A}
body[data-page="packs"] .packhub-or span{color:#1A1A1A}
/* ===== fin fond Nos Packs ===== */
.softbg::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:transparent center/cover no-repeat;transform-origin:center;animation:seaDrift 9s ease-in-out infinite;will-change:transform}
.softbg.bg-on::before{background-image:url(fonds/fond-vert-16-9.png);background-image:image-set(url(fonds/fond-vert-16-9.webp) type("image/webp"),url(fonds/fond-vert-16-9.png) type("image/png"))}
.softbg::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(180deg,rgba(251,249,244,.7),rgba(248,251,248,.5) 50%,rgba(251,249,244,.7))}
.softbg>.wrap{position:relative;z-index:1}
.video-ph{margin:0 auto 60px;max-width:940px;aspect-ratio:16/9;border-radius:var(--r-l);background:linear-gradient(135deg,var(--mint),var(--clay-tint));display:grid;place-items:center;position:relative;border:1px solid var(--line)}
.video-ph .play{width:74px;height:74px;border-radius:50%;background:#fff;color:var(--brand);display:grid;place-items:center;box-shadow:var(--sh)}
.video-ph .play svg{width:26px;height:26px;margin-left:3px}
.video-ph .cap{position:absolute;bottom:18px;left:18px;font-size:12px;color:var(--brand-d);background:rgba(255,255,255,.85);padding:6px 12px;border-radius:100px;font-weight:600}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;position:relative}
.steps-progress{position:absolute;top:50px;left:50px;right:calc((100% - 72px)/4 - 50px);height:3px;z-index:0;overflow:hidden}
.steps-progress-fill{display:block;width:100%;height:3px;background-image:repeating-linear-gradient(to right,var(--brand) 0 9px,transparent 9px 17px);background-repeat:repeat-x;border-radius:2px}
.step{position:relative;z-index:1;background:var(--card);border:1px solid var(--line);border-radius:var(--r-m);padding:26px;transition:transform .18s,box-shadow .18s}
.step:hover{transform:translateY(-4px);box-shadow:var(--sh)}
.step-head{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.step .num{width:48px;height:48px;border-radius:50%;background:var(--mint);color:var(--brand-d);display:grid;place-items:center;font-family:var(--fdisp);font-weight:800;font-size:19px;flex:none}
.step .when{font-size:12.5px;font-weight:600;color:var(--brand);margin-bottom:6px;text-transform:uppercase;letter-spacing:.05em}
.step h4{font-size:17px;margin:0;line-height:1.25}
.step p{font-size:14px;color:var(--muted)}
/* Scroll reveal (stagger + progress draw) */
@media(prefers-reduced-motion:no-preference){
  .steps.reveal .step{opacity:0;transform:translateY(30px);transition:opacity .6s ease-out,transform .6s ease-out}
  .steps.reveal.in .step{opacity:1;transform:none}
  .steps.reveal.in .step:nth-child(2){transition-delay:0ms}
  .steps.reveal.in .step:nth-child(3){transition-delay:.2s}
  .steps.reveal.in .step:nth-child(4){transition-delay:.4s}
  .steps.reveal.in .step:nth-child(5){transition-delay:.6s}
  .steps.reveal .steps-progress-fill{width:0;transition:width .8s ease-out .1s}
  .steps.reveal.in .steps-progress-fill{width:100%}
}

/* ===== ScrollExpandMedia "Le déroulé" (vidéo qui s'agrandit au scroll) ===== */
.sem-section{position:relative}
/* sticky exige un ancêtre SANS overflow:hidden -> on neutralise le clip de .softbg
   (sur cette section uniquement) et on remet le fond vert dans un calque interne
   clippé. La CTA finale .softbg reste 100% intacte. */
.softbg.sem-section{overflow:visible;padding-top:0;padding-bottom:0}
.softbg.sem-section::before,.softbg.sem-section::after{display:none}
.sem-bg{position:sticky;top:0;height:100vh;margin-bottom:-100vh;z-index:0;overflow:hidden;pointer-events:none}
.sem-bg::before{content:"";position:absolute;inset:0;background:transparent center/cover no-repeat;transform-origin:center;animation:seaDrift 12s ease-in-out infinite;will-change:transform}
.sem-bg.bg-on::before{background-image:url(fonds/fond-vert-16-9.png);background-image:image-set(url(fonds/fond-vert-16-9.webp) type("image/webp"),url(fonds/fond-vert-16-9.png) type("image/png"))}
.sem-bg::after{display:none}
@media (prefers-reduced-motion:reduce){.sem-bg::before{animation:none}}
.sem-pin{position:relative;z-index:1;height:220vh}
.sem-stage{position:sticky;top:0;height:100vh;overflow:hidden;display:flex;align-items:center;justify-content:center}
/* Zone haute : vidéo de fond ; titre & player restent au-dessus */
.sem-stage-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;pointer-events:none}
.sem-head{position:absolute;top:clamp(34px,7vh,80px);left:0;right:0;z-index:4;margin:0;pointer-events:none;will-change:opacity,transform}
.sem-media{position:relative;overflow:hidden;z-index:2;width:min(340px,78vw);height:auto;aspect-ratio:16/9;border-radius:22px;border:1px solid rgba(255,255,255,.45);box-shadow:0 30px 70px rgba(15,70,42,.30);background:linear-gradient(135deg,#1B5E3B,#2E8B5A 55%,#13502F)}
.sem-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .45s ease}
.sem-media.is-playing .sem-video{opacity:1}
.sem-poster{position:absolute;inset:0;background:radial-gradient(120% 82% at 30% 18%,rgba(168,212,184,.28),transparent 60%),linear-gradient(135deg,#1B5E3B,#2E8B5A 55%,#13502F);transition:opacity .45s ease}
.sem-media.is-playing .sem-poster{opacity:0}
.sem-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:74px;height:74px;border-radius:50%;background:rgba(255,255,255,.92);color:var(--brand);display:grid;place-items:center;box-shadow:var(--sh);z-index:3;transition:opacity .3s ease}
.sem-play svg{width:26px;height:26px;margin-left:3px}
.sem-media.is-playing .sem-play{opacity:0}
.sem-cap{position:absolute;bottom:16px;left:16px;font-size:12px;color:var(--brand-d);background:rgba(255,255,255,.88);padding:6px 12px;border-radius:100px;font-weight:600;z-index:3;white-space:nowrap;transition:opacity .3s ease}
.sem-media.is-playing .sem-cap{opacity:0}
/* contenu sous la vidéo */
.sem-after{position:relative;z-index:1;padding-top:clamp(48px,7vh,84px);padding-bottom:clamp(48px,7vh,84px)}
.sem-after .step{opacity:0;transform:translateY(28px);transition:opacity .6s ease-out,transform .6s ease-out}
.sem-after.in .step{opacity:1;transform:none}
.sem-after.in .step:nth-child(3){transition-delay:.12s}
.sem-after.in .step:nth-child(4){transition-delay:.24s}
.sem-after.in .step:nth-child(5){transition-delay:.36s}
.sem-after .steps-progress-fill{width:0}
.sem-after.in .steps-progress-fill{width:100%;transition:width .8s ease-out .15s}
/* cards blanches semi-transparentes : le fond vert reste visible au travers */
.sem-section .step{background:rgba(255,255,255,.92);-webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px);border-color:rgba(255,255,255,.6)}
/* description plus foncée pour une meilleure lisibilité */
.sem-section .step p{color:var(--ink-2)}
/* repli "mouvement réduit" : pas d'expansion, rendu statique lisible */
.sem-section.sem-static .sem-pin{height:auto}
.sem-section.sem-static .sem-stage{position:static;height:auto;display:block;padding:clamp(40px,6vw,80px) 0 0}
.sem-section.sem-static .sem-head{position:static}
.sem-section.sem-static .sem-media{width:min(940px,92vw);height:auto;aspect-ratio:16/9;margin:32px auto 0;border-radius:var(--r-l)}
.sem-section.sem-static .sem-after .step{opacity:1;transform:none}
/* Fond vidéo dégradé vert — uniquement mobile — sur hero / réponse / déroulé / CTA finale */
.m-vbg{display:none}
/* Smartphone : pas de scroll-jacking sur le déroulé — titre + player + 4 étapes
   en carrousel défilant horizontal, sur le fond vidéo dégradé vert. */
@keyframes bgZoom{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
@media (max-width:768px){
  /* HERO mobile — on RÉUTILISE exactement le fond animé du desktop (.hero-bg +
     .hero-bg-veil), pas une version dédiée. .hero-bg bascule automatiquement sur
     l'image portrait HAUTE DÉF fond-vert-9-16.webp (1632×2912) via les media queries
     @media (orientation:portrait) plus haut, et garde l'animation « vague mer »
     seaDrift. On abandonne la couche .m-vbg (dégradé plat) qui remplaçait le fond. */
  .m-vbg{display:none}
  /* .halo = halo radial décoratif (coin haut-droit). Sur mobile, le BORD GAUCHE de
     sa boîte (au centre du hero) laissait apparaître une marche verticale : le radial
     a un alpha non nul à ce bord → « trait » au milieu. On le masque sur mobile pour
     garantir un fond sans aucune couture verticale. */
  .hero .halo{display:none}
  /* iOS Safari ne peignait pas un calque de fond animé en transform:scale() 2D
     + will-change:transform → il ne restait que le vert uni #e7f1e9 dessous.
     SOLUTION : on RÉTABLIT l'animation « vague mer » du desktop sur TOUTES les sections
     mobiles (hero + Réponse + Le déroulé + CTA finale), mais via un keyframe en
     transformations 3D (scale3d/translate3d → seaDriftM). Les transforms 3D forcent un
     calque composité GPU à chaque frame : iOS Safari l'anime ET le peint de façon fiable
     (contrairement au scale() 2D + will-change qui restait blanc/uni). On garde le
     cadrage portrait net (background-size:cover + image 9:16 via les media queries
     d'orientation plus haut). Pas de will-change (c'était lui le coupable du non-paint).
     Durées reprises du desktop : hero 8s, Réponse 10s, CTA/softbg 9s, Déroulé/sem-bg 12s. */
  .hero-bg,.sec.reponse::before,.softbg::before,.sem-bg::before{will-change:auto;-webkit-backface-visibility:hidden;backface-visibility:hidden}
  .hero-bg{animation:seaDriftM 8s ease-in-out infinite}
  .sec.reponse::before{animation:seaDriftM 10s ease-in-out infinite}
  .softbg::before{animation:seaDriftM 9s ease-in-out infinite}
  .sem-bg::before{animation:seaDriftM 12s ease-in-out infinite}
  @keyframes seaDriftM{
    0%{transform:scale3d(1.12,1.12,1) translate3d(0%,0%,0)}
    25%{transform:scale3d(1.16,1.16,1) translate3d(-2.6%,1.6%,0)}
    50%{transform:scale3d(1.12,1.12,1) translate3d(1.4%,2.6%,0)}
    75%{transform:scale3d(1.15,1.15,1) translate3d(2.6%,-1.4%,0)}
    100%{transform:scale3d(1.12,1.12,1) translate3d(0%,0%,0)}
  }
  .hero .wrap,.sec.reponse .wrap{position:relative;z-index:1}
  .cta-final{position:relative;overflow:hidden}
  .cta-final .wrap{position:relative;z-index:1}
  .sec.reponse::after{display:none}
  /* Vague d'accord rouge→vert : sur mobile la section est très haute, donc la vague
     (clip en % de hauteur) plongeait plus bas que le chevauchement rouge (54px) et
     laissait apparaître le fond crème du body → bande blanche. On applique une vague
     bien moins profonde (creux ≈ 40px < 54px) : le rouge couvre toute la vague. */
  .sec.reponse{clip-path:url(#reponseTopM)}
  .sem-stage-video{display:none}
  .sem-bg{display:block}
  .softbg.sem-section{background:transparent}
  .sem-section .sem-after .steps{display:flex;grid-template-columns:none;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;gap:14px;padding:4px 4px 18px;scroll-padding-left:4px;scrollbar-width:none}
  .sem-section .sem-after .steps::-webkit-scrollbar{display:none}
  .sem-section .sem-after .steps .step{flex:0 0 84%;scroll-snap-align:center;margin:0}
  .sem-section .sem-after .steps-progress{display:none}
}

/* Reassurance */
.rgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.rcard{background:var(--card);border:1px solid var(--line);border-radius:var(--r-m);padding:26px 30px;transition:transform .18s,box-shadow .18s}
.rcard:hover{transform:translateY(-5px);box-shadow:var(--sh)}
.rcard-head{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.rcard .ic{width:46px;height:46px;border-radius:13px;background:var(--mint);color:var(--brand-d);display:grid;place-items:center;flex:none}
.rcard .ic svg{width:22px;height:22px}
.rcard h4{font-size:18px;margin:0;line-height:1.25}
.rcard p{font-size:14.5px;color:var(--muted)}

/* ===== Planète + faisceaux + badges 2 par 2 "Pourquoi NoctisOne ?" ===== */
.why-globe{position:relative;height:180vh;padding:0}
.why-stage{position:sticky;top:0;height:100vh;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding-bottom:clamp(20px,4vh,48px)}
.why-paths{position:absolute;inset:0;z-index:0;color:var(--brand-d);pointer-events:none}
.why-paths svg{width:100%;height:100%;display:block}
.why-head{position:absolute;top:clamp(40px,7vh,84px);left:0;right:0;z-index:5;margin:0;pointer-events:none}
.why-planet-wrap{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;width:min(620px,88vw,72vh);height:min(620px,88vw,72vh)}
.why-planet{display:block;border-radius:50%;filter:drop-shadow(0 26px 54px rgba(15,70,42,.30))}
/* badges en overlay, centrés sur la sphère, révélés 2 par 2 */
.why-badges{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:4;width:min(660px,92vw);height:0;pointer-events:none}
.why-pair{position:absolute;left:50%;top:50%;display:flex;gap:18px;justify-content:center;width:100%;will-change:opacity,transform}
.why-badge{flex:1 1 0;max-width:290px;background:rgba(255,255,255,.86);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.7);border-radius:18px;padding:20px 22px;box-shadow:0 20px 46px rgba(20,50,36,.22)}
.why-badge .rcard-head{display:flex;align-items:center;gap:12px;margin:0 0 10px}
.why-badge .ic{width:44px;height:44px;border-radius:12px;background:var(--mint);color:var(--brand-d);display:grid;place-items:center;flex:none}
.why-badge .ic svg{width:22px;height:22px}
.why-badge h4{font-size:17px;margin:0;line-height:1.25}
.why-badge p{font-size:14px;line-height:1.5;color:#16201a;margin:0}
.why-fallback{display:none}
/* repli : mobile / reduced-motion → grille classique + petit globe */
.why-globe--static{height:auto;padding:clamp(54px,7vw,96px) 0}
.why-globe--static .why-stage{position:static;height:auto;display:block;overflow:visible}
.why-globe--static .why-head{position:static;margin-bottom:18px}
.why-globe--static .why-planet-wrap{margin:8px auto 32px;width:min(280px,72vw);height:min(280px,72vw)}
.why-globe--static .why-badges{display:none}
.why-globe--static .why-fallback{display:block}

/* CTA panel */
.cta-final{padding:clamp(64px,7vw,108px) 0}
.cta-panel{background:linear-gradient(140deg,var(--brand),var(--brand-d));border-radius:var(--r-l);padding:clamp(44px,6vw,84px);text-align:center;position:relative;overflow:hidden}
.cta-panel::before{content:"";position:absolute;top:-40%;right:-10%;width:50%;height:160%;background:radial-gradient(circle,rgba(255,255,255,.12),transparent 60%)}
.cta-panel>*{position:relative;z-index:1}
.cta-panel h2{color:#fff;font-size:clamp(30px,4.2vw,50px);font-weight:800;max-width:15em;margin:0 auto;letter-spacing:-.03em}
.cta-panel p{color:rgba(255,255,255,.82);font-size:19px;margin:20px auto 34px;max-width:none;white-space:nowrap}
.cta-panel .row{display:flex;gap:14px;justify-content:center;align-items:center;flex-wrap:wrap}
.cta-panel .link-arrow{color:#fff}
.cta-panel .btn-outline{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.55)}
.cta-panel .btn-outline:hover{background:rgba(255,255,255,.16);border-color:#fff;transform:translateY(-1px)}

/* Footer */
footer{background:var(--bg-2);padding:64px 0 36px}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:30px}
.foot-brand .logo{margin-bottom:16px}
.foot-brand p{font-size:14.5px;color:var(--muted);max-width:24em}
.fcol h5{font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-2);margin-bottom:16px}
.fcol a{display:block;font-size:14.5px;color:var(--muted);padding:6px 0;transition:color .15s}
.fcol a:hover{color:var(--brand-d)}
.foot-bottom{display:flex;justify-content:space-between;align-items:center;margin-top:50px;padding-top:26px;border-top:1px solid var(--line);font-size:13px;color:var(--muted-2);flex-wrap:wrap;gap:12px}

/* ===== Nos Packs (hub) ===== */
.packhub-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.packhub-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-m);padding:26px;display:flex;flex-direction:column;transition:transform .18s,box-shadow .18s;color:inherit}
.packhub-card:hover{transform:translateY(-5px);box-shadow:var(--sh)}
.packhub-card .top{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.packhub-card .ic{width:52px;height:52px;border-radius:14px;background:var(--mint);color:var(--brand-d);display:grid;place-items:center}
.packhub-card .ic svg{width:25px;height:25px}
.packhub-card .from{font-size:12px;font-weight:600;color:var(--muted);text-align:right;line-height:1.3}
.packhub-card .from b{display:block;font-family:var(--fdisp);font-size:20px;font-weight:800;color:var(--ink);letter-spacing:-.02em}
.packhub-card h3{font-size:19px;margin-bottom:8px}
.packhub-card p{font-size:14px;color:var(--muted);flex:1}
.packhub-card .go{margin-top:18px;padding-top:16px;border-top:1px solid var(--line-2);display:flex;align-items:center;justify-content:space-between;font-size:14px;font-weight:600;color:var(--brand-d)}
.packhub-card .go svg{width:16px;height:16px;transition:transform .2s}
.packhub-card:hover .go svg{transform:translateX(4px)}
.packhub-search{max-width:440px;margin:0 auto 36px;position:relative}
.packhub-search input{width:100%;font-family:var(--fbody);font-size:16px;color:var(--ink);background:var(--card);border:1px solid var(--line);border-radius:100px;padding:14px 20px 14px 48px;box-shadow:var(--sh-s)}
.packhub-search input:focus{outline:none;border-color:var(--brand)}
.packhub-search .si{position:absolute;left:18px;top:50%;transform:translateY(-50%);color:var(--muted);pointer-events:none}
.packhub-search .si svg{width:18px;height:18px}
.packhub-empty{text-align:center;color:var(--muted);font-size:16px;padding:40px 0;grid-column:1/-1}
.packhub-or{display:flex;align-items:center;gap:16px;max-width:440px;margin:0 auto 18px;color:var(--muted-2);font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.06em}
.packhub-or::before,.packhub-or::after{content:"";flex:1;height:1px;background:var(--line)}
.packhub-or span{white-space:nowrap}
.packhub-select{max-width:440px;margin:0 auto 40px}

/* Bandeau défilant + cartes recto-verso */
.marquee{overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;margin:0 calc(var(--mx)*-1) 8px;padding:10px var(--mx) 22px;cursor:grab}
.marquee:active{cursor:grabbing}
.marquee::-webkit-scrollbar{display:none}
.marquee-track{display:inline-flex;gap:16px}
.flip-card{flex:0 0 280px;height:212px;perspective:1100px}
.flip-inner{position:relative;width:100%;height:100%;transition:transform .55s cubic-bezier(.4,.15,.2,1);transform-style:preserve-3d}
.flip-card:hover .flip-inner{transform:rotateY(180deg)}
.flip-front,.flip-back{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:var(--r-m);border:1px solid var(--line);padding:22px;display:flex;overflow:hidden;transition:opacity .35s ease}
.flip-front{background:var(--card);flex-direction:column;opacity:1}
.flip-card:hover .flip-front{opacity:0}
.flip-front .ic{width:48px;height:48px;border-radius:13px;background:var(--mint);color:var(--brand-d);display:grid;place-items:center;margin-bottom:14px}
.flip-front .ic svg{width:24px;height:24px}
.flip-front h3{font-size:17px;margin-bottom:6px}
.flip-front p{font-size:13px;color:var(--muted);flex:1;line-height:1.45}
.flip-front .from{font-size:12px;color:var(--muted);font-weight:600;margin-top:8px}
.flip-front .from b{font-family:var(--fdisp);font-size:19px;color:var(--ink);letter-spacing:-.02em;margin-left:5px}
.flip-back{transform:rotateY(180deg);background:linear-gradient(160deg,var(--brand-l),var(--brand-d));border-color:var(--brand);color:#fff;opacity:0;padding:0;display:block;overflow:hidden}
.flip-card:hover .flip-back{opacity:1}
.flip-back .person{position:absolute;left:50%;bottom:0;transform:translateX(-50%);height:88%;width:auto;opacity:.95}
.flip-back .mbadge{position:absolute;top:12px;left:12px;width:38px;height:38px;border-radius:10px;background:#fff;color:var(--brand-d);display:grid;place-items:center;z-index:2;box-shadow:0 4px 12px -4px rgba(0,0,0,.28)}
.flip-back .mbadge svg{width:19px;height:19px}
.flip-back .back-btn{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);background:#fff;color:var(--brand-d);font-family:var(--fbody);font-weight:700;font-size:14px;padding:11px 22px;border-radius:100px;z-index:2;white-space:nowrap;box-shadow:0 8px 22px -8px rgba(0,0,0,.4)}
.marquee-empty{padding:30px 0;color:var(--muted);font-size:16px}

@media(max-width:980px){.packhub-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.packhub-grid{grid-template-columns:1fr}}

/* ===== Nos Solutions ===== */
.sol-toolbar{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-bottom:40px}
.sol-chip{font-family:var(--fbody);font-size:14px;font-weight:600;color:var(--muted);background:var(--card);border:1px solid var(--line);border-radius:100px;padding:9px 18px;cursor:pointer;transition:.15s}
.sol-chip:hover{border-color:var(--brand);color:var(--brand-d)}
.sol-chip.active{background:var(--brand);color:#fff;border-color:var(--brand)}
.sol-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.sol-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-m);padding:26px;transition:transform .18s,box-shadow .18s;display:flex;flex-direction:column}
.sol-card:hover{transform:translateY(-5px);box-shadow:var(--sh)}
.sol-card .top{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.sol-card .ic{width:48px;height:48px;border-radius:14px;background:var(--mint);color:var(--brand-d);display:grid;place-items:center}
.sol-card .ic svg{width:23px;height:23px}
.sol-card .kind{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:5px 11px;border-radius:100px}
.sol-card .kind.uni{background:var(--mint);color:var(--brand-d)}
.sol-card .kind.spe{background:var(--clay-tint);color:var(--clay-ink)}
.sol-card h4{font-size:18px;margin-bottom:8px}
.sol-card p{font-size:14px;color:var(--muted);flex:1}
.sol-card .ex{margin-top:16px;padding-top:16px;border-top:1px solid var(--line-2);font-size:13px;color:var(--muted-2);display:flex;align-items:center;gap:8px}
.sol-card .ex svg{width:15px;height:15px;color:var(--brand);flex:none}

/* ---- Flip agents ---- */
.sol-grid{align-items:start}
.sol-flip{perspective:1400px}
.sol-flip-in{position:relative;width:100%;transition:transform .55s cubic-bezier(.4,.08,.18,1);transform-style:preserve-3d}
.sol-flip:hover .sol-flip-in,.sol-flip:focus-within .sol-flip-in{transform:rotateY(180deg)}
.sol-flip .sol-face{backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:var(--r-m);overflow:hidden}
.sol-flip .sol-front{position:relative;margin:0;padding:22px;min-height:204px;transition:box-shadow .25s}
.sol-flip .sol-front .top{margin-bottom:14px}
.sol-flip .sol-front .ex{margin-top:12px;padding-top:12px}
.sol-flip .sol-front:hover{transform:none}
.sol-flip:hover .sol-front{box-shadow:var(--sh)}
.sol-back{position:absolute;inset:0;transform:rotateY(180deg);background:var(--brand);color:#fff;border:1px solid var(--brand);display:flex;flex-direction:column;justify-content:space-between;align-items:stretch;padding:22px;text-decoration:none}
.back-head{display:flex;align-items:center;justify-content:space-between}
.back-head .bic{width:46px;height:46px;border-radius:13px;background:rgba(255,255,255,.16);display:grid;place-items:center;color:#fff}
.back-head .bic svg{width:22px;height:22px}
.back-head .kback{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:5px 11px;border-radius:100px;background:rgba(255,255,255,.18);color:#fff}
.sol-back .back-cta{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;background:#fff;color:var(--brand-d);font-family:var(--fbody);font-weight:600;font-size:13px;line-height:1.3;white-space:nowrap;padding:13px 12px;border-radius:100px;text-align:center}
.sol-back .back-cta svg{width:15px;height:15px;flex:none;transition:transform .2s}
.sol-back:hover .back-cta svg{transform:translateX(4px)}

/* ===== Projet Sur-Mesure builder ===== */
.builder{display:grid;grid-template-columns:1fr 360px;gap:28px;align-items:start}
.build-pool h3{font-size:16px;margin-bottom:6px}
.build-pool .hint{font-size:14px;color:var(--muted);margin-bottom:20px}
.pick-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.pick{display:flex;align-items:center;gap:13px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-s);padding:14px 16px;cursor:pointer;text-align:left;transition:.15s;font-family:var(--fbody)}
.pick:hover{border-color:var(--brand)}
.pick.on{border-color:var(--brand);background:var(--mint-2)}
.pick .ic{width:38px;height:38px;border-radius:10px;background:var(--mint);color:var(--brand-d);display:grid;place-items:center;flex:none}
.pick .ic svg{width:19px;height:19px}
.pick .nm{font-size:14px;font-weight:600;color:var(--ink)}
.pick .check{margin-left:auto;width:22px;height:22px;border-radius:50%;border:1.5px solid var(--line);display:grid;place-items:center;color:#fff;flex:none}
.pick.on .check{background:var(--brand);border-color:var(--brand)}
.pick .check svg{width:13px;height:13px;opacity:0}.pick.on .check svg{opacity:1}
.build-summary{position:sticky;top:96px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-l);padding:26px;box-shadow:var(--sh)}
.build-summary h3{font-size:18px;margin-bottom:4px}
.build-summary .sub{font-size:13.5px;color:var(--muted);margin-bottom:20px}
.summary-list{list-style:none;margin-bottom:20px;min-height:40px}
.summary-list li{display:flex;align-items:center;gap:9px;font-size:14px;padding:7px 0;border-bottom:1px solid var(--line-2)}
.summary-list li svg{width:16px;height:16px;color:var(--brand);flex:none}
.summary-empty{font-size:13.5px;color:var(--muted-2);font-style:italic;padding:10px 0}
.summary-count{display:flex;align-items:baseline;justify-content:space-between;background:var(--mint);border-radius:14px;padding:16px 18px;margin-bottom:18px}
.summary-count .n{font-family:var(--fdisp);font-size:34px;font-weight:800;color:var(--brand-d)}
.summary-count .t{font-size:13px;color:var(--brand-d);font-weight:600}

/* ===== FAQ accordion ===== */
.faq-wrap{max-width:820px;margin:0 auto}
.faq-cats{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-bottom:36px}
.faq-item{border:1px solid var(--line);border-radius:var(--r-m);background:var(--card);margin-bottom:12px;overflow:hidden;transition:box-shadow .18s}
.faq-item.open{box-shadow:var(--sh)}
.faq-q{width:100%;display:flex;align-items:center;gap:16px;padding:22px 24px;cursor:pointer;font-family:var(--fdisp);font-weight:700;font-size:17.5px;text-align:left;background:none;border:none;color:var(--ink)}
.faq-q .ico{margin-left:auto;width:30px;height:30px;border-radius:50%;background:var(--mint);color:var(--brand-d);display:grid;place-items:center;flex:none;transition:transform .25s,background .2s}
.faq-q .ico svg{width:17px;height:17px}
.faq-item.open .faq-q .ico{transform:rotate(45deg);background:var(--brand);color:#fff}
.faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease}
.faq-a .inner{padding:0 24px 24px;color:var(--muted);font-size:15.5px;line-height:1.6}

/* ===== À Propos ===== */
.about-lead{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center}
.about-lead .story p{font-size:16.5px;color:var(--ink-2);margin-bottom:16px}
.about-lead .story p.big{font-family:var(--fdisp);font-size:clamp(20px,2vw,26px);font-weight:600;color:var(--ink);line-height:1.4;letter-spacing:-.02em}
.story-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-l);padding:30px;box-shadow:var(--sh)}
.story-card .qt{font-family:var(--fdisp);font-size:21px;font-weight:600;line-height:1.4;letter-spacing:-.02em;color:var(--ink)}
.story-card .qt b{color:var(--brand-d)}
.story-card .by{margin-top:20px;display:flex;align-items:center;gap:13px;padding-top:20px;border-top:1px solid var(--line-2)}
.values-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.value{background:var(--card);border:1px solid var(--line);border-radius:var(--r-m);padding:30px}
.value .ic{width:50px;height:50px;border-radius:14px;background:var(--mint);color:var(--brand-d);display:grid;place-items:center;margin-bottom:18px}
.value .ic svg{width:23px;height:23px}
.value h4{font-size:19px;margin-bottom:9px}
.value p{font-size:14.5px;color:var(--muted)}
.team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.member{background:var(--card);border:1px solid var(--line);border-radius:var(--r-m);padding:26px;text-align:center;transition:transform .18s,box-shadow .18s}
.member:hover{transform:translateY(-5px);box-shadow:var(--sh)}
.member.nox-card{background:linear-gradient(160deg,var(--brand),var(--brand-d));border-color:var(--brand)}
.avatar{width:96px;height:96px;border-radius:50%;margin:0 auto 18px;display:block}
.member .nm{font-family:var(--fdisp);font-weight:700;font-size:19px}
.member .role{font-size:14px;color:var(--muted);margin-top:4px}
.member.nox-card .nm{color:#fff}.member.nox-card .role{color:rgba(255,255,255,.82)}
.member .bio{font-size:13.5px;color:var(--muted);margin-top:12px;line-height:1.55}
.member.nox-card .bio{color:rgba(255,255,255,.85)}

/* ===== Contact ===== */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
.contact-cards{display:flex;flex-direction:column;gap:16px}
.cc{display:flex;gap:16px;align-items:flex-start;background:var(--card);border:1px solid var(--line);border-radius:var(--r-m);padding:24px;transition:transform .18s,box-shadow .18s}
.cc:hover{transform:translateY(-3px);box-shadow:var(--sh)}
.cc .ic{width:48px;height:48px;border-radius:13px;background:var(--mint);color:var(--brand-d);display:grid;place-items:center;flex:none}
.cc .ic svg{width:22px;height:22px}
.cc h4{font-size:17px;margin-bottom:5px}
.cc p{font-size:14px;color:var(--muted)}
.cc .v{font-weight:600;color:var(--brand-d);font-size:15px;margin-top:4px}
.form-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-l);padding:clamp(26px,3vw,40px);box-shadow:var(--sh)}
.field{margin-bottom:18px}
.field label{display:block;font-size:13.5px;font-weight:600;color:var(--ink-2);margin-bottom:8px}
.field input,.field select,.field textarea{width:100%;font-family:var(--fbody);font-size:15px;color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:var(--r-s);padding:13px 16px;transition:border-color .15s}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--brand);background:#fff}
.field textarea{resize:vertical;min-height:120px}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form-note{font-size:12.5px;color:var(--muted-2);margin-top:6px;display:flex;align-items:center;gap:7px}
.form-note svg{width:14px;height:14px;color:var(--brand);flex:none}

/* ===== Sector page ===== */
.sector-hero{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,64px);align-items:center}
.photo-ph{border-radius:var(--r-l);border:1px solid var(--line);background:repeating-linear-gradient(135deg,var(--bg-2) 0 16px,var(--card) 16px 32px);aspect-ratio:4/3;display:grid;place-items:center;position:relative;overflow:hidden}
.photo-ph .lbl{font-size:12px;color:var(--muted);background:rgba(255,255,255,.9);border:1px solid var(--line);padding:7px 14px;border-radius:100px;font-weight:600}
.photo-ph.tall{aspect-ratio:3/4}
.feature-list{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.feat{display:flex;gap:14px;align-items:flex-start;background:var(--card);border:1px solid var(--line);border-radius:var(--r-m);padding:22px}
.feat .ic{width:44px;height:44px;border-radius:12px;background:var(--mint);color:var(--brand-d);display:grid;place-items:center;flex:none}
.feat .ic svg{width:21px;height:21px}
.feat h4{font-size:16.5px;margin-bottom:6px}
.feat p{font-size:14px;color:var(--muted)}
.price-band{background:var(--card);border:1px solid var(--line);border-radius:var(--r-l);box-shadow:var(--sh);padding:clamp(30px,4vw,52px);display:grid;grid-template-columns:1.2fr 1fr;gap:40px;align-items:center}
.price-band .big{font-family:var(--fdisp);font-size:46px;font-weight:800;color:var(--ink);letter-spacing:-.03em;line-height:1}
.price-band .stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.price-band .st b{font-family:var(--fdisp);font-size:30px;font-weight:800;color:var(--brand-d);display:block}
.price-band .st span{font-size:12.5px;color:var(--muted)}

@media(max-width:980px){
  .nav-links{display:none}.burger{display:block}.nav-cta .btn-ghost{display:none}
  .hero .wrap{grid-template-columns:1fr}.hero-mock{margin-top:24px;overflow:visible}
  .phone-wrap{transform:scale(.624);margin-bottom:-320px}
  .hero-mock .float.a{left:calc(50% - 124px)}.hero-mock .float.b{right:calc(50% - 124px)}
  .bgrid{grid-template-columns:1fr 1fr}.prob-grid{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:1fr 1fr}.rgrid{grid-template-columns:1fr}
  .steps-progress{display:none}
  .agent-list{grid-template-columns:1fr}
  .sol-grid{grid-template-columns:1fr 1fr}.values-grid{grid-template-columns:1fr}
  .team-grid{grid-template-columns:1fr 1fr}
  .builder{grid-template-columns:1fr}.build-summary{position:static}
  .about-lead{grid-template-columns:1fr;gap:28px}
  .contact-grid{grid-template-columns:1fr;gap:28px}
  .sector-hero{grid-template-columns:1fr}.feature-list{grid-template-columns:1fr}
  .price-band{grid-template-columns:1fr;gap:24px}
  .foot-grid{grid-template-columns:1fr 1fr}.foot-brand{grid-column:1/-1}
}
@media(max-width:560px){
  body{font-size:16px}
  .prob-grid,.steps,.sol-grid,.team-grid,.pick-grid{grid-template-columns:1fr}
  .offer-stats{grid-template-columns:1fr;gap:12px}
  .field-row{grid-template-columns:1fr}
  .price-band .stat-row{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
  .cta-panel .row{flex-direction:column}.cta-panel .row .btn{width:100%;justify-content:center}
  .cta-panel p{white-space:normal}
}

/* ===================== CORRECTIONS MOBILE (≤768px) ===================== */
@media (max-width:768px){
  /* 1 — Le fond animé « vague mer » (seaDrift) reste ACTIF sur mobile : on réutilise
     l'implémentation desktop (.hero-bg animé), donc on ne coupe plus l'animation ici. */

  /* 2 — Badges flottants du hero : −25%, rejetés aux extrémités, hors du centre */
  .hero-mock .float{padding:9px 12px;border-radius:13px;gap:8px;font-size:10.6px}
  .hero-mock .float small{font-size:9px}
  .hero-mock .float .ic{width:28px;height:28px;border-radius:9px}
  .hero-mock .float .ic svg{width:14px;height:14px}
  .hero-mock .float.a{top:-12px;left:calc(50% - 200px);right:auto;bottom:auto}
  .hero-mock .float.b{bottom:-12px;right:calc(50% - 200px);left:auto;top:auto}

  /* 3 — 3 avantages : chaque badge tient sur UNE seule ligne (pas de retour à la
     ligne « jours »). Largeur au contenu, retour à la ligne pastille par pastille. */
  .checks{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
  .checks span{white-space:nowrap;text-align:center;justify-content:center;font-size:11.5px;padding:7px 13px}
  .checks span:nth-child(1),.checks span:nth-child(2),.checks span:nth-child(3){flex:0 1 auto}

  /* 6 — Bouton packs : saut de ligne après le "?" */
  .sel-foot .sf-br{display:inline}
  .sel-foot .btn-ghost{white-space:normal;text-align:center;line-height:1.45}
}
.sf-br{display:none}

/* 4 — Logos outils : restaurés, défilement continu, 32px de haut max.
   IMPORTANT (iOS Safari) : on garde le marquee en `display:block`. Le combiner avec
   `-webkit-mask-image` + une piste animée le rendait blanc/invisible sur iPhone.
   La piste définit sa propre hauteur, on l'aligne verticalement sans flexbox. */
@media (max-width:760px){
  .integ-row{align-items:stretch}
  /* iOS Safari : le -webkit-mask-image sur un marquee à piste animée le rendait
     totalement blanc/invisible (bug de compositing). On le retire sur mobile et on
     recrée le fondu des bords avec deux voiles dégradés (::before/::after) couleur
     du fond : les chips au bord se fondent au lieu d'être tranchées net (« usiness »)
     — sans toucher à la couche animée, donc plus de bug de compositing iOS. */
  .integ-row .logo-marquee{position:relative;flex:0 0 auto;width:100%;display:block;min-height:40px;-webkit-mask-image:none;mask-image:none}
  .integ-row .logo-marquee::before,.integ-row .logo-marquee::after{content:"";position:absolute;top:0;bottom:0;width:34px;z-index:2;pointer-events:none}
  .integ-row .logo-marquee::before{left:0;background:linear-gradient(90deg,var(--bg-2),rgba(243,240,231,0))}
  .integ-row .logo-marquee::after{right:0;background:linear-gradient(270deg,var(--bg-2),rgba(243,240,231,0))}
  .logo-track{align-items:center}
  .logo-track.is-running{animation:logoscroll 30s linear infinite}
  .logo-chip{padding:6px 12px;gap:8px}
  .logo-chip .slot,.logo-chip .slot img{width:28px!important;height:28px!important;max-height:32px}
  .logo-chip .nm{font-size:14px}
}

/* ===== Nos Packs (page "Nos offres") — corrections MOBILE ===== */
@media (max-width:768px){
  /* 1 — Phrase "SÉLECTIONNEZ VOTRE MÉTIER POUR VOIR LE PACK EN DÉTAIL" :
     sur mobile elle débordait (white-space:nowrap). On la met sur 2 lignes,
     centrée, avec marge latérale confortable et largeur max contenue. On retire
     les traits latéraux (::before/::after) qui écrasaient le texte sur 2 lignes. */
  .packhub-or{max-width:none;padding:0 28px;margin:0 auto 16px;text-align:center;line-height:1.45;letter-spacing:.05em}
  .packhub-or::before,.packhub-or::after{display:none}
  .packhub-or span{white-space:normal;display:block;max-width:300px;margin:0 auto;text-align:center}

  /* 2 — Carrousel de packs : le flip n'est plus déclenché au survol/tap mais par la
     POSITION (la classe .flipped est posée en JS quand la carte passe au centre).
     On neutralise donc tout flip au survol sur mobile (hover « collant » tactile)
     et on pilote le retournement uniquement via .flipped. Le swipe reste actif. */
  .flip-card{cursor:default}
  .flip-card:hover .flip-inner{transform:none}
  .flip-card:hover .flip-front{opacity:1}
  .flip-card:hover .flip-back{opacity:0}
  .flip-card.flipped .flip-inner{transform:rotateY(180deg)}
  .flip-card.flipped .flip-front{opacity:0}
  .flip-card.flipped .flip-back{opacity:1}

  /* 3 — Carte détail du pack : "à partir de X €" doit tenir sur UNE ligne.
     En 36px le "€" passait à la ligne. On réduit légèrement le padding de la
     carte (plus de largeur utile) et on met le prix en nowrap avec une taille
     fluide qui s'adapte à la largeur de l'écran (jamais coupé, même 320px). */
  .offer{padding:24px}
  .offer .price .big{white-space:nowrap;font-size:clamp(20px,6.8vw,32px)}
}

/* 5 — "La Réponse" : icône en haut, titre (2 lignes max, 14px), description (12px) */
@media (max-width:768px){
  .bgrid{gap:14px}
  .bcard{padding:20px 18px}
  .bcard .bcard-head{flex-direction:column;align-items:flex-start;gap:10px;margin-bottom:10px}
  .bcard h4{font-size:14px;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .bcard p{font-size:12px;line-height:1.45}
}

/* 8 — "Pourquoi NoctisOne ?" : globe 3D conservé sur mobile, badges 1 par 1 sur la sphère */
.why-globe.why-mobile{height:230vh}
.why-mobile .why-stage{justify-content:center;padding-bottom:0}
.why-mobile .why-paths{z-index:0}
.why-mobile .why-planet-wrap{z-index:1;width:min(330px,80vw);height:min(330px,80vw)}
.why-mobile .why-head{top:clamp(22px,5vh,56px);z-index:5}
.why-mobile .why-badges{z-index:4;width:min(340px,90vw)}
.why-mobile .why-pair{justify-content:center}
.why-mobile .why-badge{flex:1 1 auto;max-width:none;width:100%;padding:16px 18px}
.why-mobile .why-badge h4{font-size:15px}
.why-mobile .why-badge p{font-size:13px;line-height:1.45}
.why-mobile .why-fallback{display:none}
/* ===================================================================
   Projet Sur-Mesure — refonte (scopé .sm-*, n'affecte aucune autre page)
   =================================================================== */
.sm-hero .phero-inner{max-width:840px}
.sm-hero h1{font-size:clamp(34px,5vw,62px);font-weight:800;letter-spacing:-.03em}
.sm-hero h1 em{font-style:normal;color:var(--brand)}
.sm-hero .lead{max-width:40em}
.sm-hero-cta{display:flex;gap:14px;flex-wrap:wrap;align-items:center;justify-content:center}

/* ---- Mini-parcours interactif ---- */
.sm-quiz-sec{padding-top:clamp(6px,2vw,22px)}
.sm-quiz{position:relative;max-width:920px;margin:0 auto;background:var(--card);border:1px solid var(--line);border-radius:var(--r-l);box-shadow:var(--sh);padding:clamp(28px,4vw,54px);overflow:hidden}
.sm-quiz::before{content:"";position:absolute;top:-30%;right:-12%;width:46%;height:150%;background:radial-gradient(circle at 60% 40%,rgba(31,155,115,.10),transparent 64%);pointer-events:none}
.sm-quiz-head{text-align:center;position:relative;z-index:1}
.sm-quiz-head h2{font-size:clamp(25px,3.2vw,40px);font-weight:800;letter-spacing:-.03em;margin-top:12px}
.sm-bar-wrap{display:flex;align-items:center;gap:14px;max-width:430px;margin:26px auto 0}
.sm-bar{flex:1;height:6px;border-radius:100px;background:var(--line);overflow:hidden}
.sm-bar-fill{display:block;height:100%;width:50%;background:linear-gradient(90deg,var(--brand-l),var(--brand));border-radius:100px;transition:width .55s cubic-bezier(.4,.1,.2,1)}
.sm-bar-lbl{font-size:12.5px;font-weight:700;color:var(--muted);white-space:nowrap;font-family:var(--fdisp);letter-spacing:.02em}

.sm-stage{position:relative;margin-top:30px;z-index:1}
.sm-panel{display:none}
.sm-panel.active{display:block}
@media(prefers-reduced-motion:no-preference){.sm-panel.active{animation:smIn .45s cubic-bezier(.4,.1,.2,1)}}
@keyframes smIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.sm-q-title{text-align:center;font-family:var(--fdisp);font-weight:700;font-size:clamp(20px,2.3vw,27px);letter-spacing:-.02em;margin-bottom:24px}
.sm-opts{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.sm-opt{display:flex;gap:15px;align-items:flex-start;text-align:left;background:var(--card);border:1.5px solid var(--line);border-radius:var(--r-m);padding:20px 22px;cursor:pointer;font-family:var(--fbody);transition:transform .16s,box-shadow .16s,border-color .18s,background .18s}
.sm-opt:hover{border-color:var(--brand);transform:translateY(-3px);box-shadow:var(--sh-s)}
.sm-opt:focus-visible{outline:none;border-color:var(--brand);box-shadow:0 0 0 4px rgba(21,121,90,.16)}
.sm-opt .sm-opt-ic{width:44px;height:44px;border-radius:12px;background:var(--mint);color:var(--brand-d);display:grid;place-items:center;flex:none;transition:background .18s,color .18s}
.sm-opt .sm-opt-ic svg{width:21px;height:21px}
.sm-opt .sm-opt-tx{min-width:0}
.sm-opt-t{display:block;font-family:var(--fdisp);font-weight:700;font-size:16.5px;letter-spacing:-.01em;line-height:1.25;color:var(--ink)}
.sm-opt-d{display:block;font-size:13.5px;color:var(--muted);margin-top:5px;line-height:1.45}
.sm-opt:hover .sm-opt-ic{background:var(--brand);color:#fff}

.sm-foot{display:flex;align-items:center;justify-content:center;margin-top:26px}
.sm-back{display:inline-flex;align-items:center;gap:7px;background:none;border:none;font-family:var(--fbody);font-weight:600;font-size:14px;color:var(--muted);cursor:pointer;padding:6px 10px;border-radius:100px;transition:color .15s,background .15s}
.sm-back:hover{color:var(--brand-d);background:var(--mint-2)}
.sm-back svg{width:15px;height:15px}

/* Result */
.sm-result{text-align:center}
.sm-result-tag{display:inline-flex;align-items:center;gap:8px;background:var(--mint);color:var(--brand-d);font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:7px 16px;border-radius:100px}
.sm-result-tag svg{width:15px;height:15px}
.sm-result-msg{font-family:var(--fdisp);font-weight:600;font-size:clamp(18px,2vw,24px);line-height:1.5;letter-spacing:-.015em;color:var(--ink);max-width:30em;margin:22px auto 0;text-wrap:pretty}
.sm-result-msg b{color:var(--brand-d)}
.sm-result-close{font-size:1.12em;white-space:nowrap}
.sm-result-cta{margin-top:30px;display:flex;flex-direction:column;align-items:center;gap:14px}
.sm-result-cta .btn{font-size:16px;padding:16px 34px}

/* ---- Ce qu'on peut créer (fond vert forêt) ---- */
.sm-create{background:var(--brand-d);color:#fff;position:relative;overflow:hidden}
.sm-create::before{content:none}
.sm-create .wrap{position:relative;z-index:1}
.sm-create .sec-head{margin-left:auto;margin-right:auto;text-align:center}
.sm-create .sec-head .eyebrow{color:#9FE3C9}
.sm-create .sec-head h2{color:#fff}
.sm-create .sec-head p{color:rgba(255,255,255,.84)}

/* Carrousel d'exemples (défilement auto + flip 3D) */
.sm-carousel{position:relative;z-index:1;overflow:hidden;padding:10px 0 6px;margin-top:6px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.sm-carousel-track{display:flex;gap:18px;width:max-content;will-change:transform;animation:smMarquee 80s linear infinite}
.sm-carousel:hover .sm-carousel-track,.sm-carousel:focus-within .sm-carousel-track{animation-play-state:paused}
@keyframes smMarquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.sm-carousel-track{animation:none}.sm-carousel{overflow-x:auto;scrollbar-width:none}.sm-carousel::-webkit-scrollbar{display:none}}
.sm-fcard{flex:0 0 320px;height:208px;perspective:1200px;cursor:pointer}
.sm-fcard-in{position:relative;width:100%;height:100%;transition:transform .6s cubic-bezier(.4,.15,.2,1);transform-style:preserve-3d}
.sm-fcard:hover .sm-fcard-in,.sm-fcard.flipped .sm-fcard-in{transform:rotateY(180deg)}
.sm-face{position:absolute;inset:0;border-radius:var(--r-l);padding:18px;display:flex;flex-direction:column;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden}
.sm-face-front{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.20);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.sm-fhead{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.sm-fhead .ic{width:42px;height:42px;border-radius:11px;background:rgba(255,255,255,.16);color:#fff;display:grid;place-items:center;flex:none}
.sm-fhead .ic svg{width:22px;height:22px}
.sm-ftitle{font-family:var(--fdisp);font-weight:700;font-size:16px;letter-spacing:-.01em;line-height:1.2;color:#fff}
.sm-fdesc{font-size:14px;color:rgba(255,255,255,.86);line-height:1.45;font-weight:400}
.sm-face-hint{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:600;color:rgba(255,255,255,.7);margin-top:auto;padding-top:14px}
.sm-face-hint svg{width:14px;height:14px}
.sm-face-back{position:absolute;inset:0;transform:rotateY(180deg);background:var(--clay-tint);border:1px solid var(--clay);color:var(--brand-d);justify-content:center;text-align:left}
.sm-res-tag{display:inline-flex;align-items:center;gap:7px;align-self:flex-start;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--clay-ink);background:rgba(154,106,46,.12);padding:6px 13px;border-radius:100px}
.sm-res-tag svg{width:14px;height:14px}
.sm-res{font-family:var(--fdisp);font-weight:800;font-size:21px;line-height:1.28;letter-spacing:-.02em;color:var(--brand-d);margin-top:14px;text-wrap:balance}
.sm-create-foot{text-align:center;margin-top:36px;font-family:var(--fdisp);font-weight:600;font-size:clamp(18px,2vw,24px);letter-spacing:-.02em;color:#fff}

/* ===== Carrousel "Ce qu'on peut créer" — corrections MOBILE =====
   Placé APRÈS les règles de base .sm-carousel ci-dessus pour gagner la cascade.
   Sur mobile l'animation CSS smMarquee ne tournait pas (iOS) et overflow:hidden
   empêchait le client de faire défiler. On passe en défilement réel piloté en JS
   (overflow-x:auto, comme le carrousel des packs), on retire le masque et
   l'animation CSS, et le flip est déclenché par la POSITION (.flipped posée en JS
   quand la carte arrive au centre), plus au survol/tap. Desktop intact. */
@media (max-width:768px){
  .sm-carousel{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;-webkit-mask-image:none;mask-image:none;scrollbar-width:none}
  .sm-carousel::-webkit-scrollbar{display:none}
  .sm-carousel-track{animation:none;will-change:auto}
  .sm-fcard{cursor:pointer}
  /* Pas de flip au survol (hover « collant » iOS) : le retournement se fait au tap. */
  .sm-fcard:hover .sm-fcard-in{transform:none}
  .sm-fcard.flipped .sm-fcard-in{transform:rotateY(180deg)}
  /* Bouton « Voir le résultat » mis en valeur : pastille blanche, centrée, plus grosse. */
  .sm-face-hint{align-self:center;justify-content:center;width:auto;margin-top:auto;background:#fff;color:var(--brand-d);font-weight:700;font-size:13.5px;padding:11px 20px;border-radius:100px;box-shadow:0 4px 14px rgba(0,0,0,.18)}
  .sm-face-hint svg{width:17px;height:17px}
}
.sm-create-foot b{color:#9FE3C9}

/* ---- Reassurance — bande horizontale épurée ---- */
.sm-reassure{display:grid;grid-template-columns:repeat(4,1fr);gap:0;max-width:1120px;margin:0 auto}
.sm-rcard{display:flex;flex-direction:column;align-items:flex-start;gap:15px;padding:6px 34px;background:none;border:none;border-radius:0;box-shadow:none;transition:none}
.sm-rcard:hover{transform:none;box-shadow:none}
.sm-rcard+.sm-rcard{border-left:1px solid rgba(21,121,90,.18)}
.sm-rcard:first-child{padding-left:0}
.sm-rcard:last-child{padding-right:0}
.sm-rcard .ic{width:48px;height:48px;border-radius:13px;background:var(--mint);color:var(--brand-d);display:grid;place-items:center;flex:none}
.sm-rcard .ic svg{width:22px;height:22px}
.sm-rcard h4{font-family:var(--fdisp);font-weight:800;font-size:17px;line-height:1.25;letter-spacing:-.01em;color:var(--brand-d);margin:0}
.sm-rcard p{font-family:var(--fbody);font-weight:400;font-size:14px;line-height:1.5;letter-spacing:0;color:var(--muted);margin:0}
@media(min-width:561px) and (max-width:900px){
  .sm-reassure{grid-template-columns:1fr 1fr;gap:0}
  .sm-rcard{padding:30px 30px}
  .sm-rcard+.sm-rcard{border-left:none}
  .sm-rcard:nth-child(odd){padding-left:0}
  .sm-rcard:nth-child(even){padding-right:0;border-left:1px solid rgba(21,121,90,.18)}
  .sm-rcard:nth-child(n+3){border-top:1px solid rgba(21,121,90,.18)}
  .sm-rcard:nth-child(1),.sm-rcard:nth-child(2){padding-top:0}
}
@media(max-width:560px){
  /* Réassurance → carrousel horizontal auto-défilant (mobile).
     - Séparateurs VERTICAUX (border-left au lieu de border-top).
     - Icône + titre sur la MÊME LIGNE, tout le contenu CENTRÉ.
     - Défilement tactile (overflow-x:auto) + automatique (JS). */
  .sm-reassure{display:flex;flex-wrap:nowrap;max-width:none;margin:0;
    overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .sm-reassure::-webkit-scrollbar{display:none}
  .sm-rcard{flex:0 0 80vw;max-width:320px;flex-direction:row;flex-wrap:wrap;
    justify-content:center;align-items:center;text-align:center;gap:8px 12px;padding:8px 32px;border-top:none}
  .sm-rcard+.sm-rcard{border-top:none;border-left:1px solid rgba(21,121,90,.18)}
  .sm-rcard:first-child{padding-left:32px;padding-top:8px}
  .sm-rcard:last-child{padding-right:32px}
  .sm-rcard .ic{width:40px;height:40px}
  .sm-rcard .ic svg{width:20px;height:20px}
  .sm-rcard h4{font-size:16px;flex:0 1 auto;text-align:center}
  .sm-rcard p{flex-basis:100%;width:100%;text-align:center;font-size:13.5px}
}

/* ---- Reveal générique (scroll) ---- */
@media(prefers-reduced-motion:no-preference){
  .sm-reveal{opacity:0;transform:translateY(28px);transition:opacity .7s ease-out,transform .7s ease-out}
  .sm-reveal.in{opacity:1;transform:none}
  .sm-stagger>*{opacity:0;transform:translateY(28px);transition:opacity .6s ease-out,transform .6s ease-out}
  .sm-stagger.in>*{opacity:1;transform:none}
  .sm-stagger.in>*:nth-child(2){transition-delay:.13s}
  .sm-stagger.in>*:nth-child(3){transition-delay:.26s}
}

/* ---- CTA final + champ libre ---- */
.sm-final .cta-panel{max-width:920px;margin:0 auto}
.sm-final .cta-panel p{white-space:normal;max-width:33em;margin-left:auto;margin-right:auto;text-wrap:balance}
.sm-final-form{max-width:560px;margin:26px auto 0}
.sm-final-form textarea{width:100%;font-family:var(--fbody);font-size:15.5px;line-height:1.5;color:var(--ink);background:rgba(255,255,255,.96);border:1px solid rgba(255,255,255,.5);border-radius:var(--r-m);padding:16px 18px;min-height:96px;resize:vertical;transition:border-color .15s,box-shadow .15s}
.sm-final-form textarea::placeholder{color:var(--muted)}
.sm-final-form textarea:focus{outline:none;border-color:#fff;box-shadow:0 0 0 4px rgba(255,255,255,.20)}
.sm-final .row{margin-top:22px}

/* ---- Sticky CTA ---- */
.sm-sticky{position:fixed;left:50%;bottom:22px;transform:translate(-50%,150%);z-index:50;opacity:0;transition:transform .42s cubic-bezier(.34,1.3,.64,1),opacity .3s;pointer-events:none}
.sm-sticky.show{transform:translate(-50%,0);opacity:1;pointer-events:auto}
.sm-sticky .btn{box-shadow:0 16px 40px -12px rgba(12,76,56,.6);font-size:15.5px;padding:15px 30px}

@media(max-width:680px){
  .sm-opts{grid-template-columns:1fr}
  .sm-bar-wrap{flex-wrap:wrap}
  .sm-sticky{left:16px;right:16px;transform:translateY(150%)}
  .sm-sticky.show{transform:translateY(0)}
  .sm-sticky .btn{width:100%;justify-content:center}
}


/* Sur-Mesure — Hero + Quiz : fond vert continu (un seul .softbg englobant,
   les sections internes passent au-dessus, la carte du quiz reste blanche) */
.sm-hero-wrap{position:relative}
.sm-hero-wrap>section{position:relative;z-index:1}

/* À propos — carrousel de valeurs (défilement continu, scopé .vcar/.vcard) */
.vcar{position:relative;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)}
.vcar-track{display:flex;gap:18px;width:max-content;will-change:transform;animation:vcar-scroll var(--vcar-dur,48s) linear infinite}
@keyframes vcar-scroll{from{transform:translateX(0)}to{transform:translateX(calc(-1 * var(--vcar-shift,50%)))}}
.vcard{flex:0 0 auto;width:336px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-m);padding:24px 26px}
.vcard-head{display:flex;align-items:center;gap:13px;margin-bottom:11px}
.vcard-head .ic{width:44px;height:44px;border-radius:12px;background:var(--mint);color:var(--brand-d);display:grid;place-items:center;flex:none}
.vcard-head .ic svg{width:22px;height:22px}
.vcard-head h4{font-size:18px;margin:0;line-height:1.2}
.vcard p{font-size:14.5px;color:var(--muted);margin:0;line-height:1.5}
@media (prefers-reduced-motion:reduce){.vcar-track{animation:none}}
@media(max-width:560px){.vcard{width:78vw;max-width:320px}}

/* À propos — zone verte continue Équipe + CTA (un seul .softbg englobant,
   les sections passent au-dessus ; cartes & panneau gardent leur fond) */
.ap-botwrap{position:relative}
.ap-botwrap>section{position:relative;z-index:1}

/* FAQ — fond vert vague-mer FIXÉ au viewport : toujours net (l'image couvre un
   seul écran, jamais étirée sur la page longue), continu et sans cassure.
   Header/footer restent au-dessus, sur le fond par défaut. */
body[data-page="faq"]{background:transparent}
/* Bloque le rebond d'overscroll (header/footer ne se décollent plus, on ne voit
   jamais le fond au-dessus/au-dessous) — comme la page Nos offres */
html:has(body[data-page="faq"]){overscroll-behavior:none}
.faq-bg,.faq-bg-veil{display:none}
body[data-page="faq"] .faq-bg{display:block;position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:#e7f1e9 center/cover no-repeat;
  background-image:url(fonds/fond-vert-16-9.png);
  background-image:image-set(url(fonds/fond-vert-16-9.webp) type("image/webp"),url(fonds/fond-vert-16-9.png) type("image/png"));
  transform-origin:center;animation:seaDrift 9s ease-in-out infinite;will-change:transform}
body[data-page="faq"] .faq-bg-veil{display:block;position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(251,249,244,.7),rgba(248,251,248,.5) 50%,rgba(251,249,244,.7))}
@media (prefers-reduced-motion:reduce){body[data-page="faq"] .faq-bg{animation:none}}
/* Portrait tablette → 2:3, portrait mobile → 9:16 (toujours net) */
@media (orientation:portrait) and (min-width:601px){
  body[data-page="faq"] .faq-bg{background-image:url(fonds/fond-vert-2-3.png);background-image:image-set(url(fonds/fond-vert-2-3.webp) type("image/webp"),url(fonds/fond-vert-2-3.png) type("image/png"))}
}
@media (orientation:portrait) and (max-width:600px){
  body[data-page="faq"] .faq-bg{background-image:url(fonds/fond-vert-9-16.png);background-image:image-set(url(fonds/fond-vert-9-16.webp) type("image/webp"),url(fonds/fond-vert-9-16.png) type("image/png"))}
}

/* Page Contact — même fond vert animé (vague mer) que la FAQ, en plein écran
   fixe (image au bon ratio, jamais étirée → toujours net), continu sans cassure. */
body[data-page="contact"]{background:transparent}
html:has(body[data-page="contact"]){overscroll-behavior:none}
.contact-bg,.contact-bg-veil{display:none}
body[data-page="contact"] .contact-bg{display:block;position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:#e7f1e9 center/cover no-repeat;
  background-image:url(fonds/fond-vert-16-9.png);
  background-image:image-set(url(fonds/fond-vert-16-9.webp) type("image/webp"),url(fonds/fond-vert-16-9.png) type("image/png"));
  transform-origin:center;animation:seaDrift 9s ease-in-out infinite;will-change:transform}
body[data-page="contact"] .contact-bg-veil{display:block;position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(251,249,244,.7),rgba(248,251,248,.5) 50%,rgba(251,249,244,.7))}
@media (prefers-reduced-motion:reduce){body[data-page="contact"] .contact-bg{animation:none}}
@media (orientation:portrait) and (min-width:601px){
  body[data-page="contact"] .contact-bg{background-image:url(fonds/fond-vert-2-3.png);background-image:image-set(url(fonds/fond-vert-2-3.webp) type("image/webp"),url(fonds/fond-vert-2-3.png) type("image/png"))}
}
@media (orientation:portrait) and (max-width:600px){
  body[data-page="contact"] .contact-bg{background-image:url(fonds/fond-vert-9-16.png);background-image:image-set(url(fonds/fond-vert-9-16.webp) type("image/webp"),url(fonds/fond-vert-9-16.png) type("image/png"))}
}

/* ===================== POLISH & MICRO-INTERACTIONS (global) ===================== */
header{transition:background .25s ease,box-shadow .25s ease,border-color .25s ease}
header.scrolled{background:rgba(251,249,244,.94);box-shadow:0 8px 24px -16px rgba(20,50,36,.34)}
.nav{transition:height .25s ease}
header.scrolled .nav{height:62px}
.logo-img{transition:height .25s ease}
header.scrolled .logo-img{height:38px}

/* Nav : soulignement animé */
.nav-links a{position:relative}
.nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;border-radius:2px;background:var(--brand);transform:scaleX(0);transform-origin:left;transition:transform .26s cubic-bezier(.4,.1,.2,1)}
.nav-links a:hover::after,.nav-links a.active::after{transform:scaleX(1)}

/* Boutons : appui, focus visible, flèche, reflet */
.btn:active{transform:translateY(0) scale(.975)}
.btn:focus-visible{outline:none;box-shadow:0 0 0 4px rgba(21,121,90,.22)}
.btn [data-icon="arrow"] svg{transition:transform .2s ease}
.btn:hover [data-icon="arrow"] svg{transform:translateX(3px)}
.btn-primary,.btn-cta{position:relative;overflow:hidden}
.btn-primary::after,.btn-cta::after{content:"";position:absolute;top:0;left:-130%;width:55%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.30),transparent);transform:skewX(-18deg);transition:left .6s ease;pointer-events:none}
.btn-primary:hover::after,.btn-cta:hover::after{left:150%}

/* Footer : liens qui glissent */
.fcol a{transition:color .15s ease,transform .15s ease}
.fcol a:hover{transform:translateX(3px)}

/* Menu mobile : ouverture animée (REMPLACE les 2 règles .mobile-menu existantes) */
.mobile-menu{display:flex;position:fixed;inset:72px 0 0;background:var(--bg);z-index:55;padding:24px var(--mx);flex-direction:column;gap:4px;opacity:0;visibility:hidden;transform:translateY(-10px);transition:opacity .28s ease,transform .28s ease,visibility .28s;pointer-events:none}
.mobile-menu.open{opacity:1;visibility:visible;transform:none;pointer-events:auto}
@media(prefers-reduced-motion:no-preference){
  .mobile-menu.open a,.mobile-menu.open .btn{animation:mmIn .42s cubic-bezier(.4,.1,.2,1) both}
  .mobile-menu.open a:nth-child(2){animation-delay:.05s}
  .mobile-menu.open a:nth-child(3){animation-delay:.1s}
  .mobile-menu.open a:nth-child(4){animation-delay:.15s}
  .mobile-menu.open a:nth-child(5){animation-delay:.2s}
  .mobile-menu.open a:nth-child(6){animation-delay:.25s}
  .mobile-menu.open .btn{animation-delay:.3s}
}
@keyframes mmIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* Reveal au scroll (posé par JS, donc sûr si pas de JS) */
@media(prefers-reduced-motion:no-preference){
  .reveal-up{opacity:0;transform:translateY(26px);transition:opacity .6s cubic-bezier(.4,.1,.2,1),transform .6s cubic-bezier(.4,.1,.2,1)}
  .reveal-up.in{opacity:1;transform:none}
  .reveal-up.r-d1{transition-delay:.08s}.reveal-up.r-d2{transition-delay:.16s}
  .reveal-up.r-d3{transition-delay:.24s}.reveal-up.r-d4{transition-delay:.32s}
  .reveal-up.r-d5{transition-delay:.40s}
}

/* Fondu d'entrée de page (actif seulement si html.js — voir étape 4 optionnelle) */
@media(prefers-reduced-motion:no-preference){ html.js body{animation:pageIn .5s ease both} }
@keyframes pageIn{from{opacity:0}to{opacity:1}}