/* ═══════════════════════════════════════════════════════════════════════
   NAJAH — LES PAGES DE CONNEXION
   ═══════════════════════════════════════════════════════════════════════

   Les quatre espaces (famille, professeur, établissement, élève) avaient
   chacun leur propre formulaire, écrit à part. Résultat : l'établissement
   avait un libellé au-dessus de chaque case, un bouton « Afficher » pour
   le mot de passe et une roue d'attente ; les trois autres n'avaient
   qu'un texte gris à l'intérieur de la case, qui disparaissait dès qu'on
   cliquait dedans, et un bouton qui ne montrait rien pendant que le
   serveur réfléchissait.

   Tout est maintenant ici, et le comportement dans « /js/connexion.js ».
   Une correction faite une fois vaut pour les quatre.

   À savoir sur deux détails qui ont une raison :

   — Le message d'erreur est VIDE dans la page. Son texte n'est écrit
     qu'au moment où il y a vraiment une erreur. Tant qu'il était écrit
     d'avance dans le HTML, une feuille de style lente ou périmée pouvait
     le laisser apparaître à l'ouverture : on arrivait sur la page et on
     lisait « Identifiant ou mot de passe incorrect » avant d'avoir rien
     tenté.

   — Le bouton n'est jamais vraiment « disabled » quand les cases sont
     vides : il en a l'air (.inactif), mais il reste cliquable, et le clic
     affiche « Veuillez remplir tous les champs » en plaçant le curseur
     dans la case oubliée. Un bouton mort ne dit pas pourquoi il est mort.
   ═══════════════════════════════════════════════════════════════════════ */

.cnx-ecran{ min-height:100vh; display:flex; flex-direction:column; }

/* La barre du haut : retour au site d'un côté, les langues de l'autre. */
.cnx-barre{
  display:flex; justify-content:space-between; align-items:center; gap:12px;
  padding:18px 20px; max-width:1180px; width:100%; margin:0 auto;
}
.cnx-retour{
  color:var(--gris); text-decoration:none; font-size:13.5px;
  display:inline-flex; gap:6px; align-items:center;
  padding:8px 4px; /* de quoi viser avec un pouce */
}
.cnx-retour:hover{ color:var(--encre); }
.cnx-langues{
  display:flex; gap:3px; background:var(--papier);
  border:1px solid var(--trait); border-radius:100px; padding:3px;
}
.cnx-langues .lang-btn{
  border:none; background:transparent; color:var(--gris);
  font:600 11.5px 'Space Grotesk',sans-serif; padding:7px 12px;
  border-radius:100px; cursor:pointer; min-height:32px;
}
.cnx-langues .lang-btn.active{ background:var(--bleu); color:#fff; }

.cnx-centre{
  flex:1; display:flex; align-items:center; justify-content:center;
  padding:12px 20px 48px;
}
.cnx-carte{ width:100%; max-width:410px; }

.cnx-logo{
  display:flex; align-items:center; gap:11px; text-decoration:none;
  color:var(--encre); margin-bottom:26px;
}
.cnx-logo span.rond{
  width:40px; height:40px; border-radius:11px; display:grid; place-items:center;
  font-weight:700; font-size:19px; color:#fff;
  background:linear-gradient(155deg, #3B82F6, var(--bleu));
  box-shadow:0 6px 18px rgba(37,99,235,.28);
}
.cnx-logo b{ font-family:'Space Grotesk',sans-serif; font-size:20px; letter-spacing:-.01em; }

.cnx-carte h1{
  font-family:'Space Grotesk',sans-serif; font-size:27px; font-weight:700;
  letter-spacing:-.015em; margin:0 0 8px; line-height:1.2;
}
.cnx-sous{ color:var(--gris); font-size:14.5px; line-height:1.55; margin:0 0 26px; }

/* ─── Le message d'erreur ─── */
.cnx-erreur{
  display:none; gap:10px; align-items:flex-start;
  padding:12px 14px; border-radius:12px; margin-bottom:18px;
  font-size:13.5px; line-height:1.45;
  color:#8E2A2A; background:rgba(179,58,58,.08); border:1px solid rgba(179,58,58,.3);
}
.cnx-erreur.visible{ display:flex; }
.cnx-erreur svg{ flex-shrink:0; margin-top:1px; }

/* ─── Les cases ─── */
.cnx-champ{ margin-bottom:18px; }
.cnx-champ label{
  display:flex; justify-content:space-between; align-items:baseline; gap:10px;
  font-size:13.5px; font-weight:600; margin-bottom:8px; color:var(--encre);
}
.cnx-saisie{ position:relative; display:flex; align-items:center; }
.cnx-saisie svg.ic{
  position:absolute; inset-inline-start:14px; color:var(--gris); pointer-events:none;
}
.cnx-saisie input{
  width:100%; height:50px; padding:0 14px; padding-inline-start:44px;
  border-radius:12px; border:1px solid var(--trait); background:var(--papier);
  color:var(--encre); font:500 15.5px 'Space Grotesk',sans-serif; outline:none;
  transition:border-color .15s, box-shadow .15s;
}
.cnx-saisie input::placeholder{ color:#90A6BC; font-weight:400; }
.cnx-saisie input:focus{ border-color:var(--bleu); box-shadow:0 0 0 4px rgba(37,99,235,.14); }
.cnx-saisie input.mdp{ padding-inline-end:92px; }

/* Le bouton « Afficher / Masquer ». Il manquait partout sauf sur
   l'établissement : sans lui, un mot de passe donné par l'école — huit
   caractères mêlant majuscules et minuscules — se tape à l'aveugle. */
.cnx-voir{
  position:absolute; inset-inline-end:7px; height:38px; min-width:44px; padding:0 12px;
  border-radius:9px; border:none; cursor:pointer; background:transparent;
  color:var(--gris); font:600 12.5px 'Space Grotesk',sans-serif;
}
.cnx-voir:hover{ color:var(--encre); background:var(--brume); }

.cnx-oubli{ color:var(--bleu); font-size:13px; font-weight:500; text-decoration:none; }
.cnx-oubli:hover{ text-decoration:underline; }

/* ─── Le bouton ─── */
.cnx-valider{
  width:100%; height:52px; border:none; border-radius:12px; cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:10px;
  font:700 15.5px 'Space Grotesk',sans-serif; color:#fff;
  background:linear-gradient(180deg, #3B82F6, var(--bleu));
  box-shadow:0 10px 24px -8px rgba(37,99,235,.5), inset 0 1px 0 rgba(255,255,255,.22);
  transition:transform .1s, filter .15s, opacity .15s;
}
.cnx-valider:hover{ filter:brightness(1.05); }
.cnx-valider:active{ transform:translateY(1px); }
/* Cases vides : il en a l'air éteint, mais il répond — voir l'en-tête. */
.cnx-valider.inactif{ opacity:.55; box-shadow:none; }
.cnx-valider:disabled{ opacity:.75; cursor:wait; }
.cnx-roue{
  width:18px; height:18px; border-radius:50%; display:none;
  border:2.5px solid rgba(255,255,255,.35); border-top-color:#fff;
  animation:cnx-tourne .7s linear infinite;
}
.cnx-valider.charge .cnx-roue{ display:block; }
@keyframes cnx-tourne{ to{ transform:rotate(360deg); } }
/* Quelqu'un qui a demandé moins d'animations n'a pas à subir la roue :
   le bouton dit « Connexion… », cela suffit à montrer qu'il travaille. */
@media (prefers-reduced-motion: reduce){
  .cnx-roue{ animation:none; }
}

.cnx-securise{
  display:flex; justify-content:center; align-items:center; gap:7px;
  color:var(--gris); font-size:12.5px; margin-top:14px;
}
.cnx-separation{ height:1px; background:var(--trait); margin:26px 0 20px; }
.cnx-pied{ text-align:center; font-size:14px; color:var(--gris); line-height:1.7; }
.cnx-pied a{ color:var(--bleu); font-weight:600; text-decoration:none; }
.cnx-pied a:hover{ text-decoration:underline; }
.cnx-autres{ text-align:center; font-size:12.5px; color:var(--gris); margin-top:16px; }
.cnx-autres a{ color:var(--gris); }

/* ─── Le panneau « j'ai perdu mon identifiant » de l'élève ───
   L'élève ne peut rien réinitialiser lui-même : son accès vient de son
   école, et c'est elle seule qui peut lui en redonner un. Plutôt qu'un
   lien qui n'aboutit nulle part, on le lui explique en trois lignes. */
.cnx-aide{
  display:none; margin-top:14px; padding:14px 16px; border-radius:12px;
  background:var(--ciel); border:1px solid var(--trait);
  font-size:13.5px; line-height:1.6; color:var(--encre);
}
.cnx-aide.visible{ display:block; }
.cnx-aide b{ display:block; margin-bottom:6px; font-family:'Space Grotesk',sans-serif; }
.cnx-aide p{ margin:0 0 8px; color:var(--gris); }
.cnx-aide p:last-child{ margin-bottom:0; }

body.is-rtl{ direction:rtl; }
body.is-rtl .cnx-retour svg{ transform:scaleX(-1); }

@media (max-width: 420px){
  .cnx-carte h1{ font-size:23px; }
  .cnx-centre{ padding:4px 16px 36px; }
  .cnx-barre{ padding:14px 16px; }
}