/******************************************************
 * HERO CAPSULE - full-bleed premium, theme-agnostic
 * Dépend de la structure fournie par hero-capsule.php :
 *   <section class="capsule-hero [capsule-xxx]">
 *     <div class="capsule-hero-bg-overlay" aria-hidden="true"></div>
 *     <h1 class="capsule-hero-title">…</h1>
 *     <div class="capsule-intention">…HTML Gutenberg…</div>
 *   </section>
 *
 * Variables (override possibles par page/capsule) :
 *   --hero-bg            : image (injectée inline par le composant PHP)
 *   --hero-height        : hauteur min (px/vh)
 *   --hero-tint          : opacité du voile global (0 à 0.8)
 *   --hero-vignette      : force de la vignette radiale (0 à 0.8)
 *   --hero-blur          : blur du filtre (px)
 *   --hero-glow          : intensité de la bordure/verre (0 à 0.75)
 *   --hero-align         : center | left | right
 *   --hero-parallax      : 1 active un léger "fixed" (desktop)
 *   --hero-edgefade      : intensité du fondu bas (0 à 1)
 *   --hero-accent        : couleur d'accent (HSL sans alpha, ex: 210 100% 60%)
 *   --hero-noise         : opacité du grain (0 à 0.25)
 ******************************************************/

/* Défauts sûrs applicables à toutes les capsules
   On s'appuie sur capsule-foundation.css pour le blur et le verre */
.capsule{
  --hero-height: clamp(440px, 56vh, 760px);

  /* filtre très léger par défaut, ajustable par capsule */
  --hero-tint: .10;
  --hero-vignette: .14;
  --hero-blur: 8px;

  --hero-glow: .40;
  --hero-align: center;
  --hero-parallax: 0;
  --hero-edgefade: .10;
  --hero-accent: 210 100% 60%;
  --hero-noise: .08;
}

/* ===========================
   Conteneur full-bleed fiable
   =========================== */
.capsule-hero{
  position: relative;
height: 48vh;
  /* full-bleed sans casser le layout parent */
  width: 100vw;
  max-width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);

  min-height: var(--hero-height);
  padding: clamp(26px, 4vw, 60px) 4vw;

  display: grid;
  place-items: center;
  row-gap: clamp(12px, 1.8vw, 20px);
  text-align: var(--hero-align);
  overflow: clip; /* masque décor et edge-fade */

  /* image background injectée en inline style via --hero-bg */
  background-image: var(--hero-bg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Parallax doux (désactivable) */
@media (min-width: 1024px){
  .capsule-hero[data-parallax="1"],
  .capsule-hero[style*="--hero-parallax: 1"]{
    background-attachment: fixed;
  }
}
@media (prefers-reduced-motion: reduce){
  .capsule-hero{ background-attachment: scroll !important; }
}

/* ===========================
   Calques d'uniformisation
   =========================== */

/* Voile + vignette + blur sur l'image pour lisibilité universelle */
.capsule-hero::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;

  background:
    /* vignette centrale très douce */
    radial-gradient(120% 100% at 50% 60%,
      rgba(0,0,0,var(--hero-vignette)) 0%,
      rgba(0,0,0,0) 60%),
    /* voile uniforme discret */
    linear-gradient(180deg,
      rgba(0,0,0,var(--hero-tint)) 0%,
      rgba(0,0,0,var(--hero-tint)) 100%);

  /* filtre façon verre dépoli sur l'image de fond
     on s'appuie sur la logique de blur globale */
  backdrop-filter: blur(var(--blur-sm)) ;
  -webkit-backdrop-filter: blur(var(--blur-sm)) ;
}

/* Edge fade vers le contenu bas de page (transition élégante) */
.capsule-hero::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-1px;
  height:min(14vh, 120px);
  background: linear-gradient(180deg,
              rgba(0,0,0,0) 0%,
              rgba(0,0,0,var(--hero-edgefade)) 100%);
  mix-blend-mode: multiply;
  pointer-events:none;
  z-index:0;
}

/* Overlay décoratif optionnel (présent dans ton HTML)
   ajoute grain subtil et léger dégradé angulaire haut de gamme */
.capsule-hero .capsule-hero-bg-overlay{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(1px 1px at 25% 20%, rgba(255,255,255,.04), transparent 40%) 0 0 / 64px 64px,
    radial-gradient(1px 1px at 60% 70%, rgba(255,255,255,.04), transparent 40%) 0 0 / 64px 64px,
    linear-gradient(135deg,
      hsl(var(--hero-accent) / .12) 0%,
      transparent 45%,
      transparent 55%,
      hsl(var(--hero-accent) / .10) 100%);
  opacity: calc(max(0, var(--hero-noise)));
}

/* ===========================
   Titre principal
   =========================== */
.capsule-hero-title{
  position: relative;
  z-index: 1;
  color: var(--cap-ink-inv);
  font-family: var(--font-hero,'Satisfy',cursive);
  font-size: clamp(36px, 5.4vw, 68px);
  line-height: 1.08;
  margin: 0;
  letter-spacing: .2px;

  /* relief sobre (double ombre longue) */
  text-shadow:
    0 2px 8px rgba(0,0,0,.32),
    0 10px 32px rgba(0,0,0,.25);

  /* wrap long titres proprement */
  overflow-wrap: anywhere;
  hyphens: auto;
}

/* Alignements sans changer le HTML */
.capsule-hero.is-left  {
  --hero-align: left;
  justify-items: start;
}
.capsule-hero.is-right {
  --hero-align: right;
  justify-items: end;
}

/* ===========================
   Intention - ruban verre dépoli
   =========================== */
.capsule-intention{
  position: relative;
  z-index: 1;
  max-width: min(90ch, 86vw);

  /* ruban rectiligne, bords doux */
  padding: clamp(.9rem, 1.3vw, 1.15rem) clamp(1.1rem, 1.6vw, 1.4rem);
  border-radius: 14px;
  color: var(--cap-ink-inv);
  font-size: clamp(16px, 2.05vw, 20px);
  line-height: 1.55;

  /* verre dépoli en utilisant les variables de foundation */
  background: var(--glass-md);
  backdrop-filter: var(--blur-lg);
  -webkit-backdrop-filter: var(--blur-lg);
  border: 1px solid rgba(255,255,255,var(--hero-glow));

  /* micro-relief pour toutes les photos */
  text-shadow: 0 1px 2px rgba(0,0,0,.28);

  /* bande lumineuse d'accent (haut/bas), très subtile */
  box-shadow:
    0 1px 0 hsl(var(--hero-accent) / .25) inset,
    0 -1px 0 hsl(var(--hero-accent) / .18) inset,
    0 8px 22px rgba(0,0,0,.18);
}

/* Filet de lumière animé au survol (desktop) */
@media (hover: hover){
  .capsule-intention::after{
    content:"";
    position:absolute;
    inset:1px;
    border-radius: inherit;
    background:
      linear-gradient(90deg,
        transparent 0%,
        hsl(var(--hero-accent) / .22) 40%,
        hsl(var(--hero-accent) / .12) 60%,
        transparent 100%);
    opacity: 0;
    transition: opacity .25s ease;
    pointer-events:none;
  }
  .capsule-intention:hover::after{ opacity: .8; }
}

/* Contenu Gutenberg autorisé dans l'intention */
.capsule-intention p{ margin: .2em 0; }
.capsule-intention em{ opacity: .95; }
.capsule-intention a{
  color: var(--cap-ink-inv);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: hsl(var(--hero-accent) / .55);
}
.capsule-intention a:hover{
  text-decoration-thickness: 2px;
}

/* ===========================
   Variantes utilitaires
   =========================== */

/* Pour fonds très clairs : on renforce légèrement le filtre */
.capsule-hero.is-light{
  --hero-tint: .16;
  --hero-vignette: .20;
  --hero-noise: .10;
}

/* Variante plus compacte si certains héros sont peu denses */
.capsule-hero.is-compact{
  --hero-height: clamp(380px, 48vh, 620px);
  row-gap: clamp(8px, 1.2vw, 14px);
}

/* Variante split-left/right : léger dégradé latéral pour texte à gauche/droite */
.capsule-hero.is-left::before{
  background:
    linear-gradient(90deg, rgba(0,0,0,.26), rgba(0,0,0,0) 55%),
    radial-gradient(120% 100% at 50% 60%, rgba(0,0,0,var(--hero-vignette)) 0%, rgba(0,0,0,0) 60%),
    linear-gradient(180deg, rgba(0,0,0,var(--hero-tint)) 0%, rgba(0,0,0,var(--hero-tint)) 100%);
}
.capsule-hero.is-right::before{
  background:
    linear-gradient(270deg, rgba(0,0,0,.26), rgba(0,0,0,0) 55%),
    radial-gradient(120% 100% at 50% 60%, rgba(0,0,0,var(--hero-vignette)) 0%, rgba(0,0,0,0) 60%),
    linear-gradient(180deg, rgba(0,0,0,var(--hero-tint)) 0%, rgba(0,0,0,var(--hero-tint)) 100%);
}

/* ===========================
   Responsivité et confort
   =========================== */
@media (max-width: 640px){
  .capsule{ --hero-height: clamp(360px, 50vh, 560px); }
  .capsule-hero{ padding: clamp(18px, 4vw, 28px) 4vw; }
  .capsule-hero-title{ font-size: clamp(30px, 8vw, 44px); }
  .capsule-intention{ font-size: clamp(15px, 4.2vw, 18px); }
  .capsule-hero::after{ height: 80px; }
}

/* Quand le header global est fixed, on améliore le scroll-margin pour ancres éventuelles */
body.admin-bar .capsule-hero{
  scroll-margin-top: calc(var(--header-h,80px) + 46px);
}