/* HERO 38 - RÉVÉLATION
   ---------------------------------------------------------------------------
   Réf. Dujardin (maquette B, étude C76). La vidéo d'accueil (sinon la photo
   du héros) occupe tout l'écran, à toutes les largeurs.

   MOBILE ET TABLETTE (≤ 1024 px) : sur l'image, seulement le surtitre, le
   H1 et l'invitation à défiler. Au défilement, hero-38.js les efface
   (`--hero-38-texte`, de 1 à 0 sur les 40 premiers % de l'écran ; en
   paysage bas, 16 % au plus, bornés par la marge réelle entre le surtitre
   et le header, sans glissement) : la vidéo
   reste seule, puis la fiche (description, boutons, téléphone, chiffres,
   garantie) arrive DESSOUS, dans le flux. La vidéo n'est jamais collée.

   ORDINATEUR (> 1024 px) : un écran au MINIMUM (la section grandit si le
   titre l'exige) ; H1 et boutons en bas à gauche, chiffres et garantie en
   ligne discrète au pied, sans fond, sur un dégradé écrit par le composant
   (§4.14). Le titre et les boutons s'effacent de la même façon.

   MOUVEMENT RÉDUIT : aucune animation d'effacement ; le titre est là, puis
   n'est plus là passé la moitié de la course (ni fondu ni glissement).

   LE HEADER : la zone immersive est `.hero-38__ecran` (voir le PHP), pas la
   section : le header redevient opaque quand la fiche passe sous lui
   (D-320 (4)), sans rien changer à headers/main.js. */

.hero-38 {
  /* Hauteur de l'écran : la fenêtre visible, jamais moins de 560 px. */
  --hero-38-ecran: max(560px, 100vh);
  --hero-38-ecran: max(560px, 100svh);
  /* Part de l'écran parcourue pour effacer le titre (lue par hero-38.js). */
  --hero-38-course: 0.4;
  /* Posée par hero-38.js : 1 = titre visible, 0 = effacé. Sans JS : 1. */
  --hero-38-texte: 1;
  --hero-38-filet: color-mix(in srgb, var(--white) 14%, transparent);
  --hero-38-discret: color-mix(in srgb, var(--white) 62%, transparent);
  --hero-38-texte-doux: color-mix(in srgb, var(--white) 80%, transparent);
  --hero-38-ombre: color-mix(in srgb, var(--black) 35%, transparent);

  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  background: var(--black);
  color: var(--white);
}

/* ---- L'écran : vidéo ou photo, dans le flux (zone immersive) ---- */
.hero-38__ecran {
  position: relative;
  z-index: 0;
  grid-area: 1 / 1;
  min-height: var(--hero-38-ecran);
  overflow: hidden;
}

.hero-38__video,
.hero-38__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Un haut sombre pour le header, un pied pour le titre ; le milieu de
   l'image reste intact. Il s'allège quand le titre s'efface. */
.hero-38__voile {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--black) 45%, transparent) 0%,
    transparent 22%,
    transparent 50%,
    color-mix(in srgb, var(--black) 60%, transparent) 100%
  );
  opacity: calc(0.35 + 0.65 * var(--hero-38-texte));
  pointer-events: none;
}

/* ---- Le titre posé sur l'image (même case de grille que l'écran) ----
   La case grandit avec lui : un titre très long sur un écran bas allonge
   l'écran au lieu de passer sous le header. */
.hero-38__tete {
  position: relative;
  z-index: 1;
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  min-width: 0;
  padding: calc(var(--header-height) + 24px) 22px 3svh;
  text-align: center;
  opacity: var(--hero-38-texte);
  transform: translateY(calc((1 - var(--hero-38-texte)) * -40px));
}

.hero-38__surtitre {
  margin: 0 0 14px;
  color: var(--hero-38-texte-doux);
  font-family: var(--font-modern);
  font-size: 0.72rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}

.hero-38__titre,
.hero-38__titre:hover {
  max-width: 16ch;
  margin: 0;
  color: var(--white);
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 9vw, 4.2rem);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -0.01em;
  overflow-wrap: break-word;
  text-shadow: 0 2px 30px var(--hero-38-ombre);
}
.hero-38__titre .mcl-accent {
  color: var(--white);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
}

.hero-38__defiler {
  display: grid;
  justify-items: center;
  gap: 10px;
  margin: 10svh 0 0;
  color: var(--hero-38-discret);
  font-family: var(--font-modern);
  font-size: 0.66rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}
.hero-38__defiler-trait {
  display: block;
  width: 1px;
  height: 38px;
  background: linear-gradient(var(--accent), transparent);
}

/* ---- La fiche : sous la vidéo, sur son propre fond sombre ---- */
.hero-38__fiche {
  position: relative;
  z-index: 1;
  grid-area: 2 / 1;
  display: grid;
  gap: 24px;
  padding: 34px max(22px, calc((100% - 720px) / 2)) 44px;
  background: var(--black);
  color: var(--white);
}

.hero-38__desc {
  margin: 0;
  color: var(--hero-38-texte-doux);
  font-family: var(--font-body);
  font-size: 1.05rem;
  line-height: 1.55;
}

.hero-38__actions {
  display: grid;
  gap: 10px;
}

.hero-38__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  padding: 0 26px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: none;
  color: inherit;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.hero-38__btn:focus-visible {
  outline: 2px solid var(--white);
  outline-offset: 3px;
}

/* Bouton d'action : --accent / --on-accent (§4.14). */
.hero-38__btn--principal,
.hero-38__btn--principal:hover,
.hero-38__btn--principal:focus {
  color: var(--on-accent);
  background: var(--accent);
}
.hero-38__btn--principal:hover {
  background: color-mix(in srgb, var(--accent) 86%, var(--black));
}

/* Téléphone et vitrine : contour clair sur le fond sombre. */
.hero-38__btn--tel,
.hero-38__btn--tel:hover,
.hero-38__btn--tel:focus,
.hero-38__btn--secondaire,
.hero-38__btn--secondaire:hover,
.hero-38__btn--secondaire:focus {
  color: var(--white);
  border-color: color-mix(in srgb, var(--white) 30%, transparent);
}
.hero-38__btn--tel:hover,
.hero-38__btn--secondaire:hover {
  border-color: var(--white);
  background: color-mix(in srgb, var(--white) 10%, transparent);
}

/* ---- Chiffres et garantie ---- */
.hero-38__donnees {
  display: grid;
  gap: 18px;
  padding-top: 20px;
  border-top: 1px solid var(--hero-38-filet);
}

.hero-38__chiffres {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  margin: 0;
  padding: 0;
  list-style: none;
}

.hero-38__chiffre {
  display: grid;
  align-content: start;
  gap: 6px;
  min-width: 0;
  padding: 0 10px;
  border-left: 1px solid var(--hero-38-filet);
  color: var(--white);
}
.hero-38__chiffre:first-child {
  padding-left: 0;
  border-left: 0;
}

.hero-38__valeur {
  color: var(--white);
  font-family: var(--font-numeric);
  font-size: 1.7rem;
  font-weight: 500;
  line-height: 1;
}

.hero-38__libelle {
  color: var(--hero-38-discret);
  font-family: var(--font-modern);
  font-size: 0.62rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.hero-38__garantie {
  margin: 0;
  color: var(--hero-38-discret);
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.04em;
}

/* Tablette : les boutons se partagent la ligne, la place le permet. */
@media (min-width: 600px) and (max-width: 1024px) {
  .hero-38__actions {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  }
}

/* Téléphone à l'horizontale (mise en page mobile, fenêtre de moins de
   560 px de haut) : le plancher de 560 px pousserait le titre et
   l'invitation à défiler sous le bord de l'écran. L'écran tient alors dans
   la fenêtre, sans plancher (même condition que hero-37) ; il reste la zone
   immersive et finit toujours au haut de la fiche. Le titre est réduit
   comme celui de hero-37 pour que surtitre, H1 et invitation tiennent
   entre le header et le bas de l'écran. `max-height: 559px` : exactement là
   où le plancher agissait ; `orientation: landscape` : un portrait n'est
   jamais aussi bas ; `max-width: 1024px` : l'ordinateur garde son
   plancher. */
@media (max-width: 1024px) and (orientation: landscape) and (max-height: 559px) {
  .hero-38 {
    --hero-38-ecran: 100vh;
    --hero-38-ecran: 100svh;
  }

  .hero-38__titre,
  .hero-38__titre:hover {
    color: var(--white);
    font-size: clamp(1.75rem, 10vh, 2.6rem);
    font-size: clamp(1.75rem, 10svh, 2.6rem);
  }

  /* Effacement : le surtitre est tout près du header. Sans le glissement
     vers le haut, et sur une course de 16 % de l'écran au lieu de 40 %,
     bornée par hero-38.js à la marge réelle entre le surtitre et le bas du
     header (`--hero-38-borne`), le titre a disparu avant que le surtitre
     n'atteigne le header, même long de plusieurs lignes (mouvement réduit
     compris : il disparaît d'un coup à mi-course). */
  .hero-38 {
    --hero-38-course: 0.16;
    --hero-38-borne: 1;
  }

  .hero-38__tete {
    transform: none;
  }
}

/* Mouvement réduit : ni glissement ni fondu (hero-38.js passe de 1 à 0 d'un coup). */
@media (prefers-reduced-motion: reduce) {
  .hero-38__tete,
  .hero-38__actions {
    transform: none;
  }
}

/* ---- Ordinateur : un écran au minimum, tout reste sur l'image ----
   La section est une grille calée en bas : titre, boutons, puis la ligne
   des chiffres. Elle réserve la hauteur du header au-dessus du titre ; un
   titre trop long pour une fenêtre basse agrandit la section (et l'écran,
   zone immersive, avec elle) au lieu de remonter sous le header. */
@media (min-width: 1025px) {
  .hero-38 {
    grid-template-rows: minmax(0, 1fr) auto auto;
    min-height: var(--hero-38-ecran);
    padding: calc(var(--header-height) + 16px) clamp(24px, 4vw, 64px) 30px;
  }

  /* La fiche est sur l'image : tout l'écran est immersif. `grid-area: auto` :
     placé dans une case, un enfant absolu s'y ancrerait (padding exclu) ;
     sans case, il couvre toute la section. */
  .hero-38__ecran {
    grid-area: auto;
    position: absolute;
    inset: 0;
    min-height: 0;
  }

  .hero-38__tete {
    grid-area: 1 / 1;
    align-self: end;
    align-items: flex-start;
    max-width: 760px;
    padding: 0;
    text-align: left;
  }

  .hero-38__titre,
  .hero-38__titre:hover {
    max-width: 18ch;
    color: var(--white);
    font-size: clamp(3rem, 5vw, 5rem);
  }

  .hero-38__defiler {
    display: none;
  }

  /* La fiche n'a plus de boîte : ses blocs se rangent dans la grille. */
  .hero-38__fiche {
    display: contents;
  }

  .hero-38__desc,
  .hero-38__btn--tel {
    display: none;
  }

  .hero-38__actions {
    position: relative;
    z-index: 1;
    grid-area: 2 / 1;
    display: flex;
    flex-wrap: wrap;
    margin-top: 28px;
    opacity: var(--hero-38-texte);
    transform: translateY(calc((1 - var(--hero-38-texte)) * -40px));
  }
  /* Presque effacés (sous 30 %, hero-38.js), les boutons ne captent plus le
     clic ; reçus au clavier, ils réapparaissent. */
  .hero-38--efface .hero-38__actions {
    pointer-events: none;
  }
  .hero-38__actions:focus-within {
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }

  .hero-38__donnees {
    position: relative;
    z-index: 1;
    grid-area: 3 / 1;
    justify-self: end;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: baseline;
    gap: 12px 40px;
    margin-top: 32px;
    padding: 0;
    border: 0;
  }

  .hero-38__chiffres {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 28px;
  }

  .hero-38__chiffre {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 0;
    border: 0;
  }

  .hero-38__valeur {
    color: var(--white);
    font-family: var(--font-modern);
    font-size: 0.82rem;
    letter-spacing: 0.08em;
  }

  .hero-38__libelle,
  .hero-38__garantie {
    color: var(--hero-38-texte-doux);
    font-family: var(--font-modern);
    font-size: 0.68rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
  }
}

@media (min-width: 1025px) and (prefers-reduced-motion: reduce) {
  .hero-38__actions {
    transform: none;
  }
}