/* =====================================================================
   Braillard — Hero Intro — refonte 2026
   État initial (--idle) : 4 titres à gauche, image + texte d'accueil à
   droite. Au survol d'un titre (desktop) : il devient actif et glisse à
   droite, le bloc droite (photo + texte + lien, positionné par JS) suit.
   Clic sur titre / image / « En savoir plus » = page du pilier.
   Couleurs = thème actif.
   ===================================================================== */
.br-hero{
  --c: #B85D43;
  --shift: clamp(110px, 20.4vw, 353px);
  position: relative;
  /* padding-haut généreux : cale le 1er titre (origines) vers y≈448/1728 comme
     dans Figma. La photo (bloc droite, positionné par JS) suit le titre actif ;
     sans cette hauteur elle se retrouvait clampée à 0 = collée au header. */
  padding: clamp(120px, 15.2vw, 264px) clamp(20px, 3.24vw, 56px) clamp(64px, 7vw, 120px);
  min-height: 70vh;
}

/* ---- Gauche : thèmes ---- */
.br-hero__left{ width: 52%; padding-left: clamp(60px, 7.9vw, 137px); }
.br-hero__themes{ list-style: none; margin: 0; padding: 0; position: relative; z-index: 3; }
.br-hero__theme{ margin: 0 0 clamp(20px, 2.31vw, 40px); } /* Figma : 40px de gap entre piliers (box 72 + gap 40 = pitch 112) */
.br-hero__theme-btn{
  display: inline-block; /* lien <a> : requis pour que le transform s'applique */
  -webkit-appearance: none; appearance: none; background: none; border: 0; border-radius: 0; padding: 0; cursor: pointer;
  font-family: var(--br-font-display); font-style: italic; font-weight: 300;
  font-size: clamp(40px, 4.17vw, 72px); line-height: 1.0; letter-spacing: -.01em; /* Figma : 72px, lh 100% */
  color: var(--c); opacity: .7; text-decoration: none;
  transition: transform .5s cubic-bezier(.22,.61,.36,1), opacity .4s ease;
}
.br-hero__theme.is-active .br-hero__theme-btn,
.br-hero--idle .br-hero__theme-btn{ opacity: 1; } /* idle : aucun pilier actif, tous pleine couleur */
.br-hero__theme-btn:hover, .br-hero__theme-btn:focus, .br-hero__theme-btn:focus-visible, .br-hero__theme-btn:active{
  background: none !important; box-shadow: none !important; outline: none;
  color: var(--c) !important; opacity: 1;
  text-decoration: underline; text-underline-offset: .14em; text-decoration-thickness: 1px;
}

/* ---- Bloc droite : photo (haut) + texte + lien, suit le titre actif ---- */
.br-hero__right{
  position: absolute; left: 43%; top: 0; z-index: 2;
  width: min(800px, 46vw);
  transition: top .55s cubic-bezier(.22,.61,.36,1);
}
.br-hero__media{ position: relative; width: min(500px, 32vw); aspect-ratio: 380 / 278; }
.br-hero__slide{ position: absolute; inset: 0; margin: 0; opacity: 0; visibility: hidden; transition: opacity .5s ease, visibility .5s ease; }
.br-hero__slide.is-active{ opacity: 1; visibility: visible; }
.br-hero__slide img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.br-hero__slide-link{ display: block; width: 100%; height: 100%; }

/* Idle : image + texte d'accueil visibles tant qu'aucun pilier n'est activé */
.br-hero--idle .br-hero__slide--welcome,
.br-hero--idle .br-hero__text--welcome{ opacity: 1; visibility: visible; }

.br-hero__content{ position: relative; margin-top: clamp(18px, 2vw, 30px); padding-left: clamp(50px, 8vw, 138px); display: grid; }
.br-hero__text{ grid-area: 1 / 1; display: flex; flex-direction: column; opacity: 0; visibility: hidden; transition: opacity .3s ease; }
.br-hero__text.is-active{ opacity: 1; visibility: visible; }
.br-hero__text p{ font-family: var(--br-font-body); font-size: clamp(15px, 1.16vw, 20px); line-height: 1.5; color: var(--br-black); margin: 0; }
.br-hero__more{ align-self: flex-end; margin-top: clamp(22px, 2.5vw, 40px); display: inline-flex; align-items: center; gap: 16px; font-family: var(--br-font-body); font-size: 16px; text-decoration: none; color: var(--c); }
.br-hero__more-arrow{ display: inline-flex; flex: 0 0 auto; color: var(--c); transition: transform .3s ease; }
.br-hero__more-arrow svg{ width: clamp(90px, 12vw, 150px); height: auto; display: block; }
.br-hero__more:hover .br-hero__more-arrow{ transform: translateX(6px); }

@media (max-width: 900px){
  .br-hero{ display: flex; flex-direction: column; gap: 28px; min-height: 0; }
  .br-hero__left{ width: 100%; padding-left: 28px; }
  .br-hero__theme.is-active .br-hero__theme-btn{ transform: translateX(clamp(40px, 12vw, 90px)); }
  .br-hero__right{ position: relative; left: 0; top: 0 !important; width: 100%; }
  .br-hero__media{ width: min(500px, 72vw); }
}

/* =====================================================================
   Overlay photo (issue #43) : les titres des piliers (colonne gauche, z-index 3)
   débordent sur le bord gauche de la photo (bloc droite, z-index 2). Un voile
   dégradé plus dense à GAUCHE — là où le texte passe sur l'image — puis effacé
   vers la droite, renforce le contraste sans assombrir toute la photo. Le voile
   reste SOUS les piliers (z-index 3 > 1) : seul le fond photo est assombri.
   ===================================================================== */
.br-hero__media::after{
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, rgba(0,0,0,.58) 0%, rgba(0,0,0,.34) 45%, rgba(0,0,0,.08) 78%, rgba(0,0,0,0) 100%);
}
/* Pas de voile sur la photo d'accueil (état idle / welcome) — seulement sur les
   photos des piliers, où les titres chevauchent l'image. */
.br-hero--idle .br-hero__media::after{ display: none; }
@media (max-width: 900px){
  /* Empilé : les piliers ne débordent plus sur la photo → voile léger et
     uniforme (cohérent avec le widget Mission). */
  .br-hero__media::after{ background: rgba(0,0,0,.3); }
}