@charset "UTF-8";

/* ============================================================================
   FEUILLE DE STYLE COMMUNE AUX DEUX ESPACES
   Billetterie des supporters et espace de gestion du staff.

   Elle reprend les jetons du site public (noir #232121, or #FFD200, un seul
   rayon de 3 px) sans dépendre de style.css : ces pages doivent pouvoir
   s'ouvrir seules.

   RAPPEL DE CONTRASTE : l'or ne fait que 1,45:1 sur du blanc. Sur fond clair
   il ne sert qu'au décor ; le texte doré utilise --or-texte (#8A6A00, 5,1:1).
   ========================================================================== */

:root {
  --noir:        #232121;
  --noir-deep:   #141313;
  --noir-soft:   #3A3634;
  --or:          #FFD200;
  --or-deep:     #E0B900;
  --or-texte:    #8A6A00;

  --bg:        #F5F4F2;
  --surface:   #FFFFFF;
  --surface-2: #EAE7E3;
  --texte:       #232121;
  --texte-soft:  #55504D;
  --texte-muted: #6E6864;
  --ligne:        #E3DFDA;
  --ligne-forte:  #C7C1BA;

  --ok:      #1B7F4B;
  --ok-fond: #E8F5EE;
  --ko:      #B3261E;
  --ko-fond: #FBEAE8;

  --radius: 3px;
  --font: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  color-scheme: light;
}

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--texte);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  margin: 0;
  font-weight: 800;
  font-stretch: 88%;
  line-height: 1.1;
  letter-spacing: -0.015em;
  text-transform: uppercase;
}

p { margin: 0 0 0.9rem; }
p:last-child { margin-bottom: 0; }
ul { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }
svg { max-width: none; flex: none; }
button, input, select, textarea { font: inherit; color: inherit; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Un « display » posé par une classe l'emporte sur l'attribut hidden, dont la
   règle par défaut du navigateur n'a qu'une spécificité de zéro. Sans cette
   ligne, chaque zone de message cachée laisse un cadre vide à l'écran. */
[hidden] { display: none !important; }

.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }


/* ============================================================================
   BANDEAU DU MODE DÉMONSTRATION
   Obligatoire : sans lui, on croirait manipuler de vraies données.
   ========================================================================== */
.demo-bandeau {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem clamp(1rem, 4vw, 2rem);
  background: var(--or);
  color: #232121;
  font-size: 0.82rem;
  font-weight: 700;
}
.demo-bandeau svg { flex: none; }
.demo-bandeau b { font-weight: 800; }


/* ============================================================================
   ÉCRAN DE CONNEXION
   ========================================================================== */
.auth {
  min-height: 100dvh;
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.auth__visuel {
  position: relative;
  display: grid;
  place-items: center;
  padding: 2rem;
  background: var(--noir-deep);
  overflow: hidden;
  isolation: isolate;
}
.auth__visuel img { width: min(46%, 260px); position: relative; }
.auth__visuel::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 6px;
  background: var(--or);
}
.auth__mot {
  position: absolute;
  bottom: 2.5rem;
  left: 0; right: 0;
  text-align: center;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--or);
}

.auth__corps {
  display: grid;
  align-content: center;
  padding: clamp(1.5rem, 5vw, 3.5rem);
}
.auth__boite { width: 100%; max-width: 400px; margin-inline: auto; }
.auth__retour {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 2rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--texte-muted);
}
.auth__retour:hover { color: var(--texte); }
.auth h1 { font-size: clamp(1.6rem, 4vw, 2.1rem); margin-bottom: 0.6rem; }
.auth__intro { color: var(--texte-soft); margin-bottom: 1.75rem; }

.onglets-auth {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--ligne);
}
.onglets-auth button {
  padding: 0.7rem 0.5rem;
  background: none;
  border: 0;
  border-bottom: 3px solid transparent;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--texte-muted);
  cursor: pointer;
}
.onglets-auth button.is-actif { color: var(--texte); border-bottom-color: var(--or); }


/* ============================================================================
   FORMULAIRES
   ========================================================================== */
.champ { display: grid; gap: 0.4rem; margin-bottom: 1rem; }
.champ label {
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--texte-soft);
}
.champ input,
.champ select,
.champ textarea {
  width: 100%;
  padding: 0.68rem 0.8rem;
  background: var(--surface);
  border: 1px solid var(--ligne-forte);
  border-radius: var(--radius);
  transition: border-color 160ms var(--ease), box-shadow 160ms var(--ease);
}
.champ input:focus,
.champ select:focus,
.champ textarea:focus {
  outline: none;
  border-color: var(--noir);
  box-shadow: 0 0 0 3px rgba(255, 210, 0, 0.35);
}
.champ input[aria-invalid="true"] { border-color: var(--ko); }
.champ__aide { font-size: 0.78rem; color: var(--texte-muted); }
.champ__erreur { font-size: 0.8rem; font-weight: 600; color: var(--ko); }

.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }


/* ============================================================================
   BOUTONS
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.7rem 1.25rem;
  border: 1.5px solid transparent;
  border-radius: var(--radius);
  font-size: 0.84rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 160ms var(--ease), border-color 160ms var(--ease),
              color 160ms var(--ease), transform 160ms var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; }
.btn--plein { width: 100%; }

/* AUCUNE BORDURE NE CHANGE AU SURVOL : le retour visuel passe par l'aplat.
   Les boutons pleins portent une bordure transparente, qui garde la taille de
   la boîte sans jamais se voir.

   Or plein : texte NOIR obligatoire, du blanc tomberait à 1,4:1. */
.btn--or    { background: var(--or); border-color: transparent; color: #232121; }
.btn--or:hover:not([disabled]) { background: var(--or-deep); }
.btn--noir  { background: var(--noir); border-color: transparent; color: #FFFFFF; }
.btn--noir:hover:not([disabled]) { background: var(--noir-soft); }
.btn--trait { background: transparent; border-color: var(--ligne-forte); color: var(--texte); }
.btn--trait:hover:not([disabled]) { background: var(--surface-2); }
.btn--petit { padding: 0.4rem 0.75rem; font-size: 0.74rem; }
.btn--danger { background: transparent; border-color: var(--ko); color: var(--ko); }
.btn--danger:hover:not([disabled]) { background: var(--ko-fond); }


/* ============================================================================
   MESSAGES
   ========================================================================== */
.message {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.8rem 1rem;
  margin-bottom: 1rem;
  border-radius: var(--radius);
  font-size: 0.88rem;
  font-weight: 600;
}
.message svg { margin-top: 2px; }
.message--ok { background: var(--ok-fond); border: 1px solid var(--ok); color: var(--ok); }
.message--ko { background: var(--ko-fond); border: 1px solid var(--ko); color: var(--ko); }
.message--info { background: var(--surface-2); border: 1px solid var(--ligne-forte); color: var(--texte-soft); }


/* ============================================================================
   CADRE DE L'APPLICATION (barre latérale + contenu)
   ========================================================================== */
.app { display: grid; grid-template-columns: 250px 1fr; min-height: 100dvh; }

.rail {
  display: flex;
  flex-direction: column;
  background: var(--noir-deep);
  color: #C9C4C0;
  padding: 1.25rem 1rem;
  gap: 1.5rem;
}
.rail__marque { display: flex; align-items: center; gap: 0.65rem; }
.rail__marque img { width: 34px; }
.rail__marque span {
  font-size: 0.86rem;
  font-weight: 800;
  font-stretch: 84%;
  line-height: 1;
  text-transform: uppercase;
  color: #FFFFFF;
}
.rail__nav { display: grid; gap: 0.15rem; }
.rail__lien {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.6rem 0.7rem;
  border-radius: var(--radius);
  font-size: 0.86rem;
  font-weight: 600;
  cursor: pointer;
  border: 0;
  background: none;
  color: inherit;
  text-align: left;
  width: 100%;
  transition: background-color 160ms var(--ease), color 160ms var(--ease);
}
.rail__lien:hover { background: rgba(255, 255, 255, 0.07); color: #FFFFFF; }
.rail__lien.is-actif { background: var(--or); color: #232121; font-weight: 800; }
.rail__bas { margin-top: auto; display: grid; gap: 0.5rem; }
.rail__qui { font-size: 0.76rem; color: #8F8985; overflow-wrap: anywhere; }
.rail__role {
  display: inline-block;
  padding: 0.1rem 0.45rem;
  border: 1px solid var(--or);
  border-radius: var(--radius);
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--or);
}

.vue { padding: clamp(1.25rem, 3vw, 2.25rem); }
.vue__tete {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}
.vue__tete h1 { font-size: clamp(1.4rem, 3vw, 1.9rem); }
.vue__tete p { margin: 0.35rem 0 0; color: var(--texte-soft); font-size: 0.9rem; }


/* ============================================================================
   CARTES, GRILLES ET TABLEAUX
   ========================================================================== */
.carte {
  background: var(--surface);
  border: 1px solid var(--ligne);
  border-radius: var(--radius);
  padding: clamp(1rem, 2.5vw, 1.5rem);
}
.carte--or { border-top: 4px solid var(--or); }
.carte__titre { font-size: 1rem; margin-bottom: 0.75rem; }

.grille { display: grid; gap: 1rem; }
.grille--2 { grid-template-columns: repeat(2, 1fr); }
.grille--3 { grid-template-columns: repeat(3, 1fr); }
.grille--4 { grid-template-columns: repeat(4, 1fr); }

.stat { background: var(--surface); border: 1px solid var(--ligne); border-radius: var(--radius); padding: 1.1rem 1.25rem; }
.stat__valeur { font-size: 1.9rem; font-weight: 900; font-stretch: 84%; line-height: 1; font-variant-numeric: tabular-nums; }
.stat__libelle { margin: 0.35rem 0 0; font-size: 0.8rem; color: var(--texte-muted); }

.tableau-cadre { overflow-x: auto; background: var(--surface); border: 1px solid var(--ligne); border-radius: var(--radius); }
table.tableau { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
table.tableau th {
  text-align: left;
  padding: 0.75rem 0.9rem;
  background: var(--surface-2);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--texte-soft);
  white-space: nowrap;
}
table.tableau td { padding: 0.7rem 0.9rem; border-top: 1px solid var(--ligne); vertical-align: middle; }
table.tableau tr:hover td { background: #FAF9F8; }
.num { font-variant-numeric: tabular-nums; }

.pastille {
  display: inline-block;
  padding: 0.12rem 0.5rem;
  border-radius: var(--radius);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.pastille--ok  { background: var(--ok-fond); color: var(--ok); }
.pastille--ko  { background: var(--ko-fond); color: var(--ko); }
.pastille--att { background: #FFF6D6; color: var(--or-texte); }
.pastille--neutre { background: var(--surface-2); color: var(--texte-soft); }

.vide {
  padding: 2.5rem 1.5rem;
  text-align: center;
  color: var(--texte-muted);
  background: var(--surface);
  border: 1px dashed var(--ligne-forte);
  border-radius: var(--radius);
}
.vide h3 { font-size: 1rem; margin-bottom: 0.5rem; color: var(--texte); }


/* ============================================================================
   PARCOURS EN ÉTAPES (billetterie)
   ========================================================================== */
.etapes { display: flex; gap: 0; margin-bottom: 1.75rem; flex-wrap: wrap; }
.etape {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.55rem 1rem 0.55rem 0.75rem;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--texte-muted);
  border-bottom: 3px solid var(--ligne);
  flex: 1 1 auto;
}
.etape__num {
  display: grid;
  place-items: center;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--surface-2);
  font-size: 0.72rem;
  font-weight: 800;
  flex: none;
}
.etape.is-actif { color: var(--texte); border-bottom-color: var(--or); }
.etape.is-actif .etape__num { background: var(--or); color: #232121; }
.etape.is-faite { color: var(--ok); border-bottom-color: var(--ok); }
.etape.is-faite .etape__num { background: var(--ok); color: #FFFFFF; }


/* ============================================================================
   BILLET ET QR CODE
   ========================================================================== */
.billet {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.25rem;
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--ligne);
  border-left: 5px solid var(--or);
  border-radius: var(--radius);
  padding: 1.1rem 1.25rem;
  margin-bottom: 0.75rem;
}
.billet__qr {
  width: 132px; height: 132px;
  display: grid; place-items: center;
  background: #FFFFFF;
  border: 1px solid var(--ligne);
  border-radius: var(--radius);
  padding: 6px;
}
.billet__qr svg { width: 100%; height: 100%; }
.billet__code {
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.06em;
}
.billet__ligne { font-size: 0.86rem; color: var(--texte-soft); }
.billet--utilise { border-left-color: var(--ligne-forte); opacity: 0.65; }

/* Panier */
.ligne-tarif {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 1rem;
  align-items: center;
  padding: 0.85rem 0;
  border-top: 1px solid var(--ligne);
}
.ligne-tarif:first-child { border-top: 0; }
.ligne-tarif__prix { font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.compteur { display: flex; align-items: center; gap: 0.4rem; }
.compteur button {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  background: var(--surface);
  border: 1px solid var(--ligne-forte);
  border-radius: var(--radius);
  font-weight: 800;
  cursor: pointer;
}
.compteur button:hover { background: var(--surface-2); }
.compteur output { min-width: 26px; text-align: center; font-weight: 800; font-variant-numeric: tabular-nums; }

.total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 2px solid var(--noir);
  font-size: 1.15rem;
  font-weight: 800;
}
.total span:last-child { font-variant-numeric: tabular-nums; }

/* ============================================================================
   ACHAT D'UNE PLACE
   Trois blocs, dans l'ordre des trois gestes : quel match, où, combien.
   ========================================================================== */
/* Le plan a besoin de place : c'est lui qu'on regarde. Les deux colonnes qui
   l'encadrent sont volontairement étroites. */
.achat {
  display: grid;
  grid-template-columns: 230px minmax(420px, 1fr) 270px;
  gap: 1rem;
  align-items: start;
}

/* --- 1. Le match --- */
.match-choix-liste { display: grid; gap: 0.4rem; max-height: 460px; overflow-y: auto; }
.match-choix {
  display: grid;
  gap: 0.15rem;
  padding: 0.65rem 0.8rem;
  background: var(--surface);
  border: 1.5px solid var(--ligne);
  border-radius: var(--radius);
  text-align: left;
  cursor: pointer;
  transition: background-color 160ms var(--ease);
}
.match-choix:hover { background: var(--surface-2); }
.match-choix.est-choisi { background: var(--noir); border-color: var(--noir); color: #FFFFFF; }
.match-choix__jour {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--texte-muted);
}
.match-choix.est-choisi .match-choix__jour { color: var(--or); }
.match-choix__adv { font-weight: 800; font-size: 0.95rem; }
.match-choix__h { font-size: 0.78rem; color: var(--texte-muted); }
.match-choix.est-choisi .match-choix__h { color: #B8B2AD; }

/* --- 2. Le plan du stade ---
   Le VRAI plan du club en fond, et les gradins par-dessus en boutons posés en
   pourcentage : le supporter reconnaît le stade qu'il connaît, et le repérage
   reste juste à toutes les tailles d'écran. */
.plan__image { position: relative; line-height: 0; }
.plan__image img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius);
}

.plan__zone {
  position: absolute;
  display: grid;
  place-items: center;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 4px;
  background: transparent;
  cursor: pointer;
  transition: background-color 180ms var(--ease), box-shadow 180ms var(--ease);
}

/* CODE COULEUR : quatre paliers, du moins cher au plus cher. Un voile
   translucide, pas un aplat : le dessin du gradin doit rester lisible en
   dessous. Sept teintes distinctes casseraient la charte noir et or sans rien
   apprendre de plus ; une rampe dit le prix d'un coup d'oeil. */
.plan__zone--p1 { background: rgba(220, 215, 209, 0.82); }
.plan__zone--p2 { background: rgba(150, 142, 134, 0.82); }
.plan__zone--p3 { background: rgba(60, 56, 54, 0.86); }
.plan__zone--p4 { background: rgba(255, 210, 0, 0.88); }

.plan__etiq {
  display: grid;
  gap: 1px;
  text-align: center;
  line-height: 1.15;
  pointer-events: none;
  padding: 0.15rem 0.3rem;
}
.plan__etiq b { font-size: clamp(0.72rem, 1.5vw, 0.95rem); font-weight: 800; }
.plan__etiq span { font-size: clamp(0.6rem, 1.2vw, 0.76rem); font-weight: 700; opacity: 0.85; }
.plan__zone--p1 .plan__etiq, .plan__zone--p2 .plan__etiq, .plan__zone--p4 .plan__etiq { color: #232121; }
.plan__zone--p3 .plan__etiq { color: #FFFFFF; }

/* Le Virage Nord est une bande haute et étroite : le texte s'y met debout. */
.plan__zone--vertical .plan__etiq { writing-mode: vertical-rl; transform: rotate(180deg); }

.plan__zone:hover:not(:disabled) { box-shadow: inset 0 0 0 3px rgba(35, 33, 33, 0.55); }
.plan__zone.est-choisie { box-shadow: inset 0 0 0 4px #232121, 0 0 0 3px rgba(255, 210, 0, 0.6); }
.plan__zone--p3.est-choisie { box-shadow: inset 0 0 0 4px var(--or), 0 0 0 3px rgba(255, 210, 0, 0.5); }
.plan__zone:focus-visible { outline: 3px solid var(--or); outline-offset: 2px; }

/* Bloc dont le tarif n'est pas publié : grisé, non cliquable. */
.plan__zone.est-fermee { background: rgba(240, 238, 235, 0.86); cursor: not-allowed; }
.plan__zone.est-fermee .plan__etiq { color: var(--texte-muted); }

.plan__compte {
  position: absolute;
  top: -9px; right: -9px;
  display: grid;
  place-items: center;
  min-width: 24px; height: 24px;
  padding: 0 5px;
  border-radius: 99px;
  background: #232121;
  color: var(--or);
  font-size: 0.74rem;
  font-weight: 800;
  line-height: 1;
  pointer-events: none;
}

/* Parcage visiteurs : signalé, jamais cliquable. */
.plan__inactif {
  position: absolute;
  display: grid;
  place-items: center;
  padding: 0.2rem;
  border: 2px dashed rgba(35, 33, 33, 0.35);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.7);
  font-size: clamp(0.56rem, 1.1vw, 0.72rem);
  font-weight: 700;
  text-align: center;
  line-height: 1.15;
  color: var(--texte-muted);
  pointer-events: none;
}

.plan__legende {
  display: grid;
  gap: 0.35rem;
  margin-top: 1rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--ligne);
  font-size: 0.82rem;
}
.plan__legende li { display: flex; align-items: center; gap: 0.5rem; }
.plan__legende b { margin-left: auto; font-variant-numeric: tabular-nums; }
.plan__puce {
  width: 14px; height: 14px;
  flex: none;
  border-radius: 3px;
  border: 1px solid rgba(0, 0, 0, 0.12);
}
.plan__puce--p1 { background: #DCD7D1; }
.plan__puce--p2 { background: #A9A29B; }
.plan__puce--p3 { background: #55504D; }
.plan__puce--p4 { background: var(--or); }

/* --- Choix du produit : abonnement ou place à l'unité --- */
.produits { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin-bottom: 1.25rem; }
.produit {
  display: grid;
  gap: 0.2rem;
  padding: 0.9rem 1.1rem;
  background: var(--surface);
  border: 1.5px solid var(--ligne);
  border-radius: var(--radius);
  text-align: left;
  cursor: pointer;
  transition: background-color 160ms var(--ease);
}
.produit:hover { background: var(--surface-2); }
.produit.est-choisi { background: var(--noir); border-color: var(--noir); color: #FFFFFF; }
.produit__nom { font-weight: 800; font-size: 1rem; }
.produit__quoi { font-size: 0.82rem; color: var(--texte-muted); }
.produit.est-choisi .produit__quoi { color: var(--or); }

.abo-liste { display: grid; gap: 0.3rem; margin-top: 0.85rem; font-size: 0.85rem; }
.abo-liste li { display: flex; gap: 0.6rem; padding-block: 0.25rem; border-top: 1px solid var(--ligne); }
.abo-liste span { font-variant-numeric: tabular-nums; color: var(--texte-muted); min-width: 78px; }

@media (max-width: 620px) { .produits { grid-template-columns: 1fr; } }

/* --- 3. Le panier --- */
.zone-choisie {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.7rem 0.85rem;
  margin-bottom: 0.85rem;
  background: var(--surface);
  border-radius: var(--radius);
  font-size: 0.9rem;
}
.zone-choisie .ligne-tarif__prix { margin-left: auto; }

.compteur--gros { justify-content: center; gap: 0.85rem; }
.compteur--gros button { width: 42px; height: 42px; font-size: 1.2rem; }
.compteur--gros output { min-width: 40px; font-size: 1.3rem; }

.recap { display: grid; gap: 0.35rem; margin-top: 0.75rem; font-size: 0.84rem; }
.recap li { display: flex; align-items: center; gap: 0.5rem; }
.recap b { margin-left: auto; font-variant-numeric: tabular-nums; }

@media (max-width: 1180px) {
  .achat { grid-template-columns: 1fr 1fr; }
  .achat__plan { grid-column: 1 / -1; order: 3; }
  .achat__panier { order: 2; }
}
@media (max-width: 760px) {
  .achat { grid-template-columns: 1fr; }
  .achat__plan, .achat__panier { grid-column: auto; order: 0; }
  .match-choix-liste { max-height: 260px; }
}

/* Moyens de paiement */
.moyens { display: grid; gap: 0.6rem; margin-bottom: 1.25rem; }
.moyen {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.8rem 1rem;
  background: var(--surface);
  border: 1.5px solid var(--ligne);
  border-radius: var(--radius);
  cursor: pointer;
}
.moyen:hover { background: var(--surface-2); }
.moyen.is-choisi { border-color: var(--noir); box-shadow: 0 0 0 3px rgba(255, 210, 0, 0.3); }
.moyen input { accent-color: var(--noir); }
.moyen img { height: 22px; width: auto; }
.moyen__nom { font-weight: 700; font-size: 0.9rem; }


/* ============================================================================
   MODALE
   ========================================================================== */
.modale {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 1rem;
  background: rgba(20, 19, 19, 0.6);
}
.modale[hidden] { display: none; }
.modale__boite {
  width: min(560px, 100%);
  max-height: 88dvh;
  overflow-y: auto;
  background: var(--surface);
  border-radius: var(--radius);
  border-top: 4px solid var(--or);
  padding: clamp(1.25rem, 3vw, 1.85rem);
}
.modale__tete { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; }
.modale__fermer {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  background: none; border: 1px solid var(--ligne-forte);
  border-radius: var(--radius); cursor: pointer;
}
.modale__actions { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-top: 1.25rem; }


/* ============================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 900px) {
  .auth { grid-template-columns: 1fr; }
  .auth__visuel { min-height: 180px; padding: 1.5rem; }
  .auth__visuel img { width: 90px; }
  .auth__mot { display: none; }

  .app { grid-template-columns: 1fr; }
  .rail { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 0.75rem; padding: 0.85rem 1rem; }
  .rail__nav { display: flex; flex-wrap: wrap; gap: 0.3rem; order: 3; width: 100%; }
  .rail__lien { width: auto; padding: 0.45rem 0.7rem; font-size: 0.8rem; }
  .rail__bas { margin-top: 0; margin-left: auto; }
  .rail__qui { display: none; }

  .grille--3, .grille--4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 620px) {
  .grille--2, .grille--3, .grille--4 { grid-template-columns: 1fr; }
  .duo { grid-template-columns: 1fr; }
  .billet { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .etapes { gap: 0.25rem; }
  .etape { flex: 1 1 45%; padding-inline: 0.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

@media print {
  .rail, .demo-bandeau, .btn, .etapes, .modale { display: none !important; }
  body { background: #fff; }
  .billet { break-inside: avoid; border: 1px solid #000; }
}