/* v3-club.css : la PAGE d'un club (/club) et ses informations (/club-infos).
   ---------------------------------------------------------------------------
   Anatomie reprise de components/club/ClubPage.tsx (app v3) : écusson posé sur
   la couverture, nom en display, ligne d'identité, méta, chips, deux actions,
   puis les publications. Les blocs communs (cartes, tableaux, adresse, contacts)
   restent ceux de v3-agenda.css : on ne redessine pas ce qui existe. */

/* ── en-tête ─────────────────────────────────────────────────────────────── */
.clp-head { display: flex; align-items: flex-start; gap: 18px; margin: 10px 0 0; }

.clp-badge { flex: 0 0 auto; width: 76px; height: 66px; display: grid; place-items: center;
  --hx: 15px; --hxw: 1px; --hxc: rgba(200,170,110,.75); --hxfill: rgba(200,170,110,.14);
  clip-path: polygon(15px 0, calc(100% - 15px) 0, 100% 50%, calc(100% - 15px) 100%, 15px 100%, 0 50%); }
.clp-badge > span { font: italic 700 24px 'GT Sectra Display', Georgia, serif; color: #F0E6D2; }
.clp-badge.is--img { background: rgba(11,14,26,.55); }
.clp-badge img { width: 100%; height: 100%; object-fit: contain; }

.clp-id { min-width: 0; }
.clp-id h1.display { margin: 2px 0 0; font-size: clamp(26px, 3.4vw, 40px); color: #F2F4FA; text-wrap: balance; }
.clp-off { display: inline-block; font: 700 8.5px Inter, sans-serif; letter-spacing: .2em;
  text-transform: uppercase; color: #C8AA6E; }
.clp-off.is--test { color: rgba(255,255,255,.45); }
.clp-kicker { margin: 6px 0 0; font: 500 12px Inter, sans-serif; letter-spacing: .12em;
  text-transform: uppercase; color: rgba(255,255,255,.55); }
.clp-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 0 10px; margin-top: 9px;
  font: 400 13px Inter, sans-serif; color: rgba(255,255,255,.6); }
.clp-meta b { font-weight: 600; color: #F2F4FA; }
.clp-meta .st { display: inline-flex; align-items: center; gap: 5px; }
.clp-meta .st i { font-size: 12px; color: #E8C77E; }
.clp-meta .dm { width: 3px; height: 3px; background: rgba(255,255,255,.3); }

.clp-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.clp-tag { padding: 6px 13px; font: 500 11px Inter, sans-serif; color: rgba(255,255,255,.78);
  background: rgba(255,255,255,.07); box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
  clip-path: polygon(7px 0, calc(100% - 7px) 0, 100% 50%, calc(100% - 7px) 100%, 7px 100%, 0 50%); }

/* ── les deux actions ────────────────────────────────────────────────────── */
.clp-cta { display: flex; gap: 10px; margin-top: 20px; max-width: 520px; }
.clp-b { flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 46px; padding: 0 22px; cursor: pointer; text-decoration: none;
  font: 800 italic 12.5px 'Inter Tight', Inter, sans-serif; letter-spacing: .03em;
  clip-path: polygon(14px 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 14px 100%, 0 50%); }
.clp-b.is--ghost { color: #F2F4FA; background: rgba(255,255,255,.06);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.24); }
.clp-b.is--ghost:hover { background: rgba(255,255,255,.1); }
.clp-b.is--plein { color: #0B0E1A;
  background: linear-gradient(115deg, #8A6A2F 0 18%, #F7EFDC 34%, #C8AA6E 52%, #E4CE9B 74%, #8A6A2F 92%); }
.clp-b.is--plein:hover { filter: brightness(1.06); }
/* pas de détenteur = personne à qui écrire : le bouton est éteint, pas doré */
/* :hover aussi : sinon .is--plein:hover / .is--ghost:hover (plus spécifiques) rallument le bouton éteint */
.clp-b.is--off, .clp-b.is--off:hover { background: rgba(255,255,255,.05); color: rgba(255,255,255,.35);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); cursor: default; filter: none; }
@media (max-width: 620px) { .clp-cta { flex-direction: column; } }

/* ── publications (mosaïque : la première sur 2 × 2, comme dans l'app) ───── */
.clp-posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin-top: 12px; }
.clp-post { position: relative; aspect-ratio: 1; overflow: hidden; background: rgba(255,255,255,.05); }
.clp-post.is--big { grid-column: span 2; grid-row: span 2; }
.clp-post img, .clp-post .ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.clp-post .ph { background: linear-gradient(150deg, rgba(255,255,255,.09), rgba(255,255,255,.03)); }
.clp-post .in { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 10px 9px;
  background: linear-gradient(to bottom, rgba(11,14,26,0), rgba(11,14,26,.9)); }
.clp-post .in b { display: block; font: 600 12px/1.35 Inter, sans-serif; color: #F2F4FA;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.clp-post .wh { display: block; margin-top: 2px; font: 400 10px Inter, sans-serif; color: rgba(255,255,255,.5); }
.clp-post .lk { display: flex; align-items: center; gap: 4px; margin-top: 5px;
  font: 600 10px Inter, sans-serif; color: rgba(255,255,255,.66); }
.clp-post .lk i { font-size: 11px; color: #C8AA6E; }
.clp-post .lk i + i { margin-left: 6px; }
@media (max-width: 520px) { .clp-posts { grid-template-columns: repeat(2, 1fr); } }

/* ── divers ──────────────────────────────────────────────────────────────── */
.clp-liens { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.clp-desc { margin: 0; font: 400 13.5px/1.65 Inter, sans-serif; color: rgba(255,255,255,.78); }
/* La provenance : d'où vient la fiche. Discrète, mais toujours là. */
.clp-src { margin: 26px 0 0; font: 400 11.5px/1.6 Inter, sans-serif; color: rgba(255,255,255,.4); }
.clp-src a { color: rgba(200,170,110,.8); }
/* la photo d'un professeur remplit sa pastille */
.card.bigmed .jg img { width: 100%; height: 100%; object-fit: cover; }

/* ── casquette « mode club » + sélecteur d'espace (js/club-hote.js) ─────────
   Portage de ClubCasquette.tsx / ClubSwitcher.tsx : écusson 18 px, nom, pastille
   OR (jamais rouge) avec le travail en attente, chevron ; hauteur 40 px comme
   les boutons hexagonaux. */
.clh-casq { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px 0 8px;
  cursor: pointer; border: 0; color: #F2F4FA; font: 600 12.5px Inter, sans-serif;
  background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,.22);
  clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 10px 100%, 0 50%); }
.clh-casq.is--on { box-shadow: inset 0 0 0 1px rgba(200,170,110,.6); }
.clh-casq:hover { background: rgba(255,255,255,.1); }
.clh-casq > i:first-child { font-size: 17px; color: #E8C77E; }
.clh-casq-ec { width: 18px; height: 18px; object-fit: contain; }
.clh-casq-nom { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clh-casq-n { min-width: 18px; height: 18px; padding: 0 5px; display: grid; place-items: center;
  font: 800 10px 'Inter Tight', Inter, sans-serif; color: #0B0E1A;
  background: linear-gradient(115deg, #8A6A2F 0 18%, #F7EFDC 34%, #C8AA6E 52%, #E4CE9B 74%, #8A6A2F 92%);
  clip-path: polygon(5px 0, calc(100% - 5px) 0, 100% 50%, calc(100% - 5px) 100%, 5px 100%, 0 50%); }
.clh-casq > i:last-child { font-size: 13px; color: rgba(255,255,255,.5); }
.clh-sel { position: fixed; z-index: 1500; min-width: 280px; padding: 6px; background: #0E1424;
  box-shadow: 0 10px 34px rgba(0,0,0,.55), inset 0 0 0 1px rgba(200,170,110,.35); }
.clh-sel-r { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: 0; background: none;
  color: #F2F4FA; text-align: left; cursor: pointer; font: 500 12.5px Inter, sans-serif; }
.clh-sel-r:hover { background: rgba(255,255,255,.08); }
.clh-sel-r.is--on { box-shadow: inset 2px 0 0 #C8AA6E; color: #E8C77E; }
.clh-sel-r > i, .clh-sel-r > img { width: 22px; height: 22px; object-fit: contain; font-size: 18px; color: #C8AA6E; flex: 0 0 auto; }
.clh-sel-r > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clh-sel-r > small { font: 400 10.5px Inter, sans-serif; color: rgba(255,255,255,.45); }

/* ── lot « fiche » 02/09 : parité ClubPage.tsx / infos.tsx / claim.tsx / post.tsx ──
   (js/club-live.js). Or #C8AA6E sur encre, hexagones au clip-path, aucun
   arrondi : les modales réutilisent .gk-modal / .gk-field / .pf-btn et ne
   font que retirer les rayons du gabarit verre. */

/* barre haute : casquette à gauche (club-hote.js), crayon du détenteur à droite */
.clp-top { display: flex; align-items: center; gap: 10px; margin: 6px 0 4px; }
.clp-top-l { display: inline-flex; }
.clp-top .clp-edit { margin-left: auto; width: 44px; height: 40px; padding: 0; justify-content: center; }
.clp-top .clp-edit i { font-size: 16px; }
button.clp-b { border: 0; }

/* revendication (lien or sous les deux actions, ou statut en attente) */
.clp-claimslot { margin-top: 14px; }
.clp-claim { display: inline-flex; align-items: center; gap: 7px; font: 500 12.5px Inter, sans-serif;
  color: #C8AA6E; text-decoration: none; }
.clp-claim i { font-size: 14px; }
.clp-claim:hover { color: #E8C77E; }
.clp-owned { margin: 0; font: 500 12.5px Inter, sans-serif; color: #C8AA6E; }

/* publications : vignette cliquable, jeton de lecture hexagonal, cadenas des membres */
a.clp-post { display: block; color: inherit; text-decoration: none; }
.clp-play { position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px;
  display: grid; place-items: center; color: #fff; background: rgba(10,17,30,.45); pointer-events: none;
  clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 8px 100%, 0 50%); }
.clp-play i { font-size: 11px; }
.clp-post.is--big .clp-play { width: 44px; height: 44px; margin: -22px 0 0 -22px;
  clip-path: polygon(11px 0, calc(100% - 11px) 0, 100% 50%, calc(100% - 11px) 100%, 11px 100%, 0 50%); }
.clp-post.is--big .clp-play i { font-size: 16px; }
.clp-lock { position: absolute; right: 7px; top: 7px; width: 22px; height: 22px; display: grid; place-items: center;
  color: #F2F4FA; background: rgba(10,17,30,.66); }
.clp-lock i { font-size: 10px; }

/* détail d'une publication (#post=<i>) */
.clp-pnav { display: flex; align-items: center; gap: 12px; margin: 10px 0 0; }
.clp-pnav-t { flex: 1; text-align: center; font: 500 10.5px Inter, sans-serif; letter-spacing: .16em;
  text-transform: uppercase; color: rgba(255,255,255,.75); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clp-pdetail { max-width: 640px; margin-top: 16px; }
.clp-pmedia { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; background: #000; }
.clp-ptitle { margin: 16px 0 0; font-size: clamp(22px, 2.6vw, 30px); color: #F2F4FA; }
.clp-pmeta { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.clp-pmeta .wh { font: 400 12px Inter, sans-serif; color: rgba(255,255,255,.55); }
.clp-scope { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 11px;
  font: 500 9.5px Inter, sans-serif; letter-spacing: .09em; text-transform: uppercase; color: rgba(255,255,255,.6);
  background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
  clip-path: polygon(7px 0, calc(100% - 7px) 0, 100% 50%, calc(100% - 7px) 100%, 7px 100%, 0 50%); }
.clp-scope i { font-size: 11px; }
.clp-scope.is--members { color: #C8AA6E; background: rgba(200,170,110,.12); box-shadow: inset 0 0 0 1px rgba(200,170,110,.6); }
.clp-ptxt { margin: 14px 0 0; font: 400 14px/1.5 Inter, sans-serif; color: rgba(255,255,255,.8); }
.clp-pcounts { display: flex; gap: 22px; margin-top: 18px; font: 500 13px Inter, sans-serif; color: #F2F4FA; }
.clp-pcounts span { display: inline-flex; align-items: center; gap: 7px; }
.clp-pcounts i { font-size: 17px; color: rgba(255,255,255,.55); }
.clp-pcounts .ph-heart { color: #C8AA6E; }
.card.clp-cm { padding: 14px; margin-bottom: 8px; }
.clp-cm b { display: block; font: 600 12.5px Inter, sans-serif; color: #F2F4FA; }
.clp-cm p { margin: 4px 0 0; font: 400 13px/1.45 Inter, sans-serif; color: rgba(255,255,255,.75); }

/* action du bas de /club-infos (rejoindre / quitter) et son message d'échec */
.clp-cta.clp-foot { margin-top: 30px; }
.clp-err { margin: 12px 0 0; font: 400 12.5px/1.45 Inter, sans-serif; color: #E7796D; }

/* mini-carte du backoffice, à fleur de la carte d'adresse */
.addr .clp-map { display: block; width: calc(100% + 36px); height: 140px; margin: -16px -18px 14px; border: 0; background: #0E1424; }

/* modales (contact, revendication) : gabarit .gk-modal sans ses arrondis */
.clp-modal .gk-modal-card { border-radius: 0; border: 0; background: #0E1424;
  box-shadow: 0 10px 34px rgba(0,0,0,.55), inset 0 0 0 1px rgba(200,170,110,.35); }
.clp-modal .gk-modal-x { border-radius: 0; }
.clp-modal .gk-modal-title { font-style: italic; font-weight: 700; font-size: 22px; }
.clp-msub { margin: -6px 0 16px; font: 400 13px/1.5 Inter, sans-serif; color: rgba(255,255,255,.6); }
.clp-claim-club { display: block; margin: -8px 0 6px; font-size: 22px; color: #F2F4FA; }
.clp-modal .gk-field textarea, .clp-modal .gk-field input { border-radius: 0; background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.16); color: #F2F4FA; }
.clp-modal .gk-field textarea:focus, .clp-modal .gk-field input:focus { border-color: rgba(200,170,110,.65); box-shadow: none; }
.clp-modal .gk-confirm-btns { margin-top: 16px; }
.clp-expl { margin: 0 0 16px; font: 400 13.5px/1.5 Inter, sans-serif; color: rgba(255,255,255,.6); }
.clp-status { display: flex; align-items: center; gap: 12px; padding: 14px 16px; margin-bottom: 18px;
  background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14);
  clip-path: polygon(14px 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 14px 100%, 0 50%); }
.clp-status i { font-size: 20px; color: rgba(255,255,255,.55); flex: 0 0 auto; }
.clp-status.is--ok i { color: #C8AA6E; }
.clp-status b { display: block; font: 600 14px/1.35 Inter, sans-serif; color: #F2F4FA; }
.clp-status span { display: block; margin-top: 4px; font: 400 13px Inter, sans-serif; color: rgba(255,255,255,.6); }
.clp-chans { display: flex; gap: 10px; margin-bottom: 16px; }
.clp-chan { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 46px; border: 0;
  cursor: pointer; font: 500 13px Inter, sans-serif; color: rgba(255,255,255,.55);
  background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 1px rgba(255,255,255,.16);
  clip-path: polygon(11px 0, calc(100% - 11px) 0, 100% 50%, calc(100% - 11px) 100%, 11px 100%, 0 50%); }
.clp-chan i { font-size: 16px; }
.clp-chan.is--on { color: #F0E6D2; background: rgba(200,170,110,.12); box-shadow: inset 0 0 0 1px rgba(200,170,110,.7); }
.clp-cfield { margin-bottom: 12px; }
.clp-cfield input { height: 54px; text-align: center; font-size: 15px; }
.clp-cfield.is--err input { border-color: rgba(231,121,109,.7); }
.clp-cfield.is--code input { border-color: rgba(200,170,110,.7); background: rgba(200,170,110,.08); color: #E8C77E;
  font: 500 24px Inter, sans-serif; letter-spacing: .25em; }
.clp-modal .clp-err { margin: -4px 0 12px; }
.clp-cbtn { width: 100%; margin-top: 4px; }
.clp-cbtn[disabled] { opacity: .45; cursor: default; filter: none; }
.clp-file { position: relative; overflow: hidden; }
.clp-file input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.clp-again { display: block; width: 100%; margin-top: 12px; padding: 4px 0; border: 0; background: none; cursor: pointer;
  text-align: center; font: 500 12.5px Inter, sans-serif; color: rgba(255,255,255,.55); }
.clp-again:hover { color: #F2F4FA; }
.clp-demo { margin: -6px 0 12px; font: 500 13px Inter, sans-serif; letter-spacing: .03em; color: #C8AA6E; }
.clp-demo b { font-weight: 700; letter-spacing: .12em; }
.clp-mfoot { margin: 18px 0 0; font: 400 12px/1.45 Inter, sans-serif; color: rgba(255,255,255,.5); }