/* Page « Notre histoire » : sous-titres H3 et H4 de la source, texte sur bande vidéo.
   Le bandeau réutilise .tm-film (fiche-fond-video.css). */

.nh-h4 {
  margin: 1.6rem 0 .5rem;
  font-size: var(--fs-md, 1.1rem);
  font-weight: 600;
  line-height: 1.35;
  color: var(--encre-1, #6128FF);
}

.nh-h3 {
  margin: 2.2rem 0 .75rem;
  font-family: var(--rf-display);
  font-weight: var(--rf-weight);
  font-variation-settings: var(--rf-settings);
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  line-height: 1.2;
  color: var(--r-ink);
}

.nh-texte p { margin: 0 0 1rem; }
.nh-texte p:last-child { margin-bottom: 0; }

.nh-signature {
  margin-top: 1.5rem;
  font-family: 'Reenie Beanie', cursive;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  color: var(--encre-1, #6128FF);
}

.nh-bandeau { margin-block: clamp(2rem, 5vw, 3.5rem); }

/* Zigzag : sur ordinateur, la photo passe à gauche sur une rangée sur deux. */
@media (min-width: 56rem) {
  .r-offset--flip > .r-offset__media { order: -1; }
}

/* Deux photos côte à côte dans une même colonne. */
.nh-duo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem;
  align-items: start;
}
.nh-duo img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; }

/* Partie sur fond vidéo, dans la colonne de lecture. */
.nh-fond {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin-top: clamp(3rem, 7vw, 5rem);
  background: var(--r-bg, #FCFBFA);
}
.nh-fond__fond {
  position: sticky;
  top: 0;
  z-index: -2;
  height: min(100vh, 40rem);
  margin-bottom: calc(-1 * min(100vh, 40rem));
  pointer-events: none;
}
.nh-fond__fond video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.nh-fond::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(252, 251, 250, .62);
}
.nh-fond__contenu { position: relative; }
.nh-fond .nh-texte {
  background: var(--r-bg-pure, #FFFFFF);
  padding: clamp(1.4rem, 3vw, 2.2rem);
  box-shadow: .5rem .5rem 0 var(--arc-2);
}

@media (prefers-reduced-motion: reduce) {
  .nh-fond__fond video { display: none; }
}

/* En-tête : bandeau vidéo pleine largeur, titre sur une carte de papier. */
.nh-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: clamp(22rem, 52vw, 38rem);
  display: flex;
  align-items: center;
  background: var(--r-bg-pure, #FFFFFF);
}
.nh-hero__fond { position: absolute; inset: 0; z-index: -2; pointer-events: none; }
.nh-hero__fond video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.nh-hero__voile {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(252, 251, 250, .35) 0%, rgba(252, 251, 250, 0) 70%);
}
.nh-hero__contenu { position: relative; padding-block: clamp(3rem, 8vw, 5rem); }
.nh-hero__carte {
  max-width: 34rem;
  padding: clamp(1.6rem, 4vw, 2.6rem);
  background: var(--r-bg-pure, #FFFFFF);
  box-shadow: .6rem .6rem 0 var(--arc-2);
}
.nh-hero__carte h1 { margin: 0 0 .6rem; }
.nh-hero__carte .nh-h4 { margin: 0; }
@media (prefers-reduced-motion: reduce) { .nh-hero__fond video { display: none; } }

/* En-tête en image fixe : la pastille du portrait et le titre gardent leur mise en page d'origine. */
.nh-hero--image { display: block; min-height: 0; background: var(--r-bg, #FCFBFA); padding-block: clamp(3rem, 6vw, 4.5rem); }
.nh-hero--image .nh-hero__fond img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.nh-hero--image .nh-hero__voile { background: linear-gradient(90deg, rgba(236, 230, 250, .5) 0%, rgba(236, 230, 250, .18) 100%); }
.nh-hero--image .nh-hero__contenu { position: relative; }
.nh-hero--image .nh-h4 { margin: .4rem 0 0; }

/* Rangées en zigzag : deux colonnes équilibrées, photos de hauteur contenue, texte sur carte.
   Limité aux rangées qui ont une carte de texte ; le portrait du héros garde sa pastille. */
@media (min-width: 56rem) {
  .r-offset:has(> .nh-texte) {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(2rem, 4vw, 3.5rem);
    align-items: center;
  }
}
.r-offset:has(> .nh-texte) .r-offset__media img {
  width: 100%;
  height: auto;
  max-height: 30rem;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}
.r-offset > .nh-texte {
  background: var(--lavis-1, #ECE6FA);
  padding: clamp(1.5rem, 3vw, 2.4rem);
  box-shadow: .5rem .5rem 0 var(--arc-2, #58E8BF);
}
.r-offset > .nh-texte p { font-size: var(--fs-md, 1.05rem); line-height: 1.6; }
.nh-h3 + .nh-h3 { margin-top: 0; }


/* Héros : clip de la chambre, lu une seule fois, recadré pour montrer le tapis en bas du cadre. */
.nh-hero--image .nh-hero__fond video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 85%; }
@media (prefers-reduced-motion: reduce) { .nh-hero--image .nh-hero__fond video { display: none; } }

/* Nos engagements : listes, citation, accroche, source, carrés vidéo dans les rangées. */
.nh-liste { margin: 0 0 1rem; padding-left: 1.2rem; }
.nh-liste li { margin-bottom: .35rem; }
.nh-accroche { margin: .4rem 0 0; color: var(--encre-1, #6128FF); font-size: var(--fs-md, 1.05rem); }
.nh-citation { margin: 1rem 0 0; padding: 0 0 0 1rem; border-left: 3px solid var(--arc-2, #58E8BF); font-family: var(--rf-display); font-size: clamp(1.1rem, 2vw, 1.3rem); line-height: 1.45; }
.nh-citation cite { display: block; margin-top: .6rem; font-family: var(--rf-body, inherit); font-size: var(--fs-sm); font-style: normal; color: var(--r-ink-soft); }
.nh-source { font-size: var(--fs-sm); color: var(--r-ink-soft); }
.r-offset:has(> .nh-texte) .r-offset__media video { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }

/* L'anecdote : chiffres en tuiles, montés une fois par le compteur du site (data-compteur). */
.nh-chiffres { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; list-style: none; margin: 0 0 1rem; padding: 0; }
.nh-chiffres li { display: flex; flex-direction: column; gap: .2rem; padding: .9rem 1rem; background: var(--r-bg-pure, #FFFFFF); border-left: 3px solid var(--arc-2, #58E8BF); }
.nh-chiffre { font-family: var(--rf-display); font-weight: var(--rf-weight); font-variation-settings: var(--rf-settings); font-size: clamp(1.8rem, 3.4vw, 2.5rem); line-height: 1; color: var(--encre-1, #6128FF); font-variant-numeric: tabular-nums; }
.nh-chiffres li > span:last-child { font-size: var(--fs-sm); line-height: 1.35; color: var(--r-ink-soft); }
.nh-chiffres__texte { grid-column: 1 / -1; }

/* Carré vidéo dans une rangée : au-dessus du décor lilac de la photo, qui le masquait. */
.r-offset__video { position: relative; z-index: 1; }

/* Chiffres sur trois colonnes (piliers du label). */
.nh-chiffres--trois { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 40rem) { .nh-chiffres--trois { grid-template-columns: minmax(0, 1fr); } }
/* Photo et carré vidéo côte à côte dans une même rangée. */
.r-offset__media.nh-duo video { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }

/* Notre fabrication : la rangée « Origine France Garantie » passe la photo à droite,
   pour alterner avec « Fait en France » (photo à gauche). */
@media (min-width: 56rem) {
  #origine-france-garantie .r-offset > .r-offset__media { order: 2; }
}

/* « Notre seule entorse » : texte à gauche, images à droite (inverse du zigzag habituel). */
@media (min-width: 56rem) {
  .r-offset.nh-inverse > .r-offset__media { order: 2; }
}

/* Citation de presse, sans lien : le blog cité n'est plus accessible. */
.nh-citation--presse { margin: 1rem 0 0; padding: 0 0 0 1.1rem; border-left: 3px solid var(--arc-4, #FFC615); }
.nh-citation--presse p { margin: 0; font-family: var(--rf-display); font-size: clamp(1.15rem, 2vw, 1.35rem); line-height: 1.4; color: var(--r-ink); }
.nh-citation--presse cite { display: block; margin-top: .5rem; font-size: var(--fs-sm); font-style: normal; letter-spacing: .04em; color: var(--r-ink-soft); }