/* =========================================================================
   Hero Clapasson & Fils — section réutilisable.
   Tokens : --color-primary (#ccd310), --color-primary-dark (#8f940c),
            --color-secondary (#1d1d1b), --color-tertiary (#688c82).
   Structure :
     .cf-hero
       .cf-hero__title          ← dissocié, positionné à 1/3 top right
       .cf-hero__media-block    ← media + callout liés (unité responsive)
         .cf-hero__media
         .cf-hero__callout
   Layout desktop : media tilté à gauche, callout tilté chevauchant en bas-
   droite. Bascule en 1 colonne ≤ 1024px (le bloc media+callout s'empile,
   le titre revient en flow au-dessus).
   ========================================================================= */

.cf-hero {
  position: relative;
  isolation: isolate;
  min-height: 100svh;
  padding: 0 var(--page-px);
  color: var(--color-secondary, #1d1d1b);
  overflow: hidden; /* le média sort à gauche, on rogne proprement */
}

/* ---- Heading dissocié (titre + CTA optionnel) — top: 33%, droite ------ */
/* Taille via var(--fs-h1) qui scale automatiquement aux breakpoints :
     desktop 48/58 → tablet 36/46 → mobile 28/38 (frames Figma agrégées). */
.cf-hero__heading {
  position: absolute;
  z-index: 2;
  top: 160px;
  right: var(--page-px);
  width: min(500px, 40%);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}
.cf-hero__title {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  color: var(--color-secondary, #1d1d1b);
}
.cf-hero__cta {
  display: flex;
}
.cf-hero__title-accent {
  font-weight: var(--fw-bold);
  color: var(--color-primary-dark, #8f940c);
}

/* ---- Bloc media + callout (unité solidaire pour le responsive) -------- */
.cf-hero__media-block {
  position: relative;
  min-height: 100svh;
}

/* ---- Media (image OU vidéo YouTube) — parallélogramme tilté à gauche -- */
/* Vertices clip-path issus du node Figma 4001:1709 (canvas 1389×887). */
.cf-hero__media {
  position: absolute;
  z-index: 0;
  /* Sort par la gauche (~ -28% comme dans la maquette où le node démarre
     à x=-390 sur 1512 = -25.8% du cadre, ajusté pour le padding latéral). */
  left: -28%;
  top: 30px;
  width: 92%;
  height: 100%;
  aspect-ratio: 1389 / 887;
  clip-path: polygon(0 38.3%, 83.5% 0, 100% 100%, 9.1% 100%);
  background: var(--color-secondary, #1d1d1b);
}
.cf-hero__media-frame {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.cf-hero__media-img,
.cf-hero__media-iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border: 0;
}

/* Iframe YouTube : on force un aspect-ratio 16/9 SUR L'IFRAME pour que le
   contenu vidéo remplisse l'iframe edge-to-edge (sans letterbox interne),
   puis on cale height: 100% du parent + width: auto → la largeur dépasse
   la zone clipée et le surplus est rogné par le parent (overflow hidden).
   Résultat : la vidéo prend 100 % de la hauteur du média, quitte à couper
   horizontalement. `inset: auto` neutralise le `inset: 0` hérité de la
   règle commune ci-dessus. */
.cf-hero__media--video .cf-hero__media-iframe {
  inset: auto;
  top: 0;
  left: 50%;
  right: auto;
  bottom: auto;
  height: 100%;
  width: auto;
  aspect-ratio: 16 / 9;
  transform: translateX(-50%);
  object-fit: unset; /* sans effet sur iframe, mais reset explicite */
  pointer-events: none; /* la vidéo joue en autoplay muet — pas d'interaction */
}

/* Voile sombre sur le média (overlay #141313 / 20 % du node Figma). */
.cf-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(20, 19, 19, 0.2);
  pointer-events: none;
}

/* ---- Bouton toggle son (coin bas-gauche du média) --------------------- */
.cf-hero__audio-toggle {
  position: absolute;
  z-index: 2;
  left: 0;
  bottom: 40px;
  width: 56px;
  height: 56px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.3s ease;
}
.cf-hero__audio-toggle svg {
  width: 56px;
  height: 56px;
}
.cf-hero__audio-toggle:hover {
  opacity: 1;
}
.cf-hero__audio-toggle:focus-visible {
  outline: 2px solid var(--color-secondary, #1d1d1b);
  outline-offset: 3px;
}
.cf-hero__audio-icon {
  display: none;
}
.cf-hero__audio-toggle[aria-pressed="false"] .cf-hero__audio-icon--muted {
  display: inline-flex;
}
.cf-hero__audio-toggle[aria-pressed="true"] .cf-hero__audio-icon--on {
  display: inline-flex;
}

/* ---- Callout tilté (jaune-vert) — overlap bas-droite du media --------- */
/* Vertices clip-path issus du node Figma 4001:1871 (669×407). */
.cf-hero__callout {
  position: absolute;
  z-index: 1;
  right: 20%;
  bottom: 0;
  width: min(668px, 50%);
  aspect-ratio: 669 / 407;
  background: var(--color-primary, #ccd310);
  clip-path: polygon(16.5% 0, 100% 38.3%, 90.9% 100%, 0 100%);
}
.cf-hero__description {
  position: absolute;
  top: 39.3%;
  left: 17.6%;
  right: 14.8%;
  bottom: 7.9%;
  margin: 0;
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-secondary, #1d1d1b);
}
.cf-hero__description strong {
  font-weight: var(--fw-bold);
}

/* ---- Responsive ≤ 1024px — variante Figma 768 (node 4202:3480) -------- */
/* Pas de média : la maquette mobile/tablet ne rend que le titre + le
   callout tilté en pleine largeur. Le titre passe à 36px automatiquement
   via l'override de --fs-h1 dans basic_style.css. */
@media (max-width: 1024px) {
  .cf-hero {
    overflow: hidden;
    padding-inline: 0;
  }

  /* Titre : flow normal, aligné à gauche, full width.
     Le padding de hero était inline ; on le réapplique ici pour cadrer
     uniquement le titre (le bloc media-callout en dessous gère son layout). */
  .cf-hero__heading {
    position: static;
    width: 100%;
    max-width: none;
    padding: calc(var(--cf-header-h, 84px) + var(--sp-6)) var(--page-px)
      var(--sp-5);
  }
  .cf-hero__title {
    position: static;
    width: 100%;
    max-width: none;
    margin: 0;
  }

  .cf-hero__media-block {
    display: flex;
    align-items: end;
    position: relative;
    min-height: 780px;
  }
  .cf-hero__media {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
  }

  /* Callout : conserve sa forme tiltée et l'aspect-ratio Figma, prend toute
     la largeur dispo. La description reste positionnée en absolu via les %
     déjà définis (mêmes proportions que desktop). */
  .cf-hero__callout {
    position: relative;
    right: 0;
    bottom: 0;
    width: 100%;
    aspect-ratio: 669 / 407;
  }
  .cf-hero__audio-toggle {
    left: 40px;
  }
}

/* ---- Responsive ≤ 640px — simplification du callout ------------------ */
/* En dessous de 640px, la forme tiltée devient trop courte verticalement
   pour contenir le texte de description (≈ 9 lignes à 16px) sans débord.
   On retire le clip-path et l'aspect-ratio, callout en bloc rectangulaire
   avec padding standard, description en flow normal. */
@media (max-width: 640px) {
  .cf-hero__callout {
    aspect-ratio: auto;
    clip-path: none;
    padding: var(--sp-4);
  }
  .cf-hero__description {
    position: static;
  }
  .cf-hero__media-block {
    flex-direction: column;
  }
  .cf-hero__media {
    position: relative;
    min-height: 500px;
    clip-path: polygon(0% 25%, 100% 0, 100% 100%, 0% 100%);
  }
  .cf-hero__audio-toggle {
    right: 20px;
    top: 430px;
    left: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cf-hero__audio-toggle {
    transition: none !important;
  }
}