/* ==========================================================================
   northface.css — page NORTH FACE (reprise de l'ancien site Framer)
   Le menu de fin du site (le même que sur les autres pages) se pose dans le bandeau noir
   de bas de page de Framer, à la place de l'ancien menu (masqué par ui-framer.js).
   ========================================================================== */
.mg-fin { position: absolute; left: 0; right: 0; top: 0; height: 155px; z-index: 50; pointer-events: none; }
.mg-fin .fin { position: absolute; left: 50%; top: 38%; width: min(84vw, 1200px); transform: translate(-50%, -50%); background: none; padding: 0; margin: 0; }
.mg-fin .fin__menu { display: flex; align-items: center; gap: 1ch; white-space: nowrap; color: #ededea; pointer-events: auto;
  font: 400 clamp(9px, .58vw, 11px)/1 "Plex Mono", "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace; letter-spacing: .08em; text-transform: uppercase; }
.mg-fin .fin__menu > i { flex: 1; min-width: 2ch; height: 1em; background: radial-gradient(circle, rgba(237,237,234,.35) .7px, transparent 1px) 0 60% / 5px 5px repeat-x; }
.mg-fin .fin__item { position: relative; }
.mg-fin .fin__titre { color: #ededea; background: none; border: 0; padding: 0; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; text-decoration: none; }
.mg-fin .fin__menu:has(.est-ouverte) .fin__item:not(.est-ouverte) .fin__titre { color: rgba(237,237,234,.45); }
.mg-fin .fin__sous { position: absolute; left: 0; top: 100%; white-space: nowrap; list-style: none; margin: 0; padding: 10px 0 0; min-width: 28ch; display: none; }
.mg-fin .fin__item.est-ouverte .fin__sous { display: block; }
.mg-fin .fin__item--droite .fin__sous { left: auto; right: 0; }
.mg-fin .fin__sous li { min-height: 1.8em; }
.mg-fin .fin__sous a { display: flex; white-space: pre; color: rgba(237,237,234,.55); line-height: 1.8; text-decoration: none; }
.mg-fin .fin__sous a:hover { color: #ededea; }
.mg-fin .fin__sous .sous__qte { color: #ededea; }
.mg-fin a[aria-disabled="true"] { cursor: default; pointer-events: none; }
@media (max-width: 760px) {
  .mg-fin .fin { width: 92vw; top: 30%; }
  .mg-fin .fin__menu { flex-wrap: wrap; row-gap: 12px; white-space: normal; justify-content: center; }
  .mg-fin .fin__menu > i { flex-basis: 2ch; }
}

/* la page est blanche : le lecteur et le menu ticket (clairs, faits pour les pages sombres) s'inversent selon le fond */
.ui143 .lecteur, .ui143 .ticket { mix-blend-mode: difference; }

/* l'ancien lecteur Framer (bouton rond en haut à gauche) : remplacé par celui du site */
.framer-4x1uag { visibility: hidden !important; pointer-events: none !important; }

/* téléphone : l'ancien menu de bas de page Framer (« MENU PHONE »), remplacé par celui du site */
.framer-1dkuxk9 { visibility: hidden !important; pointer-events: none !important; }
@media (max-width: 760px) { .mg-fin .fin { top: 50%; } .mg-fin .fin__menu { row-gap: 8px; } }

/* ==========================================================================
   Galerie « magazine » (nf-galerie.js) — remplace le bloc Framer « IMAGES » sur ordinateur.
   Double page épinglée par-dessus la vidéo de l'herbe : textes à gauche sur page blanche,
   photo à droite ; le défilement fait passer d'une photo à l'autre.
   ========================================================================== */
.nfg-actif [data-framer-name="IMAGES"] { visibility: hidden !important; }
.nfg-texte { opacity: var(--nfg-op, 1) !important; }
/* les textes Framer de cette partie (TEXTE 1, 2, 3) sont repris dans la galerie : on ne les montre plus du tout */
.nfg-actif #main [data-framer-name^="TEXTE"] { opacity: 0 !important; visibility: hidden !important; }
.nfg { position: absolute; left: 0; width: 100%; z-index: 7; pointer-events: none;
  --encre: #ffffff; --mono: "Plex Mono", "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --sans: "Helvetica Neue", "Inter", Arial, sans-serif; --ease: cubic-bezier(.7,0,.2,1); }
.nfg__epingle { position: sticky; top: 0; height: 100vh; overflow: hidden; }
/* toute la page : textes à gauche, photo à droite, directement sur la vidéo de l'herbe */
.nfg__planche { position: absolute; inset: 0; display: flex; pointer-events: auto; color: var(--encre); will-change: transform; }
.nfg__epingle::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: var(--voile, 0);   /* léger voile à gauche (fixe, il apparaît avec la galerie) : le texte reste lisible sur l'herbe */
  background: linear-gradient(90deg, rgba(4,10,9,.55) 0%, rgba(4,10,9,.25) 38%, rgba(4,10,9,0) 60%); }

.nfg__gauche { position: relative; width: 40%; padding: 15vh 3vw 7vh 7vw; box-sizing: border-box; display: flex; flex-direction: column; text-shadow: 0 1px 14px rgba(0,0,0,.25); }
.nfg__meta { display: flex; justify-content: space-between; gap: 2ch; font: 400 10px/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.nfg__meta--fixe { opacity: .55; }
.nfg__textes { position: relative; flex: 1; margin-top: 2.4vw; }
.nfg__texte { position: absolute; inset: 0; display: flex; flex-direction: column; opacity: 0; transform: translateY(14px);
  transition: opacity .5s ease, transform .7s var(--ease); pointer-events: none; }
.nfg__texte.est-actif { opacity: 1; transform: none; transition-delay: .18s; pointer-events: auto; }
.nfg__titre { font: 500 clamp(34px, 3.6vw, 72px)/.95 var(--sans); letter-spacing: -.04em; margin: auto 0 0; }
.nfg__chapo { font: 400 clamp(15px, 1.25vw, 23px)/1.22 var(--sans); letter-spacing: -.012em; margin: 1.6vw 0 0; text-indent: 4.5vw; max-width: 30em; }
.nfg__texte .nfg__meta + .nfg__chapo { margin-top: auto; }
.nfg__note { font: 400 10px/1.45 var(--mono); letter-spacing: .03em; text-transform: uppercase; opacity: .65; margin: 1.4vw 0 0; }
.nfg__pied { display: flex; align-items: center; gap: 1.2vw; margin-top: 2vw; font: 400 10px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.nfg__compte b { font-weight: 400; }
.nfg__barre { position: relative; flex: 1; height: 1px; background: rgba(255,255,255,.25); }
.nfg__barre i { position: absolute; inset: 0; background: #fff; transform-origin: 0 50%; transform: scaleX(.02); transition: transform .4s var(--ease); }

/* colonne de photos (comme un défilement vertical) : la photo du centre grande et nette, entière (jamais
   recadrée), entourée de repères d'angle ; les voisines petites et floues. Positions calculées par nf-galerie.js */
.nfg__droite { position: relative; width: 60%; overflow: hidden; }
.nfg__photo { position: absolute; left: 50%; top: 50%; transform-origin: 50% 50%; will-change: transform, filter, opacity; }
.nfg__photo img { display: block; width: 100%; height: 100%; object-fit: contain; }
.nfg__cadre { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); z-index: 101; pointer-events: none;
  --c: rgba(255,255,255,.9); --l: 14px;
  background:
    linear-gradient(var(--c),var(--c)) 0 0 / var(--l) 1px, linear-gradient(var(--c),var(--c)) 0 0 / 1px var(--l),
    linear-gradient(var(--c),var(--c)) 100% 0 / var(--l) 1px, linear-gradient(var(--c),var(--c)) 100% 0 / 1px var(--l),
    linear-gradient(var(--c),var(--c)) 0 100% / var(--l) 1px, linear-gradient(var(--c),var(--c)) 0 100% / 1px var(--l),
    linear-gradient(var(--c),var(--c)) 100% 100% / var(--l) 1px, linear-gradient(var(--c),var(--c)) 100% 100% / 1px var(--l);
  background-repeat: no-repeat; }
/* téléphone : même galerie, empilée et réduite — la colonne de photos en haut, le texte en dessous */
@media (max-width: 1199.98px) {
  /* hauteur réellement visible (barres du navigateur comprises) : rien n'est coupé en bas */
  .nfg__epingle { height: 100vh; height: 100svh; }
  .nfg__planche { flex-direction: column; }
  .nfg__epingle::before { background: linear-gradient(0deg, rgba(4,10,9,.7) 0%, rgba(4,10,9,.4) 42%, rgba(4,10,9,.18) 70%, rgba(4,10,9,.1) 100%); }
  .nfg__droite { order: -1; width: 100%; height: 47svh; flex: none; margin-top: 9svh; }
  .nfg__gauche { width: 100%; flex: 1; min-height: 0; padding: 2svh 6vw 3svh; }
  .nfg__meta { font-size: 8.5px; }
  .nfg__textes { margin-top: 1.2svh; }
  .nfg__texte { justify-content: flex-start; }
  .nfg__titre { font-size: 24px; margin: 1.2svh 0 0; }
  .nfg__chapo, .nfg__texte .nfg__meta + .nfg__chapo { font-size: 13px; line-height: 1.3; margin: 1svh 0 0; text-indent: 8vw; }
  .nfg__note { font-size: 8.5px; margin-top: 1svh; }
  .nfg__pied { gap: 3vw; margin-top: 1.2svh; font-size: 8.5px; }
  .nfg__cadre { --l: 10px; }
}