/* ===========================
   GN.css — Socle global (v7)
   Pattern : classes uniques GN-*, scope variables via body.GN-root
   =========================== */

/* --- Variables & reset léger (scopé) --- */
.GN-root, .GN-root *::before, .GN-root *::after { box-sizing: border-box; }
html, body { overflow-x: hidden; } /* anti-scroll horizontal fantôme */

.GN-root{
  --brand:#20466e; --brand-2:#163152;
  --ok:#2f6fed;
  --text:#1f2a44; --muted:#64748b;
  --bg:#f8f9fa; --card-bg:#fff;
  --gap:16px; --radius:12px;
  --bd:rgba(16,24,40,.10);
  --shadow:0 8px 24px rgba(16,24,40,.12);

  /* Hauteurs layout (pour sticky wrapper) */
  --hd-h: 64px;      /* hauteur réelle du header sticky */
  --ft-h: 56px;      /* hauteur footer */
  --gap-bot: 16px;   /* petit vide en bas */

  margin:0;
  font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  color:var(--text);
  background:var(--bg);
}

/* Liens et main (scopés) */
.GN-root a{ color:var(--brand); text-decoration:none; }
.GN-root a:hover{ text-decoration:underline; }
.GN-root main{
  padding:16px 0;
  padding-bottom: var(--ft-h); /* espace réservé au footer fixe */
  box-sizing:border-box;
  display:block;
}


/* ===========================
   Layout (left | content | right)
   =========================== */
.GN-layout{
  display:grid;
  grid-template-columns:260px minmax(0,1fr) 260px;
  gap:var(--gap);
  max-width:1100px;
  width:100%;
  margin-left:auto;
  margin-right:auto;
  padding:0 12px;
  box-sizing:border-box;
}
.GN-side{ width:100%; max-width:260px; margin:0; }
.GN-side--left{}
.GN-side--right{}
.GN-content{ min-width:0; } /* empêche le débordement du centre */

@media (min-width:1024px){
  .GN-layout{
    grid-template-columns:260px minmax(0,2fr) 260px; /* content x2 */
    max-width:1400px;
  }
  /* (supprimé : ancien sticky sur .GN-side--right .GN-block) */
}
@media (max-width:1023px){
  .GN-layout{ display:block; max-width:none; padding:0 12px; }
  .GN-side{ display:none; }
}

/* Espacement naturel des blocs */
.GN-content > .GN-block,
.GN-side > .GN-block{ margin-bottom:16px; }

/* ===========================
   Blocs & typographie
   =========================== */
.GN-block{
  background:var(--card-bg);
  border:1px solid var(--bd);
  border-radius:var(--radius);
  padding:12px;
}
.GN-block-title{ margin:0 0 10px; font-size:1.05rem; }
.GN-muted{ color:var(--muted); }

/* ===========================
   Boutons (cohérents partout)
   =========================== */
.GN-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  padding:10px 14px;
  border-radius:10px;
  border:1px solid transparent;
  background:#fff;
  color:var(--brand);
  border-color:var(--brand);
  font-weight:600;
  line-height:1.2;
  text-decoration:none;
  cursor:pointer;
  transition:
    background .15s ease,
    color .15s ease,
    border-color .15s ease,
    box-shadow .15s ease,
    transform .04s ease;
  box-shadow:0 1px 0 rgba(16,24,40,.05);
  -webkit-appearance:none; appearance:none;
}
.GN-btn:hover{ background:var(--brand); color:#fff; text-decoration:none; }
.GN-btn:active{ transform: translateY(1px); }
.GN-btn:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px rgba(47,111,237,.25);
}

/* --- Anti-conflit liens sur boutons (placé avant les variantes) --- */
.GN-btn, .GN-btn:link, .GN-btn:visited{ color:var(--brand); text-decoration:none; }
.GN-btn:hover{ text-decoration:none; }
.GN-btn--primary, .GN-btn--primary:link, .GN-btn--primary:visited{ color:#fff; }
.GN-btn--ghost, .GN-btn--ghost:link, .GN-btn--ghost:visited{ color:var(--brand); }
.GN-btn--secondary, .GN-btn--secondary:link, .GN-btn--secondary:visited{ color:var(--brand); }
.GN-btn--inscription, .GN-btn--inscription:link, .GN-btn--inscription:visited{ color:#fff; }

/* Variantes */
.GN-btn--ghost{ background:#fff; color:var(--brand); border-color:#d6dbe3; }
.GN-btn--ghost:hover{ background:#eef3f9; }

.GN-btn--primary{ background:var(--brand); color:#fff; border-color:transparent; }
.GN-btn--primary:hover{ background:var(--brand-2); }

.GN-btn--secondary{ background:#fff; color:var(--brand); border-color:var(--brand); }
.GN-btn--secondary:hover{ background:var(--brand); color:#fff; }

.GN-btn--inscription{ background:var(--ok); color:#fff; border-color:transparent; }
.GN-btn--inscription:hover{ filter:brightness(.95); }

/* Variante danger */
.GN-btn--danger{ background:#fff; color:#b42318; border-color:#f3b0a9; }
.GN-btn--danger:hover{ background:#fee4e2; border-color:#b42318; }

/* Tailles & utilitaires */
.GN-btn--sm{ padding:8px 12px; font-size:.92rem; border-radius:9px; }
.GN-btn--lg{ padding:12px 18px; font-size:1.03rem; border-radius:12px; }
.GN-btn--pill{ border-radius:999px; }
.GN-btn--full{ display:flex; width:100%; }

.GN-btn-stack{ display:flex; flex-direction:column; gap:10px; }

/* ===========================
   Formulaires (socle)
   =========================== */
.GN-form-label{ display:block; margin:0 0 6px; font-weight:600; }
.GN-form-actions{ margin-top:10px; }

.GN-root .GN-form-input,
.GN-root select,
.GN-root input[type="text"],
.GN-root input[type="email"],
.GN-root input[type="date"],
.GN-root input[type="password"],
.GN-root textarea{
  width:100%;
  padding:10px 12px;
  border:1px solid #d6dbe3;
  border-radius:10px;
  background:#fff;
  box-sizing:border-box;
}

.GN-form-grid{ display:grid; grid-template-columns:1fr; gap:12px; }
@media (min-width:768px){
  .GN-form-grid{ grid-template-columns:1fr 1fr; }
}
.GN-form-field{ display:flex; flex-direction:column; gap:6px; }
.GN-form-field--span2{ grid-column:1 / -1; }

/* ===========================
   Listes utiles
   =========================== */
.GN-profile-stats{
  list-style:none; padding:0; margin:0;
  display:flex; flex-direction:column; gap:8px;
}
.GN-profile-stats > li{
  display:flex; justify-content:space-between; align-items:center;
  padding:8px 10px; background:#fff; border:1px solid var(--bd); border-radius:10px;
}

/* ===========================
   Grilles génériques
   =========================== */
.GN-photos-grid{
  display:grid; gap:10px;
  grid-template-columns: repeat(3, minmax(0,1fr));
}
@media (min-width:768px){
  .GN-photos-grid{ grid-template-columns: repeat(4, minmax(0,1fr)); }
}
@media (min-width:1100px){
  .GN-photos-grid{ grid-template-columns: repeat(5, minmax(0,1fr)); }
}
.GN-thumb{
  width:100%;
  aspect-ratio:1 / 1;
  object-fit:cover;
  border-radius:10px;
  display:block;
  cursor:zoom-in;
  transition: transform .15s ease, box-shadow .15s ease;
}
.GN-thumb:hover{ transform: translateY(-1px); box-shadow:0 6px 16px rgba(16,24,40,.18); }

.GN-cards-grid{ display:grid; grid-template-columns:1fr; gap:16px; }
@media (min-width:768px){
  .GN-cards-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (min-width:1100px){
  .GN-cards-grid{ grid-template-columns: repeat(3, minmax(0,1fr)); }
}

/* ===========================
   Cartouche Événement
   =========================== */
.GN-cartouche-lien{ text-decoration:none; color:inherit; display:block; }
.GN-cartouche-evenement{ /* spécifique dans CE.css */ }

/* ===========================
   Modale
   =========================== */
.GN-hidden{ display:none !important; }
.GN-modal{
  position:fixed; inset:0;
  background:rgba(0,0,0,.72);
  display:none;
  align-items:center; justify-content:center;
  z-index:2000;
}
.GN-modal.is-open{ display:flex; }
.GN-modal-img{ max-width:90vw; max-height:88vh; border-radius:12px; display:block; }
.GN-modal-close{
  position:absolute; top:16px; right:20px; font-size:32px; color:#fff; cursor:pointer; line-height:1; user-select:none;
}
.GN-modal .GN-nav-btn{
  position:absolute; top:50%; transform:translateY(-50%);
  background:#fff; border:1px solid #d6dbe3; border-radius:10px; padding:8px 10px; cursor:pointer; user-select:none;
}
#prevBtn.GN-nav-btn{ left:20px; }
#nextBtn.GN-nav-btn{ right:20px; }

/* ===========================
   Notifications & cartouches relation
   =========================== */
.GN-notifList .CE .cartouche-evenement{ padding:10px; gap:10px; }
.GN-notifList .CE .cartouche-photo img{ width:100%; height:120px; object-fit:cover; display:block; }
.GN-notifList .CE .cartouche-infos .desc{
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden;
}
.GN-notifList .CE .cartouche-cta{ margin-top:8px; }

.GN-root .cartouche-relation .cr-main{ display:flex; gap:12px; align-items:flex-start; }
.GN-root .cartouche-relation .cr-avatar{
  display:block; flex:0 0 56px; width:56px; height:56px;
  border-radius:50%; overflow:hidden;
}
.GN-root .cartouche-relation .cr-avatar .cr-img{
  width:56px !important; height:56px !important;
  object-fit:cover; display:block; border-radius:50%;
}
.GN-root .GN-notif .cartouche-relation .cr-img{ max-width:none !important; }

/* =========================================================
   GN.css — Additions v7.1 pour index.php
   ========================================================= */
.GN-card{ background:var(--card-bg); border:1px solid var(--bd); border-radius:var(--radius); padding:12px; }
.GN-cardTitle{ margin:0 0 10px; font-size:1.05rem; line-height:1.25; }
.GN-blockTitle{ margin:0 0 10px; font-size:1.05rem; line-height:1.25; }
.GN-h2{ margin:16px 0 8px; font-size:1.25rem; line-height:1.3; font-weight:700; }
.GN-info{ color:var(--muted); }

.GN-flow, .GN-cartoucheList{ display:grid; grid-template-columns:1fr; gap:16px; }
@media (min-width:768px){ .GN-cartoucheList{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (min-width:1100px){ .GN-cartoucheList{ grid-template-columns:repeat(3, minmax(0,1fr)); } }

.GN-sep{ border:0; border-top:1px solid var(--bd); margin:16px 0; }

.GN-list{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px; }
.GN-list--links li a{
  display:block; padding:8px 10px; background:#fff;
  border:1px solid var(--bd); border-radius:10px; text-decoration:none;
}
.GN-list--links li a:hover{ background:#eef3f9; }

.GN-list--events .GN-eventItem{
  display:flex; flex-direction:column; gap:2px;
  padding:8px 10px; background:#fff; border:1px solid var(--bd); border-radius:10px;
}

.GN-link{ color:var(--brand); text-decoration:none; }
.GN-link:hover{ text-decoration:underline; }
.GN-meta{ color:var(--muted); font-size:.92em; }

.GN-notifList{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:12px; }
.GN-notif{ background:#fff; border:1px solid var(--bd); border-radius:12px; padding:10px; }
.GN-notifLink{ display:flex; gap:10px; align-items:center; color:inherit; text-decoration:none; }
.GN-notifThumb{ width:40px; height:40px; flex:0 0 40px; border-radius:50%; object-fit:cover; display:block; }
.GN-notifBody{ min-width:0; flex:1; }
.GN-notifTitle{ margin:0; font-size:1rem; line-height:1.25; }
.GN-notifText{ margin:2px 0 0; color:var(--muted); font-size:.95em; line-height:1.35; }

.GN-form{ display:block; }
.GN-formSep{ height:8px; }
.GN-field{ display:flex; flex-direction:column; gap:6px; }
.GN-field > label{ font-weight:600; margin-bottom:6px; }

.GN-cartouche{
  border:1px solid var(--bd); border-radius:12px; background:#fff; overflow:hidden; display:block;
}
.GN-cartouche--link{ display:block; text-decoration:none; color:inherit; }
.GN-cartouchePhoto img{ width:100%; height:140px; object-fit:cover; display:block; }
.GN-cartoucheInfos{ padding:10px; }
.GN-cartoucheTitle{ margin:0 0 4px; font-size:1rem; line-height:1.25; }
.GN-cartoucheMeta{ color:var(--muted); font-size:.92em; }

.GN-modal[hidden]{ display:none; }
.GN-modal{ position:fixed; inset:0; background:rgba(0,0,0,.4); display:grid; place-items:center; z-index:9999; }
.GN-modal__panel{ background:#fff; border-radius:14px; padding:16px 18px; width:min(520px, 92vw); box-shadow:0 10px 30px rgba(0,0,0,.2); }
.GN-modal__actions{ display:flex; gap:10px; justify-content:flex-end; margin-top:12px; }
.btn{ padding:.6rem .9rem; border-radius:10px; border:1px solid #ccd2da; background:#fff; }
.btn--danger{ background:#163152; color:#fff; border-color:#163152; } /* bleu groupmaker */


/* =========================================================
   >>> Pattern final : sticky sur WRAPPER interne (.GN-stick)
   ========================================================= */

/* Tampon bas pour ne pas chevaucher le footer et laisser un petit vide */
.GN-layout::after{
  content:"";
  display:block;
  height: calc(var(--ft-h) + var(--gap-bot));
  grid-column: 1 / -1;
}

/* Les colonnes en elles-mêmes restent non-sticky */
.GN-side--left,
.GN-side--right{
  position: static;
  align-self: start;
}

/* Le sticky s’applique au wrapper interne placé DANS chaque side */
.GN-stick{
  position: sticky;
  top: calc(var(--hd-h) + var(--gap)); /* sous le header + gap grille */
}

/* Sécurité si une vieille règle revenait */
@media (min-width:1024px){
  .GN-side--right .GN-block{
    position: static !important;
    top: auto !important;
  }
}

/* Sticky hybride fiable (ne touche pas au reste) */
.GN-side { position: relative; }              /* conteneur de référence */
.GN-stick { position: sticky; top: calc(var(--hd-h) + var(--gap)); }
.GN-stick.is-stop { position: absolute; top: auto; bottom: 0; }


/* Sides en sticky natif */
.GN-side { position: relative; }
.GN-stick { position: sticky; top: calc(var(--hd-h) + var(--gap)); will-change: transform; }

/* État "bloqué" (on applique un translateY calculé en JS) */
.GN-stick.is-capped { transform: translateY(var(--cap-shift, 0px)); }

/* ===========================
   Footer sticky (toujours visible en bas)
   =========================== */
.GN-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: var(--ft-h, 56px);
  background: var(--brand-2);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  z-index: 1000;
}

.GN-footer a {
  color: #fff;
  text-decoration: none;
  margin: 0 8px;
}

.GN-footer a:hover {
  text-decoration: underline;
}


/* --- Sidebars : sticky natif + cap fixe au-dessus du footer --- */
.GN-side { position: relative; }
.GN-stick { position: sticky; top: calc(var(--hd-h) + var(--gap)); }

/* Mode "fixé" (quand on atteint la limite au-dessus du footer) */
.GN-stick.is-fixed {
  position: fixed;
  top: var(--fixed-top, 0px);
  left: var(--fixed-left, 0px);
  width: var(--fixed-width, auto);
  /* pas de transform pour éviter les boucles de mesure */
}

/* Espace réservé quand .GN-stick passe en fixed (pour garder la hauteur dans le flux) */
.gn-stick-spacer { height: 0; }


/* === Sidebars: sticky borné entre header et footer (CSS only) === */

/* 1) Variables (si pas déjà présentes au même endroit) */
.GN-root{
  --hd-h: 64px;        /* hauteur VRAIE de ton header sticky */
  --ft-h: 56px;        /* hauteur VRAIE de ton footer fixe .GN-footer */
  --gap: 16px;         /* gap de ta grille */
  --cap-gap: 200px;    /* marge voulue au-dessus du footer */
}

/* 2) Assure que la colonne n'est pas sticky elle-même */
.GN-side--left,
.GN-side--right{
  position: static !important;
  align-self: start;
}

/* 3) Le wrapper interne fait TOUT le boulot */
.GN-stick{
  position: sticky;
  top: calc(var(--hd-h) + var(--gap));                 /* démarre sous le header */
  bottom: calc(var(--ft-h) + var(--cap-gap));          /* ne pas s'approcher du footer fixe */
}

/* 4) Nettoyage des anciennes règles qui cassent tout */
@media (min-width:1024px){
  .GN-side--right .GN-block{ position: static !important; top:auto !important; }
}

/* 5) Si tu avais ajouté ça avant, supprime/neutralise-le :
   - .GN-layout::after { ... } (tampon bas)  -> INUTILE avec footer fixed
   - toute règle javascript-dépendante (.is-stop, .is-fixed, transforms)
*/
/* === MOBILE ONLY =================================================== */
.mobile-only { display:block; }
@media (min-width: 768px) {
  .mobile-only { display:none !important; }
}

/* === Carrousel horizontal compact (mobile-first) =================== */
.hscroller {
  /* Mobile d'abord : cartes plus larges */
  --cards-per-view: 2.4;            /* élargi en mobile */
  --gap: 12px;
  --card-w: calc((100vw - (var(--gap) * (var(--cards-per-view) + 0.5))) / var(--cards-per-view));
  position: relative;
  margin: 8px 0 16px;
}
.hscroller__rail {
  display: flex;
  gap: var(--gap);
  overflow-x: auto;
  padding: 6px var(--gap) 10px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  touch-action: pan-x;
}
.hscroller__rail::-webkit-scrollbar { display: none; }

.hcard {
  flex: 0 0 var(--card-w);
  max-width: var(--card-w);
  scroll-snap-align: start;
  border-radius: 14px;
  overflow: hidden;
  background: #15171c;
  border: 1px solid rgba(255,255,255,0.06);
}
.hcard__cover {
  aspect-ratio: 3/4; /* carte verticale */
  width: 100%;
  background: #222 center / cover no-repeat;
  position: relative;
}
.hcard__pill {
  position: absolute; left: 8px; top: 8px;
  font-size: 10px; line-height: 1; padding: 4px 7px; border-radius: 999px;
  background: color-mix(in oklab, var(--brand, #3f76ff) 85%, black 15%);
  color: #fff; opacity: .95;
}
.hcard__body { padding: 8px 10px 10px; }
.hcard__title {
  font-weight: 700; font-size: 13.5px; line-height: 1.25; color: #fff; margin: 0 0 4px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.hcard__meta { font-size: 11.5px; color: #b9c2d0; display: grid; gap: 2px; }

/* Paliers progressifs : on affiche un peu plus de cartes quand l'écran grandit */
@media (min-width: 400px) {
  .hscroller { --cards-per-view: 2.6; }
}
@media (min-width: 480px) {
  .hscroller { --cards-per-view: 2.8; }
}
@media (min-width: 640px) {
  .hscroller { --cards-per-view: 3.2; }
}
@media (min-width: 768px) {
  .hscroller { --cards-per-view: 3.5; }
}
@media (min-width: 1024px) {
  .hscroller { --cards-per-view: 4; }
}

/* Titre + lien "Voir tout" */
.hsection {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 10px 0;
}
.hsection__title { font-weight: 800; color: #fff; font-size: 16px; }
.hsection__more { color: var(--header2-blue, #a7c8ff); font-size: 13px; text-decoration: none; }

/* Flèches overlay (masquées sur mobile tactile) */
.hscroller__nav { position: absolute; inset: 0; pointer-events: none; }
.hscroller__btn {
  position: absolute; top: 38%;
  width: 34px; height: 34px; border-radius: 999px;
  background: rgba(0,0,0,.45); border: 1px solid rgba(255,255,255,.12);
  color: #fff; display: grid; place-items: center;
  pointer-events: auto; cursor: pointer;
}
.hscroller__btn--left  { left: 4px;  }
.hscroller__btn--right { right: 4px; }
@media (pointer: coarse) { .hscroller__nav { display:none; } } /* mobile: swipe au doigt */

/* Variante desktop (si tu veux réutiliser le même HTML en grille) */
/*
@media (min-width: 768px) {
  .hscroller__rail { overflow-x: visible; flex-wrap: wrap; }
  .hcard { flex: 1 1 calc(25% - var(--gap)); scroll-snap-align: none; }
}
*/
/* === Harmonisation visuelle avec le thème GN ======================= */
/* Fallbacks si certaines variables n'existent pas encore */
:root {
  --gn-block-bg: var(--block-bg, rgba(255,255,255,0.04));
  --gn-block-border: var(--block-border, rgba(255,255,255,0.08));
  --gn-text-strong: var(--text-strong, #e6edf7);
  --gn-text-muted: var(--text-muted, #a9b2c3);
}

/* Cartes : même rendu que tes .GN-block (fond gris bleuté, pas noir) */
.hcard {
  background: var(--gn-block-bg);
  border: 1px solid var(--gn-block-border);
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0,0,0,.15);
}

/* Couverture : lisibilité du texte + cohérence visuelle */
.hcard__cover {
  background-color: #2a3240; /* fallback si image absente */
  position: relative;
}
.hcard__cover::after {
  content: "";
  position: absolute; inset: 0;
  /* dégradé subtil, pas “plein noir” */
  background: linear-gradient(to top, rgba(0,0,0,.35), rgba(0,0,0,0) 60%);
}

/* Pastille catégorie : teinte alignée à ton header2/brand */
.hcard__pill {
  background: color-mix(in oklab, var(--header2-blue, #9ec1ff) 88%, black 12%);
  color: #fff;
  border: 1px solid rgba(255,255,255,.18);
}

/* Titres et métas : légère intensification pour la lisibilité */
.hcard__title {
  color: #22345a; /* bleu profond, bon contraste */
  font-weight: 600;
}


/* Contraste renforcé pour la ligne métas des cartes */
.hcard__meta {
  color: #3c4655; /* gris soutenu, lecture parfaite sur fond clair */
  font-weight: 500;
  font-size: 0.9rem;
  line-height: 1.4;
}

.hcard__meta span {
  display: inline-block;
  margin-right: 10px;
  opacity: 0.95;
}

/* Section header (titre + “Voir tout”) */
.hsection__title { color: var(--gn-text-strong); }
.hsection__more  { color: var(--header2-blue, #a7c8ff); }

/* Rail & zone : éviter l'effet “bande noire” */
.hscroller__rail {
  background: transparent;   /* laisse voir le fond de page GN */
  padding-bottom: 12px;
}
/* ===== Empilement mobile sans masquer la sidebar droite ===== */
@media (max-width: 900px){
  .GN-layout{
    display: flex;
    flex-direction: column;
    gap: var(--gap, 16px);
  }
  .GN-side--left{ order: 1; }
  .GN-content   { order: 2; }
  .GN-side--right{
    order: 3;
    display: block;       /* la rendre visible en mobile */
  }
  /* si tu avais un display:none historique sur .GN-side--right en mobile, on l’annule */
  .GN-side--right[hidden]{ display:block !important; }
}
/* --- Fenêtre modale générique --- */
.GN-modal[hidden]{ display:none !important; }
.GN-modal{
  position:fixed; inset:0; z-index:2000;
  display:flex; align-items:center; justify-content:center;
}
.GN-modal__backdrop{
  position:absolute; inset:0;
  background:rgba(0,0,0,.4);
}
.GN-modal__sheet{
  position:relative;
  background:#fff;
  border-radius:12px;
  padding:16px;
  max-width:400px;
  width:calc(100% - 32px);
  box-shadow:0 4px 24px rgba(0,0,0,.25);
  animation:fadeInUp .25s ease;
}
@keyframes fadeInUp{
  from{ opacity:0; transform:translateY(20px); }
  to{ opacity:1; transform:translateY(0); }
}
.GN-modal__header{ display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.GN-modal__close{ background:none; border:none; font-size:1.4rem; cursor:pointer; color:#666; }
.GN-modal__body{ display:flex; flex-direction:column; gap:8px; }
.GN-modal__footer{ display:flex; gap:8px; justify-content:flex-end; }

/* --- Bouton principal du site --- */
.GN-btn--primary{
  background:var(--header2-blue, #0076f5);
  color:#fff;
  border:none;
  border-radius:8px;
  padding:8px 14px;
  cursor:pointer;
  font-weight:500;
  transition:background .2s;
}
.GN-btn--primary:hover{
  background:#005ecc;
}
/* ===== EV — supprimer le blanc sous le header (mobile, force) ===== */
@media (max-width: 768px){

  /* 0) Tuer tous les spacers de header éventuels */
  body.GN-root.EV-page .HD-spacer,
  body.GN-root.EV-page .header-spacer,
  body.GN-root.EV-page .header-placeholder,
  body.GN-root.EV-page [class*="header"][class*="spacer"],
  body.GN-root.EV-page [class*="spacer"][class*="header"]{
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* 1) Casser le margin-collapsing en haut de page */
  body.GN-root.EV-page main{
    padding-top: 1px !important;    /* 1px suffit pour empêcher le collapse */
    margin-top: 0 !important;
  }

  /* 2) Le layout EV ne doit pas réintroduire de marge haute */
  body.GN-root.EV-page .EV-layout{
    margin-top: 0 !important;
    padding-top: 6px !important;    /* micro respiration */
  }

  /* 3) Le tout premier enfant ne doit pas remettre une marge haute */
  body.GN-root.EV-page main > *:first-child,
  body.GN-root.EV-page .GN-layout > *:first-child,
  body.GN-root.EV-page .GN-content > *:first-child{
    margin-top: 0 !important;
  }

  /* 4) Le titre colle sans pousser */
  body.GN-root.EV-page h1,
  body.GN-root.EV-page .EV-title{
    margin-top: 0 !important;
    line-height: 1.25 !important;
  }

  /* 5) CAS FRÉQUENT : une EV-photo vide (ou sans image utile) crée un grand vide
        -> on la masque automatiquement si aucun <img> valable */
  body.GN-root.EV-page .EV-photo:not(:has(img)),
  body.GN-root.EV-page .EV-photo:has(img[src=""]),
  body.GN-root.EV-page .EV-photo:has(img:not([src])),
  body.GN-root.EV-page .EV-photo:has(img[style*="display:none"]){
    display: none !important;
    max-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
  }

  /* 6) Si une EV-photo existe mais trop grande, on la plafonne sur mobile */
  body.GN-root.EV-page .EV-photo{
    max-height: 52vh !important;      /* évite un “hero” trop haut */
    overflow: hidden !important;
  }
  body.GN-root.EV-page .EV-photo img{
    width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
  }
}