/* ═══════════════════════════════════════════════════════════════
   PAGES DE CONNEXION — administration et secrétariat
   ═══════════════════════════════════════════════════════════════
   Une seule feuille pour les deux pages : elles étaient identiques,
   copiées l'une dans l'autre, et divergeaient à chaque retouche.

   Les choix qui comptent, et pourquoi :
   • les champs font 16 px — en dessous, Safari sur iPhone zoome tout
     seul au premier appui, et la page part de travers ;
   • la photo du centre n'est qu'une décoration : le fond vert est
     peint d'abord, donc la page reste lisible avant son arrivée, et
     sur une connexion coupée ;
   • les étiquettes sont de vraies étiquettes, pas des textes
     d'indication qui disparaissent dès qu'on tape.
   ═══════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --vert-nuit:  #072B22;
  --vert-fonce: #0A4D3C;
  --vert:       #15775A;
  --vert-clair: #E4F1EB;
  --encre:      #16211D;
  --encre-doux: #52605B;
  --trait:      #DDE4E0;
  --rouge:      #B3261E;
  --rouge-pale: #FDECEA;
}

body {
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: var(--encre);
  /* Le fond uni est peint en premier : la photo ne fait que l'habiller. */
  background: var(--vert-nuit);
}
body::before {
  content: '';
  position: fixed; inset: 0; z-index: -1;
  background:
    linear-gradient(160deg, rgba(7,43,34,.93) 0%, rgba(10,77,60,.86) 55%, rgba(7,43,34,.95) 100%),
    url('/assets/photos/banniere-salle-1600.jpg') center/cover no-repeat;
}

.carte {
  width: 100%;
  max-width: 400px;
  background: #fff;
  border-radius: 18px;
  padding: 34px 30px 28px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .34);
}

.marque { text-align: center; margin-bottom: 24px; }
.marque img {
  width: 62px; height: 62px;
  object-fit: contain;
  border-radius: 14px;
  margin-bottom: 12px;
}
.marque h1 { font-size: 21px; font-weight: 700; color: var(--vert-nuit); }
.marque p { font-size: 13.5px; color: var(--encre-doux); margin-top: 2px; }

.champ { margin-bottom: 14px; }
.champ label {
  display: block;
  font-size: 13px; font-weight: 600;
  color: var(--encre-doux);
  margin-bottom: 5px;
}
.champ input {
  width: 100%;
  padding: 13px 14px;
  font-family: inherit;
  font-size: 16px;                 /* sous 16px, iOS zoome à la saisie */
  color: var(--encre);
  background: #FBFCFB;
  border: 1.5px solid var(--trait);
  border-radius: 10px;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.champ input:focus {
  outline: none;
  background: #fff;
  border-color: var(--vert);
  box-shadow: 0 0 0 3px var(--vert-clair);
}

/* Champ mot de passe : le bouton œil tient dans le champ. */
.champ-mdp { position: relative; }
.champ-mdp input { padding-right: 52px; }
.voir {
  position: absolute; right: 6px; bottom: 6px;
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: 9px;
  background: transparent;
  color: var(--encre-doux);
  font-size: 17px; line-height: 1;
  cursor: pointer;
}
.voir:hover { background: var(--vert-clair); color: var(--vert-fonce); }
.voir:focus-visible { outline: 3px solid var(--vert); outline-offset: -2px; }

.bouton {
  width: 100%;
  margin-top: 6px;
  padding: 14px;
  font-family: inherit; font-size: 16px; font-weight: 600;
  color: #fff;
  background: var(--vert-fonce);
  border: 0; border-radius: 10px;
  cursor: pointer;
  transition: background .15s, transform .15s;
}
.bouton:hover { background: var(--vert); }
.bouton:active { transform: translateY(1px); }
.bouton[disabled] { opacity: .65; cursor: progress; }

/* Messages : l'erreur est annoncée, pas seulement colorée. */
.alerte {
  display: flex; gap: 9px;
  padding: 11px 13px;
  margin-bottom: 16px;
  border-radius: 10px;
  background: var(--rouge-pale);
  border: 1px solid #F2C9C5;
  color: var(--rouge);
  font-size: 14px;
}
.alerte::before { content: '!'; font-weight: 700; }

.indice {
  display: none;
  margin-top: 6px;
  font-size: 13px;
  color: #8A6100;
}
.indice.visible { display: block; }

.pied {
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid var(--trait);
  text-align: center;
  font-size: 13px;
}
.pied a { color: var(--encre-doux); text-decoration: none; }
.pied a:hover { color: var(--vert-fonce); text-decoration: underline; }

:focus-visible { outline: 3px solid var(--vert); outline-offset: 2px; border-radius: 8px; }

@media (max-width: 380px) {
  .carte { padding: 26px 20px 22px; border-radius: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}