:root{
  /* Branding — couleurs exactes de la charte 2026 (« Court Colours »), relevees
     aussi dans les variables du site Webflow :
       #073EB5 Absolute Blue · #B2FD13 Energizing Mint Green
       #003652 Prussian Blue · #137297 Ocean Blue
     Les variantes -d (foncee) et -ink (texte) en sont derivees. */
  --blue:#073eb5; --blue-d:#052f8c; --blue-ink:#04205e;
  --fluo:#b2fd13; --fluo-d:#9ae00c; --fluo-ink:#14300a;
  --prussian:#003652; --ocean:#137297;

  /* Le thème de l'app (espace membres) suit le bleu du club. */
  --green:#073eb5; --green-d:#052f8c; --mine:#073eb5;
  --bg:#f5f7fb; --card:#fff;
  --line:#e4e8f0; --ink:#141a2e; --muted:#69708a;
  --free:#ffffff; --busy:#c9ccd6;
  --radius:1.5rem; --shadow:0 2px 14px rgba(20,26,46,.08);

  /* Echelle du systeme Webflow, disponible pour la suite. */
  --radius-sm:.25rem; --radius-md:.5rem; --radius-lg:2rem;
  --sec-sm:4rem; --sec-md:5rem; --sec-lg:7.5rem; --sec-xl:10rem;
  --container:75rem;

  /* Polices de marque (guidelines 2026) : Acumin Pro pour les titres et le corps,
     Circe pour les titres. Noto Sans est le repli officiel prevu par la charte
     quand ces polices ne peuvent pas etre servies. */
  --font-body:acumin-pro,"Noto Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-accent:circe,"Noto Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
*{box-sizing:border-box}
/* Icône inline (remplace les emoji dans les titres/labels) */
.hi{display:inline-block;width:1.05em;height:1.05em;vertical-align:-.14em;margin-right:.42em;flex-shrink:0}
.hi *{vector-effect:non-scaling-stroke}
/* « 100vw » compte la barre de defilement verticale, alors que la place
   reellement disponible ne la compte pas : chaque bandeau pleine largeur
   depasse donc de la largeur de la barre et la page se met a glisser de
   quelques pixels sur le cote. « clip » sur la racine ferme cette fuite.
   « clip » et non « hidden » : hidden ferait de la racine un conteneur de
   defilement et casserait position:sticky a l'interieur. Le meme reglage
   existait deja sur body, mais l'overflow de body est propage a la fenetre et
   ne s'applique donc pas a lui-meme. */
html{overflow-x:clip}
html,body{margin:0;height:100%}
body{font-family:var(--font-body);
  color:var(--ink);background:var(--bg);-webkit-text-size-adjust:100%}
.hidden{display:none!important}
.screen{min-height:100dvh}
.center{display:flex;align-items:center;justify-content:center;padding:24px}
.muted{color:var(--muted)}
.error{color:#b3261e;font-size:.9rem}

/* ---- Login ---- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:24px;width:100%;max-width:360px;
  display:flex;flex-direction:column;gap:12px}
.brand{margin:0;font-size:1.5rem;color:var(--green)}
.brand-sm{font-weight:700;color:var(--green)}
.card label{display:flex;flex-direction:column;gap:6px;font-size:.9rem;color:var(--muted)}
input{font:inherit;padding:11px 12px;border:1px solid var(--line);border-radius:10px;
  background:#fff;color:var(--ink)}
input:focus{outline:2px solid var(--green);border-color:var(--green)}
textarea{font:inherit;padding:11px 12px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--ink)}
textarea:focus{outline:2px solid var(--green);border-color:var(--green)}
select{font:inherit;padding:10px 34px 10px 12px;border:1px solid var(--line);border-radius:10px;
  background-color:#fff;color:var(--ink);appearance:none;-webkit-appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%231e3ad1' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 11px center}
select:focus{outline:2px solid var(--green);border-color:var(--green)}
button{font:inherit;cursor:pointer;border:0;border-radius:10px;padding:11px 14px;
  background:var(--green);color:#fff;font-weight:600}
button:hover{background:var(--green-d)}
button.ghost{background:transparent;color:var(--muted);padding:6px 10px}
button.ghost:hover{color:var(--ink)}
button.nav{background:#fff;color:var(--green);border:1px solid var(--line);
  width:40px;padding:8px;font-size:1.2rem;line-height:1}
button.nav.nav-wide{width:auto;padding:8px 14px;font-size:.9rem;font-weight:700}

/* ---- App ---- */
.topbar{display:flex;align-items:center;gap:10px;padding:12px 14px;
  background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5}
.spacer{flex:1}
.who-btn{font-weight:700;color:var(--blue-ink)!important;max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.who-btn::before{content:"👤 "}
/* Mon profil (staff) */
.me-head{display:flex;align-items:center;gap:14px;margin:2px 0 16px}
.me-av{width:56px;height:56px;border-radius:50%;background:var(--blue);color:#fff;display:flex;
  align-items:center;justify-content:center;font-weight:800;font-size:1.2rem;flex-shrink:0;overflow:hidden}
.me-av img{width:100%;height:100%;object-fit:cover}
.me-head h2{margin:0;font-size:1.2rem}
.me-roles{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.me-role{font-size:.74rem;font-weight:700;background:#e7ecff;color:var(--blue-ink);padding:2px 9px;border-radius:20px}
.me-grid{display:flex;flex-direction:column;gap:2px}
.me-row{display:flex;justify-content:space-between;gap:14px;padding:9px 2px;border-bottom:1px solid var(--line);font-size:.92rem}
.me-row span{color:var(--muted)}
.me-row b{text-align:right;word-break:break-word}
.me-row.edit{align-items:center}
.me-row.edit input{font:inherit;padding:7px 10px;border:1px solid var(--blue);border-radius:9px;
  max-width:58%;text-align:right;background:#f6f8ff}
.me-actions{display:flex;align-items:center;gap:12px;margin-top:4px}
.me-actions button{background:var(--blue);color:#fff;border:none;border-radius:10px;padding:10px 18px;font-weight:800}
.me-actions button:disabled{opacity:.5}
.toolbar{display:flex;align-items:center;gap:8px;padding:12px 14px;flex-wrap:wrap}
.toolbar input[type=date]{flex:1;min-width:150px}
.tag{font-size:.8rem;padding:4px 12px;border-radius:999px;background:#eef3f0;
  color:var(--green);font-weight:700;display:inline-flex;align-items:center;gap:6px}
.season-ico{width:15px;height:15px;flex-shrink:0}

.grid-wrap{overflow:auto;margin:0 14px;padding:0 0 14px}
.grid{display:grid;gap:4px;min-width:max-content}
.cell{border-radius:8px;padding:6px 8px;font-size:.78rem;white-space:nowrap;
  text-align:center;user-select:none}
.cell.head{background:transparent;font-weight:600;color:var(--muted);position:sticky;left:0}
.cell.colhead{color:var(--muted);font-weight:600}
.slot{background:var(--free);border:1px solid var(--line);cursor:pointer;min-width:64px}
.slot:hover{border-color:var(--green)}
.slot.mine{background:var(--mine);color:#fff;border-color:var(--mine)}
.slot.busy{background:var(--busy);color:#555;cursor:not-allowed;border-color:var(--busy)}
.slot.busy.cours{background:#dfeee6;color:var(--green-d)}

.legend{display:flex;gap:14px;align-items:center;padding:0 14px 24px;
  font-size:.82rem;color:var(--muted);flex-wrap:wrap}
.chip{display:inline-block;width:14px;height:14px;border-radius:4px;vertical-align:-2px;
  border:1px solid var(--line)}
.chip.free{background:var(--free)}
.chip.mine{background:var(--mine);border-color:var(--mine)}
.chip.busy{background:var(--busy);border-color:var(--busy)}

@media (max-width:480px){
  .cell{font-size:.72rem;padding:6px}
  .slot{min-width:52px}
}

.page-title{margin:14px 14px 2px;font-size:1.3rem}

/* ---- Grille de réservation (courts en colonnes, heures en lignes) ---- */
.res-head{padding:0 14px}
.res-sub{margin:0 0 6px;color:var(--muted);font-size:.9rem}
.rgrid{display:grid;gap:3px;min-width:max-content}
.rcell{border-radius:6px;padding:5px 3px;font-size:.75rem;text-align:center;
  display:flex;align-items:center;justify-content:center;min-height:36px}
/* coin figé (haut-gauche) : opaque et au-dessus, sinon les en-têtes glissent dessous.
   Le box-shadow étalé (spread) comble les gaps de la grille autour de la case. */
.rcell.corner{background:#fff;position:sticky;left:0;top:0;z-index:6;box-shadow:0 0 0 3px #fff}
.rhead{background:#eef1f7;font-weight:800;color:var(--blue-ink);position:sticky;top:0;z-index:4;
  flex-direction:column;line-height:1.05;font-style:italic}
/* Couleur = surface du court (bande basse discrète) */
.rhead.sfc-terre{background:#fdeee0;box-shadow:inset 0 -3px 0 #e0872f}
.rhead.sfc-gazon{background:#e7f5e9;box-shadow:inset 0 -3px 0 #46a555}
.rhead.sfc-dur{background:#e6eefc;box-shadow:inset 0 -3px 0 #2f5fd0}
.rhead .cn-short{display:none}
@media(max-width:640px){
  .rhead .cn-full{display:none}
  .rhead .cn-short{display:inline;font-size:.9rem}
}
/* Légende des surfaces */
.sfc-legend{display:inline-flex;align-items:center;flex-wrap:wrap;gap:4px}
.sfc-dot{display:inline-block;width:11px;height:11px;border-radius:3px;margin:0 4px 0 12px}
.sfc-dot.sfc-terre{background:#e0872f}
.sfc-dot.sfc-gazon{background:#46a555}
.sfc-dot.sfc-dur{background:#2f5fd0}
.rhour{background:#eef1f7;color:var(--muted);font-weight:700;position:sticky;left:0;z-index:4;font-size:.72rem;
  box-shadow:0 0 0 3px #eef1f7, 5px 0 7px -3px rgba(0,0,0,.22)}
.rslot{cursor:pointer;transition:outline .1s}
.rslot.creuse{background:#bcd3ff;color:#0f2050}
.rslot.pleine{background:#073eb5;color:#fff}
.rslot.creuse:hover,.rslot.pleine:hover{outline:2px solid #04205e}
.rslot.busy{background:#cbd0da;color:#5a5f6b;cursor:default;font-size:.68rem}
.rslot.mine{background:#123cc4;color:#fff;outline:3px solid #f2c200;cursor:pointer}
.rslot .pr{font-weight:800}
.chip.creuse{background:#bcd3ff}
.chip.pleine{background:#073eb5;border-color:#073eb5}
.legend-note{display:block;width:100%;margin-top:8px;color:var(--muted);font-size:.8rem;line-height:1.4}
.partner-choice{display:flex;flex-direction:column;gap:8px;margin:12px 0}
.pc-opt{display:flex;align-items:center;gap:8px;font-size:.95rem;cursor:pointer}
.pc-opt.pc-disabled{opacity:.45;cursor:not-allowed}
.credit-tag{background:#e6f2ea;color:#0b6b3a;font-weight:800;font-size:.82rem;padding:5px 12px;border-radius:999px;white-space:nowrap}
.credit-balance{margin:4px 0 10px;font-size:1.05rem}
.cr-ledger{margin-top:10px}
.cr-row{display:flex;justify-content:space-between;gap:10px;font-size:.86rem;padding:5px 0;border-top:1px solid var(--line)}
/* CRM : filtres rôles + colonnes */
.people-filters{display:flex;flex-wrap:wrap;align-items:center;gap:8px;width:100%;
  margin:0 0 16px;padding:12px 14px;background:#f6f8fc;border:1px solid var(--line);border-radius:12px}
.filters-lbl{font-size:.8rem;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;margin-right:2px}
.chip.filt{flex:0 0 auto;white-space:nowrap;font-size:.8rem;padding:6px 12px}
.chip.filt.reset{background:#fff}
.chip.filt.reset.sel{background:var(--blue);color:#fff}
.role-cell{max-width:280px}
.role-badge{display:inline-block;background:#eef1f7;color:var(--blue-ink);font-size:.72rem;font-weight:700;
  padding:2px 8px;border-radius:999px;margin:1px 2px;white-space:nowrap}
.pgrid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.pgrid2 label{display:flex;flex-direction:column;gap:6px}
@media(max-width:600px){.pgrid2{grid-template-columns:1fr}}
.p-photo-block{margin-top:12px}
.pgrid2-lbl{display:block;font-weight:700;font-size:.85rem;color:var(--muted);margin-bottom:6px}
.p-photo-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.p-photo-preview{width:72px;height:72px;border-radius:50%;overflow:hidden;background:#eef1f7;flex-shrink:0;
  border:1px solid var(--line)}
.p-photo-preview img{width:100%;height:100%;object-fit:cover}
.ptabs{display:flex;gap:6px;border-bottom:2px solid var(--line);margin:4px 0 18px;flex-wrap:wrap}
.ptab{background:transparent;color:var(--muted);font-weight:700;padding:9px 16px;
  border-radius:8px 8px 0 0;border:0;position:relative;top:2px;cursor:pointer;font-size:.92rem}
.ptab:hover{background:#f1f3f9;color:var(--ink)}
.ptab.active{color:var(--blue);border-bottom:2px solid var(--blue)}
.obj-add{display:flex;gap:10px;align-items:flex-start;margin-bottom:16px}
.obj-add textarea{flex:1;min-width:0}
.obj-list{display:flex;flex-direction:column;gap:10px}
.obj-item{background:#f6f8fc;border:1px solid var(--line);border-radius:10px;padding:12px 14px}
.obj-meta{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:.78rem;color:var(--muted);margin-bottom:6px}
.obj-meta b{color:var(--blue-ink);font-weight:700}
.obj-body{white-space:pre-wrap;line-height:1.4}
.obj-acts{display:flex;gap:8px;margin-top:8px}
.obj-acts button{background:transparent;border:0;color:var(--muted);font-size:.8rem;font-weight:700;cursor:pointer;padding:2px 4px}
.obj-acts button:hover{color:var(--blue)}
.obj-acts button.del:hover{color:#c0392b}
.obj-empty{color:var(--muted);font-size:.9rem;padding:6px 0}
.resa-stats{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:16px}
.resa-stat{background:#f6f8fc;border:1px solid var(--line);border-radius:10px;padding:10px 14px;min-width:120px}
.resa-stat-h{font-size:.78rem;color:var(--muted);font-weight:700}
.resa-stat-n{font-size:1.1rem;font-weight:800;color:var(--blue-ink);margin-top:2px}
.resa-stat-s{font-size:.82rem;color:var(--muted)}
.resa-list{display:flex;flex-direction:column;gap:4px}
.resa-row{display:grid;grid-template-columns:auto auto 1fr auto;gap:12px;align-items:center;
  padding:8px 10px;border-bottom:1px solid var(--line);font-size:.9rem}
.resa-row:hover{background:#f6f8fc}
.resa-d{font-weight:700}
.resa-h{color:var(--muted)}
.resa-c{color:var(--ink)}
.resa-p{font-weight:700;color:var(--blue-ink);text-align:right}
@media(max-width:600px){.resa-row{grid-template-columns:auto 1fr auto;row-gap:2px}
  .resa-h{grid-column:1}.resa-c{grid-column:2}.resa-p{grid-column:3;grid-row:1/3}.resa-d{grid-column:1/3}}
.cours-group{margin-bottom:18px}
.cours-group-h{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:8px;
  padding-bottom:8px;border-bottom:2px solid var(--line)}
.cours-dot{width:12px;height:12px;border-radius:50%;flex-shrink:0}
.cours-group-h b{font-size:1rem}
.cours-pct{background:var(--blue);color:#fff;font-weight:800;font-size:.8rem;padding:2px 10px;border-radius:999px}
.cours-brk{color:var(--muted);font-size:.8rem}
.att-list{display:flex;flex-direction:column;gap:2px}
.att-row{display:grid;grid-template-columns:auto auto 1fr;gap:12px;align-items:center;
  padding:6px 8px;border-bottom:1px solid var(--line);font-size:.88rem}
.att-row:hover{background:#f6f8fc}
.att-d{font-weight:700}
.att-h{color:var(--muted)}
.att-badge{justify-self:end;font-size:.75rem;font-weight:700;padding:2px 9px;border-radius:999px}
.att-present{background:#e3f6e8;color:#1c7d38}
.att-late{background:#fdf2dc;color:#a9721a}
.att-absent{background:#fbe4e4;color:#b23838}
.media-add{display:flex;align-items:center;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.media-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px}
.media-card{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff;display:flex;flex-direction:column}
.media-thumb{position:relative;background:#000;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center}
.media-thumb img,.media-thumb video{width:100%;height:100%;object-fit:cover}
.media-badge{position:absolute;top:6px;left:6px;background:var(--blue);color:#fff;font-size:.68rem;
  font-weight:800;padding:2px 8px;border-radius:999px}
.media-comment{border:0;border-top:1px solid var(--line);border-radius:0;resize:vertical;
  font-size:.82rem;padding:8px;width:100%}
.media-comment:focus{outline:2px solid var(--blue);outline-offset:-2px}
.media-del{background:transparent;border:0;border-top:1px solid var(--line);color:var(--muted);
  font-size:.78rem;font-weight:700;padding:7px;cursor:pointer}
.media-del:hover{color:#c0392b;background:#fbf1f1}
.import-actions{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.import-summary{background:#f6f8fc;border:1px solid var(--line);border-radius:10px;padding:10px 14px;
  margin-bottom:12px;font-size:.9rem}
.import-preview{max-height:46vh;overflow:auto}
.import-preview .crm-table{font-size:.85rem}
.imp-ok{color:#1c7d38;font-weight:700}
.imp-warn{color:#a9721a;font-weight:700}
.imp-bad{color:#b23838;font-weight:700}
.imp-row-bad{background:#fdf3f3}
.p-photo-preview.empty::after{content:"?";display:flex;align-items:center;justify-content:center;height:100%;color:#9aa6c4;font-weight:800;font-size:1.4rem}
#partner-select,#partner-guest-name{width:100%}
.partner-price{font-weight:800;color:var(--blue-ink);margin:14px 0 6px}
.rslot.rfree{background:#eef1f7;color:#aeb6c6;cursor:pointer;user-select:none}
.rslot.rfree:hover{background:#dde3ef}
.rslot.sel{background:#f2c200!important;color:#5a4500!important}

/* ---- Statistiques ---- */
.st-range{font-size:.85rem;color:var(--muted);display:flex;align-items:center;gap:6px}
.kpi-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin-bottom:20px}
.kpi{background:var(--blue-ink);color:#fff;border-radius:var(--radius);padding:18px 20px}
.kpi b{display:block;font-size:1.7rem;font-style:italic}
.kpi span{font-size:.82rem;opacity:.85;text-transform:uppercase;letter-spacing:.5px}
.stat-grids{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:16px}
.stat-block{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:18px 20px;box-shadow:var(--shadow)}
.stat-block h2{margin:0 0 14px;font-size:1.05rem;color:var(--blue-ink)}
.bar-row{display:grid;grid-template-columns:120px 1fr 60px;align-items:center;gap:10px;margin:7px 0}
.bar-label{font-size:.85rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar{background:#eef1f7;border-radius:6px;height:16px;overflow:hidden}
.bar-fill{height:100%;background:var(--blue);border-radius:6px;min-width:2px}
.bar-val{font-size:.82rem;font-weight:700;color:var(--blue-ink);text-align:right}
.st-highlight{display:flex;flex-direction:column;justify-content:center;align-items:center;
  min-height:80px;text-align:center}
.st-highlight b{font-size:1.6rem;font-style:italic;color:var(--blue)}
.st-highlight span{color:var(--muted)}

/* ---- Rôles & accès ---- */
.role-cell{display:flex;flex-wrap:wrap;gap:6px 12px}
.role-chip{display:inline-flex;align-items:center;gap:5px;font-size:.85rem;color:var(--ink);cursor:pointer}
#access-matrix .crm-table td:first-child{font-weight:600;color:var(--blue-ink)}

/* ---- Liens familiaux (fiche membre) ---- */
.fam-section{margin:14px 0;padding:14px;background:#f5f7fb;border:1px solid var(--line);border-radius:12px}
.fam-title{margin:0 0 10px;font-size:.95rem;color:var(--blue-ink)}
.fam-list{display:flex;flex-direction:column;gap:6px;margin-bottom:10px}
.fam-item{display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:#fff;border:1px solid var(--line);border-radius:8px;padding:7px 12px;font-size:.9rem}
.fam-del{background:transparent;color:#b3261e;padding:2px 8px;font-weight:800}
.fam-del:hover{background:#fde7e6}
.fam-add{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.fam-add select{flex:1;min-width:140px}

/* ---- GameZone : sous-onglets ---- */
.subnav{display:flex;gap:6px;border-bottom:2px solid var(--line);margin:0 0 18px}
.subtab{background:transparent;color:var(--muted);font-weight:700;padding:10px 18px;
  border-radius:8px 8px 0 0;border:0;position:relative;top:2px}
.subtab:hover{background:#f1f3f9;color:var(--ink)}
.subtab.active{color:var(--blue);border-bottom:2px solid var(--blue)}
.gz-season-h{margin:18px 0 8px;font-size:1.1rem;color:var(--blue-ink)}
.gz-badge{display:inline-block;font-size:.66rem;font-weight:800;text-transform:uppercase;
  letter-spacing:.4px;background:var(--blue);color:#fff;padding:2px 7px;border-radius:999px;vertical-align:1px}
.gz-badge.off{background:#c9ccd6;color:#42474f}
.gz-total td{font-weight:800;color:var(--blue-ink);background:#eef1f7;border-top:2px solid var(--line)}
.gz-trow{cursor:pointer}
.gz-trow:hover{background:#f3f7f5}
.gz-mgr-table select{padding:5px 26px 5px 8px;font-size:.82rem;background-position:right 7px center}
.gz-totals{display:flex;gap:20px;flex-wrap:wrap;margin-top:16px;padding:14px;background:var(--blue-ink);
  color:#fff;border-radius:var(--radius);font-size:.95rem}
.gz-totals b{color:#fff}
.gz-mgr-sections{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}
.gz-mgr-sec{background:#f5f7fb;border:1px solid var(--line);border-radius:var(--radius);padding:14px}
.gz-mgr-sec h3{margin:0 0 10px;font-size:1rem;color:var(--blue-ink)}
.gz-fin-item{display:flex;justify-content:space-between;align-items:center;gap:8px;
  background:#fff;border:1px solid var(--line);border-radius:8px;padding:6px 10px;margin-bottom:6px;font-size:.88rem}
.gz-add-row{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-top:8px}
.gz-add-row input{padding:7px 9px;font-size:.85rem}
.gz-add-row select{padding:7px 28px 7px 9px;font-size:.85rem;background-position:right 8px center}
.gz-del-pay,.gz-del-sal{background:transparent;color:#b3261e;padding:2px 8px;font-weight:800}
.gz-photo-wrap{display:inline-flex;align-items:center;gap:6px;margin-top:4px}
.gz-photo-thumb{width:36px;height:36px;object-fit:cover;border-radius:6px;border:1px solid var(--line)}
.gz-photo-btn{background:#eef1f7;color:var(--blue-ink);font-size:.75rem;padding:5px 8px;font-weight:700}
.gz-mail-card{border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin-bottom:14px;background:#fff}
.gz-mail-head{display:flex;justify-content:space-between;align-items:center}
.gz-mail-en{font-size:.85rem;display:inline-flex;align-items:center;gap:6px}
.gz-mail-lbl{display:block;font-size:.78rem;font-weight:700;color:var(--muted);margin:.5rem 0 .2rem}
.gz-mail-card input[type=text],.gz-mail-card textarea{width:100%;box-sizing:border-box}
.gz-mail-card textarea{font-family:inherit;line-height:1.4}
.gz-mail-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:10px;flex-wrap:wrap}
.gz-mail-img{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.gz-mail-thumb{width:52px;height:52px;object-fit:cover;border-radius:8px;border:1px solid var(--line)}
.gz-survey-card{border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin-bottom:14px;background:#fff}
.gz-survey-card input[type=text]{width:100%;box-sizing:border-box}
.gz-survey-qs{margin:.3rem 0 .6rem;padding-left:1.2rem}
.gz-survey-qs li{margin:.2rem 0}
.gz-q-del{padding:0 6px;margin-left:6px}
.gz-survey-res{margin-top:12px;border-top:1px solid var(--line);padding-top:12px}
.gz-res-filter{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:10px;font-size:.85rem}
.gz-res-q{margin:12px 0}
.gz-res-bars{list-style:none;padding:0;margin:.4rem 0}
.gz-res-bars li{display:flex;align-items:center;gap:10px;margin:.25rem 0;font-size:.85rem}
.gz-res-lbl{flex:0 0 130px}
.gz-res-bar{flex:1;height:14px;background:#eef1f7;border-radius:7px;overflow:hidden}
.gz-res-bar>span{display:block;height:100%;background:var(--green,#5ec26a)}
.gz-res-n{flex:0 0 80px;text-align:right;color:var(--muted)}
.gz-res-txt{margin:.4rem 0;padding-left:1.1rem}
.gz-res-txt li{margin:.2rem 0}
.sv-q-lbl{display:block;font-weight:700;margin-bottom:.4rem}
.sv-opt{display:inline-flex;align-items:center;gap:6px;margin:.2rem 12px .2rem 0;cursor:pointer}
.sv-rating{display:flex;gap:6px;flex-wrap:wrap}
/* Site public GameZone */
.gz-pub{max-width:820px;margin:0 auto;padding:24px 18px 60px}
.gz-pub-head{text-align:center;margin-bottom:1.4rem}
.gz-pub-head .brand{font-size:2rem}
.gz-pub-season{display:inline-flex;align-items:center;gap:8px;margin-top:.6rem;font-weight:700}
.gz-pub-season select{padding:6px 30px 6px 10px;background-position:right 9px center}
.gz-pub-h2{margin:1.6rem 0 .8rem;font-size:1.15rem}
.gz-pub-rank{display:flex;flex-direction:column;gap:6px}
.gz-rank-row{display:flex;align-items:center;gap:12px;padding:10px 14px;border:1px solid var(--line);border-radius:12px;background:#fff}
.gz-rank-row.top{background:linear-gradient(90deg,#fffdf2,#fff);border-color:#ecd98a}
.gz-rank-pos{flex:0 0 36px;width:36px;height:36px;border-radius:50%;background:var(--blue);color:#fff;
  font-weight:800;display:flex;align-items:center;justify-content:center;font-size:.95rem}
.gz-rank-row.top .gz-rank-pos{background:var(--blue-ink)}
.gz-showall{display:block;margin:14px auto 0;background:var(--blue);color:#fff;font-weight:800;
  padding:11px 22px;border:0;border-radius:999px;cursor:pointer}
.gz-showall:hover{background:var(--blue-d)}
/* Carrousel animé des photos de vainqueurs (page détail GameZone) */
.gz-carousel{overflow:hidden;border-radius:16px;margin:2px 0}
.gzc-track{display:flex;gap:14px;width:max-content;animation:gzscroll 45s linear infinite}
.gz-carousel:hover .gzc-track{animation-play-state:paused}
.gzc-card img{height:220px;width:auto;border-radius:14px;object-fit:cover;box-shadow:0 6px 18px rgba(0,0,0,.16)}
@keyframes gzscroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.gzc-track.gzc-static{animation:none;width:auto;justify-content:center;flex-wrap:wrap}
@media(prefers-reduced-motion:reduce){.gzc-track{animation:none}}
.gz-rank-name{flex:1;font-weight:700}
.gz-rank-tro{flex:0 0 auto;font-size:1.05rem;letter-spacing:1px;white-space:nowrap;overflow:hidden;max-width:45vw}
.gz-cup{margin-right:4px}
.gz-rank-w{flex:0 0 34px;text-align:right;font-weight:800}
.gz-pub-photos{display:flex;gap:12px;overflow-x:auto;padding:4px 2px 12px;scroll-snap-type:x mandatory}
.gz-photo-card{flex:0 0 auto;scroll-snap-align:start}
.gz-photo-card img{height:220px;width:auto;border-radius:14px;border:1px solid var(--line);object-fit:cover;box-shadow:0 4px 14px rgba(0,0,0,.12)}
.gz-pub-legend{text-align:center;margin-top:1rem;font-size:.85rem}
/* Admin — gestion photos site public */
.gz-site-photos{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px}
.gz-site-card{position:relative;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff;display:flex;flex-direction:column}
.gz-site-card img{width:100%;height:150px;object-fit:cover}
.gz-site-card.off img{filter:grayscale(1) opacity(.45)}
.gz-site-meta{padding:8px 10px;font-size:.82rem;display:flex;flex-direction:column;gap:2px}
.gz-site-toggle{margin:0 10px 10px;font-size:.78rem}
.gz-site-badge{position:absolute;top:8px;left:8px;background:#b3261e;color:#fff;font-size:.7rem;font-weight:700;padding:2px 8px;border-radius:20px}
/* Stages */
.stg-cat-card{border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin-bottom:12px;background:#fff}
.stg-cat-card input[type=text],.stg-cat-card textarea{width:100%;box-sizing:border-box}
.stg-cat-grid{display:flex;gap:18px;flex-wrap:wrap;align-items:end;margin:.5rem 0}
.stg-cat-grid label{display:flex;flex-direction:column;gap:4px;font-size:.82rem;font-weight:700;color:var(--muted)}
.stg-cat-grid .stg-cat-price{width:120px}
.stg-card-head{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px}
.stg-photo-preview{width:120px;height:80px;border-radius:10px;overflow:hidden;background:#eef1f7;
  flex-shrink:0;border:1px solid var(--line)}
.stg-photo-preview img{width:100%;height:100%;object-fit:cover}
.stg-photo-preview.empty::after{content:"🎾";display:flex;align-items:center;justify-content:center;height:100%;font-size:1.6rem;opacity:.5}
.check-spacer{display:none}
@media(min-width:601px){.check-spacer{display:block}}
.stg-cat-check{display:flex;flex-direction:column;gap:8px}
label.stg-cat-opt{display:flex;flex-direction:row;align-items:center;gap:10px;padding:9px 12px;
  border:1px solid var(--line);border-radius:10px;background:#fff;cursor:pointer;
  font-weight:600;font-size:.9rem;color:var(--ink)}
label.stg-cat-opt:hover{border-color:var(--blue)}
label.stg-cat-opt input{width:18px;height:18px;flex-shrink:0}
label.stg-cat-opt span{font-weight:600}
.stg-reg-cat{max-width:150px}
.stg-inline{flex-direction:row!important;align-items:center;gap:6px!important}
.stg-row{cursor:pointer}
.stg-row:hover{background:#f5f7fd}
.stg-vis{padding:4px 24px 4px 8px;font-size:.82rem;background-position:right 6px center}
.stg-cmt{max-width:200px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#stg-reg-table td{vertical-align:middle}
.stg-mail-card .stg-mail-subject,.stg-mail-card .stg-mail-body{width:100%;box-sizing:border-box}
/* Page publique stages */
.stg-pub{max-width:960px;margin:0 auto;padding:24px 18px 60px}
.stg-pub-head{text-align:center;margin-bottom:1.4rem}
.stg-pub-head .brand{font-size:2rem}
.stg-pub-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px}
.stg-pub-card{border:1px solid var(--line);border-radius:16px;overflow:hidden;background:#fff;display:flex;flex-direction:column;box-shadow:0 4px 14px rgba(0,0,0,.06)}
.stg-pub-img{width:100%;height:150px;object-fit:cover}
.stg-pub-noimg{display:flex;align-items:center;justify-content:center;font-size:2.4rem;background:#eef1f7}
.stg-pub-body{padding:14px 16px;display:flex;flex-direction:column;gap:6px;flex:1}
.stg-pub-body h3{margin:0;font-size:1.1rem}
.stg-pub-dates{font-weight:700;color:var(--blue-ink);font-size:.9rem}
.stg-pub-badges{display:flex;gap:6px;flex-wrap:wrap;margin:4px 0}
.stg-tag{font-size:.72rem;font-weight:700;background:#eef1f7;color:var(--blue-ink);padding:3px 9px;border-radius:20px}
.stg-pub-foot{display:flex;justify-content:space-between;align-items:center;margin-top:auto;padding-top:8px}
.stg-pub-price{font-size:1.2rem;font-weight:800}
.stg-pub-cta{background:var(--fluo-d);color:var(--fluo-ink);font-weight:800;border:0;padding:9px 16px;border-radius:10px;cursor:pointer}
.stg-pub-cta:hover{filter:brightness(.95)}
/* Modale d'inscription */
.modal-box{position:relative;background:#fff;border-radius:16px;max-width:520px;width:100%;max-height:90vh;overflow:auto;padding:22px 24px}
.modal-x{position:absolute;top:10px;right:12px;background:transparent;color:var(--muted);font-size:1.1rem;border:0;cursor:pointer}
.modal-x:hover{color:var(--ink)}
.stg-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.stg-form-grid label,#stgp-form>label{display:flex;flex-direction:column;gap:5px;font-weight:700;font-size:.85rem}
.stg-cat-info{font-size:.82rem;margin-top:-4px;min-height:1em}
.stg-addon{background:#f6f8fc;border:1px solid var(--line);border-radius:10px;padding:10px 12px}
.stg-addon-check{display:flex;flex-direction:row;align-items:center;gap:8px;font-weight:700;font-size:.9rem;cursor:pointer}
.stg-addon-check input{width:18px;height:18px;flex-shrink:0;margin:0}
#stgp-form input,#stgp-form select,#stgp-form textarea{width:100%;box-sizing:border-box;font-family:inherit}
/* Cases à cocher / radios : ne PAS les étirer à 100% (sinon le libellé est écrasé) */
#stgp-form input[type=checkbox],#stgp-form input[type=radio]{width:18px;height:18px;flex:0 0 auto;margin:0;padding:0}

/* ===== Menus déroulants stylés (pretty-select) ===== */
.ps-wrap{position:relative;width:100%}
select.ps-native{display:none}
.ps-trigger{width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;
  font:inherit;font-weight:400;text-align:left;padding:10px 12px;border:1px solid var(--line);
  border-radius:10px;background:#fff;color:var(--ink);cursor:pointer;line-height:1.3}
.ps-trigger:hover{border-color:var(--blue)}
.ps-wrap.open .ps-trigger{border-color:var(--blue);box-shadow:0 0 0 3px rgba(53,99,233,.15)}
.ps-trigger:disabled{background:#f2f4f8;color:var(--muted);cursor:not-allowed}
.ps-val{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ps-val.ps-ph{color:#9aa6c4}
.ps-chevron{flex-shrink:0;color:var(--blue);transition:transform .18s ease}
.ps-wrap.open .ps-chevron{transform:rotate(180deg)}
.ps-list{position:absolute;left:0;right:0;top:calc(100% + 5px);z-index:80;background:#fff;
  border:1px solid var(--line);border-radius:12px;box-shadow:0 14px 34px rgba(20,30,60,.18);
  padding:6px;max-height:280px;overflow:auto}
.ps-wrap.ps-up .ps-list{top:auto;bottom:calc(100% + 5px)}
.ps-opt{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 12px;
  border-radius:8px;cursor:pointer;font-size:.92rem;color:var(--ink);line-height:1.3}
.ps-opt:hover,.ps-opt.active{background:#eef3ff}
.ps-opt.sel{font-weight:700;color:var(--blue-ink)}
.ps-opt.sel::after{content:"✓";color:var(--blue);font-weight:800}
.ps-opt.dis{opacity:.45;cursor:default}
.ps-opt.dis:hover{background:transparent}

/* ===== Calendriers stylés (pretty-date) ===== */
.pd-wrap{position:relative;width:100%}
input.pd-native{display:none}
.pd-trigger{width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;
  font:inherit;font-weight:400;text-align:left;padding:10px 12px;border:1px solid var(--line);
  border-radius:10px;background:#fff;color:var(--ink);cursor:pointer;line-height:1.3}
.pd-trigger:hover{border-color:var(--blue)}
.pd-wrap.open .pd-trigger{border-color:var(--blue);box-shadow:0 0 0 3px rgba(53,99,233,.15)}
.pd-trigger:disabled{background:#f2f4f8;color:var(--muted);cursor:not-allowed}
.pd-val.pd-ph{color:#9aa6c4}
.pd-ico{flex-shrink:0;color:var(--blue)}
.pd-pop{position:absolute;left:0;top:calc(100% + 5px);z-index:80;width:288px;max-width:92vw;background:#fff;
  border:1px solid var(--line);border-radius:14px;box-shadow:0 14px 34px rgba(20,30,60,.18);padding:12px}
.pd-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.pd-mtitle{font-weight:800;color:var(--blue-ink);text-transform:capitalize;font-size:.95rem}
.pd-nav{background:#eef1f7;color:var(--blue-ink);font-weight:800;width:32px;height:32px;padding:0;
  border-radius:8px;font-size:1.1rem;line-height:1}
.pd-nav:hover{background:#dde3ef}
.pd-dows{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:4px}
.pd-dows span{text-align:center;font-size:.7rem;font-weight:700;color:var(--muted);text-transform:uppercase}
.pd-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.pd-day{background:transparent;color:var(--ink);font-weight:600;font-size:.85rem;height:34px;padding:0;
  border-radius:8px;border:0;cursor:pointer}
.pd-day.pd-empty{background:transparent;cursor:default}
.pd-day:not(.pd-empty):not(.dis):hover{background:#eef3ff}
.pd-day.today{color:var(--blue);box-shadow:inset 0 0 0 1.5px var(--blue)}
.pd-day.sel{background:var(--blue);color:#fff}
.pd-day.dis{color:#c6ccda;cursor:not-allowed}
/* Choix direct du mois et de l'annee, et saisie au clavier : sans cela il
   faut cliquer mois par mois, ce qui est intenable pour une date de
   naissance. Regles reprises telles quelles de la console. */
.pd-typed{width:100%;box-sizing:border-box;font:inherit;font-size:.9rem;padding:8px 10px;margin-bottom:8px;
  border:1px solid var(--line);border-radius:9px;text-align:center;letter-spacing:.03em}
.pd-typed:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(53,99,233,.15)}
.pd-typed.pd-bad{border-color:#d5644f;box-shadow:0 0 0 3px rgba(213,100,79,.15)}
.pd-pick{display:flex;gap:6px}
.pd-mbtn,.pd-ybtn{background:#eef1f7;color:var(--blue-ink);font-weight:800;font-size:.9rem;padding:6px 10px;
  border-radius:8px;text-transform:capitalize;cursor:pointer;border:0}
.pd-mbtn:hover,.pd-ybtn:hover{background:#dde3ef}
.pd-years{position:relative;max-height:216px;overflow-y:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:2px}
.pd-year{background:#f4f6fb;color:var(--ink);font-weight:700;font-size:.9rem;padding:9px 0;border-radius:8px;border:0;cursor:pointer}
.pd-year:hover{background:#eef3ff}
.pd-year.sel{background:var(--blue);color:#fff}
.pd-months{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.pd-month{background:#f4f6fb;color:var(--ink);font-weight:700;font-size:.85rem;padding:14px 0;border-radius:8px;
  border:0;cursor:pointer;text-transform:capitalize}
.pd-month:hover{background:#eef3ff}
.pd-month.sel{background:var(--blue);color:#fff}
.pd-foot{display:flex;justify-content:space-between;gap:8px;margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}
.pd-today,.pd-clear{background:#eef1f7;color:var(--blue-ink);font-weight:700;font-size:.82rem;padding:7px 12px}
.pd-today:hover,.pd-clear:hover{background:#dde3ef}
.cw-summary{background:#f6f8fc;border:1px solid var(--line);border-radius:10px;padding:12px 14px;margin:12px 0 4px;font-size:.9rem}
.cw-warn{color:#a9721a;font-size:.85rem;margin-top:8px;line-height:1.5}
/* ===== Tests physiques ===== */
.phys-res-row{cursor:pointer}
.phys-tpl-card{border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin-bottom:12px;background:#fff}
.phys-tpl-head{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.phys-tpl-name{flex:1;font-weight:800}
.phys-q-rows{display:flex;flex-direction:column;gap:8px;margin-bottom:10px}
.phys-q-row{display:flex;align-items:center;gap:8px}
.phys-q-row .phys-q-label{flex:1;min-width:140px}
.phys-q-row .phys-q-type{width:150px;flex-shrink:0}
/* le menu "type" est embelli (pretty-select) → son conteneur ne doit pas manger toute la largeur */
.phys-q-row .ps-wrap{flex:0 0 150px;width:150px}
.phys-tpl-foot{display:flex;gap:10px}
.pf-q{display:flex;flex-direction:column;gap:5px;font-weight:700;font-size:.9rem;margin-bottom:12px}
.phys-answers{display:flex;flex-direction:column;gap:2px}
.phys-ans{display:flex;justify-content:space-between;gap:16px;padding:9px 4px;border-bottom:1px solid var(--line)}
.phys-ans-q{color:var(--ink)}
.phys-ans-v{font-weight:800;color:var(--blue-ink);text-align:right}
/* ===== Études (calendrier + par jeune) ===== */
.et-cal th,.et-cal td{text-align:center;white-space:nowrap;padding:6px 8px}
.et-cal th:first-child,.et-cal td:first-child,.et-cal td:nth-child(2),.et-cal th:nth-child(2){text-align:left}
.att-chip.et-cell{width:34px;height:30px;padding:0;font-weight:800;display:inline-flex;align-items:center;justify-content:center}
.et-profwrap{display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.et-profwrap .ps-wrap{flex:0 0 auto;width:auto;min-width:92px}
.et-prof-chip{display:inline-flex;align-items:center;gap:2px;background:#eef1f7;border-radius:999px;
  padding:2px 4px 2px 9px;font-size:.78rem;font-weight:700;color:var(--blue-ink)}
.et-prof-rm{background:transparent;border:0;color:var(--muted);cursor:pointer;padding:0 3px;font-size:.8rem;line-height:1}
.et-prof-rm:hover{color:#b23838}
.et-stats{display:flex;gap:10px;flex-wrap:wrap}
.et-stat{background:#f6f8fc;border:1px solid var(--line);border-radius:10px;padding:10px 16px;text-align:center;min-width:110px}
.et-stat b{display:block;font-size:1.3rem;color:var(--blue-ink)}
.et-stat span{font-size:.8rem;color:var(--muted)}
.et-stat.st-present b{color:#1c7d38}
.et-stat.st-late b{color:#a9721a}
.et-stat.st-absent b{color:#b23838}
.et-youth-row{cursor:pointer}
/* ===== Mental (calendrier éditable) ===== */
.mn-cal td,.mn-cal th{vertical-align:top;padding:6px}
.mn-cal .mn-txt{width:210px;min-width:170px;resize:vertical;font-size:.82rem;line-height:1.35;
  border:1px solid var(--line);border-radius:8px;padding:6px 8px;box-sizing:border-box}
.mn-cal .mn-num{width:54px}
.mn-cal .mn-short{width:92px}
.mn-cal .mn-date{width:145px}
.mn-cell.mn-saved{outline:2px solid #1c7d38}
.mn-cal .pd-wrap{width:150px}
.mn-part-row{cursor:pointer}
/* ===== Stage : résumé financier + tuiles + boxes coachs ===== */
.stg-fin-grid{display:flex;gap:10px;flex-wrap:wrap}
.stg-fin{background:#f6f8fc;border:1px solid var(--line);border-radius:10px;padding:10px 16px;min-width:150px;
  display:flex;flex-direction:column;gap:2px}
.stg-fin span{font-size:.8rem;color:var(--muted)}
.stg-fin b{font-size:1.15rem;color:var(--ink)}
.stg-fin-total{background:var(--blue);border-color:var(--blue)}
.stg-fin-total span,.stg-fin-total b{color:#fff}
.stg-tiles{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.stg-tile{background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 18px;text-align:center;min-width:96px;box-shadow:var(--shadow)}
.stg-tile b{display:block;font-size:1.5rem;color:var(--blue);font-weight:800}
.stg-tile span{font-size:.78rem;color:var(--muted)}
.stg-box{margin-top:12px}
.stg-coaches{border-top:1px solid var(--line);margin-top:10px;padding-top:6px}
.stg-coach-rows{display:flex;flex-direction:column;gap:6px;margin-top:6px}
.stg-coach-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.stg-coach-row .stg-coach-name{flex:1;min-width:150px}
.stg-coach-row .stg-coach-fee{width:130px}
.stg-coach-row .stg-coach-note{flex:2;min-width:180px}
.stg-coach-row .stg-coach-sel,.stg-coach-row .ps-wrap{flex:1;min-width:160px}
.stg-linked{font-size:.72rem;font-weight:700;color:#1c7d38;background:#e3f6e8;border-radius:999px;padding:1px 8px}
.stlink-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}
/* ===== Saisons (fiche) ===== */
.ss-list{display:flex;flex-direction:column;gap:6px;margin-bottom:10px}
.ss-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:9px 12px;border:1px solid var(--line);
  border-radius:10px;background:#fff}
.ss-row.ss-cur{border-color:var(--blue);box-shadow:inset 3px 0 0 var(--blue)}
.ss-season{font-weight:800;color:var(--blue-ink);min-width:64px}
.ss-paid{display:flex;align-items:center;gap:6px;font-weight:600;font-size:.88rem}
.ss-paid input{width:16px;height:16px}
.ss-status{flex:1}
.ss-tag{display:inline-block;font-size:.75rem;font-weight:800;padding:2px 9px;border-radius:999px}
.ss-tag.ss-ok{background:#e3f6e8;color:#1c7d38}
.ss-tag.ss-warn{background:#fdf2dc;color:#a9721a}
.ss-tag.ss-role{background:#eef1f7;color:var(--blue-ink)}
.ss-intent{max-width:170px}
.ss-add{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:4px}
.rg-season-list{display:flex;flex-direction:column;gap:6px;margin-bottom:8px}
.rg-season-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:8px 10px;
  border:1px solid var(--line);border-radius:10px;background:#fff}
.rg-season-row.ss-cur{border-color:var(--blue);box-shadow:inset 3px 0 0 var(--blue)}
.rg-season-row .rgs-label{width:120px;font-weight:700}
.rgs-arrow{color:var(--muted)}
.rg-season-add{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:4px}
.rg-season-add input:not([type=date]){width:170px}
.bsc-lbl{display:flex;flex-direction:column;gap:4px;font-size:.8rem;font-weight:700;color:var(--muted)}
.bsc-lbl select{min-width:160px}
.stg-lbl{display:block;font-weight:700;font-size:.85rem;margin-bottom:4px}
.stg-radio{display:inline-flex;align-items:center;gap:6px;margin-right:18px;font-weight:600;font-size:.9rem;
  white-space:nowrap;flex-shrink:0}
.stg-radio input{flex-shrink:0;margin:0}
#f-meal-wrap{display:flex;flex-wrap:wrap;align-items:center;gap:6px 4px}
#f-meal-wrap .stg-lbl{flex-basis:100%}
#f-meal-text{margin-top:0;flex:1;min-width:160px}
@media(max-width:480px){.stg-form-grid{grid-template-columns:1fr}}
.gz-mgr-foot{grid-column:1/-1;display:flex;align-items:center;gap:14px;margin-top:4px}
.gz-credit-line{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-top:3px}
.gz-mini{background:#eef1f7;color:var(--blue-ink);font-size:.7rem;padding:3px 7px;font-weight:700;border-radius:6px}
.gz-mini:hover{background:#dde3ef}
.gz-credit{color:#a15c00}
.gz-comment{margin-top:3px;color:#2c3240;font-style:italic}
.gz-credit-use{background:#fde8c8;color:#a15c00}
/* Tableau joueurs (responsable) : colonne « Joueur » figée + scroll sur le reste + couleurs de ligne */
.gz-mgr-wrap{overflow-x:auto}
.gz-mgr-table{border-collapse:separate;border-spacing:0;min-width:660px}
.gz-mgr-table th,.gz-mgr-table td{background:#fff}
.gz-mgr-table th:first-child,.gz-mgr-table td:first-child{
  position:sticky;left:0;z-index:2;min-width:112px;max-width:150px;
  border-right:2px solid #c2c9d6;box-shadow:5px 0 7px -4px rgba(0,0,0,.28)}
.gz-mgr-table thead th:first-child{z-index:3}
.gz-mgr-table tr.gz-paid td{background:#e7f6ec}
.gz-mgr-table tr.gz-abs td{background:#fbe9e9}
.gz-mgr-table tr.gz-paid td:first-child{background:#e7f6ec}
.gz-mgr-table tr.gz-abs td:first-child{background:#fbe9e9}
.gz-mgr-table td:first-child{padding-left:8px;padding-right:8px}
.gz-name{font-size:.82rem;line-height:1.2}
.gz-sub{display:flex;flex-direction:column;gap:3px;margin-top:3px}
.gz-club{color:var(--muted);font-size:.76rem}
.gz-remark{align-self:flex-start;max-width:100%;background:#eef3ff;color:#2b4a8b;font-size:.72rem;
  padding:2px 8px;border-radius:6px;font-weight:600;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gz-remark:hover{background:#dfe8ff}
.gz-note-btn{background:#f3f0ff;color:#5b3ca8;font-size:.78rem;padding:6px 9px;border-radius:7px;font-weight:700;
  max-width:150px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left}
.gz-note-btn:hover{background:#e8e1ff}
.gz-note-btn .muted{color:#9aa0ad;font-weight:600}
.gz-col-credit{white-space:nowrap;font-size:.78rem}
#gz-text-area{padding:10px;font-size:.9rem;border:1px solid var(--line);border-radius:8px;resize:vertical}
.gz-till-balance{font-size:2rem;font-weight:800;font-style:italic;color:var(--blue-ink);margin:6px 0 14px}
#gz-sub-participants th[data-sort]{cursor:pointer;user-select:none}
#gz-sub-participants th[data-sort]:hover{color:var(--blue)}
@media (max-width:700px){.gz-mgr-sections{grid-template-columns:1fr}}

/* ---- Cours ---- */
.ct-add{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:12px}
.ct-add input[type=text],.ct-add input:not([type]){flex:1;min-width:160px}
.ct-add input[type=number]{width:110px}
.ct-item{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);
  border-radius:8px;padding:8px 12px;margin-bottom:6px;font-size:.92rem}
.ct-dot{width:14px;height:14px;border-radius:50%;flex-shrink:0}
.ct-item .muted{margin-left:auto}
.ct-item .fam-del{margin-left:auto}
.cs-list{display:flex;flex-direction:column;gap:8px}
/* Pas de flash bleu de « tap » sur mobile/tablette (surlignage du bloc cliquable). */
html{-webkit-tap-highlight-color:transparent}
.cs-card{display:flex;flex-direction:column;gap:12px;background:var(--card);border:1px solid var(--line);
  border-left:5px solid #0b6b3a;border-radius:var(--radius);padding:12px 16px;box-shadow:var(--shadow);cursor:pointer;
  -webkit-user-select:none;user-select:none}
.cs-card:hover{background:#f7f9fc}
.cs-card-top{display:flex;align-items:center;gap:14px}
.cs-time{font-weight:800;font-style:italic;color:var(--blue-ink);white-space:nowrap}
.cs-main{flex:1;display:flex;flex-direction:column}
.cs-main .muted{font-size:.85rem}
.cs-badges{display:flex;gap:12px;font-size:.9rem;color:var(--muted)}
.cs-more{background:#eef1f7;color:var(--blue-ink);font-weight:700;padding:7px 12px;font-size:.82rem;white-space:nowrap}
.cs-more:hover{background:#dde3ef}
.cs-att{display:flex;gap:24px;flex-wrap:wrap}
.cs-att-col{flex:1;min-width:170px}
.cs-att-h{font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);margin-bottom:6px}
.cs-att-items{display:flex;flex-direction:column;gap:5px}
.cs-card:not(.expanded) .cs-att-items > .att-chip:nth-child(n+5){display:none}
.att-chip{text-align:left;font-weight:600;font-size:.86rem;padding:7px 11px;border-radius:8px;
  border:1px solid var(--line);cursor:pointer;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  -webkit-user-select:none;user-select:none}
.att-chip.st-none{background:#fff;color:var(--ink)}
.att-chip.st-present{background:#e3f6e8;border-color:#bfe6ca;color:#1c7d38}
.att-chip.st-late{background:#fdf2dc;border-color:#f2e0b0;color:#a9721a}
.att-chip.st-absent{background:#fbe4e4;border-color:#f0c9c9;color:#b23838}
.att-chip.st-locked{background:#eef0f4;border-color:var(--line);color:#aab2c4;cursor:not-allowed}
.att-legend{display:flex;flex-wrap:wrap;gap:14px;margin:0 0 12px;font-size:.8rem;color:var(--muted)}
.att-legend span{display:inline-flex;align-items:center;gap:6px}
.att-legend em{font-style:normal;opacity:.7}
.lg{width:13px;height:13px;border-radius:4px;border:1px solid var(--line);display:inline-block}
.lg.st-present{background:#e3f6e8;border-color:#bfe6ca}
.lg.st-late{background:#fdf2dc;border-color:#f2e0b0}
.lg.st-absent{background:#fbe4e4;border-color:#f0c9c9}
.lg.st-none{background:#fff}
.att-chip:not(.st-locked):hover{border-color:var(--blue)}
.cs-lbl{display:block;font-size:.85rem;color:var(--muted);margin:12px 0 6px;font-weight:600}
.chip-select{display:flex;flex-wrap:wrap;gap:8px}
.chip{background:#eef1f7;border:1px solid var(--line);border-radius:999px;padding:7px 14px;
  font-size:.85rem;color:var(--ink);cursor:pointer;font-weight:600}
.chip:hover{border-color:var(--blue)}
.chip.sel{background:var(--blue);color:#fff;border-color:var(--blue)}
/* Les pastilles (filtres + sélecteur de rôles) : annule le width/height:14px
   du .chip « carré » de la légende réservation (collision de noms). */
.chip-select .chip,.people-filters .chip{width:auto;height:auto;min-width:0;display:inline-block}
/* Fiche personne en pleine page (plus de pop-up) */
#people-detail{display:block}
.person-page{max-width:none;width:100%;box-shadow:none;border:1px solid var(--line);margin-top:10px}
.stg-back{margin-bottom:4px}
.att-btn{background:#eef1f7;color:var(--blue-ink);font-weight:700;padding:8px 12px;font-size:.82rem}
.att-btn:hover{background:#dde3ef}
.att-h{margin:16px 0 8px;font-size:.95rem;color:var(--blue-ink)}
.att-row{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:8px 0;border-bottom:1px solid var(--line);flex-wrap:wrap}
.att-name{font-size:.92rem}
.att-btns{display:flex;gap:6px}
.att-set{background:#f1f3f9;color:var(--muted);border:1px solid var(--line);padding:6px 12px;
  font-size:.82rem;font-weight:700;border-radius:8px}
.att-set:hover{border-color:var(--blue)}
.att-set.st-present.on{background:#0b6b3a;color:#fff;border-color:#0b6b3a}
.att-set.st-absent.on{background:#b3261e;color:#fff;border-color:#b3261e}
.att-set.st-late.on{background:#e08a00;color:#fff;border-color:#e08a00}
.att-set:disabled{opacity:.4;cursor:not-allowed}
.att-set:disabled:hover{border-color:var(--line)}
.att-hint{flex-basis:100%;font-size:.72rem;text-align:right}

/* =====================================================================
   SITE DYNAMIQUE — 3 mondes (Club · Académie · Tournoi)
   ===================================================================== */
/* clip et non hidden : hidden creerait un contexte de defilement, ce qui
   casserait le position:sticky de la barre de navigation. */
body.public{background:#fff;overflow-x:clip}
/* Titres : Circe, le display geometrique de la charte (« bold geometric display
   font for headlines »). Le kit ne fournit que 400 et 700 : on force 700, sinon
   une graisse 500 retomberait sur le 400 et les titres seraient plus fins que
   les sous-titres. Le corps et l'interface restent en Acumin Pro (cf. body). */
.public h1,.public h2,.public h3,.brand{
  font-family:var(--font-accent);font-weight:700;
  letter-spacing:-.04em;text-transform:uppercase}
/* Utilitaire pour porter Circe ailleurs si besoin. */
.accent-font{font-family:var(--font-accent)}

/* Thème par monde (accent) */
body[data-world]{--accent:var(--blue);--accent-ink:var(--blue-ink);
  --accent-soft:#eef1fd;--scrim:rgba(10,20,70,.62)}
body[data-world="academie"]{--accent:var(--fluo-d);--accent-ink:var(--fluo-ink);
  --accent-soft:#eefbcf;--scrim:rgba(12,40,8,.58)}
body[data-world="tournoi"]{--scrim:rgba(6,12,45,.68)}

/* Barre de navigation + switcher */
.nav{display:flex;align-items:center;gap:16px;padding:10px 20px;background:#fff;
  border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
.nav-brand{display:flex;align-items:center}
.nav-logo{height:44px;width:auto;object-fit:contain;transition:opacity .2s}
.switcher{flex:1;display:flex;gap:6px;justify-content:center;flex-wrap:wrap}
/* Barre de navigation : Acumin Pro en casse normale. La charte range les
   « UI elements » dans Acumin Pro ; le gras italique en capitales venait de
   l'ancienne identite Arial Black. */
.sw{background:transparent;color:var(--ink);font-weight:600;font-style:normal;
  text-transform:none;letter-spacing:0;padding:9px 18px;border-radius:999px;
  border:2px solid transparent;font-size:.98rem}
.sw:hover{background:#f1f3f9;color:var(--ink)}
.sw.active{background:var(--accent);color:#fff;border-color:var(--accent)}
body[data-world="academie"] .sw.active{color:var(--fluo-ink)}
/* Menus rapides au survol des mondes */
.sw-wrap{position:relative;display:flex}
.sw-menu{position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(8px);
  background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 14px 32px rgba(20,26,46,.18);
  padding:6px;min-width:190px;display:flex;flex-direction:column;
  opacity:0;visibility:hidden;transition:opacity .16s ease,transform .16s ease;z-index:40}
.sw-menu::before{content:"";position:absolute;top:-10px;left:0;right:0;height:10px}
.sw-wrap:hover .sw-menu,.sw-wrap:focus-within .sw-menu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(4px)}
.sw-menu a{padding:9px 12px;border-radius:8px;color:var(--ink);text-decoration:none;
  font-size:.92rem;font-weight:400;cursor:pointer;white-space:nowrap;text-transform:none;font-style:normal}
.sw-menu a:hover{background:#eef1f7;color:var(--blue-ink)}
@media (max-width:760px){.sw-menu{display:none}}
/* Sections Business / Club ajoutées */
.wsec-sub{color:var(--muted);margin:-6px 0 16px;font-size:1rem}
.wsec-sub a{color:var(--blue-ink);font-weight:700}
.logo-wall{display:flex;flex-wrap:wrap;gap:34px;align-items:center;justify-content:center;
  background:#fff;border:1px solid var(--line);border-radius:16px;padding:26px 30px}
.logo-wall img{height:46px;width:auto;max-width:150px;object-fit:contain;filter:grayscale(1);opacity:.75;transition:.2s}
.logo-wall img:hover{filter:none;opacity:1}
.agenda{display:flex;flex-direction:column;gap:10px}
.ag-item{display:flex;gap:16px;align-items:center;background:#fff;border:1px solid var(--line);
  border-left:4px solid var(--blue);border-radius:12px;padding:14px 18px}
.ag-date{flex:0 0 92px;font-weight:800;color:var(--blue-ink);font-style:italic;
  text-transform:uppercase;font-size:.82rem}
.ag-body{display:flex;flex-direction:column}
.ag-body b{font-size:1.02rem}
.ag-body span{color:var(--muted);font-size:.9rem}
.resto{display:flex;flex-wrap:wrap;background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.resto-photo{flex:1 1 300px;min-height:240px;background-size:cover;background-position:center}
.resto-body{flex:1 1 340px;padding:30px}
.resto-body p{color:#2c3240;line-height:1.6;margin:0 0 12px}
.ig-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}
.ig-cell{aspect-ratio:1;background-size:cover;background-position:center;border-radius:12px;display:block}
.ig-cell:hover{opacity:.9}
.btn-login{padding:10px 18px;background:var(--accent);color:#fff;text-decoration:none;
  border-radius:10px;font-weight:600;display:inline-flex;align-items:center;white-space:nowrap;cursor:pointer}
body[data-world="academie"] .btn-login{color:var(--fluo-ink)}
.btn-login:hover{filter:brightness(.92)}
.btn-contact{padding:9px 18px;background:#fff;color:var(--blue);border:2px solid var(--blue);
  border-radius:999px;font-weight:600;font-style:normal;text-transform:none;letter-spacing:0;
  font-size:.98rem;text-decoration:none;display:inline-flex;align-items:center;white-space:nowrap}
.btn-contact:hover{background:var(--blue);color:#fff}
/* Entete : meme logique de remplissage, sans disque (ces boutons n'ont pas de pastille). */
.btn-contact{transition:background-color .25s,color .25s,border-color .25s}
.btn-contact:hover{background:var(--fluo);color:var(--fluo-ink);border-color:var(--fluo)}
.btn-login{transition:background-color .25s,color .25s,filter .25s}
.btn-login:hover{background:var(--fluo);color:var(--fluo-ink);filter:none}
/* Nav en liens (pages contact/stages) */
.nav-brand a{display:inline-flex;text-decoration:none}
.switcher a.sw{text-decoration:none}
/* Formulaire de contact soigné */
.cform{display:flex;flex-direction:column;gap:16px}
.cf-field{display:flex;flex-direction:column;gap:7px}
.cf-field>span{font-weight:700;font-size:.9rem;color:var(--blue-ink)}
.cf-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.cform input,.cform select,.cform textarea{width:100%;box-sizing:border-box;
  border:1.5px solid #cbd5f0;background:#f7f9ff}
.cform input:focus,.cform select:focus,.cform textarea:focus{background:#fff;border-color:var(--blue)}
.cform button[type=submit]{margin-top:4px}
@media(max-width:520px){.cf-row{grid-template-columns:1fr}}
/* Bouton de contact (mène au formulaire) */
.contact-cta{display:inline-flex;align-items:center;gap:8px;margin-top:16px;
  background:var(--blue);color:#fff;font-weight:800;font-style:italic;text-transform:uppercase;
  letter-spacing:-.3px;padding:12px 24px;border:0;border-radius:999px;cursor:pointer}
.contact-cta:hover{background:var(--blue-d)}
/* Carte adresse + Google Maps */
.contact-block{display:grid;grid-template-columns:1fr 1.1fr;gap:0;background:var(--card);
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.contact-info{padding:24px}
.contact-info p{margin:0 0 10px;line-height:1.6}
.contact-info a{color:var(--blue-ink);font-weight:700;text-decoration:none}
.contact-info a:hover{text-decoration:underline}
.contact-map{width:100%;height:100%;min-height:240px;border:0;display:block}
@media(max-width:640px){.contact-block{grid-template-columns:1fr}.contact-map{min-height:220px}}
/* Filière Club et parcours de formation — voir « Parcours de formation » ci-dessous. */
/* ---- Parcours de formation : etapes numerotees (remplace la pyramide) ----
   Langage de la maquette : cartes en grille, fond gris clair, rayon 2rem,
   rembourrage genereux. La progression est portee par la numerotation et par
   la rampe de bleu, plus par la largeur des barres. */
.path-wrap{display:grid;grid-template-columns:1.6fr 1fr;gap:26px;align-items:start;margin-top:8px}
@media(max-width:860px){.path-wrap{grid-template-columns:1fr}}
.path{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.path-step{display:grid;grid-template-columns:auto 1fr auto;align-items:center;
  column-gap:18px;row-gap:2px;text-decoration:none;
  background:#ededed;color:var(--ink);border-radius:var(--radius-lg);
  padding:20px 24px;position:relative;isolation:isolate;overflow:hidden;
  transition:transform .14s,box-shadow .14s,color .25s,background-color .28s}
.path-num{grid-column:1;grid-row:1 / span 2;font-size:1.5rem;font-weight:700;line-height:1;
  color:var(--blue);font-variant-numeric:tabular-nums;min-width:2.1ch}
.path-name{grid-column:2;grid-row:1;font-family:var(--font-accent);font-weight:700;font-size:1.12rem;
  text-transform:uppercase;letter-spacing:-.02em;line-height:1.15}
.path-meta{grid-column:2;grid-row:2;color:var(--muted);font-size:.9rem}
.path-go{grid-column:3;grid-row:1 / span 2;width:36px;height:36px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--fluo);color:var(--fluo-ink);font-size:1.02rem;font-weight:700;
  transition:transform .14s}
/* Rampe de bleu : l'etape la plus avancee est la plus soutenue. */
.path li:nth-child(1) .path-num{color:#5a74e8}
.path li:nth-child(2) .path-num{color:#3a55d9}
.path li:nth-child(3) .path-num{color:var(--blue)}
.path li:nth-child(4) .path-num{color:#052f8c}
.path li:nth-child(5) .path-num{color:var(--blue-ink)}
/* Silhouette d'entonnoir : large a l'entree (KidsTennis, ouvert a tous), etroit
   au sommet (Pro, quelques places). C'est l'idee de selection que portait la
   pyramide, rendue par la largeur des cartes plutot que par des barres empilees.
   Au survol, l'etape se deplie sur toute la largeur : le visiteur « ouvre » le
   palier qui l'interesse. Reserve aux ecrans larges — en dessous, l'entonnoir
   ecraserait le texte. */
@media(min-width:861px){
  .path li{transition:max-width .38s cubic-bezier(.4,0,.2,1)}
  .path li:nth-child(1){max-width:100%}
  .path li:nth-child(2){max-width:94%}
  .path li:nth-child(3){max-width:87%}
  .path li:nth-child(4){max-width:80%}
  .path li:nth-child(5){max-width:73%}
  .path li:hover,.path li:focus-within{max-width:100%}
}
/* Respecte le reglage systeme « animations reduites ». */
@media(prefers-reduced-motion:reduce){
  .path li,.path-step,.path-go,.ccard-pill,.ccard-arrow,
  a.ccard-pill::before,button.ccard-pill::before{transition:none}
}
/* Survol : la carte se remplit du vert de marque. Pas de disque qui grandit ici
   contrairement aux boutons — sur une carte de cette taille, le pseudo-element
   en z-index negatif se comporte mal avec overflow:hidden. Un remplissage
   direct est plus robuste et se lit tout aussi bien. */
a.path-step:hover,a.path-step:focus-visible{
  background-color:var(--fluo);color:var(--fluo-ink);
  transform:translateY(-2px);box-shadow:0 8px 22px rgba(20,26,46,.16)}
a.path-step:hover .path-num,a.path-step:focus-visible .path-num,
a.path-step:hover .path-meta,a.path-step:focus-visible .path-meta{color:var(--fluo-ink)}
/* La pastille s'inverse pour rester visible sur le vert. */
a.path-step:hover .path-go,a.path-step:focus-visible .path-go{
  background-color:#fff;transform:translate(2px,-2px)}
/* La filiere Club, a cote : meme carte, accent bleu pour la distinguer. */
.path-club{background:var(--card);border:1px solid var(--line);
  border-left:4px solid var(--blue);border-radius:var(--radius-lg);padding:24px 28px}
.path-club h3{margin:0 0 10px;color:var(--blue-ink);font-size:1.2rem}
.path-club p{color:#2c3240;line-height:1.6;margin:0 0 12px;font-size:.98rem}
.path-club-link{color:var(--blue-ink);font-weight:700;text-decoration:none}
.path-club-link:hover{text-decoration:underline}
/* Avatars placeholder (teams) */
.ph-avatar{display:flex;align-items:center;justify-content:center;background:#e9edf6;color:#9aa6c4}
.ph-avatar svg{width:52%;height:52%}
.team-ph figcaption b{color:var(--muted)}
/* Coach : ligne cours privés */
.coach-priv{display:block;font-size:.8rem;color:var(--blue-ink);font-weight:700;margin-top:3px}
.coach-priv a{color:var(--blue-ink);text-decoration:none}
.coach-priv a:hover{text-decoration:underline}

/* Hero plein écran avec photo */
/* Hero aligne a gauche, comme la maquette : le titre demarre au meme fer que
   les sections en dessous, au lieu d'etre centre. */
.hero{position:relative;min-height:74vh;display:flex;align-items:center;
  justify-content:flex-start;text-align:left;color:#fff;overflow:hidden;
  border-radius:18px}
.hero-bg{position:absolute;inset:0;background-size:cover;background-position:center;
  transition:opacity .4s;animation:kenburns 18s ease-out infinite alternate}
@keyframes kenburns{from{transform:scale(1.05)}to{transform:scale(1.14)}}
/* Video de fond : elle se pose par-dessus la photo, qui lui sert de poster.
   Elle n'apparait qu'une fois qu'elle a des images (classe « prete »), sinon
   on troquerait la photo contre un rectangle noir le temps du chargement. */
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:center;z-index:1;opacity:0;transition:opacity .6s ease;
  pointer-events:none}
.hero-video.prete{opacity:1}
/* Tant que le film tourne, le zoom lent de la photo n'a plus lieu d'etre :
   deux mouvements a la fois se contrarient. */
.hero.a-video .hero-bg{animation:none}
.hero-scrim{position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(0,0,0,.15),var(--scrim))}

.hero-content{position:relative;z-index:2;width:100%;max-width:var(--container);
  margin:0 auto;padding:var(--sec-sm) 22px;text-align:left}
.hero-logo{height:132px;width:auto;margin:0 0 18px;display:block;
  filter:brightness(0) invert(1) drop-shadow(0 2px 12px rgba(0,0,0,.3))}
body[data-world="academie"] .hero-logo{filter:drop-shadow(0 4px 16px rgba(0,0,0,.45))}
/* Le libelle du monde sous le logo n'apporte rien : la marque est deja dans
   le logo et le titre. */
.hero-tag{display:none}
/* Chaque mot du slogan se souligne au survol, d'un trait qui part de la gauche.
   scaleX depuis transform-origin:left : anime sur le compositeur, donc fluide,
   la plus qu'une largeur en pixels. */
.hs-w{position:relative;display:inline-block}
.hs-w::after{content:"";position:absolute;left:0;right:0;bottom:.02em;
  height:.075em;border-radius:.04em;background:var(--fluo);
  transform:scaleX(0);transform-origin:left center;
  transition:transform .3s cubic-bezier(.4,0,.2,1)}
.hs-w:hover::after{transform:scaleX(1)}
@media(prefers-reduced-motion:reduce){
  .hs-w::after{transition:none}
}
.hero-slogan{font-size:clamp(2.6rem,7vw,5rem);margin:0 0 18px;line-height:1;
  max-width:55rem}
.hero-desc{font-size:1.14rem;opacity:.95;margin:0 0 28px;max-width:44rem;line-height:1.55}
.hero-cta{display:flex;gap:12px;justify-content:flex-start;flex-wrap:wrap}
/* Bouton d'appel a l'action : pilule blanche + pastille verte a la fleche.
   Au survol, le disque vert grandit et inonde toute la pilule (comme la maquette,
   qui fait passer un disque de scale(1) a scale(25) sous un masque).
   Ici le disque est ::before en z-index:-1 et le bouton porte isolation:isolate :
   dans un contexte d'empilement, un enfant en z-index negatif se peint APRES le
   fond du parent mais AVANT son texte. Le libelle reste donc lisible, sans avoir
   a l'envelopper dans un span cote JS. overflow:hidden rogne le disque a la pilule. */
.btn-cta{background:#fff;color:var(--ink);font-size:1.02rem;
  padding:9px 9px 9px 26px;border-radius:999px;
  font-weight:700;font-style:normal;text-transform:none;letter-spacing:-.01em;
  display:inline-flex;align-items:center;gap:18px;
  position:relative;isolation:isolate;overflow:hidden;
  box-shadow:0 2px 10px rgba(20,26,46,.14);
  transition:transform .12s,box-shadow .12s,color .25s}
/* Le disque : au repos il tient exactement la place de la pastille. */
.btn-cta::before{content:"";position:absolute;z-index:-1;
  right:9px;top:50%;width:40px;height:40px;margin-top:-20px;
  border-radius:50%;background:var(--fluo);
  transition:transform .45s cubic-bezier(.4,0,.2,1)}
/* La fleche, posee par-dessus le disque : plus de fond, c'est ::before qui le donne. */
.btn-cta::after{content:"\2197";flex-shrink:0;
  width:40px;height:40px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:transparent;color:var(--fluo-ink);font-size:1.15rem;font-weight:700;
  transition:transform .12s}
.btn-cta:hover{background:#fff;transform:translateY(-1px);box-shadow:0 6px 18px rgba(20,26,46,.2);
  color:var(--fluo-ink)}
.btn-cta:hover::before{transform:scale(25)}
.btn-cta:hover::after{transform:translate(2px,-2px)}
.btn-cta:focus-visible::before{transform:scale(25)}
/* Variante sobre (« Retour a … ») : ni pilule blanche, ni fleche, ni inondation. */
.btn-cta.ghost::after{display:none}
.btn-cta.ghost::before{display:none}
.btn-cta.ghost{padding:12px 22px;gap:0}
.hero-switch-hint{position:absolute;top:14px;left:0;right:0;z-index:2;text-align:center;
  font-size:.72rem;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,.7)}
.hero-switch-hint span{display:none}

/* Transition de bascule */
.fade-in{animation:fadeup .45s ease}
@keyframes fadeup{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* Contenu du monde */
.world-main{max-width:var(--container);margin:0 auto;padding:var(--sec-sm) 22px}
/* Chiffres cles. Le nombre etait en Acumin italique, faute de font-family : il
   passe en Circe, la police d'affichage de la marque, comme tous les grands
   chiffres du site. Les tuiles etaient pleines de vert fluo, ce qui ecrasait
   tout le reste de la page ; elles deviennent des cartes claires, le fluo ne
   servant plus que d'accent au survol. */
.stat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:16px;
  margin-bottom:26px}
.stat{position:relative;overflow:hidden;isolation:isolate;text-align:center;
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:28px 20px 24px;box-shadow:var(--shadow);
  transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease}
.stat::before{content:"";position:absolute;inset:auto auto 0 0;z-index:-1;
  width:100%;height:0;background:var(--fluo);transition:height .32s cubic-bezier(.4,0,.2,1)}
.stat:hover{transform:translateY(-6px);box-shadow:0 14px 30px rgba(20,26,46,.16);
  border-color:var(--fluo)}
.stat:hover::before{height:5px}
.stat b{display:block;font-family:var(--font-accent);font-weight:700;font-style:normal;
  letter-spacing:-.03em;line-height:1;color:var(--blue);
  font-size:clamp(2.2rem,5vw,3.1rem);
  /* Chiffres de meme chasse : sans cela la tuile tressaute pendant le comptage. */
  font-variant-numeric:tabular-nums;transition:color .28s ease}
.stat:hover b{color:var(--blue-ink)}
/* Enfant direct, et non descendant : le compteur est lui aussi un <span>, mais
   il vit dans le <b>. Un selecteur descendant l'habillait en petites capitales
   grises, et le grand chiffre se retrouvait a 12 px. */
.stat > span{display:block;margin-top:10px;font-size:.8rem;font-weight:700;color:var(--muted);
  text-transform:uppercase;letter-spacing:.08em;opacity:1}
@media(prefers-reduced-motion:reduce){
  .stat,.stat::before,.stat b{transition:none}
}

/* ---- Chiffres cles, version « tableau d'affichage » ----
   Reprend la mise en page des atouts de la charte : fond Prussian Blue pleine
   largeur, cartes claires posees dessus, icone au trait noir, chiffre puis
   libelle en capitales. Le fond etait un degrade raye avec une lueur verte et
   des icones bleu pale : trop de choses en meme temps, et les chiffres — qui
   sont l'accroche de la page — n'en ressortaient pas.
   Les cellules portent .sbc et non .stat : les regles de la carte claire du fil
   de page n'ont pas a etre annulees une par une ici. */
/* Deux classes, et non « .stat-board » seul : « .wsec{margin:0 0 …} » vit plus
   bas dans le fichier et, à specificite egale, sa notation raccourcie remettait
   margin-inline a zero. Le bandeau restait alors large de 100vw mais calé sur
   le bord gauche du conteneur : il sortait de 265 px a droite, poussait la page
   en defilement horizontal, et les cartes tombaient decentrees. */
.wsec.stat-board{width:100vw;margin-inline:calc(50% - 50vw);margin-bottom:var(--sec-sm);
  background:var(--prussian);padding:clamp(26px,3.4vw,44px) 0}
.stat-board-in{max-width:var(--container);margin:0 auto;padding:0 22px}
/* Le bandeau est en haut de page : il doit etre la tout de suite, sans attendre
   la revelation au defilement. */
.stat-board.reveal{opacity:1;transform:none}

.sb-row{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(10px,1.2vw,16px)}
@media(min-width:900px){ .sb-row{grid-template-columns:repeat(4,1fr)} }

/* Contenu centré : deux ou trois mots alignés à gauche dans une carte large
   laissaient un grand vide à droite et la tuile paraissait inachevée. */
.sbc{position:relative;overflow:hidden;isolation:isolate;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:#ededed;border:0;border-radius:var(--radius-lg);
  padding:clamp(20px,2.2vw,26px) clamp(14px,1.8vw,20px);
  font:inherit;color:var(--ink);text-align:center;text-decoration:none;
  transition:transform .28s ease,box-shadow .28s ease,background-color .28s ease}
/* Le liseré vert qui pousse en bas de carte : c'est le geste maison, on le
   retrouve sur les atouts et les tuiles de chiffres du reste du site. */
.sbc::before{content:"";position:absolute;inset:auto auto 0 0;z-index:-1;
  width:100%;height:0;background:var(--fluo);transition:height .32s cubic-bezier(.4,0,.2,1)}
.sbc-lien{cursor:pointer}
.sbc-lien:hover,.sbc-lien:focus-visible{transform:translateY(-6px);background:#fff;
  box-shadow:0 16px 34px rgba(0,0,0,.28)}
.sbc-lien:hover::before,.sbc-lien:focus-visible::before{height:6px}
.sbc-lien:focus-visible{outline:3px solid var(--fluo);outline-offset:3px}

/* Icone au trait, noire : c'est le style des pictos de la charte. */
.stat-ico{width:clamp(26px,2.8vw,32px);height:clamp(26px,2.8vw,32px);
  color:var(--ink);margin-bottom:clamp(12px,1.6vw,18px);
  transition:color .28s ease,transform .28s ease}
.sbc-lien:hover .stat-ico{color:var(--blue);transform:translateY(-2px)}

.sbc b{display:block;font-family:var(--font-accent);font-weight:700;
  letter-spacing:-.03em;line-height:1;color:var(--blue-ink);
  font-variant-numeric:tabular-nums;font-size:clamp(1.7rem,3.6vw,2.5rem)}
.sbc > span{display:block;margin-top:8px;font-size:.72rem;font-weight:800;
  color:var(--muted);text-transform:uppercase;letter-spacing:.09em;line-height:1.35}
/* La fleche n'apparait qu'au survol : au repos, quatre petits signes
   parasiteraient la lecture des chiffres. */
.stat-fleche{position:absolute;top:12px;right:14px;font-size:.95rem;color:var(--blue);
  opacity:0;transform:translateY(3px);transition:opacity .25s ease,transform .25s ease}
.sbc-lien:hover .stat-fleche,.sbc-lien:focus-visible .stat-fleche{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .sbc,.sbc::before,.stat-ico,.stat-fleche{transition:none}
}

.feature-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}
.feature{background:var(--card);border:1px solid var(--line);border-left:4px solid var(--accent);
  border-radius:var(--radius);padding:18px;box-shadow:var(--shadow)}
.feature h3{margin:0 0 6px;font-size:1.05rem;color:var(--blue-ink);
  font-style:normal;text-transform:none;letter-spacing:0}
.feature p{margin:0;color:var(--muted);font-size:.93rem}
/* ---- Galerie en mosaique ----
   Toutes les photos a la meme taille se regardaient comme une planche de
   contact. La premiere et la quatrieme occupent deux colonnes : le rythme se
   casse et l'oeil circule. Chaque vignette est un bouton qui ouvre la
   visionneuse — d'ou la loupe, qui annonce que ca s'agrandit. */
.gal{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media(min-width:760px){ .gal{grid-template-columns:repeat(4,1fr);gap:14px} }
.gphoto{position:relative;display:block;width:100%;padding:0;border:0;overflow:hidden;
  aspect-ratio:4/3;background-size:cover;background-position:center;background-color:#e9edf6;
  border-radius:var(--radius);box-shadow:var(--shadow);cursor:zoom-in;
  transition:transform .32s cubic-bezier(.22,.61,.36,1),box-shadow .32s ease}
@media(min-width:760px){
  /* Deux grandes vignettes par serie de six : assez pour rompre la grille,
     assez rare pour que ca reste une respiration et non un motif.
     Seulement a partir de quatre photos : en dessous, la mosaique laisserait un
     trou au bout de la ligne. Une petite galerie garde des vignettes egales. */
  .gal:has(> :nth-child(4)) > .gphoto:nth-child(6n+1),
  .gal:has(> :nth-child(4)) > .gphoto:nth-child(6n+4){grid-column:span 2;aspect-ratio:16/10}
  .gal:not(:has(> :nth-child(4))){grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
}
.gphoto:hover{transform:translateY(-4px) scale(1.012);box-shadow:0 16px 38px rgba(20,26,46,.2)}
.gphoto:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
/* Voile + loupe : ils n'apparaissent qu'au survol, une photo n'a pas a porter
   un bouton en permanence. */
.gphoto::after{content:"";position:absolute;inset:0;background:rgba(4,32,94,.32);
  opacity:0;transition:opacity .3s ease}
.gphoto:hover::after,.gphoto:focus-visible::after{opacity:1}
.gphoto-loupe{position:absolute;inset:0;z-index:1;display:flex;align-items:center;justify-content:center;
  opacity:0;transform:scale(.82);transition:opacity .3s ease,transform .3s ease;pointer-events:none}
.gphoto-loupe svg{width:38px;height:38px;color:#fff;
  filter:drop-shadow(0 2px 10px rgba(0,0,0,.4))}
.gphoto:hover .gphoto-loupe,.gphoto:focus-visible .gphoto-loupe{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .gphoto,.gphoto::after,.gphoto-loupe{transition:none}
}

/* ---- Visionneuse ----
   Plein ecran, fond sombre, la photo au centre. Les fleches restent en dehors
   de la photo sur grand ecran et passent en bas sur telephone, ou elles
   masqueraient l'image. */
.visio{position:fixed;inset:0;z-index:90;display:flex;align-items:center;justify-content:center;
  gap:clamp(6px,2vw,26px);padding:clamp(10px,3vw,34px);
  background:rgba(4,16,44,.94);backdrop-filter:blur(6px)}
.visio.hidden{display:none}
/* La page ne doit plus defiler derriere la photo pendant qu'on fait glisser. */
body.visio-ouverte{overflow:hidden}
.visio-scene{margin:0;flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:12px;height:100%}
.visio-scene img{max-width:100%;max-height:calc(100% - 34px);object-fit:contain;
  border-radius:var(--radius-md);box-shadow:0 24px 70px rgba(0,0,0,.55);
  background:#0b1836;display:block}
.visio-compte{font-size:.8rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(255,255,255,.7);font-variant-numeric:tabular-nums}
.visio-nav,.visio-x{flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  border:0;border-radius:50%;background:rgba(255,255,255,.14);color:#fff;cursor:pointer;
  transition:background-color .2s ease,transform .2s ease}
.visio-nav{width:clamp(42px,6vw,54px);height:clamp(42px,6vw,54px);font-size:1.9rem;line-height:1;padding-bottom:4px}
.visio-nav:hover,.visio-x:hover{background:var(--fluo);color:var(--fluo-ink)}
.visio-nav:active{transform:scale(.94)}
.visio-nav.hidden{display:none}
.visio-x{position:absolute;top:clamp(10px,2.4vw,22px);right:clamp(10px,2.4vw,22px);
  width:42px;height:42px;font-size:1.1rem;z-index:2}
.visio-nav:focus-visible,.visio-x:focus-visible{outline:2px solid var(--fluo);outline-offset:3px}
@media(max-width:620px){
  /* Sur telephone les fleches passent sous la photo : de part et d'autre, elles
     mordraient sur l'image. */
  .visio{flex-wrap:wrap;align-content:center}
  .visio-scene{order:-1;flex:1 0 100%;max-height:calc(100% - 66px)}
  .visio-nav{width:46px;height:46px}
}
@media(prefers-reduced-motion:reduce){ .visio-nav,.visio-x{transition:none} }


/* Sections riches par monde */
.wsec{margin:0 0 var(--sec-sm)}
.wsec:last-child{margin-bottom:0}
.wsec>h2{font-size:1.7rem;color:var(--blue-ink);margin:0 0 18px}
.wsec-note{color:var(--muted);font-style:italic;font-size:.92rem;margin:14px 0 0}
.wsec-link{display:inline-block;margin-top:16px;color:var(--accent-ink);font-weight:800;
  font-style:italic;text-transform:uppercase;letter-spacing:-.2px;text-decoration:none;
  border-bottom:3px solid var(--accent);padding-bottom:2px}
/* Variante bouton plein (ex. « Réserver un court ») : texte en blanc, sans soulignement */
button.wsec-link{color:#fff;border-bottom:0}
.rich{max-width:740px}
.rich p{color:#2c3240;line-height:1.65;margin:0 0 12px;font-size:1.02rem}

/* Offres (avec badge/prix) */
.offer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px}
.offer{background:var(--card);border:1px solid var(--line);border-top:4px solid var(--accent);
  border-radius:var(--radius);padding:18px;box-shadow:var(--shadow)}
.offer-top{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.offer-top h3{margin:0;font-size:1.1rem;color:var(--blue-ink)}
.offer-meta{font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.5px;
  background:var(--accent-soft);color:var(--accent-ink);padding:3px 9px;border-radius:999px}
.offer p{margin:0;color:var(--muted);font-size:.94rem;line-height:1.5}

/* Timeline (histoire) */
.timeline{max-width:820px}
.tl-row{display:grid;grid-template-columns:120px 1fr;gap:18px;padding:13px 0;
  border-bottom:1px dashed var(--line)}
.tl-row:last-child{border-bottom:0}
.tl-year{font-weight:800;font-style:italic;color:var(--accent-ink);font-size:1.05rem}
.tl-text{color:#2c3240;line-height:1.55}

/* Comité */
.committee{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.cm{background:var(--card);border:1px solid var(--line);border-left:4px solid var(--accent);
  border-radius:var(--radius);padding:14px 16px;display:flex;flex-direction:column}
.cm b{color:var(--blue-ink);font-size:1rem}
.cm span{color:var(--muted);font-size:.88rem}

/* Contact */
.contact-card{background:var(--accent-soft);border-radius:var(--radius);padding:22px;
  max-width:520px;line-height:1.6}
.contact-card p{margin:0 0 8px}
.contact-card a{color:var(--accent-ink);font-weight:700;text-decoration:none}

/* Formulaire de contact business (bas de page) */
.biz-contact-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:26px;align-items:start}
.biz-raph{background:var(--blue-ink);color:#fff;border-radius:16px;padding:22px}
.biz-raph-name{font-weight:800;font-size:1.1rem}
.biz-raph-role{color:rgba(255,255,255,.72);font-size:.9rem;margin:2px 0 14px}
.biz-phone{display:inline-flex;align-items:center;gap:9px;background:var(--fluo);color:var(--fluo-ink);
  font-weight:900;font-size:1.1rem;padding:11px 18px;border-radius:12px;text-decoration:none}
.biz-done{grid-column:1/-1;background:var(--accent-soft);border-radius:16px;padding:24px;text-align:center}
@media(max-width:720px){.biz-contact-grid{grid-template-columns:1fr}}
/* Tuile "Plan des courts" du carrousel : plan entier sur fond blanc */
.ccard-media.ccard-media-plan{background-color:#fff;background-size:contain;background-repeat:no-repeat;background-position:center}
/* Popup plan des courts (fond blanc) */
.plan-card{position:relative;background:#fff;border-radius:16px;padding:14px;
  max-width:min(94vw,1000px);max-height:90vh;box-shadow:0 20px 60px rgba(0,0,0,.4)}
.plan-card img{display:block;max-width:100%;max-height:82vh;width:auto;height:auto;border-radius:8px}
.plan-card .modal-x{position:absolute;top:-14px;right:-14px;background:#fff;color:var(--ink);
  border:1px solid var(--line);width:36px;height:36px;border-radius:50%;box-shadow:var(--shadow);
  font-size:1rem;cursor:pointer;z-index:2;display:flex;align-items:center;justify-content:center}
/* Liste de tarifs (devenir membre) */
.pricing-list{max-width:560px}
.pricing-row{display:flex;align-items:baseline;gap:6px;padding:9px 0;border-bottom:1px dashed var(--line)}
.pl-label{color:var(--ink);font-weight:600}
.pl-dots{flex:1}
.pl-price{font-weight:800;color:var(--blue-ink);white-space:nowrap}
/* Planning Études (cases jours + période) */
.et-plan-days{display:flex;gap:16px;flex-wrap:wrap}
.et-plan-days label{display:inline-flex;align-items:center;gap:6px;font-weight:600;color:var(--ink)}
.et-plan-days input,.et-plan-range input[type=checkbox]{width:17px;height:17px;flex-shrink:0}
.et-plan-range{display:flex;gap:16px;flex-wrap:wrap;margin-top:10px}
.et-plan-range label{display:inline-flex;align-items:center;gap:6px;font-size:.9rem}
/* Feuille de match */
.mr-form label{display:flex;flex-direction:column;gap:5px;font-size:.85rem;font-weight:700;color:var(--ink);margin-bottom:12px}
.mr-form input,.mr-form textarea{padding:9px 11px;border:1px solid var(--line);border-radius:9px;font-size:.9rem;font-family:inherit}
.mr-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:0 16px}
.mr-texts{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
@media(max-width:640px){.mr-texts{grid-template-columns:1fr}}
.mr-h{margin:6px 0 10px;color:var(--blue-ink)}
.mr-ratings{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:10px 22px;margin-bottom:14px}
.mr-rate{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:.88rem}
.mr-stars{display:inline-flex;gap:4px}
.mr-star{width:30px;height:30px;border-radius:8px;background:#eef1f7;color:var(--muted);font-weight:800;cursor:pointer;border:0}
.mr-star.on{background:var(--blue);color:#fff}
.mr-comment{display:block;font-weight:700;font-size:.85rem}
.mr-actions{display:flex;align-items:center;gap:12px;margin-top:12px}
.mr-badge{display:inline-block;font-size:.7rem;font-weight:800;padding:1px 8px;border-radius:999px;text-transform:capitalize}
.mr-badge.coach{background:#e6eefc;color:#073eb5}
.mr-badge.joueur{background:#e7f6ec;color:#0b6b3a}
.mr-win{color:#0b6b3a;font-weight:800}
.mr-loss{color:#b23838;font-weight:800}
.mr-field{margin:8px 0}
.mr-field b{color:var(--blue-ink);font-size:.9rem}
.mr-field p{margin:2px 0 0;color:#2c3240;white-space:pre-wrap}
.mr-ratings-view{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:6px 18px;margin:12px 0}
.mr-rv{display:flex;justify-content:space-between;font-size:.88rem}
.mr-rv b{color:#e0a300;letter-spacing:1px}
.mr-comp-wrap{display:flex;flex-direction:column;gap:10px}
.mr-comp{display:grid;grid-template-columns:180px 1fr;gap:10px;align-items:center}
@media(max-width:560px){.mr-comp{grid-template-columns:1fr}}
.mr-comp-l{font-size:.86rem;font-weight:600}
.mr-comp-bars{display:flex;flex-direction:column;gap:4px}
.mr-comp-line{display:flex;align-items:center;gap:8px}
.mr-tag{font-size:.72rem;font-weight:700;width:84px;flex-shrink:0}
.mr-tag.coach{color:#073eb5}.mr-tag.joueur{color:#0b6b3a}
.mr-bar{flex:1;height:9px;background:#eef1f7;border-radius:6px;overflow:hidden}
.mr-bar-fill{height:100%;border-radius:6px}
.mr-bar-fill.coach{background:#073eb5}.mr-bar-fill.joueur{background:#46a555}
.mr-link{margin-bottom:10px}
.mr-link-head{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.mr-conf{font-size:.74rem;font-weight:700;background:#eef1f7;color:var(--muted);padding:2px 9px;border-radius:999px}
.mr-link-cols{display:grid;grid-template-columns:1fr 1fr;gap:12px;font-size:.88rem}
@media(max-width:560px){.mr-link-cols{grid-template-columns:1fr}}
.mr-link-cols>div{background:#f7f9ff;border:1px solid var(--line);border-radius:10px;padding:10px 12px}
.mr-link-acts{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.mr-link-yes{background:#0b6b3a;color:#fff;font-weight:700}
.mr-link-yes:hover{background:#0a5c32}
/* Double canal (interne / public) — suivi Mental & Études */
.chan-tabs{display:inline-flex;gap:4px;background:#eef1f7;border-radius:10px;padding:4px;margin-bottom:8px}
.chan-tab{background:transparent;color:var(--muted);font-weight:700;font-size:.85rem;padding:6px 14px;border-radius:8px;cursor:pointer;border:0}
.chan-tab.active{background:#fff;color:var(--blue-ink);box-shadow:var(--shadow)}
.chan-tab.pub.active{color:#0b6b3a}
.chan-note{font-size:.8rem;margin:0 0 10px;padding:7px 11px;border-radius:8px}
.chan-note.interne{background:#f1f3f8;color:#5a6178}
.chan-note.public{background:#e7f6ec;color:#0b6b3a;font-weight:600}
/* Badges de rôle sur le fil « Suivi du jeune » */
.yn-who{display:inline-flex;align-items:center;gap:7px;flex-wrap:wrap}
.yn-badge{font-size:.66rem;font-weight:800;padding:2px 8px;border-radius:20px;text-transform:uppercase;letter-spacing:.3px}
.yn-badge.mental{background:#efe3ff;color:#6b21a8}
.yn-badge.prof{background:#e0f2fe;color:#075985}
.yn-badge.coach{background:#e3f6e8;color:#1c7d38}
.yn-badge.head{background:#fff2d6;color:#92600e}
.yn-badge.secr{background:#eef1f6;color:#475569}
.yn-badge.admin{background:#fde4e4;color:#b23838}
/* Case règlement (formulaire d'adhésion) */
.m-consent{display:flex;align-items:flex-start;gap:10px;font-size:.92rem;color:var(--ink)}
.m-consent input{width:18px;height:18px;flex-shrink:0;margin-top:1px}
.m-consent a{color:var(--blue);font-weight:700}

/* Sections "split" (photo + texte) */
.split{display:grid;grid-template-columns:1fr 1fr;gap:0;margin:0 0 48px;
  border-radius:calc(var(--radius) + 4px);overflow:hidden;box-shadow:var(--shadow);
  border:1px solid var(--line);background:var(--card)}
.split-media{min-height:340px;background-size:cover;background-position:center}
.split-body{padding:36px}
.split-body h2{font-size:1.7rem;color:var(--blue-ink);margin:0 0 16px}
.split-body p{color:#2c3240;line-height:1.65;margin:0 0 12px;font-size:1.02rem}

/* Cartes-programmes cliquables */
.card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.pcard{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);text-decoration:none;
  transition:transform .15s,box-shadow .15s}
.pcard:hover{transform:translateY(-4px);box-shadow:0 12px 28px rgba(20,26,46,.14)}
.pcard-media{height:150px;background-size:cover;background-position:center}
.pcard-body{padding:16px 18px;display:flex;flex-direction:column;flex:1}
.pcard-body p{color:var(--muted);font-size:.93rem;margin:0 0 12px;flex:1}
.pcard-more{color:var(--accent-ink);font-weight:800;font-style:italic;text-transform:uppercase;
  font-size:.8rem;letter-spacing:-.2px}

/* Bouton retour (hero) */
.btn-cta.ghost{background:rgba(255,255,255,.14);color:#fff;border:2px solid rgba(255,255,255,.55)}
.btn-cta.ghost:hover{background:rgba(255,255,255,.24)}

/* Podium Game Zone */
.podium{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;align-items:end;max-width:680px}
.pod{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:20px 16px;text-align:center;box-shadow:var(--shadow);border-top:5px solid var(--accent)}
.pod-rank{width:40px;height:40px;margin:0 auto 10px;border-radius:50%;background:var(--accent);
  color:#fff;font-weight:800;font-style:italic;display:flex;align-items:center;justify-content:center;font-size:1.2rem}
body[data-world="academie"] .pod-rank{color:var(--fluo-ink)}
.pod b{display:block;color:var(--blue-ink);font-size:1.02rem;margin-bottom:2px}
.pod span{color:var(--muted);font-size:.9rem;font-weight:600}
.pod-1{transform:translateY(-14px)}
.pod-1 .pod-rank{background:#f2c200;color:#5a4500}
.pod-2 .pod-rank{background:#b9c2cc;color:#39434d}
.pod-3 .pod-rank{background:#cd8a52;color:#3d2410}

/* Tableau de classement */
.ranking{width:100%;border-collapse:collapse;background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);font-size:.95rem}
.ranking th{background:var(--blue-ink);color:#fff;text-align:left;padding:12px 16px;
  font-style:italic;text-transform:uppercase;letter-spacing:.3px;font-size:.82rem}
.ranking td{padding:11px 16px;border-top:1px solid var(--line);color:#2c3240}
.ranking td:first-child{font-weight:800;color:var(--blue-ink);width:96px;white-space:nowrap}
.ranking tbody tr:nth-child(even){background:#f7f9fc}
.flag{vertical-align:-2px;margin-right:6px;border-radius:2px;overflow:hidden}
.btn-cta-nav{font-size:.9rem;padding:6px 6px 6px 16px;gap:10px;text-transform:none;font-style:normal;letter-spacing:0}
.btn-cta-nav::after{width:30px;height:30px;font-size:.95rem}
/* Aftermovie (iframe YouTube dans un split) */
.split-video{position:relative;padding:0;overflow:hidden;min-height:340px}
.split-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
@media(max-width:760px){.split-video{min-height:56vw}}
/* Pilule de carrousel non cliquable : pas de flèche « lien » */
.ccard-pill-static .ccard-arrow{display:none}
/* Footer : texte lisible + blanc au survol (pas de bleu sur bleu) */
.foot a{color:#dfe4ff;transition:color .15s}
.foot a:hover{color:#fff}
/* Le texte d'intro (paragraphe) passe blanc au survol */
.foot .coherence-sub,.foot-cols>div,.foot-cols .muted{transition:color .15s}
.foot .coherence-sub:hover,.foot-cols>div:hover,.foot-cols>div:hover .muted{color:#fff}
/* Cartes « 3 mondes » : au survol, fond bleu + texte blanc. */
.foot .flow-step:hover{background:var(--blue)}
.foot .flow-step:hover h3,.foot .flow-step:hover p{color:#fff}
.foot .flow-step:hover span{background:#fff;color:var(--blue-ink)}

@media (max-width:720px){
  .split{grid-template-columns:1fr}
  .split-media{min-height:200px}
  .podium{grid-template-columns:1fr;max-width:340px;margin:0 auto}
  .pod-1{transform:none}
}

/* Bandeau cohérence (cliquable = mini-switcher) */
.coherence{max-width:var(--container);margin:0 auto;padding:20px 22px 64px;text-align:center}
.coherence h2{font-size:1.9rem;color:var(--blue-ink);margin:0 0 12px}
.coherence-sub{color:var(--muted);max-width:640px;margin:0 auto 30px;font-size:1.05rem}
.flow{display:flex;align-items:stretch;justify-content:center;gap:12px;flex-wrap:wrap}
.flow-step{flex:1;min-width:170px;max-width:240px;background:var(--card);cursor:pointer;
  border:1px solid var(--line);border-top:5px solid var(--blue);border-radius:var(--radius);
  padding:22px;box-shadow:var(--shadow);text-align:center;transition:transform .15s}
.flow-step:hover{transform:translateY(-3px)}
.flow-step.academie{border-top-color:var(--fluo-d)}
.flow-step span{display:inline-flex;width:34px;height:34px;border-radius:50%;
  background:var(--blue);color:#fff;align-items:center;justify-content:center;
  font-weight:800;font-style:italic;margin-bottom:10px}
.flow-step.academie span{background:var(--fluo-d);color:var(--fluo-ink)}
.flow-step h3{margin:0 0 4px;font-size:1.15rem;color:var(--blue-ink)}
.flow-step p{margin:0;color:var(--muted);font-size:.9rem;font-weight:600}
.flow-arrow{align-self:center;color:var(--blue);font-size:1.6rem;font-weight:800}

/* Pied de page */
.foot{background:var(--blue-ink);color:#dfe4ff;padding:40px 22px 26px}
.foot-cols{max-width:var(--container);margin:0 auto;display:flex;gap:40px;flex-wrap:wrap;
  justify-content:space-between;font-size:.92rem;line-height:1.7}
.foot-copy{text-align:center;margin:28px 0 0;opacity:.6;font-size:.82rem}
.brand.blue{color:var(--blue)}
/* Footer : sponsors communs + sélecteur 3 mondes */
.foot-worlds{display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.foot-switcher{display:flex;gap:8px;flex-wrap:wrap}
.foot-switcher .sw{background:rgba(255,255,255,.08);color:#fff;border:1px solid rgba(255,255,255,.22);padding:7px 15px;border-radius:22px;font-weight:600;font-size:.85rem}
.foot-switcher .sw:hover{background:rgba(255,255,255,.18)}
.foot-switcher .sw.active{background:#fff;color:var(--blue-ink);border-color:transparent}
/* Coachs (Academy) */
.coach-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:22px}
.coach{margin:0;text-align:center}
.coach-photo{width:100%;aspect-ratio:3/4;background-size:cover;background-position:center top;border-radius:16px;box-shadow:var(--shadow)}
.coach figcaption{margin-top:10px;display:flex;flex-direction:column;gap:2px}
.coach figcaption b{font-size:1rem}
.coach figcaption span{color:var(--muted);font-size:.85rem}
/* Révélation au défilement */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .6s ease,transform .6s cubic-bezier(.22,.61,.36,1)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}
/* Cadre autour du hero — bleu par défaut, vert fluo seulement pour l'Academy */
/* Lisere colle au bord de l'ecran : inset:0 + meme rayon que .hero, qui est
   en overflow:hidden, donc la photo est rognee net et rien ne depasse autour. */
.hero::after{content:"";position:absolute;inset:0;border:7px solid var(--blue);
  border-radius:18px;z-index:3;pointer-events:none}
body[data-world="academie"] .hero::after{border-color:var(--fluo-d)}
/* Carrousel de programmes (bandeau bleu foncé) */
/* Pleine largeur : la section sort de .world-main, qui la bridait a 1200 px.
   margin-inline:calc(50% - 50vw) la recentre sur la fenetre entiere. Plus de
   coins arrondis : un bandeau pleine largeur n'en a pas. */
.carousel-sec{background:var(--blue-ink);color:#fff;border-radius:0;
  width:100vw;margin-inline:calc(50% - 50vw);
  padding:var(--sec-md) 0}
.carousel-head{max-width:820px;margin:0 auto 36px;text-align:center;padding:0 22px}
.eyebrow{display:inline-flex;align-items:center;gap:8px;text-transform:uppercase;
  letter-spacing:.12em;font-size:.74rem;font-weight:800;color:#7da2ff;margin-bottom:14px}
.eyebrow::before{content:"";width:9px;height:9px;border-radius:50%;background:#7da2ff}
body[data-world="academie"] .eyebrow{color:var(--fluo-d)}
body[data-world="academie"] .eyebrow::before{background:var(--fluo-d)}
.carousel-sec h2{font-size:clamp(1.7rem,4vw,2.6rem);margin:0 0 12px;color:#fff}
.carousel-sub{color:rgba(255,255,255,.82);font-size:1.02rem;margin:0 auto;max-width:620px;line-height:1.5}
/* Carrousel : defilement continu, avec une barre pour reprendre la main.
   La serie de cartes est rendue deux fois ; la position de defilement avance en
   continu et, des qu'elle a parcouru une serie, on la ramene d'une serie en
   arriere — la copie se trouve alors exactement ou etait l'originale, d'ou une
   boucle sans saut.
   L'avancee est pilotee en JS, en pixels par seconde. Elle venait d'une
   animation CSS dont la duree etait un calc() sur une variable personnalisee,
   ce que les moteurs ne resolvent pas tous de la meme facon : le defilement
   n'allait donc pas a la meme allure d'un navigateur a l'autre. */
.carousel{overflow-x:auto;overflow-y:hidden;padding:6px 0 10px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
  scrollbar-width:thin;scrollbar-color:#7da2ff transparent}
/* Barre toujours visible plutot qu'en surimpression : c'est elle qui indique
   qu'on peut tirer. */
.carousel::-webkit-scrollbar{height:8px}
.carousel::-webkit-scrollbar-track{background:rgba(255,255,255,.14);border-radius:999px}
.carousel::-webkit-scrollbar-thumb{background:#7da2ff;border-radius:999px}
.carousel::-webkit-scrollbar-thumb:hover{background:#9fbaff}
.carousel-track{display:flex;gap:18px;width:max-content}
.carousel-clone{display:contents}
/* Animations reduites : plus d'avancee automatique, seule la barre reste. */
@media(prefers-reduced-motion:reduce){
  .carousel{scroll-snap-type:x mandatory;-webkit-mask-image:none;mask-image:none}
  .carousel-clone{display:none}
}
.ccard{position:relative;flex:0 0 clamp(250px,70vw,330px);scroll-snap-align:start;
  border-radius:18px;overflow:hidden;aspect-ratio:3/4;box-shadow:0 12px 28px rgba(0,0,0,.3)}
.ccard-media{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform .5s}
.ccard:hover .ccard-media{transform:scale(1.06)}
/* Pastilles des cartes : meme mecanique que .btn-cta — un disque vert grandit
   depuis la fleche et inonde la pilule. Le disque est ::before en z-index:-1
   avec isolation:isolate : dans un contexte d'empilement, un enfant en z-index
   negatif se peint apres le fond du parent mais avant son texte, donc le
   libelle reste lisible. overflow:hidden le rogne a la forme de la pilule. */
.ccard-pill{position:absolute;left:14px;bottom:14px;display:inline-flex;align-items:center;gap:10px;
  background-color:#fff;color:var(--blue-ink);font-weight:700;padding:9px 9px 9px 16px;border-radius:999px;
  text-decoration:none;font-size:.95rem;border:0;cursor:pointer;
  isolation:isolate;overflow:hidden;transition:color .25s,box-shadow .14s}
.ccard-pill-static{cursor:default}
.ccard-arrow{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;
  flex-shrink:0;border-radius:50%;background-color:var(--blue);color:#fff;font-size:.9rem;font-weight:700;
  transition:transform .14s}
body[data-world="academie"] .ccard-arrow{background-color:var(--fluo-d);color:var(--fluo-ink)}
.ccard-pill-static .ccard-arrow{background-color:#eef1f7;color:var(--muted)}
/* Le disque, cale sur la fleche. Seulement sur les pastilles cliquables :
   une pastille statique ne doit pas suggerer une action. */
a.ccard-pill::before,button.ccard-pill::before{content:"";position:absolute;z-index:-1;
  right:9px;top:50%;width:26px;height:26px;margin-top:-13px;border-radius:50%;
  background-color:var(--fluo);transform:scale(0);
  transition:transform .42s cubic-bezier(.4,0,.2,1)}
a.ccard-pill:hover,button.ccard-pill:hover,
a.ccard-pill:focus-visible,button.ccard-pill:focus-visible{
  color:var(--fluo-ink);box-shadow:0 4px 14px rgba(0,0,0,.28)}
a.ccard-pill:hover::before,button.ccard-pill:hover::before,
a.ccard-pill:focus-visible::before,button.ccard-pill:focus-visible::before{transform:scale(22)}
a.ccard-pill:hover .ccard-arrow,button.ccard-pill:hover .ccard-arrow{
  background-color:#fff;color:var(--fluo-ink);transform:translate(2px,-2px)}
/* ---- Palmares ----
   Un tableau a deux lignes se lisait comme un releve de compte. Une fiche par
   edition : le millesime grave a gauche, le titre en simple en avant (c'est LE
   titre du tournoi), la paire du double en dessous, et une coupe en filigrane.
   Au survol, la fiche s'eclaire et la coupe monte legerement — juste assez pour
   qu'on sente que la liste est vivante. */
.palm-tete{margin:0 0 22px}
.palm-tete h2{font-size:1.7rem;color:var(--blue-ink);margin:0 0 8px}
.palm{list-style:none;margin:0;padding:0;display:grid;gap:14px}
@media(min-width:780px){ .palm{grid-template-columns:repeat(2,1fr);gap:16px} }

.palm-an{position:relative;overflow:hidden;isolation:isolate;
  display:flex;align-items:stretch;gap:clamp(14px,2.4vw,24px);
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:20px clamp(18px,2.6vw,26px);box-shadow:var(--shadow);
  transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease}
.palm-an:hover{transform:translateY(-4px);box-shadow:0 14px 34px rgba(20,26,46,.15);
  border-color:var(--fluo)}
/* L'edition la plus recente porte la couleur : c'est celle qu'on cherche. */
.palm-dernier{background:linear-gradient(135deg,#f3f7ff,var(--card) 58%);border-color:#cfdcfa}

.palm-millesime{flex:0 0 auto;display:flex;flex-direction:column;justify-content:center;
  gap:7px;padding-right:clamp(14px,2.4vw,24px);border-right:1px solid var(--line)}
.palm-millesime > span{font-family:var(--font-accent);font-weight:700;line-height:1;
  font-size:clamp(1.8rem,4.4vw,2.5rem);color:var(--blue);letter-spacing:-.03em;
  font-variant-numeric:tabular-nums}
.palm-dernier .palm-millesime > span{color:var(--blue-ink)}
.palm-tag{display:inline-block;font-style:normal;font-size:.62rem;font-weight:800;
  text-transform:uppercase;letter-spacing:.08em;white-space:nowrap;
  background:var(--fluo);color:var(--fluo-ink);padding:3px 8px;border-radius:999px}

.palm-titres{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:11px}
.palm-t{display:flex;flex-direction:column;gap:3px;min-width:0}
.palm-lab{font-size:.66rem;font-weight:800;text-transform:uppercase;letter-spacing:.1em;
  color:var(--muted)}
/* Les deux joueurs d'un double sont separes par l'espacement, pas par un
   point median : des que la paire passait sur deux lignes, le point restait
   seul en fin de ligne. */
.palm-qui{display:flex;flex-wrap:wrap;gap:2px 16px;
  font-weight:800;color:var(--blue-ink);line-height:1.4}
/* Drapeau et nom ne se separent jamais. */
.palm-j{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
/* Le simple est le titre du tournoi : il doit peser plus que le double. */
.palm-simple .palm-qui{font-size:1.12rem}
.palm-double .palm-qui{font-size:.9rem;font-weight:700;color:#2c3240}
.palm-qui .flag{border-radius:2px;flex-shrink:0;box-shadow:0 0 0 1px rgba(0,0,0,.12)}

/* La coupe, en filigrane dans le coin. z-index negatif dans un contexte
   d'empilement : elle se peint apres le fond de la fiche mais avant son texte. */
.palm-coupe{position:absolute;right:-18px;bottom:-20px;z-index:-1;
  width:104px;height:104px;color:var(--blue);opacity:.05;
  transition:transform .35s ease,opacity .35s ease}
.palm-an:hover .palm-coupe{transform:translateY(-6px) rotate(-6deg);opacity:.11}

@media(max-width:480px){
  .palm-an{flex-direction:column;gap:14px}
  .palm-millesime{flex-direction:row;align-items:center;gap:12px;
    padding:0 0 12px;border-right:0;border-bottom:1px solid var(--line)}
}
@media(prefers-reduced-motion:reduce){
  .palm-an,.palm-coupe{transition:none}
}


/* ---- Partenaires : bandeau defilant ----
   Quatorze logos alignes en mur faisaient une fin de page pesante, et chaque
   logo y pesait autant qu'un bloc de texte. Ils defilent maintenant en continu,
   noirs sur fond clair. La serie est rendue deux fois et la piste se translate
   d'exactement une serie : la copie arrive pile ou etait l'originale, donc la
   boucle ne se voit pas. Le survol arrete tout — on doit pouvoir viser un logo.
   Les SVG portent fill="currentColor" ; charges en <img> ils se peignent en
   noir, comme les PNG detoures. */
.partners{max-width:none;margin:0 auto;padding:0 0 var(--sec-sm);text-align:center}
.partners-title{font-family:var(--font-accent);font-size:1.05rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.02em;color:var(--muted);
  margin:0 0 26px;position:relative}
/* Un filet de part et d'autre du titre, pour poser le bandeau sans l'alourdir. */
.partners-title::before,.partners-title::after{content:"";position:absolute;top:50%;
  width:clamp(24px,12%,110px);height:1px;background:var(--line)}
.partners-title::before{right:calc(50% + 1em + 8.5em)}
.partners-title::after{left:calc(50% + 1em + 8.5em)}
@media(max-width:560px){
  .partners-title::before,.partners-title::after{display:none}
}

.reel{--reel-gap:clamp(34px,5vw,72px);
  width:100vw;margin-inline:calc(50% - 50vw);overflow:hidden;
  /* Les logos naissent et meurent dans le fondu au lieu d'etre coupes net. */
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.reel-piste{display:flex;width:max-content;animation:reel-defile 48s linear infinite;
  /* Repli : la duree vraie est calculee en JS d'apres la largeur mesuree. */
  will-change:transform}
.reel:hover .reel-piste,.reel:focus-within .reel-piste{animation-play-state:paused}
/* L'espacement final de chaque serie lui appartient, donc -50 % tombe pile sur
   le debut de la copie. */
.reel-serie{list-style:none;margin:0;padding:0 var(--reel-gap) 0 0;
  display:flex;align-items:center;gap:var(--reel-gap)}
@keyframes reel-defile{from{transform:translateX(0)}to{transform:translateX(-50%)}}

.reel-logo{display:flex;align-items:center;justify-content:center;
  text-decoration:none;border-radius:var(--radius-md);padding:8px 4px}
/* Hauteur commune, largeur bridee : un logo en bandeau (« Ville de Lausanne »)
   et un logo carre (« ibis ») n'occupent pas la meme surface a hauteur egale.
   La bride de largeur remet les deux familles a une taille comparable. */
.reel-logo img{display:block;height:clamp(38px,5vw,56px);width:auto;
  max-width:clamp(128px,17vw,192px);object-fit:contain;
  transition:opacity .25s ease,transform .25s ease;opacity:.78}
.reel-logo:hover img,.reel-logo:focus-visible img{opacity:1;transform:translateY(-3px) scale(1.05)}
.reel-logo:focus-visible{outline:2px solid var(--blue);outline-offset:2px}

/* Animations reduites : plus de defilement, le bandeau se tire a la main et la
   copie disparait pour ne pas doubler chaque logo. */
@media(prefers-reduced-motion:reduce){
  .reel{overflow-x:auto;-webkit-mask-image:none;mask-image:none;
    scrollbar-width:thin;scrollbar-color:var(--line) transparent}
  .reel-piste{animation:none}
  .reel-serie+.reel-serie{display:none}
  .reel-logo img{transition:none}
}

/* Le meme bandeau, dans la page du tournoi : titre centre puis logos pleine
   largeur, sur un fond legerement teinte qui detache la fin de page. */
.sponsors-sec{width:100vw;margin-inline:calc(50% - 50vw);
  background:linear-gradient(180deg,#fff,var(--bg));
  padding:var(--sec-sm) 0;border-top:1px solid var(--line)}
.sponsors-head{max-width:var(--container);margin:0 auto 34px;padding:0 22px;text-align:center}
.sponsors-head h2{font-size:1.7rem;color:var(--blue-ink);margin:0 0 10px}
.sponsors-head .wsec-sub{margin:0 auto;max-width:520px}

/* ---- Bandeau reseaux sociaux (apres les partenaires, avant le pied) ----
   Photo de fond + voile bleu pour garder le texte lisible. Les vignettes
   defilent en continu et passent derriere un cadre Instagram decoratif dont la
   fenetre centrale est transparente. Meme mecanique que le carrousel : la serie
   est doublee et les keyframes carousel-defile sont reutilisees, d'ou un gap de
   18 px, indispensable pour que calc(-50% - 9px) tombe juste. */
/* --vig pilote a la fois la largeur des vignettes, celle du cadre et la
   hauteur de sa fenetre : c'est ce qui fait que la photo se cale au pixel
   dans le cadre, et que les deux se lisent comme une seule piece. */
.insta{--vig:clamp(190px,25vw,300px);
  position:relative;width:100vw;margin-inline:calc(50% - 50vw);
  padding:var(--sec-md) 0;color:#fff;isolation:isolate;
  background:url("assets/photos/insta-fond.jpg") center/cover no-repeat}
/* Voile : sans lui, ni le titre ni le cadre blanc ne tiennent sur la photo. */
.insta::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(0,54,82,.88),rgba(0,54,82,.78))}
.insta-head{max-width:820px;margin:0 auto 36px;text-align:center;padding:0 22px}
.insta-head h2{font-size:clamp(1.7rem,4vw,2.6rem);margin:0 0 12px;color:#fff}
.insta-sub{color:rgba(255,255,255,.86);font-size:1.02rem;margin:0 auto;max-width:620px;line-height:1.5}

/* Le cadre depasse la bande d'environ 50 px en haut et en bas : sans ce
   rembourrage, sa barre de profil chevaucherait le sous-titre. */
.insta-stage{position:relative;padding-block:clamp(42px,6vw,64px)}
.insta-strip{overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
/* Position pilotee en JS : chaque clic cale une vignette dans la fenetre
   du cadre. Plus de defilement automatique. */
.insta-track{list-style:none;margin:0;padding:0;display:flex;gap:18px;width:max-content;
  will-change:transform}
.insta-clone{display:contents}
.insta-track li,.insta-clone img{flex:0 0 auto}
.insta-track img{display:block;width:var(--vig);aspect-ratio:1;
  object-fit:cover;border-radius:var(--radius-md);
  filter:saturate(.95);transition:transform .3s,filter .3s}
.insta-track img:hover{transform:scale(1.03);filter:saturate(1.1)}

/* Fleches de navigation, posees sur les bords de la scene. */
.insta-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:46px;height:46px;border-radius:50%;border:0;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  background:#fff;color:var(--blue-ink);padding:0;
  box-shadow:0 6px 18px rgba(0,0,0,.35);transition:background-color .18s,transform .18s}
.insta-arrow svg{width:22px;height:22px}
.insta-arrow:hover{background:var(--fluo);color:var(--fluo-ink);transform:translateY(-50%) scale(1.06)}
.insta-arrow:focus-visible{outline:3px solid var(--fluo);outline-offset:3px}
.insta-prev{left:clamp(10px,3vw,34px)}
.insta-next{right:clamp(10px,3vw,34px)}
/* Cadre Instagram : purement decoratif, il ne capte pas la souris pour ne pas
   empecher la pause au survol des vignettes qui passent dessous. */
.insta-frame{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  z-index:2;pointer-events:none;width:var(--vig);
  filter:drop-shadow(0 18px 40px rgba(0,0,0,.45))}
.if-head{display:flex;align-items:center;gap:10px;background:#fff;color:#111;
  padding:10px 12px;border-radius:14px 14px 0 0}
/* Le logo est en portrait (1297x2000) : cover le rognait de haut en bas.
   contain le montre entier, sur un rond blanc avec un peu de marge. */
.if-ava{width:40px;height:40px;border-radius:50%;object-fit:contain;
  background:#fff;padding:3px;flex-shrink:0;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.10)}
.if-id{display:flex;flex-direction:column;line-height:1.2;min-width:0}
.if-id b{font-size:.9rem;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.if-id small{font-size:.76rem;color:#666}
/* La fenetre : transparente, c'est par elle qu'on voit passer les photos. */
.if-window{height:var(--vig)}
.if-actions{display:flex;align-items:center;gap:16px;background:#fff;color:#111;
  padding:11px 14px;border-radius:0 0 14px 14px}
.if-actions svg{width:22px;height:22px;flex-shrink:0}
.if-actions .if-save{margin-left:auto}

.insta-cta{text-align:center;margin-top:38px;padding:0 22px}
/* Le soulignement venait du style de lien par defaut. */
.insta-cta .btn-cta{text-decoration:none;text-transform:uppercase;letter-spacing:.02em}
@media(max-width:640px){
  .insta{--vig:min(76vw,300px)}
}
@media(prefers-reduced-motion:reduce){
  .insta-track,.insta-track img,.insta-arrow{transition:none}
}
/* « Un lieu, trois mondes » dans le footer bleu */
.foot .coherence{padding:8px 22px 40px}
.foot .coherence h2{color:#fff}
.foot .coherence-sub{color:rgba(255,255,255,.78)}
.foot .flow-arrow{color:#7da2ff}
/* Page Stages publique */
.nav-brand-link{color:var(--blue-ink);font-weight:700;font-style:normal;text-decoration:none;font-size:1.05rem}
.stg-hero{min-height:46vh}
.stg-hero .hero-content{padding:40px 22px}
.stg-intro{color:#2c3240;line-height:1.65;font-size:1.05rem;max-width:760px;margin:0 0 24px}
.formula-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:18px}
.formula{background:#fff;border:1px solid var(--line);border-radius:16px;padding:20px 20px 22px;
  box-shadow:var(--shadow);display:flex;flex-direction:column}
.formula-pro{border:2px solid var(--fluo-d)}
.formula h3{margin:0 0 4px;font-size:1.2rem;color:var(--blue-ink)}
.formula-age{color:var(--muted);font-weight:700;font-size:.85rem;margin-bottom:12px}
.formula ul{list-style:none;padding:0;margin:0 0 16px;flex:1}
.formula li{padding:4px 0 4px 20px;position:relative;font-size:.94rem;color:#2c3240}
.formula li::before{content:"";position:absolute;left:2px;top:12px;width:7px;height:7px;
  border-radius:50%;background:var(--fluo-d)}
.formula-price{font-size:1.5rem;font-weight:800;font-style:italic;color:var(--blue-ink)}

@media (max-width:640px){
  .nav{flex-wrap:wrap;gap:10px}
  .switcher{order:3;width:100%}
  .sw{padding:8px 12px;font-size:.85rem}
  .hero-logo{height:96px}
  /* Les 3 mondes restent côte-à-côte en mobile (pas empilés) */
  .flow{flex-wrap:nowrap;gap:5px;align-items:stretch}
  .flow-step{min-width:0;flex:1 1 0;max-width:none;padding:14px 6px}
  .flow-step span{width:28px;height:28px;font-size:.85rem;margin-bottom:7px}
  .flow-step h3{font-size:.82rem}
  .flow-step p{font-size:.7rem}
  .flow-arrow{transform:none;font-size:1rem}
}

/* =====================================================================
   FENÊTRE MODALE
   ===================================================================== */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.45);display:flex;
  align-items:center;justify-content:center;padding:20px;z-index:50}
.modal .card{position:relative;max-width:420px;width:100%}
.modal .card.wide{max-width:640px}
.modal-close{position:absolute;top:10px;right:12px;background:transparent;color:var(--muted);
  font-size:1.5rem;padding:2px 8px;line-height:1}
.modal-close:hover{color:var(--ink);background:transparent}

/* =====================================================================
   CONSOLE ADMIN
   ===================================================================== */
.admin-body{display:flex;min-height:calc(100dvh - 56px)}
.side{width:210px;background:#fff;border-right:1px solid var(--line);padding:14px;
  display:flex;flex-direction:column;gap:6px;flex-shrink:0;transition:opacity .12s ease}
.side:not(.ready){opacity:0}
.side-block{display:flex;flex-direction:column;gap:6px}
.side-block+.side-block{border-top:1px solid var(--line);margin-top:2px;padding-top:8px}
.side-item{background:transparent;color:var(--ink);text-align:left;padding:10px 12px;
  border-radius:9px;font-weight:500;display:flex;align-items:center;gap:11px}
.side-item .ico{width:20px;height:20px;flex-shrink:0;color:var(--blue,#123cc4);transition:color .15s}
.side-item:hover{background:#eef3f0}
.side-item.active{background:var(--green);color:#fff}
.side-item.active .ico{color:#fff}
.side-item:disabled .ico{color:var(--muted)}
.side-item:disabled{color:var(--muted);cursor:default}
.side-item:disabled:hover{background:transparent}
.admin-main{flex:1;padding:22px;overflow:auto}
.crm-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.crm-head h1{margin:0;font-size:1.5rem;flex:1}
.crm-actions{display:flex;gap:8px}
.crm-actions input{min-width:160px}
.table-wrap{background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  overflow:auto;box-shadow:var(--shadow)}
.crm-table{width:100%;border-collapse:collapse;font-size:.92rem}
.crm-table th,.crm-table td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--line)}
.crm-table th{color:var(--muted);font-weight:600;background:#fafbfa;position:sticky;top:0}
.crm-table tbody tr{cursor:pointer}
.crm-table tbody tr:hover{background:#f3f7f5}
#empty-msg{padding:24px;text-align:center}

.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form-grid label,.card textarea+*{}
.card textarea{font:inherit;padding:10px 12px;border:1px solid var(--line);border-radius:10px}
.card .check{flex-direction:row;align-items:center;gap:8px}
.form-foot{display:flex;align-items:center;gap:10px;margin-top:6px}
button.danger{background:#b3261e}
button.danger:hover{background:#8f1e17}

/* ---- Vue Réglages ---- */
.rg-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:20px;box-shadow:var(--shadow);margin:0 0 16px;max-width:820px}
.rg-card h2{margin:0 0 14px;font-size:1.15rem;color:var(--blue-ink)}
.rg-row{display:flex;gap:16px;align-items:flex-end;flex-wrap:wrap}
.rg-row label,.rg-grid label,.rg-card>label{display:flex;flex-direction:column;gap:6px;
  font-size:.88rem;color:var(--muted)}
.rg-weeks{font-weight:700;color:var(--blue);padding-bottom:10px}
.rg-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.rg-check{display:flex;align-items:center;gap:8px;margin:6px 0;color:var(--ink);font-size:.95rem}
.rg-card>label{margin-bottom:12px}
.rg-foot{display:flex;align-items:center;gap:14px;margin-top:4px}
#rg-pricing .crm-table td{padding:6px 8px}

@media (max-width:600px){
  .side{width:56px}
  .side-item{padding:12px 8px;justify-content:center}
  .side-item .side-label{display:none}
  .form-grid{grid-template-columns:1fr}
}

/* ================= PORTAIL MEMBRE (Mon espace) ================= */
body.portal{background:var(--bg)}
.portal .hidden{display:none !important}
.mascot{display:block}

/* ---- Connexion ---- */
.pt-login{min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:24px}
.pt-login-card{background:var(--card);border:1px solid var(--line);border-radius:20px;
  padding:26px 22px 22px;width:100%;max-width:380px;display:flex;flex-direction:column;gap:12px;
  box-shadow:0 18px 50px -22px rgba(15,31,110,.4);text-align:center}
.pt-login-mascot{display:flex;justify-content:center;margin-bottom:2px}
.pt-login-card h1{margin:0;font-size:1.5rem;color:var(--blue)}
.pt-login-card label{display:flex;flex-direction:column;gap:5px;text-align:left;font-weight:600;font-size:.9rem}
.pt-login-card .pt-back{margin-top:4px;color:var(--muted);text-decoration:none;font-size:.88rem}

/* ---- Cadre appli ---- */
.pt-app{min-height:100dvh;max-width:640px;margin:0 auto;padding-bottom:calc(78px + env(safe-area-inset-bottom))}
.pt-top{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:12px;
  background:var(--blue);color:#fff;padding:12px 16px;padding-top:calc(12px + env(safe-area-inset-top))}
.pt-logo{height:26px;filter:brightness(0) invert(1)}
.pt-top-title{font-weight:800;font-size:1.05rem;flex:1}
.pt-logout{background:rgba(255,255,255,.16);color:#fff;border:none;border-radius:10px;
  width:38px;height:38px;font-size:1.1rem;padding:0}
.pt-logout:hover{background:rgba(255,255,255,.28)}

/* ---- Sélecteur d'enfants ---- */
.pt-youths{display:flex;gap:8px;overflow-x:auto;padding:12px 16px 4px;-webkit-overflow-scrolling:touch}
.pt-youth{flex:0 0 auto;display:flex;align-items:center;gap:8px;background:#fff;color:var(--ink);
  border:1px solid var(--line);border-radius:999px;padding:6px 14px 6px 6px;font-weight:600;font-size:.9rem}
.pt-youth.sel{background:var(--blue);color:#fff;border-color:var(--blue)}
.pt-youth-av{width:30px;height:30px;border-radius:50%;background:#eef1ff;color:var(--blue-ink);
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.78rem}
.pt-youth.sel .pt-youth-av{background:rgba(255,255,255,.22);color:#fff}
.pt-youth-av.big{width:46px;height:46px;font-size:1rem}

.pt-main{padding:8px 16px 20px}
.pt-view{animation:ptfade .18s ease}
@keyframes ptfade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

/* ---- Accueil ---- */
.pt-hello{display:flex;gap:14px;align-items:center;background:var(--card);border:1px solid var(--line);
  border-radius:16px;padding:16px;margin-bottom:14px}
.pt-hello h2{margin:0 0 4px;font-size:1.15rem;color:var(--blue-ink)}
.pt-empty{background:var(--card);border:1px dashed var(--line);border-radius:16px;padding:26px 18px;
  text-align:center;color:var(--muted);margin-top:12px}

/* ---- Semaine ---- */
.pt-week{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:4px 0 14px}
.pt-week-nav{width:40px;height:40px;border-radius:12px;background:#fff;color:var(--blue);
  border:1px solid var(--line);font-size:1.3rem;padding:0}
.pt-week-nav:hover{background:#eef1ff}
.pt-week-lbl{font-weight:800;color:var(--blue-ink);text-align:center;flex:1}

.pt-day{font-weight:800;color:var(--blue-ink);text-transform:capitalize;margin:16px 2px 8px;font-size:.95rem}
.pt-day:first-of-type{margin-top:0}

/* ---- Carte de cours ---- */
.pt-course{background:var(--card);border:1px solid var(--line);border-left:5px solid var(--c);
  border-radius:14px;padding:13px 14px;margin-bottom:10px;box-shadow:0 6px 16px -12px rgba(15,31,110,.5)}
.pt-course-head{display:flex;gap:14px;align-items:flex-start}
.pt-course-time{font-weight:800;color:var(--blue-ink);line-height:1.15;font-size:1.05rem;min-width:52px}
.pt-course-time span{display:block;font-weight:600;color:var(--muted);font-size:.82rem}
.pt-course-info{flex:1;min-width:0}
.pt-course-youth{display:inline-block;background:#eef1ff;color:var(--blue-ink);font-weight:700;
  font-size:.72rem;padding:1px 8px;border-radius:999px;margin-bottom:3px}
.pt-course-title{font-weight:700;color:var(--ink)}
.pt-course-meta{color:var(--muted);font-size:.86rem;margin-top:2px}

/* auto-déclaration */
.pt-decl-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:11px;
  padding-top:11px;border-top:1px solid var(--line)}
.pt-decl-hint{font-size:.82rem;color:var(--muted);margin-right:2px}
.pt-decl{flex:1;min-width:78px;background:#fff;color:var(--ink);border:1px solid var(--line);
  border-radius:10px;padding:9px 6px;font-weight:700;font-size:.85rem}
.pt-decl:hover{border-color:var(--blue);color:var(--blue)}
.pt-decl.sel{color:#fff;border-color:transparent}
.pt-decl.sel.ok{background:#0b6b3a}
.pt-decl.sel.late{background:#c98a00}
.pt-decl.sel.no{background:#c0362c}

.pt-mark{margin-top:11px;padding-top:11px;border-top:1px solid var(--line);font-size:.9rem;color:var(--muted)}
.pt-mark b{padding:1px 9px;border-radius:999px;color:#fff}
.pt-mark.ok b{background:#0b6b3a}
.pt-mark.late b{background:#c98a00}
.pt-mark.no b{background:#c0362c}
.pt-mark.wait{color:var(--muted);font-style:italic}

/* ---- Panneaux Réserver / Stages ---- */
.pt-panel{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:22px 18px;text-align:center}
.pt-panel h2{margin:0 0 6px;color:var(--blue-ink)}
.pt-cta{display:inline-block;margin-top:14px;background:var(--blue);color:#fff;text-decoration:none;
  font-weight:700;padding:12px 22px;border-radius:12px}
.pt-cta:hover{background:var(--blue-d)}

/* ---- Profil ---- */
.pt-prof-card{display:flex;align-items:center;gap:14px;background:var(--card);border:1px solid var(--line);
  border-radius:14px;padding:14px;margin-bottom:10px}

/* ---- Assistant / mascotte ---- */
.pt-bot{position:fixed;right:16px;bottom:calc(84px + env(safe-area-inset-bottom));z-index:30;
  width:60px;height:60px;border-radius:50%;background:#fff;border:1px solid var(--line);padding:6px;
  box-shadow:0 12px 30px -10px rgba(15,31,110,.55)}
.pt-bot:hover{transform:translateY(-2px)}
.pt-bot-panel{position:fixed;right:16px;bottom:calc(150px + env(safe-area-inset-bottom));z-index:30;
  width:min(320px,calc(100vw - 32px));background:#fff;border:1px solid var(--line);border-radius:16px;
  box-shadow:0 20px 50px -18px rgba(15,31,110,.5);overflow:hidden}
.pt-bot-head{display:flex;align-items:center;gap:8px;background:var(--blue);color:#fff;padding:10px 12px;font-size:.95rem}
.pt-bot-head span{display:flex}
.pt-bot-head button{margin-left:auto;background:transparent;color:#fff;padding:0 4px;font-size:1rem}
.pt-bot-body{padding:14px}
.pt-bot-body p{margin:0 0 8px}

/* ---- Barre d'onglets ---- */
.pt-nav{position:fixed;left:0;right:0;bottom:0;z-index:25;display:flex;
  background:#fff;border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom);max-width:640px;margin:0 auto}
.pt-nav-item{flex:1;background:transparent;color:var(--muted);border:none;border-radius:0;
  display:flex;flex-direction:column;align-items:center;gap:3px;padding:9px 2px 8px;font-size:.7rem;font-weight:600}
.pt-nav-item svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}
.pt-nav-item.active{color:var(--blue)}
.pt-nav-item:hover{background:transparent;color:var(--blue)}

@media (min-width:641px){
  .pt-app{border-left:1px solid var(--line);border-right:1px solid var(--line);min-height:100dvh}
}

/* ---- Résultat création d'accès (console admin) ---- */
.invite-result{background:#eef7f0;border:1px solid #cfe8d6;border-radius:12px;padding:12px 14px;margin:6px 0 4px}
.invite-ok{margin:0;font-weight:700;color:#0b6b3a}
.invite-linkrow{display:flex;gap:8px;margin-top:6px}
.invite-linkrow input{flex:1;font-size:.82rem;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:#fff}
.invite-linkrow button{flex:0 0 auto;padding:8px 14px}

/* ================= NEWS (console admin) ================= */
.news-adm-list{display:flex;flex-direction:column;gap:10px}
.news-adm-card{display:flex;gap:14px;align-items:center;background:var(--card);border:1px solid var(--line);
  border-radius:12px;padding:10px;cursor:pointer}
.news-adm-card:hover{border-color:var(--blue)}
.news-adm-thumb{width:74px;height:58px;border-radius:8px;object-fit:cover;flex:0 0 auto;background:#eef1ff}
.news-adm-thumb.ph{display:flex;align-items:center;justify-content:center;font-size:1.5rem}
.news-adm-info{flex:1;min-width:0}
.news-adm-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.news-state{font-size:.7rem;font-weight:800;padding:1px 8px;border-radius:999px}
.news-state.pub{background:#e6f4ec;color:#0b6b3a}
.news-state.draft{background:#fdf0d9;color:#9a6a00}
.news-adm-aud{margin:5px 0 2px;display:flex;flex-wrap:wrap;gap:4px}
.news-adm-date{font-size:.8rem}
/* éditeur */
#news-form label{display:flex;flex-direction:column;gap:5px;font-weight:600;font-size:.9rem;margin-bottom:10px}
#news-form > label input,#news-form textarea{width:100%}
.news-img-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.news-img-preview{width:130px;height:86px;object-fit:cover;border-radius:8px;border:1px solid var(--line)}
.news-aud-wrap{margin:2px 0 8px}
.news-aud-lbl{font-weight:600;font-size:.9rem}
.news-aud-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:6px;margin-top:8px}
.news-aud-chk{display:flex;align-items:center;gap:6px;font-size:.88rem;font-weight:500}
.news-aud-chk input{width:auto}
.news-pub{flex-direction:row !important;align-items:center;gap:8px;font-weight:700}
.news-pub input{width:auto}

/* ================= NEWS (portail Mon espace) ================= */
.pt-news-card{background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden;
  margin-bottom:14px;box-shadow:0 6px 16px -12px rgba(15,31,110,.5)}
.pt-news-img{width:100%;height:180px;object-fit:cover;display:block}
.pt-news-body{padding:14px 16px}
.pt-news-body h3{margin:0 0 2px;color:var(--blue-ink);font-size:1.12rem}
.pt-news-date{color:var(--muted);font-size:.8rem;margin-bottom:8px}
.pt-news-body p{margin:0;line-height:1.55}

/* ---- Portail : Profil (suivi mental & études publics) ---- */
.pt-prof{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:14px 16px;margin-bottom:14px}
.pt-prof-head{display:flex;align-items:center;gap:12px}
.pt-suivi-sec{margin-top:14px}
.pt-suivi-h{font-weight:800;color:var(--blue-ink);margin-bottom:7px}
.pt-suivi-item{border-left:3px solid var(--blue);background:#f6f8ff;border-radius:0 10px 10px 0;padding:8px 12px;margin-bottom:8px}
.pt-suivi-meta{font-size:.76rem;color:var(--muted);font-weight:700;margin-bottom:2px}
.pt-suivi-item p{margin:0;line-height:1.5}

/* ---- Portail : Feuille de match (joueur/joueuse) ---- */
.mrp-players{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.mrp-player{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:7px 15px;font-weight:700;color:var(--ink)}
.mrp-player.sel{background:var(--blue);color:#fff;border-color:var(--blue)}
.mrp-card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px;margin-bottom:16px}
.mrp-h{margin:0 0 14px;font-size:1.15rem;color:var(--blue-ink)}
.mrp-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.mrp-grid label,.mrp-texts label,.mrp-comment{display:flex;flex-direction:column;gap:5px;font-size:.82rem;color:var(--muted);font-weight:700}
.mrp-grid input,.mrp-grid select,.mrp-texts textarea,.mrp-comment textarea{font:inherit;padding:9px 11px;border:1px solid var(--line);border-radius:10px;color:var(--ink);background:#fff}
.mrp-texts{display:flex;flex-direction:column;gap:11px;margin-top:12px}
.mrp-comment{margin-top:11px}
.mrp-ratings{display:flex;flex-direction:column;gap:9px;margin-top:14px}
.mrp-rate{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:.9rem;font-weight:600}
.mrp-stars{display:flex;gap:5px}
.mrp-star{width:30px;height:30px;border-radius:8px;border:1px solid var(--line);background:#f1f3f9;color:var(--muted);font-weight:800}
.mrp-star.on{background:var(--green);color:#fff;border-color:var(--green)}
.mrp-actions{display:flex;align-items:center;gap:12px;margin-top:16px}
.mrp-actions button{background:var(--blue);color:#fff;border:none;border-radius:11px;padding:11px 20px;font-weight:800}
.mrp-stats{display:flex;gap:10px;margin-bottom:14px}
.mrp-stat{flex:1;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px;text-align:center}
.mrp-stat b{display:block;font-size:1.5rem;color:var(--blue-ink)}
.mrp-stat span{font-size:.76rem;color:var(--muted)}
.mrp-stat.ok b{color:#1c7d38}.mrp-stat.no b{color:#b23838}
.mrp-h2{margin:16px 0 9px;font-size:1rem;color:var(--blue-ink)}
.mrp-comp-wrap{display:flex;flex-direction:column;gap:12px;margin-bottom:8px}
.mrp-comp{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:10px 12px}
.mrp-comp-l{font-weight:700;font-size:.86rem}
.mrp-comp-line{display:flex;align-items:center;gap:8px;margin-top:5px}
.mrp-tag{font-size:.72rem;font-weight:800;white-space:nowrap;width:78px}
.mrp-tag.coach{color:var(--blue-ink)}.mrp-tag.joueur{color:#1c7d38}
.mrp-bar{flex:1;height:8px;background:#eef1f7;border-radius:5px;overflow:hidden}
.mrp-bar-fill{height:100%;border-radius:5px}
.mrp-bar-fill.coach{background:var(--blue)}.mrp-bar-fill.joueur{background:var(--green)}
.mrp-report{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px 14px;margin-bottom:10px}
.mrp-report-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:6px}
.mrp-badge{font-size:.72rem;font-weight:800;padding:2px 9px;border-radius:20px}
.mrp-badge.coach{background:#e7ecff;color:var(--blue-ink)}
.mrp-badge.joueur{background:#e3f6e8;color:#1c7d38}
.mrp-win{color:#1c7d38;font-weight:800}.mrp-loss{color:#b23838;font-weight:800}
.mrp-field{margin-top:8px}
.mrp-field b{display:block;font-size:.82rem;color:var(--blue-ink)}
.mrp-field p{margin:2px 0 0;line-height:1.5}
@media (max-width:560px){.mrp-grid{grid-template-columns:1fr}}

/* ---- Portail : chat Rebond ---- */
.pt-bot-panel{display:flex;flex-direction:column;height:min(62vh,470px)}
.pt-bot-log{flex:1;overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:10px;background:var(--bg)}
.pt-bub{display:flex;gap:8px;align-items:flex-end;max-width:100%}
.pt-bub.me{justify-content:flex-end}
.pt-bub-av{flex:0 0 auto;width:28px;height:28px}
.pt-bub-txt{background:#fff;border:1px solid var(--line);border-radius:14px;padding:8px 12px;font-size:.9rem;line-height:1.45;max-width:82%}
.pt-bub.bot .pt-bub-txt{border-bottom-left-radius:4px}
.pt-bub.me .pt-bub-txt{background:var(--blue);color:#fff;border-color:var(--blue);border-bottom-right-radius:4px}
.pt-bub-txt a{color:inherit;text-decoration:underline}
.pt-bot-quick{display:flex;flex-wrap:wrap;gap:6px;padding:10px;border-top:1px solid var(--line);background:#fff;max-height:44%;overflow-y:auto}
.pt-qr{background:#eef1ff;color:var(--blue-ink);border:1px solid #dbe2ff;border-radius:999px;padding:7px 12px;font-size:.82rem;font-weight:600}
.pt-qr:hover{background:var(--blue);color:#fff;border-color:var(--blue)}

/* ---- Portail : Stages (inscription inline) ---- */
.pt-stg-card{background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden;
  margin-bottom:14px;box-shadow:0 6px 16px -12px rgba(15,31,110,.5)}
.pt-stg-img{width:100%;height:150px;object-fit:cover;display:block}
.pt-stg-body{padding:12px 14px}
.pt-stg-body h3{margin:0 0 2px;color:var(--blue-ink)}
.pt-stg-dates{color:var(--muted);font-size:.85rem}
.pt-stg-badges{display:flex;flex-wrap:wrap;gap:5px;margin:8px 0}
.pt-stg-tag{background:#eef1ff;color:var(--blue-ink);font-size:.72rem;font-weight:700;padding:2px 9px;border-radius:999px}
.pt-stg-foot{display:flex;align-items:center;justify-content:space-between;margin-top:6px}
.pt-stg-price{font-weight:800;color:var(--blue-ink)}
.pt-cta.sm{margin-top:0;padding:9px 16px;font-size:.9rem}
.pt-back-btn{background:transparent;color:var(--blue);border:none;font-weight:700;padding:2px 0 10px;border-radius:0}
.pt-back-btn:hover{background:transparent;color:var(--blue-d)}
.pt-form{display:flex;flex-direction:column;gap:10px}
.pt-form label{display:flex;flex-direction:column;gap:5px;font-weight:600;font-size:.9rem}
.pt-form input,.pt-form select,.pt-form textarea{width:100%}
.pt-form-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pt-form-lbl{font-weight:600;font-size:.9rem}
.pt-radio{flex-direction:row !important;align-items:center;gap:8px;font-weight:500 !important}
.pt-radio input,.pt-addon input{width:auto !important}
.pt-addon{flex-direction:row !important;align-items:center;gap:8px}

/* ---- Inscriptions (console admin) ---- */
.insc-card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin-bottom:10px}
.insc-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.insc-fil{background:var(--blue);color:#fff;font-size:.72rem;font-weight:800;padding:2px 10px;border-radius:999px}
.insc-rank{background:#eef1ff;color:var(--blue-ink);font-size:.74rem;font-weight:700;padding:1px 9px;border-radius:999px}
.insc-date{margin-left:auto;font-size:.8rem}
.insc-line{margin-top:5px;font-size:.9rem}
.insc-comment{margin-top:7px;background:#f6f8ff;border-radius:8px;padding:7px 10px;font-size:.88rem}
.insc-dup{margin-top:8px;background:#fdecec;color:#b3261e;border:1px solid #f6c9c4;border-radius:8px;padding:7px 10px;font-size:.85rem;font-weight:600}
.insc-acts{display:flex;gap:8px;align-items:center;margin-top:10px}
.insc-add{padding:8px 14px}
.insc-del{margin-left:auto}
.insc-added{color:#0b6b3a;font-weight:700}

/* ---- Indice de décodage du n° de licence (fiche) ---- */
.lic-hint{display:block;font-size:.78rem;font-weight:600;margin-top:4px;min-height:1em}
.lic-hint.ok{color:#0b6b3a}
.lic-hint.warn{color:#b3261e}

/* ---- Historique Swiss Tennis (fiche) ---- */
.pm-w{color:#0b6b3a;font-weight:800}
.pm-l{color:#b3261e;font-weight:800}
.pm-link{background:#eef1ff;color:var(--blue-ink);font-size:.72rem;font-weight:700;padding:1px 8px;border-radius:999px;white-space:nowrap}

/* ---- Prospects (scouting) ---- */
.prosp-filters{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:12px}
.prosp-filters input[type=search],.prosp-filters select{min-width:150px}
.prosp-chk{display:flex;align-items:center;gap:6px;font-size:.9rem;font-weight:600}
.prosp-row{cursor:pointer}
.prosp-row:hover{background:#f1f3f9}
.prosp-upset{color:#b3261e;font-weight:800}
.prosp-badge{font-size:.72rem;font-weight:800;padding:1px 9px;border-radius:999px;background:#eef1ff;color:var(--blue-ink)}
.prosp-badge.s-interesse{background:#e6f4ec;color:#0b6b3a}
.prosp-badge.s-en_cours{background:#fdf0d9;color:#9a6a00}
.prosp-badge.s-impossible,.prosp-badge.s-jamais_repondu{background:#fdecec;color:#b3261e}
.prosp-upset-row{background:#fff6f5}

/* ---- Prospects : fil d'exploits ---- */
.prosp-upfeed{background:#fff6f5;border:1px solid #f6c9c4;border-radius:12px;padding:12px 14px;margin-bottom:14px}
.prosp-upfeed-h{font-weight:800;color:#b3261e;margin-bottom:8px}
.prosp-upitem{padding:6px 0;border-top:1px solid #f3d6d2;cursor:pointer;font-size:.9rem}
.prosp-upitem:first-of-type{border-top:none}
.prosp-upitem:hover{color:var(--blue)}

/* ---- Prospects : fiche pleine page ---- */
#prosp-detail{max-width:900px}
.prosp-dhead{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin:10px 0 14px}
.prosp-dname{margin:0 0 8px;font-size:1.6rem;color:var(--blue-ink)}
.prosp-chips{display:flex;flex-wrap:wrap;gap:6px}
.prosp-chip{background:#eef1ff;color:var(--blue-ink);font-size:.78rem;font-weight:600;padding:3px 10px;border-radius:999px}
.prosp-cls-badge{flex:0 0 auto;background:var(--blue);color:#fff;font-weight:800;font-size:1.15rem;padding:8px 16px;border-radius:12px;display:flex;flex-direction:column;align-items:center;line-height:1.1}
.prosp-cls-badge small{font-size:.62rem;font-weight:600;opacity:.85;margin-top:2px}
.prosp-statrow{display:flex;gap:10px;margin-bottom:16px}
.prosp-stat{flex:1;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px;text-align:center}
.prosp-stat b{display:block;font-size:1.4rem;color:var(--blue-ink)}
.prosp-stat span{font-size:.78rem;color:var(--muted)}
.prosp-stat.up b{color:#b3261e}
.prosp-cols{display:grid;grid-template-columns:1fr 1.3fr;gap:16px;align-items:start}
.prosp-card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px}
.prosp-lbl{display:flex;flex-direction:column;gap:5px;font-weight:600;font-size:.9rem;margin-bottom:12px}
.prosp-lbl select,.prosp-lbl textarea{width:100%}
@media(max-width:780px){.prosp-cols{grid-template-columns:1fr}}

/* ---- Prospects : en-têtes triables ---- */
.prosp-table th[data-sort]{cursor:pointer;user-select:none;white-space:nowrap}
.prosp-table th[data-sort]:hover{color:var(--blue)}
.prosp-table th.sorted{color:var(--blue)}
.prosp-table th[data-dir=asc]::after{content:" ▲";font-size:.68em}
.prosp-table th[data-dir=desc]::after{content:" ▼";font-size:.68em}

/* ---- Prospects : coordonnées ---- */
.prosp-contact-box{margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.prosp-contact-box h4{margin:0 0 8px;color:var(--blue-ink);font-size:.95rem}
.prosp-contact-box>div{font-size:.9rem;margin-bottom:3px}

/* ---- Prospects : sous-onglets ---- */
.prosp-subtabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin:8px 0 14px}
.prosp-subtab{background:transparent;color:var(--muted);border:none;border-radius:0;border-bottom:2px solid transparent;padding:8px 14px;font-weight:600}
.prosp-subtab:hover{background:transparent;color:var(--ink)}
.prosp-subtab.active{color:var(--blue);border-bottom-color:var(--blue)}

/* ---- Prospects : exploits repliable ---- */
button.prosp-upfeed-h{display:flex;align-items:center;gap:8px;width:100%;background:transparent;border:none;color:#b3261e;font-weight:800;font-size:.98rem;padding:0;margin:0 0 8px;cursor:pointer;text-align:left}
button.prosp-upfeed-h:hover{background:transparent;color:#8f1e18}
.prosp-upfeed-chev{margin-left:auto;font-size:.75em;font-weight:600}

/* ---- Heures (décomptes) ---- */
.he-val{color:#0b6b3a;font-weight:800}
.he-acts{display:flex;gap:6px;white-space:nowrap}
.he-acts button{padding:5px 10px;font-size:.82rem}

/* ---- Sous-onglet Coach (tarifs) ---- */
.coach-rate-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:7px 0;border-bottom:1px solid var(--line)}
.coach-rate-acts{display:flex;gap:6px;white-space:nowrap}
.coach-rate-acts button{padding:4px 10px;font-size:.8rem}
.coach-rate-add{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:12px}
.coach-rate-add input[type=number]{max-width:120px}

/* ---- Heures : ma carte perso ---- */
.he-mine{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px;margin-bottom:16px}
.he-mine-h{font-weight:800;color:var(--blue-ink);margin-bottom:8px}
.he-mine-row{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding:8px 0;border-top:1px solid var(--line)}
.he-mine-row:first-of-type{border-top:none}
.he-mine-act{display:flex;align-items:center;gap:8px}

/* ---- Validation d'un cours (présences) ---- */
.att-validate{margin-top:16px;padding-top:14px;border-top:1px solid var(--line);display:flex;align-items:center;gap:10px;flex-wrap:wrap}

/* ---- Validation après-midi études (par jour) ---- */
.et-dayval{padding:2px 8px;font-size:.72rem;margin-top:3px}
.et-dayval.on{color:#0b6b3a;font-weight:700}

/* ---- Serrures connectées ---- */
.lock-card{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin-bottom:10px}
.lock-info{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.lock-state{font-size:.78rem;font-weight:700;padding:2px 10px;border-radius:999px}
.lk-locked{background:#eef1f7;color:var(--blue-ink)}
.lk-unlocked{background:#e6f4ec;color:#0b6b3a}
.lk-unknown{background:#fdf0d9;color:#9a6a00}
.lock-acts{display:flex;gap:6px;flex-wrap:wrap}
.lock-acts button{padding:6px 12px;font-size:.85rem}
.lkc-code{font-family:monospace;font-size:1.05rem;letter-spacing:1px;background:#eef1ff;padding:1px 8px;border-radius:6px}

/* ---- Arrosage : états ---- */
.irr-on{background:#e0f2fe;color:#0369a1}
.irr-off{background:#eef1f7;color:var(--muted)}

.wsec-sub{margin:-6px 0 18px;color:var(--muted);font-size:.95rem}


/* ---- Bas du site Lausanne Open : « Nous écrire » et le plan côte à côte ---- */
.lo-bottom{padding-top:0}
.lo-duo{display:grid;gap:44px;align-items:start}
@media(min-width:860px){
  .lo-duo{grid-template-columns:1fr 1fr;gap:48px}
  .lo-duo .wsec{margin-bottom:0}
}
.wsec-sub{margin:-8px 0 20px;color:var(--muted);font-size:.95rem;line-height:1.5}

/* le formulaire */
.lo-form{display:flex;flex-direction:column;gap:14px}
.lo-form label{display:flex;flex-direction:column;gap:6px;font-size:.88rem;
  font-weight:600;color:var(--muted)}
.lo-form input,.lo-form textarea{font:inherit;padding:12px 13px;border:1px solid var(--line);
  border-radius:10px;background:#fff;color:var(--ink);width:100%}
.lo-form textarea{resize:vertical;min-height:132px}
.lo-form input:focus,.lo-form textarea:focus{outline:2px solid var(--blue);border-color:var(--blue)}
.lo-form button{font:inherit;font-weight:800;cursor:pointer;border:0;border-radius:10px;
  padding:13px 24px;background:var(--blue);color:#fff;align-self:flex-start}
.lo-form button:hover{background:var(--blue-d)}
.lo-form button:disabled{opacity:.5}
.lo-msg{margin:0;font-size:.9rem;min-height:1.2em}
.lo-msg.ok{color:#1a7f4b;font-weight:700}
.lo-msg.ko{color:#b3261e;font-weight:700}

/* la carte, de la même hauteur que le formulaire à côté */
.lo-map{width:100%;height:428px;border:0;border-radius:var(--radius);display:block;
  box-shadow:var(--shadow)}

/* ---- Les 8 têtes de série : cartes a collectionner ----
   La photo occupe toute la carte, le numero de tete de serie est grave en fond
   et la biographie ne sort qu'a la demande. Huit pavés de texte alignes se
   lisaient comme un tableau ; ici on parcourt des visages.
   La carte est un <button> : au doigt il n'y a pas de survol, un simple :hover
   aurait rendu les biographies inaccessibles sur telephone. */
.pcard-grille{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
@media(min-width:680px){ .pcard-grille{grid-template-columns:repeat(3,1fr);gap:18px} }
@media(min-width:1000px){ .pcard-grille{grid-template-columns:repeat(4,1fr)} }

.pcard{position:relative;display:block;width:100%;padding:0;border:0;overflow:hidden;
  border-radius:var(--radius);aspect-ratio:3/4;cursor:pointer;text-align:left;
  background:var(--blue-ink);box-shadow:var(--shadow);
  transition:transform .3s cubic-bezier(.22,.61,.36,1),box-shadow .3s ease}
.pcard:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(4,32,94,.28)}
.pcard:focus-visible{outline:3px solid var(--fluo);outline-offset:3px}

.pcard-photo{position:absolute;inset:0;display:block;overflow:hidden}
.pcard-photo img{width:100%;height:100%;object-fit:cover;object-position:center 18%;
  display:block;transition:transform .55s cubic-bezier(.22,.61,.36,1)}
.pcard:hover .pcard-photo img,.pcard.on .pcard-photo img{transform:scale(1.07)}
/* Deux voiles superposes. Le premier tient toujours le nom lisible sur une
   photo claire ; le second ne monte qu'a l'ouverture, pour la biographie. On
   fait varier une opacite et non un degrade : les degrades ne se
   transitionnent pas. */
.pcard-photo::before,.pcard-photo::after{content:"";position:absolute;inset:0;pointer-events:none}
.pcard-photo::before{
  background:linear-gradient(to top,rgba(4,32,94,.94) 0%,rgba(4,32,94,.58) 22%,rgba(4,32,94,.02) 52%,transparent 100%)}
.pcard-photo::after{opacity:0;transition:opacity .38s ease;
  background:linear-gradient(to top,rgba(4,32,94,.97) 0%,rgba(4,32,94,.88) 45%,rgba(4,32,94,.45) 78%,rgba(4,32,94,.1) 100%)}
.pcard:hover .pcard-photo::after,.pcard.on .pcard-photo::after{opacity:1}

/* Le numero de tete de serie, grave dans le coin. Assez grand pour se lire de
   loin, assez discret pour ne pas manger le visage. */
.pcard-n{position:absolute;top:2px;right:14px;z-index:1;
  font-family:var(--font-accent);font-weight:700;font-size:clamp(3.2rem,7vw,4.6rem);
  line-height:1;color:rgba(255,255,255,.44);pointer-events:none;
  /* Sur un fond clair (un ciel, un mur blanc) un blanc translucide disparait :
     l'ombre porte lui redonne un bord. */
  text-shadow:0 2px 16px rgba(4,32,94,.7);
  transition:color .3s ease,transform .3s ease,text-shadow .3s ease}
.pcard:hover .pcard-n,.pcard.on .pcard-n{color:var(--fluo);transform:translateY(-2px)}

.pcard-bas{position:absolute;left:0;right:0;bottom:0;z-index:1;display:block;
  padding:14px 14px 15px;color:#fff}
.pcard-tete{display:flex;align-items:center;gap:8px;margin-bottom:5px}
.seed-flag{width:20px;height:14px;border-radius:2px;overflow:hidden;flex-shrink:0;
  box-shadow:0 0 0 1px rgba(255,255,255,.35)}
.seed-flag svg{width:100%;height:100%;display:block}
.pcard-nom{font-weight:800;font-size:.95rem;line-height:1.2}
.pcard-atp{display:block;font-size:.72rem;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;color:var(--fluo)}
.pcard-atp b{font-weight:800}
/* Le meilleur classement ne sort qu'a l'ouverture : au repos, la carte doit
   tenir en une ligne de chiffre. */
.pcard-best{color:rgba(255,255,255,.72);font-weight:700;letter-spacing:.03em;
  text-transform:none;display:none}
.pcard:hover .pcard-best,.pcard.on .pcard-best{display:inline}

/* La biographie glisse depuis le bas. On anime une grille a 0fr -> 1fr plutot
   qu'une hauteur : la hauteur du texte n'est pas connue d'avance et
   max-height oblige a deviner une valeur, toujours trop grande ou trop petite. */
.pcard-bio{display:grid;grid-template-rows:0fr;
  font-size:.8rem;line-height:1.45;color:rgba(255,255,255,.88);
  transition:grid-template-rows .38s cubic-bezier(.22,.61,.36,1),
             margin-top .38s cubic-bezier(.22,.61,.36,1)}
/* L'enfant porte le rognage : c'est lui qui est ecrase a 0. */
.pcard-bio > span{overflow:hidden;min-height:0}
.pcard:hover .pcard-bio,.pcard.on .pcard-bio{grid-template-rows:1fr;margin-top:9px}

/* Le « + » dit que la carte s'ouvre. Il devient « − » une fois ouverte. */
.pcard-plus{position:absolute;left:14px;top:14px;z-index:1;
  width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,.18);
  color:#fff;font-weight:800;font-size:1rem;line-height:26px;text-align:center;
  backdrop-filter:blur(3px);transition:background-color .25s ease,transform .25s ease}
.pcard:hover .pcard-plus{background:var(--fluo);color:var(--fluo-ink)}
.pcard.on .pcard-plus{background:var(--fluo);color:var(--fluo-ink);transform:rotate(45deg)}

@media(prefers-reduced-motion:reduce){
  .pcard,.pcard-photo img,.pcard-n,.pcard-bio,.pcard-plus{transition:none}
}

/* ---- Site public teamlausanne.ch : deux mondes ---- */
/* Onglet Club = lien externe (www.lstennis.ch), même look que les autres onglets */
a.sw{text-decoration:none;display:inline-flex;align-items:center}
a.flow-step{text-decoration:none;color:inherit;display:block}
/* Domaine lausanneopen.ch : tournoi seul, ni barre ni pied de page (jusqu'à la redirection vers teamlausanne.ch) */
html.lo-only .nav,html.lo-only .foot,body.lo-only .nav,body.lo-only .foot{display:none!important}
html.lo-only .hero,body.lo-only .hero{padding-top:40px}
html.lo-only .hero-switch-hint,body.lo-only .hero-switch-hint{display:none}
/* Vidéo verticale (YouTube Short) : encart plus haut, fond noir, pas de bandes latérales criardes */
.split-video-vertical{min-height:560px;background:#000}
@media(max-width:760px){.split-video-vertical{min-height:120vw}}
/* Mobile : liste d'accès directs ouverte au tap (classe .open posée par le script) */
.sw-wrap.open .sw-menu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(4px)}
@media(max-width:760px){.sw-menu{max-width:min(92vw,320px)}}
/* Mobile : la liste est masquée par défaut (règle plus haut), mais affichée quand l'onglet est ouvert au tap */
@media (max-width:760px){
  .sw-wrap.open .sw-menu{display:flex;flex-direction:column;z-index:40;left:0;transform:none;min-width:200px}
  .sw-wrap.open .sw-menu::before{display:none}
}
/* Vidéo hébergée sur le site (lecteur natif) : remplit le cadre sans rogner, fond noir */
.split-video video.split-native{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000;border:0;display:block}
@media(max-width:760px){.split-video-vertical{min-height:0;aspect-ratio:480/848}}

/* ============================================================
   Pages de filiere : bandeau de mots-cles, atouts, creneaux, FAQ
   ============================================================ */

/* Bandeau de mots-cles, pleine largeur. La serie est rendue deux fois et la
   piste se translate d'exactement une serie : chaque serie porte son propre
   espacement final, donc -50 % tombe pile sur le debut de la copie. */
.kw-band{--kw-gap:clamp(22px,4vw,44px);--kw-fond:var(--fluo);
  width:100vw;margin-inline:calc(50% - 50vw);
  background:var(--kw-fond);color:var(--fluo-ink);padding:16px 0;overflow:hidden}
/* Colle au bas du hero : sans cela, le rembourrage haut de .world-main laisse
   un blanc entre les deux et le bandeau flotte au lieu de prolonger l'image. */
.world-main>.kw-band:first-child{margin-top:calc(-1 * var(--sec-sm))}
/* Pas de fondu lateral ici : le bandeau est plein, il doit filer bord a bord. */
.kw-balle{width:1.15em;height:1.15em;flex:none}
.kw-piste{display:flex;width:max-content;animation:kw-defile 28s linear infinite;
  /* La duree est recalculee en JS selon la largeur ; 28s n'est qu'un repli. */
  will-change:transform}
.kw-serie{list-style:none;margin:0;padding:0 var(--kw-gap) 0 0;display:flex;gap:var(--kw-gap)}
.kw{display:inline-flex;align-items:center;gap:var(--kw-gap);white-space:nowrap;
  font-family:var(--font-accent);font-weight:700;text-transform:uppercase;
  letter-spacing:-.02em;font-size:clamp(1rem,2.2vw,1.5rem)}
.kw-band:hover .kw-piste{animation-play-state:paused}
@keyframes kw-defile{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* Atouts numerotes. Le chiffre glisse et s'allume au survol : c'est la seule
   animation de la carte, le reste doit rester lisible. */
/* 760 px : la phrase d'accroche des atouts demande 658 px en Acumin et 668 px
   avec le repli, donc elle tient sur une ligne meme avant que la police arrive. */
.perks-head{max-width:760px;margin:0 0 28px}
.perks-head h2{font-size:clamp(1.6rem,3.4vw,2.3rem);color:var(--blue-ink);margin:0 0 10px}
.perks-lead{color:var(--muted);font-size:1.02rem;line-height:1.55;margin:0}
.perk-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.perk{position:relative;overflow:hidden;isolation:isolate;
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:26px 22px 22px;box-shadow:var(--shadow);
  transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease}
.perk::before{content:"";position:absolute;inset:auto auto 0 0;z-index:-1;
  width:100%;height:0;background:var(--fluo);transition:height .32s cubic-bezier(.4,0,.2,1)}
.perk:hover{transform:translateY(-6px);box-shadow:0 14px 30px rgba(20,26,46,.16);
  border-color:var(--fluo)}
.perk:hover::before{height:5px}
.perk-num{display:block;font-family:var(--font-accent);font-weight:700;font-size:1.5rem;
  color:var(--fluo-d);line-height:1;margin-bottom:12px;
  transition:transform .28s ease,color .28s ease}
.perk:hover .perk-num{transform:translateX(4px);color:var(--blue)}
.perk h3{margin:0 0 8px;font-size:1.08rem;color:var(--blue-ink);
  font-style:normal;text-transform:none;letter-spacing:0}
.perk p{margin:0;color:var(--muted);font-size:.94rem;line-height:1.5}

/* Creneaux : une carte par jour, puis le tarif en bandeau. */
.slot-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px}
.slot{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:22px;box-shadow:var(--shadow);
  transition:transform .28s ease,border-color .28s ease}
.slot:hover{transform:translateY(-4px);border-color:var(--blue)}
.slot-titre{display:inline-block;font-family:var(--font-accent);font-weight:700;
  text-transform:uppercase;letter-spacing:-.02em;color:var(--blue);font-size:1.05rem;
  margin-bottom:12px}
.slot-heures{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.slot-heures li{background:#eef1f7;color:var(--blue-ink);font-weight:700;
  border-radius:var(--radius-md);padding:8px 12px;font-size:.95rem}
.slot-note{margin:12px 0 0;color:var(--muted);font-size:.88rem;line-height:1.45}
.slot-prix{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 16px;margin-top:18px;
  background:var(--blue-ink);color:#fff;border-radius:var(--radius);padding:22px 26px}
.slot-prix-quoi{text-transform:uppercase;letter-spacing:.12em;font-size:.74rem;
  font-weight:800;color:var(--fluo)}
.slot-prix-montant{font-family:var(--font-accent);font-weight:700;letter-spacing:-.03em;
  font-size:clamp(1.6rem,3.4vw,2.1rem);line-height:1}
.slot-prix-detail{color:rgba(255,255,255,.82);font-size:.94rem}
/* Le bouton est repousse a droite du bandeau ; align-self car le bandeau aligne
   ses textes sur la ligne de base, ce qui decalerait la pilule. */
.slot-prix-cta{margin-left:auto;align-self:center}
@media(max-width:720px){
  /* Empile : colle a droite, le bouton se retrouverait seul dans le vide. */
  .slot-prix-cta{margin-left:0;margin-top:4px}
}

/* FAQ depliante : <details> natif, donc clavier et lecteurs d'ecran gratuits. */
.faq-list{display:flex;flex-direction:column;gap:10px}
.faq-item{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;transition:border-color .24s ease,box-shadow .24s ease}
.faq-item[open]{border-color:var(--blue);box-shadow:var(--shadow)}
.faq-item summary{list-style:none;cursor:pointer;display:flex;align-items:center;
  justify-content:space-between;gap:18px;padding:18px 22px;
  font-weight:800;color:var(--blue-ink);font-size:1.02rem}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary:hover{background:#f3f6fc}
.faq-item summary:focus-visible{outline:3px solid var(--fluo);outline-offset:-3px}
/* Le signe se construit en CSS : deux barres, dont l'une disparait a l'ouverture. */
.faq-signe{position:relative;flex:none;width:20px;height:20px}
.faq-signe::before,.faq-signe::after{content:"";position:absolute;inset:50% 0 auto 0;
  height:2.5px;border-radius:2px;background:var(--blue);transform:translateY(-50%);
  transition:transform .28s cubic-bezier(.4,0,.2,1),opacity .2s}
.faq-signe::after{transform:translateY(-50%) rotate(90deg)}
.faq-item[open] .faq-signe::after{transform:translateY(-50%) rotate(0);opacity:0}
.faq-rep{padding:0 22px 20px;color:var(--muted);line-height:1.6;
  animation:faq-ouvre .3s ease both}
.faq-rep p{margin:0;max-width:62ch}
@keyframes faq-ouvre{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

@media(prefers-reduced-motion:reduce){
  .kw-piste{animation:none}
  .perk,.perk::before,.perk-num,.slot,.faq-item,.faq-signe::before,.faq-signe::after{transition:none}
  .faq-rep{animation:none}
}

/* Bouton principal d'une section : meme pilule que sur l'accueil, il lui
   manque juste la marge que .btn-cta n'a pas (il vit d'ordinaire dans le hero). */
.wsec-cta{margin-top:18px}

/* Petit defile de photos dans un split : les vues se fondent l'une dans
   l'autre, des pastilles permettent de choisir. */
.split-scroller{position:relative}
.ss-photo{position:absolute;inset:0;background-size:cover;background-position:center;
  opacity:0;transition:opacity .7s ease}
.ss-photo.on{opacity:1}
.ss-dots{position:absolute;left:0;right:0;bottom:14px;z-index:2;
  display:flex;justify-content:center;gap:9px}
.ss-dot{width:9px;height:9px;padding:0;border:0;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.55);box-shadow:0 1px 4px rgba(0,0,0,.35);
  transition:background-color .25s,transform .25s}
.ss-dot.on{background:var(--fluo);transform:scale(1.3)}
.ss-dot:hover{background:#fff}
.ss-dot:focus-visible{outline:3px solid var(--fluo);outline-offset:3px}
@media(prefers-reduced-motion:reduce){
  .ss-photo,.ss-dot{transition:none}
}

/* Titre d'une page de filiere : un seul trait continu sous tout le titre, et
   non un trait par mot comme pour le slogan de l'accueil.
   Le trait est ici un fond en degrade plutot qu'un ::after absolu : « Cours
   adultes et prives » passe sur deux lignes, et un ::after n'aurait souligne
   que la derniere, sur toute la largeur du bloc. Avec box-decoration-break,
   chaque fragment de ligne recoit son propre trait, qui pousse de la gauche. */
.hs-w-entier{display:inline;position:static;
  background-image:linear-gradient(var(--fluo),var(--fluo));
  background-repeat:no-repeat;
  background-position:0 calc(100% - .02em);
  background-size:0 .075em;
  transition:background-size .3s cubic-bezier(.4,0,.2,1);
  -webkit-box-decoration-break:clone;box-decoration-break:clone}
.hs-w-entier::after{content:none}
.hs-w-entier:hover{background-size:100% .075em}
@media(prefers-reduced-motion:reduce){
  .hs-w-entier{transition:none}
}

/* Tarif propre a un creneau : au Club le prix depend du jour choisi, alors
   qu'au Kids Tennis un seul prix vaut pour tous. */
.slot-tarif{display:inline-block;margin-top:12px;background:var(--fluo);color:var(--fluo-ink);
  font-family:var(--font-accent);font-weight:700;letter-spacing:-.02em;
  font-size:1.02rem;padding:5px 12px;border-radius:999px}

/* ---- Bandeau de la FAQ ----
   Les pages de filiere etaient tres blanches. Une photo de terre battue en
   pleine largeur leur donne du relief, comme sur la reference. Le voile sombre
   n'est pas decoratif : sans lui, le titre blanc se perdrait dans les zones
   claires de la photo. */
.faq{position:relative;isolation:isolate;
  width:100vw;margin-inline:calc(50% - 50vw);
  padding:var(--sec-md) 22px;
  background:#3a1d12 url("assets/photos/faq-fond.jpg") center/cover no-repeat}
.faq::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(10,22,48,.58),rgba(10,22,48,.74))}
.faq .perks-head{max-width:760px;margin:0 auto 30px;text-align:center}
.faq .perks-head h2{color:#fff}
.faq .eyebrow,body[data-world="academie"] .faq .eyebrow{color:#fff}
.faq .eyebrow::before,body[data-world="academie"] .faq .eyebrow::before{background:var(--fluo)}
/* La liste repose sur une carte blanche, qui la detache de la photo. */
.faq .faq-list{max-width:880px;margin:0 auto;gap:8px;
  background:#fff;border-radius:var(--radius);padding:16px;
  box-shadow:0 18px 44px rgba(0,0,0,.3)}
.faq .faq-item{background:#f2f4f8;border-color:transparent;border-radius:12px}
.faq .faq-item summary:hover{background:#e8edf6}
.faq .faq-item[open]{background:#fff;border-color:var(--blue)}
/* Le signe passe dans une pastille bleue, plus lisible sur le gris clair. */
.faq .faq-signe{width:26px;height:26px;border-radius:50%;background:var(--blue)}
.faq .faq-signe::before,.faq .faq-signe::after{background:#fff;inset:50% 7px auto 7px}
@media(max-width:640px){
  .faq{padding:var(--sec-sm) 16px}
  .faq .faq-list{padding:10px}
}

/* Note de bas de bloc « Entrainements et tarif » : la suite du parcours. */
.slots-note{margin:14px 0 0;color:var(--muted);font-size:.94rem;font-style:italic}

/* ============================================================
   Sport-etudes : film, portraits d'eleves, brochure
   ============================================================ */

/* Film de presentation : cadre sombre aux couleurs de la marque, liseré fluo. */
.filmsec{width:100vw;margin-inline:calc(50% - 50vw);padding:var(--sec-md) 22px;
  background:var(--blue-ink);color:#fff}
.film-head{max-width:760px;margin:0 auto 30px;text-align:center}
.film-head h2{color:#fff}
.filmsec .eyebrow,body[data-world="academie"] .filmsec .eyebrow{color:#fff}
.filmsec .eyebrow::before,body[data-world="academie"] .filmsec .eyebrow::before{background:var(--fluo)}
.film-head .perks-lead{color:rgba(255,255,255,.82)}
.film-cadre{position:relative;max-width:980px;margin:0 auto;aspect-ratio:16/9;
  border-radius:var(--radius);overflow:hidden;background:#000;
  box-shadow:0 24px 60px rgba(0,0,0,.45)}
/* Le liseré est un ::after pose par-dessus : une bordure sur le cadre lui-meme
   rognerait la video, qui remplit tout l'element. */
.film-cadre::after{content:"";position:absolute;inset:0;pointer-events:none;
  border:5px solid var(--fluo);border-radius:var(--radius)}
.film-media{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;
  object-fit:cover;background:#000}
.film-note{max-width:980px;margin:16px auto 0;text-align:center;
  color:rgba(255,255,255,.72);font-size:.92rem}

/* Portraits d'eleves : la photo d'abord, le texte au survol ou au clic. */
.eleve-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px}
.eleve{position:relative;
  aspect-ratio:3/4;border-radius:var(--radius);overflow:hidden;background:var(--blue-ink);
  box-shadow:var(--shadow);transition:transform .3s ease,box-shadow .3s ease}
.eleve:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(20,26,46,.22)}
/* Le bouton occupe toute la carte : c'est lui qui la retourne. */
.eleve-face{position:absolute;inset:0;display:block;padding:0;border:0;background:transparent;
  cursor:pointer;text-align:left;width:100%;height:100%}
.eleve-face:focus-visible{outline:3px solid var(--fluo);outline-offset:-4px}
/* Bulle myTennis : posee par-dessus le bouton, donc cliquable separement. */
.eleve-lien{position:absolute;top:14px;left:14px;z-index:2;
  display:inline-flex;align-items:center;gap:2px;
  background:#fff;color:var(--blue-ink);text-decoration:none;
  font-size:.74rem;font-weight:800;letter-spacing:.01em;
  padding:5px 11px;border-radius:999px;box-shadow:0 2px 10px rgba(0,0,0,.3);
  transition:background-color .2s,transform .2s}
.eleve-lien:hover{background:var(--fluo);transform:translateY(-1px)}
.eleve-lien:focus-visible{outline:3px solid var(--fluo);outline-offset:2px}
.eleve-photo{position:absolute;inset:0;background-size:cover;background-position:center top;
  transition:transform .5s ease,filter .35s ease}
.eleve:hover .eleve-photo{transform:scale(1.05)}
/* Bandeau du bas : nom et classement, lisibles sans rien survoler. */
.eleve-bas{position:absolute;left:0;right:0;bottom:0;padding:52px 18px 16px;
  display:flex;flex-direction:column;gap:2px;
  background:linear-gradient(180deg,transparent,rgba(4,32,94,.86));
  transition:opacity .3s ease}
.eleve-nom{font-family:var(--font-accent);font-weight:700;text-transform:uppercase;
  letter-spacing:-.02em;font-size:1.15rem;color:#fff;line-height:1.1}
.eleve-meta{color:var(--fluo);font-weight:700;font-size:.86rem}
/* Le dos de la carte, revele au survol ou au clic. */
.eleve-dos{position:absolute;inset:0;padding:22px;display:flex;flex-direction:column;
  justify-content:flex-end;gap:6px;color:#fff;
  background:linear-gradient(180deg,rgba(4,32,94,.55),rgba(4,32,94,.95));
  opacity:0;transition:opacity .35s ease}
.eleve-dos-nom{font-family:var(--font-accent);font-weight:700;text-transform:uppercase;
  letter-spacing:-.02em;font-size:1.2rem;line-height:1.1}
.eleve-dos-meta{color:var(--fluo);font-weight:700;font-size:.88rem;margin-bottom:4px}
.eleve-dos-txt{font-size:.95rem;line-height:1.55;color:rgba(255,255,255,.92)}
.eleve:hover .eleve-dos,.eleve.ouvert .eleve-dos,.eleve:focus-within .eleve-dos{opacity:1}
.eleve:hover .eleve-bas,.eleve.ouvert .eleve-bas{opacity:0}
/* Pastille « + » : elle dit qu'il y a quelque chose dessous. */
.eleve-plus{position:absolute;top:14px;right:14px;width:30px;height:30px;border-radius:50%;
  background:var(--fluo);transition:transform .35s ease}
.eleve-plus::before,.eleve-plus::after{content:"";position:absolute;inset:50% 8px auto 8px;
  height:2.5px;border-radius:2px;background:var(--fluo-ink);transform:translateY(-50%)}
.eleve-plus::after{transform:translateY(-50%) rotate(90deg)}
.eleve:hover .eleve-plus,.eleve.ouvert .eleve-plus{transform:rotate(45deg)}

/* Brochure : deux colonnes, le formulaire et la couverture. */
.brochure{width:100vw;margin-inline:calc(50% - 50vw);padding:var(--sec-md) 22px;
  background:var(--fluo);color:var(--fluo-ink)}
.broch-in{max-width:var(--container);margin:0 auto;
  display:grid;grid-template-columns:1.25fr .75fr;gap:36px;align-items:center}
.brochure .eyebrow,body[data-world="academie"] .brochure .eyebrow{color:var(--fluo-ink)}
.brochure .eyebrow::before,body[data-world="academie"] .brochure .eyebrow::before{background:var(--fluo-ink)}
.broch-txt h2{color:var(--fluo-ink);font-size:clamp(1.7rem,3.6vw,2.5rem);margin:0 0 12px}
.broch-lead{font-size:1.05rem;line-height:1.55;margin:0 0 22px;max-width:46ch}
.broch-form{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.broch-champ{flex:1 1 260px;min-width:0}
.broch-champ input{width:100%;font:inherit;font-size:1rem;padding:14px 18px;
  border:2px solid var(--fluo-ink);border-radius:999px;background:#fff;color:var(--ink)}
.broch-champ input:focus{outline:none;box-shadow:0 0 0 3px rgba(20,48,10,.25)}
.broch-msg{flex:1 0 100%;margin:0;font-weight:700;font-size:.95rem}
.broch-msg.ko{color:#7a1c1c}
.broch-msg a{color:var(--fluo-ink);font-weight:800}
.broch-rgpd{flex:1 0 100%;margin:0;font-size:.84rem;opacity:.75;line-height:1.45}
.broch-visuel img{display:block;width:100%;height:auto;border-radius:12px;
  box-shadow:0 20px 44px rgba(20,48,10,.35)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

@media(max-width:860px){
  .broch-in{grid-template-columns:1fr;gap:26px}
  .broch-visuel{max-width:320px}
}
@media(prefers-reduced-motion:reduce){
  .eleve,.eleve-photo,.eleve-dos,.eleve-bas,.eleve-plus{transition:none}
}

/* Formations, au dos de la carte : plus lisibles en etiquettes qu'en prose. */
.eleve-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.eleve-tag{background:rgba(255,255,255,.16);color:#fff;border:1px solid rgba(255,255,255,.3);
  border-radius:999px;padding:4px 10px;font-size:.76rem;font-weight:700;line-height:1.2}

/* Affiche du film : tant que personne n'a clique, le cadre est entierement a
   nous — ni titre YouTube, ni bouton « Regarder sur YouTube », ni requete vers
   YouTube. Le lecteur ne nait qu'au clic. */
.film-lance{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;
  display:block;overflow:hidden;background:#000;cursor:pointer}
.film-affiche{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .5s ease,filter .35s ease}
.film-lance:hover .film-affiche{transform:scale(1.04);filter:brightness(.82)}
.film-lance:focus-visible{outline:3px solid var(--fluo);outline-offset:-5px}
.film-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:clamp(62px,8vw,88px);aspect-ratio:1;border-radius:50%;background:var(--fluo);
  display:grid;place-items:center;box-shadow:0 10px 30px rgba(0,0,0,.45);
  transition:transform .28s ease}
/* Triangle dessine en CSS : pas d'image a charger pour un chevron. */
.film-play::before{content:"";margin-left:14%;
  border-style:solid;border-width:.9em 0 .9em 1.5em;
  border-color:transparent transparent transparent var(--fluo-ink)}
.film-lance:hover .film-play{transform:translate(-50%,-50%) scale(1.09)}
@media(prefers-reduced-motion:reduce){
  .film-affiche,.film-play{transition:none}
}

/* ============================================================
   Stages : filtres par age, cartes de formule, cartes de reservation
   ============================================================ */

/* Filtres : la tranche d'age est la premiere question qu'on se pose. */
.fm-filtres{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 22px}
.fm-filtre{background:#eef1f7;color:var(--blue-ink);border:0;cursor:pointer;
  font-weight:800;font-size:.86rem;padding:9px 18px;border-radius:999px;
  transition:background-color .2s,color .2s,transform .2s}
.fm-filtre:hover{background:#dde3ef;transform:translateY(-1px)}
.fm-filtre.on{background:var(--blue);color:#fff}
.fm-filtre:focus-visible{outline:3px solid var(--fluo);outline-offset:2px}

/* Cartes de formule : la carte est desormais un article structure, avec sa
   tranche d'age en tete et son prix detache en pied. */
.formula-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px}
.formula{position:relative;overflow:hidden;isolation:isolate;
  display:flex;flex-direction:column;
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:24px 22px 20px;box-shadow:var(--shadow);
  transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease}
/* Sans cette regle, display:flex l'emporterait sur l'attribut hidden pose par
   le filtre et la carte resterait visible. */
.formula[hidden]{display:none}
.formula::before{content:"";position:absolute;inset:auto auto 0 0;z-index:-1;
  width:100%;height:0;background:var(--fluo);transition:height .32s cubic-bezier(.4,0,.2,1)}
.formula:hover{transform:translateY(-6px);box-shadow:0 16px 34px rgba(20,26,46,.18);
  border-color:var(--fluo)}
.formula:hover::before{height:5px}
.formula-pro{border-color:var(--fluo-d)}
/* Dans le flux, et non posee sur le coin : en absolu, l'etiquette recouvrait la
   tranche d'age. Elle ouvre desormais la carte, et toutes les formules en ont
   une — celle de la semaine intensive se distingue par le fluo. */
.formula-etiq{align-self:flex-start;margin:0 0 12px;
  background:#eef1f7;color:var(--blue-ink);
  font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.07em;
  padding:6px 13px;border-radius:999px;line-height:1.25}
.formula-etiq-pro{background:var(--fluo);color:var(--fluo-ink)}
.formula-age{display:block;margin-bottom:6px;font-weight:800;font-size:.8rem;
  text-transform:uppercase;letter-spacing:.06em;color:var(--blue)}

.formula h3{margin:0 0 6px;font-family:var(--font-accent);font-weight:700;
  text-transform:uppercase;letter-spacing:-.02em;font-size:1.18rem;color:var(--blue-ink);
  line-height:1.15}
.formula-horaire{margin:0 0 14px;font-weight:700;color:var(--ink);font-size:.94rem}
.formula ul{list-style:none;padding:0;margin:0 0 18px;flex:1}
.formula li{padding:5px 0 5px 20px;position:relative;font-size:.93rem;color:var(--muted);
  line-height:1.45}
.formula li::before{content:"";position:absolute;left:2px;top:13px;width:7px;height:7px;
  border-radius:50%;background:var(--fluo-d)}
.formula-foot{display:flex;align-items:baseline;gap:7px;padding-top:14px;
  border-top:1px solid var(--line)}
.formula-price{font-family:var(--font-accent);font-weight:700;font-style:normal;
  letter-spacing:-.03em;font-size:1.7rem;color:var(--blue-ink);line-height:1}
.formula-sem{color:var(--muted);font-size:.86rem}

/* Cartes de reservation : toute la carte est cliquable, avec sa saison. */
.stg-pub-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px}
.stg-pub-card{position:relative;cursor:pointer;
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--card);
  display:flex;flex-direction:column;box-shadow:var(--shadow);
  transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease}
.stg-pub-card:hover{transform:translateY(-6px);box-shadow:0 16px 34px rgba(20,26,46,.18);
  border-color:var(--blue)}
.stg-saison{position:absolute;top:12px;left:12px;z-index:2;
  background:var(--fluo);color:var(--fluo-ink);font-size:.7rem;font-weight:800;
  text-transform:uppercase;letter-spacing:.08em;padding:5px 12px;border-radius:999px;
  box-shadow:0 2px 8px rgba(0,0,0,.25)}
.stg-pub-img{width:100%;height:170px;object-fit:cover;transition:transform .5s ease}
.stg-pub-card:hover .stg-pub-img{transform:scale(1.05)}
.stg-pub-body h3{margin:0;font-family:var(--font-accent);font-weight:700;
  text-transform:uppercase;letter-spacing:-.02em;font-size:1.1rem;color:var(--blue-ink)}
.stg-pub-dates{color:var(--muted);font-size:.9rem;font-weight:600}
.stg-pub-badges{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 2px}
.stg-tag{background:#eef1f7;color:var(--blue-ink);font-size:.72rem;font-weight:700;
  padding:3px 9px;border-radius:999px}
.stg-pub-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin-top:auto;padding-top:12px}
.stg-pub-price{font-family:var(--font-accent);font-weight:700;letter-spacing:-.02em;
  font-size:1.25rem;color:var(--blue-ink)}
.stg-pub-cta{background:var(--blue);color:#fff;border:0;border-radius:999px;cursor:pointer;
  font-weight:800;font-size:.88rem;padding:9px 18px;transition:background-color .2s}
.stg-pub-card:hover .stg-pub-cta{background:var(--fluo);color:var(--fluo-ink)}
.stg-pub-cta:focus-visible{outline:3px solid var(--fluo);outline-offset:2px}

@media(prefers-reduced-motion:reduce){
  .formula,.formula::before,.fm-filtre,.stg-pub-card,.stg-pub-img{transition:none}
}

/* Le chapeau des formules porte une phrase longue, avec la remise en fin de
   ligne : bride a 760 px elle se cassait en deux, la remise se retrouvant
   seule. Il prend ici toute la largeur de la section. */
.formules .perks-head{max-width:none}