/* ══════════════════════════════════════════════════════════════════════
   LE CHARGEMENT — le signe se remplit, puis s'efface
   ──────────────────────────────────────────────────────────────────────
   Un voile OPAQUE : on ne voit jamais la page dessous, donc il n'y a
   jamais deux choses superposées à l'écran.

   Le retrait est piloté par le CSS, pas par le JS. C'est délibéré : un
   voile plein écran qui resterait bloqué rendrait le site inutilisable,
   et c'est exactement ce qui arriverait si son retrait dépendait d'un
   fichier JS qui ne charge pas. Ici l'animation `chg-fin` le retire dans
   tous les cas à 1,8 s. Le JS ne fait qu'ACCÉLÉRER ce retrait quand la
   page est prête — il ne peut que raccourcir l'attente, jamais la créer.
   ══════════════════════════════════════════════════════════════════════ */

.chargement {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--ardoise, #091a09);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: chg-fin .45s ease-out 1.8s forwards;
}

/* Posée par le JS dès que la page est prête. */
.chargement.chg-parti {
  animation: none;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .4s ease-out, visibility 0s linear .4s;
}

@keyframes chg-fin {
  to { opacity: 0; visibility: hidden; pointer-events: none; }
}

.chg-signe {
  position: relative;
  width: 52px;
  height: 90px;
}

.chg-creux,
.chg-plein {
  position: absolute;
  inset: 0;
  background-color: var(--craie-doree, #D9A857);
  -webkit-mask: url('/assets/logo/virgule-mono.svg') no-repeat center / contain;
          mask: url('/assets/logo/virgule-mono.svg') no-repeat center / contain;
}

/* Le creux : le signe en attente, à peine visible. */
.chg-creux { opacity: .14; }

/* Le plein : il monte du bas vers le haut, comme un trait qu'on écrit. */
.chg-plein {
  clip-path: inset(100% 0 0 0);
  animation: chg-monte 1.5s cubic-bezier(.5, 0, .3, 1) infinite;
}

@keyframes chg-monte {
  0%   { clip-path: inset(100% 0 0 0); opacity: 1; }
  55%  { clip-path: inset(0 0 0 0);    opacity: 1; }
  85%  { clip-path: inset(0 0 0 0);    opacity: 1; }
  100% { clip-path: inset(0 0 0 0);    opacity: 0; }
}

/* L'arabe lit sa propre virgule : le signe pivote, et le trait se remplit
   dans l'autre sens pour que le geste reste celui de l'écriture. */
[dir="rtl"] .chg-creux,
[dir="rtl"] .chg-plein,
html[lang="ar"] .chg-creux,
html[lang="ar"] .chg-plein { transform: rotate(180deg); }

[dir="rtl"] .chg-plein,
html[lang="ar"] .chg-plein { animation-name: chg-monte-rtl; }

@keyframes chg-monte-rtl {
  0%   { clip-path: inset(0 0 100% 0); opacity: 1; }
  55%  { clip-path: inset(0 0 0 0);    opacity: 1; }
  85%  { clip-path: inset(0 0 0 0);    opacity: 1; }
  100% { clip-path: inset(0 0 0 0);    opacity: 0; }
}

@media (max-width: 640px) {
  .chg-signe { width: 44px; height: 76px; }
}

/* ══════════════════════════════════════════════════════════════════════
   LE GARDIEN — le voile tarde, puis on comprend pourquoi
   ──────────────────────────────────────────────────────────────────────
   Un élève connecté dont il manque une information essentielle (la
   filière) voit le chargement durer « un peu plus longtemps que
   prévu » — puis la question apparaît, dans le même langage visuel que
   le voile lui-même : ardoise, signe doré, craie pâle. On ne redirige
   plus vers une page séparée : c'est le seuil qui demande son mot de
   passe.

   La classe `chg-gardien` est posée par js/app.js AVANT 1,8 s : elle
   neutralise le filet CSS ci-dessus. Deux filets restent :
   - si js/app.js ne charge pas, la classe n'existe pas et `chg-fin`
     retire le voile normalement ;
   - js/app.js lève lui-même le voile au bout de 8 s quoi qu'il arrive.
   ══════════════════════════════════════════════════════════════════════ */

.chargement.chg-gardien {
  animation: none;
  flex-direction: column;
  gap: 34px;
}

.chg-question {
  display: none;
}

.chargement.chg-gardien .chg-question {
  display: block;
  width: min(560px, calc(100vw - 48px));
  opacity: 0;
  transform: translateY(10px);
  /* La question arrive APRÈS un temps de suspension : le signe finit son
     geste, un silence bref, puis seulement on comprend qu'il attend
     quelque chose. C'est ce retard qui raconte « le gardien ». */
  transition: opacity .7s ease-out .9s, transform .7s ease-out .9s;
}

.chargement.chg-gardien.chg-question-visible .chg-question {
  opacity: 1;
  transform: none;
}

/* Le signe pendant la question : il cesse de battre et se pose PLEIN,
   comme un sceau au-dessus du choix. Tant que la question n'est pas là,
   le remplissage en boucle dit honnêtement « ça tarde, ça travaille ».
   Mais une fois la question posée, boucler mentirait — rien ne charge
   plus, c'est l'élève qui retient la porte. On fond donc le calque
   animé (.chg-plein) vers le calque statique (.chg-creux) monté à
   pleine craie : même forme, même or, zéro saut visible. */
.chargement.chg-gardien.chg-question-visible .chg-plein {
  animation: none;
  opacity: 0;
  transition: opacity .45s ease-out;
}

.chargement.chg-gardien.chg-question-visible .chg-creux {
  opacity: 1;
  transition: opacity .45s ease-out .12s;
}

.chg-q-eyebrow {
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--craie-doree, #D9A857);
  text-align: center;
  margin-bottom: 10px;
}

.chg-q-titre {
  font-family: var(--fh, Syne, sans-serif);
  font-size: clamp(22px, 5vw, 30px);
  font-weight: 500;
  color: var(--craie, #E8F5E8);
  text-align: center;
  margin-bottom: 26px;
}

.chg-q-grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}

.chg-fil-btn {
  appearance: none;
  border: 1px solid var(--card-border, rgba(255,255,255,.14));
  background: var(--card-bg, rgba(255,255,255,.05));
  color: var(--craie-pale-vive, rgba(232,245,232,.85));
  border-radius: var(--rayon-moyen, 14px);
  padding: 16px 10px;
  cursor: pointer;
  font-family: inherit;
  /* 14 px : c'est LE choix structurant de l'écran, pas une étiquette. */
  font-size: 14px;
  line-height: 1.35;
  text-align: center;
  transition: border-color .2s ease-out, background-color .2s ease-out,
              color .2s ease-out, transform .2s ease-out;
}

.chg-fil-btn:hover {
  border-color: var(--craie-doree, #D9A857);
  color: var(--craie, #E8F5E8);
  transform: translateY(-2px);
}

.chg-fil-btn:focus-visible {
  outline: 2px solid var(--craie-doree, #D9A857);
  outline-offset: 2px;
}

.chg-fil-btn.chg-fil-choisie {
  border-color: var(--craie-doree, #D9A857);
  background: rgba(217,168,87,.14);
  color: var(--craie, #E8F5E8);
}

/* La carte « Aucune » : la porte discrète pour explorer sans choisir. */
.chg-fil-aucune {
  grid-column: 1 / -1;
  /* Respire un peu plus que la grille : elle n'est pas une 6e filière,
     c'est une autre porte — le gap visuel fait le regroupement. */
  margin-block-start: 8px;
  padding-block: 11px;
  font-size: 12.5px;
  color: var(--craie-pale-2, rgba(232,245,232,.45));
}

.chg-fil-aucune:hover { color: var(--craie-pale-vive, rgba(232,245,232,.85)); }

/* La réassurance : une ligne, en craie pâle — rien n'est verrouillé. */
.chg-q-reassurance {
  margin-top: 12px;
  font-size: 12px;
  text-align: center;
  color: var(--craie-pale-2, rgba(232,245,232,.45));
}

.chg-q-msg {
  min-height: 20px;
  margin-top: 14px;
  font-size: 13px;
  text-align: center;
  color: var(--wrong, #ef4444);
}

@media (prefers-reduced-motion: reduce) {
  .chargement.chg-gardien .chg-question {
    transition-duration: .01s;
    transition-delay: .3s;
    transform: none;
  }
  .chg-fil-btn { transition: none; }
  .chg-fil-btn:hover { transform: none; }
  /* Le signe ne fond pas d'un calque à l'autre : le bloc ci-dessous
     l'affiche déjà plein et immobile, on l'y maintient sans transition. */
  .chargement.chg-gardien.chg-question-visible .chg-plein {
    opacity: 1;
    transition: none;
  }
  .chargement.chg-gardien.chg-question-visible .chg-creux {
    transition: none;
  }
}

/* Mouvement réduit : le signe ne bat pas, il attend simplement. */
@media (prefers-reduced-motion: reduce) {
  .chg-plein { animation: none; clip-path: none; }
  .chg-creux { display: none; }
  .chargement { animation-duration: .2s; animation-delay: 1.2s; }
  .chargement.chg-parti { transition: opacity .2s linear, visibility 0s linear .2s; }
}