:root{
  --bg:#f4f5f7; --panel:#fff; --ink:#1c2530; --muted:#6b7684; --line:#e4e7ec;
  --brand:#0A70E8; --brand-dark:#0550B5; --brand-soft:#E7F1FE; --gold:#c9a227;
  --ok:#1f9d55; --ok-soft:#e6f6ec; --warn:#b8860b; --warn-soft:#fdf3d9;
  --bad:#c0392b; --bad-soft:#fdecea; --info:#2563eb; --info-soft:#e8f0fe;
  --radius:12px; --shadow:0 1px 3px rgba(20,30,45,.08),0 8px 24px rgba(20,30,45,.06);
}
*{box-sizing:border-box}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg);color:var(--ink);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{margin:0;font-weight:650;letter-spacing:-.01em}
a{color:var(--brand);text-decoration:none}
button{font-family:inherit;font-size:14px;cursor:pointer}
input,select,textarea{font-family:inherit;font-size:14px}

.btn{border:1px solid var(--line);background:#fff;color:var(--ink);padding:8px 14px;border-radius:9px;font-weight:550;
  display:inline-flex;align-items:center;gap:7px;transition:.15s;text-decoration:none}
.btn:hover{border-color:#cfd4db;background:#fafbfc}
.btn-primary{background:var(--brand);border-color:var(--brand);color:#fff}
.btn-primary:hover{background:var(--brand-dark);border-color:var(--brand-dark)}
.btn-sm{padding:5px 10px;font-size:13px;border-radius:8px}
/* Bouton WhatsApp (charte 07/10) : texte vert WhatsApp + 🟢, bordure verte claire ; toujours via wa_btn() */
.btn-wa,.wa-c{color:#128C4A}.btn-wa{border-color:#bfe3cc}.btn-wa:hover{background:#e8f6ee;border-color:#9fd3b3}
.btn-danger{color:var(--bad);border-color:#f0c7c2;margin-right:auto}
.btn-danger:hover{background:var(--bad-soft)}
/* Annuler : discret à côté d'Enregistrer — il remet les champs, il ne détruit rien,
   donc surtout pas de rouge (le rouge reste sémantique = danger). */
.btn-cancel{color:var(--muted)}
/* Cadenas des identifiants de paiement : un état, pas une alerte — donc pas de rouge. */
.keys-lock{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;
  background:#f6f7f9;border:1px solid var(--line);border-radius:11px;padding:12px 14px}
/* Paiements de test : un avertissement, pas un danger — ambre, jamais rouge. */
.test-note{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:14px 0;
  background:#fdf6e3;border:1px solid #eeda9a;border-radius:11px;padding:11px 14px;font-size:13px}
.test-note>div{flex:1;min-width:180px}
tr.is-test{background:#fffdf4}
/* Compteur de résultats des barres de filtres. Neutre : « 0 résultat » n'est pas une erreur. */
.res-count{display:inline-flex;align-items:center;gap:5px;font-size:13px;color:var(--txt);
  background:#eef2f7;border:1px solid var(--line);border-radius:20px;padding:7px 12px;white-space:nowrap}
.res-count .rc-t{color:var(--muted);font-weight:400}
.res-count.rc-none{color:var(--muted)}
/* Poignée de glisser-déposer : touch-action none, sinon le doigt fait défiler la page. */
.sort-handle{cursor:grab;touch-action:none;user-select:none;color:var(--muted);font-size:17px;
  line-height:1;padding:4px 6px;border-radius:7px}
.sort-handle:hover{background:#eef1f5;color:var(--ink)}
.sorting{position:relative;z-index:5;opacity:.92;box-shadow:0 10px 26px -8px rgba(20,30,45,.35);cursor:grabbing}
[data-sortable] > [data-id]{transition:transform .12s ease}
/* Référence de transaction : repliée en pastille, dépliée seulement au clic. */
.pr-btn{border:1px solid var(--line);background:#f4f6f8;color:var(--muted);cursor:pointer;
  border-radius:8px;padding:5px 9px;font-size:12px;line-height:1.35;margin:0}
.pr-btn:hover{border-color:var(--brand);color:var(--brand)}
.pr-btn.open{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:11px;user-select:all;
  border-color:var(--brand);color:var(--brand);background:var(--brand-soft);word-break:break-all;max-width:100%}
.form-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:4px}
.unsaved{display:none;align-items:center;font-size:12px;font-weight:700;color:#8a6d12;
  background:#f7efd4;border-radius:20px;padding:4px 11px}

/* Login */
#login{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#0A1826,#0F2A48 55%,#0A70E8 140%)}
.login-card{background:#fff;border-radius:16px;padding:36px 34px;width:360px;box-shadow:0 20px 60px rgba(0,0,0,.35)}
.login-logo{display:flex;align-items:center;gap:11px;margin-bottom:22px}
.login-logo .mark{width:40px;height:40px;border-radius:10px;background:var(--brand);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:19px}
.field{margin-bottom:14px}
.field label{display:block;font-size:12.5px;font-weight:600;color:var(--muted);margin-bottom:5px}
.field input,.field select,.field textarea{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:9px;background:#fff}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
/* 26/09, Olivier (« encore un champ qui ne ressemble pas à ce qu'on fait d'habitude » — motifs d'avertissement) :
   RÈGLE COMMUNE, plus de champ au style du navigateur. Tout champ de saisie du back-office prend le style maison,
   même posé HORS d'un .field (formulaire en ligne, ajout rapide, réglage dans une phrase). :where() = priorité
   nulle : les styles déjà écrits (.field, .sp-search, .filter, .fdd…) gardent la main, rien d'autre ne bouge. */
:where(input:not([type]), input[type=text], input[type=email], input[type=tel], input[type=number], input[type=date],
       input[type=time], input[type=url], input[type=password], select, textarea){
  padding:10px 12px;border:1px solid var(--line);border-radius:9px;background:#fff;color:var(--ink);font:inherit;font-size:14px;
  box-sizing:border-box;max-width:100%}
:where(input:not([type]), input[type=text], input[type=email], input[type=tel], input[type=number], input[type=date],
       input[type=time], input[type=url], input[type=password], select, textarea):focus{
  outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
.hint{font-size:12px;color:var(--muted);margin-top:14px;text-align:center;line-height:1.6}

/* Flash */
.flash{padding:11px 14px;border-radius:10px;margin-bottom:14px;font-size:13.5px;font-weight:500}
.flash-ok{background:var(--ok-soft);color:#177245;border:1px solid #bfe6cc}
.flash-warn{background:var(--warn-soft);color:#8a6400;border:1px solid #ecd9a0}
.flash-err{background:var(--bad-soft);color:#a5281b;border:1px solid #f0c7c2}

/* Layout */
#app{display:flex;min-height:100vh}
.sidebar{width:236px;background:#0F2A48;color:#c3d2e4;display:flex;flex-direction:column;position:sticky;top:0;height:100vh;height:100dvh}
.sb-brand{display:flex;align-items:center;gap:10px;padding:18px 18px 14px}
.sb-brand .mark{width:34px;height:34px;border-radius:9px;background:var(--brand);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800}
.sb-brand b{color:#fff;font-size:15px}
.club-switch{margin:6px 14px 12px;position:relative}
.club-switch>button{width:100%;background:#16375C;border:1px solid #24507F;color:#fff;border-radius:9px;padding:9px 11px;display:flex;align-items:center;justify-content:space-between;gap:8px}
.club-switch>button:hover{background:#1B4370}
.club-dot{width:9px;height:9px;border-radius:50%;flex:none}
.club-menu{position:absolute;top:calc(100% + 5px);left:0;right:0;background:#16375C;border:1px solid #24507F;border-radius:9px;padding:6px;z-index:30;box-shadow:0 10px 30px rgba(0,0,0,.4);max-height:min(70vh,520px);overflow-y:auto;overscroll-behavior:contain}
.club-menu #swFind{position:sticky;top:-6px;z-index:1;background:#fff}
.sw-top{display:none;align-items:center;justify-content:space-between;gap:10px;color:#fff;font-size:14px;padding:4px 2px 10px}
.sw-close{border:1px solid #24507F;background:transparent;color:#fff;border-radius:9px;min-width:40px;height:40px;font-size:16px;cursor:pointer}
.club-menu a{display:flex;align-items:center;gap:8px;color:#c3d2e4;padding:8px 9px;border-radius:7px}
.club-menu a:hover{background:#24507F;color:#fff}
.nav{padding:6px 10px;flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none}
/* Le menu défile toujours (molette, doigt), mais SANS la barre grise du navigateur — apparue
   quand l'entrée « Cours » a rendu la colonne plus haute que la fenêtre (retour Olivier 03/09). */
.nav::-webkit-scrollbar{display:none}
.nav-label{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:#6b7684;padding:14px 10px 6px}
/* Menu plié/déplié par section */
.nav-sec{margin-bottom:2px}
.nav-sec-btn{display:flex;align-items:center;justify-content:space-between;width:100%;background:none;border:none;cursor:pointer;
  font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:#7d8fa5;padding:12px 10px 8px;font-family:inherit}
.nav-sec-btn:hover{color:#b9c9dc}
.nav-sec-btn .chev{font-size:13px;opacity:.7;transition:transform .22s ease;transform:rotate(-90deg)}
.nav-sec.open .nav-sec-btn .chev{transform:rotate(0deg)}
.nav-sec-items{display:grid;grid-template-rows:0fr;transition:grid-template-rows .24s ease}
.nav-sec.open .nav-sec-items{grid-template-rows:1fr}
.nav-sec-inner{overflow:hidden;min-height:0}
/* Mini RTE (notes) */
.lrte{border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#fff}
.lrte-bar{display:flex;gap:2px;padding:5px 6px;border-bottom:1px solid var(--line);background:#f7f8fa}
.lrte-bar button{border:none;background:none;cursor:pointer;padding:4px 9px;border-radius:7px;font-size:13px;color:#3c4657;font-family:inherit}
.lrte-bar button:hover{background:#e9edf3}
.lrte-box a{color:var(--brand);text-decoration:underline}
.lrte-box{padding:10px 12px;font-size:13.5px;line-height:1.55;outline:none;max-height:300px;overflow-y:auto}
.lrte-box:empty:before{content:attr(data-ph);color:#9aa4b2}
.lrte-box p{margin:0 0 6px}
.lrte-box ul,.lrte-box ol{margin:0 0 6px 20px}
.act-body p{margin:0 0 5px}
.act-body ul,.act-body ol{margin:0 0 5px 20px}
/* Fenêtres de double validation */
.dcf-ov{position:fixed;inset:0;background:rgba(10,24,38,.55);z-index:900;display:flex;align-items:center;justify-content:center;padding:22px}
.dcf-box{background:#fff;border-radius:14px;padding:20px 18px;max-width:380px;width:100%;box-shadow:0 18px 50px rgba(0,0,0,.3)}
.dcf-msg{font-size:14.5px;line-height:1.55;margin-bottom:16px}
.dcf-btns{display:flex;gap:10px}
/* Boutons utiles seulement en mobile (tel:, sms:) */
@media(min-width:1001px){.m-only{display:none!important}}
/* Prospects : mini-menu en onglets + bouton Ajouter */
.lead-top{display:flex;align-items:center;gap:8px;margin-bottom:14px}
.lead-tabs{display:flex;gap:4px;background:#eef1f5;border-radius:11px;padding:4px;flex:1 1 auto;min-width:0}
.ltab{flex:1;text-align:center;padding:8px 6px;border-radius:8px;font-weight:700;font-size:13.5px;white-space:nowrap;color:#5b6676;min-width:0;overflow:hidden;text-overflow:ellipsis}
.ltab.on{background:#fff;color:var(--brand);box-shadow:0 1px 4px rgba(16,24,40,.1)}
.tbadge{background:#98a2b3;color:#fff;border-radius:12px;padding:0 7px;font-size:11.5px}
.tb-on{background:var(--brand)}
.lead-add{white-space:nowrap}
/* Filtres déroulants à cases (multi-choix) */
.fdd{position:relative}
.fdd summary{list-style:none;cursor:pointer;user-select:none;display:inline-flex;align-items:center;gap:5px;
  border:1px solid var(--line);background:#fff;padding:8px 12px;border-radius:9px;font-size:13.5px;font-weight:550;white-space:nowrap}
.fdd summary::-webkit-details-marker{display:none}
.fdd[open] summary{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
.fdd-n{background:var(--brand);color:#fff;border-radius:12px;padding:0 7px;font-size:11.5px;font-weight:700}
.fdd-c{opacity:.55;font-size:12px}
.fdd-menu{position:absolute;top:calc(100% + 5px);left:0;z-index:80;background:#fff;border:1px solid var(--line);
  border-radius:11px;padding:9px;box-shadow:0 12px 32px rgba(16,24,40,.16);min-width:190px;display:flex;flex-direction:column;gap:7px}
.fdd-menu label{display:flex;align-items:center;gap:8px;font-size:13.5px;cursor:pointer;white-space:nowrap}
.fdd-menu input{width:17px;height:17px;flex:none}
.fdd-menu .fdd-done{display:none}
.fdd.on summary{border-color:var(--brand);color:var(--brand)}
/* Lignes prospect : nom en évidence, badges espacés, infos aérées */
.lr-name{display:block;color:inherit;font-weight:800;font-size:14.5px;line-height:1.3}
.lr-badges{display:flex;gap:5px;flex-wrap:wrap;margin:4px 0 3px;align-items:center}
/* Tableaux larges → CARTES EMPILÉES sur mobile : plus aucun défilement horizontal.
   Chaque cellule porte data-l="Intitulé" et l'affiche au-dessus de sa valeur. */
@media(max-width:760px){
  .tbl-cards{overflow:visible}
  .tbl-cards table,.tbl-cards tbody,.tbl-cards tr,.tbl-cards td{display:block;width:auto}
  .tbl-cards thead{display:none}
  .tbl-cards tr{border:1px solid var(--line);border-radius:12px;margin:0 0 10px;padding:11px 13px;background:#fff}
  .tbl-cards tr:last-child{margin-bottom:0}
  .tbl-cards td{border:none;padding:5px 0;white-space:normal !important;text-align:left !important}
  .tbl-cards td:first-child{padding-top:0}
  .tbl-cards td:last-child{padding-bottom:0}
  /* libellé à gauche, valeur à droite : deux fois moins haut qu'en empilé */
  .tbl-cards td[data-l]{display:flex;gap:14px;align-items:baseline;justify-content:space-between}
  .tbl-cards td[data-l]::before{content:attr(data-l);flex:0 0 auto;font-size:11px;font-weight:700;
    color:var(--muted);white-space:nowrap}
  .tbl-cards td[data-l]>*{min-width:0}
  .tbl-cards td[data-l]{text-align:right !important;overflow-wrap:anywhere}
  /* contenus longs ou multi-lignes : on repasse en empilé */
  .tbl-cards td.tc-block{display:block;text-align:left !important}
  .tbl-cards td.tc-block::before{display:block;margin-bottom:3px;text-transform:uppercase;letter-spacing:.05em;font-size:10px;opacity:.7}
  .tbl-cards td.tc-actions{display:flex;gap:8px;flex-wrap:wrap;padding-top:10px;margin-top:8px;border-top:1px solid var(--line)}
  .tbl-cards td.tc-actions .btn{margin:0}
  /* pas de séparateur orphelin quand la ligne n'a aucune action */
  .tbl-cards td.tc-actions:not(:has(a,button)){display:none}
  .tbl-cards .empty{padding:18px}
  .tbl-cards tr:has(.empty){border:none;padding:0}
  /* colonne dédoublée uniquement pour le tri sur ordinateur (prénom séparé) */
  .tbl-cards td.tc-hide-m{display:none}
  /* une cellule vide n'a rien à dire : pas de libellé orphelin dans la carte */
  .tbl-cards td:empty{display:none}
}
/* Bandeau du mode test : doit rester visible en permanence, on ne doit jamais l'oublier */
.test-bar{position:sticky;top:0;z-index:1200;display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  background:#2b2545;color:#fff;padding:9px 16px;font-size:13px;line-height:1.45;
  box-shadow:0 2px 10px rgba(16,24,40,.25)}
.test-bar b{color:#ffd88a}
.test-bar a{margin-left:auto;background:#fff;color:#2b2545;font-weight:700;text-decoration:none;
  border-radius:8px;padding:5px 12px;white-space:nowrap}
.test-bar a:hover{background:#ffd88a}
@media(max-width:760px){.test-bar{padding:8px 12px;font-size:12.5px}.test-bar a{margin-left:0;width:100%;text-align:center}}
/* En-têtes de colonnes triables */
.th-sort{display:inline-flex;align-items:center;gap:5px;color:inherit;text-decoration:none;white-space:nowrap}
.th-sort:hover{color:var(--brand)}
.th-sort.on{color:var(--brand)}
.th-ar{font-size:10px;opacity:.35}
.th-sort.on .th-ar{opacity:1}
/* Sélecteur : organisations et associations groupées séparément */
.sw-head{font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;opacity:.55;padding:7px 4px 3px}
.sw-cur{display:flex;flex-direction:column;min-width:0;text-align:left;line-height:1.25}.sw-cur-n{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sw-cur-k{font-size:11px;font-weight:600;opacity:.65}
.sw-kind{font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;opacity:.6;border:1px solid currentColor;border-radius:9px;padding:0 5px;flex:none}
/* Lieu pressenti : l'info de suivi la plus utile au quotidien → mise en avant sur la ligne de badges */
.lr-site{display:inline-flex;align-items:center;gap:4px;background:var(--brand-soft);color:var(--brand-dark);border:1px solid #C6DDF9;border-radius:20px;padding:2px 10px;font-size:12px;font-weight:700;white-space:nowrap}
/* Public pressenti : utile au tri, mais moins central que le lieu → puce sobre */
.lr-aud{display:inline-flex;align-items:center;gap:4px;background:#eef1f4;color:#4a5563;border-radius:20px;padding:2px 9px;font-size:11.5px;font-weight:700;white-space:nowrap}
/* Asso : information secondaire (le lieu prime) → puce discrète */
.lr-club{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;color:var(--muted);white-space:nowrap}
.lr-club i{width:8px;height:8px;border-radius:50%;flex:none;display:block}
.lr-info{font-size:12px;color:var(--muted);line-height:1.55}
.lr-act{text-align:right;white-space:nowrap;vertical-align:middle}
@media(max-width:760px){
  .lead-top{flex-direction:column;align-items:stretch}
  .lead-add{width:100%;justify-content:center}
  .ltab{font-size:12px;padding:7px 3px}
  .tbadge{padding:0 5px;font-size:10.5px}
  .d-only{display:none}
  .lr-act{white-space:normal;width:86px}
  .lr-act .btn{display:flex;width:100%;justify-content:center;margin:0 0 6px!important}
  .lr-act .btn:last-child{margin-bottom:0!important}
}
.navlink{display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:8px;color:#c3d2e4;font-weight:520;margin-bottom:2px}
.navlink .ic{width:18px;text-align:center;opacity:.85}
.navlink:hover{background:#17395F;color:#fff}
.navlink.active{background:var(--brand);color:#fff}
.navlink.disabled{color:#5e779a;cursor:default}
.navlink.disabled:hover{background:transparent}
.soon{margin-left:auto;font-size:10px;background:#2c3743;color:#8a94a0;padding:2px 6px;border-radius:5px;text-transform:uppercase;letter-spacing:.04em}
.sb-foot{flex:none;padding:12px 16px;border-top:1px solid #1B4370;font-size:12px;color:#8fa5c0;line-height:1.7}
.sb-foot a{color:#b9cadf;text-decoration:underline}

.menu-btn{display:none;background:#fff;border:1px solid var(--line);border-radius:9px;width:40px;height:40px;font-size:18px;align-items:center;justify-content:center;flex:none}
.backdrop{position:fixed;inset:0;background:rgba(20,27,36,.45);z-index:38;display:none}

.main{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{background:var(--panel);border-bottom:1px solid var(--line);padding:14px 26px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:20}
.crumb{font-size:13px;color:var(--muted)}
.topbar h2{font-size:19px;margin-top:1px}
.season-pill{background:var(--brand-soft);color:var(--brand-dark);border:1px solid #C6DDF9;padding:6px 12px;border-radius:20px;font-weight:600;font-size:12.5px;display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.content{padding:24px 26px;max-width:1160px;width:100%}

.grid{display:grid;gap:16px}
.stats{grid-template-columns:repeat(4,1fr)}
/* nombre de colonnes en classe (pas en style inline) : sinon les media queries mobiles ne peuvent pas reprendre la main */
.stats.s2{grid-template-columns:repeat(2,1fr)}
.stats.s3{grid-template-columns:repeat(3,1fr)}
.stats.s4{grid-template-columns:repeat(4,1fr)}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.card-pad{padding:18px}
.stat .k{font-size:12.5px;color:var(--muted);font-weight:560;display:flex;align-items:center;gap:7px}
.stat .v{font-size:27px;font-weight:720;margin-top:7px;letter-spacing:-.02em}
.stat .d{font-size:12px;color:var(--muted);margin-top:3px}
.stat .ic{width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:15px}

.section-head{display:flex;align-items:center;justify-content:space-between;margin:26px 0 13px}
.section-head h3{font-size:16px}
.section-head .sub{font-size:12.5px;color:var(--muted);margin-top:2px}

.tbl-wrap{overflow:auto;border-radius:var(--radius)}
table{width:100%;border-collapse:collapse;background:var(--panel)}
thead th{text-align:left;font-size:11.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);font-weight:650;padding:11px 14px;border-bottom:1px solid var(--line);white-space:nowrap;background:#fbfcfd}
tbody td{padding:11px 14px;border-bottom:1px solid #eef1f4;vertical-align:middle}
tbody tr:hover{background:#fafbfc}
tbody tr:last-child td{border-bottom:none}
.who{display:flex;align-items:center;gap:10px}
.avatar{width:32px;height:32px;border-radius:50%;background:#e9edf2;color:#4a5563;display:flex;align-items:center;justify-content:center;font-weight:650;font-size:12.5px;flex:none}
.who .nm{font-weight:600}
.who .sub{font-size:12px;color:var(--muted)}

.badge{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:20px;font-size:12px;font-weight:600}
.badge .bd{width:6px;height:6px;border-radius:50%}
.b-ok{background:var(--ok-soft);color:#177245}.b-warn{background:var(--warn-soft);color:#8a6400}
.b-bad{background:var(--bad-soft);color:#a5281b}.b-info{background:var(--info-soft);color:#1b4fc4}
.b-mut{background:#eef1f4;color:#5b6672}.b-brand{background:var(--brand-soft);color:var(--brand-dark)}.b-gold{background:#f7efd4;color:#8a6d12}

.toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:14px}
.search{flex:1;min-width:200px;position:relative}
.search input{width:100%;padding:9px 12px 9px 34px;border:1px solid var(--line);border-radius:9px;background:#fff}
.search .si{position:absolute;left:11px;top:9px;color:var(--muted)}
.filter{padding:9px 12px;border:1px solid var(--line);border-radius:9px;background:#fff;color:var(--ink)}

.overlay{position:fixed;inset:0;background:rgba(20,27,36,.5);align-items:flex-start;justify-content:center;padding:40px 16px;z-index:50;overflow:auto}
.modal{background:#fff;border-radius:14px;width:100%;max-width:560px;box-shadow:0 30px 80px rgba(0,0,0,.3);margin:auto}
.modal-head{padding:18px 22px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between}
.modal-head h3{font-size:17px}
.modal-body{padding:22px}
.modal-foot{padding:15px 22px;border-top:1px solid var(--line);display:flex;justify-content:flex-end;gap:10px;background:#fbfcfd;border-radius:0 0 14px 14px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.row3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px}
.x{background:none;border:none;font-size:22px;color:var(--muted);line-height:1;cursor:pointer}

.empty{text-align:center;padding:46px 20px;color:var(--muted)}
.empty .big{font-size:34px;margin-bottom:10px}
.bar{height:8px;border-radius:6px;background:#eef1f4;overflow:hidden;margin-top:8px}
.bar>i{display:block;height:100%;background:var(--brand)}
.split{display:grid;grid-template-columns:1.6fr 1fr;gap:16px}
.list-line{display:flex;align-items:center;justify-content:space-between;padding:10px 0;border-bottom:1px solid #eef1f4}
.list-line:last-child{border-bottom:none}
.opt-check{display:flex;gap:11px;align-items:center;padding:12px;border:1px solid var(--line);border-radius:10px;cursor:pointer}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:9px;overflow:hidden}
.seg button{border:none;background:#fff;padding:9px 14px;color:var(--muted);font-weight:560;cursor:pointer;transition:.12s}
.seg button:hover{background:#f2f4f6}
.seg button.on{background:var(--brand);color:#fff}
.note{background:var(--info-soft);border:1px solid #cddafd;color:#1b3a8a;padding:11px 14px;border-radius:10px;font-size:13px;display:flex;gap:10px;align-items:flex-start}
.tag-mini{font-size:11px;background:#eef1f4;color:#5b6672;padding:2px 7px;border-radius:6px;font-weight:600}

@media(max-width:1000px){
  .menu-btn{display:inline-flex}
  /* 1.161.0 : le choix d'association / organisation remplit le tiroir et défile (50 ou 100 entrées) */
  .club-menu{position:fixed;inset:0;max-height:none;border-radius:0;border:0;z-index:50;padding:10px 12px calc(16px + env(safe-area-inset-bottom));-webkit-overflow-scrolling:touch;background:#0F2A48}
  .club-menu .sw-top{display:flex}
  .club-menu #swFind{top:-10px}
  .sidebar{position:fixed;left:0;top:0;height:100vh;height:100dvh;z-index:40;transform:translateX(-100%);transition:transform .22s ease;box-shadow:0 0 40px rgba(0,0,0,.35)}
  .sidebar.open{transform:none}
  .backdrop.show{display:block}
  .content{padding:18px 16px}.topbar{padding:12px 16px}
}
/* 23/09 : quelques écrans surchargent .split/.row2 en style EN LIGNE (stats, nouveautés) —
   l'inline bat la feuille de style, la grille restait donc à deux colonnes sur téléphone et
   la carte débordait sous 380 px. !important remet la règle mobile au-dessus. */
@media(max-width:760px){.stats,.stats.s2,.stats.s3,.stats.s4{grid-template-columns:repeat(2,1fr)}.split{grid-template-columns:1fr !important}.row2,.row3{grid-template-columns:1fr !important}.topbar h2{font-size:17px}}
@media(max-width:460px){.stats,.stats.s2,.stats.s3,.stats.s4{grid-template-columns:1fr;gap:10px}
/* en pleine largeur les chiffres n'ont plus besoin d'autant de place : on compacte pour ne pas manger l'écran */
.stat.card-pad{padding:12px 14px}.stat .v{font-size:22px;margin-top:2px}.stat .d{margin-top:1px}}

/* ═══════════ ÉCRANS TACTILES ═══════════
   Un doigt n'est pas une souris. La zone touchée par un pouce fait ~9 mm et le point que le
   téléphone retient est le CENTRE de cette empreinte — plus bas que l'endroit visé, parce
   qu'on pointe avec le bout du doigt. Sur une cible de 28 px, ce décalage suffit à rater :
   il faut viser au-dessus du bouton pour l'atteindre. D'où la règle des 44 px, appliquée ici
   à TOUT ce qui se touche. Rien ne change à la souris (pointer:fine). */
@media (pointer: coarse) {
  .btn{min-height:44px;padding-top:10px;padding-bottom:10px}
  .btn-sm{min-height:40px;padding:9px 13px;font-size:13.5px}
  input,select,textarea{min-height:44px}
  input[type=checkbox],input[type=radio]{min-height:0;width:22px;height:22px}
  /* Une ligne de tableau se touche entière : on lui donne de la hauteur plutôt que d'agrandir le texte. */
  tbody td{padding-top:13px;padding-bottom:13px}
  summary{min-height:44px;display:flex;align-items:center}
  .ltab{padding:12px 8px}
  .nav a{padding-top:11px;padding-bottom:11px}
  /* Le menu est ce qu'on touche le plus souvent sur un téléphone : ses en-têtes de section
     et le sélecteur d'association méritent la même règle que le reste. */
  .nav-sec-btn{min-height:44px}
  .club-switch>button{min-height:46px}
  .sw-item,.sw-list a,.sw-list button{min-height:44px}
}
/* Pas de zoom au double-tap : un double-tap involontaire laissait la page agrandie, et tous
   les appuis suivants tombaient à côté. Le zoom par pincement, lui, reste disponible. */
html{touch-action:manipulation}

/* Menu mobile ouvert : on ne verrouille PLUS le défilement par overflow:hidden sur <body>.
   Poser puis retirer ce verrou pendant que la page est défilée désynchronise, sur Android,
   la position réelle et la position que le navigateur croit avoir — les appuis tombent alors
   à côté jusqu'au rechargement. Le voile suffit à bloquer le geste. */
.backdrop.show{touch-action:none}

/* ---- Interrupteurs & cartes de modules (20/09 — présentation harmonisée des fiches
   association et organisation : même langage visuel, mécaniques distinctes) ---- */
.swtch{position:relative;width:40px;height:22px;flex:none;display:inline-block}
.swtch input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer;z-index:2}
.swtch .tr{position:absolute;inset:0;background:#cdd5dd;border-radius:99px;transition:background .15s}
.swtch .tr::after{content:'';position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#fff;transition:left .15s;box-shadow:0 1px 3px rgba(0,0,0,.25)}
.swtch input:checked + .tr{background:#1f9d55}
.swtch input:checked + .tr::after{left:20px}
.mod-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(max-width:700px){.mod-grid{grid-template-columns:1fr}}
.mod-card{display:flex;gap:11px;align-items:flex-start;border:1px solid var(--line);border-radius:11px;padding:11px 12px;cursor:pointer;background:#fff;transition:border-color .15s}
.mod-card:hover{border-color:#b8c4cf}
.mod-card b{font-size:13.5px}
.mod-card .hint{font-size:12px;color:var(--muted);margin-top:2px;line-height:1.45}
.rights-table td, .rights-table th{padding:10px 8px}
.rights-table tbody tr:nth-child(odd){background:#fafbfc}
.rights-table input[type=radio]{accent-color:#036eaa}

/* zone de dépôt de fichier (21/09) — enveloppe automatique des input[type=file] visibles */
.dropzone{position:relative;display:flex;align-items:center;gap:8px;border:1.5px dashed var(--line);border-radius:10px;padding:10px 14px;background:#f8fafc;font-size:12.5px;color:var(--muted);min-width:220px;transition:border-color .15s, background .15s}
.dropzone.drag{border-color:var(--brand);background:var(--info-soft, #eef5fc);color:var(--brand)}
.dropzone.has-file{border-style:solid;border-color:#9fc79f;background:var(--ok-soft, #eef7ee)}
.dropzone .dz-ic{font-size:15px}
.dropzone .dz-file{font-weight:700;color:#177245}
/* bouton désactivé (assistant Communication, 22/09) : doit SE VOIR inactif */
.btn:disabled,.btn[disabled]{opacity:.45;cursor:not-allowed;filter:grayscale(.3)}
/* lecture d'abord (voir app.js) */
.ro:not(.editing) .ro-e{display:none !important}
.ro.editing .ro-v{display:none !important}
.ro-v .ro-row{display:flex;gap:10px;padding:6px 0;border-top:1px solid var(--line);font-size:13px}
.ro-v .ro-row:first-child{border-top:0}
.ro-v .ro-row>span:first-child{width:190px;flex:none;color:var(--muted)}
.ro-v .ro-empty{color:#a06000}
.ro-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:6px}
.ro.editing .ro-head [data-ro]:not([data-ro=cancel]){display:none}
/* fiches Plateforme (associations, organisations) en pleine largeur — 22/09 */
.fiche-grid{display:flex;flex-direction:column;gap:16px}
/* 22/09, Olivier : « dix comptes gestionnaires et la colonne du milieu devient énorme, les autres
   toutes petites » — règle : UNE SECTION = UNE BANDE pleine largeur ; une liste qui grandit
   s'allonge vers le bas sans déséquilibrer ses voisines. Lignes en colonnes alignées. */
.fiche-grid .list-line{display:grid;grid-template-columns:minmax(180px,1.2fr) 2fr auto;gap:12px;align-items:center}
.fiche-grid .list-line>a.btn:last-child,.fiche-grid .list-line>form:last-child,.fiche-grid .list-line>button:last-child{grid-column:3;justify-self:end}
.fg-count{font-weight:700;color:var(--muted);font-size:13px;margin-left:6px}
.fg-title{font-weight:800;font-size:14.5px;margin-bottom:10px}
.mod-chips{display:flex;flex-wrap:wrap;gap:8px}
.mod-chip{border:1px solid var(--line);border-radius:20px;padding:6px 12px;font-size:13px;color:var(--muted);background:#f6f7f9}
.mod-chip.on{background:var(--ok-soft);color:#177245;border-color:#bfe3cc;font-weight:700}
.mod-grid-wide{grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.ro-head [data-ro]{white-space:nowrap;flex:none}
.ro.editing [data-ro]:not([data-ro=cancel]){display:none !important}
/* fiche adhérent pleine page : la « modale » devient la page (22/09) */
.overlay.fiche-page{position:static;background:none;padding:0;z-index:auto;overflow:visible;display:block !important}
.overlay.fiche-page .modal{max-width:none !important;box-shadow:0 1px 3px rgba(16,24,40,.06);border:1px solid var(--line);margin:0}
.overlay.fiche-page .modal-head .x{display:none}
.overlay.fiche-page .modal-head h3{visibility:hidden}
/* ligne cliquable (voir app.js) */
.row-link{cursor:pointer}
tbody tr.row-link:hover td,.list-line.row-link:hover{background:#f3f7fc}
.overlay.fiche-page .modal-head{display:none}

/* ═══════════ FICHES « LECTURE D'ABORD » SUR MOBILE ═══════════
   23/09, Olivier : « dans Réglages du club, qui reçoit les emails du club, mon email n'est
   pas aligné en face de Destinataires, ça déborde de l'écran ». Cause : la colonne de
   libellé fait 190 px fixes et une adresse email ne se coupe pas — sur un écran de 390 px
   il ne reste rien pour la valeur, qui sort de la carte.
   Règle appliquée à TOUTES les fiches en lecture (26 écrans) : une valeur longue peut
   toujours se couper, et sous 760 px le libellé passe AU-DESSUS de sa valeur — on empile,
   jamais une colonne étroite à côté d'une colonne large. */
.ro-row>*{min-width:0;overflow-wrap:anywhere}
@media(max-width:760px){
  .ro-v .ro-row,.ro-row{flex-direction:column;gap:3px;padding:9px 0}
  .ro-v .ro-row>span:first-child,.ro-row>span:first-child{width:auto;font-size:12px;font-weight:600}
  .ro-head{flex-direction:column;align-items:stretch}
  .ro-head [data-ro]{width:100%;justify-content:center;margin-top:4px}
  /* fiches Plateforme : la ligne à trois colonnes s'empile aussi */
  .fiche-grid .list-line{grid-template-columns:1fr;gap:6px}
  .fiche-grid .list-line>a.btn:last-child,.fiche-grid .list-line>form:last-child,
  .fiche-grid .list-line>button:last-child{grid-column:1;justify-self:stretch}
  .fiche-grid .list-line>form:last-child .btn{width:100%;justify-content:center}
}
/* Ceintures d'un système de grades : une ligne = une ceinture, ses quatre boutons au bout.
   Sur téléphone la ligne ne tient pas : elle passe à la ligne au lieu de sortir de l'écran. */
.gd-row{display:flex;align-items:center;gap:8px;padding:7px 0;border-bottom:1px solid var(--line);flex-wrap:wrap}
.gd-name{flex:1;min-width:110px;font-size:14px}
@media(max-width:760px){.gd-row{padding:10px 0}.gd-row .btn{margin:0}}
/* Menu déroulant d'un filtre : il s'ouvre sous son bouton et doit rester DANS l'écran. */
@media(max-width:760px){.fdd-menu{left:auto;right:0;max-width:calc(100vw - 32px)}
  .fdd-menu label{white-space:normal}}
/* Un menu déroulant prend la largeur de sa plus longue ligne (« Zone A (Besançon, Bordeaux…) ») :
   sur téléphone il sortait de l'écran. Il ne dépasse plus jamais la largeur disponible. */
select,.filter{max-width:100%;min-width:0}
/* (min-width:0 est indispensable : dans une rangée souple, un élément refuse par défaut de
   devenir plus étroit que son contenu — max-width seul ne suffisait pas.)*/

/* ═══════════ MENUS DÉROULANTS SUR TÉLÉPHONE ═══════════
   23/09, Olivier : « je clique sur un export, la fenêtre déborde de l'écran ». Ces panneaux
   sont posés en absolu, calés sur le BORD DROIT de leur bouton (right:0) : dès que le bouton
   se retrouve à gauche — ce qui arrive dès que la barre d'outils passe à la ligne sur un
   téléphone — le panneau, large de 250 px, sort par la GAUCHE de l'écran. Un panneau ancré
   sur un bouton ne peut pas tenir dans 390 px de façon fiable.
   Règle : sous 760 px, un menu déroulant devient une FEUILLE EN BAS D'ÉCRAN, toujours dans
   l'écran quelle que soit la position du bouton, et facile à atteindre au pouce. */
@media(max-width:760px){
  .export-menu[open] > div, .fdd[open] .fdd-menu{
    position:fixed !important; left:10px !important; right:10px !important; top:auto !important;
    bottom:10px !important; width:auto !important; min-width:0 !important; max-width:none !important;
    max-height:70vh; overflow:auto; z-index:200 !important; border-radius:16px; background:#fff !important;
    box-shadow:0 -10px 40px -8px rgba(16,24,40,.35);
  }
  /* voile : on comprend qu'un menu est ouvert, et on le referme en touchant à côté */
  .export-menu[open]::before, .fdd[open]::before{
    content:""; position:fixed; inset:0; background:rgba(20,27,36,.35); z-index:150;
  }
  .fdd[open] .fdd-menu label{padding:10px 4px}
  .fdd-menu .fdd-done{display:block;width:100%;margin:6px 0 0;position:sticky;bottom:0}
}
/* Très petits téléphones (320 px, iPhone SE de 1re génération) : les groupes de filtres et les
   menus déroulants ne peuvent plus forcer une largeur — sinon la page défile latéralement. */
@media(max-width:380px){
  .fdd-menu label{white-space:normal}
  .toolbar select,.toolbar input,.filter{max-width:100%}
}

/* ═══════════ PLEINE LARGEUR SUR TÉLÉPHONE ═══════════
   24/09, Olivier : « on n'exploite pas toute la largeur du mobile — une fiche avec des bordures
   et des espaces à droite et à gauche, ça supprime encore de la place ». Mesuré : sur 390 px,
   16 px de marge de page + 18 px de rembourrage de carte de chaque côté = **68 px perdus**,
   soit 17 % de l'écran, avant même d'écrire le premier mot.
   Deux régimes, décidés avec lui :
     — les ÉCRANS DE RÉGLAGES gardent leurs cartes, resserrées (page 10, carte 13) : la carte y
       sert vraiment à séparer des sujets ;
     — les LISTES (tableaux en cartes) passent BORD À BORD : la liste touche les deux bords,
       ses lignes sont séparées par un filet au lieu d'être des cartes dans une carte.
   Rien de tout cela au-dessus de 760 px : l'ordinateur ne change pas. */
@media(max-width:760px){
  .content{padding-left:10px;padding-right:10px}
  .card-pad{padding:13px}
  /* une carte DANS une carte paie deux fois le rembourrage : à l'intérieur, ce n'est plus une
     carte mais un bloc séparé par un filet */
  .card .card{box-shadow:none;border:0;border-top:1px solid var(--line);border-radius:0;
    padding-left:0;padding-right:0;margin-left:0;margin-right:0}
  /* LISTES BORD À BORD */
  .card.tbl-cards,.card.tbl-wrap{margin-left:-10px;margin-right:-10px;border-left:0;border-right:0;
    border-radius:0;box-shadow:none}
  /* la règle « tableau en cartes » passe le tableau en width:auto : il ne remplissait donc pas
     la largeur rendue disponible par le bord à bord. */
  .tbl-cards table,.tbl-cards tbody,.tbl-cards tr{width:100%}
  .tbl-cards table,.tbl-cards tbody{padding:0}
  .tbl-cards tr{border-left:0;border-right:0;border-top:0;border-radius:0;margin:0;
    padding:12px 14px;border-bottom:1px solid var(--line)}
  .tbl-cards tr:last-child{border-bottom:0}
  /* la barre d'outils et les filtres suivent la même marge que le contenu */
  .toolbar{padding-left:0;padding-right:0}
}

/* ─────────────────────────────────────────────────────────────────────────────
   LE CHAMP DE RECHERCHE — UN SEUL STYLE POUR TOUT L'OUTIL (24/09).
   Olivier : « le style du champ ne respecte pas les remarques que je t'ai déjà faites :
   il doit être un peu plus gros, un peu plus lisible ». Les champs de recherche étaient
   écrits écran par écran, chacun avec ses tailles en dur. Désormais UNE classe :
   .sp-search (la barre) + .search (l'ancien patron, réaligné sur la même taille).
   Plus gros : 48 px de haut, texte à 15,5 px, loupe dessinée dans le champ.
   ───────────────────────────────────────────────────────────────────────────── */
.sp-search{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:0 0 12px}
.sp-pager{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:10px 0 0}
.sp-pager select{width:auto;min-width:70px;margin:0;height:34px;padding:0 8px}
.sp-pager .pg-btns{display:flex;gap:4px;flex-wrap:wrap;margin-left:auto}
.sp-pager .pg-btns .btn{min-width:34px;margin:0}
.sp-search input,.search input,input.sp-q{
  flex:1;min-width:230px;max-width:460px;width:100%;
  font-size:15.5px;line-height:1.3;min-height:48px;padding:12px 14px 12px 42px;
  border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--ink);
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237a8496' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.6-3.6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:14px center;background-size:18px}
.sp-search input::placeholder,.search input::placeholder,input.sp-q::placeholder{color:#8a93a3}
.sp-search input:focus,.search input:focus,input.sp-q:focus{
  outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
.sp-search input::-webkit-search-cancel-button{cursor:pointer}
/* l'ancienne loupe posée en absolu n'a plus lieu d'être : elle est dans le champ */
.search .si{display:none}
.search{flex:1;min-width:230px;position:relative}
@media(max-width:760px){
  .sp-search{margin-bottom:10px}
  .sp-search input,.search input,input.sp-q{max-width:none;min-width:0}
  .toolbar input.sp-q{flex:1 1 100%;width:100%}   /* 05/10 : le champ ne se tasse plus à côté d'une liste (« Re… ») */
}

/* 24/09 : toute zone qui porte un lien « Voir » est cliquable en entier (règle commune, app.js).
   Au survol, la zone le montre — sinon on ne devine pas qu'elle se clique. */
.row-link:not(tr):not(.list-line){transition:background .12s, box-shadow .12s}
.row-link:not(tr):not(.list-line):hover{background:#f3f7fc;box-shadow:inset 0 0 0 1px #d6e3f3}
.card.row-link:hover{box-shadow:0 0 0 1.5px #bcd3ee}

/* barre de retour : ← à gauche, actions de la page à droite — la même partout (24/09) */
.back-bar{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;margin-bottom:16px}
.back-bar .bb-act{display:flex;gap:8px;flex-wrap:wrap;margin-left:auto}
.back-bar .btn{margin:0}

/* 24/09 — « lecture d'abord » pour les LISTES qu'on complète (bureau, fédérations…) : la liste
   reste visible, mais les boutons ✕ et le formulaire d'ajout n'apparaissent qu'après ✎ Modifier.
   .ro-eo = élément réservé au mode modification, posé DANS une liste toujours visible. */
.ro:not(.editing) .ro-eo{display:none !important}
.ro.editing .ro-hide-edit{display:none !important}

/* 24/09 — carte de CRÉATION repliée (« + Nouveau type », « + Nouveau programme »…) : on ne voit
   que son titre, qui se clique pour ouvrir le formulaire. Aucun champ à nu en arrivant. */
.add-fold>h3{cursor:pointer;display:flex;align-items:center;gap:8px;margin-bottom:0 !important;user-select:none}
.add-fold>h3::after{content:"⌄";margin-left:auto;font-size:13px;color:var(--muted);border:1px solid var(--line);
  border-radius:8px;padding:2px 9px;font-weight:700}
.add-fold.open>h3{margin-bottom:10px !important}
.add-fold.open>h3::after{content:"Fermer"}
.add-fold:not(.open)>:not(h3){display:none !important}

/* ═══════════ CARTE-LISTE (composant commun, 26/09) ═══════════
   Olivier : « quatre cours = quatre blocs, il devrait y avoir UN bloc » — et « respecter une charte globale,
   pas partir dans tous les sens ». Une série d'éléments du même genre (cours, lieux, comptes…) = UNE carte
   `.lc` : en-tête `.lc-head` (titre + compteur `.lc-n` + action principale), une bande `.lc-row` par élément
   (liseré de couleur optionnel via --lc). Réservé aux listes : un réglage reste une carte à lui seul. */
.lc{padding:0;overflow:hidden}
.lc-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:14px 18px;border-bottom:1px solid var(--line);background:#f7f9fc}
.lc-head h3{margin:0;font-size:15.5px;display:flex;align-items:center;gap:8px}
.lc-n{font-size:12px;font-weight:800;background:var(--brand-soft);color:var(--brand-dark);border-radius:99px;padding:2px 9px}
.lc-row{padding:14px 18px;border-bottom:1px solid var(--line);box-shadow:inset 4px 0 0 var(--lc, transparent)}
.lc-row:last-child{border-bottom:0}
@media(max-width:760px){.lc-head,.lc-row{padding:12px 14px}}
/* Variante REPLIABLE (details.lc, 26/09 : « le bloc des cours, replié par défaut ») et éléments en TUILES
   (.lc-body > .lc-item) quand chaque élément a du contenu propre (créneaux, coachs…) : une tuile par élément,
   séparées par un espace — plus de longs traits qui se confondent. .lc-sub = sous-partie repliable d'une tuile. */
details.lc > summary.lc-head{cursor:pointer;list-style:none}
details.lc > summary.lc-head::-webkit-details-marker{display:none}
details.lc > summary.lc-head h3::before{content:"▸";font-size:13px;color:var(--muted);margin-right:2px}
details.lc[open] > summary.lc-head h3::before{content:"▾"}
details.lc:not([open]) > summary.lc-head{border-bottom:0}
.lc-peek{flex:1;min-width:0;font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
details.lc[open] .lc-peek{visibility:hidden}
.lc-body{display:grid;gap:12px;padding:14px 16px 16px;background:#f6f8fb}
.lc-item{background:#fff;border:1px solid var(--line);border-left:5px solid var(--lc, var(--brand));border-radius:12px;padding:14px 16px;
  box-shadow:0 1px 3px rgba(22,32,43,.05)}
.lc-sub{margin-top:12px}
.lc-sub > summary{display:inline-flex;align-items:center;gap:6px;cursor:pointer;list-style:none;font-weight:700;font-size:13px;
  background:#f1f4f8;border-radius:99px;padding:6px 12px}
.lc-sub > summary::-webkit-details-marker{display:none}
.lc-sub > summary::before{content:"▸";color:var(--muted)} .lc-sub[open] > summary::before{content:"▾"}
.lc-sub[open] > summary{background:var(--brand-soft);color:var(--brand-dark)}
@media(max-width:760px){.lc-body{padding:12px 10px 12px}.lc-item{padding:12px}.lc-peek{display:none}}

/* ═══════════ BARRE D'ACTIONS COLLÉE (26/09) ═══════════
   Olivier : « avec beaucoup de destinataires, énorme scroll pour atteindre le bouton de l'étape suivante ». Toute
   liste longue suivie de son bouton d'action (assistant d'envoi, formulaires longs) : `.sticky-actions` garde la
   barre visible en bas de l'écran pendant le défilement, et reprend sa place normale en fin de liste. */
.sticky-actions{position:sticky;bottom:0;z-index:30;display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;
  margin:12px -4px 0;padding:12px 4px;background:#fff;border-top:1px solid var(--line);box-shadow:0 -10px 18px -14px rgba(20,30,45,.35)}
.sticky-actions .sa-back{display:flex;gap:8px;flex-wrap:wrap}.sticky-actions .sa-short{display:none}
@media(max-width:760px){.sticky-actions{padding:10px 4px calc(10px + env(safe-area-inset-bottom));flex-wrap:nowrap}.sticky-actions .btn{margin:0;flex-shrink:0}.sticky-actions .sa-hint{display:none}
  /* plusieurs retours + une action (étape 3) : les retours sur une ligne, l'action pleine largeur dessous */
  .sticky-actions.sa-stack{flex-wrap:wrap;gap:8px}.sa-stack .sa-back{flex:1 1 100%}.sa-stack .sa-back .btn{flex:1 1 0;padding-left:8px;padding-right:8px}
  .sa-stack>.btn-primary{flex:1 1 100%}.sa-stack .btn{justify-content:center;text-align:center}.sticky-actions .sa-long{display:none}.sticky-actions .sa-short{display:inline}}

/* ═══════════ VIGNETTE PHOTO D'UN ÉLÉMENT (27/09) ═══════════
   Olivier : « pas de champ pour la photo d'un produit de la boutique ». Vignette carrée dans une liste (.pthumb,
   initiale sur fond doux quand il n'y a pas de photo) ; photo actuelle au-dessus d'un champ fichier (.ph-cur). */
.pthumb-row{display:flex;align-items:center;gap:12px;min-width:0}
.pthumb{width:48px;height:48px;border-radius:10px;object-fit:cover;flex:none;background:var(--bg);border:1px solid var(--line)}
.pthumb-none{display:flex;align-items:center;justify-content:center;font-weight:800;font-size:18px;color:var(--brand);background:var(--brand-soft);border-color:transparent}
.ph-cur{display:flex;align-items:center;gap:14px;margin-bottom:8px;flex-wrap:wrap}
.ph-cur img{width:96px;height:96px;border-radius:12px;object-fit:cover;border:1px solid var(--line);background:var(--bg)}
.ph-cur .ck{display:flex;align-items:center;gap:8px;font-weight:600;font-size:13.5px;margin:0;color:var(--ink)}
/* Une case à cocher dans un .field gardait « width:100% » des champs texte : case étirée au milieu, libellé repoussé
   (vu le 27/09 sur « Visible dans la boutique »). Règle commune : une case garde sa taille, collée à son libellé. */
.field input[type=checkbox],.field input[type=radio]{width:auto;padding:0;flex:none;border-radius:4px;box-shadow:none}
@media (pointer: coarse){.field input[type=checkbox],.field input[type=radio]{width:22px;height:22px}}
/* ═══════════ CASES EN PASTILLES (27/09) ═══════════
   Choisir plusieurs éléments courts d'une liste visible (tarifs d'un cours…) : .ck-pills > label.ck-pill > input.
   Pour une liste longue (40 cours), préférer le menu à cases .fdd. */
.ck-pills{display:flex;gap:6px;flex-wrap:wrap}
label.ck-pill{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:600;color:var(--ink);background:#f5f7fa;border:1px solid var(--line);border-radius:20px;padding:6px 12px;cursor:pointer;margin:0}
label.ck-pill:has(input:checked){background:var(--brand-soft);border-color:var(--brand);color:var(--brand-dark)}
.ck-pill input[type=checkbox]{width:16px;height:16px;margin:0}
.tl-form{margin-bottom:10px}.tl-ft{font-size:12.5px;font-weight:700;color:var(--muted);margin:2px 0 6px}
/* Question en attente après un geste (« Les inscrire aussi ? ») : carte d'information bleue, actions à droite. */
.retro-ask{border-left:4px solid var(--info);background:var(--info-soft);margin-bottom:16px}
.retro-ask ul{margin:4px 0 10px 18px;font-size:13.5px;line-height:1.6}
.retro-act{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}
/* Fin de saison calculée (27/09) : « et se termine le 31/08/2027 · saison 2026 – 2027 », comme dans l'assistant. */
.season-end{display:flex;align-items:center;gap:8px;font-size:14px;background:var(--bg);border-radius:10px;padding:10px 12px}
.season-end .se-ok{color:var(--ok);font-weight:800}
/* ═══════════ EN-TÊTE DE FICHE DÉTAIL + CHIFFRES CLÉS (28/09) ═══════════
   « Une fiche détail reprend la couleur de sa liste : en-tête coloré, chiffres clés en tuiles » (charte). Même rendu que
   la fiche événement, en composant commun : .dhero (--hc = couleur, défaut la marque) + .dkpis > .dkpi (--k). */
.dhero{--hc:var(--brand);display:flex;gap:16px;align-items:center;padding:18px 20px;border-radius:18px;margin-bottom:14px;color:#fff;
  background:linear-gradient(135deg,var(--hc),color-mix(in srgb,var(--hc) 62%,#0b1f33));box-shadow:0 8px 24px color-mix(in srgb,var(--hc) 28%,transparent)}
.dhero .dh-ic{width:56px;height:56px;border-radius:14px;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.28);display:grid;place-items:center;font-size:26px;flex:none}
.dhero .dh-m{flex:1;min-width:0}
.dhero .dh-k{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;opacity:.9}
.dhero h2{font-size:21px;margin:3px 0 4px;color:#fff;line-height:1.25;overflow-wrap:anywhere}
.dhero .dh-w{font-size:13.5px;opacity:.95;display:flex;gap:14px;flex-wrap:wrap}
.dkpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px;margin-bottom:18px}
.dkpi{display:flex;gap:12px;align-items:center;background:#fff;border:1px solid var(--line);border-left:4px solid var(--k);border-radius:14px;padding:12px 14px}
.dkpi i{font-style:normal;font-size:17px;width:38px;height:38px;border-radius:11px;display:grid;place-items:center;flex:none;background:color-mix(in srgb,var(--k) 12%,#fff)}
.dkpi b{display:block;font-size:19px;line-height:1.15}.dkpi span{font-size:12.5px;color:var(--muted)}
.band-t{font-size:13px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:800;margin:0 0 8px 2px}
.msg-view{border:1px solid var(--line);border-radius:12px;padding:14px 16px;background:#fbfcfd;font-size:14px;line-height:1.55;max-height:460px;overflow:auto;overflow-wrap:anywhere}
.msg-view a{color:var(--brand);text-decoration:underline}
@media(max-width:700px){.dhero{padding:14px;gap:12px;align-items:flex-start}.dhero .dh-ic{width:44px;height:44px;font-size:20px}.dhero h2{font-size:18px}}

/* ═══ LIGNES REPLIABLES (28/09, Olivier, module Communication : « l'historique doit être en lignes », « on ne met pas
   des trucs côte à côte ») — composant commun : .ml-tools (filtres .ck-pills.ck-radio + recherche, data-ml-for=<id>)
   puis, par groupe [data-ml-group] (intertitre .band-t), une carte .ml-list de details.mline :
   summary.ml-head = .ml-date (jour/mois) + .ml-main (.ml-t titre + .ml-ch pastille, .ml-sub ligne grise) + .ml-num + .ml-chev ;
   .ml-body = ce qui se déplie (.ml-act boutons, contenu, .ml-fail). ═══ */
.ck-pills.ck-radio input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.ck-pills.ck-radio label.ck-pill:has(input:focus-visible){outline:2px solid var(--brand);outline-offset:2px}
.ml-tools{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:16px}
.ml-tools input.sp-q{margin-left:auto;width:300px;max-width:100%}
.ml-list{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;margin-bottom:18px}
details.mline+details.mline{border-top:1px solid var(--line)}
summary.ml-head{list-style:none;display:flex;gap:14px;align-items:center;padding:12px 16px;cursor:pointer}
summary.ml-head::-webkit-details-marker{display:none}
summary.ml-head:hover{background:#fafcff}
details.mline[open]>summary.ml-head{background:#f6f9fe;border-bottom:1px solid var(--line)}
.ml-date{width:48px;flex:none;text-align:center;border-radius:10px;padding:5px 0;background:var(--brand-soft);color:var(--brand-dark);line-height:1.1}
.ml-date.sms{background:#e6ecf3;color:#0F2A48}
.ml-date b{display:block;font-size:19px}.ml-date small{font-size:11px;font-weight:600}
.ml-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.ml-t{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.ml-t b{font-size:15px;overflow-wrap:anywhere}
.ml-ch{font-size:11px;font-weight:700;padding:2px 8px;border-radius:999px;background:var(--brand-soft);color:var(--brand-dark)}
.ml-ch.sms{background:#e6ecf3;color:#0F2A48}
.ml-sub{font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ml-num{font-size:13px;text-align:right;white-space:nowrap;line-height:1.45}
.ml-ok{color:var(--ok);font-weight:650}.ml-ko{color:var(--bad);font-weight:650}.ml-wait{color:var(--warn);font-weight:650}.ml-sent{color:var(--muted);font-weight:650}
.ml-tools .ck-pills+.ck-pills{padding-left:10px;border-left:1px solid var(--line)}
.ml-alert{background:var(--bad-soft);color:#7d241b;border:1px solid #f5c2c0;border-radius:var(--radius);padding:12px 16px;margin-bottom:16px;font-size:13.5px}
.ml-alert ul{margin:8px 0 0;padding-left:18px}.ml-alert li{margin:3px 0;overflow-wrap:anywhere}
.ml-rcp{display:flex;align-items:center;gap:8px 12px;flex-wrap:wrap;padding:8px 0;border-bottom:1px solid var(--line);font-size:13.5px}
.ml-rcp:last-child{border-bottom:0}.ml-rd{font-weight:600;overflow-wrap:anywhere}
.ml-chev{width:36px;height:36px;flex:none;border:1px solid var(--line);border-radius:9px;background:#fff;display:grid;place-items:center;color:var(--ink)}
.ml-chev svg{transition:transform .15s}
details.mline[open] .ml-chev svg{transform:rotate(180deg)}
.ml-body{padding:14px 16px 16px 78px;display:flex;flex-direction:column;gap:12px}
.ml-act{display:flex;gap:8px;flex-wrap:wrap}.ml-act .btn{margin:0}
.ml-fail{background:var(--bad-soft);color:#7d241b;border-radius:10px;padding:10px 14px;font-size:13px;overflow-wrap:anywhere}
@media(max-width:700px){
  .ml-tools input.sp-q{margin-left:0;width:100%}
  .ml-tools .ck-pills+.ck-pills{padding-left:0;border-left:0}
  summary.ml-head{flex-wrap:wrap;gap:8px 12px;padding:12px}
  .ml-main{flex:1 1 calc(100% - 120px)}
  .ml-num{order:3;flex-basis:100%;text-align:left;padding-left:60px;white-space:normal}
  .ml-num br{display:none}.ml-num .ml-ok{margin-left:4px}
  .ml-sub{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
  .ml-body{padding:12px}
  .ml-act .btn{flex:1 1 auto;justify-content:center}
}

/* ---- 1.131.0 (29/09) — ASSISTANT DE DÉMARRAGE et carte « Démarrage » (canvas A1 → A6). Olivier : « il faut bien
   marquer les étapes ». Composants génériques réutilisables : .pick-chips / .pick-chip (choix multiples en pastilles,
   case à cocher cachée), .onb-* (liste d'étapes numérotées). ---- */
.start-wrap{max-width:760px;margin:0 auto}
.start-head{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;margin-bottom:16px}
.start-top{display:flex;align-items:center;gap:10px}
.start-top b{font-size:13px;font-weight:800;color:var(--brand-dark);text-transform:uppercase;letter-spacing:.05em}
.start-top span{margin-left:auto;font-size:13px;color:var(--muted);font-weight:600}
.start-quit{font-size:13px;font-weight:700;color:var(--muted);text-decoration:none;border:1px solid var(--line);border-radius:999px;padding:5px 12px;background:#fff;white-space:nowrap}
.start-quit:hover{color:var(--ink,#1c2530);border-color:#cfd6df}
.start-bar{display:flex;gap:4px;margin:10px 0 4px}
.start-bar i{flex:1;height:6px;border-radius:3px;background:var(--line)}
.start-bar i.on{background:var(--brand)}
.start-list{list-style:none;margin:10px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px 12px}
.start-list a{display:flex;gap:8px;align-items:center;font-size:12.5px;color:var(--muted);text-decoration:none;padding:4px 0}
.start-list i{width:22px;height:22px;border-radius:50%;flex:none;display:inline-flex;align-items:center;justify-content:center;font-style:normal;font-weight:800;font-size:11.5px;border:1.5px solid var(--line);background:#fff}
.start-list li.done i{background:var(--ok);border-color:var(--ok);color:#fff}
.start-list li.cur a{color:var(--ink);font-weight:800}
.start-list li.cur i{background:var(--brand);border-color:var(--brand);color:#fff}
@media(max-width:700px){.start-list{display:none}}
.start-body{display:flex;flex-direction:column;gap:14px}
.start-body h2{margin:0;font-size:22px}
.start-body > .sub{margin:-8px 0 0;line-height:1.45}
.start-kicker{font-size:12px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;margin-top:4px}
.start-note{font-size:13.5px;color:var(--ink)}
.pend-row{display:flex;gap:12px;padding:7px 0;border-top:1px solid #f3e2b0;font-size:13.5px}.pend-row>span{width:160px;flex:none;color:var(--muted);font-weight:600}
.start-course{margin-bottom:14px}
.c-annexe-l{align-items:flex-start}.c-annexe-l .sub{display:block;font-size:12.5px;font-weight:400;margin-top:2px;line-height:1.45}
/* 1.158.0 — étape « Vos formulaires d'adhésion » */
.start-how{display:flex;flex-direction:column;gap:10px}.start-how p{margin:0;font-size:13.5px;line-height:1.5}
.how-flow{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;counter-reset:hf}
.how-flow li{counter-increment:hf;background:#e7f0fc;border-radius:11px;padding:10px;display:flex;flex-direction:column;gap:3px;font-size:13px;min-width:0}
.how-flow li::before{content:counter(hf);width:22px;height:22px;border-radius:50%;background:var(--brand);color:#fff;font-weight:800;font-size:12px;display:grid;place-items:center;margin-bottom:3px}
.how-flow li b{color:var(--brand-dark)}.how-flow li span{color:var(--muted);font-size:12.5px}
@media(max-width:700px){.how-flow{grid-template-columns:1fr}.how-flow li{flex-direction:row;flex-wrap:wrap;align-items:center;gap:4px 8px}.how-flow li::before{margin:0}.how-flow li span{flex-basis:100%;padding-left:30px}}
.sf-kick{font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.start-form{display:flex;flex-direction:column;gap:12px;border-left:4px solid var(--brand);margin-bottom:14px}
.start-form .field{margin:0}
.sf-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.sf-num{font-size:12px;font-weight:800;color:var(--brand-dark);background:#e7f0fc;border-radius:999px;padding:3px 10px;white-space:nowrap}
.sf-rows{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.sf-row{display:grid;grid-template-columns:24px minmax(0,1fr) 120px;gap:12px;align-items:center;padding:10px 14px;border-top:1px solid var(--line);background:#fff}
.sf-row:first-child{border-top:0}.sf-row.off{background:#fafbfc}.sf-row.off .sf-c b{color:var(--muted)}.sf-row.off .sf-price{visibility:hidden}
.sf-row input[type=checkbox]{width:20px;height:20px;margin:0;accent-color:var(--brand)}
.sf-c{min-width:0;cursor:pointer;margin:0}.sf-sl{display:block;font-size:12.5px;color:var(--muted)}
.sf-other[hidden]{display:none}.sf-other{display:inline-block;font-size:11.5px;font-weight:700;color:var(--muted);background:var(--bg,#f3f5f8);border:1px solid var(--line);border-radius:999px;padding:1px 8px;margin-left:6px}
.sf-price{position:relative;display:block}.sf-price input{width:100%;text-align:right;padding-right:28px;font-variant-numeric:tabular-nums;margin:0}.sf-price i{position:absolute;right:11px;top:50%;transform:translateY(-50%);font-style:normal;color:var(--muted);font-weight:600}
.sf-opts{display:flex;flex-direction:column;gap:8px}
.sf-opt{display:grid;grid-template-columns:minmax(0,1fr) 120px auto;gap:10px;align-items:center}.sf-opt input{margin:0}
.sf-req{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:600;white-space:nowrap;margin:0}.sf-req input{width:18px;height:18px;accent-color:var(--brand)}
.sf-hint{font-size:12.5px;color:var(--muted);margin:0}
.start-form.locked{gap:6px}
.start-alert{background:#fff8e6;border:1px solid #f3d27a;border-radius:12px;padding:12px 16px;font-size:13.5px;margin:12px 0}.start-alert b{color:#b45309}
.start-later{display:flex;flex-direction:column;gap:8px;margin-top:14px}.start-later p{margin:0;font-size:13.5px}.start-later ul{margin:0;padding-left:18px;font-size:13.5px}.start-later .btn{margin:0}
@media(max-width:600px){.sf-row{grid-template-columns:24px minmax(0,1fr);row-gap:8px}.sf-row .sf-price{grid-column:2}.sf-opt{grid-template-columns:minmax(0,1fr) 110px}.sf-opt .sf-req{grid-column:1/-1}}
/* 1.159.0 — page Foyer : bandes empilées, une ligne par personne / par paiement */
.foyer{display:flex;flex-direction:column;gap:14px}.foyer .card{margin:0}
.fy-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.fy-head h2{margin:0;font-size:21px}
.fy-big{width:52px;height:52px;border-radius:50%;background:#0F2A48;color:#fff;display:grid;place-items:center;font-weight:800;font-size:19px;flex:none}
.fy-right{margin-left:auto}
.fy-sec{font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--brand-dark);margin-bottom:8px}.fy-n{color:var(--muted);letter-spacing:0}
.fy-row{display:grid;grid-template-columns:150px minmax(0,1fr);gap:12px;padding:8px 0;border-top:1px solid var(--line);font-size:14px}.fy-row:first-of-type{border-top:0}.fy-row>span{color:var(--muted);font-weight:600}
@media(max-width:600px){.fy-row{grid-template-columns:1fr;gap:2px}}
.fy-note{font-size:12.5px;margin:8px 0 0}
.fy-person,.fy-pay{display:grid;grid-template-columns:36px minmax(0,1fr) auto;gap:12px;align-items:start;padding:11px 0;border-top:1px solid var(--line)}
.fy-pay{grid-template-columns:36px minmax(0,1fr)}
.fy-person:first-of-type,.fy-pay:first-of-type{border-top:0}
.fy-av{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:13px;background:var(--brand-soft);color:var(--brand-dark)}.fy-av.k{background:#fdeee3;color:#9a4b12}
.fy-p-main{min-width:0}.fy-chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:4px}
.chip{display:inline-block;font-size:11.5px;font-weight:700;border-radius:999px;padding:2px 9px;background:var(--bg);border:1px solid var(--line);color:var(--muted);white-space:nowrap}
.chip.ok{background:#e8f6ee;border-color:#bfe3cc;color:#177245}.chip.warn{background:#fff6dc;border-color:#f0dc9c;color:#8a6400}.chip.blue{background:var(--brand-soft);border-color:#c9dcf7;color:var(--brand-dark)}
.fy-season{border-top:1px solid var(--line);padding:10px 0}.fy-season:first-of-type{border-top:0;padding-top:0}
.fy-season summary{cursor:pointer;list-style:none}.fy-season summary::-webkit-details-marker{display:none}
.fy-season summary::before{content:"▸ ";color:var(--muted)}.fy-season[open] summary::before{content:"▾ "}
.fy-t{width:100%;margin-top:8px}.fy-t td.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.fy-detach{margin-top:10px;border-top:1px solid var(--line);padding-top:10px}.fy-detach summary{cursor:pointer;font-weight:700;font-size:13.5px}
.fy-detach-f{display:flex;flex-direction:column;gap:10px;max-width:420px;margin-top:8px}.fy-detach-f .field{margin:0}.fy-detach-f .btn{align-self:flex-start}
/* 1.160.0 — rubrique Paiement de la fiche */
.pd{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.pd-state{border-radius:12px;padding:12px 14px;display:flex;flex-direction:column;gap:4px;font-size:13.5px}
.pd-state b{font-size:14px}.pd-bad{background:#fdecea;border:1px solid #f3c4bd}.pd-bad b{color:#a5281b}
.pd-ok{background:#e8f6ee;border:1px solid #bfe3cc}.pd-ok b{color:#177245}
.pd-warn{background:#fff6dc;border:1px solid #f0dc9c}.pd-warn b{color:#8a6400}
.pd-info{background:var(--brand-soft);border:1px solid #c9dcf7}.pd-info b{color:var(--brand-dark)}
.pd-t{font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-top:10px}
.pd-inst{display:grid;grid-template-columns:30px minmax(0,1fr) auto;gap:12px;align-items:start;padding:10px 0;border-top:1px solid var(--line)}
.pd-n{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:12.5px;background:var(--bg);color:var(--muted)}
.pd-n.ok{background:#e8f6ee;color:#177245}.pd-n.bad{background:#fdecea;color:#a5281b}
.pd-amt{font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}
.pd-lock{font-size:12px;color:var(--muted);margin-top:2px}
/* 1.180.2 : référence du prestataire (tr_…, cst_…), copiable — pour la retrouver dans Mollie */
.pd-note{font-size:12.5px;margin:10px 0 0;line-height:1.5}
.pd-go{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 4px}.pd-go .btn{margin:0;min-height:40px}
.pd-ref{font-size:12.5px;color:var(--muted);margin-top:4px;display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.pd-ref code{font-size:12.5px;color:var(--ink);background:var(--bg,#f4f6f8);padding:2px 6px;border-radius:6px;word-break:break-all}
.pd-ref .btn{margin:0;min-height:32px}
.chip.bad{background:#fdecea;border-color:#f3c4bd;color:#a5281b}
.pd-tl{list-style:none;margin:4px 0;padding:0}.pd-tl li{padding:6px 0 6px 18px;position:relative;border-left:2px solid var(--line);margin-left:6px;font-size:13.5px}
.pd-tl li::before{content:"";position:absolute;left:-6px;top:11px;width:10px;height:10px;border-radius:50%;background:var(--muted)}
.pd-tl li.bad::before{background:#a5281b}.pd-tl li.next::before{background:#fff;border:2px solid var(--brand)}
.rcpt-act{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:12px}.rcpt-act .btn{margin:0}
.course-act{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}
.course-act .btn{margin:0}.course-st{font-size:13px;font-weight:700;color:var(--muted)}.course-st.ok{color:#177245}.course-st.ko{color:#b45309}
.start-slots{display:flex;flex-direction:column;gap:6px}
.start-slots .start-slot{align-items:start;grid-template-columns:1.3fr 1fr 1fr 1.5fr 38px}
.start-slots .start-slot .field{margin-bottom:0}.start-slots .start-slot .field label{min-height:18px}
@media(min-width:601px){.start-slots .start-slot+.start-slot label{display:none}.start-slots .start-slot+.start-slot .slot-del{margin-top:0}}
.slot-del{flex:none;width:38px;height:42px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--muted);font-size:18px;cursor:pointer;margin-top:24px}
.start-slots .start-slot:only-child .slot-del{visibility:hidden}
.slot-add{margin:8px 0 10px;align-self:flex-start}
.start-ask{margin-top:18px;background:#fff8e6;border:1px solid #f3d27a;border-radius:14px;padding:14px 16px;display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.start-ask b{font-size:14.5px}.start-ask p{margin:0;font-size:13.5px;line-height:1.5;color:var(--ink)}.start-ask .btn{margin:6px 0 0}
.start-q h3,.start-h3{display:flex;align-items:center;gap:10px;margin:0 0 6px;font-size:16px}
.start-q h3 i{width:26px;height:26px;border-radius:50%;flex:none;display:inline-flex;align-items:center;justify-content:center;font-style:normal;font-weight:800;font-size:13px;background:var(--brand);color:#fff}
.start-q > .sub{margin:0 0 10px;font-size:12.5px;line-height:1.45}
.start-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:10px;border-bottom:1px dashed var(--line);margin-bottom:10px}
@media(max-width:600px){.start-row{grid-template-columns:1fr;gap:0}}
.start-add{width:100%;border:1.5px dashed var(--brand);color:var(--brand-dark);background:#fff;font-weight:700}
.start-inline{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap}
.start-course{display:flex;flex-direction:column;gap:4px;border-left:4px solid var(--brand)}
.start-course.new{border-left-color:var(--ok)}
.start-course .start-del{align-self:auto}
.start-tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:4px}
.start-slot{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:10px}
.start-dark{background:#0f2a44;color:#fff;border-color:#0f2a44}
.start-2{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:8px;align-items:center;margin:10px 0}
.start-2 > div{background:rgba(255,255,255,.1);border-radius:11px;padding:10px;display:flex;flex-direction:column;gap:2px}
.start-2 span{font-size:12px;color:#d7e3f1;line-height:1.4}
.start-2n{font-size:12.5px;color:#d7e3f1}
.start-tier .pick-chips{margin-top:2px}
.start-pay{align-items:flex-start}
.start-pay input{margin-top:3px}
.start-ol{margin:8px 0 0;padding-left:20px;font-size:13px;line-height:1.5;display:flex;flex-direction:column;gap:6px}
.start-invite{border:1.5px solid var(--brand)}
.start-link{display:flex;gap:8px;align-items:center;border:1px solid var(--line);border-radius:10px;padding:8px 10px;background:var(--bg);margin:10px 0 6px}
.start-link span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13.5px}
.start-warn{background:var(--warn-soft)}
.pick-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px}
.pick-chip{position:relative;cursor:pointer}
.pick-chip input{position:absolute;opacity:0;width:1px;height:1px}
.pick-chip span{display:inline-flex;align-items:center;min-height:40px;padding:0 14px;border-radius:99px;border:1.5px solid #cfd5dd;background:#fff;font-size:13.5px;font-weight:700;color:var(--ink)}
.pick-chip input:checked + span{background:var(--brand-soft);border-color:var(--brand);color:var(--brand-dark)}
.pick-chip input:checked + span::before{content:'✓';margin-right:6px}
.pick-chip input:focus-visible + span{outline:2px solid var(--brand);outline-offset:2px}
.onb-card{margin-bottom:16px;border:1.5px solid var(--brand)}
.onb-head{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.onb-head h3{font-size:16px;margin:0}
.onb-n{margin-left:auto;font-weight:800;color:var(--brand)}
.onb-bar{height:8px;border-radius:4px;background:var(--line);overflow:hidden;margin-bottom:12px}
.onb-bar i{display:block;height:100%;background:var(--ok)}
.onb-go{display:flex;justify-content:center;width:100%;margin-bottom:10px;white-space:normal;text-align:center}
.onb-list{list-style:none;margin:0;padding:0}
.onb-list li{display:flex;gap:10px;align-items:center;padding:7px 0;font-size:14px;border-bottom:1px solid #eef1f4}
.onb-list li:last-child{border-bottom:none}
.onb-list i{width:24px;height:24px;border-radius:50%;flex:none;display:inline-flex;align-items:center;justify-content:center;font-style:normal;font-weight:800;font-size:12px;border:1.5px solid #b9c1cc;color:var(--muted)}
.onb-list li.done i{background:var(--ok);border-color:var(--ok);color:#fff}
.onb-list li span{font-weight:700}
.onb-list li.done span{color:var(--muted);text-decoration:line-through;font-weight:500}
.onb-list a{margin-left:auto;font-weight:700;font-size:13px;white-space:nowrap}
.onb-list .onb-lk{margin-left:0;font-weight:700;font-size:14px;white-space:normal;color:var(--ink);background:none;border:0;padding:0;text-align:left;cursor:pointer;font-family:inherit;text-decoration:none}
.onb-list .onb-lk:hover{color:var(--brand-dark);text-decoration:underline}
.onb-list .onb-cta{margin:0 0 0 auto;flex:none}
.onb-list .onb-mo{margin:0;flex:1;min-width:0}.onb-list .onb-mo .sub{font-size:12px;font-weight:400;margin-top:2px}
@media(max-width:600px){.start-slot{grid-template-columns:1fr 1fr;gap:0 10px}.start-slot .field:first-child{grid-column:1/-1}
  .start-slots .start-slot{grid-template-columns:1fr 1fr 38px;row-gap:8px;border-top:1px dashed var(--line);padding-top:8px}.start-slots .start-slot:first-child{border-top:0;padding-top:0}
  .start-slots .start-slot .field:nth-child(2){grid-column:1/-1}.start-slots .start-slot .field:nth-child(5){grid-column:1/3}.start-slots .start-slot .field:nth-child(4){grid-column:2/4}}
/* 1.131.1 (30/09) — mode concentré : pendant l'assistant, pas de menu ; la sortie est le lien discret en bas (.start-leave) */
body.focus .sidebar,body.focus .backdrop,body.focus .menu-btn{display:none!important}
/* 1.157.0 (Olivier : « ce n'est pas centré, on dirait une iframe à l'ancienne ; en bas un bandeau blanc bizarre ») :
   en mode concentré, toute la page est UNE colonne centrée (bandeau d'essai compris) et la barre d'actions du bas
   s'étend d'un bord à l'autre de l'écran, son contenu restant aligné sur la colonne. */
body.focus .content{max-width:812px;margin:0 auto}
body.focus .topbar{padding-left:max(26px,calc(50% - 380px));padding-right:max(26px,calc(50% - 380px))}
body.focus .sticky-actions{border-top:0;box-shadow:0 0 0 100vmax #fff,0 -1px 0 100vmax var(--line);clip-path:inset(-1px -100vmax 0 -100vmax)}
.start-leave{margin:28px 0 8px;padding-top:16px;border-top:1px solid var(--line);text-align:center;display:flex;flex-direction:column;gap:6px;align-items:center}
.start-leave button{font:inherit;font-size:13px;font-weight:600;color:var(--muted);background:none;border:0;padding:6px 8px;text-decoration:underline;cursor:pointer;min-height:44px}
.start-leave button:hover{color:var(--ink)}
.start-leave span{font-size:12px;color:var(--muted);max-width:520px;line-height:1.45}
/* 1.131.1 — entrée « Démarrage » du menu : sa propre couleur (orange soutenu, indépendant de la couleur du club), badge d'avancement */
.navlink.nav-start{background:#C2410C;color:#fff;font-weight:700;margin-bottom:8px}
.navlink.nav-start:hover{background:#9A3412;color:#fff}
.navlink.nav-start.active{background:#9A3412;box-shadow:inset 0 0 0 2px #FDBA74}
.navlink.nav-start .ic{opacity:1}
.nav-badge{margin-left:auto;font-size:11.5px;font-weight:800;background:rgba(255,255,255,.22);border-radius:99px;padding:2px 8px}
/* 1.131.2 — liste éditable commune (.elist) : une ligne par valeur */
.elist-items{display:flex;flex-direction:column;gap:6px;margin-bottom:8px}
.elist-row{display:flex;align-items:center;gap:8px}
.elist-row input{flex:1;min-width:0}
.elist-row .sort-handle{cursor:grab;color:var(--muted);font-size:18px;padding:0 4px;touch-action:none;user-select:none}
.elist-x{flex:none;width:40px;height:40px;border-radius:9px;border:1px solid var(--line);background:#fff;color:var(--muted);cursor:pointer;font-size:14px}
.elist-x:hover{color:var(--bad);border-color:var(--bad)}
.elist-add{border-style:dashed}
/* 1.131.2 — onglets qui défilent quand ils sont nombreux (Réglages plateforme) ; .nav-badge hors entrée Démarrage */
.lead-tabs.tabs-scroll{overflow-x:auto;scrollbar-width:none;margin-bottom:16px;flex:none}
.lead-tabs.tabs-scroll::-webkit-scrollbar{display:none}
.lead-tabs.tabs-scroll .ltab{flex:1 0 auto;padding:9px 14px;text-decoration:none}
.navlink:not(.nav-start) .nav-badge{background:#C2410C;color:#fff}
.signup-pending{border:1.5px solid #C2410C}
/* 1.132.0 — Nouveautés : dernières mises à jour à cocher, points du public de l'onglet mis en avant */
.wn-v{border-top:1px solid var(--line);padding:8px 0}
.wn-v > summary{cursor:pointer;list-style:none;font-size:14px;padding:4px 0}
.wn-v > summary::-webkit-details-marker{display:none}
.wn-n{font-size:11.5px;font-weight:800;background:#FFEDD5;color:#9A3412;border-radius:99px;padding:2px 8px;margin-left:4px}
.wn-item{display:flex;gap:10px;align-items:flex-start;padding:7px 8px;border-radius:9px;font-size:13px;line-height:1.45;cursor:pointer}
.wn-item input{margin-top:3px;flex:none}
.wn-item.star{background:#FFF7ED}
.wn-other{margin:6px 0 0 8px}
.wn-other > summary{cursor:pointer;font-size:12.5px;padding:4px 0}
.wn-prop{border:1.5px solid #FDBA74;background:#FFF7ED}
/* 1.132.1 — Associations en onglets : invitations en lignes, compteur orange quand une demande attend */
.tbadge.tb-warn{background:#C2410C}
.iv-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:8px 0;border-bottom:1px solid var(--line);font-size:13.5px}
.iv-code{font-family:ui-monospace,monospace;letter-spacing:.06em}
.iv-act{margin-left:auto;display:flex;gap:6px}
.iv-act form{margin:0}.iv-act .btn{margin:0}
.iv-new > summary{list-style:none;cursor:pointer}
.iv-new > summary::-webkit-details-marker{display:none}
.iv-new[open] > summary{display:none!important}

/* 1.133.0 — Mollie Connect (Paiement en ligne, Démarrage) */
.mc-card{border-left:4px solid var(--brand)}
.mc-card.on{border-left-color:#16a34a}
.mc-row{display:flex;gap:14px;align-items:center;justify-content:space-between;flex-wrap:wrap}

/* 1.134.0 (01/10, Olivier : « il ne faut pas que je confonde la mise à jour de la plateforme et la mise à jour du
   site web… quelque chose dans une autre couleur ») — Mise à jour : Application = BLEU, Site web = VERT.
   .upd-site redéfinit --brand pour tout ce qu'elle contient (boutons, liens, zone de dépôt). */
.upd-tabs{max-width:640px}
.upd-tabs .ltab.t-site.on{background:#15803d;color:#fff}
.upd-tabs .ltab.t-app.on{background:var(--brand);color:#fff}
.upd-tabs .ltab.t-site:not(.on){color:#15803d}
.upd-site{--brand:#15803d;--brand-dark:#0f5f2d;--brand-soft:#e3f5e9}
.upd-banner{border-radius:12px;padding:13px 16px;margin:0 0 16px;font-size:14px;line-height:1.45;border:2px solid}
.upd-b-app{background:#E7F1FE;border-color:#0A70E8;color:#0b3c7a}
.upd-b-site{background:#e3f5e9;border-color:#15803d;color:#0f4d26}
.upd-banner code{font-size:12.5px;background:rgba(255,255,255,.7);padding:1px 5px;border-radius:5px}
.upd-dz{border:2px dashed var(--line);border-radius:12px;padding:30px 16px;text-align:center;background:#fafbfc;cursor:pointer;transition:.15s}
.upd-dz:hover,.upd-dz.over,.upd-dz:focus-visible{border-color:var(--brand);background:var(--brand-soft);outline:0}
.upd-dz.bad{border-color:#d93025;background:var(--bad-soft)}
.upd-dz-ic{font-size:26px;margin-bottom:6px;color:var(--brand)}
.upd-dz .sub{font-size:12.5px}.upd-dz-msg{margin-top:6px}
.upd-dz-file .badge{word-break:break-all;white-space:normal}
/* 1.145.2 : l'onglet Site web reprend la disposition de l'onglet Application (dépose à gauche, version à droite) */

/* 1.135.0 — demandes de code (Plateforme → Associations → Invitations) */
.cq-card.has{border-left:4px solid #ea580c}
.cq-row{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:10px 0;border-top:1px solid var(--line)}
.cq-row:first-of-type{border-top:0}
.cq-who{min-width:0;flex:1 1 260px}
.cq-act{display:flex;gap:8px;flex-wrap:wrap}

/* 1.136.0 — PROSPECTS SPORTPILOT (CRM de plateforme) et fiches « non lues » — maquette validée par Olivier le 01/10 */
.crm-hero{display:flex;gap:14px;align-items:center;justify-content:space-between;flex-wrap:wrap;border-radius:18px;color:#fff;padding:20px 22px;margin-bottom:14px;
  background:linear-gradient(135deg,#0a3d91,#0A70E8 55%,#14b8ff);position:relative;overflow:hidden}
.crm-hero h2{font-size:24px;font-weight:800;margin:0;color:#fff}
.crm-hero p{opacity:.9;margin:2px 0 0;font-size:13.5px}
.crm-hero-btn{background:#fff;color:#0a3d91;border-color:#fff;margin:0}
.crm-hero-btn:hover{background:#eef5ff;color:#0a3d91}
.crm-tiles{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin-bottom:12px}
.crm-tile{display:block;background:#fff;border:1px solid var(--line);border-top:4px solid var(--c);border-radius:14px;padding:11px 13px;text-decoration:none;color:var(--ink);transition:.12s}
.crm-tile:hover{box-shadow:0 2px 10px rgba(16,24,40,.08);color:var(--ink)}
.crm-tile.on{box-shadow:0 0 0 2px var(--c)}
.crm-tile small{display:block;font-size:11.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.crm-tile b{display:block;font-size:24px;line-height:1.2;margin-top:2px}
.crm-tile span{font-size:12.5px;color:var(--muted)}
.crm-bar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:6px}
.crm-view a{display:inline-flex;align-items:center;padding:9px 14px;color:var(--muted);font-weight:600;text-decoration:none;background:#fff}
.crm-view a.on{background:var(--brand-soft);color:var(--brand)}
.crm-list{padding:0;overflow:hidden}
.crm-row{display:grid;grid-template-columns:12px minmax(0,1.6fr) minmax(0,1fr) minmax(0,1.1fr) 100px auto;gap:14px;align-items:center;padding:13px 16px;border-top:1px solid var(--line)}
.crm-row:first-child{border-top:0}
.crm-dot{width:10px;height:10px;border-radius:50%}
.crm-row.unread .crm-dot{background:var(--brand);box-shadow:0 0 0 4px var(--brand-soft)}
.crm-row .nm{font-weight:600}
.crm-row.unread .nm{font-weight:800}
.crm-row .sub{font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.crm-new{display:inline-block;background:var(--brand);color:#fff;border-radius:6px;padding:0 6px;font-size:11px;font-weight:700;vertical-align:2px}
.crm-stage{display:inline-flex;align-items:center;gap:5px;border-radius:999px;padding:2px 10px;font-size:12.5px;font-weight:700;color:var(--c);
  background:color-mix(in srgb,var(--c) 12%,#fff)}
.crm-stage:before{content:"";width:7px;height:7px;border-radius:50%;background:var(--c)}
.pl-next{font-size:13px}
.pl-next.late{color:#c2410c;font-weight:700}
@media (max-width:760px){
  .crm-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .crm-row{grid-template-columns:12px minmax(0,1fr) auto;grid-template-areas:"d n v" "d s s" "d a a";row-gap:6px}
  .crm-row .crm-dot{grid-area:d;align-self:start;margin-top:6px}
  .crm-row .c1{grid-area:n;min-width:0}.crm-row .c2{grid-area:s}.crm-row .c3{grid-area:a}.crm-row .c4{display:none}.crm-row .voir{grid-area:v}
}
.crm-kb{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(220px,1fr);gap:10px;overflow-x:auto;padding-bottom:8px}
.crm-col{background:#eef2f8;border-radius:14px;padding:10px;min-height:180px}
.crm-col h4{font-size:13.5px;display:flex;align-items:center;gap:8px;margin:2px 4px 10px}
.crm-col h4 i{width:10px;height:10px;border-radius:3px;background:var(--c)}
.crm-col h4 em{font-style:normal;margin-left:auto;color:var(--muted);font-weight:600}
.crm-col.over{outline:2px dashed var(--brand);outline-offset:-4px}
.crm-card{position:relative;background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px 10px 10px 26px;margin-bottom:8px;cursor:grab}
.crm-card.drag{opacity:.5}
.crm-card a{color:var(--ink);text-decoration:none}
.crm-card .sub{font-size:12px}
.crm-card.unread b:before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--brand);margin-right:6px;vertical-align:1px}
.crm-grip{position:absolute;left:8px;top:10px;color:#9aa4b2}
.crm-code{background:var(--bg);border:1px solid var(--line);border-radius:7px;padding:2px 7px;word-break:break-all}
/* fiche */
.crm-fhead{border-radius:18px;color:#fff;padding:20px 22px;background:linear-gradient(135deg,color-mix(in srgb,var(--c) 70%,#000),var(--c));margin-bottom:12px}
.crm-fhead h2{color:#fff;font-size:24px;font-weight:800;margin:0}
.crm-fsub{opacity:.92;margin-top:2px}
.crm-chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.crm-chips span,.crm-chips a{background:rgba(255,255,255,.18);border-radius:999px;padding:4px 11px;font-size:13px;font-weight:600;color:#fff;text-decoration:none}
.crm-ftiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:12px}
.crm-ftiles .tile{background:#fff;border:1px solid var(--line);border-radius:14px;padding:11px 13px;min-width:0}
.crm-ftiles .tile small{display:block;font-size:11.5px;color:var(--muted);font-weight:800;text-transform:uppercase;letter-spacing:.04em}
.crm-ftiles .tile b{display:block;font-size:16px;margin-top:3px;overflow-wrap:anywhere}
@media (max-width:760px){.crm-ftiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
.crm-band{background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px 18px;margin-bottom:12px}
.crm-band h3{font-size:16px;font-weight:800;display:flex;align-items:center;gap:10px;margin:0 0 12px}
.crm-band h3 .r{margin-left:auto}
.crm-saved{color:#16a34a;font-size:13px;font-weight:600}
.crm-reach{display:flex;gap:8px;flex-wrap:wrap}
.crm-reach .btn{margin:0}
.crm-steps{display:flex;gap:8px;flex-wrap:wrap}
.crm-step{display:inline-flex;align-items:center;gap:7px;border:1.5px solid var(--line);border-radius:999px;padding:9px 14px;font-weight:700;font-size:13.5px;cursor:pointer;min-height:44px;box-sizing:border-box}
.crm-step input{position:absolute;opacity:0;pointer-events:none}
.crm-step i{width:9px;height:9px;border-radius:50%;background:var(--c)}
.crm-step.on{background:var(--c);border-color:var(--c);color:#fff}
.crm-step.on i{background:#fff}
.crm-nextbox{display:flex;align-items:center;gap:14px;background:#f5f3ff;border:1px solid #ddd6fe;border-radius:12px;padding:12px 14px}
.crm-nextbox.late{background:#fff7ed;border-color:#fed7aa}
.crm-nextbox .ic{width:40px;height:40px;border-radius:11px;background:#fff;display:grid;place-items:center;font-size:20px;flex:none}
.crm-nextbox small{display:block;color:var(--muted)}
.crm-nextform{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
@media (max-width:560px){.crm-nextform{grid-template-columns:1fr}}
.crm-noteform{display:flex;gap:8px;align-items:flex-start;margin-bottom:14px}
.crm-noteform textarea{flex:1}
.crm-noteform .btn{margin:0}
.crm-tl{position:relative;padding-left:20px}
.crm-tl:before{content:"";position:absolute;left:5px;top:6px;bottom:6px;width:2px;background:#e3e8f0}
.crm-ev{position:relative;margin-bottom:14px}
.crm-ev:before{content:"";position:absolute;left:-19px;top:5px;width:10px;height:10px;border-radius:50%;background:var(--c);box-shadow:0 0 0 3px #fff}
.crm-ev .sub{font-size:12px}
.crm-evbody{background:var(--bg);border-radius:10px;padding:8px 11px;margin-top:6px;font-size:13.5px}
/* fiches de prospects d'association jamais ouvertes (liste Prospects) */
tr.lr-unread .lr-name{font-weight:800}
tr.lr-unread .lr-name:before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--brand);margin-right:6px;vertical-align:1px}
.sw-badge{margin-left:auto}
/* 1.136.0 (brief CRM : « badge rouge = nombre de prospects dont la fiche n'a jamais été ouverte ») : pastilles rouges
   dans le menu, le sélecteur d'association et la liste des associations */
.navlink:not(.nav-start) .nav-badge,.sw-item .nav-badge,#assoTbl .nav-badge{background:#dc2626;color:#fff}
#assoTbl .nav-badge{margin-left:6px;font-size:11.5px}

.crm-kv{display:flex;gap:12px;padding:9px 0;border-top:1px solid #f0f3f8;font-size:14.5px}
.crm-kv:first-of-type{border-top:0}
.crm-kv span{width:170px;flex:none;color:var(--muted)}
.crm-kv b{font-weight:600;white-space:pre-line;overflow-wrap:anywhere;min-width:0}
@media (max-width:560px){.crm-kv{flex-direction:column;gap:2px}.crm-kv span{width:auto;font-size:12.5px}}

/* 1.137.0 — Présence → Statistiques → Par adhérent (classement d'assiduité) */
.pr-chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.pr-chip{display:inline-flex;align-items:center;min-height:38px;padding:7px 14px;border:1.5px solid var(--line);border-radius:999px;background:#fff;color:var(--ink);font-weight:600;font-size:13.5px;text-decoration:none}
.pr-chip.on{background:var(--brand);border-color:var(--brand);color:#fff}
.pr-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:10px}
.pr-kpis div{background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px 12px}
.pr-kpis b{display:block;font-size:22px;font-weight:800}
.pr-kpis span{font-size:12px;color:var(--muted)}
.pr-kpis .warn b{color:#c43333}
.pr-sort a{display:inline-flex;align-items:center;padding:9px 14px;color:var(--muted);font-weight:600;text-decoration:none;background:#fff;font-size:13.5px}
.pr-sort a.on{background:var(--brand-soft);color:var(--brand)}
.pr-rank{padding:0;overflow:hidden}
.pr-rrow{display:grid;grid-template-columns:30px minmax(0,1.4fr) minmax(0,1fr) auto;gap:12px;align-items:center;padding:11px 14px;border-top:1px solid var(--line)}
.pr-rrow:first-child{border-top:0}
.pr-pos{font-weight:800;color:var(--muted);text-align:center}
.pr-who .sub{font-size:12.5px}
.pr-streak{color:#c43333;font-weight:700}
.pr-rate b{font-size:16px}
.pr-rate i{display:block;height:7px;border-radius:9px;background:#eef1f5;margin:3px 0;overflow:hidden}
.pr-rate i span{display:block;height:100%;border-radius:9px}
.pr-rate.ok b{color:#177245}.pr-rate.ok i span{background:#22a35a}
.pr-rate.mid b{color:#b45309}.pr-rate.mid i span{background:#f59e0b}
.pr-rate.low b{color:#c43333}.pr-rate.low i span{background:#e5484d}
.pr-rate small{font-size:11.5px;color:var(--muted)}
.pr-none{padding:10px 14px;border-top:1px solid var(--line)}
@media (max-width:640px){
  .pr-rrow{grid-template-columns:24px minmax(0,1fr) auto;grid-template-areas:"p w v" "p r r"}
  .pr-pos{grid-area:p;align-self:start}.pr-who{grid-area:w}.pr-rate{grid-area:r}.pr-rrow .btn{grid-area:v}
}

/* 1.138.0 — colonnes personnalisables des listes (Adhérents, Contacts) */
.list-cols-bar{display:flex;justify-content:flex-end;margin:-4px 0 8px}
.list-cols{margin:0}
.list-cols .fdd-menu{left:auto;right:0}
@media (max-width:760px){.list-cols-bar{display:none}.tbl-cards .col-opt{display:none !important}}

/* 1.139.0 — fiche d'un cours (Configuration → Cours → Voir) */
.crs-hero{border-radius:18px;color:#fff;padding:20px 22px;margin-bottom:12px;background:linear-gradient(135deg,color-mix(in srgb,var(--c) 72%,#000),var(--c))}
.crs-hero h2{color:#fff;font-size:24px;font-weight:800;margin:0}
.crs-hero p{margin:10px 0 0;opacity:.93;font-size:14px}
.crs-chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.crs-chips span{background:rgba(255,255,255,.18);border-radius:999px;padding:4px 11px;font-size:13px;font-weight:600}
.crs-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px;margin-bottom:12px}
.crs-tiles .tile{background:#fff;border:1px solid var(--line);border-top:4px solid var(--c);border-radius:14px;padding:11px 13px}
.crs-tiles .tile small{display:block;font-size:11.5px;color:var(--muted);font-weight:800;text-transform:uppercase;letter-spacing:.04em}
.crs-tiles .tile b{display:block;font-size:24px;line-height:1.25;margin-top:2px}
.crs-tiles .tile b em{font-style:normal;font-size:15px;color:var(--muted);font-weight:600}
.crs-tiles .tile span{font-size:12.5px;color:var(--muted)}
.crs-bar{display:block;height:7px;border-radius:9px;background:#eef1f5;margin:4px 0;overflow:hidden}
.crs-bar span{display:block;height:100%;border-radius:9px}
.crs-mini{display:flex;gap:8px 18px;flex-wrap:wrap;font-size:13px;color:var(--muted);margin-bottom:10px}
.crs-mini b{color:var(--ink)}
.crs-list{border:1px solid var(--line);border-radius:12px;overflow:hidden}
.crs-lh,.crs-li{display:grid;grid-template-columns:minmax(0,1fr) 70px 130px 90px 64px;align-items:center;gap:10px;padding:8px 12px}
.crs-list.nopres .crs-lh,.crs-list.nopres .crs-li{grid-template-columns:minmax(0,1fr) 70px 130px 64px}
.crs-lh{background:var(--bg,#f6f7f9);font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.03em}
.crs-li{border-top:1px solid var(--line)}
.crs-li:hover{background:rgba(0,0,0,.025)}
.crs-nm{display:flex;align-items:center;gap:10px;min-width:0}
.crs-nm > span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.crs-c{font-size:13px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.crs-li .btn{margin:0;justify-self:end}
@media (max-width:640px){.crs-lh{display:none}.crs-lh,.crs-li,.crs-list.nopres .crs-li{grid-template-columns:minmax(0,1fr) auto auto}.crs-li .crs-c{display:none}}
.crs-rate{font-weight:800;font-size:14px}

/* 1.139.1 — Formulaires d'adhésion : liste courte (titre, prix, cours concernés, inscrits, Voir) */
.frm-list{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.frm-lh,.frm-li{display:grid;grid-template-columns:minmax(0,1.4fr) 120px minmax(0,1.6fr) 70px 64px;align-items:center;gap:12px;padding:10px 14px}
.frm-lh{background:var(--bg,#f6f7f9);font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.03em}
.frm-li{border-top:1px solid var(--line)}
.frm-li:hover{background:rgba(0,0,0,.025)}
.frm-t{display:flex;align-items:center;gap:8px;min-width:0}
.frm-t b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.frm-p{font-weight:700;font-size:13.5px}
.frm-c{font-size:13px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.frm-c em{font-style:normal;font-weight:700}
.frm-n{font-weight:700;text-align:center}
.frm-li .btn{margin:0;justify-self:end}
@media (max-width:760px){.frm-lh{display:none}.frm-li{grid-template-columns:minmax(0,1fr) auto;row-gap:2px}
  .frm-t{grid-column:1}.frm-li .btn{grid-column:2;grid-row:1 / span 3}.frm-p,.frm-c{grid-column:1;font-size:12.5px}.frm-n{display:none}}

/* 1.141.0 — nom court du club dans les adresses d'inscription */
.cc-box{border:2px solid var(--brand);background:#f3f8ff;border-radius:14px;padding:14px 16px;margin:0 0 16px}
.cc-box > b{font-size:15px}
.cc-box p{font-size:13px;margin:6px 0 10px;color:var(--ink)}
.cc-url{display:flex;align-items:center;border:1px solid var(--line);border-radius:10px;background:#fff;overflow:hidden;font-size:13.5px}
.cc-pre,.cc-post{color:var(--muted);white-space:nowrap;padding:10px 0}
.cc-pre{padding-left:11px;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:0 1 auto}
.cc-post{padding-right:11px}
.cc-in{border:0!important;flex:1 1 90px;min-width:70px;padding:10px 2px!important;font-weight:800;color:var(--brand);background:transparent;box-shadow:none!important}
.cc-msg{font-size:12.5px;margin-top:6px;font-weight:600}
.cc-msg.ok{color:#177245}.cc-msg.bad{color:#c43333}
.fw-url{display:flex;align-items:center;border:1px solid var(--line);border-radius:9px;background:#fff;overflow:hidden;font-size:13px}
.fw-url span{color:var(--muted);white-space:nowrap;padding:10px 0 10px 11px;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:0 1 auto}
.fw-url input{border:0!important;flex:1 1 90px;min-width:70px;padding:10px 11px 10px 0!important;font-weight:700;box-shadow:none!important}
.fw-url input[readonly]{background:#f3f4f6;color:var(--muted)}
@media (max-width:560px){
  .fw-url,.cc-url{flex-wrap:wrap}
  .fw-url span,.cc-pre{flex-basis:100%;padding:8px 11px 0!important;font-size:12px;white-space:normal;overflow-wrap:anywhere}
  .fw-url input{padding:4px 11px 9px!important}
  .cc-in{padding:4px 0 9px 11px!important}
  .cc-post{padding:4px 11px 9px 0}
}

/* 1.142.0 — À TRAITER (aides, objets à remettre, parrainages, virements) : listes en lignes, mêmes pièces partout */
.td-bar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:0 0 12px}
.td-bar .btn{margin:0}
.td-q{flex:0 1 280px;min-width:160px}
.td-sp{flex:1 1 auto}
.td-list{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.td-lh,.td-li{display:grid;align-items:center;gap:12px;padding:10px 14px}
.td-lh{background:#f6f7f9;font-size:11.5px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.td-li{border-top:1px solid #eef0f3}
.td-list > .td-li:first-child,.td-list > .td-lh + .td-li{border-top:0}
.td-lh + .td-li{border-top:1px solid #eef0f3 !important}
.td-aid{grid-template-columns:22px minmax(0,1.4fr) minmax(0,.9fr) minmax(0,1.2fr) minmax(0,1.5fr) 120px 64px}
.td-po{grid-template-columns:22px minmax(0,1.1fr) minmax(0,1.6fr) 90px minmax(0,1.5fr) 40px}
.td-give{grid-template-columns:minmax(0,1fr) auto}
.td-unl{grid-template-columns:minmax(0,1.1fr) minmax(0,1.6fr) auto;padding-left:0;padding-right:0}
.td-spr{grid-template-columns:minmax(0,1fr) minmax(0,2fr) minmax(0,.8fr)}
.crm-band .td-li{padding-left:0;padding-right:0}
.td-who{display:flex;align-items:center;gap:10px;min-width:0}
.td-who > span:last-child{min-width:0}
.td-av{width:34px;height:34px;font-size:12px;flex:none}
.td-c{display:block;font-size:12.5px}
.td-act{display:flex;gap:6px;justify-content:flex-end;flex-wrap:wrap}
.td-act .btn,.td-act form{margin:0}
.td-empty{padding:18px;color:var(--muted);text-align:center}
.td-bad{color:var(--bad)}
.td-st-warn{background:var(--warn-soft);color:#8a6400}.td-st-blue{background:var(--info-soft);color:#1b4fc4}
.td-st-violet{background:#efe9fd;color:#5b34c4}.td-st-ok{background:var(--ok-soft);color:#177245}.td-st-bad{background:var(--bad-soft);color:#a5281b}
.td-bulk{margin-top:10px}
.td-size{display:inline-block;background:#eef0f3;border-radius:7px;padding:0 7px;font-weight:800;color:var(--ink)}
.td-done{background:#f7fbf8}
.td-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px;margin-bottom:12px}
.td-tiles .tile{background:#fff;border:1px solid var(--line);border-top:4px solid var(--brand);border-radius:14px;padding:10px 13px}
.td-tiles .tile small{display:block;font-size:11.5px;color:var(--muted);font-weight:800;text-transform:uppercase;letter-spacing:.04em}
.td-tiles .tile b{display:block;font-size:22px}
.td-tiles .tile b em{font-style:normal;font-size:13px;color:var(--muted);font-weight:600}
.td-tiles .tile span{font-size:12.5px;color:var(--muted)}
.td-seg{display:inline-flex;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#fff}
.td-seg a{padding:7px 12px;font-size:13px;font-weight:700;color:#4b5563;text-decoration:none}
.td-seg a + a{border-left:1px solid var(--line)}
.td-seg a.on{background:var(--brand);color:#fff}
.td-cmd{display:flex;gap:12px;align-items:center;flex-wrap:wrap;padding:10px 0;border-top:1px solid #f0f3f8}
.td-cmd:first-of-type{border-top:0}
.td-cmd-c{display:flex;gap:6px;flex-wrap:wrap;flex:1 1 300px}
.td-cell{border:1px solid var(--line);border-radius:10px;padding:4px 10px;text-align:center;min-width:52px}
.td-cell small{display:block;font-size:11.5px;color:var(--muted)}
.td-cell b{font-size:17px}
.td-cell.w{background:var(--warn-soft);border-color:#f1dfae}
.td-sizes{display:grid;grid-template-columns:repeat(auto-fill,minmax(70px,1fr));gap:8px}
.td-sz{position:relative;display:block}
.td-sz input{position:absolute;opacity:0;pointer-events:none}
.td-sz span{display:flex;align-items:center;justify-content:center;min-height:50px;border:1.5px solid #d6dbe2;border-radius:12px;font-weight:800;font-size:16px;cursor:pointer;background:#fff}
.td-sz input:checked + span{background:var(--brand);border-color:var(--brand);color:#fff}
.td-sz input:focus-visible + span{box-shadow:0 0 0 3px var(--brand-soft)}
.td-sugg{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.td-fl{display:flex;gap:6px;flex-wrap:wrap}
.td-f{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:999px;padding:3px 4px 3px 10px;font-size:12.5px}
.td-f i{width:8px;height:8px;border-radius:50%;flex:none}
.td-x{border:0;background:none;color:var(--muted);font-size:15px;cursor:pointer;padding:0 6px;line-height:1}
.td-x2{color:var(--muted)}
.td-iban{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;white-space:nowrap}
.td-done-r{display:grid;grid-template-columns:minmax(0,1fr) 90px 90px;gap:10px;align-items:center}
@media (max-width:760px){
  .td-lh{display:none}
  .td-aid{grid-template-columns:22px minmax(0,1fr) auto;row-gap:4px}
  .td-aid > span:nth-child(3){grid-column:2}
  .td-aid > span:nth-child(6){grid-column:2}
  .td-aid > .td-act{grid-column:3;grid-row:1 / span 3}
  .td-hide-m{display:none}
  .td-po{grid-template-columns:22px minmax(0,1fr) auto;row-gap:4px}
  .td-po > *:nth-child(3),.td-po > *:nth-child(5){grid-column:2 / -1}
  .td-po > b{grid-column:3;grid-row:1}
  .td-po > .td-act{grid-column:3;grid-row:3}
  .td-unl,.td-spr{grid-template-columns:minmax(0,1fr)}
  .td-unl .td-act{justify-content:flex-start}
  .td-q{flex:1 1 100%}
  .td-done-r{grid-template-columns:minmax(0,1fr) auto}
  .td-done-r .sub{display:none}
}

/* 1.147.0 — abonnement : bandeau commun de l'espace club (essai, impayé, lecture seule) */
.bil-banner{display:flex;align-items:center;gap:12px;flex-wrap:wrap;color:#fff;border-radius:12px;padding:10px 14px;margin-bottom:14px;font-size:13.5px}
.bil-banner .btn{margin-left:auto}
@media(max-width:760px){.bil-banner .btn{margin-left:0;width:100%;justify-content:center}}

/* ═══════════ IMPRESSION DES ÉTATS COMPTABLES (1.148.4, 04/10) ═══════════
   Olivier : « Imprimer imprime toute la page, avec les documents archivés, sur plusieurs pages, toute la largeur ».
   Règle commune : ne s'imprime que l'état (#printzone) précédé de son en-tête .print-head ; A4 portrait, table serrée. */
.print-head{display:none}
@media print{
  @page{size:A4 portrait;margin:14mm 12mm}
  .sidebar,.topbar,.note,.btn,.backdrop,.back-bar,.flash,.stats,.sticky-actions,.bil-banner,.season-menu,.dcf-ov,
  #acctdocs,#ecartCard,.no-print,.toolbar,.lead-tabs,.sp-search,.res-count{display:none !important}
  .content{padding:0 !important;max-width:none !important}
  .print-head{display:block;margin:0 0 10px;padding:0 0 8px;border-bottom:2px solid #1c2530}
  .print-head h1{margin:0;font-size:18px}.print-head .sub{font-size:11.5px;color:#444}
  .card{box-shadow:none !important;border:1px solid #bbb !important;border-radius:0 !important;margin:0 !important}
  .tbl-wrap{overflow:visible !important}
  #printzone table,.pz table{width:100%;font-size:10.5px;border-collapse:collapse}
  #printzone th,#printzone td,.pz th,.pz td{padding:3px 6px !important;border-bottom:1px solid #e3e3e3}
  #printzone tr,.pz tr{break-inside:avoid}
  #printzone .tag-mini,.pz .tag-mini{border:0;background:none;padding:0;font-size:10px}
  #printzone tr[style*="1c2530"] td{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}

/* ═══════════ BARRE « SAISON COMPTABLE » (1.148.5/6) ═══════════ Olivier, 05/10 : « sur mobile ça ne passe pas ». */
.acct-season{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.acct-season label{display:flex;align-items:center;gap:8px;min-width:0}
.acct-season select{max-width:100%}
@media(max-width:760px){
  .acct-season label{display:grid;grid-template-columns:1fr;gap:6px;width:100%}
  .acct-season select{width:100%}
  .acct-season .badge{white-space:normal;line-height:1.35;width:100%;box-sizing:border-box}
}

/* 1.161.0 — Présence → Statistiques → Coachs (bandes empilées, une ligne = une info) */
.pc-period{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap;margin-bottom:12px}
.pc-period .field{margin:0;min-width:150px}
.pc-coach,.pc-alert{margin-bottom:12px}
.pc-alert{border-color:#f0dc9c;background:#fffaf0}
.pc-alert p{margin:6px 0 4px;font-size:13.5px}
.pc-sec{font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#8a6400}
.pc-head{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;margin-bottom:6px}
.pc-head b{font-size:15.5px}
.pc-line{display:flex;gap:12px;align-items:center;justify-content:space-between;padding:8px 0;border-top:1px solid var(--line);font-size:13.5px}
.pc-line b{white-space:nowrap;font-variant-numeric:tabular-nums}
.pc-det summary{cursor:pointer;color:var(--brand-dark);font-weight:600;font-size:13px;padding:8px 0 2px}

/* 1.161.0 — fiche : partie paiement sous la formule, puis les autres saisons */
.rv2-paypart{margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.rv2-seasons{margin-top:12px;padding-top:10px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:6px}
.rv2-srow{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:13.5px}

/* 1.163.0 — deux boutons Mollie : créer le compte / déjà un compte */
.mc-two{display:inline-flex;gap:8px;flex-wrap:wrap;align-items:center;justify-content:flex-end}

/* 1.163.3 — lignes cliquables (charte) */
[data-open]{cursor:pointer}
tr[data-open]:hover td,.lrow[data-open]:hover{background:var(--info-soft,#eef4fd)}
a.btn[aria-disabled="true"]{opacity:.45;pointer-events:none}
/* 1.163.3 — légende des codes {prenom}… (toujours visible, une ligne par code) */
.vars-leg{border:1px solid var(--line);border-radius:10px;padding:8px 12px;margin:8px 0 4px;background:#fbfcfe;font-size:13px}
.vars-leg .vl-t{font-size:12px;font-weight:700;color:var(--muted);margin-bottom:4px}
.vars-leg .vl-r{display:grid;grid-template-columns:minmax(110px,max-content) minmax(0,1fr);gap:10px;padding:4px 0;border-top:1px solid var(--line);align-items:baseline}
.vars-leg .vl-r:first-of-type{border-top:0}
.vars-leg .vl-c{font-family:ui-monospace,Menlo,monospace;font-size:12.5px;background:var(--brand-soft,#e7f1fe);color:var(--brand-dark,#0550B5);border:0;border-radius:6px;padding:1px 7px;text-align:left;white-space:nowrap}
.vars-leg button.vl-c{cursor:pointer}
.vars-leg .vl-ex{color:var(--muted);font-size:12px}
@media (max-width:600px){.vars-leg .vl-r{grid-template-columns:1fr;gap:2px}}

/* ═══════════ 1.167.0 — PHRASE D'ÉTAT, CHOIX, PAS À PAS ═══════════
   Olivier (09/10) : la page Paiement en ligne « incompréhensible ». Maquette validée le 11/10 :
   en tête, UNE phrase d'état simple (« Prêt à encaisser », « En test : aucun vrai paiement »…),
   des choix en rangées pleine largeur, un pas à pas numéroté qui dit où cliquer chez le prestataire.
   Composants génériques, réutilisables par tout écran qui a un état à annoncer ou une démarche à guider. */
.state-band{display:flex;gap:14px;align-items:flex-start;flex-wrap:wrap;border-radius:var(--radius);padding:16px 18px;border:1px solid var(--line)}
.state-band .sb-dot{width:12px;height:12px;border-radius:50%;margin-top:7px;flex:none;background:#8a94a1}
.state-band .sb-txt{flex:1;min-width:220px}
.state-band .sb-txt b{font-size:19px;font-weight:700;display:block;line-height:1.3}
.state-band .sb-txt p{margin:4px 0 0;font-size:13.5px}
.state-band.sb-small .sb-txt b{font-size:15px}
.state-band.sb-small .sb-txt p{font-size:12.5px;overflow-wrap:anywhere}
.sb-off{background:#eef0f3;border-color:#dde1e7}
.sb-warn{background:var(--warn-soft);border-color:#f0dca4}.sb-warn .sb-dot{background:var(--warn)}
.sb-ok{background:var(--ok-soft);border-color:#bfe3cc}.sb-ok .sb-dot{background:var(--ok)}
.sb-bad{background:var(--bad-soft);border-color:#f3c9c3}.sb-bad .sb-dot{background:var(--bad)}
.card-t{font-size:15px;margin:0}
.pick-row{display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap;border-top:1px solid var(--line);padding:16px 0 4px;margin-top:12px}
.pick-row .pick-b{flex:1;min-width:240px}
.pick-row .pick-t{font-size:15px;font-weight:650}
.pick-row ul{margin:6px 0 0;padding-left:18px;font-size:13px;color:#3d4753}
.pick-row p{margin:4px 0 0;font-size:13px;color:#3d4753}
.pick-row form{margin:0}
.pick-tag{display:inline-block;font-size:11.5px;font-weight:650;padding:2px 8px;border-radius:20px;background:var(--brand-soft);color:var(--brand-dark);margin-left:6px;vertical-align:2px}
.pick-tag.cur{background:var(--ok-soft);color:#177245}
.pas-list{margin-top:6px}
.pas-step{display:flex;gap:14px;border-top:1px solid var(--line);padding:16px 0}
.pas-list>.pas-step:first-child{border-top:0}
.pas-n{width:30px;height:30px;border-radius:50%;background:var(--brand-soft);color:var(--brand-dark);font-weight:700;display:flex;align-items:center;justify-content:center;flex:none}
.pas-n.done{background:var(--ok-soft);color:#177245}
.pas-b{flex:1;min-width:0}
.pas-t{font-weight:650;margin-top:4px}
.pas-b p,.pas-list>p{margin:4px 0 0;font-size:13px;color:#3d4753}
.pas-path{color:var(--ink)}
.pas-b .field,.pas-list .field{margin-top:10px;max-width:560px}
.pas-act{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.pre-in{display:flex;align-items:stretch;border:1px solid var(--line);border-radius:9px;overflow:hidden;background:#fff}
.pre-in span{padding:0 10px;color:var(--muted);font-size:13px;background:#f6f7f9;display:flex;align-items:center;border-right:1px solid var(--line);white-space:nowrap}
.pre-in input{border:0 !important;border-radius:0 !important;flex:1;min-width:0;box-shadow:none !important}
.chk-ok,.chk-bad{margin-top:10px;border-radius:9px;padding:10px 12px;font-size:13px}
.chk-ok{background:var(--ok-soft);color:#177245;font-weight:600}
.chk-bad{background:var(--bad-soft);color:#a3261a}
.copy-line{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:8px}
.copy-line code{flex:1;min-width:200px;background:#f6f7f9;border:1px solid var(--line);border-radius:9px;padding:10px 12px;font-size:12.5px;word-break:break-all;font-weight:500}
.act-row{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;border-top:1px solid var(--line);padding:12px 0}
.ro-e>.act-row:first-child{border-top:0}
.act-row>p{margin:0;font-size:13px;color:#3d4753;flex:1;min-width:220px}
.act-row form{margin:0}
.pill-s{display:inline-block;font-size:12px;font-weight:650;padding:2px 9px;border-radius:20px}
.ps-ok{background:var(--ok-soft);color:#177245}.ps-warn{background:var(--warn-soft);color:#7a5600}
details.pay-fold>summary{cursor:pointer;list-style:none}
details.pay-fold>summary::-webkit-details-marker{display:none}
details.pay-fold>summary h3{font-size:15px;margin:0}
details.pay-fold>summary h3::before{content:"▸ ";color:var(--muted);font-size:13px}
details.pay-fold[open]>summary h3::before{content:"▾ "}
details.pay-fold .sub-in{font-weight:500;color:var(--muted);font-size:13px}
@media(max-width:760px){
  .pick-row .btn,.pick-row form,.act-row .btn,.act-row form{width:100%;justify-content:center}
  .pre-in{flex-direction:column}.pre-in span{border-right:0;border-bottom:1px solid var(--line);padding:8px 10px;white-space:normal}
}
/* ===== 1.168.0 — AIDE et assistant « Une question ? » (07/10, Olivier). Bouton en bas du menu ; panneau latéral à droite
   sur ordinateur, plein écran sur téléphone ; page Aide = articles du guide app/aide/*.md. ===== */
.aide-foot{margin-top:10px;padding-top:10px;border-top:1px solid #1B4370}
.aide-ask-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:44px;padding:8px 12px;border-radius:10px;
  border:1px solid #2c5a8c;background:#123a66;color:#fff;font-weight:650;font-size:14px}
.aide-ask-btn:hover{background:#174a80}
.sb-foot .aide-link{display:inline-flex;align-items:center;gap:6px;min-height:36px;margin-top:4px;color:#d6e2f0;font-weight:600;font-size:13px;text-decoration:none}
.sb-foot .aide-link:hover{text-decoration:underline}
.aide-backdrop{position:fixed;inset:0;background:rgba(20,27,36,.35);z-index:240}
.aide-panel{position:fixed;top:0;right:0;bottom:0;width:440px;max-width:100%;background:var(--panel);z-index:250;display:flex;flex-direction:column;
  box-shadow:-8px 0 30px rgba(20,30,45,.18);border-left:1px solid var(--line)}
.aide-panel[hidden],.aide-backdrop[hidden]{display:none}
.aide-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:16px 18px;border-bottom:1px solid var(--line);
  background:var(--brand-soft)}
.aide-title{font-size:17px;font-weight:700;color:var(--brand-dark)}
.aide-sub{font-size:12.5px;color:var(--muted);margin-top:2px}
.aide-log{flex:1;overflow:auto;padding:16px 18px;display:flex;flex-direction:column;gap:12px}
.aide-msg{padding:11px 14px;border-radius:12px;font-size:14px;line-height:1.55;max-width:92%;white-space:pre-wrap;word-wrap:break-word}
.aide-me{align-self:flex-end;background:var(--brand);color:#fff;border-bottom-right-radius:4px}
.aide-bot{align-self:flex-start;background:#f2f4f7;border-bottom-left-radius:4px}
.aide-bot.aide-err{background:var(--warn-soft)}
.aide-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.aide-acts .btn{min-height:40px}
.aide-vote{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--muted)}
.aide-vote button{border:1px solid var(--line);background:#fff;border-radius:8px;min-width:40px;min-height:36px}
.aide-vote button.on{background:var(--brand-soft);border-color:var(--brand)}
.aide-off{padding:14px 18px;border-top:1px solid var(--line);font-size:13.5px;background:#f6f7f9}
.aide-form{border-top:1px solid var(--line);padding:12px 18px 16px}
.aide-form .field{margin:0}
.aide-form textarea{resize:none;min-height:56px}
.aide-form-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:8px}
.aide-form-foot .sub{font-size:12px}
.aide-dots::after{content:'…';animation:aideDots 1.2s infinite steps(4)}
@keyframes aideDots{0%{content:''}25%{content:'.'}50%{content:'..'}75%{content:'…'}}
@media (max-width:760px){
  .aide-panel{width:100%;border-left:none}
  .aide-form-foot .sub{display:none}
  .aide-form-foot .btn{margin-left:auto}
}
/* Page Aide : articles du guide */
.aide-art{font-size:14.5px;line-height:1.65}
.aide-art h2{font-size:20px;margin:6px 0 10px}
.aide-art .aide-h3{font-size:16.5px;margin:22px 0 8px;padding-top:12px;border-top:1px solid var(--line)}
.aide-art .aide-h4{font-size:15px;margin:16px 0 6px;color:var(--brand-dark)}
.aide-art p{margin:6px 0}
.aide-art ul,.aide-art ol{margin:6px 0 6px 22px;padding:0}
.aide-art li{margin:3px 0}
.aide-art code{background:#f2f4f7;border-radius:5px;padding:1px 5px;font-size:13px}
.aide-res{display:flex;flex-direction:column}
.aide-res a.aide-row{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:12px 4px;border-top:1px solid var(--line);color:var(--ink)}
.aide-res a.aide-row:first-child{border-top:none}
.aide-row .t{font-weight:650}
.aide-row .m{font-size:12.5px;color:var(--muted)}
/* 1.171.0 — lien-bouton discret (« déjà un compte ? Se connecter ») : un vrai bouton, l'allure d'un lien. */
.lk-btn{background:none;border:0;padding:6px 0;color:var(--brand);font:inherit;font-size:13.5px;font-weight:600;cursor:pointer;text-align:left;min-height:44px}
.lk-btn:hover{text-decoration:underline}
.ext-note{font-size:12.5px;color:var(--muted);margin-top:8px}

/* 1.173.0 — bouton « ❓ Aide » de la barre du haut (toujours visible) ; sur téléphone, le point d'interrogation seul */
/* 1.179.0 (Olivier, 13/10 : « ce gros point d'interrogation, c'est pas très beau ; ce bloc du haut est beaucoup trop gros ») :
   bouton d'aide discret (rond fin, « ? » dessiné en texte, pas d'emoji) ; sur téléphone, la barre du haut tient sur UNE
   ligne : pas de fil d'Ariane, titre tronqué, saison sans le mot « Saison ». Vaut pour tous les écrans. */
.aide-top-btn{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:7px;white-space:nowrap;height:32px;padding:0 12px 0 5px;
  border:1px solid var(--line);border-radius:20px;background:#fff;color:var(--muted);font-weight:600;font-size:12.5px}
.aide-top-btn::-webkit-details-marker{display:none}
.aide-top-btn:hover{color:var(--brand-dark);border-color:#C6DDF9}
.aide-top-q{width:22px;height:22px;border-radius:50%;border:1.5px solid currentColor;display:inline-flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:700;line-height:1}
@media (max-width:760px){
  .aide-top-t{display:none}
  .aide-top-btn{padding:0;width:36px;height:36px;justify-content:center;border-color:transparent;background:transparent}
  .topbar{gap:10px}
  .topbar .crumb{display:none}
  .topbar>div:first-child{flex:1;min-width:0}
  .topbar h2{font-size:17px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0}
  .topbar>div:last-child{gap:6px!important;flex:none}
  .season-pill .sp-word{display:none}
  .season-pill{padding:5px 10px}
}
/* 1.173.0 — article d'aide lisible : sommaire et volets */
.aide-toc{background:var(--brand-soft,#e7f1fe);border-radius:12px;padding:12px 16px;margin:16px 0 8px}
.aide-toc-t{font-size:12px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--brand-dark,#0550B5);margin:6px 0 4px}
.aide-toc ul{margin:0 0 6px 18px;padding:0}
.aide-toc li{margin:5px 0}
.aide-toc a{font-weight:600}
.aide-art details.aide-sec{border:1px solid var(--line);border-radius:10px;margin:8px 0;background:#fff}
.aide-art details.aide-sec>summary{cursor:pointer;padding:12px 14px;font-weight:650;min-height:44px;display:flex;align-items:center;gap:8px;list-style:none}
.aide-art details.aide-sec>summary::-webkit-details-marker{display:none}
.aide-art details.aide-sec>summary::before{content:'▸';color:var(--muted);transition:transform .15s}
.aide-art details.aide-sec[open]>summary::before{transform:rotate(90deg)}
.aide-art .aide-sec-b{padding:0 16px 12px}
.aide-art details.aide-big>summary{font-size:15.5px}
/* 1.180.0 — carte « Dernière étape : faire vérifier l'association par Mollie » */
.onb-kyc{border-color:#f0dca4;background:#fffcf3}
.kyc-list{margin:10px 0 8px;padding-left:20px;font-size:13.5px;line-height:1.7}

/* ===== 1.181.0 — 🛟 SUPPORT « Une personne » (maquette validée par Olivier le 14/10) ===== */
.aide-tabs{display:flex;gap:6px;padding:6px 18px 0;border-bottom:1px solid var(--line);background:var(--panel);flex:none}
.aide-tab{flex:1;display:flex;align-items:center;justify-content:center;gap:7px;min-height:44px;border:0;background:transparent;font-weight:650;font-size:14px;color:var(--muted);border-bottom:3px solid transparent;margin-bottom:-1px;cursor:pointer}
.aide-tab.on{color:var(--brand-dark);border-bottom-color:var(--brand)}
.aide-pane{flex:1;display:flex;flex-direction:column;min-height:0}
.aide-pane[hidden]{display:none}
.sup-badge{margin-left:4px;background:#dc2626!important;color:#fff!important;font-size:11.5px;font-weight:800;border-radius:99px;padding:1px 7px}
.sup-badge[hidden]{display:none}
.aide-top-btn{position:relative}
.sup-dotbadge{position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;border-radius:99px;background:#dc2626;color:#fff;font-size:11px;font-weight:800;display:inline-flex;align-items:center;justify-content:center;padding:0 4px}
.aide-human{margin-top:2px;padding:12px 14px;border:1.5px dashed #c9dcf7;border-radius:12px;background:var(--brand-soft);font-size:13.5px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.aide-human[hidden]{display:none}
.aide-human b{flex:1;min-width:180px;color:var(--brand-dark)}
.aide-human.hot{border-style:solid;border-color:var(--brand)}
.aide-human .btn{min-height:40px;margin:0}
.sup-intro{font-size:13.5px;color:var(--muted);line-height:1.5}
.sup-h{font-size:11.5px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin-top:4px}
.sup-ctx{background:#f6f7f9;border:1px solid var(--line);border-radius:10px;padding:10px 12px;font-size:12.5px;color:var(--muted);line-height:1.6}
.sup-ctx b{color:var(--ink);font-weight:600}
.sup-th{display:flex;flex-direction:column;gap:10px}
.sup-who{font-size:11.5px;font-weight:700;opacity:.8;margin-bottom:3px}
.aide-msg.sup-staff{align-self:flex-start;background:#e8f6ee;border:1px solid #bfe3cc;border-bottom-left-radius:4px}
.sup-file{margin-top:8px;display:inline-flex}
.aide-me .sup-file{background:#fff;color:var(--ink)}
.sup-item{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:#fff;width:100%;text-align:left;font:inherit;color:inherit;min-height:44px}
button.sup-item{cursor:pointer}button.sup-item:hover{border-color:#bcd3ee}
.sup-item .t{font-weight:650;flex:1;min-width:0}
.sup-item .m{font-size:12.5px;color:var(--muted);font-weight:500}
.sup-go{color:var(--muted);font-size:20px}
.sup-ok{background:#e8f6ee;border:1px solid #bfe3cc;border-radius:10px;padding:10px 12px;font-size:13.5px;color:#177245}
.sup-back{align-self:flex-start;margin:0}
.sup-foot{display:flex;justify-content:flex-end;gap:8px}
.sup-foot .btn{margin:0}
.sup-dot{width:10px;height:10px;border-radius:50%;background:#dc2626;flex:none}
.sup-dot.ok{background:var(--ok)}.sup-dot.grey{background:#c5ccd6}.sup-dot.wait{background:#e0a100}
.sup-banner{display:flex;align-items:center;gap:14px;flex-wrap:wrap;background:#fff4ed;border:1.5px solid #f5c9a8;border-radius:12px;padding:14px 18px;margin-bottom:14px}
.sup-banner b{font-size:15.5px;color:#9a3412}
.sup-banner .sub{flex:1;min-width:200px}
.sup-banner-ic{font-size:24px}
.sup-banner .btn{margin:0}
.sup-gh{padding:10px 18px;font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;border-bottom:1px solid var(--line)}
.sup-gh-bad{color:#a5281b;background:#fdf4f3}
.sup-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto auto;gap:14px;align-items:center}
.sup-row .q{font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sup-row .m{font-size:12.5px;color:var(--muted)}
.sup-row .age{font-size:12.5px;color:var(--muted);white-space:nowrap}
.sup-row .btn{margin:0}
.sup-head{color:#fff;padding:18px 22px}
.sup-head-k{font-size:12px;font-weight:700;letter-spacing:.08em;opacity:.85}
.sup-head-t{font-size:22px;font-weight:800;line-height:1.25}
.sup-head-s{opacity:.92;font-size:14px}
.sup-tiles{display:grid;grid-template-columns:repeat(4,1fr)}
.sup-tiles>div{padding:12px 18px;border-right:1px solid var(--line);display:flex;flex-direction:column}
.sup-tiles>div:last-child{border-right:0}
.sup-tiles b{font-size:17px;font-weight:750}
.sup-join{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.sup-join .btn{margin:0}
.sup-ai-d{margin-bottom:12px}
.sup-ai-d summary{cursor:pointer;font-weight:600;font-size:13.5px;color:var(--brand-dark);min-height:32px}
.sup-ia{border-left:3px solid #c9dcf7;padding:4px 0 4px 12px;margin-top:8px;font-size:13px;color:var(--muted);display:flex;flex-direction:column;gap:6px}
.sup-msg{padding:12px 14px;border-radius:12px;font-size:14px;line-height:1.55;max-width:88%}
.sup-msg.user{background:#f2f4f7;align-self:flex-start;border-bottom-left-radius:4px}
.sup-msg.staff{background:var(--brand);color:#fff;align-self:flex-end;border-bottom-right-radius:4px}
.sup-msg.staff .btn{color:var(--ink)}
.sup-reply{margin-top:14px}
.sup-reply-foot{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.sup-reply-foot .btn{margin:0}
@media(max-width:760px){
  .sup-row{grid-template-columns:auto minmax(0,1fr) auto}.sup-row .age,.sup-row>span:nth-child(3){display:none}.sup-row .q{white-space:normal}
  .sup-tiles{grid-template-columns:1fr 1fr}.sup-tiles>div:nth-child(2){border-right:0}.sup-tiles>div:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .sup-head-t{font-size:19px}
  .sup-msg{max-width:100%}
}

/* ===== 1.182.0 — 🎓 TUTOS (maquettes validées par Olivier le 15/10) ===== */
.tuto{border:1.5px solid #c9dcf7;background:linear-gradient(180deg,#f3f8ff 0,#fff 120px);border-radius:14px;padding:16px 18px 14px;margin-bottom:16px;position:relative}
.tuto-k{font-size:11.5px;font-weight:800;letter-spacing:.06em;color:var(--brand-dark);text-transform:uppercase;padding-right:40px}
.tuto-t{font-size:18px;font-weight:800;margin:2px 0 4px;color:var(--ink)}
.tuto-s{font-size:13.5px;color:var(--muted);margin-bottom:12px;line-height:1.5}
.tuto>.x{position:absolute;top:8px;right:10px;border:0;background:transparent;font-size:22px;color:var(--muted);min-width:44px;min-height:44px;cursor:pointer}
.tuto-steps{display:flex;flex-direction:column;gap:8px;margin:0;padding:0;list-style:none}
.tuto-st{display:grid;grid-template-columns:30px minmax(0,1fr);gap:12px;align-items:start;background:#fff;border:1px solid var(--line);border-radius:12px;padding:11px 13px}
.tuto-n{width:28px;height:28px;border-radius:50%;background:var(--brand-soft);color:var(--brand-dark);font-weight:800;display:flex;align-items:center;justify-content:center;font-size:13.5px}
.tuto-st.done{background:#fbfdfb}
.tuto-st.done .tuto-n{background:#e8f6ee;color:#177245}
.tuto-st.cur{border-color:var(--brand);box-shadow:0 0 0 2px var(--brand-soft)}
.tuto-h{font-weight:700;font-size:14.5px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.tuto-h .chip{font-size:11px}
.tuto-why{font-size:13px;color:var(--muted);margin-top:3px;line-height:1.5}
.tuto-why b{color:var(--ink);font-weight:650}
.tuto-ex{margin-top:7px;font-size:12.5px;background:#fbf7ec;border:1px solid #f0e2b8;border-radius:9px;padding:7px 10px;line-height:1.5;color:#5b4a14}
.tuto-ex b{color:#3f330d}
.tuto-go{margin-top:8px;display:flex;gap:8px;flex-wrap:wrap}
.tuto-go .btn{margin:0;min-height:40px}
.tuto-foot{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:12px}
.tuto-foot .btn{margin:0}
.tuto-foot .sub{font-size:12px;flex:1;min-width:180px}
.tuto-tree{font-size:12.5px;line-height:1.7;margin-top:7px;background:#fff;border:1px solid var(--line);border-radius:9px;padding:8px 12px}
.tuto-tree .c{font-weight:800;color:var(--brand-dark)}
.tuto-tree .s{font-weight:700;padding-left:16px}
.tuto-tree .t{padding-left:32px;color:var(--ink)}
.tuto-tree .t i{color:var(--muted);font-style:normal}
/* garde-fou « vos cours d'abord » */
.gf-why{font-size:14px;line-height:1.55;margin:0 0 10px}
.gf-list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px;font-size:13.5px}
.gf-list li{display:flex;gap:8px;align-items:flex-start}
.modal-foot.gf-foot{flex-wrap:wrap}
/* légende de la feuille d'appel */
.lg-btn{display:inline-flex;align-items:center;gap:6px}
.lg-sheet{position:fixed;left:0;right:0;bottom:0;background:#fff;border-radius:18px 18px 0 0;box-shadow:0 -10px 40px rgba(20,30,45,.25);z-index:300;padding:14px 18px 20px;max-height:82vh;overflow:auto}
.lg-sheet[hidden],.lg-back[hidden]{display:none}
.lg-back{position:fixed;inset:0;background:rgba(20,27,36,.35);z-index:290}
.lg-grip{width:44px;height:5px;border-radius:99px;background:#d6dbe2;margin:0 auto 10px}
.lg-t{font-size:17px;font-weight:800;margin-bottom:2px}
.lg-row{display:grid;grid-template-columns:64px minmax(0,1fr);gap:12px;align-items:center;padding:9px 0;border-top:1px solid var(--line)}
.lg-ic{height:44px;border-radius:10px;border:2px solid var(--line);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:15px;background:#f6f7f9}
.lg-ic.on{border-color:#1d9a4e;box-shadow:0 0 0 2px #1d9a4e;background:#fff;color:#1d9a4e}
.lg-ic.exc{border-color:#c98a00;background:#fff8e6;color:#8a6400;font-size:12px}
.lg-ic.late{border-color:#e07a00;color:#b45309;background:#fff4ed}
.lg-b{font-size:14px;line-height:1.45}.lg-b b{display:block}
.lg-b span{color:var(--muted);font-size:13px}
@media(min-width:761px){.lg-sheet{left:auto;right:24px;bottom:24px;width:420px;border-radius:16px}}