/* =====================================================================
   Braillard — Widget « Cover » : image de fond + overlay + titre/texte/CTA.
   Insérable dans une colonne (occupe 100 % du conteneur ; hauteur réglable).
   ===================================================================== */
.br-cover{
  position: relative;
  display: flex;
  align-items: flex-end;            /* contenu ancré en bas-gauche (cf. maquette TW) */
  min-height: var(--cover-minh, 480px);
  padding: clamp(32px, 4vw, 72px) clamp(20px, 4vw, 56px);
  color: var(--cover-fg, #fff);
  overflow: hidden;
  /* image de fond CSS (remplit toujours la boîte, quelle que soit la hauteur ;
     évite le reset global img{height:auto}). background-image posé en inline. */
  background-color: #1a1a1a;         /* fallback avant chargement image */
  background-size: cover;
  background-position: var(--cover-pos, center center);
  background-repeat: no-repeat;
  isolation: isolate;
  box-sizing: border-box;
}
/* Pleine largeur : déborde de la colonne pour s'étendre d'un bord à l'autre
   (par-dessus le sous-menu + le contenu), comme le bandeau. */
.br-cover--full{
  width: 100vw; max-width: 100vw;
  margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
  /* Passe AU-DESSUS du sous-menu sticky : celui-ci glisse naturellement derrière
     la Cover quand il la croise (occlusion, plutôt qu'un fondu). La colonne du
     sous-menu est à z-index:5 (template) → on passe au-dessus ; reste sous le
     header (z-index 1000). */
  position: relative;
  z-index: 10;
}
/* Contenu aligné sur la grille du site : le texte démarre à la COLONNE 2
   (marge 56 + 1 colonne + gouttière), comme sur la maquette (Figma pl=193/1728).
   56 + (largeur de contenu)/12 ≈ bord gauche de la colonne 2, à toute largeur. */
.br-cover--full{ padding-left: calc(56px + (100vw - 112px) / 12); }
/* Hauteur proportionnelle à la maquette (Figma « Cover » 1728 × 1103). La hauteur
   suit la largeur ; min-height reste un plancher, max-height évite le hors-écran. */
.br-cover--ratio{
  aspect-ratio: 1728 / 1103;
  max-height: 86vh;
}
.br-cover__overlay{
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(
    180deg,
    rgba(0,0,0, var(--cover-top, .15)) 0%,
    rgba(0,0,0, calc((var(--cover-top, .15) + var(--cover-bot, .55)) / 2)) 45%,
    rgba(0,0,0, var(--cover-bot, .55)) 100%
  );
}

.br-cover__inner{ position: relative; max-width: 640px; }

.br-cover__title{
  font-family: var(--br-font-body);
  font-weight: 400; font-style: normal;
  font-size: clamp(30px, 3vw, 54px); line-height: 1.1; letter-spacing: normal;
  margin: 0;
}
.br-cover__title em{ font-family: var(--br-font-display); font-style: italic; font-weight: 300; } /* Fraunces italic (ex. « 2026 ») */
.br-cover__title p{ margin: 0; }

.br-cover__text{
  font-family: var(--br-font-body);
  font-size: clamp(14px, 1.05vw, 17px); line-height: 1.55;
  max-width: 520px; margin: clamp(16px, 1.6vw, 22px) 0 0; opacity: .92;
}
.br-cover__text p{ margin: 0; }

.br-cover__link{
  display: inline-flex; align-items: center; gap: 14px;
  margin-top: clamp(20px, 2.2vw, 30px);
  color: var(--cover-fg, #fff); text-decoration: none;
  font-family: var(--br-font-body); font-size: 15px;
}
.br-cover__arrow{ color: var(--cover-fg, #fff); display: inline-flex; transition: transform .3s ease; }
.br-cover__arrow svg{ width: clamp(70px, 8vw, 105px); height: auto; display: block; }
.br-cover__link:hover .br-cover__arrow{ transform: translateX(6px); }

@media (max-width: 600px){
  .br-cover{ min-height: clamp(300px, 70vw, 460px); }
  .br-cover--full{ padding-left: 20px; padding-right: 20px; }  /* marge mobile */
  .br-cover__title{ font-size: clamp(26px, 8vw, 40px); }
}