/* ---------------------------------------------------------------------------
   Page de connexion.

   Elle ne partage pas style.css : celui-ci porte toute l'application, et la
   page de connexion est servie avant authentification. Autant qu'elle ne
   depende de rien, et qu'elle ne revele rien de l'interieur.
--------------------------------------------------------------------------- */
:root {
  --fond: #f4f6f8;
  --carte: #ffffff;
  --bord: #d7dde3;
  --texte: #1f2933;
  --discret: #6b7681;
  --accent: #0b5fa5;
  --ko: #b3261e;
  --attente: #8a6d1f;
}

* { box-sizing: border-box; }

/* « hidden » doit l'emporter : les regles d'affichage qui suivent posent un
   display explicite, et celui-ci recouvrirait sinon la valeur par defaut du
   navigateur -- le monogramme de repli restait affiche a cote du logo. */
[hidden] { display: none !important; }

body {
  margin: 0;
  min-height: 100vh;
  font: 14px/1.45 "Segoe UI", system-ui, -apple-system, sans-serif;
  color: var(--texte);
  /* Un degrade de bleu profond, assez sobre pour un ecran de travail. */
  background: radial-gradient(1100px 560px at 50% -10%, rgba(255, 255, 255, .14) 0%, transparent 60%),
              linear-gradient(160deg, #0b2d4a 0%, #0b5fa5 55%, #0a4a82 100%);
  background-attachment: fixed;
}

.connexion {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: 24px 16px;
}

.carte {
  width: 100%; max-width: 380px;
  background: var(--carte);
  border-radius: 10px;
  padding: 30px 28px 24px;
  box-shadow: 0 18px 50px rgba(5, 25, 45, .35);
  display: flex; flex-direction: column; gap: 14px;
}

/* ------------------------------------------------------------- marque --- */
.marque { display: flex; justify-content: center; margin-bottom: 6px; }
/* Le logo fait 256 x 121 : on borne les deux cotes pour qu'un remplacement
   de proportions differentes ne deforme pas la carte. */
.marque img { max-width: 210px; max-height: 100px; object-fit: contain; }

/* Repli quand aucun fichier de logo n'a ete depose : un monogramme dessine
   en CSS, qui ne peut pas manquer a l'appel. */
.monogramme { display: flex; align-items: center; gap: 10px; }
.monogramme__signe {
  width: 38px; height: 38px; border-radius: 9px;
  background: var(--accent); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 21px; font-weight: 700; letter-spacing: .02em;
}
.monogramme__nom {
  font-size: 19px; font-weight: 600; letter-spacing: .22em;
  color: var(--accent);
}

/* ------------------------------------------------------------- textes --- */
h1 {
  margin: 0; text-align: center;
  font-size: 17px; font-weight: 600; letter-spacing: .03em;
}
.sous-titre {
  margin: -10px 0 6px; text-align: center;
  font-size: 12.5px; color: var(--discret);
}

/* ------------------------------------------------------------- champs --- */
.champ { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; color: var(--discret); }
.champ input {
  width: 100%; padding: 9px 10px;
  font: inherit; font-size: 14px; color: var(--texte);
  border: 1px solid var(--bord); border-radius: 6px;
  background: #fbfcfd;
}
.champ input:focus {
  outline: none; background: #fff;
  border-color: var(--accent); box-shadow: 0 0 0 3px rgba(11, 95, 165, .15);
}

/* Le mot de passe et son oeil : l'oeil est DANS le champ, sinon il passe a
   la ligne sur un ecran etroit. */
.champ__secret { position: relative; display: block; }
.champ__secret input { padding-right: 38px; }
.voir {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  width: 30px; height: 30px; line-height: 1;
  border: 0; background: transparent; cursor: pointer;
  font-size: 15px; opacity: .55; border-radius: 6px;
}
.voir:hover { opacity: 1; background: #eef2f6; }

.primaire {
  margin-top: 4px; padding: 10px 14px;
  font: inherit; font-weight: 600; color: #fff;
  background: var(--accent); border: 0; border-radius: 6px;
  cursor: pointer;
}
.primaire:hover { background: #0a5493; }
.primaire:disabled { opacity: .6; cursor: default; }

/* ------------------------------------------------------------ message --- */
.message {
  margin: 2px 0 0; padding: 9px 11px;
  border-radius: 6px; font-size: 13px;
  background: #fbdedc; color: var(--ko);
  border: 1px solid #f0c3bf;
}
.message--attente {
  background: #fdf1cf; color: var(--attente); border-color: #e8d49a;
}
.cachee { display: none !important; }

.pied {
  margin: 6px 0 0; text-align: center;
  font-size: 11.5px; color: var(--discret);
}