/* =========================================================
   Section Adhérents (module absorbé dans le cockpit)
   Repris de l'appli « Adhérents Jeux Joue », sans son
   en-tête (le cockpit fournit le sien). Mêmes couleurs.
   ========================================================= */

/* Reset local des boutons du module (le cockpit n'a pas de reset global) */
#vue-adherents button, .feuille button, .entete-actions button{
  font:inherit; color:inherit; cursor:pointer; border:0; background:none; padding:0;
  -webkit-tap-highlight-color:transparent;
}
#vue-adherents input{ font:inherit; }
[hidden]{ display:none !important; }

#vue-adherents{
  max-width:640px; margin:0 auto; display:flex; flex-direction:column;
}

/* Actions à droite de l'en-tête (saison + menu) */
.entete-actions{ margin-left:auto; display:flex; align-items:center; gap:8px; }
.saison{
  font-size:.8rem; font-weight:600; color:var(--muted);
  background:var(--surface); border:1px solid var(--line);
  border-radius:999px; padding:7px 12px; white-space:nowrap;
}
.btn-icone{
  width:42px; height:42px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  color:var(--muted); font-size:1.6rem; line-height:1; flex:none;
}
.btn-icone:active{ background:var(--surface-2); }
.btn-icone svg{ width:22px; height:22px; fill:currentColor; }

/* ===== Compteurs ===== */
.compteurs{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; padding:12px 16px 10px; }
.compteur{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius-sm); padding:10px 4px 8px;
  display:flex; flex-direction:column; align-items:center; gap:2px; min-height:64px;
}
.compteur:active{ transform:scale(.97); }
.compteur-nb{ font-size:1.5rem; font-weight:800; line-height:1; }
.compteur-txt{ font-size:.68rem; color:var(--muted); text-align:center; line-height:1.15; }
.compteur--ok .compteur-nb{ color:var(--green); }
.compteur--alerte .compteur-nb{ color:var(--gold); }
.compteur--info .compteur-nb{ color:var(--blue); }
.compteur.est-actif{ border-color:var(--teal); box-shadow:0 0 0 1px var(--teal) inset; }

/* ===== Recherche ===== */
.outils{ padding:0 16px 8px; display:flex; flex-direction:column; gap:10px; }
.recherche{ position:relative; display:flex; align-items:center; background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:0 10px; }
.recherche svg{ width:20px; height:20px; fill:none; stroke:var(--muted); stroke-width:2; stroke-linecap:round; flex:none; }
.recherche input{ flex:1; min-width:0; background:none; border:0; outline:0; color:var(--text); padding:12px 8px; font-size:1rem; -webkit-appearance:none; appearance:none; }
.recherche input::-webkit-search-cancel-button{ -webkit-appearance:none; }
.recherche:focus-within{ border-color:var(--teal); }
.effacer{ width:32px; height:32px; border-radius:50%; color:var(--muted); font-size:1.4rem; line-height:1; background:var(--surface-2); }

/* ===== Liste ===== */
.liste-zone{ flex:1; padding:4px 16px 0; }
.liste{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.ligne{ display:flex; align-items:center; gap:10px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-sm); padding:8px 8px 8px 12px; }
.ligne.est-ok{ border-left:4px solid var(--green); }
.ligne.est-attente{ border-left:4px solid var(--gold); }
.ligne-nom{ flex:1; min-width:0; text-align:left; padding:6px 0; }
.ligne-nom strong{ display:block; font-size:1.05rem; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ligne-nom strong .prenom{ font-weight:500; color:var(--text); }
.ligne-nom small{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; color:var(--muted); font-size:.75rem; line-height:1.25; }
.ligne-actions{ display:flex; gap:6px; flex:none; }
.coche{ min-width:64px; height:48px; padding:0 8px; border-radius:12px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; background:var(--bg-alt); border:1px solid var(--line); color:var(--muted); font-size:.7rem; font-weight:700; letter-spacing:.02em; transition:transform .08s; }
.coche:active{ transform:scale(.93); }
.coche .ico{ font-size:1.1rem; line-height:1; }
.coche--paye.est-coche{ background:rgba(61,220,132,.16); border-color:var(--green); color:var(--green); }
.coche--fiche.est-coche{ background:rgba(59,160,224,.16); border-color:var(--blue); color:var(--blue); }

#vue-adherents .vide{ text-align:center; color:var(--muted); padding:40px 20px; line-height:1.5; }
#vue-adherents .vide strong{ display:block; color:var(--text); font-size:1.1rem; margin-bottom:6px; }

/* ===== Bouton d'ajout ===== */
.pied{ position:sticky; bottom:0; padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px)); background:linear-gradient(to top, var(--bg) 70%, rgba(14,20,32,0)); }
.btn-ajouter{ width:100%; height:56px; border-radius:16px; background:var(--teal); color:#062a27; font-weight:800; font-size:1.05rem; display:flex; align-items:center; justify-content:center; gap:8px; box-shadow:0 10px 24px rgba(46,230,214,.25); }
.btn-ajouter:active{ background:var(--teal-600); }
.btn-ajouter .plus{ font-size:1.6rem; line-height:1; font-weight:600; }

/* ===== Feuilles (dialogs : glissent du bas) ===== */
.feuille{ border:0; padding:0; margin:0; max-width:none; width:100%; background:transparent; color:var(--text); position:fixed; inset:auto 0 0 0; max-height:92vh; max-height:92dvh; }
.feuille::backdrop{ background:rgba(0,0,0,.6); }
.feuille-contenu{ background:var(--bg-alt); border-radius:22px 22px 0 0; padding:8px 18px calc(18px + env(safe-area-inset-bottom,0px)); max-width:640px; margin:0 auto; max-height:92vh; max-height:92dvh; overflow-y:auto; display:flex; flex-direction:column; gap:14px; }
.poignee{ width:40px; height:5px; border-radius:3px; background:var(--line); margin:4px auto 0; }
.feuille-entete{ display:flex; align-items:center; justify-content:space-between; }
.feuille-entete h2{ font-size:1.2rem; font-weight:800; font-family:'Oswald',sans-serif; }
.fermer{ margin-right:-10px; }

.champs-2{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.champ{ display:flex; flex-direction:column; gap:6px; }
.champ > span{ font-size:.8rem; font-weight:600; color:var(--muted); }
.champ input{ width:100%; background:var(--surface); border:1px solid var(--line); border-radius:12px; color:var(--text); padding:13px 12px; font-size:1.05rem; outline:0; -webkit-appearance:none; appearance:none; }
.champ input:focus{ border-color:var(--teal); }
.champ input.est-erreur{ border-color:var(--red); }

.segment{ display:flex; background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:4px; gap:4px; }
.segment button{ flex:1; padding:10px 6px; border-radius:9px; font-size:.9rem; font-weight:600; color:var(--muted); }
.segment button.est-actif{ background:var(--surface-2); color:var(--text); box-shadow:0 1px 4px rgba(0,0,0,.35); }

.interrupteur{ display:flex; align-items:center; gap:12px; background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:12px; }
.interrupteur input{ position:absolute; opacity:0; width:0; height:0; }
.interrupteur-piste{ flex:none; width:52px; height:32px; border-radius:16px; background:var(--line); position:relative; transition:background .15s; }
.interrupteur-bouton{ position:absolute; top:3px; left:3px; width:26px; height:26px; border-radius:50%; background:#fff; transition:transform .15s; box-shadow:0 2px 4px rgba(0,0,0,.4); }
.interrupteur input:checked + .interrupteur-piste .interrupteur-bouton{ transform:translateX(20px); }
.interrupteur--ok input:checked + .interrupteur-piste{ background:var(--green); }
.interrupteur--info input:checked + .interrupteur-piste{ background:var(--blue); }
.interrupteur-txt{ display:flex; flex-direction:column; }
.interrupteur-txt strong{ font-size:1rem; }
.interrupteur-txt small{ color:var(--muted); font-size:.78rem; }

.feuille-actions{ display:flex; gap:10px; margin-top:4px; }
.btn{ flex:1; height:52px; border-radius:14px; font-weight:800; font-size:1.02rem; display:inline-flex; align-items:center; justify-content:center; }
.btn--principal{ background:var(--teal); color:#062a27; }
.btn:disabled{ opacity:.4; cursor:default; }
.btn--principal:active{ background:var(--teal-600); }
.btn--danger{ flex:0 0 auto; padding:0 18px; background:rgba(226,69,59,.14); color:#ff8a80; border:1px solid rgba(226,69,59,.4); }

/* ===== Menu du module ===== */
.menu-liste{ display:flex; flex-direction:column; gap:8px; }
.menu-item{ display:flex; align-items:center; gap:14px; text-align:left; background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:12px 14px; }
.menu-item:active{ background:var(--surface-2); }
.menu-ico{ font-size:1.5rem; flex:none; width:32px; text-align:center; }
.menu-item strong{ display:block; font-size:1rem; }
.menu-item small{ display:block; color:var(--muted); font-size:.78rem; line-height:1.3; }
.menu-item--danger strong{ color:var(--gold); }
.menu-note{ margin:0; color:var(--muted); font-size:.78rem; text-align:center; }

.explication{ margin:0; color:var(--muted); font-size:.88rem; line-height:1.45; }
.explication strong{ color:var(--text); }
.etat{ margin:0; font-size:.85rem; color:var(--muted); min-height:1.2em; }
.etat.est-ok{ color:var(--green); }
.etat.est-erreur{ color:#ff8a80; }
.badge-site{ display:inline-block; font-size:.62rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--teal); border:1px solid var(--teal); border-radius:6px; padding:0 5px; margin-left:6px; vertical-align:middle; }

/* ===== Codes adhérents ===== */
.codes-liste{ list-style:none; margin:4px 0 0; padding:0; display:flex; flex-direction:column; gap:8px; }
.codes-vide{ color:var(--muted); text-align:center; padding:20px 10px; }
.code-item{ display:flex; align-items:center; gap:10px; background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:10px 12px; }
.code-id{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.code-id b{ font-size:.98rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.code-val{ font-family:'Oswald',sans-serif; letter-spacing:1px; color:var(--teal); font-size:1.05rem; }
.code-actions{ display:flex; gap:6px; flex:none; }
.code-wa{ display:inline-flex; align-items:center; background:#25D366; color:#062a12; font-weight:700; font-size:.82rem; padding:8px 12px; border-radius:10px; }
.code-copie{ background:var(--bg-alt); border:1px solid var(--line); color:var(--muted); font-size:.82rem; padding:8px 12px; border-radius:10px; font-weight:600; }
.code-copie:active{ background:var(--surface-2); }

@media (min-width:700px){
  .feuille{ inset:0; max-height:none; }
  .feuille[open]{ display:grid; place-items:center; }
  .feuille-contenu{ border-radius:22px; width:520px; max-height:88vh; }
  .poignee{ display:none; }
}