/* ==========================================================================
   Window Portal Network — l'espace client
   Jaune : c'est le module Network. Le ton est plus chaleureux que celui du
   portail — ici, c'est un client du bar qui regarde, pas un gestionnaire.
   ========================================================================== */

* { box-sizing: border-box; }

/* L'attribut `hidden` doit l'emporter sur tout `display` posé ensuite.
   Sans cette règle, `.connexion { display: flex }` rend visible un élément
   pourtant marqué `hidden`, et l'écran de connexion ne disparaît jamais. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--wpn-fond);
  color: var(--wpn-ancre);
  font-family: var(--police-texte);
  font-size: 16px;
  line-height: var(--interligne-normal);
  -webkit-font-smoothing: antialiased;
}

.enveloppe {
  max-width: 1060px; margin: 0 auto;
  padding: var(--espace-12) var(--espace-6) var(--espace-24);
}

/* ==========================================================================
   Écran d'inscription
   ========================================================================== */

.accueil {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: var(--espace-6);
  background: var(--wpn-jaune-400);
}
.accueil-carte {
  background: #fff; border-radius: var(--rayon-xl);
  padding: var(--espace-12) var(--espace-8);
  width: 100%; max-width: 430px;
  box-shadow: 0 30px 70px rgba(27,31,42,0.22);
}
.accueil-logo { width: 50px; height: auto; display: block; margin-bottom: var(--espace-6); }
.accueil-carte h1 {
  font-family: var(--police-titre); font-weight: var(--graisse-noire);
  font-size: var(--texte-2xl); margin: 0 0 var(--espace-2);
  letter-spacing: -0.02em;
}
.accueil-sous { color: var(--wpn-neutre-500); margin: 0 0 var(--espace-8); }

.champ { display: block; margin-bottom: var(--espace-4); }
.champ-nom {
  display: block; font-size: var(--texte-sm);
  font-weight: var(--graisse-moyenne); margin-bottom: var(--espace-2);
}
.champ input {
  width: 100%; padding: 13px 16px;
  border: 1.5px solid var(--wpn-neutre-100); border-radius: var(--rayon-md);
  font-family: var(--police-texte); font-size: var(--texte-base);
  background: var(--wpn-neutre-50); color: var(--wpn-ancre);
}
.champ input:focus {
  outline: none; border-color: var(--wpn-jaune-600); background: #fff;
}

.btn-plein {
  width: 100%; margin-top: var(--espace-2);
  padding: 14px; border: 0; border-radius: var(--rayon-md);
  background: var(--wpn-ancre); color: #fff;
  font-family: var(--police-ui); font-size: var(--texte-base);
  font-weight: var(--graisse-moyenne); cursor: pointer;
}
.btn-plein:hover { background: var(--wpn-jaune-800); }

.accueil-note {
  margin: var(--espace-8) 0 0; padding-top: var(--espace-6);
  border-top: 1px solid var(--wpn-neutre-100);
  font-size: var(--texte-sm); color: var(--wpn-neutre-500);
}

/* ==========================================================================
   Espace connecté
   ========================================================================== */

.tete {
  background: #fff;
  border-bottom: 1px solid var(--wpn-neutre-100);
  position: sticky; top: 0; z-index: 20;
}
.tete-contenu {
  max-width: 1060px; margin: 0 auto;
  padding: var(--espace-4) var(--espace-6);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--espace-6);
}
.tete-marque {
  display: flex; align-items: center; gap: var(--espace-3);
  text-decoration: none; color: inherit;
}
.tete-marque svg { width: 28px; height: auto; }
.tete-marque span { font-weight: var(--graisse-grasse); }

.btn-sortir {
  padding: 9px 16px; border-radius: var(--rayon-md);
  background: transparent; border: 1.5px solid var(--wpn-neutre-100);
  color: var(--wpn-neutre-500);
  font-family: var(--police-ui); font-size: var(--texte-sm);
  cursor: pointer;
}
.btn-sortir:hover { border-color: var(--wpn-ancre); color: var(--wpn-ancre); }

.bienvenue { margin-bottom: var(--espace-12); }
.etiquette {
  font-size: var(--texte-xs); font-weight: var(--graisse-grasse);
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--wpn-neutre-400); margin: 0 0 var(--espace-3);
}
.bienvenue h2 {
  font-family: var(--police-titre); font-weight: var(--graisse-noire);
  font-size: clamp(1.9rem, 4.5vw, 2.7rem); line-height: 1.1;
  letter-spacing: -0.03em; margin: 0 0 var(--espace-3);
}
.bienvenue-sous { color: var(--wpn-neutre-500); margin: 0; max-width: 58ch; }

/* ==========================================================================
   Cartes
   ========================================================================== */

.grille {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: var(--espace-6);
}
.carte-large { grid-column: 1 / -1; }
@media (max-width: 760px) {
  .grille { grid-template-columns: 1fr; }
}

.carte {
  background: #fff; border: 1px solid var(--wpn-neutre-100);
  border-radius: var(--rayon-lg); padding: var(--espace-6);
}
.carte-etiquette {
  font-size: var(--texte-xs); font-weight: var(--graisse-grasse);
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--wpn-jaune-800); margin: 0 0 var(--espace-6);
}
.carte h3 { margin: 0 0 var(--espace-2); font-size: var(--texte-lg); }
.carte-texte { margin: 0 0 var(--espace-6); color: var(--wpn-neutre-500); font-size: var(--texte-sm); }

/* --- Événements --- */

.evenements { display: flex; flex-direction: column; gap: var(--espace-6); }
.evenement {
  display: grid; grid-template-columns: 64px 1fr auto;
  gap: var(--espace-4); align-items: center;
}
.evenement + .evenement { padding-top: var(--espace-6); border-top: 1px solid var(--wpn-neutre-100); }
.evenement-quand {
  display: flex; flex-direction: column; align-items: center;
  padding: var(--espace-3) var(--espace-2);
  background: var(--wpn-jaune-100); border-radius: var(--rayon-md);
  line-height: 1.2;
}
.evenement-quand b { font-size: var(--texte-sm); letter-spacing: 0.04em; }
.evenement-quand span { font-size: var(--texte-xs); color: var(--wpn-neutre-500); }
.evenement h3 { margin: 0 0 3px; font-size: var(--texte-base); }
.evenement p { margin: 0; font-size: var(--texte-sm); color: var(--wpn-neutre-500); }
@media (max-width: 620px) {
  .evenement { grid-template-columns: 56px 1fr; }
  .evenement .btn-mince { grid-column: 1 / -1; }
}

.btn-mince {
  padding: 9px 16px; border-radius: var(--rayon-md);
  background: var(--wpn-ancre); color: #fff; border: 0;
  font-family: var(--police-ui); font-size: var(--texte-sm);
  font-weight: var(--graisse-moyenne); cursor: pointer; white-space: nowrap;
}
.btn-mince:hover { background: var(--wpn-jaune-800); }
.btn-mince.fait { background: var(--wpn-jaune-400); color: var(--wpn-ancre); }

/* --- Fidélité --- */

.fidelite { display: flex; flex-direction: column; gap: var(--espace-6); }
.tampons { display: flex; gap: var(--espace-2); flex-wrap: wrap; }
.tampon {
  width: 30px; height: 30px; border-radius: 6px;
  transform: rotate(45deg);
  border: 1.5px solid var(--wpn-neutre-200);
}
.tampon.plein { background: var(--wpn-jaune-400); border-color: var(--wpn-jaune-400); }
.fidelite-texte { margin: 0; font-size: var(--texte-sm); color: var(--wpn-neutre-500); }

/* --- Nouvelles --- */

.nouvelles { display: flex; flex-direction: column; gap: var(--espace-6); }
.nouvelle + .nouvelle { padding-top: var(--espace-6); border-top: 1px solid var(--wpn-neutre-100); }
.nouvelle-date {
  display: block; font-size: var(--texte-xs);
  color: var(--wpn-neutre-400); margin-bottom: var(--espace-2);
  letter-spacing: 0.04em; text-transform: uppercase; font-weight: var(--graisse-grasse);
}
.nouvelle p { margin: 0; font-size: var(--texte-sm); }

.pied-note {
  margin-top: var(--espace-16); padding-top: var(--espace-8);
  border-top: 1px solid var(--wpn-neutre-100);
  font-size: var(--texte-sm); color: var(--wpn-neutre-500);
  max-width: 62ch;
}
.pied-note a { color: var(--wpn-bleu-600); }

/* ==========================================================================
   Confirmation
   ========================================================================== */

.toast {
  position: fixed; left: 50%; bottom: 28px;
  transform: translateX(-50%);
  background: var(--wpn-ancre); color: #fff;
  padding: 14px 26px; border-radius: var(--rayon-md);
  font-size: var(--texte-sm); font-weight: var(--graisse-moyenne);
  box-shadow: var(--ombre-lg); z-index: 100;
  display: flex; align-items: center; gap: var(--espace-3);
}
.toast::before {
  content: ""; width: 9px; height: 9px;
  background: var(--wpn-jaune-400); border-radius: 2px;
  transform: rotate(45deg);
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}