/* ==========================================================================
   HBCB — Hero de la page d'accueil
   handballbrignoles.fr · Céweb83
   --------------------------------------------------------------------------
   VERSION 1.1 — 19/10/2026
   Remplace le module Slider Revolution. Rendu par [hbcb_hero] dans un widget
   HTML en haut de la page d'accueil.
   1.1 : libellé du bouton forcé en blanc (le thème le peignait en cyan sur
   fond cyan), voile allégé pour que la photo reste visible.
   1.2 : colonne de texte libérée (un max-width en ch calculé sur 16 px la
   bridait à 460 px et décentrait tout), filigrane sur toute la largeur,
   voile nettement allégé, hauteur revue pour que la section suivante ne
   dépasse plus sous le hero.
   1.3 : alignement à gauche forcé dans la colonne (le thème centrait les
   paragraphes par margin: auto), filigrane remonté et non rogné, photo
   éclaircie à l'affichage, bouton à angles vifs.
   1.4 : le filigrane passe dans le flux, centré et calé en bas. La carte ne
   peut plus le recouvrir, et le bloc titre se centre dans la hauteur libre
   qui reste au-dessus.
   1.5 : passe mobile. Photo éclaircie et recadrée, voile allégé de moitié,
   lisibilité du texte assurée par une ombre portée plutôt que par un voile
   opaque, filigrane agrandi et plus présent.
   1.6 : deux défauts mesurés sur mobile. La photo ne couvrait pas la section
   (hauteur remise à auto par une autre feuille), et le hero était en svh,
   donc figé quand Safari rétracte ses barres.
   --------------------------------------------------------------------------
   À déposer dans /wp-content/hbcb/hbcb-hero.css
   ========================================================================== */

:root {
  --hb-marine-900: #040C35;
  --hb-or:         #F7D101;
  --hb-cyan:       #009FE3;
  --hb-blanc:      #FFFFFF;

  --hb-h-entete:   76px;   /* identique à hbcb-header.css */
  --hb-h-entete-s: 62px;

  --hb-t:      .28s;
  --hb-courbe: cubic-bezier(.22, .61, .36, 1);
  --hb-sortie: cubic-bezier(.4, 0, .2, 1);
}


/* ==========================================================================
   01 · CADRE
   ========================================================================== */

/* svh et non vh : sur mobile, vh se calcule sur la fenêtre barres masquées,
   donc le bas du hero passe sous la barre d'adresse au premier affichage.
   La ligne vh sert de repli pour les navigateurs qui ignorent svh. */
/* Hauteur : dvh et non svh.
   svh vaut la hauteur de l'écran barres de navigateur AFFICHÉES. Sur iOS,
   dès qu'on défile un peu, Safari rétracte ses barres : la fenêtre grandit,
   le hero reste figé à sa valeur de départ, et la section suivante apparaît
   par en dessous. dvh suit la fenêtre réelle, donc le hero remplit toujours
   l'écran. Mesuré le 19/10/2026 sur un viewport de 375 × 812.
   La ligne vh sert de repli aux navigateurs qui ignorent dvh.
   La marge basse vaut la hauteur de l'en-tête : à l'arrivée, l'en-tête et la
   partie visible du hero remplissent exactement l'écran. */
.hb-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  overflow: hidden;
  min-height: 100vh;
  min-height: 100dvh;
  padding-bottom: var(--hb-h-entete);
  background: var(--hb-marine-900);
  isolation: isolate;
}

/* width et height en !important : une règle d'image chargée après la nôtre
   remet height: auto, et l'image s'affiche alors à son ratio naturel au lieu
   de couvrir la section. Vérifié en direct le 19/10/2026 : sur un écran de
   375 px, la photo mesurait 255 px de haut dans un hero de 812. Sur grand
   écran le défaut passait inaperçu, le ratio naturel donnant déjà une image
   plus haute que la section. */
.hb-hero__photo {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  object-position: center 32%;   /* garde les visages dans le cadre */
  /* La photo est prise en gymnase, sous un éclairage artificiel : elle est
     sombre à la source. On l'éclaircit à l'affichage plutôt que d'alléger
     encore le voile, qui sert à la lisibilité du texte. */
  filter: brightness(1.16) saturate(1.06);
}

/* Voile dégradé plutôt qu'un noir uniforme : la photo reste lisible à droite,
   et le texte garde son contraste à gauche. Le dégradé est volontairement
   dense côté texte, parce que le contraste d'un texte posé sur une photo ne
   se calcule pas : il dépend du pixel qui passe dessous. Si un jour la photo
   change pour une image claire, c'est cette opacité qu'il faut remonter. */
.hb-hero__voile {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(96deg, rgba(4, 12, 53, .80) 0%, rgba(4, 12, 53, .52) 22%,
                           rgba(4, 12, 53, .10) 46%, rgba(4, 12, 53, 0) 64%),
    linear-gradient(to top, rgba(4, 12, 53, .30) 0%, transparent 28%);
}

/* flex: 1 : le bloc titre + carte occupe toute la hauteur libre au-dessus du
   filigrane, et son contenu s'y centre. Plus besoin de décaler quoi que ce
   soit à la main quand la taille du mot change. */
.hb-hero__contenu {
  order: 1;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: clamp(24px, 4vw, 64px);
  width: min(1480px, 100% - 48px);
  margin-inline: auto;
  padding: clamp(32px, 5vh, 64px) 0 clamp(16px, 2vh, 32px);
}


/* ==========================================================================
   02 · FILIGRANE BALAYÉ
   Le mot géant en bas de section. L'effet : le texte est masqué par un
   clip-path qui s'ouvre de gauche à droite, et un trait d'or voyage sur le
   bord de la zone révélée, comme s'il la découvrait.
   On anime clip-path et transform, jamais une largeur ni une position :
   les deux restent sur le compositeur, donc pas de recalcul de mise en page.
   ========================================================================== */
.hb-hero__filigrane {
  order: 2;                 /* dans le flux, et en dernier */
  position: relative;
  flex: 0 0 auto;
  z-index: -1;
  overflow: hidden;
  text-align: center;
  pointer-events: none;
  user-select: none;
}
/* Pas de plafond sur la taille : le mot doit occuper toute la largeur de
   l'écran, quelle qu'elle soit. 23vw est calibré sur les huit lettres de
   « Handball » dans une graisse lourde ; le mot déborde très légèrement et le
   conteneur le rogne, ce qui se lit comme un parti pris et non comme un
   accident. Changer le mot demande de réajuster cette valeur. */
.hb-hero__filigrane span {
  display: block;
  /* La marge négative annule l'espace que la police réserve sous la ligne de
     base pour les jambages. « Handball » n'en a aucun : sans ça, le mot
     flotterait à 90 px du bas sans raison visible. */
  margin-bottom: -.2em;
  font-size: 21vw;
  font-weight: 900;
  line-height: 1;            /* 1 et pas moins : en dessous, le conteneur
                                rogne les hampes et le mot paraît coupé */
  letter-spacing: -.04em;
  color: rgba(255, 255, 255, .13);
  white-space: nowrap;
  clip-path: inset(0 100% 0 0);
  animation: hb-balayage 1.45s var(--hb-sortie) .25s forwards;
}
@keyframes hb-balayage {
  to { clip-path: inset(0 0 0 0); }
}

/* Le trait d'or. Il traverse la largeur de la fenêtre dans le même temps que
   le balayage, avec la même courbe, pour rester sur le bord de la révélation. */
.hb-hero__filigrane::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 4px;
  background: var(--hb-or);
  box-shadow: 0 0 28px 8px rgba(247, 209, 1, .4);
  opacity: 0;
  animation: hb-trait 1.45s var(--hb-sortie) .25s;
}
@keyframes hb-trait {
  0%   { transform: translateX(0);     opacity: 0; }
  10%  {                               opacity: .95; }
  88%  {                               opacity: .95; }
  100% { transform: translateX(100vw); opacity: 0; }
}


/* ==========================================================================
   03 · TEXTE
   ========================================================================== */
/* Pas de max-width ici : l'unité ch se calcule sur la police de CET élément,
   16 px, et non sur celle du titre. Un plafond de 58ch valait donc 460 px, la
   colonne restait tassée à gauche et la carte s'arrêtait au milieu. La largeur
   de ligne confortable se règle sur le paragraphe, là où elle a un sens. */
.hb-hero__texte {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--hb-blanc);
}

/* Le thème pose margin: auto sur les paragraphes. Tout bloc plus étroit que
   sa colonne se retrouve donc centré : l'accroche commençait 132 px plus à
   droite que le titre, soit la moitié exacte de l'espace restant. On remet
   l'alignement à gauche pour toute la colonne, d'un coup. */
.hb-hero__texte > * {
  margin-left: 0 !important;
  margin-right: 0 !important;
  text-align: left;
}

/* Entrée commune : montée courte et fondu. Le décalage entre les quatre
   éléments crée une lecture dans l'ordre, titre puis accroche puis bouton. */
.hb-hero__titre,
.hb-hero__surtitre,
.hb-hero__accroche,
.hb-hero__cta,
.hb-hero__actus {
  animation: hb-monte .72s var(--hb-courbe) backwards;
}
.hb-hero__titre    { animation-delay: .20s; }
.hb-hero__surtitre { animation-delay: .34s; }
.hb-hero__accroche { animation-delay: .46s; }
.hb-hero__cta      { animation-delay: .58s; }
.hb-hero__actus    { animation-delay: .70s; }

@keyframes hb-monte {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

.hb-hero__titre {
  margin: 0 0 10px;
  font-size: clamp(38px, 5.4vw, 76px);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -.02em;
  text-wrap: balance;        /* évite le mot orphelin sur la dernière ligne */
}
.hb-hero__surtitre {
  margin: 0 0 22px;
  font-size: clamp(17px, 1.6vw, 23px);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--hb-cyan);
}
.hb-hero__accroche {
  margin: 0 0 34px;
  max-width: 52ch;
  font-size: clamp(16px, 1.25vw, 19px);
  line-height: 1.6;
  color: rgba(255, 255, 255, .92);
}

/* La couleur est forcée pour la même raison que les icônes de l'en-tête : le
   thème colore les liens avec un sélecteur plus fort que le nôtre, et le
   libellé se retrouvait en cyan sur un bouton cyan, donc invisible. */
.hb-hero .hb-hero__cta { color: var(--hb-blanc) !important; }

.hb-hero__cta {
  display: inline-flex;
  align-items: center;
  min-height: 54px;
  padding: 0 34px;
  border-radius: 0;
  background: var(--hb-cyan);
  color: var(--hb-blanc);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background var(--hb-t) var(--hb-courbe),
              transform var(--hb-t) var(--hb-courbe),
              box-shadow var(--hb-t) var(--hb-courbe);
}
@media (hover: hover) {
  .hb-hero__cta:hover {
    background: #0B8ECB;
    transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(0, 159, 227, .35);
  }
}
.hb-hero__cta:active { transform: translateY(0); }


/* ==========================================================================
   04 · CARTE ACTUALITÉS
   ========================================================================== */
.hb-hero__actus {
  flex: 0 0 clamp(320px, 27vw, 420px);
  color: var(--hb-blanc);
}
.hb-hero__actus-titre {
  margin: 0 0 14px;
  font-size: clamp(22px, 2vw, 30px);
  font-weight: 800;
  color: var(--hb-or);
}

.hb-hero__carte {
  display: block;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 14px;
  background: rgba(4, 12, 53, .55);
  backdrop-filter: blur(6px);
  color: var(--hb-blanc);
  text-decoration: none;
  transition: transform var(--hb-t) var(--hb-courbe),
              border-color var(--hb-t) var(--hb-courbe),
              background var(--hb-t) var(--hb-courbe);
}
@media (hover: hover) {
  .hb-hero__carte:hover {
    transform: translateY(-4px);
    border-color: rgba(247, 209, 1, .55);
    background: rgba(4, 12, 53, .72);
  }
  .hb-hero__carte:hover .hb-hero__actu-img { transform: scale(1.05); }
  .hb-hero__carte:hover .hb-hero__actu-lire { color: var(--hb-or); }
}

/* Le ratio est posé en CSS, donc la place de l'image est réservée avant son
   arrivée : la carte ne saute pas quand la photo se charge. */
.hb-hero__actu-visuel {
  display: block;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  margin-bottom: 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .06);
}
.hb-hero__actu-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s var(--hb-courbe);
}

.hb-hero__actu-meta {
  display: block;
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--hb-cyan);
}
.hb-hero__actu-cat { color: var(--hb-cyan); }
.hb-hero__actu-sep { margin: 0 6px; opacity: .6; }
.hb-hero__actu-date { color: rgba(255, 255, 255, .72); }

.hb-hero__actu-titre {
  display: block;
  margin-bottom: 10px;
  font-size: clamp(17px, 1.4vw, 20px);
  font-weight: 700;
  line-height: 1.3;
  text-wrap: balance;
}
.hb-hero__actu-lire {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: rgba(255, 255, 255, .8);
  transition: color var(--hb-t) var(--hb-courbe);
}
.hb-hero__actu-lire::after { content: " \2192"; }


/* ==========================================================================
   05 · INVITATION À DÉFILER
   ========================================================================== */
.hb-hero__defile {
  position: absolute;
  left: max(24px, calc((100% - 1480px) / 2));
  bottom: calc(var(--hb-h-entete) + 24px);   /* au-dessus de la marge basse */
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .85);
  opacity: 0;
  animation: hb-monte .72s var(--hb-courbe) 1s forwards;
  transition: opacity var(--hb-t) var(--hb-courbe);
}
.hb-hero__defile svg { width: 16px; height: 16px; }

/* Pas d'animation en boucle sur ce repère : une flèche qui rebondit sans fin
   attire l'œil en permanence alors qu'elle n'a d'utilité qu'à l'arrivée.
   Elle s'efface dès que la page bouge, c'est le JavaScript qui pose l'état. */
.hb-hero[data-defile] .hb-hero__defile {
  opacity: 0 !important;
  pointer-events: none;
}


/* ==========================================================================
   06 · PETIT ÉCRAN
   ========================================================================== */
@media (max-width: 1023px) {

  :root { --hb-h-entete: var(--hb-h-entete-s); }

  .hb-hero__contenu { width: min(1480px, 100% - 32px); }

  /* La carte disparaît sous 1024 px : en colonne elle repousse le bouton
     hors de l'écran, et le visiteur mobile trouve les actualités par le menu. */
  .hb-hero__actus { display: none; }

  /* Le média d'origine est déjà assombri dans Photoshop. Sur un écran étroit,
     le recadrage tombe en plus dans la zone sombre du cliché : on éclaircit
     davantage et on décale le cadrage vers les banderoles, qui sont la partie
     lumineuse de la scène. */
  .hb-hero__photo {
    filter: brightness(1.34) saturate(1.1);
    object-position: 46% 36%;
  }

  /* Voile nettement plus léger qu'avant. Il reste dense en haut, là où se
     pose le titre, s'ouvre au milieu pour laisser voir le jeu, et se referme
     en bas pour que le filigrane se détache. */
  .hb-hero__voile {
    background:
      linear-gradient(180deg, rgba(4, 12, 53, .52) 0%, rgba(4, 12, 53, .44) 42%,
                              rgba(4, 12, 53, .22) 68%, rgba(4, 12, 53, .62) 100%);
  }

  /* L'ombre portée fait le travail que faisait le voile : elle garantit la
     lisibilité du texte sans assombrir toute la photo. */
  .hb-hero__texte { text-shadow: 0 2px 16px rgba(4, 12, 53, .85); }

  .hb-hero__filigrane span {
    font-size: 27vw;
    color: rgba(255, 255, 255, .19);
  }
}

@media (max-width: 480px) {
  .hb-hero__contenu { width: min(1480px, 100% - 24px); }
  .hb-hero__cta { width: 100%; justify-content: center; }
  .hb-hero__defile { left: 24px; }
}


/* ==========================================================================
   07 · ACCESSIBILITÉ
   ========================================================================== */
.hb-hero a:focus-visible {
  outline: 3px solid var(--hb-or);
  outline-offset: 3px;
  border-radius: 10px;
}

/* Mouvement réduit : tout est déjà en place à l'arrivée, rien ne bouge.
   Le filigrane est révélé d'emblée, le trait d'or ne passe pas. */
@media (prefers-reduced-motion: reduce) {
  .hb-hero *,
  .hb-hero *::before,
  .hb-hero *::after {
    animation: none !important;
    transition-duration: .01ms !important;
  }
  .hb-hero__filigrane span { clip-path: none; }
  .hb-hero__defile { opacity: 1; }
  .hb-hero__titre,
  .hb-hero__surtitre,
  .hb-hero__accroche,
  .hb-hero__cta,
  .hb-hero__actus { opacity: 1; transform: none; }
}