/* ===================================================================
   VigieWeb — site vitrine
   Design system « Précision chaleureuse » repris du modèle site-v2 (VitrineAI) :
   tokens > composants > mouvement, puis composants propres à VigieWeb.
   Polices auto-hébergées (licence SIL OFL, voir assets/fonts/OFL.txt).
=================================================================== */
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/instrument-sans-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/instrument-sans-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/instrument-sans-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/instrument-sans-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:'Fraunces';font-style:italic;font-weight:100 900;font-display:swap;src:url(/assets/fonts/fraunces-latin-opsz-italic.woff2) format('woff2')}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/space-grotesk-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/space-grotesk-latin-700-normal.woff2) format('woff2')}

:root{
  /* Neutres — chauds, choisis (pas de gris pur) */
  --bg:        #FAFAF7;
  --surface:   #FFFFFF;
  --surface-2: #F4F0E9;
  --ink:       #131118;
  --ink-soft:  #55515E;
  --ink-mute:  #8A8594;
  --line:      #E7E2D8;
  --line-2:    #DEDACF;

  /* Accent signature — réservé aux CTA et aux événements rares */
  --brand:      #FF4D2E;
  --brand-ink:  #C2330F;
  --brand-soft: #FFF1EC;
  --grad: linear-gradient(105deg,#FF4D2E,#E9366F);

  /* Accents secondaires — variante "Vivid" */
  --violet:      #7C3AED;
  --violet-soft: #F3ECFF;
  --yellow:      #E8A400;
  --yellow-soft: #FFF6DC;
  --contact-wash: linear-gradient(135deg,#FFF1EC 0%,#FFE9F2 35%,#F3ECFF 70%,#FFF8E5 100%);

  /* Section sombre — une seule famille de tons, utilisée avec parcimonie */
  --dark:      #131118;
  --dark-2:    #1E1B24;
  --dark-line: rgba(255,255,255,.12);
  --dark-text: #F3EFEA;
  --dark-mute: #B3ADC0;

  /* Rayons, ombres, mouvement — échelles fermées */
  --r-sm: 10px; --r-md: 16px; --r-lg: 24px; --r-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(19,17,24,.06);
  --shadow-md: 0 16px 40px rgba(19,17,24,.10);
  --ease: cubic-bezier(.2,.8,.2,1);
  --ease-spring: cubic-bezier(.34,1.35,.64,1);
  --t-fast: 200ms; --t-base: 320ms; --t-slow: 560ms;

  --header-h: 76px;
}

/* ---------- Reset & base ---------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:calc(var(--header-h) + 20px)}
html,body{margin:0;min-height:100%}
body{
  background:var(--bg); color:var(--ink);
  font-family:'Instrument Sans',-apple-system,'Segoe UI',sans-serif;
  font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3{font-family:'Instrument Sans',sans-serif; font-weight:600; letter-spacing:-.01em; text-wrap:balance; margin:0}
a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}
button{font-family:inherit}
::selection{background:var(--brand); color:#fff}
input::placeholder,textarea::placeholder{color:var(--ink-mute)}
input,textarea{font-family:inherit}
input:focus,textarea:focus{outline:2px solid var(--ink); outline-offset:0}

.accent-serif{font-family:'Fraunces',serif; font-style:italic; font-weight:480; font-optical-sizing:auto}
.eyebrow{font-family:'Space Grotesk',monospace; font-size:13px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--brand-ink); margin:0 0 14px}
.section-title{font-size:clamp(30px,4vw,50px); line-height:1.05; margin:0 0 20px}
.section-lede{color:var(--ink-soft); font-size:clamp(16px,1.6vw,18.5px); line-height:1.6; max-width:640px; margin:0 0 36px}

/* ---------- Accessibilité transverses ---------- */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skipLink{position:absolute;left:-9999px;top:0;z-index:200;padding:14px 22px;background:var(--ink);color:#fff;font-weight:600;border-radius:0 0 12px 0}
.skipLink:focus{left:0}
a:focus-visible,button:focus-visible,summary:focus-visible,[tabindex]:focus-visible{
  outline:3px solid var(--ink); outline-offset:3px; border-radius:6px;
}
#pourquoi :focus-visible, footer :focus-visible, .gwFeature :focus-visible, .launch-banner :focus-visible{outline-color:var(--dark-text)}

/* ---------- Conteneurs ---------- */
.container{max-width:1240px; margin:0 auto; padding-inline:clamp(20px,5vw,64px)}
.section{padding-block:clamp(56px,6vw,88px)}
.section-tight{padding-block:clamp(40px,4.5vw,60px)}

/* ---------- Boutons ---------- */
.btn{display:inline-flex; align-items:center; gap:10px; min-height:48px; padding:14px 30px; border-radius:var(--r-pill); font-weight:600; font-size:16px; border:none; cursor:pointer; transition:transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), background var(--t-fast) var(--ease)}
.btn:active{transform:scale(.98)}
.btn-primary{background:var(--grad); color:#fff; box-shadow:var(--shadow-md)}
.btn-primary:hover{transform:translateY(-2px); box-shadow:0 20px 44px rgba(255,77,46,.28)}
.btn-ghost{background:var(--surface); color:var(--ink); border:1px solid var(--line)}
.btn-ghost:hover{border-color:var(--ink); transform:translateY(-2px)}
.btn-on-dark{background:#fff; color:var(--ink)}
.btn-on-dark:hover{transform:translateY(-2px); box-shadow:0 16px 34px rgba(0,0,0,.35)}
.btn-outline-dark{background:transparent; color:var(--dark-text); border:1px solid var(--dark-line)}
.btn-outline-dark:hover{border-color:var(--dark-text); transform:translateY(-2px)}

/* ---------- Header ---------- */
header.site{position:fixed; top:0; left:0; right:0; z-index:50; height:var(--header-h); display:flex; align-items:center; justify-content:space-between; gap:16px; padding-inline:clamp(20px,5vw,64px); background:rgba(250,250,247,.86); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-bottom:1px solid var(--line); transition:box-shadow var(--t-base) var(--ease)}
header.site.is-scrolled{box-shadow:0 8px 30px rgba(19,17,24,.06)}
.brand{display:flex; align-items:center; transition:opacity var(--t-fast) var(--ease)}
.brand:hover{opacity:.75}
.brand img{height:30px; width:auto}
.navBurger{display:none; flex:none; width:46px; height:46px; align-items:center; justify-content:center; gap:5px; flex-direction:column; border:1px solid var(--line); border-radius:13px; background:var(--surface); cursor:pointer}
.navBurger span{display:block; width:20px; height:2px; border-radius:2px; background:var(--ink); transition:transform var(--t-base) var(--ease), opacity var(--t-base) var(--ease)}
.navBurger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.navBurger[aria-expanded="true"] span:nth-child(2){opacity:0}
.navBurger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.navLinks{display:flex; align-items:center; gap:clamp(14px,2.6vw,30px); font-size:15px}
.navLinks a:not(.btn){color:var(--ink-soft); padding:8px 2px; position:relative}
.navLinks a:not(.btn)::after{content:"";position:absolute;left:2px;right:2px;bottom:2px;height:2px;background:var(--brand);transform:scaleX(0);transform-origin:left;transition:transform var(--t-fast) var(--ease)}
.navLinks a:not(.btn):hover{color:var(--ink)}
.navLinks a:not(.btn):hover::after,.navLinks a[aria-current="true"]::after{transform:scaleX(1)}

/* ---------- Hero ---------- */
.hero{position:relative; overflow:hidden; padding-top:calc(var(--header-h) + 56px); padding-bottom:80px; background:var(--bg)}
.hero-halo{position:absolute; inset:-10% -14% auto auto; width:62vw; height:62vw; max-width:860px; max-height:860px; background:radial-gradient(circle at 60% 40%, rgba(255,77,46,.22), rgba(233,54,111,.12) 45%, transparent 72%); pointer-events:none}
.hero-halo-2{position:absolute; left:-12%; bottom:-18%; width:38vw; height:38vw; max-width:520px; max-height:520px; background:radial-gradient(circle at 40% 60%, rgba(124,58,237,.16), transparent 70%); pointer-events:none}
.hero::after{content:""; position:absolute; inset:0; pointer-events:none; opacity:.5; background-image:radial-gradient(rgba(19,17,24,.05) 1px, transparent 1px); background-size:22px 22px; -webkit-mask-image:radial-gradient(ellipse 60% 50% at 75% 30%, #000 0%, transparent 70%); mask-image:radial-gradient(ellipse 60% 50% at 75% 30%, #000 0%, transparent 70%)}
.hero-grid{position:relative; display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:clamp(40px,6vw,64px); align-items:center}
.hero-kicker{display:inline-flex; align-items:center; gap:10px; padding:9px 16px; border-radius:var(--r-pill); background:var(--surface); border:1px solid var(--line); font-family:'Space Grotesk',monospace; font-size:12.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:26px}
.hero-kicker .dot{width:7px; height:7px; border-radius:50%; background:var(--brand)}
.hero h1{font-size:clamp(40px,6.4vw,78px); line-height:1.02; letter-spacing:-.03em; color:var(--ink); max-width:12em}
.hero h1 em{font-style:normal; font-family:'Fraunces',serif; font-style:italic; font-weight:480; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent}
.hero p.lede{margin:24px 0 0; max-width:520px; font-size:clamp(17px,2vw,19px); line-height:1.6; color:var(--ink-soft)}
.hero .actions{display:flex; flex-wrap:wrap; gap:14px; margin-top:36px}
.assurance{margin:24px 0 0; display:inline-flex; align-items:center; gap:9px; font-size:14.5px; font-weight:500; color:var(--ink-soft)}
.assurance .ok{display:inline-flex; width:19px; height:19px; border-radius:50%; background:var(--ink); color:#fff; align-items:center; justify-content:center; font-size:11px; flex:none}

/* Mockups hero — profondeur et couleur assumées */
.mock-stage{position:relative; min-height:clamp(360px,40vw,520px)}
.mock-browser{position:absolute; top:0; left:0; width:min(100%,540px); border-radius:var(--r-lg); overflow:hidden; background:#fff; box-shadow:0 30px 70px rgba(19,17,24,.16), 0 10px 30px rgba(255,77,46,.14); border:1px solid var(--line); transform:rotate(-1.2deg)}
.mock-browser .bar{display:flex; align-items:center; gap:8px; padding:11px 14px; background:#F2EFE9; border-bottom:1px solid var(--line)}
.mock-browser .dot-r{width:10px;height:10px;border-radius:50%;background:#E4E0D6}
.mock-browser .url{margin-left:10px; flex:1; height:22px; border-radius:7px; background:#fff; border:1px solid var(--line); display:flex; align-items:center; gap:6px; padding:0 10px; font-size:11px; color:var(--ink-mute)}
.mock-browser .topbar{display:flex; align-items:center; justify-content:space-between; padding:12px 20px; border-bottom:1px solid var(--line)}
.mock-browser .hero-band{padding:22px 20px; background:linear-gradient(120deg,#6C4DFF,#C23BD8 65%,#FF8A3D); color:#fff}
.mock-browser .grid3{display:flex; gap:12px; padding:16px 20px}
.mock-phone{position:absolute; bottom:-8%; right:2%; width:clamp(148px,21vw,182px); border-radius:30px; padding:9px; background:var(--ink); box-shadow:0 26px 60px rgba(19,17,24,.3), 0 8px 24px rgba(124,58,237,.22); transform:rotate(3deg)}
.mock-phone .inner{border-radius:22px; overflow:hidden; background:#fff}
.mock-phone .notch{height:22px; background:var(--ink); display:flex; justify-content:center; align-items:flex-end; padding-bottom:4px}
.mock-phone .notch span{width:40px; height:5px; border-radius:3px; background:#3a3550}
.mock-float{position:absolute; bottom:100%; left:4%; margin-bottom:22px; z-index:2; display:flex; align-items:center; gap:10px; padding:12px 18px; border-radius:var(--r-lg); background:var(--surface); border:1px solid var(--line); box-shadow:0 20px 44px rgba(19,17,24,.14); transform:rotate(-4deg)}
.mock-float .ic{width:32px; height:32px; border-radius:10px; background:var(--grad); display:flex; align-items:center; justify-content:center; color:#fff; font-size:14px; flex:none}
.mock-float strong{display:block; font-size:15px; color:var(--ink); font-family:'Fraunces',serif; font-weight:480}
.mock-float span{display:block; font-size:10.5px; color:var(--ink-mute)}
@media(max-width:600px){.mock-float{display:none}.mock-browser{transform:none}.mock-phone{transform:none}}

/* Badge logo flottant — accent de marque discret, pas une section dédiée */
@keyframes logoBadgeFloat{0%,100%{transform:rotate(3deg) translateY(0)}50%{transform:rotate(3deg) translateY(-8px)}}
.logo-float{position:absolute; left:0; bottom:-2%; z-index:5; padding:20px 30px; border-radius:var(--r-lg); background:var(--surface); border:1px solid var(--line); box-shadow:0 28px 60px rgba(19,17,24,.22), 0 10px 30px rgba(255,77,46,.18); transform:rotate(3deg); animation:logoBadgeFloat 6s ease-in-out infinite; will-change:transform}
.logo-float img{display:block; height:64px; width:auto}
@media(max-width:480px){.logo-float{display:none}}

/* ---------- Bandeau chiffres ---------- */
.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:clamp(28px,4vw,48px)}
.stats .num{font-family:'Fraunces',serif; font-weight:480; font-size:clamp(42px,5vw,64px); line-height:1; color:var(--ink)}
.stats .lbl{margin:10px 0 0; color:var(--ink-soft); font-size:14.5px}

/* ---------- Cartes services ---------- */
.grid-services{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:22px}
.card-service{position:relative; padding:40px 32px 34px; border-radius:var(--r-lg); background:var(--surface); border:1px solid var(--line); border-top:3px solid var(--brand); transition:transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease), border-color var(--t-base) var(--ease)}
.card-service:nth-child(2){border-top-color:var(--violet)}
.card-service:nth-child(3){border-top-color:var(--yellow)}
.card-service:hover{transform:translateY(-6px); box-shadow:0 24px 50px rgba(19,17,24,.12)}
.card-service .icon{width:56px; height:56px; display:flex; align-items:center; justify-content:center; border-radius:16px; background:linear-gradient(135deg,var(--brand),#E9366F); color:#fff; margin-bottom:22px; box-shadow:0 10px 24px rgba(255,77,46,.28)}
.card-service:nth-child(2) .icon{background:linear-gradient(135deg,var(--violet),#B44DF0); box-shadow:0 10px 24px rgba(124,58,237,.28)}
.card-service:nth-child(3) .icon{background:linear-gradient(135deg,var(--yellow),#FFCE54); box-shadow:0 10px 24px rgba(232,164,0,.28)}
.card-service h3{font-size:21px; margin-bottom:10px}
.card-service p{margin:0 0 18px; color:var(--ink-soft); line-height:1.6}
.card-service .tags{display:flex; flex-wrap:wrap; gap:8px; margin:0; padding:0; list-style:none}
.card-service .tags li{font-family:'Space Grotesk',monospace; font-size:12px; font-weight:500; letter-spacing:.02em; color:var(--ink-soft); background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-pill); padding:6px 12px}

/* ---------- Pourquoi (fond dégradé pastel, cartes colorées) ---------- */
#pourquoi{position:relative; overflow:hidden; background:linear-gradient(160deg,#FFF3EC 0%,#F3ECFF 55%,#FFF8E8 100%)}
#pourquoi::before{content:""; position:absolute; right:-10%; top:-20%; width:44vw; height:44vw; max-width:600px; max-height:600px; background:radial-gradient(circle, rgba(124,58,237,.14), transparent 70%); pointer-events:none}
.grid-why{position:relative; display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:20px}
.card-why{padding:32px 28px; border-radius:var(--r-lg); background:var(--surface); border:1px solid var(--line); box-shadow:0 20px 44px rgba(19,17,24,.06); transition:transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease)}
.card-why:hover{transform:translateY(-5px); box-shadow:0 26px 54px rgba(19,17,24,.1)}
.card-why .icon{width:44px; height:44px; border-radius:12px; background:linear-gradient(135deg,var(--brand),#E9366F); color:#fff; display:flex; align-items:center; justify-content:center; margin-bottom:18px; box-shadow:0 8px 18px rgba(255,77,46,.28)}
.card-why:nth-child(2) .icon{background:linear-gradient(135deg,var(--violet),#B44DF0); box-shadow:0 8px 18px rgba(124,58,237,.28)}
.card-why:nth-child(3) .icon{background:linear-gradient(135deg,var(--yellow),#FFCE54); box-shadow:0 8px 18px rgba(232,164,0,.28)}
.card-why h3{font-size:19px; margin-bottom:10px}
.card-why p{margin:0; color:var(--ink-soft); line-height:1.6}

/* ---------- Processus / timeline ---------- */
.procGrid{display:grid; grid-template-columns:1fr; gap:clamp(32px,5vw,56px); align-items:start}
@media(min-width:900px){.procGrid{grid-template-columns:1.05fr .95fr}}
#timeline{position:relative; list-style:none; margin:0; padding:8px 0 8px clamp(40px,6vw,64px); display:grid; gap:clamp(30px,4.5vw,52px)}
.tl-line{position:absolute; top:0; bottom:0; left:11px; width:2px; background:var(--line-2)}
.tl-progress{position:absolute; top:0; left:10px; width:4px; height:0%; border-radius:4px; background:var(--grad)}
#timeline li{position:relative; transition:transform var(--t-base) var(--ease)}
#timeline li[data-on="true"]{transform:translateX(6px)}
#timeline li .dot{position:absolute; left:calc(4px - clamp(40px,6vw,64px)); top:8px; width:16px; height:16px; border-radius:50%; background:var(--bg); border:3px solid var(--brand)}
#timeline li .row{display:flex; flex-wrap:wrap; align-items:baseline; gap:16px}
#timeline li .n{font-family:'Fraunces',serif; font-weight:480; font-size:clamp(26px,3.6vw,42px); color:var(--brand-ink)}
#timeline li h3{font-size:21px}
#timeline li p{margin:8px 0 0; color:var(--ink-soft); line-height:1.6; max-width:600px}
.procVisual{position:relative; min-height:340px; border-radius:var(--r-lg); overflow:hidden; background:var(--dark); box-shadow:var(--shadow-md); display:none}
@media(min-width:900px){.procVisual{display:block; position:sticky; top:calc(var(--header-h) + 28px); min-height:400px}}
.procScene{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; padding:34px; opacity:0; transform:scale(.97); transition:opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease)}
.procScene[data-active="true"]{opacity:1; transform:scale(1)}

/* ---------- Portfolio ---------- */

/* ---------- Engagements (remplace les faux témoignages) ---------- */
.grid-engage{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:24px}
.card-engage{padding:32px 30px; border-radius:var(--r-lg); background:var(--surface); border:1px solid var(--line); border-top:3px solid var(--brand); box-shadow:0 20px 44px rgba(19,17,24,.06); transition:transform var(--t-base) var(--ease)}
.card-engage:hover{transform:translateY(-5px)}
.card-engage:nth-child(2){border-top-color:var(--violet)}
.card-engage:nth-child(3){border-top-color:var(--yellow)}
.card-engage .mark{font-family:'Fraunces',serif; font-weight:480; font-size:28px; color:var(--brand-ink); margin-bottom:14px}
.card-engage h3{font-size:18px; margin-bottom:8px}
.card-engage p{margin:0; color:var(--ink-soft); line-height:1.6; font-size:14.5px}
.launch-banner{position:relative; overflow:hidden; margin-top:36px; display:flex; flex-wrap:wrap; align-items:center; gap:24px; padding:34px 38px; border-radius:var(--r-lg); background:var(--ink); box-shadow:0 30px 64px rgba(19,17,24,.28)}
.launch-accent{position:absolute; top:0; left:0; right:0; height:4px; border-radius:var(--r-lg) var(--r-lg) 0 0; background:linear-gradient(90deg,var(--brand),var(--violet)); pointer-events:none}
.launch-banner::before{content:""; position:absolute; inset:-40% auto auto -8%; width:48%; height:180%; background:radial-gradient(circle, rgba(255,77,46,.28), transparent 70%); pointer-events:none}
.launch-banner::after{content:""; position:absolute; inset:auto -8% -50% auto; width:40%; height:160%; background:radial-gradient(circle, rgba(124,58,237,.24), transparent 70%); pointer-events:none}
.launch-badge{position:relative; flex:none; width:54px; height:54px; border-radius:16px; background:var(--grad); display:flex; align-items:center; justify-content:center; font-size:24px; box-shadow:0 12px 28px rgba(255,77,46,.4)}
.launch-text{position:relative; flex:1; min-width:260px}
.launch-eyebrow{margin:0 0 6px; font-family:'Space Grotesk',monospace; font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:#FF9E86}
.launch-text h3{margin:0 0 10px; font-size:clamp(19px,2.4vw,23px); color:#fff; display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.launch-pill{font-family:'Space Grotesk',monospace; font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; background:rgba(255,158,134,.16); color:#FFB199; padding:5px 12px; border-radius:999px; border:1px solid rgba(255,158,134,.32)}
.launch-desc{margin:0; font-size:14.5px; line-height:1.65; color:var(--dark-mute); max-width:520px}
.launch-banner .btn{position:relative}
@media(max-width:640px){.launch-banner{padding:28px}}

/* ---------- FAQ ---------- */
.faqList{display:grid; gap:0; border-top:1px solid var(--line)}
.faqList details{border-bottom:1px solid var(--line)}
.faqList summary{list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:26px 4px; font-size:clamp(17px,2vw,20px); font-weight:600}
.faqList summary::-webkit-details-marker{display:none}
.faqList summary:hover{color:var(--brand-ink)}
.faqPlus{flex:none; width:32px; height:32px; border-radius:50%; background:var(--brand-soft); color:var(--brand-ink); display:flex; align-items:center; justify-content:center; font-size:19px; line-height:1; transition:transform var(--t-base) var(--ease-spring)}
details[open] .faqPlus{transform:rotate(135deg)}
.faqList p{margin:0; padding:0 4px 28px; color:var(--ink-soft); line-height:1.7; max-width:720px}

/* ---------- Contact (clair, coloré, attractif) ---------- */
#contact{background:var(--contact-wash); color:var(--ink); position:relative; overflow:hidden}
#contact::before{
  content:""; position:absolute; inset:-20% -10% auto auto; width:46vw; height:46vw; max-width:620px; max-height:620px;
  background:radial-gradient(circle at 60% 40%, rgba(124,58,237,.16), rgba(255,77,46,.10) 50%, transparent 75%);
  pointer-events:none;
}
#contact .container{position:relative}
#contact .eyebrow{color:var(--brand-ink)}
#contact .contact-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:clamp(32px,6vw,80px)}
#contact .lede{color:var(--ink-soft); max-width:440px}
#contact .assurance{color:var(--ink)}
#contact .assurance .ok{background:var(--brand)}
.contact-channels{display:flex; flex-direction:column; gap:14px; font-size:16.5px; margin-top:28px}
.contact-channels a{display:flex; align-items:center; gap:12px; color:var(--ink); font-weight:600}
.contact-channels a:hover{color:var(--brand-ink)}
#contactForm{
  display:flex; flex-direction:column; gap:16px; padding:32px; border-radius:var(--r-lg);
  border:3px solid transparent; background:linear-gradient(var(--surface),var(--surface)) padding-box, var(--grad) border-box;
  box-shadow:0 24px 60px rgba(124,58,237,.14), 0 10px 26px rgba(255,77,46,.10);
}
#contactForm .req-note{margin:0; font-size:13px; color:var(--ink-mute)}
#contactForm label{display:flex; flex-direction:column; gap:8px; font-size:14px; color:var(--ink-soft)}
#contactForm .row2{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:16px}
#contactForm input,#contactForm textarea,#contactForm select{padding:14px 16px; border-radius:12px; border:1px solid var(--line); background:var(--bg); color:var(--ink); font-size:16px; font-family:inherit; transition:border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease)}
#contactForm input:focus,#contactForm textarea:focus,#contactForm select:focus{outline:none; border-color:var(--brand); box-shadow:0 0 0 4px var(--brand-soft)}
#contactForm textarea{resize:vertical}
#contactForm .fine{margin:2px 0 0; font-size:12.5px; line-height:1.55; color:var(--ink-mute)}
#contactForm .fine a{color:var(--brand-ink); text-decoration:underline}


/* ---------- Footer ---------- */
footer.site{background:var(--dark); color:var(--dark-mute); padding:48px clamp(20px,5vw,64px) 40px; border-top:1px solid var(--dark-line)}
.footer-grid{max-width:1240px; margin:0 auto; display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:36px; align-items:start}
.footer-brand{display:flex; flex-direction:column; gap:16px; max-width:300px}
.footer-brand .brand{display:inline-flex; align-items:center; padding:10px 16px; border-radius:14px; background:#fff; width:max-content}
.footer-brand .brand img{height:24px}
.footer-social{display:flex; gap:12px}
.footer-social a{width:40px; height:40px; border-radius:11px; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,.08); color:#fff; transition:background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease)}
.footer-social a:hover{background:var(--brand); transform:translateY(-3px)}
.footer-nav{display:flex; flex-direction:column; gap:12px; font-size:15px}
.footer-nav a:hover{color:#fff}
.footer-legal{display:flex; flex-direction:column; gap:12px; font-size:14px}
.footer-legal a:hover{color:#fff}
.footer-copy{margin:10px 0 0; color:rgba(255,255,255,.4)}

/* ---------- Bandeau technologies ---------- */

/* ---------- Widget flottant ---------- */
.floatCta{position:fixed; right:20px; bottom:20px; z-index:40; visibility:hidden; opacity:0; transform:translateY(16px) scale(.95); pointer-events:none; transition:opacity var(--t-base) var(--ease), transform var(--t-base) var(--ease)}
.floatCta.is-visible{visibility:visible; opacity:1; transform:none; pointer-events:auto}
.floatCta a{display:flex; align-items:center; gap:10px; padding:14px 22px; border-radius:var(--r-pill); background:var(--ink); color:#fff; font-weight:600; font-size:14.5px; box-shadow:0 16px 40px rgba(19,17,24,.28); transition:transform var(--t-fast) var(--ease)}
.floatCta a:hover{transform:translateY(-3px)}
.floatCta .dot{width:9px; height:9px; border-radius:50%; background:var(--brand); flex:none; animation:ctaPulse 2.2s ease-in-out infinite}
@keyframes ctaPulse{0%,100%{opacity:.5; transform:scale(1)}50%{opacity:1; transform:scale(1.3)}}
@media(max-width:600px){.floatCta{right:14px; bottom:14px}.floatCta a{padding:12px 18px; font-size:13.5px}}

/* ---------- Utilitaires ---------- */
.scroll-x{overflow-x:auto}
[data-count]{display:inline-block; padding-right:.1em; min-width:2ch}

/* ---------- Responsive ---------- */
@media(max-width:860px){
  .navBurger{display:flex}
  .navLinks{position:fixed; top:calc(var(--header-h) + 8px); left:12px; right:12px; flex-direction:column; align-items:stretch !important; gap:6px !important; padding:14px; background:rgba(250,250,247,.98); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border:1px solid var(--line); border-radius:18px; box-shadow:var(--shadow-md); transform:translateY(-12px); opacity:0; visibility:hidden; pointer-events:none; transition:transform var(--t-base) var(--ease), opacity var(--t-base) var(--ease), visibility var(--t-base)}
  .navLinks[data-open="true"]{transform:none; opacity:1; visibility:visible; pointer-events:auto}
  .navLinks a{padding:14px 16px; font-size:16px; border-radius:12px}
  .navLinks a.btn{justify-content:center}
}
@media(max-width:700px){
  .card-service,.card-why,{transform:none !important}
  .card-service:hover,.card-why:hover,.pfCard:hover .frame{transform:translateY(-4px) !important}
}
@media(max-width:600px){
  .procVisual{display:none}
}
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important}
}

/* ---------- Mouvement — sobre, réservé ---------- */
.js [data-reveal]{opacity:0; transform:translateY(20px); transition:opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease)}
.js [data-reveal].is-in{opacity:1; transform:none}
@keyframes popIn{from{opacity:0;transform:translateY(16px) scale(.97)}to{opacity:1;transform:none}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

/* ===================================================================
   Variante "Vivid" — logo, marquee, tilt au survol, couleurs secondaires
=================================================================== */

/* ---------- Logo : léger flottement ---------- */
@keyframes logoFloatSubtle{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
.brand img{animation:logoFloatSubtle 5s ease-in-out infinite; will-change:transform}

/* ---------- Marquee ---------- */
.marquee{overflow:hidden; background:var(--ink); color:#fff; display:flex}
.marquee-track{
  display:flex; gap:14px; flex:none; white-space:nowrap;
  padding:16px 24px; font-family:'Space Grotesk',monospace; font-weight:700;
  font-size:18px; text-transform:uppercase; letter-spacing:.02em;
  animation:marqueeScroll 30s linear infinite;
}
.marquee-track .sep{color:var(--brand); font-size:14px}
@keyframes marqueeScroll{from{transform:translateX(0)}to{transform:translateX(-100%)}}
.marquee:hover .marquee-track{animation-play-state:paused}

/* ---------- Cartes : tilt au survol uniquement ---------- */
.card-service:hover{transform:translateY(-6px) rotate(-1deg)}
.card-service:nth-child(2):hover{transform:translateY(-6px) rotate(1deg)}
.card-service:nth-child(3):hover{transform:translateY(-6px) rotate(-.6deg)}
.card-why:hover{transform:translateY(-5px) rotate(.8deg)}
.card-why:nth-child(2):hover{transform:translateY(-5px) rotate(-.8deg)}

/* ---------- Pourquoi : icônes multi-couleurs ---------- */
.card-why:nth-child(2) .icon{background:var(--violet)}
.card-why:nth-child(3) .icon{background:var(--yellow)}

/* ---------- Chiffres : texte en dégradé ---------- */
.stats > div:nth-child(1) .num{background:linear-gradient(120deg,var(--brand),#E9366F); -webkit-background-clip:text; background-clip:text; color:transparent}
.stats > div:nth-child(2) .num{background:linear-gradient(120deg,#E9366F,var(--violet)); -webkit-background-clip:text; background-clip:text; color:transparent}
.stats > div:nth-child(3) .num{background:linear-gradient(120deg,var(--violet),var(--brand)); -webkit-background-clip:text; background-clip:text; color:transparent}
.stats > div:nth-child(4) .num{background:linear-gradient(120deg,var(--brand),var(--yellow)); -webkit-background-clip:text; background-clip:text; color:transparent}

/* ---------- Portfolio : badges colorés selon la catégorie ---------- */

/* ---------- Engagements : numéros en couleur ---------- */
.card-engage:nth-child(2) .mark{color:var(--violet)}
.card-engage:nth-child(3) .mark{color:var(--yellow)}

/* ===================================================================
   v2 — Section "Nos produits" + couche d'animation
   Même grammaire que le reste : neutres chauds, accent corail,
   violet / jaune en secondaires, cadres fenêtre et téléphone du hero.
=================================================================== */

/* ---------- Barre de progression de lecture ---------- */
.scrollBar{position:fixed; top:0; left:0; right:0; height:3px; z-index:60; background:var(--grad); transform-origin:0 50%; transform:scaleX(0); pointer-events:none}

/* ---------- Hero : rappel des produits publiés ---------- */
.hero h1 em{background-size:220% 100%; animation:gradShift 7s ease-in-out infinite}
@keyframes gradShift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@keyframes floatA{0%,100%{transform:rotate(-1.2deg) translateY(0)}50%{transform:rotate(-1.2deg) translateY(-9px)}}
@keyframes floatB{0%,100%{transform:rotate(3deg) translateY(0)}50%{transform:rotate(3deg) translateY(10px)}}
@media(min-width:601px){
  .mock-browser{animation:floatA 8s ease-in-out infinite}
  .mock-phone{animation:floatB 7s ease-in-out infinite}
}
@keyframes haloDrift{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-3%,4%) scale(1.06)}}
.hero-halo{animation:haloDrift 14s ease-in-out infinite}
.hero-halo-2{animation:haloDrift 18s ease-in-out infinite reverse}

/* ---------- Boutons : reflet au survol ---------- */
.btn-primary{position:relative; overflow:hidden}
.btn-primary::after{content:""; position:absolute; top:0; bottom:0; left:-60%; width:40%; background:linear-gradient(100deg,transparent,rgba(255,255,255,.38),transparent); transform:skewX(-18deg); transition:left 0s}
.btn-primary:hover::after{left:130%; transition:left .7s var(--ease)}

.prod-facts{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:0; border-radius:var(--r-lg); background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow-sm)}
.prod-facts li{padding:20px 18px; border-left:1px solid var(--line)}
.prod-facts li:first-child{border-left:none}
.prod-facts .n{display:block; font-family:'Fraunces',serif; font-weight:480; font-size:clamp(34px,4vw,46px); line-height:1; color:var(--brand-ink)}
.prod-facts li:nth-child(2) .n{color:var(--violet)}
.prod-facts li:nth-child(3) .n{color:var(--yellow)}
.prod-facts .l{display:block; margin-top:8px; font-size:13px; line-height:1.4; color:var(--ink-soft)}
/* Produit phare — panneau sombre, même famille que l'offre de lancement */
.gwFeature{position:relative; overflow:hidden; display:grid; grid-template-columns:1fr; gap:clamp(28px,4vw,48px); align-items:center; padding:clamp(28px,4.4vw,56px); border-radius:calc(var(--r-lg) + 6px); background:var(--ink); color:var(--dark-text); box-shadow:0 34px 80px rgba(19,17,24,.30); margin-bottom:56px}
@media(min-width:960px){.gwFeature{grid-template-columns:.95fr 1.05fr}}
.gwFeature .accent{position:absolute; top:0; left:0; right:0; height:4px; background:linear-gradient(90deg,var(--brand),#E9366F,var(--violet)); background-size:200% 100%; animation:gradShift 6s ease-in-out infinite}
.gwFeature .glow{position:absolute; width:520px; height:520px; border-radius:50%; pointer-events:none; left:var(--mx,18%); top:var(--my,30%); transform:translate(-50%,-50%); background:radial-gradient(circle, rgba(255,77,46,.24), transparent 65%); transition:left .5s var(--ease), top .5s var(--ease)}
.gwFeature::after{content:""; position:absolute; right:-10%; bottom:-45%; width:52%; height:150%; background:radial-gradient(circle, rgba(124,58,237,.30), transparent 70%); pointer-events:none}
.gwFeature > *{position:relative; z-index:1}
.gwFeature .accent,.gwFeature .glow{z-index:0}
.gw-id{display:flex; align-items:center; gap:16px; margin-bottom:22px}
.gw-id img{width:68px; height:68px; border-radius:18px; box-shadow:0 14px 30px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.12)}
.gw-kicker{margin:0 0 4px; font-family:'Space Grotesk',monospace; font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:#FF9E86}
.gwFeature h3{font-size:clamp(28px,3.6vw,40px); line-height:1.05; color:#fff}
.gwFeature .pitch{margin:0 0 22px; font-size:clamp(16px,1.7vw,18.5px); line-height:1.6; color:var(--dark-mute); max-width:520px}
.gwFeature .pitch strong{color:#fff; font-weight:600}
.gw-points{list-style:none; margin:0 0 28px; padding:0; display:grid; gap:11px}
.gw-points li{display:flex; gap:12px; align-items:flex-start; font-size:15px; line-height:1.5; color:var(--dark-text)}
.gw-points li::before{content:"✓"; flex:none; width:20px; height:20px; margin-top:1px; border-radius:50%; background:var(--grad); color:#fff; font-size:11px; display:flex; align-items:center; justify-content:center}

.gw-stage{position:relative; min-height:clamp(300px,34vw,430px); perspective:1200px}
.gw-window{position:absolute; top:4%; left:0; width:min(100%,560px); border-radius:var(--r-md); overflow:hidden; background:#fff; border:1px solid rgba(255,255,255,.14); box-shadow:0 30px 70px rgba(0,0,0,.5), 0 10px 30px rgba(255,77,46,.18); transform:rotate(-1.2deg); animation:floatA 8s ease-in-out infinite}
.winBar{display:flex; align-items:center; gap:7px; padding:10px 13px; background:#F2EFE9; border-bottom:1px solid var(--line)}
.winBar i{width:9px; height:9px; border-radius:50%; background:#E4E0D6}
.winBar b{margin-left:8px; flex:1; height:20px; border-radius:7px; background:#fff; border:1px solid var(--line); display:flex; align-items:center; padding:0 10px; font:500 10.5px 'Space Grotesk',monospace; color:var(--ink-mute); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.winBar.dark{background:#171A22; border-bottom-color:#252A36}
.winBar.dark i{background:#2A2E3A}
.winBar.dark b{background:#0F1117; border-color:#252A36; color:#8A93A6}
.gw-window img,.pShot img{display:block; width:100%; height:auto}
@keyframes screenSwap{0%,42%{opacity:0}50%,92%{opacity:1}100%{opacity:0}}
.gw-chip{position:absolute; left:6%; bottom:2%; z-index:2; display:flex; align-items:center; gap:10px; padding:11px 16px; border-radius:var(--r-md); background:var(--surface); color:var(--ink); box-shadow:0 20px 44px rgba(0,0,0,.4); font-size:13.5px; font-weight:600; transform:rotate(-3deg); animation:logoBadgeFloat 6s ease-in-out infinite}
.gw-chip .pulse{width:9px; height:9px; border-radius:50%; background:#16A34A; box-shadow:0 0 0 0 rgba(22,163,74,.5); animation:livePulse 2s ease-out infinite}
@keyframes livePulse{0%{box-shadow:0 0 0 0 rgba(22,163,74,.5)}100%{box-shadow:0 0 0 10px rgba(22,163,74,0)}}
@media(max-width:600px){.gw-window{transform:none; animation:none; position:relative; top:0}.gw-stage{min-height:0; padding-bottom:70px}.gw-chip{display:none}}
/* ---------- Révélations : variantes et cascade ---------- */
.js [data-reveal="left"]{transform:translateX(-28px)}
.js [data-reveal="right"]{transform:translateX(28px)}
.js [data-reveal="zoom"]{transform:scale(.94)}
.js [data-reveal]{transition-delay:calc(var(--i,0) * 90ms)}


/* ===================================================================
   VigieWeb — ajustements d'accessibilité du modèle
   (un site qui vend des pré-diagnostics doit passer le sien)
=================================================================== */
:root{
  --ink-mute:#6B6674;                                   /* 5,3:1 sur --bg (au lieu de 3,4:1) */
  --grad-btn:linear-gradient(105deg,#D93A1C,#C8245C);   /* texte blanc ≥ 4,5:1 sur tout le dégradé */
  --ok:#13703A; --ok-soft:#E6F6EC;
  --warn:#8A5A00; --warn-soft:#FFF4D6;
  --bad:#B4231A; --bad-soft:#FDECEA;
  --blue:#1F6FEB; --blue-ink:#1554C0; --blue-soft:#EAF2FF;
}
.btn-primary{background:var(--grad-btn)}
.btn-primary:hover{box-shadow:0 20px 44px rgba(217,58,28,.30)}
.footer-copy{color:rgba(255,255,255,.66)}
.pill{display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:var(--r-pill); font-size:11.5px; font-weight:700; white-space:nowrap}
.pill-bad{background:var(--bad-soft); color:var(--bad)}
.pill-warn{background:var(--warn-soft); color:var(--warn)}
.pill-ok{background:var(--ok-soft); color:var(--ok)}
.pill-dark{background:var(--ink); color:#fff}

/* ---------- Marque ---------- */
.brand{gap:10px; font-weight:700; font-size:20px; letter-spacing:-.01em; color:var(--ink)}
.brand img{height:36px; width:36px; border-radius:10px}
.brand .wm b{font-weight:700; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent}
.navLinks a[aria-current="page"]:not(.btn){color:var(--ink)}
.navLinks a[aria-current="page"]:not(.btn)::after{transform:scaleX(1)}
.navLinks .btn{padding:11px 22px; min-height:auto; font-size:14.5px}
.footer-brand .brand{gap:10px; color:var(--ink); font-size:17px}
.footer-brand .brand img{height:28px; width:28px; border-radius:8px}
.footer-brand p{margin:0; font-size:14.5px; line-height:1.6}
.footer-brand a{text-decoration:underline; text-underline-offset:3px}
footer.site h2{margin:0 0 6px; font-family:'Space Grotesk',monospace; font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:#fff}
.footer-nav ul,.footer-legal ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px}
.footer-bottom{max-width:1240px; margin:36px auto 0; padding-top:22px; border-top:1px solid var(--dark-line); display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; font-size:13.5px; color:rgba(255,255,255,.66)}
.footer-bottom p{margin:0}

/* ---------- Hero : maquette de rapport ---------- */
.rp{padding:18px 20px 20px}
.rp-head{display:flex; align-items:center; justify-content:space-between; gap:12px; padding-bottom:14px; border-bottom:1px solid var(--line)}
.rp-site{font-size:13px; font-weight:700; color:var(--ink)}
.rp-site small{display:block; font-weight:500; font-size:10.5px; color:var(--ink-mute)}
.rp-body{display:grid; grid-template-columns:auto 1fr; gap:18px; align-items:center; padding:16px 0 6px}
.ring{position:relative; width:104px; height:104px}
.ring svg{width:100%; height:100%; transform:rotate(-90deg)}
.ring circle{fill:none; stroke-width:9; stroke-linecap:round}
.ring .t{stroke:var(--surface-2)}
.ring .p{stroke:url(#gradScore); stroke-dasharray:283; stroke-dashoffset:283; animation:ringFill 2.2s var(--ease) .4s forwards}
@keyframes ringFill{to{stroke-dashoffset:var(--off,113)}}
.ring span{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; font-size:9.5px; color:var(--ink-mute); font-weight:600}
.ring b{font-family:'Fraunces',serif; font-style:italic; font-weight:480; font-size:30px; line-height:1; color:var(--ink)}
.bars{display:grid; gap:10px}
.bar-row{display:grid; grid-template-columns:86px 1fr 26px; align-items:center; gap:8px; font-size:10.5px; font-weight:600; color:var(--ink-soft)}
.bar-row i{display:block; height:7px; border-radius:4px; background:var(--surface-2); overflow:hidden}
.bar-row i::before{content:""; display:block; height:100%; width:var(--w,50%); border-radius:4px; background:var(--grad); transform-origin:left; animation:barGrow 1.8s var(--ease) .6s both}
.bar-row:nth-child(2) i::before{background:linear-gradient(90deg,var(--violet),#B44DF0)}
.bar-row:nth-child(3) i::before{background:linear-gradient(90deg,var(--yellow),#FFCE54)}
.bar-row b{text-align:right; color:var(--ink)}
@keyframes barGrow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.w52{--w:52%}.w64{--w:64%}.w61{--w:61%}.w78{--w:78%}.w90{--w:90%}.w45{--w:45%}
.off58{--off:119}
.rp-list{list-style:none; margin:10px 0 0; padding:0; display:grid; gap:8px}
.rp-list li{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 12px; border-radius:12px; background:var(--bg); border:1px solid var(--line); font-size:11.5px; font-weight:600; color:var(--ink); opacity:0; transform:translateY(8px); animation:rowIn .6s var(--ease) forwards}
.rp-list li:nth-child(1){animation-delay:1.1s}.rp-list li:nth-child(2){animation-delay:1.35s}.rp-list li:nth-child(3){animation-delay:1.6s}
@keyframes rowIn{to{opacity:1; transform:none}}
.rp-list small{display:block; font-size:9.5px; font-weight:500; color:var(--ink-mute)}
.scanline{position:absolute; left:0; right:0; top:46px; height:60px; pointer-events:none; background:linear-gradient(180deg,transparent,rgba(31,111,235,.10),transparent); animation:scan 4.5s ease-in-out infinite}
@keyframes scan{0%{transform:translateY(0); opacity:0}15%{opacity:1}85%{opacity:1}100%{transform:translateY(300px); opacity:0}}
.mock-phone .ph-body{padding:12px}
.ph-title{margin:0; font-size:11px; font-weight:700; color:var(--ink)}
.ph-sub{margin:2px 0 10px; font-size:9px; color:var(--ink-mute)}
.ph-card{padding:12px; border-radius:13px; background:linear-gradient(150deg,#FF6A3D,#C23BD8); color:#fff}
.ph-card p{margin:0; font-size:9px}
.ph-card b{display:block; margin:2px 0 6px; font-family:'Fraunces',serif; font-style:italic; font-weight:480; font-size:22px}
.ph-items{display:grid; gap:6px; margin-top:10px}
.ph-items span{display:flex; justify-content:space-between; align-items:center; padding:8px 9px; border-radius:10px; background:var(--surface-2); font-size:9px; font-weight:700; color:var(--ink)}
.ph-items i{width:8px; height:8px; border-radius:50%; background:var(--bad)}
.ph-items span:nth-child(2) i{background:#E8A400}
.ph-items span:nth-child(3) i{background:#16A34A}
.logo-float{display:flex; align-items:center; gap:14px; padding:16px 26px 16px 18px}
.logo-float img{height:58px; width:58px; border-radius:16px}
.logo-float .wm{font-size:30px; font-weight:700; letter-spacing:-.02em; color:var(--ink)}
.logo-float .wm b{background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent}
.mock-float .ic svg{display:block}
.hero-proof{margin-top:28px; display:inline-flex; align-items:center; gap:14px; padding:10px 18px 10px 10px; border-radius:var(--r-pill); background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow-sm); transition:transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease)}
.hero-proof:hover{transform:translateY(-2px); box-shadow:var(--shadow-md)}
.hero-proof img{width:38px; height:38px; border-radius:11px}
.hero-proof .txt{font-size:14px; line-height:1.35; color:var(--ink-soft)}
.hero-proof .txt strong{display:block; color:var(--ink); font-weight:600}
.hero-proof .arrow{color:var(--brand-ink); font-weight:700}

/* ---------- Moteur (panneau sombre) ---------- */
.gw-window .moteur{display:block; width:100%; height:auto; aspect-ratio:708/176; object-fit:cover}
.gw-window .moteur-cap{display:grid; grid-template-columns:repeat(3,1fr); gap:0; background:#0B0D13; border-top:1px solid rgba(255,255,255,.08)}
.gw-window .moteur-cap span{padding:14px 12px; border-left:1px solid rgba(255,255,255,.08); font-size:11.5px; line-height:1.35; color:var(--dark-mute)}
.gw-window .moteur-cap span:first-child{border-left:none}
.gw-window .moteur-cap b{display:block; font-family:'Fraunces',serif; font-style:italic; font-weight:480; font-size:24px; color:#fff}
.gw-window .moteur-log{padding:14px 16px 18px; background:#0B0D13; font-family:ui-monospace,Menlo,Consolas,monospace; font-size:11.5px; line-height:1.9; color:#9AA3B5}
.gw-window .moteur-log .k{color:#FF9E86}.gw-window .moteur-log .v{color:#7FD4FF}.gw-window .moteur-log .ok{color:#5BE38E}
.gw-window{background:#0B0D13}
.gw-window .winBar{display:flex; align-items:center; gap:7px; padding:10px 14px; background:#171A22}
.gw-window .winBar i{width:9px; height:9px; border-radius:50%; background:#3a3550}
.gw-window .winBar span{margin-left:8px; font-size:11px; color:#9AA3B5}
.gw-stage{min-height:clamp(300px,30vw,400px)}
.gw-chip{left:auto; right:4%; bottom:4%}

/* ---------- Date clé ---------- */
.keydate{display:grid; grid-template-columns:1fr; gap:clamp(24px,5vw,72px); align-items:start}
@media(min-width:900px){.keydate{grid-template-columns:.8fr 1.2fr}}
.keydate .big{font-family:'Fraunces',serif; font-style:italic; font-weight:480; font-size:clamp(56px,8vw,104px); line-height:.95; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent}
.keydate .big-sub{margin:12px 0 0; font-family:'Space Grotesk',monospace; font-size:13px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft)}
.keydate h2{font-size:clamp(26px,3.2vw,38px); line-height:1.12; margin-bottom:18px}
.keydate p{color:var(--ink-soft); line-height:1.7; margin:0 0 14px}
.sources{font-size:13.5px; color:var(--ink-mute)}
.sources a, .prose a, .text-link{color:var(--brand-ink); text-decoration:underline; text-underline-offset:3px}
.text-link{font-weight:600}

/* ---------- Comparatif ---------- */
.cmp{border-radius:var(--r-lg); background:var(--surface); border:1px solid var(--line); box-shadow:0 20px 44px rgba(19,17,24,.06); overflow:hidden}
.cmp table{width:100%; border-collapse:collapse; font-size:15px}
.cmp th,.cmp td{padding:16px 22px; text-align:left; border-bottom:1px solid var(--line)}
.cmp thead th{font-family:'Space Grotesk',monospace; font-size:12.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft); background:var(--bg)}
.cmp thead th.hl{color:#fff; background:var(--ink)}
.cmp tbody th{font-weight:500; color:var(--ink)}
.cmp td.hl{background:#FFF8F5; font-weight:600}
.cmp tr:last-child th,.cmp tr:last-child td{border-bottom:none}
.yes{color:var(--ok); font-weight:700}
.no{color:var(--ink-mute)}
.cmp-foot{display:flex; flex-wrap:wrap; gap:14px; align-items:center; justify-content:space-between; margin-top:24px}

/* ---------- Pourquoi : liste à coches ---------- */
.card-why ul{margin:12px 0 0; padding:0; list-style:none; display:grid; gap:8px}
.card-why li{display:flex; gap:10px; font-size:14.5px; line-height:1.5; color:var(--ink-soft)}
.card-why li::before{content:""; flex:none; width:7px; height:7px; margin-top:8px; border-radius:50%; background:var(--brand)}
.card-why:nth-child(2) li::before{background:var(--violet)}
.card-why:nth-child(3) li::before{background:var(--yellow)}

/* ---------- Scènes du processus ---------- */
.sc{width:100%; max-width:340px; display:flex; flex-direction:column; gap:12px}
.sc-bubble{max-width:82%; padding:14px 18px; border-radius:18px 18px 18px 4px; background:var(--dark-2); color:#fff; font-size:14px; line-height:1.5}
.sc-bubble.me{align-self:flex-end; border-radius:18px 18px 4px 18px; background:var(--grad-btn)}
.sc-term{border-radius:14px; overflow:hidden; background:#0B0D13; border:1px solid #252A36}
.sc-term .tb{display:flex; gap:6px; padding:11px 13px; background:#171A22}
.sc-term .tb i{width:9px; height:9px; border-radius:50%; background:#3a3550}
.sc-term pre{margin:0; padding:16px 18px; font-family:ui-monospace,Menlo,Consolas,monospace; font-size:12px; line-height:1.9; color:#C9CFDB; white-space:pre-wrap}
.sc-term .k{color:#FF9E86}.sc-term .v{color:#7FD4FF}.sc-term .ok{color:#5BE38E}.sc-term .w{color:#FFCE54}
.sc-card{border-radius:14px; padding:18px; background:#fff; color:var(--ink); box-shadow:0 16px 40px rgba(0,0,0,.4)}
.sc-card h3{font-size:15px; margin:0 0 10px}
.sc-card ul{list-style:none; margin:0; padding:0; display:grid; gap:8px}
.sc-card li{display:flex; justify-content:space-between; gap:8px; align-items:center; font-size:12.5px; font-weight:600; padding:9px 10px; border-radius:10px; background:var(--bg); border:1px solid var(--line)}
.sc-card .lock{margin-top:12px; padding:12px; border-radius:10px; background:var(--surface-2); font-size:12px; color:var(--ink-soft); text-align:center}
.sc-doc{display:grid; grid-template-columns:auto 1fr; gap:14px; align-items:center; border-radius:14px; padding:18px; background:#fff; box-shadow:0 16px 40px rgba(0,0,0,.4)}
.sc-doc .ic{width:52px; height:64px; border-radius:8px; background:var(--grad-btn); color:#fff; display:flex; align-items:flex-end; justify-content:center; padding-bottom:8px; font:700 11px 'Space Grotesk',monospace}
.sc-doc b{display:block; font-size:14px; color:var(--ink)}
.sc-doc span{font-size:12px; color:var(--ink-soft)}
.sc-chart{border-radius:14px; padding:20px; background:#0B0D13; border:1px solid #252A36}
.sc-chart .top{display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; font-size:12.5px; color:#C9CFDB}
.sc-chart .cols{display:flex; align-items:flex-end; gap:10px; height:120px}
.sc-chart .cols i{flex:1; border-radius:6px 6px 0 0; background:linear-gradient(#FF8A3D,#E9366F)}
.sc-chart .cols i:nth-child(1){height:42%; background:#252A36}
.sc-chart .cols i:nth-child(2){height:58%}
.sc-chart .cols i:nth-child(3){height:76%; background:linear-gradient(#E9366F,#7C3AED)}
.sc-chart .cols i:nth-child(4){height:94%; background:linear-gradient(#7C3AED,#22D3EE)}
.sc-chart .pill-ok{background:rgba(52,211,153,.15); color:#5BE38E}

/* ---------- Pages intérieures ---------- */
.page-hero{position:relative; overflow:hidden; padding-top:calc(var(--header-h) + 56px); padding-bottom:clamp(40px,5vw,64px); background:var(--bg)}
.page-hero .container{position:relative}
.page-hero h1{font-size:clamp(38px,5.6vw,68px); line-height:1.03; letter-spacing:-.03em; max-width:14em}
.page-hero h1 em{font-family:'Fraunces',serif; font-style:italic; font-weight:480; background:var(--grad); background-size:220% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; animation:gradShift 7s ease-in-out infinite}
.page-hero .lede{margin:22px 0 0; max-width:640px; font-size:clamp(17px,2vw,19px); line-height:1.6; color:var(--ink-soft)}
.page-hero .hero-halo{width:48vw; height:48vw; max-width:640px; max-height:640px}
.page-hero .actions{display:flex; flex-wrap:wrap; gap:14px; margin-top:32px}
.band{background:var(--surface-2)}
.band-pastel{position:relative; overflow:hidden; background:linear-gradient(160deg,#FFF3EC 0%,#F3ECFF 55%,#FFF8E8 100%)}
.grid-2{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:clamp(24px,4vw,48px); align-items:start}
.panel{padding:clamp(26px,3vw,36px); border-radius:var(--r-lg); background:var(--surface); border:1px solid var(--line); box-shadow:0 20px 44px rgba(19,17,24,.06)}
.panel h3{font-size:20px; margin:0 0 12px}
.panel p{color:var(--ink-soft); line-height:1.65; margin:0 0 12px}
.checks{list-style:none; margin:14px 0 0; padding:0; display:grid; gap:10px}
.checks li{display:flex; gap:12px; align-items:flex-start; line-height:1.55; color:var(--ink-soft)}
.checks li::before{content:"✓"; flex:none; width:20px; height:20px; margin-top:2px; border-radius:50%; background:var(--grad-btn); color:#fff; font-size:11px; display:flex; align-items:center; justify-content:center}
.checks.neg li::before{content:"✕"; background:var(--ink)}
.limits{border-top:3px solid var(--ink)}
.prose{max-width:760px}
.prose h2{font-size:clamp(22px,2.6vw,28px); margin:44px 0 14px}
.prose h2:first-child{margin-top:0}
.prose p,.prose li{color:var(--ink-soft); line-height:1.75}
.prose dl{display:grid; grid-template-columns:minmax(150px,220px) 1fr; gap:10px 24px; margin:0; padding:22px 24px; border-radius:var(--r-md); background:var(--surface); border:1px solid var(--line)}
.prose dt{font-weight:600; color:var(--ink)}
.prose dd{margin:0; color:var(--ink-soft)}
@media(max-width:600px){.prose dl{grid-template-columns:1fr}.prose dd{margin-bottom:10px}}

/* ---------- Offres ---------- */
.offers{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:24px; list-style:none; margin:0; padding:0}
.offer{position:relative; display:flex; flex-direction:column; padding:34px 30px 30px; border-radius:var(--r-lg); background:var(--surface); border:1px solid var(--line); border-top:3px solid var(--brand); box-shadow:0 20px 44px rgba(19,17,24,.06); transition:transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease)}
.offer:hover{transform:translateY(-6px); box-shadow:0 26px 54px rgba(19,17,24,.12)}
.offer:nth-child(2){border-top-color:var(--violet)}
.offer:nth-child(3){border-top-color:var(--yellow)}
.offer:nth-child(4){border-top-color:#E9366F}
.offer:nth-child(5){border-top-color:var(--ink)}
.offer.featured{background:var(--ink); color:var(--dark-text); border-color:var(--ink); border-top:3px solid var(--brand); box-shadow:0 30px 70px rgba(19,17,24,.28)}
.offer.featured h3{color:#fff}
.offer.featured p,.offer.featured li{color:var(--dark-mute)}
.offer.featured .price{color:#fff}
.offer .tag{position:absolute; top:-13px; left:26px; padding:5px 12px; border-radius:var(--r-pill); background:var(--grad-btn); color:#fff; font:700 11px 'Space Grotesk',monospace; letter-spacing:.06em; text-transform:uppercase}
.offer .n{font-family:'Fraunces',serif; font-style:italic; font-weight:480; font-size:28px; color:var(--brand-ink); margin:0 0 10px}
.offer.featured .n{color:#FF9E86}
.offer h3{font-size:21px; margin:0 0 10px}
.offer > p{margin:0 0 18px; color:var(--ink-soft); line-height:1.6}
.offer .checks{margin:0 0 24px}
.offer.featured .checks li{color:var(--dark-text)}
.offer .foot{margin-top:auto; padding-top:20px; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px}
.offer.featured .foot{border-top-color:var(--dark-line)}
.offer .price{font-size:19px; font-weight:700; color:var(--ink)}
.offer .price small{display:block; font-size:12.5px; font-weight:500; color:var(--ink-mute)}
.offer.featured .price small{color:var(--dark-mute)}
.chipLink{display:inline-flex; align-items:center; gap:8px; padding:10px 16px; border-radius:var(--r-pill); background:var(--brand-soft); color:var(--brand-ink); font-weight:600; font-size:14.5px; transition:transform var(--t-fast) var(--ease)}
.chipLink:hover{transform:translateX(3px)}
.offer.featured .chipLink{background:#fff; color:var(--ink)}

/* ---------- Exemple de rapport ---------- */
.fictif{display:flex; gap:12px; align-items:flex-start; padding:16px 20px; border-radius:var(--r-md); background:var(--warn-soft); color:var(--warn); font-weight:600; font-size:15px; margin:0 0 32px; border:1px solid #F1D9A0}
.report{border-radius:calc(var(--r-lg) + 4px); background:var(--surface); border:1px solid var(--line); box-shadow:0 34px 80px rgba(19,17,24,.12); overflow:hidden}
.report-top{display:flex; flex-wrap:wrap; justify-content:space-between; gap:18px; padding:clamp(24px,3.4vw,40px); background:var(--ink); color:var(--dark-text); position:relative; overflow:hidden}
.report-top::after{content:""; position:absolute; right:-10%; top:-60%; width:50%; height:220%; background:radial-gradient(circle, rgba(255,77,46,.28), transparent 70%); pointer-events:none}
.report-top > *{position:relative}
.report-top h2{font-size:clamp(22px,2.8vw,30px); color:#fff; margin:0 0 8px}
.report-top p{margin:0; color:var(--dark-mute)}
.report-top .meta{text-align:right; font:500 12.5px 'Space Grotesk',monospace; letter-spacing:.08em; text-transform:uppercase; color:#FF9E86}
.report-in{padding:clamp(24px,3.4vw,40px)}
.report-in h3{font-size:19px; margin:0 0 16px}
.scores{list-style:none; margin:0 0 10px; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px}
.scores li{padding:18px; border-radius:var(--r-md); background:var(--bg); border:1px solid var(--line)}
.scores .v{display:block; font-family:'Fraunces',serif; font-style:italic; font-weight:480; font-size:40px; line-height:1; color:var(--ink)}
.scores li:first-child{background:var(--ink); border-color:var(--ink)}
.scores li:first-child .v{background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent}
.scores li:first-child .l{color:var(--dark-mute)}
.scores .l{display:block; margin-top:6px; font-size:13.5px; color:var(--ink-soft)}
.point{margin-top:18px; padding:22px 24px; border-radius:var(--r-md); border:1px solid var(--line); background:var(--surface); border-left:4px solid var(--bad)}
.point.warn{border-left-color:#E8A400}
.point-head{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:10px; margin-bottom:8px}
.point h4{margin:0; font-size:17px}
.point p{margin:6px 0 0; color:var(--ink-soft); line-height:1.6}
.point .proof{font-size:14px; color:var(--ink); background:var(--bg); border-radius:10px; padding:10px 12px; margin-top:10px}
.locked{position:relative; margin-top:26px; padding:28px; border-radius:var(--r-md); background:linear-gradient(160deg,#FFF3EC 0%,#F3ECFF 60%,#FFF8E8 100%); border:1px dashed var(--line-2)}
.locked h4{margin:0 0 10px; font-size:18px}
.locked .checks li{color:var(--ink)}
.locked .price-line{margin:18px 0 0; font-weight:600; color:var(--ink)}

/* ---------- Contact ---------- */
#contactForm .field{display:flex; flex-direction:column; gap:8px}
#contactForm .field label{display:block; font-size:14px; font-weight:600; color:var(--ink)}
#contactForm .req{font-weight:500; color:var(--brand-ink)}
#contactForm .hint{margin:0; font-size:12.5px; color:var(--ink-mute)}
.trap{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.contact-side .card{margin-top:26px; padding:22px 24px; border-radius:var(--r-md); background:rgba(255,255,255,.7); border:1px solid var(--line)}
.contact-side .card h3{font-size:16px; margin:0 0 6px}
.contact-side .card p{margin:0; color:var(--ink-soft); font-size:14.5px; line-height:1.6}
.contact-mail{display:inline-flex; align-items:center; gap:10px; margin-top:22px; font-weight:700; font-size:17px; color:var(--ink); text-decoration:underline; text-underline-offset:4px}
.contact-mail:hover{color:var(--brand-ink)}
.fine{margin:4px 0 0; font-size:12.5px; line-height:1.55; color:var(--ink-mute)}
.fine a{color:var(--brand-ink); text-decoration:underline}
.thanks{text-align:center; max-width:640px; margin:0 auto}
.thanks .big{font-family:'Fraunces',serif; font-style:italic; font-weight:480; font-size:clamp(40px,6vw,64px); line-height:1.05; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; margin:0 0 16px}
.thanks p{color:var(--ink-soft); line-height:1.7}
.thanks .actions{justify-content:center}

/* ---------- Divers ---------- */
.section-head{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end; gap:24px; margin-bottom:42px}
.section-head .section-lede{margin-bottom:0}
.section-title em{font-family:'Fraunces',serif; font-style:italic; font-weight:480; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent}
.engage-lede{font-size:clamp(20px,2.6vw,28px); color:var(--ink); font-weight:500; max-width:780px; line-height:1.45; margin:0 0 32px}
.engage-lede span{color:var(--ink-soft); font-weight:400}
.faq-wrap{max-width:980px; margin:0 auto}
#faq .faqList p a{color:var(--brand-ink); text-decoration:underline}
.center{text-align:center}
@media(max-width:700px){.offer:hover{transform:translateY(-3px)}.cmp th,.cmp td{padding:12px 14px; font-size:14px}}
@media(prefers-reduced-motion:reduce){
  .ring .p{stroke-dashoffset:var(--off,113)}
  .rp-list li{opacity:1; transform:none}
  .scanline{display:none}
}
.tl-wrap{position:relative}
.gwFeature .gw-title{font-size:clamp(28px,3.6vw,40px); line-height:1.05; color:#fff}
.launch-badge img{width:40px; height:40px; border-radius:11px}
.launch-badge{background:#fff}
.footer-brand a.brand{text-decoration:none}
.card-engage:nth-child(4){border-top-color:#E9366F}.card-engage:nth-child(4) .mark{color:#C8245C}
.card-engage:nth-child(5){border-top-color:var(--blue)}.card-engage:nth-child(5) .mark{color:var(--blue-ink)}
.card-engage:nth-child(6){border-top-color:var(--ink)}.card-engage:nth-child(6) .mark{color:var(--ink)}
.launch-title{margin:0 0 10px; font-size:clamp(19px,2.4vw,23px); color:#fff}
.h3{font-size:18px; margin:0 0 8px}
.center-actions{display:flex; flex-wrap:wrap; justify-content:center; gap:14px; margin-top:44px}
.btn-block{width:100%; justify-content:center}
.thanks h1{font-size:clamp(28px,3.6vw,40px); margin:0 0 16px}
.contact-page{background:var(--contact-wash)}
.contact-page::before{content:""; position:absolute; inset:-20% -10% auto auto; width:46vw; height:46vw; max-width:620px; max-height:620px; background:radial-gradient(circle at 60% 40%, rgba(124,58,237,.16), rgba(255,77,46,.10) 50%, transparent 75%); pointer-events:none}
.contact-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:clamp(32px,6vw,80px); align-items:start}
.contact-side h1{font-size:clamp(36px,5vw,60px); line-height:1.04; letter-spacing:-.03em; margin:0 0 18px}
.contact-side h1 em{font-family:'Fraunces',serif; font-style:italic; font-weight:480; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent}
.contact-side .lede{color:var(--ink-soft); line-height:1.6; max-width:460px}
.contact-side .assurance .ok{background:var(--brand-ink)}
#contactForm select{appearance:auto}
.legal .prose ul{padding-left:20px}
.card-engage:nth-child(3) .mark{color:#9A6400}
.stats .num{margin:0}
.stats .lbl{margin-top:12px}
@media(max-width:600px){
  .mock-phone,.logo-float{display:none}
  .mock-stage{min-height:0}
  .mock-browser{position:relative; animation:none}
  .hero{padding-bottom:64px}
  .hero .actions .btn{width:100%; justify-content:center}
}

/* ---------- Engagements : animations ---------- */
.card-engage{position:relative; overflow:hidden; transition:transform var(--t-base) var(--ease-spring), box-shadow var(--t-base) var(--ease)}
.card-engage::after{content:""; position:absolute; top:0; bottom:0; left:-70%; width:45%; pointer-events:none; background:linear-gradient(100deg,transparent,rgba(255,255,255,.75),transparent); transform:skewX(-18deg); transition:left 0s}
.card-engage:hover{transform:translateY(-8px) rotate(-.6deg); box-shadow:0 28px 60px rgba(19,17,24,.14)}
.card-engage:nth-child(even):hover{transform:translateY(-8px) rotate(.6deg)}
.card-engage:hover::after{left:140%; transition:left .9s var(--ease)}
.card-engage .mark{display:inline-block; transition:transform var(--t-base) var(--ease-spring)}
.card-engage:hover .mark{transform:scale(1.25) rotate(-6deg)}
.card-engage .ico{position:absolute; top:26px; right:26px; width:42px; height:42px; border-radius:13px; display:flex; align-items:center; justify-content:center; background:var(--brand-soft); color:var(--brand-ink); animation:icoFloat 5s ease-in-out infinite}
.card-engage:nth-child(2) .ico{background:var(--violet-soft); color:var(--violet); animation-delay:-1s}
.card-engage:nth-child(3) .ico{background:var(--yellow-soft); color:#9A6400; animation-delay:-2s}
.card-engage:nth-child(4) .ico{background:#FFE9F2; color:#C8245C; animation-delay:-3s}
.card-engage:nth-child(5) .ico{background:var(--blue-soft); color:var(--blue-ink); animation-delay:-4s}
.card-engage:nth-child(6) .ico{background:var(--surface-2); color:var(--ink); animation-delay:-2.5s}
@keyframes icoFloat{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-6px) rotate(4deg)}}
.js .card-engage[data-reveal]{border-top-color:transparent}
.js .card-engage[data-reveal]::before{content:""; position:absolute; top:0; left:0; height:3px; width:0; background:var(--grad); transition:width 1.1s var(--ease) calc(var(--i,0) * 120ms + .25s)}
.js .card-engage:nth-child(2)[data-reveal]::before{background:linear-gradient(90deg,var(--violet),#B44DF0)}
.js .card-engage:nth-child(3)[data-reveal]::before{background:linear-gradient(90deg,var(--yellow),#FFCE54)}
.js .card-engage:nth-child(4)[data-reveal]::before{background:linear-gradient(90deg,#E9366F,#FF6A9A)}
.js .card-engage:nth-child(5)[data-reveal]::before{background:linear-gradient(90deg,var(--blue),#22D3EE)}
.js .card-engage:nth-child(6)[data-reveal]::before{background:linear-gradient(90deg,var(--ink),#55515E)}
.js .card-engage[data-reveal].is-in::before{width:100%}
.launch-badge{animation:badgePulse 2.8s ease-out infinite}
@keyframes badgePulse{0%{box-shadow:0 0 0 0 rgba(255,77,46,.55),0 12px 28px rgba(255,77,46,.4)}70%{box-shadow:0 0 0 16px rgba(255,77,46,0),0 12px 28px rgba(255,77,46,.4)}100%{box-shadow:0 0 0 0 rgba(255,77,46,0),0 12px 28px rgba(255,77,46,.4)}}
.launch-accent{background:linear-gradient(90deg,var(--brand),#E9366F,var(--violet),var(--brand)); background-size:300% 100%; animation:gradShift 6s linear infinite}
.launch-banner::before{animation:haloDrift 12s ease-in-out infinite}
.launch-banner::after{animation:haloDrift 15s ease-in-out infinite reverse}
@media(prefers-reduced-motion:reduce){.card-engage .ico,.launch-badge{animation:none}}

/* ---------- Exemple de rapport : onglets et rapport complet ---------- */
.tablist{display:flex; flex-wrap:wrap; gap:12px; margin:0 0 22px}
.tablist [role="tab"]{display:flex; align-items:center; gap:12px; flex:1 1 260px; text-align:left; padding:16px 20px; border-radius:var(--r-md); border:1px solid var(--line); background:var(--surface); color:var(--ink); font:600 17px 'Instrument Sans',sans-serif; cursor:pointer; transition:transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), background var(--t-fast) var(--ease)}
.tablist [role="tab"] small{display:block; font-size:13px; font-weight:500; color:var(--ink-mute)}
.tablist [role="tab"]:hover{transform:translateY(-2px); box-shadow:var(--shadow-md)}
.tablist [role="tab"][aria-selected="true"]{background:var(--ink); color:#fff; border-color:var(--ink); box-shadow:0 18px 40px rgba(19,17,24,.22)}
.tablist [role="tab"][aria-selected="true"] small{color:var(--dark-mute)}
.tab-n{flex:none; width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--brand-soft); color:var(--brand-ink); font:italic 480 18px 'Fraunces',serif}
[aria-selected="true"] .tab-n{background:var(--grad-btn); color:#fff}
.tabs:not(.is-ready) .tablist{display:none}
.tabs:not(.is-ready) .tabpanel + .tabpanel{margin-top:32px}
.tabpanel[hidden]{display:none}
.tabpanel.is-shown{animation:popIn .45s var(--ease-spring)}
.report-kind{margin:0 0 8px !important; font:700 12px 'Space Grotesk',monospace; letter-spacing:.12em; text-transform:uppercase; color:#FF9E86 !important}
.report-title{font-size:clamp(22px,2.8vw,30px); color:#fff; margin:0 0 8px}
.rh{display:flex; align-items:center; gap:12px; font-size:20px; margin:34px 0 16px}
.rh:first-child{margin-top:0}
.rn{flex:none; width:32px; height:32px; border-radius:10px; display:flex; align-items:center; justify-content:center; background:var(--grad-btn); color:#fff; font-size:15px}
.point h5{margin:0; font-size:17px}
.toc{margin:0 0 30px; padding:20px 24px; border-radius:var(--r-md); background:var(--bg); border:1px solid var(--line)}
.toc-t{margin:0 0 8px; font:700 12px 'Space Grotesk',monospace; letter-spacing:.12em; text-transform:uppercase; color:var(--brand-ink)}
.toc ol{margin:0; padding-left:20px; columns:2 240px; column-gap:32px}
.toc li{margin:4px 0}
.toc a, .plan th a{color:var(--ink); text-decoration:underline; text-decoration-color:var(--line-2); text-underline-offset:3px}
.toc a:hover, .plan th a:hover{color:var(--brand-ink); text-decoration-color:currentColor}
.synth{display:grid; grid-template-columns:1fr; gap:18px}
@media(min-width:900px){.synth{grid-template-columns:1.4fr 1fr; align-items:stretch}}
.synth .scores{margin:0}
.counts{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.counts p{margin:0; padding:14px; border-radius:var(--r-md); background:var(--bg); border:1px solid var(--line); font-size:13.5px; line-height:1.4; color:var(--ink-soft)}
.counts b{display:block; font:italic 480 32px/1 'Fraunces',serif; margin-bottom:4px}
.c-bad{color:var(--bad)} .c-warn{color:var(--warn)} .c-low{color:var(--blue-ink)} .c-ok{color:var(--ok)}
.scope{display:grid; grid-template-columns:minmax(150px,200px) 1fr; gap:8px 20px; margin:18px 0 0; padding:18px 20px; border-radius:var(--r-md); background:var(--bg); border:1px solid var(--line); font-size:14.5px}
.scope dt{font-weight:600}
.scope dd{margin:0; color:var(--ink-soft)}
@media(max-width:600px){.scope{grid-template-columns:1fr}.scope dd{margin-bottom:8px}}
.pill-low{background:var(--blue-soft); color:var(--blue-ink)}
.plan table{font-size:14px}
.plan th,.plan td{padding:12px 16px}
.plan tbody th{font-weight:600}
.fix{margin-top:14px; border-radius:var(--r-md); border:1px solid var(--line); border-left:4px solid var(--bad); background:var(--surface); transition:box-shadow var(--t-base) var(--ease)}
.fix.warn{border-left-color:#E8A400}
.fix[open]{box-shadow:0 18px 40px rgba(19,17,24,.08)}
.fix summary{list-style:none; cursor:pointer; display:flex; align-items:center; gap:14px; padding:18px 20px}
.fix summary::-webkit-details-marker{display:none}
.fix summary:hover .fix-t{color:var(--brand-ink)}
.fix-n{flex:none; width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--ink); color:#fff; font:italic 480 17px 'Fraunces',serif}
.fix-t{flex:1; font-weight:600; font-size:16.5px; line-height:1.35; transition:color var(--t-fast) var(--ease)}
.fix-t small{display:block; margin-top:3px; font-weight:500; font-size:12.5px; color:var(--ink-mute)}
.fix[open] .faqPlus{transform:rotate(135deg)}
.fix-body{padding:4px 22px 24px 68px}
@media(max-width:600px){.fix-body{padding:4px 18px 22px}.fix summary{flex-wrap:wrap}}
.fix-body h5{margin:20px 0 6px; font-size:14px; font:700 12px 'Space Grotesk',monospace; letter-spacing:.1em; text-transform:uppercase; color:var(--brand-ink)}
.fix-body p,.fix-body li{color:var(--ink-soft); line-height:1.65; margin:0}
.fix-meta{display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:10px; margin-top:6px}
.fix-meta p{padding:10px 12px; border-radius:10px; background:var(--bg); border:1px solid var(--line); font-size:13px; color:var(--ink)}
.fix-meta span{display:block; font-size:11.5px; font-weight:600; color:var(--ink-mute); margin-bottom:2px}
.fix-body .proof{margin-top:10px}
.proof code, .fix code{font-family:ui-monospace,Menlo,Consolas,monospace; font-size:12.5px; word-break:break-all}
.steps{margin:0; padding-left:22px; display:grid; gap:6px}
.code-pair{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:12px; margin-top:16px}
.code-l{margin:0 0 6px !important; font:700 11.5px 'Space Grotesk',monospace; letter-spacing:.1em; text-transform:uppercase}
.code-avant{color:var(--bad) !important} .code-apres{color:var(--ok) !important}
.code{margin:0; padding:14px 16px; border-radius:12px; background:#0F1117; color:#E6E8EE; font-size:12.5px; line-height:1.7; overflow-x:auto; white-space:pre-wrap; word-break:break-word; border:1px solid #252A36}
.code-pair > div:last-child .code{box-shadow:inset 3px 0 0 #34D399}
.code-pair > div:first-child .code{box-shadow:inset 3px 0 0 #F87171}
.okgrid{list-style:none; margin:12px 0 0; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:8px}
.okgrid li{display:flex; gap:10px; align-items:center; padding:10px 12px; border-radius:10px; background:var(--ok-soft); color:var(--ok); font-size:14px; font-weight:600}
.okgrid li::before{content:"✓"; flex:none; width:20px; height:20px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--ok); color:#fff; font-size:11px}
.report-end{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:16px; margin-top:26px; padding:22px 24px; border-radius:var(--r-md); background:var(--ink); color:var(--dark-text)}
.report-end p{margin:0}
.locked .btn{margin-top:18px}
.report-in > p{color:var(--ink-soft); line-height:1.65}
.synth .scores{grid-template-columns:repeat(2,1fr)}

/* ---------- Slogan animé de l'en-tête ---------- */
header.site .brand{flex:none}
.slogan{display:none; align-items:center; gap:10px; margin:0 auto 0 18px; padding:7px 14px 7px 8px; border-radius:var(--r-pill); background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow-sm); font-size:13.5px; font-weight:600; color:var(--ink); white-space:nowrap}
@media(min-width:1200px){.slogan{display:inline-flex}}
.slogan-ok{flex:none; width:22px; height:22px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--ok); color:#fff; animation:okPulse 2.6s ease-out infinite}
@keyframes okPulse{0%{box-shadow:0 0 0 0 rgba(19,112,58,.45)}70%{box-shadow:0 0 0 9px rgba(19,112,58,0)}100%{box-shadow:0 0 0 0 rgba(19,112,58,0)}}
.slogan-win{display:block; height:1.5em; line-height:1.5em; overflow:hidden; min-width:16.5em; -webkit-mask-image:linear-gradient(180deg,transparent,#000 22%,#000 78%,transparent); mask-image:linear-gradient(180deg,transparent,#000 22%,#000 78%,transparent)}
.slogan-track{display:flex; flex-direction:column; animation:sloganRoll 17.5s var(--ease) .8s 2 forwards}
.slogan-track span{display:block; height:1.5em}
.slogan-track span:last-child{background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent}
.slogan:hover .slogan-track{animation-play-state:paused}
@keyframes sloganRoll{
  0%,17%{transform:translateY(0)}
  20%,37%{transform:translateY(-1.5em)}
  40%,57%{transform:translateY(-3em)}
  60%,77%{transform:translateY(-4.5em)}
  80%,100%{transform:translateY(-6em)}
}
@media(prefers-reduced-motion:reduce){.slogan-track{animation:none; transform:translateY(-6em)}.slogan-ok{animation:none}}

/* ---------- Pied de page plus compact ---------- */
footer.site{padding:32px clamp(20px,5vw,64px) 22px}
.footer-grid{gap:24px 36px}
.footer-brand{gap:10px; max-width:340px}
.footer-brand p{font-size:13.5px; line-height:1.55}
.footer-nav,.footer-legal{font-size:14px}
.footer-nav ul,.footer-legal ul{gap:7px}
footer.site h2{margin:0 0 2px}
.footer-bottom{margin-top:22px; padding-top:16px; font-size:12.5px}
@media(min-width:900px){.footer-grid{grid-template-columns:1.4fr 1fr 1fr}}
.fixed{display:flex; gap:10px; align-items:flex-start; margin-top:12px !important; padding:12px 14px; border-radius:12px; background:var(--ok-soft); color:var(--ok) !important; font-weight:600; font-size:14.5px; line-height:1.5}
.fixed span{flex:none; width:20px; height:20px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--ok); color:#fff; font-size:11px; margin-top:1px}
.beforeafter{display:grid; grid-template-columns:1fr auto 1fr; gap:16px; align-items:center; margin:6px 0 18px}
.beforeafter > div{padding:20px 22px; border-radius:var(--r-md); background:var(--bg); border:1px solid var(--line)}
.beforeafter .ba-after{background:var(--ok-soft); border-color:#BFE6CC}
.ba-l{margin:0; font:700 11.5px 'Space Grotesk',monospace; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft)}
.ba-v{margin:6px 0 4px; font:italic 480 46px/1 'Fraunces',serif; color:var(--ink)}
.ba-after .ba-v{color:var(--ok)}
.ba-v small{font-size:20px; color:var(--ink-mute)}
.ba-s{margin:0; font-size:14px; color:var(--ink-soft)}
.ba-arrow{font-size:28px; color:var(--brand-ink)}
@media(max-width:600px){.beforeafter{grid-template-columns:1fr}.ba-arrow{transform:rotate(90deg); justify-self:center}}