/* ============================================================================
     TOKENS — charte visuelle GestASH
     ========================================================================== */
  :root{
    /* Couleurs de base */
    --bg:#f8fafb; --bg-alt:#f0f4f3; --ink:#0f1f23; --muted:#607078;
    /* Teal (échelle) */
    --t-950:#071e24; --t-900:#0c3b44; --t-800:#134f5a; --t-700:#16697a;
    --t-600:#1d7e8f; --t-500:#2a93a6; --t-400:#5bb8c8; --t-200:#b8dfe6;
    --t-100:#d6edf1; --t-50:#eaf5f7;
    /* Accent ambre */
    --ac:#e3a23c; --ac-h:#d08e2a; --ac-s:#fdf4e2; --ac-g:rgba(227,162,60,.12);
    /* Surfaces & lignes */
    --card:#ffffff; --card-alt:#f5f9f8; --ln:#e2ebe9; --ln-s:#eef3f2;
    /* États */
    --ok:#1a9a6f; --ok-s:#e4f6ef; --wa:#d4920f; --wa-s:#fef6e0; --er:#cc4f45; --er-s:#fce8e6;
    /* Rayons */
    --r-xs:8px; --r-sm:12px; --r:16px; --r-lg:20px; --r-xl:28px;
    /* Ombres — 5 niveaux + ambre */
    --s-0:0 0 0 1px var(--ln);
    --s-1:0 1px 2px rgba(7,30,36,.04);
    --s-2:0 4px 12px rgba(7,30,36,.06);
    --s-3:0 8px 24px rgba(7,30,36,.08);
    --s-4:0 16px 48px rgba(7,30,36,.10);
    --s-5:0 24px 64px rgba(7,30,36,.12);
    --s-ac:0 4px 20px rgba(227,162,60,.20);
    /* Courbes d'animation */
    --e-x:cubic-bezier(.16,1,.3,1);   /* révélations (expo sortant) */
    --e-o:cubic-bezier(.33,1,.68,1);  /* transitions douces */
    --e-i:cubic-bezier(.4,0,1,1);     /* boucles de mockup */
    /* Layout */
    --container:1200px;
    --nav-h:68px;
  }

  /* ============================================================================
     POLICES SELF-HOSTÉES — Inter (texte/UI) + Fraunces (titres, serif).
     Fichiers woff2 en local (public/fonts/), exportés depuis @fontsource :
     même rendu que Google Fonts, sans dépendance externe (RGPD, perf, cache).
     ========================================================================== */
  @font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/inter-latin-400-normal.woff2') format('woff2');}
  @font-face{font-family:'Inter';font-style:italic;font-weight:400;font-display:swap;src:url('/fonts/inter-latin-400-italic.woff2') format('woff2');}
  @font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/inter-latin-500-normal.woff2') format('woff2');}
  @font-face{font-family:'Inter';font-style:italic;font-weight:500;font-display:swap;src:url('/fonts/inter-latin-500-italic.woff2') format('woff2');}
  @font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/inter-latin-600-normal.woff2') format('woff2');}
  @font-face{font-family:'Inter';font-style:italic;font-weight:600;font-display:swap;src:url('/fonts/inter-latin-600-italic.woff2') format('woff2');}
  @font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/inter-latin-700-normal.woff2') format('woff2');}
  @font-face{font-family:'Inter';font-style:italic;font-weight:700;font-display:swap;src:url('/fonts/inter-latin-700-italic.woff2') format('woff2');}
  @font-face{font-family:'Fraunces';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/fraunces-latin-400-normal.woff2') format('woff2');}
  @font-face{font-family:'Fraunces';font-style:italic;font-weight:400;font-display:swap;src:url('/fonts/fraunces-latin-400-italic.woff2') format('woff2');}
  @font-face{font-family:'Fraunces';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/fraunces-latin-500-normal.woff2') format('woff2');}
  @font-face{font-family:'Fraunces';font-style:italic;font-weight:500;font-display:swap;src:url('/fonts/fraunces-latin-500-italic.woff2') format('woff2');}
  @font-face{font-family:'Fraunces';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/fraunces-latin-600-normal.woff2') format('woff2');}
  @font-face{font-family:'Fraunces';font-style:italic;font-weight:600;font-display:swap;src:url('/fonts/fraunces-latin-600-italic.woff2') format('woff2');}

  /* ============================================================================
     RESET & BASE
     ========================================================================== */
  *,*::before,*::after{box-sizing:border-box;}
  html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
  body{
    margin:0; background:var(--bg); color:var(--ink);
    font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
    font-size:16px; line-height:1.6; letter-spacing:-.006em;
    -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
    overflow-x:hidden;
  }
  /* Grain SVG permanent en overlay */
  body::before{
    content:''; position:fixed; inset:0; z-index:9998; pointer-events:none;
    mix-blend-mode:overlay; opacity:.3;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
  }
  h1,h2,h3,h4{font-family:'Fraunces',Georgia,serif;font-weight:600;line-height:1.1;letter-spacing:-.03em;margin:0;color:var(--t-950);}
  p{margin:0;}
  a{color:inherit;text-decoration:none;}
  img,svg{display:block;max-width:100%;}
  button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;}
  ul{margin:0;padding:0;list-style:none;}
  ::selection{background:var(--t-200);color:var(--t-950);}
  :focus-visible{outline:2px solid var(--t-500);outline-offset:2px;border-radius:4px;}

  /* ============================================================================
     UTILITAIRES DE LAYOUT
     ========================================================================== */
  .wrap{max-width:var(--container);margin:0 auto;padding:0 24px;}
  section{position:relative;}
  .sect{padding:120px 0;}
  @media(max-width:640px){.sect{padding:80px 0;}}
  .eyebrow{
    display:inline-flex;align-items:center;gap:8px;
    font-size:11.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
    color:var(--t-600);margin-bottom:18px;
  }
  .eyebrow::before{content:'';width:22px;height:1.5px;background:var(--t-400);border-radius:2px;}
  .lead{font-size:clamp(17px,1.6vw,20px);color:var(--muted);line-height:1.6;max-width:60ch;}
  .head-c{text-align:center;margin:0 auto 64px;max-width:720px;}
  .head-c .eyebrow{margin-left:auto;margin-right:auto;}
  .head-c .lead{margin-left:auto;margin-right:auto;}
  h2{font-size:clamp(32px,4.2vw,54px);}
  h3{font-size:20px;letter-spacing:-.02em;}
  .em{font-style:italic;color:var(--t-600);font-weight:500;}

  /* Mesh gradients de fond (pas de simples halos) */
  .mesh{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0;}
  .mesh span{position:absolute;border-radius:50%;filter:blur(100px);}
  .mesh .m-teal{width:600px;height:600px;background:radial-gradient(circle,var(--t-400),transparent 65%);opacity:.35;top:-160px;right:-140px;}
  .mesh .m-amber{width:520px;height:520px;background:radial-gradient(circle,var(--ac),transparent 65%);opacity:.32;bottom:-180px;left:-120px;}
  .mesh .m-mix{width:560px;height:560px;background:radial-gradient(circle,var(--t-200),transparent 62%);opacity:.5;top:30%;left:38%;}
  .sect>.wrap{position:relative;z-index:1;}

  /* ============================================================================
     BOUTONS
     ========================================================================== */
  .btn{
    display:inline-flex;align-items:center;justify-content:center;gap:9px;
    font-size:14.5px;font-weight:600;letter-spacing:-.01em;
    padding:13px 22px;border-radius:var(--r-sm);min-height:44px;
    transition:transform .25s var(--e-o),box-shadow .25s var(--e-o),background .25s var(--e-o),border-color .25s var(--e-o);
    white-space:nowrap;
  }
  .btn svg{width:17px;height:17px;}
  .btn-primary{
    background:var(--ac);color:#3a2405;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.4),var(--s-ac);
  }
  .btn-primary:hover{background:var(--ac-h);transform:translateY(-1px);box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 8px 28px rgba(227,162,60,.30);}
  .btn-ghost{background:var(--card);color:var(--t-900);box-shadow:var(--s-0);}
  .btn-ghost:hover{transform:translateY(-1px);background:var(--t-50);}
  .btn-secondary{background:transparent;color:var(--t-700);}
  .btn-secondary:hover{background:var(--t-50);}
  .btn-sm{padding:9px 16px;min-height:38px;font-size:13.5px;}
  .btn-block{width:100%;}

  /* ============================================================================
     NAV COLLANTE
     ========================================================================== */
  .nav{position:sticky;top:0;z-index:100;transition:background .3s var(--e-o),box-shadow .3s var(--e-o);}
  .nav-inner{
    display:flex;align-items:center;justify-content:space-between;gap:20px;
    height:var(--nav-h);transition:height .3s var(--e-o);
  }
  .nav.scrolled{background:rgba(248,250,251,.82);backdrop-filter:blur(24px) saturate(1.6);-webkit-backdrop-filter:blur(24px) saturate(1.6);box-shadow:0 1px 0 var(--ln-s);}
  .nav.scrolled .nav-inner{height:56px;}
  .brand{display:inline-flex;align-items:center;gap:10px;font-family:'Fraunces',serif;font-weight:600;font-size:20px;color:var(--t-950);letter-spacing:-.02em;}
  .brand .logo{width:30px;height:30px;flex:none;}
  .nav-links{display:flex;align-items:center;gap:4px;}
  .nav-links a{
    font-size:13px;font-weight:500;color:var(--muted);
    padding:7px 13px;border-radius:var(--r-sm);
    transition:color .2s var(--e-o),background .2s var(--e-o);
  }
  .nav-links a:hover{color:var(--t-900);background:var(--t-50);}
  .nav-cta{display:flex;align-items:center;gap:10px;}
  .hamburger{display:none;width:42px;height:42px;border-radius:var(--r-sm);align-items:center;justify-content:center;box-shadow:var(--s-0);background:var(--card);}
  .hamburger svg{width:20px;height:20px;stroke:var(--t-900);}
  @media(max-width:900px){
    .nav-links,.nav-cta .btn{display:none;}
    .hamburger{display:inline-flex;}
  }

  /* Menu mobile plein écran */
  .mobile-menu{
    position:fixed;inset:0;z-index:200;display:none;flex-direction:column;
    padding:24px;background:rgba(248,250,251,.92);backdrop-filter:blur(28px) saturate(1.6);-webkit-backdrop-filter:blur(28px) saturate(1.6);
  }
  .mobile-menu.open{display:flex;}
  .mm-top{display:flex;align-items:center;justify-content:space-between;height:var(--nav-h);}
  .mm-close{width:42px;height:42px;border-radius:var(--r-sm);display:inline-flex;align-items:center;justify-content:center;box-shadow:var(--s-0);background:var(--card);}
  .mm-close svg{width:20px;height:20px;stroke:var(--t-900);}
  .mm-links{display:flex;flex-direction:column;gap:6px;margin-top:32px;}
  .mm-links a{font-size:19px;font-weight:500;color:var(--t-900);padding:14px 8px;border-bottom:1px solid var(--ln-s);}
  .mm-foot{margin-top:auto;padding-top:24px;}

  /* ============================================================================
     BADGES & PILLS
     ========================================================================== */
  .badge-dot{
    display:inline-flex;align-items:center;gap:8px;
    font-size:12.5px;font-weight:600;color:var(--t-700);
    background:var(--t-50);border:1px solid var(--t-100);
    padding:6px 13px 6px 11px;border-radius:100px;
  }
  .badge-dot .dot{width:7px;height:7px;border-radius:50%;background:var(--ok);position:relative;}
  .badge-dot .dot::after{content:'';position:absolute;inset:-4px;border-radius:50%;background:var(--ok);opacity:.35;animation:pulse 2s var(--e-i) infinite;}
  @keyframes pulse{0%{transform:scale(.7);opacity:.5;}70%,100%{transform:scale(2.2);opacity:0;}}

  .reassure{display:flex;flex-wrap:wrap;gap:22px;margin-top:36px;}
  .reassure li{display:inline-flex;align-items:center;gap:9px;font-size:14px;font-weight:500;color:var(--t-800);}
  .chk{width:20px;height:20px;flex:none;border-radius:6px;background:var(--ok-s);display:inline-flex;align-items:center;justify-content:center;}
  .chk svg{width:12px;height:12px;stroke:var(--ok);stroke-width:2.4;}

  /* ============================================================================
     HERO
     ========================================================================== */
  .hero{padding:64px 0 96px;overflow:hidden;}
  .hero-grid{display:grid;grid-template-columns:1.02fr 1.1fr;gap:56px;align-items:center;}
  .hero h1{font-size:clamp(44px,6vw,76px);letter-spacing:-.035em;margin:20px 0 24px;}
  .hero .lead{font-size:clamp(17px,1.7vw,21px);}
  /* Photos d'ambiance médico-social (CC0) sous voile teal — palette du site inchangée. */
  .hero.avec-photo::before{content:'';position:absolute;inset:0;background:image-set(url('/img/hero-accompagnement.webp') type('image/webp'), url('/img/hero-accompagnement.jpg') type('image/jpeg')) center 30%/cover no-repeat;z-index:0;}
  .hero.avec-photo::after{content:'';position:absolute;inset:0;background:linear-gradient(100deg,rgba(7,30,36,.94) 0%,rgba(7,30,36,.86) 42%,rgba(12,59,68,.74) 100%);z-index:0;}
  .hero.avec-photo{position:relative;}
  .hero.avec-photo>*{position:relative;z-index:1;}
  .hero.avec-photo h1{color:#fff;}
  .hero.avec-photo .lead{color:var(--t-100);}
  .hero.avec-photo .em{color:var(--t-400);}
  .hero.avec-photo .reassure li{color:var(--t-100);}
  .sec-photo{position:relative;}
  /* Photo de fond en <img loading="lazy"> (WebP + fallback JPG) — remplace l'ancien
     `::before` en background (qui ne se laisse pas lazy-loader). Le voile teal reste
     en `::after`, au-dessus de la photo (z-index 0 < contenu 1). */
  .sec-photo>.photo-bg{position:absolute;inset:0;z-index:0;}
  .sec-photo>.photo-bg img{width:100%;height:100%;object-fit:cover;display:block;}
  .sec-photo::after{content:'';position:absolute;inset:0;background:linear-gradient(115deg,rgba(7,30,36,.92),rgba(12,59,68,.86));z-index:0;}
  .sec-photo>*{position:relative;z-index:1;}
  .sec-photo h2{color:#fff;}
  .sec-photo .lead{color:var(--t-100);}
  .sec-photo .em{color:var(--t-400);}
  .sec-photo .eyebrow{color:var(--t-200);}
  .final-card>.photo-bg{position:absolute;inset:0;z-index:0;opacity:.22;}
  .final-card>.photo-bg img{width:100%;height:100%;object-fit:cover;display:block;object-position:center 35%;}
  .final-card>*{position:relative;z-index:1;}
  .hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px;}
  @media(max-width:960px){
    .hero-grid{grid-template-columns:1fr;gap:48px;}
    .hero-visual{order:-1;}
  }

  /* ============================================================================
     DEVICE / MOCKUP FRAME
     ========================================================================== */
  .device{
    background:var(--card);border-radius:var(--r-xl);box-shadow:var(--s-5);
    border:1px solid var(--ln);overflow:hidden;position:relative;
  }
  .device-bar{display:flex;align-items:center;gap:7px;padding:13px 16px;border-bottom:1px solid var(--ln-s);position:relative;}
  .device-bar i{width:11px;height:11px;border-radius:50%;display:block;}
  .device-bar i:nth-child(1){background:#ff5f57;} .device-bar i:nth-child(2){background:#febc2e;} .device-bar i:nth-child(3){background:#28c840;}
  .device-bar .title{position:absolute;left:0;right:0;text-align:center;font-size:11px;font-weight:600;color:var(--muted);letter-spacing:.02em;}
  .device-body{padding:20px;}

  /* Hero device en perspective 3D */
  .hero-visual{position:relative;perspective:1600px;}
  .hero-device{transform:rotateY(-3deg) rotateX(1.5deg);transition:transform .8s var(--e-x);transform-style:preserve-3d;}
  .hero-visual:hover .hero-device{transform:rotateY(0) rotateX(0);}

  /* KPI cards */
  .kpi-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;}
  .kpi{background:var(--card-alt);border:1px solid var(--ln-s);border-radius:var(--r-sm);padding:14px;}
  .kpi .lbl{font-size:10px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);}
  .kpi .val{font-family:'Fraunces',serif;font-weight:600;font-size:20px;color:var(--t-950);margin-top:6px;letter-spacing:-.02em;}
  .kpi.accent .val{color:var(--ac-h);}

  /* Jauge de progression */
  .gauge{margin-top:16px;}
  .gauge .grow{display:flex;align-items:center;justify-content:space-between;font-size:12px;margin-bottom:7px;}
  .gauge .grow .g-lbl{font-weight:600;color:var(--t-800);}
  .gauge .grow .g-val{font-family:'Fraunces',serif;font-weight:600;color:var(--ok);}
  .track{height:6px;background:var(--ln-s);border-radius:3px;overflow:hidden;}
  .fill{height:100%;border-radius:3px;background:var(--ok);width:0;}
  .fill.wa{background:var(--wa);} .fill.er{background:var(--er);}

  /* Mini bar chart mensuel */
  .chart{margin-top:18px;}
  .chart .bars{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;height:96px;padding-top:6px;}
  .bgroup{display:flex;align-items:flex-end;gap:3px;flex:1;height:100%;}
  .bar{flex:1;border-radius:2px 2px 0 0;height:var(--h);}
  .bar.c1{background:var(--t-100);border:1px solid var(--t-200);}
  .bar.c2{background:var(--t-500);opacity:.4;}
  .bar.c3{background:var(--ok);}
  .chart .xlabels{display:flex;justify-content:space-between;margin-top:8px;}
  .chart .xlabels span{flex:1;text-align:center;font-size:10px;color:var(--muted);font-weight:500;}
  .legend{display:flex;flex-wrap:wrap;gap:14px;margin-top:14px;}
  .legend span{display:inline-flex;align-items:center;gap:6px;font-size:11px;color:var(--muted);font-weight:500;}
  .legend i{width:10px;height:10px;border-radius:3px;display:block;}

  /* Cartes flottantes du hero */
  .float{
    position:absolute;background:var(--card);border:1px solid var(--ln);border-radius:var(--r);
    box-shadow:var(--s-4);padding:12px 14px;display:flex;align-items:center;gap:11px;
    font-size:12.5px;font-weight:600;opacity:0;z-index:3;
  }
  .float .ficon{width:30px;height:30px;border-radius:9px;flex:none;display:inline-flex;align-items:center;justify-content:center;}
  .float .ficon svg{width:16px;height:16px;stroke-width:1.9;}
  /* Sous-texte de la bulle : `display:block` obligatoire — sans lui il reste en ligne et se colle
     au libellé (« recouvréSur la période »), le margin-top n'ayant aucun effet sur un inline. */
  .float .fsub{display:block;font-size:10.5px;font-weight:500;color:var(--muted);margin-top:1px;}
  /* f1 et f3 sont décalées de la hauteur qu'il faut pour ne pas masquer du texte de la maquette :
     f1 recouvrait le libellé « Aide sociale attendue », f3 la légende « Facturé / Encaissé ». */
  .float.f1{top:calc(6% - 24px);left:-38px;}
  .float.f1 .ficon{background:var(--ok-s);} .float.f1 .ficon svg{stroke:var(--ok);}
  .float.f2{bottom:20%;right:-34px;}
  .float.f2 .ficon{background:var(--wa-s);} .float.f2 .ficon svg{stroke:var(--wa);}
  .float.f3{bottom:-48px;left:16%;background:var(--ac-s);border-color:#f0dcae;}
  .float.f3 .ficon{background:#fff;} .float.f3 .ficon svg{stroke:var(--ac-h);}
  .in .float.f1{animation:fi .8s var(--e-x) .7s forwards;}
  .in .float.f2{animation:fi .8s var(--e-x) 1s forwards;}
  .in .float.f3{animation:fi .8s var(--e-x) 1.3s forwards;}
  @keyframes fi{from{opacity:0;transform:translateY(14px) scale(.96);}to{opacity:1;transform:translateY(0) scale(1);}}
  @media(max-width:1080px){.float.f1{left:-8px;} .float.f2{right:-8px;}}
  @media(max-width:520px){.float{display:none;}}

  /* ============================================================================
     SECTION VEDETTE — cycle ASH
     ========================================================================== */
  .feat-grid{display:grid;grid-template-columns:1.05fr 1.15fr;gap:56px;align-items:center;}
  @media(max-width:960px){.feat-grid{grid-template-columns:1fr;gap:44px;}}
  .benefits{display:flex;flex-direction:column;gap:16px;margin-top:32px;}
  .benefit{display:flex;gap:13px;}
  .benefit .bi{width:26px;height:26px;flex:none;border-radius:8px;background:var(--t-50);border:1px solid var(--t-100);display:inline-flex;align-items:center;justify-content:center;margin-top:2px;}
  .benefit .bi svg{width:14px;height:14px;stroke:var(--t-600);stroke-width:2;}
  .benefit b{font-weight:600;color:var(--t-950);}
  .benefit p{font-size:14.5px;color:var(--muted);}

  /* Cartes d'étape numérotées */
  .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:56px;}
  @media(max-width:760px){.steps{grid-template-columns:1fr;}}
  .step{background:var(--card);border:1px solid var(--ln);border-radius:var(--r);padding:22px;transition:transform .3s var(--e-o),box-shadow .3s var(--e-o),border-color .3s var(--e-o);}
  .step:hover{transform:translateY(-3px);box-shadow:var(--s-4);border-color:transparent;}
  .step .num{width:38px;height:38px;border-radius:10px;background:#fff;border:1px solid var(--ln);color:var(--t-900);font-family:'Fraunces',serif;font-weight:600;font-size:17px;display:inline-flex;align-items:center;justify-content:center;box-shadow:var(--s-1);}
  .step h3{font-size:17px;margin:14px 0 8px;}
  .step p{font-size:14px;color:var(--muted);}

  /* Frise du cycle ASH dans le mockup */
  .cycle{display:flex;align-items:center;justify-content:space-between;margin-top:18px;padding:14px 6px 4px;}
  .cycle .node{display:flex;flex-direction:column;align-items:center;gap:7px;flex:none;width:78px;text-align:center;}
  .cycle .cdot{width:9px;height:9px;border-radius:50%;background:var(--card);border:2px solid var(--ln);transition:border-color .5s var(--e-o),background .5s var(--e-o);}
  .cycle .clbl{font-size:10px;font-weight:600;color:var(--muted);transition:color .5s var(--e-o);}
  .cycle .cline{flex:1;height:1.5px;background:var(--ln);}
  .mk.run .cycle .node:nth-child(1) .cdot{animation:dotOn 6.5s var(--e-o) infinite;animation-delay:.4s;}
  .mk.run .cycle .node:nth-child(3) .cdot{animation:dotOn 6.5s var(--e-o) infinite;animation-delay:2.1s;}
  .mk.run .cycle .node:nth-child(5) .cdot{animation:dotOn 6.5s var(--e-o) infinite;animation-delay:3.8s;}
  .mk.run .cycle .node:nth-child(1) .clbl{animation:lblOn 6.5s var(--e-o) infinite;animation-delay:.4s;}
  .mk.run .cycle .node:nth-child(3) .clbl{animation:lblOn 6.5s var(--e-o) infinite;animation-delay:2.1s;}
  .mk.run .cycle .node:nth-child(5) .clbl{animation:lblOn 6.5s var(--e-o) infinite;animation-delay:3.8s;}
  @keyframes dotOn{0%,10%{border-color:var(--ln);background:var(--card);}20%,88%{border-color:var(--ok);background:var(--ok);}100%{border-color:var(--ln);background:var(--card);}}
  @keyframes lblOn{0%,10%{color:var(--muted);}20%,88%{color:var(--t-800);}100%{color:var(--muted);}}

  /* Animations de boucle du dashboard (jauge + barres) */
  .mk.run .gauge .fill{animation:gaugeLoop 7s var(--e-o) infinite;}
  @keyframes gaugeLoop{0%{width:0;}45%,80%{width:var(--gw);}100%{width:0;}}
  .mk.run .chart .bar{animation:barLoop 6.5s var(--e-o) infinite;animation-delay:var(--bd,0s);}
  @keyframes barLoop{0%{height:0;}35%,82%{height:var(--h);}100%{height:0;}}

  /* ============================================================================
     SECTION CALCUL — mockup
     ========================================================================== */
  .calc-grid{display:grid;grid-template-columns:1.15fr 1.05fr;gap:56px;align-items:center;}
  @media(max-width:960px){.calc-grid{grid-template-columns:1fr;gap:44px;}.calc-grid .device-wrap{order:-1;}}
  .cl-line{display:flex;align-items:center;justify-content:space-between;padding:11px 2px;border-bottom:1px solid var(--ln-s);opacity:0;}
  .cl-line .cl-name{display:flex;align-items:center;gap:10px;font-size:13.5px;font-weight:500;color:var(--t-900);}
  .cl-line .cl-name .cd{width:7px;height:7px;border-radius:2px;background:var(--t-400);flex:none;}
  .cl-line .cl-name .cd.ded{background:var(--ac);}
  .cl-line .cl-amt{font-size:13.5px;font-weight:600;color:var(--t-950);font-variant-numeric:tabular-nums;}
  .mk.run .cl-line{animation:clI 8.5s var(--e-o) infinite;}
  .mk.run .cl-line:nth-child(1){animation-delay:.2s;} .mk.run .cl-line:nth-child(2){animation-delay:.7s;}
  .mk.run .cl-line:nth-child(3){animation-delay:1.2s;} .mk.run .cl-line:nth-child(4){animation-delay:1.7s;}
  .mk.run .cl-line:nth-child(5){animation-delay:2.2s;} .mk.run .cl-line:nth-child(6){animation-delay:2.7s;}
  @keyframes clI{0%,4%{opacity:0;transform:translateY(8px);}12%,90%{opacity:1;transform:translateY(0);}100%{opacity:0;transform:translateY(0);}}
  .cl-total{display:flex;align-items:center;justify-content:space-between;margin-top:16px;padding:16px;background:var(--t-950);border-radius:var(--r-sm);opacity:0;}
  .cl-total .t-lbl{font-size:12.5px;font-weight:600;color:var(--t-200);letter-spacing:.04em;text-transform:uppercase;}
  .cl-total .t-val{font-family:'Fraunces',serif;font-weight:600;font-size:26px;color:#fff;letter-spacing:-.02em;}
  .mk.run .cl-total{animation:clTI 8.5s var(--e-o) infinite;animation-delay:3.4s;}
  @keyframes clTI{0%,4%{opacity:0;transform:scale(.97);}14%,92%{opacity:1;transform:scale(1);}100%{opacity:0;}}
  .cl-export{margin-top:14px;display:flex;justify-content:flex-end;opacity:0;}
  .cl-export .pill-x{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;color:var(--t-700);background:var(--t-50);border:1px solid var(--t-100);padding:9px 14px;border-radius:var(--r-sm);}
  .cl-export .pill-x svg{width:14px;height:14px;stroke:var(--t-600);stroke-width:1.9;}
  .mk.run .cl-export{animation:clXI 8.5s var(--e-o) infinite;animation-delay:4s;}
  @keyframes clXI{0%,8%{opacity:0;transform:translateY(6px);}18%,92%{opacity:1;transform:translateY(0);}100%{opacity:0;}}

  /* ============================================================================
     SECTION CHAT — assistant règlement
     ========================================================================== */
  .chat-grid{display:grid;grid-template-columns:1.05fr 1.15fr;gap:56px;align-items:center;}
  @media(max-width:960px){.chat-grid{grid-template-columns:1fr;gap:44px;}}
  .chat-head{display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid var(--ln-s);}
  .chat-head .ci{width:36px;height:36px;border-radius:11px;flex:none;background:linear-gradient(135deg,var(--t-500),var(--t-800));display:inline-flex;align-items:center;justify-content:center;}
  .chat-head .ci svg{width:19px;height:19px;stroke:#fff;stroke-width:1.9;}
  .chat-head .cname{font-weight:600;font-size:14px;color:var(--t-950);}
  .chat-head .conline{display:inline-flex;align-items:center;gap:6px;font-size:11px;color:var(--ok);font-weight:600;margin-top:1px;}
  .chat-head .conline .odot{width:6px;height:6px;border-radius:50%;background:var(--ok);position:relative;}
  .chat-head .conline .odot::after{content:'';position:absolute;inset:-3px;border-radius:50%;background:var(--ok);opacity:.35;animation:pulse 2s var(--e-i) infinite;}
  .chat-body{padding:18px;min-height:340px;display:flex;flex-direction:column;gap:14px;}
  .rule-badge{align-self:center;display:inline-flex;align-items:center;gap:7px;font-size:11.5px;font-weight:600;color:var(--t-700);background:var(--t-50);border:1px solid var(--t-100);padding:6px 12px;border-radius:100px;opacity:0;}
  .rule-badge svg{width:13px;height:13px;stroke:var(--t-600);stroke-width:1.9;}
  .msg{display:flex;gap:10px;max-width:88%;opacity:0;}
  .msg .av{width:30px;height:30px;border-radius:9px;flex:none;display:inline-flex;align-items:center;justify-content:center;}
  .msg .av svg{width:15px;height:15px;stroke-width:1.9;}
  .bubble{padding:11px 14px;font-size:13.5px;line-height:1.55;}
  .msg.user{align-self:flex-end;flex-direction:row-reverse;}
  .msg.user .av{background:var(--ac-s);border:1px solid #f0dcae;}
  .msg.user .av svg{stroke:var(--ac-h);}
  .msg.user .bubble{background:var(--t-800);color:var(--t-50);border-radius:14px 14px 2px 14px;}
  .msg.bot .av{background:linear-gradient(135deg,var(--t-500),var(--t-800));}
  .msg.bot .av svg{stroke:#fff;}
  .msg.bot .bubble{background:var(--card-alt);border:1px solid var(--ln-s);color:var(--t-900);border-radius:14px 14px 14px 2px;}
  .typing{display:flex;gap:4px;align-items:center;padding:13px 14px;}
  .typing i{width:7px;height:7px;border-radius:50%;background:var(--t-400);animation:typo 1.2s var(--e-i) infinite;}
  .typing i:nth-child(2){animation-delay:.18s;} .typing i:nth-child(3){animation-delay:.36s;}
  @keyframes typo{0%,60%,100%{transform:translateY(0);opacity:.4;}30%{transform:translateY(-4px);opacity:1;}}
  .source{margin-top:2px;background:var(--ac-s);border:1px solid rgba(227,162,60,.15);border-radius:var(--r-sm);padding:13px 14px;opacity:0;}
  .source .slbl{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ac-h);}
  .source .stext{font-size:12.5px;color:var(--t-900);margin-top:6px;line-height:1.55;}
  /* Boucle chat */
  .mk.run .rule-badge{animation:chFade 11s var(--e-o) infinite;animation-delay:.3s;}
  .mk.run .msg.user{animation:chSlide 11s var(--e-o) infinite;animation-delay:1s;}
  .mk.run .typing{animation:chFade 11s var(--e-o) infinite;animation-delay:2.8s;}
  .mk.run .msg.bot{animation:chSlide 11s var(--e-o) infinite;animation-delay:4.5s;}
  .mk.run .source{animation:chSI 6.8s var(--e-o) infinite;animation-delay:5.4s;}
  @keyframes chFade{0%,2%{opacity:0;transform:translateY(6px);}8%,94%{opacity:1;transform:translateY(0);}100%{opacity:0;}}
  @keyframes chSlide{0%,3%{opacity:0;transform:translateY(10px);}10%,94%{opacity:1;transform:translateY(0);}100%{opacity:0;}}
  @keyframes chSI{0%,4%{opacity:0;transform:translateY(8px) scaleY(.9);}16%,90%{opacity:1;transform:translateY(0) scaleY(1);}100%{opacity:0;}}

  /* ============================================================================
     CARTES GÉNÉRIQUES (bénéfices icône carré, sécurité icône cercle)
     ========================================================================== */
  .card-grid{display:grid;gap:18px;}
  .g4{grid-template-columns:repeat(4,1fr);}
  .g3{grid-template-columns:repeat(3,1fr);}
  @media(max-width:960px){.g4{grid-template-columns:repeat(2,1fr);}}
  @media(max-width:760px){.g3{grid-template-columns:1fr;}}
  @media(max-width:560px){.g4{grid-template-columns:1fr;}}
  .icard{background:var(--card);border:1px solid var(--ln);border-radius:var(--r);padding:24px;transition:transform .3s var(--e-o),box-shadow .3s var(--e-o),border-color .3s var(--e-o);}
  .icard:hover{transform:translateY(-3px);box-shadow:var(--s-4);border-color:transparent;}
  .icard .sq{width:44px;height:44px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;margin-bottom:16px;}
  .icard .sq.teal{background:var(--t-50);border:1px solid var(--t-100);} .icard .sq.teal svg{stroke:var(--t-600);}
  .icard .sq.amber{background:var(--ac-s);border:1px solid #f0dcae;} .icard .sq.amber svg{stroke:var(--ac-h);}
  .icard .sq svg{width:22px;height:22px;stroke-width:1.75;}
  .icard h3{font-size:16.5px;margin-bottom:8px;}
  a.icard{display:block;}   /* cartes-liens de la section Ressources */
  .icard p{font-size:14px;color:var(--muted);}
  .sec-center{text-align:center;}
  .sec-center .icard{padding:32px 24px;}
  .sec-center .sq{margin-left:auto;margin-right:auto;border-radius:50%;width:52px;height:52px;}

  /* ============================================================================
     TARIFS
     ========================================================================== */
  .cta-note{display:block;text-align:center;font-size:12.5px;color:var(--muted);margin-top:10px;}
  .price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:start;}
  @media(max-width:960px){.price-grid{grid-template-columns:1fr;max-width:460px;margin:0 auto;}}
  .plan{background:var(--card);border:1px solid var(--ln);border-radius:var(--r-lg);padding:28px;display:flex;flex-direction:column;transition:transform .3s var(--e-o),box-shadow .3s var(--e-o);}
  .plan:hover{box-shadow:var(--s-3);}
  .plan.featured{border-color:var(--ac);transform:scale(1.02);box-shadow:var(--s-4),0 0 0 1px var(--ac),0 0 80px -20px var(--ac-g);}
  @media(max-width:960px){.plan.featured{transform:none;}}
  .plan .p-badge{align-self:flex-start;display:inline-flex;align-items:center;gap:7px;font-size:11px;font-weight:700;letter-spacing:.04em;color:var(--ac-h);background:var(--ac-s);border:1px solid #f0dcae;padding:5px 11px;border-radius:100px;margin-bottom:14px;}
  .plan .p-badge .dot{width:6px;height:6px;border-radius:50%;background:var(--ac);position:relative;}
  .plan .p-badge .dot::after{content:'';position:absolute;inset:-3px;border-radius:50%;background:var(--ac);opacity:.4;animation:pulse 2s var(--e-i) infinite;}
  .plan h3{font-family:'Fraunces',serif;font-size:19px;font-weight:600;}
  .plan .p-pos{font-size:13.5px;color:var(--muted);margin:8px 0 20px;min-height:38px;}
  .plan .p-price{display:flex;align-items:baseline;gap:6px;}
  .plan .p-price .amt{font-family:'Fraunces',serif;font-weight:600;font-size:40px;color:var(--t-950);letter-spacing:-.03em;}
  .plan .p-price .per{font-size:13px;color:var(--muted);font-weight:500;}
  .plan .p-from{font-size:11.5px;color:var(--t-600);font-weight:600;text-transform:uppercase;letter-spacing:.06em;margin-bottom:4px;}
  .plan .p-tiers{font-size:12px;color:var(--muted);margin:10px 0 4px;line-height:1.5;}
  .plan .p-list{display:flex;flex-direction:column;gap:11px;margin:22px 0;padding-top:22px;border-top:1px solid var(--ln-s);}
  .plan .p-list li{display:flex;gap:10px;font-size:13.5px;color:var(--t-900);line-height:1.5;}
  .plan .p-list li svg{width:16px;height:16px;flex:none;stroke:var(--ok);stroke-width:2.2;margin-top:3px;}
  .plan .p-opt{font-size:12px;color:var(--muted);margin:-6px 0 20px;font-style:italic;}
  .plan .p-cta{margin-top:auto;}
  .price-foot{margin-top:36px;text-align:center;}
  .price-foot p{font-size:13.5px;color:var(--muted);max-width:64ch;margin:0 auto;}
  .price-foot p.strong{color:var(--t-800);font-weight:500;margin-bottom:10px;}

  /* ============================================================================
     FORMATION
     ========================================================================== */
  .price-grid.duo{grid-template-columns:repeat(2,1fr);max-width:840px;margin:0 auto;}
  @media(max-width:960px){.price-grid.duo{grid-template-columns:1fr;max-width:460px;}}
  .forma-prog{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;max-width:840px;margin:0 auto 44px;}
  @media(max-width:960px){.forma-prog{grid-template-columns:1fr;max-width:460px;}}
  .forma-half{background:var(--card-alt);border:1px solid var(--ln-s);border-radius:var(--r-lg);padding:24px 26px;}
  .forma-half h3{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--t-600);margin-bottom:14px;}
  .forma-half ul{display:flex;flex-direction:column;gap:11px;}
  .forma-half li{display:flex;gap:10px;font-size:13.5px;color:var(--t-900);line-height:1.5;}
  .forma-half li svg{width:16px;height:16px;flex:none;stroke:var(--ok);stroke-width:2.2;margin-top:3px;}

  /* ============================================================================
     FAQ
     ========================================================================== */
  .faq{max-width:760px;margin:0 auto;}
  .faq-item{border-bottom:1px solid var(--ln);}
  /* <summary> natif (details) : on retire le marqueur système et on garde le style précédent. */
  .faq-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:22px 4px;text-align:left;font-size:16.5px;font-weight:600;color:var(--t-950);font-family:'Fraunces',serif;list-style:none;cursor:pointer;}
  .faq-q::-webkit-details-marker{display:none;}
  .faq-q::marker{content:'';}
  .faq-q .fico{width:26px;height:26px;flex:none;border-radius:8px;background:var(--t-50);display:inline-flex;align-items:center;justify-content:center;transition:transform .35s var(--e-o),background .25s var(--e-o);}
  .faq-q .fico svg{width:14px;height:14px;stroke:var(--t-600);stroke-width:2.2;}
  details[open] .faq-q .fico{transform:rotate(45deg);background:var(--t-100);}
  /* Le contenu est géré nativement par <details> ; on anime seulement l'apparition. */
  .faq-a{overflow:hidden;}
  details[open] .faq-a{animation:faq-in .35s var(--e-o);}
  @keyframes faq-in{from{opacity:0;transform:translateY(-4px);}to{opacity:1;transform:none;}}
  .faq-a p{font-size:14.5px;color:var(--muted);padding:0 4px 22px;line-height:1.6;max-width:64ch;}

  /* ============================================================================
     CTA FINAL + FOOTER
     ========================================================================== */
  .final{position:relative;overflow:hidden;}
  .final-card{position:relative;background:linear-gradient(160deg,var(--t-900),var(--t-950));border-radius:var(--r-xl);padding:72px 40px;text-align:center;overflow:hidden;box-shadow:var(--s-5);}
  .final-card .mesh .m-teal{opacity:.28;} .final-card .mesh .m-amber{opacity:.22;}
  .final-card h2{color:#fff;font-size:clamp(30px,4vw,48px);}
  .final-card .lead{color:var(--t-200);margin:18px auto 32px;}
  .final-card .em{color:var(--t-400);}
  footer{padding:56px 0 48px;border-top:1px solid var(--ln);margin-top:120px;}
  @media(max-width:640px){footer{margin-top:80px;}}
  .foot-top{display:flex;flex-wrap:wrap;justify-content:space-between;gap:24px;align-items:center;}
  .foot-links{display:flex;flex-wrap:wrap;gap:6px;}
  .foot-links a{font-size:13.5px;color:var(--muted);padding:6px 12px;border-radius:var(--r-sm);transition:color .2s,background .2s;}
  .foot-links a:hover{color:var(--t-900);background:var(--t-50);}
  .foot-bottom{margin-top:28px;padding-top:24px;border-top:1px solid var(--ln-s);display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px;align-items:center;}
  .foot-bottom p{font-size:12.5px;color:var(--muted);}
  .foot-conform{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:500;color:var(--t-700);}
  .foot-conform svg{width:15px;height:15px;stroke:var(--t-600);stroke-width:1.9;}

  /* ============================================================================
     RÉVÉLATION AU SCROLL
     ========================================================================== */
  /* Sans JS (html.no-js) : tout le contenu reste visible — les révélations ne masquent rien.
     Le script en tête de page retire la classe no-js dès que JS est disponible. */
  html.no-js [data-reveal]{opacity:1;transform:none;}
  [data-reveal]{opacity:0;transform:translateY(20px);transition:opacity .65s var(--e-x) var(--rd,0s),transform .65s var(--e-x) var(--rd,0s);}
  [data-reveal].in{opacity:1;transform:none;}

  /* ============================================================================
     REDUCED MOTION — tout figé sur l'état final
     ========================================================================== */
  @media(prefers-reduced-motion:reduce){
    html{scroll-behavior:auto;}
    body::before{display:none;}                     /* grain désactivé */
    .mesh{display:none;}                             /* halos désactivés */
    *,*::before,*::after{animation:none!important;transition:none!important;}
    [data-reveal]{opacity:1!important;transform:none!important;}
    .float{opacity:1!important;transform:none!important;}
    .badge-dot .dot::after,.plan .p-badge .dot::after,.chat-head .conline .odot::after{display:none;}
    .gauge .fill{width:var(--gw)!important;}
    .chart .bar{height:var(--h)!important;}
    .cycle .cdot{border-color:var(--ok)!important;background:var(--ok)!important;}
    .cycle .clbl{color:var(--t-800)!important;}
    .cl-line,.cl-total,.cl-export,.rule-badge,.msg,.typing,.source{opacity:1!important;transform:none!important;}
  }

  /* ============================================================================
     STICKY CTA MOBILE — barre d'appel à l'action fixe en bas d'écran.
     Masquée quand le CTA final de la page devient visible (body.cta-visible,
     piloté depuis landing.js via IntersectionObserver sur .final-card).
     ========================================================================== */
  .mobile-cta{display:none;}
  @media(max-width:900px){
    .mobile-cta{
      display:block;position:fixed;left:0;right:0;bottom:0;z-index:60;
      padding:12px 16px calc(12px + env(safe-area-inset-bottom));
      background:linear-gradient(180deg,rgba(248,250,251,0),rgba(248,250,251,.97) 45%);
      transition:opacity .3s var(--e-o),visibility .3s;
    }
    .mobile-cta .btn{width:100%;box-shadow:var(--s-3);}
    /* Compense la barre pour que le footer ne soit jamais recouvert. */
    body{padding-bottom:76px;}
    body.cta-visible .mobile-cta{opacity:0;visibility:hidden;pointer-events:none;}
    body.cta-visible{padding-bottom:0;}
  }

  /* ============================================================================
     SKIP-LINK — lien d'évitement clavier, masqué hors focus, visible au focus.
     ========================================================================== */
  .skip-link{
    position:fixed;top:12px;left:12px;z-index:100;
    padding:10px 16px;border-radius:var(--r-sm);
    background:var(--t-900);color:#fff;font-size:14px;font-weight:600;
    text-decoration:none;box-shadow:var(--s-3);
    transform:translateY(-150%);transition:transform .2s var(--e-o);
  }
  .skip-link:focus{transform:none;}