/* ═══════════════════════════════════════════════════════════════════════
   Nous — feuille de style
   Les tokens viennent de tokens.css (source de vérité, issue des maquettes).
   Pas de framework, pas de build : ce fichier part tel quel par rsync.
   ═══════════════════════════════════════════════════════════════════════ */

@import url("tokens.css");

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--papier-ombre);
  color: var(--encre);
  font-family: var(--police-texte);
  font-size: var(--texte-base);
  line-height: var(--interligne-texte);
  /* Grain discret : deux trames à très faible opacité, comme un papier. */
  background-image:
    repeating-linear-gradient(0deg,   rgba(237,231,218,.014) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg,  rgba(237,231,218,.014) 0 1px, transparent 1px 4px);
}

h1, h2, h3 {
  font-family: var(--police-titre);
  font-weight: 400;
  line-height: var(--interligne-titre);
  letter-spacing: var(--interlettre-titre);
  margin: 0;
}

a { color: var(--bleu); text-decoration: none; }
a:hover { color: var(--voix-laurine); }

/* ── Libellés en majuscules espacées — le seul usage du sans-serif ───── */
.label {
  font-family: var(--police-label);
  font-size: var(--texte-xxs);
  letter-spacing: var(--interlettre-label);
  text-transform: uppercase;
  color: var(--encre-douce);
}

/* ── Ornement : filet · losange · filet ──────────────────────────────── */
.ornement {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--espace-3);
}
.ornement::before, .ornement::after {
  content: "";
  width: 44px;
  height: var(--filet);
  background: var(--or-pale);
}
.losange {
  width: 5px;
  height: 5px;
  background: var(--or-pale);
  transform: rotate(45deg);
}

/* ── Page de connexion ───────────────────────────────────────────────── */
.connexion {
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--espace-6) var(--gouttiere-page);
  /* Le halo de lanterne, comme sur le diaporama. */
  background: var(--halo-lanterne);
}

.carte {
  width: 100%;
  max-width: 360px;
  background: var(--papier);
  border-radius: var(--rayon-doux);
  box-shadow: var(--ombre-fiche);
  padding: var(--espace-8) var(--espace-5) var(--espace-7);
  text-align: center;
}

.carte h1 {
  font-size: var(--texte-xl);
  margin-bottom: var(--espace-4);
}

.champ { text-align: left; margin-top: var(--espace-5); }
.champ label { display: block; margin-bottom: var(--espace-2); }

.champ input[type="email"],
.champ input[type="password"] {
  width: 100%;
  padding: var(--espace-3);
  background: var(--papier-clair);
  border: var(--filet) solid var(--trait);
  border-radius: var(--rayon-doux);
  color: var(--encre);
  font-family: var(--police-texte);
  font-size: var(--texte-base);
}
.champ input:focus {
  outline: none;
  border-color: var(--trait-accent);
}

.bouton {
  margin-top: var(--espace-6);
  width: 100%;
  min-height: var(--cible-tactile);
  background: transparent;
  border: var(--filet) solid var(--or-pale);
  border-radius: var(--rayon-doux);
  color: var(--encre);
  font-family: var(--police-titre);
  font-size: var(--texte-md);
  cursor: pointer;
  transition: background 160ms ease-out;
}
.bouton:hover { background: var(--papier-clair); }

.erreur {
  margin-top: var(--espace-4);
  padding: var(--espace-3);
  border-left: 2px solid var(--or-encre);
  color: var(--or-encre);
  font-size: var(--texte-sm);
  text-align: left;
}

/* ── Accueil provisoire (lot 0) ──────────────────────────────────────── */
.accueil {
  max-width: var(--largeur-lecture);
  margin: 0 auto;
  padding: var(--espace-8) var(--gouttiere-page);
  text-align: center;
}
.compteur {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: var(--espace-2);
  margin: var(--espace-5) 0;
}
.compteur .nombre {
  font-family: var(--police-titre);
  font-size: var(--texte-lg);
  color: var(--or-encre);
}