/*
 * LE PANNEAU DE L'ECOLE — UNE SEULE SOURCE pour la porte d'entree (HTML pur)
 * et pour les trois ecrans de connexion (React).
 *
 * VECU : le panneau existait DEUX FOIS — une version HTML/CSS dans web-entry,
 * une version Tailwind dans le composant React. Meme couleur, meme largeur,
 * mais les espacements et la typographie divergeaient : « le premier pas la
 * meme que la seconde ». Deux implementations d'un meme dessin derivent
 * toujours. Il n'y en a plus qu'une : ce fichier, et les memes noms de classe
 * des deux cotes.
 *
 * LE NOM DE L'ECOLE EST LE TITRE. C'est elle qu'on vient voir, pas une
 * accroche. Il est grand, en serif, et sa taille s'adapte a sa longueur —
 * « CSWK » et « Complexe Scolaire Wa KAMISSOKO » tiennent tous les deux.
 */

.panneau-ecole {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 14px;
  padding: 18px 22px 22px;
  color: #fff;
  background: var(--ecole, #17353b);
}
/* VECU : sous 1024px le panneau etait display:none — au Mali, ou la porte
   s'ouvre surtout sur un telephone, l'ecole n'avait NI nom NI couleur NI
   logo. Le panneau est desormais un bandeau d'identite sur mobile, et le
   grand panneau plein ecran a partir de 1024px. */
@media (min-width: 1024px) {
  /* LE PANNEAU NE BOUGE PAS. `sticky` le colle en haut de la fenetre : si la
     colonne de droite defile (mot de passe oublie, message d'erreur, petit
     ecran d'ordinateur portable), l'identite de l'ecole reste sous les yeux
     au lieu de remonter hors du cadre. Un decor qui s'echappe donne
     l'impression d'avoir change de site. */
  .panneau-ecole {
    padding: 40px 56px;
    min-height: 100vh;
    gap: 0;
    position: sticky;
    top: 0;
    align-self: start;
  }
}


/* La trame : du grain, pas du bruit. */
.panneau-ecole .trame {
  position: absolute;
  inset: 0;
  opacity: 0.18;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.12) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.12) 1px, transparent 1px);
  background-size: 46px 46px;
}
.panneau-ecole > *:not(.trame):not(.panneau-photo):not(.panneau-voile) {
  position: relative;
  z-index: 1;
}

/* ---- Haut : la marque, discrete ---- */
.panneau-haut {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.panneau-marque {
  display: flex;
  align-items: center;
  gap: 10px;
  font: 600 12px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.18em;
  color: rgba(255, 255, 255, 0.62);
}
.panneau-edition {
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  padding: 5px 11px;
  font: 600 10px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}

/* Le logo vit sur une pastille blanche : un logo fonce sur fond fonce
   disparaitrait — la pastille le rend lisible sur les 8 ambiances ET sur
   une photo. */
.panneau-logo {
  display: block;
  width: 76px;
  height: 76px;
  padding: 9px;
  border-radius: 18px;
  background: #fff;
  object-fit: contain;
  margin-bottom: 16px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}
@media (max-width: 1023.9px) {
  .panneau-logo { width: 40px; height: 40px; padding: 5px; border-radius: 10px; margin-bottom: 10px; }
}

/* ---- Milieu : LE NOM DE L'ECOLE ---- */
/* UNE LARGEUR EN PIXELS, pas en `ch` : la coupure du nom doit tomber au MEME
   endroit sur la porte d'entree et sur les connexions. En `ch` elle depend de
   la police reellement chargee au moment du rendu, et les deux ecrans ne la
   chargent pas au meme instant — le nom se coupait en 3 lignes d'un cote et
   2 de l'autre, ce qui decalait tout le panneau. */
.panneau-corps { max-width: 420px; }
.panneau-eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
  font: 600 11px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent, #d5b067);
}
.panneau-eyebrow i {
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: var(--accent, #d5b067);
  flex: none;
}
/* La taille suit la longueur du nom : un nom court respire, un nom long
   reste lisible. Trois paliers, poses par le script sur data-longueur. */
.panneau-nom {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;
  font-size: clamp(38px, 4.4vw, 60px);
  line-height: 1.02;
  letter-spacing: -0.025em;
}
[data-longueur="court"] .panneau-nom { font-size: clamp(48px, 6vw, 76px); }
[data-longueur="long"] .panneau-nom { font-size: clamp(30px, 3.2vw, 44px); }
@media (max-width: 1023.9px) {
  .panneau-nom,
  [data-longueur="court"] .panneau-nom,
  [data-longueur="long"] .panneau-nom { font-size: clamp(24px, 7vw, 34px); }
  .panneau-ville { margin-top: 6px; font-size: 13px; }
  .panneau-eyebrow { margin-bottom: 8px; }
}
.panneau-ville {
  margin: 16px 0 0;
  font-size: 15px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.62);
}

/* ---- Bas : la reassurance et le monument ---- */
.panneau-bas {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}
.panneau-rassurance {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.55);
}
.panneau-rassurance svg { color: var(--accent, #d5b067); flex: none; }
.panneau-monument { flex: none; opacity: 0.9; }

/* ---- Le visage PHOTO : la photo de l'ecole, accordee a l'ecran ----
 * Couche 1 (.panneau-photo) : la photo, legerement desaturee, puis baignee
 *   dans la couleur d'ambiance (::after en multiply) — n'importe quelle photo
 *   de telephone glisse vers la palette de l'ecole.
 * Couche 2 (.panneau-voile) : le socle — degrade vers l'ambiance en bas, le
 *   nom en blanc regne dessus. Aucune photo ne peut rendre le nom illisible.
 */
.panneau-photo {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: saturate(0.85);
}
.panneau-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--ecole, #17353b);
  opacity: 0.22;
  mix-blend-mode: multiply;
}
.panneau-voile {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.22),
    transparent 32%,
    transparent 46%,
    var(--ecole, #17353b) 90%
  );
}
.panneau-ecole > .panneau-photo,
.panneau-ecole > .panneau-voile { z-index: 0; }

/* ---- Mobile : les arbitrages, en fin de cascade pour etre certains ----
 * Le badge d'edition encombre un petit ecran ; Djenne et la reassurance,
 * eux, RESTENT — c'est la signature du produit, meme sur 5 pouces. */
@media (max-width: 1023.9px) {
  .panneau-edition { display: none; }
  .panneau-monument { width: 118px; height: 74px; }
}