/* =====================================================================
   CHARTE v2 — Soutenance Bachelor RAC · Théo Corredoura · Micronics Systems
   Thème SOMBRE par défaut, thème CLAIR par bascule (bouton du bandeau).

   Tout se règle ici. Les 7 pages partagent ce fichier.
   Typographie  Archivo (titres, chiffres) · Source Serif 4 (texte)
                IBM Plex Mono (codes de compétences)
   Signature    le trait effilé cyan, repris du logo MicronX
   ===================================================================== */

/* =====================  1. JETONS DE COULEUR  ===================== */
:root{
  /* --- thème sombre (par défaut) --- */
  --papier:#0C1116;        /* fond de page                            */
  --papier-2:#101820;      /* fond légèrement relevé                  */
  --carte:#141C24;         /* fond des cartes                         */
  --carte-2:#18222B;       /* fond des lignes internes                */
  --panneau:#070B0F;       /* les grands aplats sombres (bandeaux)    */
  --encre:#EEF3F7;         /* titres                                  */
  --texte:#B4C1CB;         /* texte courant                           */
  --doux:#7E8D99;          /* texte secondaire                        */
  --trait:#243039;         /* filets                                  */
  --trait-clair:#1C262E;
  --acier:#7FA6BC;
  --cyan:#2EC0F2;          /* accent, redéfini par page               */
  --cyan-vif:#5AD4FF;      /* accent lumineux, redéfini par page       */
  --vert:#4FBF8B;
  --ambre:#E0A23C;
  --rouge:#E2685C;
  --ombre:0 1px 0 rgba(255,255,255,.03), 0 18px 40px -24px rgba(0,0,0,.9);
  --ombre-h:0 1px 0 rgba(255,255,255,.05), 0 26px 60px -28px rgba(0,0,0,1);

  /* --- jetons réservés aux schémas SVG --- */
  --sv-bg:#18222B;  --sv-bg2:#122430;  --sv-line:#2B3A45;
  --sv-ink:#E7EEF3; --sv-mute:#8A98A3;
  --sv-blue:#3FA5DC; --sv-cyan:#2EC0F2; --sv-cyan-vif:#5AD4FF;
  --sv-violet:#A796F5; --sv-ambre:#E8AC4C; --sv-ambre-f:#D08F27;
  --sv-vert:#4FBF8B;  --sv-vert-f:#5FCB99; --sv-rouge:#E2685C;
  --sv-acier:#7FA6BC; --sv-indigo:#6FA4FF;

  /* --- typographie --- */
  --titre:'Archivo',system-ui,sans-serif;
  --texte-f:'Source Serif 4',Georgia,serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --barre:64px;
  --r:6px;                 /* rayon des angles */
}

/* --- thème clair --- */
html[data-theme="clair"]{
  --papier:#F2F1ED; --papier-2:#EDEBE5; --carte:#FFFFFF; --carte-2:#FAF9F6;
  --panneau:#0F1519;
  --encre:#12181B; --texte:#3A4449; --doux:#6F7C83;
  --trait:#DFDDD6; --trait-clair:#EAE8E2;
  --acier:#4A6B7C; --cyan:#0E8FC4; --cyan-vif:#20BCEE;
  --vert:#3F7D5C; --ambre:#9C6B18; --rouge:#B14A42;
  --ombre:0 1px 2px rgba(18,24,27,.04);
  --ombre-h:0 10px 34px -18px rgba(18,24,27,.35);
  --sv-bg:#F5F8FA; --sv-bg2:#EEF6FB; --sv-line:#DBE4EA;
  --sv-ink:#0F2433; --sv-mute:#6C8393;
  --sv-blue:#1B7FB8; --sv-cyan:#0E8FC4; --sv-cyan-vif:#20BCEE;
  --sv-violet:#8E7BE8; --sv-ambre:#D8912F; --sv-ambre-f:#A96A11;
  --sv-vert:#2F8B62; --sv-vert-f:#3F7D5C; --sv-rouge:#C0524A;
  --sv-acier:#4A6B7C; --sv-indigo:#4C8DF6;
}

/* --- une couleur d'accent par page, dans les deux thèmes --- */
body[data-bloc="accueil"]   {--cyan:#2EC0F2;--cyan-vif:#5AD4FF}
body[data-bloc="entreprise"]{--cyan:#79B0CE;--cyan-vif:#9AD0EA}
body[data-bloc="offre"]     {--cyan:#2EC0F2;--cyan-vif:#5AD4FF}
body[data-bloc="operations"]{--cyan:#E0A23C;--cyan-vif:#F5BE63}
body[data-bloc="equipes"]   {--cyan:#45B583;--cyan-vif:#6BD3A4}
body[data-bloc="annexes"]   {--cyan:#79B0CE;--cyan-vif:#9AD0EA}
body[data-bloc="bilan"]     {--cyan:#2EC0F2;--cyan-vif:#5AD4FF}
html[data-theme="clair"] body[data-bloc="accueil"]   {--cyan:#0E8FC4;--cyan-vif:#20BCEE}
html[data-theme="clair"] body[data-bloc="entreprise"]{--cyan:#3F6478;--cyan-vif:#5E8FA8}
html[data-theme="clair"] body[data-bloc="offre"]     {--cyan:#0E8FC4;--cyan-vif:#20BCEE}
html[data-theme="clair"] body[data-bloc="operations"]{--cyan:#A9701C;--cyan-vif:#D8912F}
html[data-theme="clair"] body[data-bloc="equipes"]   {--cyan:#2E7D5B;--cyan-vif:#46A87C}
html[data-theme="clair"] body[data-bloc="annexes"]   {--cyan:#3F6478;--cyan-vif:#5E8FA8}
html[data-theme="clair"] body[data-bloc="bilan"]     {--cyan:#0E8FC4;--cyan-vif:#20BCEE}

/* =====================  2. BASES  ===================== */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--barre) + 30px);background:var(--papier)}
body{
  margin:0;background:var(--papier);color:var(--texte);
  font-family:var(--texte-f);font-size:17.5px;line-height:1.62;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
/* léger halo de fond, il donne de la profondeur au thème sombre */
body::before{
  content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(1100px 620px at 78% -8%, color-mix(in srgb,var(--cyan) 15%,transparent), transparent 62%),
    radial-gradient(900px 520px at 6% 102%, color-mix(in srgb,var(--cyan) 9%,transparent), transparent 60%);
  opacity:.55;transition:opacity .4s;
}
html[data-theme="clair"] body::before{opacity:.30}
img{max-width:100%;display:block}
svg{max-width:100%;height:auto;overflow:visible}
a{color:var(--cyan)}
:focus-visible{outline:2px solid var(--cyan-vif);outline-offset:3px;border-radius:3px}
::selection{background:color-mix(in srgb,var(--cyan) 45%,transparent);color:#fff}

/* le trait effilé, signature reprise du logo */
.courant{
  display:block;height:4px;width:96px;background:var(--cyan-vif);
  clip-path:polygon(0 0, 100% 38%, 100% 62%, 0 100%);
}

/* =====================  3. TRANSITION DE PAGE  ===================== */
@keyframes entree{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
body{animation:entree .45s cubic-bezier(.22,.9,.3,1) both}
html.sortie body{opacity:0;transform:translateY(-8px);transition:opacity .26s ease,transform .26s ease}

/* barre de progression de lecture */
.progres{position:fixed;left:0;top:0;height:3px;width:100%;z-index:80;pointer-events:none;
  background:transparent}
.progres i{display:block;height:100%;width:0%;
  background:linear-gradient(90deg,var(--cyan),var(--cyan-vif));
  box-shadow:0 0 14px color-mix(in srgb,var(--cyan-vif) 70%,transparent)}

/* =====================  4. BANDEAU  ===================== */
.menu{
  position:sticky;top:0;z-index:60;min-height:var(--barre);
  background:color-mix(in srgb,var(--papier) 82%,transparent);
  backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid var(--trait);
  display:flex;align-items:center;padding:0 26px;gap:16px;
}
.menu .logo{flex:none;display:block;line-height:0;padding:4px 0}
.menu .logo img{height:21px;width:auto}
.menu .logo img.clair{display:none}
html[data-theme="clair"] .menu .logo img.sombre{display:none}
html[data-theme="clair"] .menu .logo img.clair{display:block}
.menu .moi{
  font-family:var(--titre);font-size:.86rem;font-weight:600;color:var(--encre);
  letter-spacing:-.005em;white-space:nowrap;
  padding-left:16px;border-left:1px solid var(--trait);
}
.menu .moi small{
  display:block;font-size:.62rem;font-weight:500;letter-spacing:.1em;
  text-transform:uppercase;color:var(--doux);margin-top:1px;
}
.menu nav{display:flex;gap:2px;margin-left:auto;flex-wrap:wrap;justify-content:flex-end}
.menu nav a{
  position:relative;font-family:var(--titre);font-size:.73rem;font-weight:600;
  letter-spacing:.055em;text-transform:uppercase;
  color:var(--doux);text-decoration:none;padding:8px 11px;border-radius:5px;
  white-space:nowrap;transition:color .18s,background .18s;
}
.menu nav a::after{
  content:"";position:absolute;left:11px;right:11px;bottom:3px;height:2px;
  background:var(--cyan-vif);transform:scaleX(0);transform-origin:left;
  transition:transform .25s cubic-bezier(.22,.9,.3,1);
}
.menu nav a:hover{color:var(--encre)}
.menu nav a:hover::after{transform:scaleX(1)}
.menu nav a[aria-current="page"]{color:var(--encre)}
.menu nav a[aria-current="page"]::after{transform:scaleX(1)}

/* bouton de bascule de thème */
.theme-btn{
  flex:none;margin-left:10px;width:38px;height:38px;border-radius:50%;
  border:1px solid var(--trait);background:var(--carte);color:var(--doux);
  display:grid;place-items:center;cursor:pointer;transition:all .2s;
}
.theme-btn:hover{color:var(--cyan-vif);border-color:var(--cyan-vif);transform:rotate(-20deg)}
.theme-btn svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.theme-btn .lune{display:none}
html[data-theme="clair"] .theme-btn .lune{display:block}
html[data-theme="clair"] .theme-btn .soleil{display:none}

@media(max-width:1080px){
  .menu{flex-wrap:wrap;padding:11px 18px;gap:9px 14px}
  .menu nav{margin-left:0;flex-basis:100%;justify-content:flex-start;order:3}
  .theme-btn{margin-left:auto}
  html{scroll-padding-top:24px}
}

/* =====================  5. MISE EN PAGE  ===================== */
.page{width:min(1120px,calc(100% - 64px));margin:0 auto}
main{padding-bottom:90px}
.espace{margin-bottom:30px}
.duo{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.trio{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.quatuor{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}

/* =====================  6. ENTÊTE CINÉMA  ===================== */
.entete{padding:64px 0 40px;margin-bottom:14px}
.entete.sombre{
  background:var(--panneau);color:#C8CFD2;padding:96px 0 84px;margin-bottom:58px;
  position:relative;overflow:hidden;isolation:isolate;
}
/* le fond vidéo */
.cine{position:absolute;inset:0;z-index:-1;overflow:hidden;background:#070B0F}
.cine video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:.85;filter:saturate(120%) contrast(108%);
}
.cine .teinte{position:absolute;inset:0;background:var(--cyan-vif);
  mix-blend-mode:color;opacity:.75}
.cine .voile{
  position:absolute;inset:0;
  background:
    linear-gradient(100deg,rgba(7,11,15,.93) 0%,rgba(7,11,15,.74) 38%,rgba(7,11,15,.18) 70%,rgba(7,11,15,.45) 100%),
    linear-gradient(180deg,rgba(7,11,15,.45),transparent 34%,rgba(7,11,15,.68));
}
.cine .grille{
  position:absolute;inset:0;opacity:.5;
  background:repeating-linear-gradient(90deg,transparent 0 62px,rgba(255,255,255,.035) 62px 63px);
}
.entete.sombre::after{
  content:"";position:absolute;right:-4%;top:26%;width:52%;height:7px;z-index:0;
  background:var(--cyan-vif);opacity:.55;
  clip-path:polygon(0 0, 100% 38%, 100% 62%, 0 100%);
  animation:file-trait 9s ease-in-out infinite alternate;
}
@keyframes file-trait{from{transform:translateX(0);opacity:.35}to{transform:translateX(-4%);opacity:.7}}
.entete.sombre .page{position:relative;z-index:2}
.entete .marque{
  position:absolute;right:2.5%;top:50%;transform:translateY(-50%);z-index:1;
  font-family:var(--titre);font-weight:700;font-size:clamp(7rem,17vw,15rem);
  line-height:.75;color:rgba(255,255,255,.055);letter-spacing:-.06em;
  pointer-events:none;user-select:none;
}
.entete .oeil{
  font-family:var(--titre);font-size:.7rem;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--cyan);margin:0 0 22px;
}
.entete.sombre .oeil{
  color:var(--cyan-vif);display:inline-block;
  border:1px solid rgba(255,255,255,.24);padding:7px 15px;border-radius:99px;
  background:rgba(255,255,255,.04);backdrop-filter:blur(4px);
}
.entete h1{
  font-family:var(--titre);font-weight:600;font-size:clamp(2.1rem,4.6vw,3.4rem);
  line-height:1.03;letter-spacing:-.032em;margin:0 0 22px;color:var(--encre);
  max-width:26ch;
}
.entete.sombre h1{color:#fff;text-shadow:0 2px 30px rgba(0,0,0,.5)}
.entete h1 .sec{
  display:block;font-size:.44em;font-weight:500;color:var(--doux);
  letter-spacing:-.008em;line-height:1.2;margin-top:12px;
}
.entete.sombre h1 .sec{color:#93A2AB}
.entete p{font-size:1.14rem;color:var(--texte);max-width:60ch;margin:0}
.entete.sombre p{color:#B4C1C8}
.entete .courant{margin:28px 0 0;width:120px}
/* apparition en cascade du contenu de l'entête */
.entete.sombre .oeil,.entete.sombre h1,.entete.sombre p,.entete.sombre .courant{
  animation:monte-doux .8s cubic-bezier(.22,.9,.3,1) both}
.entete.sombre h1{animation-delay:.10s}
.entete.sombre p{animation-delay:.20s}
.entete.sombre .courant{animation-delay:.30s}
@keyframes monte-doux{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* =====================  7. TEXTE  ===================== */
h2{
  font-family:var(--titre);font-weight:600;font-size:clamp(1.55rem,2.7vw,2.1rem);
  line-height:1.12;letter-spacing:-.024em;color:var(--encre);margin:70px 0 8px;
}
h2 + .courant{margin:0 0 28px}
h2:first-child{margin-top:0}
h3{font-family:var(--titre);font-weight:600;font-size:1.17rem;line-height:1.28;
  color:var(--encre);margin:0 0 10px;letter-spacing:-.014em}
h4{font-family:var(--titre);font-size:.68rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--cyan);margin:0 0 11px}
p{margin:0 0 14px}
p:last-child{margin-bottom:0}
strong{color:var(--encre);font-weight:600}
em{color:var(--encre)}
.chapo{font-size:1.16rem;line-height:1.58;color:var(--encre);max-width:64ch}
.doux{color:var(--doux)}
.petit{font-size:.94rem}
ul{margin:0 0 14px;padding:0;list-style:none}
li{position:relative;padding-left:20px;margin-bottom:8px;font-size:.97rem;line-height:1.55}
li::before{content:"";position:absolute;left:1px;top:.72em;width:10px;height:2px;
  background:var(--cyan);opacity:.8}
li:last-child{margin-bottom:0}

/* sections numérotées */
main{counter-reset:sec}
main h2{counter-increment:sec;display:flex;align-items:baseline;gap:18px}
main h2::before{
  content:counter(sec,decimal-leading-zero);
  font-family:var(--titre);font-weight:700;font-size:.6em;
  color:var(--cyan);opacity:.5;letter-spacing:-.03em;flex:none;
}
body[data-bloc="accueil"] main h2::before,
body[data-bloc="annexes"] main h2::before{display:none}

/* la phrase d'accroche */
.punch{
  font-family:var(--titre);font-size:1.2rem;font-weight:500;line-height:1.42;
  color:var(--encre);letter-spacing:-.012em;margin:0 0 26px;max-width:72ch;
}
.punch b,.punch strong{font-weight:700;color:var(--encre);
  box-shadow:inset 0 -.42em 0 color-mix(in srgb,var(--cyan-vif) 26%,transparent)}

/* =====================  8. BLOCS  ===================== */
.carte{background:var(--carte);border:1px solid var(--trait);border-radius:var(--r);
  padding:28px 32px;box-shadow:var(--ombre)}
.carte.appui{border-top:3px solid var(--cyan-vif)}
.carte.sombre{background:var(--panneau);border-color:#1B242B;color:#AEBAC1}
.carte.sombre.appui{border-top-color:var(--cyan-vif)}
.carte.sombre h3,.carte.sombre strong,.carte.sombre em{color:#fff}
.carte.sombre h4{color:var(--cyan-vif)}
.carte.sombre li::before{background:var(--cyan-vif)}

/* chiffres clés */
.chiffre{
  position:relative;background:var(--carte);border:1px solid var(--trait);
  border-radius:var(--r);padding:24px 26px;border-top:3px solid var(--cyan-vif);
  box-shadow:var(--ombre);transition:transform .25s,box-shadow .25s,border-color .25s;
}
.chiffre:hover{transform:translateY(-3px);box-shadow:var(--ombre-h)}
.chiffre b{display:block;font-family:var(--titre);font-size:2.45rem;font-weight:600;
  color:var(--encre);line-height:.98;letter-spacing:-.035em;font-feature-settings:'tnum'}
.chiffre span{display:block;font-family:var(--titre);font-size:.65rem;font-weight:600;
  letter-spacing:.11em;text-transform:uppercase;color:var(--doux);margin-top:12px;line-height:1.65}
.chiffre.fort{background:var(--panneau);border-color:#1B242B;border-top-color:var(--cyan-vif)}
.chiffre.fort b{color:#fff}
.chiffre.fort span{color:#8B979D}

/* bandeau de chiffres serré */
.kv{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));margin:0 0 26px}
.kv div{border-top:2px solid var(--cyan-vif);padding-top:14px;
  transition:transform .25s}
.kv div:hover{transform:translateY(-2px)}
.kv b{display:block;font-family:var(--titre);font-size:1.85rem;font-weight:600;
  color:var(--encre);line-height:1;letter-spacing:-.03em;font-feature-settings:'tnum'}
.kv span{display:block;font-family:var(--titre);font-size:.64rem;font-weight:600;
  letter-spacing:.11em;text-transform:uppercase;color:var(--doux);margin-top:9px;line-height:1.6}

/* trois enjeux numérotés */
.enjeux{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.enj{background:var(--carte);border:1px solid var(--trait);border-top:3px solid var(--cyan-vif);
  border-radius:var(--r);padding:26px 28px;position:relative;overflow:hidden;
  box-shadow:var(--ombre);transition:transform .25s,box-shadow .25s}
.enj:hover{transform:translateY(-3px);box-shadow:var(--ombre-h)}
.enj .no{font-family:var(--titre);font-size:3rem;font-weight:700;color:var(--cyan);
  opacity:.24;line-height:.8;letter-spacing:-.05em;display:block;margin-bottom:12px}
.enj h4{color:var(--encre);font-size:.98rem;letter-spacing:-.01em;text-transform:none;
  margin-bottom:8px;font-weight:600}
.enj p{font-size:.93rem;line-height:1.5;color:var(--doux);margin:0}

/* bande pleine largeur */
.bande{
  margin:64px calc(50% - 50vw);width:100vw;
  background:var(--panneau);color:#AEBAC1;padding:58px 0;position:relative;overflow:hidden;
}
.bande::before{
  content:"";position:absolute;inset:0;opacity:.9;
  background:
    radial-gradient(720px 320px at 82% 0%, color-mix(in srgb,var(--cyan) 22%,transparent), transparent 70%),
    repeating-linear-gradient(90deg,transparent 0 60px,rgba(255,255,255,.022) 60px 61px);
}
.bande::after{content:"";position:absolute;left:0;top:0;width:100%;height:3px;
  background:linear-gradient(90deg,var(--cyan-vif),transparent)}
.bande .dedans{width:min(1120px,calc(100% - 64px));margin:0 auto;position:relative;z-index:1}
.bande .oeil{font-family:var(--titre);font-size:.68rem;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--cyan-vif);margin:0 0 16px}
.bande h3{font-family:var(--titre);font-size:clamp(1.5rem,3.1vw,2.15rem);font-weight:600;
  color:#fff;line-height:1.18;letter-spacing:-.022em;margin:0 0 14px;max-width:24ch}
.bande p{color:#95A2A9;max-width:62ch;font-size:1.03rem}
.bande .chiffres{display:grid;gap:24px;grid-template-columns:repeat(auto-fit,minmax(155px,1fr));margin-top:32px}
.bande .chiffres div{border-top:2px solid var(--cyan-vif);padding-top:13px}
.bande .chiffres b{display:block;font-family:var(--titre);font-size:2rem;font-weight:600;color:#fff;
  line-height:1;letter-spacing:-.03em;font-feature-settings:'tnum'}
.bande .chiffres span{display:block;font-family:var(--titre);font-size:.63rem;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:#8B979D;margin-top:10px;line-height:1.6}

/* =====================  9. FICHE COMPÉTENCE  ===================== */
.fiche{
  background:var(--carte);border:1px solid var(--trait);border-left:3px solid var(--cyan-vif);
  border-radius:var(--r);padding:32px 36px 34px;margin-bottom:22px;position:relative;
  box-shadow:var(--ombre);transition:box-shadow .3s,border-color .3s;
}
.fiche:hover{box-shadow:var(--ombre-h)}
.fiche > header{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;
  padding-bottom:18px;margin-bottom:22px;border-bottom:1px solid var(--trait-clair)}
.fiche > header h3{margin:0;flex:1;min-width:240px;font-size:1.35rem}
.fiche > header .badge{
  font-family:var(--mono);font-size:.72rem;font-weight:500;
  color:var(--papier);background:var(--cyan-vif);padding:5px 10px;border-radius:3px;
  letter-spacing:.02em;flex:none;align-self:flex-start;
}
html[data-theme="clair"] .fiche > header .badge{color:#fff;background:var(--cyan)}
.enonce{
  font-size:.93rem;color:var(--doux);line-height:1.55;font-style:italic;
  border-left:2px solid var(--cyan-vif);padding-left:16px;margin:0 0 26px;max-width:82ch;opacity:.92;
}
.tag{display:inline-block;font-family:var(--titre);font-size:.63rem;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;padding:4px 10px;border-radius:99px;
  border:1px solid currentColor}
.tag.fait{color:var(--vert)}
.tag.vu{color:var(--acier)}
.tag.prop{color:var(--ambre)}
.legende{display:flex;flex-wrap:wrap;gap:10px 24px;align-items:center;font-size:.92rem;color:var(--doux)}
.legende .tag{margin-right:8px}
.fiche > .apres{margin-top:28px}
.fiche > .apres > *:first-child{margin-top:0}
.fiche > .apres .tableau{margin-top:0}

/* encart à relire */
.verif{
  background:color-mix(in srgb,var(--ambre) 12%,var(--carte));
  border:1px solid color-mix(in srgb,var(--ambre) 32%,transparent);
  border-left:3px solid var(--ambre);
  border-radius:var(--r);padding:17px 21px;margin-top:24px;font-size:.92rem;
  color:color-mix(in srgb,var(--ambre) 60%,var(--encre));
}
.verif b{display:block;color:var(--ambre);margin-bottom:5px;
  font-family:var(--titre);font-size:.64rem;font-weight:600;
  letter-spacing:.15em;text-transform:uppercase}

/* =====================  10. TABLEAUX  ===================== */
.tableau{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%;
  border:1px solid var(--trait);border-radius:var(--r);background:var(--carte);box-shadow:var(--ombre)}
.tableau table{min-width:max-content}
table{width:100%;border-collapse:collapse;font-size:.95rem}
th{text-align:left;font-family:var(--titre);font-size:.65rem;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;color:var(--doux);background:var(--carte-2);
  padding:15px 20px;border-bottom:1px solid var(--trait);white-space:nowrap}
td{padding:13px 20px;border-bottom:1px solid var(--trait-clair);vertical-align:top}
tbody tr{transition:background .18s}
tbody tr:hover td{background:var(--carte-2)}
tr:last-child td{border-bottom:0}
tr.pivot td{background:color-mix(in srgb,var(--cyan-vif) 13%,var(--carte));
  font-weight:600;color:var(--encre)}
.num{font-family:var(--titre);font-size:.94rem;font-feature-settings:'tnum';white-space:nowrap}
.droite{text-align:right}
.mr th:first-child{width:46%;color:var(--cyan)}
.mr th:last-child{color:var(--vert)}
.mr td{font-size:.95rem;line-height:1.5}
.mr td:first-child{border-right:1px solid var(--trait-clair)}

/* =====================  11. VISUELS  ===================== */
.visuel{
  background:var(--carte);border:1px solid var(--trait);border-radius:var(--r);
  padding:30px 32px 26px;margin-bottom:28px;box-shadow:var(--ombre);
  position:relative;
}
.visuel::before{
  content:"";position:absolute;left:0;top:0;width:100%;height:1px;
  background:linear-gradient(90deg,var(--cyan-vif),transparent 55%);opacity:.7;
}
.visuel > svg{display:block;margin-inline:auto}

/* --- histogramme SVG : les colonnes poussent --- */
.barres-svg svg rect{transform-box:fill-box;transform-origin:bottom center}
.barres-svg.vu svg rect{animation:pousse .85s cubic-bezier(.22,.9,.3,1) backwards}
.barres-svg.vu svg rect:nth-of-type(1){animation-delay:.05s}
.barres-svg.vu svg rect:nth-of-type(2){animation-delay:.13s}
.barres-svg.vu svg rect:nth-of-type(3){animation-delay:.21s}
.barres-svg.vu svg rect:nth-of-type(4){animation-delay:.29s}
.barres-svg.vu svg rect:nth-of-type(5){animation-delay:.37s}
.barres-svg.vu svg rect:nth-of-type(6){animation-delay:.45s}
.barres-svg.vu svg rect:nth-of-type(7){animation-delay:.53s}
.barres-svg.vu svg rect:nth-of-type(8){animation-delay:.61s}
.barres-svg svg text.val{animation:parait2 .6s ease backwards .7s}
@keyframes pousse{from{transform:scaleY(0);opacity:.2}}

.visuel > .titre{
  font-family:var(--titre);font-size:.68rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--doux);margin:0 0 24px;
  display:flex;align-items:center;gap:12px;
}
.visuel > .titre::after{content:"";flex:1;height:1px;background:var(--trait)}
.visuel .note{font-size:.95rem;color:var(--doux);margin:22px 0 0;max-width:78ch;
  padding-top:16px;border-top:1px solid var(--trait-clair)}
.visuel text{font-family:'Archivo',sans-serif;fill:var(--texte)}
.visuel .lab{font-family:'Archivo',sans-serif;font-size:11px;font-weight:600;
  letter-spacing:.09em;text-transform:uppercase;fill:var(--doux)}
.visuel .val{font-family:'Archivo',sans-serif;font-size:13.5px;font-weight:600;fill:var(--encre)}

/* --- cascade --- */
.casc.vu .bloc rect{transform-box:fill-box;transform-origin:top center;
  animation:tombe .7s cubic-bezier(.22,.9,.3,1) backwards;animation-delay:calc(var(--i)*.14s)}
@keyframes tombe{from{transform:scaleY(0);opacity:0}}
.casc .bloc text{animation:parait2 .5s ease backwards;animation-delay:calc(var(--i)*.14s + .2s)}
.casc .fil{stroke:var(--trait);stroke-dasharray:3 4}

/* --- courbe de stock --- */
.stock .courbe{fill:none;stroke:var(--cyan-vif);stroke-width:2.6;stroke-linejoin:round;
  stroke-dasharray:100;stroke-dashoffset:100;
  filter:drop-shadow(0 0 6px color-mix(in srgb,var(--cyan-vif) 55%,transparent))}
.stock.vu .courbe{animation:trace 3.2s linear forwards .3s}
@keyframes trace{to{stroke-dashoffset:0}}
.stock .seuil{stroke-dasharray:5 5}
.stock .decl{opacity:0;transform-box:fill-box;transform-origin:center}
.stock.vu .decl{animation:pop .55s cubic-bezier(.2,1.4,.4,1) forwards}
@keyframes pop{from{transform:scale(.2);opacity:0}to{transform:scale(1);opacity:1}}

/* --- roue PESTEL --- */
.roue-zone{display:grid;gap:34px;grid-template-columns:minmax(240px,340px) 1fr;align-items:center}
@media(max-width:900px){.roue-zone{grid-template-columns:1fr}}
.roue{filter:drop-shadow(0 12px 30px rgba(0,0,0,.35))}
.roue g[data-axe]{cursor:pointer;transform-box:fill-box;transform-origin:176px 176px;
  transition:transform .25s cubic-bezier(.22,.9,.3,1)}
.roue g[data-axe] path{transition:filter .25s,opacity .25s}
.roue g[data-axe]:hover path,.roue g.on path{filter:brightness(1.22) saturate(115%)}
.roue g[data-axe]:hover,.roue g.on{transform:scale(1.045)}
.roue .lettre{font-family:'Archivo',sans-serif;font-weight:700;font-size:22px;fill:#fff;
  pointer-events:none;letter-spacing:.02em}
.roue-txt .item{
  border-left:3px solid var(--trait);padding:10px 0 10px 16px;margin-bottom:5px;
  cursor:pointer;transition:background .18s,transform .18s;border-radius:0 3px 3px 0;
}
.roue-txt .item h5{margin:0 0 3px;font-family:var(--titre);font-size:.96rem;
  font-weight:600;color:var(--encre)}
.roue-txt .item p{margin:0;font-size:.91rem;line-height:1.5;color:var(--doux)}
.roue-txt .item.on,.roue-txt .item:hover{background:var(--carte-2);transform:translateX(4px)}

/* --- jauges d'objectifs --- */
.jauge{background:var(--carte);border:1px solid var(--trait);border-radius:var(--r);
  padding:26px 28px;border-top:3px solid var(--cyan-vif);box-shadow:var(--ombre)}
.jauge .tt{font-family:var(--titre);font-weight:600;font-size:1.08rem;
  color:var(--encre);margin:0 0 4px;letter-spacing:-.012em}
.jauge .sub{font-size:.88rem;color:var(--doux);margin:0 0 18px}
.jauge .val{display:flex;align-items:baseline;gap:10px;margin-bottom:14px}
.jauge .de{font-family:var(--titre);font-size:1.05rem;color:var(--doux);font-feature-settings:'tnum'}
.jauge .fl{color:var(--cyan)}
.jauge .a{font-family:var(--titre);font-size:1.9rem;font-weight:600;color:var(--encre);
  line-height:1;letter-spacing:-.03em;font-feature-settings:'tnum'}
.jauge .piste{height:9px;background:var(--carte-2);position:relative;overflow:hidden;border-radius:99px}
.jauge .acquis{position:absolute;left:0;top:0;height:100%;background:var(--trait);width:0}
.jauge.vu .acquis{width:calc(100% - var(--p));transition:width 1s cubic-bezier(.22,.9,.3,1)}
.jauge .reste{position:absolute;right:0;top:0;height:100%;background:var(--cyan-vif);width:0;
  box-shadow:0 0 12px color-mix(in srgb,var(--cyan-vif) 70%,transparent)}
.jauge.vu .reste{width:var(--p);transition:width 1s cubic-bezier(.22,.9,.3,1) .2s}
.jauge .base{display:flex;justify-content:space-between;margin-top:10px;
  font-family:var(--titre);font-size:.64rem;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--doux)}
.jauge .e{margin:16px 0 0;font-size:.9rem;color:var(--doux);
  border-top:1px solid var(--trait-clair);padding-top:13px}
.jauge .e b{color:var(--vert)}

/* --- frise en étapes --- */
.frise{display:grid;gap:0;grid-template-columns:repeat(auto-fit,minmax(165px,1fr));
  background:var(--carte-2);border:1px solid var(--trait);border-radius:var(--r);overflow:hidden}
.frise .et{padding:24px 22px 26px;border-right:1px solid var(--trait);position:relative;
  transition:background .2s}
.frise .et:last-child{border-right:0}
.frise .et:hover{background:var(--carte)}
.frise .et .n{font-family:var(--mono);font-size:.68rem;font-weight:500;color:var(--cyan);
  display:block;margin-bottom:11px}
.frise .et h5{margin:0 0 7px;font-family:var(--titre);font-size:.99rem;font-weight:600;color:var(--encre)}
.frise .et p{margin:0;font-size:.88rem;line-height:1.5;color:var(--doux)}
.frise .et::before{content:"";position:absolute;left:0;top:0;width:100%;height:3px;
  background:var(--cyan-vif);opacity:0;transition:opacity .25s}
.frise .et:hover::before{opacity:1}

/* --- pas à pas vertical --- */
.etapes{border-left:1px solid var(--trait);padding-left:28px;margin:0}
.etapes .p{position:relative;padding-bottom:24px}
.etapes .p:last-child{padding-bottom:0}
.etapes .p::before{content:"";position:absolute;left:-33px;top:8px;width:10px;height:10px;
  background:var(--carte);border:2px solid var(--cyan)}
.etapes h5{margin:0 0 4px;font-family:var(--titre);font-size:1rem;font-weight:600;color:var(--encre)}
.etapes p{margin:0;font-size:.95rem;color:var(--doux)}

/* --- PESTEL en cartes --- */
.pestel{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.pes{background:var(--carte);border:1px solid var(--trait);border-top:3px solid var(--k);
  border-radius:var(--r);padding:18px 20px}
.pes h5{margin:0 0 6px;font-family:var(--titre);font-size:.95rem;font-weight:600;color:var(--encre)}
.pes p{margin:0;font-size:.89rem;line-height:1.5;color:var(--doux)}

/* --- barres horizontales --- */
.barres{display:grid;gap:12px}
.br{display:grid;grid-template-columns:minmax(120px,26%) 1fr auto;gap:16px;align-items:center}
.br .l{font-family:var(--titre);font-size:.87rem;font-weight:600;color:var(--encre);
  text-align:right;line-height:1.3}
.br .piste{height:24px;background:var(--carte-2);position:relative;overflow:hidden;border-radius:3px}
.br .b{position:absolute;left:0;top:0;height:100%;width:0;
  background:linear-gradient(90deg,color-mix(in srgb,var(--k) 60%,transparent),var(--k));
  box-shadow:0 0 14px -2px var(--k)}
.br .b::after{content:"";position:absolute;right:0;top:0;bottom:0;width:2px;background:#fff;opacity:.55}
.anim.vu .br .b{width:var(--p);transition:width 1s cubic-bezier(.22,.9,.3,1);
  transition-delay:calc(var(--i)*.12s)}
.br .v{font-family:var(--titre);font-size:.94rem;font-weight:600;color:var(--encre);
  font-feature-settings:'tnum';min-width:74px}
@media(max-width:620px){.br{grid-template-columns:1fr auto;gap:6px 12px}
  .br .l{text-align:left;grid-column:1/-1}}

/* --- chaîne de déclenchement --- */
.flux{display:grid;gap:9px}
.flux .entetes,.flux .fl{display:grid;grid-template-columns:170px 32px 1fr 32px 1fr;gap:12px;align-items:center}
.flux .entetes span{font-family:var(--titre);font-size:.62rem;font-weight:600;letter-spacing:.15em;
  text-transform:uppercase;color:var(--doux);padding-bottom:4px}
.flux .fl{background:var(--carte-2);border:1px solid var(--trait-clair);padding:13px 17px;
  border-radius:4px;opacity:0;transform:translateX(-10px);transition:border-color .2s}
.flux .fl:hover{border-color:color-mix(in srgb,var(--cyan) 45%,transparent)}
.anim.vu .flux .fl{animation:glisse .55s cubic-bezier(.22,.9,.3,1) forwards;
  animation-delay:calc(var(--i)*.14s)}
@keyframes glisse{to{opacity:1;transform:none}}
.flux .src{font-family:var(--titre);font-size:.76rem;font-weight:600;letter-spacing:.04em;
  text-transform:uppercase;color:var(--cyan)}
.flux .sig{font-size:.93rem;line-height:1.4}
.flux .act{font-size:.93rem;line-height:1.4;color:var(--encre);font-weight:600;font-family:var(--titre)}
.flux .fleche{position:relative;height:2px;background:var(--trait);overflow:hidden}
.flux .fleche i{position:absolute;top:-2px;left:-8px;width:8px;height:6px;background:var(--cyan-vif);
  clip-path:polygon(0 0,100% 50%,0 100%)}
.anim.vu .flux .fleche i{animation:file 1.7s linear infinite;animation-delay:calc(var(--i)*.2s)}
@keyframes file{to{left:110%}}
@media(max-width:780px){
  .flux .entetes{display:none}
  .flux .fl{grid-template-columns:1fr;gap:6px}
  .flux .fleche{display:none}
}

/* --- méthodologie → résultat --- */
.mrv{border:1px solid var(--trait);border-radius:var(--r);background:var(--carte);overflow:hidden;
  box-shadow:var(--ombre)}
.mrv-tete,.mrv-l{display:grid;grid-template-columns:38px 1fr 40px 1fr;gap:0 14px;align-items:center;padding:0 22px}
.mrv-tete{padding-top:14px;padding-bottom:12px;border-bottom:1px solid var(--trait);background:var(--carte-2)}
.mrv-tete span{font-family:var(--titre);font-size:.63rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--doux)}
.mrv-tete span:nth-child(1){color:var(--cyan)}
.mrv-tete span:nth-child(2){grid-column:2}
.mrv-tete span:nth-child(3){grid-column:4;color:var(--vert)}
.mrv-l{padding-top:15px;padding-bottom:15px;border-bottom:1px solid var(--trait-clair);
  opacity:0;transform:translateX(-8px);transition:background .18s}
.mrv-l:hover{background:var(--carte-2)}
.mrv-l:last-child{border-bottom:0}
.anim.vu .mrv-l{animation:glisse .5s cubic-bezier(.22,.9,.3,1) forwards;animation-delay:calc(var(--i)*.11s)}
.mrv .n{font-family:var(--mono);font-size:.7rem;color:var(--papier);background:var(--cyan-vif);
  width:27px;height:27px;display:grid;place-items:center;border-radius:3px;font-weight:600}
html[data-theme="clair"] .mrv .n{color:#fff;background:var(--cyan)}
.mrv .m{font-size:.95rem;line-height:1.45}
.mrv .r{font-size:.95rem;line-height:1.45;color:var(--encre)}
.mrv .r b{font-family:var(--titre);font-weight:600;color:var(--vert)}
.mrv .fl{position:relative;height:2px;background:var(--trait);overflow:hidden}
.mrv .fl i{position:absolute;top:-2px;left:-8px;width:8px;height:6px;background:var(--cyan-vif);
  clip-path:polygon(0 0,100% 50%,0 100%)}
.anim.vu .mrv .fl i{animation:file 2s linear infinite;animation-delay:calc(var(--i)*.18s)}
@media(max-width:740px){
  .mrv-tete{display:none}
  .mrv-l{grid-template-columns:30px 1fr;gap:4px 12px;padding:15px 16px}
  .mrv .fl{display:none}
  .mrv .r{grid-column:2;padding-top:5px;border-top:1px dashed var(--trait);margin-top:7px}
  .mrv .r::before{content:"→ ";color:var(--cyan)}
}

/* --- chronologie horizontale --- */
.chrono-h{position:relative;padding:36px 0 8px}
.chrono-h .rail{position:absolute;left:0;right:0;top:46px;height:2px;background:var(--trait)}
.chrono-h .rail i{position:absolute;left:0;top:0;height:100%;width:0;
  background:linear-gradient(90deg,var(--cyan),var(--cyan-vif));
  box-shadow:0 0 12px color-mix(in srgb,var(--cyan-vif) 60%,transparent)}
.anim.vu .chrono-h .rail i{width:100%;transition:width 1.8s cubic-bezier(.3,.8,.4,1) .2s}
.chrono-h .pts{display:grid;gap:10px;grid-template-columns:repeat(6,minmax(0,1fr))}
.chrono-h .pt{position:relative;padding-top:34px;opacity:0}
.anim.vu .chrono-h .pt{animation:parait2 .5s ease forwards;animation-delay:calc(var(--i)*.2s + .3s)}
@keyframes parait2{to{opacity:1}}
.chrono-h .pt::before{content:"";position:absolute;left:0;top:8px;width:13px;height:13px;border-radius:50%;
  background:var(--carte);border:2px solid var(--cyan)}
.chrono-h .pt.fin::before{background:var(--cyan-vif);border-color:var(--cyan-vif);
  box-shadow:0 0 0 5px color-mix(in srgb,var(--cyan-vif) 22%,transparent)}
.chrono-h .q{position:absolute;top:-24px;left:0;font-family:var(--mono);font-size:.72rem;
  font-weight:500;color:var(--cyan);white-space:nowrap}
.chrono-h .pt h5{margin:0 0 4px;font-family:var(--titre);font-size:.93rem;font-weight:600;
  color:var(--encre);line-height:1.25}
.chrono-h .pt p{margin:0;font-size:.82rem;line-height:1.4;color:var(--doux)}
@media(max-width:840px){
  .chrono-h .pts{grid-template-columns:repeat(3,minmax(0,1fr));gap:26px 14px}
  .chrono-h .rail{display:none}
}
@media(max-width:560px){.chrono-h .pts{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* --- statut en place / à formaliser --- */
.statut{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.st{display:grid;grid-template-columns:28px 1fr;gap:13px;align-items:start;
  padding:15px 17px;background:var(--carte-2);border:1px solid var(--trait-clair);
  border-radius:4px;opacity:0;transform:translateY(8px);transition:border-color .2s}
.st:hover{border-color:var(--trait)}
.anim.vu .st{animation:monte .5s cubic-bezier(.22,.9,.3,1) forwards;animation-delay:calc(var(--i)*.09s)}
.st .ic{width:28px;height:28px;display:grid;place-items:center;border-radius:50%;
  font-size:.82rem;font-weight:700;color:#fff}
.st.ok .ic{background:var(--vert);box-shadow:0 0 0 4px color-mix(in srgb,var(--vert) 16%,transparent)}
.st.ok .ic::before{content:"✓"}
.st.a-faire .ic{background:transparent;border:2px dashed var(--ambre);color:var(--ambre)}
.st.a-faire .ic::before{content:"+"}
.st.risque .ic{background:var(--rouge)}
.st.risque .ic::before{content:"!"}
.st h5{margin:0 0 3px;font-family:var(--titre);font-size:.93rem;font-weight:600;color:var(--encre)}
.st p{margin:0;font-size:.86rem;line-height:1.45;color:var(--doux)}

/* --- bascule avant / après --- */
.bascule{display:grid;gap:0;border:1px solid var(--trait);background:var(--carte);border-radius:var(--r);overflow:hidden}
.bascule .bl{display:grid;grid-template-columns:1fr 46px 1fr;gap:0 16px;align-items:center;
  padding:16px 22px;border-bottom:1px solid var(--trait-clair);
  opacity:0;transform:translateX(-8px);transition:background .18s}
.bascule .bl:hover{background:var(--carte-2)}
.bascule .bl:last-child{border-bottom:0}
.anim.vu .bascule .bl{animation:glisse .5s cubic-bezier(.22,.9,.3,1) forwards;animation-delay:calc(var(--i)*.11s)}
.bascule .av{font-size:.94rem;color:var(--doux);text-align:right}
.bascule .ap{font-size:.94rem;color:var(--encre);font-family:var(--titre);font-weight:600}
.bascule .fl{position:relative;height:2px;background:var(--trait);overflow:hidden}
.bascule .fl i{position:absolute;top:-2px;left:-8px;width:8px;height:6px;
  background:var(--cyan-vif);clip-path:polygon(0 0,100% 50%,0 100%)}
.anim.vu .bascule .fl i{animation:file 2s linear infinite;animation-delay:calc(var(--i)*.2s)}
.bascule .tete{display:grid;grid-template-columns:1fr 46px 1fr;gap:0 16px;padding:13px 22px;
  background:var(--carte-2);border-bottom:1px solid var(--trait)}
.bascule .tete span{font-family:var(--titre);font-size:.63rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--doux)}
.bascule .tete span:first-child{text-align:right}
.bascule .tete span:last-child{color:var(--cyan)}
@media(max-width:640px){
  .bascule .bl,.bascule .tete{grid-template-columns:1fr;gap:5px}
  .bascule .av{text-align:left}
  .bascule .fl{display:none}
  .bascule .ap::before{content:"→ ";color:var(--cyan)}
}

/* --- comparaison à verdict --- */
.compare{border:1px solid var(--trait);background:var(--carte);border-radius:var(--r);overflow:hidden}
.compare .cl{display:grid;grid-template-columns:34px 1fr 1fr auto;gap:16px;align-items:center;
  padding:17px 22px;border-bottom:1px solid var(--trait-clair)}
.compare .cl:last-child{border-bottom:0}
.compare .cl.retenue{background:color-mix(in srgb,var(--vert) 12%,var(--carte))}
.compare .no{font-family:var(--mono);font-size:.74rem;color:var(--doux)}
.compare .nom{font-family:var(--titre);font-size:.97rem;font-weight:600;color:var(--encre)}
.compare .arg{font-size:.9rem;color:var(--doux);line-height:1.4}
.compare .verdict{font-family:var(--titre);font-size:.68rem;font-weight:600;letter-spacing:.11em;
  text-transform:uppercase;padding:5px 12px;border-radius:99px;white-space:nowrap}
.compare .verdict.non{background:color-mix(in srgb,var(--rouge) 18%,transparent);color:var(--rouge)}
.compare .verdict.moyen{background:color-mix(in srgb,var(--ambre) 18%,transparent);color:var(--ambre)}
.compare .verdict.oui{background:var(--vert);color:#fff}
@media(max-width:740px){.compare .cl{grid-template-columns:34px 1fr;gap:6px 14px}
  .compare .arg,.compare .verdict{grid-column:2}}

/* --- boucle de pilotage --- */
.boucle .et{opacity:0;transform-box:fill-box;transform-origin:center}
.boucle.vu .et{animation:pop .55s cubic-bezier(.2,1.4,.4,1) forwards;animation-delay:calc(var(--i)*.18s)}
.boucle .fleche{stroke:var(--cyan);stroke-width:1.8;fill:none;opacity:.6;
  stroke-dasharray:200;stroke-dashoffset:200}
.boucle.vu .fleche{animation:trace 1.4s ease forwards .3s}

/* --- plan de stand --- */
.plan .zone{opacity:0}
.plan.vu .zone{animation:parait2 .55s ease forwards;animation-delay:calc(var(--i)*.14s)}
.plan .flux-visite{stroke:var(--cyan-vif);stroke-width:2.5;fill:none;stroke-dasharray:6 5;
  filter:drop-shadow(0 0 4px color-mix(in srgb,var(--cyan-vif) 60%,transparent))}
.plan.vu .flux-visite{animation:defile 1.6s linear infinite}
@keyframes defile{to{stroke-dashoffset:-22}}

/* révélation générique */
.anim .frise .et,.anim .etapes .p{opacity:0;transform:translateY(8px)}
.anim.vu .frise .et,.anim.vu .etapes .p{
  animation:monte .55s cubic-bezier(.22,.9,.3,1) forwards;animation-delay:calc(var(--i,0)*.1s)}
@keyframes monte{to{opacity:1;transform:none}}

/* révélation au scroll des blocs de contenu */
.rev{opacity:0;transform:translateY(22px);
  transition:opacity .7s cubic-bezier(.22,.9,.3,1),transform .7s cubic-bezier(.22,.9,.3,1)}
.rev.vu{opacity:1;transform:none}

/* =====================  12. SOMMAIRE DE L'ACCUEIL  ===================== */
.som{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(330px,1fr))}
.som-bloc{
  background:var(--carte);border:1px solid var(--trait);border-radius:var(--r);
  padding:30px 32px 26px;display:flex;flex-direction:column;position:relative;overflow:hidden;
  box-shadow:var(--ombre);transition:border-color .25s,transform .25s,box-shadow .25s;
}
.som-bloc::before{
  content:"";position:absolute;left:0;top:0;height:3px;width:100%;
  background:linear-gradient(90deg,var(--cyan-vif),transparent);
  transform:scaleX(0);transform-origin:left;transition:transform .4s cubic-bezier(.22,.9,.3,1);
}
.som-bloc:hover{border-color:color-mix(in srgb,var(--cyan) 45%,transparent);
  transform:translateY(-4px);box-shadow:var(--ombre-h)}
.som-bloc:hover::before{transform:scaleX(1)}
.som-bloc > a.tete{display:block;text-decoration:none;margin-bottom:18px}
.som-bloc .n{font-family:var(--titre);font-size:.66rem;font-weight:600;
  letter-spacing:.17em;text-transform:uppercase;color:var(--cyan);display:block;margin-bottom:10px}
.som-bloc .tete h3{margin:0 0 13px;font-size:1.24rem;transition:color .18s;letter-spacing:-.018em}
.som-bloc > a.tete:hover h3{color:var(--cyan)}
.som-bloc .tete .courant{width:56px;height:3px}
.som-bloc .theme{font-family:var(--titre);font-size:.63rem;font-weight:600;
  letter-spacing:.15em;text-transform:uppercase;color:var(--doux);
  margin:18px 0 6px;padding-top:12px;border-top:1px solid var(--trait-clair)}
.som-bloc .theme:first-of-type{margin-top:4px}
.som-liste{list-style:none;margin:0;padding:0}
.som-liste li{padding:0;margin:0}
.som-liste li::before{display:none}
.som-liste a{display:grid;grid-template-columns:48px 1fr;gap:10px;align-items:baseline;
  text-decoration:none;color:var(--texte);padding:7px 10px;margin:0 -10px;border-radius:4px;
  font-size:.95rem;line-height:1.42;transition:background .16s,color .16s,transform .16s}
.som-liste a:hover{background:var(--carte-2);color:var(--encre);transform:translateX(3px)}
.som-liste a .c{font-family:var(--mono);font-size:.72rem;color:var(--cyan);opacity:.95}
.som-bloc .bas{margin-top:auto;padding-top:18px;font-size:.89rem;color:var(--doux)}
.som-bloc .bas a{font-family:var(--titre);font-size:.68rem;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;text-decoration:none}
.som-bloc .bas a:hover{text-decoration:underline}

/* =====================  13. NAVIGATION DE BAS DE PAGE  ===================== */
.suite{display:flex;gap:18px;flex-wrap:wrap;justify-content:space-between;
  margin-top:70px;padding-top:32px;border-top:1px solid var(--trait)}
.suite a{flex:1;min-width:250px;text-decoration:none;background:var(--carte);
  border:1px solid var(--trait);border-radius:var(--r);padding:20px 24px;
  transition:border-color .22s,transform .22s,box-shadow .22s}
.suite a:hover{border-color:var(--cyan);transform:translateY(-3px);box-shadow:var(--ombre-h)}
.suite a span{display:block;font-family:var(--titre);font-size:.64rem;font-weight:600;
  letter-spacing:.15em;text-transform:uppercase;color:var(--doux);margin-bottom:7px}
.suite a strong{display:block;font-family:var(--titre);font-size:1.07rem;
  color:var(--encre);font-weight:600;letter-spacing:-.016em}
.suite .droite{text-align:right}
.pied{margin-top:40px;font-size:.88rem;color:var(--doux)}

/* aide clavier discrète */
.clavier{position:fixed;right:18px;bottom:16px;z-index:70;
  font-family:var(--titre);font-size:.63rem;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--doux);background:color-mix(in srgb,var(--carte) 90%,transparent);
  border:1px solid var(--trait);border-radius:99px;padding:7px 14px;
  backdrop-filter:blur(8px);opacity:.6;transition:opacity .3s;pointer-events:none}
.clavier b{color:var(--cyan);font-weight:700}
@media(max-width:820px){.clavier{display:none}}

/* =====================  14. IMPRESSION  ===================== */
@media print{
  .menu,.suite,.progres,.clavier,.cine,.theme-btn{display:none}
  html{--papier:#fff;--carte:#fff;--carte-2:#fff;--encre:#000;--texte:#222;--doux:#555;
    --trait:#ccc;--trait-clair:#e2e2e2;
    --sv-bg:#F5F8FA;--sv-bg2:#EEF6FB;--sv-line:#DBE4EA;--sv-ink:#0F2433;--sv-mute:#6C8393;
    --sv-blue:#1B7FB8;--sv-cyan:#0E8FC4;--sv-cyan-vif:#20BCEE;--sv-violet:#8E7BE8;
    --sv-ambre:#D8912F;--sv-ambre-f:#A96A11;--sv-vert:#2F8B62;--sv-vert-f:#3F7D5C;
    --sv-rouge:#C0524A;--sv-acier:#4A6B7C;--sv-indigo:#4C8DF6}
  body{background:#fff;font-size:10.5pt;animation:none}
  body::before{display:none}
  .entete{padding:0 0 24px}
  .entete.sombre{background:#fff;color:#000;padding:0 0 24px;margin-bottom:24px}
  .entete.sombre h1,.entete.sombre p{color:#000}
  .entete.sombre::after,.entete .marque{display:none}
  .bande{margin:24px 0;width:auto;background:#fff;color:#000}
  .bande h3{color:#000}
  .bande::before,.bande::after{display:none}
  .bande .chiffres b{color:#000}
  .fiche,.visuel,.carte,.som-bloc{break-inside:avoid;box-shadow:none}
  .rev{opacity:1;transform:none}
  *{animation:none!important}
}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .stock .courbe{stroke-dashoffset:0}
  .rev{opacity:1;transform:none}
  .cine video{display:none}
}

/* tableaux larges sur petit écran */
@media(max-width:640px){
  .page{width:calc(100% - 34px)}
  .tableau table{min-width:0;font-size:.88rem}
  th,td{padding:11px 13px;white-space:normal}
  .num{white-space:normal}
  .fiche{padding:24px 20px 26px}
  .visuel{padding:22px 18px 20px}
}