/* ============================================================
   Page club publique (/club/…) — direction « Le carnet d'écurie ».
   Façade publique cohérente avec le panneau de gestion : navy + laiton,
   Fraunces pour les titres et les chiffres, fond pierre chaude.
   Signature : le solde de leçons en ticket perforé, la prochaine séance
   mise en avant comme un tableau d'affichage d'écurie.
   Tout est scopé sous body.club-page pour ne pas toucher le reste du site.
   ============================================================ */
/* Les jetons de l'espace membre reprennent désormais la palette globale du
   site — celle sur laquelle la vitrine publique a été dessinée. Passer d'une
   vitrine bleu marine / crème à un espace membre papier chaud donnait
   l'impression de changer de site en adhérant. Les noms --cx-* sont conservés :
   toute la feuille en dépend, seules leurs valeurs changent. */
body.club-page{
  --cx-navy:#1B2A4A; --cx-navy-2:#22385f; --cx-navy-3:#2c4a7a;
  --cx-brass:#9C6F2A; --cx-brass-2:#C8973F; --cx-brass-soft:#FBF1DD; --cx-brass-line:rgba(200,151,63,.34);
  --cx-paper:#F6F8FB; --cx-card:#FFFFFF; --cx-card-2:#FAFBFD;
  --cx-line:#E1E5EC; --cx-ink:#14181F; --cx-ink-2:#3a4257; --cx-muted:#5B6573;
  --cx-danger:#C0392B; --cx-danger-soft:#FBEAE7;
  --cx-r:16px; --cx-r-sm:11px;
  --cx-shadow:0 6px 24px rgba(17,29,54,.10);
  background:var(--cx-paper);
}

/* ---- rythme général de la page club ---- */
body.club-page .page-head{text-align:left;padding:34px 20px 6px}
body.club-page .breadcrumb{font-size:.82rem;color:var(--cx-muted);letter-spacing:.01em}
body.club-page .breadcrumb a{color:var(--cx-muted);text-decoration:none}
body.club-page .breadcrumb a:hover{color:var(--cx-brass)}

/* =========================================================
   HERO — bloc identité
   ========================================================= */
body.club-page .cx-hero{display:flex;flex-direction:column;gap:6px}
body.club-page .cx-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:.72rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.16em;color:var(--cx-brass);margin-bottom:2px}
body.club-page .cx-eyebrow::before{content:"";width:26px;height:2px;background:var(--cx-brass-2);display:inline-block;border-radius:2px}
body.club-page .toolbar{align-items:flex-end}
body.club-page .cx-hero h1{font-family:var(--font-display);font-size:clamp(2rem,4.3vw,3rem);line-height:1.02;
  letter-spacing:-.02em;margin:0 0 4px;color:var(--cx-navy);display:flex;align-items:center;gap:12px;flex-wrap:wrap}
body.club-page .cx-hero h1 .cx-name{font-weight:600}
/* pastilles (PRO / vérifié) : reprises telles quelles via style inline existant */
body.club-page .cx-meta{margin:0;color:var(--cx-muted);font-size:.95rem;display:flex;align-items:center;gap:9px;flex-wrap:wrap}
body.club-page .cx-meta a{color:var(--cx-brass);text-decoration:none}
body.club-page .cx-meta .dot{width:3px;height:3px;border-radius:50%;background:var(--cx-line)}
body.club-page .cx-meta .rate{color:var(--cx-brass);font-weight:600}

/* bouton « contacter l'écurie » (details) */
body.club-page .club-contact>summary{border-color:var(--cx-brass-line);color:var(--cx-navy);background:var(--cx-card)}
body.club-page .club-contact>summary:hover{background:var(--cx-brass-soft);border-color:var(--cx-brass-line)}

/* =========================================================
   PHOTO — promue en vrai hero
   ========================================================= */
body.club-page .pgallery.club-banner,
body.club-page .club-banner-single{border-radius:var(--cx-r);overflow:hidden;box-shadow:var(--cx-shadow);
  border:1px solid var(--cx-line)}
body.club-page .club-banner-single{width:100%;height:clamp(220px,34vw,400px);object-fit:cover;display:block}
body.club-page .pgallery.club-banner{height:clamp(220px,34vw,400px)}
body.club-page .pgallery.club-banner .pg-slide{height:100%;object-fit:cover}
/* voile navy subtil en bas pour ancrer la photo */
body.club-page .cx-photo-wrap{position:relative}
body.club-page .cx-photo-wrap::after{content:"";position:absolute;left:20px;right:20px;bottom:0;height:38%;
  background:linear-gradient(to top,rgba(18,26,45,.28),transparent);pointer-events:none;border-radius:0 0 var(--cx-r) var(--cx-r)}

/* =========================================================
   BANDEAU « panneau de gestion »
   ========================================================= */
body.club-page .manage-banner{display:flex;align-items:center;gap:16px;padding:18px 22px;margin:18px 0 4px;border-radius:var(--cx-r);
  text-decoration:none;color:#fff;position:relative;overflow:hidden;
  background:linear-gradient(120deg,var(--cx-navy) 0%,var(--cx-navy-2) 55%,var(--cx-navy-3) 100%);
  box-shadow:0 10px 28px rgba(22,35,63,.22);border:1px solid var(--cx-brass-line)}
body.club-page .manage-banner::after{content:"";position:absolute;right:-40px;top:-40px;width:180px;height:180px;border-radius:50%;
  background:radial-gradient(circle,rgba(201,154,62,.30),transparent 70%)}
body.club-page .manage-banner .mb-ico{font-size:1.5rem;width:52px;height:52px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.1);border:1px solid rgba(201,154,62,.5);border-radius:14px;position:relative;z-index:1}
body.club-page .manage-banner .mb-txt{flex:1;line-height:1.35;position:relative;z-index:1}
body.club-page .manage-banner .mb-txt strong{display:block;font-family:var(--font-display);font-size:1.15rem}
body.club-page .manage-banner .mb-txt span{font-size:.88rem;color:#c7d3e6}
body.club-page .manage-banner .mb-cta{position:relative;z-index:1;background:linear-gradient(135deg,var(--cx-brass-2),var(--cx-brass));
  color:#231a08;font-weight:700;font-size:.9rem;padding:10px 18px;border-radius:10px;white-space:nowrap;transition:transform .15s}
body.club-page .manage-banner:hover .mb-cta{transform:translateX(3px)}

/* =========================================================
   ONGLETS — bande « registre » soulignée
   ========================================================= */
/* Onglets en pastilles (maquette) : l'onglet actif se lit d'un coup d'œil même
   au milieu d'une barre qui défile horizontalement sur mobile, ce que le
   soulignement de 2 px ne permettait pas. */
body.club-page .cx-tabs{display:flex;gap:8px;margin:18px 0 22px;padding:2px;
  overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch}
body.club-page .cx-tabs::-webkit-scrollbar{display:none}
body.club-page .cx-tabs .search-tab{background:var(--cx-card);border:1.5px solid var(--cx-line);border-radius:999px;
  color:var(--cx-muted);font-weight:600;font-size:.92rem;min-height:44px;
  padding:0 17px;white-space:nowrap;text-decoration:none;
  display:inline-flex;align-items:center;gap:6px;transition:color .15s,border-color .15s,background .15s}
body.club-page .cx-tabs .search-tab:hover:not(.active){background:var(--cx-card);color:var(--cx-navy);border-color:var(--cx-brass-2)}
body.club-page .cx-tabs .search-tab.active{background:var(--cx-navy);color:#fff;border-color:var(--cx-navy)}
body.club-page .cx-tabs .badge-dot{background:var(--cx-brass-2);color:#fff;border-radius:999px;font-size:.68rem;
  font-weight:700;padding:1px 7px;margin-left:2px}
body.club-page .cx-tabs .search-tab.active .badge-dot{background:var(--cx-brass-2);color:#fff}

/* =========================================================
   CONTENU — largeur élargie + titres de section
   ========================================================= */
body.club-page .cx-content{max-width:1000px}
body.club-page .cx-content>h3{font-family:var(--font-display);font-size:1.3rem;font-weight:600;color:var(--cx-navy);
  letter-spacing:-.01em;margin:26px 0 14px;display:flex;align-items:center;gap:10px}
body.club-page .cx-content>h3::before{content:"";width:22px;height:2px;background:var(--cx-brass-2);border-radius:2px;flex-shrink:0}

/* cartes génériques dans le scope club */
body.club-page .cx-content .card{border:1px solid var(--cx-line);border-radius:var(--cx-r);box-shadow:var(--cx-shadow)}
body.club-page .cx-content .card:hover{transform:none;box-shadow:var(--cx-shadow)}
body.club-page .form-card{border:1px solid var(--cx-line);border-radius:var(--cx-r);box-shadow:var(--cx-shadow)}
body.club-page .empty{color:var(--cx-muted)}
body.club-page .empty .ico{opacity:.85}

/* puces & prix dans le scope club (chaleur laiton) */
body.club-page .chip{background:var(--cx-brass-soft);color:#7a5a15}
body.club-page .chip-muted{background:#efece4;color:var(--cx-muted)}
body.club-page .chip-gold{background:var(--cx-brass-soft);color:#7a5a15}

/* boutons : primaire = navy, or = laiton */
body.club-page .btn-primary{background:var(--cx-navy)}
body.club-page .btn-primary:hover{background:#0f1a30}
/* .btn-gold : plus de redéfinition ici — style unique dans style.css. */
body.club-page .btn-outline:hover{border-color:var(--cx-brass-line);color:var(--cx-navy);background:var(--cx-brass-soft)}
body.club-page .btn-mini:hover{border-color:var(--cx-brass-line);color:var(--cx-navy)}

/* =========================================================
   CARTES DE LEÇONS — signature « ticket de saison »
   ========================================================= */
body.club-page .cx-cards-top{display:grid;grid-template-columns:1.15fr 1fr;gap:16px;margin-bottom:8px}
@media(max-width:720px){body.club-page .cx-cards-top{grid-template-columns:1fr}}

/* le ticket perforé */
body.club-page .cx-ticket{position:relative;background:linear-gradient(150deg,var(--cx-navy),#0f1a30);color:#fff;
  border-radius:var(--cx-r);padding:22px 26px;box-shadow:0 14px 34px rgba(18,26,45,.28);overflow:hidden;
  display:flex;flex-direction:column;justify-content:center;min-height:150px}
body.club-page .cx-ticket::before,body.club-page .cx-ticket::after{content:"";position:absolute;width:26px;height:26px;
  background:var(--cx-paper);border-radius:50%}
body.club-page .cx-ticket::before{left:-13px;top:50%;transform:translateY(-50%)}
body.club-page .cx-ticket::after{right:-13px;top:50%;transform:translateY(-50%)}
body.club-page .cx-ticket .lbl{font-size:.74rem;text-transform:uppercase;letter-spacing:.14em;color:#b9c4dd;font-weight:600}
body.club-page .cx-ticket .bal{font-family:var(--font-display);font-size:3.4rem;font-weight:600;line-height:.95;
  font-variant-numeric:tabular-nums;margin:6px 0 2px;display:flex;align-items:baseline;gap:10px}
body.club-page .cx-ticket .bal small{font-family:var(--font-body);font-size:1rem;font-weight:500;color:#c7d3e6}
body.club-page .cx-ticket .perf{position:absolute;top:14px;bottom:14px;right:54px;border-right:2px dashed rgba(255,255,255,.22)}
body.club-page .cx-ticket .tk-ico{position:absolute;right:16px;top:50%;transform:translateY(-50%);font-size:1.5rem;opacity:.55}

/* explication « comment ça marche » */
body.club-page .cx-howto{background:var(--cx-card);border:1px solid var(--cx-line);border-radius:var(--cx-r);
  padding:20px 22px;box-shadow:var(--cx-shadow)}
body.club-page .cx-howto h4{margin:0 0 8px;font-family:var(--font-display);font-size:1.02rem;color:var(--cx-navy)}
body.club-page .cx-howto p{margin:0 0 6px;font-size:.9rem;color:var(--cx-ink);line-height:1.5}
body.club-page .cx-howto .warn{color:#7a5a15;font-weight:600;font-size:.86rem}

/* grille des formules — cartes vendables mises en avant */
body.club-page .cx-plans{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:14px}
body.club-page .cx-plan{background:var(--cx-card);border:1px solid var(--cx-line);border-radius:var(--cx-r);padding:18px 20px;
  display:flex;flex-direction:column;gap:6px;box-shadow:var(--cx-shadow);transition:border-color .15s,box-shadow .15s,transform .12s;position:relative}
body.club-page .cx-plan:hover{border-color:var(--cx-brass-line);box-shadow:0 12px 30px rgba(22,35,63,.10);transform:translateY(-2px)}
body.club-page .cx-plan .nm{font-family:var(--font-display);font-size:1.15rem;font-weight:600;color:var(--cx-navy)}
body.club-page .cx-plan .sub{color:var(--cx-muted);font-size:.86rem;display:flex;align-items:center;gap:5px}
body.club-page .cx-plan .price{font-family:var(--font-display);font-size:1.7rem;font-weight:600;color:var(--cx-navy);
  line-height:1.1;font-variant-numeric:tabular-nums;margin-top:2px}
body.club-page .cx-plan .price .fee{font-family:var(--font-body);font-size:.76rem;font-weight:500;color:var(--cx-muted);display:block;margin-top:1px}
body.club-page .cx-plan .strike{text-decoration:line-through;color:var(--cx-muted);font-size:.9rem;font-family:var(--font-body);font-weight:500}
body.club-page .cx-plan .cta{margin-top:auto;padding-top:10px}
/* Mise en page seulement : la couleur vient de la classe du bouton (.btn-gold,
   .btn-outline…). Cette règle forçait auparavant le doré sur TOUT bouton de
   carte, y compris « Se connecter » qui doit rester secondaire. */
body.club-page .cx-plan .cta .btn{width:100%;justify-content:center;font-weight:700}
body.club-page .cx-plan details summary{list-style:none;cursor:pointer;font-size:.8rem;color:var(--cx-muted)}
body.club-page .cx-plan details summary:hover{color:var(--cx-brass)}

/* « ma catégorie tarifaire » */
body.club-page .cx-cat{background:var(--cx-card-2);border:1px solid var(--cx-line);border-radius:var(--cx-r);padding:14px 18px;margin:16px 0}

/* =========================================================
   CALENDRIER — prochaine séance + agenda
   ========================================================= */
/* sous-bascule Liste / Calendrier */
body.club-page .cx-calsub{display:inline-flex;gap:3px;background:var(--cx-card-2);border:1px solid var(--cx-line);
  border-radius:999px;padding:3px;margin-bottom:18px}
body.club-page .cx-subtab{border:none;border-radius:999px;padding:7px 16px;font-size:.86rem;font-weight:600;
  color:var(--cx-muted);background:none;text-decoration:none;display:inline-flex;align-items:center;gap:5px;transition:background .15s,color .15s}
body.club-page .cx-subtab.active{background:var(--cx-navy);color:#fff}
body.club-page .cx-subtab:hover:not(.active){color:var(--cx-navy)}

/* bandeau « prochaine séance » */
body.club-page .cx-next{display:flex;align-items:center;gap:18px;background:linear-gradient(120deg,var(--cx-navy),var(--cx-navy-2));
  color:#fff;border-radius:var(--cx-r);padding:18px 22px;margin-bottom:18px;box-shadow:0 10px 28px rgba(22,35,63,.2);
  border:1px solid var(--cx-brass-line);position:relative;overflow:hidden}
body.club-page .cx-next .when{flex-shrink:0;text-align:center;background:rgba(255,255,255,.08);border:1px solid rgba(201,154,62,.4);
  border-radius:12px;padding:10px 14px;min-width:66px}
body.club-page .cx-next .when .d{font-family:var(--font-display);font-size:1.7rem;font-weight:600;line-height:1}
body.club-page .cx-next .when .m{font-size:.66rem;text-transform:uppercase;letter-spacing:.08em;color:#b9c4dd;margin-top:2px}
body.club-page .cx-next .info{flex:1;min-width:0}
body.club-page .cx-next .info .k{font-size:.72rem;text-transform:uppercase;letter-spacing:.14em;color:var(--cx-brass-2);font-weight:700}
body.club-page .cx-next .info .t{font-family:var(--font-display);font-size:1.25rem;font-weight:600;margin:2px 0 3px}
body.club-page .cx-next .info .sub{font-size:.86rem;color:#c7d3e6}

/* cartes de séance (vue liste) */
body.club-page .course-card{border:1px solid var(--cx-line);border-left:3px solid var(--cx-brass-2);
  border-radius:var(--cx-r);box-shadow:var(--cx-shadow)}
body.club-page .course-card:hover{box-shadow:0 10px 26px rgba(22,35,63,.09)}

/* =========================================================
   ÉTATS / DIVERS
   ========================================================= */
body.club-page .badge-role.pro{background:var(--cx-brass-soft);color:#7a5a15}
body.club-page .form-card summary{color:var(--cx-navy)}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media(max-width:600px){
  body.club-page .page-head{padding:22px 20px 4px}
  body.club-page .cx-hero h1{font-size:1.9rem}
  body.club-page .manage-banner{flex-wrap:wrap}
  body.club-page .manage-banner .mb-cta{width:100%;text-align:center}
  body.club-page .cx-next{flex-direction:row}
  body.club-page .cx-ticket .bal{font-size:2.8rem}
}
@media(prefers-reduced-motion:reduce){body.club-page *{animation:none!important;transition:none!important}}

/* =========================================================
   PLANNING DES CHEVAUX (onglet « chevaux »)
   Frise horaire : une ligne par cheval, un bloc par activité.
   La largeur des blocs est un pourcentage de l'amplitude du jour,
   calculée côté PHP — la grille reste juste à toute résolution.
   ========================================================= */
body.club-page .cx-hp{display:grid;gap:14px}
body.club-page .cx-card{background:var(--cx-card);border:1px solid var(--cx-line);border-radius:var(--cx-r);
  box-shadow:var(--cx-shadow);padding:18px 20px}
body.club-page .cx-card h2{font-family:var(--font-display);font-size:1.35rem;margin:0}
body.club-page .cx-card h3{font-family:var(--font-display);font-size:1.08rem;margin:0 0 4px}

body.club-page .cx-hp-nav{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
body.club-page .cx-hp-days{display:flex;align-items:center;gap:8px}
body.club-page .cx-hp-days strong{min-width:210px;text-align:center;font-size:.95rem}
body.club-page .cx-hp-arrow{width:44px;height:44px;border-radius:999px;border:1.5px solid var(--cx-line);
  background:var(--cx-card);color:var(--cx-navy);display:inline-flex;align-items:center;justify-content:center;
  text-decoration:none;font-size:1.1rem}
body.club-page .cx-hp-arrow:hover{border-color:var(--cx-brass-2);color:var(--cx-brass)}

body.club-page .cx-hp-legend{display:flex;gap:14px;flex-wrap:wrap;font-size:.82rem;margin-top:14px;color:var(--cx-ink-2)}
body.club-page .cx-hp-legend span{display:inline-flex;align-items:center;gap:5px}
body.club-page .cx-hp-legend i{width:12px;height:12px;border-radius:3px;display:block}
body.club-page .cx-hp-legend i.rest{background:repeating-linear-gradient(45deg,#e9ecf1,#e9ecf1 4px,#dfe3ea 4px,#dfe3ea 8px)}
body.club-page .cx-hp-legend i.free{background:#E4EFE7;border:1px solid #1f8a4c}

body.club-page .cx-hp-note{margin:10px 0 0;color:var(--cx-muted);font-size:.8rem}
body.club-page .cx-hp-acts{display:flex;flex-direction:column;gap:6px;margin-top:10px}
body.club-page .cx-hp-act{display:flex;gap:10px;align-items:flex-start;padding:8px 10px;border-radius:9px;
  border-left:4px solid var(--cx-line);background:var(--cx-card-2);font-size:.85rem;flex-wrap:wrap}
body.club-page .cx-hp-act .h{min-width:96px;font-weight:600}
body.club-page .cx-hp-act .t{flex:1;min-width:170px}
body.club-page .cx-hp-act .tag{color:#fff;font-size:.66rem;padding:2px 8px;border-radius:999px;margin-left:6px}
body.club-page .cx-hp-act .who{display:block;color:var(--cx-muted);font-size:.78rem;margin-top:2px}

body.club-page .cx-hp-scroll{overflow-x:auto;scrollbar-width:thin;margin-top:10px}
body.club-page .cx-hp-grid{min-width:620px}
body.club-page .cx-hp-ruler{position:relative;height:18px;margin-left:130px;border-bottom:1px solid var(--cx-line)}
body.club-page .cx-hp-ruler span{position:absolute;transform:translateX(-50%);font-size:.68rem;color:var(--cx-muted);white-space:nowrap}
body.club-page .cx-hp-row{display:flex;align-items:stretch;border-bottom:1px solid var(--cx-line);min-height:40px}
body.club-page .cx-hp-name{width:130px;flex:none;display:flex;flex-direction:column;justify-content:center;
  padding:4px 8px 4px 0;font-size:.86rem}
body.club-page .cx-hp-name span{font-size:.68rem;color:var(--cx-muted)}
body.club-page .cx-hp-lane{position:relative;flex:1;min-width:0}
body.club-page .cx-hp-tick{position:absolute;top:0;bottom:0;width:1px;background:var(--cx-line);opacity:.6}
body.club-page .cx-hp-block{position:absolute;top:5px;bottom:5px;border-radius:6px;color:#fff;font-size:.7rem;
  display:flex;align-items:center;padding:0 6px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
body.club-page .cx-hp-free{position:absolute;inset:0;display:flex;align-items:center;padding-left:8px;
  font-size:.72rem;color:#1f8a4c}
body.club-page .cx-hp-rest{position:absolute;top:5px;bottom:5px;left:0;right:0;border-radius:6px;
  background:repeating-linear-gradient(45deg,#e9ecf1,#e9ecf1 6px,#dfe3ea 6px,#dfe3ea 12px);
  color:#6a7280;font-size:.7rem;display:flex;align-items:center;justify-content:center}

@media(max-width:640px){
  body.club-page .cx-hp-days strong{min-width:0;font-size:.86rem}
  body.club-page .cx-hp-name{width:96px}
  body.club-page .cx-hp-ruler{margin-left:96px}
}

/* Graduations extrêmes : centrées, la première et la dernière débordaient de
   la frise (« 20 h » se coupait en « 2 / h »). On les aligne vers l'intérieur. */
body.club-page .cx-hp-ruler span:first-child{transform:translateX(0)}
body.club-page .cx-hp-ruler span:last-child{transform:translateX(-100%)}

/* ============================================================
   COUCHE « MAQUETTE » — style du contenu de tous les onglets.

   La maquette Claude Design décrit un vocabulaire visuel constant, quel que
   soit l'onglet : surfaces blanches à coins 14 px et ombre douce, cartes
   bordées 1 px dans des grilles auto-fit, boutons en pastille d'au moins
   44 px, pastilles d'état colorées par sens (vert sapin = acquis, doré =
   action attendue, gris = neutre ou révolu), prix en vert sapin, et une
   action principale toujours ancrée en bas de carte.

   Ce bloc mappe ce vocabulaire sur les classes DÉJÀ produites par club.php
   (.card, .btn, .chip, .course-card, .cx-plan, .member-card…). Aucun balisage
   n'est modifié : les formulaires, les actions POST et les gardes de rôle
   restent exactement ceux qui fonctionnent aujourd'hui.

   Tout est scopé sous .cx-content pour ne toucher que le contenu des onglets.
   ============================================================ */

/* ---------- surfaces ---------- */
body.club-page .cx-content .card,
body.club-page .cx-content .form-card{
  background:var(--cx-card);border:1px solid var(--cx-line);border-radius:14px;
  box-shadow:var(--cx-shadow);padding:18px 22px}
body.club-page .cx-content .form-card{padding:22px 24px}
body.club-page .cx-content .card>h3:first-child,
body.club-page .cx-content .form-card>h3:first-child{margin-top:0}

/* ---------- boutons en pastille ---------- */
body.club-page .cx-content .btn{border-radius:999px;min-height:44px;font-weight:600;
  display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:0 22px;border:1.5px solid transparent}
body.club-page .cx-content .btn-sm{min-height:38px;padding:0 16px;font-size:.88rem}
body.club-page .cx-content .btn-primary{background:var(--cx-navy);color:#fff;border-color:var(--cx-navy)}
body.club-page .cx-content .btn-primary:hover{background:#111D36}
/* .btn-gold : hérite de la définition unique (style.css). L'ancienne surcharge
   ici affichait un aplat à texte blanc, en contradiction avec celle du haut de
   ce même fichier — deux rendus pour la même classe sur la même page. */
body.club-page .cx-content .btn-outline{background:var(--cx-card);color:var(--cx-navy);border-color:var(--cx-line)}
body.club-page .cx-content .btn-outline:hover{border-color:var(--cx-brass-2);color:var(--cx-brass)}
body.club-page .cx-content .btn-block{width:100%}
body.club-page .cx-content .btn-mini{border-radius:999px;padding:5px 12px;font-weight:600;font-size:.78rem;
  border:1.5px solid var(--cx-line);background:var(--cx-card);color:var(--cx-navy)}
body.club-page .cx-content .btn-mini:hover{border-color:var(--cx-brass-2);color:var(--cx-brass)}

/* ---------- pastilles d'état : la couleur porte le sens ---------- */
body.club-page .cx-content .chip{background:var(--cx-brass-soft);color:var(--cx-brass);
  border-radius:999px;padding:5px 13px;font-size:.8rem;font-weight:600;border:none}
body.club-page .cx-content .chip-muted{background:var(--green-soft);color:var(--cx-muted)}
body.club-page .cx-content .chip-gold{background:var(--gold-soft);color:var(--gold-dark)}
body.club-page .cx-content .chip-ok,
body.club-page .cx-content .chip-green{background:var(--fir-soft);color:var(--fir)}

/* ---------- grilles ---------- */
body.club-page .cx-content .grid-2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px}
body.club-page .cx-content .grid-3{grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}

/* =========================================================
   CALENDRIER — la séance devient une ligne à pastille de date
   ========================================================= */
body.club-page .cx-content .course-card{border:1px solid var(--cx-line);border-radius:14px;
  box-shadow:none;padding:16px 18px;background:var(--cx-card)}
body.club-page .cx-content .course-card:hover{border-color:var(--cx-brass-line)}
body.club-page .cx-content .course-head{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
body.club-page .cx-content .course-date{text-align:center;background:var(--green-soft);border-radius:10px;
  padding:8px 14px;min-width:64px;flex:none}
body.club-page .cx-content .course-date .dow{font-size:.72rem;color:var(--cx-navy);text-transform:uppercase;letter-spacing:.06em}
body.club-page .cx-content .course-date .d{font-family:var(--font-display);font-size:1.5rem;line-height:1;color:var(--cx-navy)}
body.club-page .cx-content .course-date .m{font-size:.72rem;color:var(--cx-navy)}
body.club-page .cx-content .course-meta{display:flex;gap:7px;flex-wrap:wrap;margin-top:6px}

/* =========================================================
   CARTES DE LEÇONS — carte formule, action ancrée en bas
   ========================================================= */
body.club-page .cx-content .cx-plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}
body.club-page .cx-content .cx-plan{background:var(--cx-card);border:1px solid var(--cx-line);border-radius:14px;
  padding:18px;display:flex;flex-direction:column;gap:6px;box-shadow:none}
body.club-page .cx-content .cx-plan .nm{font-size:1.05rem;font-weight:700}
body.club-page .cx-content .cx-plan .sub{color:var(--cx-muted);font-size:.86rem}
body.club-page .cx-content .cx-plan .price{font-size:1.25rem;color:var(--fir);font-weight:700;line-height:1.15;margin-top:4px}
body.club-page .cx-content .cx-plan .price .strike{color:var(--cx-muted);font-size:.9rem;font-weight:400;text-decoration:line-through}
/* L'action reste alignée en bas quelle que soit la hauteur du descriptif :
   des boutons à des hauteurs différentes rendent une grille illisible. */
body.club-page .cx-content .cx-plan .cta{margin-top:auto;padding-top:10px}
body.club-page .cx-content .cx-plan .cta .btn{width:100%}

/* =========================================================
   MEMBRES — vignette avatar + rôle coloré
   ========================================================= */
body.club-page .cx-content .members-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
body.club-page .cx-content .member-card{display:flex;gap:12px;align-items:center;
  border:1px solid var(--cx-line);border-radius:14px;padding:14px;background:var(--cx-card);box-shadow:none}
body.club-page .cx-content .member-card:hover{border-color:var(--cx-brass-line)}
body.club-page .cx-content .member-card .avatar{width:44px;height:44px;border-radius:999px;flex:none;
  display:grid;place-items:center;font-weight:700;overflow:hidden}
body.club-page .cx-content .member-card .avatar img{width:100%;height:100%;object-fit:cover;border-radius:999px}
body.club-page .cx-content .badge-role{border-radius:999px;padding:2px 9px;font-size:.72rem;font-weight:700;
  background:var(--green-soft);color:var(--cx-navy)}
body.club-page .cx-content .badge-role.pro{background:var(--gold-soft);color:var(--gold-dark)}
body.club-page .cx-content .mc-arrow{color:var(--cx-muted);font-size:1.2rem}

/* =========================================================
   AVIS — citation à filet doré
   ========================================================= */
body.club-page .cx-content blockquote,
body.club-page .cx-content .review-item{margin:0;border-left:3px solid var(--cx-line);padding:4px 0 4px 18px}
body.club-page .cx-content .stars{color:var(--gold-dark);font-size:.9rem}

/* =========================================================
   DISCUSSION — bulles de conversation
   ========================================================= */
body.club-page .cx-content .chat-msg{display:flex;gap:12px;align-items:flex-start;margin-bottom:14px}
body.club-page .cx-content .chat-bubble{background:var(--cx-paper);border-radius:14px;border-top-left-radius:4px;
  padding:10px 16px;display:inline-block}
body.club-page .cx-content .chat-msg.mine .chat-bubble{background:var(--green-soft);
  border-top-left-radius:14px;border-top-right-radius:4px}

/* =========================================================
   ÉTATS VIDES
   ========================================================= */
body.club-page .cx-content .empty{border:1.5px dashed var(--cx-line);border-radius:14px;padding:26px;
  text-align:center;background:transparent}
body.club-page .cx-content .empty .ico{font-size:2rem;opacity:.55;margin-bottom:6px}

/* Avatars colorés par rôle (maquette) : doré pour le propriétaire, marine pour
   l'équipe, neutre pour les cavaliers. Écrit avec :has() — un navigateur qui
   ne le connaît pas garde simplement l'avatar par défaut, rien ne casse. */
body.club-page .cx-content .member-card:has(.badge-role.pro) .avatar{
  background:var(--gold-soft);color:var(--gold-dark)}
body.club-page .cx-content .member-card:has(.badge-role):not(:has(.badge-role.pro)) .avatar{
  background:var(--green-soft);color:var(--cx-navy)}

/* Cartes de pension : le visuel de repli suit le type d'offre, comme dans la
   maquette (doré pour une demi-pension, marine pour une place de pension). */
body.club-page .cx-content .pension-card .ph,
body.club-page .cx-content .pn-photo{border-radius:14px 14px 0 0}

/* En-tête d'annonce : avatar + auteur + date (maquette). */
body.club-page .cx-content .post-head{display:flex;gap:12px;align-items:center;margin-bottom:12px}
body.club-page .cx-content .post-av{width:40px;height:40px;border-radius:999px;flex:none;
  background:var(--gold-soft);color:var(--gold-dark);display:grid;place-items:center;font-weight:700}