/* ============================================================
   CHARTE EXPERTMALIN 2026 v4 — socle de l'accueil (06/09/2026)
   Jetons, en-tête, pied et boutons repris de www/index.html (commit e65a09b,
   direction indigo/cyan retenue par le user). Chargée dans le <head>, APRÈS
   les <style> locaux de chaque page : ses variables gagnent la cascade.
   Les alias (--orange, --accent, --navy, --em-*) font basculer les pages
   internes sans réécriture de leurs styles locaux.
   ============================================================ */
:root, body {
  --f:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --em-f-titre:var(--f); --em-f-texte:var(--f); --em-f-mono:var(--mono); --f-disp:var(--f); --f-body:var(--f);
  --bg:#F8F9FC; --surface:#FFFFFF; --surface-2:#F1F3F9; --ground:#F8F9FC; --em-fond:#F8F9FC; --em-surface:#FFFFFF; --em-surface-2:#F1F3F9;
  --text:#0B1533; --text-2:#1E2A4A; --muted:#4B5563; --faint:#667085;
  --ink:#0B1533; --ink-2:#1E2A4A; --ink-soft:#4B5563; --ink-faint:#667085; --em-encre:#0B1533; --em-encre-douce:#4B5563; --em-encre-pale:#667085;
  --navy:#0B1533; --navy-2:#1E2A4A; --em-nuit:#0B1533;
  --line:#E4E7EE; --line-soft:#F1F3F9; --line-strong:#C7CCD8; --rule:#E4E7EE; --rule-strong:#C7CCD8; --em-trait:#E4E7EE; --em-trait-fort:#C7CCD8;
  --indigo:#4F46E5; --indigo-deep:#3730A3; --indigo-wash:#EEF2FF; --indigo-line:#C7D2FE;
  --cyan:#06B6D4; --cyan-deep:#0E7490; --cyan-wash:#ECFEFF;
  --grad:linear-gradient(92deg,#4F46E5 0%,#06B6D4 100%);
  --orange:#4F46E5; --orange-deep:#3730A3; --orange-tint:#EEF2FF;
  --accent:#4F46E5; --accent-ink:#3730A3; --accent-wash:#EEF2FF;
  --blue:#4F46E5; --blue-deep:#3730A3; --blue-tint:#EEF2FF;
  --em-marque:#4F46E5; --em-marque-fonce:#3730A3; --em-marque-voile:#EEF2FF; --em-marque-ligne:#C7D2FE;
  --em-action:#4F46E5; --em-action-survol:#3730A3;
  --ok:#047857; --good:#047857; --good-wash:#ECFDF5; --em-ok:#047857; --warn:#B45309; --alert:#B45309; --alert-wash:#FEF3C7;
  --shadow:0 1px 2px rgba(15,23,42,.04),0 12px 32px -16px rgba(15,23,42,.16);
  --shadow-sm:0 1px 2px rgba(15,23,42,.04);
  --shadow-lg:0 2px 4px rgba(15,23,42,.04),0 28px 64px -28px rgba(79,70,229,.28);
  --em-ombre:var(--shadow); --em-ombre-forte:var(--shadow-lg);
  --r:20px; --r-s:14px; --em-rayon:20px; --em-rayon-s:14px; --em-largeur:1180px;
}
body { background:var(--bg); color:var(--text); font-family:var(--f); }
h1,h2,h3,h4 { font-family:var(--f); color:var(--text); letter-spacing:-.025em; }
h1 { letter-spacing:-.035em; line-height:1.04; }
a { color:var(--indigo-deep); }
[hidden]{display:none!important}
.btn:focus-visible,a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--cyan);outline-offset:3px}

/* ---- base reprise de l'accueil ---- */
.wrap{max-width:1180px;margin:0 auto;padding:0 20px}
@media(min-width:720px){.wrap{padding:0 32px}}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11.5px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--indigo-deep);background:var(--indigo-wash);border:1px solid var(--indigo-line);padding:6px 12px;border-radius:999px;margin-bottom:14px}
.eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--cyan)}
.grad-txt{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.em-saut{position:absolute;left:-9999px;top:8px;background:var(--text);color:#fff;padding:10px 16px;border-radius:999px;z-index:200}
.em-saut:focus{left:8px}

/* ---- boutons : primaire indigo, degrade reserve a l'action du premier ecran ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 22px;border-radius:999px;border:1px solid transparent;font-family:var(--f);font-size:15px;font-weight:700;line-height:1.1;letter-spacing:-.01em;text-decoration:none;cursor:pointer;background:var(--indigo);color:#fff;transition:background .15s,border-color .15s,color .15s,box-shadow .15s,transform .15s}
.btn:hover{background:var(--indigo-deep)}
.btn-o,.btn-navy,.btn-blue,.btn-p{background:var(--indigo);color:#fff}
.btn-o:hover,.btn-navy:hover,.btn-blue:hover,.btn-p:hover{background:var(--indigo-deep)}
.btn-grad{background:var(--grad);color:#fff;box-shadow:0 10px 28px -12px rgba(79,70,229,.55)}
.btn-grad:hover{background:var(--grad);filter:saturate(1.15);transform:translateY(-1px)}
.btn-ghost{background:var(--surface);color:var(--text);border-color:var(--line-strong)}
.btn-ghost:hover{background:var(--surface);border-color:var(--indigo);color:var(--indigo-deep)}
.btn-lg{min-height:56px;padding:0 28px;font-size:16px}
.btn:focus-visible,a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--cyan);outline-offset:3px}
.btn[disabled]{opacity:.55;cursor:default}
.lien{font-weight:700;color:var(--indigo-deep);text-decoration:none;border-bottom:2px solid var(--indigo-line)}
.lien:hover{border-bottom-color:var(--indigo)}
button.lien{background:none;border:0;border-bottom:2px solid var(--indigo-line);padding:0;font:inherit;font-weight:700;cursor:pointer;color:var(--indigo-deep)}
.chip{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:11.5px;font-weight:500;padding:5px 10px;border-radius:999px;background:var(--surface);border:1px solid var(--line);color:var(--text-2);white-space:nowrap}
.chip.cy{background:var(--cyan-wash);border-color:#A5F3FC;color:var(--cyan-deep)}
.chip.in{background:var(--indigo-wash);border-color:var(--indigo-line);color:var(--indigo-deep)}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow)}

/* ---- en-tete --------------------------------------------------------------- */
.tete{position:sticky;top:0;z-index:60;background:rgba(248,249,252,.86);backdrop-filter:blur(14px) saturate(160%);border-bottom:1px solid var(--line)}
.tete-in{max-width:1180px;margin:0 auto;padding:10px 20px;display:flex;align-items:center;gap:8px 16px;min-height:64px}
@media(min-width:720px){.tete-in{padding:10px 32px}}
.logo{display:inline-flex;align-items:center;gap:10px;text-decoration:none;flex:0 0 auto}
.logo .mark{width:32px;height:32px;border-radius:10px;background:var(--grad);display:grid;place-items:center;color:#fff;font-weight:800;font-size:12.5px;letter-spacing:-.02em}
.logo .nom{font-weight:800;font-size:18px;letter-spacing:-.03em;color:var(--text);line-height:1;white-space:nowrap}
.logo .nom b{color:var(--indigo)}
.nav{display:flex;align-items:center;gap:2px;flex:1 1 auto;margin-left:8px}
.nav>a,.nav .dd>summary{font-size:14.5px;font-weight:600;color:var(--text-2);text-decoration:none;padding:9px 12px;border-radius:999px;cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.nav .dd>summary::-webkit-details-marker{display:none}
.nav .dd>summary::after{content:"";width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px);opacity:.55}
.nav>a:hover,.nav .dd>summary:hover,.nav .dd[open]>summary{background:rgba(15,23,42,.06);color:var(--text)}
.nav .dd{position:relative}
.nav .dd-p{position:absolute;top:calc(100% + 10px);left:0;min-width:270px;background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:8px;box-shadow:var(--shadow-lg);display:grid;gap:2px;z-index:70}
.nav .dd-p a{display:block;padding:10px 12px;border-radius:12px;color:var(--text);text-decoration:none;font-weight:600;font-size:14.5px}
.nav .dd-p a small{display:block;font-weight:500;color:var(--faint);font-size:12.5px;margin-top:1px}
.nav .dd-p a:hover{background:var(--indigo-wash);color:var(--indigo-deep)}
.nav .dd-p .sep{border-top:1px solid var(--line);margin:6px 4px}
.tete-fin{display:flex;align-items:center;gap:10px;margin-left:auto;flex:0 0 auto}
.tete-fin .apprenant{font-size:14px;font-weight:600;color:var(--muted);text-decoration:none;white-space:nowrap;padding:9px 12px;border-radius:999px}
.tete-fin .apprenant:hover{background:rgba(15,23,42,.06);color:var(--text)}
.tete-fin .btn{min-height:42px;padding:0 18px;font-size:14px}
.mob{display:none}
@media(max-width:959px){
  .nav,.tete-fin .apprenant{display:none}
  .mob{display:block}
  .mob>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:14.5px;padding:9px 14px;border:1px solid var(--line-strong);border-radius:999px;min-height:42px;background:var(--surface)}
  .mob>summary::-webkit-details-marker{display:none}
  .mob>summary::before{content:"";width:16px;height:2px;background:currentColor;box-shadow:0 -5px 0 currentColor,0 5px 0 currentColor}
  .mob[open]>summary::before{box-shadow:none;transform:rotate(45deg)}
  /* panneau en position absolue sous l'en-tete : compatible avec le backdrop-filter, qui fait de l'en-tete le bloc conteneur */
  .mob-p{position:absolute;left:0;right:0;top:100%;max-height:calc(100dvh - 64px);overflow-y:auto;background:var(--bg);border-top:1px solid var(--line);padding:16px 20px 40px;z-index:80;box-shadow:0 30px 60px -30px rgba(15,23,42,.35)}
  .mob-p .btn{width:100%;margin-bottom:12px}
  .mob-p details{border-top:1px solid var(--line)}
  .mob-p details>summary{list-style:none;cursor:pointer;font-weight:700;font-size:16px;padding:14px 0;display:flex;justify-content:space-between;align-items:center}
  .mob-p details>summary::-webkit-details-marker{display:none}
  .mob-p details>summary::after{content:"+";font-size:22px;color:var(--indigo)}
  .mob-p details[open]>summary::after{content:"–"}
  .mob-p details a,.mob-p>a{display:block;padding:10px 0 10px 12px;color:var(--text);text-decoration:none;font-weight:600;font-size:15px}
  .mob-p details a small{display:block;font-weight:500;color:var(--faint);font-size:12.5px}
  .mob-p>a{padding-left:0;border-top:1px solid var(--line);padding-block:14px;font-weight:700;font-size:16px}
  .mob-p .mob-app{color:var(--muted);font-weight:600}
}
@media(max-width:420px){.tete-fin .btn{display:none}.logo .nom{font-size:17px}}


/* ---- pied de page ---------------------------------------------------------- */
.pied{border-top:1px solid var(--line);padding:48px 0 32px;font-size:14px;background:var(--surface)}
.pied-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.pied details>summary{list-style:none;font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);padding-bottom:8px;pointer-events:none}
.pied details>summary::-webkit-details-marker{display:none}
.pied details a{display:block;padding:4px 0;color:var(--text-2);text-decoration:none;font-weight:500}
.pied details a:hover{color:var(--indigo-deep)}
.pied-legal{margin-top:32px;padding-top:20px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:16px 24px;align-items:flex-start;justify-content:space-between}
.pied-legal p{font-size:12.5px;color:var(--faint);max-width:80ch;line-height:1.65}
.pied-legal p a{color:inherit}
.pied-legal img{width:88px;height:auto;flex:0 0 auto}
.pied-liens{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:13px;margin-top:10px}
.pied-liens a{color:var(--muted)}
.social{display:flex;gap:8px;margin-top:10px}
.social a{width:36px;height:36px;border-radius:10px;border:1px solid var(--line);display:grid;place-items:center;color:var(--faint)}
.social a:hover{color:#fff;background:var(--indigo);border-color:var(--indigo)}
.social svg{width:18px;height:18px}
@media(max-width:767px){
  .pied-grid{grid-template-columns:minmax(0,1fr);gap:0}
  .pied details{border-top:1px solid var(--line)}
  .pied details>summary{pointer-events:auto;cursor:pointer;padding:14px 0;display:flex;justify-content:space-between;align-items:center;color:var(--text);font-family:var(--f);font-size:15px;letter-spacing:-.01em;text-transform:none;font-weight:700}
  .pied details>summary::after{content:"+";font-size:20px;color:var(--indigo)}
  .pied details[open]>summary::after{content:"–"}
  .pied details a{padding:6px 0 6px 8px}
  .pied details[open]{padding-bottom:10px}
}


/* ---- pont avec les composants hérités des pages internes ------------------- */
.wrap { max-width:1180px; }
.blk, .band, section.blk { padding-block: clamp(48px, 6vw, 84px); }
.lede { max-width: 62ch; }
.pdoor, .carte, .fcard, .card, .refbox, .callout, .ax > div { border-radius: 20px; }
.pbadge, .badge, .chip { border-radius: 999px; }
.em-btn, .btn-o, .btn-c, .btn-p, .btn-acc, .fcta, .dc-cta, .hero-buy,
body .btn:not(.btn-ghost):not(.btn-g):not(.btn-navy-clair) { background:var(--indigo); color:#fff; border-radius:999px; border-color:transparent; }
.em-btn:hover, .btn-o:hover, .btn-c:hover, .btn-p:hover, .btn-acc:hover, .fcta:hover, .dc-cta:hover, .hero-buy:hover,
body .btn:not(.btn-ghost):not(.btn-g):not(.btn-navy-clair):hover { background:var(--indigo-deep); color:#fff; }
.btn-ghost, .btn-g, .em-btn.ghost, body .btn.btn-ghost, body .btn.btn-g { background:var(--surface); color:var(--text); border:1px solid var(--line-strong); border-radius:999px; }
.btn-ghost:hover, .btn-g:hover, .em-btn.ghost:hover { border-color:var(--indigo); color:var(--indigo-deep); background:var(--surface); }
/* accents de titre : jamais d'italique synthétique, l'accent se fait par la couleur */
[class] h1 .u, .hero h1 .u, h1 .u, [class] h2 .acc, [class] .acc, h2 .acc, .acc { font-style:normal; font-weight:inherit; font-size:1em; letter-spacing:-.02em; color:var(--indigo); }
/* les anciennes barres, sous-navigations et pieds ne doivent plus s'afficher s'il en reste */
.em-tete, .em-sous, .em-pied { display:none!important; }
/* les pages internes définissent parfois .nav / .logo pour une ancienne barre locale : la tête commune s'en protège */
.tete .nav{position:static;background:transparent;backdrop-filter:none;box-shadow:none;border:0;padding:0;z-index:auto;max-width:none}
.tete .logo{gap:10px;padding:0;background:transparent}
.tete .logo .mark{width:32px;height:32px;border-radius:10px;background:var(--grad);display:grid;place-items:center;color:#fff;font-weight:800;font-size:12.5px;letter-spacing:-.02em}
.tete .logo .nom{font-weight:800;font-size:18px;letter-spacing:-.03em;color:var(--text);line-height:1;white-space:nowrap}
.tete .logo .nom b{color:var(--indigo)}
@media(max-width:480px){.pbadge,.badge,.chip{white-space:normal;text-align:left;line-height:1.3}}
/* tableaux larges : ils défilent dans leur propre boîte sur petit écran au lieu de faire défiler la page */
@media(max-width:640px){table{display:block;overflow-x:auto;max-width:100%;-webkit-overflow-scrolling:touch}}
