:root{
  --bleu:#1b3a6b; --bleu-clair:#2d5a9e; --or:#b8912f;
  --fond:#f7f8fa; --carte:#fff; --texte:#1a1d23; --gris:#4d5560;
  --bord:#e2e6ec; --vert:#1a7f4b; --rouge:#b3261e; --ambre:#8a5d00;
  --r:10px; --ombre:0 1px 3px rgba(16,24,40,.08),0 1px 2px rgba(16,24,40,.06);
  --largeur:1120px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:90px}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  background:var(--fond);color:var(--texte);line-height:1.65;-webkit-font-smoothing:antialiased;font-size:16.5px}
a{color:var(--bleu-clair);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--bleu-clair);outline-offset:2px;border-radius:4px}

/* ---------- En-tête ---------- */
header{background:var(--bleu);color:#fff;position:sticky;top:0;z-index:50}
.bandeau{max-width:var(--largeur);margin:0 auto;padding:13px 20px;display:flex;align-items:center;gap:22px}
.marque{font-weight:700;font-size:1.05rem;letter-spacing:.2px;white-space:nowrap}
.marque span{color:var(--or)}
nav{display:flex;gap:18px;margin-left:auto;overflow-x:auto;scrollbar-width:none}
nav::-webkit-scrollbar{display:none}
nav a{color:#dbe4f0;font-size:.92rem;padding:4px 0;border-bottom:2px solid transparent;white-space:nowrap}
nav a:hover,nav a.actif{color:#fff;border-bottom-color:var(--or);text-decoration:none}
/* Le pseudonyme ne doit jamais pousser le menu hors cadre : au delà de
   neuf caractères environ, il se termine par une ellipse. */
nav a.lien-compte{max-width:8.5em;overflow:hidden;text-overflow:ellipsis}
/* Largeurs intermédiaires : le menu compte neuf entrées plus le pseudo,
   on resserre avant que le repli en menu ne prenne le relais sous 1080 px. */
@media(min-width:1081px) and (max-width:1480px){
  nav{gap:12px}
  nav a{font-size:.87rem}
  nav a.lien-compte{max-width:7em}
}

.compte{background:var(--bleu-clair);color:#fff;text-align:center;padding:7px 16px;font-size:.86rem}
.compte b{color:#ffd970}
.compte.urgent{background:#8c1d18}

/* Barre de progression de lecture */
#lecture{position:fixed;top:0;left:0;height:3px;background:var(--or);width:0;z-index:100;transition:width .1s linear}

main{max-width:var(--largeur);margin:0 auto;padding:28px 20px 72px}
h1{font-size:1.75rem;margin:.2em 0 .5em;line-height:1.25;letter-spacing:-.01em}
h2{font-size:1.24rem;margin:1.9em 0 .6em;padding-bottom:6px;border-bottom:1px solid var(--bord)}
h3{font-size:1.03rem;margin:1.4em 0 .4em}
.chapo{color:var(--gris);font-size:1.03rem;max-width:72ch}

.carte{background:var(--carte);border:1px solid var(--bord);border-radius:var(--r);padding:20px;box-shadow:var(--ombre);margin-bottom:18px}
.grille{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}

.kpi{text-align:center;padding:16px 10px}
.kpi .v{font-size:1.8rem;font-weight:700;color:var(--bleu);line-height:1.1}
.kpi .l{font-size:.82rem;color:var(--gris);text-transform:uppercase;letter-spacing:.4px;margin-top:4px}
.kpi.alerte .v{color:var(--rouge)}
.kpi.ok .v{color:var(--vert)}
.kpi .sub{font-size:.78rem;color:var(--gris);margin-top:2px}

/* Boutons. Trois niveaux de hiérarchie, pas plus : l'action en or est
   réservée à UNE action par écran, celle que l'on veut voir choisie. Un
   écran où tout brille ne met rien en avant. */
.btn{display:inline-block;background:var(--bleu);color:#fff;border:0;border-radius:8px;
  padding:12px 22px;font-size:.95rem;font-weight:600;cursor:pointer;font-family:inherit;
  text-align:center;box-shadow:var(--ombre);transition:transform .12s,box-shadow .12s,background .12s}
.btn:hover{background:var(--bleu-clair);text-decoration:none;color:#fff;
  transform:translateY(-1px);box-shadow:0 4px 10px rgba(16,24,40,.16)}
.btn:active{transform:translateY(0)}
.btn.cta{background:var(--or);color:#14213d}
.btn.cta:hover{background:#cda23a;color:#14213d}
.btn.sec{background:#fff;color:var(--bleu);border:1.5px solid var(--bleu-clair);box-shadow:none}
.btn.sec:hover{background:#eef2f8;color:var(--bleu);transform:none;box-shadow:none}
.btn.pt{padding:8px 14px;font-size:.87rem;box-shadow:none}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}

/* Bouton de connexion, présent dans l'en-tête de toutes les pages. Il est
   doré pour se détacher des liens de navigation : c'est la seule action de
   l'en-tête, le reste est de la circulation. */
.nav-connexion{background:var(--or);color:#14213d;font-weight:700;padding:8px 16px;
  border-radius:8px;white-space:nowrap;font-size:.88rem;flex:0 0 auto}
.nav-connexion:hover{background:#cda23a;color:#14213d;text-decoration:none}

/* ---------- Pistes de concours ---------- */
/* Trois préparations, trois identités : le bleu institutionnel reste à
   l'inspecteur, le vert au contrôleur, l'ambre à l'agent. La couleur suit
   la piste sur sa page dédiée, pour que l'on sache toujours où l'on est. */
.hero{background:linear-gradient(135deg,var(--bleu) 0%,#264d85 100%);color:#fff;
  border-radius:14px;padding:36px 34px;margin-bottom:26px}
.hero h1{color:#fff;margin:0 0 10px;font-size:1.75rem;line-height:1.25}
.hero p{color:#dbe4f0;max-width:640px;margin:0 0 20px;font-size:1.02rem}
.hero .btn.sec{background:transparent;color:#fff;border-color:rgba(255,255,255,.45)}
.hero .btn.sec:hover{background:rgba(255,255,255,.1);color:#fff}
.pistes{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px;margin:18px 0 6px}
.piste{background:var(--carte);border:1px solid var(--bord);border-top:4px solid var(--bleu);
  border-radius:var(--r);padding:18px 20px;box-shadow:var(--ombre);display:block;color:var(--texte);
  transition:transform .12s,box-shadow .12s}
.piste:hover{text-decoration:none;transform:translateY(-2px);box-shadow:0 6px 16px rgba(16,24,40,.14);color:var(--texte)}
.piste .cat{font-size:.72rem;text-transform:uppercase;letter-spacing:.6px;font-weight:700;color:var(--gris)}
.piste h3{margin:.3em 0 .35em;font-size:1.06rem;color:var(--bleu)}
.piste p{margin:0;font-size:.9rem;color:var(--gris)}
.piste .etat-piste{display:inline-block;margin-top:10px;font-size:.76rem;font-weight:700;
  padding:3px 10px;border-radius:20px;background:#eef2f8;color:var(--bleu)}
.piste.verte{border-top-color:var(--vert)}
.piste.verte h3{color:var(--vert)}
.piste.ambre{border-top-color:var(--ambre)}
.piste.ambre h3{color:var(--ambre)}
.piste.active .etat-piste{background:#e9f6ee;color:var(--vert)}

/* ---------- QCM ---------- */
.meta-q{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:14px}
.tag{font-size:.76rem;text-transform:uppercase;letter-spacing:.5px;background:#eef2f8;
  color:var(--bleu);padding:3px 9px;border-radius:20px;font-weight:600}
.tag.diff{background:#fbf1dd;color:var(--ambre)}
.tag.var{background:#fdeaea;color:var(--rouge)}
.enonce{font-size:1.13rem;font-weight:600;margin:0 0 18px;line-height:1.45}

.opts{display:flex;flex-direction:column;gap:9px;margin-bottom:18px}
.opt{display:flex;gap:12px;align-items:flex-start;padding:13px 15px;border:1px solid var(--bord);
  border-radius:8px;background:#fff;cursor:pointer;text-align:left;font-size:.97rem;
  font-family:inherit;color:var(--texte);line-height:1.45;transition:border-color .12s,background .12s}
.opt:hover:not(:disabled){border-color:var(--bleu-clair);background:#fafcff}
.opt:disabled{cursor:default}
.opt .lettre{flex:0 0 24px;height:24px;border-radius:50%;background:#eef2f8;color:var(--bleu);
  font-weight:700;font-size:.8rem;display:flex;align-items:center;justify-content:center}
.opt.juste{border-color:var(--vert);background:#f0f9f4}
.opt.juste .lettre{background:var(--vert);color:#fff}
.opt.faux{border-color:var(--rouge);background:#fdf3f2}
.opt.faux .lettre{background:var(--rouge);color:#fff}

.confiance{display:flex;gap:14px;align-items:center;margin-bottom:16px;font-size:.9rem;color:var(--gris);flex-wrap:wrap}
.confiance label{display:flex;gap:6px;align-items:center;cursor:pointer}

.retour{border-left:3px solid var(--bleu);background:#f8fafc;padding:14px 16px;border-radius:0 8px 8px 0;margin-bottom:16px}
.retour.ko{border-left-color:var(--rouge);background:#fdf6f5}
.retour .titre{font-weight:700;margin-bottom:6px;font-size:.96rem}
.retour.ko .titre{color:var(--rouge)}
.retour.ok .titre{color:var(--vert)}
.retour p{margin:.4em 0;font-size:.95rem}
.piege{margin-top:10px;padding-top:10px;border-top:1px dashed var(--bord);font-size:.91rem;color:var(--ambre)}
.piege b{color:var(--ambre)}

.barre{height:7px;background:var(--bord);border-radius:4px;overflow:hidden;margin:6px 0}
.barre i{display:block;height:100%;background:var(--bleu);border-radius:4px;transition:width .3s}
.barre i.ok{background:var(--vert)} .barre i.ko{background:var(--rouge)}

table{width:100%;border-collapse:collapse;font-size:.93rem;margin:1em 0}
th,td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--bord)}
th{font-size:.77rem;text-transform:uppercase;letter-spacing:.4px;color:var(--gris)}
tbody tr:hover{background:#fafbfd}

.note{background:#fdf6e8;border:1px solid #eeddb6;border-radius:8px;padding:13px 15px;font-size:.93rem;margin:16px 0}
.note b{color:var(--ambre)}
.note.rouge{background:#fdf3f2;border-color:#f3cfcc}
.note.rouge b{color:var(--rouge)}

footer{border-top:1px solid var(--bord);background:#fff;padding:22px 20px;color:var(--gris);font-size:.86rem}
.pied{max-width:var(--largeur);margin:0 auto}

.masque{display:none!important}

/* ---------- Mise en page des cours ---------- */
.cours-layout{display:grid;grid-template-columns:250px 1fr;gap:34px;align-items:start}
.toc{position:sticky;top:76px;max-height:calc(100vh - 100px);overflow-y:auto;
  background:#fff;border:1px solid var(--bord);border-radius:var(--r);padding:16px 18px;font-size:.89rem}
.toc b{display:block;font-size:.74rem;text-transform:uppercase;letter-spacing:.6px;color:var(--gris);margin-bottom:8px}
.toc ol{margin:0;padding-left:1.1em}
.toc li{margin:.3em 0;line-height:1.4}
.toc a{color:var(--texte)}
.toc a.vu{color:var(--bleu-clair);font-weight:600}

.doc{max-width:74ch;font-size:1.02rem}
.doc h2{margin-top:2.3em}
.doc blockquote{border-left:3px solid var(--or);background:#fdf9ef;margin:1.2em 0;padding:12px 16px;border-radius:0 8px 8px 0}
.doc blockquote p{margin:.3em 0}
.doc code{background:#eef2f8;padding:2px 6px;border-radius:4px;font-size:.9em}
.doc pre{background:#16305a;color:#e8eef7;padding:15px 17px;border-radius:8px;overflow-x:auto;font-size:.85rem;line-height:1.55}
.doc pre code{background:none;color:inherit;padding:0}
.doc table{font-size:.91rem}
.doc hr{border:0;border-top:1px solid var(--bord);margin:2.4em 0}
.doc ol,.doc ul{padding-left:1.3em}
.doc li{margin:.35em 0}
.doc strong{color:#12244a}

@media(max-width:900px){
  .cours-layout{grid-template-columns:1fr;gap:18px}
  .toc{position:static;max-height:none}
}
@media(max-width:640px){
  body{font-size:16px}
  .bandeau{gap:14px;padding:11px 14px}
  main{padding:20px 14px 56px}
  h1{font-size:1.42rem}
  h2{font-size:1.14rem}
  .kpi .v{font-size:1.5rem}
  .doc{font-size:1rem}
  table{font-size:.87rem}
  th,td{padding:7px 6px}
  /* Un tableau plus large que l'ecran defile horizontalement au lieu de
     casser la mise en page de toute la page. */
  table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
  /* Les listes deroulantes prennent la largeur de leur plus longue option
     et debordaient de l'ecran : bornees, le texte s'y tronque proprement. */
  select{max-width:100%;text-overflow:ellipsis}
}

/* ---------- Rendu pédagogique ---------- */
mark{background:#fff2c2;color:inherit;padding:0 .18em;border-radius:2px;font-weight:600}

.schema{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1.25fr);
  gap:0;border:1px solid var(--bord);border-radius:9px;overflow:hidden;margin:.4em 0 .6em}
.schema>div{padding:9px 12px;border-bottom:1px solid var(--bord);font-size:.93rem;line-height:1.5}
.schema>div:nth-last-child(-n+3){border-bottom:none}
.sch-g{background:#f7f9fc;font-weight:600}
.sch-r{display:flex;align-items:center;justify-content:center;font-size:1.18rem;
  font-weight:700;color:var(--bleu);background:#f7f9fc;min-width:2.6em;cursor:help}
.sch-r[data-rel="≠"],.sch-r[data-rel="⊥"]{color:var(--rouge)}
.sch-r[data-rel="→"]{color:#0a7a4a}
.sch-leg{font-size:.8rem;color:var(--gris);margin:0}
.sch-leg b{color:var(--bleu)}

.discri{border-left:3px solid var(--bleu-clair);padding-left:13px}
.dis-l,.dis-test{margin:.45em 0;font-size:.93rem;line-height:1.55}
.dis-e{display:block;font-size:.76rem;text-transform:uppercase;letter-spacing:.04em;
  color:var(--gris);font-weight:700;margin-bottom:1px}
.dis-test{background:#eef6ef;border:1px solid #cfe4d2;border-radius:8px;padding:9px 12px;margin-top:.7em}
.dis-test .dis-e{color:#0a7a4a}

.astuce{background:#fdf7e6;border:1px solid #efdfae;border-radius:9px;
  padding:9px 13px;margin:.7em 0 0;font-size:.93rem;line-height:1.5}
.astuce span{display:block;font-size:.76rem;text-transform:uppercase;letter-spacing:.04em;
  color:#8a6d1f;font-weight:700;margin-bottom:2px}

.distr{margin-top:12px;border-top:1px solid var(--bord);padding-top:10px}
.distr .et{font-size:.76rem;text-transform:uppercase;letter-spacing:.04em;
  color:var(--gris);font-weight:700;margin-bottom:6px}
.distr ul{list-style:none;padding:0;margin:0}
.distr li{padding:7px 0 7px 13px;border-left:2px solid var(--bord);margin-bottom:6px;
  font-size:.91rem;line-height:1.5}
.distr li.pris{border-left-color:var(--rouge);background:#fdf4f3}
.distr li b{display:block;color:var(--noir)}
.distr li span{color:var(--gris)}

@media(max-width:620px){
  .schema{grid-template-columns:1fr auto 1fr}
  .schema>div{padding:7px 9px;font-size:.87rem}
}
.hyper{background:#fff6f5;border:1px solid #f0cfcb;border-left:3px solid var(--rouge);
  border-radius:8px;padding:10px 13px;margin:12px 0 0;font-size:.91rem;line-height:1.55}
.tag.enr{background:#eef6ef;color:#0a7a4a;border:1px solid #cfe4d2}
.tag.ang{background:#eef2f8;color:var(--bleu);border:1px solid #cdd9ea}
.angles-reste{background:#f7f9fc;border:1px solid var(--bord);border-radius:8px;
  padding:9px 13px;margin:12px 0 0;font-size:.9rem;line-height:1.55}

/* ---------- Rubrique de veille ---------- */
.v-entree{border:1px solid var(--bord);border-radius:11px;padding:16px 18px;margin:14px 0;background:#fff}
.v-entree header{display:flex;gap:9px;align-items:center;flex-wrap:wrap;margin-bottom:8px}
.v-date{font-size:.82rem;color:var(--gris);font-variant-numeric:tabular-nums}
.v-entree h3{margin:.2em 0 .3em;font-size:1.08rem;line-height:1.35}
.v-resume{font-size:.95rem;color:var(--gris);margin:0 0 .8em}
.v-corps p{margin:.55em 0;font-size:.95rem;line-height:1.65}
.v-statut{font-size:.74rem;text-transform:uppercase;letter-spacing:.04em;font-weight:700;
  padding:2px 8px;border-radius:20px;cursor:help}
.v-statut.v-ok{background:#eef6ef;color:#0a7a4a;border:1px solid #cfe4d2}
.v-statut.v-prev{background:#fdf7e6;color:#8a6d1f;border:1px solid #efdfae}
.v-statut.v-ko{background:#fdf4f3;color:var(--rouge);border:1px solid #f0cfcb}
.v-champ{margin:.5em 0;font-size:.92rem;line-height:1.6;padding-left:12px;border-left:2px solid var(--bord)}
.v-champ b{display:block;font-size:.74rem;text-transform:uppercase;letter-spacing:.04em;
  color:var(--gris);margin-bottom:1px}
.v-src{margin-top:12px;font-size:.9rem}
.v-src summary{cursor:pointer;color:var(--bleu);font-weight:600}
.v-src ul{list-style:none;padding:0;margin:.6em 0 0}
.v-src li{margin:.4em 0;display:flex;gap:9px;align-items:baseline;flex-wrap:wrap}
.rang{font-size:.7rem;text-transform:uppercase;letter-spacing:.03em;font-weight:700;
  color:var(--gris);background:#f2f4f7;border-radius:3px;padding:1px 6px;white-space:nowrap}
.rang.pri{color:#0a7a4a;background:#eef6ef}

/* ---------- Fip, le renard coach ---------- */
/* Le personnage vit en bas a droite, au dessus du contenu mais sous
   rien d'essentiel : il encourage, il ne bloque jamais une action. */
#fip{position:fixed;right:16px;bottom:16px;z-index:60;display:flex;flex-direction:column;
  align-items:flex-end;gap:10px;padding-bottom:env(safe-area-inset-bottom)}
.fip-bouton{width:64px;height:64px;border-radius:50%;border:0;cursor:pointer;padding:6px;
  background:#fff;box-shadow:0 4px 16px rgba(16,24,40,.22);position:relative;
  transition:transform .15s}
.fip-bouton:hover{transform:scale(1.06)}
.fip-bouton > svg{width:100%;height:100%;display:block}
.fip-badge{position:absolute;top:-9px;right:-6px;background:#fff;border:1px solid var(--bord);
  border-radius:20px;padding:1px 7px 1px 4px;display:flex;align-items:center;gap:2px;
  font-size:.78rem;font-weight:800;color:#e07b2a;box-shadow:var(--ombre);line-height:1.3}
.fip-badge svg{width:13px;height:13px;flex:none}
.fip-flamme{width:15px;height:15px}
.fip-bulle{max-width:min(290px,74vw);background:var(--bleu);color:#fff;border-radius:14px 14px 3px 14px;
  padding:11px 15px;font-size:.92rem;line-height:1.5;box-shadow:0 6px 18px rgba(16,24,40,.25)}
.fip-panneau{width:min(330px,calc(100vw - 32px));background:#fff;border:1px solid var(--bord);
  border-radius:16px;box-shadow:0 12px 34px rgba(16,24,40,.26);padding:16px 18px}
.fip-tete{display:flex;align-items:center;gap:11px;border-bottom:1px solid var(--bord);
  padding-bottom:10px;margin-bottom:12px}
.fip-mini svg{width:42px;height:42px;display:block}
.fip-tete b{display:block;line-height:1.1}
.fip-tete small{color:var(--gris);font-size:.8rem}
.fip-fermer{margin-left:auto;border:0;background:none;font-size:1.5rem;line-height:1;
  color:var(--gris);cursor:pointer;padding:2px 6px}
.fip-stats{display:grid;grid-template-columns:1fr 1.3fr 1fr;gap:8px;margin-bottom:11px}
.fip-stat{background:var(--fond);border-radius:10px;padding:9px 6px;text-align:center}
.fip-stat b{display:block;font-size:1.15rem;line-height:1.2}
.fip-stat small{font-size:.76rem;text-transform:uppercase;letter-spacing:.4px;color:var(--gris)}
.fip-stat .fip-flamme{width:18px;height:18px;vertical-align:-3px}
.fip-jauge{display:block;height:5px;background:var(--bord);border-radius:3px;overflow:hidden;margin-top:5px}
.fip-jauge i{display:block;height:100%;width:0;background:var(--or);transition:width .4s}
.fip-jauge i.plein{background:var(--vert)}
.fip-message{font-size:.92rem;margin:0 0 10px;line-height:1.55}
.fip-conseil p{background:#fdf6e8;border:1px solid #eeddb6;border-radius:10px;
  padding:10px 13px;font-size:.9rem;margin:0 0 10px;line-height:1.55}
.fip-conseil .fip-attente{background:var(--fond);border-color:var(--bord);color:var(--gris)}
.fip-actions{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 10px}
.fip-objectif{font-size:.82rem;color:var(--gris);display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.fip-objectif button{border:1px solid var(--bord);background:#fff;border-radius:20px;
  padding:3px 12px;font-family:inherit;font-size:.82rem;cursor:pointer}
.fip-objectif button.actif{background:var(--bleu);border-color:var(--bleu);color:#fff;font-weight:700}
.fip-note{font-size:.74rem;color:var(--gris);margin:10px 0 0;line-height:1.45}

@media(prefers-reduced-motion:no-preference){
  /* Clignement des yeux : les paupieres, de la couleur du pelage,
     s'ecrasent brievement sur les yeux toutes les quelques secondes. */
  .fip-paupiere{transform-origin:center;transform:scaleY(0);animation:fip-cligne 4.6s infinite}
  @keyframes fip-cligne{0%,94%,100%{transform:scaleY(0)}96%,98%{transform:scaleY(1)}}
  .fip-saute{animation:fip-joie .42s ease 3}
  @keyframes fip-joie{0%,100%{transform:translateY(0)}40%{transform:translateY(-14px) rotate(-4deg)}70%{transform:translateY(0) rotate(3deg)}}
  .fip-bulle,.fip-panneau{animation:fip-entre .22s ease}
  @keyframes fip-entre{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
}

/* ---------- Navigation mobile ---------- */
/* Sous 720 px les liens quittent la barre pour un panneau replie sous
   l'en-tete : lisible au pouce, sans defilement horizontal a la loupe. */
.nav-bascule{display:none;border:0;background:none;cursor:pointer;padding:6px;
  flex-direction:column;gap:5px;margin-left:auto}
.nav-bascule i{display:block;width:24px;height:2.5px;background:#fff;border-radius:2px;
  transition:transform .2s,opacity .2s}
header.nav-ouverte .nav-bascule i:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
header.nav-ouverte .nav-bascule i:nth-child(2){opacity:0}
header.nav-ouverte .nav-bascule i:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
/* Le menu compte neuf entrées plus le pseudonyme : en dessous de 1080 px
   il ne tient plus en ligne, il se replie derrière le bouton. Les autres
   ajustements mobiles, eux, attendent 720 px. */
@media(max-width:1080px){
  .bandeau{flex-wrap:wrap;position:relative}
  .nav-bascule{display:flex}
  header nav{display:none;flex-direction:column;gap:0;order:3;flex-basis:100%;
    margin:8px 0 2px;overflow:visible}
  header.nav-ouverte nav{display:flex}
  header nav a{padding:12px 4px;font-size:1rem;border-bottom:1px solid rgba(255,255,255,.1)}
  header nav a.actif,header nav a:hover{border-bottom-color:rgba(255,255,255,.1);color:#ffd970}
  /* En colonne, la place ne manque plus : le pseudonyme s'affiche entier. */
  header nav a.lien-compte{max-width:none}
  .nav-connexion{margin-left:8px}
}
@media(max-width:720px){
  #fip{right:12px;bottom:12px}
  .fip-bouton{width:58px;height:58px}
  .hero{padding:26px 22px}
  .btn{width:100%;margin-bottom:8px}
  .btn.pt,.fip-actions .btn{width:auto;margin-bottom:0}
  .hero .btn{width:auto}
  .barre-ep .btn,.barre-visio .btn{width:auto;margin-bottom:0}
  /* Les rappels de raccourcis clavier ne servent a rien au doigt. */
  .indic-clavier{display:none}
}

/* ---------- Apparitions au defilement ---------- */
/* Les cartes entrent en douceur quand elles arrivent a l'ecran. La
   classe .rev est posee par JavaScript : sans lui, rien n'est masque. */
@media(prefers-reduced-motion:no-preference){
  .rev{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s ease}
  .rev.vu{opacity:1;transform:none}
  .hero{background-size:170% 170%;animation:heroflux 16s ease infinite}
  @keyframes heroflux{0%,100%{background-position:0% 40%}50%{background-position:100% 60%}}
}

/* Jauge d'engagement hebdomadaire du coach */
.fip-semaine{margin:0 0 11px}
.fip-sem-l{display:flex;justify-content:space-between;font-size:.82rem;color:var(--gris);margin-bottom:4px}
.fip-sem-l b{color:var(--texte)}
.fip-jauge i.retard{background:var(--rouge)}

/* Sélecteur de concours des pages d'oral : trois cursus en parallèle. */
.choix-concours{display:flex;gap:8px;align-items:center;flex-wrap:wrap;
  font-size:.88rem;color:var(--gris);margin:14px 0 0}
.choix-concours a{border:1px solid var(--bord);border-radius:20px;padding:5px 14px;
  color:var(--texte);font-weight:600;font-size:.85rem}
.choix-concours a:hover{border-color:var(--bleu-clair);text-decoration:none}
.choix-concours a.pris{background:var(--bleu);border-color:var(--bleu);color:#fff}

/* ---------- Passe de finition, allure SaaS sobre ---------- */
/* En-tête translucide avec flou : moderne sans être tapageur, et le
   contenu reste lisible en dessous pendant le défilement. */
@supports (backdrop-filter: blur(8px)){
  header{background:rgba(23,48,89,.88);backdrop-filter:blur(8px)}
}
h1{letter-spacing:-.015em}
.hero h1{letter-spacing:-.02em}
/* Les liens de navigation soulignent en glissant, au lieu d'apparaître. */
nav a{position:relative;border-bottom:0!important}
nav a::after{content:"";position:absolute;left:0;right:100%;bottom:-2px;height:2px;
  background:var(--or);transition:right .18s ease}
nav a:hover::after,nav a.actif::after{right:0}
@media(max-width:1080px){nav a::after{display:none}}
/* Cartes : le relief monte d'un cran au survol, la bordure s'anime. */
.carte{transition:box-shadow .18s ease,border-color .18s ease}
.carte:hover{box-shadow:0 4px 14px rgba(16,24,40,.1)}
.kpi{border-top:3px solid transparent;transition:border-color .2s}
.kpi:hover{border-top-color:var(--bleu-clair)}
.kpi.ok:hover{border-top-color:var(--vert)}
.kpi.alerte:hover{border-top-color:var(--rouge)}
/* Boutons : un léger dégradé et une ombre portée colorée au survol. */
.btn{background:linear-gradient(180deg,#22497f,var(--bleu))}
.btn:hover{background:linear-gradient(180deg,#2d5a9e,#25508c)}
.btn.cta{background:linear-gradient(180deg,#c79f3f,var(--or))}
.btn.cta:hover{background:linear-gradient(180deg,#d4ab45,#c19833);
  box-shadow:0 4px 12px rgba(184,145,47,.35)}
.btn.sec{background:#fff}
.btn.sec:hover{background:#eef2f8}
/* Tableaux : un zébrage discret, l'en-tête reste net. */
tbody tr:nth-child(even),table tr:nth-child(even):not(:first-child){background:#fafbfd}
/* Barre de défilement discrète, accordée à la palette. */
*{scrollbar-width:thin;scrollbar-color:#c5cedb transparent}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{background:#c5cedb;border-radius:5px}
::-webkit-scrollbar-thumb:hover{background:#a9b6c8}
/* Sélection de texte aux couleurs du site. */
::selection{background:#dbe7f7}

/* ---------- Mise en avant du simulateur en visioconférence ---------- */
/* C'est la fonction la plus distinctive du site et la plus rentable pour
   le candidat : l'oral pèse la moitié du concours. Elle mérite mieux
   qu'une ligne de texte perdue au milieu des encadrés. */
.promo-oral{background:linear-gradient(135deg,#11151c 0%,#1b3a6b 55%,#264d85 100%);
  color:#fff;border-radius:16px;padding:28px 30px;margin:0 0 22px;
  display:flex;gap:26px;align-items:center;flex-wrap:wrap;
  box-shadow:0 10px 28px rgba(16,24,40,.28);position:relative;overflow:hidden}
.promo-oral::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at 82% 18%,rgba(184,145,47,.22),transparent 55%)}
.promo-oral .txt{flex:1;min-width:270px;position:relative;z-index:1}
.promo-oral .eti{display:inline-block;background:rgba(255,255,255,.14);
  font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.8px;
  padding:4px 11px;border-radius:20px;margin-bottom:11px}
.promo-oral h2{color:#fff;border:0;margin:0 0 8px;font-size:1.42rem;padding:0;letter-spacing:-.01em}
.promo-oral p{color:#cfdcee;margin:0 0 18px;font-size:1rem;line-height:1.6;max-width:56ch}
.promo-oral .btn.cta{font-size:1.05rem;padding:15px 30px;box-shadow:0 6px 18px rgba(184,145,47,.4)}
.promo-oral .apercu{position:relative;z-index:1;display:flex;gap:10px;flex:0 0 auto}
/* Deux vignettes de jury : deux visages stylisés en CSS, aucun fichier à
   charger, qui donnent instantanément à comprendre de quoi il s'agit. */
.promo-oral .vig{width:104px;height:82px;border-radius:11px;background:#1a2029;
  position:relative;overflow:hidden;border:2px solid rgba(255,255,255,.14)}
.promo-oral .vig i{position:absolute;left:50%;transform:translateX(-50%);border-radius:50%}
.promo-oral .vig i.tete{top:14px;width:34px;height:34px}
.promo-oral .vig i.buste{bottom:-16px;width:62px;height:44px;border-radius:32px 32px 0 0}
.promo-oral .vig.m i{background:#3f5b86}
.promo-oral .vig.h i{background:#7a5f7e}
.promo-oral .vig span{position:absolute;left:7px;bottom:6px;font-size:.66rem;
  background:rgba(0,0,0,.55);padding:2px 7px;border-radius:4px;color:#fff}
.promo-oral .vig.direct::before{content:"";position:absolute;top:8px;right:8px;
  width:8px;height:8px;border-radius:50%;background:#4ade80;z-index:2}
@media(prefers-reduced-motion:no-preference){
  .promo-oral .vig.direct::before{animation:pointvif 1.8s ease-in-out infinite}
  @keyframes pointvif{0%,100%{opacity:1}50%{opacity:.35}}
}
@media(max-width:640px){
  .promo-oral{padding:22px 20px;gap:18px}
  .promo-oral h2{font-size:1.22rem}
  .promo-oral .apercu{width:100%}
  .promo-oral .vig{flex:1}
}

/* Version « accroche » de la mise en avant : titre géant, bouton large.
   Réservée au haut de page, une seule fois par écran. */
.promo-oral.phare{padding:38px 34px;margin-bottom:26px}
.promo-oral.phare h2{font-size:2.15rem;line-height:1.15;margin-bottom:12px}
.promo-oral.phare p{font-size:1.06rem}
.promo-oral.phare .btn.cta{font-size:1.15rem;padding:17px 38px;font-weight:700}
.promo-oral .sous-btn{display:block;margin-top:11px;font-size:.86rem;color:#a8bdd8}
.promo-oral .vig{width:120px;height:94px}
@media(max-width:640px){
  .promo-oral.phare{padding:24px 20px}
  .promo-oral.phare h2{font-size:1.5rem}
  .promo-oral.phare .btn.cta{width:100%;font-size:1.05rem;padding:15px 20px}
  .promo-oral .vig{height:78px}
}

.promo-oral .autres{margin:18px 0 0;padding-top:15px;font-size:.92rem;color:#a8bdd8;
  border-top:1px solid rgba(255,255,255,.14);max-width:62ch}
.promo-oral .autres a{color:#ffd970;font-weight:600;white-space:nowrap}

/* Vitrine 3D des jurés. Le canevas unique se pose au dessus des deux
   vignettes dessinées en CSS, qui servent de repli et d'écran d'attente. */
.promo-oral .apercu{position:relative}
.vitrine-toile{position:absolute;inset:0;width:100%;height:100%;
  pointer-events:none;opacity:0;transition:opacity .6s ease;border-radius:11px}
.promo-oral .apercu.vivant .vitrine-toile{opacity:1}
.promo-oral .apercu.vivant .vig i{opacity:0;transition:opacity .5s ease}
/* Le cadre, le nom et la pastille de direct restent : ils habillent le
   rendu, qui n'a ni bordure ni étiquette. */
.promo-oral .apercu.vivant .vig{background:#141922}


/* ===== Brief des points cles et debrief du jury (bilan d'oral blanc) ===== */
.essentiel{background:linear-gradient(135deg,#0f2d52 0%,#1a4a7a 100%);color:#fff;
  border-radius:12px;padding:18px 22px;margin:16px 0}
.essentiel .et{color:#ffd970;text-transform:uppercase;font-size:.8rem;
  letter-spacing:.6px;font-weight:800}
.essentiel .cle{display:flex;gap:12px;align-items:baseline;margin:9px 0;
  font-size:1.02rem;line-height:1.5}
.essentiel .num{background:#ffd970;color:#14310f;font-weight:800;border-radius:50%;
  min-width:24px;height:24px;display:inline-flex;align-items:center;
  justify-content:center;font-size:.85rem;flex:none}
.deb-bulle{background:#f4f7fb;border-left:3px solid var(--bleu);
  border-radius:0 10px 10px 0;padding:10px 15px;margin:8px 0}
.deb-bulle b{color:var(--bleu);font-size:.88rem}
.deb-bulle p{margin:4px 0 0;line-height:1.55}