/* ======================================================================
   hero-video.css — Refonte 2026
   Nouveau héros de l'accueil : vidéo en fond restée sticky pendant le
   scroll, deux panneaux (intro + hook) qui défilent par-dessus. Chargé
   en supplément de refonte.css. Toutes les classes sont namespacées
   .jh-* pour zéro conflit avec la feuille principale.

   Conforme DESIGN.md :
   - Angles zéro partout (aucun border-radius sur les éléments).
   - Animations sur transform, opacity et clip-path uniquement.
   - Jetons repris de refonte.css (--fond, --encre, --arc-1..5, --dur, ...).
     Si l'un manque, le fallback des valeurs par défaut CSS s'applique.
   ====================================================================== */

/* ---- Bloc hero global. Height dépend du nombre de panneaux à l'intérieur.
        Ici deux panneaux : 100vh (intro) + 80vh (hook) = 180vh total. ---- */
.jh-hero-block {
  position: relative;
  background: var(--r-ink, #141312);
  margin-top: -80px;                    /* chevauche le header transparent */
}

/* Le média : sticky en haut, occupe la fenêtre entière le temps du scroll. */
.jh-hero-block__media {
  position: sticky; top: 0;
  height: 100vh; width: 100%;
  overflow: hidden;
  z-index: 1;
}
.jh-hero-block__media .jh-hero-block__poster,
.jh-hero-block__media video {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  display: block;
}
.jh-hero-block__media video {
  opacity: 0;
  transition: opacity 1.2s ease;
}
.jh-hero-block__media video.jh-is-pret {
  opacity: 1;
}
.jh-hero-block__voile {
  position: absolute; inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(20, 19, 18, .35) 0%,
    rgba(20, 19, 18, .15) 40%,
    rgba(20, 19, 18, .55) 100%
  );
}

/* La pile des panneaux : commence par-dessus le média grâce au margin-top
   négatif, puis les panneaux défilent devant. */
.jh-hero-block__stack {
  position: relative; z-index: 2;
  margin-top: -100vh;
}

/* ---- Un panneau : plein écran, contenu centré vertical. ---- */
.jh-panel {
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 100px 24px 40px;
}

/* ---- Panneau 1 : l'intro. Texte centré, couleur claire, sur fond vidéo. */
.jh-panel--intro {
  justify-content: center;
  text-align: center;
  color: var(--r-paper, #FCFBFA);
}
.jh-panel--intro .jh-panel__inner {
  max-width: 780px;
  margin: 0 auto;
}
.jh-panel--intro .jh-eyebrow {
  display: inline-block;
  font-family: var(--r-body, "Poppins", sans-serif);
  font-size: .75rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--r-paper, #FCFBFA);
  margin: 0 0 24px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(252, 251, 250, .5);
}
.jh-panel--intro h1 {
  font-family: var(--rf-display, "Fraunces", serif);
  font-weight: 400;
  font-size: clamp(2.5rem, 6vw, 5rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin: 0 0 22px;
  color: var(--r-paper, #FCFBFA);
}
.jh-panel--intro .jh-note {
  max-width: 620px;
  margin: 0 auto 36px;
  font-family: var(--r-body, "Poppins", sans-serif);
  font-size: clamp(1rem, 1.4vw, 1.125rem);
  line-height: 1.55;
  color: rgba(252, 251, 250, .92);
}
.jh-panel--intro .jh-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.jh-panel--intro .jh-preuve {
  margin: 4px 0 0;
  font-family: var(--r-body, "Poppins", sans-serif);
  font-size: .8125rem;
  color: rgba(252, 251, 250, .85);
}

/* Bouton du hero : sur fond vidéo, encre claire par défaut, s'inverse au
   survol. Angles zéro. Ne dépend pas de .r-btn de refonte.css pour éviter
   les surprises de spécificité, mais on garde une allure similaire. */
.jh-hero-block .jh-btn {
  display: inline-block;
  padding: 16px 32px;
  font-family: var(--r-body, "Poppins", sans-serif);
  font-size: .875rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  text-decoration: none;
  font-weight: 500;
  border: 1px solid var(--r-paper, #FCFBFA);
  color: var(--r-paper, #FCFBFA);
  background: transparent;
  border-radius: 0;
  transition:
    transform var(--dur, .45s) var(--ease, cubic-bezier(.22, .61, .36, 1)),
    background var(--dur, .45s) var(--ease, cubic-bezier(.22, .61, .36, 1)),
    color var(--dur, .45s) var(--ease, cubic-bezier(.22, .61, .36, 1));
}
.jh-hero-block .jh-btn:hover,
.jh-hero-block .jh-btn:focus-visible {
  background: var(--r-paper, #FCFBFA);
  color: var(--r-ink, #141312);
  transform: scale(1.02);
}

/* ---- Panneau 2 : le hook. Un peu moins haut, H2 plus discret. ---- */
.jh-panel--hook {
  min-height: 80vh;
}
.jh-panel--hook h2 {
  font-family: var(--rf-display, "Fraunces", serif);
  font-weight: 400;
  font-size: clamp(2rem, 4.5vw, 3.5rem);
  line-height: 1.05;
  letter-spacing: -0.015em;
  margin: 0 0 20px;
  color: var(--r-paper, #FCFBFA);
}

/* ---- Le feutre à deux couleurs. Chaque <em> définit sa couleur via
        --jh-f. Le trait se dessine au scroll quand .jh-is-on est posé. ---- */
.jh-hero-block h1 em,
.jh-hero-block h2 em {
  --jh-f: var(--arc-5, #FFC0D4);
  font-style: normal;
  position: relative;
  white-space: nowrap;
  background-image: linear-gradient(
    to top,
    color-mix(in oklab, var(--jh-f) 70%, transparent) 0%,
    color-mix(in oklab, var(--jh-f) 70%, transparent) 62%,
    transparent 62%, transparent 100%
  );
  background-repeat: no-repeat;
  background-size: 0% 100%;
  transition: background-size .7s .3s var(--ease, cubic-bezier(.22, .61, .36, 1));
}
/* Le second feutre du même titre se dessine 550 ms après le premier. */
.jh-hero-block h1 em:nth-of-type(2),
.jh-hero-block h2 em:nth-of-type(2) {
  transition-delay: .55s;
}
/* Feutre plein quand le panneau est révélé (classe posée par le JS). */
.js-anim .jh-hero-block .jh-is-on h1 em,
.js-anim .jh-hero-block .jh-is-on h2 em {
  background-size: 100% 100%;
}
/* Fallback sans JS : feutre plein tout de suite. */
html:not(.js-anim) .jh-hero-block h1 em,
html:not(.js-anim) .jh-hero-block h2 em {
  background-size: 100% 100%;
}

/* ---- Entrée fade-rise sur les enfants marqués .jh-fade. ---- */
.jh-reveal > .jh-fade {
  opacity: 0;
  transform: translateY(24px);
}
.js-anim .jh-reveal.jh-is-on > .jh-fade {
  opacity: 1;
  transform: none;
  transition:
    opacity var(--dur-reveal, .5s) var(--ease, cubic-bezier(.22, .61, .36, 1)),
    transform var(--dur-reveal, .5s) var(--ease, cubic-bezier(.22, .61, .36, 1));
}
.js-anim .jh-reveal.jh-is-on > .jh-fade:nth-child(1) { transition-delay: 0ms; }
.js-anim .jh-reveal.jh-is-on > .jh-fade:nth-child(2) { transition-delay: calc(var(--stagger, 80ms) * 2); }
.js-anim .jh-reveal.jh-is-on > .jh-fade:nth-child(3) { transition-delay: calc(var(--stagger, 80ms) * 4); }
.js-anim .jh-reveal.jh-is-on > .jh-fade:nth-child(4) { transition-delay: calc(var(--stagger, 80ms) * 6); }
.js-anim .jh-reveal.jh-is-on > .jh-fade:nth-child(5) { transition-delay: calc(var(--stagger, 80ms) * 8); }
html:not(.js-anim) .jh-reveal > .jh-fade {
  opacity: 1;
  transform: none;
}

/* ---- Reduced-motion : rien ne bouge, tout est déjà là. ---- */
@media (prefers-reduced-motion: reduce) {
  .jh-hero-block *,
  .jh-hero-block *::before,
  .jh-hero-block *::after {
    transition: none !important;
    animation: none !important;
  }
  .jh-hero-block h1 em,
  .jh-hero-block h2 em {
    background-size: 100% 100%;
  }
  .jh-reveal > .jh-fade {
    opacity: 1;
    transform: none;
  }
}

/* ---- Mobile. Panneaux resserrés, boutons pleine largeur si besoin. ---- */
@media (max-width: 45em) {
  .jh-panel { padding: 80px 20px 40px; }
  .jh-panel--intro h1 { font-size: clamp(2rem, 9vw, 3rem); }
  .jh-panel--hook  h2 { font-size: clamp(1.75rem, 7vw, 2.5rem); }
}

/* ======================================================================
   .jh-media-bg : fond video reutilisable pour n'importe quelle section.
   Utilise sur la section .r-news avec le modificateur .r-news--with-video.
   Contrainte metier : on doit voir la scene ENTIERE, ballon compris.
   On force donc object-fit: contain + un fond rose qui se fond avec la
   scene, et on colle le panneau newsletter A GAUCHE au meme niveau
   vertical que la video par grid-row explicite.
   ====================================================================== */
.r-news--with-video {
  background: var(--r-bg-pure, #FCFBFA);
  background-image: none;
  overflow: hidden;
  /* Aligne la section sur la meme largeur maximale que le reste de la page
     (l'utilitaire .wrap du site). Cote gutter, on garde le meme
     --sp-gutter que les autres blocs pour que la video se cale au meme
     bord vertical que les sections voisines. */
  max-width: var(--w-max);
  margin-inline: auto;
  padding: 0 var(--sp-gutter);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  grid-template-rows: auto;
  align-items: center;
  gap: clamp(1.5rem, 4vw, 3rem);
}
/* Le voile ::before de refonte.css n'a plus lieu d'etre. */
.r-news--with-video::before { display: none; }

.r-news--with-video .jh-media-bg {
  position: relative;
  inset: auto;
  grid-column: 2;
  grid-row: 1;                           /* meme rangee que le panneau */
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  width: 100%;
  aspect-ratio: 1176 / 620;
  background: #F3D9CE;                   /* rose de la scene : bandes de contain invisibles */
}
.jh-media-bg .jh-media-bg__poster,
.jh-media-bg > video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;                   /* scene entiere, ballon garanti visible */
  object-position: center center;
  display: block;
}
.jh-media-bg > video {
  opacity: 0;
  transition: opacity 1.2s ease;
}
.jh-media-bg > video.jh-is-pret {
  opacity: 1;
}

.r-news--with-video .wrap {
  grid-column: 1;
  grid-row: 1;                           /* meme rangee que la video */
  align-self: center;
  justify-self: start;                   /* aligne sur le bord gauche de la section = meme laisse que .wrap au-dessus */
  margin-inline: 0;                      /* neutralise le margin-inline: auto herite de .wrap */
  max-width: 34rem;
  padding-inline: 0;                     /* le gutter est deja porte par la section */
  padding-block: clamp(2.5rem, 5vw, 4rem);
  z-index: 2;
}
.r-news--with-video .r-news__panneau {
  max-width: none;
  padding: clamp(1.75rem, 3vw, 2.5rem) clamp(1.75rem, 3vw, 2.75rem);
  background: var(--r-bg);                  /* creme, contraste doux avec le fond ivoire de la section */
  box-shadow:
    0 0.5rem 2rem rgba(20, 19, 18, 0.06),   /* halo tres leger */
    0 0.125rem 0.375rem rgba(20, 19, 18, 0.04);
  position: relative;
}
/* Filet vertical violet a gauche : reprend --vif-violet, comme l'accent
   du site. Discret mais donne au panneau son point d'ancrage visuel. */
.r-news--with-video .r-news__panneau::before {
  content: "";
  position: absolute;
  left: 0;
  top: clamp(1.75rem, 3vw, 2.5rem);
  bottom: clamp(1.75rem, 3vw, 2.5rem);
  width: 3px;
  background: var(--vif-violet);
}
.r-news--with-video .r-news__panneau .eyebrow {
  color: var(--vif-violet);                 /* echo du filet, la ligne se lit d'un coup */
}

/* Tablette : colonnes egales, panneau recentre dans sa colonne. */
@media (max-width: 64em) {
  .r-news--with-video {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .r-news--with-video .wrap {
    justify-self: start;
    margin-inline: 0;
  }
}

/* Mobile : on empile, panneau en haut, video en bas dans son ratio natif. */
@media (max-width: 48em) {
  .r-news--with-video {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    gap: 0;
  }
  .r-news--with-video .wrap {
    grid-column: 1;
    grid-row: 1;
    justify-self: stretch;
    max-width: none;
    margin-inline: 0;
  }
  .r-news--with-video .jh-media-bg {
    grid-column: 1;
    grid-row: 2;
    aspect-ratio: 1176 / 620;
  }
}

/* Reduced-motion : pas de video, le poster reste. */
@media (prefers-reduced-motion: reduce) {
  .jh-media-bg > video {
    display: none;
  }
}
/* Bouton du héros : transparent, fine bande tricolore à l'intérieur, en bas. */
.jh-hero-block .jh-btn { position: relative; }
.jh-hero-block .jh-btn::after {
  content: "";
  position: absolute;
  left: 1px; right: 1px;
  bottom: 1px;
  height: 3px;
  background: linear-gradient(to right, #0F62D9 0 33.33%, #FFF 33.33% 66.66%, #E1000F 66.66% 100%);
  pointer-events: none;
}

   face aux titres. Les dessins restent ceux du fichier jh-*. */
.r-trust__icon { width: 56px; height: 56px; margin: 0 auto 1rem; }




/* Accueil : pictogrammes en tuiles, comme sur la FAQ (fond teinté, filet de couleur, couleur par position).
   Seule la tuile est stylée : le dessin « Certifié Origine France Garantie » n'est pas modifié. */
.r-socle__points > li,
.r-trust__item {
  display: grid; justify-items: center; align-content: center; text-align: center; gap: .75rem;
  padding: 1.25rem;
  border-radius: 1rem; border-top: 3px solid var(--arc, var(--arc-1));
  background: var(--lavis, var(--lavis-1));
}
.r-socle__points > li:nth-child(5n + 1), .r-trust__item:nth-child(1) { --arc: var(--arc-1); --lavis: var(--lavis-1); }
.r-socle__points > li:nth-child(5n + 2), .r-trust__item:nth-child(2) { --arc: var(--arc-2); --lavis: var(--lavis-2); }
.r-socle__points > li:nth-child(5n + 3), .r-trust__item:nth-child(3) { --arc: var(--arc-3); --lavis: var(--lavis-3); }
.r-socle__points > li:nth-child(5n + 4), .r-trust__item:nth-child(4) { --arc: var(--arc-4); --lavis: var(--lavis-4); }
.r-socle__points > li:nth-child(5n + 5) { --arc: var(--arc-5); --lavis: var(--lavis-5); }
.r-socle__points > li .icon,
.r-trust__item .r-trust__icon { width: 56px; height: 56px; margin: 0; color: var(--arc-1); }
.r-socle__points > li:nth-child(4n + 2) .icon, .r-trust__item:nth-child(4n + 2) .r-trust__icon { color: var(--encre-2); }
.r-socle__points > li:nth-child(4n + 3) .icon, .r-trust__item:nth-child(4n + 3) .r-trust__icon { color: var(--encre-3); }
.r-socle__points > li:nth-child(4n + 4) .icon, .r-trust__item:nth-child(4n + 4) .r-trust__icon { color: var(--encre-4); }