/* ==========================================================================
   MonEnseignant — feuille de style du site vitrine (navy/cyan adouci).
   Composants pages service : .step-n / .hero.compact (voir bas de fichier).
   Design system Caplogy
   (navy/cyan) adouci vers un rendu institutionnel, tous publics.
   ========================================================================== */

:root {
  /* Palette « Nuit & Or » — les noms navy/cyan sont conservés mais portent
     désormais une nuit chaude (structure) et un OR (marque, accent dominant). */
  /* Nuit (structure — ex-navy) */
  --navy-950:#0e0f13; --navy-900:#14151a; --navy-800:#1d1f26;
  --navy-700:#2a2d37; --navy-600:#3a3e4b; --navy-500:#4a4f5f;
  /* Or (marque — ex-cyan), marque = --cyan-500 */
  --cyan-700:#a87d1e; --cyan-600:#c2932c; --cyan-500:#e0a83c;
  --cyan-400:#ecbe63; --cyan-300:#f0d08a; --cyan-200:#f7e6bf;
  /* Surfaces & encres */
  --cloud:#ffffff; --paper:#faf8f3; --mist:#f2ece0;
  --ink:#17150f; --ink-soft:#4a4636; --ink-mute:#7a7563;
  --emerald:#e0a83c; --amber:#e0a83c; /* accent = or */
  /* Ombres */
  --shadow-card: 0 1px 2px rgb(11 20 40 / .05), 0 18px 40px -18px rgb(11 20 40 / .22);
  --shadow-card-hover: 0 1px 2px rgb(11 20 40 / .06), 0 26px 54px -18px rgb(224 168 60 / .4);
  --shadow-glow: 0 0 0 1px rgb(224 168 60 / .35), 0 18px 50px -18px rgb(224 168 60 / .45);
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  font-family:"Outfit",system-ui,sans-serif;
  color:var(--ink);
  background:var(--cloud);
  line-height:1.65;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4 { font-family:"Space Grotesk",system-ui,sans-serif; letter-spacing:-.02em; line-height:1.12; color:var(--navy-900); }
a { color:inherit; text-decoration:none; }
img { max-width:100%; display:block; }

.container { width:min(1180px, 92vw); margin-inline:auto; }
.section { padding:5.5rem 0; }
.section-cloud { background:var(--cloud); }
.section-light { background:var(--paper); }
.section-mist  { background:linear-gradient(180deg,#ffffff 0%, var(--mist) 100%); }
.section-navy  { background:var(--navy-900); color:#fff; }
.section-navy h1,.section-navy h2,.section-navy h3 { color:#fff; }

/* Eyebrow ------------------------------------------------------------------ */
.eyebrow {
  display:inline-flex; align-items:center; gap:.7rem;
  font-family:"Space Grotesk",sans-serif; font-size:.72rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.24em; color:var(--cyan-700);
  margin-bottom:1rem;
}
.eyebrow::before {
  content:""; width:2rem; height:2px; border-radius:2px;
  background:linear-gradient(90deg,var(--cyan-500),var(--cyan-300));
  box-shadow:0 0 12px rgb(224 168 60 / .7);
  animation:eb 3.2s ease-in-out infinite;
}
.section-navy .eyebrow { color:var(--cyan-300); }
@keyframes eb { 0%,100%{width:2rem} 50%{width:2.9rem} }

/* Section header ----------------------------------------------------------- */
.section-header { max-width:720px; margin-bottom:3rem; }
.section-header.center { margin-inline:auto; text-align:center; }
.section-header h2 { font-size:clamp(1.9rem,3.6vw,2.9rem); margin-bottom:1rem; }
.section-header p { color:var(--ink-soft); font-size:1.08rem; }
.text-grad { background-image:linear-gradient(120deg,var(--navy-900),var(--cyan-600)); -webkit-background-clip:text; background-clip:text; color:transparent; }

/* Buttons ------------------------------------------------------------------ */
.btn {
  position:relative; overflow:hidden;
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  font-family:"Space Grotesk",sans-serif; font-weight:700; font-size:.98rem; letter-spacing:.005em;
  padding:.92rem 1.7rem; border-radius:999px; cursor:pointer; border:1px solid transparent;
  transition:transform .22s cubic-bezier(.16,1,.3,1), box-shadow .3s ease, background .25s ease, border-color .25s ease, color .2s ease;
  -webkit-tap-highlight-color:transparent;
}
.btn svg { width:18px; height:18px; position:relative; z-index:1; transition:transform .25s ease; }
.btn:hover svg { transform:translateX(3px); }
.btn:active { transform:translateY(0) scale(.99); }
.btn:focus-visible { outline:none; box-shadow:0 0 0 3px rgb(224 168 60 / .45); }

/* Reflet lumineux qui balaye au survol (boutons pleins) */
.btn-primary::before, .btn-cyan::before {
  content:""; position:absolute; top:0; left:-125%; width:55%; height:100%;
  background:linear-gradient(100deg, transparent, rgb(255 255 255 / .5), transparent);
  transform:skewX(-20deg); transition:left .6s cubic-bezier(.16,1,.3,1); pointer-events:none; z-index:0;
}
.btn-primary:hover::before, .btn-cyan:hover::before { left:135%; }

/* Or premium (primaire + cyan) */
.btn-primary, .btn-cyan {
  background:linear-gradient(135deg, #f2cf7b 0%, var(--cyan-500) 52%, #cf9526 100%);
  color:#0e0f13;
  box-shadow:0 1px 0 rgb(255 255 255 / .4) inset, 0 8px 20px -8px rgb(224 168 60 / .5);
}
.btn-primary:hover, .btn-cyan:hover {
  transform:translateY(-2px);
  box-shadow:0 1px 0 rgb(255 255 255 / .55) inset, 0 16px 34px -12px rgb(224 168 60 / .72);
}

/* Secondaire — contour élégant */
.btn-ghost {
  background:rgb(255 255 255 / .55); backdrop-filter:blur(10px);
  border-color:rgb(20 21 26 / .16); color:var(--navy-900);
  box-shadow:0 1px 2px rgb(20 21 26 / .05);
}
.btn-ghost:hover { transform:translateY(-2px); border-color:var(--cyan-500); background:rgb(255 255 255 / .85); box-shadow:0 10px 24px -14px rgb(20 21 26 / .35); }
.section-navy .btn-ghost { background:rgb(255 255 255 / .08); border-color:rgb(255 255 255 / .3); color:#fff; }
.section-navy .btn-ghost:hover { background:rgb(255 255 255 / .16); border-color:var(--cyan-400); }

.btn-lg { padding:1.05rem 2.1rem; font-size:1.05rem; }

/* Nav ---------------------------------------------------------------------- */
.nav {
  position:sticky; top:0; z-index:50;
  background:rgb(255 255 255 / .82); backdrop-filter:blur(16px);
  border-bottom:1px solid rgb(11 20 40 / .07);
}
.nav-inner { display:flex; align-items:center; justify-content:space-between; height:70px; }
.brand { display:flex; align-items:center; }
/* Lockup en une image : le « m » du disque est la première lettre du mot, la
   ligature interdit de séparer symbole et texte. */
/* flex:none est indispensable : en flex item, le lockup se laissait comprimer
   horizontalement (177px → 126px à 390px de large) et les lettres se
   déformaient. Un logo étiré est pire qu'un logo absent. */
.brand-full { height:44px; width:auto; flex:none; }
.nav-links { display:flex; align-items:center; gap:1.15rem; }
/* nowrap obligatoire : sans lui, « Écoles & organismes » et « Devenir formateur »
   se coupaient en deux lignes et faisaient grossir la barre jusqu'au chevauchement. */
.nav-links a, .nav-drop-t { white-space:nowrap; }
.nav-links a { font-size:.95rem; color:var(--ink-soft); font-weight:500; position:relative; padding:.2rem 0; }
.nav-links a:hover { color:var(--navy-900); }
.nav-links a::after { content:""; position:absolute; left:0; bottom:-3px; height:2px; width:0; background:var(--cyan-500); transition:width .3s cubic-bezier(.16,1,.3,1); }
.nav-links a:hover::after { width:100%; }
.nav-actions { display:flex; align-items:center; gap:.7rem; }
/* ⚠️ `/#rejoindre` N'EST PAS une ancre HTML : sketch.js l'intercepte et ouvre le
   formulaire de candidature (voir « UNE ADRESSE À PARTAGER »). Il n'existe donc
   aucun `id="rejoindre"` dans index.html, et c'est normal — ne pas « corriger »
   ce lien vers formateurs.html, ça casse le parcours et l'adresse partageable. */
.nav-join { padding:.68rem 1.3rem; font-size:.88rem; }
.nav-cta { margin-left:0; padding:.68rem 1.3rem; font-size:.88rem; }
.nav-demo { padding:.68rem 1.25rem; font-size:.88rem; }
/* Seule flèche du site à ne pas glisser au survol : l'icône est un calendrier,
   pas un indicateur de direction. */
.nav-demo:hover svg { transform:none; }
.nav-burger { display:none; }
/* Sous 760px les trois boutons ne tiennent plus à côté du logo (mesuré : logo 177
   + actions 446 = 623px pour un conteneur de 699px). « Rejoindre notre équipe »
   est le plus large et le moins urgent commercialement — il part le premier, et
   le recrutement garde son propre parcours. Sans ça, c'est le LOGO qui se faisait
   comprimer. */
@media (max-width:760px) { .nav-join { display:none; } }
/* Connexion n'est jamais masquée : le tiroir burger n'expose que les pages, pas
   les actions — la cacher couperait le seul accès au compte sur mobile. */
@media (max-width:560px) {
  .nav-demo, .nav-cta { padding:.58rem .95rem; font-size:.82rem; }
  .nav-demo svg { display:none; }
  /* Le lockup complet ne tient plus à côté de Démo + Connexion : on passe au
     pictogramme seul. Le swap se fait en CSS (background) plutôt qu'en
     changeant le src, pour ne pas dupliquer une balise <img> dans 12 pages. */
  .nav .brand { width:40px; height:40px; background:url(/mark.svg?v=95) center/contain no-repeat; }
  .nav .brand .brand-full { display:none; }
}

/* Menu global : déroulants services */
.nav-drop { position:relative; }
.nav-drop-t {
  display:inline-flex; align-items:center; gap:.35rem; background:none; border:0; padding:.2rem 0;
  font:inherit; font-size:.95rem; font-weight:500; color:var(--ink-soft); cursor:pointer;
}
.nav-drop-t:hover, .nav-drop.open .nav-drop-t { color:var(--navy-900); }
/* Chevron en SVG : le caractère « ▾ » réduit à .65em se lisait comme un point,
   et son rendu varie selon la police système. */
.nav-drop-t .caret { display:inline-flex; transition:transform .22s ease; }
.nav-drop-t .caret svg { width:11px; height:11px; }
.nav-drop:hover .caret, .nav-drop.open .caret, .nav-drop:focus-within .caret { transform:rotate(180deg); }
.nav-drop::after { content:""; position:absolute; top:100%; left:0; right:0; height:16px; }
.nav-menu {
  position:absolute; top:calc(100% + 15px); left:0; transform:translateY(8px);
  min-width:240px; background:#fff; border:1px solid rgb(11 20 40 / .1); border-radius:16px;
  box-shadow:var(--shadow-card-hover); padding:.5rem; display:grid; gap:.12rem;
  opacity:0; visibility:hidden; transition:opacity .2s ease, transform .2s ease; z-index:60;
}
/* Ouverture pilotée par .open (JS, exclusive) + focus clavier — plus de :hover CSS
   qui gardait les deux menus ouverts dans la zone de recouvrement. */
.nav-drop:focus-within .nav-menu, .nav-drop.open .nav-menu {
  opacity:1; visibility:visible; transform:translateY(0);
}
.nav-drop.open { z-index:61; }
.nav-menu a {
  display:flex; align-items:center; gap:.6rem; padding:.6rem .8rem; border-radius:11px;
  font-size:.92rem; white-space:nowrap; color:var(--ink); font-weight:500;
}
.nav-menu a::after { display:none; }
.nav-menu a:hover { background:var(--cloud); color:var(--cyan-700); }
.nav-menu a .nm-ic { font-size:1.05rem; flex:0 0 auto; }

/* Hero --------------------------------------------------------------------- */
.hero {
  background:linear-gradient(158deg,#ffffff 0%, var(--mist) 34%, var(--cyan-300) 88%, var(--cyan-400) 100%);
  padding:5.5rem 0 6rem;
}
.hero-inner { display:grid; grid-template-columns:1.15fr .85fr; gap:3.5rem; align-items:center; }
.hero h1 { font-size:clamp(2.3rem,5vw,3.6rem); margin-bottom:1.4rem; color:var(--navy-950); }
.hero p.lead { font-size:1.2rem; color:var(--navy-800); max-width:33ch; margin-bottom:2rem; }
.hero-targets { display:flex; flex-wrap:wrap; gap:.6rem; margin-bottom:2.2rem; }
.pill { font-family:"Space Mono",monospace; font-size:.74rem; text-transform:uppercase; letter-spacing:.08em; background:rgb(255 255 255 / .7); border:1px solid rgb(20 21 26 / .12); color:var(--navy-800); padding:.4rem .8rem; border-radius:999px; }
.hero-actions { display:flex; flex-wrap:wrap; gap:.9rem; }
/* Hero visual : carte "services" sobre, pas de dashboard tech */
.hero-card { background:rgb(255 255 255 / .72); backdrop-filter:blur(18px); border:1px solid rgb(255 255 255 / .8); border-radius:2rem; padding:1.8rem; box-shadow:var(--shadow-card); }
.hero-card h4 { font-size:.8rem; text-transform:uppercase; letter-spacing:.16em; color:var(--cyan-700); font-family:"Space Mono",monospace; margin-bottom:1.1rem; }
.hero-card ul { list-style:none; display:grid; gap:.9rem; }
.hero-card li { display:flex; gap:.8rem; align-items:flex-start; font-size:.98rem; color:var(--navy-800); }
.hero-card li .dot { flex:0 0 auto; width:26px; height:26px; border-radius:8px; background:var(--mist); color:var(--cyan-700); display:grid; place-items:center; font-size:.9rem; }

/* Services grid (bandeau) -------------------------------------------------- */
.svc-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1.4rem; }
.card {
  background:var(--cloud); border:1px solid rgb(11 20 40 / .07); border-radius:1.5rem;
  padding:1.8rem; box-shadow:var(--shadow-card); transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.card:hover { transform:translateY(-5px); border-color:rgb(224 168 60 / .6); box-shadow:var(--shadow-card-hover); }
.card .ic { width:48px; height:48px; border-radius:14px; display:grid; place-items:center; font-size:1.5rem; background:linear-gradient(135deg,var(--mist),var(--cyan-200)); margin-bottom:1.1rem; }
.card h3 { font-size:1.18rem; margin-bottom:.5rem; }
.card p { color:var(--ink-soft); font-size:.96rem; }
.card .lnk { display:inline-flex; align-items:center; gap:.35rem; margin-top:1rem; font-family:"Space Grotesk",sans-serif; font-weight:600; font-size:.9rem; color:var(--cyan-700); }
.card .lnk:hover { gap:.6rem; }

/* Service feature (bloc alterné) ------------------------------------------- */
.feature { display:grid; grid-template-columns:1fr 1fr; gap:3.5rem; align-items:center; }
.feature.rev .feature-media { order:-1; }
.feature-media {
  border-radius:1.8rem; min-height:320px; box-shadow:var(--shadow-card);
  background:linear-gradient(150deg,var(--navy-800),var(--cyan-600)); position:relative; overflow:hidden;
  display:grid; place-items:center; color:#fff; text-align:center; padding:2rem;
}
.feature-media .badge { position:absolute; top:1.1rem; left:1.1rem; font-family:"Space Mono",monospace; font-size:.7rem; text-transform:uppercase; letter-spacing:.12em; background:rgb(255 255 255 / .16); padding:.35rem .7rem; border-radius:999px; }
.feature-media .big { font-family:"Space Grotesk",sans-serif; font-size:2.6rem; font-weight:700; }
.feature h2 { font-size:clamp(1.7rem,3.2vw,2.5rem); margin-bottom:1rem; }
.feature .flag { font-family:"Space Mono",monospace; font-size:.74rem; text-transform:uppercase; letter-spacing:.14em; color:var(--amber); margin-bottom:.8rem; display:block; }
.feature p { color:var(--ink-soft); font-size:1.05rem; margin-bottom:1.3rem; }
.pillars { list-style:none; display:grid; gap:.9rem; margin-bottom:1.6rem; }
.pillars li { display:flex; gap:.8rem; align-items:flex-start; }
.pillars .chk { flex:0 0 auto; width:24px; height:24px; border-radius:7px; background:rgb(224 168 60 / .14); color:var(--emerald); display:grid; place-items:center; font-size:.85rem; font-weight:700; }
.pillars strong { color:var(--navy-900); }

/* Pourquoi (stats) --------------------------------------------------------- */
.why-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1.4rem; margin-top:2.5rem; }
.why-item { text-align:center; }
.why-item .num { font-family:"Space Grotesk",sans-serif; font-size:2.6rem; font-weight:700; color:#fff; }
.why-item .lbl { color:var(--cyan-200); font-size:.95rem; }

/* Contact ------------------------------------------------------------------ */
.contact-grid { display:grid; grid-template-columns:1fr .9fr; gap:2.5rem; align-items:start; }
/* `hidden` doit vraiment cacher — y compris ce qui porte un `display` explicite.
   Sans cette règle, `.form { display:grid }` l'emporte sur le `display:none` par
   défaut de l'attribut, et un formulaire marqué `hidden` reste À L'ÉCRAN. C'est
   exactement ce qui s'est produit sur les pages d'authentification : le mot de passe
   restait affiché alors que le socle l'avait remplacé. */
[hidden] { display: none !important; }

.form { display:grid; gap:1rem; }
.field { display:grid; gap:.4rem; }
.field label { font-size:.85rem; font-weight:600; color:var(--navy-800); }
.field input, .field textarea {
  font-family:inherit; font-size:1rem; padding:.85rem 1rem; border-radius:.9rem;
  border:1px solid rgb(11 20 40 / .14); background:#fff; color:var(--ink); resize:vertical;
}
.field input:focus, .field textarea:focus { outline:none; border-color:var(--cyan-500); box-shadow:0 0 0 3px rgb(224 168 60 / .25); }
/* Carte interlocuteur (personal branding Samir) */
.person { background:var(--cloud); border:1px solid rgb(11 20 40 / .07); border-radius:1.5rem; padding:1.8rem; box-shadow:var(--shadow-card); }
.person-head { display:flex; align-items:center; gap:1rem; margin-bottom:1.1rem; }
.person-photo { width:72px; height:72px; border-radius:50%; object-fit:cover; background:linear-gradient(135deg,var(--cyan-400),var(--navy-700)); box-shadow:0 0 0 3px rgb(224 168 60 / .35); display:grid; place-items:center; color:#fff; font-family:"Space Grotesk",sans-serif; font-weight:700; font-size:1.4rem; }
.person-head h3 { font-size:1.2rem; margin-bottom:.15rem; }
.person-role { font-family:"Space Mono",monospace; font-size:.72rem; text-transform:uppercase; letter-spacing:.1em; color:var(--cyan-700); }
.person p { color:var(--ink-soft); font-size:.96rem; margin-bottom:1rem; }
.person .contact-line { display:flex; align-items:center; gap:.5rem; font-size:.93rem; color:var(--navy-800); margin-bottom:.5rem; }

/* Footer ------------------------------------------------------------------- */
.footer { background:var(--navy-950); color:#c7d3e8; padding:4rem 0 2rem; }
.footer-top { display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:2rem; margin-bottom:2.5rem; }
.footer .brand { margin-bottom:1rem; }
.footer-blurb { font-size:.92rem; max-width:32ch; color:#9fb0cc; }
.footer h4 { color:#fff; font-size:.78rem; text-transform:uppercase; letter-spacing:.14em; margin-bottom:1rem; font-family:"Space Mono",monospace; }
.footer-col a { display:block; font-size:.93rem; color:#a9b7d2; padding:.28rem 0; }
.footer-col a:hover { color:var(--cyan-300); }
.footer-bottom { border-top:1px solid rgb(255 255 255 / .1); padding-top:1.5rem; display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem; font-size:.85rem; color:#8194b4; }
.footer-legal { display:flex; gap:1.2rem; }

/* Sketch banner (mention maquette) ---------------------------------------- */
.sketch-flag { background:var(--amber); color:var(--navy-950); text-align:center; font-family:"Space Mono",monospace; font-size:.75rem; letter-spacing:.08em; padding:.4rem; text-transform:uppercase; }

/* Responsive --------------------------------------------------------------- */
@media (max-width:960px) {
  .hero-inner, .feature, .feature.rev .feature-media, .contact-grid { grid-template-columns:1fr; }
  .feature.rev .feature-media { order:0; }
  .svc-grid, .why-grid { grid-template-columns:repeat(2,1fr); }
  .footer-top { grid-template-columns:1fr 1fr; }
  /* Le basculement de la nav vers le burger a son propre point de rupture
     (1080px, plus bas dans ce fichier) : la barre manque de place bien avant
     les grilles de contenu. */
}
@media (max-width:560px) {
  .svc-grid, .why-grid, .footer-top { grid-template-columns:1fr; }
  .section { padding:3.5rem 0; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation:none !important; scroll-behavior:auto; }
}

/* Photos (repli sur dégradé si l'image manque) ----------------------------- */
.feature-media.photo { background-size:cover; background-position:center; }
.feature-media > * { position:relative; z-index:1; }
.feature-media.photo::before {
  content:""; position:absolute; inset:0; z-index:0;
  background:linear-gradient(160deg, rgb(20 21 26 / .12), rgb(20 21 26 / .04));
}

/* Galerie événements */
.gallery { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-top:2rem; }
.shot {
  aspect-ratio:4/3; border-radius:1.2rem; position:relative; overflow:hidden;
  background:linear-gradient(150deg,var(--navy-800),var(--cyan-600)); background-size:cover; background-position:center;
  box-shadow:var(--shadow-card);
}
.shot span {
  position:absolute; bottom:.6rem; left:.6rem;
  font-family:"Space Mono",monospace; font-size:.66rem; text-transform:uppercase; letter-spacing:.1em;
  color:#fff; background:rgb(11 20 40 / .5); padding:.3rem .6rem; border-radius:999px;
}

/* Bloc coordonnées (contact, sans personal branding) */
.info-card { background:var(--cloud); border:1px solid rgb(11 20 40 / .07); border-radius:1.5rem; padding:1.8rem; box-shadow:var(--shadow-card); }
.info-card h3 { font-size:1.1rem; margin-bottom:.8rem; }
.info-card .contact-line { display:flex; align-items:center; gap:.5rem; font-size:.95rem; color:var(--navy-800); margin-bottom:.6rem; }
.info-card .lnk { display:inline-flex; align-items:center; gap:.35rem; margin-top:.6rem; font-family:"Space Grotesk",sans-serif; font-weight:600; font-size:.92rem; color:var(--cyan-700); }

/* À propos — portrait Samir */
.about-grid { display:grid; grid-template-columns:220px 1fr; gap:2.5rem; align-items:center; }
.portrait {
  width:220px; height:280px; border-radius:1.6rem; overflow:hidden;
  background:linear-gradient(135deg,var(--cyan-400),var(--navy-700)); background-size:cover; background-position:center top;
  box-shadow:var(--shadow-card); display:grid; place-items:center;
  color:#fff; font-family:"Space Grotesk",sans-serif; font-weight:700; font-size:3rem;
}
.about-grid .person-role { display:inline-block; margin:.3rem 0 1rem; }
.about-grid p { color:var(--ink-soft); font-size:1.05rem; margin-bottom:1rem; }

@media (max-width:960px) { .gallery { grid-template-columns:1fr 1fr; } .about-grid { grid-template-columns:1fr; justify-items:start; } }
@media (max-width:560px) { .gallery { grid-template-columns:1fr; } }

/* ==== Animations (progressive enhancement, coupées si reduced-motion) ===== */
@media (prefers-reduced-motion: no-preference) {
  .has-js .section-header,
  .has-js .card,
  .has-js .feature-copy,
  .has-js .feature-media,
  .has-js .lab-card,
  .has-js .lms-card,
  .has-js .shot,
  .has-js .why-item,
  .has-js .hero-card,
  .has-js .about-banner {
    opacity:0; transform:translateY(26px);
    transition:opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1);
  }
  .has-js .in { opacity:1 !important; transform:none !important; }
  .has-js .stagger > * { transition-delay:calc(var(--i,0) * .07s); }
}
.nav { transition:box-shadow .3s ease, background .3s ease; }
.nav.scrolled { box-shadow:0 10px 30px -20px rgb(11 20 40 / .5); background:rgb(255 255 255 / .92); }

/* Carte lab animée (virtualisation) */
.lab-card { background:#0e0f13; border-radius:1.6rem; overflow:hidden; box-shadow:var(--shadow-card); border:1px solid rgb(224 168 60 / .28); }
.lab-top { display:flex; align-items:center; gap:.45rem; padding:.75rem 1rem; background:rgb(255 255 255 / .04); border-bottom:1px solid rgb(255 255 255 / .07); }
.lab-dot { width:11px; height:11px; border-radius:50%; }
.lab-title { margin-left:.5rem; font-family:"Space Mono",monospace; font-size:.7rem; color:#8ea3c8; letter-spacing:.03em; }
.lab-live { margin-left:auto; display:inline-flex; align-items:center; gap:.4rem; font-family:"Space Mono",monospace; font-size:.66rem; color:var(--cyan-300); text-transform:uppercase; letter-spacing:.08em; }
.pulse-dot { width:8px; height:8px; border-radius:50%; background:var(--emerald); box-shadow:0 0 0 0 rgb(224 168 60 / .6); animation:pulse 1.8s infinite; }
@keyframes pulse { 0%{box-shadow:0 0 0 0 rgb(224 168 60 / .55)} 70%{box-shadow:0 0 0 8px rgb(224 168 60 / 0)} 100%{box-shadow:0 0 0 0 rgb(224 168 60 / 0)} }
.term { font-family:"Space Mono",monospace; font-size:.8rem; line-height:1.75; padding:1.1rem 1.2rem; color:#cdd8ee; min-height:172px; }
.term .l { display:block; white-space:pre-wrap; }
.term .g { color:#ecc978; } .term .c { color:#f0d08a; } .term .m { color:#8a8474; } .term .y { color:#e0a83c; }
.cursor { display:inline-block; width:8px; height:1.02em; background:var(--cyan-400); vertical-align:-2px; margin-left:1px; animation:blink 1s step-end infinite; }
@keyframes blink { 50%{opacity:0} }
.vm-tiles { display:grid; grid-template-columns:repeat(3,1fr); gap:.5rem; padding:0 1.2rem 1.2rem; }
.vm { border:1px solid rgb(255 255 255 / .08); border-radius:.7rem; padding:.55rem .4rem; text-align:center; font-family:"Space Mono",monospace; font-size:.6rem; color:#6b7a95; background:rgb(255 255 255 / .02); transition:all .45s cubic-bezier(.16,1,.3,1); }
.vm .ic { font-size:1.05rem; display:block; margin-bottom:.15rem; filter:grayscale(1) opacity(.5); transition:filter .45s; }
.vm.on { color:var(--cyan-300); border-color:rgb(224 168 60 / .55); background:rgb(224 168 60 / .06); box-shadow:0 0 0 1px rgb(224 168 60 / .3), 0 10px 22px -12px rgb(224 168 60 / .6); }
.vm.on .ic { filter:none; }

/* Carte LMS animée (e-learning) */
.lms-card { background:var(--cloud); border:1px solid rgb(11 20 40 / .08); border-radius:1.6rem; padding:1.6rem; box-shadow:var(--shadow-card); }
.lms-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:1.2rem; font-family:"Space Grotesk",sans-serif; font-weight:600; color:var(--navy-900); }
.lms-tag { font-family:"Space Mono",monospace; font-size:.64rem; text-transform:uppercase; letter-spacing:.1em; background:var(--mist); color:var(--cyan-700); padding:.3rem .6rem; border-radius:999px; }
.lms-row { display:flex; justify-content:space-between; font-size:.86rem; color:var(--ink-soft); margin-bottom:.35rem; }
.lms-pct { font-family:"Space Mono",monospace; color:var(--cyan-700); }
.bar { height:8px; border-radius:999px; background:var(--mist); overflow:hidden; margin-bottom:1.1rem; }
.bar i { display:block; height:100%; width:0; border-radius:999px; background:linear-gradient(90deg,var(--cyan-500),var(--navy-600)); transition:width 1.1s cubic-bezier(.16,1,.3,1); }
.in .bar i { width:var(--w); }

/* À propos — crédibilité + bannière conférence */
.creds { display:flex; flex-wrap:wrap; gap:.5rem; margin:.5rem 0 1.1rem; }
.cred { font-family:"Space Mono",monospace; font-size:.66rem; text-transform:uppercase; letter-spacing:.07em; background:var(--mist); color:var(--cyan-700); padding:.35rem .7rem; border-radius:999px; border:1px solid rgb(224 168 60 / .25); }
.about-banner { margin-top:2.5rem; border-radius:1.6rem; overflow:hidden; box-shadow:var(--shadow-card); position:relative; aspect-ratio:21/7; background-size:cover; background-position:center 30%; }
.about-banner::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgb(13 27 58 / .85), rgb(13 27 58 / .1)); }
.about-banner .cap { position:absolute; z-index:1; left:1.6rem; bottom:1.3rem; color:#fff; max-width:60%; }
.about-banner .cap .flag { color:var(--cyan-300); }
.about-banner .cap h3 { color:#fff; font-size:1.3rem; }
@media (max-width:640px){ .about-banner{ aspect-ratio:3/2 } .about-banner .cap{ max-width:90% } }

/* ==== Pages service ======================================================= */
.hero.compact { padding:4rem 0 4.2rem; }
.hero.compact h1 { max-width:20ch; }
.hero.compact .lead { max-width:52ch; }
.step .step-n { width:38px; height:38px; border-radius:11px; background:var(--navy-900); color:#fff; display:grid; place-items:center; font-family:"Space Grotesk",sans-serif; font-weight:700; margin-bottom:.9rem; }
.step h3 { font-size:1.1rem; margin-bottom:.4rem; }
.step p { color:var(--ink-soft); font-size:.93rem; }
.incl { display:grid; grid-template-columns:1fr 1fr; gap:.7rem 1.6rem; }
.incl li { list-style:none; display:flex; gap:.7rem; align-items:flex-start; color:var(--ink-soft); }
.incl .chk { flex:0 0 auto; width:22px; height:22px; border-radius:6px; background:rgb(224 168 60 / .14); color:var(--emerald); display:grid; place-items:center; font-size:.78rem; font-weight:700; }
.audience { display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; }
.cta-band { text-align:center; }
.cta-band h2 { margin-bottom:1rem; }
@media (max-width:760px){ .incl { grid-template-columns:1fr; } .audience { grid-template-columns:1fr; } }
/* reveal aussi pour .step (page service) */
@media (prefers-reduced-motion: no-preference) {
  .has-js .step { opacity:0; transform:translateY(26px); transition:opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1); }
}

/* ==== Accueil deux audiences (écoles / élèves) ============================ */
.home-hero { padding:2.4rem 0 2.8rem; }
.home-hero h1 { margin-bottom:1rem; }
.home-hero .domains { margin:1.1rem 0 0; }
.doors { display:grid; grid-template-columns:1fr; gap:1.4rem; margin-top:1.5rem; text-align:left; }
.door { display:flex; flex-direction:column; }
.door .door-tag { font-family:"Space Mono",monospace; font-size:.68rem; text-transform:uppercase; letter-spacing:.12em; color:var(--cyan-700); margin-bottom:.6rem; display:flex; align-items:center; gap:.5rem; }
.door h3 { font-size:1.35rem; margin-bottom:.5rem; }
.door p { color:var(--ink-soft); margin-bottom:1.3rem; flex:1; }
.domains { display:flex; flex-wrap:wrap; gap:.55rem; }
.domain { font-family:"Space Mono",monospace; font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; background:var(--mist); border:1px solid rgb(224 168 60 / .3); color:var(--ink-soft); padding:.4rem .8rem; border-radius:999px; }
.aud-head { display:flex; align-items:center; gap:.9rem; margin-bottom:.4rem; }
.aud-badge { flex:0 0 auto; width:52px; height:52px; border-radius:15px; display:grid; place-items:center; font-size:1.6rem; background:linear-gradient(135deg,var(--mist),var(--cyan-200)); }
@media (max-width:760px){ .doors { grid-template-columns:1fr; } }

/* ==== Pages auth (connexion / inscription / reset) ======================== */
.auth-wrap { min-height:calc(100vh - 70px); display:grid; place-items:center; padding:3rem 0;
  background:linear-gradient(158deg,#ffffff 0%, var(--mist) 55%, var(--cyan-200) 100%); }
.auth-card { width:min(440px, 92vw); background:var(--cloud); border:1px solid rgb(11 20 40 / .08); border-radius:1.6rem; box-shadow:var(--shadow-card); padding:2.4rem; }
.auth-card h2 { font-size:1.7rem; text-align:center; margin-bottom:.3rem; }
.auth-card .sub { text-align:center; color:var(--ink-soft); margin-bottom:1.6rem; }
.auth-status { font-size:.9rem; margin-top:.9rem; text-align:center; min-height:1.2em; }
.auth-status.error { color:#c0392b; }
.auth-status.success { color:var(--cyan-700); }
.auth-alt { text-align:center; font-size:.92rem; color:var(--ink-soft); margin-top:1rem; }
.auth-alt a { color:var(--cyan-700); font-weight:600; }
.field-row { display:grid; grid-template-columns:1fr 1fr; gap:.8rem; }
.role-picker { display:grid; grid-template-columns:1fr 1fr 1fr; gap:.6rem; margin-bottom:1.3rem; }
.role-opt { border:1px solid rgb(11 20 40 / .14); border-radius:.9rem; padding:.8rem .5rem; text-align:center; font-size:.8rem; font-weight:600; color:var(--ink-soft); cursor:pointer; transition:border-color .2s, background .2s, box-shadow .2s; }
.role-opt .ic { display:block; font-size:1.3rem; margin-bottom:.3rem; }
.role-opt:hover { border-color:var(--cyan-500); }
.role-opt.active { border-color:var(--cyan-500); background:var(--mist); color:var(--navy-900); box-shadow:0 0 0 1px var(--cyan-500) inset; }
@media (max-width:420px){ .role-picker, .field-row { grid-template-columns:1fr; } }

/* ==== Accueil : split services (clients / élèves) ======================== */
.split-services { display:grid; grid-template-columns:1fr 1fr; gap:2.4rem; align-items:start; }
.svc-col .col-head { margin-bottom:1.3rem; }
.svc-col .col-head h2 { font-size:clamp(1.4rem,2.4vw,1.7rem); margin-bottom:.4rem; }
.svc-col .col-head p { color:var(--ink-soft); font-size:.98rem; }
.mod-list { display:grid; gap:.85rem; }
.mod { display:flex; align-items:center; gap:1rem; text-align:left; padding:1.1rem 1.3rem; }
.mod .ic { width:46px; height:46px; flex:0 0 auto; margin:0; border-radius:13px; font-size:1.3rem; }
.mod h3 { font-size:1.05rem; margin-bottom:.1rem; }
.mod p { font-size:.9rem; color:var(--ink-soft); }
.mod .mod-arrow { margin-left:auto; color:var(--cyan-700); font-weight:700; font-family:"Space Grotesk",sans-serif; font-size:1.15rem; transition:transform .25s ease; }
.mod:hover .mod-arrow { transform:translateX(4px); }
.mod { cursor:pointer; }
.mod.active { border-color:var(--cyan-500); box-shadow:0 0 0 1.5px var(--cyan-500), var(--shadow-card); background:linear-gradient(180deg,#fff, #fffdf6); }
.mod.active .ic { background:var(--cyan-500); color:var(--navy-900); }
.mod.active .mod-arrow { color:var(--cyan-600); transform:translateX(4px); }
@media (max-width:860px){ .split-services { grid-template-columns:1fr; gap:2.6rem; } }

/* Panneau service dynamique (bloc noir) */
#svc-panel { padding-top:3.2rem; padding-bottom:3.2rem; }
.svc-detail { display:grid; grid-template-columns:1.6fr .9fr; gap:2.6rem; align-items:center; min-height:210px; }
.svc-detail.anim { animation:sdIn .42s cubic-bezier(.22,.61,.36,1); }
@keyframes sdIn { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:none; } }
.sd-eyebrow { display:block; font-family:"Space Mono",monospace; font-size:.68rem; text-transform:uppercase; letter-spacing:.18em; color:var(--cyan-300); margin-bottom:.7rem; }
.svc-detail h2 { color:#fff; font-size:clamp(1.5rem,3vw,2.15rem); margin-bottom:.7rem; }
.sd-main > p { color:var(--cyan-200); font-size:1.05rem; line-height:1.55; margin-bottom:1.2rem; max-width:54ch; }
.sd-points { list-style:none; display:grid; gap:.55rem; margin:0 0 1.6rem; padding:0; }
.sd-points li { display:flex; gap:.65rem; align-items:flex-start; color:#e8ecf5; font-size:.96rem; }
.sd-points li span { color:var(--cyan-400); font-weight:700; flex:0 0 auto; }
.sd-visual { display:grid; place-items:center; }
.sd-visual span { font-size:3.6rem; width:132px; height:132px; display:grid; place-items:center; border-radius:2rem; background:rgb(255 255 255 / .05); border:1px solid rgb(224 168 60 / .35); }
@media (max-width:800px){ .svc-detail { grid-template-columns:1fr; } .sd-visual { display:none; } }

/* Bande logos certifications */
.cert-band { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:1.2rem; }
.cert-band img { height:52px; width:auto; max-width:150px; object-fit:contain; background:#fff; border:1px solid rgb(11 20 40 / .07); border-radius:14px; padding:.65rem 1rem; box-shadow:var(--shadow-card); }

/* Catalogue formations pro (page de vente) */
.prod-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:1.3rem; }
.prod { padding:0; overflow:hidden; display:flex; flex-direction:column; }
.prod .thumb { aspect-ratio:16/10; background:#f5f5f8; display:grid; place-items:center; position:relative; overflow:hidden; }
.prod .thumb img { max-width:76%; max-height:70%; object-fit:contain; }
.prod .thumb.thumb-dark { background:linear-gradient(150deg,var(--navy-800),var(--navy-900)); }
.prod .promo { position:absolute; top:.6rem; left:.6rem; font-family:"Space Mono",monospace; font-size:.62rem; text-transform:uppercase; letter-spacing:.06em; background:var(--cyan-500); color:var(--navy-950); padding:.25rem .55rem; border-radius:999px; font-weight:700; }
.prod .body { padding:1.1rem 1.2rem; display:flex; flex-direction:column; flex:1; }
.prod .org { font-family:"Space Mono",monospace; font-size:.64rem; text-transform:uppercase; letter-spacing:.08em; color:var(--cyan-700); }
.prod h3 { font-size:1rem; margin:.25rem 0 .6rem; line-height:1.25; }
.prod .price { margin-top:auto; font-family:"Space Grotesk",sans-serif; font-weight:700; color:var(--navy-900); font-size:1.2rem; }
.prod .price .old { color:var(--ink-mute); text-decoration:line-through; font-weight:400; font-size:.85rem; margin-left:.4rem; }
.prod .cpf { display:inline-block; margin:.5rem 0 0; font-size:.68rem; background:rgb(224 168 60 / .16); color:var(--cyan-700); padding:.2rem .55rem; border-radius:999px; }
.prod .btn { margin-top:.9rem; width:100%; }

/* Menu mobile (burger) — 1200px, et non 960 comme avant. Entre les deux, la
   barre tenait « techniquement » mais bord à bord : logo collé aux liens, liens
   collés aux boutons. C'est ce qui donnait l'impression de désordre.
   Mesuré au navigateur : logo 177 + menu 438 + actions 446 = 1061px, il faut
   donc ≥1200px pour garder ~20px de marge. Si un bouton est ajouté ou retiré
   des actions, ce seuil doit être RE-MESURÉ, pas deviné. */
@media (max-width:1200px) {
  .nav-links { display:none; }
  .nav-burger { display:inline-grid; place-items:center; width:42px; height:42px; border-radius:12px; border:1px solid rgb(11 20 40 / .14); background:#fff; }
  .nav.nav-open .nav-links {
    display:flex; position:absolute; top:70px; left:0; right:0; z-index:49;
    flex-direction:column; align-items:stretch; gap:0;
    /* Opaque et SANS backdrop-filter, volontairement : `.nav` porte déjà un
       `backdrop-filter`, et un second imbriqué faisait recadrer le fond flouté
       sur les 71px de la barre — le contenu de la page traversait alors le bas
       du tiroir. Un panneau de menu n'a de toute façon rien à laisser voir. */
    background:#fff;
    padding:.4rem 6vw 1.1rem; border-bottom:1px solid rgb(11 20 40 / .08);
    box-shadow:var(--shadow-card);
  }
  .nav-links a { padding:.9rem .2rem; font-size:1.05rem; border-bottom:1px solid rgb(11 20 40 / .06); }
  .nav-links a::after { display:none; }
  /* En tiroir vertical la place ne manque plus : on laisse les libellés respirer. */
  .nav-links a, .nav-drop-t { white-space:normal; }
  .nav-burger { cursor:pointer; font-size:1.2rem; }
  /* Déroulants en accordéon sur mobile */
  .nav-drop { width:100%; border-bottom:1px solid rgb(11 20 40 / .06); }
  .nav-drop-t { width:100%; justify-content:space-between; padding:.9rem .2rem; font-size:1.05rem; }
  .nav-menu {
    position:static; transform:none; min-width:0; box-shadow:none; border:0; border-radius:0;
    padding:0 0 .5rem .6rem; display:none; opacity:1; visibility:visible;
  }
  .nav-drop.open .nav-menu { display:grid; }
  .nav-menu a { border-bottom:0; padding:.7rem .4rem; }
}

/* Aperçu email (démo page Alternance) */
.mail-demo { background:#fff; border:1px solid rgb(11 20 40 / .08); border-radius:1.5rem; box-shadow:var(--shadow-card); overflow:hidden; }
.mail-head { background:var(--navy-900); color:#fff; padding:1.25rem 1.4rem; }
.mail-head .brand { font-family:"Space Grotesk",sans-serif; font-weight:700; font-size:1.12rem; letter-spacing:-.01em; }
.mail-head .brand span { color:var(--cyan-500); }
.mail-head .sub { font-size:.78rem; opacity:.75; margin-top:.35rem; }
.mail-body { padding:1rem 1.1rem; display:grid; gap:.75rem; }
.mail-offer { display:block; border:1px solid rgb(11 20 40 / .08); border-left:4px solid var(--cyan-500); border-radius:.75rem; padding:.85rem 1rem; transition:transform .2s ease, box-shadow .2s ease; }
.mail-offer:hover { transform:translateY(-2px); box-shadow:var(--shadow-card); }
.mail-offer .t { font-family:"Space Grotesk",sans-serif; font-weight:600; color:var(--navy-900); font-size:.96rem; line-height:1.25; }
.mail-offer .m { font-size:.82rem; color:var(--ink-soft); margin-top:.28rem; }
.mail-offer .src { background:#faf3e3; color:#a87d1e; padding:.12rem .5rem; border-radius:999px; font-size:.66rem; margin-left:.35rem; white-space:nowrap; }
.mail-offer .see { display:inline-block; margin-top:.5rem; font-size:.78rem; color:#a87d1e; font-weight:600; }
.mail-foot { text-align:center; font-size:.72rem; color:var(--ink-mute); padding:.3rem 1rem 1rem; }
.mail-tag { position:absolute; top:-.7rem; left:1.2rem; z-index:1; font-family:"Space Mono",monospace; font-size:.64rem; text-transform:uppercase; letter-spacing:.1em; background:var(--cyan-500); color:var(--navy-950); padding:.3rem .7rem; border-radius:999px; font-weight:700; box-shadow:var(--shadow-card); }

/* ============================================================
   REFONTE VIVANTE — couleurs dans les accents, pas la base
   ============================================================ */
:root{
  --c-blue:#3b82f6; --c-green:#10b981; --c-purple:#8b5cf6; --c-orange:#f97316;
  --c-pink:#ec4899;  --c-teal:#14b8a6;  --c-indigo:#6366f1; --c-rose:#f43f5e;
}

/* Chips domaines colorés (base neutre, accent tournant) */
.domain{ transition:transform .2s ease, box-shadow .2s ease; }
.domain:hover{ transform:translateY(-2px); box-shadow:0 8px 18px -10px var(--dc,var(--cyan-500)); }
.domain:nth-child(8n+1){ --dc:var(--c-blue); }
.domain:nth-child(8n+2){ --dc:var(--c-green); }
.domain:nth-child(8n+3){ --dc:var(--c-purple); }
.domain:nth-child(8n+4){ --dc:var(--c-orange); }
.domain:nth-child(8n+5){ --dc:var(--c-pink); }
.domain:nth-child(8n+6){ --dc:var(--c-teal); }
.domain:nth-child(8n+7){ --dc:var(--c-indigo); }
.domain:nth-child(8n+8){ --dc:var(--c-rose); }
.domain{
  background:color-mix(in srgb, var(--dc,var(--cyan-500)) 9%, #fff);
  border-color:color-mix(in srgb, var(--dc,var(--cyan-500)) 42%, transparent);
  color:color-mix(in srgb, var(--dc,var(--cyan-500)) 72%, #17150f);
}
.section-navy .domain{ background:color-mix(in srgb, var(--dc) 22%, transparent); color:#fff; }

/* Puce eyebrow colorée par variante */
.eyebrow.c-blue::before{ background:linear-gradient(90deg,var(--c-blue),#93c5fd); box-shadow:0 0 12px rgb(59 130 246/.6); }
.eyebrow.c-green::before{ background:linear-gradient(90deg,var(--c-green),#6ee7b7); box-shadow:0 0 12px rgb(16 185 129/.6); }
.eyebrow.c-purple::before{ background:linear-gradient(90deg,var(--c-purple),#c4b5fd); box-shadow:0 0 12px rgb(139 92 246/.6); }
.eyebrow.c-blue{ color:var(--c-blue); } .eyebrow.c-green{ color:#0e9e70; } .eyebrow.c-purple{ color:var(--c-purple); }

/* Badge coloré réutilisable (tag) */
.tag{ display:inline-flex; align-items:center; gap:.4rem; font-family:"Space Mono",monospace; font-size:.66rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em; padding:.32rem .7rem; border-radius:999px; background:color-mix(in srgb,var(--tg,var(--cyan-500)) 14%,#fff); color:color-mix(in srgb,var(--tg,var(--cyan-500)) 78%,#17150f); border:1px solid color-mix(in srgb,var(--tg,var(--cyan-500)) 32%,transparent); }

/* ---- Panneau services : CLAIR + couleur par service --------------------- */
#svc-panel{ background:var(--paper); }
.svc-detail{
  background:#fff; border:1px solid rgb(11 20 40 / .08);
  border-left:6px solid var(--svc-accent,var(--cyan-500));
  border-radius:26px; box-shadow:var(--shadow-card);
  padding:clamp(1.6rem,3.4vw,2.7rem) clamp(1.6rem,3.4vw,2.9rem);
  min-height:0;
}
.svc-detail h2{ color:var(--navy-900); }
.sd-eyebrow{ color:var(--svc-accent,var(--cyan-700)); }
.sd-main > p{ color:var(--ink-soft); }
.sd-points li{ color:var(--ink); }
.sd-points li span{
  color:#fff; background:var(--svc-accent,var(--cyan-500)); width:20px; height:20px; border-radius:50%;
  display:inline-grid; place-items:center; font-size:.7rem; margin-top:.1rem;
}
.sd-visual span{
  background:color-mix(in srgb, var(--svc-accent,var(--cyan-500)) 12%, #fff);
  border:1px solid color-mix(in srgb, var(--svc-accent,var(--cyan-500)) 42%, transparent);
  box-shadow:0 18px 40px -20px var(--svc-accent,var(--cyan-500));
  animation:floaty 4s ease-in-out infinite;
}
@keyframes floaty{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-9px) } }
.svc-detail .btn-cyan{ background:var(--svc-accent,var(--cyan-500)); border-color:transparent; color:#fff; }
.svc-detail .btn-cyan:hover{ filter:brightness(1.06); box-shadow:0 14px 30px -12px var(--svc-accent,var(--cyan-500)); }

/* ---- Section CONTACT : carte sombre posée sur blanc --------------------- */
#contact.section-cloud{ background:#fff; }
.contact-shell{
  position:relative; overflow:hidden;
  background:radial-gradient(120% 140% at 0% 0%, var(--navy-800), var(--navy-900) 55%);
  border-radius:30px; padding:clamp(1.8rem,4vw,3.4rem);
  box-shadow:0 40px 80px -40px rgb(11 20 40 / .7);
}
.contact-shell::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.7;
  background:
    radial-gradient(40% 55% at 85% 10%, rgb(139 92 246 / .35), transparent 70%),
    radial-gradient(45% 60% at 10% 100%, rgb(59 130 246 / .30), transparent 70%),
    radial-gradient(35% 45% at 100% 100%, rgb(224 168 60 / .30), transparent 70%);
  animation:auraShift 12s ease-in-out infinite alternate;
}
@keyframes auraShift{ from{ transform:translateY(0) scale(1) } to{ transform:translateY(-10px) scale(1.05) } }
.contact-shell > *{ position:relative; z-index:1; }
.contact-shell .section-header{ margin-bottom:1.8rem; }
.contact-shell h2{ color:#fff; }
.contact-shell .section-header p{ color:#c7cbd6; }
.contact-shell .eyebrow{ color:var(--cyan-300); }
.contact-shell label{ color:#c7cbd6; }
.contact-shell input, .contact-shell textarea{
  background:rgb(255 255 255 / .06); border:1px solid rgb(255 255 255 / .15); color:#fff;
}
.contact-shell input::placeholder, .contact-shell textarea::placeholder{ color:#868b9c; }
.contact-shell input:focus, .contact-shell textarea:focus{ border-color:var(--cyan-400); background:rgb(255 255 255 / .1); outline:none; }
.contact-shell .info-card{ background:rgb(255 255 255 / .05); border:1px solid rgb(255 255 255 / .12); }
.contact-shell .info-card h3{ color:#fff; }
.contact-shell .contact-line{ color:#dfe2ea; }
.contact-shell .contact-line a{ color:#fff; }
.contact-shell .lnk{ color:var(--cyan-300); }

/* ---- Bandeau humains + preuves (vivant, avatars illustrés) -------------- */
.proof{ display:grid; grid-template-columns:auto 1fr; gap:2.2rem; align-items:center; }
.proof-people{ display:flex; align-items:center; }
.proof-people img{
  width:60px; height:60px; border-radius:50%; object-fit:cover; border:3px solid #fff;
  margin-left:-16px; box-shadow:var(--shadow-card); transition:transform .25s ease;
}
.proof-people img:first-child{ margin-left:0; }
.proof-people:hover img{ margin-left:-8px; }
.proof-people .more{
  width:60px; height:60px; border-radius:50%; margin-left:-16px; display:grid; place-items:center;
  background:var(--navy-900); color:#fff; font-family:"Space Grotesk",sans-serif; font-weight:700; font-size:.85rem;
  border:3px solid #fff; box-shadow:var(--shadow-card);
}
.proof-text h3{ font-size:clamp(1.2rem,2.2vw,1.55rem); margin-bottom:.35rem; }
.proof-text p{ color:var(--ink-soft); }
.proof-tags{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.9rem; }
@media (max-width:720px){ .proof{ grid-template-columns:1fr; gap:1.3rem; text-align:center; } .proof-people{ justify-content:center; } }

/* Marquee logos certifs (défilement doux) */
.logo-marquee{ overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.logo-marquee-track{ display:flex; align-items:center; gap:.85rem; width:max-content; animation:scrollx 44s linear infinite; }
/* défilement continu, jamais en pause */

/* Chaque certification sur sa carte, logo en pleine couleur, rehaussé de la
   couleur de sa marque (--c) : barre haute + voile très léger. Le gris d'avant
   (filter:grayscale) aplatissait tout. */
.cert{
  flex:none; position:relative; overflow:hidden;
  width:138px; height:82px; display:grid; place-items:center;
  background:#fff; border:1px solid rgb(23 21 15 / .09); border-radius:14px;
  box-shadow:0 1px 2px rgb(11 20 40 / .04);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.cert::before{
  content:""; position:absolute; inset:0; background:var(--c); opacity:.06;
  transition:opacity .25s ease;
}
.cert::after{
  content:""; position:absolute; inset:0 0 auto; height:3px; background:var(--c);
}
.cert img{
  position:relative; height:40px; width:auto; max-width:78%; object-fit:contain;
  filter:none; opacity:1;
}
.cert:hover{
  transform:translateY(-3px); border-color:var(--c);
  box-shadow:0 1px 2px rgb(11 20 40 / .05), 0 16px 30px -14px var(--c);
}
.cert:hover::before{ opacity:.12; }

@media (max-width:640px){
  .logo-marquee-track{ gap:.6rem; }
  .cert{ width:116px; height:70px; }
  .cert img{ height:32px; }
}
@keyframes scrollx{ from{ transform:translateX(0) } to{ transform:translateX(-50%) } }

@media (prefers-reduced-motion:reduce){
  .sd-visual span, .contact-shell::before, .logo-marquee-track{ animation:none !important; }
}

/* ============================================================
   ACCUEIL v2 — modules dans les cartes hero + sections par service
   ============================================================ */
/* Modules intégrés dans les cartes "door" du hero */
.door { background:var(--paper); }
.door > p { flex:0 0 auto; }
.door .mod-list { margin-top:.2rem; }
.door .mod { box-shadow:none; border-color:rgb(11 20 40 / .1); }
.door .mod:hover { box-shadow:var(--shadow-card); border-color:var(--cyan-500); transform:translateY(-2px); }
.door .mod .mod-arrow { font-size:1.05rem; }

/* Sections service : ancrage sous le nav collant */
section[id^="svc-"] { scroll-margin-top:82px; }

/* Lisibilité des sections sombres (feature sur navy) */
.section-navy .feature p { color:var(--cyan-200); }
.section-navy .feature .flag { color:var(--cyan-300); }
.section-navy .text-grad { background-image:linear-gradient(120deg,#ffffff,var(--cyan-400)); }

/* ============================================================
   HERO COMPACT — tenir dans une seule vue (modules courts)
   ============================================================ */
.home-hero { padding:1.3rem 0 1.8rem; }
.home-hero .eyebrow { margin-bottom:.55rem; }
.home-hero h1 { margin-bottom:.8rem; }
.home-hero .domains { margin:.55rem 0 0; gap:.45rem; }
.home-hero .domain { font-size:.66rem; padding:.32rem .65rem; }
.doors { max-width:1040px; margin-inline:auto; gap:1.1rem; margin-top:1.1rem; }
.door { padding:1.15rem 1.25rem; }
.door .aud-head { margin-bottom:.5rem; }
.door .aud-badge { width:44px; height:44px; font-size:1.35rem; border-radius:13px; }
.door h3 { font-size:1.18rem; }
.door > p { font-size:.88rem; line-height:1.5; margin-bottom:.9rem; }
.door .mod-list { gap:.5rem; }
.door .mod { padding:.58rem .8rem; gap:.75rem; border-radius:14px; }
.door .mod .ic { width:36px; height:36px; font-size:1.05rem; border-radius:10px; }
.door .mod h3 { font-size:.96rem; margin:0; }
.door .mod .mod-arrow { font-size:1rem; }
@media (max-width:760px){ .home-hero h1 { font-size:clamp(1.25rem,5.6vw,1.7rem); } }

/* ============================================================
   CONTACT COMPACT — la section (fond blanc inclus) tient dans une vue
   ============================================================ */
#contact { padding:2.3rem 0 2.6rem; }
.contact-shell { padding:clamp(1.3rem,3vw,2rem); }
.contact-shell .section-header { margin-bottom:1rem; max-width:none; }
.contact-shell h2 { font-size:clamp(1.4rem,3vw,1.95rem); margin-bottom:.4rem; }
.contact-shell .section-header p { font-size:.94rem; }
.contact-shell .contact-grid { gap:1.6rem; align-items:center; }
.contact-shell .form { gap:.65rem; }
.contact-shell .field { gap:.3rem; }
.contact-shell .field input, .contact-shell .field textarea { padding:.68rem .9rem; }
.contact-shell .form .btn-lg { padding:.85rem 1.8rem; }
.contact-shell .info-card { padding:1.3rem; }
.contact-shell .info-card .contact-line { margin-bottom:.5rem; font-size:.92rem; }
/* Turnstile : rester compact et bien intégré sur le fond sombre */
.cf-turnstile { margin:.2rem 0 .1rem; }

/* Selects de filtre catalogue formations-pro */
.pro-select {
  font-family:inherit; font-size:.98rem; padding:.85rem 1rem; border-radius:.9rem;
  border:1px solid rgb(11 20 40 / .14); background:#fff; color:var(--ink); cursor:pointer; min-width:170px;
}
.pro-select:focus { outline:none; border-color:var(--cyan-500); box-shadow:0 0 0 3px rgb(224 168 60 / .22); }

/* Select du formulaire (comme les inputs) + variante sombre (carte contact) */
.field select { font-family:inherit; font-size:1rem; padding:.85rem 1rem; border-radius:.9rem; border:1px solid rgb(11 20 40 / .14); background:#fff; color:var(--ink); cursor:pointer; width:100%; }
.field select:focus { outline:none; border-color:var(--cyan-500); box-shadow:0 0 0 3px rgb(224 168 60 / .25); }
.contact-shell .field select { background:rgb(255 255 255 / .06); border:1px solid rgb(255 255 255 / .15); color:#fff; padding:.68rem .9rem; }
.contact-shell .field select option { color:#17150f; }

/* Diaporama d'images (section Événements) */
.feature-media.slideshow { padding:0; display:block; background:#000; }
.feature-media.slideshow .slide { position:absolute; inset:0; background-size:cover; background-position:center; opacity:0; transition:opacity 1s ease; }
.feature-media.slideshow .slide.on { opacity:1; }

/* Contact : retour au fond noir pleine largeur (plus de carte flottante) */
#contact { padding:3.2rem 0 3.4rem; background:var(--navy-900); }
.contact-shell { background:none; box-shadow:none; border-radius:0; padding:0; overflow:visible; }
.contact-shell::before { display:none; }

/* Contact recentré : formulaire en colonne unique au milieu + infos compactes */
.contact-cal { max-width:560px; margin:0 auto 1.5rem; text-align:center; }
.contact-cal-btn { width:100%; }
.contact-cal-sub { margin-top:.6rem; color:#c7cbd6; font-size:.85rem; }
.contact-shell .form.contact-centered { max-width:560px; margin:0 auto; }
.form.contact-centered .btn { width:100%; }
.form.contact-centered .cf-turnstile { display:flex; justify-content:center; }
.contact-shell .contact-meta { display:flex; flex-wrap:wrap; justify-content:center; gap:.5rem 1.6rem; margin-top:1.7rem; color:#c7cbd6; font-size:.92rem; text-align:center; }
.contact-shell .contact-meta a { color:#fff; }

/* ── WhatsApp : bouton flottant (injecté par sketch.js) + lien dans le contact ─ */
.wa-float {
  position:fixed; right:18px; bottom:20px; z-index:900;
  display:inline-flex; align-items:center; justify-content:center;
  width:56px; height:56px; border-radius:999px;
  background:#25d366; color:#fff; text-decoration:none;
  box-shadow:0 14px 30px -10px rgb(37 211 102 / .65), 0 4px 10px rgb(11 20 40 / .25);
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.wa-float svg { width:28px; height:28px; flex:none; }
.wa-float:hover, .wa-float:focus-visible {
  transform:translateY(-2px); background:#1fbe5b;
  box-shadow:0 18px 38px -12px rgb(37 211 102 / .8), 0 4px 10px rgb(11 20 40 / .28);
}
@media (max-width:640px) {
  .wa-float { right:14px; bottom:14px; width:52px; height:52px; }
}

.cal-float {
  position:fixed; right:18px; bottom:88px; z-index:900;
  display:inline-flex; align-items:center; justify-content:center;
  width:56px; height:56px; border-radius:999px; border:0; cursor:pointer;
  background:linear-gradient(135deg, #f2cf7b 0%, var(--cyan-500) 52%, #cf9526 100%);
  color:#14151a;
  box-shadow:0 14px 30px -10px rgb(224 168 60 / .65), 0 4px 10px rgb(11 20 40 / .25);
  transition:transform .2s ease, box-shadow .2s ease;
}
.cal-float svg { width:26px; height:26px; flex:none; }
.cal-float:hover, .cal-float:focus-visible {
  transform:translateY(-2px);
  box-shadow:0 18px 38px -12px rgb(224 168 60 / .8), 0 4px 10px rgb(11 20 40 / .28);
}
@media (max-width:640px) {
  .cal-float { right:14px; bottom:76px; width:52px; height:52px; }
  .cal-float svg { width:24px; height:24px; }
}

.contact-meta .wa-inline {
  display:inline-flex; align-items:center; gap:7px;
  color:#25d366 !important; font-weight:600; text-decoration:none;
}
.contact-meta .wa-inline:hover { text-decoration:underline; }

/* ── Modale de capture de lead (injectée par sketch.js, déclenchée par [data-lead-modal]) ── */
.lead-modal-overlay {
  position:fixed; inset:0; z-index:950; display:none;
  background:rgb(11 12 16 / .58); backdrop-filter:blur(3px);
  padding:1.2rem; overflow-y:auto;
}
.lead-modal-overlay.open { display:flex; align-items:center; justify-content:center; }
.lead-modal {
  position:relative; width:100%; max-width:min(1080px, 94vw); margin:auto;
  background:var(--cloud); border-radius:1.6rem; box-shadow:var(--shadow-card-hover);
  padding:2.4rem 2.4rem 2rem;
}
.lead-modal-back {
  background:none; border:none; padding:0; margin-bottom:.9rem;
  color:var(--cyan-700); font-weight:600; font-size:.9rem; cursor:pointer;
}
.lead-modal-back:hover { text-decoration:underline; }
.lead-modal-close {
  position:absolute; top:.9rem; right:.9rem; width:34px; height:34px; border-radius:999px;
  border:1px solid rgb(11 20 40 / .1); background:var(--mist); color:var(--navy-900);
  font-size:1.05rem; line-height:1; display:grid; place-items:center; cursor:pointer;
}
.lead-modal-close:hover { background:var(--cyan-200); }
.lead-modal-tag {
  display:inline-block; font-family:"Space Mono",monospace; font-size:.68rem; text-transform:uppercase;
  letter-spacing:.1em; color:var(--cyan-700); background:rgb(224 168 60 / .14);
  padding:.3rem .7rem; border-radius:999px; margin-bottom:.9rem;
}
.lead-modal h3 { font-size:1.35rem; margin-bottom:.5rem; padding-right:1.6rem; }
.lead-modal-lead { color:var(--ink-soft); font-size:.96rem; margin-bottom:1.3rem; }
.lead-modal .form { display:grid; grid-template-columns:1fr 1fr; gap:.8rem 1.4rem; align-items:start; }
.lead-modal .form .field-check,
.lead-modal .form .field-large,
.lead-modal .form #fm-ts,
.lead-modal .form .auth-status,
.lead-modal .form button[type="submit"] { grid-column:1 / -1; }
.lead-modal .docs-list { display:grid; grid-template-columns:1fr 1fr; gap:.7rem 1.4rem; }
.lead-modal .cf-turnstile { display:flex; justify-content:center; }
.lead-modal .btn { width:100%; }
.dom-picker { position:relative; }
.dom-chips { display:flex; flex-wrap:wrap; gap:.4rem; }
.dom-chips:not(:empty) { margin-bottom:.45rem; }
.dom-chip { display:inline-flex; align-items:center; gap:.35rem; background:rgb(224 168 60 / .16); color:var(--navy-900); border-radius:999px; padding:.28rem .3rem .28rem .7rem; font-size:.82rem; font-weight:600; }
.dom-chip button { border:none; background:none; color:inherit; cursor:pointer; font-size:1.05rem; line-height:1; padding:0 .25rem; }
.dom-menu { position:absolute; left:0; right:0; top:100%; z-index:30; margin-top:5px; background:#fff; border:1px solid rgb(11 20 40 / .14); border-radius:.8rem; box-shadow:var(--shadow-card-hover); max-height:230px; overflow-y:auto; }
.dom-item { display:block; width:100%; text-align:left; border:none; background:none; padding:.6rem .85rem; font-size:.88rem; line-height:1.35; color:var(--ink); cursor:pointer; }
.dom-item:hover { background:var(--mist); }
.dom-item-type { color:var(--ink-mute); font-size:.76rem; }
@media (max-width:640px) {
  .lead-modal { padding:1.6rem 1.4rem 1.4rem; border-radius:1.3rem; }
  .lead-modal .form, .lead-modal .docs-list { grid-template-columns:1fr; }
}

/* ── Domaines : preuve visuelle multi-secteurs (environnement virtuel) ────── */
.env-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; margin-top:2.4rem; }
.env-head { display:flex; align-items:center; gap:.6rem; margin-bottom:1rem; }
.env-ic { font-size:1.4rem; }
.env-head h3 { font-size:1.05rem; margin:0; }
.env-window { background:#0e0f13; border-radius:1.1rem; overflow:hidden; border:1px solid rgb(224 168 60 / .28); }
.env-window-body { padding:.9rem 1rem; }
.env-lines p { font-family:"Space Mono",monospace; font-size:.72rem; color:#b7d9c2; margin:0 0 .45rem; }
.env-lines p:last-child { margin-bottom:0; }
.env-kpis { display:grid; grid-template-columns:1fr 1fr; gap:.55rem; }
.env-kpi { background:rgb(255 255 255 / .04); border:1px solid rgb(255 255 255 / .08); border-radius:.6rem; padding:.5rem .6rem; }
.env-kpi .v { font-family:"Space Grotesk",sans-serif; font-weight:700; font-size:1.02rem; color:#fff; }
.env-kpi .l { display:block; font-family:"Space Mono",monospace; font-size:.58rem; color:#8b93a7; text-transform:uppercase; letter-spacing:.06em; margin-top:.15rem; }
.env-rows p { display:flex; justify-content:space-between; gap:.6rem; font-family:"Space Mono",monospace; font-size:.7rem; color:#c9cdd8; margin:0 0 .5rem; }
.env-rows p:last-child { margin-bottom:0; color:var(--cyan-300); }
.env-cand { display:flex; align-items:center; gap:.55rem; margin-bottom:.5rem; }
.env-cand:last-child { margin-bottom:0; }
.env-cand .av {
  flex:none; width:26px; height:26px; border-radius:50%; display:grid; place-items:center;
  font-family:"Space Grotesk",sans-serif; font-weight:700; font-size:.62rem;
  color:var(--navy-950); background:linear-gradient(135deg,var(--cyan-400),var(--cyan-600));
}
.env-cand .i { font-family:"Space Mono",monospace; font-size:.68rem; color:#c9cdd8; line-height:1.3; }
.env-cand .i strong { display:block; color:#fff; font-family:"Space Grotesk",sans-serif; font-size:.76rem; font-weight:600; }
.env-decision { margin-top:.35rem; font-family:"Space Mono",monospace; font-size:.62rem; color:var(--cyan-300); }
.env-eq { display:flex; align-items:flex-end; gap:.3rem; height:40px; margin-bottom:.6rem; }
.env-eq span { flex:1; background:linear-gradient(180deg,var(--cyan-400),var(--cyan-600)); border-radius:3px 3px 0 0; opacity:.85; }
.env-caption { font-family:"Space Mono",monospace; font-size:.66rem; color:#8b93a7; margin:0; }
.env-tag { margin-top:1rem; font-family:"Space Mono",monospace; font-size:.72rem; color:var(--cyan-700); display:flex; align-items:center; gap:.4rem; }
.env-tag::before { content:"✓"; color:var(--emerald); font-weight:700; }
.env-note { text-align:center; margin-top:2.2rem; color:var(--ink-soft); font-size:.96rem; }
.env-note .lnk-btn { font:inherit; background:none; border:0; padding:0; color:var(--cyan-700); font-weight:600; cursor:pointer; text-decoration:underline; }
.lab-example-tag { margin-top:.85rem; padding:.6rem .8rem 0; font-family:"Space Mono",monospace; font-size:.64rem; color:#8b93a7; text-align:center; }

@media (max-width:960px) { .env-grid { grid-template-columns:1fr 1fr; } }
@media (max-width:640px) { .env-grid { grid-template-columns:1fr; } }

/* ── Section élèves : un seul bloc coupé en deux (orientation | alternance) ── */
.split2 { display:grid; grid-template-columns:1fr 1fr; gap:3rem; }
.split2-col { display:flex; flex-direction:column; }
.split2-col .btn { margin-top:auto; align-self:flex-start; }
.split2-col + .split2-col { border-left:1px solid rgb(20 21 26 / .12); padding-left:3rem; }
.split2-media {
  height:360px; border-radius:1.4rem; overflow:hidden; margin-bottom:1.5rem;
  box-shadow:var(--shadow-card); background:linear-gradient(150deg,var(--navy-800),var(--cyan-600));
}
.split2-media.photo { background-size:cover; background-position:center 30%; }
.split2-media.panel { background:var(--mist); display:grid; place-content:center; padding:1rem; }
.split2-media .mail-demo { width:100%; box-shadow:none; }
.split2-col h3 { font-size:clamp(1.2rem,2vw,1.55rem); margin-bottom:.7rem; }
.split2-col p { color:var(--ink-soft); font-size:1.02rem; margin-bottom:1.3rem; }
@media (max-width:860px) {
  .split2 { grid-template-columns:1fr; gap:2.2rem; }
  .split2-col + .split2-col { border-left:0; border-top:1px solid rgb(20 21 26 / .12); padding-left:0; padding-top:2.2rem; }
}

/* ── Section sourcing : mini-cartes « équipe » posées en bas de la photo ───── */
.feature-media.team {
  min-height:430px; padding:0;
  display:flex; flex-direction:column; justify-content:flex-end; align-items:flex-start;
  background-position:68% 12%;
}
.feature-media.team::after {
  content:""; position:absolute; inset:auto 0 0 0; height:75%; z-index:0;
  background:linear-gradient(180deg, rgb(14 15 19 / 0), rgb(14 15 19 / .55) 45%, rgb(14 15 19 / .88));
}
.team-panel { position:relative; z-index:1; width:100%; max-width:452px; padding:0 1.15rem 1.15rem; text-align:left; }
.tmini {
  display:flex; align-items:center; gap:.7rem;
  padding:.5rem .65rem; border-radius:.85rem;
  background:rgb(20 21 26 / .62); border:1px solid rgb(255 255 255 / .14);
  backdrop-filter:blur(8px);
}
.tmini + .tmini { margin-top:.45rem; }
/* Panneau dessiné à la place d'une photo : la liste des intervenants EST le
   contenu de ce bloc, une photographie derrière ne faisait que la gêner. Trois
   halos colorés sur fond nuit, plus une trame fine estompée sur les bords. */
.team-canvas {
  background:
    radial-gradient(58% 54% at 16% 20%, rgb(224 168 60 / .58), transparent 70%),
    radial-gradient(54% 50% at 86% 24%, rgb(47 212 143 / .42), transparent 72%),
    radial-gradient(62% 58% at 72% 90%, rgb(112 72 168 / .48), transparent 70%),
    linear-gradient(155deg, #1d1e26 0%, #0e0f13 58%, #14151a 100%);
}
.team-canvas::before {
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(rgb(255 255 255 / .055) 1px, transparent 1px),
    linear-gradient(90deg, rgb(255 255 255 / .055) 1px, transparent 1px);
  background-size:26px 26px;
  -webkit-mask-image:radial-gradient(72% 68% at 50% 42%, #000, transparent);
  mask-image:radial-gradient(72% 68% at 50% 42%, #000, transparent);
}

/* Portrait de l'intervenant, recadré sur la tête. Jeu d'illustrations du
   matching (photo_consent_at:'illustration'), copié en local : cadrage exact
   et aucune dépendance au bucket R2 pour la page d'accueil. */
.tmini-ava {
  flex:none; width:34px; height:34px; border-radius:50%; overflow:hidden;
  display:block; background:var(--mist);
  box-shadow:0 0 0 1.5px rgb(224 168 60 / .45);
}
.tmini-ava img { width:100%; height:100%; display:block; object-fit:cover; }
.tmini-i { flex:1; min-width:0; }
.tmini-i strong { display:block; font-size:.9rem; line-height:1.25; color:#fff; }
.tmini-i span { display:block; font-size:.76rem; color:#c9cdd8; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tmini-ok {
  flex:none; width:22px; height:22px; border-radius:50%; display:grid; place-items:center;
  font-size:.68rem; font-weight:700; color:var(--cyan-300);
  background:rgb(224 168 60 / .16); border:1px solid rgb(224 168 60 / .38);
}
.team-panel .team-note {
  margin:.65rem 0 0; font-family:"Space Mono",monospace; font-size:.68rem;
  text-transform:uppercase; letter-spacing:.05em; color:var(--cyan-300);
}
@media (max-width:560px) { .feature-media.team { min-height:340px; } .tmini-i span { font-size:.72rem; } }
@media (prefers-reduced-motion: no-preference) {
  .has-js .team-panel .tmini {
    opacity:0; transform:translateY(12px);
    transition:opacity .55s ease, transform .55s ease;
    transition-delay:calc(.3s + var(--i,0) * .14s);
  }
  .has-js .feature-media.team.in .tmini { opacity:1; transform:none; }
}

/* ── Accueil : tuiles services qui défilent + visuel synchronisé ──────────────
   Le visuel de droite est piloté par la tuile active (auto-rotation ou survol). */
.door-body { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.02fr); gap:1.1rem; align-items:stretch; }
.door-left { display:flex; flex-direction:column; }
.door-media {
  position:relative; min-height:344px; border-radius:20px; overflow:hidden;
  background:var(--mist); border:1px solid rgb(224 168 60 / .22);
}
.dm {
  position:absolute; inset:0; display:grid; align-items:start; justify-items:center; padding:.6rem;
  opacity:0; transform:scale(1.03); transition:opacity .55s ease, transform .7s cubic-bezier(.16,1,.3,1);
}
.dm.on { opacity:1; transform:none; }
.dm.photo { padding:0; background-size:cover; background-position:center; }

.dm-lab { width:100%; height:100%; background:#0e0f13; border-radius:1.1rem; overflow:hidden; border:1px solid rgb(224 168 60 / .28); display:flex; flex-direction:column; }
.dm-lab-top { display:flex; align-items:center; gap:.4rem; padding:.7rem 1rem; background:rgb(255 255 255 / .04); border-bottom:1px solid rgb(255 255 255 / .07); }
.dm-lab-title { font-family:"Space Mono",monospace; font-size:.62rem; color:#8b93a7; margin-left:.35rem; }
.dm-vms { display:grid; grid-template-columns:repeat(3,1fr); gap:.7rem; padding:1.3rem; flex:1; align-content:center; }
.dm-vm {
  display:grid; place-items:center; font-size:1.7rem; padding:1rem 0;
  border:1px solid rgb(255 255 255 / .08); border-radius:.75rem; background:rgb(255 255 255 / .02);
  filter:grayscale(1) opacity(.45);
}
.dm.on .dm-vm { animation:dmVm .5s cubic-bezier(.16,1,.3,1) forwards; animation-delay:calc(.25s + var(--i) * .16s); }
@keyframes dmVm {
  to { filter:none; border-color:rgb(224 168 60 / .55); background:rgb(224 168 60 / .08);
       box-shadow:0 0 0 1px rgb(224 168 60 / .3), 0 8px 18px -12px rgb(224 168 60 / .7); }
}
.dm-cap { font-family:"Space Mono",monospace; font-size:.66rem; color:#8b93a7; text-align:center; padding:0 1rem 1.1rem; }

.dm-lms { width:100%; height:100%; background:var(--cloud); border:1px solid rgb(11 20 40 / .08); border-radius:1.1rem; padding:1.6rem 1.7rem; box-shadow:var(--shadow-card); display:flex; flex-direction:column; justify-content:center; }
.dm-lms-head { display:flex; align-items:center; justify-content:space-between; gap:.6rem; font-weight:600; font-size:1.05rem; margin-bottom:1.2rem; }
.dm-lms .bar { margin-bottom:1.1rem; }
.dm.on .dm-lms .bar i { width:var(--w); }

@media (max-width:760px) {
  .door-body { grid-template-columns:1fr; }
  .door-media { order:-1; min-height:346px; }
  .dm-lms { padding:1.1rem 1.2rem; }
  .dm-lms-head { margin-bottom:.8rem; }
  .dm-lms .bar { margin-bottom:.7rem; }
}

/* ── Orientation : aperçu catalogue RNCP dans le hero → ouvre la modale de recherche ── */
/* ── Catalogue RNCP : recherche + filtres directement dans la page ──────────── */
.rncp-search-panel {
  position:relative; border-radius:1.8rem; padding:1.5rem; margin-bottom:1.1rem;
  background:linear-gradient(150deg,var(--navy-800),var(--cyan-600));
  box-shadow:var(--shadow-card); color:#fff;
}
.rncp-search-top { display:flex; justify-content:flex-end; margin-bottom:.9rem; }
.rncp-search-stat {
  font-family:"Space Mono",monospace; font-size:.66rem; text-transform:uppercase; letter-spacing:.08em;
  background:rgb(255 255 255 / .16); padding:.35rem .7rem; border-radius:999px;
}
/* Barre de recherche : l'élément le plus visible du bloc */
.rncp-search-bar {
  display:flex; align-items:center; gap:.7rem; background:#fff; border-radius:999px;
  padding:.9rem 1.3rem; box-shadow:0 12px 28px -14px rgb(11 20 40 / .5);
  transition:box-shadow .25s ease;
}
.rncp-search-bar:focus-within { box-shadow:0 0 0 3px rgb(240 208 138 / .55), 0 12px 28px -14px rgb(11 20 40 / .5); }
.rncp-search-bar svg { width:20px; height:20px; flex:none; color:var(--ink-mute); }
.rncp-search-bar input {
  flex:1; min-width:0; border:0; outline:none; background:transparent;
  font:inherit; font-size:1rem; color:var(--ink);
}
.rncp-search-bar input::placeholder { color:var(--ink-mute); }
/* Filtres niveau + ville */
.rncp-search-filters { display:flex; gap:.7rem; flex-wrap:wrap; margin-top:.8rem; }
.rncp-filter { flex:1; min-width:180px; display:flex; flex-direction:column; gap:.3rem; }
.rncp-filter > span {
  font-family:"Space Mono",monospace; font-size:.62rem; text-transform:uppercase;
  letter-spacing:.08em; color:var(--cyan-200); padding-left:.2rem; font-weight:700;
}
.rncp-filter select, .rncp-filter input {
  font:inherit; font-size:.92rem; padding:.7rem .9rem; border-radius:.85rem;
  border:1px solid rgb(255 255 255 / .35); background:rgb(14 15 19 / .35); color:#fff;
}
.rncp-filter-wide { flex:2 1 320px; }
.rncp-filter select option { color:var(--ink); background:#fff; }
.rncp-filter input::placeholder { color:rgb(255 255 255 / .7); }
.rncp-filter select:focus, .rncp-filter input:focus {
  outline:none; border-color:var(--cyan-200); background:rgb(14 15 19 / .5);
  box-shadow:0 0 0 3px rgb(240 208 138 / .3);
}
/* Bouton de reinitialisation des filtres */
.rncp-reset {
  align-self:flex-end; margin-bottom:.05rem; font-family:"Space Mono",monospace; font-size:.66rem;
  text-transform:uppercase; letter-spacing:.06em; color:var(--cyan-200); cursor:pointer;
  background:transparent; border:1px solid rgb(247 230 191 / .45); border-radius:.85rem; padding:.72rem .9rem;
  transition:background .2s ease, border-color .2s ease;
}
.rncp-reset:hover { background:rgb(255 255 255 / .12); border-color:var(--cyan-200); }
/* Raccourcis de recherche */
.rncp-quick { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.9rem; align-items:center; }
.rncp-quick-label {
  font-family:"Space Mono",monospace; font-size:.62rem; text-transform:uppercase; letter-spacing:.08em;
  color:var(--cyan-200); font-weight:700; margin-right:.15rem;
}
.rncp-search-panel .rncp-empty { color:#fff; text-shadow:0 1px 3px rgb(11 20 40 / .45); margin-top:.9rem; }
.rncp-quick button {
  font-family:"Space Mono",monospace; font-size:.68rem; text-transform:uppercase; letter-spacing:.06em;
  background:rgb(255 255 255 / .14); border:1px solid rgb(255 255 255 / .22); color:#fff;
  border-radius:999px; padding:.35rem .8rem; cursor:pointer; transition:background .2s ease, border-color .2s ease;
}
.rncp-quick button:hover, .rncp-quick button.on { background:rgb(255 255 255 / .28); border-color:var(--cyan-200); }
/* Résultats sous la barre, dans le panneau */
/* CTA jaune : l'action principale du bloc (recevoir la liste par email) */
.rncp-cta {
  width:100%; margin-top:1rem; justify-content:center; font-size:1rem;
  box-shadow:0 14px 30px -14px rgb(11 20 40 / .55);
}
.rncp-cta[hidden] { display:none; }
.rncp-cta svg { width:18px; height:18px; transition:transform .25s ease; }
.rncp-cta:hover svg { transform:translateX(3px); }
/* Les cartes ne sont plus cliquables : elles illustrent, le CTA convertit */

/* ── Synthese des resultats : le nombre + la repartition cliquable remplacent
   le mur de cartes (113 cartes n'aidaient ni a lire ni a affiner). ────────── */
.rncp-summary {
  background:#fff; border:1px solid rgb(11 20 40 / .1); border-radius:1.3rem;
  padding:1.3rem 1.4rem; margin-bottom:1.1rem; box-shadow:var(--shadow-card);
}
.rncp-summary-head { display:flex; align-items:baseline; gap:.6rem; margin-bottom:1.1rem; flex-wrap:wrap; }
.rncp-summary-head strong { font-size:2.4rem; line-height:1; color:var(--cyan-700); }
.rncp-summary-head span { color:var(--ink-soft); font-size:.98rem; }
.rncp-facets { display:grid; grid-template-columns:1fr 1fr; gap:1.4rem; }
.rncp-facet-title {
  display:block; font-family:"Space Mono",monospace; font-size:.62rem; text-transform:uppercase;
  letter-spacing:.08em; color:var(--ink-mute); font-weight:700; margin-bottom:.55rem;
}
.rncp-facet-list { display:flex; flex-direction:column; gap:.3rem; }
/* Une ligne = libelle + barre proportionnelle + compte, cliquable pour affiner */
.rncp-facet-row {
  display:grid; grid-template-columns:1fr 72px 42px; align-items:center; gap:.6rem;
  background:transparent; border:0; padding:.32rem .45rem; border-radius:.6rem;
  font:inherit; font-size:.85rem; color:var(--ink-soft); cursor:pointer; text-align:left;
  transition:background .15s ease;
}
.rncp-facet-row:hover { background:var(--mist); }
.rncp-facet-row.on { background:var(--cyan-200); color:var(--ink); font-weight:600; }
.rncp-facet-row .lbl { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rncp-facet-row .bar { height:6px; border-radius:3px; background:var(--mist); overflow:hidden; }
.rncp-facet-row .bar i { display:block; height:100%; background:var(--cyan-500); border-radius:3px; }
.rncp-facet-row .n { text-align:right; font-family:"Space Mono",monospace; font-size:.78rem; color:var(--ink-mute); }
.rncp-facet-row.on .n { color:var(--cyan-700); }
.rncp-facet-empty { color:var(--ink-mute); font-size:.85rem; }
/* Apercu court sous la synthese */
.rncp-preview-title {
  font-family:"Space Mono",monospace; font-size:.66rem; text-transform:uppercase; letter-spacing:.08em;
  color:var(--ink-mute); font-weight:700; margin-bottom:.6rem;
}
@media (max-width:640px) { .rncp-facets { grid-template-columns:1fr; gap:1rem; } }

/* Resultats : hors du panneau dore, dans le flux de la page (plus de scroll imbrique
   qui donnait l'impression que la liste passait sous les boutons). */
.rncp-results { margin-bottom:1.5rem; }
.rncp-results[hidden] { display:none; }
.rncp-results .rncp-results-grid {
  max-height:none; overflow:visible; padding:0; margin-bottom:1rem;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
}
.rncp-results .rncp-result-card {
  cursor:default; background:#fff; border:1px solid rgb(11 20 40 / .1);
  box-shadow:0 1px 2px rgb(11 20 40 / .04);
}
.rncp-results .rncp-result-card:hover { border-color:var(--cyan-400); background:#fff; }
.rncp-count {
  grid-column:1/-1; font-family:"Space Mono",monospace; font-size:.7rem; text-transform:uppercase;
  letter-spacing:.07em; color:var(--cyan-700); margin-bottom:.2rem; font-weight:700;
}
@media (max-width:640px) {
  .rncp-search-panel { padding:1.2rem; border-radius:1.4rem; }
  .rncp-search-bar { padding:.8rem 1rem; }
  .rncp-filter { min-width:100%; }
}

/* ── Modale RNCP : recherche → sélection d'une formation → lead + rappel ─────── */
.rncp-modal { max-width:780px; padding:1.9rem; text-align:left; }
.rncp-modal .lead-modal-lead { margin-bottom:1.1rem; }
.rncp-modal-search { display:flex; gap:.7rem; flex-wrap:wrap; margin-bottom:1.3rem; }
.rncp-modal-search input[type="search"] {
  flex:1; min-width:200px; font-family:inherit; font-size:.96rem; padding:.8rem 1rem;
  border-radius:.9rem; border:1px solid rgb(11 20 40 / .14); background:#fff;
}
.rncp-modal-search input[type="search"]:focus { outline:none; border-color:var(--cyan-500); box-shadow:0 0 0 3px rgb(224 168 60 / .25); }
.rncp-modal-search select {
  font-family:inherit; font-size:.96rem; padding:.8rem 1rem; border-radius:.9rem;
  border:1px solid rgb(11 20 40 / .14); background:#fff; cursor:pointer;
}
.rncp-results-grid { display:grid; grid-template-columns:1fr 1fr; gap:.8rem; max-height:340px; overflow-y:auto; padding-right:.3rem; }
.rncp-result-card {
  display:block; width:100%; text-align:left; font:inherit; background:var(--mist); border:1px solid rgb(11 20 40 / .07);
  border-radius:1rem; padding:.9rem 1rem; cursor:pointer; transition:border-color .2s ease, background .2s ease;
}
.rncp-result-card:hover, .rncp-result-card:focus-visible { border-color:var(--cyan-500); background:#fff; outline:none; }
.rncp-result-card h4 { font-size:.92rem; margin-bottom:.3rem; line-height:1.3; }
.rncp-result-card .meta { font-size:.76rem; color:var(--ink-mute); }
.rncp-result-card .pick { display:inline-flex; align-items:center; gap:.3rem; margin-top:.5rem; font-size:.78rem; font-weight:600; color:var(--cyan-700); }
.rncp-empty { grid-column:1/-1; text-align:center; color:var(--ink-mute); padding:1.2rem 0; }
.rncp-back {
  display:inline-flex; align-items:center; gap:.4rem; background:none; border:0; padding:0; margin-bottom:1rem;
  font:inherit; font-size:.86rem; font-weight:600; color:var(--cyan-700); cursor:pointer;
}
.rncp-pick-tag {
  display:block; background:var(--mist); border-radius:1rem; padding:.9rem 1rem; margin-bottom:1.2rem;
}
.rncp-pick-tag strong { display:block; font-size:.98rem; margin-bottom:.2rem; }
.rncp-pick-tag span { font-size:.8rem; color:var(--ink-mute); }
@media (max-width:640px) {
  .rncp-modal { padding:1.4rem 1.2rem; }
  .rncp-results-grid { grid-template-columns:1fr; max-height:300px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   ACCUEIL — « Nos activités » : liste accordéon à gauche, fenêtre applicative
   à droite (démo de nos outils synchronisée). Remplace l'ancien bloc .door/.dm.
   ══════════════════════════════════════════════════════════════════════════ */
.home-hero { overflow:hidden; }

.svcx {
  display:grid; grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
  gap:3.4rem; align-items:center; margin-top:2.4rem; text-align:left;
}
.svcx-col { min-width:0; }
.svcx-kicker {
  font-family:"Space Mono",monospace; font-size:.66rem; text-transform:uppercase;
  letter-spacing:.16em; color:var(--cyan-700); margin-bottom:.9rem;
}

.svcx-list { border-top:1px solid rgb(23 21 15 / .12); }
.svcx-i {
  display:block; width:100%; text-align:left; font:inherit; color:inherit; cursor:pointer;
  background:none; border:0; border-bottom:1px solid rgb(23 21 15 / .12);
  padding:0;
}
/* Ligne fermée = 24px + icône 32px + 24px (mesures relevées sur softr.io) */
.svcx-head { display:flex; align-items:center; gap:12px; padding:24px 0; }
.svcx-ic { flex:none; width:32px; height:32px; display:grid; place-items:center; color:var(--ink-mute); transition:color .3s ease; }
.svcx-ic svg { width:32px; height:32px; }
.svcx-t {
  display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; min-width:0;
  font-family:"Space Grotesk",sans-serif; font-size:20px; font-weight:700;
  line-height:24px; letter-spacing:-.2px; color:var(--ink-mute); transition:color .3s ease;
}
.svcx-tag {
  font-family:"Space Mono",monospace; font-style:normal; font-size:.58rem; font-weight:400;
  text-transform:uppercase; letter-spacing:.1em; color:var(--ink-mute);
  background:var(--mist); border-radius:999px; padding:.2rem .5rem;
}

/* Volet dépliant : aligné sur l'icône (pas d'indentation), comme softr.io */
.svcx-body {
  display:block; max-height:0; padding-bottom:0; opacity:0; overflow:hidden;
  transition:max-height .45s cubic-bezier(.16,1,.3,1), padding-bottom .45s ease, opacity .3s ease;
}
.svcx-d { font-size:14px; line-height:20px; color:var(--ink); max-width:46ch; }
.svcx-go {
  display:block; font-size:16px; font-weight:500; color:var(--ink);
  margin-top:14px; transition:margin .3s ease;
}
.svcx-go svg { width:16px; height:16px; display:inline; vertical-align:-3px; margin-left:.4rem; transition:transform .25s ease; }

.svcx-i.active .svcx-t  { color:var(--ink); }
.svcx-i.active .svcx-ic { color:var(--cyan-600); }
.svcx-i.active .svcx-body { max-height:14rem; opacity:1; padding-bottom:24px; }
.svcx-i:hover .svcx-t   { color:var(--ink); }
.svcx-i:hover .svcx-ic  { color:var(--cyan-600); }
.svcx-i.active:hover .svcx-go svg { transform:translateX(4px); }
.svcx-i:focus-visible { outline:2px solid var(--cyan-500); outline-offset:2px; border-radius:8px; }

/* Fenêtre applicative (démo) — déborde légèrement vers la droite, à la Softr */
/* Débord maîtrisé : la fenêtre atteint le bord droit du viewport puis est
   rognée de 24px — le « crop » signature de softr.io, stable à toute largeur. */
.svcx-demo { min-width:0; margin-right:calc(-1 * ((100vw - min(1180px, 92vw)) / 2) - 24px); }
.appw {
  display:grid; grid-template-columns:190px minmax(0,1fr);
  min-height:500px; border-radius:22px; overflow:hidden; background:var(--cloud);
  border:1px solid rgb(23 21 15 / .09);
  box-shadow:0 2px 4px rgb(11 20 40 / .04), 0 44px 80px -34px rgb(11 20 40 / .38);
}
.appw-side {
  background:var(--paper); border-right:1px solid rgb(23 21 15 / .08);
  padding:1.1rem .75rem; display:flex; flex-direction:column; gap:1rem;
}
.appw-brand {
  display:flex; align-items:center; gap:.5rem; padding:.15rem .45rem;
  font-family:"Space Grotesk",sans-serif; font-size:.84rem; font-weight:700; letter-spacing:-.02em;
}
.appw-brand img { width:26px; height:26px; border-radius:8px; }
.appw-nav { display:grid; gap:.12rem; }
.appw-n {
  display:flex; align-items:center; gap:.6rem; padding:.5rem .6rem; border-radius:10px;
  font-size:.81rem; color:var(--ink-mute); white-space:nowrap;
  transition:background .3s ease, color .3s ease, box-shadow .3s ease;
}
.appw-n svg { width:17px; height:17px; flex:none; }
.appw-n.on {
  background:var(--cloud); color:var(--ink); font-weight:600;
  box-shadow:0 1px 2px rgb(11 20 40 / .07), 0 8px 18px -14px rgb(11 20 40 / .4);
}
.appw-n.on svg { color:var(--cyan-600); }
.appw-user {
  margin-top:auto; display:flex; align-items:center; gap:.5rem;
  font-size:.72rem; color:var(--ink-mute);
  border-top:1px solid rgb(23 21 15 / .08); padding-top:.7rem;
}

.appw-main { position:relative; display:grid; min-width:0; }
.dmo {
  grid-area:1 / 1; display:flex; flex-direction:column; gap:.85rem; min-width:0;
  padding:1.3rem 1.4rem 1.1rem;
  opacity:0; transform:translateY(10px); pointer-events:none;
  transition:opacity .45s ease, transform .55s cubic-bezier(.16,1,.3,1);
}
.dmo.on { opacity:1; transform:none; }

/* Primitives de démo (partagées par les 7 écrans) ------------------------- */
.aw-head { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; }
.aw-head h4 { font-size:1.02rem; letter-spacing:-.02em; margin-bottom:.15rem; }
.aw-head p { font-size:.76rem; color:var(--ink-mute); line-height:1.4; }
.aw-btn {
  flex:none; font-size:.71rem; font-weight:600; white-space:nowrap;
  padding:.42rem .8rem; border-radius:999px;
  background:var(--cyan-500); color:var(--navy-900);
}

.aw-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.6rem; }
.aw-vm {
  border:1px solid rgb(23 21 15 / .1); border-radius:12px; padding:.7rem .75rem;
  background:var(--paper); display:grid; gap:.15rem;
  opacity:.5; transform:translateY(4px);
}
.aw-vm b { font-family:"Space Mono",monospace; font-size:.71rem; font-weight:700; }
.aw-vm i { font-style:normal; font-size:.64rem; color:var(--ink-mute); }
.dmo.on .aw-vm { animation:awVm .5s cubic-bezier(.16,1,.3,1) forwards; animation-delay:calc(.2s + var(--i) * .09s); }
@keyframes awVm {
  to { opacity:1; transform:none; border-color:rgb(224 168 60 / .45); background:rgb(224 168 60 / .07); }
}

.aw-rows { display:grid; gap:.5rem; }
.aw-rows.tight { gap:.4rem; }
.aw-row, .aw-card {
  display:flex; align-items:center; gap:.7rem; min-width:0;
  border:1px solid rgb(23 21 15 / .09); border-radius:12px;
  padding:.6rem .75rem; background:var(--cloud);
}
.aw-rowtxt { display:grid; gap:.08rem; min-width:0; flex:1; }
.aw-rowtxt b { font-size:.82rem; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.aw-rowtxt i { font-style:normal; font-size:.68rem; color:var(--ink-mute); }
.aw-sq {
  flex:none; width:30px; height:30px; border-radius:9px; display:grid; place-items:center;
  background:var(--mist); font-size:.9rem;
}
.aw-av {
  flex:none; width:30px; height:30px; border-radius:999px; display:grid; place-items:center;
  background:var(--navy-900); color:var(--cyan-300);
  font-family:"Space Grotesk",sans-serif; font-size:.65rem; font-weight:700;
}
.aw-bar { flex:none; width:74px; height:6px; border-radius:99px; background:var(--mist); overflow:hidden; }
.aw-bar i { display:block; height:100%; width:0; border-radius:99px; background:linear-gradient(90deg,var(--cyan-600),var(--cyan-400)); transition:width .9s cubic-bezier(.16,1,.3,1) .3s; }
.dmo.on .aw-bar i { width:var(--w); }
.aw-pct { flex:none; width:2.5rem; text-align:right; font-size:.7rem; font-weight:600; color:var(--ink-soft); }
.aw-chips { flex:none; display:flex; gap:.3rem; }
.aw-chips em {
  font-style:normal; font-family:"Space Mono",monospace; font-size:.6rem;
  background:var(--mist); color:var(--ink-soft); border-radius:999px; padding:.22rem .5rem;
}
.aw-match { flex:none; font-family:"Space Grotesk",sans-serif; font-size:.8rem; font-weight:700; color:var(--cyan-700); }

.aw-cards { display:grid; gap:.55rem; }
.aw-date {
  flex:none; width:40px; display:grid; place-items:center; padding:.32rem 0;
  border-radius:10px; background:var(--navy-900); color:#fff;
}
.aw-date b { font-family:"Space Grotesk",sans-serif; font-size:.92rem; line-height:1; }
.aw-date i { font-style:normal; font-size:.55rem; letter-spacing:.09em; color:var(--cyan-300); }

.aw-pill {
  flex:none; font-size:.66rem; font-weight:600; white-space:nowrap;
  padding:.28rem .6rem; border-radius:999px; background:var(--mist); color:var(--ink-soft);
}
.aw-pill.ok   { background:rgb(224 168 60 / .18); color:var(--cyan-700); }
.aw-pill.warn { background:rgb(23 21 15 / .07); color:var(--ink-soft); }

.aw-search {
  display:flex; align-items:center; gap:.55rem; background:var(--paper);
  border:1px solid rgb(23 21 15 / .12); border-radius:999px;
  padding:.5rem .9rem; font-size:.8rem; color:var(--ink-soft);
}
.aw-search svg { width:15px; height:15px; flex:none; color:var(--ink-mute); }

.aw-foot {
  margin-top:auto; padding-top:.65rem; border-top:1px solid rgb(23 21 15 / .08);
  font-family:"Space Mono",monospace; font-size:.63rem; line-height:1.5; color:var(--ink-mute);
}

@media (max-width:1040px) {
  .svcx { grid-template-columns:1fr; gap:2.2rem; }
  .svcx-demo { margin-right:0; }
  .appw { min-height:440px; }
}
@media (max-width:720px) {
  .svcx { margin-top:1.6rem; }
  .svcx-head { padding:18px 0; gap:10px; }
  .svcx-ic { width:28px; height:28px; }
  .svcx-ic svg { width:28px; height:28px; }
  .svcx-t { font-size:17px; line-height:22px; }
  .svcx-d { font-size:13.5px; line-height:19px; }
  .svcx-go { font-size:15px; margin-top:12px; }
  .svcx-i.active .svcx-body { padding-bottom:18px; }
  .appw { grid-template-columns:1fr; min-height:0; }
  .appw-side { flex-direction:row; align-items:center; gap:.5rem; padding:.6rem .7rem; border-right:0; border-bottom:1px solid rgb(23 21 15 / .08); overflow-x:auto; }
  .appw-brand { display:none; }
  .appw-nav { display:flex; gap:.3rem; }
  .appw-n { padding:.4rem .65rem; font-size:.74rem; }
  .appw-user { display:none; }
  .appw-main { padding:1rem 1rem .9rem; }
  .aw-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .aw-bar, .aw-pct, .aw-chips { display:none; }
  .appw-side::-webkit-scrollbar { height:3px; }
}


/* ══════════════════════════════════════════════════════════════════════════
   ACCUEIL — identité visuelle propre à chaque écran de démo. Surface, accent
   et mise en page changent ensemble : c'est ce qui rend le passage d'une
   activité à l'autre lisible d'un coup d'œil, et pas seulement un texte qui
   se substitue à un autre.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 1 · Environnements : console sombre, accent vert terminal ───────────── */
.dmo-lab { background:var(--navy-950); }
.dmo-lab .aw-head h4 { color:#fff; }
.dmo-lab .aw-head p  { color:#8f8b7e; }
.dmo-lab .aw-btn     { background:#2fd48f; color:#06231a; }
.dmo-lab .aw-foot    { color:#7d7a6e; border-top-color:rgb(255 255 255 / .1); }

/* ── 2 · E-learning : lecteur de module, accent froid indigo ─────────────── */
.dmo-lms { background:#f6f7fc; }
.dmo-lms .aw-head p { color:#6a6f8c; }
.dmo-lms .aw-btn    { background:#4f5bd5; color:#fff; }
.dmo-lms .aw-foot   { color:#6a6f8c; border-top-color:rgb(79 91 213 / .16); }

.lms { display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:.6rem; flex:1; align-items:stretch; }
.lms-stage {
  background:linear-gradient(155deg,#2b2f6b 0%,#4f5bd5 70%,#6d78e6 100%);
  border-radius:12px; padding:.75rem .8rem; color:#fff;
  display:flex; flex-direction:column; justify-content:space-between; gap:.6rem; min-height:0;
}
.lms-stage-top { display:flex; gap:.35rem; }
.lms-tag {
  font-family:"Space Mono",monospace; font-size:.54rem; text-transform:uppercase; letter-spacing:.07em;
  background:rgb(255 255 255 / .18); border-radius:99px; padding:.2rem .5rem;
}
.lms-tag.ghost { background:transparent; border:1px solid rgb(255 255 255 / .3); }
.lms-stage-mid { display:flex; flex-direction:column; align-items:center; gap:.45rem; text-align:center; }
.lms-stage-mid b { font-size:.78rem; font-weight:600; line-height:1.35; max-width:20ch; }
.lms-play {
  width:38px; height:38px; border-radius:99px; background:#fff; color:#4f5bd5;
  display:grid; place-items:center; flex:none;
  box-shadow:0 6px 16px -6px rgb(11 20 40 / .5);
}
.lms-play svg { width:19px; height:19px; margin-left:2px; }
.dmo-lms.on .lms-play { animation:lmsPulse 2.4s ease-in-out infinite .6s; }
@keyframes lmsPulse { 0%,100% { transform:scale(1) } 50% { transform:scale(1.07) } }
.lms-scrub { height:3px; border-radius:99px; background:rgb(255 255 255 / .28); overflow:hidden; }
.lms-scrub i { display:block; height:100%; width:0; background:#fff; border-radius:99px; transition:width 1.3s cubic-bezier(.16,1,.3,1) .4s; }
.dmo-lms.on .lms-scrub i { width:46%; }

.lms-side { display:grid; grid-template-rows:auto auto; gap:.5rem; align-content:start; min-width:0; }
.lms-chapters { display:grid; gap:.22rem; }
.lms-ch {
  display:flex; align-items:center; gap:.4rem; font-size:.68rem; color:var(--ink-mute);
  background:#fff; border:1px solid rgb(23 21 15 / .06); border-radius:8px; padding:.34rem .45rem;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.lms-ch .tick {
  width:13px; height:13px; border-radius:99px; flex:none; display:grid; place-items:center;
  font-size:.5rem; background:rgb(23 21 15 / .07); color:transparent;
}
.lms-ch.done { color:var(--ink); }
.lms-ch.done .tick { background:#4f5bd5; color:#fff; }
.lms-ch.now { color:#4f5bd5; font-weight:600; border-color:rgb(79 91 213 / .4); background:#eef0fd; }
.lms-ch.now .tick { background:#4f5bd5; color:#fff; }

.lms-quiz {
  background:#fff; border:1px solid rgb(79 91 213 / .22); border-radius:10px;
  padding:.5rem .55rem; display:grid; gap:.28rem;
}
.lms-quiz b { font-family:"Space Mono",monospace; font-size:.56rem; text-transform:uppercase; letter-spacing:.08em; color:#4f5bd5; }
.lms-quiz > span:not(.lms-opt) { font-size:.68rem; color:var(--ink); line-height:1.35; }
.lms-opt {
  font-size:.63rem; color:var(--ink-soft); border:1px solid rgb(23 21 15 / .1);
  border-radius:7px; padding:.26rem .4rem;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.lms-opt.right { border-color:#4f5bd5; background:#eef0fd; color:#3a44b0; font-weight:600; }

/* ── 3 · Événements : agenda chaud + classement, accent or (marque) ──────── */
.dmo-evt { background:linear-gradient(170deg,#fffdf7 0%,var(--mist) 100%); }
.dmo-evt .aw-btn  { background:var(--cyan-500); color:var(--navy-900); }
.dmo-evt .aw-foot { border-top-color:rgb(224 168 60 / .28); }

.evt-list { display:grid; gap:.45rem; }
.evt {
  display:flex; align-items:center; gap:.6rem; min-width:0;
  background:#fff; border:1px solid rgb(23 21 15 / .08); border-radius:11px;
  padding:.5rem .6rem; border-left:3px solid rgb(23 21 15 / .12);
}
.evt.hot { border-left-color:var(--cyan-500); box-shadow:0 8px 20px -14px rgb(224 168 60 / .8); }
.evt-avas { display:flex; flex:none; }
.evt-avas em {
  font-style:normal; font-family:"Space Grotesk",sans-serif; font-size:.52rem; font-weight:700;
  width:22px; height:22px; border-radius:99px; display:grid; place-items:center;
  background:var(--navy-900); color:var(--cyan-300); border:1.5px solid #fff; margin-left:-6px;
}
.evt-avas em:first-child { margin-left:0; }
.evt-avas em:last-child { background:var(--mist); color:var(--ink-soft); }

.evt-board {
  background:var(--navy-900); border-radius:11px; padding:.55rem .7rem; display:grid; gap:.3rem;
}
.evt-board-t {
  font-family:"Space Mono",monospace; font-size:.54rem; text-transform:uppercase; letter-spacing:.1em;
  color:var(--cyan-300);
}
.evt-rank { display:flex; align-items:center; gap:.5rem; color:#fff; font-size:.68rem; }
.evt-rank .pos {
  width:15px; height:15px; border-radius:99px; flex:none; display:grid; place-items:center;
  font-family:"Space Grotesk",sans-serif; font-size:.52rem; font-weight:700;
  background:rgb(255 255 255 / .12);
}
.evt-rank:first-of-type .pos { background:var(--cyan-500); color:var(--navy-900); }
.evt-rank .who { flex:none; width:6.6rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.evt-bar { flex:1; height:4px; border-radius:99px; background:rgb(255 255 255 / .12); overflow:hidden; }
.evt-bar i { display:block; height:100%; width:0; border-radius:99px; background:linear-gradient(90deg,var(--cyan-600),var(--cyan-300)); transition:width 1.1s cubic-bezier(.16,1,.3,1) .35s; }
.dmo-evt.on .evt-bar i { width:var(--w); }
.evt-rank .pts { flex:none; font-family:"Space Mono",monospace; font-size:.6rem; color:var(--cyan-300); }

@media (max-width:720px) {
  .lms { grid-template-columns:1fr; }
  .lms-stage { min-height:130px; }
  .evt-avas { display:none; }
  .evt-rank .who { width:5rem; }
}


/* ══════════════════════════════════════════════════════════════════════════
   ACCUEIL — scénario « environnement par spécialité », joué en boucle dans la
   fenêtre de démo. Trois actes : un faux curseur choisit une spécialité, le
   provisionnement s'exécute, l'environnement réel du métier apparaît et une
   modale conclut. Piloté par sketch.js (envProvisioner).
   ══════════════════════════════════════════════════════════════════════════ */
/* Narration à gauche, artefact à droite : le vrai ressort de l'animation Softr,
   c'est le commentaire à la première personne qui accompagne la construction. */
.prov { display:grid; grid-template-columns:minmax(0,.62fr) minmax(0,1fr); gap:.75rem; flex:1; min-height:0; }
.prov-right { display:flex; flex-direction:column; gap:.6rem; min-width:0; min-height:0; }

.prov-log {
  display:flex; flex-direction:column; gap:.45rem; min-width:0; min-height:0;
  border-right:1px solid rgb(255 255 255 / .08); padding-right:.75rem;
}
.prov-log-h {
  display:flex; align-items:center; gap:.4rem;
  font-family:"Space Mono",monospace; font-size:.55rem; text-transform:uppercase;
  letter-spacing:.1em; color:#8b8779;
}
.prov-log-dot { width:5px; height:5px; border-radius:99px; background:#2fd48f; flex:none; animation:provDot 1.8s ease-in-out infinite; }
@keyframes provDot { 0%,100% { opacity:1 } 50% { opacity:.3 } }

.prov-lines { display:flex; flex-direction:column; gap:.4rem; flex:1; min-height:0; overflow:hidden; }
.prov-line {
  font-size:.64rem; line-height:1.45; color:#b9b5a8;
  padding-left:.6rem; border-left:1.5px solid rgb(47 212 143 / .35);
  opacity:0; transform:translateY(4px);
  transition:opacity .35s ease, transform .45s cubic-bezier(.16,1,.3,1);
}
.prov-line.on { opacity:1; transform:none; }
.prov-line:empty { display:none; }

/* La ligne d'état qui ne s'arrête jamais de changer — moteur du sentiment d'avancée */
.prov-status {
  display:flex; align-items:center; gap:.45rem; margin-top:auto;
  font-family:"Space Mono",monospace; font-size:.56rem; color:#2fd48f;
  border-top:1px solid rgb(255 255 255 / .08); padding-top:.5rem;
}
.prov-status i {
  width:9px; height:9px; border-radius:99px; flex:none;
  border:1.5px solid rgb(47 212 143 / .4); border-top-color:#2fd48f;
  animation:provSpin .8s linear infinite;
}
.prov-status.done i { border-color:#2fd48f; background:#2fd48f; animation:none; }
@keyframes provSpin { to { rotate:360deg; } }
.prov-status span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.prov-themes { display:flex; flex-wrap:wrap; gap:.35rem; }
.prov-th {
  font-size:.68rem; padding:.32rem .62rem; border-radius:999px;
  border:1px solid rgb(255 255 255 / .14); color:#9a9689;
  background:rgb(255 255 255 / .03); white-space:nowrap;
  transition:background .3s ease, color .3s ease, border-color .3s ease, transform .3s ease;
}
.prov-th.pick {
  background:#2fd48f; border-color:#2fd48f; color:#06231a; font-weight:600;
  transform:translateY(-1px);
}

.prov-stage { position:relative; flex:1; min-height:0; }

/* Acte 2 — provisionnement */
.prov-build {
  position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center; gap:.55rem;
  padding:0 .1rem; opacity:0; transition:opacity .35s ease;
}
.prov-build.on { opacity:1; }
.prov-build-t { font-family:"Space Mono",monospace; font-size:.62rem; color:#9a9689; }
.prov-steps { display:grid; gap:.3rem; }
.prov-step {
  display:flex; align-items:center; gap:.5rem;
  font-size:.7rem; color:#6f6c62; transition:color .3s ease;
}
.prov-step i {
  width:14px; height:14px; border-radius:99px; flex:none;
  border:1.5px solid rgb(255 255 255 / .18); position:relative;
  transition:background .3s ease, border-color .3s ease;
}
.prov-step.done { color:#e8e6df; }
.prov-step.done i { background:#2fd48f; border-color:#2fd48f; }
.prov-step.done i::after {
  content:"✓"; position:absolute; inset:0; display:grid; place-items:center;
  font-size:.52rem; font-weight:700; color:#06231a;
}
.prov-gauge { height:3px; border-radius:99px; background:rgb(255 255 255 / .1); overflow:hidden; }
.prov-gauge i { display:block; height:100%; width:0; border-radius:99px; background:#2fd48f; transition:width .5s linear; }

/* Acte 3 — l'environnement du métier */
.prov-env { position:absolute; inset:0; }
.pe {
  position:absolute; inset:0; display:flex; flex-direction:column;
  background:#101116; border:1px solid rgb(47 212 143 / .22); border-radius:11px; overflow:hidden;
  opacity:0; transform:scale(.985); transition:opacity .4s ease, transform .5s cubic-bezier(.16,1,.3,1);
}
.pe.on { opacity:1; transform:none; }
.pe-bar {
  display:flex; align-items:center; gap:.32rem; padding:.42rem .6rem;
  background:rgb(255 255 255 / .04); border-bottom:1px solid rgb(255 255 255 / .07);
}
.pe-dot { width:6px; height:6px; border-radius:99px; background:rgb(255 255 255 / .18); flex:none; }
.pe-bar b { font-family:"Space Mono",monospace; font-size:.55rem; font-weight:400; color:#8b8779; margin-left:.3rem;
            overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pe-body { flex:1; padding:.6rem .7rem; display:flex; flex-direction:column; justify-content:center; gap:.45rem; min-height:0; }
.pe-note {
  font-family:"Space Mono",monospace; font-size:.53rem; line-height:1.5; color:#6f6c62; margin-top:auto; padding-top:.35rem;
}

/* Musique — pistes et formes d'onde */
.pe-track { display:flex; align-items:center; gap:.5rem; }
.pe-track > span { flex:none; width:3.6rem; font-size:.6rem; color:#9a9689; }
.pe-wave { flex:1; display:flex; align-items:center; gap:2px; height:20px; }
.pe-wave i {
  flex:1; border-radius:1px; background:#2fd48f; height:0;
  transition:height .45s cubic-bezier(.16,1,.3,1);
}
.pe.on .pe-wave i { height:var(--h); }
.pe.on .pe-wave i:nth-child(even) { opacity:.62; }

/* Santé — tracé ECG et constantes */
.pe-ecg { height:40px; }
.pe-ecg svg { width:100%; height:100%; }
.pe-ecg path { fill:none; stroke:#2fd48f; stroke-width:1.6; stroke-linejoin:round;
  stroke-dasharray:420; stroke-dashoffset:420; }
.pe.on .pe-ecg path { animation:ecg 2.4s linear infinite; }
@keyframes ecg { to { stroke-dashoffset:0; } }
.pe-vitals { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.35rem; }
.pe-vitals span { display:grid; gap:.05rem; font-size:.53rem; color:#6f6c62; }
.pe-vitals b { font-family:"Space Grotesk",sans-serif; font-size:.8rem; color:#e8e6df; }

/* Commerce — indicateurs et écritures */
.pe-kpis { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.35rem; }
.pe-kpis span { display:grid; gap:.05rem; font-size:.53rem; color:#6f6c62;
  background:rgb(255 255 255 / .04); border-radius:7px; padding:.35rem .45rem; }
.pe-kpis b { font-family:"Space Grotesk",sans-serif; font-size:.78rem; color:#e8e6df; }
.pe-rows { display:grid; gap:.22rem; }
.pe-rows p { display:flex; justify-content:space-between; gap:.5rem; font-size:.62rem; color:#9a9689; }
.pe-rows .up { color:#2fd48f; }
.pe-rows .down { color:#e0a83c; }

/* Numérique — terminal */
.pe-term { justify-content:flex-start; font-family:"Space Mono",monospace; font-size:.56rem; line-height:1.75; gap:0; }
.pe-term p { color:#8b8779; }
.pe-term .p { color:#2fd48f; }
.pe-term .ok { color:#2fd48f; }
.pe-term .cur { animation:provCur 1.1s step-end infinite; }
@keyframes provCur { 50% { opacity:0; } }

/* Conclusion — la carte « prêt », équivalent du « Your app is ready! » */
.prov-ready {
  position:absolute; left:50%; top:50%; translate:-50% -50%;
  width:min(84%, 15rem); text-align:center;
  display:grid; justify-items:center; gap:.3rem;
  background:#fbfaf6; border-radius:13px; padding:.9rem .9rem 1rem;
  box-shadow:0 24px 50px -18px rgb(0 0 0 / .7);
  opacity:0; scale:.94; pointer-events:none;
  transition:opacity .3s ease, scale .4s cubic-bezier(.16,1,.3,1);
}
.prov-ready.on { opacity:1; scale:1; }
.prov-ready-ic {
  width:34px; height:34px; border-radius:99px; display:grid; place-items:center;
  background:rgb(47 212 143 / .16); color:#0f9b64; margin-bottom:.15rem;
}
.prov-ready-ic svg { width:19px; height:19px; }
.prov-ready b { font-family:"Space Grotesk",sans-serif; font-size:.85rem; color:var(--ink); }
.prov-ready > span:last-child { font-size:.66rem; line-height:1.4; color:var(--ink-soft); }

/* Le faux curseur : c'est lui qui raconte l'action */
.prov-cursor {
  position:absolute; left:0; top:0; width:17px; height:17px; color:#fff;
  opacity:0; pointer-events:none; z-index:3;
  filter:drop-shadow(0 2px 4px rgb(0 0 0 / .55));
  transition:translate .65s cubic-bezier(.5,0,.2,1), opacity .25s ease, scale .12s ease;
}
.prov-cursor svg { width:100%; height:100%; fill:currentColor; stroke:#14151a; stroke-width:1.1; }
.prov-cursor.on { opacity:1; }
.prov-cursor.tap { scale:.8; }

@media (max-width:720px) {
  .prov { grid-template-columns:1fr; }
  .prov-log { display:none; }
  .prov-th { font-size:.62rem; padding:.28rem .52rem; }
  .prov-step { font-size:.66rem; }
  .pe-vitals { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .prov-ready { width:min(90%, 13rem); padding:.75rem .7rem .85rem; }
}


/* ══════════════════════════════════════════════════════════════════════════
   ACCUEIL — hero, écran « Environnements » : on choisit la séance et le TP,
   puis une VM se crée par élève, provisionnée pour ce lab et ce TP précis.
   Cartes volontairement grandes : c'est le poste de l'élève qu'on montre.
   ══════════════════════════════════════════════════════════════════════════ */
.lab { display:flex; flex-direction:column; gap:.6rem; flex:1; min-height:0; }

.lab-pickers { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.5rem; }
.lab-pick {
  display:grid; gap:.15rem; min-width:0;
  background:rgb(255 255 255 / .04); border:1px solid rgb(255 255 255 / .1);
  border-radius:10px; padding:.45rem .6rem;
  transition:border-color .3s ease, background .3s ease;
}
.lab-pick.pick { border-color:#2fd48f; background:rgb(47 212 143 / .1); }
.lab-pick em {
  font-style:normal; font-family:"Space Mono",monospace; font-size:.52rem;
  text-transform:uppercase; letter-spacing:.1em; color:#8b8779;
}
.lab-pick b {
  font-family:"Space Grotesk",sans-serif; font-size:.74rem; font-weight:600; color:#e8e6df;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

.lab-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.5rem; flex:1; min-height:0; }
.lvm {
  background:#16171d; border:1px solid rgb(255 255 255 / .08); border-radius:11px;
  padding:.55rem .6rem; display:flex; flex-direction:column; gap:.45rem;
  opacity:.25; transform:translateY(6px) scale(.985);
  transition:opacity .45s ease, transform .5s cubic-bezier(.16,1,.3,1), border-color .45s ease;
}
.lvm.up { opacity:1; transform:none; border-color:rgb(47 212 143 / .32); }

.lvm-top { display:flex; align-items:center; gap:.4rem; min-width:0; }
.lvm-led { width:6px; height:6px; border-radius:99px; background:#3a3e4b; flex:none; transition:background .4s ease, box-shadow .4s ease; }
.lvm.up .lvm-led { background:#2fd48f; box-shadow:0 0 7px #2fd48f; }
.lvm-top b { font-family:"Space Mono",monospace; font-size:.62rem; font-weight:400; color:#cfcbbe; flex:none; }
.lvm-who {
  font-size:.58rem; color:#8b8779; margin-left:auto;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

.lvm-screen {
  flex:1; background:#0a0b0e; border-radius:8px; padding:.5rem .55rem;
  display:flex; flex-direction:column; justify-content:space-between; gap:.4rem; min-height:56px;
}
.lvm-tp {
  align-self:flex-start; font-family:"Space Mono",monospace; font-size:.53rem;
  color:#2fd48f; background:rgb(47 212 143 / .12); border-radius:5px; padding:.16rem .38rem;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%;
}
.lvm-line { font-family:"Space Mono",monospace; font-size:.53rem; color:#6f7c74; }
.lvm:not(.up) .lvm-tp, .lvm:not(.up) .lvm-line { opacity:0; }
.lvm.up .lvm-tp, .lvm.up .lvm-line { opacity:1; transition:opacity .3s ease .15s; }

.lab-state {
  display:flex; align-items:center; gap:.45rem; margin-top:auto; padding-top:.5rem;
  border-top:1px solid rgb(255 255 255 / .08);
  font-family:"Space Mono",monospace; font-size:.56rem; color:#2fd48f;
}
.lab-state i {
  width:9px; height:9px; border-radius:99px; flex:none;
  border:1.5px solid rgb(47 212 143 / .4); border-top-color:#2fd48f;
  animation:provSpin .8s linear infinite;
}
.lab-state.done i { border-color:#2fd48f; background:#2fd48f; animation:none; }
.lab-state span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ══════════════════════════════════════════════════════════════════════════
   Section « poste de travail » : le scénario narré, désormais ici, dans un
   panneau sombre posé sur la section claire. Il garde son identité console.
   ══════════════════════════════════════════════════════════════════════════ */
.prov-shell {
  background:var(--navy-950); border:1px solid rgb(255 255 255 / .07);
  border-radius:1.4rem; padding:1.2rem 1.3rem; min-height:340px;
  display:flex; box-shadow:var(--shadow-card);
}
.prov-shell .prov { flex:1; }
.prov-shell .prov-stage { min-height:210px; }

@media (max-width:900px) {
  .prov-shell { min-height:0; padding:1rem 1.05rem; }
}
@media (max-width:720px) {
  .lab-pickers { grid-template-columns:1fr; gap:.4rem; }
  .lab-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .lvm-who { display:none; }
  .prov-shell .prov-stage { min-height:190px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Deux visuels animés qui remplacent des carrousels : une seule image, mais
   qui vit. Le fondu en fin de cycle évite le retour brutal au point de départ.
   ══════════════════════════════════════════════════════════════════════════ */

/* Événements — l'image se rapproche, s'estompe, et repart */
.zoom-loop { position:relative; overflow:hidden; }
.zoom-loop-img {
  position:absolute; inset:0; display:block;
  background-size:cover; background-position:center;
  transform-origin:52% 46%;
  animation:zoomLoop 11s ease-in-out infinite;
}
@keyframes zoomLoop {
  0%   { transform:scale(1);    opacity:0 }
  9%   { opacity:1 }
  82%  { opacity:1 }
  100% { transform:scale(1.17); opacity:0 }
}

/* E-learning — balayage : on zoome et on parcourt la capture pour en lire
   le détail, avec une barre de lecture qui descend. */
.scan-loop { position:relative; overflow:hidden; }
.scan-loop-img {
  position:absolute; inset:0; display:block;
  background-repeat:no-repeat; background-size:auto 168%;
  animation:scanPan 17s cubic-bezier(.4,0,.6,1) infinite;
}
@keyframes scanPan {
  0%   { background-position:2% 8%;   opacity:0 }
  7%   { opacity:1 }
  86%  { opacity:1 }
  100% { background-position:98% 82%; opacity:0 }
}
.scan-loop::after {
  content:""; position:absolute; left:0; right:0; height:30%; z-index:1; pointer-events:none;
  background:linear-gradient(180deg,
    transparent 0%, rgb(224 168 60 / .07) 42%, rgb(224 168 60 / .20) 50%,
    rgb(224 168 60 / .07) 58%, transparent 100%);
  animation:scanBar 5.6s ease-in-out infinite;
}
@keyframes scanBar { 0% { top:-30% } 100% { top:100% } }

@media (prefers-reduced-motion:reduce) {
  .zoom-loop-img, .scan-loop-img { animation:none; opacity:1; }
  .scan-loop-img { background-size:cover; background-position:center; }
  .scan-loop::after { display:none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Actions franches : bouton noir pour l'action principale, contour pour la
   réservation. Remplace les liens discrets « Découvrir le service → », qui
   passaient inaperçus.
   ══════════════════════════════════════════════════════════════════════════ */
.btn-dark {
  background:var(--navy-950); color:#fff; border:1px solid var(--navy-950);
}
.btn-dark:hover { background:var(--navy-800); border-color:var(--navy-800); color:#fff; }
.btn-line {
  background:transparent; color:var(--ink); border:1.5px solid rgb(23 21 15 / .22);
}
.btn-line:hover { border-color:var(--cyan-500); background:rgb(224 168 60 / .1); color:var(--ink); }
.btn-wa { background:#25d366; color:#0a2e18; border:1px solid #25d366; }
.btn-wa:hover { background:#1fbb59; border-color:#1fbb59; color:#0a2e18; }
.btn-wa svg, .btn-dark svg, .btn-line svg { width:17px; height:17px; flex:none; }
/* Bouton « Réserver un créneau en visio » : contour, pas aplat.
   En .btn-dark il etait #0e0f13 sur une bande #0e0f13 -> invisible.
   Style unique qui s'adapte au fond clair comme au fond sombre. */
.btn-visio {
  background:transparent; color:var(--ink);
  border:1.5px solid rgb(23 21 15 / .28);
}
.btn-visio:hover {
  background:rgb(23 21 15 / .06); border-color:var(--cyan-500); color:var(--ink);
}
.section-navy .btn-visio, .cta-band .btn-visio, [class*="navy"] .btn-visio {
  color:#fff; border-color:rgb(255 255 255 / .45);
}
.section-navy .btn-visio:hover, .cta-band .btn-visio:hover, [class*="navy"] .btn-visio:hover {
  background:rgb(255 255 255 / .14); border-color:var(--cyan-400); color:#fff;
}
.btn-visio svg { width:17px; height:17px; flex:none; }
/* Filet de securite : tout .btn-dark pose sur une section sombre reste lisible */
.section-navy .btn-dark { background:transparent; border-color:rgb(255 255 255 / .45); color:#fff; }
.section-navy .btn-dark:hover { background:rgb(255 255 255 / .14); border-color:var(--cyan-400); }


/* Duo d'actions du hero : dans le volet dépliant de chaque activité */
.svcx-cta { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:14px; }
.svcx-cta .btn { font-size:.82rem; padding:.55rem 1rem; }
.svcx-i { -webkit-tap-highlight-color:transparent; }
.svcx-i.active .svcx-body { max-height:18rem; }

/* Paire WhatsApp / visio (À propos, page événements) */
.quick-actions { display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.1rem; }
.quick-actions .btn { display:inline-flex; align-items:center; gap:.5rem; }

/* Modale de lead : la visio d'abord, le formulaire ensuite */
.lead-modal .lm-cal { width:100%; justify-content:center; display:inline-flex; align-items:center; gap:.5rem; margin-bottom:.2rem; }
.lead-modal .lm-or {
  display:flex; align-items:center; gap:.7rem; margin:.9rem 0 .2rem;
  font-family:"Space Mono",monospace; font-size:.62rem; text-transform:uppercase;
  letter-spacing:.1em; color:var(--ink-mute);
}
.lead-modal .lm-or::before, .lead-modal .lm-or::after {
  content:""; flex:1; height:1px; background:rgb(23 21 15 / .12);
}

@media (max-width:720px) {
  .svcx-cta .btn, .quick-actions .btn { width:100%; justify-content:center; }
}

/* ══════════════════════════════════════════════════════════════════════════
   pack-pedagogique : les deux panneaux ne portaient qu'un gros chiffre sur le
   dégradé, avec une légende peu lisible. Ils montrent maintenant ce dont ils
   parlent — les environnements qui s'allument, et l'accès navigateur.
   Animations en CSS seul : rien à charger, rien à scripter.
   ══════════════════════════════════════════════════════════════════════════ */
.pk-panel { flex-direction:column; gap:1rem; }
.pk-cap { font-size:.92rem; line-height:1.5; color:rgb(255 255 255 / .92); max-width:30ch; }
.pk-cap b { font-family:"Space Grotesk",sans-serif; font-size:1.5rem; display:block; color:#fff; }

/* Les six environnements : allumage en cascade, puis on recommence */
.pk-vms { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.5rem; width:100%; max-width:20rem; }
.pk-vm {
  display:flex; align-items:center; gap:.4rem;
  font-family:"Space Mono",monospace; font-size:.6rem; color:rgb(255 255 255 / .55);
  background:rgb(0 0 0 / .28); border:1px solid rgb(255 255 255 / .12);
  border-radius:9px; padding:.45rem .5rem;
  animation:pkVm 7s ease-in-out infinite; animation-delay:calc(var(--i) * .28s);
}
.pk-vm i {
  width:6px; height:6px; border-radius:99px; background:rgb(255 255 255 / .3); flex:none;
  animation:pkLed 7s ease-in-out infinite; animation-delay:calc(var(--i) * .28s);
}
@keyframes pkVm {
  0%, 6%   { color:rgb(255 255 255 / .45); border-color:rgb(255 255 255 / .12); }
  18%, 86% { color:#fff;                   border-color:rgb(47 212 143 / .55); }
  100%     { color:rgb(255 255 255 / .45); border-color:rgb(255 255 255 / .12); }
}
@keyframes pkLed {
  0%, 6%   { background:rgb(255 255 255 / .3); box-shadow:none; }
  18%, 86% { background:#2fd48f;               box-shadow:0 0 8px #2fd48f; }
  100%     { background:rgb(255 255 255 / .3); box-shadow:none; }
}

/* L'accès navigateur : la fenêtre s'ouvre, la coche tombe */
.pk-browser {
  width:100%; max-width:20rem; border-radius:11px; overflow:hidden;
  background:rgb(0 0 0 / .32); border:1px solid rgb(255 255 255 / .14);
  animation:pkOpen 7s ease-in-out infinite;
}
.pk-browser-bar {
  display:flex; align-items:center; gap:.3rem; padding:.45rem .6rem;
  background:rgb(255 255 255 / .07); border-bottom:1px solid rgb(255 255 255 / .1);
}
.pk-browser-bar i { width:6px; height:6px; border-radius:99px; background:rgb(255 255 255 / .28); flex:none; }
.pk-browser-bar em {
  font-style:normal; font-family:"Space Mono",monospace; font-size:.56rem;
  color:rgb(255 255 255 / .6); margin-left:.4rem;
}
.pk-browser-body {
  display:flex; align-items:center; justify-content:center; gap:.5rem;
  padding:1.5rem .6rem; font-size:.8rem; color:#fff;
}
.pk-check {
  width:22px; height:22px; border-radius:99px; display:grid; place-items:center; flex:none;
  background:#2fd48f; color:#06231a; font-weight:700; font-size:.72rem;
  animation:pkCheck 7s ease-in-out infinite;
}
@keyframes pkOpen {
  0%, 8%   { transform:scale(.97); opacity:.55 }
  22%, 88% { transform:none;       opacity:1 }
  100%     { transform:scale(.97); opacity:.55 }
}
@keyframes pkCheck {
  0%, 26%  { transform:scale(0); opacity:0 }
  38%, 88% { transform:none;     opacity:1 }
  100%     { transform:scale(0); opacity:0 }
}

@media (prefers-reduced-motion:reduce) {
  .pk-vm, .pk-vm i, .pk-browser, .pk-check { animation:none; }
  .pk-vm { color:#fff; border-color:rgb(47 212 143 / .55); }
  .pk-vm i { background:#2fd48f; }
}

/* ══════════════════════════════════════════════════════════════════════════
   formations-pro : toast d'offres en cours, sur le motif de la page promotions
   (badge pulsant, barre de progression, prix et remise). Refus mémorisé.
   ══════════════════════════════════════════════════════════════════════════ */
.offr {
  position:fixed; left:18px; bottom:18px; z-index:900; width:min(19rem, calc(100vw - 36px));
  background:var(--navy-950); color:#fff; border:1px solid rgb(224 168 60 / .35);
  border-radius:14px; overflow:hidden; cursor:pointer;
  box-shadow:0 20px 44px -18px rgb(11 20 40 / .7);
  animation:offrIn .45s cubic-bezier(.16,1,.3,1);
}
@keyframes offrIn { from { opacity:0; transform:translateY(14px) } to { opacity:1; transform:none } }
.offr-head { display:flex; align-items:center; justify-content:space-between; padding:.6rem .7rem .4rem; }
.offr-badge {
  display:inline-flex; align-items:center; gap:.4rem;
  font-family:"Space Mono",monospace; font-size:.58rem; text-transform:uppercase;
  letter-spacing:.1em; color:var(--cyan-300);
}
.offr-badge i {
  width:6px; height:6px; border-radius:99px; background:#2fd48f;
  animation:offrLive 1.6s ease-in-out infinite;
}
@keyframes offrLive { 0%,100% { opacity:1; box-shadow:0 0 0 0 rgb(47 212 143 / .6) } 50% { opacity:.55; box-shadow:0 0 0 6px rgb(47 212 143 / 0) } }
.offr-close {
  background:none; border:0; color:rgb(255 255 255 / .5); font-size:1.1rem;
  line-height:1; cursor:pointer; padding:0 .2rem;
}
.offr-close:hover { color:#fff; }
.offr-bar { height:2px; background:rgb(255 255 255 / .12); }
.offr-bar i { display:block; height:100%; background:linear-gradient(90deg,var(--cyan-600),var(--cyan-300)); }
@keyframes offrBar { from { width:0 } to { width:100% } }
.offr-body { padding:.7rem .8rem .85rem; animation:offrSwap .35s ease; }
@keyframes offrSwap { from { opacity:0; transform:translateX(8px) } to { opacity:1; transform:none } }
.offr-nom { display:flex; align-items:center; gap:.45rem; font-weight:600; font-size:.86rem; }
.offr-meta { display:flex; align-items:center; gap:.5rem; margin-top:.35rem; }
.offr-prix { text-decoration:line-through; color:rgb(255 255 255 / .5); font-size:.8rem; }
.offr-promo {
  font-family:"Space Grotesk",sans-serif; font-weight:700; font-size:.82rem;
  color:var(--navy-900); background:var(--cyan-400); border-radius:999px; padding:.1rem .5rem;
}
.offr-note { margin-top:.3rem; font-family:"Space Mono",monospace; font-size:.58rem; color:rgb(255 255 255 / .55); }

/* Le toast cohabite avec les boutons flottants WhatsApp / visio, à droite. */
@media (max-width:640px) { .offr { left:12px; right:12px; bottom:12px; width:auto; } }
@media (prefers-reduced-motion:reduce) {
  .offr, .offr-body { animation:none; }
  .offr-badge i, .offr-bar i { animation:none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   orientation : la visionneuse du catalogue occupe tout l'écran. À 780px de
   large on voyait quatre certifications sur 5 500 — on en montre maintenant
   une vingtaine d'un coup, et la barre d'actions reste sous les yeux.
   ══════════════════════════════════════════════════════════════════════════ */
.rncp-full {
  max-width:min(1180px, 96vw); width:96vw;
  height:min(92vh, 980px); max-height:92vh;
  display:flex; flex-direction:column; padding:1.5rem 1.6rem 0;
}
.rncp-full > div[id^="rncp-view"] { display:flex; flex-direction:column; min-height:0; flex:1; }
.rncp-full #rncp-results {
  flex:1; min-height:0; max-height:none; overflow-y:auto;
  grid-template-columns:repeat(auto-fill, minmax(15rem, 1fr));
  align-content:start; padding-right:.3rem;
}
.rncp-full .rncp-modal-search { position:sticky; top:0; z-index:2; background:var(--cloud); padding-bottom:.7rem; }

/* La barre d'actions colle en bas et survit au défilement des résultats */
.rncp-actions {
  position:sticky; bottom:0; z-index:2; flex:none;
  display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  margin:0 -1.6rem; padding:.9rem 1.6rem 1.1rem;
  background:var(--cloud); border-top:1px solid rgb(23 21 15 / .1);
}
.rncp-actions-txt { font-size:.86rem; color:var(--ink-soft); max-width:34ch; margin:0; }
.rncp-actions-btns { display:flex; gap:.5rem; flex-wrap:wrap; }
.rncp-actions-btns .btn { font-size:.82rem; padding:.55rem 1rem; }

@media (max-width:760px) {
  .rncp-full { width:100vw; max-width:100vw; height:100vh; max-height:100vh; border-radius:0; padding:1.1rem 1.1rem 0; }
  .rncp-actions { margin:0 -1.1rem; padding:.8rem 1.1rem 1rem; }
  .rncp-actions-txt { display:none; }
  .rncp-actions-btns { width:100%; }
  .rncp-actions-btns .btn { flex:1; justify-content:center; }
}

/* ═══ Parcours de conversion (page orientation) ═══════════════════════════
   Trois blocs seulement : la preuve sous l'accroche, le calendrier, les
   objections. Le reste de la page réutilise .card/.step/.form existants. */

/* Preuve chiffrée sous l'accroche. Pas un compteur animé : trois faits fixes. */
.fnl-trust{
  list-style:none; display:flex; flex-wrap:wrap; gap:1.6rem 2.4rem;
  margin-top:2.2rem; padding-top:1.6rem; border-top:1px solid var(--mist);
}
.fnl-trust li{ display:flex; flex-direction:column; max-width:11rem; }
.fnl-trust strong{
  font-size:1.5rem; font-weight:700; line-height:1.1;
  color:var(--cyan-700); letter-spacing:-.02em;
}
.fnl-trust span{ font-size:.84rem; color:var(--ink-soft); line-height:1.4; margin-top:.15rem; }

/* Calendrier de l'alternance. La ligne verticale est portée par ::before du
   conteneur et non par chaque puce : sinon elle dépasse sous la dernière. */
.fnl-cal{ list-style:none; position:relative; max-width:44rem; margin:0 auto; padding-left:2.4rem; }
.fnl-cal::before{
  content:""; position:absolute; left:.53rem; top:.7rem; bottom:.7rem; width:2px;
  background:linear-gradient(180deg,var(--cyan-500),var(--mist));
}
.fnl-cal-i{ position:relative; padding-bottom:2rem; }
.fnl-cal-i:last-child{ padding-bottom:0; }
.fnl-cal-i::before{
  content:""; position:absolute; left:-2.4rem; top:.55rem; width:1.15rem; height:1.15rem;
  border-radius:50%; background:var(--cloud); border:3px solid var(--cyan-500);
}
.fnl-cal-t{
  display:inline-block; font-size:.76rem; font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; color:var(--cyan-700);
}
.fnl-cal-i strong{ display:block; font-size:1.12rem; margin:.15rem 0 .3rem; }
.fnl-cal-i p{ color:var(--ink-soft); font-size:.95rem; }

/* Objections. <details> natif : ouverture sans JS, et l'état survit à
   l'impression comme à la navigation clavier. */
.fnl-q{
  border:1px solid var(--mist); border-radius:12px; background:var(--cloud);
  margin-bottom:.7rem; overflow:hidden;
}
.fnl-q summary{
  cursor:pointer; padding:1.05rem 3rem 1.05rem 1.2rem; font-weight:600;
  position:relative; list-style:none; transition:background .18s ease;
}
.fnl-q summary::-webkit-details-marker{ display:none; }
.fnl-q summary:hover{ background:var(--paper); }
.fnl-q summary::after{
  content:""; position:absolute; right:1.2rem; top:50%; width:.6rem; height:.6rem;
  border-right:2px solid var(--cyan-700); border-bottom:2px solid var(--cyan-700);
  transform:translateY(-70%) rotate(45deg);
  /* PAS de transition:transform ici. Vérifié dans le navigateur : sur un
     summary::after, une transition sur transform FIGE la valeur — le pseudo-
     élément ne repasse jamais sur la règle [open] et la flèche reste pointée
     vers le bas, ouvert comme fermé. Sans transition, elle pivote. */
}
.fnl-q[open] summary::after{ transform:translateY(-25%) rotate(-135deg); }
.fnl-q[open] summary{ background:var(--paper); }
.fnl-q p{ padding:0 1.2rem 1.15rem; color:var(--ink-soft); font-size:.95rem; }

@media (max-width:640px){
  .fnl-trust{ gap:1.1rem 1.6rem; }
  .fnl-trust li{ max-width:8.5rem; }
  .fnl-trust strong{ font-size:1.25rem; }
}

/* ═══ Vignette « catalogue RNCP » du hero d'orientation ═══════════════════
   Le balisage a été livré dans 9e47eef SANS son CSS : le <button> s'affichait
   nu, avec sa loupe étirée en pleine page et ses libellés collés bout à bout.
   Le point important est le dimensionnement des SVG — sans width/height, un
   svg sans attribut de taille prend toute la largeur disponible. */
.rncp-preview{
  display:flex; flex-direction:column; align-items:stretch; gap:1rem;
  width:100%; text-align:left; cursor:pointer;
  font:inherit; color:inherit;
  background:rgb(255 255 255 / .78); backdrop-filter:blur(18px);
  border:1px solid rgb(255 255 255 / .85); border-radius:2rem;
  padding:1.7rem; box-shadow:var(--shadow-card);
  transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.rncp-preview:hover{
  transform:translateY(-5px); border-color:rgb(224 168 60 / .6);
  box-shadow:var(--shadow-card-hover);
}
.rncp-preview:focus-visible{ outline:2px solid var(--cyan-500); outline-offset:3px; }

.rncp-preview-stat{
  font-family:"Space Mono",monospace; font-size:.7rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.09em; color:var(--cyan-700);
}
/* Fausse barre de recherche : c'est l'invitation à cliquer. */
.rncp-preview-bar{
  display:flex; align-items:center; gap:.7rem;
  padding:.85rem 1.1rem; border-radius:999px;
  background:var(--paper); border:1px solid var(--mist);
  color:var(--ink-mute); font-size:.94rem; line-height:1.3;
}
.rncp-preview-bar svg{ flex:0 0 auto; width:1.05rem; height:1.05rem; color:var(--cyan-700); }

.rncp-preview-pills{ display:flex; flex-wrap:wrap; gap:.4rem; }
.rncp-preview-pills span{
  font-size:.78rem; padding:.3rem .7rem; border-radius:999px;
  background:var(--mist); color:var(--ink-soft); white-space:nowrap;
}
.rncp-preview-pills span:last-child{ background:transparent; color:var(--ink-mute); padding-left:.2rem; }

.rncp-preview-cta{
  display:flex; align-items:center; gap:.45rem;
  font-weight:600; font-size:.95rem; color:var(--cyan-700);
  padding-top:.9rem; border-top:1px solid var(--mist);
}
.rncp-preview-cta svg{ flex:0 0 auto; width:1rem; height:1rem; transition:transform .25s ease; }
.rncp-preview:hover .rncp-preview-cta svg{ transform:translateX(4px); }

@media (max-width:640px){
  .rncp-preview{ padding:1.3rem; border-radius:1.5rem; }
  .rncp-preview-bar{ font-size:.86rem; padding:.75rem .9rem; }
}

/* Rejoindre l'équipe — parcours formateur ---------------------------------- */
.prose p { color:var(--ink-soft); margin:0 0 1rem; line-height:1.7; }
.prose strong { color:var(--ink); }

/* Blog — index et article ────────────────────────────────────────────────────
   Le blog vit dans /blog/, donc ses pages référencent les assets en chemin
   absolu (/sketch.css) et non relatif : un ?v= suffirait pas à corriger un
   /blog/sketch.css introuvable. */
.blog-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(19rem,1fr)); gap:1.4rem; margin-top:2.6rem; }
.blog-card {
  display:flex; flex-direction:column; gap:.7rem;
  padding:1.6rem; border:1px solid rgb(20 21 26 / .1); border-radius:16px;
  background:#fff; text-decoration:none; color:var(--ink);
  box-shadow:0 1px 2px rgb(20 21 26 / .04);
  transition:transform .25s cubic-bezier(.16,1,.3,1), box-shadow .3s ease, border-color .25s ease;
}
.blog-card:hover { transform:translateY(-3px); border-color:var(--cyan-500); box-shadow:0 18px 38px -20px rgb(20 21 26 / .3); }
.blog-card h3 { font-size:1.12rem; line-height:1.35; margin:0; }
.blog-card p { color:var(--ink-soft); font-size:.95rem; line-height:1.6; margin:0; flex:1; }
.blog-meta { display:flex; flex-wrap:wrap; gap:.5rem 1rem; color:var(--ink-mute); font-size:.82rem; font-family:"Space Mono",monospace; }
.blog-card .blog-more { color:var(--cyan-700); font-weight:600; font-size:.92rem; }

.article { max-width:44rem; margin-inline:auto; }
.article > .blog-meta { margin-bottom:1.6rem; }
.article .prose { font-size:1.06rem; }
.article .prose h2 { font-size:1.4rem; line-height:1.3; margin:2.6rem 0 .9rem; }
.article .prose h3 { font-size:1.12rem; line-height:1.35; margin:2rem 0 .7rem; }
.article .prose ul { margin:0 0 1.2rem; padding-left:1.1rem; color:var(--ink-soft); line-height:1.7; }
.article .prose li { margin-bottom:.5rem; }
.article .prose li::marker { color:var(--cyan-500); }
.article .prose a { color:var(--cyan-700); text-decoration:underline; text-underline-offset:2px; }
.article .prose blockquote {
  margin:1.8rem 0; padding:1.1rem 1.4rem;
  border-left:3px solid var(--cyan-500); background:rgb(224 168 60 / .07);
  border-radius:0 12px 12px 0; color:var(--ink); font-size:1.06rem; line-height:1.65;
}
.article .prose blockquote p:last-child { margin-bottom:0; }
.article-share { display:flex; flex-wrap:wrap; align-items:center; gap:.8rem; margin-top:3rem; padding-top:1.6rem; border-top:1px solid rgb(20 21 26 / .1); }
.article-share span { color:var(--ink-mute); font-size:.9rem; }

.steps-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; margin-top:2.5rem; }
.step-card {
  background:#fff; border:1px solid rgb(11 20 40 / .1); border-radius:1.1rem;
  padding:1.6rem 1.5rem; box-shadow:var(--shadow-card);
}
.step-card h3 { margin:.9rem 0 .5rem; font-size:1.1rem; }
.step-card p { color:var(--ink-soft); font-size:.95rem; margin:0; }
.step-num {
  display:inline-flex; align-items:center; justify-content:center;
  width:2.1rem; height:2.1rem; border-radius:50%;
  background:var(--navy-900); color:var(--cyan-500);
  font-family:"Space Grotesk",sans-serif; font-weight:700;
}

.field-hint { color:var(--ink-mute); font-size:.8rem; }
.field-check label { display:flex; gap:.7rem; align-items:flex-start; font-weight:400; line-height:1.5; }
.field-check input { width:1.05rem; height:1.05rem; margin-top:.15rem; flex:0 0 auto; }

.docs-list { display:grid; gap:.7rem; margin-bottom:1.5rem; }
.doc-row {
  display:grid; grid-template-columns:1fr auto auto; gap:1rem; align-items:center;
  background:#fff; border:1px solid rgb(11 20 40 / .1); border-radius:.9rem; padding:.9rem 1.1rem;
}
.doc-text strong { display:block; font-size:.95rem; color:var(--ink); }
.doc-text small { display:block; color:var(--ink-mute); font-size:.8rem; margin-top:.15rem; }
.doc-state { font-size:.82rem; color:var(--ink-mute); white-space:nowrap; }
.doc-state.doc-ok { color:#15803d; font-weight:600; }
.doc-state.doc-ko { color:#b4342c; font-weight:600; }
/* Le champ natif est masqué mais reste focusable au clavier via son label. */
.doc-input { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
.doc-btn { cursor:pointer; font-size:.85rem; padding:.55rem 1rem; }
.doc-btn[aria-disabled="true"] { opacity:.5; pointer-events:none; }

@media (max-width:860px) {
  .steps-grid { grid-template-columns:1fr; }
  .doc-row { grid-template-columns:1fr; gap:.6rem; }
  .doc-btn { justify-self:start; }
}

/* ── Le contrat dans le modal « rejoindre » ────────────────────────────────
   Le candidat lit, signe et retélécharge sans quitter la fenêtre : la carte
   change d'aspect selon l'état, pour qu'il sache d'un coup d'œil s'il a
   quelque chose à faire. */
.contrat-carte {
  margin-top:1.4rem; padding:1.1rem 1.3rem; border-radius:.9rem;
  border:1px solid var(--cyan-300); background:#faf4e6;
}
.contrat-carte strong { display:block; margin-bottom:.35rem; color:var(--ink); }
.contrat-carte p { color:var(--ink-soft); font-size:.92rem; line-height:1.55; }
.contrat-carte.contrat-signe { border-color:#9fd3b4; background:#f1faf4; }
.contrat-carte.contrat-a-signer { border-color:var(--cyan-500); box-shadow:var(--shadow-glow); }
.contrat-actions { margin:.9rem 0 .2rem; }
.contrat-actions .btn { font-size:.85rem; padding:.55rem 1rem; }
.contrat-label {
  display:block; margin:1rem 0 .35rem; font-size:.85rem;
  font-weight:600; color:var(--ink);
}
.contrat-carte input[type="text"] {
  width:100%; padding:.65rem .8rem; font:inherit; font-size:.92rem;
  border:1px solid rgb(11 20 40 / .18); border-radius:.6rem; background:#fff;
}
/* `touch-action:none` est indispensable : sans lui, un tracé au doigt fait
   défiler le modal au lieu de dessiner. */
.sig-pad {
  display:block; width:100%; height:150px; background:#fff; touch-action:none;
  border:1px dashed var(--cyan-600); border-radius:.6rem; cursor:crosshair;
}
.sig-effacer {
  margin-top:.4rem; background:none; border:0; padding:0; cursor:pointer;
  font:inherit; font-size:.8rem; color:var(--ink-mute); text-decoration:underline;
}
.contrat-check { margin:.9rem 0 1rem; }
.contrat-carte .btn-primary { width:100%; }
.contrat-verif { margin-top:.8rem; font-size:.8rem; color:var(--ink-mute); word-break:break-all; }
.contrat-verif a { color:var(--cyan-700); }