/* ============================================================================
   MODE FORMATION — projecteur et bandeau de leçon.

   TOUT EST PRÉFIXÉ « .mode-formation » : en mode Expert, aucune de ces règles
   ne s'applique. Rien à désactiver au cas par cas, rien à masquer.

   BARÈME DES COUCHES. Le bouton flottant du Copilote vit en z-index 1400 et la
   barre supérieure est collante : sans barème, le projecteur passerait dessous.
     1500  le voile du projecteur
     1600  le bandeau de leçon
   Le bloc visé n'est PAS remonté en z-index : il resterait rogné par les
   sections en overflow:hidden. C'est le voile qui est troué à sa place.
   ============================================================================ */

.fo-voile{
  position:fixed; inset:0; z-index:1500;
  background:rgba(6,12,24,.62);
  opacity:0; transition:opacity .22s ease;
  pointer-events:none;            /* la page reste utilisable pendant la leçon */
}
.fo-voile.on{ opacity:1; }

/* Le liseré qui dessine le bloc étudié. Séparé du voile : le trou du voile
   n'a pas de bordure, et un contour dessiné en plus se place au pixel près. */
.fo-cadre{
  position:fixed; z-index:1501; pointer-events:none;
  border:2px solid var(--bz-blue-vif, #1b5cff);
  border-radius:14px;
  box-shadow:0 0 0 3px rgba(27,92,255,.18);
  opacity:0; transition:opacity .22s ease;
}
.fo-cadre.on{ opacity:1; }

@media (prefers-reduced-motion: reduce){
  .fo-voile, .fo-cadre{ transition:none; }
}

/* --- Le bandeau ----------------------------------------------------------- */

.fo-bandeau{
  position:fixed; left:0; right:0; bottom:0; z-index:1600;
  background:var(--bz-surface, #fff);
  border-top:1px solid rgba(var(--bz-ink-rgb, 15,27,51),.14);
  box-shadow:0 -8px 30px rgba(var(--bz-ink-rgb, 15,27,51),.14);
  padding:14px 0 calc(14px + env(safe-area-inset-bottom));
}
.fo-inner{ width:100%; max-width:1140px; margin:0 auto; padding:0 24px; }
.fo-pas{ margin:0; font-size:.74rem; font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; color:var(--bz-blue, #1b5cff); }
.fo-titre{ margin:4px 0 6px; font-size:1.06rem; }
/* 58 signes de mesure, comme partout ailleurs sur le site. */
.fo-texte{ margin:0 0 12px; font-size:.94rem; line-height:1.6;
  color:var(--bz-text-2, #33415c); max-width:58ch; }

.fo-actions{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.fo-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.4em;
  min-height:44px; padding:0 16px; border-radius:10px;
  font:inherit; font-size:.88rem; font-weight:600; cursor:pointer;
  text-decoration:none; border:1px solid rgba(var(--bz-ink-rgb, 15,27,51),.18);
  background:transparent; color:var(--bz-text, #101c35);
}
.fo-btn:hover{ border-color:var(--bz-blue, #1b5cff); color:var(--bz-blue, #1b5cff); }
.fo-suite{ background:var(--bz-blue, #1b5cff); border-color:var(--bz-blue, #1b5cff);
  color:#0b1526; }
.fo-suite:hover{ color:#0b1526; filter:brightness(1.06); }
.fo-lien{ border-color:transparent; color:var(--bz-text-3, #5b6982); padding:0 10px; }
/* LE BOUTON DE LECTURE DIT SON ETAT PAR LA COULEUR.
   Vert quand la voix parle, ambre quand elle est en pause : on sait d'un coup
   d'oeil, sans lire le libelle, si la lecon avance ou attend.
   ⚠ L'ENCRE POSEE DESSUS NE BASCULE PAS AVEC LE THEME. Le reflexe etait
   « --bz-sur-accent » (blanc en clair, marine en bleu) : mesure, le blanc ne
   tient pas sur ces deux fonds — 3,39 sur le vert, 2,75 sur l'ambre. Ces
   couleurs sont CLAIRES dans les deux themes, il leur faut donc une encre
   sombre dans les deux, comme les bandes deja sombres du site (--bz-sur-sombre).
   Mesure avec le marine : 5,3 et 6,5 en clair, 11,4 et 11,0 en bleu. */
.fo-voix.fo-lit{
  background:var(--bz-green-vif, #46c26b); border-color:var(--bz-green-vif, #46c26b);
  color:#0b1526;
}
.fo-voix.fo-lit:hover{ color:#0b1526; filter:brightness(1.05); }
.fo-voix.fo-arret{
  background:var(--bz-amber-vif, #f0a52c); border-color:var(--bz-amber-vif, #f0a52c);
  color:#0b1526;
}
.fo-voix.fo-arret:hover{ color:#0b1526; filter:brightness(1.05); }
.fo-voix[aria-pressed="true"]{ border-color:var(--bz-blue, #1b5cff); color:var(--bz-blue, #1b5cff); }
.fo-voix.fo-lit[aria-pressed="true"]{ border-color:var(--bz-green-vif, #46c26b); color:#0b1526; }

/* Le temps de lecture, au-dessus du titre. */
/* La duree de la SEQUENCE, sur la ligne du titre. Elle se pousse a droite quand
   la place le permet, et passe a la ligne sinon. */
.fo-titre{ display:flex; flex-wrap:wrap; align-items:baseline; gap:.4em .7em; }
.fo-duree-seq{ margin-left:auto; font-size:.72rem; }
/* Le groupe « arreter / avancer » : une ligne a lui, quelle que soit la
   largeur, pour que « Stop » n'en fasse pas naitre une de plus. */
.fo-fin{ display:flex; flex-wrap:nowrap; align-items:center; gap:8px; flex:1 1 100%; min-width:0; }
.fo-fin .fo-btn{ flex:1 1 auto; min-width:0; }
.fo-fin .fo-stop{ flex:0 0 auto; }
.fo-stop{ color:var(--bz-text-3, #5b6982); }
.fo-stop:hover{ border-color:var(--bz-red, #c2410c); color:var(--bz-red, #c2410c); }
.fo-duree{ margin-left:.5em; padding:.05em .5em; border-radius:999px;
  background:rgba(var(--bz-ink-rgb, 15,27,51),.07); color:var(--bz-text-3, #5b6982);
  font-weight:600; letter-spacing:0; text-transform:none; white-space:nowrap; }
.fo-voix[disabled]{ opacity:.55; cursor:default; }
/* ⚠ « display:inline-flex » L'EMPORTE SUR [hidden] de la feuille du navigateur :
   les boutons « Précédent », « ↺ 10 s » et « Terminer » restaient visibles alors
   que le script les avait masqués. Mesuré à la mise en service. */
.fo-btn[hidden]{ display:none; }

/* La barre de lecture. Elle sert de repérage : on voit ce qu'il reste à
   entendre avant que la séquence suivante ne prenne la main. */
.fo-piste{ height:3px; margin:0 0 12px; border-radius:2px; max-width:58ch;
  background:rgba(var(--bz-ink-rgb, 15,27,51),.10); overflow:hidden; }
.fo-piste span{ display:block; height:100%; width:0;
  background:var(--bz-blue, #1b5cff); transition:width .25s linear; }
@media (prefers-reduced-motion: reduce){ .fo-piste span{ transition:none; } }

/* La page ne doit pas se terminer sous le bandeau. La hauteur est POSEE PAR LE
   SCRIPT, qui mesure le bandeau : une valeur fixe laissait le contenu recouvert
   des qu'une question s'affichait, et la page paraissait bloquee. Celle-ci ne
   sert que si le script ne tourne pas. */
.mode-formation.fo-en-cours{ padding-bottom:240px; }

/* ⚠ LE BANDEAU NE DOIT JAMAIS DEPASSER LA MOITIE DE L'ECRAN. Au-dela, il n'y a
   plus de place pour ce qu'il explique — et c'est bien la page qu'on etudie qui
   compte. S'il deborde, il defile en lui-meme. */
.fo-bandeau{ max-height:52vh; overflow-y:auto; overscroll-behavior:contain; }

/* ===========================================================================
   LE PANNEAU LATERAL — a partir de 1024 px.
   Un bandeau qui barre le bas de l'ecran mange la moitie de la page, et c'est
   justement la page qu'on etudie : le bloc explique se retrouvait rogne, la
   liste des secteurs coupee en plein milieu. Sur un ecran large, la lecon se
   range donc sur un COTE, et la page occupe l'autre. Elle n'est plus recouverte
   du tout : elle est retrecie, ce qui n'est pas la meme chose.
   Le cote est choisi par le script, en fonction du bloc eclaire — le panneau se
   met a l'oppose. Sous 1024 px, le bandeau du bas reste la seule mise en page
   possible.
   =========================================================================== */
@media (min-width:1024px){
  .fo-bandeau{
    top:0; bottom:0; width:min(420px, 34vw);
    max-height:none; padding:26px 0 calc(26px + env(safe-area-inset-bottom));
    border-top:0;
    /* ⚠ PAS DE CENTRAGE VERTICAL. « align-items:center » sur une boite qui
       defile rend le HAUT du contenu inatteignable : la sequence 2 mesure
       739 px pour un panneau de 720, et son titre serait passe hors d'acces.
       Le contenu part donc du haut, comme dans n'importe quelle colonne. */
    display:block;
  }
  .fo-bandeau.fo-a-droite{ left:auto; right:0;
    border-left:1px solid rgba(var(--bz-ink-rgb, 15,27,51),.14);
    box-shadow:-10px 0 34px rgba(var(--bz-ink-rgb, 15,27,51),.16); }
  .fo-bandeau.fo-a-gauche{ right:auto; left:0;
    border-right:1px solid rgba(var(--bz-ink-rgb, 15,27,51),.14);
    box-shadow:10px 0 34px rgba(var(--bz-ink-rgb, 15,27,51),.16); }
  .fo-bandeau.fo-a-droite .fo-inner,
  .fo-bandeau.fo-a-gauche .fo-inner{ max-width:none; padding:0 26px; }
  /* La mesure de lecture ne depend plus de la largeur de l'ecran mais de celle
     du panneau : la contrainte en « ch » n'a plus lieu d'etre. */
  .fo-bandeau.fo-a-droite .fo-texte, .fo-bandeau.fo-a-gauche .fo-texte,
  .fo-bandeau.fo-a-droite .fo-piste, .fo-bandeau.fo-a-gauche .fo-piste{ max-width:none; }
  .fo-bandeau.fo-a-droite .fo-titre, .fo-bandeau.fo-a-gauche .fo-titre{ font-size:1.12rem; }
  /* Les commandes tiennent sur deux lignes plutot que de deborder en largeur. */
  .fo-bandeau.fo-a-droite .fo-btn, .fo-bandeau.fo-a-gauche .fo-btn{ flex:1 1 45%; }
  .fo-bandeau.fo-a-droite .fo-quitter, .fo-bandeau.fo-a-gauche .fo-quitter{ flex:1 1 100%; }
}

@media (max-width:640px){
  .fo-inner{ padding:0 16px; }
  .fo-titre{ font-size:1rem; }
  .fo-texte{ font-size:.9rem; }
  /* Sur téléphone les commandes prennent toute la largeur plutôt que de se
     tasser à trois par ligne : la cible reste franche. */
  .fo-actions{ gap:6px; }
  .fo-btn{ flex:1 1 46%; padding:0 10px; }
  .fo-quitter{ flex:1 1 100%; }
  .mode-formation.fo-en-cours{ padding-bottom:340px; }
  .fo-bandeau{ max-height:55vh; }
}

/* --- Replier la lecon (sous 1024 px seulement) ---------------------------- */
/* Le bandeau du bas prend la place de ce qu'il explique. La lecon etant lue a
   voix haute, on doit pouvoir la reduire a une barre : le rang, le titre et les
   commandes suffisent pour continuer, et l'ecran revient au bloc etudie. */
.fo-plier{
  position:absolute; top:8px; right:10px; z-index:2;
  width:44px; height:44px; border-radius:12px; cursor:pointer;
  border:1px solid rgba(var(--bz-ink-rgb, 15,27,51),.16);
  background:var(--bz-surface, #fff); color:var(--bz-text-2, #33415c);
  font-size:1rem; line-height:1; transition:transform .18s ease;
}
.fo-bandeau{ position:fixed; }         /* rappel : le bouton se pose dessus */
.fo-bandeau.fo-replie .fo-plier{ transform:rotate(180deg); }
.fo-bandeau.fo-replie .fo-texte,
.fo-bandeau.fo-replie .fo-piste,
.fo-bandeau.fo-replie .fo-quiz{ display:none; }
.fo-bandeau.fo-replie .fo-titre{ margin-bottom:10px; }
/* Le titre ne doit pas passer sous le bouton. */
.fo-bandeau .fo-pas, .fo-bandeau .fo-titre{ padding-right:52px; }
@media (min-width:1024px){
  .fo-plier{ display:none; }
  .fo-bandeau .fo-pas, .fo-bandeau .fo-titre{ padding-right:0; }
}
@media (prefers-reduced-motion: reduce){ .fo-plier{ transition:none; } }

/* --- La page de cours ----------------------------------------------------- */

.co-page{ max-width:720px; margin:0 auto; padding:36px 24px 60px; }
.co-eyebrow{ margin:0 0 6px; font-size:.74rem; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--bz-blue, #1b5cff); }
.co-page h1{ margin:0 0 10px; font-size:1.72rem; line-height:1.25; }
.co-chapeau{ margin:0 0 22px; font-size:1.02rem; line-height:1.7;
  color:var(--bz-text-2, #33415c); max-width:58ch; }
.co-page p{ font-size:1rem; line-height:1.75; max-width:58ch; }
.co-retenir{
  margin:26px 0 0; padding:18px 20px; border-radius:14px;
  border:1px solid rgba(var(--bz-ink-rgb, 15,27,51),.12);
  background:var(--bz-bg-soft, #f6f8fc);
}
.co-retenir b{ display:block; margin-bottom:6px; font-size:.78rem;
  letter-spacing:.08em; text-transform:uppercase; color:var(--bz-blue, #1b5cff); }
.co-retour{ display:inline-flex; align-items:center; min-height:44px;
  margin-top:26px; padding:0 20px; border-radius:10px;
  background:var(--bz-blue, #1b5cff); color:#0b1526;
  font-weight:600; text-decoration:none; }
.co-retour:hover{ filter:brightness(1.06); }

@media (max-width:640px){
  .co-page{ padding:24px 16px 48px; }
  .co-page h1{ font-size:1.3rem; }
}

/* --- Le quiz -------------------------------------------------------------- */

.fo-quiz{ margin:0 0 12px; }
/* La question en cours de lecture se signale : sans repere, le lecteur ne sait
   pas laquelle la voix est en train de poser. */
.fo-q-active{ padding-left:10px; border-left:3px solid var(--bz-blue, #1b5cff); }
.fo-quiz[hidden]{ display:none; }
.fo-q{ margin:0 0 10px; font-weight:600; }
.fo-choix{ display:flex; flex-direction:column; gap:6px; margin:0 0 10px; }
.fo-choix button{
  text-align:left; min-height:44px; padding:10px 14px; border-radius:10px;
  font:inherit; font-size:.9rem; cursor:pointer;
  border:1px solid rgba(var(--bz-ink-rgb, 15,27,51),.18);
  background:var(--bz-surface, #fff); color:var(--bz-text, #101c35);
}
.fo-choix button:hover{ border-color:var(--bz-blue, #1b5cff); }
/* Vert = juste, rouge = faux : ici la couleur dit un résultat de quiz, pas un
   jugement sur un placement — l'usage reste conforme à la règle du site. */
.fo-choix button.juste{ border-color:var(--bz-green, #0a7b54); color:var(--bz-green, #0a7b54); font-weight:600; }
.fo-choix button.faux{ border-color:var(--bz-red, #d43d3d); color:var(--bz-red, #d43d3d); }
.fo-verdict{ margin:0 0 12px; font-size:.92rem; line-height:1.6;
  color:var(--bz-text-2, #33415c); max-width:58ch; }

/* L'ACTION D'UNE SEQUENCE — le moment ou le lecteur fait, au lieu d'ecouter.
   Elle se distingue des commandes de lecture : celles-ci pilotent la voix,
   celle-la modifie son espace. Un bouton qui change quelque chose ne doit pas
   ressembler a « Suivant ». */
.fo-form-action { display: contents; }
.fo-btn.fo-action {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
    font-weight: 600;
}
.fo-btn.fo-action:hover:not(:disabled) { filter: brightness(1.08); }
.fo-btn.fo-action:disabled {
    background: var(--surface-2);
    border-color: var(--border);
    color: var(--text-mute);
    font-weight: 500;
    cursor: default;
}