/* Habillage provisoire de l'écran de connexion (à redessiner avec la DA).
   La police se règle depuis le QG (voir /js/polices.js). */

:root {
  --nuit: #14213a;
  --nuit-fonce: #0b1426;
  --papier: #f6efe1;
  --encre: #2b2118;
  --encre-douce: #6b5b4b;
  --rouge: #a8322d;
  --rouge-fonce: #862521;
  --erreur: #9b2620;
}

* { box-sizing: border-box; }

html, body { height: 100%; margin: 0; }

body {
  min-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  background: radial-gradient(ellipse at 50% 20%, var(--nuit) 0%, var(--nuit-fonce) 75%);
  background-color: var(--nuit-fonce);
  color: var(--encre);
  font-family: var(--police-texte, Georgia, "Times New Roman", serif);
  font-size: calc(18px * var(--taille-texte, 1));
}

/* Petites étoiles fixes en fond (sans animation). */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 18%, #fff9 50%, transparent 51%),
    radial-gradient(1px 1px at 28% 72%, #fff8 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 46% 12%, #fffa 50%, transparent 51%),
    radial-gradient(1px 1px at 63% 38%, #fff7 50%, transparent 51%),
    radial-gradient(2px 2px at 81% 22%, #fffb 50%, transparent 51%),
    radial-gradient(1px 1px at 90% 66%, #fff8 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 7% 88%, #fff8 50%, transparent 51%),
    radial-gradient(1px 1px at 72% 90%, #fff7 50%, transparent 51%);
}

.carte {
  position: relative;
  width: 100%;
  max-width: 400px;
  padding: 32px 28px 28px;
  background: var(--papier);
  border-radius: 6px;
  box-shadow: 0 12px 40px #0008;
  text-align: center;
}

.carte[hidden] { display: none; }

h1 {
  margin: 0 0 4px;
  font-family: var(--police-titre, Georgia, "Times New Roman", serif);
  font-weight: var(--poids-titre, 400);
  font-size: calc(1.7rem * var(--taille-titre, 1));
  line-height: 1.2;
}

.sous-titre {
  margin: 0 0 28px;
  color: var(--encre-douce);
  font-style: var(--style-sous-titre, italic);
  font-size: 1rem;
}

form { text-align: left; }

label.champ {
  display: block;
  margin-bottom: 6px;
  font-size: 1rem;
  color: var(--encre-douce);
}

select, input[type="password"], input[type="text"] {
  display: block;
  width: 100%;
  margin-bottom: 20px;
  padding: 12px 14px;
  font: inherit;
  font-size: max(16px, 1.1rem); /* au moins 16px : évite le zoom automatique sur iPhone */
  color: var(--encre);
  background: #fffdf8;
  border: 1.5px solid #c9bba5;
  border-radius: 6px;
  min-height: 52px;
}

select:focus, input:focus {
  outline: 3px solid #e6b85a;
  outline-offset: 1px;
  border-color: #b08a4a;
}

.mot-de-passe { position: relative; }
.mot-de-passe input { padding-right: 96px; }

.voir {
  position: absolute;
  top: 6px;
  right: 6px;
  height: 40px;
  padding: 0 12px;
  font: inherit;
  font-size: 0.95rem;
  color: var(--encre-douce);
  background: transparent;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.souvenir {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 24px;
  font-size: 1.05rem;
  cursor: pointer;
  user-select: none;
}

.souvenir input {
  width: 24px;
  height: 24px;
  margin: 0;
  accent-color: var(--rouge);
  cursor: pointer;
}

button.entrer {
  display: block;
  width: 100%;
  min-height: 56px;
  font: inherit;
  font-size: 1.2rem;
  color: #fff;
  background: var(--rouge);
  border: none;
  border-radius: 6px;
  cursor: pointer;
}

button.entrer:hover { background: var(--rouge-fonce); }
button.entrer:disabled { opacity: 0.6; cursor: wait; }

.erreur {
  min-height: 1.4em;
  margin: 16px 0 0;
  color: var(--erreur);
  font-size: 1rem;
  text-align: center;
}

.attente {
  color: #fff9;
  font-style: italic;
}

/* Pages provisoires (bureau, QG) une fois connecté. */
.lien-discret {
  margin-top: 24px;
  font: inherit;
  font-size: 1rem;
  color: var(--encre-douce);
  background: none;
  border: none;
  text-decoration: underline;
  cursor: pointer;
  padding: 8px;
}