:root{
    /* Thème sombre "mint" — implémenté depuis la maquette Figma Make du 20.09.2026 */
    --bg:#F5F5F7; --surface:#111111; --elevated:#1A1A1A;
    --text-dark:#1D1D1F;
    /* Palette 20.09.2026 — accent principal repassé en bleu froid (le mint devient réservé aux états positifs) */
    --blue-deep:#0091FF; --blue-deep-ink:#0066CC;
    --blue-sky:#0E1420; --blue-sky-soft:rgba(0,145,255,0.14);
    --mint:#25D366; --mint-soft:rgba(37,211,102,0.14);
    --sun:#FBBF24;
    --accent-w:#F5F6FA; --accent-w-ink:#0A0A0C; --accent-w-dim:#DEE2EA;
    --text:#F5F5F7; --text-dim:#96969C; --text-faint:#5B5B60;
    --line: rgba(255,255,255,0.08);
    --line-hi: rgba(255,255,255,0.16);
    --shadow-sm: 0 0 0 1px var(--line);
    --shadow-md: 0 0 0 1px var(--line), 0 16px 40px rgba(0,0,0,0.45);
    --shadow-lift: 0 0 0 1px var(--line-hi), 0 22px 50px rgba(0,0,0,0.55), 0 0 38px rgba(0,145,255,0.30);
    --ease: cubic-bezier(.22,1,.36,1);
    --ease-spring: cubic-bezier(.34,1.56,.64,1);
    --d-s:160ms; --d-m:320ms; --d-l:620ms;
    /* Alias MotionSites — mêmes courbes/durées que --ease/--d-s/--d-m/--d-l ci-dessus,
       exposées sous les noms de la charte motion pour rester cohérent d'un phrasing à l'autre. */
    --ease-premium: var(--ease);
    --transition-fast: var(--d-s) var(--ease-premium);
    --transition-base: var(--d-m) var(--ease-premium);
    --transition-slow: var(--d-l) var(--ease-premium);

    /* Liquid Glass — tokens adaptés à la palette BridgeSanté existante (aucune nouvelle teinte :
       on "vitre" --bg pour les surfaces claires et --surface pour les surfaces sombres, jamais
       de blanc translucide générique qui écraserait le système clair/sombre déjà en place). */
    --glass-light: rgba(245,245,247,0.72);
    --glass-light-strong: rgba(245,245,247,0.86);
    --glass-dark: rgba(17,17,17,0.72);
    --glass-border-light: rgba(255,255,255,0.4);
    --glass-border-dark: rgba(255,255,255,0.10);
    --glass-blur-sm: 10px; --glass-blur-md: 16px; --glass-blur-lg: 22px;
  }
  /* subtle grain — inline SVG turbulence, no image request */
  body::before{
    content:"";
    position:fixed; inset:0; z-index:0; pointer-events:none;
    opacity:1; mix-blend-mode:multiply;
    background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='.035'/%3E%3C/svg%3E");
  }
  @media (prefers-reduced-motion: reduce){ body::before{ opacity:.02; } }
  @media (prefers-reduced-motion: reduce){
    *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important;}
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  body{background:radial-gradient(1300px 750px at 90% -10%, rgba(124,58,237,0.10), transparent 62%), radial-gradient(1100px 650px at -8% 108%, rgba(124,58,237,0.075), transparent 58%), linear-gradient(180deg, rgba(15,10,30,0.018), rgba(15,10,30,0.04)), var(--bg);color:var(--text);font-family:'Instrument Sans',-apple-system,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden;}
  h1,h2,h3{font-family:'Instrument Sans',sans-serif;font-weight:700;letter-spacing:-0.02em;margin:0;}
  .text-glow{text-shadow:0 0 44px rgba(0,145,255,0.55);}
  .reveal{opacity:0;transform:translateY(24px);}
  .reveal.in-view{opacity:1;transform:translateY(0);transition:opacity .7s var(--ease),transform .7s var(--ease);}
  /* Stagger réel par enfant (80ms) — le parent porte .reveal-stagger, chaque enfant .stagger-item.
     Utilise la propriété "translate" (distincte de "transform") pour ne jamais entrer en conflit
     avec un transform:scale() au survol posé sur le même élément (ex. .choice-card:hover). */
  .reveal-stagger .stagger-item{opacity:0;translate:0 22px;transition:opacity .6s var(--ease),translate .6s var(--ease);}
  .reveal-stagger.in-view .stagger-item{opacity:1;translate:0 0;}
  .reveal-stagger .stagger-item:nth-child(1){transition-delay:0ms;}
  .reveal-stagger .stagger-item:nth-child(2){transition-delay:80ms;}
  .reveal-stagger .stagger-item:nth-child(3){transition-delay:160ms;}
  .reveal-stagger .stagger-item:nth-child(4){transition-delay:240ms;}
  .reveal-stagger .stagger-item:nth-child(5){transition-delay:320ms;}
  .reveal-stagger .stagger-item:nth-child(6){transition-delay:400ms;}
  .reveal-stagger .stagger-item:nth-child(7){transition-delay:480ms;}
  a{color:inherit;text-decoration:none;}
  button{font-family:inherit;cursor:pointer;border:none;background:none;}
  .shell{max-width:1080px;margin:0 auto;padding:0 24px;}
  .eyebrow{font-size:12.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--blue-deep);}

  /* ---------- buttons ---------- */
  .btn{display:inline-flex;align-items:center;gap:9px;padding:16px 30px;border-radius:999px;font-weight:700;font-size:15.5px;transition:transform var(--d-s) var(--ease-spring),box-shadow var(--d-s) var(--ease),background var(--d-s) var(--ease),border-color var(--d-s) var(--ease);}
  /* Accent CTA = blanc froid (l'accent bleu reste sur liens/bordures/badges, le mint reste réservé aux états positifs) */
  .btn-primary{background:var(--accent-w);color:var(--accent-w-ink);box-shadow:0 10px 24px rgba(0,0,0,.35);}
  .btn-primary:hover{transform:translateY(-2px);box-shadow:var(--shadow-lift);background:var(--accent-w-dim);}
  .btn-ghost{background:transparent;color:var(--blue-deep);border:1.5px solid var(--blue-deep);}
  .btn-ghost:hover{background:var(--blue-sky-soft);transform:translateY(-1px);}
  .btn-white{background:#fff;color:var(--blue-deep-ink);box-shadow:0 10px 24px rgba(0,0,0,.14);}
  .btn-white:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(0,0,0,.2);}
  .btn:active{transform:translateY(0);}
  /* Retour au clic — spécificité égale aux :hover ci-dessus pour bien primer pendant l'appui */
  .btn-primary:active,.btn-ghost:active,.btn-white:active{transform:scale(.97);}

  /* ---------- topbar ---------- */
  .topbar{position:sticky;top:0;z-index:80;background:var(--glass-light-strong);border-bottom:1px solid transparent;transition:background 220ms var(--ease),border-color 220ms var(--ease),box-shadow 220ms var(--ease);}
  @supports (backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px)){
    .topbar{background:var(--glass-light);backdrop-filter:blur(var(--glass-blur-md)) saturate(140%);-webkit-backdrop-filter:blur(var(--glass-blur-md)) saturate(140%);}
  }
  /* Sous-titre discret : le verre s'épaissit très légèrement une fois qu'on a quitté le haut de page (classe posée en JS) */
  .topbar.is-scrolled{border-bottom-color:var(--glass-border-light);box-shadow:0 4px 20px rgba(0,0,0,0.05);}
  .topbar.is-scrolled{background:var(--glass-light-strong);}
  @supports (backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px)){
    .topbar.is-scrolled{backdrop-filter:blur(var(--glass-blur-lg)) saturate(150%);-webkit-backdrop-filter:blur(var(--glass-blur-lg)) saturate(150%);}
  }
  .topbar-row{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;max-width:1080px;margin:0 auto;}
  .logo{display:flex;align-items:center;gap:9px;font-weight:800;font-size:18px;color:var(--text-dark);}
  .logo svg{width:26px;height:26px;}
  .nav-links{display:flex;align-items:center;gap:30px;}
  .nav-links a{font-size:14.5px;font-weight:600;color:var(--text-dim);transition:color var(--d-s) var(--ease);}
  .nav-links a:hover{color:var(--blue-deep);}
  /* Underline qui s'étend au survol + état actif selon la vue courante */
  .nav-links a.nl-hide{position:relative;padding-bottom:3px;}
  .nav-links a.nl-hide::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1.5px;background:var(--blue-deep);transition:width var(--d-m) var(--ease);}
  .nav-links a.nl-hide:hover::after{width:100%;}
  .nav-links a.nl-hide.active{color:var(--blue-deep);}
  .nav-links a.nl-hide.active::after{width:100%;}
  /* 720px suffisait pour l'ancien nav (3 liens) ; avec le CTA "Trouver mon parcours" ajouté,
     4 liens + bouton se chevauchent jusqu'à ~900px — seuil relevé pour rester "propre" (§23/§32). */
  @media (max-width:900px){.nav-links a.nl-hide{display:none;}}
  .back-link{display:flex;align-items:center;gap:6px;font-size:14px;font-weight:600;color:var(--text-dim);transition:color var(--d-s) var(--ease),gap var(--d-s) var(--ease);}
  .back-link:hover{color:var(--blue-deep);gap:9px;}

  .view{display:none;}
  .view.active{display:block;animation:viewIn var(--d-l) var(--ease);}
  @keyframes viewIn{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:translateY(0);}}

  /* ---------- HOME · hero (maquette Figma Make, 20.09.2026) ---------- */
  .hero{position:relative;padding:48px 0 34px;text-align:center;overflow:hidden;}
  .hero-glow{pointer-events:none;position:absolute;top:0;left:50%;transform:translate(-50%,-40%);width:900px;height:500px;max-width:180vw;border-radius:50%;background:radial-gradient(ellipse at center, rgba(0,145,255,0.18) 0%, transparent 65%);}
  /* Effet d'eau discret en arrière-plan du hero : blobs flous qui dérivent lentement (mêmes teintes
     --blue-deep déjà définies, aucune nouvelle couleur). */
  .hero-water{pointer-events:none;position:absolute;inset:0;overflow:hidden;z-index:0;}
  .hero-water .w-blob{position:absolute;border-radius:50%;filter:blur(60px);opacity:.32;mix-blend-mode:multiply;will-change:transform;}
  .hero-water .w-blob:nth-child(1){width:420px;height:420px;left:6%;top:-14%;background:radial-gradient(circle at 35% 35%, rgba(0,145,255,0.45), transparent 70%);animation:waterDrift1 17s ease-in-out infinite;}
  .hero-water .w-blob:nth-child(2){width:360px;height:360px;right:2%;top:4%;background:radial-gradient(circle at 60% 40%, rgba(0,102,204,0.32), transparent 70%);animation:waterDrift2 21s ease-in-out infinite;}
  .hero-water .w-blob:nth-child(3){width:300px;height:300px;left:36%;bottom:-16%;background:radial-gradient(circle at 50% 50%, rgba(0,145,255,0.24), transparent 72%);animation:waterDrift3 25s ease-in-out infinite;}
  @keyframes waterDrift1{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(30px,24px) scale(1.08);}}
  @keyframes waterDrift2{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(-26px,20px) scale(0.94);}}
  @keyframes waterDrift3{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(18px,-22px) scale(1.06);}}
  @media (prefers-reduced-motion: reduce){.hero-water .w-blob{animation:none;}}
  .hero-inner{position:relative;z-index:1;max-width:720px;margin:0 auto;}
  .hero-pill{display:inline-flex;align-items:center;gap:8px;margin-bottom:26px;padding:7px 16px;border-radius:999px;font-size:12.5px;font-weight:600;color:var(--text-dim);border:1px solid var(--line-hi);background:rgba(255,255,255,0.03);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);}
  .hero-pill .dot{width:6px;height:6px;border-radius:50%;background:var(--blue-deep);}
  .hero-kicker{font-size:14px;font-weight:600;font-style:italic;color:var(--blue-deep);margin:0 0 22px;}
  .hero h1{font-family:'Fraunces','Instrument Sans',serif;font-optical-sizing:auto;font-size:clamp(32px,7vw,60px);line-height:1.15;margin:0 0 24px;color:var(--text-dark);font-weight:600;letter-spacing:-0.01em;}
  .hero h1 em{font-style:italic;font-weight:500;color:var(--blue-deep);}
  .hero h1 .accent-word{font-style:italic;color:#1558E8;font-weight:600;font-size:1.1em;display:inline-block;}
  /* Cerclage à la main sur le mot-clé "Allemagne" — ellipse organique légèrement irrégulière */
  .circle-mark{position:relative;display:inline-block;white-space:nowrap;}
  .circle-mark::before{content:"";position:absolute;left:-10px;right:-10px;top:-8px;bottom:-6px;border:2.5px solid var(--blue-deep);border-radius:52% 48% 50% 50% / 58% 44% 56% 42%;transform:rotate(-2deg);pointer-events:none;}
  .hero p.lead{color:var(--text-dim);font-size:17px;line-height:1.6;max-width:480px;margin:0 auto 26px;}
  .hero-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-bottom:30px;}
  .hero-countries{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-bottom:56px;}
  .hero-countries span{font-size:12px;font-weight:600;padding:6px 14px;border-radius:999px;border:1px solid var(--line);color:var(--text-dim);background:rgba(255,255,255,0.02);}
  .hero-countries span.de{color:var(--blue-deep);background:var(--blue-sky-soft);border-color:var(--blue-deep);}
  /* Carte "fiche de specs" : bordure fine neutre + coins arrondis, 3 colonnes séparées par des
     filets internes légers, texte compact (pas de gros chiffres écrasants). */
  .hero-stats{max-width:600px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1.5px solid rgba(0,0,0,0.10);border-radius:18px;overflow:hidden;background:rgba(255,255,255,0.55);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);}
  .hero-stats div{padding:16px 10px;text-align:center;background:transparent;border-left:1px solid rgba(0,0,0,0.08);min-width:0;}
  .hero-stats div:first-child{border-left:none;}
  .hero-stats b{display:block;color:var(--text-dark);font-size:21px;font-weight:700;letter-spacing:-0.01em;line-height:1;margin-bottom:5px;}
  .hero-stats span{font-size:11px;font-weight:600;color:var(--text-dim);letter-spacing:0;text-transform:none;white-space:nowrap;}
  @media (max-width:480px){
    .hero-stats{border-radius:14px;}
    .hero-stats div{padding:10px 3px;}
    .hero-stats b{font-size:17px;margin-bottom:3px;}
    .hero-stats span{font-size:8.5px;white-space:normal;line-height:1.15;letter-spacing:.01em;padding:0 1px;}
  }
  @media (max-width:640px){.hero{padding:34px 0 26px;}}

  /* ---------- section 2 · proposal ---------- */
  .propose{position:relative;padding:54px 0;text-align:center;overflow:hidden;}
  .propose .blob{display:none;}
  .propose .blob-sky{width:420px;height:420px;top:-140px;left:-120px;background:var(--blue-sky-soft);}
  .propose .blob-mint{width:360px;height:360px;bottom:-140px;right:-100px;background:rgba(0,145,255,0.30);}
  .propose-inner{position:relative;max-width:760px;margin:0 auto;}
  .propose h2{font-size:clamp(24px,4vw,40px);line-height:1.35;font-weight:700;color:var(--text-dark);}
  .propose-words{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;margin-top:34px;}
  .propose-words span{opacity:0;transform:translateY(10px);animation:wordIn var(--d-l) var(--ease) forwards;padding:9px 20px;border-radius:999px;background:var(--surface);box-shadow:var(--shadow-sm);font-weight:700;font-size:14px;color:var(--blue-deep);}
  .propose-words span:nth-child(1){animation-delay:.05s;}
  .propose-words span:nth-child(2){animation-delay:.18s;background:var(--mint-soft);color:#276B54;}
  .propose-words span:nth-child(3){animation-delay:.31s;background:var(--blue-sky-soft);}
  @keyframes wordIn{to{opacity:1;transform:translateY(0);}}

  /* ---------- section · bento (choix quiz / exploration directe) ---------- */
  .choices{display:grid;grid-template-columns:3fr 2fr;gap:16px;padding:8px 0 30px;}
  @media (max-width:820px){.choices{grid-template-columns:1fr;}}
  .choice-card{position:relative;padding:36px 34px;border-radius:24px;overflow:hidden;cursor:pointer;transition:transform var(--d-m) var(--ease-spring),border-color var(--d-s) var(--ease);border:1px solid var(--line);background:var(--surface);}
  .choice-card:hover{transform:scale(1.005);border-color:var(--line-hi);}
  .choice-card .eyebrow{position:relative;z-index:2;display:block;font-size:11.5px;}
  /* Les <button> n'héritent pas color: du parent par défaut — sans ça, ce h3 retombait sur le
     noir par défaut du navigateur au lieu du blanc de la carte sombre (choice-2 le surcharge déjà en foncé). */
  .choice-card h3{position:relative;z-index:2;font-size:clamp(20px,2.4vw,25px);margin:12px 0 10px;line-height:1.25;color:var(--text);}
  .choice-card p{position:relative;z-index:2;color:var(--text-dim);font-size:14px;line-height:1.55;margin:0 0 26px;max-width:340px;}
  .card-link{position:relative;z-index:2;display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--blue-deep);}
  .card-link:after{content:"→";transition:transform var(--d-s) var(--ease-spring);display:inline-block;}
  .choice-card:hover .card-link:after{transform:translateX(4px);}
  /* Spotlight — le glow suit le curseur (--mx/--my posés en JS) au lieu d'un simple fondu d'opacité */
  .choice-shape{position:absolute;inset:0;z-index:1;opacity:0;transition:opacity var(--d-l) var(--ease);}
  .choice-1 .choice-shape{background:radial-gradient(420px circle at var(--mx,85%) var(--my,8%), var(--blue-sky-soft) 0%, transparent 62%);}
  .choice-card:hover .choice-shape{opacity:1;}
  .choice-2{background:var(--blue-deep);border-color:var(--blue-deep);}
  .choice-2:hover{background:#fff;border-color:#fff;}
  .choice-2 .eyebrow{color:rgba(8,8,8,.55);}
  .choice-2 h3{color:#080808;}
  .choice-2 p{color:rgba(8,8,8,.62);}
  .choice-2 .card-link{color:#080808;}

  /* ---------- section · formations preview (accueil) ---------- */
  .home-section{padding:46px 0;border-top:1px solid var(--line);}
  .home-section .section-head{text-align:left;margin:0 0 26px;}
  .home-section .section-head-row{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:24px;}
  #home-tabs{justify-content:flex-start;margin-bottom:26px;}
  #home-formations-grid.op-grid{padding-bottom:0;}
  .home-more{text-align:center;margin-top:26px;}

  /* ---------- section · comment ça marche ---------- */
  .steps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;border-radius:22px;overflow:hidden;border:1px solid var(--line);background:var(--line);}
  @media (max-width:760px){.steps-grid{grid-template-columns:1fr;}}
  .step-card{background:var(--surface);padding:36px 30px;}
  .step-card .n{font-size:44px;font-weight:600;color:var(--line-hi);line-height:1;margin-bottom:18px;font-feature-settings:"tnum";}
  .step-card h4{font-size:16.5px;margin:0 0 10px;}
  .step-card p{font-size:13.5px;color:var(--text-dim);line-height:1.6;margin:0;}

  /* ---------- section · examens (teaser accueil) ---------- */
  .exam-teaser{border-radius:24px;background:var(--surface);border:1px solid var(--line);padding:34px 32px;text-align:center;}
  .exam-teaser h2{font-size:clamp(22px,3.2vw,30px);margin:10px 0 12px;}
  .exam-teaser p{color:var(--text-dim);font-size:14.5px;max-width:520px;margin:0 auto 24px;line-height:1.55;}

  /* ---------- section · pro + WhatsApp ---------- */
  .pro-grid{display:grid;grid-template-columns:3fr 2fr;gap:16px;}
  @media (max-width:900px){.pro-grid{grid-template-columns:1fr;}}
  .pro-card{border-radius:24px;background:var(--surface);border:1px solid var(--line);padding:40px;}
  .pro-card h2{font-size:clamp(22px,2.8vw,28px);margin:10px 0 14px;line-height:1.3;}
  .pro-card p{color:var(--text-dim);font-size:14.5px;line-height:1.6;margin:0 0 22px;max-width:440px;}
  .pro-card ul{list-style:none;margin:0 0 26px;padding:0;font-size:13.5px;}
  .pro-card li{padding:6px 0;color:var(--text-dim);}
  .pro-card li:before{content:"✓ ";color:var(--blue-deep);font-weight:800;}
  .wa-card{border-radius:24px;background:var(--surface);border:1px solid var(--line);padding:32px;display:flex;flex-direction:column;justify-content:center;}
  .wa-card .wa-icon{width:38px;height:38px;border-radius:12px;background:var(--mint-soft);display:flex;align-items:center;justify-content:center;font-size:18px;margin-bottom:16px;}
  .wa-card h4{font-size:15px;margin:0 0 4px;}
  .wa-card .wa-sub{font-size:12px;color:var(--text-dim);margin:0 0 16px;}
  .wa-card p{font-size:13.5px;color:var(--text-dim);line-height:1.55;margin:0 0 20px;}
  .wa-card .btn-wa{width:100%;justify-content:center;}

  /* ---------- footer ---------- */
  .footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:30px;padding:44px 0 24px;}
  @media (max-width:720px){.footer-grid{grid-template-columns:1fr 1fr;}}
  .footer-col p{font-size:12.5px;line-height:1.55;color:var(--text-faint);max-width:200px;margin:0;}
  .footer-col .f-title{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--text-faint);margin:0 0 16px;}
  .footer-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px;}
  .footer-col a{font-size:13px;color:var(--text-dim);}
  .footer-col a:hover{color:var(--text-dark);}
  .site-footer{display:flex;justify-content:space-between;align-items:center;padding:18px 0 30px;border-top:1px solid var(--line);flex-wrap:wrap;gap:12px;color:var(--text-faint);font-size:12.5px;}
  .site-footer a{color:var(--text-faint);}
  .site-footer a:hover{color:var(--blue-deep);}

  /* ---------- QUIZ ---------- */
  .quiz-shell{max-width:600px;margin:20px auto 46px;}
  .step-dots{display:flex;justify-content:center;gap:9px;margin-bottom:30px;}
  .step-dots span{width:8px;height:8px;border-radius:50%;background:var(--line);transition:background var(--d-m) var(--ease),transform var(--d-m) var(--ease);}
  .step-dots span.done{background:var(--mint);}
  .step-dots span.current{background:var(--blue-deep);transform:scale(1.3);}
  /* Anneau de progression du quiz — motion visible à chaque réponse */
  .ring-wrap{position:relative;width:52px;height:52px;}
  .ring-svg{transform:rotate(-90deg);}
  .ring-track{fill:none;stroke:var(--line);stroke-width:8;}
  .ring{fill:none;stroke:var(--blue-deep);stroke-width:8;stroke-linecap:round;stroke-dasharray:283;stroke-dashoffset:283;transition:stroke-dashoffset 650ms var(--ease-spring);}
  .ring-label{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:11.5px;font-weight:700;color:var(--text-dim);font-feature-settings:"tnum";}
  .q-title{font-size:clamp(22px,3.4vw,30px);text-align:center;margin:0 0 32px;animation:viewIn var(--d-m) var(--ease);color:var(--text-dark);}
  .q-options{display:flex;flex-direction:column;gap:12px;}
  .q-opt{border:1.5px solid var(--line);background:var(--surface);padding:19px 24px;text-align:left;font-size:15.5px;font-weight:600;color:var(--text);border-radius:20px;transition:border-color var(--d-s) var(--ease),background var(--d-s) var(--ease),transform var(--d-s) var(--ease);opacity:0;transform:translateY(10px);animation:optIn var(--d-m) var(--ease) forwards;}
  @keyframes optIn{to{opacity:1;transform:translateY(0);}}
  .q-opt:hover{border-color:var(--blue-deep);transform:translateX(3px);}
  .q-opt.sel{border-color:var(--blue-deep);background:var(--blue-sky-soft);animation:selPulse 260ms var(--ease-premium);}
  /* Confirmation de sélection — micro-pulse (amplitude ~1%) avant l'avancée automatique vers la
     question suivante, pour que le choix se "sente" validé sans ralentir l'enchaînement. */
  @keyframes selPulse{0%{transform:scale(1);}45%{transform:scale(1.012);}100%{transform:scale(1);}}
  #q-trust{text-align:center;font-size:12.5px;color:var(--text-faint);margin-top:22px;}
  .quiz-top{display:flex;align-items:center;justify-content:center;position:relative;margin-bottom:6px;}
  .quiz-top .back-link{position:absolute;left:0;}

  /* ---------- ANALYSE (transition entre le quiz et les résultats) ---------- */
  .analyzing-shell{max-width:420px;margin:0 auto;padding:92px 24px;text-align:center;}
  .ring-wrap-lg{position:relative;width:120px;height:120px;margin:0 auto 26px;}
  .ring-svg-lg{transform:rotate(-90deg);}
  .ring-track-lg{fill:none;stroke:var(--line);stroke-width:8;}
  .ring-lg{fill:none;stroke:var(--blue-deep);stroke-width:8;stroke-linecap:round;stroke-dasharray:283;stroke-dashoffset:283;transition:stroke-dashoffset 1400ms var(--ease);}
  .ring-label-lg{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:700;color:var(--text-dark);font-feature-settings:"tnum";}
  .analyzing-shell h3{font-size:19px;margin:0 0 8px;color:var(--text-dark);}
  .analyzing-shell p{font-size:13.5px;color:var(--text-dim);margin:0;}

  /* ---------- RESULTS / FORMATIONS (editorial cards) ---------- */
  .section-head{margin:26px 0 22px;text-align:center;}
  .section-head h2{font-size:clamp(22px,3.4vw,32px);margin:10px 0 8px;color:var(--text-dark);}
  .section-head p{color:var(--text-dim);font-size:14.5px;margin:0 auto;max-width:520px;line-height:1.55;}
  /* var(--line) est calibré pour une bordure visible sur fond sombre (--surface) — sur le fond clair
     de .filters il devenait quasi invisible (pilules "fantômes", sans contour perceptible). Plutôt que
     de forcer une bordure plus foncée, on adopte un plateau "verre" (cf. Liquid Glass) qui donne un
     contour au groupe entier, avec seule la pilule active remplie — un souci en moins, pas un ajouté. */
  .filters{display:flex;gap:4px;flex-wrap:wrap;justify-content:center;margin-bottom:30px;background:var(--glass-light);border:1px solid var(--glass-border-light);border-radius:18px;padding:6px;}
  @supports (backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px)){
    .filters{backdrop-filter:blur(var(--glass-blur-sm)) saturate(130%);-webkit-backdrop-filter:blur(var(--glass-blur-sm)) saturate(130%);}
  }
  .filter-btn{background:transparent;border:none;color:var(--text-dim);padding:9px 15px;font-size:12.5px;font-weight:700;border-radius:12px;transition:color var(--d-s) var(--ease),background var(--d-s) var(--ease),transform var(--d-s) var(--ease-spring);}
  .filter-btn:hover{color:var(--blue-deep-ink);}
  .filter-btn.active{color:#080808;background:var(--blue-deep);box-shadow:0 2px 8px rgba(0,145,255,0.28);}
  .op-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;padding-bottom:26px;}
  @media (max-width:760px){.op-grid{grid-template-columns:1fr;}}
  .op-card{position:relative;overflow:hidden;isolation:isolate;border-radius:28px;background:var(--surface);box-shadow:var(--shadow-sm);padding:26px 26px 24px;cursor:pointer;transition:transform var(--d-m) var(--ease),box-shadow var(--d-m) var(--ease);opacity:0;animation:cardIn var(--d-m) var(--ease) forwards;}
  @keyframes cardIn{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:translateY(0);}}
  .op-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lift);}
  /* Feedback tactile au clic — passe devant le hover (ordre CSS) pour confirmer la sélection
     avant la navigation vers la fiche détail, amplitude conforme à la charte (scale ~0.98). */
  .op-card:active{transform:scale(.985);transition:transform 100ms var(--ease);}
  /* Spotlight — glow discret qui suit le curseur, posé sous le texte (z-index négatif, jamais au-dessus) */
  .op-card::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;transition:opacity .4s var(--ease);background:radial-gradient(380px circle at var(--mx,50%) var(--my,50%), rgba(0,145,255,0.20), transparent 72%);}
  .op-card:hover::before{opacity:1;}
  .op-top{display:flex;flex-wrap:wrap;align-items:center;gap:8px;}
  .op-score{font-size:12px;font-weight:800;color:var(--blue-deep);background:var(--blue-sky-soft);padding:4px 11px;border-radius:999px;white-space:nowrap;}
  .op-score.warn{color:var(--sun);background:rgba(251,191,36,0.14);}
  .op-verif{font-size:12px;color:var(--text-faint);margin-top:14px;font-weight:600;}

  .empty-state{border-radius:28px;background:var(--surface);box-shadow:var(--shadow-sm);padding:44px 30px;text-align:center;}
  .empty-state h3{margin:0 0 10px;font-size:20px;}
  .empty-state p{color:var(--text-dim);font-size:14px;max-width:400px;margin:0 auto 20px;line-height:1.55;}
  .results-more{text-align:center;padding-bottom:42px;}

  /* ---------- catalogue: compteurs honnêtes + badges ---------- */
  .cat-stats{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin:6px 0 26px;}
  .cat-stats span{background:var(--surface);box-shadow:var(--shadow-sm);padding:8px 16px;border-radius:999px;font-size:12.5px;font-weight:700;color:var(--text-dim);}
  .cat-stats span b{color:var(--blue-deep);}
  .badge-new,.badge-updated{display:inline-block;font-size:10px;font-weight:800;padding:3px 9px;border-radius:999px;margin-left:8px;letter-spacing:.03em;text-transform:uppercase;vertical-align:middle;}
  .badge-new{background:var(--sun);color:#5C4508;}
  .badge-updated{background:var(--mint);color:#1E4A3A;}
  .op-card.is-archived{opacity:.55;cursor:default;}
  .support-band{grid-column:1/-1;border-radius:24px;background:var(--mint-soft);padding:26px 28px;display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;opacity:0;animation:cardIn var(--d-m) var(--ease) forwards;}
  .support-band p{margin:6px 0 0;font-size:13.5px;color:var(--text-dim);max-width:420px;}

  /* ---------- gate d'accès catalogue (10 offres visibles gratuitement) ---------- */
  .gate-card{grid-column:1/-1;border-radius:28px;background:var(--surface);border:1.5px dashed var(--line-hi);box-shadow:var(--shadow-sm);padding:44px 30px;text-align:center;opacity:0;animation:cardIn var(--d-m) var(--ease) forwards;}
  .gate-card .gate-icon{display:flex;justify-content:center;color:var(--text-dim);margin-bottom:12px;}
  .gate-card h3{font-size:18.5px;margin:0 0 8px;}
  .gate-card p{color:var(--text-dim);font-size:13.5px;max-width:400px;margin:0 auto 22px;line-height:1.55;}

  /* ---------- DETAIL ---------- */
  /* Entrée en profondeur : titre/badge/métadonnées (detail-head) puis les sections suivantes
     arrivent en léger décalage (réutilise cardIn, déjà utilisé pour les cartes du catalogue).
     Les nœuds sont réutilisés d'une offre à l'autre (pas recréés) : le rejeu est forcé en JS via
     replayEntrance() dans showDetailNow(), sinon l'animation ne jouerait qu'une seule fois. */
  .detail-main > *,.detail-aside > *{opacity:0;animation:cardIn var(--d-m) var(--ease) forwards;}
  .detail-main > *:nth-child(1){animation-delay:0ms;}
  .detail-main > *:nth-child(2){animation-delay:90ms;}
  .detail-main > *:nth-child(3){animation-delay:180ms;}
  .detail-aside > *:nth-child(1){animation-delay:140ms;}
  .detail-aside > *:nth-child(2){animation-delay:220ms;}
  .detail-head{border-radius:28px;background:var(--surface);box-shadow:var(--shadow-sm);padding:32px 34px;margin-bottom:22px;}
  .detail-head h2{font-size:clamp(22px,3.4vw,30px);margin:12px 0 16px;}
  .trust-row{display:flex;flex-wrap:wrap;gap:8px;font-size:11.5px;font-weight:700;color:var(--text-dim);}
  .trust-row span{background:var(--bg);padding:5px 11px;border-radius:999px;}
  .detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px 22px;margin:24px 0 4px;}
  @media (max-width:560px){.detail-grid{grid-template-columns:1fr;}}
  .detail-grid div{border-top:1px solid var(--line);padding-top:10px;font-size:13.5px;display:flex;justify-content:space-between;gap:10px;color:var(--text-dim);}
  .detail-grid b{color:var(--text);font-weight:700;text-align:right;}
  .detail-desc{font-size:15px;color:var(--text-dim);line-height:1.65;margin:20px 0 0;}
  .match-box{border-radius:24px;background:var(--surface);box-shadow:var(--shadow-sm);padding:22px 24px;margin:18px 0;}
  .match-box ul{list-style:none;margin:10px 0 0;padding:0;font-size:14px;}
  .match-box li{padding:5px 0;color:var(--text-dim);}
  .match-box li.ok:before{content:"✓ ";color:#2FBE85;font-weight:800;}
  .match-box li.warn:before{content:"! ";color:#8A6A17;font-weight:800;}
  .official-note{font-size:12px;color:var(--text-faint);margin:12px 0 0;}

  .optimize-box{border-radius:24px;background:var(--surface);box-shadow:var(--shadow-sm);padding:26px;margin:18px 0;}
  .optimize-box h4{margin:0 0 4px;font-size:15.5px;}
  .doc-row{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-top:1px solid var(--line);font-size:13.5px;}
  .doc-row:first-of-type{border-top:none;}
  .doc-status{font-size:11px;font-weight:700;color:var(--text-faint);}

  .wa-band{border-radius:24px;background:var(--mint-soft);padding:26px 28px;display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;margin:18px 0;}
  .wa-band p{margin:0;font-size:13.5px;color:var(--text-dim);max-width:340px;}
  .btn-wa{background:#1E3A2E;color:#EAF5EE;}
  .btn-wa:hover{background:#12251C;transform:translateY(-2px);}

  /* ---------- PRO PAGE ---------- */
  .pro-hero{padding:16px 0 34px;text-align:center;max-width:640px;margin:0 auto;}
  .pro-hero h1{font-size:clamp(28px,4.4vw,44px);margin:16px 0;color:var(--text-dark);}
  .pro-hero p{color:var(--text-dim);font-size:16px;line-height:1.6;}
  .benefits{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;padding-bottom:40px;}
  @media (max-width:760px){.benefits{grid-template-columns:1fr;}}
  .benefit{background:var(--surface);border-radius:24px;box-shadow:var(--shadow-sm);padding:26px 22px;}
  .benefit .num{font-size:12px;font-weight:800;color:var(--blue-deep);}
  .benefit h4{font-size:16px;margin:10px 0 8px;}
  .benefit p{font-size:13.5px;color:var(--text-dim);line-height:1.55;margin:0;}
  .pro-form{max-width:520px;margin:0 auto 54px;background:var(--surface);border-radius:28px;box-shadow:var(--shadow-sm);padding:34px;}
  .pro-form label{display:block;font-size:12.5px;font-weight:700;color:var(--text-dim);margin:0 0 6px;}
  .pro-form input,.pro-form textarea{width:100%;border:1.5px solid var(--line);border-radius:14px;padding:13px 15px;font-family:inherit;font-size:14.5px;color:var(--text-dark);background:var(--bg);margin-bottom:18px;transition:border-color var(--d-s) var(--ease);}
  .pro-form input:focus,.pro-form textarea:focus{outline:none;border-color:var(--blue-deep);}
  .pro-form textarea{resize:vertical;min-height:90px;}

  /* ---------- EXAMENS B1/B2 ---------- */
  .exam-wrap{max-width:680px;margin:0 auto 54px;}
  .exam-disclaimer{border-radius:22px;background:var(--blue-sky-soft);padding:18px 22px;font-size:13.5px;color:var(--text-dim);line-height:1.55;margin:0 0 28px;}
  .exam-disclaimer b{color:var(--blue-deep-ink);}
  .exam-disclaimer a{color:var(--blue-deep);font-weight:700;text-decoration:underline;}
  .toggle-row{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:14px;}
  .toggle-btn{background:transparent;border:1.5px solid var(--line);color:var(--text-dim);padding:11px 18px;font-size:13.5px;font-weight:700;border-radius:999px;transition:border-color var(--d-s) var(--ease),color var(--d-s) var(--ease),background var(--d-s) var(--ease);}
  .toggle-btn.active{border-color:var(--blue-deep);color:#080808;background:var(--blue-deep);}
  .toggle-label{font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--text-faint);margin:22px 0 10px;}
  .exam-card{border-radius:26px;background:var(--surface);box-shadow:var(--shadow-sm);padding:28px 28px 26px;margin-top:20px;}
  .exam-card h3{font-size:19px;margin:6px 0 10px;}
  .exam-card p{font-size:14px;color:var(--text-dim);line-height:1.6;margin:0 0 18px;}
  .exam-level-note{background:var(--mint-soft);border-radius:16px;padding:14px 16px;font-size:13px;color:#7FE3AE;margin-bottom:18px;line-height:1.55;}
  .exam-actions{display:flex;gap:12px;flex-wrap:wrap;}
  .exam-empty{font-size:13px;color:var(--text-faint);font-style:italic;margin-bottom:18px;}

  /* ---------- CGU / mentions légales ---------- */
  .legal-wrap{max-width:680px;margin:0 auto 54px;}
  .legal-updated{color:var(--text-faint);font-size:12.5px;margin:0 0 18px;}
  .legal-card{border-radius:28px;background:var(--surface);box-shadow:var(--shadow-sm);padding:36px 34px;color:var(--text-dim);font-size:14px;line-height:1.65;}
  .legal-card h3{color:var(--text);font-size:16px;margin:26px 0 8px;}
  .legal-card h3:first-child{margin-top:0;}
  .legal-card p{margin:0 0 4px;}
  .legal-card a{color:var(--blue-deep);}

  /* ---------- Comptes / accès Premium ---------- */
  .acc-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);display:none;align-items:center;justify-content:center;z-index:200;padding:20px;}
  .acc-modal-overlay.open{display:flex;}
  .acc-modal{width:100%;max-width:400px;background:var(--surface);border-radius:24px;box-shadow:var(--shadow-lift);padding:34px 30px;position:relative;}
  .acc-modal h3{color:var(--text);font-size:18px;margin:0 0 4px;}
  .acc-modal p.sub{color:var(--text-dim);font-size:13px;margin:0 0 20px;line-height:1.5;}
  .acc-modal label{display:block;color:var(--text-dim);font-size:12.5px;font-weight:700;margin:14px 0 6px;}
  .acc-modal input{width:100%;padding:12px 14px;border-radius:12px;border:1.5px solid var(--line);background:var(--bg);color:var(--text-dark);font-size:14px;}
  .acc-modal input:focus{outline:none;border-color:var(--blue-deep);}
  .acc-close{position:absolute;top:14px;right:16px;background:none;border:none;color:var(--text-faint);cursor:pointer;font-size:22px;line-height:1;padding:4px;}
  .acc-tabs{display:flex;gap:6px;margin-bottom:16px;}
  .acc-tab{flex:1;padding:9px;border-radius:10px;border:1px solid var(--line);background:transparent;color:var(--text-dim);font-size:12.5px;font-weight:700;cursor:pointer;}
  .acc-tab.active{background:var(--blue-deep);color:#080808;border-color:var(--blue-deep);}
  .acc-error{color:var(--sun);font-size:12.5px;margin-top:10px;min-height:14px;line-height:1.5;}
  .acc-status{font-size:12px;color:var(--text-dim);margin-top:10px;}
  .premium-badge{display:inline-flex;align-items:center;gap:5px;background:var(--mint-soft);color:#7FE3AE;font-weight:700;font-size:11.5px;padding:5px 11px;border-radius:999px;white-space:nowrap;}

  /* ---------- Inscription — parcours en étapes (22.09.2026) ----------
     Une étape = un objectif. Réutilise --ease-premium/--d-s/--d-m et le pattern d'entrée @keyframes cardIn
     déjà en place (fiche détail / quiz) plutôt que d'introduire une nouvelle transition. Aucune nouvelle
     couleur : --mint-soft/#7FE3AE (déjà utilisés par .premium-badge / .verified-badge) portent les états
     de succès, --sun porte les erreurs comme partout ailleurs sur le site. */
  .acc-tabs.is-hidden{display:none;}
  .acc-step{display:none;}
  .acc-step.active{display:block;animation:cardIn var(--d-m) var(--ease-premium);}
  .acc-step-back{margin:0 0 12px;padding:0;}
  .acc-name-row{display:flex;gap:10px;}
  .acc-name-row .acc-name-field{flex:1;min-width:0;}
  @media (max-width:380px){.acc-name-row{flex-direction:column;gap:0;}}
  .acc-pass-field{position:relative;}
  .acc-pass-field input{padding-right:44px;}
  .acc-pass-toggle{position:absolute;right:8px;top:50%;transform:translateY(-50%);color:var(--text-faint);padding:6px;display:flex;border-radius:8px;transition:color var(--d-s) var(--ease);}
  .acc-pass-toggle:hover{color:var(--text-dim);}
  .acc-pass-hint{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text-faint);margin-top:8px;transition:color var(--d-s) var(--ease);}
  .acc-pass-hint.is-ok{color:#7FE3AE;}
  .acc-check-badge{width:44px;height:44px;border-radius:50%;background:var(--mint-soft);color:#7FE3AE;display:flex;align-items:center;justify-content:center;margin-bottom:14px;}
  .acc-resend-block{margin-top:22px;padding-top:18px;border-top:1px solid var(--line);}
  .acc-resend-hint{font-size:12.5px;color:var(--text-dim);margin:0 0 10px;line-height:1.5;}
  .acc-link-btn{display:block;background:none;border:none;color:var(--blue-deep);font-size:13px;font-weight:700;padding:6px 0;cursor:pointer;transition:opacity var(--d-s) var(--ease);}
  .acc-link-btn:hover{opacity:.72;}
  .acc-link-btn:disabled{color:var(--text-faint);cursor:default;opacity:.6;}
  .acc-status.is-ok{color:#7FE3AE;}
  .btn-spinner{display:none;width:15px;height:15px;border-radius:50%;border:2px solid rgba(0,0,0,.22);border-top-color:currentColor;animation:accSpin .7s linear infinite;}
  .btn.is-loading .btn-spinner{display:inline-block;}
  @keyframes accSpin{to{transform:rotate(360deg);}}

  /* ---------- Admin — panneau de gestion des accès Premium (27.09.2026) ----------
     Réutilise .acc-modal-overlay/.acc-modal (mêmes tokens de couleur, juste plus large) : aucune
     nouvelle couleur introduite. Visible uniquement si profiles.is_admin=true pour le compte connecté
     (vérifié côté RLS Supabase, pas seulement côté affichage). */
  .admin-modal{max-width:640px;max-height:86vh;overflow-y:auto;}
  .admin-table{width:100%;border-collapse:collapse;margin-top:6px;}
  .admin-table th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--text-faint);padding:8px;border-bottom:1px solid var(--line);}
  .admin-table td{padding:10px 8px;border-bottom:1px solid var(--line);font-size:13px;color:var(--text);vertical-align:middle;}
  .admin-table tr:last-child td{border-bottom:none;}
  .admin-email{word-break:break-all;}
  .admin-toggle{padding:6px 14px;font-size:12px;border-radius:999px;border:1.5px solid var(--line);background:transparent;color:var(--text-dim);font-weight:700;cursor:pointer;white-space:nowrap;}
  .admin-toggle.is-on{background:var(--mint-soft);color:#7FE3AE;border-color:transparent;}
  .admin-toggle:disabled{opacity:.5;cursor:default;}
  .admin-search{width:100%;padding:10px 14px;border-radius:12px;border:1.5px solid var(--line);background:var(--bg);color:var(--text-dark);font-size:13.5px;margin-bottom:14px;}
  .admin-empty{color:var(--text-dim);font-size:13px;padding:16px 0;text-align:center;}

  /* ---------- V2 premium pass (21.09.2026) — mêmes couleurs, meilleure hiérarchie/typo/espacement ----------
     Aucune nouvelle couleur : réutilise --blue-deep/--blue-deep-ink/--mint/--mint-soft/--sun déjà définis. */

  /* Accessibilité — contraste : --text-dim est calibré pour du texte sur --surface (fond sombre, 6.4:1).
     Réutilisé tel quel sur fond clair (--bg) il tombe à 2.70:1 (sous le seuil AA 4.5:1) — nav, footer,
     filtres, etc. sont directement sur --bg. On ajuste seulement la teinte ici (règle explicitement
     autorisée), --text-dim lui-même ne change pas : les cartes sombres restent correctement calibrées. */
  .nav-links a, .back-link, .footer-col a, .filter-btn, .wa-band p, .toggle-btn, .hero-countries span, .pro-form label{color:#6B6B70;}

  /* Accessibilité — focus clavier visible, absent jusqu'ici sur les éléments interactifs custom */
  a:focus-visible, button:focus-visible, .filter-btn:focus-visible, .toggle-btn:focus-visible,
  .op-card:focus-visible, .q-opt:focus-visible, input:focus-visible, textarea:focus-visible{
    outline:2.5px solid var(--blue-deep); outline-offset:3px; border-radius:10px;
  }

  .icon-s{width:15px;height:15px;flex:none;vertical-align:-3px;}

  /* Nav — CTA unique, cohérent avec le reste des boutons */
  .nav-cta{padding:10px 20px;font-size:13.5px;}

  /* Filtres — scroll horizontal propre sur mobile, jamais de wrap sur plusieurs lignes qui écrase */
  .filters{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;justify-content:flex-start;scroll-padding-left:2px;}
  .filters::-webkit-scrollbar{display:none;}
  @media (min-width:661px){.filters{flex-wrap:wrap;justify-content:center;overflow-x:visible;}}
  .filter-btn{flex:none;}

  /* Hero éditorial — pages listing (Formations) : label + grand titre dominant + sous-titre court */
  .list-hero{max-width:640px;margin:0 auto;text-align:center;padding:8px 0 4px;}
  .list-hero h1{font-size:clamp(30px,5.4vw,46px);line-height:1.1;font-weight:800;color:var(--text-dark);margin:12px 0 14px;letter-spacing:-0.02em;}
  .list-hero p.lead{color:var(--text-dim);font-size:16px;line-height:1.6;max-width:460px;margin:0 auto 18px;}
  .list-hero .count-line{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;color:var(--text-dim);margin-bottom:6px;}
  .list-hero .count-line b{color:var(--text-dark);font-weight:700;}
  .list-hero .count-line .dot{width:6px;height:6px;border-radius:50%;background:var(--mint);flex:none;}

  /* Cartes — badge "offre vérifiée" (mint = état positif, déjà réservé à cet usage dans le token) plutôt qu'un score brut */
  /* Fond mint solide (pas var(--mint-soft), trop translucide sur fond sombre --surface : texte #1E4A3A y tombait
     sous 1.5:1 de contraste — même correctif que le badge score-lowverif déjà déployé en production). */
  .verified-badge{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:800;color:#1E4A3A;background:#CFF5DF;padding:5px 11px 5px 9px;border-radius:999px;white-space:nowrap;}
  .verified-badge.is-archived{color:var(--text-faint);background:var(--bg);}
  .card-kicker{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--text-faint);margin:14px 0 3px;}
  .op-card h3{margin:0;font-size:18.5px;line-height:1.3;}
  .op-loc{font-size:13px;color:var(--text-dim);font-weight:600;margin-top:2px;}
  .op-tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px;}
  .op-tags span{background:var(--bg);padding:4px 10px;border-radius:999px;font-size:12px;font-weight:600;color:var(--text-dark);}
  .card-cta{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:var(--blue-deep);margin-top:16px;transition:gap var(--d-s) var(--ease-spring);}
  .card-cta:after{content:"→";}
  .op-card:hover .card-cta{gap:10px;}

  /* Détail — breadcrumb + mise en page desktop deux colonnes (contenu + CTA latéral sticky) */
  .breadcrumb{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--text-faint);margin:24px 0 18px;}
  .breadcrumb a{color:var(--text-faint);}
  .breadcrumb a:hover{color:var(--blue-deep);}
  .breadcrumb .sep{color:var(--text-faint);opacity:.5;}
  .detail-layout{display:grid;grid-template-columns:1fr 320px;gap:24px;align-items:start;max-width:960px;margin:0 auto 54px;}
  @media (max-width:900px){.detail-layout{grid-template-columns:1fr;max-width:720px;}}
  .detail-main{min-width:0;}
  .detail-aside{position:sticky;top:96px;display:flex;flex-direction:column;gap:14px;}
  @media (max-width:900px){.detail-aside{position:static;}}
  /* Élément flottant (sticky) — glass dérivé de --surface, jamais de blanc : reste opaque en repli
     (fallback @supports) si le navigateur ne gère pas backdrop-filter. */
  .aside-card{border-radius:24px;background:var(--surface);box-shadow:var(--shadow-sm);padding:26px;}
  @supports (backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px)){
    .aside-card{background:var(--glass-dark);border:1px solid var(--glass-border-dark);backdrop-filter:blur(var(--glass-blur-md)) saturate(130%);-webkit-backdrop-filter:blur(var(--glass-blur-md)) saturate(130%);}
  }
  .aside-card h4{font-size:15.5px;margin:0 0 6px;}
  .aside-card p{font-size:13px;color:var(--text-dim);line-height:1.55;margin:0 0 16px;}

  /* Mobile — blur réduit pour la performance (§16 de la charte) */
  @media (max-width:768px){
    @supports (backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px)){
      .topbar, .topbar.is-scrolled{backdrop-filter:blur(12px) saturate(130%);-webkit-backdrop-filter:blur(12px) saturate(130%);}
      .filters{backdrop-filter:blur(8px) saturate(120%);-webkit-backdrop-filter:blur(8px) saturate(120%);}
      .aside-card{backdrop-filter:blur(10px) saturate(120%);-webkit-backdrop-filter:blur(10px) saturate(120%);}
    }
  }

  .op-grid .rcard{width:auto;}