/* admin-connexion.css, l'écran de connexion.

   Deux volets : la marque à gauche sur fond d'encre, le formulaire à droite
   sur fond clair. Sur mobile, le volet de marque se réduit à un bandeau. */

body.page-admin-connexion { background: var(--papier); }
/* Le gabarit nu ne pose aucune charpente : la page occupe tout l'écran. */

.connexion {
  display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  min-height: 100vh;
}
@media (max-width: 900px) { .connexion { grid-template-columns: 1fr; min-height: 0; } }
@media (max-width: 420px) {
  .connexion-chiffres { grid-template-columns: 1fr; }
  .connexion-chiffres li { padding-left: var(--e2); }
}

/* --- Volet de marque ------------------------------------------------------ */
.connexion-marque {
  position: relative; overflow: hidden;
  background: var(--encre); color: #A4B2C9;
  padding: clamp(2rem, 4vw, 3.5rem);
  display: flex; flex-direction: column; justify-content: space-between; gap: var(--e5);
}
.connexion-marque::before {
  content: ""; position: absolute; left: -120px; bottom: -180px;
  width: min(400px, 85vw); aspect-ratio: 1; border-radius: 50%;
  background: var(--bleu); opacity: .22;
}
.connexion-marque::after {
  content: ""; position: absolute; right: -90px; top: -110px;
  width: 260px; height: 260px; border-radius: 50%;
  background: var(--jaune); opacity: .12;
}
.connexion-marque > * { position: relative; z-index: 1; }
.connexion-marque img { height: 48px; width: auto; }
.connexion-signature {
  margin: var(--e2) 0 0;
  font-size: var(--t-micro); font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--jaune);
}
.connexion-marque-corps h2 {
  color: #fff; font-size: clamp(1.6rem, 2.6vw, 2.3rem);
  max-width: 16ch; margin-bottom: var(--e4);
}
.connexion-chiffres { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e3); }
.connexion-chiffres li {
  margin: 0; padding-left: var(--e3);
  border-left: 3px solid var(--jaune);
}
.connexion-chiffres strong {
  display: block; font-family: var(--font-titre);
  font-size: 1.9rem; font-weight: 800; letter-spacing: -.03em; line-height: 1; color: #fff;
}
.connexion-chiffres span { font-size: var(--t-mini); color: #8A99B2; }
.connexion-pied-marque { margin: 0; font-size: var(--t-mini); }
.connexion-pied-marque a { color: #A4B2C9; text-decoration: none; }
.connexion-pied-marque a:hover { color: var(--jaune); }

@media (max-width: 900px) {
  .connexion-marque { padding: var(--e4) var(--e3); gap: var(--e3); }
  .connexion-marque-corps h2 { font-size: 1.35rem; margin-bottom: var(--e3); max-width: none; }
  .connexion-chiffres { grid-template-columns: repeat(3, 1fr); gap: var(--e2); }
  .connexion-chiffres strong { font-size: 1.3rem; }
  .connexion-pied-marque { display: none; }
}

/* --- Volet du formulaire -------------------------------------------------- */
.connexion-volet {
  display: grid; place-items: center;
  padding: clamp(2rem, 5vw, 4rem) clamp(1.25rem, 4vw, 3rem);
}
.connexion-boite { width: min(420px, 100%); }
.connexion-boite h1 { font-size: clamp(1.8rem, 3vw, 2.3rem); margin-bottom: .5rem; }
.connexion-intro { color: var(--encre-douce); font-size: var(--t-petit); margin-bottom: var(--e4); }

.message-admin { display: flex; align-items: center; gap: .6rem; }
.message-admin svg { width: 18px; height: 18px; flex: 0 0 auto; }

.connexion-formulaire .champ { margin-bottom: var(--e3); }

/* Champ orné d'une icône, et du bouton d'affichage pour le mot de passe. */
.champ-orne { position: relative; display: flex; align-items: center; }
.champ-orne > svg {
  position: absolute; left: 1rem;
  width: 18px; height: 18px; color: var(--encre-tenue); pointer-events: none;
}
.champ-orne input { width: 100%; padding-left: 2.9rem; }
.champ-orne:focus-within > svg { color: var(--bleu); }
.voir-motdepasse {
  position: absolute; right: .5rem;
  width: 36px; height: 36px; display: grid; place-items: center;
  border: 0; border-radius: 50%; background: none;
  color: var(--encre-tenue); cursor: pointer;
}
.voir-motdepasse:hover { background: var(--bleu-voile); color: var(--bleu-fonce); }
.voir-motdepasse svg { width: 19px; height: 19px; }
.voir-motdepasse[aria-pressed="true"] { color: var(--bleu-fonce); }

.connexion-envoyer { width: 100%; margin-top: var(--e2); }

/* --- Rappel du compte de démonstration ----------------------------------- */
.connexion-demo {
  margin-top: var(--e4); padding: var(--e3);
  background: var(--jaune-doux); border-radius: var(--r);
  color: #6B4E08;
}
.connexion-demo-titre {
  font-size: var(--t-micro); font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  margin: 0 0 var(--e2);
}
.connexion-demo dl { margin: 0 0 var(--e2); display: grid; gap: .35rem; }
.connexion-demo dl > div { display: flex; align-items: baseline; gap: .6rem; }
.connexion-demo dt { font-size: var(--t-mini); min-width: 6.5rem; }
@media (max-width: 380px) { .connexion-demo dl > div { flex-direction: column; gap: .1rem; } }
.connexion-demo dd { margin: 0; }
.connexion-demo code {
  background: rgba(0, 0, 0, .09); padding: .18rem .5rem;
  border-radius: 4px; font-size: .82rem;
}
.connexion-demo-note { font-size: var(--t-mini); margin: 0 0 var(--e2); opacity: .9; }
.connexion-demo .btn { border-color: rgba(107, 78, 8, .35); color: #6B4E08; }
.connexion-demo .btn:hover { background: #6B4E08; color: var(--jaune-doux); border-color: #6B4E08; }