/* ============================================================
   Aprentika · Landing v2 — alignée sur l'app Flutter (lot 4, 03/10/2026)
   Anti-IA : élévation > bordure. Pas de contour 1px sur les cartes.
   Blocs différenciés : info = éditorial flush, sélection = carte surélevée.
   L'APP fait foi : chaque jeton de :root cite son équivalent Dart
   (lib/core/themes/). Bouton primaire = indigo plein (AppColors.primary),
   sans halo ; titrage Clash Display, texte Outfit, mot-marque Bricolage.
   ============================================================ */
:root{
  /* Fonds : AppColors.ivory, surfaceContainerHigh, graySurface. Plus de
     grain SVG : l'app n'en a pas, et il teintait tout le site. */
  --sand:#FFFFFF;--sand-2:#F4F5FF;--sand-3:#EEF0FE;--paper:#FFFFFF;
  /* Encre ardoise (AppColors.black). --muted 7,4:1 sur le fond, 6,8:1 sur
     --sand-2 ; --faint = AppColors.warmGrayText, 5,6:1 et 5,2:1. Le gris
     #64748B de l'app tombe à 4,3:1 sur les bandes teintées : pas en texte. */
  --ink:#0F172A;--muted:#475569;--faint:#6B6560;
  --hair:rgba(15,23,42,.08);
  /* Logo Aprentika (app_gradients.dart) : ces trois teintes ne portent
     jamais de texte sur fond clair (teal 2:1, bleu 2,5:1). */
  --teal:#48C9B0;--blue:#4BA6FF;--indigo:#414DF4;--gold:#F59E0B;
  /* Action = indigo plein, blanc dessus 6,5:1 ; pressé = un cran plus
     sombre (7,8:1), jamais de halo coloré. */
  --indigo-press:#3440D6;
  /* Liens et sur-titres : AppThemeWeb.skyDeep, 5,2:1 sur le fond. */
  --blue-text:#1A6BC2;
  /* Dégradé du logo, haut-gauche vers bas-droite (AppGradients). */
  --grad:linear-gradient(135deg,var(--teal),var(--blue) 50%,var(--indigo));
  /* Le même dégradé, quand il PORTE du texte sur fond clair (mot accentué
     des titres, chiffres en dégradé). Teal et bleu du logo n'y font que
     1,9:1 et 2,3:1 ; ici ils sont descendus dans leur propre teinte
     jusqu'au seuil AA des grands textes (3:1). Mesuré en 22 points du
     dégradé sur l'ivoire, le blanc et --sand-2 : minimum 3,74:1 (teal
     #0F8C7C 3,74 à 3,96:1, bleu #2A78E4 3,86 à 4,1:1, indigo 5,8 à 6,5:1).
     La bande sombre garde la moitié claire du logo (teal 8,7:1). */
  --teal-ink:#0F8C7C;--blue-ink:#2A78E4;--gold-ink:#B26A00;
  --grad-text:linear-gradient(135deg,var(--teal-ink),var(--blue-ink) 50%,var(--indigo));
  /* Typographie (app_text_styles.dart) : Clash Display pour le titrage,
     Outfit pour le texte, Bricolage 800 pour le seul mot-marque (logo.dart).
     Clash est déjà serrée : -0,3 px à partir de 28 px, 0 en dessous, et
     0,06 em entre les mots (displayTracking / displayWordSpacing). */
  --font-display:"Clash Display","Outfit",system-ui,sans-serif;
  --font-body:"Outfit",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-brand:"Bricolage Grotesque",sans-serif;
  --track-display:-.3px;--word-display:.06em;
  /* Rayons (app_radius.dart) : un rôle, un rayon. */
  --r-xs:4px;--r-sm:8px;--r-md:12px;--r-lg:16px;--r-xl:24px;--r-2xl:28px;--r-3xl:32px;--r-pill:999px;
  /* Espacements (app_spacing.dart) et gouttière de page. */
  --s-1:4px;--s-2:8px;--s-3:12px;--s-4:16px;--s-5:24px;--s-6:32px;
  --gutter:40px;
  /* Mouvement : miroir d'AppMotion (lib/core/themes/app_motion.dart).
     Aucune durée littérale hors de ce bloc : une transition ou une
     animation cite un jeton (garde : test/tools/landing_motion_test.dart). */
  --dur-micro:100ms;--dur-control:160ms;--dur-short:200ms;--dur-medium:300ms;
  --dur-hero:420ms;--dur-long:450ms;--dur-counter:800ms;--dur-gauge:900ms;
  --dur-dialog-in:250ms;--dur-dialog-out:180ms;--dur-page-out:150ms;
  --stagger:50ms;--word-step:30ms;
  --ease-enter:cubic-bezier(.33,1,.68,1);--ease-exit:cubic-bezier(.32,0,.67,0);
  /* Élévation = AppElevation low / medium / high, teintée ardoise. Le
     halo indigo (AppElevation.halo) sert UNE fois par page au plus. */
  --sh-1:0 0 0 1px #E3EAF3;
  --sh-2:0 0 0 1px #E3EAF3;
  --sh-3:0 0 0 1px #E3EAF3;
  --sh-halo:0 8px 24px -6px rgba(65,77,244,.20);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:96px}
body{font-family:var(--font-body);color:var(--ink);-webkit-font-smoothing:antialiased;line-height:1.5;
  background:var(--sand);
  min-height:100vh}
/* Titrage : une seule règle pour tous les titres en Clash Display. */
h1,h2,h3,h4,.bk{font-family:var(--font-display);word-spacing:var(--word-display)}
a{color:inherit;text-decoration:none}
.grad-text{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}
.wrap{max-width:1180px;margin:0 auto;padding:0 var(--gutter);position:relative;z-index:2}
img.logo{width:46px;height:46px;display:block}

/* ── Boutons (pas de contour : élévation + remplissage) ── */
/* `.btn-grad` garde son nom (des centaines de pages le portent) mais c'est
   désormais l'indigo plein de l'app : ni dégradé, ni halo bleu, ni lift.
   Survol et pressé = la teinte s'assombrit (registre web de MOUVEMENT §3). */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);font-weight:600;font-size:15px;padding:12px 20px;border-radius:var(--r-md);border:0;cursor:pointer;font-family:inherit;transition:transform var(--dur-control) var(--ease-out),box-shadow var(--dur-control) var(--ease-out),background var(--dur-control) var(--ease-out);white-space:nowrap}
.btn-grad{background:var(--indigo);color:#fff}
@media (hover:hover){.btn-grad:hover{background:var(--indigo-press)}}
.btn-ghost{background:var(--paper);color:var(--ink);box-shadow:0 0 0 1px #E3EAF3}
@media (hover:hover){.btn-ghost:hover{background:var(--sand-2);color:var(--ink)}}
.btn-lg{font-size:16px;padding:15px 26px;border-radius:var(--r-md)}
/* Page apprenti : le grand CTA est une pilule, comme le bouton de l'app. */
.tier-apprenti .btn-lg{border-radius:var(--r-pill)}

/* ── Nav (pas de bordure : flou + ombre douce) ── */
/* Verre calé sur IosGlass (ios_glass.dart) : teinte du fond à 0,82, flou
   24 px, saturation 1,8, filet de 0,5 px (outlineVariant à 50 %). */
nav.site{position:sticky;top:0;z-index:40;background:rgba(253,252,251,.82);-webkit-backdrop-filter:blur(24px) saturate(1.8);backdrop-filter:blur(24px) saturate(1.8);box-shadow:0 .5px 0 rgba(203,213,225,.5)}
.nav-inner{max-width:1180px;margin:0 auto;padding:15px var(--gutter);display:flex;align-items:center;gap:14px}
.brand{display:flex;align-items:center;gap:12px;font-family:var(--font-brand);font-weight:800;word-spacing:normal;font-size:23px;letter-spacing:-.02em}
.nav-links{margin-left:30px;display:flex;gap:24px}
.nav-links a{color:var(--muted);font-weight:600;font-size:15px;white-space:nowrap}
@media (hover:hover){.nav-links a:hover{color:var(--ink)}}
.nav-right{margin-left:auto;display:flex;align-items:center;gap:16px;flex:none}
.nav-right a.login{font-weight:600;font-size:15px;white-space:nowrap}
/* Zone d'écrasement 980–1180px : on resserre pour tenir sur UNE ligne
   (les libellés ne se coupent plus jamais — nowrap ci-dessus). */
@media(max-width:1180px){
  .nav-links{margin-left:16px;gap:14px}
  .nav-links a{font-size:14px}
  .nav-right{gap:10px}
}
/* Sous 1060px la place manque même resserré : liens d'ancres masqués —
   « Se connecter » + le CTA restent visibles (même comportement qu'avant,
   le seuil passe juste de 980 à 1060 pour éviter la zone d'écrasement). */
@media(max-width:1060px){.nav-links{display:none}}
/* Sous 560px : plus de place pour « Se connecter » + le CTA côte à côte.
   On autorise le retour à la ligne et on masque le lien secondaire pour
   ne garder que l'action principale (évite tout débordement horizontal). */
@media(max-width:560px){
  .nav-inner{flex-wrap:wrap;row-gap:10px}
  .nav-right{margin-left:0;width:100%;justify-content:flex-end}
  .nav-right a.login{display:none}
  /* L'accueil tient sur une ligne : logo, mot-marque, « Se connecter ». */
  .ch-head img.logo{width:44px;height:44px}.ch-head .bn{font-size:26px}
}
.burger{display:none;background:var(--paper);border:0;border-radius:var(--r-md);width:42px;height:38px;font-size:18px;cursor:pointer;box-shadow:0 0 0 1px #E3EAF3}
/* Téléchargement / accès dans la nav (App Store · Google Play · App web) */
.nav-dl{display:flex;align-items:center;gap:8px}
.store-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;font-weight:600;font-size:13.5px;padding:9px;border-radius:var(--r-md);background:var(--paper);color:var(--ink);box-shadow:0 0 0 1px #E3EAF3;transition:transform var(--dur-control) var(--ease-out),background var(--dur-control) var(--ease-out);cursor:pointer}
@media (hover:hover){.store-btn:hover{background:var(--sand-2)}}
.store-btn svg{width:17px;height:17px;flex:none}
.store-btn.web{padding:9px 15px;color:#fff;background:var(--indigo);box-shadow:none}
@media (hover:hover){.store-btn.web:hover{background:var(--indigo-press)}}
@media(max-width:1060px){.store-btn.web .lbl{display:none}.store-btn.web{padding:9px}}

/* ── Chooser (entrée) ── */
.chooser{min-height:100dvh;display:flex;flex-direction:column;max-width:1140px;margin:0 auto;padding:32px var(--gutter) 28px;position:relative;z-index:2}
.ch-head{display:flex;align-items:center;gap:14px}
.ch-head img.logo{width:60px;height:60px}
.ch-head .bn{font-family:var(--font-brand);font-weight:800;font-size:30px;letter-spacing:-.025em}
.ch-head .ch-login{margin-left:auto;color:var(--muted);font-weight:600;font-size:14.5px}
@media (hover:hover){.ch-head .ch-login:hover{color:var(--ink)}}
.ch-intro{margin:auto 0 0;max-width:760px}
.ch-intro .eyebrow{margin-bottom:18px}
.ch-intro h1{font-weight:700;font-size:clamp(38px,5vw,60px);line-height:1.08;letter-spacing:var(--track-display);text-wrap:balance}
.ch-sig{width:128px;height:5px;border-radius:var(--r-pill);background:var(--grad);margin:22px 0}
.ch-intro p{color:var(--muted);font-size:clamp(17px,2vw,20px);max-width:46ch;font-weight:500}
.choice-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin:44px 0 auto}
@media(max-width:1080px){.choice-grid{grid-template-columns:repeat(2,1fr)}}
/* Sélection = vraie carte surélevée (pas de contour) */
.choice{position:relative;display:flex;flex-direction:column;gap:10px;padding:26px 24px 22px;border-radius:var(--r-xl);background:var(--paper);box-shadow:0 0 0 1px #E3EAF3;overflow:hidden}
.choice::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;border-radius:var(--r-xl) var(--r-xl) 0 0;background:var(--pc);opacity:.9}
.choice .c-ic{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;color:#fff;margin-bottom:4px}
.choice .c-ic svg{width:24px;height:24px;fill:#fff}
.choice .tag{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--pc)}
.choice .role{font-family:var(--font-display);font-size:25px;font-weight:600;letter-spacing:0}
.choice p{color:var(--muted);font-size:14.5px;line-height:1.5;flex:1}
.choice .go{display:inline-flex;align-items:center;gap:7px;font-weight:700;font-size:14.5px;color:var(--pc);margin-top:4px}
/* La flèche glisse (transform) au lieu d'ouvrir l'espace (gap = mise en page). */
.choice .go svg{width:16px;height:16px;fill:var(--pc);transition:transform var(--dur-control) var(--ease-enter)}
@media (hover:hover){.choice:hover .go svg{transform:translateX(4px)}}
.ch-foot{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin-top:30px;padding-top:20px;box-shadow:0 -1px 0 var(--hair)}
.ch-foot a,.ch-foot .link-btn{color:var(--faint);font-size:13px;font-weight:600;background:none;border:0;padding:0;cursor:pointer;font-family:inherit}
@media (hover:hover){.ch-foot a:hover,.ch-foot .link-btn:hover{color:var(--ink)}}
.ch-foot .cr{margin-left:auto;color:var(--faint);font-size:12px}

/* ── Sur-titre : label plat (pas de pastille/bouton, pas de point) ── */
.eyebrow{display:inline-block;font-size:14px;font-weight:700;color:var(--blue-text);letter-spacing:.01em;padding:0;background:none}
.eyebrow .dot{display:none}

/* ── Hero ── */
.hero{display:grid;grid-template-columns:1.02fr 1fr;gap:34px;align-items:center;padding:48px 0 64px}
.hero h1{font-weight:700;font-size:clamp(40px,4.8vw,64px);line-height:1.08;letter-spacing:var(--track-display);margin:18px 0 0;text-wrap:balance;max-width:15ch}
.sigline{width:124px;height:5px;border-radius:var(--r-pill);background:var(--grad);margin:24px 0 22px}
.hero p.lead{font-size:19.5px;line-height:1.5;color:var(--muted);max-width:46ch;font-weight:500}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px}
.trust{display:flex;align-items:center;gap:13px;margin-top:30px}
/* La pile de quatre pastilles en dégradé (de faux avatars) est retirée le
   03/10 : un décor qui mime une foule d'utilisateurs. La phrase suffit. */
.trust b{color:var(--ink)}
.trust span{font-size:14.5px;color:var(--faint);font-weight:500}

/* ── Stage / glow / caption ── */
.stage{position:relative;min-height:600px;padding-bottom:34px;display:flex;align-items:center;justify-content:center}
/* L'ombre de contact floutée posée sous la scène est retirée le 03/10 : un
   halo décoratif de plus sous des visuels qui portent déjà leur ombre. */
.stage .cap{position:absolute;bottom:6px;left:50%;transform:translateX(-50%);font-size:12.5px;color:var(--faint);font-weight:600;letter-spacing:.04em;z-index:5}

/* Les cartes flottantes « live » (notifications dessinées, événements
   inventés) sont retirées le 03/10 : les héros montrent le vrai produit. */

/* Le téléphone dessiné en HTML de la page apprenti (violet #1B1630,
   données inventées) est retiré le 03/10 : la scène montre les vraies
   captures de l'app (voir « Les vraies captures », fin de fichier). */

/* ── Panneau produit (mock B2B, sur sable) — élévation, lignes flush ── */
.panel{position:relative;z-index:3;width:430px;max-width:100%;border-radius:var(--r-xl);background:var(--paper);box-shadow:0 0 0 1px #E3EAF3;padding:22px}
.panel .ph{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.panel .ph .dotrow{display:flex;gap:6px}
.panel .ph .dotrow i{width:10px;height:10px;border-radius:50%;background:#CBD5E1;display:block}
.panel .ph .pt{margin-left:6px;font-weight:700;font-size:13.5px;color:var(--muted)}
.panel .pbig{font-family:var(--font-display);font-weight:600;font-size:21px;margin:14px 2px 4px}
.panel .psub{font-size:13px;color:var(--faint);margin-bottom:14px}
.prow{display:flex;align-items:center;gap:12px;padding:13px 14px;border-radius:var(--r-lg);background:var(--sand-2);margin-bottom:10px}
.prow .pp{width:38px;height:38px;border-radius:50%;flex:none}
.prow .pn{font-weight:700;font-size:14px}
.prow .pmeta{font-size:12px;color:var(--faint);margin-top:1px}
.prow .score{margin-left:auto;text-align:right}
.prow .score b{font-family:var(--font-display);font-weight:600;font-size:18px;display:block;line-height:1}
.prow .score b.grad{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}
.prow .score span{font-size:10px;color:var(--faint);letter-spacing:.06em}
.prow .endorse{font-size:10.5px;font-weight:700;color:#0F766E;background:#DDF3EE;padding:3px 8px;border-radius:var(--r-pill);margin-top:4px;display:inline-flex;align-items:center;gap:4px}
.prow .endorse svg{width:11px;height:11px;flex:none;fill:currentColor}
/* Compteurs : chiffres à chasse fixe, sinon le nombre change de largeur à
   chaque image pendant qu'il monte et pousse le « % » qui le suit. La
   durée est lue par le JS : apprenti = jeton compteur, B2B = jeton long. */
.count{font-variant-numeric:tabular-nums;--count-dur:var(--dur-long)}
.tier-apprenti .count{--count-dur:var(--dur-counter)}

/* ── Sections + rythme (bandes teintées au lieu de cartes partout) ── */
section.sec{padding:74px 0;position:relative;z-index:2}
section.sec.tint{background:var(--sand-2)}
.kicker{font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--blue-text)}
.sec h2{font-weight:600;font-size:clamp(30px,4.2vw,48px);line-height:1.14;letter-spacing:var(--track-display);margin:12px 0 0;max-width:20ch;text-wrap:balance}
.ctaband h2{text-wrap:balance}
.sec-lead{color:var(--muted);max-width:54ch;margin-top:18px;font-size:18px}

/* Étapes : éditorial flush (gros numéro, filet d'accent — pas de boîte) */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin-top:48px}
.step{position:relative;padding-top:24px}
.step::before{content:"";position:absolute;top:0;left:0;width:46px;height:4px;border-radius:var(--r-pill);background:var(--grad)}
.step .num{font-family:var(--font-display);font-weight:600;font-size:50px;line-height:1;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.step h3{font-weight:600;font-size:21px;line-height:1.25;margin:12px 0 8px;letter-spacing:0}
.step p{color:var(--muted);font-size:15.5px}

/* Fonctionnalités : éditorial flush (icône + texte, aucune carte) */
.feats{display:grid;grid-template-columns:repeat(4,1fr);gap:38px 30px;margin-top:48px}
.feat{position:relative}
.feat .f-ic{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;margin-bottom:15px;background:color-mix(in srgb,currentColor 12%,var(--sand))}
.feat .f-ic svg{width:23px;height:23px;fill:currentColor}
.feat h4{font-weight:600;font-size:17.5px;line-height:1.3;margin-bottom:7px;letter-spacing:0;color:var(--ink)}
.feat p{color:var(--muted);font-size:15px;line-height:1.6}
.feat-link{background:none;border:0;padding:0;margin-top:6px;display:inline-block;font:inherit;font-size:14.5px;font-weight:700;color:var(--blue-text);cursor:pointer}
.feat-link:focus-visible{text-decoration:underline}
@media (hover:hover){.feat-link:hover{text-decoration:underline}}

/* Pour qui : sélection = carte surélevée + filet d'accent couleur en tête */
.personas{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:48px}
.persona{position:relative;padding:28px 26px;border-radius:var(--r-xl);background:var(--paper);box-shadow:0 0 0 1px #E3EAF3;overflow:hidden}
.persona::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;border-radius:var(--r-xl) var(--r-xl) 0 0;background:var(--pc);opacity:.9}
.persona .p-ic{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;color:#fff;margin-bottom:14px;background:var(--pc)}
.persona .p-ic svg{width:24px;height:24px;fill:#fff}
.persona h3{font-weight:600;font-size:20px;line-height:1.25;letter-spacing:0}
.persona .p-sub{color:var(--muted);font-size:14.5px;margin:5px 0 14px}
.persona ul{list-style:none;display:flex;flex-direction:column;gap:9px}
.persona li{display:flex;gap:9px;font-size:14.5px;color:var(--ink);align-items:flex-start}
.persona li svg{width:18px;height:18px;fill:var(--pc);flex:none;margin-top:2px}

/* Tarifs : sélection = cartes surélevées ; Pionnier réellement mis en avant */
/* `stretch` et non `center` : les trois cartes n'ont pas le même nombre de
   lignes, et centrées elles flottaient à des hauteurs différentes, avec
   trois boutons qui ne s'alignaient sur rien. Étirées, elles partagent la
   hauteur de la plus haute et le `margin-top:auto` du bouton pose les
   trois CTA sur la même ligne. `plans-2` et `plans-4` le faisaient déjà :
   seule la grille à 3 colonnes (page apprenti) restait en arrière. */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:44px;align-items:stretch}
.plans.plans-4{grid-template-columns:repeat(4,1fr);align-items:stretch}
.plans.plans-2{grid-template-columns:repeat(2,1fr);max-width:860px;margin-left:auto;margin-right:auto;align-items:stretch}
@media(max-width:760px){.plans.plans-2{grid-template-columns:1fr}}
@media(max-width:1080px){.plans.plans-4{grid-template-columns:repeat(2,1fr)}}
.plan{position:relative;padding:30px 26px;border-radius:var(--r-xl);background:var(--paper);box-shadow:0 0 0 1px #E3EAF3;display:flex;flex-direction:column;gap:6px}
.plan.featured{box-shadow:var(--sh-halo),var(--sh-2);transform:scale(1.045);z-index:2;padding-top:34px;overflow:hidden}
.plan.featured::before{content:"";position:absolute;inset:0 0 auto 0;height:6px;background:var(--grad)}
.plan .tag{position:absolute;top:14px;right:22px;font-size:11px;font-weight:700;letter-spacing:.08em;color:#fff;background:var(--indigo);padding:5px 11px;border-radius:var(--r-pill)}
.plan .pl-role{font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--blue-text)}
.plan .price{font-family:var(--font-display);font-weight:600;font-size:42px;letter-spacing:var(--track-display);line-height:1.1;font-variant-numeric:tabular-nums}
.plan .price small{font-size:16px;font-weight:600;color:var(--faint)}
.plan .pl-note{font-size:13px;color:var(--faint);margin-bottom:8px}
.plan ul{list-style:none;display:flex;flex-direction:column;gap:10px;margin:auto 0;padding-block:6px 16px}
.plan li{display:flex;gap:9px;font-size:14.5px;align-items:flex-start}
.plan li>span{min-width:0}
.plan li svg{width:18px;height:18px;fill:#0F766E;flex:none;margin-top:2px}
.plan .btn{margin-top:auto;width:100%}
/* Ghost buttons sur surfaces blanches : transparent + pas de shadow (texte CTA, cadre révélé au survol) */
.plan .btn-ghost,.persona .btn-ghost{background:transparent;box-shadow:none}
.pl-foot{text-align:center;color:var(--faint);font-size:13.5px;margin-top:30px}

/* CTA band */
/* Bande sombre en ardoise de l'app (AppColors.black). Sur ce fond, le mot
   accentué prend la moitié claire du dégradé du logo (teal 8,7:1, bleu
   7:1) : l'indigo n'y fait que 2,8:1. */
.ctaband{margin:20px 0 0;padding:66px var(--gutter);border-radius:var(--r-3xl);text-align:center;position:relative;overflow:hidden;background:var(--ink);color:#fff}
.ctaband h2{font-weight:600;font-size:clamp(30px,4.4vw,48px);line-height:1.14;letter-spacing:var(--track-display);position:relative;z-index:2}
.ctaband h2 .grad-text,.ctaband .apk-split .grad-text .wd{background-image:linear-gradient(115deg,var(--teal),var(--blue));-webkit-background-clip:text;background-clip:text;color:transparent}
.ctaband p{color:rgba(255,255,255,.78);font-size:18px;max-width:48ch;margin:16px auto 28px;position:relative;z-index:2}
.ctaband .btn{position:relative;z-index:2}

/* ── Bloc téléchargement de l'app (vraie pub) ── */
.download .dl-card{display:grid;grid-template-columns:1.35fr .85fr;gap:36px;align-items:center;background:var(--paper);border-radius:var(--r-xl);padding:42px 46px;box-shadow:0 0 0 1px #E3EAF3;position:relative;overflow:hidden}
.download .dl-card.no-qr{grid-template-columns:1fr}
.dl-text{position:relative;z-index:2}
.dl-text h2{font-weight:600;font-size:clamp(26px,3.4vw,38px);letter-spacing:var(--track-display);line-height:1.15;margin:12px 0 0;text-wrap:balance;max-width:18ch}
.dl-text p{color:var(--muted);font-size:17px;line-height:1.55;margin:14px 0 24px;max-width:44ch}
.dl-badges{display:flex;gap:12px;flex-wrap:wrap}
.dl-web{display:inline-flex;align-items:center;gap:9px;margin-top:18px;font-weight:700;font-size:15px;color:var(--blue-text)}
.dl-web svg{width:18px;height:18px;fill:currentColor}
.dl-web svg{transition:transform var(--dur-control) var(--ease-enter)}
@media (hover:hover){.dl-web:hover svg{transform:translateX(4px)}}
.store-badge{display:inline-flex;align-items:center;gap:11px;background:#111114;color:#fff;border-radius:var(--r-md);padding:10px 18px;box-shadow:none;transition:transform var(--dur-control) var(--ease-out),background var(--dur-control) var(--ease-out)}
@media (hover:hover){.store-badge:hover{background:#000}}
.store-badge .sb-ic{width:26px;height:26px;flex:none}
.store-badge .sb-txt{display:flex;flex-direction:column;line-height:1.06;text-align:left}
.store-badge .sb-txt small{font-size:10.5px;font-weight:500;opacity:.92}
.store-badge .sb-txt b{font-family:var(--font-display);font-size:18px;font-weight:600;letter-spacing:0}
.store-badge.is-soon{opacity:.55;cursor:default;position:relative}
@media (hover:hover){.store-badge.is-soon:hover{transform:none;background:#111114}}
.store-badge .soon-pill{position:absolute;top:-9px;right:-9px;background:var(--gold);color:#111114;font-size:10px;font-weight:700;letter-spacing:.02em;padding:2px 8px;border-radius:var(--r-pill);box-shadow:none}
.dl-qr{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:12px;justify-self:end}
.dl-qr .qr{width:158px;height:158px;background:#fff;border-radius:var(--r-lg);padding:12px;box-shadow:0 0 0 1px #E3EAF3}
.dl-qr .qr img{width:100%;height:100%;display:block}
.dl-qr span{font-size:13.5px;font-weight:600;color:var(--faint);text-align:center;max-width:18ch}
@media(max-width:820px){.download .dl-card{grid-template-columns:1fr;padding:32px 26px;gap:26px}.dl-qr{flex-direction:row;justify-self:start;align-items:center;gap:16px}.dl-qr span{text-align:left}}

/* Footer (filets fins seulement, pas de cartes) */
footer.site{margin-top:74px;box-shadow:0 -1px 0 var(--hair);padding:44px 0 30px;position:relative;z-index:2}
.foot{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.foot-links{display:flex;gap:22px;flex-wrap:wrap}
.foot-links a{color:var(--muted);font-size:14.5px;font-weight:600}
@media (hover:hover){.foot-links a:hover{color:var(--ink)}}
.foot .cr{margin-left:auto;color:var(--faint);font-size:13px}
.foot-legal{display:flex;flex-wrap:wrap;gap:16px;align-items:center;margin-top:24px;padding-top:20px;box-shadow:0 -1px 0 var(--hair)}
.foot-legal a,.foot-legal .link-btn{color:var(--faint);font-size:12.5px;font-weight:600;background:none;border:0;padding:0;cursor:pointer;font-family:inherit}
@media (hover:hover){.foot-legal a:hover,.foot-legal .link-btn:hover{color:var(--ink)}}
.foot-legal .legal-id{margin-left:auto;color:var(--faint);font-size:11.5px}

/* Icônes et pastilles teintées sur fond clair : les teintes du logo y
   tombent à 2:1 (un trait de 1,5 px s'y délave). Sur ces surfaces, la
   variable locale descend à la teinte « encre » (≥ 3:1, élément
   graphique WCAG 1.4.11) ; le style inline `color:var(--teal)` ou
   `--pc:var(--teal)` la lit sur l'élément même. */
.feat .f-ic,.persona,.chooser .choice,.plan{--teal:var(--teal-ink);--blue:var(--blue-ink);--gold:var(--gold-ink)}

/* ── Icônes : Phosphor Regular (MIT), le jeu d'AppIcons ──
   Tracés pleins extraits de assets/fonts/phosphor/Phosphor-Regular.ttf,
   viewBox 256 : le trait fait 16/256 de la boîte, soit 1,5 px à 24 px,
   le même trait fin que l'app. Ils se peignent par `fill`, jamais par
   `stroke`. Tous portent aria-hidden : le texte voisin dit le sens. */
svg.ph{fill:currentColor;stroke:none}
.btn .ico-arr,.btn .ico-play{width:18px;height:18px;flex:none}
.btn .ico-play{fill:currentColor}
.defi .ic svg{width:18px;height:18px}
/* Chip d'icône feature : duotone (dégradé doux de l'accent + relief) */
.feat .f-ic{background:linear-gradient(145deg,color-mix(in srgb,currentColor 20%,var(--paper)),color-mix(in srgb,currentColor 7%,var(--sand)));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6)}

/* ── Animations ── */
/* Le reveal au scroll vit dans le bloc v3 (§10) : l'ancienne version v2
   (28 px + flou de 7 px) était entièrement surchargée, et son flou aurait
   rejailli au premier retrait du bloc v3. Une seule source. */
/* Le reflet qui balayait le bouton primaire au survol est retiré : il
   animait `left` et faisait un troisième effet de survol (après le lift
   et l'ombre) sur le même bouton. */

/* ── Entrée du hero : UN geste par page (charte du mouvement, 26/09) ──
   Avant : cinq montées de 0,8 s sur la colonne de texte, une scène qui
   entrait en 1 s, puis HUIT boucles qui tournaient pour toujours dans la
   scène apprenti (téléphone qui flotte, trois cartes qui flottent, emblème
   qui pulse, jauge qui se remplit en boucle en animant `width`, ligne qui
   luit, reflet qui balaie en animant `left`). Plus rien ne se lisait.

   Maintenant :
   - le titre entre mot par mot (son seul geste, voir §10 du bloc v3) ;
   - le reste de la colonne apparaît en fondu court, 8 px, 50 ms d'écart ;
   - la scène entre UNE fois : fondu + 16 px en 420 ms (apprenti), fondu
     + 8 px en 300 ms (pages B2B, registre sobre) ;
   - puis le geste signature, une seule fois : la jauge de niveau se
     remplit (apprenti), les scores de match montent (B2B, JS) ;
   - ensuite, plus rien ne bouge. */
@keyframes apkRise{from{opacity:0;transform:translateY(var(--rise,8px))}to{opacity:1;transform:none}}
@keyframes apkGauge{from{transform:translateX(-44.4%)}to{transform:none}}
@media (prefers-reduced-motion: no-preference){
  .hero>div:first-child>:not(h1):not(.sigline){
    animation:apkRise var(--dur-hero) var(--ease-enter) both;
    animation-delay:calc(var(--k,0) * var(--stagger))}
  .hero>div:first-child>p.lead{--k:2}
  .hero>div:first-child>.hero-cta{--k:3}
  .hero>div:first-child>.trust{--k:4}
  .stage{--rise:16px;animation:apkRise var(--dur-hero) var(--ease-enter) calc(2 * var(--stagger)) both}
  .stage:has(.panel){--rise:8px;animation-duration:var(--dur-medium)}
  /* La jauge part de 40 % et s'arrête à 72 % (sa largeur réelle) : on la
     glisse depuis la gauche au lieu d'animer sa largeur. translateX de
     -44,4 % = 0,40 / 0,72 ; le bord gauche reste rogné par la piste
     (overflow:hidden), le bout arrondi reste rond. Elle démarre quand la
     scène a fini d'entrer. */
  .lvl .bar i{animation:apkGauge var(--dur-gauge) var(--ease-enter)
    calc(var(--dur-hero) + 2 * var(--stagger)) both}
}
/* Reduced motion : UNE règle pour tout, pseudo-éléments compris.
   `*{animation:none}` ne visait ni ::before ni ::after : les reflets en
   boucle posés sur des pseudo-éléments continuaient de tourner chez les
   visiteurs qui avaient demandé moins d'animation, et aucune transition
   n'était coupée. Ici, tout finit dans son état final en une image, les
   délais compris. `html.apk-nomotion` porte la même règle : le JS le pose
   quand le réglage change EN COURS de visite (le media query suit tout
   seul, mais les compteurs et la parallaxe, eux, lisent le JS). */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    animation-delay:0s!important;
    transition-duration:.01ms!important;transition-delay:0s!important;
    scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
}
html.apk-nomotion *,html.apk-nomotion *::before,html.apk-nomotion *::after{
  animation-duration:.01ms!important;animation-iteration-count:1!important;
  animation-delay:0s!important;
  transition-duration:.01ms!important;transition-delay:0s!important;
  scroll-behavior:auto!important}
html.apk-nomotion{scroll-behavior:auto}
html.apk-nomotion::view-transition-group(*),html.apk-nomotion::view-transition-old(*),html.apk-nomotion::view-transition-new(*){animation:none!important}

/* chooser — bandeau "le lien" (matching à 3 faces) */
.ch-bridge{margin:32px 0 0;padding:18px 24px;border-radius:var(--r-lg);background:var(--paper);box-shadow:0 0 0 1px #E3EAF3;display:flex;align-items:center;gap:26px;flex-wrap:wrap}
.cb-flow{display:flex;align-items:center;gap:14px;flex:none}
.cb-node{display:flex;flex-direction:column;font-family:var(--font-display);font-weight:600;font-size:15px;letter-spacing:0;color:var(--ink);border-left:3px solid var(--c);padding-left:10px;line-height:1.18}
.cb-node small{font-family:var(--font-body);font-weight:600;font-size:12px;color:var(--faint)}
.cb-arr svg{width:18px;height:18px;fill:var(--faint)}
.cb-score{display:flex;flex-direction:column;align-items:center;line-height:1.05;text-align:center}
.cb-score b{font-family:var(--font-display);font-size:22px;font-weight:600}
.cb-score small{font-size:11px;color:var(--faint);font-weight:600}
.cb-txt{color:var(--muted);font-size:14.5px;line-height:1.5;font-weight:500;flex:1;min-width:240px}

/* responsive */
@media(max-width:980px){
  /* minmax(0,1fr) et non 1fr : une piste `1fr` ne descend pas sous le
     min-content de ses enfants, et le panneau B2B (430 px) élargissait
     toute la colonne au-delà d'un écran de 390 px. Le chapô et le second
     bouton étaient rognés par l'overflow-x:clip, sans barre de défilement
     pour le trahir (relevé le 03/10 sur établissement et entreprise). */
  .hero{grid-template-columns:minmax(0,1fr)}.stage{min-height:540px;margin-top:6px}
  .nav-links{display:none}.steps,.personas,.plans,.choice-grid{grid-template-columns:1fr}
  .feats{grid-template-columns:1fr 1fr}
  .plan.featured{transform:none}
  :root{--gutter:22px}
  .foot .cr,.foot-legal .legal-id{margin-left:0;width:100%}
}
@media(max-width:620px){.feats{grid-template-columns:1fr}}
/* Gouttière de l'app sur téléphone : 16 px. */
@media(max-width:480px){:root{--gutter:16px}.ctaband{padding-left:20px;padding-right:20px}}

/* Accessibilité — skip link (WCAG 2.4.1) : visible au focus clavier uniquement */
.apk-skip{position:absolute;left:-9999px;top:0;z-index:2000;background:var(--ink);color:#fff;padding:10px 16px;border-radius:0 0 var(--r-md) 0;font-weight:700;text-decoration:none}
.apk-skip:focus{left:0;outline:2px solid #fff;outline-offset:-4px}

/* ── Menu déroulant « Pour qui ? » (nav) ── */
.nav-dd{position:relative}
.nav-dd summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:5px;color:var(--muted);font-weight:600;font-size:15px;white-space:nowrap}
.nav-dd summary::-webkit-details-marker{display:none}
@media (hover:hover){.nav-dd summary:hover{color:var(--ink)}}
.nav-dd .chev{font-size:11px;transform:translateY(1px)}
.nav-dd-menu{position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%);background:var(--paper);border-radius:var(--r-lg);box-shadow:0 0 0 1px #E3EAF3;padding:8px;min-width:240px;display:flex;flex-direction:column;z-index:80}
.nav-dd-menu a{padding:10px 14px;border-radius:var(--r-sm);font-weight:600;font-size:14.5px;color:var(--ink)}
@media (hover:hover){.nav-dd-menu a:hover{background:var(--sand-2)}}
/* Ouverture : fondu + 4 px, 200 ms (le menu apparaissait sec). Une
   animation d'entrée plutôt que @starting-style : elle part dès que
   [open] correspond, sans dépendre du « premier style » d'un contenu de
   <details> fermé (géré différemment selon les navigateurs), et elle
   marche partout où @keyframes marche. La fermeture reste instantanée :
   le <details> se referme sans attendre. */
@keyframes apkMenuIn{from{opacity:0;transform:translateX(-50%) translateY(-4px)}}
.nav-dd[open] .nav-dd-menu{animation:apkMenuIn var(--dur-short) var(--ease-enter)}

/* Transition entre pages (même origine) : fondu court, sans glissement.
   Sortie 150 ms, entrée 200 ms. Amélioration progressive : un navigateur
   sans view-transitions entre pages change de page comme avant. Coupée
   par le bloc reduced-motion. */
@view-transition{navigation:auto}
::view-transition-old(root){animation-duration:var(--dur-page-out);animation-timing-function:var(--ease-exit)}
::view-transition-new(root){animation-duration:var(--dur-short);animation-timing-function:var(--ease-enter)}
/* ── Visuels produit (mockups réels) ── */
.ch-intro-row{display:flex;align-items:flex-end;justify-content:space-between;gap:34px;margin:auto 0 0;position:relative}
.ch-intro-row .ch-intro{margin:0}
.ch-visual{height:min(46vh,430px);width:auto;flex:none;filter:drop-shadow(0 8px 24px rgba(15,23,42,.12))}
/* Sous 1000px la ligne passe en colonne : le visuel reste VISIBLE, centré
   sous le texte. C'est le seul aperçu de l'app sur l'accueil, et le
   mobile est précisément l'écran des apprentis. Hauteur contenue pour
   que la grille des 4 profils reste amorcée sous la ligne de flottaison. */
@media(max-width:1000px){
  /* `stretch` (défaut) et pas `center` : le bloc de texte doit garder
     toute la largeur, sinon il rétrécit à son contenu et paraît centré. */
  .ch-intro-row{flex-direction:column;align-items:stretch;gap:18px}
  .ch-intro-row .ch-intro{max-width:none}
  .ch-visual{height:min(34vh,300px);align-self:center}
}
@media(max-width:430px){.ch-visual{height:min(30vh,250px)}}
.dl-visual{height:290px;width:auto;flex:none;justify-self:end;filter:drop-shadow(0 8px 24px rgba(15,23,42,.12))}
@media(max-width:900px){.dl-visual{height:300px;justify-self:center;margin-top:6px}}
@media(max-width:430px){.dl-visual{height:240px}}

/* ============================================================
   v3 — Passe « composition » (26/07)
   Objectif : sortir du gabarit générique (kicker + titre + grille
   de 4 cartes identiques, répété six fois). Trois leviers :
   1. l'en-tête de section devient un vrai bloc éditorial 2 colonnes
      posé sur un filet — le demi-écran droit vide disparaît ;
   2. le dégradé de marque cesse d'être un effet de titre répété et
      redevient une signature (CTA, logo, chips) ;
   3. le motion passe du fondu unique à un enchaînement mot par mot
      + décalage de grille, piloté par --i / --d.
   Tout est écrit APRÈS le socle v2 : ce bloc surcharge, il ne
   remplace pas. Retirer ce bloc rend exactement la v2.
   ============================================================ */
:root{
  --ease-out:cubic-bezier(.16,1,.3,1);
  --sec-y:clamp(48px,5.6vw,86px);
  --rule:rgba(15,23,42,.10);
}

/* ── Accessibilité : anneau de focus visible (WCAG 2.4.7) ──
   Absent de la v2 : la navigation au clavier était invisible. */
/* Anneau = indigo de l'app, 2 px. Le rayon n'est forcé que sur les liens
   de texte : imposé à un bouton, il redessinait la pilule en carré. */
a:focus-visible,button:focus-visible,summary:focus-visible,
input:focus-visible,textarea:focus-visible,select:focus-visible,
details:focus-visible,[tabindex]:not([tabindex="-1"]):focus-visible{
  outline:2px solid var(--indigo);outline-offset:3px}
a:not([class]):focus-visible,summary:focus-visible{border-radius:var(--r-sm)}

/* ── 1. Rythme vertical ── */
section.sec{padding:var(--sec-y) 0}
.hero{padding:clamp(34px,4.6vw,60px) 0 clamp(48px,6vw,84px)}
.hero h1{font-size:clamp(38px,4.6vw,58px);max-width:17ch}

/* ── 2. En-tête de section : masthead éditorial ──
   Le filet court sur toute la largeur, le sur-titre est POSÉ dessus
   (fond opaque qui coupe le filet), le titre tient la colonne large
   et le chapô la colonne droite, aligné sur la ligne de base du
   titre. C'est ce décalage qui distingue une page composée d'une
   pile de blocs centrés. */
.sec-head{
  display:grid;
  grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);
  grid-template-areas:"k k" "h l";
  column-gap:clamp(20px,3.4vw,56px);align-items:end}
.sec-head .kicker{
  grid-area:k;display:block;font-size:12px;letter-spacing:.16em;
  padding-bottom:clamp(15px,2.1vw,23px);margin-bottom:clamp(20px,2.8vw,30px);
  box-shadow:0 1px 0 var(--rule)}
.sec-head h2{grid-area:h;margin:0;max-width:20ch}
.sec-head .sec-lead{grid-area:l;margin:0 0 6px;font-size:16.5px;line-height:1.62;max-width:46ch}
/* Un en-tête sans chapô n'a rien à mettre dans la colonne droite :
   le titre reprend toute la largeur au lieu de laisser un demi-écran vide. */
.sec-head:not(:has(.sec-lead)){grid-template-areas:"k k" "h h"}
.sec-head:not(:has(.sec-lead)) h2{max-width:26ch}
@media(max-width:900px){
  .sec-head{grid-template-columns:1fr;grid-template-areas:"k" "h" "l"}
  .sec-head .sec-lead{margin-top:16px;max-width:58ch}
}

/* ── 3. Accent des titres : le mot reste en dégradé ──
   Le trait sous la ligne de base a été essayé puis ÉCARTÉ par NOVA
   (26/07) : jugé trop scolaire. Le mot accentué garde donc le dégradé
   du logo, comme en v2. Ne pas re-proposer le soulignement.

   Une seule règle s'ajoute : quand le titre est découpé mot par mot, le
   dégradé doit être porté par CHAQUE mot, pas par le span parent. Un mot
   animé porte un `transform`, donc il est peint dans sa propre couche :
   l'écrêtage `background-clip:text` du parent ne le couvre plus et le mot,
   dont la couleur est transparente, disparaîtrait purement et simplement.
   La règle de base (span parent) reste pour le cas sans JS. */
.apk-split .grad-text .wd{
  background-image:var(--grad-text);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent}
/* La ponctuation fusionnée dans un mot accentué reprend la couleur du
   texte : le dégradé s'arrête au mot, pas au point qui le suit. */
.apk-split .grad-text .wd .wd-p{color:var(--ink);-webkit-text-fill-color:var(--ink)}
.ctaband .grad-text .wd .wd-p{color:#fff;-webkit-text-fill-color:#fff}

/* Signature sous le H1 : la barrette a été dépeinte (voir « La barre
   dégradée sous le H1 », fin de fichier) ; son tracé animé tournait
   encore sur un élément invisible. Retiré le 26/09, l'espace reste. */

/* ── 4. Étapes : chiffre en filigrane, filet de colonne ──
   Le « 01 02 03 » bleu vif au-dessus d'une barrette dégradée est le
   marqueur de gabarit le plus reconnaissable. Le chiffre passe en
   filigrane d'encre, la barrette devient le filet de la colonne. */
.steps{gap:clamp(26px,3vw,40px) clamp(26px,3.2vw,48px);margin-top:clamp(38px,4.6vw,58px)}
.step{padding-top:22px;box-shadow:0 -1px 0 var(--rule)}
.step::before{display:none}
.step .num{
  background:none;background-image:none;
  -webkit-background-clip:border-box;background-clip:border-box;
  color:var(--ink);-webkit-text-fill-color:var(--ink);opacity:.14;
  font-size:clamp(30px,3vw,40px);letter-spacing:var(--track-display)}
.step h3{margin-top:8px;font-size:19.5px}
.step p{font-size:15px;max-width:38ch}

/* ── 5. Fonctionnalités : fiche technique, pas mur de pastilles ──
   L'icône sort de son carré arrondi (tell relevé au design review) et
   les colonnes sont réglées par un filet : la grille se lit comme un
   tableau de caractéristiques. */
.feats{gap:clamp(30px,3.6vw,44px) 0;margin-top:clamp(38px,4.6vw,58px)}
.feat{padding:24px clamp(20px,2.4vw,34px) 2px 0;box-shadow:0 -1px 0 var(--rule)}
.feat .f-ic{
  width:auto;height:auto;display:block;margin-bottom:14px;
  background:none;background-image:none;box-shadow:none;border-radius:0}
.feat .f-ic svg{width:28px;height:28px}
.feat h4{font-size:17px}
.feat p{font-size:14.5px;max-width:34ch}

/* ── 6. Cartes : plus de bandeau de couleur en tête ──
   Le liseré 4px pleine largeur au-dessus de chaque carte est le
   deuxième marqueur de gabarit. Le trait qui le remplaçait au survol est
   retiré le 26/09 : sur .persona (des <div> qui ne se cliquent pas) il
   promettait une action qui n'existe pas, et sur .choice le bloc
   d'accueil l'éteignait déjà. Une carte qui ne se clique pas ne réagit
   pas au survol (audit anti-slop du 22/08). */
.choice::before,.persona::before{height:0;opacity:0}
.choice,.persona{padding-top:26px}

/* ── 7. Tarifs : hauteurs égales, mise en avant par l'élévation ──
   `align-items:center` + `scale(1.045)` décalait les trois cartes et
   floutait le texte du plan mis en avant. */
.plans{align-items:stretch}
.plan.featured{transform:none;padding-top:34px}
.plan.featured::before{height:4px;background:var(--grad)}

/* ── 8. Encarts inline dé-bordés (démo / note de bas de section) ── */
.pilot-card{
  max-width:860px;margin:0 auto;text-align:center;
  padding:clamp(30px,5vw,52px) clamp(24px,4vw,40px);border-radius:var(--r-xl);
  background:var(--paper);box-shadow:0 0 0 1px #E3EAF3;position:relative;overflow:hidden}
.pilot-card::before{
  content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--grad)}
.note-band{
  margin-top:26px;padding:24px 28px;border-radius:var(--r-xl);background:var(--paper);
  box-shadow:0 0 0 1px #E3EAF3;display:flex;flex-wrap:wrap;align-items:center;
  gap:18px;justify-content:space-between}

/* ── 9. Nav : état au scroll + jauge de progression ── */
/* Seuls le fond et l'ombre changent. La nav resserrait aussi son padding
   (15 vers 10 px) : sticky dans le flux, elle perdait 10 px de hauteur et
   TOUTE la page sautait de 10 px à chaque passage du seuil de scroll, dans
   les deux sens (saut de mise en page, CLS). Retiré le 26/09 : la hauteur
   de la nav ne bouge plus. */
nav.site{transition:background var(--dur-medium) var(--ease-enter),box-shadow var(--dur-medium) var(--ease-enter)}
nav.site.is-scrolled{
  background:rgba(253,252,251,.88);
  box-shadow:none}
.nav-progress{
  position:absolute;left:0;bottom:0;height:2px;width:100%;
  background:var(--grad);transform:scaleX(var(--p,0));transform-origin:0 50%;
  will-change:transform;pointer-events:none}

/* ── 10. Motion ──
   Entrée courte et décalée : --d porte le rang dans la grille (posé par
   le JS). Le décalage est PLAFONNÉ à 5 rangs (250 ms) : une grille en
   auto-fit n'a pas de limite, et le sixième élément attendait 350 ms.
   Une fois l'élément arrivé, le JS pose .rv-done et le délai retombe à
   zéro : sans ça, un survol qui déplace l'élément héritait du délai de
   cascade et répondait jusqu'à 350 ms plus tard. */
.reveal{
  opacity:0;transform:translateY(8px);
  --rv-delay:calc(min(var(--d,0),5) * var(--stagger));
  transition:opacity var(--dur-long) var(--ease-out) var(--rv-delay),
             transform var(--dur-long) var(--ease-out) var(--rv-delay)}
.reveal.in{opacity:1;transform:none}
.reveal.rv-done{--rv-delay:0s}

/* Titres : entrée mot par mot, SEUL geste du titre (le H1 du hero n'a
   plus de montée d'ensemble en plus). Le JS enveloppe chaque mot dans .wd
   et pose --i ; sans JS (ou en reduced-motion) le titre s'affiche tel
   quel. Plafonné à 8 mots × 30 ms : le H1 d'institution (douze mots)
   mettait 1,1 s à finir d'arriver, il en met 660 ms.
   La ponctuation collée est fusionnée dans le span du mot côté JS : deux
   inline-block voisins peuvent se séparer en fin de ligne, et aucune règle
   CSS ne l'empêche. */
.apk-js .apk-split .wd{
  display:inline-block;opacity:0;transform:translateY(.42em);
  --wd-delay:calc(min(var(--i,0),8) * var(--word-step));
  transition:opacity var(--dur-hero) var(--ease-out) var(--wd-delay),
             transform var(--dur-hero) var(--ease-out) var(--wd-delay)}
.apk-js .apk-split.hd-in .wd{opacity:1;transform:none}

/* Boutons : retour au doigt en moins de 100 ms (MOUVEMENT §3).
   Pages B2B : la surface s'assombrit, sans échelle. Page apprenti : le
   squish de l'app (AppMotion.squish 0,97). */
.btn:active,.store-btn:active,.store-badge:active{transition-duration:var(--dur-micro)}
.btn-grad:active,.store-btn.web:active{background:var(--indigo-press)}
.btn-ghost:active,.store-btn:not(.web):active{background:var(--sand-3)}
.tier-apprenti .btn:active,.tier-apprenti .store-btn:active,.tier-apprenti .store-badge:active{transform:scale(.97)}
.btn{transition:transform var(--dur-control) var(--ease-out),box-shadow var(--dur-control) var(--ease-out),background var(--dur-control) var(--ease-out)}
@media(prefers-reduced-motion:reduce){
  .tier-apprenti .btn:active,.tier-apprenti .store-btn:active,.tier-apprenti .store-badge:active{transform:none;opacity:.9}
}

/* Parallaxe légère du visuel produit, pilotée au scroll par le JS.
   `.stage` n'y est plus : son tilt au survol était mort (voir site-v2.js). */
.dl-visual{will-change:transform}

@media(prefers-reduced-motion:reduce){
  .apk-js .apk-split .wd{opacity:1;transform:none;transition:none}
  .nav-progress{display:none}
}
html.apk-nomotion .apk-split .wd{opacity:1;transform:none;transition:none}
html.apk-nomotion .nav-progress{display:none}

/* ── 11. Accueil (chooser) ──
   La page d'entrée n'avait ni nav ni JS : logo posé en l'air, quatre
   cartes identiques, aucune entrée. On lui donne le même vocabulaire
   éditorial que les pages persona. */
.ch-head{padding-bottom:20px;box-shadow:0 1px 0 var(--rule)}
.ch-intro-row{margin-top:clamp(34px,6vw,72px)}
.choice{padding:26px 24px 22px}
.choice .tag{font-size:11.5px;letter-spacing:.11em}
.choice .role{font-size:23px}
/* La FAQ d'accueil est stylée dans index.html (bloc <style> local,
   chargé après cette feuille) : une seule source pour ce composant. */

@media (prefers-reduced-motion: no-preference){
  /* Le titre a déjà son geste (mot par mot) : il sort de la cascade. Le
     visuel entre en fondu simple, sans la montée d'une seconde qui le
     mettait en concurrence avec la cascade des quatre cartes. */
  .ch-intro>:not(h1):not(.ch-sig){animation:apkRise var(--dur-hero) var(--ease-enter) both}
  .ch-intro>p{animation-delay:calc(2 * var(--stagger))}
  .ch-visual{--rise:0px;animation:apkRise var(--dur-hero) var(--ease-enter) calc(2 * var(--stagger)) both}
}

/* ── 12. Bandes teintées : rythme de lecture ──
   Les sections « fonctionnalités » et « tarifs » passent sur --sand-2.
   Sans elles, six blocs identiques défilaient sur un fond unique et la
   page se lisait comme une liste. Le filet du masthead reste lisible
   sur les deux fonds (il est en encre, pas en blanc). */
section.sec.tint{background:var(--sand-2);box-shadow:0 1px 0 var(--rule),0 -1px 0 var(--rule)}
section.sec.tint .feat,section.sec.tint .step{box-shadow:0 -1px 0 rgba(15,23,42,.13)}

/* ── 13. Débordement horizontal sur mobile ──
   Mesuré en cadre 400px : 481px de contenu sur apprenti, 518px sur
   entreprise → la page glissait latéralement au doigt. Deux causes,
   toutes deux décoratives : le halo `.glow` (cercle de 560px flouté,
   centré sur la scène) et les cartes flottantes aux offsets négatifs.
   `overflow-x:clip` (et non `hidden`) rogne SANS créer de conteneur de
   défilement : la nav `position:sticky` continue de fonctionner. */
html,body{overflow-x:clip}
@media(max-width:760px){
  }

/* ── 14. Filet : le contenu ne dépend jamais du JS pour être VISIBLE ──
   `.reveal` démarre à opacity 0. Sans JS (désactivé, ou site-v2.js qui
   n'arrive pas), la page entière resterait blanche. Deux garde-fous :
   `.apk-js` est posé en <head> avant le premier rendu (donc pas de
   clignotement), et `.apk-nomotion` est posé 2,5 s plus tard si le script
   ne s'est jamais annoncé. */
html:not(.apk-js) .reveal,
html.apk-nomotion .reveal{opacity:1;transform:none;filter:none;transition:none}


/* ============================================================
   v4 — Passe « bibliothèques de référence » (02/08)
   Trois effets sourcés des références design imposées, traduits en
   vanilla (aucune dépendance) :
   1. spotlight au survol des cartes — unlumen « Hover Feature Cards » ;
   2. faisceau qui parcourt le bord du plan mis en avant — lightswind
      « Border Beam » ;
   3. accordéon FAQ animé (styles dans index.html) — unlumen
      « Motion FAQs Accordion ».
   Règles inchangées : un seul écrivain par propriété animée (le
   spotlight n'écrit que --mx/--my, jamais transform). Le reduced-motion
   du bloc v2 visait `*` seul et laissait donc tourner le faisceau, posé
   sur un ::before : corrigé le 26/09 (règle *, *::before, *::after).
   ============================================================ */

/* ── 1. Spotlight au survol : retiré le 26/09 ──
   Il ne restait posé que sur .choice, et le bloc d'accueil (.chooser,
   seule page qui a des .choice) l'éteignait avec `content:none`.
   L'écouteur pointermove du JS tournait donc pour un halo que personne
   ne voyait. Règle et écouteur retirés ensemble. */

/* ── 2. Plan mis en avant : un filet fixe, rien qui tourne ──
   L'anneau lumineux (Border Beam) essayé d'abord = bordure sur une
   carte déjà élevée, exactement le « contour IA » que le langage
   design bannit. Retiré. Le reflet qui l'avait remplacé balayait le
   filet en boucle, toutes les 9 s, pour toujours : une boucle
   décorative sur une page de prix B2B, et elle tournait même en
   reduced-motion (pseudo-élément). Retiré le 26/09 : le plan mis en
   avant garde son filet dégradé de 4 px (bloc v3 §7) et son élévation. */

/* ============================================================
   Aprentika · Établissement partenaire (09/09/2026)
   ============================================================ */

/* Pas de carte. La page en compte déjà beaucoup, et l'encadré essayé
   d'abord (feuille blanche + ombre + aplat sous le logo + liseré
   vertical dégradé) cochait trois marqueurs du filtre anti-slop d'un
   coup : ombre sur ce qui ne flotte pas, décor sans information,
   liseré coloré à gauche. Retiré, remplacé par une hiérarchie
   typographique : un filet, le sur-titre posé dessus, le logo à sa
   taille, une phrase. Le logo est détouré pour de vrai (le matte blanc
   de la source a été retiré) : il se pose sur le sable sans halo, donc
   sans plaque pour le rattraper. */
.prt-sec{padding-top:0}
.prt-kicker{
  display:block;font-size:12px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--blue-text);
  padding-bottom:clamp(14px,1.9vw,20px);margin-bottom:clamp(18px,2.4vw,26px);
  box-shadow:0 1px 0 var(--rule)}
.prt-row{
  display:flex;align-items:center;flex-wrap:wrap;
  gap:clamp(20px,3.2vw,46px)}
.prt-logo{display:block;flex:none}
.prt-logo img{width:clamp(158px,17vw,210px);height:auto;display:block}
.prt-say{
  margin:0;max-width:42ch;font-size:clamp(16px,1.45vw,18px);
  line-height:1.55;font-weight:500;color:var(--ink)}
@media(max-width:640px){
  .prt-logo img{width:170px}
}

/* ============================================================
   Aprentika · Accueil : quatre cartes, sans les marqueurs du gabarit
   NOVA, 10/09 puis 11/09/2026
   ============================================================ */

/* 10/09 : « moins de cartes, les lignes de contour font trop IA ». Le
   choix de profil était passé en colonnes réglées par des filets.
   11/09 : « la première page devrait en avoir, sur étudiant, entreprise,
   établissement et institution ». Moins de cartes ne voulait pas dire
   zéro : ici chaque carte est UNE porte d'entrée, un public et un lien.
   C'est l'endroit du site où la carte porte une information.

   Ce qui revient : la feuille blanche sur le sable, le coin arrondi, UNE
   ombre douce. Ce qui ne revient pas, parce que c'était ça le gabarit :
   le liseré d'accent en tête ou au survol, la tuile d'icône en dégradé,
   le halo qui suit le curseur, les cartes sœurs qu'on éteint, et tout
   filet de contour. La couleur du public tient dans une pastille.

   Portée limitée à `.chooser` : `.choice` n'existe que sur l'accueil. */

.chooser .choice-grid{
  gap:clamp(12px,1.4vw,18px);
  margin-top:clamp(36px,4.8vw,58px)}

.chooser .choice{
  background:var(--paper);box-shadow:0 0 0 1px #E3EAF3;border-radius:var(--r-xl);
  gap:9px;
  padding:clamp(22px,2.2vw,26px) clamp(20px,2vw,24px) clamp(20px,2vw,22px);
  /* L'entrée des quatre cartes EST le geste de la page. Cette règle, plus
     spécifique que .reveal, en écrasait la transition : l'opacité passait
     de 0 à 1 d'un coup, sans cascade, seul le translate glissait. La
     transition reprend donc l'opacité et le délai de cascade. */
  transition:opacity var(--dur-long) var(--ease-out) var(--rv-delay,0s),
             transform var(--dur-long) var(--ease-out) var(--rv-delay,0s),
             box-shadow var(--dur-medium) var(--ease-out)}
/* Arrivée : le survol répond tout de suite, en durée de contrôle. */
.chooser .choice.rv-done{
  transition:transform var(--dur-control) var(--ease-enter),
             box-shadow var(--dur-control) var(--ease-enter)}

.chooser .choice::before,
.chooser .choice::after{content:none}
/* 17/09 : l'icône revient, la tuile non. Le 10/09 avait masqué le bloc
   entier, alors que ce qui datait le gabarit était le carré en dégradé,
   pas le pictogramme. Il revient donc nu : la couleur du public, aucun
   fond, aucun contour, aucune ombre. */
.chooser .choice .c-ic{
  display:block;width:30px;height:30px;border-radius:0;
  background:none;margin-bottom:2px}
.chooser .choice .c-ic svg{
  width:30px;height:30px;fill:var(--pc)}

/* La carte se soulève d'un cran : elle se clique, elle le dit. Les
   sœurs restent allumées. */
@media (hover:hover){.chooser .choice:hover{transform:translateY(-3px);box-shadow:0 0 0 1px #E3EAF3}}
.chooser .choice:focus-visible{outline:2px solid var(--indigo);outline-offset:3px}
/* Appui : la carte cède sous le doigt en 100 ms (même contrat que
   AppPressable côté app : squish 0,98, retour immédiat au relâchement).
   Sur tactile, le survol n'existe pas : c'était le seul retour absent. */
.chooser .choice:active{transform:scale(.97);box-shadow:0 0 0 1px #E3EAF3;transition-duration:var(--dur-micro)}

/* Le public, avec sa couleur en pastille. Le texte reste dans le bleu
   lisible : le turquoise et le bleu clair des publics échouent au
   contraste AA en petit corps, sur l'étiquette comme sur le lien. */
.chooser .choice .tag{display:inline-flex;align-items:center;gap:8px;color:var(--blue-text)}
.chooser .choice .tag::before{
  content:"";width:8px;height:8px;border-radius:50%;background:var(--pc);flex:none}
.chooser .choice .role{font-size:clamp(21px,1.9vw,24px);line-height:1.15}
.chooser .choice p{font-size:15px}
.chooser .choice .c-price{padding-top:14px}
.chooser .choice .go{color:var(--blue-text)}
.chooser .choice .go svg{fill:var(--blue-text)}

@media(prefers-reduced-motion:reduce){
  .chooser .choice:hover{transform:none}
  .chooser .choice:active{transform:none;opacity:.9}
}

/* ============================================================
   Aprentika · Les deux dernières feuilles blanches des pages
   persona, et les notes qu'on ne lisait pas
   NOVA, 10/09/2026
   ============================================================ */

/* Les blocs `.feat` et `.step` étaient déjà sortis de leurs cartes.
   Restaient deux encarts qui gardaient la panoplie complète :

   `.pilot-card` (démo, sur entreprise et établissement) : feuille
   blanche, coin 26px, ombre portée, ET un liseré dégradé de 3px en
   tête. Quatre décors autour de trois lignes et d'un bouton.

   `.note-band` : même feuille, même ombre, coin 20px.

   Les deux redeviennent ce qu'ils sont : un passage de la page, ouvert
   par un filet, aligné à gauche comme tout le reste. Le bouton porte
   déjà l'appel — il n'a pas besoin d'une estrade. */

.pilot-card{
  max-width:none;margin:0;text-align:left;
  padding:clamp(26px,3.4vw,38px) 0 0;border-radius:0;
  background:none;box-shadow:0 -1px 0 var(--rule);overflow:visible}
.pilot-card::before{content:none}
.pilot-card .sec-lead{margin-left:0!important;margin-right:0!important;
  max-width:56ch!important}
.pilot-card .hero-cta{justify-content:flex-start!important}

.note-band{
  margin-top:clamp(22px,2.6vw,30px);padding:clamp(20px,2.4vw,26px) 0 0;
  border-radius:0;background:none;box-shadow:0 -1px 0 var(--rule)}

/* ── Les notes de bas de section ──
   `.pl-foot` était centré, en 13.5px pâle, sur toute la largeur du
   conteneur : jusqu'à 106 mots à lire en ligne de 1080px, dans la
   couleur la plus faible de la palette. C'est la définition d'un texte
   qu'on saute. Or ce qu'il y a dedans n'est pas du décor : c'est le
   fonctionnement du score, et la mécanique de facturation.

   Donc on ne le raccourcit pas — on le rend lisible. À gauche, sur une
   mesure de lecture, ouvert par un filet : une note de bas de section,
   pas un pavé posé au milieu. */
.pl-foot{
  text-align:left;max-width:74ch;
  margin-top:clamp(24px,2.8vw,32px);
  padding-top:clamp(14px,1.8vw,18px);
  box-shadow:0 -1px 0 var(--rule);
  font-size:14px;line-height:1.65}
.pl-foot strong{color:var(--muted)}

@media(max-width:980px){
  .pl-foot{max-width:none}
}

/* ============================================================
   Aprentika · La barre dégradée sous le H1
   NOVA, 10/09/2026
   ============================================================ */

/* « Les lignes en bas des H1 font trop IA. » C'est juste, et c'est le
   dernier marqueur de gabarit de la page d'accueil comme des six pages
   persona : un trait de 128 × 5 px, arrondi aux deux bouts, peint en
   dégradé de marque, posé sous le titre pour « structurer ». Il ne
   sépare rien, il ne dit rien, et il apparaît dans à peu près chaque
   page de site générée depuis trois ans.

   La hiérarchie tient déjà sans lui : le sur-titre en petites capitales
   au-dessus, le titre en Clash Display 48 px, le paragraphe en 20 px. Trois
   tailles, trois graisses, ça suffit à dire l'ordre de lecture.

   On garde l'ESPACE qu'il occupait — c'est lui qui donne au titre sa
   respiration avant le paragraphe — et on retire la peinture. */
.ch-sig,
.sigline{
  width:auto;height:0;border-radius:0;background:none;
  margin-top:clamp(18px,2.2vw,26px);margin-bottom:0}

/* ── Les vraies captures de l'app (page apprenti) ──
   Repris tel quel de la branche design/landing-captures (6a0e13d80, 29/09),
   jamais fusionnée : la scène du héros montrait encore un téléphone
   DESSINÉ en HTML, violet, avec des données inventées (« Inès B. »,
   « Studio Lumen recrute », « Match 94 % »). Trois écrans RÉELS, recadrés
   depuis les captures App Store, posés sur le fond du site : l'Arène au
   premier plan, le fil et la recherche par métier en retrait. Le bas des
   cadres se fond dans la page. Ombres en ardoise (AppElevation). */
.shots{min-height:600px;padding-bottom:36px;isolation:isolate;
  clip-path:inset(-80px -240px 0 -80px)}
/* Un seul fondu, posé PAR-DESSUS les trois téléphones : un masque par
   image laissait voir les téléphones du fond à travers le bas de celui du
   premier plan. */
.shots::after{content:"";position:absolute;left:-24px;right:-240px;bottom:0;width:auto;height:190px;transform:none;border-radius:0;filter:none;z-index:4;
  background:linear-gradient(to bottom,rgba(253,252,251,0),var(--sand) 70%)}
.shot{position:absolute;bottom:30px;display:block}
.shot img{display:block;width:100%;height:auto;
  filter:drop-shadow(0 2px 6px rgba(15,23,42,.05)) drop-shadow(0 8px 24px rgba(15,23,42,.12))}
.shot.c{width:292px;left:50%;transform:translateX(-50%);z-index:3}
.shot.l,.shot.r{width:222px;z-index:2}
.shot.l{left:calc(50% - 262px);transform:rotate(-4deg) translateY(10px);transform-origin:bottom right}
.shot.r{left:calc(50% + 40px);transform:rotate(4deg) translateY(10px);transform-origin:bottom left}
.shot.l img,.shot.r img{filter:drop-shadow(0 4px 12px rgba(15,23,42,.08)) saturate(.92)}
.shots .cap{bottom:10px;z-index:5}
@media(max-width:1180px){.shot.c{width:270px}.shot.l,.shot.r{width:206px}.shot.l{left:calc(50% - 242px)}.shot.r{left:calc(50% + 36px)}}
@media(max-width:980px){.shots{min-height:600px}}
@media(max-width:620px){
  .shots{min-height:calc(60vw * 1.45 + 20px);margin-top:18px}
  .shot.c{width:60vw}
  .shot.l,.shot.r{width:42vw}
  .shot.l{left:calc(50% - 48vw)}.shot.r{left:calc(50% + 6vw)}
}

/* ── Le vrai cockpit (établissement, entreprise, accueil) ──
   Repris des commits 828680274 et 2b4ffa9c9 (design/landing-captures, 29/09,
   jamais fusionnés) et passé à la charte du lot 4 : le panneau dessiné
   (« Marco T. », « 87 % actifs ») laisse la place à une capture RÉELLE de
   l'espace, prise sur le compte de démonstration et annoncée comme telle.
   Fenêtre de navigateur sobre : élévation seule (AppElevation.high), sans
   contour ; la barre se sépare par son fond, pas par un filet. */
.cockpit-stage{min-height:0;min-width:0;display:block;padding:10px 0 0}
.cockpit-win{margin:0;width:min(740px,calc(100% + 140px));border-radius:var(--r-lg);overflow:hidden;
  background:var(--paper);box-shadow:0 0 0 1px #E3EAF3}
.cw-bar{display:flex;align-items:center;gap:14px;height:32px;padding:0 14px;background:var(--sand-3)}
.cw-dots{display:flex;gap:6px}
.cw-dots i{width:9px;height:9px;border-radius:50%;background:#D5D3CE;display:block}
.cw-url{flex:0 1 240px;margin:0 auto;text-align:center;font-size:12px;font-weight:600;color:var(--faint);
  background:var(--paper);border-radius:var(--r-sm);padding:2px 10px;transform:translateX(-24px)}
.cockpit-win img{display:block;width:100%;height:auto}
.cockpit-stage .cap{position:static;display:block;transform:none;margin:14px 0 0;text-align:left;letter-spacing:.02em}
@media(max-width:980px){.cockpit-win{width:100%}}

/* Accueil : les deux surfaces réelles, le cockpit web (espace établissement,
   démo) et l'app des apprentis (l'Arène), le téléphone posé devant la
   fenêtre, le bas fondu dans le fond ivoire. */
.ch-duo{position:relative;width:min(470px,36vw);height:min(46vh,380px);filter:none}
.duo-win{position:absolute;right:0;top:0;width:88%;margin:0}
.duo-phone{position:absolute;left:0;bottom:-30px;width:34%;display:block;z-index:2}
.duo-phone img{display:block;width:100%;height:auto;filter:drop-shadow(0 2px 6px rgba(15,23,42,.05)) drop-shadow(0 8px 24px rgba(15,23,42,.12))}
.ch-duo::after{content:"";position:absolute;left:-40px;right:-40px;bottom:-60px;height:calc(38% + 60px);z-index:3;pointer-events:none;
  background:linear-gradient(to bottom,rgba(253,252,251,0),var(--sand) 72%)}
@media(max-width:1000px){.ch-duo{width:min(520px,100%);height:min(62vw,360px)}}

/* ── « Pour qui » (page apprenti) : trois lignes, plus trois cartes ──
   Trois cartes blanches identiques côte à côte, icône ronde en tête, trois
   coches dessous : le rang de cartes le plus reconnaissable du gabarit
   (audit anti-slop du 03/10). Chaque public devient une LIGNE de la page,
   ouverte par un filet comme .feat et .step : le nom et la phrase à
   gauche, ce qu'on y fait au milieu, la porte d'entrée à droite. */
.personas{grid-template-columns:1fr;gap:0;margin-top:clamp(30px,4vw,48px)}
.persona{display:grid;grid-template-columns:48px minmax(0,.85fr) minmax(0,1fr) minmax(0,14rem);
  grid-template-areas:"ic h ul cta" "ic sub ul cta";column-gap:clamp(18px,2.6vw,40px);
  align-items:start;padding:clamp(22px,2.6vw,30px) 0;border-radius:0;background:none;
  box-shadow:0 -1px 0 var(--rule);overflow:visible}
.persona .p-ic{grid-area:ic;margin:0}
.persona h3{grid-area:h;align-self:end}
.persona .p-sub{grid-area:sub;margin:4px 0 0}
.persona ul{grid-area:ul}
.persona .btn{grid-area:cta;margin-top:0!important;align-self:center;justify-self:end}
@media(max-width:980px){
  .persona{grid-template-columns:48px minmax(0,1fr);grid-template-areas:"ic h" "ic sub" "ul ul" "cta cta";row-gap:0}
  .persona ul{margin-top:16px}
  .persona .btn{justify-self:start;margin-top:14px!important;padding-left:0}
}