/* ============================================
   PAGE NOS FLEURS
   Mobile-first : les règles nues = mobile ; le bloc @media (min-width:1025px)
   en bas ne porte que les écarts desktop (même seuil que la nav).
   Le mode (isDesktop) est fixé au chargement par nos-fleurs.js : un
   redimensionnement demande un rechargement.
   ============================================ */

/* ============================================================
   VOCABULAIRE ÉDITORIAL — redéfini ici (accueil.css n'est pas chargé)
   ============================================================ */
.editorial-title {
  font-family: var(--font-serif);
  font-weight: 400;
  line-height: 1.1;
  text-wrap: balance;
  color: var(--indigo);
}

.body-text {
  font-family: var(--font-display);
  font-weight: 300;
  line-height: 1.8;
  color: var(--indigo);
  opacity: 0.82;
}

/* ============================================================
   STAGE — container-type:inline-size : référence de largeur (cqw) fixe
   pour le carrousel, sans calcul circulaire entre padding et cartes.
   Plafonné à 1600px en desktop.
   ============================================================ */
.nf-stage {
  container-type: inline-size;
}

/* ============================================================
   ÉTAT A — CARROUSEL HORIZONTAL
   Fleur centrale en gros plan, voisines grisées sur les côtés.
   Scroll-snap-x natif ; chaque carte s'anime selon sa distance au centre.
   Le nom tombe lettre par lettre à mesure que la carte approche du centre.
   ============================================================ */
.nf-intro {
  padding: 3rem 9vw 0.5rem;
  text-align: center;
}

.nf-intro .editorial-title {
  /* même échelle que .appel-phrase (production) et .ch-phrase (contact) */
  font-size: clamp(2.2rem, 7vw, 5rem);
  margin-bottom: 9rem;
}

.nf-title-line { display: block; }

.nf-intro .body-text {
  font-size: 20px;
  max-width: 28ch;
  margin: 0 auto;
}

/* paragraphe d'appel découpé en syllabes, en cascade */
.nf-syllable {
  display: inline-block;
  opacity: 0;
}

/* Lettres en chute (titre de fiche + compteur) : will-change évite le
   « pop » de rétrogradation de calque GPU quand la lettre se pose.
   Réservé à ces lettres, pas aux syllabes floutées. */
.nf-fall-letter {
  will-change: transform, opacity;
}

.nf-carousel {
  display: flex;
  flex-direction: column;
  /* Invisible jusqu'à la fin de l'anim du paragraphe (nfCarouselReveal).
     Pas de transform en mobile : combiné au scroll tactile iOS de .nf-track,
     il provoque un décalage horizontal de rendu. Desktop : voir @media plus bas. */
  opacity: 0;
  will-change: opacity, transform;
  justify-content: flex-start;
  /* hauteur mobile compacte ; desktop plus bas */
  min-height: 72vh;
  min-height: 72dvh;
  padding: 0 0 2rem;
}

/* Apparition par transition CSS (compositeur) plutôt qu'une boucle rAF,
   qui saccade sous charge. Courbe peu marquée en fin : bloc lourd (27 photos). */
.nf-carousel--in {
  transition: opacity 1.9s cubic-bezier(0.33, 1, 0.68, 1);
  opacity: 1;
}

/* translateY réservé au desktop (voir .nf-carousel) */
@media (min-width: 1025px) {
  .nf-carousel {
    transform: translateY(-22px);
  }

  .nf-carousel--in {
    transition: opacity 1.9s cubic-bezier(0.33, 1, 0.68, 1), transform 1.9s cubic-bezier(0.33, 1, 0.68, 1);
    transform: translateY(0);
  }
}

.nf-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  margin-top: 6rem;
  /* padding en cqw : référence fixe (largeur de .nf-stage) partagée avec la
     largeur des cartes, pour que la 1re et la dernière carte se centrent. */
  padding: 22px 27cqw;
}
.nf-track::-webkit-scrollbar { display: none; }

.nf-card {
  flex: 0 0 auto;
  /* carte étroite = aperçu plus large des voisines */
  width: min(46cqw, 200px);
  scroll-snap-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 3%;
}

.nf-card:focus-visible { outline: 2px solid var(--gold-dark); outline-offset: 8px; border-radius: 10px; }

/* Boîte fixe (largeur ET hauteur) : les 9 photos de ratios différents
   gardent la même taille perçue. */
.nf-card-figure {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: clamp(220px, 40vh, 300px);
}

.nf-card-figure img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  display: block;
  filter: grayscale(1);
  -webkit-mask-image: linear-gradient(to bottom, black 0%, black 78%, transparent 97%);
          mask-image: linear-gradient(to bottom, black 0%, black 78%, transparent 97%);
}

/* nom en capitales, lettre par lettre ; .nf-word (nowrap) : coupure
   toujours entre deux mots */
.nf-card-name {
  margin-bottom: 1.1rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  --nf-name-scale: 1;
}

.nf-word {
  display: inline-flex;
}

.nf-word-space {
  flex: 0 0 auto;
  width: 0.32em;
}

/* coupure forcée (« Pois de / senteur »), mobile uniquement (nos-fleurs.js) */
.nf-line-break {
  flex-basis: 100%;
  height: 0;
}

.nf-letter {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 300;
  text-transform: uppercase;
  font-size: calc(clamp(1.4rem, 7vw, 1.85rem) * var(--nf-name-scale, 1));
  color: var(--gold-dark);
  opacity: 0;
  /* garde la lettre sur son calque GPU du début à la fin (pas de « pop ») */
  will-change: transform, opacity;
}

/* rotation statique par fleur */
.nf-card--tulipe img { transform: rotate(-4deg); }
.nf-card--anemone img { transform: rotate(3deg); }
.nf-card--iris img { transform: rotate(-3deg); }
.nf-card--pivoine img { transform: rotate(2deg); }
.nf-card--pois img { transform: rotate(-5deg); }
.nf-card--lys img { transform: rotate(2deg); }
.nf-card--tournesol img { transform: rotate(-3deg); }
.nf-card--cosmos img { transform: rotate(4deg); }
.nf-card--dahlia img { transform: rotate(-3deg); }

/* ============================================================
   ÉTAT B — FICHES PLEIN ÉCRAN
   Fond fixe ; les fiches défilent dans une piste horizontale continue.
   Desktop : fleur au centre, informations à gauche. Mobile : empilé.
   ============================================================ */
.nf-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  visibility: hidden;
  opacity: 0;
  overflow: hidden;
  background: #090d1b;
  transition: opacity 0.55s var(--ease), visibility 0s linear 0.55s;
}

/* fond « encre » fixe */
.nf-overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(90% 85% at 50% 45%, rgba(25, 34, 61, 0.30), transparent 72%),
    radial-gradient(65% 55% at 15% 85%, rgba(13, 20, 39, 0.42), transparent 75%),
    radial-gradient(70% 60% at 88% 12%, rgba(18, 26, 48, 0.34), transparent 76%),
    linear-gradient(180deg, #0b1020 0%, #090d1b 55%, #070b17 100%);
  opacity: 1;
}

.nf-overlay::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.16;
  background-image:
    radial-gradient(rgba(255,255,255,0.08) 0.45px, transparent 0.55px),
    radial-gradient(rgba(0,0,0,0.20) 0.45px, transparent 0.6px);
  background-size: 7px 7px, 11px 11px;
  background-position: 0 0, 3px 5px;
  mix-blend-mode: soft-light;
}

.nf-overlay.is-open {
  visibility: visible;
  opacity: 1;
  transition: opacity 0.55s var(--ease);
}

/* fiche ouverte : burger masqué, seule la croix .nf-close reste */
body.nf-scene-open .burger {
  display: none;
}

/* Piste continue : #nfVoyageScroll scrolle verticalement, .nf-voyage-pin
   (sticky) sert de fenêtre, #nfVoyageStage glisse à l'horizontale selon
   la progression (updateSceneMotion, nos-fleurs.js). Aucun point de snap. */
.nf-voyage-scroll {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow-y: auto;
  /* adoucit le scroll natif ; neutralisé par openScene() pour le saut au clic */
  scroll-behavior: smooth;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
  background: transparent;
}

/* distance de scroll par fiche + la fenêtre, pour relâcher le pin à la fin */
.nf-voyage-track {
  /* 55vh par fiche (en dessous, la piste devient instable ; voir
     NF_STAGE_SMOOTH_SPEED). 11 fiches : 9 + 2 clones pour la boucle infinie
     (nfCloneLoopScenes). */
  height: calc(11 * 55vh + 100vh);
}

.nf-voyage-pin {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
  min-height: 620px;
  overflow: hidden;
}

.nf-voyage-stage {
  display: flex;
  height: 100%;
  /* 11 fiches (9 + 2 clones) : chaque scène = une largeur de fenêtre */
  width: 1100%;
  /* translateX écrit par le JS (--nf-stage-x) */
  transform: translate3d(var(--nf-stage-x, 0), 0, 0);
  will-change: transform;
}

.nf-scene {
  position: relative;
  flex: 0 0 calc(100% / 11);
  height: 100%;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: minmax(0, 1fr) auto auto auto minmax(0, 1fr);
  align-items: center;
  justify-items: center;
  padding: 4.8rem 8vw 3.6rem;
  text-align: center;
  overflow: hidden;
  background: transparent;
  opacity: 0;
  /* La scène ne se translate pas (c'est .nf-voyage-stage qui bouge) ; seul
     son contenu s'anime. --nf-figure-progress / --nf-text-progress ne sont
     PAS déclarées ici : sur cet ancêtre, elles forceraient le recalcul de
     style de tout le texte à chaque frame. Le JS les écrit directement sur
     .nf-figure et .nf-count. */
  transform: none;
  filter: none;
  will-change: opacity;
  /* décalage de la fleur vers la droite : 0 en mobile, 7vw en desktop.
     Déclaré sur l'ancêtre commun, lu par la fleur et les 4 blocs texte. */
  --nf-figure-shift-x: 0px;
}

/* Compteur : chiffre vertical à droite en desktop ; masqué en mobile,
   remplacé par .nf-progress. Toujours animé (plus simple que de couper sa
   cascade en mobile). */
.nf-count {
  display: none;
}

.nf-figure {
  position: relative;
  grid-row: 1;
  grid-column: 1;
  align-self: center;
  justify-self: center;
  width: 66vw;
  max-width: 340px;
  margin: 0 0 -7vh;
  /* --nf-figure-progress écrite par le JS (fallback 0) */
  transform:
    translate3d(var(--nf-figure-shift-x, 7vw), calc((1 - var(--nf-figure-progress, 0)) * 24px + 4vh), 0)
    scale(calc(0.88 + (var(--nf-figure-progress, 0) * 0.12)));
  opacity: var(--nf-figure-progress, 0);
  /* flou limité à 6px : le plus coûteux, et deux fleurs s'animent pendant
     un swipe */
  filter: blur(calc((1 - var(--nf-figure-progress, 0)) * 6px));
  will-change: transform, opacity, filter;
  transform-origin: 50% 72%;
}

.nf-figure img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  filter: drop-shadow(0 28px 34px rgba(0, 0, 0, 0.54)) drop-shadow(0 10px 18px rgba(0, 0, 0, 0.22));
  /* Tige fondue (mask-image), comme sur l'accueil. Le dégradé finit à 85% :
     .nf-figure déborde sous la scène (pire cas : pivoine, ~9%), qui coupe
     avant la fin d'un dégradé à 100%. */
  -webkit-mask-image: linear-gradient(
    to bottom,
    #000 0%,
    #000 55%,
    rgba(0, 0, 0, .82) 65%,
    rgba(0, 0, 0, .35) 75%,
    transparent 85%
  );
  mask-image: linear-gradient(
    to bottom,
    #000 0%,
    #000 55%,
    rgba(0, 0, 0, .82) 65%,
    rgba(0, 0, 0, .35) 75%,
    transparent 85%
  );
}

/* Compensation au cas par cas des photos avec beaucoup de marge
   transparente (iris, tulipe), sur l'<img> pour ne pas toucher au
   transform de .nf-figure. */
/* Classe et non id : les clones de la boucle perdent leur id. */
.nf-scene-0 .nf-figure img { transform: scale(1.45); } /* iris (+ son clone) */
.nf-scene-6 .nf-figure img { transform: scale(1.4); }  /* tulipe (+ son clone) */

/* Tournesol : il remplit tout son canevas, ombre plus légère pour éviter
   un halo. */
.nf-scene-7 .nf-figure img {
  filter: drop-shadow(0 22px 56px rgba(0, 0, 0, 0.22)) drop-shadow(0 8px 28px rgba(0, 0, 0, 0.08));
}

/* pas de halo derrière la fleur */
.nf-figure::before { display: none; }

/* Titre, latin, paragraphe (syllabes) et saison/langage (mots) : cascade
   en JS (nfBuildCascade / nfUpdateCascade). Ces conteneurs n'ont pas
   d'opacity/filter/transform propres. */

/* Mobile : fleur et texte partagent une colonne ; le texte suit le même
   décalage que la fleur (--nf-figure-shift-x). Remis à zéro en desktop. */
/* Mobile : nom latin sous le titre (grid-row 3) */
.nf-scene .nf-latin {
  grid-row: 3;
  grid-column: 1;
  font-family: var(--font-display);
  font-weight: 400;
  font-style: italic;
  font-size: 16px;
  letter-spacing: 0.14em;
  color: var(--gold);
  margin: 0.7rem 0 3rem;
  transform: translate3d(var(--nf-figure-shift-x, 7vw), 0, 0);
}

.nf-scene .nf-title {
  grid-row: 2;
  grid-column: 1;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(2.35rem, 11vw, 3.1rem);
  line-height: 1;
  color: var(--cream-light);
  letter-spacing: 0.01em;
  margin: 0.9rem 0 0;
  transform: translate3d(var(--nf-figure-shift-x, 7vw), 0, 0);
}

.nf-meta {
  grid-row: 4;
  grid-column: 1;
  display: flex;
  gap: 1.6rem;
  margin: 0 0 1.1rem;
  transform: translate3d(var(--nf-figure-shift-x, 7vw), 0, 0);
}

.nf-meta-item { text-align: left; }

/* enfant direct (>) : ne pas toucher les .nf-syllable internes */
.nf-meta-item > span {
  display: block;
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  /* même doré que .nf-latin */
  color: var(--gold);
  margin-bottom: 0.25rem;
}

.nf-meta-item strong {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: 20px;
  color: var(--cream-light);
}

/* Poppins 300, comme .body-text */
.nf-desc {
  grid-row: 5;
  grid-column: 1;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 20px;
  line-height: 1.72;
  letter-spacing: 0.01em;
  color: var(--cream-light);
  max-width: 30ch;
  margin: -4rem 0 0;
  transform: translate3d(var(--nf-figure-shift-x, 7vw), 0, 0);
}

.nf-hint {
  position: absolute;
  /* Mobile : juste au-dessus de .nf-progress. Position d'origine en desktop. */
  top: auto;
  bottom: 3.5rem;
  left: 0;
  right: 0;
  /* z-index explicite pour passer au-dessus de #nfVoyageScroll (z-index:1) */
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  /* même doré que .nf-latin */
  color: var(--gold);
  transition: opacity 0.5s var(--ease);
}

.nf-overlay.nf-scrolled .nf-hint { opacity: 0; pointer-events: none; }

.nf-close {
  position: absolute;
  top: 2.5rem;
  right: 1.6rem;
  z-index: 5;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.20);
  color: var(--cream-light);
  font-size: 15px;
  line-height: 1;
  transition: background 0.3s var(--ease), transform 0.3s var(--ease);
}

.nf-close:hover, .nf-close:focus-visible { background: rgba(255, 255, 255, 0.12); transform: scale(1.06); }

/* Mobile : 9 points de pagination en bas, point actif mis à jour par
   nfUpdateProgressDots(). Masqués en desktop. */
.nf-progress {
  position: absolute;
  bottom: 1.3rem;
  left: 0;
  right: 0;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 7px;
}

.nf-progress-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--cream-light);
  opacity: 0.28;
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}

.nf-progress-dot.is-active {
  background: var(--gold);
  opacity: 1;
  transform: scale(1.7);
}

@media (prefers-reduced-motion: reduce) {
  .nf-overlay, .nf-close {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
  .nf-card { opacity: 1 !important; transform: none !important; }
  .nf-letter { opacity: 1 !important; transform: none !important; }
  .nf-reveal { opacity: 1 !important; transform: none !important; filter: none !important; }
  .nf-syllable { opacity: 1 !important; transform: none !important; filter: none !important; }
  .nf-carousel { opacity: 1 !important; transform: none !important; filter: none !important; }
  .nf-scene { opacity: 1 !important; transform: none !important; filter: none !important; }
}

/* ------------------------------------------------------------
   Fiche — écrans peu hauts (<780px) : la grille se replie, la marge
   négative de .nf-desc ferait chevaucher le bloc saison/langage. Tailles
   resserrées, marge annulée. max-width:1024px exclut le desktop.
   ------------------------------------------------------------ */
@media (max-height: 780px) and (max-width: 1024px) {
  .nf-scene { padding: 3.4rem 7vw 2.6rem; }
  .nf-figure { width: 54vw; max-width: 230px; margin-bottom: -4vh; }
  .nf-scene .nf-title { font-size: clamp(1.85rem, 8.5vw, 2.4rem); margin-top: 0.4rem; }
  .nf-scene .nf-latin { font-size: 14px; margin: 0.5rem 0 1.4rem; }
  .nf-meta { gap: 1rem; margin-bottom: 0.7rem; }
  .nf-meta-item > span { font-size: 12px; }
  .nf-meta-item strong { font-size: 16px; }
  /* align-self:start : distance constante après saison/langage */
  .nf-desc { font-size: 14.5px; line-height: 1.58; max-width: 34ch; align-self: start; margin-top: 0.6rem; }
}

/* Très petits écrans (<640px de haut) */
@media (max-height: 640px) and (max-width: 1024px) {
  .nf-figure { width: 46vw; max-width: 185px; margin-bottom: -2vh; }
  .nf-scene .nf-title { font-size: clamp(1.7rem, 8vw, 2rem); }
  .nf-scene .nf-latin { margin: 0.4rem 0 1rem; }
  .nf-desc { font-size: 13.5px; line-height: 1.5; }
  .nf-hint { bottom: 2rem; }
}

/* indice de scroll réduit pour tenir sur une ligne sous 385px */
@media (max-width: 385px) {
  .nf-hint { font-size: 10px; letter-spacing: 0.16em; padding: 0 0.8rem; }
  .nf-hint span { white-space: nowrap; }
}

/* Tablette : titre et paragraphe d'appel agrandis */
@media (min-width: 768px) and (max-width: 1024px) {
  .nf-intro .body-text { font-size: 30px; }
}

/* ============================================================
   DESKTOP — écarts avec le mobile : fleurs plus grandes, cadre plafonné
   à 1600px, cartes qui se chevauchent (z-index en JS), nom masqué hors
   du centre.
   ============================================================ */
@media (min-width: 1025px) {
  .nf-stage {
    max-width: 1600px;
    margin: 0 auto;
  }

  .nf-close {
    top: 1.6rem;
  }

  .nf-intro .editorial-title {
    margin-bottom: 15rem;
  }

  .nf-intro .body-text {
    font-size: 50px;
    font-weight: 250;
  }

  .nf-carousel {
    /* scène bien remplie pendant le swipe (sinon le footer apparaît) */
    min-height: 140vh;
    min-height: 150dvh;
    padding: 7rem 0 2rem;
  }

  .nf-track {
    padding: 22px 16.5cqw;
    /* fleurs grisées fondues en bord de cadre */
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
            mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
  }

  .nf-card {
    /* plafonné à 850px */
    width: min(67cqw, 850px);
    /* marge négative : rapproche les cartes pour que la fleur voisine entre
       dans le champ ; la carte centrale passe au-dessus (z-index en JS) */
    margin: 0 -70px;
    position: relative;
  }

  .nf-card-figure {
    height: clamp(420px, 48vh, 640px);
  }

  .nf-card-name {
    margin-bottom: 1.8rem;
  }

  .nf-letter {
    font-size: calc(clamp(1.9rem, 3.4cqw, 2.7rem) * var(--nf-name-scale, 1));
  }

  .nf-scene {
    padding: 5rem 9vw 4rem;
    /* décalage desktop de la fleur */
    --nf-figure-shift-x: 7vw;
  }

  .nf-figure {
    width: min(34vw, 520px);
    max-width: 520px;
    margin-bottom: 1.5rem;
  }

  .nf-scene .nf-title {
    font-size: clamp(3rem, 5vw, 5rem);
    margin-bottom: 1.2rem;
  }

  .nf-desc {
    max-width: 48ch;
    font-size: 18px;
  }

  /* ------------------------------------------------------------
     FICHE DESKTOP : fleur au centre, infos à gauche
     ------------------------------------------------------------ */
  .nf-scene {
    grid-template-columns: minmax(300px, 0.9fr) minmax(420px, 1.15fr) minmax(80px, 0.25fr);
    /* 1fr haut/bas : centrent les 4 rangées de texte */
    grid-template-rows: 1fr auto auto auto auto 1fr;
    column-gap: 2rem;
    padding: 5rem 8vw 4rem;
    text-align: left;
    /* aligne aussi les cases sur le bord gauche (sinon chaque bloc est
       centré dans sa colonne) */
    justify-items: start;
  }

  .nf-count {
    /* chiffre vertical à droite, même taille que .nf-title */
    display: block;
    position: absolute;
    top: 50%;
    right: 2.2rem;
    transform: translateY(-50%);
    writing-mode: vertical-rl;
    text-orientation: mixed;
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 500;
    font-size: clamp(3.5rem, 5.4vw, 5.8rem);
    letter-spacing: 0.04em;
    color: var(--cream-light);
  }

  /* pas de pagination en desktop */
  .nf-progress {
    display: none;
  }

  /* position d'origine de l'indice en desktop */
  .nf-hint {
    top: auto;
    bottom: 1.3rem;
    right: 0;
    font-size: 10px;
  }

  .nf-figure {
    grid-column: 2;
    grid-row: 1 / 7;
    width: min(42vw, 620px);
    max-width: 620px;
    margin: 0 0 -10vh;
  }

  /* Ordre : nom, latin, saison/langage, paragraphe. transform:none annule
     le décalage mobile. */
  .nf-scene .nf-title {
    grid-column: 1;
    grid-row: 2;
    align-self: end;
    font-size: clamp(3.5rem, 5.4vw, 5.8rem);
    line-height: 0.95;
    margin: 0 0 0.7rem;
    transform: none;
  }

  .nf-scene .nf-latin {
    grid-column: 1;
    grid-row: 3;
    align-self: start;
    margin: 0 0 1.6rem;
    transform: none;
  }

  .nf-meta {
    grid-column: 1;
    grid-row: 4;
    align-self: start;
    margin: 0;
    transform: none;
  }

  .nf-meta-item > span {
    font-size: 15px;
  }

  .nf-meta-item strong {
    font-size: 23px;
  }

  .nf-desc {
    grid-column: 1;
    grid-row: 5;
    align-self: start;
    max-width: 38ch;
    font-size: 18px;
    line-height: 1.75;
    margin-top: 1.4rem;
    transform: none;
  }

}