:root {
  --vert: #1f7a3d;
  --vert-fonce: #145229;
  --jaune: #f5c400;
  --rouge: #d0202c;
  --gris-fond: #f4f6f5;
  --gris-bordure: #dfe3e1;
  --texte: #1f2d24;
  --blanc: #ffffff;
  /* Empêche les navigateurs mobiles (Chrome/Safari en mode sombre système)
     d'appliquer leurs propres couleurs par défaut aux champs de formulaire
     (fond et texte forcés en sombre, rendant les champs invisibles sur un
     fond blanc). On impose le mode clair pour tous les contrôles de saisie. */
  color-scheme: light;
}

* { box-sizing: border-box; }

html { color-scheme: light; }

/* Empêche le zoom disgracieux au tap sur les liens/boutons sur mobile,
   et évite le rebond de défilement bleuté iOS. */
html, body { overscroll-behavior-y: contain; -webkit-tap-highlight-color: transparent; }

body {
  margin: 0;
  font-family: 'Segoe UI', Arial, sans-serif;
  background: var(--gris-fond);
  color: var(--texte);
  /* Respecte les zones sûres (encoche/barre d'accueil) sur iPhone/Android
     en mode "standalone" (application installée), pour une structure
     stable identique aux autres applis natives. */
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
  padding-bottom: env(safe-area-inset-bottom);
  min-height: 100vh;
  min-height: 100dvh;
}

/* Page d'accueil (index.html, y compris le formulaire de connexion qui s'y
   ouvre en pop-up) : la photo de la tribune du stade sert de fond de page.
   Sur ordinateur/tablette (≥760px), le téléphone simulé (.telephone-cadre)
   "flotte" visuellement au-dessus de cette photo ; sur mobile, l'écran
   d'accueil occupe tout l'espace et ce fond n'est de toute façon pas visible
   (comportement inchangé). Le voile vert semi-transparent garde une bonne
   lisibilité et les couleurs de la charte autour du téléphone flottant.
   `background-attachment: fixed` est sans risque ici : c'est le body qui
   défile (pas un conteneur interne), donc aucun souci connu de défilement
   saccadé sur iOS. */
body.fond-accueil-stade {
  background:
    linear-gradient(160deg, rgba(11,43,21,0.82) 0%, rgba(13,71,33,0.72) 55%, rgba(9,36,17,0.85) 100%),
    url('/assets/tribune-diass-fond.jpg') center/cover no-repeat fixed;
}

/* Empile les tailles de police à 16px minimum sur les champs pour éviter
   qu'iOS Safari ne zoome automatiquement l'écran à la mise au point. */
@media (max-width: 480px) {
  input, select, textarea { font-size: 16px; }
}

/* Filet de sécurité global : tout champ de saisie, où qu'il soit dans la
   page (formulaires .champ, popups de connexion, modales...), reçoit
   explicitement un fond blanc et un texte sombre, quel que soit le thème
   système du téléphone/navigateur de l'utilisateur. */
input, select, textarea {
  background-color: var(--blanc);
  color: var(--texte);
  color-scheme: light;
  font-family: inherit;
}
input::placeholder, textarea::placeholder {
  color: #8a948e;
  opacity: 1;
}

.topbar {
  background: linear-gradient(90deg, var(--vert-fonce), var(--vert));
  color: var(--blanc);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 20px;
  /* En mode application installée (standalone), la barre remonte sous
     l'encoche/l'horloge système au lieu d'être masquée derrière. */
  padding-top: calc(10px + env(safe-area-inset-top));
  border-bottom: 4px solid var(--jaune);
}
.topbar img.logo { height: 42px; }
.topbar .titre { font-weight: 700; font-size: 1.1rem; }
.topbar .sous-titre { font-size: 0.75rem; opacity: 0.85; }
.topbar .spacer { flex: 1; }
.topbar .user-badge {
  background: rgba(255,255,255,0.15);
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 0.85rem;
}
.topbar button.logout {
  background: var(--rouge);
  color: white;
  border: none;
  padding: 6px 14px;
  border-radius: 20px;
  cursor: pointer;
  font-size: 0.85rem;
}
.bouton-retour-topbar {
  background: rgba(255,255,255,0.14);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.35);
  padding: 6px 14px;
  border-radius: 20px;
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 600;
  white-space: nowrap;
}
.bouton-retour-topbar:hover { background: rgba(255,255,255,0.26); }

.layout { display: flex; min-height: calc(100vh - 66px); }

.sidebar {
  width: 240px;
  background: var(--blanc);
  border-right: 1px solid var(--gris-bordure);
  padding: 14px 0;
}
.sidebar a {
  display: block;
  padding: 10px 20px;
  color: var(--texte);
  text-decoration: none;
  font-size: 0.92rem;
  border-left: 3px solid transparent;
}
.sidebar a:hover { background: #f0f4f1; }
.sidebar a.actif {
  border-left-color: var(--vert);
  background: #eaf5ee;
  font-weight: 600;
  color: var(--vert-fonce);
}

.contenu { flex: 1; padding: 22px; max-width: 1300px; }

h1.page-titre {
  font-size: 1.4rem;
  color: var(--vert-fonce);
  border-bottom: 3px solid var(--jaune);
  padding-bottom: 8px;
  margin-top: 0;
}

.cartes-kpi { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.carte-kpi {
  background: var(--blanc);
  border-radius: 10px;
  padding: 16px 20px;
  min-width: 190px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
  border-top: 4px solid var(--vert);
}
.carte-kpi.jaune { border-top-color: var(--jaune); }
.carte-kpi.rouge { border-top-color: var(--rouge); }
.carte-kpi .valeur { font-size: 1.6rem; font-weight: 700; color: var(--vert-fonce); }
.carte-kpi .label { font-size: 0.8rem; color: #647065; margin-top: 4px; }

/* Page Panier (achat de ticket public) : compte à gauche, panier à droite
   sur écran large ; empilé (compte d'abord, puis panier) sur mobile, où deux
   colonnes côte à côte seraient trop étroites pour rester lisibles. */
.grille-panier {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  align-items: start;
}
@media (max-width: 760px) {
  .grille-panier { grid-template-columns: 1fr; }
}

.panneau {
  background: var(--blanc);
  border-radius: 10px;
  padding: 18px 20px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
  margin-bottom: 20px;
  overflow: hidden;
}
/* Bandeau jaune compact en en-tête de chaque panneau/formulaire de saisie,
   pour une structure homogène et bien identifiable sur toute l'application.
   (Les marges négatives ne "mangent" que le padding du panneau qui a un h2 ;
   les panneaux sans h2 gardent leur padding normal.) */
.panneau h2 {
  margin: -18px -20px 14px;
  padding: 11px 20px;
  font-size: 0.98rem;
  font-weight: 700;
  color: #3a2e00;
  background: linear-gradient(90deg, var(--jaune), #ffdd4d);
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  overflow-x: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.panneau h2::-webkit-scrollbar { display: none; }

/* Sections de Configuration en accordéon : entête cliquable, contenu masqué
   par défaut et affiché uniquement au clic sur la section. */
.panneau.accordeon h2 {
  cursor: pointer;
  user-select: none;
}
.panneau.accordeon h2 .chevron {
  margin-left: auto;
  flex: 0 0 auto;
  font-size: 0.85em;
  transition: transform 0.18s ease;
}
.panneau.accordeon.ouvert h2 .chevron { transform: rotate(180deg); }
.panneau.accordeon .accordeon-corps {
  display: none;
  padding-top: 2px;
}
.panneau.accordeon.ouvert .accordeon-corps { display: block; }
.panneau.accordeon:not(.ouvert) { padding-bottom: 0; margin-bottom: 10px; }

.grille-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin-bottom: 12px; }
.champ label { display: block; font-size: 0.76rem; color: #556; margin-bottom: 3px; }
.champ input, .champ select, .champ textarea {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--gris-bordure);
  border-radius: 7px;
  font-size: 0.88rem;
}

/* Titre "Acheter mon ticket — Équipe A vs Équipe B" tenu sur une seule ligne,
   avec réduction automatique de la taille si les noms d'équipes sont longs. */
.entete-match-titre {
  font-size: clamp(0.78rem, 3.6vw, 1rem);
}
.entete-match-titre .vs { opacity: 0.75; font-weight: 500; margin: 0 3px; }

/* ---------- Formulaire de création de compte (page dédiée + modales) :
   version compacte pensée pour tenir sur un écran de téléphone sans défiler ---------- */
.formulaire-compte .champ { margin-bottom: 8px; }
.formulaire-compte .champ label { font-size: 0.72rem; margin-bottom: 3px; }
.formulaire-compte .champ input {
  padding: 8px 11px;
  font-size: 0.85rem;
  border-radius: 7px;
}
.formulaire-compte .ligne-photo {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.formulaire-compte .photo-cercle {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #f4f7f5;
  border: 2px dashed #b9c4bd;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex: 0 0 auto;
  cursor: pointer;
}
.formulaire-compte .photo-cercle img { width: 100%; height: 100%; object-fit: cover; display: none; }
.formulaire-compte .photo-cercle svg { width: 22px; height: 22px; }
.formulaire-compte .bouton { padding: 7px 12px; font-size: 0.76rem; }

button.bouton {
  background: var(--vert);
  color: white;
  border: none;
  padding: 9px 18px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.88rem;
  font-weight: 600;
}
button.bouton:hover { background: var(--vert-fonce); }
button.bouton.secondaire { background: var(--jaune); color: #3a2e00; }
button.bouton.danger { background: var(--rouge); }
button.bouton.petit { padding: 5px 10px; font-size: 0.78rem; }

table.tableau { width: 100%; border-collapse: collapse; font-size: 0.87rem; }
table.tableau th, table.tableau td {
  text-align: left;
  padding: 8px 10px;
  border-bottom: 1px solid var(--gris-bordure);
}
table.tableau th { color: #52685a; text-transform: uppercase; font-size: 0.72rem; }

.badge-statut {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 0.72rem;
  font-weight: 600;
}
.badge-statut.ok { background: #e1f4e7; color: var(--vert-fonce); }
.badge-statut.attente { background: #fff4d6; color: #7a5b00; }
.badge-statut.refus { background: #fce1e3; color: var(--rouge); }

/* ---------- Responsive mobile (guichets / entrées utilisés sur smartphone) ---------- */
@media (max-width: 820px) {
  .layout { flex-direction: column; }
  .sidebar {
    width: 100%;
    display: flex;
    overflow-x: auto;
    padding: 6px 4px;
    border-right: none;
    border-bottom: 1px solid var(--gris-bordure);
  }
  .sidebar a {
    white-space: nowrap;
    padding: 8px 12px;
    border-left: none;
    border-bottom: 3px solid transparent;
  }
  .sidebar a.actif { border-left-color: transparent; border-bottom-color: var(--vert); }
  .contenu { padding: 14px; }
  .cartes-kpi { gap: 10px; }
  .carte-kpi { min-width: 140px; padding: 12px 14px; }
  .grille-form { grid-template-columns: 1fr; }
  table.tableau { font-size: 0.8rem; }
  .topbar { padding: 8px 12px; }
  .topbar .sous-titre { display: none; }
}

/* ---------- Reçu imprimable ---------- */
.recu {
  background: var(--blanc);
  border: 1px dashed var(--vert);
  border-radius: 10px;
  padding: 18px;
  max-width: 320px;
  text-align: center;
  margin-top: 12px;
}
.recu img.logo-recu { height: 44px; margin-bottom: 6px; }
.recu .qr-recu { margin: 10px auto; }
.recu .montant-recu { font-size: 1.3rem; font-weight: 700; color: var(--vert-fonce); }
@media print {
  body * { visibility: hidden; }
  .recu, .recu * { visibility: visible; }
  .recu { position: absolute; top: 0; left: 0; margin: 0; border: none; }
}

/* ---------- Documents imprimables (contrat, facture) ---------- */
.document-imprimable {
  background: var(--blanc);
  border: 1px solid var(--gris-bordure);
  border-radius: 10px;
  padding: 28px 32px;
  max-width: 800px;
  margin: 14px auto 0;
  font-size: 0.9rem;
  line-height: 1.55;
  color: #22301f;
}
.document-imprimable .doc-entete { display: flex; align-items: center; gap: 12px; border-bottom: 2px solid var(--vert); padding-bottom: 12px; margin-bottom: 14px; }
.document-imprimable .doc-entete img { height: 46px; }
.document-imprimable .doc-entete .doc-titre { font-size: 1.15rem; font-weight: 700; color: var(--vert-fonce); }
.document-imprimable h3 { color: var(--vert-fonce); font-size: 0.98rem; margin: 18px 0 6px; border-bottom: 1px solid var(--gris-bordure); padding-bottom: 4px; }
.document-imprimable table { width: 100%; border-collapse: collapse; margin: 8px 0; font-size: 0.88rem; }
.document-imprimable table td, .document-imprimable table th { border: 1px solid #ddd; padding: 6px 9px; text-align: left; }
.document-imprimable .doc-total-ligne { display: flex; justify-content: space-between; padding: 4px 0; }
.document-imprimable .doc-total-ligne.total { font-weight: 700; color: var(--vert-fonce); font-size: 1.02rem; border-top: 1px solid var(--gris-bordure); margin-top: 4px; padding-top: 8px; }
.document-imprimable .signature-bloc { display: flex; justify-content: space-between; margin-top: 46px; gap: 20px; }
.document-imprimable .signature-bloc > div { flex: 1; text-align: center; font-size: 0.85rem; }
.document-imprimable .signature-bloc .ligne-signature { margin-top: 46px; border-top: 1px solid #444; padding-top: 4px; }
.document-imprimable .clauses { font-size: 0.85rem; color: #3a4a40; }
.document-imprimable .clauses li { margin-bottom: 6px; }
@media print {
  .document-imprimable, .document-imprimable * { visibility: visible; }
  .document-imprimable { position: absolute; top: 0; left: 0; margin: 0; border: none; max-width: 100%; }
}

@media print {
  body * { visibility: hidden; }
  .badge-abonne, .badge-abonne * { visibility: visible; }
  .badge-abonne { position: absolute; top: 0; left: 0; margin: 0; }
}

.login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--vert-fonce), var(--vert));
}
.login-carte {
  background: var(--blanc);
  padding: 34px 36px;
  border-radius: 14px;
  width: 340px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
  border-top: 6px solid var(--jaune);
  text-align: center;
}
.login-carte img { height: 70px; margin-bottom: 10px; }
.login-carte h1 { font-size: 1.1rem; color: var(--vert-fonce); margin: 4px 0 20px; }
.login-carte input {
  width: 100%;
  padding: 10px 12px;
  margin-bottom: 12px;
  border: 1px solid var(--gris-bordure);
  border-radius: 6px;
}
.login-carte button { width: 100%; padding: 10px; }
.erreur { color: var(--rouge); font-size: 0.82rem; margin-top: 8px; }

/* ---------- Popups / Modales (formulaires) ---------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(20, 30, 25, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 1000;
  opacity: 0;
  animation: modal-fondu 0.15s ease-out forwards;
}
@keyframes modal-fondu { from { opacity: 0; } to { opacity: 1; } }

.modal {
  background: var(--blanc);
  border-radius: 14px;
  width: 100%;
  max-width: 560px;
  max-height: 88vh;
  overflow-y: auto;
  overflow-x: hidden;
  box-shadow: 0 20px 50px rgba(0,0,0,0.3);
  transform: translateY(10px);
  animation: modal-montee 0.18s ease-out forwards;
}
@keyframes modal-montee { from { transform: translateY(14px); opacity: 0.6; } to { transform: translateY(0); opacity: 1; } }

.modal-entete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 13px 22px;
  background: linear-gradient(90deg, var(--jaune), #ffdd4d);
  border-radius: 14px 14px 0 0;
}
.modal-entete h2 {
  margin: 0;
  font-size: 1.02rem;
  font-weight: 700;
  color: #3a2e00;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.modal-fermer {
  background: none;
  border: none;
  font-size: 1.3rem;
  line-height: 1;
  color: #3a2e00;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  flex: 0 0 auto;
}
.modal-fermer:hover { background: rgba(0,0,0,0.08); color: #1f1800; }

.modal-corps { padding: 20px 22px; }
.modal-pied {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 22px;
  border-top: 1px solid var(--gris-bordure);
  background: var(--gris-fond);
  border-radius: 0 0 14px 14px;
}

.bouton-ouvrir-modal {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 14px;
}

@media (max-width: 600px) {
  .modal { max-width: 100%; max-height: 92vh; }
  .modal-entete, .modal-corps, .modal-pied { padding-left: 16px; padding-right: 16px; }
}
.modal-compact { max-width: 300px; }
.modal-compact .modal-entete { padding: 11px 18px; }
.modal-compact .modal-entete h2 { font-size: 0.9rem; }
.modal-compact .modal-corps { padding: 14px 18px; }
.modal-compact .modal-pied { padding: 12px 18px; }

/* ---------- Écran d'accueil (style appli mobile) ---------- */
.ecran-accueil {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px 18px;
  background:
    radial-gradient(circle at 25% 15%, rgba(245,196,0,0.18), transparent 45%),
    radial-gradient(circle at 80% 85%, rgba(255,255,255,0.08), transparent 40%),
    linear-gradient(160deg, var(--vert-fonce) 0%, var(--vert) 55%, #0d3a1c 100%);
  position: relative;
  overflow: hidden;
}
.ecran-accueil::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.05) 1.5px, transparent 1.5px);
  background-size: 26px 26px;
  opacity: 0.5;
  pointer-events: none;
}
.carte-accueil {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 380px;
  text-align: center;
  color: #fff;
  padding: 10px 6px 14px;
}
/* Variante utilisée uniquement sur la page d'accueil (index.html) : la carte
   remplit toute la hauteur de l'écran du téléphone, ce qui permet d'ancrer
   les sponsors + le copyright tout en bas (voir margin-top:auto ci-dessous)
   sans changer le comportement (centré verticalement) des autres écrans qui
   partagent la classe .carte-accueil (créer un compte, don...). */
.carte-accueil--pleine-hauteur {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.badge-logo-accueil {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: #fff;
  margin: 14px auto 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 30px rgba(0,0,0,0.35), 0 0 0 6px rgba(255,255,255,0.08);
  overflow: hidden;
  padding: 8px;
  box-sizing: border-box;
}
.badge-logo-accueil img { width: 100%; height: 100%; object-fit: contain; border-radius: 50%; }
.titre-accueil {
  font-size: clamp(1rem, 6.2vw, 1.32rem);
  font-weight: 800;
  letter-spacing: 0.4px;
  margin: 0 0 4px;
  text-transform: uppercase;
  text-shadow: 0 2px 10px rgba(0,0,0,0.25);
  white-space: nowrap;
}
.slogan-accueil {
  font-size: 0.78rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
  margin: 0 0 10px;
}
.pastille-accueil {
  display: inline-block;
  background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.25);
  color: #fff;
  font-size: 0.72rem;
  padding: 5px 16px;
  border-radius: 20px;
  margin-bottom: 16px;
}
.boutons-accueil { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.bouton-accueil {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  padding: 12px 18px;
  border-radius: 30px;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.12s ease, filter 0.12s ease;
}
.bouton-accueil:active { transform: scale(0.98); }
.bouton-accueil.plein { background: #fff; color: var(--vert-fonce); }
.bouton-accueil.plein:hover { filter: brightness(0.96); }
.bouton-accueil.transluscent {
  background: rgba(255,255,255,0.12);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.35);
}
.bouton-accueil.transluscent:hover { background: rgba(255,255,255,0.2); }
.bouton-accueil.accent {
  background: linear-gradient(120deg, var(--jaune), #e0a600);
  color: #3a2e00;
}
.bouton-accueil.accent:hover { filter: brightness(1.05); }
.texte-communaute-accueil {
  margin: 16px 0 10px;
  font-size: 0.76rem;
  color: rgba(255,255,255,0.65);
  font-style: italic;
}
.pied-accueil {
  margin-top: 6px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,0.15);
  font-size: 0.7rem;
  color: rgba(255,255,255,0.55);
}
.pied-accueil img { height: 26px; vertical-align: middle; border-radius: 4px; margin-right: 6px; }

.logos-sponsors-accueil {
  overflow: hidden;
  width: 100%;
  /* Pousse le bandeau sponsors (et le pied de page juste après) tout en bas
     de l'écran du téléphone : le bloc du haut (logo/titre/boutons) reste
     groupé, et sponsors + copyright restent ancrés au bas, quelle que soit
     la hauteur d'écran disponible — structure "app mobile" classique. */
  margin: auto 0 4px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
}
.logos-sponsors-piste {
  display: flex;
  align-items: center;
  gap: 16px;
  width: max-content;
  animation: defilerLogosSponsors 18s linear infinite;
}
.logos-sponsors-accueil:hover .logos-sponsors-piste { animation-play-state: paused; }
@keyframes defilerLogosSponsors {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.logos-sponsors-accueil img {
  height: 34px;
  width: 34px;
  flex: 0 0 auto;
  object-fit: contain;
  background: #fff;
  border-radius: 9px;
  padding: 3px;
  box-shadow: 0 3px 10px rgba(0,0,0,0.25);
}

/* Formulaire de connexion dans la popup d'accueil — empilé verticalement,
   un champ par ligne, avec libellé et icône pour une lecture professionnelle. */
.form-connexion-accueil {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.champ-connexion {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.champ-connexion label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--vert-fonce);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.champ-connexion-saisie {
  position: relative;
  display: flex;
  align-items: center;
}
.champ-connexion-icone {
  position: absolute;
  left: 13px;
  font-size: 1rem;
  opacity: 0.5;
  pointer-events: none;
}
.form-connexion-accueil input {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px 12px 40px;
  margin: 0;
  border: 1.5px solid var(--gris-bordure);
  border-radius: 10px;
  background: var(--gris-fond);
  font-size: 0.92rem;
  transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}
.form-connexion-accueil input:focus {
  outline: none;
  border-color: var(--vert);
  background: var(--blanc);
  box-shadow: 0 0 0 3px rgba(31, 122, 61, 0.14);
}
.modal-compact .form-connexion-accueil input {
  padding: 10px 12px 10px 38px;
  font-size: 0.86rem;
}
.connexion-entete {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
  margin-bottom: 16px;
}
.connexion-entete .connexion-icone {
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  background: var(--gris-fond);
  border: 1.5px solid var(--gris-bordure);
  border-radius: 50%;
  margin-bottom: 4px;
}
.connexion-entete p {
  margin: 0;
  font-size: 0.8rem;
  color: #647065;
}
.liste-comptes-demo {
  font-size: 0.72rem;
  color: #889;
  margin-top: 10px;
  line-height: 1.5;
}

/* ---------- Cadre "téléphone" autour des écrans type appli mobile ----------
   Sur mobile réel, ce cadre est invisible (display:contents) : l'écran
   d'accueil occupe tout l'espace comme avant, avec la vraie barre de statut du
   téléphone (pas de fausse barre superposée). Sur ordinateur / tablette, il
   habille l'écran dans un boîtier de téléphone façon iPhone 17 Pro Max : bezel
   noir, Dynamic Island, et une barre de statut simulée (heure à gauche,
   réseau/Wifi/batterie à droite) injectée par initialiserChromeIphone() dans
   app.js. */
.telephone-cadre { display: contents; }
.telephone-cadre::after { content: none; }
@media (min-width: 760px) {
  .telephone-cadre {
    display: block;
    position: relative;
    width: 390px;
    margin: 4vh auto;
    padding: 14px;
    background: linear-gradient(160deg, #2c2c2c, #0c0c0c);
    border-radius: 54px;
    box-shadow: 0 35px 80px rgba(0,0,0,0.4), 0 0 0 2px rgba(255,255,255,0.06) inset;
    flex-shrink: 0;
  }
  .ecran-accueil {
    min-height: 0;
    height: min(860px, 92vh);
    padding-top: 46px;
    border-radius: 42px;
    /* Le centrage vertical (justify-content:center, hérité de la règle de
       base) casse l'affichage dès que le contenu dépasse la hauteur fixe de
       l'écran simulé : le début du contenu se retrouve poussé au-dessus de
       la zone visible. On repasse donc en alignement "depuis le haut", avec
       un défilement interne de secours seulement si un très petit écran
       (fenêtre navigateur très basse) ne suffit vraiment pas — en usage
       normal, tout le contenu (jusqu'aux sponsors) doit tenir sans défiler. */
    justify-content: flex-start;
    overflow-y: auto;
    overflow-x: hidden;
    /* Défilement interne visible (fin liseré) plutôt qu'invisible : si un
       contenu dépasse exceptionnellement la hauteur du téléphone simulé
       (petit écran, formulaire long...), l'utilisateur voit clairement qu'il
       peut faire défiler, au lieu de croire que le bas est simplement coupé. */
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.35) transparent;
  }
  .ecran-accueil::-webkit-scrollbar { width: 5px; }
  .ecran-accueil::-webkit-scrollbar-track { background: transparent; }
  .ecran-accueil::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.35); border-radius: 3px; }
}

/* Barre de statut simulée (heure + réseau/Wifi/batterie) — visible uniquement
   dans le mockup desktop/tablette ; jamais sur un vrai téléphone, qui affiche
   déjà sa propre barre de statut réelle. */
.iphone-barre-statut { display: none; }
@media (min-width: 760px) {
  .iphone-barre-statut {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: absolute;
    top: 14px;
    left: 14px;
    right: 14px;
    height: 48px;
    padding: 0 30px;
    box-sizing: border-box;
    z-index: 6;
    pointer-events: none;
    color: #fff;
    font-weight: 600;
    font-size: 0.92rem;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 1px 2px rgba(0,0,0,0.25);
  }
  .iphone-barre-statut .iphone-icones { display: flex; align-items: center; gap: 6px; }
  .iphone-barre-statut svg { display: block; color: #fff; }
}

/* Dynamic Island — pilule noire centrée en haut de l'écran, comme sur
   iPhone 15/16/17 Pro Max. Remplace l'ancienne encoche rectangulaire. */
.iphone-dynamic-island { display: none; }
@media (min-width: 760px) {
  .iphone-dynamic-island {
    display: block;
    position: absolute;
    top: 27px;
    left: 50%;
    transform: translateX(-50%);
    width: 126px;
    height: 37px;
    background: #000;
    border-radius: 100px;
    z-index: 7;
    box-shadow: 0 0 0 1px rgba(255,255,255,0.04) inset;
  }
}

/* ---------- Navigation publique (Connecté invité / Dons / Espace Administrateur) ---------- */
.nav-public {
  display: flex;
  gap: 6px;
  font-size: 0.82rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.nav-public a, .nav-public button {
  color: #fff;
  text-decoration: none;
  opacity: 0.9;
  padding: 6px 13px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.3);
  background: rgba(255,255,255,0.08);
  font-size: 0.82rem;
  cursor: pointer;
  white-space: nowrap;
}
.nav-public a:hover, .nav-public button:hover { background: rgba(255,255,255,0.2); opacity: 1; }
.nav-public a.actif { background: rgba(255,255,255,0.28); font-weight: 600; opacity: 1; }

.nav-accueil-topright {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 2;
}
@media (max-width: 480px) {
  .nav-accueil-topright { position: static; margin: 0 0 18px; display: flex; justify-content: center; }
  .nav-public { justify-content: center; }
}
/* L'écran visuel du "téléphone" (voir plus haut, @media min-width:760px)
   reste étroit même sur un grand navigateur : on applique donc ici le même
   traitement que la media query mobile ci-dessus pour le bandeau de nav
   publique, qui sinon ne se déclencherait pas puisque la fenêtre réelle,
   elle, est large. Placé après les règles ci-dessus pour gagner la cascade. */
@media (min-width: 760px) {
  .nav-accueil-topright { position: static; margin: 0 0 8px; display: flex; justify-content: center; }
  .nav-public { justify-content: center; }
}

/* ---------- Billetterie en ligne : jours & cartes de rencontre (mobile) ---------- */
.jours-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 4px 2px 10px;
  margin-bottom: 4px;
  -webkit-overflow-scrolling: touch;
}
.jour-tab {
  flex: 0 0 auto;
  background: var(--blanc);
  border: 1px solid var(--gris-bordure);
  border-radius: 12px;
  padding: 8px 14px;
  text-align: center;
  cursor: pointer;
  font-size: 0.8rem;
  color: var(--texte);
  line-height: 1.25;
}
.jour-tab .jour-nom { display: block; font-weight: 700; text-transform: uppercase; font-size: 0.68rem; color: #647065; }
.jour-tab .jour-date { display: block; font-weight: 700; }
.jour-tab .jour-nb { display: block; font-size: 0.66rem; color: var(--vert-fonce); margin-top: 2px; }
.jour-tab.actif { background: var(--vert-fonce); border-color: var(--vert-fonce); color: var(--blanc); }
.jour-tab.actif .jour-nom, .jour-tab.actif .jour-nb { color: rgba(255,255,255,0.85); }

.match-carte {
  background: var(--blanc);
  border: 1px solid var(--gris-bordure);
  border-radius: 14px;
  padding: 14px 16px 16px;
  margin-bottom: 12px;
  box-shadow: 0 1px 3px rgba(20,82,41,0.06);
}
.match-entete {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.74rem;
  color: #647065;
  margin-bottom: 8px;
}
.match-zone { background: var(--gris-fond); border-radius: 8px; padding: 2px 8px; font-weight: 600; }
.match-heure { font-weight: 700; color: var(--vert-fonce); }
.match-equipes {
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 12px;
  text-align: center;
}
.match-equipes .vs { color: #a8b3ac; font-weight: 500; font-size: 0.85rem; margin: 0 6px; }
.match-tribunes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.tribune-pill {
  display: block;
  text-decoration: none;
  color: var(--texte);
  background: var(--gris-fond);
  border: 1px solid var(--gris-bordure);
  border-radius: 12px;
  padding: 10px 10px 8px;
  text-align: center;
  transition: transform 0.1s ease;
}
.tribune-pill:active { transform: scale(0.97); }
.tribune-pill .tribune-nom { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; color: #647065; }
.tribune-pill .tribune-prix { font-size: 1.05rem; font-weight: 700; color: var(--vert-fonce); margin: 2px 0; }
.tribune-pill .tribune-dispo { font-size: 0.7rem; color: #647065; }
.tribune-pill.faible .tribune-dispo { color: #b0752c; font-weight: 600; }
.tribune-pill.complet {
  background: #f3e9ea;
  border-color: #e3c9cb;
  color: #96565c;
  cursor: not-allowed;
  pointer-events: none;
}
.tribune-pill.complet .tribune-prix, .tribune-pill.complet .tribune-nom { color: #96565c; }

/* ---------- Achat de ticket : sélection tribune / paiement en cartes ---------- */
.choix-cartes { display: grid; gap: 10px; margin: 10px 0 16px; }
.choix-carte {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 2px solid var(--gris-bordure);
  border-radius: 12px;
  padding: 12px 14px;
  cursor: pointer;
  background: var(--blanc);
}
.choix-carte.selectionne { border-color: var(--vert); background: #eaf5ee; }
.choix-carte.complet { opacity: 0.5; cursor: not-allowed; }
.choix-carte .choix-titre { font-weight: 700; }
.choix-carte .choix-sous { font-size: 0.76rem; color: #647065; }
.choix-carte .choix-prix { font-weight: 700; color: var(--vert-fonce); white-space: nowrap; }

/* ---------- Billet numérique (après paiement) ---------- */
.billet-numerique {
  background: linear-gradient(180deg, var(--vert-fonce), var(--vert));
  color: var(--blanc);
  border-radius: 18px;
  padding: 20px;
  max-width: 340px;
  margin: 14px auto 0;
  text-align: center;
  position: relative;
  box-shadow: 0 6px 18px rgba(20,82,41,0.25);
}
.billet-numerique img.logo-billet { height: 40px; margin-bottom: 6px; filter: brightness(0) invert(1); opacity: 0.92; }
.billet-numerique .billet-equipes { font-size: 1.15rem; font-weight: 700; margin: 4px 0 2px; }
.billet-numerique .billet-infos { font-size: 0.78rem; opacity: 0.9; margin-bottom: 4px; }
.billet-numerique .billet-tribune {
  display: inline-block;
  background: rgba(255,255,255,0.18);
  border-radius: 20px;
  padding: 3px 12px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  margin: 6px 0 2px;
}
.billet-numerique .billet-decoupe {
  position: relative;
  border-top: 2px dashed rgba(255,255,255,0.45);
  margin: 14px -20px;
}
.billet-numerique .billet-decoupe::before, .billet-numerique .billet-decoupe::after {
  content: '';
  position: absolute;
  top: -10px;
  width: 20px; height: 20px;
  background: var(--gris-fond);
  border-radius: 50%;
}
.billet-numerique .billet-decoupe::before { left: -10px; }
.billet-numerique .billet-decoupe::after { right: -10px; }
.billet-numerique .qr-recu { background: var(--blanc); display: inline-block; padding: 10px; border-radius: 10px; margin: 4px 0; }
.billet-numerique .billet-montant { font-size: 1.4rem; font-weight: 700; }
.billet-numerique .billet-ref { font-size: 0.65rem; opacity: 0.75; margin-top: 6px; word-break: break-all; }
@media print {
  body * { visibility: hidden; }
  .billet-numerique, .billet-numerique * { visibility: visible; }
  .billet-numerique { position: absolute; top: 0; left: 0; margin: 0; box-shadow: none; }
}

/* ---------- Ticket de match (style billetterie sportive, avec QR code) ---------- */
/* Format "à l'italienne" bien plus large que haut : le corps (infos du match)
   prend toute la largeur disponible sur une seule ligne, et la souche jaune à
   droite est assez large pour un QR code grand et net, facile à scanner. */
.ticket-match {
  display: flex;
  align-items: stretch;
  width: 100%;
  max-width: 620px;
  margin: 16px auto 0;
  box-shadow: 0 10px 24px rgba(24,26,74,0.28);
  border-radius: 18px;
}
.ticket-corps {
  flex: 1 1 auto;
  min-width: 0;
  background:
    radial-gradient(circle at 18% 15%, rgba(255,255,255,0.10), transparent 55%),
    radial-gradient(circle at 85% 80%, rgba(255,255,255,0.06), transparent 50%),
    linear-gradient(150deg, #2d2f7f 0%, #23265f 100%);
  color: #fff;
  text-align: left;
  padding: 20px 22px;
  border-radius: 18px 0 0 18px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
}
.ticket-etoiles { text-align: center; color: var(--jaune); font-size: 0.75rem; letter-spacing: 5px; }
.ticket-entete { text-align: center; font-weight: 800; font-size: 1.08rem; letter-spacing: 0.4px; }
.ticket-entete .or { color: var(--jaune); }
.ticket-vs-barre {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: var(--jaune); color: #23265f; border-radius: 8px; padding: 9px 16px;
  font-weight: 800; font-size: 0.82rem; text-transform: uppercase;
}
.ticket-equipe { flex: 1; text-align: center; }
.ticket-vs-badge {
  background: #fff; color: #23265f; border-radius: 50%; width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center; font-size: 0.68rem;
  font-weight: 900; box-shadow: 0 0 0 3px var(--jaune); flex: none;
}
.ticket-details { display: flex; align-items: center; gap: 16px; }
.ticket-trophee { font-size: 2.2rem; line-height: 1; flex: none; }
.ticket-date-bloc { flex: 1; min-width: 0; }
.ticket-mois { font-weight: 800; font-size: 1.05rem; letter-spacing: 0.4px; }
.ticket-jour { font-size: 0.74rem; opacity: 0.85; margin-bottom: 4px; text-transform: uppercase; }
.ticket-heure { font-size: 0.72rem; opacity: 0.9; }
.ticket-heure b { color: var(--jaune); }
.ticket-lieu { font-size: 0.7rem; opacity: 0.75; margin-top: 2px; }
.ticket-separateur-v { width: 1px; align-self: stretch; background: rgba(255,255,255,0.25); flex: none; }
.ticket-infos-place { font-size: 0.72rem; text-align: left; line-height: 1.6; flex: none; white-space: nowrap; }
.ticket-prix-badge {
  margin-top: 6px; background: var(--jaune); color: #23265f; font-weight: 800;
  border-radius: 6px; padding: 4px 10px; display: inline-block; font-size: 0.78rem;
}
.ticket-decoupe-v {
  width: 0; border-left: 2px dashed rgba(255,255,255,0.55); position: relative; flex: none;
}
.ticket-decoupe-v::before, .ticket-decoupe-v::after {
  content: ''; position: absolute; left: -9px; width: 18px; height: 18px;
  background: var(--gris-fond); border-radius: 50%;
}
.ticket-decoupe-v::before { top: -9px; }
.ticket-decoupe-v::after { bottom: -9px; }
.ticket-souche {
  width: 172px; flex: none; background: var(--jaune); color: #23265f;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; padding: 18px 12px; border-radius: 0 18px 18px 0;
}
.ticket-souche-titre {
  font-weight: 800; font-size: 0.68rem; letter-spacing: 1.5px; white-space: nowrap;
  text-align: center;
}
.ticket-qr-souche { background: #fff; padding: 10px; border-radius: 10px; line-height: 0; }
.ticket-qr-souche img, .ticket-qr-souche canvas { display: block; width: 148px !important; height: 148px !important; }
.ticket-souche-ref {
  font-size: 0.66rem; opacity: 0.9; white-space: nowrap; font-weight: 700; text-align: center;
}
@media (max-width: 480px) {
  .ticket-match { flex-direction: column; max-width: 340px; }
  .ticket-corps { border-radius: 18px 18px 0 0; padding: 18px; }
  .ticket-decoupe-v { width: auto; height: 0; border-left: none; border-top: 2px dashed rgba(255,255,255,0.55); }
  .ticket-decoupe-v::before, .ticket-decoupe-v::after { left: 50%; top: -9px; transform: translateX(-50%); }
  .ticket-decoupe-v::after { left: auto; right: -9px; top: -9px; transform: none; }
  .ticket-souche { width: auto; flex-direction: row; border-radius: 0 0 18px 18px; padding: 14px; }
  .ticket-souche-titre, .ticket-souche-ref { writing-mode: horizontal-tb; }
}
@media print {
  body * { visibility: hidden; }
  .ticket-match, .ticket-match * { visibility: visible; }
  .ticket-match { position: absolute; top: 0; left: 0; margin: 0; box-shadow: none; }
}


/* ---------- Bouton flottant "Installer l'application" (toutes pages) ---------- */
#bouton-installer-app {
  position: fixed;
  left: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom));
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--jaune);
  color: #4a3a00;
  border: none;
  border-radius: 24px;
  padding: 10px 16px 10px 14px;
  font-size: 0.85rem;
  font-weight: 700;
  font-family: inherit;
  box-shadow: 0 4px 16px rgba(0,0,0,0.28);
  cursor: pointer;
}
#bouton-installer-app:active { transform: scale(0.97); }
@media (max-width: 480px) {
  #bouton-installer-app span { display: none; } /* icône seule sur petit écran, pour ne pas gêner */
  #bouton-installer-app { padding: 10px; border-radius: 50%; }
}

/* ---------- Widget flottant "Serveur connecté" (présent sur toutes les pages) ---------- */
#widget-synchro {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 9999;
  font-family: inherit;
}
#widget-synchro-bouton {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: none;
  background: var(--vert-fonce);
  color: #fff;
  box-shadow: 0 4px 16px rgba(0,0,0,0.28);
  cursor: pointer;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
}
#widget-synchro-point {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #1f9d55;
  border: 2px solid #fff;
}
#widget-synchro-panneau {
  position: absolute;
  right: 0;
  bottom: 62px;
  width: 250px;
  background: #fff;
  color: #23265f;
  border-radius: 12px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.24);
  padding: 14px 16px;
}
#widget-synchro-titre { font-weight: 800; font-size: 0.88rem; margin-bottom: 6px; }
#widget-synchro-detail { font-size: 0.78rem; color: #5a6660; line-height: 1.4; }
@media (max-width: 480px) {
  #widget-synchro { right: 12px; bottom: 12px; }
  #widget-synchro-panneau { width: 210px; right: -4px; }
}
/* Sur mobile, le widget "serveur connecté" est masqué : il est utile pour le
   staff sur poste fixe (guichets/entrées), mais superflu et gênant sur les
   petits écrans (téléphones). */
@media (max-width: 768px) {
  #widget-synchro { display: none !important; }
}