/**
 * HBC Grandvillars — Page d'accueil, direction « Ligne / Banc / Chrono »
 *
 * Tout est préfixé .hb- et portée sous .hb-home pour ne rien casser
 * du reste du site. Les anciennes sections restent intactes dans
 * template-parts/sections/ : revenir en arrière = éditer
 * page-templates/template-home.php.
 *
 * Un seul point de rupture structurant : 900 px. Le reste est fluide.
 */

.hb-home {
    --hb-bleu:        #1b34d8;
    --hb-bleu-fonce:  #142aae;
    --hb-noir:        #0b0b0f;
    --hb-blanc:       #ffffff;
    --hb-gris:        #5f6371;  /* plancher AA pour la signalétique 11 px */
    --hb-gris-clair:  #e3e4ea;
    --hb-gris-nuit:   #8a8e9c;
    --hb-filet-nuit:  #24252f;

    --hb-pad:  clamp(1.25rem, 4vw, 4.5rem);
    --hb-mono: 'Aeonik Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

    background: var(--hb-blanc);
    color: var(--hb-noir);
}

.hb-home ::selection { background: var(--hb-bleu); color: #fff; }

/* ==========================================================
   EN-TÊTE — sur l'accueil il devient statique et blanc.
   Le header du thème est fixed/transparent à liens blancs :
   illisible sur un héros clair.
   ========================================================== */
.hb-home .site-header,
.hb-home .site-header--scrolled {
    position: static;
    height: auto;
    background: var(--hb-blanc);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
    border-bottom: 1px solid var(--hb-gris-clair);
}

.hb-home .site-header__inner {
    max-width: none;
    padding: 1.1rem var(--hb-pad);
    height: auto;
}

.hb-home .site-nav__link,
.hb-home .site-header__cta {
    color: var(--hb-noir);
    font-family: var(--font-heading);
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.13em;
}

/* En-tête blanc : le survol vire au bleu de la marque. Le roulé et le
   filet sont dans _navigation.css, ils héritent de cette couleur. */
.hb-home .site-nav__link:hover,
.hb-home .site-nav__link:focus-visible,
.hb-home .site-nav__item--current > .site-nav__link {
    color: var(--hb-bleu);
}

.hb-home .site-header__cta {
    background: var(--hb-bleu);
    color: #fff;
    border-radius: 12px;
    padding: 0.65rem 1.15rem;
}

.hb-home .site-header__cta:hover { background: var(--hb-bleu-fonce); color: #fff; }
.hb-home .site-header__burger-bar { background: var(--hb-noir); }

/* ==========================================================
   SIGNALÉTIQUE COMMUNE
   ========================================================== */
.hb-meta {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    line-height: 1.4;
}

.hb-mono {
    font-family: var(--hb-mono);
    font-weight: 400;
    letter-spacing: 0.11em;
}

.hb-home .hb-section-cap { margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }

.hb-home h1, .hb-home h2, .hb-home h3, .hb-home h4 {
    margin: 0;
    color: inherit;
    text-wrap: balance;
    font-family: var(--font-heading);
}

.hb-home ul { margin: 0; padding: 0; list-style: none; }
.hb-home a { text-decoration: none; }
.hb-home :focus-visible { outline: 2px solid var(--hb-bleu); outline-offset: 3px; }

/* ==========================================================
   1 · HÉROS — photo dominante à droite, colonne de texte
   réduite à gauche, la ligne des six mètres comme frontière
   ========================================================== */
/* 1fr / 3fr : la photo prend exactement les trois quarts. Le quart restant
   n'est plus une colonne de texte, c'est une gouttière de signalétique —
   tout ce qui est en dessous en tient compte. */
.hb-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
    min-height: min(80svh, 48rem);
    background: var(--hb-blanc);
}

/* Un seul bloc calé en bas, et non un rail en haut + un pied en bas :
   il n'y a plus que ~150 px de texte pour 80svh de colonne, le
   space-between d'origine ouvrait un vide de 450 px au milieu. Posé sur la
   base, l'ensemble se lit comme la légende de la photo.

   Marge droite resserrée : dans un quart de largeur, le clamp à 3rem
   d'origine mangeait un sixième de la colonne. */
.hb-hero__type {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: clamp(1.5rem, 2.5vw, 2.25rem);
    padding: clamp(2.5rem, 5vw, 4.5rem) clamp(1rem, 1.5vw, 1.75rem)
             clamp(2.5rem, 5vw, 4rem) var(--hb-pad);
}

/* Empilé à toutes les largeurs : « Handball Club Grandvillars » fait à lui
   seul plus que la gouttière en 11 px tracké, il ne peut pas tenir à côté
   de la saison. */
.hb-hero__rail {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    color: var(--hb-noir);
}

.hb-hero__rail span:last-child { color: var(--hb-gris); }

/* La baseline reste le seul texte courant de la colonne. Elle ne peut pas
   jouer le chapeau à 25 % de largeur, mais elle remonte assez pour ne pas
   passer sous la signalétique qui l'encadre. */
.hb-hero__foot { max-width: 32rem; }
.hb-hero__foot p {
    margin: 0;
    color: #42454f;
    font-size: clamp(1rem, 1.15vw, 1.1875rem);
    line-height: 1.5;
    text-wrap: pretty;
}

/* Portée sous .hb-home : le reset de liste de la page est en .hb-home ul,
   soit une spécificité de plus qu'une classe seule — sans ça le margin-top
   passe à la trappe. */
.hb-home .hb-hero__stats {
    display: grid;
    gap: 0.3rem;
    margin-top: clamp(1rem, 1.5vw, 1.4rem);
    color: var(--hb-gris);
}

/* Le tirage sombre est porté par le conteneur, pas par la photo : une
   image absente OU cassée (URL périmée, fichier supprimé) dégrade alors
   sur ce fond au lieu de virer au noir plat. */
.hb-hero__media {
    position: relative;
    overflow: hidden;
    background-color: #0e0e14;
    background-image:
        radial-gradient(58% 44% at 72% 30%, rgba(255,255,255,0.20), transparent 70%),
        radial-gradient(40% 34% at 32% 78%, rgba(27,52,216,0.34), transparent 72%),
        linear-gradient(196deg, #1b1d27 0%, #0e0e14 58%, #08080c 100%);
}

.hb-hero__photo {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center right;
}

/* Le calque blanc peint tout ce qui est à GAUCHE de la courbe.
   La photo n'apparaît donc qu'à l'intérieur de la zone des six mètres. */
.hb-hero__cut {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}

.hb-hero__credit {
    position: absolute;
    right: clamp(0.75rem, 1.5vw, 1.25rem);
    bottom: clamp(0.75rem, 1.5vw, 1.25rem);
    color: rgba(255,255,255,0.55);
    font-family: var(--hb-mono);
    font-size: 0.625rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
}

/* Bascule à 1100 px et non 900 : à un quart de largeur, la gouttière tombe
   sous ~160 px de texte utile dès 1000 px de fenêtre. On empile avant que
   la phrase ne se casse en colonne d'un mot. */
@media (max-width: 1100px) {
    .hb-hero { grid-template-columns: 1fr; min-height: 0; }
    .hb-hero__type {
        order: 2;
        gap: 2rem;
        padding: clamp(2rem, 6vw, 3rem) var(--hb-pad) clamp(2.5rem, 7vw, 3.5rem);
    }
    .hb-hero__media { order: 1; height: min(52svh, 24rem); }
    .hb-hero__cut { display: none; } /* en colonne, la courbe ne dit plus rien */
}

/* ==========================================================
   2 · LES DEUX SENIORS — deux panneaux strictement identiques
   ========================================================== */
.hb-seniors {
    background: var(--hb-bleu);
    color: #fff;
    padding: clamp(3rem, 6vw, 5.5rem) var(--hb-pad);
}

.hb-seniors .hb-section-cap { color: rgba(255,255,255,0.7); }

.hb-seniors__pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(0.75rem, 1.6vw, 1.5rem);
}

@media (max-width: 900px) { .hb-seniors__pair { grid-template-columns: 1fr; } }

.hb-team {
    display: flex;
    flex-direction: column;
    background: var(--hb-blanc);
    color: var(--hb-noir);
    padding: clamp(1.5rem, 2.4vw, 2.25rem);
    border-radius: 10px;
}

.hb-team__div { color: var(--hb-bleu); }

.hb-team__name {
    font-size: clamp(1.75rem, 3.6vw, 3rem);
    font-weight: 900;
    letter-spacing: -0.04em;
    line-height: 0.92;
    margin: 0.6rem 0 1.25rem;
}

.hb-team__line {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1.25rem;
    padding: 0.7rem 0;
    border-top: 1px solid var(--hb-gris-clair);
    font-size: 0.9375rem;
    color: #42454f;
}

.hb-team__line b { font-weight: 700; color: var(--hb-noir); text-align: right; }
.hb-team__line .hb-win { color: var(--hb-bleu); font-weight: 900; }
.hb-team__line sup { font-size: 0.62em; vertical-align: super; line-height: 0; }

.hb-team__cta {
    align-self: flex-start;
    margin-top: 1.5rem;
    padding-bottom: 2px;
    border-bottom: 2px solid var(--hb-bleu);
    color: var(--hb-noir);
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.13em;
}

/* ==========================================================
   3 · LES MATCHS — un module, deux temps
   ========================================================== */
.hb-matchs {
    background: var(--hb-noir);
    color: #fff;
    padding: clamp(3rem, 6vw, 5.5rem) 0;
    font-variant-numeric: tabular-nums;
}

.hb-matchs__head { padding: 0 var(--hb-pad); }
.hb-matchs .hb-section-cap { color: var(--hb-gris-nuit); margin-bottom: 0.75rem; }

.hb-matchs__title {
    font-size: clamp(1.875rem, 4.4vw, 3.5rem);
    font-weight: 900;
    letter-spacing: -0.04em;
    line-height: 0.94;
}

.hb-matchs__sub {
    margin: 0.75rem 0 0;
    max-width: 52ch;
    color: var(--hb-gris-nuit);
    font-size: 0.9375rem;
}

/* la bascule */
.hb-switch {
    display: flex;
    width: max-content;
    max-width: 100%;
    margin-top: clamp(1.5rem, 3vw, 2.25rem);
    border: 1px solid var(--hb-filet-nuit);
    border-radius: 999px;
}

.hb-switch button {
    appearance: none;
    background: transparent;
    border: 0;
    cursor: pointer;
    padding: 0.7rem 1.35rem;
    color: var(--hb-gris-nuit);
    font-family: var(--hb-mono);
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    white-space: nowrap;
    transition: background 140ms linear, color 140ms linear;
}

/* Chaque bouton reprend l'arrondi du côté qu'il occupe, pour que son fond
   plein épouse la gélule au lieu de déborder en angle droit. On arrondit les
   boutons plutôt que de masquer le débord (overflow) : le contour de focus
   clavier, qui déborde lui aussi, doit rester visible. */
.hb-switch button:first-child { border-radius: 999px 0 0 999px; }
.hb-switch button:last-child  { border-radius: 0 999px 999px 0; }
.hb-switch button:only-child  { border-radius: 999px; }

.hb-switch button + button { border-left: 1px solid var(--hb-filet-nuit); }
.hb-switch button:hover { color: #fff; background: #141522; }
.hb-switch button[aria-selected="true"] { background: var(--hb-bleu); color: #fff; }
.hb-switch button[aria-selected="true"]:hover { background: var(--hb-bleu-fonce); }

/* la grammaire de ligne, partagée par les deux tableaux */
.hb-mtable { margin-top: clamp(1.75rem, 3.5vw, 2.75rem); }
.hb-mtable[hidden] { display: none; }

.hb-mtable__cap {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1.5rem;
    padding: 0 var(--hb-pad) 0.9rem;
    color: var(--hb-gris-nuit);
}

.hb-mhead,
.hb-mrow {
    display: grid;
    grid-template-columns:
        minmax(6.5rem, 10vw)   /* quand      */
        minmax(7.5rem, 12vw)   /* catégorie  */
        minmax(0, 1fr)         /* adversaire */
        minmax(6rem, 9vw)      /* score      */
        minmax(6rem, 8vw);     /* lieu/issue */
    gap: clamp(0.75rem, 1.6vw, 1.75rem);
    align-items: center;
    padding-inline: var(--hb-pad);
}

.hb-mhead {
    padding-bottom: 0.85rem;
    color: #5c6070;
    font-family: var(--hb-mono);
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
}

.hb-mhead span:nth-child(4),
.hb-mhead span:nth-child(5) { text-align: right; }

.hb-mrow {
    padding-block: clamp(0.85rem, 1.5vw, 1.15rem);
    padding-left: calc(var(--hb-pad) - 3px);
    border-top: 1px solid var(--hb-filet-nuit);
    border-left: 3px solid transparent;
    transition: background 140ms linear;
}

.hb-mtable .hb-mrow:last-of-type { border-bottom: 1px solid var(--hb-filet-nuit); }
.hb-mrow:hover { background: #141522; }

.hb-mrow__when {
    font-family: var(--hb-mono);
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--hb-gris-nuit);
}

.hb-mrow__cat { font-size: 1rem; font-weight: 800; letter-spacing: -0.02em; }
.hb-mrow__opp { font-size: 1.0625rem; color: #d4d6de; }
.hb-mrow__opp i { font-style: normal; color: var(--hb-gris-nuit); }

.hb-mrow__score {
    text-align: right;
    font-size: 1.375rem;
    font-weight: 900;
    letter-spacing: -0.03em;
}

.hb-mrow__score.hb-soon {
    font-family: var(--hb-mono);
    font-size: 0.6875rem;
    font-weight: 400;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #5c6070;
}

.hb-mrow__where,
.hb-mrow__out {
    text-align: right;
    font-family: var(--hb-mono);
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

.hb-is-dom { color: #fff; }
.hb-is-ext { color: var(--hb-gris-nuit); }

/* le prochain match du club */
.hb-mrow.hb-is-next { background: var(--hb-bleu); border-left-color: var(--hb-bleu); }
.hb-mrow.hb-is-next:hover { background: var(--hb-bleu-fonce); }
.hb-mrow.hb-is-next .hb-mrow__when,
.hb-mrow.hb-is-next .hb-mrow__opp,
.hb-mrow.hb-is-next .hb-mrow__opp i { color: rgba(255,255,255,0.8); }
.hb-mrow.hb-is-next .hb-mrow__score,
.hb-mrow.hb-is-next .hb-mrow__where { color: #fff; }

/* issues — jamais encodées par la couleur seule */
.hb-mrow.hb-is-win { border-left-color: var(--hb-bleu); }
.hb-mrow.hb-is-loss .hb-mrow__score,
.hb-mrow.hb-is-draw .hb-mrow__score { color: var(--hb-gris-nuit); }
.hb-is-win  .hb-mrow__out { color: #fff; }
.hb-is-loss .hb-mrow__out,
.hb-is-draw .hb-mrow__out { color: var(--hb-gris-nuit); }

.hb-mtable__foot {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1.5rem;
    padding: 1rem var(--hb-pad) 0;
    color: #5c6070;
    font-family: var(--hb-mono);
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

.hb-mtable__foot a {
    padding-bottom: 2px;
    border-bottom: 1px solid #3a3d4c;
    color: #fff;
}

.hb-mempty {
    padding: 2.5rem var(--hb-pad);
    border-top: 1px solid var(--hb-filet-nuit);
    border-bottom: 1px solid var(--hb-filet-nuit);
    color: var(--hb-gris-nuit);
    font-family: var(--hb-mono);
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

@media (max-width: 900px) {
    .hb-mhead { display: none; }
    .hb-mrow {
        grid-template-columns: 1fr auto;
        grid-template-areas:
            'cat  score'
            'opp  score'
            'when where';
        gap: 0.3rem 1rem;
    }
    .hb-mrow__cat   { grid-area: cat; }
    .hb-mrow__opp   { grid-area: opp; font-size: 0.9375rem; }
    .hb-mrow__when  { grid-area: when; margin-top: 0.35rem; }
    .hb-mrow__score { grid-area: score; align-self: center; }
    .hb-mrow__where,
    .hb-mrow__out   { grid-area: where; margin-top: 0.35rem; }
}

/* ==========================================================
   4 · LA FORMATION
   ========================================================== */
.hb-formation {
    background: var(--hb-blanc);
    color: var(--hb-noir);
    padding: clamp(3rem, 6vw, 5.5rem) var(--hb-pad);
}

.hb-formation .hb-section-cap { color: var(--hb-gris); }

.hb-formation__title {
    font-size: clamp(1.875rem, 4.4vw, 3.5rem);
    font-weight: 900;
    letter-spacing: -0.04em;
    line-height: 0.94;
    max-width: 18ch;
}

.hb-formation__intro {
    margin: 1rem 0 0;
    max-width: 52ch;
    color: #42454f;
    font-size: 1rem;
}

.hb-formation__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin-top: clamp(1.75rem, 3.5vw, 2.75rem);
    border-top: 1px solid var(--hb-noir);
}

@media (max-width: 1100px) { .hb-formation__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .hb-formation__grid { grid-template-columns: 1fr; } }

.hb-formation__grid > div {
    padding: 1.1rem 1.5rem 1.4rem 0;
    border-bottom: 1px solid var(--hb-gris-clair);
}

.hb-fname { font-size: 1.25rem; font-weight: 800; letter-spacing: -0.025em; }
.hb-fborn { margin-top: 0.3rem; color: var(--hb-gris); }
.hb-fwhen { margin-top: 0.2rem; font-size: 0.9375rem; color: #42454f; }

/* ==========================================================
   5 · REJOINDRE
   ========================================================== */
.hb-join {
    background: var(--hb-bleu);
    color: #fff;
    padding: clamp(3rem, 6vw, 5.5rem) var(--hb-pad);
}

.hb-join .hb-section-cap { color: rgba(255,255,255,0.7); }

.hb-join__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 22rem);
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: start;
}

@media (max-width: 900px) { .hb-join__grid { grid-template-columns: 1fr; } }

.hb-join__title {
    font-size: clamp(1.875rem, 4.6vw, 3.75rem);
    font-weight: 800;
    letter-spacing: -0.045em;
    line-height: 0.9;
    max-width: 16ch;
}

.hb-join__body {
    margin: 1.25rem 0 0;
    max-width: 46ch;
    color: rgba(255,255,255,0.82);
    line-height: 1.55;
}

.hb-join__cta {
    display: inline-block;
    margin-top: 1.75rem;
    padding: 0.9rem 1.75rem;
    background: #fff;
    color: var(--hb-bleu);
    font-size: 0.8125rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    border-radius: 12px;
    transition: background 140ms linear, color 140ms linear;
}

.hb-join__cta:hover { background: var(--hb-noir); color: #fff; }

.hb-hours li {
    display: flex;
    justify-content: space-between;
    gap: 1.25rem;
    padding: 0.7rem 0;
    border-bottom: 1px solid rgba(255,255,255,0.3);
    font-size: 0.9375rem;
}

.hb-hours li:first-child { border-top: 1px solid rgba(255,255,255,0.3); }
.hb-hours b { font-weight: 700; }
.hb-hours span { color: rgba(255,255,255,0.72); }

@media (prefers-reduced-motion: reduce) {
    .hb-home * { transition-duration: 0.01ms !important; }
}