/* v3-agenda.css : glue des pages Calendrier / Événement / Mon club / Informations.
   Les composants v3 (calgrid, cday, cev, evrow, evhero, evfact, prog, wtabs,
   bigmed, hx, wsep…) vivent déjà dans hextech-or.css : ici uniquement ce qui
   est propre à ces 4 pages (liens-cartes, en-tête club, tableaux d'infos,
   états vides, responsive). Chargé par les 4 pages + réinjecté par
   agenda-live.js / club-live.js après une navigation SPA. */

/* liens rendus comme cartes/rangées : pas de soulignement, couleur héritée */
.content a.evrow, .content a.card.bigmed, .content a.fchip, .content a.wtab,
.content .crumb a, .content a.hxbtn, .content a.ctrow { text-decoration: none; color: inherit; }
.content a.card.bigmed { display: flex; }

/* titre de page (56px comme la maquette) */
.agn-title { font-size: 56px; line-height: 1.05; margin: 0; }

/* ── en-tête calendrier ──
   ⚠ .calnav est un conteneur flex : sans flex:0 0 auto, le .wtabs se faisait
   écraser (134px pour deux onglets de 30px de padding) et l'onglet « Liste »
   disparaissait sous la découpe du conteneur. */
.calhead { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin-top: 20px; flex-wrap: wrap; }
.calk { font: 600 10px Inter; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.main.mhero .calk { color: rgba(255,255,255,.66); }
.calnav { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.calnav .wtabs { margin-top: 0; flex: 0 0 auto; }
.calnav .wtabs .wtab { padding: 0 22px; }
/* flèches et « Aujourd'hui » : anneau qui suit l'hexagone (H=34 x=9 → t=1 : 8,47) */
/* width:auto !important : la règle de base .calnav > span.calarr impose 38px
   (bon pour les flèches), or « Aujourd'hui » est un libellé texte. */
.calnav > span.calarr {
  position: relative; isolation: isolate; display: inline-flex !important;
  align-items: center; justify-content: center; white-space: nowrap;
  height: 34px; padding: 0 13px; width: auto !important; min-width: 34px; box-sizing: border-box;
  font: 600 10.5px Inter; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255,255,255,.85); cursor: pointer; background: rgba(255,255,255,.18);
  box-shadow: none;
  clip-path: polygon(9px 0,calc(100% - 9px) 0,100% 50%,calc(100% - 9px) 100%,9px 100%,0 50%);
}
.calnav > span.calarr[data-cal-prev], .calnav > span.calarr[data-cal-next] { padding: 0; width: 38px !important; }
.calarr::after {
  content: ''; position: absolute; inset: 1px; z-index: -1; background: rgba(255,255,255,.05);
  clip-path: polygon(8.47px 0,calc(100% - 8.47px) 0,100% 50%,calc(100% - 8.47px) 100%,8.47px 100%,0 50%);
}
.calarr:hover { background: rgba(255,255,255,.32); color: #fff; }
.calarr i { font-size: 15px; }
.calfil { display: flex; align-items: center; gap: 8px; margin-top: 18px; flex-wrap: wrap; }
.calfil .lb { font: 600 9.5px Inter; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); margin-right: 4px; }
/* grille : le mois s'affiche même sans événement, les cases vides restent sobres */
.calgrid-wrap { margin-top: 16px; }
.cday.vide { cursor: default; }
.cday.vide:hover { background: rgba(255,255,255,.055); }

/* pastilles mobiles (le libellé .cev disparaît sur petit écran) */
.cday .dots { display: none; gap: 3px; margin-top: 6px; }
.cday .dots i { width: 6px; height: 6px; transform: rotate(45deg); }
.dots i.v { background: #C8AA6E; }
.dots i.w { background: rgba(255,255,255,.75); }
.dots i.g { background: #5DBB63; }
.dots i.b { background: #3B82C4; }

/* états vides + 404 gracieux */
.agn-empty { padding: 26px 4px; color: var(--muted); font-size: 13.5px; line-height: 1.6; }
.agn-404 { padding: 40px 0 20px; }
.agn-404 h2 { margin: 10px 0 6px; font: italic 700 30px 'GT Sectra Display', Georgia, serif; }
.agn-404 p { color: var(--muted); font-size: 13.5px; margin: 0 0 8px; }

/* rangée d'actions de la fiche événement */
.evact { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; align-items: center; }
.evact .cta { margin-top: 0; border: 0; }
.evact .wtab { padding: 13px 26px; clip-path: var(--hexc); background: rgba(255,255,255,.05); }
.evact .gsoon { margin-left: 8px; }

/* liens externes d'un événement */
.evlinks { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }

/* ── en-tête de fiche club ── */
.clhead { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin-top: 24px; flex-wrap: wrap; }
.clhead .wtabs { margin-top: 0; }
.clmeta { display: flex; align-items: center; gap: 14px; margin-top: 10px; font-size: 12.5px; color: rgba(255,255,255,.8); flex-wrap: wrap; }
.clmeta .dm { width: 4px; height: 4px; transform: rotate(45deg); background: rgba(255,255,255,.3); flex: 0 0 auto; }
.clmeta .st i { font-size: 13px; color: #E8C77E; }
.clmeta .st { display: inline-flex; align-items: center; gap: 5px; }

/* colonnes Mon club (1.55fr / 1fr) et Informations (1fr / 1fr) */
.cltwo { display: grid; grid-template-columns: 1.55fr 1fr; gap: 34px; margin-top: 14px; align-items: start; }
.cinftwo { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; margin-top: 20px; align-items: start; }

/* tuiles chiffres du club */
.clstats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.clstat { padding: 14px 16px; }
.clstat .k { font: 600 9.5px Inter; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.clstat .k.gold { color: #E8C77E; }
.clstat .v { font: italic 700 26px 'GT Sectra Display', Georgia, serif; margin-top: 4px; color: #F2F4FA; }
.clstat .s { font: 500 10.5px Inter; color: var(--muted); }

/* ligne dorée + chiffres inline (page Informations) */
.goldk { font: 600 11px Inter; letter-spacing: .18em; text-transform: uppercase; color: #E8C77E; margin: 2px 0 4px; }
.instats { display: flex; align-items: center; gap: 40px; margin-top: 10px; flex-wrap: wrap; }
.instats b { display: block; font: italic 700 24px 'GT Sectra Display', Georgia, serif; color: #F2F4FA; }
.instats .k { font: 600 9.5px Inter; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-top: 2px; }

/* tableaux d'infos (dojang, horaires) + rangées de contact */
.inftbl { padding: 6px 18px; }
.infrow { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 11px 0; border-bottom: 1px solid rgba(255,255,255,.07); }
.infrow:last-child { border-bottom: 0; }
.infrow .k { font: 500 12px Inter; color: var(--muted); }
.infrow b { font: 600 12.5px Inter; color: #F2F4FA; text-align: right; }
.infrow b.mut { color: var(--muted); }
.todaybadge { font: 600 9.5px Inter; letter-spacing: .1em; text-transform: uppercase; color: #E8C77E; margin-left: 8px; }
.infrow.today .k { color: rgba(255,255,255,.9); }
.ctrow { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid rgba(255,255,255,.07); }
.ctrow:last-child { border-bottom: 0; }
.ctrow i { color: #C8AA6E; flex: 0 0 auto; }
.ctrow b { flex: 1; font: 600 12.5px Inter; min-width: 0; overflow: hidden; text-overflow: ellipsis; color: #F2F4FA; }
.ctrow .go { color: var(--muted); }

/* carte adresse */
.addr { padding: 16px 18px; }
.addr b.l1 { display: block; font: italic 700 17px 'GT Sectra Display', Georgia, serif; color: #F2F4FA; }
.addr .l2 { font: 500 12px Inter; color: var(--muted); margin-top: 3px; }
.addr .btns { display: flex; gap: 8px; margin-top: 13px; flex-wrap: wrap; }
.hxbtn { display: inline-flex; align-items: center; gap: 7px; padding: 8px 15px; font: 600 10.5px Inter;
  letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.85); cursor: pointer; border: 0;
  background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,.2);
  clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 8px 100%, 0 50%); }
.hxbtn:hover { box-shadow: inset 0 0 0 1px rgba(255,255,255,.35); color: #fff; }

/* publications : « Bientôt » */
.pubsoon { padding: 26px 22px; text-align: left; }
.pubsoon p { margin: 8px 0 0; color: var(--muted); font-size: 13px; line-height: 1.6; }

/* petit toast (« Lien copié », « Adresse copiée ») */
.agn-toast { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 100002;
  padding: 10px 22px; font: 600 12px Inter; letter-spacing: .04em; color: #0B0E1A; background: var(--gold-satin);
  clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 10px 100%, 0 50%);
  opacity: 0; transition: opacity .25s ease; pointer-events: none; }
.agn-toast.show { opacity: 1; }

/* ── responsive ── */
/* ⚠ .calnav est en flex:0 0 auto pour que les onglets Mois/Liste ne se fassent
   pas écraser sur desktop. Sur téléphone, cette même règle l'empêchait de se
   replier : 403px de barre dans 375px d'écran, donc toute la page défilait
   latéralement. Sous 700px la barre passe sous le titre et retourne à la ligne. */
@media (max-width: 700px) {
  .calhead { flex-direction: column; align-items: flex-start; gap: 12px; }
  .calnav { flex-wrap: wrap; width: 100%; gap: 8px; }
  .calnav .wtabs { margin-left: auto; }
}
@media (max-width: 900px) {
  .agn-title { font-size: 38px; }
  .cltwo, .cinftwo { grid-template-columns: 1fr; gap: 0; }
  .evfact { grid-template-columns: 1fr 1fr; }
  .evhero .ov { left: 28px; right: 28px; bottom: 22px; }
  .evhero .ov h2 { font-size: 28px; }
  .instats { gap: 24px; }
}
@media (max-width: 767px) {
  .calgrid { gap: 4px; }
  .cday { min-height: 54px; padding: 6px 7px; clip-path: polygon(6px 0, calc(100% - 6px) 0, 100% 50%, calc(100% - 6px) 100%, 6px 100%, 0 50%); }
  .cev { display: none; }
  .cday .dots { display: flex; }
  .evfact { grid-template-columns: 1fr; }
  .evhero { height: 220px; }
}