/*
 * Portail captif GR20.
 *
 * Contexte d'usage réel (NF3) : un téléphone tenu d'une main, en extérieur, à
 * la lumière du jour, par quelqu'un qui vient de marcher huit heures. D'où :
 * contraste élevé, cibles tactiles larges, aucune information décorative.
 *
 * Aucune ressource externe — ni police, ni image distante. La page est servie
 * par le routeur et doit s'afficher sans consommer un octet de lien satellite
 * (contrainte n°2), y compris quand le central est tombé (contrainte n°4).
 */

:root {
  --granite: #1c1f24;
  --granite-clair: #2a2f36;
  --brume: #6b7480;
  --neige: #f5f6f7;
  --papier: #ffffff;
  --sapin: #1d6b52;
  --sapin-vif: #23845f;
  --myrtille: #3a5a8c;
  --alerte: #a8352c;
  --bord: #dfe2e6;
  /* L'en-tête a ses propres tokens : les rôles fond/texte des variables
     générales s'inversent en thème sombre, et réutiliser --neige comme couleur
     de texte y donnait du sombre sur du sombre. */
  --entete-fond: #1c1f24;
  --entete-texte: #f5f6f7;
  --entete-attenue: #9aa3ae;
  --entete-bord: #3d444d;
  --rayon: 14px;
  --gouttiere: 16px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

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

body {
  margin: 0;
  padding: 0;
  background: var(--neige);
  color: var(--granite);
  /* Polices système : rien à télécharger, rendu natif sur chaque plateforme */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.page {
  max-width: 560px;
  margin: 0 auto;
  padding: 0 var(--gouttiere) 40px;
}

/* ---------- En-tête ---------- */

.entete {
  background: var(--entete-fond);
  color: var(--entete-texte);
  padding: 22px var(--gouttiere) 26px;
  margin-bottom: -14px;
}

.entete-haut {
  max-width: 560px;
  margin: 0 auto;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.gite-nom {
  margin: 0;
  font-size: 22px;
  font-weight: 650;
  letter-spacing: -0.01em;
}

.gite-sous-titre {
  margin: 2px 0 0;
  font-size: 14px;
  color: var(--entete-attenue);
}

/* Sélecteur de langue : trois codes courts, pas un menu déroulant — un tap,
   pas deux, et le choix reste visible. */
.langues { display: flex; gap: 4px; flex: none; }

.langue {
  appearance: none;
  border: 1px solid var(--entete-bord);
  background: transparent;
  color: var(--entete-attenue);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  padding: 7px 10px;
  min-width: 42px;
  border-radius: 8px;
  cursor: pointer;
}

.langue[aria-pressed="true"] {
  background: var(--entete-texte);
  border-color: var(--entete-texte);
  color: var(--entete-fond);
}

/* ---------- Blocs ---------- */

.carte {
  background: var(--papier);
  border: 1px solid var(--bord);
  border-radius: var(--rayon);
  padding: 18px;
  margin-top: var(--gouttiere);
}

.titre-section {
  margin: 26px 0 10px;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--brume);
}

/* ---------- Forfaits ---------- */

.forfaits { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }

/* Le forfait entier est cliquable : viser un petit bouton avec des doigts
   froids, sur un écran en plein soleil, ne marche pas. */
.forfait {
  display: block;
  width: 100%;
  text-align: left;
  font: inherit;
  color: inherit;
  background: var(--papier);
  border: 1.5px solid var(--bord);
  border-radius: var(--rayon);
  padding: 16px 18px;
  cursor: pointer;
}

.forfait:active { transform: scale(0.99); }

.forfait[aria-pressed="true"] {
  border-color: var(--sapin);
  box-shadow: inset 0 0 0 1.5px var(--sapin);
}

.forfait-haut {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.forfait-nom { font-size: 19px; font-weight: 650; }

.forfait-prix { font-size: 21px; font-weight: 700; white-space: nowrap; }

.forfait-desc { margin: 6px 0 0; font-size: 15px; color: #4c545e; }

.forfait-meta {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.etiquette {
  font-size: 12.5px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 999px;
  background: #eef0f2;
  color: #4c545e;
}

/* Le palier « séjour » est le seul argument que la concurrence ne peut pas
   égaler : il doit se voir sans être lu. */
.etiquette--reseau { background: #e6efe9; color: var(--sapin); }

/* ---------- Actions ---------- */

.bouton {
  display: block;
  width: 100%;
  font: inherit;
  font-size: 18px;
  font-weight: 650;
  padding: 17px 20px;
  border: none;
  border-radius: var(--rayon);
  cursor: pointer;
  margin-top: var(--gouttiere);
}

.bouton--principal { background: var(--sapin); color: #fff; }
.bouton--principal:active { background: var(--sapin-vif); }
.bouton--principal:disabled { background: #c3c8ce; color: #f0f1f3; cursor: default; }

.bouton--discret {
  background: transparent;
  color: var(--myrtille);
  font-size: 16px;
  font-weight: 600;
  padding: 12px;
}

/* ---------- Saisie d'un code ---------- */

.champ-code {
  width: 100%;
  font: inherit;
  font-size: 26px;
  font-weight: 650;
  letter-spacing: 0.22em;
  text-align: center;
  text-transform: uppercase;
  padding: 15px 10px;
  border: 1.5px solid var(--bord);
  border-radius: var(--rayon);
  background: var(--papier);
}

.champ-code:focus { outline: 2px solid var(--myrtille); outline-offset: 1px; }

/* ---------- Messages ---------- */

.message { border-radius: var(--rayon); padding: 14px 16px; margin-top: var(--gouttiere); font-size: 15.5px; }
.message--erreur { background: #fbeceb; color: var(--alerte); border: 1px solid #f0cfcc; }
.message--info { background: #eaf0f8; color: #2c4670; border: 1px solid #cfdcee; }
.message--succes { background: #e6efe9; color: var(--sapin); border: 1px solid #c9e0d3; }

.code-livre {
  font-size: 34px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-align: center;
  margin: 10px 0 4px;
}

.pied {
  margin-top: 28px;
  font-size: 13px;
  color: var(--brume);
  text-align: center;
}

.pied a { color: var(--brume); }

[hidden] { display: none !important; }

.chargement { text-align: center; color: var(--brume); padding: 26px 0; }

/* Un randonneur en pleine lumière n'a pas besoin du mode sombre ; un randonneur
   sous la couette à 22 h, si. */
@media (prefers-color-scheme: dark) {
  :root {
    --neige: #15181c;
    --papier: #1e2228;
    --granite: #eef0f2;
    --bord: #333a42;
    --brume: #8b949f;
  }
  body { background: var(--neige); color: var(--granite); }
  .entete { --entete-fond: #0f1216; --entete-bord: #333a42; }
  .forfait { background: var(--papier); }
  .forfait-desc { color: #a8b0ba; }
  .etiquette { background: #2b313a; color: #a8b0ba; }
  .etiquette--reseau { background: #1c3a2e; color: #6cc39a; }
  .champ-code { background: var(--papier); color: var(--granite); }
  .message--erreur { background: #331d1b; border-color: #5a2f2b; color: #f0a49c; }
  .message--info { background: #1b2534; border-color: #2d3f5c; color: #a8c2e8; }
  .message--succes { background: #163025; border-color: #2a5442; color: #6cc39a; }
}