/* ============================================================================
 * poster.css — charte "poster" du manager (topbar + composants partagés).
 * Chargé APRÈS les feuilles du thème par layout.php et layout_light.php, sur
 * l'espace membre comme sur les pages publiques (tournois, matchs, joueurs).
 * Tout est scopé (.poster-nav, .poster-page, classes préfixées) : aucun
 * sélecteur nu susceptible d'impacter les pages non restylées.
 * ========================================================================== */

/* ── Tokens (dupliqués depuis pages/users/login.php — garder synchro) ───── */
:root{
  --color-paper: oklch(97% 0.004 90);
  --color-paper-2: oklch(93.5% 0.006 90);    /* aplat secondaire (cartes en retrait) */
  --color-paper-dark: oklch(18% 0.012 265);
  --color-ink: oklch(17% 0.012 265);
  --color-ink-2: oklch(44% 0.014 265);
  --color-ink-inv: oklch(96% 0.004 90);
  --color-rule: oklch(87% 0.01 90);
  --color-accent: oklch(84% 0.16 89);        /* #fbc02d */
  --color-accent-hi: oklch(87.5% 0.155 94);  /* #ffd23f */
  --color-accent-deep: oklch(63% 0.125 80);
  --color-accent-ink: oklch(16% 0.035 95);
  --color-neg: oklch(48% 0.14 30);
  --color-ok: oklch(45% 0.09 150);
  --color-focus: oklch(50% 0.14 260);

  --font-display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --font-body: "Inter", -apple-system, sans-serif;

  --space-2xs:.5rem; --space-xs:.75rem; --space-sm:1rem; --space-md:1.5rem;
  --space-lg:2rem; --space-xl:3rem; --space-2xl:4.5rem;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-short: 150ms;
  --wide: 1060px;
}

/* ── Composants partagés (mêmes styles que home / login) ────────────────── */
.wordmark{
  font-family:var(--font-display); font-weight:800; font-size:1.5rem; letter-spacing:.02em;
  text-transform:uppercase; text-decoration:none; color:var(--color-ink);
}
.wordmark:hover, .wordmark:focus{ color:var(--color-ink) } /* neutralise le a:hover rouge hyperkit */
.wordmark em{ font-style:normal; background:linear-gradient(90deg, transparent .22em, var(--color-accent) .22em); padding:0 .18em 0 0 }

.btn-abo{
  display:inline-block; background:linear-gradient(180deg,var(--color-accent-hi),var(--color-accent));
  color:var(--color-accent-ink); font-family:var(--font-body); font-weight:800; font-size:1rem;
  text-decoration:none; padding:12px 30px; white-space:nowrap; border:none; border-radius:0; cursor:pointer;
  transition:transform var(--dur-short) var(--ease-out), filter var(--dur-short) var(--ease-out);
  box-shadow:0 6px 18px oklch(84% 0.16 89 / .45);
}
.btn-abo:hover, .btn-abo:focus{ color:var(--color-accent-ink); filter:brightness(1.06); transform:translateY(-1px) }
.btn-abo:active{ color:var(--color-accent-ink); transform:translateY(0) }

.btn-connect{
  display:inline-block; font-family:var(--font-display); font-weight:700; font-size:1.02rem; letter-spacing:.05em;
  text-transform:uppercase; text-decoration:none; color:var(--color-ink); background:transparent;
  border:3px solid var(--color-ink); border-radius:0; padding:5px 16px; white-space:nowrap; cursor:pointer;
  transition:background var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out);
}
.btn-connect:hover, .btn-connect:focus{ background:var(--color-ink); color:var(--color-ink-inv) }
.btn-connect.btn-connect-sm{ font-size:.92rem; padding:3px 12px; border-width:2px }

/* ── Topbar poster (surclasse la navbar-dark hyperkit, style.css:14206+) ── */
.hk-wrapper .hk-navbar.navbar-dark.poster-nav{
  background:var(--color-paper);
  border-bottom:3px solid var(--color-ink);
  /* contenu centré sur 1280px, barre pleine largeur (iso maquette) */
  padding-left:max(24px, calc((100% - 1280px) / 2));
  padding-right:max(24px, calc((100% - 1280px) / 2));
}
.hk-wrapper .hk-navbar.navbar-dark.poster-nav a.navbar-toggle-btn{ color:var(--color-ink) }
/* on neutralise le cercle de survol hyperkit (source possible d'artefact jaune) */
.hk-wrapper .hk-navbar.poster-nav a.nav-link-hover:after{ display:none }

/* marque : wordmark texte (override du navbar-brand hyperkit 24px/capitalize) */
.hk-wrapper .hk-navbar.poster-nav a.navbar-brand{
  font-family:var(--font-display); font-weight:800; font-size:1.5rem; letter-spacing:.02em;
  text-transform:uppercase; color:var(--color-ink); margin-right:1.25rem;
}
.hk-wrapper .hk-navbar.poster-nav a.navbar-brand:hover,
.hk-wrapper .hk-navbar.poster-nav a.navbar-brand:focus{ color:var(--color-ink) }

/* menu : liens display uppercase encre */
.hk-wrapper .hk-navbar.navbar-dark.poster-nav .navbar-nav .nav-item .nav-link{
  font-family:var(--font-display); font-weight:700; font-size:1.08rem; letter-spacing:.05em;
  text-transform:uppercase; color:var(--color-ink);
}
/* soulignement sous le TEXTE (pas en bas du lien de 57px), menu gauche uniquement */
.hk-wrapper .hk-navbar.navbar-dark.poster-nav .navbar-collapse .nav-item .nav-link:hover,
.hk-wrapper .hk-navbar.navbar-dark.poster-nav .navbar-collapse .nav-item .nav-link:focus{
  color:var(--color-ink);
  text-decoration:underline; text-decoration-color:var(--color-accent);
  text-decoration-thickness:3px; text-underline-offset:8px;
}
.hk-wrapper .hk-navbar.navbar-dark.poster-nav .navbar-collapse .nav-item.active > .nav-link{
  text-decoration:underline; text-decoration-color:var(--color-ink);
  text-decoration-thickness:3px; text-underline-offset:8px;
}
/* menu de droite (Premium, user) : centré verticalement, JAMAIS souligné ni bordé (tous états) */
.hk-wrapper .hk-navbar.navbar-dark.poster-nav .navbar-nav.hk-navbar-content .nav-item .nav-link{
  color:var(--color-ink); display:flex; align-items:center; height:57px; line-height:normal;
}
.hk-wrapper .hk-navbar.navbar-dark.poster-nav .navbar-nav.hk-navbar-content .nav-item .nav-link,
.hk-wrapper .hk-navbar.navbar-dark.poster-nav .navbar-nav.hk-navbar-content .nav-item .nav-link:hover,
.hk-wrapper .hk-navbar.navbar-dark.poster-nav .navbar-nav.hk-navbar-content .nav-item .nav-link:focus,
.hk-wrapper .hk-navbar.navbar-dark.poster-nav .navbar-nav.hk-navbar-content .nav-item.show .nav-link{
  color:var(--color-ink); text-decoration:none !important; border-bottom:0 !important; box-shadow:none !important;
}

/* bloc user (prénom + chevron) */
.hk-wrapper .hk-navbar.poster-nav .dropdown-authentication .nav-link .media{ display:flex; align-items:center }
.hk-wrapper .hk-navbar.poster-nav .dropdown-authentication .nav-link .media .media-img-wrap{ display:flex; align-items:center; margin-right:8px }
.hk-wrapper .hk-navbar.poster-nav .dropdown-authentication .nav-link .media .media-body > span{ display:inline-flex; align-items:center; gap:4px }
.hk-wrapper .hk-navbar.navbar-dark.poster-nav .navbar-nav.hk-navbar-content .nav-item.dropdown.dropdown-authentication .nav-link .media .media-body > span{
  font-family:var(--font-body); font-weight:600; font-size:.95rem; letter-spacing:0; text-transform:none; color:var(--color-ink);
}
.hk-wrapper .hk-navbar.navbar-dark.poster-nav .navbar-nav.hk-navbar-content .nav-item.dropdown.dropdown-authentication .nav-link .media .media-body > span > i{ color:var(--color-ink-2) }

/* dropdowns : fond papier, bordure encre, hover accent (positionnement hyperkit intact) */
.hk-wrapper .hk-navbar.poster-nav .dropdown-menu{
  background:var(--color-paper); border:3px solid var(--color-ink); border-radius:0; box-shadow:none; padding:4px 0;
}
.hk-wrapper .hk-navbar.poster-nav .dropdown-menu .dropdown-item{
  color:var(--color-ink); font-family:var(--font-body); font-weight:600; font-size:.92rem;
}
.hk-wrapper .hk-navbar.poster-nav .dropdown-menu .dropdown-item:hover,
.hk-wrapper .hk-navbar.poster-nav .dropdown-menu .dropdown-item:focus{
  background:var(--color-accent); color:var(--color-accent-ink);
}
.hk-wrapper .hk-navbar.poster-nav .dropdown-menu .dropdown-divider{ border-top-color:var(--color-rule) }
.hk-wrapper .hk-navbar.poster-nav .dropdown-menu .dropdown-item .dropdown-icon{ color:var(--color-ink-2) }

/* badges topbar : carrés, charte */
.hk-wrapper .hk-navbar.poster-nav .badge{ border-radius:0; font-family:var(--font-display); font-weight:700; letter-spacing:.06em; text-transform:uppercase }
.hk-wrapper .hk-navbar.poster-nav .badge-warning{ background:var(--color-accent) }
.hk-wrapper .hk-navbar.poster-nav .badge-secondary{ background:var(--color-rule); color:var(--color-ink) }
.hk-wrapper .hk-navbar.poster-nav .badge-light{ background:var(--color-rule); color:var(--color-ink) }
/* badge Premium (menu de droite) : franc, iso maquette */
.hk-wrapper .hk-navbar.poster-nav .navbar-nav.hk-navbar-content .badge-warning{ font-size:.85rem; padding:4px 12px }
/* "Licence à vie" dans le lien Manager : tag discret bordé, pas un badge jaune (iso maquette) */
.hk-wrapper .hk-navbar.poster-nav .navbar-collapse .nav-link .badge{
  background:transparent; border:2px solid var(--color-rule); color:var(--color-ink-2) !important;
  font-size:.66rem; letter-spacing:.1em; padding:2px 8px; margin-left:8px; vertical-align:2px;
}

/* avatar carré à initiale (remplace l'image ronde) — !important pour battre les
   sélecteurs .avatar profonds d'hyperkit (display:flex/justify normal/35px) */
.hk-wrapper .hk-navbar.poster-nav .avatar.poster-avatar{
  width:34px !important; height:34px !important; min-width:34px;
  display:flex !important; align-items:center !important; justify-content:center !important;
  border-radius:0 !important; overflow:hidden;
  background:var(--color-ink); color:var(--color-accent);
  font-family:var(--font-display); font-weight:800; font-size:1.15rem; line-height:1;
}

/* bouton "Accès immédiat" (visiteurs) : version compacte du btn-abo */
.hk-wrapper .hk-navbar.poster-nav .btn-abo{ padding:8px 18px; font-size:.92rem; box-shadow:none; align-self:center }

/* collapse mobile (navbar-expand-xl → replié sous 1200px) : fond papier au lieu du dark */
@media (max-width: 1199px){
  .hk-wrapper .hk-navbar.hk-navbar-alt.navbar-dark.poster-nav .navbar-collapse{
    background:var(--color-paper); border-bottom:3px solid var(--color-ink);
  }
  .hk-wrapper .hk-navbar.hk-navbar-alt.navbar-dark.poster-nav .navbar-collapse > .navbar-nav .nav-item .nav-link{
    color:var(--color-ink); border-color:var(--color-rule); box-shadow:none;
  }
  .hk-wrapper .hk-navbar.hk-navbar-alt.navbar-dark.poster-nav .navbar-collapse > .navbar-nav .nav-item .dropdown-menu{
    border:none; background:transparent;
  }
  .hk-wrapper .hk-navbar.hk-navbar-alt.navbar-dark.poster-nav .navbar-collapse > .navbar-nav .nav-item .dropdown-menu a.dropdown-item{
    color:var(--color-ink-2);
  }
  .hk-wrapper .hk-navbar.hk-navbar-alt.navbar-dark.poster-nav .navbar-collapse > .navbar-nav .nav-item .dropdown-menu a.dropdown-item:hover,
  .hk-wrapper .hk-navbar.hk-navbar-alt.navbar-dark.poster-nav .navbar-collapse > .navbar-nav .nav-item .dropdown-menu a.dropdown-item:focus{
    color:var(--color-ink); background:transparent;
  }
}

@media (prefers-reduced-motion: reduce){
  .poster-nav *, .btn-abo, .btn-connect{ transition-duration:.01ms !important; animation-duration:.01ms !important }
}

/* ============================================================================
 * Pages membres — charte poster, opt-in.
 * Hallmark · genre: editorial · macrostructure: Workbench · design-system: poster.css
 * designed-as-app · pre-emit critique: P5 H5 E4 S5 R5 V4
 *
 * S'applique UNIQUEMENT aux conteneurs marqués .poster-page et aux modales
 * marquées .poster-modal (les modales sont hors du conteneur dans le DOM).
 * Aucun sélecteur nu : les pages non migrees gardent le rendu hyperkit.
 * Pages migrees : profile, billing, affiliate.
 * ========================================================================== */

body:has(.poster-page),
.hk-wrapper .hk-pg-wrapper:has(.poster-page){ background:var(--color-paper) }

.poster-page{ font-family:var(--font-body); color:var(--color-ink); max-width:calc(var(--wide) + 3rem) }

/* ── Titre de page ─────────────────────────────── */
.poster-page h3.display-5{
  display:block; font-family:var(--font-display); font-weight:800;
  font-size:clamp(2rem,3.5vw,2.6rem); line-height:1; text-transform:uppercase;
  letter-spacing:.02em; color:var(--color-ink); margin-bottom:0;
  overflow-wrap:anywhere; min-width:0;
}
.poster-page h3.display-5:after{
  content:""; display:block; width:120px; height:8px;
  background:var(--color-accent); margin:10px 0 32px;
}

/* ── Sections ──────────────────────────────────── */
.poster-page .hk-sec-wrapper{
  background:var(--color-paper); border:3px solid var(--color-ink); border-radius:0;
  box-shadow:none; padding:var(--space-lg); margin-bottom:var(--space-lg);
}
.poster-page .hk-sec-title{
  font-family:var(--font-display); font-weight:800; font-size:1.5rem; line-height:1.15;
  text-transform:uppercase; letter-spacing:.03em; color:var(--color-ink); margin-bottom:6px;
  overflow-wrap:anywhere; min-width:0;
}
.poster-page .hk-sec-wrapper > p{ color:var(--color-ink-2); font-size:.95rem }
/* le .mb-40 d'hyperkit sur les chapos creuse trop une fois la section bordee */
.poster-page .hk-sec-wrapper > p.mb-40{ margin-bottom:var(--space-md) }

/* ── Cartes ────────────────────────────────────── */
.poster-page .card{
  background:var(--color-paper); border:3px solid var(--color-ink); border-radius:0; box-shadow:none;
}
.poster-page .card .card-body{ border-radius:0 }
.poster-page .card .card-body.bg-light{ background:var(--color-paper-2) !important }
.poster-page .card .card-title{
  font-family:var(--font-display); font-weight:800; font-size:1.35rem;
  text-transform:uppercase; letter-spacing:.03em; color:var(--color-ink); margin-bottom:0;
}
.poster-page .card strong{ font-weight:700; color:var(--color-ink) }

/* cartes-chiffres (espace affilie) */
.poster-page .card.card-sm .card-body{ padding:var(--space-md) }
.poster-page .card.card-sm .text-uppercase{
  font-family:var(--font-display) !important; font-weight:700 !important; font-size:.85rem !important;
  letter-spacing:.08em !important; color:var(--color-ink-2) !important;
}
.poster-page .card .display-5{
  font-family:var(--font-display); font-weight:800; font-size:2.4rem; line-height:1;
  color:var(--color-ink); font-variant-numeric:tabular-nums;
}
.poster-page .card .display-5 + small,
.poster-page .card small{ color:var(--color-ink-2) }

/* ── Tables ────────────────────────────────────── */
.poster-page .table{
  border:3px solid var(--color-ink); background:var(--color-paper); margin-bottom:0; font-size:.95rem;
  /* sans cela le filet de 3px s'ajoute au 100 % de largeur : 6 px de debordement */
  box-sizing:border-box;
}
.poster-page .table.table-bordered th,
.poster-page .table.table-bordered td{ border:none; border-top:1px solid var(--color-rule); padding:10px 12px }
.poster-page .table thead th{
  background:var(--color-ink); color:var(--color-ink-inv); border:none;
  font-family:var(--font-display); font-weight:700; font-size:1.02rem;
  letter-spacing:.08em; text-transform:uppercase; padding:10px 12px; vertical-align:middle;
}
.poster-page .table tbody tr:first-child td{ border-top:none }
.poster-page .table td{ color:var(--color-ink); vertical-align:middle }
.poster-page .table td small{ color:var(--color-ink-2); font-size:.85rem }
.poster-page .table.table-hover tbody tr:hover{ background:var(--color-paper-2) }
.poster-page .table td em{ color:var(--color-ink-2) }
/* montants et dates : chiffres alignes */
.poster-page .table td{ font-variant-numeric:tabular-nums }

/* liens : soulignes en permanence (affordance), jamais le rouge hyperkit.
   Le survol epaissit le trait plutot que de le faire apparaitre. */
.poster-page .table a, .poster-page .link-poster{
  color:var(--color-ink); font-weight:600; border-bottom:0;
  text-decoration:underline; text-decoration-color:var(--color-accent);
  text-decoration-thickness:2px; text-underline-offset:4px;
  transition:text-decoration-thickness var(--dur-short) var(--ease-out);
}
.poster-page .table a:hover, .poster-page .table a:focus,
.poster-page .link-poster:hover, .poster-page .link-poster:focus{
  color:var(--color-ink); text-decoration-thickness:4px;
}
.poster-page .table a:focus-visible, .poster-page .link-poster:focus-visible{
  outline:3px solid var(--color-focus); outline-offset:2px;
}

/* ── Badges ────────────────────────────────────── */
.poster-page .badge{
  border-radius:0; font-family:var(--font-display); font-weight:700; font-size:.8rem;
  letter-spacing:.06em; text-transform:uppercase; padding:4px 10px; vertical-align:middle;
}
.poster-page .badge-produit{ background:var(--color-ink); color:var(--color-ink-inv) }
.poster-page .badge-light{ background:var(--color-rule); color:var(--color-ink) }
.poster-page .badge-secondary{ background:var(--color-rule); color:var(--color-ink) }
.poster-page .badge-success{ background:var(--color-ok); color:var(--color-ink-inv) }
.poster-page .badge-danger{ background:var(--color-neg); color:var(--color-ink-inv) }
.poster-page .badge-dark{ background:var(--color-ink-2); color:var(--color-ink-inv) }

/* ── Formulaires ───────────────────────────────── */
.poster-page label, .poster-modal label{
  font-family:var(--font-display); font-weight:700; font-size:.9rem; letter-spacing:.06em;
  text-transform:uppercase; color:var(--color-ink); margin-bottom:5px;
}
.poster-page .form-control, .poster-modal .form-control{
  font-family:var(--font-body); font-size:.95rem; color:var(--color-ink);
  background:var(--color-paper); border:2px solid var(--color-ink-2); border-radius:0;
  box-shadow:none; height:auto; padding:9px 12px;
  transition:border-color var(--dur-short) var(--ease-out);
}
.poster-page .form-control:hover, .poster-modal .form-control:hover{ border-color:var(--color-ink) }
.poster-page .form-control:focus, .poster-modal .form-control:focus{
  border-color:var(--color-ink); box-shadow:none; background:var(--color-paper);
}
.poster-page .form-control:focus-visible, .poster-modal .form-control:focus-visible{
  outline:3px solid var(--color-focus); outline-offset:1px;
}
/* champs en lecture seule = liens à copier : on signale qu'ils sont cliquables */
.poster-page .form-control[readonly], .poster-modal .form-control[readonly]{
  background:var(--color-paper-2); cursor:pointer;
}
.poster-page select.form-control, .poster-modal select.form-control{ appearance:auto }
.poster-page .input-group{ display:flex }
.poster-page .form-group{ margin-bottom:var(--space-md) }

/* ── Boutons ───────────────────────────────────── */
.poster-page .btn, .poster-modal .btn{
  border-radius:0; box-shadow:none; font-family:var(--font-display); font-weight:700;
  letter-spacing:.05em; text-transform:uppercase; padding:9px 20px; border-width:2px;
  transition:background var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out), filter var(--dur-short) var(--ease-out);
}
/* action primaire : aplat accent (btn-block, ou btn-danger hérité d'hyperkit) */
.poster-page .btn.btn-block, .poster-modal .btn.btn-block,
.poster-page .btn-danger, .poster-modal .btn-danger, .poster-modal input.btn-danger{
  background:linear-gradient(180deg,var(--color-accent-hi),var(--color-accent));
  color:var(--color-accent-ink); border-color:var(--color-accent); font-family:var(--font-body);
  font-weight:800; font-size:1rem; letter-spacing:0; text-transform:none; padding:12px 26px;
}
.poster-page .btn.btn-block:hover, .poster-page .btn.btn-block:focus,
.poster-modal .btn.btn-block:hover, .poster-modal .btn.btn-block:focus,
.poster-page .btn-danger:hover, .poster-page .btn-danger:focus,
.poster-modal .btn-danger:hover, .poster-modal .btn-danger:focus{
  filter:brightness(1.06); color:var(--color-accent-ink);
}
.poster-page .btn.btn-block:active, .poster-modal .btn.btn-block:active,
.poster-modal .btn-danger:active{ filter:brightness(.97) }
.poster-page .btn.btn-block[disabled], .poster-modal .btn.btn-block[disabled],
.poster-modal .btn-danger[disabled]{ filter:grayscale(1); opacity:.55; cursor:not-allowed }
/* action secondaire : contour encre */
.poster-page .btn-light, .poster-page .btn-xs,
.poster-modal .btn-secondary, .poster-page .btn-secondary:not(.btn-block){
  background:transparent; color:var(--color-ink); border:2px solid var(--color-ink);
}
.poster-page .btn-light:hover, .poster-page .btn-xs:hover,
.poster-modal .btn-secondary:hover, .poster-modal .btn-secondary:focus,
.poster-page .btn-secondary:not(.btn-block):hover{
  background:var(--color-ink); color:var(--color-ink-inv);
}
.poster-page .btn-xs{ font-size:.8rem; padding:3px 12px }
.poster-page .btn:focus-visible, .poster-modal .btn:focus-visible{
  outline:3px solid var(--color-focus); outline-offset:2px;
}

/* ── Alertes / mentions ────────────────────────── */
.poster-page .alert{
  background:var(--color-paper-2); border:0; border-left:8px solid var(--color-accent);
  border-radius:0; color:var(--color-ink); font-size:.92rem; padding:14px 18px;
  margin-bottom:var(--space-sm);
}
.poster-page .alert a{ color:var(--color-ink); font-weight:600; text-decoration:underline;
  text-decoration-color:var(--color-accent); text-decoration-thickness:2px }
.poster-page .alert .close{ text-shadow:none; opacity:.5; color:var(--color-ink) }

/* ── Modales ───────────────────────────────────── */
.poster-modal .modal-content{
  background:var(--color-paper); border:3px solid var(--color-ink); border-radius:0; box-shadow:none;
}
.poster-modal .modal-header{
  background:var(--color-accent); border-bottom:3px solid var(--color-ink); border-radius:0;
}
.poster-modal .modal-title{
  font-family:var(--font-display); font-weight:800; font-size:1.35rem;
  text-transform:uppercase; letter-spacing:.03em; color:var(--color-accent-ink);
  overflow-wrap:anywhere; min-width:0;
}
.poster-modal .modal-header .close{ color:var(--color-accent-ink); opacity:1; text-shadow:none }
.poster-modal .modal-header .close:focus-visible{ outline:3px solid var(--color-focus); outline-offset:2px }
.poster-modal .modal-body{ color:var(--color-ink) }
.poster-modal .modal-footer{ border-top:1px solid var(--color-rule) }
.poster-modal .table{ border:3px solid var(--color-ink); font-size:.92rem }
.poster-modal .table thead th{
  background:var(--color-ink); color:var(--color-ink-inv); border:none;
  font-family:var(--font-display); font-weight:700; letter-spacing:.08em; text-transform:uppercase;
}
.poster-modal .table.table-bordered th, .poster-modal .table.table-bordered td{
  border:none; border-top:1px solid var(--color-rule); vertical-align:middle;
}

/* ── Mobile ────────────────────────────────────── */
@media (max-width:767px){
  .poster-page .hk-sec-wrapper{ padding:var(--space-md) }
  .poster-page .card .display-5{ font-size:2rem }
  .poster-page .btn, .poster-modal .btn{ white-space:nowrap }
}

@media (prefers-reduced-motion: reduce){
  .poster-page *, .poster-modal *{ transition-duration:.01ms !important; animation-duration:.01ms !important }
}

/* ── Pages éditoriales : tournois, matchs, joueurs ───────────────────────────
   Ces pages structurent leur contenu avec des <h1>/<h2>/<h3> nus plutôt qu'avec
   les composants du thème. Sans ces règles elles gardaient Poppins et le bleu
   d'origine au milieu d'une section déjà restylée. */

/* Le titre de page reçoit la barre d'accent, comme h3.display-5 ailleurs :
   c'est la signature de la charte, elle doit être là où commence la page. */
.poster-page .hk-sec-title{ font-size:clamp(1.6rem,3vw,2.1rem) }
.poster-page .hk-sec-wrapper .hk-sec-title:after{
  content:""; display:block; width:120px; height:8px;
  background:var(--color-accent); margin:12px 0 20px;
}

/* Intertitres. Le h2 sépare les jours ou les grandes sections, le h3 les
   tournois : deux niveaux, deux graisses, un seul rythme typographique. */
.poster-page .hk-sec-wrapper h2{
  font-family:var(--font-display); font-weight:800; font-size:1.6rem; line-height:1.15;
  text-transform:uppercase; letter-spacing:.03em; color:var(--color-ink);
  margin:var(--space-xl) 0 var(--space-sm); padding-top:var(--space-sm);
  border-top:3px solid var(--color-ink);
}
.poster-page .hk-sec-wrapper h2:first-of-type{ border-top:none; padding-top:0 }
.poster-page .hk-sec-wrapper h3{
  font-family:var(--font-display); font-weight:700; font-size:1.15rem;
  text-transform:uppercase; letter-spacing:.04em; color:var(--color-ink);
  margin:var(--space-md) 0 var(--space-2xs);
}
.poster-page .hk-sec-wrapper h3 a{ color:inherit }
.poster-page .hk-sec-wrapper h3 small{
  font-family:var(--font-body); font-weight:400; font-size:.8rem;
  text-transform:none; letter-spacing:0; color:var(--color-ink-2);
}

/* Fil d'Ariane : discret, il ne doit pas concurrencer le titre. */
.poster-page .breadcrumb{
  background:none; padding:0; margin-bottom:var(--space-sm);
  font-size:.85rem; color:var(--color-ink-2);
}
.poster-page .breadcrumb a{ color:var(--color-ink-2); text-decoration-color:var(--color-rule) }
.poster-page .breadcrumb .breadcrumb-item.active{ color:var(--color-ink-2) }

/* Pastilles de navigation (saisons, initiales). Le badge d'origine est rond et
   coloré ; ici il devient une étiquette carrée, cohérente avec le reste. */
.poster-page .badge-soft-info,
.poster-page .badge.badge-soft-info{
  background:var(--color-paper-2); color:var(--color-ink); border:2px solid var(--color-ink);
  border-radius:0; font-family:var(--font-display); font-weight:700;
  font-size:.9rem; letter-spacing:.04em; text-transform:uppercase;
}
.poster-page .badge-soft-info:hover{ background:var(--color-accent); color:var(--color-accent-ink) }

/* Boutons d'entrée de page (programme, joueurs). */
.poster-page .btn-primary, .poster-page .btn-secondary{
  border-radius:0; border:2px solid var(--color-ink);
  /* un libelle long ne doit jamais faire defiler la page sur un petit ecran */
  max-width:100%; white-space:normal;
  font-family:var(--font-display); font-weight:700; letter-spacing:.05em;
  text-transform:uppercase;
}
.poster-page .btn-primary{ background:var(--color-accent); color:var(--color-accent-ink) }
.poster-page .btn-secondary{ background:transparent; color:var(--color-ink) }
.poster-page .btn-primary:hover, .poster-page .btn-secondary:hover{
  background:var(--color-ink); color:var(--color-ink-inv); border-color:var(--color-ink);
}

/* Liens de contenu. La feuille ne traitait que ceux des tableaux ; ceux des
   paragraphes et des listes restaient au bleu de bootstrap, ce qui suffisait a
   faire lire la page comme « pas encore refaite ». Le .poster-page ne couvre
   que le corps de page — ni la topbar, ni le pied — donc le selecteur peut
   rester large. */
.poster-page a:not(.btn):not([class*="badge"]):not(.poster-tag){
  color:var(--color-ink); font-weight:600;
  text-decoration:underline; text-decoration-color:var(--color-accent);
  text-decoration-thickness:2px; text-underline-offset:3px;
  transition:text-decoration-thickness var(--dur-short) var(--ease-out);
}
.poster-page a:not(.btn):not([class*="badge"]):not(.poster-tag):hover{
  color:var(--color-ink); text-decoration-thickness:4px;
}
/* le fil d'Ariane reste en retrait : il passe apres, et gagne en specificite */
.poster-page .breadcrumb .breadcrumb-item a:not(.btn){
  color:var(--color-ink-2); font-weight:400;
  text-decoration-color:var(--color-rule); text-decoration-thickness:1px;
}

/* Etiquettes : sexe du tableau des tournois, action de ligne, tour de match.
   Le theme les rendait rondes et colorees (cyan, violet, gris) ; la charte ne
   connait que le noir, le papier et l'accent. */
.poster-page .poster-tag{
  display:inline-block; padding:.15em .5em; border:2px solid var(--color-ink);
  border-radius:0; background:var(--color-paper-2); color:var(--color-ink);
  font-family:var(--font-display); font-weight:700; font-size:.8rem;
  letter-spacing:.06em; text-transform:uppercase; line-height:1.4;
}
.poster-page .poster-tag--f{ background:var(--color-ink); color:var(--color-ink-inv) }
/* la regle des liens de tableau passe avant et re-souligne l'etiquette */
.poster-page .table a.poster-tag, .poster-page a.poster-tag{ text-decoration:none }
.poster-page a.poster-tag:hover{ background:var(--color-accent); color:var(--color-accent-ink) }

/* Photo de joueur : le theme lui met un cadre arrondi gris. */
.poster-page .img-thumbnail{
  border:3px solid var(--color-ink); border-radius:0; background:var(--color-paper); padding:6px;
}

/* Encarts d'information (pagination vide, avertissements). */
.poster-page .alert{
  border:3px solid var(--color-ink); border-radius:0; background:var(--color-paper-2);
  color:var(--color-ink);
}
.poster-page .alert-warning{ border-left:8px solid var(--color-accent) }

/* Serie de resultats (V/D) sur la page de match. Le vert et le rouge portent
   ici une information — victoire ou defaite — donc ils restent ; seule la forme
   s'aligne : carree, en display, comme les autres etiquettes. */
.poster-page .poster-vd{
  display:inline-block; width:1.4rem; height:1.4rem; line-height:1.4rem;
  margin-right:3px; text-align:center; border-radius:0;
  font-family:var(--font-display); font-weight:700; font-size:.85rem;
  color:var(--color-ink-inv);
}
.poster-page .poster-vd--v{ background:oklch(48% 0.13 150) }
.poster-page .poster-vd--d{ background:oklch(48% 0.16 27) }

/* ── Barre et pied de page partages ──────────────────────────────────────────
   Repris de l'accueil, qui les portait dans son propre <style>. Les pages
   editoriales gardaient sinon la topbar du theme de 2017 et le pied minuscule
   du layout, au-dessus d'un contenu deja passe a la charte.

   Prefixe .poster-bar plutot que .nav : ces pages chargent bootstrap, ou .nav
   est une classe de composant. */

.poster-bar{ border-bottom:3px solid var(--color-ink); background:var(--color-paper); display:block }
.poster-bar-in{
  max-width:var(--wide); margin:0 auto; padding:14px var(--space-md); width:100%;
  display:flex; align-items:center; justify-content:space-between; gap:var(--space-sm);
}
.poster-bar-right{ display:flex; align-items:center; gap:var(--space-sm) }
.poster-bar-since{
  font-size:.72rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--color-ink-2); white-space:nowrap;
}
@media(max-width:640px){ .poster-bar-since{ display:none } }
@media(max-width:480px){
  .poster-bar-in{ padding:12px var(--space-sm) }
  .poster-bar .wordmark{ font-size:1.25rem }
  .poster-bar .btn-connect{ font-size:.92rem; padding:4px 12px; border-width:2px }
}

.poster-pied{
  border-top:3px solid var(--color-ink); background:var(--color-paper);
  padding:var(--space-lg) 0 var(--space-xl); margin-top:var(--space-xl);
}
.poster-pied-in{
  max-width:var(--wide); margin:0 auto; padding:0 var(--space-md);
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));
  gap:var(--space-md); font-size:.85rem;
}
.poster-pied .fm{ font-family:var(--font-display); font-weight:800; font-size:1.2rem; text-transform:uppercase; color:var(--color-ink) }
.poster-pied .fm em{ font-style:normal; background:linear-gradient(90deg, transparent .22em, var(--color-accent) .22em); padding:0 .15em 0 0 }
.poster-pied a{ color:var(--color-ink-2); text-decoration:none; display:block; padding:2px 0; font-weight:400 }
.poster-pied a:hover, .poster-pied a:focus{ color:var(--color-ink); text-decoration:none }
.poster-pied .legal{ color:var(--color-ink-2); font-size:.76rem; margin:0 }