@font-face {
  font-family: 'Inclusive Sans';
  src: url('../fonts/InclusiveSans-Regular.woff2') format('woff2'),
       url('../fonts/InclusiveSans-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inclusive Sans';
  src: url('../fonts/InclusiveSans-Bold.woff2') format('woff2'),
       url('../fonts/InclusiveSans-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Spectral';
  src: url('../fonts/Spectral-Regular.woff2') format('woff2'),
       url('../fonts/Spectral-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Spectral';
  src: url('../fonts/Spectral-Bold.woff2') format('woff2'),
       url('../fonts/Spectral-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Fira Code';
  src: url('../fonts/FiraCode-Regular.woff2') format('woff2'),
       url('../fonts/FiraCode-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root{
    --ink:#0f1330;
    --ink-2:#1a1f3d;
    --muted:#4a5070;
    --muted-2:#5a607a;
    --line:#ececf3;
    --line-2:#e6e6ef;
    --bg:#ffffff;
    --bg-soft:#f7f5fa;
    --bg-soft-2:#fbf9fc;
    --lav:#efe9f7;
    --pink-soft:#fde9ee;
    --grad: linear-gradient(95deg,#7b5cff 0%,#b366ff 40%,#ff6a8b 100%);
    --grad-2:linear-gradient(135deg,#8b6cff 0%,#d36bff 50%,#ff7a8d 100%);
    --orange:#ff6b4a;
    --violet:#7b5cff;
    --violet-2:#9d6bff;
    --pink:#ff6b8a;
    --green:#22c47a;
    --blue:#3a76ff;
    --radius:14px;
    --shadow-soft:0 10px 30px rgba(28,20,60,.06);
    --shadow-card:0 18px 48px rgba(28,20,60,.10);
  }
  *{box-sizing:border-box}
  html,body{margin:0;padding:0}
  body{
    font-family:'Inclusive Sans','Helvetica Neue',Arial,sans-serif;
    color:var(--ink);
    background:#fbf9fc;
    -webkit-font-smoothing:antialiased;
    line-height:1.55;
    font-size:17px;
    letter-spacing:0;
  }
  /* Spectral (serif) - réservé aux passages descriptifs longs : sous-titres,
     citations, paragraphes de corps. Apporte la chaleur éditoriale
     "service public" et un contraste avec Inclusive Sans. */
  .hero-sub, .micro p.lead, .problem2 .col-left p.body,
  .problem p, .approach-text p, .fc-inner p,
  .quote-card .qtext, .quote, .ms, .icard .ms,
  .ministat .ms, .step span, .pcard p{
    font-family:'Spectral','Iowan Old Style','Charter',Georgia,serif;
    font-weight:400;
    letter-spacing:0;
    line-height:1.6;
  }
  /* Inclusive Sans (Olivia King, OFL) - toute l'UI.
     Conçue spécifiquement pour l'accessibilité : formes de lettres très
     différenciées (I/l/1, b/d/p/q), ouvertures généreuses, x-height haute.
     Cohérence parfaite avec la promesse RGAA 4.1 de Stralo : le médium
     devient le message. Aucune startup SaaS B2B ne l'utilise → différenciation. */
  h1, h2, h3,
  h1.hero-title, h2.section-title,
  .micro h2, .impact-head h2, .fc-inner h2, .tcard.cta h3,
  .greeting, .ministat b, .icard b, .stat b,
  .logo, .deco-num{
    font-family:'Inclusive Sans','Helvetica Neue',Arial,sans-serif;
    letter-spacing:-.015em;
    font-weight:700;
  }
  h1.hero-title{ font-weight:700; letter-spacing:-.022em; }
  /* Eyebrows & étiquettes techniques : Inclusive Sans en caps espacées
     plutôt que mono. Plus cohérent avec le ton institutionnel-mais-chaleureux. */
  .section-eyebrow, .logos-label, .testi-eyebrow,
  .stats-eyebrow, .activity-title, .ft-col h4,
  .badge{
    font-family:'Inclusive Sans','Helvetica Neue',Arial,sans-serif;
    letter-spacing:.14em;
    font-weight:700;
    text-transform:uppercase;
  }
  /* Fira Code - conservée uniquement pour les éléments réellement
     "machine" : URL du mockup, identifiants techniques. */
  .mockup-bar .url{
    font-family:'Fira Code','SF Mono',ui-monospace,monospace;
    letter-spacing:.04em;
    font-weight:500;
    font-variant-ligatures:none;
  }
  .badge{ letter-spacing:.08em; text-transform:uppercase; font-size:11px; }
  /* Signature dot pattern - single subtle layer on body */
  body{
    background-image:
      radial-gradient(rgba(123,92,255,.10) 1.2px, transparent 1.4px);
    background-size: 32px 32px;
  }
  /* Color halos - brand signature */
  body::before{
    content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
    background:
      radial-gradient(800px 400px at 5% 8%, rgba(155,108,255,.14), transparent 70%),
      radial-gradient(700px 500px at 95% 60%, rgba(255,107,138,.12), transparent 70%),
      radial-gradient(600px 400px at 50% 100%, rgba(58,118,255,.08), transparent 70%);
  }
  header, section, footer{position:relative;z-index:1}

  /* ========= TEXTURE - minimal & intentional ========= */
  /* Hero mockup keeps its grid as a "screen" cue */
  .mockup{
    background-image:
      linear-gradient(rgba(123,92,255,.03) 1px, transparent 1px),
      linear-gradient(90deg, rgba(123,92,255,.03) 1px, transparent 1px);
    background-size: 24px 24px, 24px 24px;
  }

  /* Dark micro-adaptation: subtle internal grid + dot constellation */
  .micro-inner{
    background-image:
      radial-gradient(700px 280px at 90% 0%,rgba(123,92,255,.22),transparent 60%),
      radial-gradient(500px 240px at 5% 100%,rgba(255,107,138,.14),transparent 70%),
      linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
    background-size: auto, auto, 48px 48px, 48px 48px;
  }
  .micro-inner::before{
    content:"";position:absolute;top:30px;right:40px;width:120px;height:120px;
    background-image:
      radial-gradient(rgba(255,255,255,.18) 1.5px, transparent 1.8px);
    background-size: 14px 14px;
    pointer-events:none;opacity:.7;mask:radial-gradient(circle at 50% 50%, #000 10%, transparent 70%);
    -webkit-mask:radial-gradient(circle at 50% 50%, #000 10%, transparent 70%);
  }

  /* Mockup sidebar keeps a tiny dot grid for the OS-chrome feel */
  .side{
    background-image:
      radial-gradient(rgba(15,19,48,.05) 1px, transparent 1.3px);
    background-size: 10px 10px;
  }
  /* Dark hero blocks get fine SVG noise - sophisticated, not busy */
  .micro-inner::after, .fc-inner::after, .stats-inner::after{
    content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.5 0'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.55'/></svg>");
    opacity:.18;mix-blend-mode:overlay;
  }
  .micro-inner, .fc-inner, .stats-inner{ position:relative; }
  a{color:inherit;text-decoration:none}
  button{font-family:inherit;cursor:pointer;border:none;background:none}
  img{max-width:100%;display:block}

  .container{max-width:1600px;margin:0 auto;padding:0 20px}

  /* ========= NAV ========= */
  .nav-wrap{
    background:linear-gradient(180deg,#f5eef7 0%,#fbf6fb 60%,#fff 100%);
    position:relative;
    overflow:hidden;
  }
  .nav-wrap::before{
    content:"";position:absolute;inset:-40% -10% auto auto;width:520px;height:520px;
    background:radial-gradient(closest-side,rgba(179,102,255,.18),transparent 70%);
    filter:blur(10px);pointer-events:none;
  }
  .nav-wrap::after{
    content:"";position:absolute;left:-10%;top:30%;width:420px;height:420px;
    background:radial-gradient(closest-side,rgba(255,106,139,.12),transparent 70%);
    pointer-events:none;
  }
  nav{
    display:flex;align-items:center;justify-content:space-between;
    padding:22px 0;position:relative;z-index:2;
  }
  .logo{display:flex;align-items:center;gap:14px;font-weight:700;letter-spacing:-.01em;font-size:26px}
  .logo-mark{
    width:48px;height:48px;border-radius:12px;
    background:var(--grad);
    display:grid;place-items:center;color:#fff;
    box-shadow:0 10px 24px rgba(123,92,255,.3);
    position:relative;
    padding:2px;
  }
  .logo-mark svg{ width: 100%; height: auto; display: block; }

  .nav-cta{display:flex;gap:12px;align-items:center}
  .btn{
    display:inline-flex;align-items:center;gap:8px;
    padding:13px 22px;border-radius:10px;font-size:16px;font-weight:600;
    transition:transform .15s ease, box-shadow .2s ease, background-color .2s;
  }
  .btn-ghost{color:#2a2f4a}
  .btn-ghost:hover{color:var(--violet)}
  .btn-dark{background:#0f1330;color:#fff}
  .btn-dark:hover{background:#1a1f44;transform:translateY(-1px)}
  .btn-orange{background:var(--orange);color:#fff;box-shadow:0 8px 22px rgba(255,107,74,.28)}
  .btn-orange:hover{transform:translateY(-1px)}
  .btn-arrow::after{content:"→";font-weight:500}
  .btn-link{color:#2a2f4a;font-size:15px;font-weight:600}
  .btn-link:hover{color:var(--violet)}

  /* ========= HERO ========= */
  .hero{position:relative;z-index:2;padding:30px 0 90px;}
  .hero-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:60px;align-items:center}
  .badge{
    display:inline-flex;align-items:center;gap:8px;
    background:rgba(123,92,255,.1);color:#5b3fd9;
    padding:8px 16px;border-radius:999px;font-size:13px;font-weight:600;
    border:1px solid rgba(123,92,255,.18);
  }
  .badge .dot{width:6px;height:6px;border-radius:50%;background:var(--violet)}
  h1.hero-title{
    font-size:58px;line-height:1.06;font-weight:700;letter-spacing:-.022em;
    margin:18px 0 22px;
  }
  .grad-text{
    background:var(--grad);
    -webkit-background-clip:text;background-clip:text;color:transparent;
  }
  .hero-sub{font-size:18px;color:#4a5070;max-width:540px;margin-bottom:32px;line-height:1.6}
  .hero-sub a{color:var(--violet);font-weight:600;border-bottom:1px solid rgba(123,92,255,.3)}
  .hero-actions{display:flex;gap:18px;align-items:center;flex-wrap:wrap;margin-bottom:48px}
  .hero-trust{display:grid;grid-template-columns:repeat(3,auto);gap:36px;font-size:14px}
  .trust-item{display:flex;gap:10px;align-items:flex-start}
  .trust-icon{width:32px;height:32px;border-radius:8px;background:#fff;border:1px solid var(--line);display:grid;place-items:center;color:var(--violet);flex-shrink:0;box-shadow:0 2px 6px rgba(28,20,60,.04)}
  .trust-title{font-weight:600;font-size:14px;color:var(--ink)}
  .trust-meta{font-size:13px;color:#5a607a;margin-top:2px}

  /* ========= APP MOCKUP ========= */
  .mockup-wrap{position:relative;perspective:1400px}
  .mockup{
    background:#fff;border-radius:16px;
    box-shadow:0 30px 80px rgba(28,20,60,.18), 0 8px 22px rgba(28,20,60,.08);
    overflow:hidden;
    transform:rotateY(-4deg) rotateX(2deg);
    border:1px solid rgba(0,0,0,.04);
  }
  .mockup-bar{
    display:flex;align-items:center;gap:10px;
    padding:12px 16px;border-bottom:1px solid var(--line);
    background:#fafafd;
  }
  .mockup-bar .dots{display:flex;gap:6px}
  .mockup-bar .dots i{width:10px;height:10px;border-radius:50%;background:#e75c5c;display:block}
  .mockup-bar .dots i:nth-child(2){background:#f3b73a}
  .mockup-bar .dots i:nth-child(3){background:#3acb6e}
  .mockup-bar .url{
    margin:0 auto;background:#fff;border:1px solid var(--line);
    padding:6px 14px;border-radius:6px;font-size:12px;color:#5a607a;
    letter-spacing:.08em;font-weight:500;
  }
  .mockup-body{display:grid;grid-template-columns:54px 1fr;min-height:340px}
  .side{
    background:#f7f5fa;border-right:1px solid var(--line);
    padding:14px 0;display:flex;flex-direction:column;gap:8px;align-items:center;
  }
  .side-icon{width:32px;height:32px;border-radius:8px;display:grid;place-items:center;color:#7d83a0}
  .side-icon.active{background:#fff;color:var(--violet);box-shadow:0 2px 8px rgba(123,92,255,.18)}
  .main{padding:20px}
  .greeting{font-weight:700;font-size:17px;margin-bottom:4px}
  .ask{font-size:14px;color:#5a607a;margin-bottom:16px}
  .quick-list{display:flex;flex-direction:column;gap:8px;margin-bottom:18px}
  .quick{
    display:flex;align-items:center;gap:10px;
    padding:11px 12px;border:1px solid var(--line);border-radius:10px;
    font-size:14px;color:var(--ink-2);background:#fff;font-weight:500;
  }
  .quick .qi{width:22px;height:22px;border-radius:6px;background:#f0ecf8;color:var(--violet);display:grid;place-items:center}
  .activity-title{font-size:12px;font-weight:700;color:#5a607a;text-transform:uppercase;letter-spacing:.1em;margin-bottom:10px}
  .activity{display:flex;flex-direction:column;gap:8px}
  .act-row{display:flex;align-items:center;gap:10px;font-size:13px;color:#4a5070}
  .act-dot{width:8px;height:8px;border-radius:50%}

  .floater{
    position:absolute;background:#fff;border-radius:12px;
    padding:10px 14px;display:flex;align-items:center;gap:10px;
    box-shadow:0 14px 36px rgba(28,20,60,.12);
    border:1px solid rgba(0,0,0,0.04);
    font-size:13px;
    transition: transform 0.1s ease-out;
  }

  .float-1{top:14%;right:-22px; }
  .float-2{top:32%;left:-30px; }
  .float-3{bottom:8%;left:18%; }
  .floater .ic{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;flex-shrink:0}
  .float-1 .ic{background:rgba(123,92,255,.12);color:var(--violet)}
  .float-2 .ic{background:rgba(255,107,138,.12);color:var(--pink)}
  .float-3 .ic{background:rgba(155,108,255,.12);color:#9d6bff}
  .floater b{display:block;font-weight:700;color:var(--ink);font-size:13px}
  .floater span{color:#5a607a;font-size:12px}

  .dot-grid{
    position:absolute;width:100px;height:80px;left:-20px;bottom:30%;
    background-image:radial-gradient(rgba(255,107,138,.45) 1.4px, transparent 1.4px);
    background-size:10px 10px;
    z-index:-1;
  }

  /* ========= LOGO STRIP ========= */
  .logos{padding:48px 0 56px;background:rgba(255,255,255,.85);border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2)}
  .logos-label{text-align:center;font-size:12px;font-weight:700;color:#5a607a;letter-spacing:.18em;margin-bottom:28px}
  .logos-row{display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap}
  .logos-row img { max-height:30px; width: auto; filter: grayscale(100%); opacity: 0.6; transition: filter 0.3s ease, opacity 0.3s ease, transform 0.3s ease; mix-blend-mode: multiply; border-radius: 4px; }
  .logos-row img:hover { filter: grayscale(0%); opacity: 1; transform: scale(1.05); }
  .lg.pill{border:1px solid var(--line);padding:8px 16px;border-radius:999px;font-size:14px}
  .lg-italic{font-style:italic;font-family:'Georgia',serif;font-weight:700}
  .lg-mono{font-family:'Courier New',monospace;font-weight:700;font-size:14px}

  /* ========= MICRO-ADAPTATION (DARK) ========= */
  .micro{padding:80px 0;background:rgba(255,255,255,.3)}
  .micro-inner{
    background:#0c1030;color:#fff;border-radius:22px;padding:56px;
    position:relative;overflow:hidden;
    background-image:
      radial-gradient(700px 280px at 90% 0%,rgba(123,92,255,.18),transparent 60%),
      radial-gradient(500px 240px at 5% 100%,rgba(255,107,138,.10),transparent 70%);
  }
  .micro-glow{
    position:absolute;inset:0;pointer-events:none;z-index:0;
    opacity:0;transition:opacity .5s ease;
    background:radial-gradient(900px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(123,92,255,0.18), transparent 60%);
  }
  .micro-grid{display:grid;grid-template-columns:1.05fr 1fr 1fr 1fr;gap:40px;align-items:start;position:relative;z-index:1}
  .micro h2{font-size:42px;line-height:1.1;font-weight:700;margin:0 0 18px;letter-spacing:-.03em}
  .micro p.lead{color:#c2c6e0;font-size:17px;margin:0 0 24px;max-width:400px;line-height:1.6}
  .btn-pill-out{
    display:inline-flex;align-items:center;gap:8px;
    border:1px solid rgba(255,255,255,.22);color:#fff;
    padding:11px 20px;border-radius:999px;font-size:14px;font-weight:600;
    transition:background .2s;
  }
  .btn-pill-out:hover{background-color:rgba(255,255,255,.08)}
  .pillar-d{display:flex;flex-direction:column;gap:12px}
  .pillar-d .pdi{
    width:42px;height:42px;border-radius:12px;display:grid;place-items:center;
    background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);
  }
  .pillar-d.v .pdi{color:#a78bff}
  .pillar-d.g .pdi{color:#4ddb95}
  .pillar-d.r .pdi{color:#ff7a8d}
  .pillar-d b{font-size:17px;font-weight:700}
  .pillar-d span{font-size:14px;color:#c2c6e0;line-height:1.55}

  /* ========= PROBLEM REVAMP ========= */
  .problem2{padding:60px 0;background:#fbf6f3;content-visibility: auto;contain-intrinsic-size: 1px 600px;}
  .problem2-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:48px;align-items:start}
  .problem2 .col-left p.body{color:var(--muted);font-size:16px;margin:0 0 28px;max-width:420px;line-height:1.6}
  .stats-row{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
  .ministat{display:flex;flex-direction:column;gap:8px}
  .ministat .mi-ic{width:30px;height:30px;border-radius:8px;background:rgba(123,92,255,.1);color:var(--violet);display:grid;place-items:center}
  .ministat b{font-size:34px;font-weight:600;letter-spacing:-.025em}
  .ministat .mt{font-size:14px;font-weight:700;color:var(--ink)}
  .ministat .ms{font-size:13px;color:#5a607a;line-height:1.5}
  .quote-card{
    background:#fff;border:1px solid var(--line);border-radius:16px;padding:26px;
    box-shadow:var(--shadow-soft);
    /* Révélation initiale */
    opacity: 0;
    transform: translate(60px, 20px);
    filter: blur(15px);
    transition: 
      opacity 1.4s cubic-bezier(0.2, 0.8, 0.2, 1),
      transform 1.4s cubic-bezier(0.2, 0.8, 0.2, 1),
      filter 1.4s cubic-bezier(0.2, 0.8, 0.2, 1),
      box-shadow 0.4s ease;
    will-change: transform, opacity;
  }
  .quote-card.reveal-active{
    opacity: 1;
    transform: translate(0, 0);
    filter: blur(0);
  }
  .quote-card:hover{
    box-shadow: 0 30px 70px rgba(28,20,60,0.18);
    border-color: rgba(123,92,255,0.2);
  }
  .quote-card .qmark{color:var(--orange);font-size:22px;font-weight:800;font-family:Georgia,serif;margin-bottom:6px}
  .quote-card .qtext{font-size:16px;color:#2a2f4a;line-height:1.6;margin-bottom:20px}
  .qauthors{display:flex;align-items:center;gap:10px}
  .qstack{display:flex}
  .qstack .av{width:30px;height:30px;border-radius:50%;border:2px solid #fff;margin-left:-8px;background:linear-gradient(135deg,#8b6cff,#ff6a8b);display:grid;place-items:center;color:#fff;font-size:11px;font-weight:700}
  .qstack .av:first-child{margin-left:0}
  .qstack .av:nth-child(2){background:linear-gradient(135deg,#3a76ff,#8b6cff)}
  .qauthors .qn{font-size:14px;font-weight:700}
  .qauthors .qr{font-size:12px;color:#5a607a}

  /* ========= IMPACT ========= */
  .impact{padding:88px 0;background:rgba(255,255,255,.35);content-visibility: auto;contain-intrinsic-size: 1px 800px;}
  .impact-head{text-align:center;margin-bottom:40px}
  .impact-head .section-eyebrow{color:var(--muted-2);text-align:center}
  .impact-head h2{font-size:40px;font-weight:700;letter-spacing:-.03em;margin:8px 0 0;line-height:1.12}
  .impact-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
  .icard{
    background:#fff;
    border:1px solid var(--line);
    border-radius:14px;
    padding:24px;
    display:flex;
    flex-direction:column;
    gap:14px;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
  }
  .icard:hover{
    transform: translateY(-6px);
    box-shadow: var(--shadow-card);
    border-color: rgba(123,92,255,0.2);
  }
  .icard .ii{width:36px;height:36px;border-radius:10px;display:grid;place-items:center; transition: transform 0.3s ease; }
  .icard:hover .ii{ transform: scale(1.1) rotate(-5deg); }
  .icard.v .ii{background:rgba(123,92,255,.1);color:var(--violet)}
  .icard.b .ii{background:rgba(58,118,255,.1);color:var(--blue)}
  .icard.r .ii{background:rgba(255,107,74,.1);color:var(--orange)}
  .icard.o .ii{background:rgba(255,150,90,.12);color:#ff8a4a}
  .icard b{font-size:34px;font-weight:700;letter-spacing:-.03em; margin-top: 4px;}
  .icard .mt{font-size:15px;font-weight:700; color: var(--ink);}
  .icard .ms{font-size:14px;color:var(--muted);line-height:1.55}

  /* ========= FINAL CTA ========= */
  .finalcta{padding:60px 0 80px;background:rgba(255,255,255,.3)}
  .fc-inner{
    background:linear-gradient(115deg,#6c4dff 0%,#8b6cff 60%,#a76cff 100%);
    color:#fff;border-radius:22px;padding:50px 60px;
    display:grid;
    grid-template-columns: 1fr 1.1fr;
    grid-template-areas: "text steps" "cta steps";
    gap:24px 60px;
    align-items: center;
    position:relative;overflow:hidden;
  }
  .fc-text{grid-area: text;}
  .fc-inner::after{
    content:"";position:absolute;right:-10%;top:-30%;width:520px;height:520px;
    background:radial-gradient(closest-side,rgba(255,255,255,.18),transparent 70%);
    pointer-events:none;
  }
  .fc-inner h2{font-size:40px;font-weight:700;line-height:1.1;margin:0 0 16px;letter-spacing:-.03em}
  .fc-inner p{color:rgba(255,255,255,.9);font-size:16px;margin:0;max-width:460px;line-height:1.6}
  .fc-inner .btn-light{
    grid-area: cta;
    justify-self: start;
    background:#0f1330;color:#fff;padding:14px 28px;border-radius:12px;
    display:inline-flex;align-items:center;gap:10px;font-size:16px;font-weight:600;
    transition: transform 0.2s, background 0.2s;
  }
  .fc-inner .btn-light:hover{ background: #1a1f44; transform: translateY(-2px); }
  .steps{grid-area: steps; display:flex;flex-direction:column;gap:22px;position:relative;z-index:1}
  .step{display:flex;align-items:flex-start;gap:14px}
  .step-n{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.28);display:grid;place-items:center;font-size:14px;font-weight:700;flex-shrink:0}
  .step b{display:block;font-size:16px;font-weight:700;margin-bottom:2px}
  .step span{font-size:14px;color:rgba(255,255,255,.86);line-height:1.55}

  /* ========= PROBLEM (legacy) ========= */
  .problem{padding:60px 0;background:#fbf6f3}
  .section-eyebrow{font-size:12px;font-weight:700;letter-spacing:.2em;color:var(--orange);text-transform:uppercase;margin-bottom:18px}
  .problem-grid{display:grid;grid-template-columns:1fr 1.4fr;gap:60px;align-items:start}
  h2.section-title{font-size:46px;line-height:1.1;font-weight:700;letter-spacing:-.03em;margin:0 0 18px}
  .problem p{color:var(--muted);font-size:17px;max-width:440px;margin-bottom:24px;line-height:1.6}
  .cards-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
  .pcard{background:#fff;border:1px solid var(--line);border-radius:14px;padding:22px}
  .pcard .pi{width:34px;height:34px;border-radius:9px;background:rgba(255,107,74,.1);color:var(--orange);display:grid;place-items:center;margin-bottom:14px}
  .pcard h3{margin:0 0 8px;font-size:19px;font-weight:700}
  .pcard p{font-size:15px;color:var(--muted);margin:0;max-width:none;line-height:1.55}

  /* ========= APPROACH ========= */
  .approach{padding:96px 0;background:#f5f1f7}
  .approach-grid{display:grid;grid-template-columns:.85fr 1fr .9fr;gap:32px;align-items:center}
  .pillars{display:flex;flex-direction:column;gap:10px}
  .pillar{
    display:flex;align-items:center;gap:14px;
    background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px 16px;
    cursor:pointer;
    transition:border-color .3s cubic-bezier(0.4, 0, 0.2, 1), background-color .3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow .3s cubic-bezier(0.4, 0, 0.2, 1), color .3s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .pillar:hover{
    border-color:rgba(123,92,255,.3);
  }
  .pillar.active{
    background:linear-gradient(135deg,#8b6cff,#a76cff);
    color:#fff;border-color:transparent;
    box-shadow:0 14px 30px rgba(123,92,255,.32);
    position: relative;
    overflow: hidden;
  }
  .pillar.active::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    background: rgba(255,255,255,0.5);
    width: 0;
    animation: pillar-progress 5s linear forwards;
  }
  @keyframes pillar-progress {
    from { width: 0; }
    to { width: 100%; }
  }
  .approach:hover .pillar.active::after {
    animation-play-state: paused;
  }
  /* Hide progress bar if manual interaction occurred */
  .approach.interacted .pillar.active::after {
    display: none;
  }
  .pillar .pic{
    width:32px;height:32px;border-radius:8px;
    background:#f4f0fa;color:var(--violet);
    display:grid;place-items:center;flex-shrink:0;
    transition:all .3s ease;
    position: relative;
    z-index: 1;
  }
  .pillar.active .pic{background:rgba(255,255,255,.18);color:#fff;transform:scale(1.1)}
  .pillar b{display:block;font-size:15px;font-weight:700;position: relative;z-index: 1;}
  .pillar span{font-size:12px;color:#5a607a;transition:color .3s ease;position: relative;z-index: 1;}
  .pillar.active span{color:rgba(255,255,255,0.88)}

  /* Dynamic Illustrations */
  .illu-wrap {
    position: relative;
    height: 380px;
    perspective: 1000px;
  }
  .illu-content {
    position: absolute;
    inset: 0;
    opacity: 0;
    transform: rotateX(5deg) translateY(20px);
    pointer-events: none;
    transition: opacity 0.5s cubic-bezier(0.23, 1, 0.32, 1), transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
  }
  .illu-content.active {
    opacity: 1;
    transform: rotateX(0deg) translateY(0);
    pointer-events: auto;
  }

  .dossier-card{
    background:#fff;border-radius:14px;border:1px solid var(--line);
    box-shadow:var(--shadow-soft);overflow:hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
    transition: background-color 0.3s ease, color 0.3s ease;
  }
  /* Co-construction Specific */
  .co-con-illu {
    background: linear-gradient(180deg, #fff 0%, #f9f7ff 100%);
  }

  .user-list {
    display: flex;
    gap: -8px;
    padding: 16px;
    align-items: center;
  }
  .u-av {
    width: 32px;height: 32px;border-radius: 50%;
    border: 2px solid #fff;
    background: var(--lav);
    display: grid; place-items: center;
    font-size: 11px; font-weight: 700;
    margin-left: -10px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
  }
  .u-av:first-child { margin-left: 0; }
  .feedback-box {
    margin: 10px 16px;
    padding: 12px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 10px;
    font-size: 13px;
    position: relative;
  }
  .feedback-box b { color: var(--violet); display: block; margin-bottom: 4px; }
  
  /* Sobriété New Concept: Performance & Ethics */
  .dossier-card.sobriety-illu {
    background: #fff !important;
    color: var(--ink) !important;
    border-color: #e2e8f0;
  }
  .sobriety-illu .dc-head { border-color: #e2e8f0; color: #475569; }
  
  .perf-score-wrap {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 16px;
    background: linear-gradient(135deg, #f8fafc 0%, #fff 100%);
    border-bottom: 1px solid #f1f5f9;
  }
  .perf-gauge {
    width: 54px; height: 54px;
    border-radius: 50%;
    border: 4px solid #f1f5f9;
    border-top-color: var(--green);
    display: grid; place-items: center;
    font-size: 16px; font-weight: 800; color: var(--green);
    position: relative;
  }
  .perf-gauge::after {
    content: "99";
  }
  .perf-meta b { display: block; font-size: 14px; color: var(--ink); }
  .perf-meta span { font-size: 12px; color: #64748b; }

  .sobriety-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: #f1f5f9;
    border-bottom: 1px solid #f1f5f9;
  }
  .sob-metric {
    background: #fff;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .sob-metric span { font-size: 11px; color: #64748b; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; }
  .sob-metric b { font-size: 15px; color: var(--ink); display: flex; align-items: center; gap: 6px; }
  .sob-metric b svg { color: var(--violet); }

  .privacy-banner {
    padding: 12px 16px;
    background: #fdfdfd;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .priv-tag {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: #059669;
    background: #ecfdf5;
    padding: 4px 10px;
    border-radius: 6px;
  }



  .dc-head{padding:14px 18px;border-bottom:1px solid var(--line);font-weight:700;font-size:15px;display:flex;align-items:center;gap:8px}
  .search{margin:12px 16px;padding:9px 12px;border:1px solid var(--line);border-radius:8px;font-size:13px;color:#5a607a;display:flex;align-items:center;gap:8px}
  .tabs{display:flex;gap:6px;padding:0 16px 10px;border-bottom:1px solid var(--line)}
  .tab{font-size:12px;padding:5px 10px;border-radius:6px;color:var(--muted);font-weight:500}
  .tab.on{background:#f0ecf8;color:var(--violet);font-weight:600}
  .doss-list{padding:8px}
  .doss{display:flex;align-items:center;justify-content:space-between;padding:10px 10px;border-radius:8px}
  .doss:hover{background:#fafaff}
  .doss .meta{display:flex;flex-direction:column;gap:2px}
  .doss .meta b{font-size:13px;font-weight:600}
  .doss .meta span{font-size:12px;color:#5a607a}
  .pill{font-size:11px;padding:4px 9px;border-radius:999px;font-weight:600}
  .pill.gn{background:#e6f8ee;color:#1f9b56}
  .pill.am{background:#fff2dd;color:#b97400}
  .pill.gy{background:#eef0f5;color:#6b7290}

  .approach-text h2{margin-bottom:16px}
  .approach-text p{color:var(--muted);font-size:16px;margin-bottom:22px;max-width:420px;line-height:1.6}
  .checks{list-style:none;padding:0;margin:0 0 24px;display:flex;flex-direction:column;gap:10px}
  .checks li{display:flex;gap:10px;align-items:flex-start;font-size:15px;color:#2a2f4a}
  .check-dot{width:18px;height:18px;border-radius:50%;background:var(--violet);color:#fff;display:grid;place-items:center;font-size:11px;flex-shrink:0;margin-top:1px}

  /* ========= STATS ========= */
  .stats{padding:38px 0}
  .stats-inner{
    background:#0c1030;color:#fff;border-radius:18px;padding:36px 40px;
    display:grid;grid-template-columns:auto 1fr 1fr 1fr 1fr;gap:32px;align-items:center;
    background-image:radial-gradient(800px 200px at 90% -20%,rgba(123,92,255,.18),transparent 60%);
  }
  .stats-eyebrow{font-size:12px;font-weight:700;letter-spacing:.18em;color:#a9aecf;text-transform:uppercase;max-width:140px;line-height:1.4}
  .stat{display:flex;align-items:center;gap:14px}
  .stat .si{width:40px;height:40px;border-radius:10px;display:grid;place-items:center;flex-shrink:0;color:#fff}
  .stat:nth-child(2) .si{background:linear-gradient(135deg,#7b5cff,#9d6bff)}
  .stat:nth-child(3) .si{background:linear-gradient(135deg,#ff6b4a,#ff7d8c)}
  .stat:nth-child(4) .si{background:linear-gradient(135deg,#3a76ff,#6a8aff)}
  .stat:nth-child(5) .si{background:linear-gradient(135deg,#22c47a,#4ddb95)}
  .stat b{display:block;font-size:38px;font-weight:600;letter-spacing:-.025em}
  .stat span{font-size:14px;color:#c2c6e0;line-height:1.4}

  /* ========= TESTIMONIALS ========= */
  .testi{padding:88px 0 96px;background:rgba(255,255,255,.25)}
  .testi-eyebrow{font-size:12px;font-weight:700;letter-spacing:.2em;color:#5a607a;text-transform:uppercase;margin-bottom:24px}
  .testi-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:18px}
  .tcard{background:#fff;border:1px solid var(--line);border-radius:14px;padding:22px;display:flex;flex-direction:column;gap:18px;box-shadow:var(--shadow-soft)}
  .quote{font-size:17px;color:#2a2f4a;font-style:italic;line-height:1.6}
  .quote::before{content:"\201C";color:var(--violet);font-size:30px;line-height:0;vertical-align:-12px;margin-right:4px;font-style:normal}
  .author{display:flex;align-items:center;gap:10px;margin-top:auto}
  .avatar{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,#8b6cff,#ff6a8b);display:grid;place-items:center;color:#fff;font-weight:700;font-size:13px}
  .a-name{font-size:14px;font-weight:700}
  .a-role{font-size:12px;color:#5a607a}
  .tcard.cta{
    background:var(--grad-2);color:#fff;border:none;
    justify-content:space-between;
  }
  .tcard.cta .qi{width:34px;height:34px;border-radius:9px;background:rgba(255,255,255,.2);display:grid;place-items:center}
  .tcard.cta h3{font-size:20px;line-height:1.3;margin:0;font-weight:700}
  .tcard.cta .btn{background:#0f1330;color:#fff;align-self:flex-start;padding:11px 18px;font-size:14px}

  /* ========= FOOTER (Simplifié - Légal) ========= */
  footer{padding:64px 0;border-top:1px solid var(--line-2);background:#fff;position:relative;z-index:2;text-align:center}
  footer::before{content:none !important}
  footer::after{content:none !important}
  .ft-main{display:flex;flex-direction:column;align-items:center;gap:28px}
  .ft-legal{display:flex;gap:24px;flex-wrap:wrap;justify-content:center}
  .ft-legal a{font-size:14px;color:var(--muted);transition:color 0.2s;font-weight:500}
  .ft-legal a:hover{color:var(--violet)}
  .ft-copy{font-size:13px;color:var(--muted-2);margin-top:8px}

  /* ========= ICONS ========= */
  svg{display:block}

  /* ========= RESPONSIVE ========= */
  @media (max-width: 980px){
    /* === MOBILE PERF: disable expensive effects === */
    body::before{display:none !important}
    body{background-image:none}
    .micro-inner::after, .fc-inner::after, .stats-inner::after{display:none}
    .micro-inner::before{display:none}
    .dot-grid{display:none}
    .micro-glow{display:none}
    .nav-wrap::before, .nav-wrap::after{display:none}
    .floater{display:none}
    /* === END MOBILE PERF === */
    .micro-grid{grid-template-columns:1fr;gap:28px}
    .micro-inner{padding:32px}
    .problem2-grid{grid-template-columns:1fr}
    .stats-row{grid-template-columns:1fr}
    .impact-grid{grid-template-columns:1fr 1fr}
    .fc-inner{
      grid-template-columns:1fr;
      grid-template-areas: "text" "steps" "cta";
      padding:36px 24px;gap:32px;
    }
    .fc-inner .btn-light{ justify-self: stretch; justify-content: center; }
    .hero-grid{grid-template-columns:1fr;gap:48px}
    h1.hero-title{font-size:40px}
    .problem-grid{grid-template-columns:1fr;gap:32px}
    .cards-3{grid-template-columns:1fr}
    .approach-grid{grid-template-columns:1fr;gap:24px}
    .stats-inner{grid-template-columns:1fr 1fr;gap:24px;padding:28px}
    .stats-eyebrow{grid-column:1/-1}
    .testi-grid{grid-template-columns:1fr}
    .hero-trust{grid-template-columns:1fr;gap:14px}
    .float-1{right:-10px}
    .float-2{left:-10px}
  }

  @media (max-width: 560px){
    .container{padding:0 18px}
    nav{padding:16px 0}
    .logo{font-size:20px;gap:10px}
    .logo-mark{width:38px;height:38px;border-radius:10px}
    h1.hero-title{font-size:32px}
    h2.section-title{font-size:26px}
    .nav-cta .btn-ghost{display:none}
    .impact{padding:60px 0}
    .impact-grid{grid-template-columns:1fr}
    .impact-head h2{font-size:28px}
    .stats-row{gap:32px}
    .ministat{display:grid;grid-template-columns:42px 1fr;gap:0 14px;align-items:center}
    .ministat .mi-ic{grid-row:1/3;align-self:center;width:38px;height:38px}
    .ministat b{grid-column:2;font-size:32px;line-height:1}
    .ministat .mt{grid-column:2;font-size:15px;line-height:1.2}
    .ministat .ms{grid-column:1/3;margin-top:12px}
    .hero-actions{flex-direction:column;align-items:stretch;gap:12px;margin-bottom:36px}
    .hero-actions .btn{justify-content:center;width:100%; padding: 14px 22px; font-size: 16px;}
    .nav-cta .btn{padding: 9px 15px; font-size: 13px; line-height: 1.2; border-radius: 8px;}
    .hero-actions .btn-link{text-align:center;justify-content:center}
    .hero-trust{
      grid-template-columns:1fr 1fr;
      gap:12px;
      margin-top:20px;
    }
    .floater{ opacity: 0.9; }
    .trust-item{
      background:rgba(255,255,255,0.6);
      padding:12px;
      border-radius:14px;
      border:1px solid rgba(123,92,255,0.1);
      align-items: center;
    }
    .trust-item:last-child{grid-column: span 2;}
    .trust-icon{width:28px;height:28px;background:var(--lav);border:none;color:var(--violet)}
    .trust-title{font-size:13px}
    .trust-meta{font-size:11px}
    .stats-inner{grid-template-columns:1fr}
    .logos-row{justify-content:center}
    .floater{font-size:11px;padding:8px 10px}
  }
  .count{
    font-family: inherit !important;
    font-size: 1em !important;
    font-weight: inherit !important;
    letter-spacing: inherit !important;
    line-height: inherit !important;
    display: inline !important;
    vertical-align: baseline !important;
    font-variant-numeric: tabular-nums;
    color: inherit !important;
  }

  /* Typing Effect */
  .typewriter-text {
    display: inline;
  }
  .cursor {
    display: inline-block;
    width: 3px;
    height: 0.8em;
    background-color: var(--orange);
    margin-left: 2px;
    animation: typing-blink 0.8s step-end infinite;
    vertical-align: baseline;
  }
  @keyframes typing-blink {
    from, to { opacity: 1; }
    50% { opacity: 0; }
  }
  .problem .section-title {
    min-height: 1.1em;
  }

  /* ========= FAQ SECTION ========= */
  .faq {
    padding: 100px 0;
    background: #fff;
    position: relative;
    overflow: hidden;
  }
  .faq::before {
    content: "";
    position: absolute;
    top: 0; left: 50%;
    transform: translateX(-50%);
    width: 100%; height: 1px;
    background: linear-gradient(90deg, transparent, var(--line), transparent);
  }
  .faq-grid {
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    gap: 64px;
    align-items: start;
  }
  .faq-head {
    position: sticky;
    top: 40px;
  }
  .faq-head h2 {
    font-size: 42px;
    line-height: 1.1;
    margin-bottom: 24px;
    letter-spacing: -0.03em;
  }
  .faq-head p {
    color: var(--muted);
    font-size: 18px;
    line-height: 1.6;
    max-width: 380px;
  }
  .faq-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .faq-item {
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fcfbfe;
    transition: all 0.3s ease;
  }
  .faq-item[open] {
    background: #fff;
    border-color: var(--violet);
    box-shadow: var(--shadow-soft);
  }
  .faq-item summary {
    padding: 20px 24px;
    cursor: pointer;
    font-weight: 700;
    font-size: 17px;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    user-select: none;
  }
  .faq-item summary::-webkit-details-marker {
    display: none;
  }
  .faq-item summary::after {
    content: "+";
    font-size: 24px;
    font-weight: 400;
    color: var(--violet);
    transition: transform 0.3s ease;
  }
  .faq-item[open] summary::after {
    transform: rotate(45deg);
  }
  .faq-content {
    padding: 0 24px 24px;
    color: var(--muted);
    font-size: 16px;
    line-height: 1.6;
    border-top: 1px solid transparent;
  }
  .faq-item[open] .faq-content {
    border-top-color: var(--line);
    padding-top: 16px;
  }
  .faq-content p {
    margin: 0 0 16px;
  }
  .faq-content p:last-child {
    margin-bottom: 0;
  }
  .faq-content b, .faq-content strong {
    color: var(--ink);
    font-weight: 700;
  }

  @media (max-width: 980px) {
    .faq { padding: 80px 0; }
    .faq-grid { grid-template-columns: 1fr; gap: 40px; }
    .faq-head { position: static; }
    .faq-head h2 { font-size: 32px; }
  }

  /* ========= REFINED FAQ (HORIZONTAL TABS) ========= */
  .faq-wrap {
    display: flex;
    flex-direction: column;
    gap: 32px;
    margin-top: 48px;
  }
  .faq-sidebar {
    display: flex;
    justify-content: center;
    gap: 12px;
    position: static;
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
    flex-wrap: wrap;
    width: 100%;
  }
  .faq-tab {
    background: #fff;
    border: 1px solid var(--line);
    padding: 12px 24px;
    border-radius: 99px;
    font-size: 14px;
    font-weight: 600;
    color: var(--muted);
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 12px rgba(28,20,60,0.03);
    white-space: nowrap;
    cursor: pointer;
  }
  .faq-tab:hover {
    background: var(--bg-soft);
    border-color: var(--violet);
    color: var(--violet);
    transform: translateY(-2px);
  }
  .faq-tab.active {
    background: var(--violet);
    color: #fff;
    border-color: var(--violet);
    box-shadow: 0 8px 20px rgba(123,92,255,0.25);
  }
  .faq-tab svg {
    width: 16px;
    height: 16px;
    opacity: 0.8;
    transition: filter 0.2s;
  }
  .faq-tab.active svg {
    opacity: 1;
    filter: brightness(0) invert(1);
  }
  .faq-list {
    max-width: 900px;
    margin: 0 auto;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .faq-item {
    display: block;
  }
  .faq-item.hidden {
    display: none;
  }

  @media (max-width: 980px) {
    .faq-sidebar {
      justify-content: flex-start;
      overflow-x: auto;
      padding: 4px;
      -ms-overflow-style: none;
      scrollbar-width: none;
    }
    .faq-sidebar::-webkit-scrollbar { display: none; }
    .faq-tab {
      padding: 10px 18px;
      font-size: 13px;
    }
  }
  /* ========= SERVICES ========= */
  .services{padding:100px 0; background:rgba(255,255,255,0.2)}
  .services-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:24px;
    margin-top:48px;
  }
  .service-card{
    background:#fff;
    border:1px solid var(--line);
    border-radius:20px;
    padding:40px;
    display:flex;
    flex-direction:column;
    gap:20px;
    transition:all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
    position:relative;
    overflow:hidden;
    z-index:1;
  }
  .service-card:hover{
    transform:translateY(-8px);
    box-shadow:var(--shadow-card);
    border-color:var(--violet);
  }
  .sc-icon{
    width:54px;
    height:54px;
    border-radius:14px;
    display:grid; place-items:center;
    background:var(--bg-soft);
    color:var(--violet);
    transition:all 0.4s ease;
  }
  .service-card:hover .sc-icon{
    background:var(--violet);
    color:#fff;
    transform:scale(1.1) rotate(5deg);
  }
  .service-card h3{
    font-size:22px;
    margin:0;
    line-height:1.2;
    font-family:'Inclusive Sans','Helvetica Neue',Arial,sans-serif;
  }
  .service-card p{
    font-size:15px;
    color:var(--muted);
    margin:0;
    line-height:1.6;
    flex-grow:1;
    font-family:'Spectral','Charter',serif;
  }
  .btn-service{
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-size:15px;
    font-weight:700;
    color:var(--violet);
    transition:all 0.2s ease;
    margin-top:auto;
  }
  .service-card:hover .btn-service{
    gap:12px;
  }

  @media (max-width: 1100px){
    .services-grid{grid-template-columns:1fr 1fr}
  }
  @media (max-width: 768px){
    .services-grid{grid-template-columns:1fr}
    .services{padding:60px 0}
    .service-card{padding:30px}
  }