/* ===========================
   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;
  --danger:#b42318;
  --text:#1f2a44; --muted:#64748b;
  --bg:#f8f9fa; --card-bg:#fff;
  --surface-2:#f5f7fa;
  --popover-bg:#fff; /* fond OPAQUE pour menus/popovers flottants (≠ --card-bg qui peut être translucide en thème verre) */
  /* Alias flux (cartes FBX/FLX construites en JS via var(--flx-*)) :
     suivent les tokens principaux → flux thémé partout (home/profil/event/météo).
     night-sea garde sa def explicite (dark) qui prime. */
  --flx-card-bg: var(--card-bg);
  --flx-card-border: var(--bd);
  --flx-card-text: var(--text);
  /* Alias objet / fiche bateau (view.php + OBJ.css utilisent var(--obj-*)) :
     dérivés du pack → fiche objet/bateau thémée partout, et tout NOUVEAU thème
     les embarque automatiquement (plus de --obj-* à redéclarer par thème, plus
     de prefers-color-scheme OS qui désynchronise). night-sea garde sa def explicite. */
  --obj-bg:       var(--card-bg);
  --obj-bg-soft:  var(--surface-2);
  --obj-border:   var(--bd);
  --obj-muted:    var(--muted);
  --obj-accent:   var(--brand);
  --obj-text:     var(--text);
  --obj-chip:     var(--surface-2);
  --obj-danger:   var(--danger);
  --obj-danger-b: var(--danger);
  --obj-overlay:  rgba(0,0,0,.6);
  --logo-filter:brightness(0); --logo-text:#1f2a44;
  --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{ max-width:340px; } /* colonne droite élargie (météo/agenda denses) — desktop seul, repasse en pleine largeur < 1024 */
.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) 380px; /* gauche 260 · centre x2 · droite 380 (météo sur 1 ligne) */
    max-width:1520px; /* +120 (droite 260→380) pris sur la marge, pas sur le centre */
  }
  /* (supprimé : ancien sticky sur .GN-side--right .GN-block) */
}
/* ===========================
   Breakpoints recadrés : 768 / 1023
   =========================== */

/* Desktop ≥ 1024 : ton grid 3 colonnes reste OK (rien à changer ici) */

/* Tablette 768–1023 : 1 colonne + RIGHT visible (agenda/météo), LEFT masquée */
@media (min-width:768px) and (max-width:1023px){
  .GN-layout{
    display:flex;
    flex-direction:column;
    gap:var(--gap);
    max-width:none;
    padding:0 12px;
  }
  .GN-side--left{ display:none; }
  .GN-content{ order:1; }
  .GN-side--right{ display:block; order:2; max-width:none; }
  .GN-side--right .GN-stick{ position: static; } /* évite sticky chelou en colonne */
}

/* Mobile ≤ 767 : pareil (1 colonne + RIGHT visible) */
@media (max-width:767px){
  .GN-layout{
    display:flex;
    flex-direction:column;
    gap:var(--gap);
    max-width:none;
    padding:0 12px;
  }
  .GN-side--left{ display:none; }
  .GN-content{ order:1; }
  .GN-side--right{ display:block; order:2; max-width:none; }
  .GN-side--right .GN-stick{ position: static; }
}


/* 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:var(--card-bg,#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:var(--card-bg,#fff); color:var(--brand); border-color:var(--bd,#d6dbe3); }
.GN-btn--ghost:hover{ background:var(--surface-2,#eef3f9); color:var(--brand); }

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

.GN-btn--secondary{ background:var(--card-bg,#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:var(--card-bg,#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; }
/* Boutons d'action de formulaire : groupe aligné à DROITE par défaut, partout.
   (thumb-zone droitier + convention « valider = à droite »). Ordre DOM préservé
   → pas de désync tab/visuel. Les pages qui veulent un autre alignement gardent
   leur classe dédiée (.ME-actions, .EV-actions, .MP-actions-split…). */
.GN-form-actions{ margin-top:10px; display:flex; justify-content:flex-end; gap:8px; flex-wrap:wrap; align-items:center; }

.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 input[type="number"],
.GN-root input[type="tel"],
.GN-root input[type="url"],
.GN-root input[type="search"],
.GN-root input[type="time"],
.GN-root textarea{
  width:100%;
  padding:10px 12px;
  border:1px solid var(--bd,#d6dbe3);
  border-radius:12px;
  background:var(--card-bg,#fff);
  color:var(--text);
  box-sizing:border-box;
  font:inherit;
}

.GN-root .GN-form-input:focus,
.GN-root select:focus,
.GN-root input[type="text"]:focus,
.GN-root input[type="email"]:focus,
.GN-root input[type="date"]:focus,
.GN-root input[type="password"]:focus,
.GN-root input[type="number"]:focus,
.GN-root input[type="tel"]:focus,
.GN-root input[type="url"]:focus,
.GN-root input[type="search"]:focus,
.GN-root input[type="time"]:focus,
.GN-root textarea:focus{
  outline:none;
  border-color:var(--brand);
  box-shadow:0 0 0 3px rgba(32,70,110,.12);
}

/* Options natives des <select> : fond plein thémé (sinon blanc à l'ouverture sur night-sea/gros-temps).
   --popover-bg est SOLIDE par thème (cf. HM-themes.css). 1 règle globale = tous les <select> .GN-root. */
.GN-root select option{
  background:var(--popover-bg,#fff);
  color:var(--text);
}

.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:var(--card-bg,#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)); }
}

/* Wrapper de page standalone sous header fixe (largeur max + offset header + place bottom-nav) */
.GN-subpage{ max-width:760px; margin:0 auto; padding:calc(var(--header2-h, 60px) + 16px) 16px 100px; }
@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:var(--card-bg,#fff); border:1px solid var(--bd,#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; }
/* Carte entièrement cliquable : le <a> doit être un bloc (sinon padding/bordure inline cassés → texte tronqué à gauche). */
.GN-card-link{ display:block; text-decoration:none; color:inherit; }
.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:var(--card-bg,#fff);
  border:1px solid var(--bd); border-radius:10px; text-decoration:none;
}
.GN-list--links li a:hover{ background:var(--surface-2,#eef3f9); }

.GN-list--events .GN-eventItem{
  display:flex; flex-direction:column; gap:2px;
  padding:8px 10px; background:var(--card-bg,#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:var(--card-bg,#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:var(--card-bg,#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:var(--card-bg,#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 var(--bd,#ccd2da); background:var(--card-bg,#fff); }
.btn--danger{ background:var(--brand-2,#163152); color:#fff; border-color:var(--brand-2,#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;
}

/* --- 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:var(--card-bg,#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:var(--muted,#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;
  }
}

/* Bouton retour générique (pages légales, etc.) */
.GN-back-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 14px;
  margin-bottom: 12px;
  border-radius: 10px;
  font-size: .9rem;
  font-weight: 700;
  color: var(--ok, #2f6fed);
  text-decoration: none;
  transition: background .15s;
}
.GN-back-link:hover {
  background: rgba(47,111,237,.08);
}

/* ============================================================================
   Composants génériques pour pages STANDALONE (inscription, onboarding, etc.)
   Promus en GN-* pour être réutilisables (et thémés une seule fois dans HM-themes.css).
   ============================================================================ */

/* ---- Page chrome (header/footer simples pour pages auth) ---- */
.GN-page-header {
  background: var(--brand);
  color: #fff;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  letter-spacing: .2px;
  font-size: 1.25rem;
  position: sticky;
  top: 0;
  z-index: 50;
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
}
.GN-page-footer {
  background: var(--brand);
  color: #ecf0f1;
  padding: 14px 16px;
  margin-top: auto;
  text-align: center;
  font-size: .9rem;
}
.GN-page-main {
  flex: 1 0 auto;
  padding: clamp(16px, 2.5vw, 28px);
  display: grid;
  place-items: start center;
}
.GN-page-main > .GN-block { width: min(720px, 100%); padding: clamp(18px, 3vw, 28px); }

/* ---- Identity card (bandeau "en tant que [user]") ---- */
.GN-identity-card {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(47,111,237,.06);
  border: 1px solid rgba(47,111,237,.18);
  margin: 0 0 16px;
}
.GN-identity-card-name { font-weight: 800; color: var(--brand); }
.GN-identity-card-email { color: var(--muted); font-size: .92rem; }

/* ---- Conditional section (bloc qui apparaît/disparaît selon un radio) ---- */
.GN-conditional-section {
  margin: 14px 0 0;
  padding: 14px;
  border: 1px dashed rgba(47,111,237,.35);
  border-radius: 12px;
  background: rgba(47,111,237,.04);
}
.GN-conditional-section[hidden] { display: none !important; }
.GN-conditional-section-title {
  font-weight: 800;
  color: var(--brand);
  margin: 0 0 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ---- Radio card (tuile cliquable avec radio masqué + titre + sous-titre) ---- */
.GN-radio-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
@media (max-width: 540px) { .GN-radio-grid { grid-template-columns: 1fr; } }
.GN-radio-stack {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 8px 0;
}
.GN-radio-card {
  position: relative;
  padding: 14px 14px 14px 44px;
  border: 1.5px solid var(--bd,#cfd8e3);
  border-radius: 12px;
  background: var(--card-bg,#fff);
  cursor: pointer;
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.GN-radio-card:hover { border-color: var(--brand); background: #f8faff; }
.GN-radio-card input[type="radio"] {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  accent-color: var(--brand);
}
.GN-radio-card-title {
  display: block;
  font-weight: 800;
  color: var(--brand);
  font-size: 1rem;
}
.GN-radio-card-sub {
  display: block;
  font-size: .85rem;
  color: var(--muted);
  margin-top: 2px;
}
.GN-radio-card:has(input:checked) {
  border-color: var(--brand);
  background: #eef4ff;
  box-shadow: 0 0 0 3px rgba(47,111,237,.15);
}

/* ---- Step badge (numérotation "Étape 2/2") ---- */
.GN-step-badge {
  display: inline-block;
  background: var(--ok, #2f6fed);
  color: #fff;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .5px;
  margin-bottom: 8px;
}

/* ---- Lead (texte intro sous H1) + Hint (aide sous input) ---- */
.GN-lead { margin: 0 0 14px; color: var(--muted); line-height: 1.4; }
.GN-hint { margin: 6px 0 0; color: var(--muted); font-size: .92rem; }

/* ---- Input ---- */
.GN-input {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--bd,#cfd8e3);
  border-radius: 12px;
  background: var(--card-bg,#fff);
  font: inherit;
  color: var(--text);
  box-sizing: border-box;
  transition: border-color .15s, box-shadow .15s;
}
.GN-input:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 4px rgba(47,111,237,.20);
  background: #fbfdff;
}

/* ---- Segmented control (2-3 options inline, type tabs) ---- */
.GN-segmented { display: flex; gap: 8px; }
.GN-segmented-opt {
  flex: 1 1 0;
  position: relative;
  padding: 10px 12px;
  border: 1.5px solid var(--bd,#cfd8e3);
  border-radius: 10px;
  background: var(--card-bg,#fff);
  text-align: center;
  cursor: pointer;
  font-weight: 700;
  color: var(--brand);
  transition: all .15s;
}
.GN-segmented-opt:hover { border-color: var(--brand); }
.GN-segmented-opt input { position: absolute; opacity: 0; pointer-events: none; }
.GN-segmented-opt:has(input:checked) {
  background: #eef4ff;
  border-color: var(--brand);
  box-shadow: 0 0 0 2px rgba(47,111,237,.15);
}

/* ---- Info box (encart d'information contextuelle, variantes via --tone) ---- */
.GN-info-box {
  padding: 12px 14px;
  border-radius: 10px;
  background: #eff6ff;
  border: 1px solid #93c5fd;
  color: #1e40af;
  font-size: .92rem;
  line-height: 1.45;
}
.GN-info-box--warn {
  background: #fffbeb;
  border-color: #fcd34d;
  color: #92400e;
}
/* Sous-éléments optionnels pour titre + paragraphes propres */
.GN-info-box__title {
  display: block;
  font-weight: 700;
  font-size: 1.05rem;
  margin: 0 0 6px;
}
.GN-info-box p { margin: 0 0 12px; }
.GN-info-box p:last-child { margin-bottom: 0; }
.GN-info-box .GN-btn { margin-top: 4px; }

/* ---- Alert (erreur de formulaire) ---- */
.GN-alert {
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(220,38,38,.25);
  background: rgba(220,38,38,.06);
  color: #991b1b;
  font-weight: 650;
  margin: 0 0 12px;
}

/* ---- Photo picker (pick + preview, accepte HEIC) ----
   Composant réutilisable site-wide pour tout upload de photo non-camera.
   Auto-wiré par main.js sur tout `<input class="GN-photo-picker__input">`.
   Structure HTML attendue :
     <div class="GN-photo-picker">
       <div class="GN-photo-picker__preview" data-empty-icon="📷">
         <img alt=""> <!-- caché tant qu'aucune sélection -->
         <div class="GN-photo-picker__placeholder">📷</div>
       </div>
       <div class="GN-photo-picker__actions">
         <label class="GN-photo-picker__btn"><span>Choisir une photo</span>
           <input type="file" name="boat_photo" class="GN-photo-picker__input"
                  accept="image/jpeg,image/png,image/webp,image/heic,image/heif">
         </label>
         <button type="button" class="GN-photo-picker__clear" hidden>Retirer</button>
       </div>
       <p class="GN-photo-picker__hint"></p>
     </div>
   JS : prévisualisation FileReader, message dédié pour HEIC (pas de preview
   navigateur natif possible, mais accepté et converti côté serveur). */
.GN-photo-picker {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}
.GN-photo-picker__preview {
  width: 140px;
  height: 140px;
  border-radius: 12px;
  border: 1.5px dashed var(--bd,#cfd8e3);
  background: var(--surface-2,#f8fafc);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}
.GN-photo-picker__preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none;
}
.GN-photo-picker__preview.is-filled img { display: block; }
.GN-photo-picker__preview.is-filled .GN-photo-picker__placeholder { display: none; }
.GN-photo-picker__placeholder {
  font-size: 2.5rem;
  color: var(--muted,#94a3b8);
  line-height: 1;
}
.GN-photo-picker__actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.GN-photo-picker__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 10px;
  border: 1px solid var(--brand);
  background: var(--card-bg,#fff);
  color: var(--brand);
  font-weight: 700;
  font-size: .9rem;
  cursor: pointer;
  transition: background .12s, color .12s;
}
.GN-photo-picker__btn:hover { background: var(--brand); color: #fff; }
.GN-photo-picker__input { display: none; }
.GN-photo-picker__clear {
  appearance: none;
  border: 1px solid var(--bd,#cfd8e3);
  background: var(--card-bg,#fff);
  color: var(--muted);
  font-weight: 600;
  font-size: .85rem;
  padding: 6px 12px;
  border-radius: 8px;
  cursor: pointer;
}
.GN-photo-picker__clear:hover { background: var(--surface-2,#f1f5f9); color: var(--text); }
.GN-photo-picker__hint {
  margin: 0;
  font-size: .85rem;
  color: var(--muted);
  line-height: 1.35;
}
.GN-photo-picker__hint--heic { color: #92400e; font-weight: 600; }

/* ---- Autocomplete (dropdown suggestions sous un input) ---- */
.GN-autocomplete-wrap { position: relative; }
.GN-autocomplete-list {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  z-index: 50;
  background: var(--card-bg,#fff);
  border: 1px solid var(--bd,rgba(16,24,40,.14));
  border-radius: 12px;
  box-shadow: 0 14px 30px rgba(16,24,40,.14);
  max-height: 260px;
  overflow: auto;
  display: none;
  /* color explicite pour fournir une valeur d'héritage propre aux rows */
  color: var(--text,#0f172a);
}
.GN-autocomplete-list.open { display: block; }
.GN-autocomplete-row {
  padding: 10px 12px;
  cursor: pointer;
  border-bottom: 1px solid var(--bd,rgba(16,24,40,.08));
  font-size: 14px;
  /* background + color explicites pour ne pas dépendre d'une héritage capricieux
     (cas vécu : texte invisible blanc-sur-blanc quand un parent forçait color:white). */
  background: transparent;
  color: var(--text,#0f172a);
  user-select: none;
}
.GN-autocomplete-row:hover {
  background: rgba(47,111,237,.08);
  color: var(--text,#0f172a);
}
.GN-autocomplete-row:last-child { border-bottom: none; }

/* ---- Lifecycle banner (relances onboarding à l'accueil) ----
   Bandeau dismissible affiché en haut de l'accueil pour relancer le user
   sur des actions critiques (photo profil, bateau incomplet, inactivité…).
   Auto-wiré par main.js : click sur __close pose un flag sessionStorage 24h.
   Largeur : full-width mobile/tablette, contraint au layout 1100px sur PC.
   CTA = vrai bouton (pas un lien souligné).
   Cf. includes/lifecycle.php pour la logique de déclenchement,
   includes/components/lifecycle_banner.php pour le rendu PHP. */
.GN-lifecycle-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  margin: 0 0 14px;
  border-radius: 12px;
  background: linear-gradient(135deg, #eef4ff 0%, #f0f7ff 100%);
  border: 1px solid rgba(31,111,184,.22);
  box-shadow: 0 2px 8px rgba(31,111,184,.08);
  position: relative;
  /* Contraint au layout sur grand écran (>1100px = layout PC).
     Mobile/tablette : reste full-width (limite désactivée par la mq). */
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}
.GN-lifecycle-banner[hidden] { display: none !important; }
.GN-lifecycle-banner__icon {
  font-size: 1.6rem;
  flex: 0 0 auto;
  line-height: 1;
}
.GN-lifecycle-banner__body {
  flex: 1 1 auto;
  min-width: 0;
}
.GN-lifecycle-banner__msg {
  margin: 0 0 8px;
  color: var(--text);
  font-size: .95rem;
  line-height: 1.35;
}
/* CTA = vrai bouton (background + padding + radius), pas un lien souligné */
.GN-lifecycle-banner__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 8px;
  background: var(--brand);
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  font-size: .9rem;
  border: 1px solid transparent;
  transition: background .12s, transform .05s;
}
.GN-lifecycle-banner__cta:hover {
  background: var(--brand-2, var(--brand));
  text-decoration: none;
}
.GN-lifecycle-banner__cta:active { transform: translateY(1px); }
.GN-lifecycle-banner__close {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  flex: 0 0 auto;
}
.GN-lifecycle-banner__close:hover {
  background: rgba(0,0,0,.06);
  color: var(--text);
}