/* Concept : un plan d'entrepôt. Chaque classe est une « zone » signalée
   comme une allée (lettre sur panneau), chaque jeu une carte-étiquette. */
:root{
  --sol:#F2F4F3;          /* fond de page, gris légèrement vert */
  --carte:#FFFFFF;
  --encre:#172033;        /* texte principal, bleu nuit */
  --doux:#5B6577;         /* texte secondaire */
  --trait:#DCE1E2;
  --trait-fort:#C3CACD;
  --accent:#E4570F;       /* orange sécurité */
  --accent-fonce:#B8430A;
  --accent-pale:#FDEDE3;
  --ok:#0F8A5F; --ok-pale:#E2F4EC;
  --alerte:#B42318; --alerte-pale:#FDECEA;
  --cap:#E4570F;  --cap-pale:#FDEDE3;
  --gatl:#2A5BD7; --gatl-pale:#E7EEFC;
  --droit:#0E7C6B; --droit-pale:#E0F2EE;
  --gestion:#7B3FA0; --gestion-pale:#F1E8F7;
  --f-titre:"Archivo","Arial Narrow",system-ui,sans-serif;
  --f-texte:"Public Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --f-code:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --r:10px; --r-grand:16px;
  --ombre:0 1px 2px rgba(23,32,51,.06),0 6px 20px rgba(23,32,51,.07);
  --largeur:1180px;
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body{margin:0;background:var(--sol);color:var(--encre);font-family:var(--f-texte);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
[hidden]{display:none!important}
h1,h2,h3,h4{font-family:var(--f-titre);line-height:1.1;margin:0;text-wrap:balance;letter-spacing:-.01em}
p{margin:0}
.num{font-variant-numeric:tabular-nums}
.enveloppe{max-width:var(--largeur);margin:0 auto;padding-inline:clamp(16px,4vw,32px)}
.etiquette{font-family:var(--f-code);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--doux)}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:4px}

/* ---------- boutons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1.5px solid transparent;border-radius:999px;padding:10px 18px;font-weight:700;font-size:15px;text-decoration:none;cursor:pointer;white-space:nowrap;transition:background .15s,border-color .15s,transform .1s}
.btn:active{transform:translateY(1px)}
.btn-plein{background:var(--accent);color:#fff}
.btn-plein:hover{background:var(--accent-fonce)}
.btn-contour{background:var(--carte);border-color:var(--trait-fort);color:var(--encre)}
.btn-contour:hover{border-color:var(--encre)}
.btn-sombre{background:var(--encre);color:#fff}
.btn-sombre:hover{background:#0c1322}
.btn-lien{background:none;border:none;padding:6px 4px;color:var(--doux);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed}
.btn svg{width:18px;height:18px;flex:none}
.btn-petit{padding:7px 13px;font-size:14px}

/* ---------- barre du haut ---------- */
.barre{position:sticky;top:env(safe-area-inset-top,0px);z-index:30;background:rgba(242,244,243,.92);backdrop-filter:saturate(1.2) blur(8px);border-bottom:1px solid var(--trait)}
.barre .enveloppe{display:flex;align-items:center;gap:16px;min-height:64px}
.marque{display:flex;align-items:center;gap:10px;text-decoration:none;min-width:0;flex:none}
.marque-signe{width:36px;height:36px;border-radius:8px;background:var(--encre);display:grid;place-items:center;flex:none}
.marque-signe svg{width:22px;height:22px}
.marque-texte{font-family:var(--f-titre);font-weight:800;font-size:17px;font-stretch:112%;line-height:1.1;white-space:nowrap}
.marque-texte small{display:block;font-family:var(--f-texte);font-weight:500;font-size:12px;line-height:1.25;color:var(--doux);font-stretch:100%;letter-spacing:0;white-space:normal;max-width:330px;margin-top:2px}
.nav-zones{display:flex;gap:4px;margin-left:auto;min-width:0}
.nav-zones a{font-size:14px;font-weight:600;text-decoration:none;padding:7px 11px;border-radius:999px;color:var(--doux);white-space:nowrap}
.nav-zones a:hover{background:var(--carte);color:var(--encre)}
.nav-zones a b{font-family:var(--f-code);font-weight:600;color:var(--encre);margin-right:4px}
.compte{display:flex;align-items:center;gap:8px}
.puce-eleve{display:flex;align-items:center;gap:8px;background:var(--carte);border:1px solid var(--trait);border-radius:999px;padding:4px 12px 4px 4px;text-decoration:none;max-width:240px}
.puce-eleve .av{width:30px;height:30px;border-radius:50%;background:var(--encre);color:#fff;display:grid;place-items:center;font-weight:800;font-size:13px;flex:none}
.puce-eleve .qui{min-width:0;line-height:1.15}
.puce-eleve .qui b{display:block;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.puce-eleve .qui span{display:block;font-size:11.5px;color:var(--doux);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:980px){.nav-zones{display:none}.compte{margin-left:auto}}
@media (max-width:560px){.barre .enveloppe{gap:8px}.marque{flex:1 1 0}.marque-texte{white-space:normal}.compte{flex:none}.marque-texte{font-size:15px;font-stretch:100%}.compte .btn svg{display:none}.marque-texte small{font-size:11px;max-width:170px}.puce-eleve .qui span{display:none}.puce-eleve{max-width:150px}}

/* ---------- en-tête de page ---------- */
.entete{padding-block:clamp(36px,6vw,72px) clamp(28px,4vw,48px)}
.entete .enveloppe{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:center}
.entete h1{font-size:clamp(34px,5.4vw,62px);font-weight:800;font-stretch:115%;letter-spacing:-.025em}
.entete h1 em{font-style:normal;color:var(--accent)}
.entete .chapo{font-size:clamp(17px,1.6vw,19px);color:var(--doux);max-width:36em;margin-top:18px}
.entete .actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.plan{background:var(--carte);border:1px solid var(--trait);border-radius:var(--r-grand);box-shadow:var(--ombre);overflow:hidden}
.plan-tete{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;border-bottom:1px solid var(--trait);background:repeating-linear-gradient(-45deg,var(--carte) 0 10px,var(--sol) 10px 20px)}
.plan-tete b{font-family:var(--f-titre);font-stretch:112%;font-size:15px;background:var(--carte);padding:2px 8px;border-radius:6px}
.plan a{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:14px;align-items:center;padding:13px 18px;text-decoration:none;border-bottom:1px solid var(--trait)}
.plan a:last-child{border-bottom:none}
.plan a:hover{background:var(--sol)}
.plan .z{width:44px;height:44px;border-radius:8px;display:grid;place-items:center;font-family:var(--f-titre);font-weight:900;font-size:22px;color:#fff}
.plan .t{min-width:0}
.plan .t b{display:block;font-size:15px;line-height:1.25}
.plan .t span{font-size:13px;color:var(--doux)}
.plan .n{font-family:var(--f-code);font-size:12.5px;color:var(--doux);text-align:right;white-space:nowrap}
.plan .n b{display:block;font-size:17px;color:var(--encre)}
@media (max-width:860px){.entete .enveloppe{grid-template-columns:1fr}}

/* couleurs de zones */
.c-cap{--c:var(--cap);--c-pale:var(--cap-pale)}
.c-gatl{--c:var(--gatl);--c-pale:var(--gatl-pale)}
.c-droit{--c:var(--droit);--c-pale:var(--droit-pale)}
.c-gestion{--c:var(--gestion);--c-pale:var(--gestion-pale)}
.plan .z,.zone-lettre{background:var(--c)}

/* ---------- bandeau de connexion ---------- */
.bandeau{background:var(--encre);color:#fff}
.bandeau .enveloppe{display:flex;align-items:center;gap:14px;padding-block:12px;flex-wrap:wrap}
.bandeau p{font-size:14.5px;flex:1 1 300px}
.bandeau b{color:#FFB88A}

/* ---------- sections de jeux ---------- */
.zone{padding-block:clamp(36px,5vw,60px);border-top:1px solid var(--trait)}
.zone-tete{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:18px;align-items:center;margin-bottom:26px}
.zone-lettre{width:64px;height:76px;border-radius:8px;color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:inset 0 -8px 0 rgba(0,0,0,.14)}
.zone-lettre small{font-family:var(--f-code);font-size:10px;letter-spacing:.14em;opacity:.85}
.zone-lettre b{font-family:var(--f-titre);font-weight:900;font-size:36px;line-height:1}
.zone-tete h2{font-size:clamp(24px,3vw,34px);font-weight:800;font-stretch:110%}
.zone-tete p{color:var(--doux);margin-top:6px;max-width:48em}
.zone-tete .disc{display:inline-block;margin-bottom:6px;font-family:var(--f-code);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--c);background:var(--c-pale);padding:3px 8px;border-radius:4px}
.zone-compte{font-family:var(--f-code);font-size:13px;color:var(--doux);text-align:right;white-space:nowrap}
.zone-compte b{display:block;font-size:26px;color:var(--encre);font-family:var(--f-titre)}
@media (max-width:640px){.zone-tete{grid-template-columns:auto minmax(0,1fr)}.zone-compte{display:none}.zone-lettre{width:52px;height:62px}.zone-lettre b{font-size:28px}}

.grille{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
@media (max-width:1020px){.grille{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.grille{grid-template-columns:1fr}}

/* carte-étiquette de jeu */
.jeu{background:var(--carte);border:1px solid var(--trait);border-radius:var(--r-grand);overflow:hidden;display:flex;flex-direction:column;transition:box-shadow .2s,transform .2s,border-color .2s}
.jeu:hover{box-shadow:var(--ombre);border-color:var(--trait-fort)}
.jeu-visuel{position:relative;aspect-ratio:16/10;max-width:100%;background:var(--c-pale);border-bottom:1px solid var(--trait);overflow:hidden;cursor:pointer;display:block;width:100%;padding:0;border-width:0 0 1px}
.jeu-visuel img,.jeu-visuel svg{width:100%;height:100%;object-fit:cover;object-position:top left}
.jeu-statut{position:absolute;top:12px;left:12px;font-size:12px;font-weight:800;border-radius:999px;padding:4px 10px;display:inline-flex;align-items:center;gap:6px}
.jeu-statut i{width:7px;height:7px;border-radius:50%;background:currentColor}
.statut-ok{background:var(--ok-pale);color:var(--ok)}
.statut-bientot{background:rgba(255,255,255,.94);color:var(--doux)}
.jeu-corps{padding:16px 18px 18px;display:flex;flex-direction:column;gap:10px;flex:1}
.jeu-ref{display:flex;justify-content:space-between;gap:8px;font-family:var(--f-code);font-size:12px;letter-spacing:.04em;color:var(--doux)}
.jeu-ref b{color:var(--c);font-weight:600}
.jeu h3{font-size:22px;font-weight:800;font-stretch:108%}
.jeu h3 span{color:var(--doux);font-weight:600;font-size:.72em;font-stretch:100%;margin-left:6px}
.jeu-accroche{color:var(--doux);font-size:15px}
.jeu-infos{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}
.info{display:inline-flex;align-items:center;gap:5px;font-size:13px;font-weight:600;background:var(--sol);border-radius:6px;padding:4px 8px;color:var(--encre)}
.info svg{width:14px;height:14px;color:var(--doux)}
.jeu-actions{display:flex;gap:8px;margin-top:auto;padding-top:6px;flex-wrap:wrap}
.jeu-actions .btn{flex:1 1 auto}
.jeu.bientot .jeu-visuel{filter:saturate(.85)}

/* ---------- à propos ---------- */
.apropos{padding-block:clamp(44px,6vw,80px);background:var(--carte);border-top:1px solid var(--trait)}
.apropos .enveloppe{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr);gap:clamp(24px,5vw,64px)}
.badge-prof{border:1px solid var(--trait);border-radius:var(--r-grand);overflow:hidden;align-self:start;background:var(--sol)}
.badge-prof .haut{background:var(--encre);color:#fff;padding:16px 18px 44px;position:relative}
.badge-prof .haut::after{content:"";position:absolute;left:0;right:0;bottom:0;height:6px;background:repeating-linear-gradient(-45deg,var(--accent) 0 8px,var(--encre) 8px 16px)}
.badge-prof .haut span{font-family:var(--f-code);font-size:11px;letter-spacing:.12em;opacity:.75}
.badge-prof .portrait{width:92px;height:92px;border-radius:14px;margin:-40px 18px 0;background:var(--accent);color:#fff;display:grid;place-items:center;font-family:var(--f-titre);font-weight:900;font-size:34px;border:4px solid var(--sol);position:relative;overflow:hidden}
.badge-prof .portrait img{width:100%;height:100%;object-fit:cover}
.badge-prof .corps{padding:12px 18px 20px;display:flex;flex-direction:column;gap:6px}
.badge-prof h3{font-size:24px;font-weight:800}
.badge-prof .role{font-size:14.5px}
.badge-prof .etab{font-size:14px;color:var(--doux)}
.badge-prof ul{list-style:none;padding:0;margin:8px 0 0;display:flex;flex-wrap:wrap;gap:6px}
.badge-prof li{font-size:12.5px;font-weight:700;background:var(--carte);border:1px solid var(--trait);border-radius:999px;padding:4px 10px}
.apropos h2{font-size:clamp(26px,3.4vw,38px);font-weight:800;font-stretch:110%}
.apropos .texte{display:flex;flex-direction:column;gap:14px;margin-top:16px;max-width:40em;font-size:17px}
.principes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:28px}
.principe{border-top:3px solid var(--encre);padding-top:12px}
.principe h3{font-size:17px;font-weight:800;margin-bottom:4px}
.principe p{font-size:14.5px;color:var(--doux)}
@media (max-width:820px){.apropos .enveloppe{grid-template-columns:1fr}.principes{grid-template-columns:1fr}}

/* ---------- pied de page ---------- */
.pied{padding-block:28px;border-top:1px solid var(--trait);font-size:14px;color:var(--doux)}
.pied .enveloppe{display:flex;gap:16px 28px;flex-wrap:wrap;align-items:center;justify-content:space-between}
.pied a{font-weight:600}
.pied-liens{display:flex;flex-wrap:wrap;gap:0 20px}
.pied-liens a{display:inline-flex;align-items:center;min-height:44px}

/* ---------- fenêtres (dialog) ---------- */
dialog{border:none;padding:0;border-radius:var(--r-grand);box-shadow:0 30px 80px rgba(10,16,30,.35);width:min(560px,calc(100vw - 32px));max-height:calc(100dvh - 32px);background:var(--carte);color:var(--encre)}
dialog.large{width:min(860px,calc(100vw - 32px))}
dialog::backdrop{background:rgba(15,22,38,.55);backdrop-filter:blur(2px)}
.fen-tete{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:20px 22px 6px}
.fen-tete h2{font-size:24px;font-weight:800;font-stretch:108%}
.fen-fermer{border:none;background:var(--sol);width:36px;height:36px;border-radius:50%;cursor:pointer;display:grid;place-items:center;flex:none}
.fen-fermer svg{width:18px;height:18px}
.fen-corps{padding:10px 22px 22px;display:flex;flex-direction:column;gap:14px}
.fen-pied{padding:14px 22px 20px;border-top:1px solid var(--trait);display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}
@media (max-width:560px){
  dialog{width:100vw;max-width:100vw;margin:auto 0 0;border-radius:18px 18px 0 0;max-height:92dvh}
  dialog.large{width:100vw}
}

/* formulaire de connexion */
.champ{display:flex;flex-direction:column;gap:6px}
.champ label{font-weight:700;font-size:14px}
.champ input{border:1.5px solid var(--trait-fort);border-radius:var(--r);padding:12px 14px;font-size:17px;background:var(--carte)}
.champ input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-pale)}
.champ .aide{font-size:13px;color:var(--doux)}
#champ-code{font-family:var(--f-code);font-size:22px;letter-spacing:.18em;text-transform:uppercase}
.message{border-radius:var(--r);padding:10px 12px;font-size:14.5px;font-weight:600}
.message.erreur{background:var(--alerte-pale);color:var(--alerte)}
.message.ok{background:var(--ok-pale);color:var(--ok)}
.message.info{background:var(--sol);color:var(--encre);font-weight:500}
.rgpd{font-size:13px;color:var(--doux);display:flex;gap:8px;align-items:flex-start}
.rgpd svg{width:16px;height:16px;flex:none;margin-top:2px}

/* fiche détaillée d'un jeu */
.fiche-visuel{border-radius:var(--r);overflow:hidden;border:1px solid var(--trait);aspect-ratio:16/9;max-width:100%;background:var(--c-pale)}
.fiche-visuel img,.fiche-visuel svg{width:100%;height:100%;object-fit:cover;object-position:top left}
.fiche-grille{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--trait);border:1px solid var(--trait);border-radius:var(--r);overflow:hidden}
.fiche-grille div{background:var(--carte);padding:10px 12px}
.fiche-grille dt{font-family:var(--f-code);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--doux)}
.fiche-grille dd{margin:2px 0 0;font-weight:700;font-size:14.5px}
@media (max-width:640px){.fiche-grille{grid-template-columns:repeat(2,minmax(0,1fr))}}
.fiche h4{font-size:15px;font-weight:800;margin-bottom:6px}
.fiche ul{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:4px}
.fiche .bloc{font-size:13.5px;color:var(--doux);margin-top:6px}
.fiche .materiel{font-size:14.5px}

/* toast */
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--encre);color:#fff;padding:12px 18px;border-radius:999px;font-weight:600;font-size:14.5px;box-shadow:var(--ombre);z-index:60;max-width:calc(100vw - 32px)}

/* ---------- tableaux (parcours, enseignant) ---------- */
.table-defil{overflow-x:auto;border:1px solid var(--trait);border-radius:var(--r);background:var(--carte)}
table.t{width:100%;border-collapse:collapse;font-size:14px}
table.t th{text-align:left;font-family:var(--f-code);font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--doux);font-weight:600;padding:10px 12px;border-bottom:1px solid var(--trait);white-space:nowrap;background:var(--sol)}
table.t td{padding:10px 12px;border-bottom:1px solid var(--trait);vertical-align:middle}
table.t tr:last-child td{border-bottom:none}
table.t td.n,table.t th.n{text-align:right;font-variant-numeric:tabular-nums}
.jauge{display:inline-flex;align-items:center;gap:8px;min-width:120px}
.jauge i{display:block;height:8px;border-radius:4px;background:var(--sol);flex:1;overflow:hidden;position:relative}
.jauge i b{position:absolute;left:0;top:0;bottom:0;border-radius:4px}
.pastille{display:inline-block;font-size:12px;font-weight:800;border-radius:999px;padding:3px 9px;white-space:nowrap}
.p-ok{background:var(--ok-pale);color:var(--ok)}
.p-moyen{background:#FFF4DB;color:#8A5A00}
.p-faible{background:var(--alerte-pale);color:var(--alerte)}
.p-neutre{background:var(--sol);color:var(--doux)}



:root{
  --bplog:#9A5B00; --bplog-pale:#FBEFD9;   /* Bac Pro Logistique : ambre */
  --otm:#B4235F;   --otm-pale:#FBE5EE;     /* Bac Pro OTM : framboise */
}
.c-bplog{--c:var(--bplog);--c-pale:var(--bplog-pale)}
.c-otm{--c:var(--otm);--c-pale:var(--otm-pale)}
 
/* sous-catégories à l'intérieur d'une zone */
.sous-zone{margin-top:36px}
.sous-zone:first-of-type{margin-top:0}
.sous-titre{display:flex;align-items:center;flex-wrap:wrap;gap:6px 12px;font-size:21px;font-weight:800;font-stretch:108%;padding-bottom:10px;margin-bottom:8px;border-bottom:3px solid var(--c)}
.sous-titre .disc{font-family:var(--f-code);font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--c);background:var(--c-pale);padding:3px 8px;border-radius:4px}
.sous-titre small{margin-left:auto;font-family:var(--f-code);font-size:12.5px;font-weight:500;color:var(--doux)}
.sous-desc{color:var(--doux);margin-bottom:18px}
 
/* 6 zones : le menu du haut se replie un peu plus tôt pour ne pas déborder */
@media (max-width:1120px){.nav-zones{display:none}.compte{margin-left:auto}}
.vide{padding:32px 20px;text-align:center;color:var(--doux);border:1.5px dashed var(--trait-fort);border-radius:var(--r-grand);background:var(--carte)}
.vide b{display:block;color:var(--encre);font-size:17px;margin-bottom:4px}

.comp-nom{font-size:12.5px;color:var(--doux);font-weight:500;line-height:1.35}

/* ---------- Filtre par bloc / compétence (page d'accueil) ---------- */
.filtre-comp{padding-block:8px 4px}
.filtre-boite{background:var(--carte);border:1px solid var(--trait);border-radius:var(--r-grand);box-shadow:var(--ombre);padding:18px 20px;display:grid;gap:14px}
.filtre-intro h2{font-size:20px;font-weight:800;margin:0}
.filtre-intro p{margin:4px 0 0;color:var(--doux);font-size:15px}
.filtre-champs{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr) auto;gap:12px;align-items:end}
@media (max-width:760px){.filtre-champs{grid-template-columns:1fr}}
.filtre-champs .champ{display:flex;flex-direction:column;gap:5px;min-width:0}
.filtre-champs label{font-weight:700;font-size:14px}
.filtre-champs select{border:1.5px solid var(--trait-fort);border-radius:8px;padding:10px 12px;font-size:15px;background:var(--carte);width:100%;min-height:44px}
.filtre-resultat{margin:0;font-size:15px;font-weight:600}
.filtre-vide{padding:26px;text-align:center;color:var(--doux);background:var(--carte);border:1px dashed var(--trait-fort);border-radius:var(--r-grand);margin-block:16px}
.zone[hidden],.jeu[hidden]{display:none!important}

/* Barre du haut : le nom du site n'est jamais tronqué ; entre 1121 et 1359 px la navigation par zones se réduit aux lettres */
.nav-zones a .nom-zone{display:inline}
@media (min-width:1121px) and (max-width:1359px){
  .nav-zones a .nom-zone{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .nav-zones a b{margin-right:0}
}

/* ---------- animations (activées par assets/anim.js ; neutralisées si « réduire les animations ») ---------- */
.anim-pret [data-anim]{opacity:0;transform:translateY(18px);transition:opacity .55s cubic-bezier(.2,.7,.2,1),transform .55s cubic-bezier(.2,.7,.2,1);transition-delay:var(--delai,0ms);will-change:opacity,transform}
.anim-pret [data-anim].vu{opacity:1;transform:none}
@keyframes entree-haut{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.anim-pret .hero h1,.anim-pret .hero-simple h1,.anim-pret .entete h1{animation:entree-haut .6s cubic-bezier(.2,.7,.2,1) both}
.anim-pret .chapo,.anim-pret .hero .actions,.anim-pret .hero-simple .actions,.anim-pret .entete .actions{animation:entree-haut .6s .12s cubic-bezier(.2,.7,.2,1) both}
.btn{transition:background .15s,border-color .15s,transform .18s,box-shadow .18s}
.btn:hover{transform:translateY(-2px);box-shadow:0 6px 14px rgba(23,32,51,.14)}
.btn:active{transform:translateY(0)}
.formation,.licences tbody tr,.tab-filieres tbody tr,.jeu,.plan a{transition:background .2s,transform .2s,box-shadow .2s}
.jeu:hover{transform:translateY(-4px);box-shadow:0 10px 26px rgba(23,32,51,.14)}
.fiche{transition:transform .25s,box-shadow .25s}
.fiche:hover{transform:translateY(-3px);box-shadow:8px 8px 0 var(--trait)}
.licences tbody tr:hover td,.licences tbody tr:hover th,.tab-filieres tbody tr:hover td,.tab-filieres tbody tr:hover th{background:var(--teinte,#F1ECE2)}
@media (prefers-reduced-motion:reduce){.anim-pret [data-anim]{opacity:1;transform:none}.btn:hover,.jeu:hover,.fiche:hover{transform:none}}
.anim-pret .jeu.vu:hover{transform:translateY(-4px)}
.anim-pret .fiche.vu:hover{transform:translateY(-3px)}