: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 ---------- */
/* La barre de site. Le selecteur ne vise QUE l'en-tete de page : ecrit
   « header{...} », il s'appliquait a tout <header> imbrique, y compris
   celui de chaque fiche de revision et de chaque entree de veille. Les
   48 titres de fiches etaient donc ecrits en blanc sur fond blanc, donc
   invisibles, et chaque entree de veille portait une barre bleue collante
   qui recouvrait la navigation au defilement. Les deux sites etaient
   touches : 98 fiches sur 98 cote DGFiP. */
body > 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}
/* Le resserrement des largeurs intermediaires etait ici, dans une requete
   « entre 1081 et 1480 px » calee sur les neuf entrees de la DGFiP. Elle
   produisait un paradoxe visible : la barre etait plus serree a 1440 px
   qu'a 1600 px, alors que la place disponible est la meme, puisque le
   bandeau est borne a la largeur de la colonne de texte. C'est desormais
   ajusterEnTete() qui decide, sur mesure du debordement reel et non sur
   un seuil : voir la classe .nav-serree plus bas. */

.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}
/* Connecte, le bouton porte le pseudonyme du candidat. Il reste dore, mais
   plus sobre : c'est devenu un reperage de session, plus un appel a agir.
   Le pseudonyme est saisi librement, donc borne puis tronque proprement. */
.nav-connexion.compte-connecte{background:rgba(255,255,255,.14);color:#fff;
  border:1px solid rgba(255,255,255,.3);font-weight:600;
  max-width:11em;overflow:hidden;text-overflow:ellipsis;display:inline-block}
.nav-connexion.compte-connecte::before{content:"";display:inline-block;
  width:7px;height:7px;border-radius:50%;background:var(--or);margin-right:7px;
  vertical-align:middle}
.nav-connexion.compte-connecte:hover{background:rgba(255,255,255,.24);color:#fff}

/* ---------- 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. */
/* Le repli est desormais commande par la classe .nav-repliee, posee par
   ajusterEnTete() quand le menu deborde reellement de la barre. Un seuil
   de largeur ne pouvait pas suffire : le nombre d'entrees depend du
   manifeste de la prepa et du concours choisi, le nom de marque aussi, et
   le pseudonyme s'ajoute apres connexion. Sur la prepa territoriale, dix
   entrees et « Prepa Territoriale » debordaient a 1330 px, soit bien
   au-dessus du seuil de 1080 px cale sur les neuf entrees de la DGFiP :
   « Veille » etait tronquee sans le moindre signe. */
header.nav-repliee .bandeau{flex-wrap:wrap;position:relative}
header.nav-repliee .nav-bascule{display:flex}
header.nav-repliee nav{display:none;flex-direction:column;gap:0;order:3;flex-basis:100%;
  margin:8px 0 2px;overflow:visible}
header.nav-repliee.nav-ouverte nav{display:flex}
header.nav-repliee nav a{padding:12px 4px;font-size:1rem;border-bottom:1px solid rgba(255,255,255,.1)}
header.nav-repliee nav a.actif,
header.nav-repliee 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-repliee nav a.lien-compte{max-width:none}
header.nav-repliee .nav-connexion{margin-left:8px}

/* Filet de securite : si le script ne tourne pas, le menu se replie tout
   de meme sur les petites largeurs plutot que de se tronquer. */
@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}
  header nav a.lien-compte{max-width:none}
  .nav-connexion{margin-left:8px}
}

/* Palier intermediaire, pose par ajusterEnTete() avant le repli complet :
   on resserre l'espacement et la taille avant de sacrifier le menu en
   ligne, qui reste plus lisible qu'un bouton. */
header.nav-serree nav{gap:11px}
header.nav-serree nav a{font-size:.85rem}
header.nav-serree .bandeau{gap:14px}
header.nav-serree nav a.lien-compte{max-width:6.5em}
@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}
/* Deux selecteurs empiles, « je prepare » puis « par la voie ». Sans cette
   regle, la marge de 14px du second se collait aux pastilles du premier :
   une prepa multi-categories affiche les deux lignes, une prepa a concours
   unique n'en affiche aucune, et le reglage doit tenir dans les deux cas. */
.choix-concours + .choix-concours{margin-top:10px}
/* Les pastilles portent un complement en <small> (la categorie). Sans
   hauteur de ligne fixee, ce complement fait grandir la pastille et les
   deux lignes finissent par se toucher. */
.choix-concours a{border:1px solid var(--bord);border-radius:20px;padding:5px 14px;
  color:var(--texte);font-weight:600;font-size:.85rem;
  display:inline-flex;align-items:baseline;gap:.3em;line-height:1.35;white-space:nowrap}
.choix-concours a small{font-size:.8em;font-weight:500}
/* Les libelles des deux lignes sont de longueurs differentes : sans
   largeur commune, les pastilles ne demarrent pas au meme endroit et
   l'oeil lit deux listes sans rapport. */
.choix-concours > span:first-child{min-width:7.5em;flex:0 0 auto}
@media(max-width:560px){
  .choix-concours{gap:6px}
  .choix-concours > span:first-child{min-width:100%}
}
.choix-concours a:hover{border-color:var(--bleu-clair);text-decoration:none}
/* .pris est la classe historique du selecteur de concours DGFiP ; .actif
   celle des selecteurs construits par le moteur multi-prepas. Les deux
   designent la meme chose : la pastille du choix courant. */
.choix-concours a.pris,
.choix-concours a.actif{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)){
  /* Meme correction qu'a la ligne du selecteur principal : « header »
     seul repeignait aussi les en-tetes de fiches et d'entrees de veille. */
  body > 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}