/* passage 17 : BANDEAU EXAMEN (maquette REFERENCE-VALIDEE/ecrans/bandeau-examen.png) — collé en haut de l'écran, zone sûre comprise
   passage 18 : texte qui DÉFILE en continu (pause tant que le doigt est posé), HAUTEUR FIXE, place réservée dès le premier affichage */
:root{--bx-h:calc(42px + env(safe-area-inset-top))}
/* html.avec-bandeau est posé par js/bandeau.js (synchrone, dans <head>) AVANT le premier affichage : la bande jaune et la marge sont déjà là
   quand le texte arrive → rien ne saute */
html.avec-bandeau body{padding-top:var(--bx-h);box-sizing:border-box}
html.avec-bandeau body::before{content:"";position:fixed;top:0;left:0;right:0;height:var(--bx-h);box-sizing:border-box;background:#FFF0C2;border-bottom:2px solid #F3D98A;z-index:89}
.bx{position:fixed;top:0;left:0;right:0;z-index:90;box-sizing:border-box;height:var(--bx-h);display:flex;align-items:center;gap:8px;margin:0;padding:env(safe-area-inset-top) 12px 0 0;background:#FFF0C2;border-bottom:2px solid #F3D98A;color:#173B2C;text-decoration:none;font:700 14.5px Nunito,system-ui;-webkit-tap-highlight-color:transparent;overflow:hidden;touch-action:manipulation;-webkit-user-select:none;user-select:none}
.bx-f{flex:1;min-width:0;overflow:hidden;white-space:nowrap;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 14px,#000 calc(100% - 18px),transparent);mask-image:linear-gradient(90deg,transparent 0,#000 14px,#000 calc(100% - 18px),transparent)}
.bx-p{display:inline-flex;white-space:nowrap;will-change:transform;animation:bx-defile 18s linear infinite}
.bx-g{display:inline-flex;flex:none}
.bx-m{display:inline-flex;align-items:center;gap:8px;flex:none;padding-left:14px}
.bx-m:after{content:"";width:6px;height:6px;border-radius:50%;background:#e2b84a;margin-left:14px;flex:none}   /* séparateur entre deux messages */
.bx-m b{font-weight:900}
.bx-j{flex:none;font:900 14px Nunito,system-ui;color:#FFD24A;background:#173B2C;border-radius:10px;padding:3px 9px;letter-spacing:.2px}
.bx-c{flex:none}
.bx.pause .bx-p,.bx:focus-visible .bx-p{animation-play-state:paused}
@media (hover:hover){.bx:hover .bx-p{animation-play-state:paused}}
.bx:active{background:#ffe9a8}
@keyframes bx-defile{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* mouvement réduit demandé par le téléphone : pas de défilement, le premier message reste lisible */
@media (prefers-reduced-motion:reduce){.bx-p{animation:none}.bx-g+.bx-g{display:none}}