/* ==========================================================================
   Nouvelle France — assets/css/nf.css
   Recréation du prototype de maquette (fidélité haute).
   Tokens repris de la charte LFI (couleurs/typo) + valeurs UI du système.
   ========================================================================== */

:root{
  /* Palette 2027 */
  --lfi-violet-2027:#4C0297; --lfi-rouge-2027:#D1271C;
  --lfi-creme-2027:#FFFCF4;  --lfi-charbon-2027:#212320;
  /* Accents web */
  --lfi-violet-web:#7B13D6; --lfi-rouge-web:#F91616; --lfi-bleu-web:#3885F4;
  --lfi-rose-web:#ED5FB1;   --lfi-jaune-web:#F9C900;  --lfi-vert-web:#2E9959;
  /* Neutres */
  --lfi-white:#fff; --lfi-neutral-100:#F1EFE9; --lfi-neutral-200:#E2DFD6;
  --lfi-neutral-400:#9C978C; --lfi-neutral-600:#5C594F;
  /* Sémantique */
  --color-bg-page:var(--lfi-creme-2027);
  --color-bg-inverse:var(--lfi-charbon-2027);
  --color-text-primary:var(--lfi-charbon-2027);
  --color-text-muted:var(--lfi-neutral-600);
  --color-border-default:var(--lfi-neutral-200);
  --color-brand-primary:var(--lfi-violet-2027);
  /* Radii / ombres / motion */
  --radius-md:12px; --radius-lg:20px; --radius-pill:999px;
  --shadow-sm:0 1px 2px rgba(33,35,32,.08);
  --shadow-md:0 4px 16px rgba(33,35,32,.10);
  --ease-standard:cubic-bezier(.4,0,.2,1);
  /* Type */
  --font-display:"Public Sans","Arial Black",sans-serif;
  --font-body:"Gowun Batang",Georgia,serif;
}

/* ---- Base ---- */
.nf *{box-sizing:border-box}
.nf{font-family:var(--font-body);color:var(--color-text-primary);background:var(--color-bg-page);overflow-x:hidden}
.nf h1,.nf h2,.nf h3{font-family:var(--font-display);font-weight:900;text-transform:uppercase;letter-spacing:-.02em;margin:0}
.nf img{max-width:100%}
.nf a{color:var(--lfi-violet-2027)}
/* Les boutons-liens gardent leur couleur propre (sinon .nf a l'emporterait). */
.nf a.nf-btn--primary{color:#fff}
.nf a.nf-btn--secondary,.nf a.nf-btn--jaune{color:var(--lfi-charbon-2027)}
.nf ::selection{background:var(--lfi-jaune-web);color:var(--lfi-charbon-2027)}
.nf-imgph{display:flex;align-items:center;justify-content:center;background:repeating-linear-gradient(45deg,var(--lfi-neutral-100),var(--lfi-neutral-100) 12px,var(--lfi-neutral-200) 12px,var(--lfi-neutral-200) 24px);color:var(--lfi-neutral-400);font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:.8rem;width:100%;height:100%}
.nf-eyebrow{font-family:var(--font-display);font-weight:700;font-size:.75rem;letter-spacing:.16em;text-transform:uppercase}
.nf-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--font-display);font-weight:800;text-transform:uppercase;letter-spacing:.06em;text-decoration:none;border:none;cursor:pointer;border-radius:var(--radius-pill);padding:13px 26px;font-size:.9rem}
.nf-btn--primary{background:var(--lfi-violet-2027);color:#fff}
.nf-btn--secondary{background:transparent;color:var(--lfi-charbon-2027);border:2px solid var(--lfi-charbon-2027)}
.nf-btn--jaune{background:var(--lfi-jaune-web);color:var(--lfi-charbon-2027)}
.nf-badge{display:inline-block;font-family:var(--font-display);font-weight:700;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;padding:6px 12px;border-radius:var(--radius-pill);color:#fff}

/* ---- Header ---- */
.nf-header{position:fixed;top:0;left:0;right:0;z-index:1000;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:13px clamp(16px,4vw,44px);background:rgba(255,252,244,.88);backdrop-filter:blur(12px);border-bottom:1px solid var(--color-border-default)}
.nf-header__logo img{height:46px;width:auto;display:block}
.nf-nav{display:flex;gap:26px;align-items:center}
.nf-navlink{position:relative;font-family:var(--font-display);font-weight:700;font-size:.9rem;color:var(--color-text-primary);text-decoration:none;padding:6px 2px;white-space:nowrap}
.nf-navlink:hover,.nf-navlink.is-active{color:var(--color-brand-primary)}
.nf-navlink.is-active::after{content:"";position:absolute;left:0;right:0;bottom:-5px;height:3px;background:var(--lfi-jaune-web);border-radius:2px}
.nf-menu-btn{display:none;background:none;border:none;cursor:pointer;padding:6px}
.nf-mobile{position:fixed;inset:0;z-index:1500;background:var(--color-bg-inverse);flex-direction:column;padding:24px clamp(16px,6vw,40px);display:none}
.nf-mobile.is-open{display:flex}
.nf-mobile a{font-family:var(--font-display);font-weight:800;font-size:2rem;color:var(--lfi-creme-2027);text-decoration:none;padding:14px 0;border-bottom:1px solid rgba(255,252,244,.14)}
@media(max-width:960px){.nf-nav{display:none}.nf-menu-btn{display:inline-flex}}

/* ---- Section 1 : hero ---- */
.nf-hero{scroll-margin-top:70px;min-height:100vh;background:linear-gradient(120deg,var(--lfi-violet-2027) 0%,#2c0a56 52%,var(--lfi-charbon-2027) 100%);color:var(--lfi-creme-2027);display:grid;grid-template-columns:1.05fr 1fr;align-items:center;gap:clamp(24px,4vw,64px);padding:110px clamp(20px,5vw,72px) 70px;position:relative;overflow:hidden}
.nf-hero--bg{background-color:var(--color-bg-inverse)}
.nf-hero--bg .nf-hero__glow{opacity:.22}
.nf-hero__glow{position:absolute;top:-120px;left:-120px;width:420px;height:420px;border-radius:50%;background:var(--lfi-violet-2027);filter:blur(30px);opacity:.32;pointer-events:none}
.nf-hero__text{position:relative;max-width:620px;display:flex;flex-direction:column;gap:22px}
.nf-hero h1{font-size:clamp(2.4rem,5vw,4.2rem);line-height:.96}
.nf-hero h1 .accent{color:var(--lfi-jaune-web)}
/* Surtitre du H1 (nf_hero_kicker()) : style eyebrow des autres sections. */
.nf-hero__kicker{display:none;margin-bottom:18px;color:var(--lfi-jaune-web);line-height:1.5}
.nf-hero__slogan{display:block}
.nf-hero__lede{font:400 1.15rem/1.6 var(--font-body);color:rgba(255,252,244,.82);max-width:520px}
.nf-hero__media{position:relative;width:100%;aspect-ratio:16/9;border-radius:var(--radius-lg);overflow:hidden;box-shadow:0 30px 70px rgba(0,0,0,.5);border:1px solid rgba(255,252,244,.12);background:#000}
.nf-hero__media iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.nf-play{position:absolute;inset:0;width:100%;height:100%;border:none;cursor:pointer;background:linear-gradient(180deg,rgba(33,35,32,.15),rgba(33,35,32,.55));display:flex;align-items:center;justify-content:center}
.nf-play span{width:84px;height:84px;border-radius:50%;background:var(--lfi-rouge-2027);display:flex;align-items:center;justify-content:center;box-shadow:0 12px 34px rgba(209,39,28,.5)}
.nf-scrollcue{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);background:none;border:none;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:4px;color:rgba(255,252,244,.7)}
.nf-scrollcue img{filter:invert(1);opacity:.8;animation:nf-bob 1.8s var(--ease-standard) infinite}
@keyframes nf-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(9px)}}

/* ---- Carrousels horizontaux (sections 2 & 4) ---- */
.nf-hsection{scroll-margin-top:70px;position:relative;height:100vh;min-height:640px;display:flex;align-items:center;overflow:hidden}
.nf-hsection--mil{background:var(--lfi-white)}
.nf-hsection--cre{background:var(--color-bg-inverse)}
/* Snap « mandatory » : indispensable au glisser tactile (mobile) pour caler
   franchement un article par swipe (avec .nf-panel scroll-snap-stop:always).
   Les flèches, elles, ne sont pas bloquées car step() (nf.js) désactive le snap
   le temps du scrollBy programmatique puis le rétablit. */
/* overscroll-behavior-x:contain — au bord gauche/droite, le geste ne « déborde »
   pas vers la navigation précédent/suivant du navigateur : on reste dans la section. */
.nf-hrow{display:flex;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;width:100%;height:100%;cursor:grab;touch-action:pan-x pan-y}
.nf-hrow:active{cursor:grabbing}
.nf-hrow::-webkit-scrollbar{height:0}
.nf-panel{flex:0 0 auto;width:100vw;height:100%;scroll-snap-align:start;scroll-snap-stop:always}
.nf-panel--intro{display:flex;flex-direction:column;justify-content:center;padding:0 clamp(24px,7vw,120px)}
.nf-panel--split{display:grid;grid-template-columns:1fr 1fr}
.nf-panel--split .nf-pad{display:flex;flex-direction:column;justify-content:center;padding:0 clamp(24px,6vw,110px)}
/* La photo remplit sa colonne et reste centrée verticalement (object-fit:cover),
   comme le placeholder — au lieu de se caler en haut à sa taille naturelle. */
.nf-panel--split img{width:100%;height:100%;object-fit:cover}
.nf-panel h2{font-size:clamp(3rem,8vw,7rem);line-height:.92}
.nf-panel h3{font-size:clamp(2rem,4vw,3.4rem);margin:6px 0 16px}
.nf-panel .nf-num{font-family:var(--font-display);font-weight:900;font-size:clamp(3.5rem,6vw,6rem);line-height:1;color:var(--lfi-neutral-200)}
.nf-panel p{font:400 1.15rem/1.6 var(--font-body);max-width:44ch;margin:0}
.nf-drag-hint{margin-top:34px;display:flex;align-items:center;gap:12px;font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:.1em;font-size:.85rem}
.nf-harrow{position:absolute;top:50%;transform:translateY(-50%);z-index:5;width:54px;height:54px;border-radius:50%;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 24px rgba(0,0,0,.28);transition:transform .2s var(--ease-standard),opacity .2s var(--ease-standard)}
.nf-harrow:hover{transform:translateY(-50%) scale(1.08)}
.nf-harrow[disabled]{opacity:.25;cursor:default;pointer-events:none}
.nf-harrow--prev{left:16px}.nf-harrow--next{right:16px}
.nf-harrow img{width:26px;height:26px}
/* section 2 : fonds blancs, flèches violettes */
.nf-hsection--mil .nf-panel--intro{color:var(--lfi-charbon-2027)}
.nf-hsection--mil .nf-panel--split{background:var(--lfi-white)}
.nf-hsection--mil .nf-harrow{background:var(--lfi-violet-2027)}
.nf-hsection--mil .nf-harrow img{filter:invert(1)}
/* section 4 : fond charbon, cartes image plein cadre */
.nf-hsection--cre{color:var(--lfi-creme-2027)}
.nf-panel--photo{position:relative;background:var(--lfi-charbon-2027)}
.nf-panel--photo .nf-imgph,.nf-panel--photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.nf-panel--photo .nf-overlay{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:clamp(30px,6vw,90px)}
.nf-hsection--cre .nf-harrow{background:var(--lfi-creme-2027)}
@media(max-width:760px){
  .nf-panel--split{grid-template-columns:1fr;grid-template-rows:42% 58%}
  .nf-panel--split .nf-pad{padding:clamp(24px,7vw,40px)}
  .nf-harrow{display:none}
}

/* ---- Section 3 : carte ---- */
.nf-carte{scroll-margin-top:70px;display:grid;grid-template-columns:1fr 1fr;min-height:88vh}
.nf-carte__intro{background:var(--lfi-jaune-web);color:var(--lfi-charbon-2027);display:flex;flex-direction:column;justify-content:center;padding:clamp(40px,6vw,96px)}
.nf-carte__intro h2{font-size:clamp(2.2rem,4.5vw,3.8rem);line-height:1;margin-bottom:20px}
.nf-carte__intro p{font:400 1.15rem/1.6 var(--font-body);max-width:46ch;margin:0 0 24px}
.nf-carte__map{position:relative;min-height:52vh}
#nf-map{position:absolute;inset:0;width:100%;height:100%;background:var(--lfi-neutral-100)}
.leaflet-container{font-family:var(--font-body)!important}

/* ---- Section 5 : médias ---- */
.nf-medias{scroll-margin-top:70px;padding:clamp(44px,6vw,80px) clamp(20px,5vw,72px);background:var(--color-bg-page)}
.nf-wrap{max-width:1200px;margin:0 auto}
.nf-sec-head{margin-bottom:clamp(40px,6vw,72px);max-width:640px}
/* Section 5 : version compacte pour tenir dans le viewport (en-tête + image
   moins hauts) — évite que le bas de la carte passe sous le pli. */
.nf-medias .nf-sec-head{margin-bottom:clamp(20px,3.2vw,40px)}
.nf-medias .nf-sec-head h2{font-size:clamp(2rem,3.6vw,3rem)}

.nf-sec-head h2{font-size:clamp(2.2rem,4.5vw,3.8rem);line-height:1;margin-top:12px}
.nf-media-row{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(24px,4vw,64px);align-items:center}
/* display:block indispensable : all:unset repasse le <button> en inline, où
   aspect-ratio et overflow sont ignorés → l'image prenait sa hauteur naturelle
   et débordait. L'image remplit ensuite le cadre 16/10 (object-fit:cover). */
.nf-media-row__img{all:unset;display:block;width:100%;cursor:pointer;position:relative;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-md);aspect-ratio:16/10;max-height:min(48vh,420px)}
.nf-media-row__img img,.nf-media-row__img .nf-imgph{display:block;width:100%;height:100%;object-fit:cover}
.nf-media-row h3{font-size:clamp(1.8rem,3.4vw,2.8rem);margin:14px 0 12px}
.nf-media-row p{font:400 1.15rem/1.6 var(--font-body);color:var(--color-text-muted);max-width:44ch;margin:0 0 22px}
@media(max-width:900px){.nf-media-row{grid-template-columns:1fr}.nf-media-row__txt{order:2}.nf-media-row__img{order:1}}

/* ---- Section 6 & 7 : lignes scrollables ---- */
.nf-oneline{display:flex;gap:22px;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;padding-bottom:8px}
.nf-oneline::-webkit-scrollbar{height:8px}
.nf-oneline::-webkit-scrollbar-thumb{background:var(--lfi-neutral-200);border-radius:99px}
.nf-sinformer{scroll-margin-top:70px;padding:clamp(64px,9vw,130px) clamp(20px,5vw,72px);background:var(--lfi-neutral-100)}
.nf-logo{flex:0 0 auto;width:210px;scroll-snap-align:start;display:flex;flex-direction:column;gap:14px;align-items:center;justify-content:center;background:var(--lfi-white);border:1px solid var(--color-border-default);border-radius:var(--radius-md);padding:28px 20px;text-decoration:none;min-height:170px;box-shadow:var(--shadow-sm);transition:filter .28s,opacity .28s,transform .28s,box-shadow .28s}
.nf-logogrid:hover .nf-logo{filter:blur(2.5px);opacity:.5;transform:scale(.97)}
/* Anneau jaune en « inset » : dans un conteneur scrollable (overflow-x:auto),
   un box-shadow externe est rogné — en particulier sur la 1re carte, que le
   scroll-snap colle au bord du scrollport. En inset il reste toujours visible,
   quelle que soit la position de scroll. */
.nf-logogrid .nf-logo:hover{filter:none;opacity:1;transform:scale(1.05);border-color:var(--lfi-jaune-web);box-shadow:inset 0 0 0 2px var(--lfi-jaune-web),0 16px 34px rgba(76,2,151,.22)}
.nf-logo span{font-family:var(--font-display);font-weight:700;font-size:.92rem;color:var(--color-text-primary);text-align:center}
/* Section 6 : cartes centrées (« safe » = alignées au début si elles débordent,
   donc jamais coupées), + marge interne pour l'anneau de survol (scale + ombre)
   qui était rogné par l'overflow — notamment en haut et sur la 1re carte à gauche. */
/* scroll-padding : sans lui, le scroll-snap cale la 1re carte sur le bord du
   scrollport et « mange » le padding gauche du conteneur (scrollLeft=16 au
   repos), collant la carte au bord. */
.nf-logogrid{justify-content:safe center;padding:24px 16px;scroll-padding:0 16px}
/* Pleine hauteur (cohérence avec les sections 3, 5 & 6) : contenu centré
   verticalement, padding vertical resserré pour tenir dans un écran.
   width:100% sur .nf-wrap : en flex column, il se rétracterait sinon à la
   largeur de son contenu (cf. section 5). */
.nf-actus{scroll-margin-top:70px;min-height:100vh;display:flex;flex-direction:column;justify-content:center;padding:clamp(72px,10vh,110px) clamp(20px,5vw,72px) clamp(32px,5vh,56px);background:var(--color-bg-page)}
.nf-actus .nf-wrap{width:100%}
.nf-actu-card{flex:0 0 auto;width:min(84vw,340px);scroll-snap-align:start;text-decoration:none;color:inherit;background:var(--lfi-white);border-radius:var(--radius-md);overflow:hidden;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;transition:transform .25s var(--ease-standard);border: 1px solid var(--color-border-default);}
.nf-actu-card:hover{transform:translateY(-6px)}
.nf-actu-card img,.nf-actu-card .nf-imgph{width:100%;height:180px;object-fit:cover;background: var(--lfi-neutral-100);}
.nf-actu-card__body{padding:18px 20px 22px;display:flex;flex-direction:column;gap:12px}
.nf-actu-card h3{font:700 1.05rem/1.35 var(--font-display);text-transform:none;letter-spacing:0}
.nf-actu-card p{font:400 .875rem/1.55 var(--font-body);color:var(--color-text-muted);margin:0}
.nf-actu-card time{font-family:var(--font-display);font-weight:700;font-size:.72rem;text-transform:uppercase;color:var(--lfi-neutral-400)}
.nf-actu-card__cta{font-family:var(--font-display);font-weight:800;font-size:.78rem;letter-spacing:.04em;text-transform:uppercase;color:var(--lfi-violet-2027)}

/* ---- Footer ---- */
.nf-footer{background:var(--lfi-violet-2027);color:var(--lfi-creme-2027);padding:clamp(44px,6vw,72px) clamp(20px,5vw,72px) 32px}
.nf-footer__inner{max-width:1100px;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:26px;text-align:center}
.nf-footer__logo img{height:44px;width:auto}
.nf-footnav{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 26px}
.nf-footnav ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:8px 26px}
.nf-footnav li{margin:0}
.nf-footnav a{font-family:var(--font-display);font-weight:700;font-size:.85rem;text-transform:uppercase;color:rgba(255,252,244,.8);text-decoration:none}
.nf-social{display:flex;gap:12px}
.nf-social a{width:42px;height:42px;border-radius:50%;background:rgba(255,252,244,.08);display:flex;align-items:center;justify-content:center;border:1px solid rgba(255,252,244,.16)}
.nf-social img{width:19px;height:19px;opacity:.85}
.nf-footer__legal{max-width:1100px;margin:30px auto 0;padding-top:22px;border-top:1px solid rgba(255,252,244,.14);display:flex;justify-content:center;gap:8px 20px;flex-wrap:wrap;font:400 .875rem/1.55 var(--font-body);color:rgba(255,252,244,.5)}

/* ---- Reveal au scroll ---- */
.nf [data-anim]{opacity:0;transform:translateY(28px);transition:opacity .7s var(--ease-standard),transform .7s var(--ease-standard)}
.nf [data-anim].is-in{opacity:1;transform:none}
/* Variante sans JS pour le hero (au-dessus de la ligne de flottaison) : même
   mouvement, joué dès l'affichage — le LCP n'attend plus nf.js. */
@keyframes nf-in{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
.nf .nf-in{animation:nf-in .7s var(--ease-standard) var(--nf-in-delay,0ms) both}

@media(max-width:900px){
  .nf-hero{grid-template-columns:1fr;padding-top:104px;padding-bottom:56px;min-height:auto}
  .nf-carte{grid-template-columns:1fr}
  .nf-carte__map{min-height:56vh;order:2}
  .nf-scrollcue{display:none}
}
@media(prefers-reduced-motion:reduce){
  .nf-hrow{scroll-behavior:auto}
  .nf-scrollcue img{animation:none}
  .nf [data-anim]{transition:none}
  .nf .nf-in{animation:none}
}

/* ---- Galerie modale ---- */
.nf-gallery{position:fixed;inset:0;z-index:2000;background:rgba(10,10,10,.94);backdrop-filter:blur(6px);display:none;flex-direction:column;padding:clamp(14px,3vw,40px);gap:16px}
.nf-gallery.is-open{display:flex}
.nf-gallery__bar{display:flex;align-items:center;justify-content:space-between;gap:16px;color:var(--lfi-creme-2027)}
.nf-gallery__title{font-family:var(--font-display);font-weight:900;text-transform:uppercase;font-size:clamp(1.1rem,2.4vw,1.7rem);margin:0}
.nf-gallery__pos{font:400 .875rem/1.55 var(--font-body);color:rgba(255,252,244,.6)}
.nf-gallery__close{width:46px;height:46px;border-radius:50%;background:rgba(255,252,244,.1);border:1px solid rgba(255,252,244,.2);cursor:pointer;display:flex;align-items:center;justify-content:center}
.nf-gallery__stage{flex:1;display:flex;align-items:center;gap:14px;min-height:0}
/* min-width:0 : sans lui, l'<img> flex garde un min-width intrinsèque (largeur
   dérivée de max-height × ratio pour un paysage) qui l'empêche de rétrécir sous
   l'espace libre entre les flèches → débordement/chevauchement aux largeurs
   moyennes (~600-1120px). Avec min-width:0, la boîte tient dans la piste flex. */
.nf-gallery__stage img.nf-gallery__img{flex:1 1 0;min-width:0;max-width:100%;max-height:100%;object-fit:contain;border-radius:var(--radius-md);box-shadow:0 20px 60px rgba(0,0,0,.6)}
.nf-gallery__prev,.nf-gallery__next{flex:0 0 auto;width:52px;height:52px;border-radius:50%;background:rgba(255,252,244,.1);border:1px solid rgba(255,252,244,.2);cursor:pointer;display:flex;align-items:center;justify-content:center}
.nf-gallery__foot{display:flex;justify-content:flex-end;gap:12px}
/* « Imprimer » : le secondaire par défaut (charbon) serait illisible sur le fond
   sombre de la modale → variante claire, alignée sur les autres contrôles. */
.nf .nf-gallery__print{background:rgba(255,252,244,.1);color:var(--lfi-creme-2027);border:1px solid rgba(255,252,244,.2)}
.nf .nf-gallery__print:hover{border-color:var(--lfi-jaune-web);color:var(--lfi-jaune-web)}

/* Mobile : les flèches encadraient l'image dans la rangée flex et la
   compressaient en une bande étroite. On les superpose (overlay) sur les bords
   de la scène pour que l'image occupe toute la largeur ; cibles tactiles ≥44px. */
@media(max-width:600px){
  .nf-gallery{padding:12px;gap:12px}
  .nf-gallery__stage{position:relative;gap:0}
  .nf-gallery__stage img.nf-gallery__img{flex:1 1 auto;width:100%;max-width:100%;max-height:100%}
  .nf-gallery__prev,.nf-gallery__next{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:44px;height:44px;background:rgba(10,10,10,.55);backdrop-filter:blur(4px)}
  .nf-gallery__prev{left:6px}
  .nf-gallery__next{right:6px}
  .nf-gallery__foot{justify-content:center;gap:10px}
  .nf-gallery__foot .nf-btn{flex:1 1 0;min-width:0;justify-content:center}
}

/* ==========================================================================
   Styles extraits des anciens attributs style="" inline (refactor
   maintenabilité). Regroupés par section. Les valeurs dynamiques venues de
   PHP (couleur d'accent, teinte d'overlay, image de fond du hero) sont
   passées par des variables CSS --nf-* posées sur l'élément côté template.
   ========================================================================== */

/* Eyebrows : couleur par section + espacement dans les panneaux d'intro */
.nf-carte__intro .nf-eyebrow,
.nf-panel--intro .nf-eyebrow{margin-bottom:14px}
.nf-actus .nf-eyebrow,.nf-medias .nf-eyebrow{color:var(--lfi-rouge-2027)}
.nf-sinformer .nf-eyebrow{color:var(--lfi-violet-web)}
.nf-hsection--mil .nf-panel--intro .nf-eyebrow{color:var(--lfi-rouge-2027)}
.nf-hsection--cre .nf-panel--intro .nf-eyebrow{color:var(--lfi-jaune-web)}
.nf-panel--photo .nf-overlay .nf-eyebrow{color:var(--lfi-jaune-web)}

/* Sections 2 & 4 — lede des panneaux d'intro + carte photo (overlay) */
.nf-panel--intro p{margin:22px 0 0;max-width:52ch}
.nf-hsection--mil .nf-panel--intro p{color:var(--color-text-muted)}
.nf-hsection--cre .nf-panel--intro p{color:rgba(255,252,244,.85)}
.nf-hsection--mil .nf-drag-hint{color:var(--lfi-violet-web)}
.nf-hsection--cre .nf-drag-hint{color:var(--lfi-jaune-web)}
.nf-panel--split .nf-pad--first{order:1}
.nf-panel--split h3{color:var(--nf-accent,var(--lfi-charbon-2027))}
.nf-panel--photo .nf-overlay{background:linear-gradient(180deg,rgba(33,35,32,.05),var(--nf-teinte,rgba(33,35,32,.82)))}
.nf-panel--photo .nf-overlay h3{color:var(--lfi-creme-2027);margin:8px 0 12px;font-size:clamp(2.4rem,6vw,5rem)}
.nf-panel--photo .nf-overlay p{color:rgba(255,252,244,.85);max-width:50ch}

/* Section 5 — médias : positionnement + teintes des badges */
.nf-media-row__img .nf-badge{position:absolute;top:16px;left:16px}
.nf-badge--rouge{background:var(--lfi-rouge-2027)}
.nf-badge--rougeweb{background:var(--lfi-rouge-web)}
.nf-badge--violet{background:var(--lfi-violet-web)}

/* Section 6 — s'informer : en-tête centré + pastille ronde du logo */
.nf-sec-head--center{text-align:center;margin-left:auto;margin-right:auto}
.nf-logo__media{width:100%;height:72px;border-radius:var(--radius-md);overflow:hidden;display:block}
/* Logo rectangulaire : l'image entière est affichée (contain) et centrée dans le
   cadre — pas de recadrage ni de pastille ronde. */
.nf-logo__media img{width:100%;height:100%;object-fit:contain;display:block}

/* Section 7 — actus : en-tête en ligne + badge de carte + état vide */
.nf-sec-head--between{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;max-width:none}
.nf-actus .nf-sec-head p{margin-top:12px;max-width:52ch}
.nf-actu-card__body .nf-badge{align-self:flex-start}
.nf-empty{color:var(--color-text-muted)}

/* Hero — fond image optionnel (URL via --nf-hero-bg) + dégradé violet (charte)
   superposé : dense à gauche (sous le texte crème) puis fondu vers le charbon. */
.nf-hero--bg{background-image:linear-gradient(100deg,rgba(76,2,151,.94) 0%,rgba(76,2,151,.58) 45%,rgba(33,35,32,.72) 100%),var(--nf-hero-bg);background-size:cover;background-position:center}
.nf-play img{filter:invert(1);margin-left:4px}
/* Fond en <img> responsive (nf_render_hero(), élément LCP mobile) : même rendu
   que .nf-hero--bg — image en cover, voile dégradé identique par-dessus,
   contenu au-dessus des deux (isolation : les z-index négatifs restent dans
   la section, au-dessus de sa couleur de fond). */
.nf-hero--img{background:var(--color-bg-inverse);isolation:isolate}
.nf-hero--img .nf-hero__glow{opacity:.22}
.nf-hero__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:-2}
.nf-hero--img::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(100deg,rgba(76,2,151,.94) 0%,rgba(76,2,151,.58) 45%,rgba(33,35,32,.72) 100%)}

/* Header / menu mobile */
.nf-mobile__top{display:flex;justify-content:space-between;align-items:center;margin-bottom:32px}
.nf-mobile__logo{height:40px;width:auto}
.nf-mobile .nf-menu-btn{display:inline-flex}
.nf-footer__legal a{color:inherit}

/* Icônes SVG monochromes rendues en blanc (sur fonds sombres) */
.nf-icon--invert{filter:invert(1)}

/* ==========================================================================
   Lien « Lire » des cartes (sections 2 & 4) + page de lecture (single.php)
   ========================================================================== */

/* Lien « Lire » : reprend la couleur d'accent de la carte (--nf-accent).
   Spécificité .nf a.nf-readmore pour l'emporter sur « .nf a » (couleur violet). */
.nf a.nf-readmore{display:inline-flex;align-items:center;gap:7px;margin-top:22px;font-family:var(--font-display);font-weight:800;font-size:.85rem;letter-spacing:.05em;text-transform:uppercase;text-decoration:none;color:var(--nf-accent,var(--lfi-violet-2027))}
.nf a.nf-readmore--light{color:var(--lfi-creme-2027)}
/* Icône : taille fixe + position statique pour neutraliser les règles d'image
   des panneaux (.nf-panel--split img / .nf-panel--photo img). */
.nf-readmore img{width:18px;height:18px;flex:0 0 auto;position:static;inset:auto;object-fit:contain;transition:transform .2s var(--ease-standard)}
.nf-readmore--light img{filter:invert(1)}
.nf-readmore:hover img{transform:translateX(4px)}
.nf-readmore:focus-visible{outline:2px solid var(--color-focus-ring,#3885F4);outline-offset:3px;border-radius:2px}

/* ---- Page de lecture d'un article ---- */
.nf-single{min-height:100vh;display:flex;flex-direction:column}
.nf-article{background:var(--color-bg-page)}

/* En-tête façon hero : padding haut pour dégager le header fixe */
.nf-article__hero{padding:clamp(100px,13vh,150px) clamp(16px,4vw,44px) clamp(30px,5vw,54px);background:var(--lfi-neutral-100);border-bottom:1px solid var(--color-border-default)}
.nf-article__head{max-width:820px}
.nf a.nf-article__back{display:inline-flex;align-items:center;gap:8px;margin-bottom:26px;font-family:var(--font-display);font-weight:700;font-size:.78rem;letter-spacing:.04em;text-transform:uppercase;text-decoration:none;color:var(--color-text-muted)}
.nf a.nf-article__back:hover{color:var(--nf-accent,var(--lfi-violet-2027))}
.nf-article__eyebrow{display:block;margin-bottom:14px;color:var(--nf-accent,var(--lfi-violet-2027))}
.nf-article__title{font-size:clamp(2.1rem,5.4vw,3.9rem);line-height:1.03;max-width:18ch}
.nf-article__meta{margin-top:22px;font:400 .9rem/1.4 var(--font-body);color:var(--color-text-muted)}

/* Image mise en avant */
.nf-article__cover{margin-top:clamp(28px,5vw,48px);padding:0 clamp(16px,4vw,44px)}
.nf-article__cover img{width:100%;height:auto;border-radius:var(--radius-lg);display:block}

/* Corps de l'article (blocs natifs) + pied */
.nf-article__body{max-width:768px;padding:clamp(34px,6vw,60px) clamp(16px,4vw,44px)}
.nf-article__foot{max-width:768px;padding:0 clamp(16px,4vw,44px) clamp(60px,9vw,96px)}

/* Prose : rythme de lecture confortable dans la charte */
.nf-prose{color:var(--color-text-primary)}
.nf-prose p{margin:0 0 1.4em;font:400 1.15rem/1.75 var(--font-body)}
.nf-prose>*{max-width:70ch}
.nf-prose h2,.nf-prose h3,.nf-prose h4{font-family:var(--font-display);font-weight:900;text-transform:uppercase;letter-spacing:-.01em;line-height:1.15;margin:1.9em 0 .5em}
.nf-prose h2{font-size:clamp(1.5rem,3vw,1.9rem)}
.nf-prose h3{font-size:clamp(1.25rem,2.4vw,1.45rem)}
.nf-prose h4{font-size:1.15rem}
.nf-prose a{text-underline-offset:3px}
.nf-prose ul,.nf-prose ol{margin:0 0 1.4em;padding-left:1.3em;font:400 1.15rem/1.7 var(--font-body)}
.nf-prose li{margin:.4em 0}
.nf-prose img{height:auto;border-radius:var(--radius-md)}
.nf-prose figure{margin:1.9em 0}
.nf-prose figcaption{margin-top:8px;font-size:.85rem;color:var(--color-text-muted)}
.nf-prose blockquote{margin:1.7em 0;padding:.3em 0 .3em 1.2em;border-left:4px solid var(--nf-accent,var(--lfi-violet-2027));font-style:italic;color:var(--color-text-muted)}
.nf-prose blockquote p{font-size:1.2rem}

/* ---- Fil d'Ariane (single.php, category.php) : style du lien « retour » ---- */
.nf-breadcrumb{margin-bottom:26px}
.nf-breadcrumb ol{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:0;padding:0;list-style:none;font-family:var(--font-display);font-weight:700;font-size:.78rem;letter-spacing:.04em;text-transform:uppercase;color:var(--color-text-muted)}
.nf-breadcrumb li{display:flex;align-items:center;gap:10px}
.nf-breadcrumb li+li::before{content:"›";font-weight:400}
.nf .nf-breadcrumb a{color:inherit;text-decoration:none}
.nf .nf-breadcrumb a:hover{color:var(--nf-accent,var(--lfi-violet-2027))}
.nf-breadcrumb [aria-current]{max-width:40ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---- Cartes d'article : « À lire aussi » (single.php) et hub (category.php) ---- */
.nf-related{width:100%;max-width:1200px;margin:0 auto;box-sizing:border-box;padding:0 clamp(16px,4vw,44px) clamp(40px,6vw,64px)}
.nf-related__head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 24px;margin-bottom:24px;padding-top:clamp(28px,5vw,44px);border-top:1px solid var(--color-border-default)}
.nf-related__title{font-family:var(--font-display);font-weight:900;text-transform:uppercase;font-size:clamp(1.4rem,2.6vw,1.8rem)}
.nf-related__head .nf-readmore{margin-top:0}
.nf-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:clamp(16px,2.4vw,28px)}
.nf-card{background:#fff;border:1px solid var(--color-border-default);border-radius:var(--radius-lg);overflow:hidden;transition:transform .2s var(--ease-standard),box-shadow .2s var(--ease-standard)}
.nf-card:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(33,35,32,.12)}
.nf .nf-card__link{display:flex;flex-direction:column;height:100%;color:inherit;text-decoration:none}
.nf-card__media{display:block;aspect-ratio:16/9;background:var(--lfi-neutral-100)}
.nf-card__media img{width:100%;height:100%;object-fit:cover;display:block}
.nf-card__body{display:flex;flex-direction:column;gap:10px;flex:1;padding:20px 22px 22px}
.nf-card__title{font-family:var(--font-display);font-weight:900;font-size:1.15rem;line-height:1.2;text-transform:uppercase;color:var(--color-text-primary)}
.nf-card__text{font:400 1rem/1.6 var(--font-body);color:var(--color-text-muted)}
.nf-card__cta{display:inline-flex;align-items:center;gap:7px;margin-top:auto;padding-top:6px;font-family:var(--font-display);font-weight:800;font-size:.85rem;letter-spacing:.05em;text-transform:uppercase;color:var(--nf-accent,var(--lfi-violet-2027))}
.nf-card__cta img{width:18px;height:18px;transition:transform .2s var(--ease-standard)}
.nf-card:hover .nf-card__cta img{transform:translateX(4px)}
.nf .nf-card__link:focus-visible{outline:2px solid var(--color-focus-ring,#3885F4);outline-offset:-2px}

/* ---- Page hub (category.php) ---- */
.nf-hub__intro{margin-top:22px}
.nf-hub__intro p{font-size:1.15rem;max-width:62ch}
.nf-hub__intro p:last-child{margin-bottom:0}
.nf-hub__list{padding-top:clamp(34px,6vw,60px)}
.nf-pagination{margin-top:32px}
.nf-pagination .nav-links{display:flex;flex-wrap:wrap;gap:10px;font-family:var(--font-display);font-weight:700}
.nf-pagination .page-numbers{display:inline-flex;min-width:44px;min-height:44px;align-items:center;justify-content:center;padding:0 12px;border-radius:var(--radius-pill);border:1px solid var(--color-border-default);text-decoration:none;color:var(--color-text-primary)}
.nf-pagination .page-numbers.current{background:var(--lfi-charbon-2027);color:var(--lfi-creme-2027)}

/* Lien vers la page hub dans les panneaux d'intro des carrousels (sections 2 & 4) */
.nf-panel--intro .nf-hub-link{align-self:flex-start}
@media(prefers-reduced-motion:reduce){.nf-card,.nf-card__cta img{transition:none}.nf-card:hover{transform:none}}

@media(max-width:760px){
  .nf-article__hero{padding-top:96px}
  .nf-article__title{max-width:none}
}

/* ==========================================================================
   Brief v2 — Action Populaire (sect. 3), section 5 violette, S'informer 2 col.
   ========================================================================== */

/* Section 3 — Action Populaire (remplace la carte) : fond jaune, texte à
   gauche, badges de téléchargement + site à droite. */
.nf-agir{scroll-margin-top:70px;min-height:100vh;display:flex;align-items:center;background:var(--lfi-jaune-web);color:var(--lfi-charbon-2027);padding:clamp(48px,7vw,110px) clamp(20px,5vw,72px)}
.nf-agir__inner{width:100%;display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(32px,5vw,72px);align-items:center}
.nf-agir__text .nf-eyebrow{display:block;margin-bottom:14px;color:var(--lfi-rouge-2027)}
.nf-agir__text h2{font-size:clamp(1.15rem,2.2vw,1.7rem);line-height:1.18;margin-bottom:18px}
.nf-agir__text p{font:400 1.15rem/1.6 var(--font-body);max-width:46ch;margin:0 0 26px}
.nf-agir__links{display:flex;flex-direction:column;gap:14px}
.nf a.nf-agir__badge{display:flex;align-items:center;gap:14px;background:var(--lfi-charbon-2027);color:var(--lfi-creme-2027);text-decoration:none;padding:16px 22px;border-radius:var(--radius-md);font-family:var(--font-display);font-weight:700;transition:transform .2s var(--ease-standard),box-shadow .2s var(--ease-standard)}
.nf a.nf-agir__badge:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
.nf-agir__badge img{filter:invert(1)}

/* Section 5 — fond violet, pleine hauteur, contenu centré et compact pour tenir
   dans un écran (titre 3 lignes + image cliquable « Banque Insoumise »). */
.nf-medias{background:var(--lfi-violet-2027);color:var(--lfi-creme-2027);min-height:100vh;display:flex;flex-direction:column;justify-content:center;padding-top:clamp(72px,9vh,96px);padding-bottom:clamp(28px,4vh,48px)}
/* width:100% : en flex column, .nf-wrap (margin:0 auto) se rétracterait à la
   largeur du contenu → on force la largeur pleine (max 1200px) pour aligner les
   marges G/D sur les autres sections. */
.nf-medias .nf-wrap{width:100%}
.nf-medias .nf-eyebrow{color:var(--lfi-jaune-web)}
.nf-medias .nf-sec-head{margin-bottom:clamp(12px,2vh,22px)}
.nf-medias .nf-sec-head h2{color:var(--lfi-creme-2027);font-size:clamp(1.15rem,2.2vw,1.7rem);line-height:1.18}
/* Texte (description) à gauche, image de galerie à droite. */
.nf-medias .nf-media-row{align-items:center;grid-template-columns:.85fr 1.15fr}
.nf-medias .nf-media-row__img{max-height:min(32vh,290px)}
.nf-medias .nf-media-row h3{color:var(--lfi-creme-2027);font-size:clamp(1.4rem,2.6vw,2rem);margin:8px 0 10px}
.nf-medias .nf-media-row p{color:rgba(255,252,244,.85);margin-bottom:16px}
/* Compteur de fichiers (remplace la description) : libellé display en capitales. */
.nf-medias .nf-media-row__count{font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--lfi-jaune-web)}
/* CTA jaune (contraste sur le fond violet) au lieu du bouton violet par défaut. */
.nf-medias .nf-btn--primary{background:var(--lfi-jaune-web);color:var(--lfi-charbon-2027)}

/* Section 6 — S'informer : pleine hauteur (cohérence avec sect. 3 & 5),
   texte à gauche, logos à droite, contenu centré verticalement. */
.nf-sinformer{min-height:100vh;display:flex;align-items:center}
.nf-sinformer__cols{width:100%;display:grid;grid-template-columns:.78fr 1.22fr;gap:clamp(28px,4vw,56px);align-items:center}
.nf-sinformer__cols .nf-sec-head{margin-bottom:0}
.nf-sinformer__cols .nf-oneline{min-width:0}

@media(max-width:860px){
  .nf-agir__inner{grid-template-columns:1fr}
  .nf-sinformer__cols{grid-template-columns:1fr}
}

/* ==========================================================================
   Page 404 (charte : bandeau plein écran, dégradé violet, « 404 » display)
   ========================================================================== */
.nf-404__hero{position:relative;overflow:hidden;min-height:100vh;display:flex;align-items:center;justify-content:center;text-align:center;color:var(--lfi-creme-2027);padding:clamp(96px,14vh,140px) clamp(20px,5vw,72px) clamp(48px,8vh,80px);background:linear-gradient(120deg,var(--lfi-violet-2027) 0%,#2c0a56 55%,var(--lfi-charbon-2027) 100%)}
.nf-404__glow{position:absolute;top:-140px;left:50%;transform:translateX(-50%);width:520px;height:520px;border-radius:50%;background:var(--lfi-violet-2027);filter:blur(40px);opacity:.35;pointer-events:none}
.nf-404__inner{position:relative;max-width:680px}
.nf-404__eyebrow{display:block;margin-bottom:16px;color:var(--lfi-jaune-web)}
.nf-404__code{font-family:var(--font-display);font-weight:900;font-size:clamp(6rem,22vw,15rem);line-height:.9;letter-spacing:-.03em;margin:0}
.nf-404__zero{color:var(--lfi-jaune-web)}
.nf-404__title{font-size:clamp(1.6rem,4vw,2.8rem);line-height:1.05;margin:6px 0 18px}
.nf-404__lede{font:400 1.1rem/1.6 var(--font-body);color:rgba(255,252,244,.85);max-width:48ch;margin:0 auto 30px}
.nf-404__actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}