:root {
  /* Thème sombre + vert néon */
  --neon: #c6f24a;
  --neon-clair: #d8f97e;
  --lime: #c6f24a;        /* accents / soulignés = néon */
  --lime-clair: #d8f97e;
  --vert: #3aa935;        /* vert « terrain » / WhatsApp */
  --vert-mid: #2f9e46;
  --vert-fonce: #0a130d;  /* bandeau, zones les plus sombres */
  --vert-clair: rgba(198, 242, 74, .16); /* fond des chips actives (teinte néon) */
  /* Trois niveaux de surface bien séparés : sans écart net, les cartes se
     fondaient dans le fond et on ne voyait plus le formulaire. */
  --bg: #060d09;          /* fond de page (le plus sombre) */
  --carte: #1e2a3d;       /* cartes (surface surélevée) — bleu nuit, contour néon pour l'identité */
  --carte-2: #101826;     /* champs de saisie (creusés dans la carte) */
  --ardoise: #eaf3ea;     /* texte principal (clair) */
  --sombre: #0b140e;      /* texte sur bouton néon */
  --gris: #9fb0a4;        /* texte atténué */
  --gris-clair: #4f6f58;  /* bordures : doivent se voir sur la carte ET sur le fond */
  --surface-3: #2a3c54;   /* petites pastilles pleines (numéros, boutons ronds) */
  --creme: #101826;       /* fonds de champs */
  --rouge: #ef4444;
  --rayon: 14px;
  --ombre: 0 2px 6px rgba(0, 0, 0, .45);
  /* Motif géométrique du bandeau (chevrons, esprit sac de sport) — SVG inline, sans dépendance. */
  --motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='70' height='70'%3E%3Cg fill='none' stroke='white' stroke-width='1.6'%3E%3Cpath d='M0 35 17.5 0 35 35 52.5 0 70 35'/%3E%3Cpath d='M0 62 17.5 27 35 62 52.5 27 70 62'/%3E%3C/g%3E%3C/svg%3E");
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

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

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--ardoise);
  background: var(--bg);
  line-height: 1.5;
}

/* Champs de saisie : creusés dans la carte, bordure nette pour qu'on les
   identifie comme des champs et pas comme du décor. */
input, select, textarea {
  background: var(--carte-2);
  color: var(--ardoise);
  border: 1.5px solid var(--gris-clair);
}
input:focus, select:focus, textarea:focus { border-color: var(--neon); }
input::placeholder { color: var(--gris); }
select option { color: #111; }

.wrap {
  max-width: 520px;
  margin: 0 auto;
  padding: 16px 16px 48px;
}

/* Accueil = création : conteneur large + deux colonnes sur ordinateur */
.wrap.large { max-width: 1200px; }

.grille-creation { display: grid; gap: 18px; }
/* min-width:0 : un item de grille refuse par défaut de rétrécir sous la
   largeur min-content de son contenu — c'est ce qui laissait le bandeau de
   niveau pousser toute la colonne (et la carte avec) plutôt que de scroller. */
.colonne-form { order: -1; min-width: 0; }
@media (min-width: 800px) {
  .grille-creation { grid-template-columns: 1fr 1fr; gap: 36px; align-items: start; }
  .colonne-form { order: 0; }
}

/* Accroche : sur mobile le formulaire passe avant la présentation, on arriverait
   sinon sur « On joue à quoi ? » sans savoir à quoi sert le site. Sur ordinateur,
   la colonne de gauche dit déjà tout : inutile de répéter. */
.accroche { margin: 2px 0 14px; }
.accroche-t {
  margin: 0 0 5px; font-size: 1.15rem; line-height: 1.2; font-weight: 800;
  font-style: italic; text-transform: uppercase; letter-spacing: .01em; color: var(--ardoise);
}
.accroche-t em { color: var(--neon); font-style: italic; }
.accroche-s { margin: 0; color: var(--gris); font-size: .92rem; line-height: 1.45; text-align: justify; }
.accroche-illu {
  display: block; width: 100%; max-width: 420px; height: auto; margin: 14px auto 0;
  border-radius: 14px; box-shadow: var(--ombre);
}
@media (min-width: 800px) { .accroche { display: none; } }
.legend-aide { font-weight: 400; color: var(--gris); font-size: .82rem; }
/* iOS centre le contenu des champs date et leur donne une hauteur à lui :
   on neutralise son habillage pour qu'ils ressemblent aux autres champs. */
.champ-date {
  display: block; width: 100%; padding: 11px; font-size: 1rem;
  min-height: 48px; line-height: 1.4; text-align: left;
  -webkit-appearance: none; appearance: none;
  border: 1.5px solid var(--gris-clair); border-radius: var(--rayon);
}
.champ-date::-webkit-date-and-time-value { text-align: left; margin: 0; }
.champ-date::-webkit-calendar-picker-indicator { filter: invert(1) opacity(.6); }

/* Colonne présentation (texte + illustration padel) */
.presentation h1 {
  font-size: 1.95rem; line-height: 1.06; margin: 0 0 10px; color: var(--ardoise);
  text-transform: uppercase; letter-spacing: .01em; font-weight: 800; font-style: italic;
}
.presentation h1 em { color: var(--neon); font-style: italic; }
.presentation h1::after {
  content: ""; display: block; width: 64px; height: 6px; margin-top: 10px;
  background: var(--lime); border-radius: 3px;
}
.presentation .sub { margin: 0 0 12px; max-width: 620px; text-align: justify; }
.illus-court { display: block; width: 100%; max-width: 360px; height: auto; margin: 0 0 14px;
  border-radius: 14px; box-shadow: var(--ombre); }

.etapes-v { list-style: none; margin: 0 0 16px; padding: 0; }
.etapes-v li { position: relative; padding: 3px 0 16px 42px; min-height: 30px; }
.etapes-v li:last-child { padding-bottom: 0; }
.etapes-v li::before {
  content: attr(data-n); position: absolute; left: 0; top: 1px;
  width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--surface-3); color: var(--neon-clair);
  font-weight: 800; font-size: .82rem; border: 1.5px solid var(--gris-clair);
}
.etapes-v li:not(:last-child)::after {
  content: ""; position: absolute; left: 13.5px; top: 30px; bottom: 0;
  width: 2px; background: var(--gris-clair);
}
.etapes-v h3 { margin: 0 0 2px; font-size: 1rem; color: var(--ardoise); }
.etapes-v p { margin: 0; color: var(--gris); font-size: .92rem; }

/* Numéros identiques dans le dialogue « Comment ça marche » (bandeau) */
.parcours-v { list-style: none; margin: 0 0 16px; padding: 0; }
.parcours-v li { position: relative; padding: 5px 0 16px 44px; min-height: 30px; }
.parcours-v li:last-child { padding-bottom: 0; }
.parcours-v li::before {
  content: attr(data-n); position: absolute; left: 0; top: 3px;
  width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--neon); color: var(--sombre);
  font-weight: 800; font-size: .88rem;
}
.parcours-v li:not(:last-child)::after {
  content: ""; position: absolute; left: 14.5px; top: 35px; bottom: 0;
  width: 2px; background: var(--gris-clair);
}
.parcours-v h3 { margin: 0 0 2px; font-size: 1rem; color: var(--ardoise); }
.parcours-v p { margin: 0; color: var(--gris); font-size: .88rem; }

/* Bloc de confiance (aucun compte, aucune donnée inutile) */
.confiance {
  display: flex; gap: 10px; align-items: flex-start;
  margin: 4px 0 0; padding: 12px 14px;
  background: var(--carte-2); border: 1px solid var(--gris-clair); border-radius: var(--rayon);
}
.confiance .glyphe { flex: none; font-size: 1.25rem; line-height: 1.2; }
.confiance strong { display: block; color: var(--ardoise); font-size: .92rem; margin-bottom: 2px; }
.confiance p { margin: 2px 0 0; color: var(--gris); font-size: .84rem; line-height: 1.4; }

/* Aperçu de partie en direct (colonne supplémentaire, grands écrans) */
.apercu-live { display: none; }
@media (min-width: 1100px) {
  .grille-creation { grid-template-columns: 1fr 1fr 320px; }
  .apercu-live { display: block; }
}
.apercu-court {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  margin: 10px 0; padding: 12px; border-radius: var(--rayon);
  background: var(--vert);
}
.pt-place {
  aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255, 255, 255, .92); color: var(--vert-fonce); font-weight: 800;
}
.pt-place.vide {
  background: rgba(255, 255, 255, .16); color: rgba(255, 255, 255, .55);
  border: 2px dashed rgba(255, 255, 255, .45);
}
.apercu-lignes { display: flex; flex-direction: column; gap: 2px; margin: 8px 0 0; }
.apercu-ligne {
  display: flex; justify-content: space-between; gap: 10px;
  font-size: .86rem; padding: 6px 0; border-bottom: 1px solid var(--gris-clair); color: var(--gris);
}
.apercu-ligne:last-child { border-bottom: 0; }
.apercu-ligne strong { color: var(--ardoise); font-weight: 700; }
.apercu-note { font-size: .76rem; color: var(--gris); margin: 8px 0 0; }

/* Formulaire compact (pour tenir sans scroll sur ordinateur).
   C'est l'action principale de la page : liseré néon + ombre plus marquée
   pour qu'on le repère immédiatement sur le fond sombre. */
.carte-creation {
  padding: 16px;
  /* Un peu plus de glow que les autres cartes : c'est l'action principale. */
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .32), 0 0 0 5px rgba(198, 242, 74, .18), 0 10px 34px rgba(0, 0, 0, .6);
}
.carte-creation h2 { margin: 0 0 6px; }
.intro-form { margin: 0 0 14px; color: var(--gris); font-size: .9rem; line-height: 1.45; }
.carte-creation .bloc { margin-bottom: 10px; }
.carte-creation .bloc legend { margin-bottom: 5px; font-size: .9rem; }
.carte-creation .chips { gap: 6px; }
.carte-creation .chip span { padding: 6px 11px; min-height: 34px; line-height: 20px; font-size: .86rem; }
.carte-creation .niveau-aide { margin-top: 5px; padding: 6px 9px; font-size: .78rem; }
.carte-creation .options { margin: 2px 0 8px; }
.carte-creation .options summary { padding: 4px 0; }
.champ-lieu {
  width: 100%; padding: 11px; font-size: 1rem;
  border: 1.5px solid var(--gris-clair); border-radius: var(--rayon);
}

h1 { font-size: 1.6rem; margin: 0 0 4px; }
h2 { font-size: 1.05rem; margin: 0 0 12px; text-transform: uppercase; letter-spacing: .03em; color: var(--ardoise); }
a { color: var(--neon); }

/* ---- Barre de marque (bandeau sportif) + pied de site ---- */
.barre-marque {
  background: var(--vert-fonce);
  border-bottom: 4px solid var(--lime);
  position: relative;
}
.barre-marque::after {
  content: ""; position: absolute; inset: 0; background-image: var(--motif);
  background-size: 70px; opacity: .16; pointer-events: none;
}
.barre-inner {
  position: relative; z-index: 1;
  max-width: 1200px; margin: 0 auto; padding: 7px 16px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.marque {
  display: inline-block; font-weight: 800; font-size: 1rem;
  color: #fff; text-decoration: none;
  text-transform: uppercase; letter-spacing: .05em;
}
.barre-actions-droite { display: flex; align-items: center; gap: 8px; }
.btn-aide {
  flex: none; width: 32px; height: 32px; border-radius: 50%;
  background: transparent; border: 1.5px solid rgba(255, 255, 255, .4); color: #fff;
  font-weight: 800; font-size: .92rem; line-height: 1; cursor: pointer;
}
.btn-aide:hover, .btn-aide:focus-visible { border-color: var(--lime); color: var(--lime); }
.btn-header {
  flex: none; text-decoration: none; font-weight: 700; font-size: .82rem;
  padding: 8px 14px; border-radius: 999px;
  background: var(--lime); color: var(--vert-fonce);
  text-transform: uppercase; letter-spacing: .02em;
}
.btn-header:hover { background: var(--lime-clair); }
.pied-site {
  max-width: 1200px; margin: 8px auto 0; padding: 24px 16px 40px;
  color: var(--gris); font-size: .85rem; border-top: 1px solid var(--gris-clair);
}
.pied-site strong { color: var(--ardoise); }
.pied-site .mini { font-size: .78rem; margin-top: 6px; }

.hero { padding: 20px 4px 12px; }
.hero.accueil h1 { font-size: 1.8rem; line-height: 1.2; }
.hero .sub, .sub { color: var(--gris); margin: 6px 0 0; }
.ville, .hero .ville { color: var(--gris); font-weight: 400; font-size: 1rem; }

.card, .modale-boite, .lien-tete {
  /* Carte claire (perle), redéclarée localement : tout ce qui, à l'intérieur
     d'une carte, référence ces jetons (fonds de champs, textes, bordures,
     chips…) bascule en clair automatiquement — le reste de la page (bandeau,
     fond) garde ses jetons sombres d'origine, définis au :root. Le blanc pur
     testé d'abord faisait trop clinique ; le sauge testé ensuite trop vert ;
     le perle (neutre chaud) garde un peu de couleur sans repartir sur du vert. */
  --carte: #e4ded0;
  /* Champs et fonds « creusés » : blancs, distincts du fond perle de la
     carte — sinon champ et carte se confondent en un seul bloc tan. */
  --carte-2: #ffffff;
  --creme: #ffffff;
  --ardoise: #241f16;
  --gris: #6b6250;
  --gris-clair: #c3b89e;
  --surface-3: #d6cbb0;
}
.card {
  background: var(--carte);
  border: 1.5px solid var(--lime);
  border-radius: var(--rayon);
  /* Liseré néon + ombre franche : c'est ce qui décolle la carte claire du
     fond bleu nuit de la page. */
  box-shadow: 0 0 0 2px rgba(0, 0, 0, .12), 0 6px 22px rgba(0, 0, 0, .4);
  padding: 16px;
  margin: 14px 0;
  color: var(--ardoise);
}

/* ---- Boutons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 12px 18px;
  border: 1px solid var(--gris-clair);
  border-radius: var(--rayon);
  background: var(--carte-2);
  color: var(--ardoise);
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  width: 100%;
}
.btn-primary {
  background: var(--neon); border-color: var(--neon); color: var(--sombre);
  font-weight: 800; box-shadow: 0 6px 18px rgba(198, 242, 74, .22);
}
.btn-primary:hover { background: var(--neon-clair); }
.btn-whatsapp { background: #25d366; border-color: #25d366; color: #05320f; }
.btn:active { transform: translateY(1px); }

/* ---- Chips (radios) ---- */
/* min-width:0 : les <fieldset> ont un min-width intrinsèque basé sur leur
   contenu dans certains navigateurs, ce qui peut les empêcher de se
   contraindre à la largeur de la carte (le bandeau de niveau, par exemple). */
.bloc { border: 0; padding: 0; margin: 0 0 18px; min-width: 0; }
.bloc legend { font-weight: 600; padding: 0; margin-bottom: 8px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.chip span {
  display: inline-block;
  padding: 10px 16px;
  min-height: 44px;
  line-height: 24px;
  border: 1.5px solid var(--gris-clair);
  border-radius: 999px;
  background: var(--carte-2);
  font-weight: 600;
  color: var(--gris);
}
.chip input:checked + span {
  /* Remplissage plein plutôt qu'un simple filet lime pâle : la sélection
     doit sauter aux yeux, pas se deviner à un léger changement de teinte. */
  background: var(--neon);
  border-color: var(--neon);
  color: var(--sombre);
  font-weight: 800;
}
.chip input:focus-visible + span { outline: 3px solid var(--vert); outline-offset: 2px; }

/* Niveau : bandeau déroulant plutôt qu'une grille qui s'empile sur 3 lignes
   — les niveaux voisins restent côte à côte, ce qui rend visuelle la règle
   « deux niveaux qui se suivent ». Les fondus masquent le bord de la piste
   sans dépendre de l'apparence native de la scrollbar. */
.niveau-piste { position: relative; margin: 0 -2px; }
.niveau-piste::before, .niveau-piste::after {
  content: ""; position: absolute; top: 0; bottom: 10px; width: 22px; z-index: 2; pointer-events: none;
}
.niveau-piste::before { left: 0; background: linear-gradient(90deg, var(--carte), transparent); }
.niveau-piste::after { right: 0; background: linear-gradient(270deg, var(--carte), transparent); }
.chips-niveau {
  /* width + min-width:0 : un flex item ne rétrécit jamais sous la largeur de
     son contenu par défaut, donc sans ça la piste s'élargit pour tout faire
     tenir au lieu de scroller — c'est elle qui poussait la carte entière. */
  width: 100%; min-width: 0;
  flex-wrap: nowrap; overflow-x: auto; padding: 4px 2px 10px;
  scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
}
.chips-niveau .chip { scroll-snap-align: start; }
.chips-niveau::-webkit-scrollbar { height: 5px; }
.chips-niveau::-webkit-scrollbar-thumb { background: var(--gris-clair); border-radius: 3px; }

/* Voisin immédiat du niveau choisi : peut être ajouté d'un tap (multi-
   sélection de deux niveaux qui se suivent). */
.chip.voisin span { border-color: var(--neon); border-style: dashed; }
.chip.voisin span::after { content: " +"; opacity: .6; }

.autre-date { display: block; width: 100%; margin-top: 10px; padding: 12px; font-size: 1rem;
  border: 1.5px solid var(--gris-clair); border-radius: var(--rayon); }

/* Aide de niveau : explique ce que veut dire le niveau choisi */
/* Texte discret, pas une carte à part : --creme vaut désormais le même
   blanc que les champs eux-mêmes, une note en boîte pleine concurrençait
   visuellement les champs au lieu de rester une note secondaire. */
.niveau-aide {
  margin: 6px 2px 0; padding: 0 0 0 10px; font-size: .84rem; color: var(--gris);
  border-left: 2px solid var(--gris-clair);
}

/* ---- Contenu éditorial (accueil, à propos) ---- */
.badges-sports { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 12px 0 0; }
.badges-sports li {
  padding: 8px 14px; border-radius: 999px; font-weight: 600; font-size: .92rem;
  background: var(--vert-clair); color: var(--neon-clair); border: 1px solid rgba(198,242,74,.28);
}
.etapes { margin: 8px 0 0; padding-left: 20px; }
.etapes li { margin-bottom: 10px; }
.card p { color: var(--gris); }
.card p strong { color: var(--ardoise); }
.apropos { margin-top: 14px; }

/* ---- Options repliées ---- */
.options { margin: 6px 0 20px; }
.options summary { cursor: pointer; font-weight: 600; color: var(--gris); padding: 8px 0; }
.grille-options { display: grid; gap: 12px; margin-top: 10px; }
.grille-options label { display: flex; flex-direction: column; gap: 4px; font-weight: 600; font-size: .9rem; color: var(--gris); }
.grille-options input, .grille-options select {
  padding: 12px; font-size: 1rem; border: 1.5px solid var(--gris-clair); border-radius: var(--rayon);
}

/* ---- Page partie ---- */
.entete-partie { padding: 8px 4px; }

/* Lien de la partie : toujours visible en haut de page, pas seulement dans
   la modale « Partager » — c'est l'action la plus utile de la page, et on
   veut pouvoir la retaper facilement à chaque changement de statut. */
.lien-tete {
  margin: 10px 0 16px; padding: 14px 16px; border-radius: var(--rayon);
  background: var(--carte); color: var(--ardoise); border: 1.5px solid rgba(198, 242, 74, .35);
  box-shadow: 0 0 0 1px rgba(198, 242, 74, .06), var(--ombre);
}
.lien-tete-label { margin: 0 0 4px; font-weight: 800; font-size: 1rem; color: var(--ardoise); }
.lien-tete-note { margin: 0 0 10px; font-size: .84rem; color: var(--gris); line-height: 1.4; }
.lien-tete .lien-copiable { margin-bottom: 10px; }
.lien-tete .btn-whatsapp { width: 100%; }
.retour { display: inline-block; font-size: .9rem; text-decoration: none; margin-bottom: 8px; color: var(--gris); }
.statut { font-size: 1.7rem; text-transform: uppercase; letter-spacing: .01em; }
.statut.manque { color: var(--ardoise); }
.statut.manque::after {
  content: ""; display: block; width: 56px; height: 6px; margin-top: 8px;
  background: var(--lime); border-radius: 3px;
}
.statut.complet { color: var(--gris); }
.meta { color: var(--gris); margin: 4px 0 0; }

/* Résumé de la partie : chips à icônes dans un encadré, plus lisible et plus
   « habillé » qu'une seule ligne de texte séparée par des « · ». */
.resume-partie {
  display: flex; flex-wrap: wrap; gap: 7px 10px; margin: 10px 0 4px;
  padding: 12px 14px; border-radius: var(--rayon);
  background: var(--carte-2); border: 1px solid var(--gris-clair);
}
.rp-item {
  display: inline-flex; align-items: center; gap: 6px; max-width: 100%;
  font-size: .9rem; font-weight: 600; color: var(--ardoise);
}
.rp-item a { color: var(--neon); text-decoration: underline; }

.banniere { padding: 12px 14px; border-radius: var(--rayon); font-weight: 600; margin-bottom: 8px; }
.banniere.ok { background: var(--vert-clair); color: var(--neon-clair); border: 1px solid rgba(198,242,74,.35); }
.banniere.err { background: rgba(239,68,68,.14); color: #fca5a5; border: 1px solid rgba(239,68,68,.4); }

/* ---- Liste des places ---- */
/* Remplace l'ancien terrain schématique : une ligne par place, plus lisible
   que la grille + filet, et fonctionne pareil pour tous les sports (le
   schéma n'avait de sens qu'en padel). */
.places-carte { padding: 14px 16px; }
/* La carte joueurs est l'action principale de la page : elle doit ressortir
   par rapport aux autres encadrés (lien, partage, journal…) pour qu'on
   comprenne tout de suite où s'inscrire, sans avoir à tout lire. */
.places-carte-avant {
  border-width: 2px;
  box-shadow: 0 0 0 3px rgba(198, 242, 74, .22), 0 10px 34px rgba(0, 0, 0, .45);
}
.places-carte-avant h2 { display: flex; align-items: center; gap: 8px; }
.places-cta {
  margin: 0 0 10px; padding: 8px 10px; border-radius: 10px;
  background: rgba(198, 242, 74, .16); color: var(--ardoise);
  font-weight: 700; font-size: .92rem;
}
.liste-places { list-style: none; margin: 0; padding: 0; }

.lp {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; min-height: 56px;
  padding: 9px 4px; border-bottom: 1px solid var(--gris-clair); position: relative;
}
.lp:last-child { border-bottom: 0; }

.lp-num {
  flex: none; width: 22px; text-align: center; font-size: .78rem; font-weight: 700; color: var(--gris);
}
.lp-prise .lp-nom { font-weight: 700; flex: 1; }
.lp-prise .tag { color: var(--gris); }
.tag.niveau-tag { background: var(--surface-3); color: var(--ardoise); padding: 1px 6px; border-radius: 6px; }

.lp-libre .lp-cta {
  flex: 1; color: var(--ardoise); text-decoration: none; font-weight: 600;
  padding: 8px 0;
}
.lp-libre .lp-cta::before {
  content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 10px;
  border-radius: 50%; border: 2px dashed var(--neon); vertical-align: middle;
}
.lp-libre:hover .lp-cta, .lp-libre .lp-cta:focus-visible { color: var(--vert); }
.lp-attente .lp-txt { flex: 1; color: var(--gris); }

/* Avatar texte : deux initiales sur fond de couleur — jamais de photo.
   Couleurs assombries pour un contraste texte blanc >= 4.5:1 (vérifié). */
.avatar {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 34px; height: 34px; border-radius: 50%;
  font-size: .72rem; font-weight: 800; letter-spacing: .02em; color: #fff; line-height: 1;
}
.avatar.av-1 { background: #b91c1c; }
.avatar.av-2 { background: #b45309; }
.avatar.av-3 { background: #15803d; }
.avatar.av-4 { background: #1d4ed8; }
.avatar.av-5 { background: #7e22ce; }
.avatar.av-6 { background: #be185d; }

.tag { display: inline-block; font-size: .68rem; font-weight: 600; color: var(--gris); text-transform: uppercase; }

/* En flux normal (dernier élément du flex .lp), pas en position:absolute :
   un côté (« Droite ») + un niveau affichés à côté du nom poussaient la
   croix en dehors de sa place et la faisaient chevaucher les étiquettes. */
.lp-retrait { flex: none; margin: 0 0 0 auto; }
.lp-retrait .x {
  width: 30px; height: 30px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--surface-3); color: var(--ardoise); font-size: 1.1rem; line-height: 1; font-weight: 700;
}
.lp-retrait .x:hover { background: var(--rouge); color: #fff; }

/* Mini-formulaire de prénom sur une ligne */
.lp-saisie { padding: 12px 4px; }
.saisie-prenom { display: flex; flex-direction: column; gap: 8px; width: 100%; margin: 0; }
.saisie-prenom .prenom {
  padding: 10px; font-size: 1rem; border: 1.5px solid var(--gris-clair); border-radius: 10px; width: 100%;
}
.saisie-prenom .btn { min-height: 44px; }

/* ---- Page partie : deux colonnes sur ordinateur ---- */
/* Gauche = terrain + organisateur ; droite = nouvelle partie + partage. */
.grille-partie { display: grid; gap: 16px; }
@media (min-width: 800px) {
  .grille-partie { grid-template-columns: 1fr 1fr; gap: 28px; align-items: start; }
  .col-gauche > :first-child, .col-droite > :first-child { margin-top: 0; }
}

/* ---- Journal / chat (timeline) ---- */
.timeline { list-style: none; margin: 0 0 12px; padding: 0; max-height: 320px; overflow-y: auto; }
.timeline li {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 7px 0; border-bottom: 1px solid var(--gris-clair);
}
.timeline li:last-child { border-bottom: 0; }
.tl-c { color: var(--gris); font-size: .92rem; }
.tl-msg .tl-c { color: var(--ardoise); }
.tl-msg .tl-c strong { color: var(--vert); }
/* Petit avatar dans le fil : les autres lignes (événements) n'en ont pas,
   donc on ne touche que .tl-msg pour ne pas décaler le reste du journal. */
.tl-msg { align-items: flex-start; }
.tl-msg .avatar { width: 24px; height: 24px; font-size: .62rem; margin-top: 1px; }
.tl-h { flex: none; color: var(--gris); font-size: .72rem; }
.form-message { display: flex; flex-wrap: wrap; gap: 8px; }
.form-message .prenom-msg { flex: 0 0 90px; }
.form-message .texte-msg { flex: 1; min-width: 140px; }
.form-message .prenom-msg, .form-message .texte-msg {
  padding: 10px; font-size: 1rem; border: 1.5px solid var(--gris-clair); border-radius: var(--rayon);
}
.form-message .btn { width: auto; padding: 10px 16px; }

/* ---- Nouvelle partie (boucle) ---- */
.nouvelle-partie { border-top: 4px solid var(--lime); }
.nouvelle-partie .btn-primary { margin-top: 6px; }

/* ---- Partage ---- */
.partage .lien-copiable { display: flex; gap: 8px; margin-bottom: 12px; }
.champ-lien {
  flex: 1; min-width: 0; padding: 12px; font-size: .95rem;
  border: 1.5px solid var(--gris-clair); border-radius: var(--rayon);
  background: var(--creme); color: var(--ardoise);
}
.lien-copiable .btn { width: auto; padding: 12px 16px; }
.boutons-partage { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.boutons-partage .btn { width: 100%; margin: 0; }
.boutons-partage [data-partager] { grid-column: 1 / -1; }

/* ---- Côté (padel) : sélecteur + tags ---- */
.chip.mini span { padding: 6px 12px; min-height: 34px; line-height: 20px; font-size: .85rem; }
.cote-choix { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cote-titre { font-weight: 600; font-size: .85rem; color: var(--gris); }
.tag.cote-g, .tag.cote-d { color: #fff; padding: 1px 6px; border-radius: 6px; }
.tag.cote-g { background: #2563eb; }
.tag.cote-d { background: #d97706; }

/* ---- Demander à jouer (mode validation) ---- */
.niveau-select {
  padding: 12px; font-size: 1rem; border: 1.5px solid var(--gris-clair); border-radius: var(--rayon); width: 100%;
}
.saisie-prenom input[name="note"] {
  padding: 10px; font-size: 1rem; border: 1.5px solid var(--gris-clair); border-radius: 10px; width: 100%;
}
.demande-envoyee { border-left: 4px solid var(--vert); }
.demande-envoyee .btn { width: auto; }

/* ---- Liste des demandes (organisateur) ---- */
.pastille-nombre {
  display: inline-block; min-width: 22px; padding: 2px 7px; border-radius: 999px;
  background: var(--vert); color: #fff; font-size: .8rem; text-align: center; vertical-align: middle;
}
.liste-demandes { list-style: none; padding: 0; margin: 10px 0 4px; }
.demande {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  padding: 10px 0; border-bottom: 1px solid var(--gris-clair);
}
.demande-info { display: flex; align-items: flex-start; gap: 10px; }
.demande-num { color: var(--gris); font-weight: 700; font-size: .82rem; }
.demande-rep { font-size: .8rem; color: var(--gris); }
.demande-badges { display: flex; gap: 6px; margin-top: 4px; flex-wrap: wrap; }
.demande-note { margin: 6px 0 0; font-size: .85rem; color: var(--gris); font-style: italic; }
.demande-actions { display: flex; gap: 6px; }
.btn.mini { width: auto; min-height: 38px; padding: 8px 14px; font-size: .9rem; }

.lien-gestion { margin-top: 14px; }
.lien-gestion summary { cursor: pointer; font-weight: 600; color: var(--gris); }

/* ---- Organisateur ---- */
.astuce { color: var(--gris); font-size: .85rem; margin: 8px 0 0; }

.pied { color: var(--gris); font-size: .82rem; text-align: center; margin-top: 24px; }

/* ---- Accueil ---- */
.liste-clubs { list-style: none; padding: 0; margin: 0; }
.lien-club { display: block; padding: 14px; border: 1px solid var(--gris-clair); border-radius: var(--rayon); margin-bottom: 8px; text-decoration: none; font-weight: 600; }
.lien-club span { color: var(--gris); font-weight: 400; }

/* ---- Wizard : création en étapes ---- */
.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;
}
/* Sans JS : toutes les étapes s'empilent (repli). Avec JS : une seule visible. */
.has-js .wizard .etape { display: none; }
.has-js .wizard .etape.actif { display: block; }
.wizard .etape:not(:first-of-type) { border-top: 1px solid var(--gris-clair); margin-top: 16px; padding-top: 16px; }
.has-js .wizard .etape { border-top: 0; margin-top: 0; padding-top: 0; }

.wz-titre {
  font-size: 1.3rem; font-style: italic; font-weight: 800;
  text-transform: uppercase; letter-spacing: .01em; color: var(--ardoise);
  margin: 2px 0 16px;
}
/* Cible du focus au changement d'étape (annonce lecteur d'écran) : pas de contour. */
.wz-titre:focus { outline: none; }

/* Barre de progression 1-2-3-4 */
.wz-steps {
  position: relative; display: flex; justify-content: space-between; align-items: center;
  list-style: none; padding: 0; margin: 0 0 22px;
}
.wz-steps::before {
  content: ""; position: absolute; left: 17px; right: 17px; top: 50%; height: 2px;
  background: var(--gris-clair); transform: translateY(-50%); z-index: 0;
}
.wz-dot {
  position: relative; z-index: 1; width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; font-weight: 800; font-size: .9rem;
  background: var(--carte-2); color: var(--gris); border: 1.5px solid var(--gris-clair);
}
.wz-dot.on { background: var(--neon); color: var(--sombre); border-color: var(--neon); }
/* Fond opaque (pas le --vert-clair translucide) : sinon le trait qui relie
   les puces se voit par transparence à travers le cercle. Texte foncé,
   pas --neon (clair) : illisible sur une carte claire. */
.wz-dot.done { background: #eaf3a0; color: #2f6b1f; border-color: var(--vert); }

/* Grille de sports (grandes cartes tapables) */
.sport-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sport-card { position: relative; display: block; }
.sport-card input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.sport-card > span {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  min-height: 96px; padding: 14px 8px; border-radius: 14px;
  /* Bordure toujours visible, même discrète : sur une carte claire, un blanc
     pur sans liseré se fond presque dans le fond de carte. */
  background: #fff; color: #12211a; border: 2px solid rgba(0, 0, 0, .08);
  font-weight: 800; text-transform: uppercase; letter-spacing: .02em; font-size: .88rem;
}
.sport-card .ic { width: 32px; height: 32px; }
.sport-card input:checked + span {
  border-color: var(--neon); color: var(--vert);
  box-shadow: 0 0 0 3px rgba(198, 242, 74, .3), var(--ombre);
}
.sport-card input:checked + span::after {
  content: "✓"; position: absolute; top: -8px; right: -8px;
  width: 22px; height: 22px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--neon); color: var(--sombre);
  font-size: .78rem; font-weight: 900; box-shadow: var(--ombre);
}
.sport-card input:focus-visible + span { outline: 3px solid var(--vert); outline-offset: 2px; }
.note-discrete { margin: 6px 2px 0; font-size: .78rem; color: var(--gris); }
/* Sport orphelin en fin de grille (nombre impair) : pleine largeur, en ligne */
.sport-card:last-child:nth-child(odd) { grid-column: 1 / -1; }
.sport-card:last-child:nth-child(odd) > span { flex-direction: row; min-height: 64px; gap: 12px; }

/* Navigation entre étapes. Reste dans le flux normal de la carte (pas de
   position:sticky) : une CTA collée en bas exige de suivre chaque
   changement de fond à la main, et a déjà causé deux bugs visuels
   (chevauchement, puis couleur du fond restée périmée après un changement
   de palette). Le bouton est déjà bien visible en fin d'étape. */
.wz-bas { margin-top: 18px; }
.wz-nav { display: flex; gap: 10px; }
.wz-nav .btn { width: auto; }
.wz-nav .wz-suivant, .wz-nav [type="submit"] { flex: 1; }
.wz-nav .wz-retour { flex: 0 0 auto; }
.wz-etape-legende { margin: 8px 0 0; text-align: center; font-size: .78rem; color: var(--gris); }

/* ---- Mode concentration (mobile) : dès l'étape 2 du wizard, le bandeau et
   l'accroche se replient pour ne laisser que la carte à l'écran — plein
   écran maîtrisé plutôt que subi. Retour à l'étape 1 = tout se déplie.
   Cantonné au mobile : sur ordinateur les deux colonnes cohabitent déjà
   sans se gêner, rien à cacher. ---- */
@media (max-width: 799px) {
  .barre-marque {
    max-height: 60px; overflow: hidden;
    transition: max-height .38s cubic-bezier(.4, 0, .2, 1), border-width .38s ease;
  }
  body.focus-etape .barre-marque { max-height: 0; border-bottom-width: 0; }

  .accroche, .presentation {
    max-height: 2000px; overflow: hidden; opacity: 1;
    transition: max-height .4s cubic-bezier(.4, 0, .2, 1), opacity .3s ease, margin .4s ease;
  }
  body.focus-etape .accroche, body.focus-etape .presentation {
    max-height: 0; opacity: 0; margin: 0; pointer-events: none;
  }

  .carte-creation { transition: transform .4s cubic-bezier(.2, .8, .2, 1); }
  .carte-creation.pop { transform: scale(1.012); }
}
@media (max-width: 799px) and (prefers-reduced-motion: reduce) {
  .barre-marque, .accroche, .presentation, .carte-creation { transition: none; }
}

/* ---- Rappel « réservation au club » + réglage de l'horaire ---- */
.rappel-resa { font-size: .92rem; text-align: justify; }
.rappel-resa strong { color: var(--ardoise); }
.accroche-r { margin: 8px 0 0; font-size: .86rem; color: var(--gris); line-height: 1.4; }
.accroche-r strong { color: var(--neon); }

.a-confirmer {
  display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px;
  font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .02em;
  background: var(--vert-clair); color: var(--neon-clair); border: 1px solid rgba(198,242,74,.35);
}

.reglage-horaire { margin-top: 14px; }
.reglage-horaire summary { cursor: pointer; font-weight: 600; color: var(--gris); padding: 6px 0; }
.form-horaire { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.horaire-champ { display: flex; flex-direction: column; gap: 4px; font-size: .9rem; color: var(--gris); font-weight: 600; }
.form-horaire .btn { width: auto; align-self: flex-start; }

.email-suivi {
  padding: 10px; font-size: 1rem; width: 100%;
  border: 1.5px solid var(--gris-clair); border-radius: 10px;
}

/* ---- Barre d'actions fixe (mobile) : chat / partage / WhatsApp ---- */
/* Sur ordinateur, tout est déjà visible en deux colonnes : pas de barre. */
.barre-actions { display: none; }

@media (max-width: 799px) {
  .barre-actions {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
    padding: 10px 12px;
    /* env(safe-area-inset-bottom) : sans ça la barre passe sous la barre
       d'adresse / l'indicateur d'accueil d'iPhone. Le viewport-fit=cover
       du <head> est ce qui rend cette valeur disponible. */
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    background: rgba(6, 13, 9, .94);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-top: 1px solid var(--gris-clair);
  }
  /* Le pied de page est hors du .wrap : c'est au body de réserver la place,
     sinon la barre lui passe dessus. */
  body.avec-barre { padding-bottom: calc(112px + env(safe-area-inset-bottom, 0px)); }
  /* Les sections déplacées dans les modales ne doivent plus occuper la page. */
  .modale .card { margin: 0; border: 0; box-shadow: none; background: transparent; padding: 0; }
}

/* 3 grosses tuiles pleine largeur/hauteur de colonne plutôt que des pastilles
   fines : ce sont les actions les plus utiles de la page, elles doivent se
   voir tout de suite, pas se confondre avec le reste du pied de page. */
.ba-btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  min-height: 68px; padding: 8px 4px; border-radius: 14px;
  background: var(--carte); border: 1.5px solid var(--gris-clair); color: var(--ardoise);
  font-size: .8rem; font-weight: 700; text-decoration: none; position: relative;
}
.ba-btn span[aria-hidden] { font-size: 1.4rem; line-height: 1; }
.ba-btn:active { transform: translateY(1px); }
.ba-wa { background: #25d366; border-color: #25d366; color: #05320f; }
.ba-badge {
  position: absolute; top: 6px; right: 14px;
  min-width: 18px; padding: 0 5px; border-radius: 999px;
  background: var(--neon); color: var(--sombre);
  font-size: .68rem; line-height: 18px; text-align: center; font-weight: 800;
}

/* ---- Modales (chat / partage) ---- */
.modale {
  border: 0; padding: 0; background: transparent;
  width: min(560px, 94vw); max-height: 86vh;
  margin: auto; overflow: visible;
}
.modale::backdrop { background: rgba(0, 0, 0, .66); }
.modale-boite {
  background: var(--carte); color: var(--ardoise); border: 1.5px solid var(--lime);
  border-radius: 18px; box-shadow: 0 0 0 2px rgba(0, 0, 0, .12), 0 20px 50px rgba(0, 0, 0, .7);
  padding: 16px; max-height: 86vh; overflow-y: auto;
  padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
}
.modale-tete { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.modale-tete h2 { margin: 0; }
.modale-fermer {
  flex: none; width: 36px; height: 36px; border-radius: 50%; cursor: pointer;
  background: var(--carte-2); border: 1.5px solid var(--gris-clair); color: var(--ardoise);
  font-size: 1.1rem; line-height: 1; font-weight: 700;
}
.modale .timeline { max-height: 48vh; }

/* ---- Autocomplétion du lieu ---- */
.champ-suggest { position: relative; }
.suggestions {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 40;
  list-style: none; margin: 0; padding: 4px;
  max-height: 240px; overflow-y: auto;
  background: var(--carte); border: 1.5px solid var(--neon); border-radius: var(--rayon);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .6);
}
.suggestion {
  padding: 11px 12px; border-radius: 10px; cursor: pointer;
  font-size: .94rem; line-height: 1.3;
}
.suggestion + .suggestion { border-top: 1px solid var(--gris-clair); }
.suggestion.actif, .suggestion:hover { background: #eaf3a0; color: #2f6b1f; }

/* ---- Console d'administration (privée) ---- */
.adm-connexion { max-width: 420px; margin: 32px auto; }
/* Les champs mot de passe / e-mail ne sont pas couverts par les règles du
   site public, qui ne visent que les champs texte. */
.adm-connexion input, .adm-compte input {
  width: 100%; padding: 11px; font-size: 1rem;
  border: 1.5px solid var(--gris-clair); border-radius: var(--rayon);
}

.adm-tuiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.adm-tuile {
  display: flex; flex-direction: column; gap: 2px; padding: 14px;
  background: var(--carte-2); border: 1px solid var(--gris-clair); border-radius: var(--rayon);
}
.adm-chiffre { font-size: 1.9rem; font-weight: 800; line-height: 1.1; color: var(--neon); }
.adm-tuile strong { font-size: .9rem; }
.adm-sous { font-size: .78rem; color: var(--gris); }

.adm-sports { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 14px 0 0; }
.adm-sports li {
  padding: 6px 12px; border-radius: 999px; font-size: .84rem; color: var(--gris);
  background: var(--carte-2); border: 1px solid var(--gris-clair);
}
.adm-sports b { color: var(--ardoise); }

.adm-recherche { display: flex; gap: 8px; margin-bottom: 12px; }
.adm-recherche input {
  flex: 1; min-width: 0; padding: 11px; font-size: 1rem;
  border: 1.5px solid var(--gris-clair); border-radius: var(--rayon);
}
.adm-recherche .btn { width: auto; }

/* Le tableau défile seul : la page ne doit jamais déborder horizontalement. */
.adm-table-wrap { overflow-x: auto; }
.adm-table { width: 100%; border-collapse: collapse; font-size: .9rem; min-width: 620px; }
.adm-table th, .adm-table td {
  text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--gris-clair); vertical-align: top;
}
.adm-table th { font-size: .76rem; text-transform: uppercase; letter-spacing: .04em; color: var(--gris); }
.adm-table tr.adm-passee { opacity: .55; }
.adm-actions { display: flex; gap: 6px; align-items: center; }
.adm-actions form { margin: 0; }
.adm-suppr { border-color: rgba(239, 68, 68, .5); color: #fca5a5; }
.adm-suppr:hover { background: var(--rouge); color: #fff; border-color: var(--rouge); }

.adm-messages { list-style: none; padding: 0; margin: 0; }
.adm-msg {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  padding: 10px 0; border-bottom: 1px solid var(--gris-clair);
}
.adm-msg:last-child { border-bottom: 0; }
.adm-msg form { margin: 0; flex: none; }

.adm-compte { display: grid; gap: 22px; }
@media (min-width: 800px) { .adm-compte { grid-template-columns: 1fr 1fr; gap: 28px; } }
.adm-compte h3 { margin: 0 0 4px; font-size: .95rem; }
.adm-compte .btn { width: auto; align-self: flex-start; }
.adm-deconnexion { margin-top: 14px; }

/* ---- Accessibilité ---- */
:focus-visible { outline: 3px solid var(--vert); outline-offset: 2px; }

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