.guide-galerie{ --gal-creme:#FCFFE9; --gal-cacao:#1F1A03; --gal-kaki:#3B4900; --gal-lichen:#D9FF50; --gal-muted:#7c7a5f; padding:0 !important; }
  .gal-stage{ position:relative; height:var(--gi-screen-h, min(86vh,880px)); overflow:hidden; background:var(--gal-creme);
    font-family:'Urbanist',-apple-system,system-ui,sans-serif; color:var(--gal-cacao); }
  .gal-scroll{ position:absolute; inset:0; overflow-y:auto; overscroll-behavior:contain; scroll-behavior:smooth; }
  .gal-col{ width:min(66vw,680px); margin:0 auto; padding:clamp(104px,15vh,168px) 0 40%; }
  .gal-item{ position:relative; margin:0 0 20%; cursor:pointer; }
  .gal-item:last-child{ margin-bottom:0; }
  .gal-media{ position:relative; overflow:hidden; aspect-ratio:4/5; background:#e7e8d6;
    box-shadow:0 8px 24px rgba(31,26,3,.10); }
  /* Pas de will-change / translateZ permanent : trop de couches GPU sur laptop. */
  .gal-media img{ position:absolute; inset:-8% 0; width:100%; height:116%; object-fit:cover; }
  .gal-noimg{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
    font-size:3rem; color:var(--gal-kaki); background:#eef0dd; }
  .gal-no{ position:absolute; top:10px; right:14px; z-index:3; font-family:'Urbanist',sans-serif; font-weight:600;
    font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gal-creme);
    text-shadow:0 1px 3px rgba(0,0,0,.55); }
  /* Logo de l'initiative — pastille ronde haut-gauche de l'image */
  .gal-logo{ position:absolute; top:12px; left:12px; z-index:4; width:clamp(44px,4.6vw,58px); height:clamp(44px,4.6vw,58px);
    border-radius:50%; overflow:hidden; background:var(--gal-cacao); box-shadow:0 3px 10px rgba(31,26,3,.3);
    border:2px solid var(--gal-creme); display:flex; align-items:center; justify-content:center; }
  .gal-logo img{ position:relative; inset:auto; top:auto; left:auto; width:100%; height:100%; object-fit:cover; display:block; transform:none !important; }
  /* Pastille par défaut (pas de logo fourni) : initiale de l'initiative dans le ton de marque. */
  .gal-logo--initial{ font-family:'Averia Serif Libre',Georgia,serif; }
  .gal-logo--initial span{ color:var(--gal-lichen); font-weight:700; font-style:italic; font-size:clamp(1.2rem,2vw,1.55rem); line-height:1; transform:translateY(-1px); }
  .gal-verif{ position:absolute; bottom:10px; right:10px; z-index:3; font-size:.6rem; letter-spacing:.08em;
    text-transform:uppercase; background:var(--gal-lichen); color:var(--gal-cacao); border-radius:9999px;
    padding:.18rem .6rem; font-weight:700; }
  .gal-line{ position:absolute; left:0; right:0; top:46%; z-index:4; overflow:hidden; pointer-events:none;
    background:rgba(31,26,3,.42); padding:.35rem 0; }
  .gal-run{ display:inline-flex; align-items:baseline; gap:1.3rem; white-space:nowrap;
    font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gal-creme); }
  @media (prefers-reduced-motion: reduce){
    .gal-media img, .gal-noimg, .gal-run{ transform:none !important; }
  }
  /* Mode lite (défaut laptop) : pas de transitions panneau coûteuses au scroll. */
  body.gal-lite .gal-name,
  body.gal-lite .gal-meta,
  body.gal-lite .gal-miss{ transition:none !important; }
  body.gal-lite .gal-panel.is-fading .gal-name,
  body.gal-lite .gal-panel.is-fading .gal-meta,
  body.gal-lite .gal-panel.is-fading .gal-miss{ opacity:1; transform:none; }
  .gal-nm{ font-family:'Averia Serif Libre',Georgia,serif; font-style:italic; text-transform:none;
    letter-spacing:0; font-size:1.15rem; font-weight:700; }
  .gal-sep{ opacity:.7; }
  /* Coins fixes (superposés, ne défilent pas) */
  .gal-corner{ position:absolute; z-index:6; max-width:min(32%,340px); }
  .gal-tl{ top:clamp(16px,2.5vw,30px); left:clamp(16px,2.5vw,34px); font-size:.7rem; line-height:1.7;
    letter-spacing:.06em; text-transform:uppercase; color:var(--gal-muted); }
  .gal-tl b{ display:block; color:var(--gal-cacao); font-weight:600; letter-spacing:.14em; }
  .gal-bl{ bottom:clamp(16px,2.5vw,32px); left:clamp(16px,2.5vw,34px); max-width:min(38%,400px); }
  .gal-panel{ max-height:calc(100vh - var(--site-nav-h,72px) - 40px); overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; }
  /* Poignée de la feuille : mobile uniquement (activée dans le bloc ≤900px). */
  .gal-sheet-toggle{ display:none; }
  /* Infos intégrées à la fiche : mobile uniquement (desktop = panneau latéral). */
  .gal-fiche-info{ display:none; }
  /* Outils (recherche · localisation · filtres) placés en haut de la légende,
     au-dessus du « 01 / 28 » : le filet de séparation passe donc en dessous. */
  .gal-tools-slot{ margin:0 0 .9rem; padding-bottom:.9rem; border-bottom:1px solid rgba(59,73,0,.18); }
  .gal-tools-slot:empty{ display:none; }
  .gal-panel .guide-tools{ gap:.45rem !important; }
  .gal-panel .guide-tools-bar{ margin:0; }
  .gal-panel .guide-tools-search{ width:100%; }
  .gal-numof{ font-family:'Urbanist',sans-serif; font-weight:600; font-size:.66rem; letter-spacing:.16em;
    color:var(--gal-kaki); text-transform:uppercase; margin-bottom:.55rem; }
  /* Panneau en mode publicité : marqueur « PUBLICITÉ » en pastille lichen. */
  .gal-panel--pub .gal-numof{ display:inline-block; background:var(--gal-lichen); color:var(--gal-cacao);
    padding:.22rem .7rem; border-radius:9999px; letter-spacing:.14em; }
  /* Nom de l'initiative (mis en avant) + ligne méta — remplace le texte défilant. */
  .gal-name{ font-family:'Averia Serif Libre',Georgia,serif; font-style:italic; font-weight:700;
    font-size:clamp(1.5rem,5.5vw,2rem); line-height:1.05; letter-spacing:-.01em; color:var(--gal-cacao);
    margin:.1rem 0 .45rem; transition:opacity .3s ease, transform .3s ease; }
  .gal-meta{ font-family:'Urbanist',sans-serif; font-size:.64rem; letter-spacing:.14em; text-transform:uppercase;
    color:var(--gal-kaki); margin-bottom:.85rem; transition:opacity .3s ease, transform .3s ease; }
  .gal-panel.is-fading .gal-name, .gal-panel.is-fading .gal-meta{ opacity:0; transform:translateY(6px); }
  .gal-miss{ font-family:'Lora',Georgia,serif; font-size:clamp(.9rem,1.4vw,1.04rem); line-height:1.5;
    margin:0 0 .8rem; transition:opacity .3s ease, transform .3s ease; }
  .gal-tags{ display:flex; flex-wrap:wrap; gap:.35rem .45rem; margin-bottom:.9rem; }
  .gal-tag{ font-size:.62rem; letter-spacing:.04em; text-transform:uppercase; color:var(--gal-kaki);
    border:1px solid rgba(59,73,0,.35); border-radius:9999px; padding:.22rem .68rem; }
  .gal-fiche{ font:inherit; font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gal-cacao);
    background:none; border:none; border-bottom:1.5px solid var(--gal-kaki); padding:0 0 .15rem; cursor:pointer; }
  /* Rangée « Voir la fiche » + cœur préférés. */
  .gal-fiche-row{ display:flex; align-items:center; gap:.9rem; flex-wrap:wrap; }
  .gal-fav-slot{ display:inline-flex; }
  .gal-fav-slot .btn-favori{ width:2rem; height:2rem; }
  .gal-panel.is-fading .gal-miss{ opacity:0; transform:translateY(6px); }
  /* Index [IN01…] retiré : la ligne d'identité qui dérive le remplace. */
  .gal-index{ display:none; }
  .gal-idx-link{ pointer-events:auto; font:inherit; font-size:.66rem; letter-spacing:.02em; color:var(--gal-muted);
    background:none; border:none; padding:.1rem .26rem; cursor:pointer; white-space:nowrap; transition:color .2s; }
  .gal-idx-link:hover{ color:var(--gal-cacao); }
  .gal-idx-link.on{ color:var(--gal-kaki); font-weight:700; }
  .gal-hint{ position:absolute; z-index:6; top:clamp(16px,2.5vw,30px); right:clamp(16px,2.5vw,34px);
    font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gal-muted); text-align:right; }
  .gal-hint b{ color:var(--gal-kaki); }
  .gal-empty{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:var(--gal-muted); }
  @media(max-width:760px){
    .gal-stage{ height:100%; }
    .gal-col{ width:76vw; padding:clamp(84px,12vh,120px) 0 60%; }
    .gal-corner{ max-width:64%; }
    .gal-tl,.gal-hint{ font-size:.58rem; }
    .gal-index{ top:auto; bottom:34%; transform:none; }
  }

  /* ===================================================================
     MODE IMMERSIF — la galerie devient la page du Guide.
     Liste et Carte restent accessibles, réhabillées dans le même design.
     =================================================================== */
  :root{ --gi-creme:#FCFFE9; --gi-cacao:#1F1A03; --gi-kaki:#3B4900; --gi-lichen:#D9FF50; --gi-muted:#7c7a5f; }

  /* On masque le décor pub + l'ancien sélecteur d'onglets. Le hero (bannière
     « Guide Territoire ») et l'invitation restent affichés, en tête de page. */
  body.guide-immersif .guide-pub-band,
  body.guide-immersif .guide-pub-aside,
  body.guide-immersif .guide-toolbar .view-toggle{ display:none !important; }

  /* La zone appli (galerie/carte/liste) vit SOUS la bannière « Guide Territoire »
     (elle ne prend plus tout l'écran). La page défile : hero, puis un plein-écran
     d'appli. On garde le fond crème pleine largeur (pas d'arche ici). */
  body.guide-immersif .container.guide-page,
  body.guide-immersif .guide-fill,
  body.guide-immersif .guide-layout{ margin:0; padding:0; max-width:none; width:100%; }
  /* Plus de ligne/anneau lichen autour de la zone appli : fond crème plein, sans arche. */
  body.guide-immersif .container.guide-page,
  body.guide-immersif .guide-fill{ background:var(--gi-creme) !important; border-radius:0 !important; }
  /* Rien de blanc : les surfaces (--color-surface) passent en crème.
     --gi-screen-h : hauteur d'un écran sous la nav (bloc immersif plein viewport). */
  body.guide-immersif{
    --color-surface:var(--gi-creme);
    --guide-hero-h:clamp(288px,36vh,400px);
    --gi-screen-h:calc(100dvh - var(--site-nav-h,72px));
  }
  @supports not (height:100dvh){
    body.guide-immersif{ --gi-screen-h:calc(100vh - var(--site-nav-h,72px)); }
  }
  /* Indices ↑↓ : masqués par défaut ; visibles en immersif galerie. */
  .gi-page-cues{ display:none; flex-direction:column; gap:.55rem; }
  /* V2 minimal : petits cercles à contour fin, sans fond, flèche simple. */
  .gi-page-cues button{
    width:2.5rem; height:2.5rem; border-radius:9999px; border:1.5px solid rgba(31,26,3,.22);
    background:transparent; color:var(--gi-kaki); cursor:pointer;
    display:inline-flex; align-items:center; justify-content:center;
    font-size:.95rem; line-height:1;
    transition:background .15s ease, border-color .15s ease, color .15s ease, opacity .15s ease, transform .15s ease;
    -webkit-tap-highlight-color:transparent;
  }
  .gi-page-cues button:hover{ background:var(--gi-lichen); border-color:var(--gi-lichen); color:var(--gi-cacao); }
  .gi-page-cues button.is-hint{
    border-color:var(--gi-kaki); background:var(--gi-lichen);
    transform:scale(1.06);
  }
  .gi-page-cues button:focus-visible{ outline:2px solid var(--gi-kaki); outline-offset:2px; }
  /* Bas : box-arrow-down (desktop) · chevron (mobile flottant). */
  .gi-cue-ico-mobile{ display:none; }
  .gi-cue-ico-desktop{ display:inline-block; }
  /* Desktop immersif : la page peut défiler (hero ↔ galerie ↔ footer).
     Les deux panes gardent leur scroll interne ; en bout de course la molette
     enchaîne vers la page (voir bindGalScrollChain en JS).
     Centrage du bloc : uniquement après un scroll INTERNE (JS), pas au survol page. */
  @media (min-width:901px){
    body.guide-immersif .gal-scroll,
    body.guide-immersif .gal-panel{ overscroll-behavior:auto; }
    .gi-page-cues{
      position:absolute; z-index:45; right:clamp(10px,1.4vw,18px); top:50%;
      transform:translateY(-50%);
    }
    body.guide-immersif.guide-vue-galerie .gi-page-cues,
    body.guide-immersif.guide-vue-carte .gi-page-cues,
    body.guide-immersif.guide-vue-mes-annonces .gi-page-cues,
    body.guide-immersif.guide-vue-favoris .gi-page-cues{ display:flex; }
    /* Flèches séparées : ↑ en haut, ↓ en bas (galerie + carte + Mes annonces
       + Mes préférés) au lieu d'empilées au milieu. */
    body.guide-immersif.guide-vue-galerie .gi-page-cues,
    body.guide-immersif.guide-vue-carte .gi-page-cues,
    body.guide-immersif.guide-vue-mes-annonces .gi-page-cues,
    body.guide-immersif.guide-vue-favoris .gi-page-cues{
      transform:none; justify-content:space-between; }
    /* Galerie : ↑ en haut, ↓ alignée avec le bas de la fiche. */
    body.guide-immersif.guide-vue-galerie .gi-page-cues{ top:clamp(64px,9vh,100px); bottom:clamp(38px,6vh,64px); }
    /* Carte : ↑ alignée avec le haut de la carte (#vue-carte top),
       ↓ alignée avec le bas du cadre carte+légende. */
    body.guide-immersif.guide-vue-carte .gi-page-cues{ top:clamp(46px,6vh,58px); bottom:clamp(40px,5.4vh,60px); }
    /* Mes annonces / Mes préférés : le pane (#vue-mes-annonces / #vue-favoris)
       occupe toute la zone sous le sélecteur — flèches alignées sur ce pane. */
    body.guide-immersif.guide-vue-mes-annonces .gi-page-cues,
    body.guide-immersif.guide-vue-favoris .gi-page-cues{ top:clamp(76px,10vh,108px); bottom:clamp(28px,4vh,44px); }
  }
  body.guide-immersif .geo-btn-pill,
  body.guide-immersif #geoBtn{ background:var(--gi-creme) !important; }
  /* Hero court (on coupe dans le ciel). Sa hauteur pilote celle de l'encadré ci-dessous. */
  body.guide-immersif .guide-hero{ min-height:var(--guide-hero-h); padding-top:clamp(1.6rem,4vh,2.6rem);
    padding-bottom:clamp(1.2rem,2.4vh,1.8rem); background-position:center 72% !important; }
  /* Textes du hero compacts pour tenir dans la bannière courte. */
  body.guide-immersif .guide-hero-title{ font-size:clamp(1.9rem,3.6vw,3rem); margin-bottom:.5rem; }
  body.guide-immersif .guide-hero-sub{ font-size:clamp(.85rem,1.1vw,1rem); line-height:1.45; margin-bottom:0; }
  body.guide-immersif .guide-invite--hero{ margin-top:clamp(.8rem,2vh,1.4rem); }
  /* Bloc immersif : chrome commun (tous viewports). Le verrou « 1 écran +
     overflow hidden + vues absolute » est bureau seulement — sur mobile il
     écrasait la galerie (Pixel : section vide jusqu'à sortie d'immersif). */
  body.guide-immersif .guide-main-card{
    position:relative; inset:auto; margin:0; width:100%; max-width:none;
    height:auto; min-height:0; overflow:visible;
    scroll-margin-top:var(--site-nav-h,72px);
    border:0; border-radius:0; box-shadow:0 -4px 20px rgba(31,26,3,.06); background:var(--gi-creme); z-index:1; }
  @media (min-width:901px){
    body.guide-immersif .guide-main-card{
      height:var(--gi-screen-h); min-height:var(--gi-screen-h); overflow:hidden;
    }
  }
  /* Footer collé sous la zone appli : ni bande crème ni coins arrondis qui laissent
     voir le fond (retire la « bande beige » sous les fiches, descend le footer). */
  body.guide-immersif .site-footer{ margin-top:0 !important; border-radius:0 !important; }

  /* Sélecteur éditorial (Galerie · Carte) — en haut à droite de la zone appli.
     En immersif, les vues sans emplacement dédié (Liste, Mes annonces, Mes
     préférés, Détail) y intègrent aussi recherche/filtres via
     #guide-switch-tools-slot (voir placeGuideTools() en JS) : le nav devient
     alors une carte verticale (onglets + outils) ; sinon il reste la ligne de
     pastilles fine d'origine (Galerie/Carte, qui ont déjà leur propre
     emplacement — légende / colonne latérale). */
  .guide-switch{ position:absolute; z-index:40; top:clamp(22px,3vh,34px);
    right:clamp(40px,5vw,72px); left:auto; transform:none;
    display:none; flex-direction:column; align-items:stretch; gap:.6rem;
    font-family:'Urbanist',sans-serif;
    font-size:.8rem; letter-spacing:.16em; text-transform:uppercase;
    background:rgba(252,255,233,.88); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
    box-shadow:0 4px 14px rgba(31,26,3,.08); border-radius:12px; padding:.35rem .5rem; }
  body.guide-immersif .guide-switch{ display:flex; }
  .guide-switch-tabs{ display:flex; align-items:center; gap:.15rem; }
  /* Boîte ghost crème (pas de blanc) uniquement quand des outils y sont téléportés. */
  .guide-switch:has(.guide-switch-tools-slot:not(:empty)){
    background:rgba(252,255,233,.94); border:1px solid rgba(31,26,3,.16);
    border-radius:18px; padding:.6rem .7rem .75rem;
    box-shadow:0 10px 26px rgba(31,26,3,.10); width:min(300px,42vw);
  }
  /* Galerie & Carte : les outils vivent AILLEURS (gal-/carte-tools-slot), donc
     JAMAIS d'encadré autour des onglets ni de largeur figée — onglets nus,
     à leur emplacement naturel. */
  body.guide-immersif.guide-vue-galerie .guide-switch,
  body.guide-immersif.guide-vue-carte .guide-switch{
    background:none !important; border:0 !important; box-shadow:none !important;
    border-radius:0 !important; padding:0 !important; width:auto !important; max-width:none !important; }
  .guide-switch-tools-slot:empty{ display:none; }
  .guide-switch button{ font:inherit; letter-spacing:inherit; background:none; border:none; cursor:pointer;
    color:var(--gi-muted); padding:.3rem .55rem; position:relative; }
  .guide-switch button.on{ color:var(--gi-cacao); }
  .guide-switch button.on::after{ content:""; position:absolute; left:.55rem; right:.55rem; bottom:.05rem; height:1.5px; background:var(--gi-kaki); }
  .guide-switch #btn-guide-page,
  .guide-switch .gs-exit{
    color:var(--gi-cacao); margin-left:.35rem; padding:.28rem .45rem; line-height:1;
    border:1px solid rgba(31,26,3,.22); border-radius:9999px; background:rgba(252,255,233,.92);
  }
  .guide-switch #btn-guide-page:hover,
  .guide-switch .gs-exit:hover{ background:var(--gi-lichen); border-color:var(--gi-kaki); }
  .guide-switch #btn-guide-page::after,
  .guide-switch .gs-exit::after{ display:none !important; }
  .guide-switch #btn-guide-page .bi,
  .guide-switch .gs-exit .bi{ font-size:.85rem; display:block; }
  .guide-switch .gs-div{ color:var(--gi-muted); opacity:.5; }
  .guide-credit{ position:fixed; z-index:55; top:calc(var(--site-nav-h,72px) + 10px); left:clamp(16px,2.6vw,34px);
    display:none; font-family:'Urbanist',sans-serif; font-size:.6rem; line-height:1.4; letter-spacing:.16em;
    text-transform:uppercase; color:var(--gi-muted); max-width:40vw; }
  /* Le titre du hero « Guide Territoire » sert d'en-tête : crédit redondant masqué. */
  body.guide-immersif .guide-credit{ display:none; }
  .guide-credit b{ display:block; margin-bottom:.06em; font-family:'Averia Serif Libre',serif; font-style:italic;
    font-size:1.9rem; line-height:1; letter-spacing:.01em; color:var(--gi-kaki); font-weight:700; text-transform:none; }

  /* Ancien en-tête (.card-header) : plus utilisé en immersif, quelle que soit la
     vue — Carte garde ses outils dans la colonne latérale (#carte-tools-slot),
     Galerie dans sa légende (#gal-tools-slot), les autres vues dans le nav
     (#guide-switch-tools-slot, cf. plus haut). Le bg-white de .card-header ne
     doit donc plus jamais apparaître en immersif. */
  body.guide-immersif .card-header{ display:none !important; }
  /* Outils — ghost : transparent / crème, pas de blanc #fff.
     Appliqué en immersif ET en galerie mode page (même fond crème).
     --color-surface et .geo-btn-pill utilisent !important blanc en thème → on force ici. */
  body.guide-immersif .guide-tools .guide-tools-search,
  .guide-galerie .guide-tools .guide-tools-search{ width:100%; }
  body.guide-immersif .guide-tools .search-box,
  .guide-galerie .guide-tools .search-box{
    flex:1 1 auto; background:transparent !important; border:1px solid rgba(31,26,3,.22) !important;
    box-shadow:none !important; }
  body.guide-immersif .guide-tools .guide-toolbar,
  .guide-galerie .guide-tools .guide-toolbar{ justify-content:flex-start; width:100%; margin:0; }
  body.guide-immersif .guide-tools .guide-toolbar .guide-actions,
  .guide-galerie .guide-tools .guide-toolbar .guide-actions{ width:100%; margin-left:0 !important; justify-content:stretch; }
  body.guide-immersif .guide-tools #filtre-btn,
  .guide-galerie .guide-tools #filtre-btn{
    width:100%; background:transparent !important; border:1px solid rgba(31,26,3,.22) !important;
    color:var(--gi-kaki) !important; font-size:.82rem; }
  body.guide-immersif .guide-tools #filtre-btn:hover,
  .guide-galerie .guide-tools #filtre-btn:hover{ background:rgba(59,73,0,.06) !important; }
  body.guide-immersif .guide-tools .search-box .form-control,
  .guide-galerie .guide-tools .search-box .form-control{
    background:transparent !important; border:none !important; color:var(--gi-cacao); font-size:.85rem; }
  body.guide-immersif .guide-tools .search-box .form-control::placeholder,
  .guide-galerie .guide-tools .search-box .form-control::placeholder{ color:#9a9b80; }
  body.guide-immersif .guide-tools .search-box .form-control:focus,
  .guide-galerie .guide-tools .search-box .form-control:focus{ box-shadow:none; }
  body.guide-immersif .guide-tools .search-box:focus-within,
  .guide-galerie .guide-tools .search-box:focus-within{
    border-color:var(--gi-kaki) !important; box-shadow:0 0 0 3px rgba(59,73,0,.12) !important; }
  body.guide-immersif .guide-tools .search-box .btn,
  .guide-galerie .guide-tools .search-box .btn{
    background:transparent !important; border:none !important; color:var(--gi-kaki) !important; }
  body.guide-immersif .guide-tools .search-box .btn:hover,
  .guide-galerie .guide-tools .search-box .btn:hover{ background:rgba(59,73,0,.06) !important; }
  body.guide-immersif .guide-tools .geo-btn-pill,
  .guide-galerie .guide-tools .geo-btn-pill{
    background:transparent !important; border:1px solid rgba(59,73,0,.4) !important; color:var(--gi-kaki) !important; }
  body.guide-immersif .guide-tools .geo-btn-pill:hover,
  .guide-galerie .guide-tools .geo-btn-pill:hover{ background:rgba(59,73,0,.06) !important; transform:none; }
  /* Immersif : pastille icône seule (colonne étroite). Mode page galerie : label conservé. */
  body.guide-immersif .guide-tools .geo-btn-pill{
    width:46px; height:46px; min-height:46px; padding:0; flex:0 0 46px; justify-content:center; gap:0; }
  body.guide-immersif .guide-tools .geo-btn-pill .geo-btn-label{ display:none; }
  /* Panneau filtres : fond crème plein (lisible même par-dessus la carte). */
  body.guide-immersif #filtre-panel,
  body.guide-immersif .guide-tools .filtre-panel,
  .guide-galerie .guide-tools .filtre-panel{
    background:var(--gi-creme) !important; border-color:rgba(31,26,3,.18) !important; }
  /* Pas de blanc à l'intérieur : liste des secteurs + pastilles en transparent. */
  body.guide-immersif #categorie-filter-wrap,
  body.guide-immersif .secteurs-groups,
  body.guide-immersif .secteur-choice,
  body.guide-immersif .secteur-item,
  .guide-galerie .secteurs-groups,
  .guide-galerie .secteur-choice,
  .guide-galerie .secteur-item{ background:transparent !important; }

  /* La recherche occupe le coin haut-droit : on masque l'indice décoratif. */
  body.guide-immersif .gal-hint{ display:none; }
  body.guide-immersif #vue-galerie{ padding:0; }

  /* Bureau : vues en absolute dans le bloc 1 écran. Mobile = flux page (voir ≤900px). */
  @media (min-width:901px){
    body.guide-immersif #vue-galerie{ position:absolute; inset:0; }
    body.guide-immersif .gal-stage{ height:100%; }
    body.guide-immersif #vue-liste{ position:absolute; inset:0; overflow-y:auto; padding:clamp(84px,12vh,140px) 0 12vh; background:var(--gi-creme); }
    body.guide-immersif #vue-mes-annonces,
    body.guide-immersif #vue-favoris{ position:absolute; inset:0; overflow-y:auto;
      padding:clamp(84px,12vh,140px) clamp(16px,3vw,30px) 12vh; background:var(--gi-creme); }
    /* Vue Détail : comme les autres vues, elle doit défiler dans le bloc plein
       écran (sinon la couverture géante remplit la carte à `overflow:hidden` et
       le contenu sous la photo devient invisible / inaccessible). */
    body.guide-immersif #vue-detail-annonce{ position:absolute; inset:0; overflow-y:auto;
      padding:clamp(60px,8vh,96px) clamp(24px,4vw,72px) 12vh; background:var(--gi-creme); }
  }
  /* =====================================================================
     Fiche détail — mise en page « double page » (maquette Exemple 3) :
     photo à gauche à hauteur d'écran qui SUIT le défilement (sticky),
     contenu à droite comme un magazine ouvert. La photo garde des
     proportions raisonnables au lieu d'être étirée sur toute la hauteur
     du contenu (ce qui la rognait beaucoup trop).
     ===================================================================== */
  body.guide-immersif #vue-detail-annonce .fiche{
    max-width:1440px; margin-inline:auto; }
  @media (min-width:901px){
    body.guide-immersif #vue-detail-annonce .fiche{
      display:grid; grid-template-columns:minmax(300px,40%) 1fr;
      align-items:start; min-height:clamp(360px,64vh,620px);
      /* overflow:visible obligatoire : le `overflow:hidden` de base piège le
         sticky de la couverture. On perd l'arrondi des coins (acceptable dans
         le panneau plein cadre) ; la photo garde son propre clip. */
      overflow:visible; border-radius:0; }
    /* La couverture conserve un coin arrondi côté haut-gauche pour rester nette. */
    body.guide-immersif #vue-detail-annonce .fiche-hero{ border-radius:16px 0 0 16px; }
    /* Couverture : colonne gauche, hauteur d'écran, collée en haut au scroll.
       grid-row:1/20 → la zone couvre toute la hauteur du contenu, donc le
       sticky reste actif tant qu'on fait défiler la fiche. */
    body.guide-immersif #vue-detail-annonce .fiche-hero{
      grid-column:1; grid-row:1 / 20;
      position:sticky; top:0; align-self:start;
      /* Cadre carré : rogne le moins possible quelle que soit l'orientation de
         la photo (portrait, paysage, carré), et reste prévisible peu importe la
         taille de la fenêtre. Plafonné pour ne pas dépasser l'écran. */
      aspect-ratio:1/1; height:auto; max-height:min(78vh,660px);
      max-width:none; }
    /* Colonne droite : identité (logo + nom), corps, pieds empilés. */
    body.guide-immersif #vue-detail-annonce .fiche-idrow{
      grid-column:2; grid-row:1;
      margin:clamp(26px,2.6vw,44px) clamp(26px,2.6vw,44px) 0;
      align-items:center; }
    body.guide-immersif #vue-detail-annonce .fiche-grid{
      grid-column:2; grid-row:2;
      grid-template-columns:1fr; margin:0; gap:1.5rem;
      padding:1.3rem clamp(26px,2.6vw,44px) clamp(20px,3vw,40px); }
    body.guide-immersif #vue-detail-annonce .fiche-card{ position:static; }
    body.guide-immersif #vue-detail-annonce .fiche-foot{ grid-column:2; }
    /* Bouton « Retour » à droite et abaissé (il était collé/coupé sous la nav). */
    body.guide-immersif #vue-detail-annonce #btn-retour-detail{
      display:block; width:fit-content;
      margin:clamp(12px,1.8vh,24px) 0 clamp(10px,1.4vh,18px) auto; }
  }
  /* Fiche sans encadré : elle se fond dans le panneau crème (pas de bordure, pas
     d'ombre ni de coins de carte). Les blocs internes gardent leur fond. */
  body.guide-immersif #vue-detail-annonce .fiche{
    border:0 !important; box-shadow:none !important; background:transparent !important; }
  /* Pas de filet au-dessus des pieds (« Je me suis connecté·e », suppression). */
  body.guide-immersif #vue-detail-annonce .fiche-foot{ border-top:0; }
  /* Bouton « Retour » aux couleurs de la charte (cacao) — pas le gris Bootstrap. */
  body.guide-immersif #vue-detail-annonce #btn-retour-detail{
    font-family:'Urbanist',sans-serif; font-weight:500;
    color:var(--gi-cacao) !important; background:transparent !important;
    border:1.5px solid rgba(31,26,3,.32) !important; border-radius:999px !important;
    padding:.42rem 1.05rem !important;
    transition:background .15s ease, color .15s ease, border-color .15s ease; }
  body.guide-immersif #vue-detail-annonce #btn-retour-detail:hover,
  body.guide-immersif #vue-detail-annonce #btn-retour-detail:focus-visible{
    background:var(--gi-cacao) !important; color:var(--gi-creme) !important;
    border-color:var(--gi-cacao) !important; }
  /* ---- LISTE, dans le design ---- */
  body.guide-immersif #vue-liste{ background:var(--gi-creme); }
  body.guide-immersif #vue-liste #annonces-list{ max-width:720px; margin:0 auto; padding:0 20px; }
  /* Vues « Mes annonces » et « Mes préférés » */
  body.guide-immersif #vue-mes-annonces,
  body.guide-immersif #vue-favoris{ background:var(--gi-creme); }
  body.guide-immersif #vue-mes-annonces > *,
  body.guide-immersif #vue-favoris > *{ max-width:920px; margin-left:auto; margin-right:auto; }
  body.guide-immersif .annonce-list-item{ border:0 !important; border-top:1px solid rgba(31,26,3,.14) !important; border-radius:0 !important; background:transparent !important; padding:1.3rem 0 !important; }
  body.guide-immersif .annonce-list-item:last-child{ border-bottom:1px solid rgba(31,26,3,.14); }
  body.guide-immersif .annonce-title{ font-family:'Averia Serif Libre',Georgia,serif !important; font-style:italic; font-weight:700; font-size:clamp(1.05rem,1.5vw,1.4rem) !important; line-height:1.12; }
  body.guide-immersif .annonce-list-thumb{ border-radius:0 !important; }

  /* ---- MES ANNONCES / MES PRÉFÉRÉS — cartes (maquette validée) ---- */
  /* Cartes arrondies (scopé à ces vues ; la Liste garde son style en filets). */
  body.guide-immersif #vue-mes-annonces .annonce-list-item,
  body.guide-immersif #vue-favoris .annonce-list-item{
    border:1px solid rgba(31,26,3,.14) !important; border-top:1px solid rgba(31,26,3,.14) !important;
    border-radius:20px !important; background:var(--gi-creme) !important;
    box-shadow:0 1px 3px rgba(31,26,3,.05); padding:clamp(1rem,2vw,1.4rem) !important; margin-bottom:1.1rem;
  }
  /* Échelle typographique du Guide un cran plus fine (fiches liste / mes annonces
     / préférés). Galerie (.gal-name) et Carte (.carte-liste-nom) gardent la leur. */
  body.guide-immersif .annonce-description{ font-size:.9rem !important; line-height:1.55; }
  body.guide-immersif .annonce-meta{ font-size:.8rem; }
  body.guide-immersif .annonce-description-wrap .desc-toggle,
  body.guide-immersif .annonce-description-wrap a{ font-size:.82rem; }
  body.guide-immersif #notif-prefs-details summary{ font-size:.92rem; }
  body.guide-immersif #notif-prefs-details{ font-size:.9rem; }
  /* Rangée d'actions en bas de carte, séparée d'un filet ; s'enroule proprement. */
  body.guide-immersif .mes-actions{ margin-top:1.2rem; padding-top:1rem; border-top:1px solid rgba(31,26,3,.1); width:100%; }
  body.guide-immersif .mes-actions .btn{ border-radius:9999px !important; font-family:'Urbanist',sans-serif; font-weight:500; padding:.5rem 1.05rem; }

  /* Mes annonces : recherche / géoloc / Filtres inutiles ici → masqués
     (uniquement quand cette vue est active ; Liste et Favoris les gardent). */
  body.guide-immersif:has(#vue-mes-annonces:not(.d-none)) .guide-tools-search,
  body.guide-immersif:has(#vue-mes-annonces:not(.d-none)) #filtre-btn{ display:none !important; }

  /* Préférences notifications : toggles en palette charte (plus de bleu Bootstrap),
     discrets et délicats comme le reste du Guide. */
  #notif-prefs-details .form-check-input:checked{ background-color:#3B4900 !important; border-color:#3B4900 !important; }
  #notif-prefs-details .form-check-input:focus{ border-color:rgba(59,73,0,.45) !important; box-shadow:0 0 0 .2rem rgba(59,73,0,.15) !important; }
  /* Encadré notifications : ghost pattern crème (pas de gris Bootstrap bg-light). */
  body.guide-immersif #notif-prefs-details{
    background:#f6f9e6 !important; border-color:rgba(31,26,3,.14) !important;
    border-radius:16px !important; color:var(--gi-cacao); }
  body.guide-immersif #notif-prefs-details .text-muted{ color:var(--gi-muted) !important; }

  /* ---- CARTE, dans le design (Mapbox conservé, chrome réhabillé) ---- */
  /* Carte sous la nav. Outils (recherche · localisation · filtres) en haut de
     la barre latérale gauche, au-dessus de la liste des initiatives. */
  body.guide-immersif #vue-carte{ background:var(--gi-creme); }
  @media (min-width:901px){
    body.guide-immersif #vue-carte{ position:absolute; inset:0; top:clamp(44px,6vh,56px); }
    /* Bande crème (menu sur crème) → on rapetisse la zone carte pour qu'elle
       tienne à l'écran et que la légende reste visible (sans trop de vide en bas). */
    /* Le débordement de la liste étant réglé par min-height:0, on rend au
       panneau sa pleine hauteur (petit dégagement bas seulement). */
    body.guide-immersif.guide-vue-carte #vue-carte{ bottom:auto;
      height:calc(var(--gi-screen-h) - clamp(44px,6vh,56px) - clamp(20px,3vh,32px)); }
    body.guide-immersif .carte-split{ height:100%; }
    /* Barre latérale élargie pour contenir le sélecteur. */
    body.guide-immersif.guide-vue-carte .carte-side{ flex:0 0 clamp(360px,33vw,460px) !important; max-width:460px !important; }
    /* Cases initiatives : léger retrait horizontal pour que la fiche (bordure +
       ombre) ne soit pas rognée à gauche/droite par le conteneur défilant. */
    body.guide-immersif.guide-vue-carte .carte-liste{ max-width:none !important; width:auto !important;
      padding-left:clamp(6px,0.8vw,12px) !important; padding-right:clamp(6px,0.8vw,12px) !important; }
    /* Tour de la carte fini : cadre arrondi + espace crème propre autour. */
    /* margin-top alignée sur le padding-top des outils de la barre latérale :
       le haut de la carte est au même niveau que la barre de recherche. */
    body.guide-immersif.guide-vue-carte .carte-map-zone{ border:1px solid rgba(31,26,3,.16); border-radius:14px; overflow:hidden;
      margin:clamp(18px,3vh,28px) clamp(66px,5vw,84px) clamp(10px,1.4vh,16px) clamp(6px,.8vw,12px); box-shadow:0 3px 14px rgba(31,26,3,.06); }
    /* Bouton plein écran rétabli sur desktop (était masqué hors mobile). */
    body.guide-immersif.guide-vue-carte .carte-fs-ctrl{ display:block; }
  }
  body.guide-immersif .carte-split{ background:var(--gi-creme); }
  body.guide-immersif .carte-side{ display:flex; flex-direction:column; background:var(--gi-creme); min-width:0; min-height:0; }
  /* padding horizontal à 0 : la recherche / les filtres s'alignent sur toute
     la largeur de la colonne (mêmes bords que les boutons, les fiches et la
     ligne de séparation). */
  body.guide-immersif .carte-tools-slot{ padding:clamp(14px,2vh,24px) 0 12px; border-bottom:1px solid rgba(31,26,3,.12); }
  /* Espace pour le sélecteur centré en haut de la zone appli. */
  @media(min-width:901px){ body.guide-immersif.guide-vue-carte .carte-tools-slot{ padding-top:clamp(18px,3vh,28px); } }
  body.guide-immersif .carte-tools-slot:empty{ display:none; }
  /* padding horizontal à 0 : les fiches s'alignent sur toute la largeur de
     la colonne (mêmes bords que la recherche / les boutons du haut). */
  /* Respiration en haut et en bas de la liste défilante (pas de fondu, qui
     décolorait la dernière fiche). */
  body.guide-immersif .carte-liste{ background:transparent; border-right:none; padding:6px 0 8px; gap:.6rem; min-height:0; }
  /* Espace en fin de défilement : Chrome ignore le padding-bottom d'un conteneur
     scrollable, donc on ajoute une cale à HAUTEUR EXPLICITE (marche que la liste
     soit en flex ou en bloc) qui, elle, défile — la dernière fiche ne colle pas au bas. */
  body.guide-immersif .carte-liste::after{ content:""; display:block; flex:0 0 auto;
    height:clamp(30px,5vh,56px); min-height:clamp(30px,5vh,56px); width:100%; }
  /* Zone carte : la carte remplit toute la hauteur (fini la bande vide et les
     coins arrondis moches), et la légende occupe une bande crème en bas. */
  body.guide-immersif .carte-map-zone{ background:var(--gi-creme); display:flex; flex-direction:column; }
  body.guide-immersif .carte-map-zone #map-container{ height:auto !important; min-height:0 !important; flex:1 1 auto; border-radius:0 !important; }
  body.guide-immersif .carte-legende{ flex:0 0 auto; display:flex; flex-wrap:wrap; align-items:center; gap:.4rem .9rem;
    padding:.6rem clamp(12px,1.4vw,20px); background:var(--gi-creme); border-top:1px solid rgba(31,26,3,.12);
    max-height:22vh; overflow-y:auto; }
  body.guide-immersif .carte-legende:empty{ display:none; }
  /* Bouton légende (repliable) + bouton plein écran — visibles sur mobile/tablette
     seulement (règles @media plus bas). Masqués par défaut. */
  .carte-fullscreen-btn{ display:none; }
  .carte-legende-toggle{ display:none; }
  /* Bouton plein écran = commande Mapbox : déplacé par JS dans la pile haut-droit,
     juste sous la géolocalisation. Style identique aux commandes zoom Mapbox.
     Visible sur mobile/tablette seulement. */
  .carte-fs-ctrl{ display:none; }
  .carte-fs-ctrl .carte-fullscreen-btn{ display:flex; align-items:center; justify-content:center;
    width:29px; height:29px; padding:0; border:0; background:#FCFFE9; color:#333; cursor:pointer; font-size:.95rem; }
  .carte-fs-ctrl .carte-fullscreen-btn:hover{ background:#f2f2f2; }
  @media(max-width:900px){ body.guide-immersif .carte-fs-ctrl{ display:block; } }
  /* Sans encadré : juste le titre + la flèche vers le bas (bouton texte nu). */
  body.guide-immersif .carte-legende-toggle{ align-items:center; gap:.4rem; margin:8px 12px 4px;
    padding:.35rem 0; border-radius:0; background:none; border:0; box-shadow:none;
    color:var(--gi-kaki); font-family:'Urbanist',sans-serif;
    font-size:.72rem; letter-spacing:.06em; cursor:pointer; width:auto; }
  body.guide-immersif .carte-legende-toggle > span{ margin-right:0; }
  /* On ne garde que le titre + le chevron (pas l'icône palette). */
  body.guide-immersif .carte-legende-toggle .bi-palette2{ display:none; }
  body.guide-immersif .carte-legende-chevron{ transition:transform .2s ease; }
  body.guide-immersif .carte-map-zone.legende-open .carte-legende-chevron{ transform:rotate(180deg); }
  /* Légende repliable AUSSI sur bureau : bouton visible, légende masquée par
     défaut, ouverte/fermée au clic (le JS bascule .legende-open). */
  body.guide-immersif .carte-legende-toggle{ display:inline-flex; }
  body.guide-immersif .carte-map-zone:not(.legende-open) #carte-legende{ display:none !important; }
  body.guide-immersif .carte-map-zone:has(#carte-legende:empty) .carte-legende-toggle{ display:none; }
  /* Plein écran carte : la zone carte couvre tout l'écran (au-dessus de la nav). */
  body.carte-fullscreen{ overflow:hidden !important; }
  /* Casser les contextes d'empilement parents (la carte-map-zone est dans
     .guide-main-card z:1) sinon la nav z:1400 passe par-dessus le plein écran. */
  body.carte-fullscreen .guide-main-card,
  body.carte-fullscreen #vue-carte,
  body.carte-fullscreen .carte-split,
  body.carte-fullscreen .guide-fill,
  body.carte-fullscreen .container.guide-page{ z-index:auto !important; transform:none !important; overflow:visible !important; }
  /* Masquer la nav + la bannière pendant le plein écran (propreté, ne recouvre pas le bouton). */
  body.carte-fullscreen .site-nav,
  body.carte-fullscreen #banniere-annonces{ display:none !important; }
  body.carte-fullscreen .carte-map-zone{ position:fixed !important; inset:0 !important; z-index:99999 !important;
    height:100dvh !important; min-height:0 !important; margin:0 !important; }
  /* .guide-immersif en plus → bat la règle mobile #map-container{height:58vh}. */
  body.carte-fullscreen.guide-immersif .carte-map-zone #map-container{ height:100dvh !important; min-height:0 !important; }
  /* Le bouton quitter suit la pile Mapbox (haut droit, sous la géoloc) — rien à
     repositionner en plein écran. */
  /* En plein écran, la légende repliée reste dispo mais discrète en bas. */
  body.carte-fullscreen .carte-legende-toggle{ position:absolute; left:12px; bottom:calc(env(safe-area-inset-bottom,0px) + 12px); margin:0; z-index:6; }
  body.carte-fullscreen .carte-map-zone.legende-open #carte-legende{ position:absolute; left:12px; right:12px;
    bottom:calc(env(safe-area-inset-bottom,0px) + 58px); z-index:6; border-radius:14px; border:1px solid rgba(31,26,3,.15); }
  body.guide-immersif .carte-leg-titre{ font-family:'Urbanist',sans-serif; font-size:.62rem; letter-spacing:.16em;
    text-transform:uppercase; color:var(--gi-muted); margin-right:.3rem; }
  body.guide-immersif .carte-leg-item{ display:inline-flex; align-items:center; gap:.32rem; font-family:'Urbanist',sans-serif;
    font-size:.72rem; color:var(--gi-kaki); white-space:nowrap; }
  body.guide-immersif .carte-leg-item .bi{ font-size:.85rem; }
  @media(min-width:992px){
    body.guide-immersif .carte-side{ flex:0 0 clamp(300px,26vw,360px); max-width:360px; height:100%;
      border-right:1px solid rgba(31,26,3,.14); }
    body.guide-immersif .carte-liste{ flex:1 1 auto; height:auto; max-height:none; overflow-y:auto; }
  }
  /* Pas de blanc : cartes de la barre latérale en crème (filet fin, transparent). */
  /* Liste latérale : chaque initiative dans une carte fermée (encadré net :
     fond crème plein + bordure + coins arrondis + légère ombre). */
  body.guide-immersif .carte-liste-item{ background:var(--gi-creme,#FCFFE9) !important; border:1px solid rgba(31,26,3,.16) !important; border-radius:14px !important; box-shadow:0 1px 3px rgba(31,26,3,.06) !important; padding:.7rem .85rem !important; }
  body.guide-immersif .carte-liste-item:hover{ background:var(--gi-creme,#FCFFE9) !important; border-color:rgba(31,26,3,.28) !important; box-shadow:0 8px 20px rgba(31,26,3,.10) !important; transform:translateY(-1px); }
  /* Réserve la colonne du cœur (le padding !important ci-dessus écrasait le
     padding-right prévu) : sans ça, le titre sur 2 lignes passe sous le cœur. */
  body.guide-immersif .carte-liste-row .carte-liste-item{ padding-right:2.5rem !important; }
  /* Typo un peu plus fine dans les fiches de la liste Carte. */
  /* Titres de fiche en Averia Serif Libre (comme la Galerie), plus en Urbanist gras. */
  body.guide-immersif .carte-liste-nom{ font-family:'Averia Serif Libre',Georgia,serif; font-style:italic; font-weight:700; font-size:.95rem; line-height:1.2; }
  body.guide-immersif .carte-liste-meta{ font-size:.72rem; }
  /* « Mis de l'avant » : carte fermée aussi, teinte lichen + filet à gauche. */
  body.guide-immersif .carte-liste-commandite{ background:var(--lichen-dim) !important; border:1px solid var(--lichen-border) !important; border-left:3px solid var(--lichen) !important; border-radius:14px !important; }
  body.guide-immersif .carte-liste-commandite:hover{ background:var(--lichen-border) !important; }
  /* Respiration sur les côtés de la barre latérale carte. */
  /* Initiatives (recherche + liste) poussées à droite pour s'aligner sous
     « Galerie » du sélecteur (qui est à left:clamp(28px,4vw,64px)). */
  body.guide-immersif.guide-vue-carte .carte-side{ padding-left:clamp(42px,4vw,62px); padding-right:clamp(14px,1.4vw,22px); }
  /* Barres de défilement en crème (plus de blanc). */
  /* Aucune scrollbar visible en immersif : le défilement (parcourir les fiches)
     se fait à la molette/trackpad, mais la barre est masquée. */
  body.guide-immersif .carte-liste, body.guide-immersif .carte-side,
  body.guide-immersif .gal-scroll, body.guide-immersif .gal-panel,
  body.guide-immersif #vue-liste, body.guide-immersif #vue-mes-annonces,
  body.guide-immersif #vue-favoris{
    scrollbar-width:none; -ms-overflow-style:none; }
  body.guide-immersif .carte-liste::-webkit-scrollbar, body.guide-immersif .carte-side::-webkit-scrollbar,
  body.guide-immersif .gal-scroll::-webkit-scrollbar, body.guide-immersif .gal-panel::-webkit-scrollbar,
  body.guide-immersif #vue-liste::-webkit-scrollbar, body.guide-immersif #vue-mes-annonces::-webkit-scrollbar,
  body.guide-immersif #vue-favoris::-webkit-scrollbar{
    width:0; height:0; display:none; }
  /* Panneau des filtres : barre de défilement FINE et VISIBLE (intégrée, au ton
     kaki) pour parcourir facilement les secteurs. */
  body.guide-immersif #categorie-filter-wrap,
  .guide-galerie #categorie-filter-wrap{
    scrollbar-width:thin !important; scrollbar-color:rgba(59,73,0,.5) transparent; -ms-overflow-style:auto !important;
    padding-right:6px; }
  body.guide-immersif #categorie-filter-wrap::-webkit-scrollbar,
  .guide-galerie #categorie-filter-wrap::-webkit-scrollbar{ width:9px !important; height:9px !important; display:block !important; }
  body.guide-immersif #categorie-filter-wrap::-webkit-scrollbar-track,
  .guide-galerie #categorie-filter-wrap::-webkit-scrollbar-track{ background:rgba(59,73,0,.08); border-radius:99px; margin:4px 0; }
  body.guide-immersif #categorie-filter-wrap::-webkit-scrollbar-thumb,
  .guide-galerie #categorie-filter-wrap::-webkit-scrollbar-thumb{ background:rgba(59,73,0,.45); border-radius:99px; border:2px solid transparent; background-clip:padding-box; }
  body.guide-immersif #categorie-filter-wrap::-webkit-scrollbar-thumb:hover,
  .guide-galerie #categorie-filter-wrap::-webkit-scrollbar-thumb:hover{ background:rgba(59,73,0,.7); }

  /* ---- Diapo publicitaire dans la galerie ---- */
  .gal-item--pub .gal-media{ background:var(--gi-kaki); display:flex; align-items:center; justify-content:center; }
  .gal-item--pub .gal-media img{ position:static; inset:auto; width:100%; height:100%; object-fit:cover; }
  .gal-pub-k{ position:absolute; top:10px; left:12px; z-index:3; font-family:'Urbanist',sans-serif; font-size:.6rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gi-lichen); }
  .gal-pub-cap{ position:absolute; left:0; right:0; bottom:0; z-index:3; padding:14px 16px; background:linear-gradient(transparent,rgba(31,26,3,.6)); color:var(--gi-creme); }
  .gal-pub-cap .t{ font-family:'Averia Serif Libre',Georgia,serif; font-style:italic; font-size:1.15rem; }
  .gal-pub-txt{ display:flex; align-items:center; justify-content:center; height:100%; padding:28px; text-align:center; color:var(--gi-creme); font-family:'Averia Serif Libre',Georgia,serif; font-style:italic; font-size:1.3rem; text-decoration:none; }
  .gal-pub-ph{ display:flex; flex-direction:column; align-items:center; justify-content:center; height:100%; text-align:center; color:var(--gi-creme); text-decoration:none; padding:26px; }
  .gal-pub-ph .k{ font-size:.6rem; letter-spacing:.16em; text-transform:uppercase; opacity:.75; }
  .gal-pub-ph .t{ font-size:1.7rem; font-weight:800; color:var(--gi-lichen); margin:.4rem 0 .2rem; }
  .gal-pub-ph .d{ font-size:.85rem; opacity:.9; max-width:24ch; }
  .gal-pub-ph .cta{ margin-top:1rem; background:var(--gi-lichen); color:var(--gi-kaki); font-family:'Urbanist',sans-serif; font-weight:700; font-size:.75rem; padding:.5rem 1.3rem; border-radius:30px; }

  /* =====================================================================
     BUREAU (>900px) — paire « panneau (gauche) | image (droite) » pour la
     galerie en mode page ET immersif. Calée autour de l'axe central pour
     éviter le chevauchement (l'ancien « image centrée + panneau flottant »
     cassait entre deux largeurs d'écran).
     ===================================================================== */
  @media (min-width:901px){
    /* Direction A : deux colonnes éditoriales (page + immersif). */
    .guide-galerie .gal-line,
    .guide-galerie .gal-hint{ display:none !important; }
    .guide-galerie .gal-scroll{ left:50%; right:0; top:0; }
    .guide-galerie .gal-col{ width:min(42vw,520px); margin:0 auto; padding:12vh 0 40vh; }
    .guide-galerie .gal-item{ margin:0 0 16vh; }
    .guide-galerie .gal-media{ box-shadow:0 10px 28px rgba(31,26,3,.12); }
    /* Panneau ancré fixe à gauche : titre/texte ne bougent pas d'une fiche à l'autre.
       overflow:auto (pas visible) : le stage a overflow:hidden — sinon un texte long
       est coupé sans scrollbar (surtout en mode page, stage ≤86vh). */
    .guide-galerie .gal-panel,
    .guide-galerie .gal-corner.gal-bl.gal-panel{
      position:absolute; left:0; right:50%; top:0; bottom:0;
      max-width:none; width:auto; max-height:none; overflow-y:auto; overflow-x:hidden;
      overscroll-behavior:contain; display:block;
      border-radius:0; background:transparent; box-shadow:none;
      /* Mode page : pas de nav/sélecteur dans le stage → padding modeste. */
      padding:clamp(28px,4vh,48px) clamp(24px,3vw,48px) 40px clamp(28px,4vw,64px); }
    .guide-galerie .gal-tools-slot{ margin:0 0 clamp(20px,3.5vh,40px); padding:0; border:0; max-width:380px; }
    .guide-galerie .gal-panel-body{ margin:0; }
    .guide-galerie .gal-name{ font-size:clamp(2rem,3.2vw,3rem); margin:0 0 .7rem; min-height:2.04em; }
    .guide-galerie .gal-meta{ font-size:.72rem; margin-bottom:1.3rem; }
    .guide-galerie .gal-numof{ margin-bottom:1rem; }
    .guide-galerie .gal-miss{ max-width:34ch; margin-bottom:1.4rem; }
    .guide-galerie .gal-tags{ margin-bottom:1.6rem; }

    /* Le fond crème remonte DERRIÈRE le nav transparent. Au calage (snap) du
       bloc immersif, la carte est alignée juste sous le nav (scroll-margin-top
       = --site-nav-h) : sans ce padding, c'est le bas du hero sombre qui passe
       derrière le nav → « menu sur l'image ». Avec padding-top = --site-nav-h,
       c'est la bande crème du conteneur qui occupe cette zone → menu sur crème. */
    body.guide-immersif.guide-vue-galerie .guide-fill,
    body.guide-immersif.guide-vue-carte .guide-fill,
    body.guide-immersif.guide-vue-mes-annonces .guide-fill,
    body.guide-immersif.guide-vue-favoris .guide-fill{ padding-top:var(--site-nav-h,72px); }

    /* Immersif (laptop) : stage = hauteur d'écran, deux panes indépendantes.
       Chaque fiche remplit la hauteur visible sous le sélecteur.
       Décalage haut augmenté (76-108px) : une bande crème sépare le header
       du contenu — l'image ne monte plus « par-dessus » le nav, et la barre
       de recherche / le sélecteur Galerie·Carte respirent en dessous. */
    body.guide-immersif .gal-scroll{ top:clamp(76px,10vh,108px); }
    /* Ordinateur / format large : fiches en PAYSAGE (photo horizontale) →
       la fiche est plus large et l'espace vide à gauche diminue. */
    body.guide-immersif .gal-col{ width:auto; max-width:min(48vw,940px); margin:0 auto; padding:0; }
    /* Fine bande crème entre diapos (fond --gi-creme du stage). */
    body.guide-immersif .gal-item{ margin:0 0 12px; display:flex; align-items:center; justify-content:center;
      height:calc(var(--gi-screen-h) - clamp(76px,10vh,108px)); }
    body.guide-immersif .gal-item:last-child{ margin-bottom:0; }
    /* Photo horizontale (paysage 3/2), largeur dominante ; hauteur auto,
       bornée pour laisser respirer la crème au-dessus/dessous. */
    body.guide-immersif .gal-media{ aspect-ratio:3/2; width:min(46vw,900px); height:auto; max-height:82%; max-width:100%; margin:0; }
    /* Fiches tassées vers la GAUCHE : la colonne démarre à 40% (moins d'espace
       vide à gauche) et la photo s'étire vers la droite jusqu'à frôler les
       flèches de navigation. Fiche calée à gauche de sa colonne. */
    body.guide-immersif.guide-vue-galerie .gal-scroll{ left:46%; right:0;
      /* réserve de la place à droite pour NE PAS toucher les flèches de nav. */
      padding-right:clamp(72px,6.5vw,120px); }
    body.guide-immersif.guide-vue-galerie .gal-col{ width:auto; max-width:none; margin:0; padding:0; }
    body.guide-immersif.guide-vue-galerie .gal-item{ justify-content:flex-start; }
    body.guide-immersif.guide-vue-galerie .gal-media{ width:100%; max-width:min(54vw,1000px); }
    /* Boutons « Participer » centrés sur le CENTRE des fiches : la barre couvre
       exactement la zone des photos (46% → 100% moins la réserve des flèches),
       et .gal-participer centre les boutons dedans. */
    body.guide-immersif.guide-vue-galerie .gal-participer--top{ left:46%; right:clamp(72px,6.5vw,120px); }
    /* Le panneau texte s'arrête AVANT le début des photos (38%) : sinon le
       texte long déborde sous la photo (qui démarre à 40%). */
    body.guide-immersif.guide-vue-galerie .gal-panel,
    body.guide-immersif.guide-vue-galerie .gal-corner.gal-bl.gal-panel{ right:56%; }
    /* Sélecteur Galerie·Carte·Mes annonces aligné à GAUCHE, au-dessus de la
       barre de recherche + localisation (au lieu du coin haut-droit).
       Aligné sur le padding gauche du panneau ; la recherche est poussée
       dessous (margin-top) pour ne pas le chevaucher. */
    body.guide-immersif.guide-vue-galerie .guide-switch,
    body.guide-immersif.guide-vue-carte .guide-switch{ left:clamp(28px,4vw,64px); right:auto; top:clamp(16px,2.2vh,26px); }
    body.guide-immersif.guide-vue-galerie .gal-tools-slot{ margin-top:clamp(34px,4.6vh,50px); }
    /* Liste / Mes annonces / Mes préférés / Détail : barre pleine largeur,
       onglets alignés à GAUCHE + outils à droite, épinglée en haut de la
       zone appli — plus la petite carte flottante (qui atterrissait au
       milieu de l'écran, en plein sur la photo du hero). */
    body.guide-immersif .guide-switch:has(.guide-switch-tools-slot:not(:empty)){
      position:absolute; top:0; left:0; right:0; width:100%;
      flex-direction:row; align-items:center; justify-content:flex-start;
      gap:1rem; flex-wrap:wrap; border-radius:0; box-shadow:none;
      /* Onglets alignés EXACTEMENT comme Galerie/Carte (même left/top) : le
         padding de la barre reprend leur clamp de position. */
      padding:clamp(16px,2.2vh,26px) clamp(28px,4vw,64px); border-width:0 0 1px;
    }
    body.guide-immersif .guide-switch:has(.guide-switch-tools-slot:not(:empty)) .guide-switch-tools-slot{
      width:auto; max-width:none; flex:0 0 auto;
    }
    /* Outils en ligne (recherche · localisation · filtres) au lieu d'empilés.
       !important : la classe Bootstrap .flex-column (colonne par défaut,
       partagée avec Galerie/Carte/mode page) est elle-même !important. */
    body.guide-immersif #guide-switch-tools-slot .guide-tools{
      flex-direction:row !important; align-items:center; gap:.6rem; flex-wrap:wrap;
    }
    body.guide-immersif #guide-switch-tools-slot .guide-tools-search{ width:auto; }
    body.guide-immersif #guide-switch-tools-slot .guide-tools-search .search-box{
      width:220px; flex:0 0 220px;
    }
    body.guide-immersif #guide-switch-tools-slot .guide-toolbar.guide-tools-bar,
    body.guide-immersif #guide-switch-tools-slot .guide-actions{
      width:auto; margin:0 !important; justify-content:flex-start;
    }
    body.guide-immersif #guide-switch-tools-slot #filtre-btn{ width:auto; }
    body.guide-immersif #guide-switch-tools-slot #filtre-panel{
      position:absolute; top:100%; right:clamp(20px,3vw,40px); left:auto;
      margin-top:.5rem; width:min(360px,90vw); z-index:41;
    }
    /* Recherche / localisation / filtres : plus compacts et aérés. */
    body.guide-immersif .gal-tools-slot .search-box .form-control{ padding-top:.32rem !important; padding-bottom:.32rem !important; font-size:.8rem; }
    body.guide-immersif .gal-tools-slot .geo-btn-pill{ width:38px !important; height:38px !important; min-height:38px !important; flex:0 0 38px !important; }
    body.guide-immersif .gal-tools-slot #filtre-btn{ padding:.34rem .85rem !important; min-height:0 !important; font-size:.78rem !important; }
    /* Outils recherche · localisation · Filtres — compacts et homogènes sur
       TOUTES les vues (pilules ~38px, police plus fine). La pastille loupe
       gardait min-height:44px → recherche « trop grosse » vs localisation 38px. */
    body.guide-immersif .guide-tools .search-box .form-control{ padding-top:.3rem !important; padding-bottom:.3rem !important; font-size:.82rem !important; }
    body.guide-immersif .guide-tools .search-box .btn{ min-height:0 !important; padding:.3rem .55rem !important; }
    body.guide-immersif .guide-tools .geo-btn-pill{ width:38px !important; height:38px !important; min-height:38px !important; flex:0 0 38px !important; }
    body.guide-immersif .guide-tools #filtre-btn{ min-height:0 !important; padding:.34rem .9rem !important; font-size:.8rem !important; }
    body.guide-immersif .gal-panel{
      padding:clamp(76px,10vh,108px) clamp(28px,3.4vw,52px) clamp(20px,3vh,32px) clamp(36px,5vw,80px); }
    body.guide-immersif .gal-tools-slot{ margin:0 0 clamp(10px,1.8vh,18px); }
    /* Typo réduite + plus d'air (le panneau texte est étroit → éviter le
       sentiment de contenu « serré »). */
    body.guide-immersif .gal-name{ font-size:clamp(1.2rem,1.85vw,1.62rem); margin:0 0 .75rem; min-height:0; line-height:1.16; }
    body.guide-immersif .gal-meta{ font-size:.6rem; line-height:1.55; margin-bottom:1rem; }
    body.guide-immersif .gal-numof{ margin-bottom:.6rem; }
    /* Description : remplit toute la largeur du panneau (comme le titre / les
       secteurs), plus de limite à 40 caractères. */
    body.guide-immersif .gal-miss{ max-width:none; font-size:clamp(.8rem,.9vw,.88rem); line-height:1.55; margin-bottom:1.1rem; }
    body.guide-immersif .gal-tags{ margin-bottom:0; gap:.45rem; }
    /* Espace mesuré entre les étiquettes et « Voir la fiche » / cœur. */
    body.guide-immersif .gal-fiche-row{ margin-top:1.1rem; row-gap:.85rem; }
    /* « Voir la fiche » : texte aligné à GAUCHE (le retour de ligne se fait à
       gauche, plus centré) et pas de coupure au milieu des mots. */
    body.guide-immersif .gal-fiche{ text-align:left; hyphens:none; -webkit-hyphens:none;
      overflow-wrap:normal; word-break:keep-all; line-height:1.35; }
  }

  /* =====================================================================
     MES PRÉFÉRÉS — grille de fiches enrichies (maquette validée). Les fiches
     remplissent la largeur en colonnes responsives ; onglets sur une ligne,
     puis outils (recherche · localisation · Filtres) sur une rangée compacte
     juste dessous, puis la grille. Mes annonces garde sa liste centrée (fiches
     riches avec actions).
     ===================================================================== */
  @media (min-width:768px){
    /* Barre du haut : onglets puis rangée d'outils empilés (pas côte à côte). */
    body.guide-immersif.guide-vue-favoris .guide-switch:has(.guide-switch-tools-slot:not(:empty)){
      flex-direction:column; align-items:flex-start; gap:.7rem; }
    body.guide-immersif.guide-vue-favoris .guide-switch-tabs{ flex-wrap:nowrap; white-space:nowrap; }
    body.guide-immersif.guide-vue-favoris #guide-switch-tools-slot{ width:100%; max-width:680px; }

    /* Barre du haut « Mes annonces » : même empilement que Mes préférés. */
    body.guide-immersif.guide-vue-mes-annonces .guide-switch:has(.guide-switch-tools-slot:not(:empty)){
      flex-direction:column; align-items:flex-start; gap:.7rem; }
    body.guide-immersif.guide-vue-mes-annonces .guide-switch-tabs{ flex-wrap:nowrap; white-space:nowrap; }
    body.guide-immersif.guide-vue-mes-annonces #guide-switch-tools-slot{ width:100%; max-width:680px; }

    /* Invitations « Participer » : en pilules compactes, à DROITE du menu
       (rangée des onglets), au lieu d'une bande sous la barre de recherche. */
    body.guide-immersif.guide-vue-favoris #vue-favoris > .part-06--top,
    body.guide-immersif.guide-vue-mes-annonces #vue-mes-annonces > .part-06--top{
      position:absolute; z-index:41; top:clamp(12px,1.8vh,22px); right:clamp(28px,4vw,64px);
      left:auto; width:auto; max-width:min(62vw,760px); margin:0; pointer-events:none; }
    body.guide-immersif.guide-vue-favoris #vue-favoris > .part-06--top .part-06-grid,
    body.guide-immersif.guide-vue-mes-annonces #vue-mes-annonces > .part-06--top .part-06-grid{
      display:flex; flex-wrap:wrap; justify-content:flex-end; gap:.5rem; pointer-events:auto; }
    body.guide-immersif.guide-vue-favoris #vue-favoris > .part-06--top .part-06-card,
    body.guide-immersif.guide-vue-mes-annonces #vue-mes-annonces > .part-06--top .part-06-card{
      padding:.42rem .95rem .42rem .55rem; gap:.55rem; border-radius:999px;
      background:var(--gi-creme,#FCFFE9); }
    body.guide-immersif.guide-vue-favoris #vue-favoris > .part-06--top .part-06-ico,
    body.guide-immersif.guide-vue-mes-annonces #vue-mes-annonces > .part-06--top .part-06-ico{
      width:30px; height:30px; border-radius:9px; font-size:.9rem; }
    body.guide-immersif.guide-vue-favoris #vue-favoris > .part-06--top .part-06-t,
    body.guide-immersif.guide-vue-mes-annonces #vue-mes-annonces > .part-06--top .part-06-t{
      font-size:.92rem; }

    /* Contenu : grille de fiches enrichies pleine largeur. padding-top généreux
       pour dégager la barre du haut empilée (onglets + rangée d'outils) qui est
       en position absolue — sinon la 1re rangée de fiches passe dessous.
       Mes annonces partage exactement la même largeur / grille que Mes préférés. */
    body.guide-immersif.guide-vue-favoris #vue-favoris{
      padding-top:clamp(122px,16vh,156px) !important;
      padding-left:clamp(20px,4vw,48px); padding-right:clamp(20px,4vw,48px); }
    /* Mes annonces n'a pas de rangée d'outils (recherche/filtres masqués) :
       le haut est juste onglets + boutons → moins de padding, pas d'espace vide. */
    /* Marges gauche = droite : la rangée de fiches (et le bloc préférences) est
       centrée symétriquement, en dégageant les flèches de navigation à droite. */
    body.guide-immersif.guide-vue-mes-annonces #vue-mes-annonces{
      padding-top:clamp(84px,11vh,116px) !important;
      padding-left:clamp(64px,6vw,104px); padding-right:clamp(64px,6vw,104px); }
    body.guide-immersif.guide-vue-favoris #vue-favoris > *,
    body.guide-immersif.guide-vue-mes-annonces #vue-mes-annonces > *{
      max-width:1320px; margin-left:auto; margin-right:auto; }
    body.guide-immersif.guide-vue-favoris #mes-favoris-list{
      display:grid; grid-template-columns:repeat(auto-fill, minmax(300px,1fr));
      gap:clamp(14px,1.4vw,20px); align-items:start; }
    body.guide-immersif.guide-vue-favoris #mes-favoris-list .annonce-list-item{
      margin-bottom:0 !important; }
    /* Mes annonces : rangée de fiches en défilement horizontal, alignée sur la
       même largeur que le bloc « Préférences de notifications courriel »
       (mêmes bornes/marges que les autres enfants de #vue-mes-annonces). */
    body.guide-immersif.guide-vue-mes-annonces #vue-mes-annonces > #mes-annonces-list{
      max-width:1320px !important; }
  }

  /* ================= MES ANNONCES — rangée horizontale de fiches ================= */
  body.guide-immersif #mes-annonces-list{
    list-style:none; margin:0; padding:6px 2px 20px;
    display:flex; flex-direction:row; flex-wrap:nowrap; gap:clamp(14px,1.5vw,20px);
    overflow-x:auto; overflow-y:hidden; scroll-snap-type:x proximity;
    scroll-padding-left:2px;
    scrollbar-width:thin; scrollbar-color:rgba(59,73,0,.4) transparent; }
  body.guide-immersif #mes-annonces-list::-webkit-scrollbar{ height:8px; display:block; }
  body.guide-immersif #mes-annonces-list::-webkit-scrollbar-thumb{ background:rgba(59,73,0,.4); border-radius:99px; }
  body.guide-immersif #mes-annonces-list::-webkit-scrollbar-track{ background:rgba(59,73,0,.08); border-radius:99px; }

  /* Carte (surcharge la carte « maquette » de base : même spécificité + source plus bas). */
  body.guide-immersif #vue-mes-annonces .mes-carte{
    scroll-snap-align:start; flex:0 0 clamp(300px,29vw,384px);
    display:flex !important; flex-direction:column; overflow:hidden;
    background:var(--gi-creme,#FCFFE9) !important; border:1px solid rgba(31,26,3,.14) !important;
    border-radius:20px !important; box-shadow:0 1px 3px rgba(31,26,3,.05) !important;
    padding:0 !important; margin:0 !important;
    transition:box-shadow .2s ease, transform .12s ease, border-color .2s ease; }
  body.guide-immersif #vue-mes-annonces .mes-carte:hover{
    box-shadow:0 14px 34px rgba(31,26,3,.12) !important; border-color:rgba(31,26,3,.26) !important; transform:translateY(-2px); }
  body.guide-immersif #vue-mes-annonces .mes-carte--vedette{ border-color:rgba(59,73,0,.5) !important; }

  body.guide-immersif .mes-c-head{ display:flex; align-items:center; gap:.7rem; padding:.8rem 1.05rem .1rem; }
  body.guide-immersif .mes-c-logo{ width:42px; height:42px; border-radius:12px; flex:0 0 auto;
    display:grid; place-items:center; overflow:hidden; background:#1F1A03; box-shadow:0 2px 8px rgba(31,26,3,.22); }
  body.guide-immersif .mes-c-logo img{ width:100%; height:100%; object-fit:cover; }
  body.guide-immersif .mes-c-logo--initial span{ font-family:'Averia Serif Libre',Georgia,serif; font-style:italic; font-weight:700; font-size:1.25rem; color:#D9FF50; line-height:1; }
  body.guide-immersif .mes-c-state{ margin-left:auto; display:inline-flex; align-items:center; gap:.35rem;
    font-family:'Urbanist',sans-serif; font-weight:700; font-size:.62rem; letter-spacing:.08em; text-transform:uppercase;
    padding:.28rem .6rem; border-radius:99px; white-space:nowrap; }
  body.guide-immersif .mes-st-live{ background:#dbead0; color:#2f5130; }
  body.guide-immersif .mes-st-pause{ background:rgba(31,26,3,.08); color:#7c7a5f; }
  body.guide-immersif .mes-st-wait{ background:#f3ecc9; color:#7a6a2a; }
  body.guide-immersif .mes-st-refus{ background:#f3d9cf; color:#8a2a1e; }

  body.guide-immersif .mes-c-body{ padding:.5rem 1.05rem 0; display:flex; flex-direction:column; gap:.4rem; flex:1 1 auto; }
  body.guide-immersif #vue-mes-annonces .mes-c-title{ font-family:'Averia Serif Libre',Georgia,serif; font-style:italic;
    font-weight:700; font-size:1.18rem !important; line-height:1.14; margin:0; color:#1F1A03; }
  body.guide-immersif .mes-c-badges{ gap:.35rem !important; }
  /* Badges plus discrets dans les fiches Mes annonces. */
  body.guide-immersif .mes-c-badges .badge-verif,
  body.guide-immersif .mes-c-badges .badge-type-org,
  body.guide-immersif .mes-c-badges .badge-categorie,
  body.guide-immersif .mes-c-badges .commandite-badge{
    font-size:.64rem !important; padding:.16rem .5rem !important; gap:.24rem; letter-spacing:.01em; }
  body.guide-immersif .mes-c-badges .badge-verif i,
  body.guide-immersif .mes-c-badges .badge-type-org i,
  body.guide-immersif .mes-c-badges .badge-categorie i,
  body.guide-immersif .mes-c-badges .commandite-badge i{ font-size:.82em; }
  body.guide-immersif .mes-c-loc{ font-family:'Urbanist',sans-serif; font-size:.8rem; color:#7c7a5f;
    display:flex; align-items:center; gap:.4rem; margin:0; }
  body.guide-immersif .mes-c-loc i{ flex:0 0 auto; }
  body.guide-immersif .mes-c-desc{ font-family:'Lora',Georgia,serif; font-size:.86rem !important; line-height:1.45; color:#42400f;
    margin:0; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
  body.guide-immersif .mes-c-exp{ font-family:'Urbanist',sans-serif; font-size:.74rem; color:#7c7a5f; margin:0; }
  body.guide-immersif .mes-carte .annonce-note-admin{ margin:0; }

  body.guide-immersif .mes-c-foot{ margin-top:auto; padding:.7rem 1.05rem .85rem; }
  body.guide-immersif .mes-c-foot-line{ border-top:1px solid rgba(31,26,3,.1); margin:0 0 .65rem; }
  /* Actions sur UNE seule ligne (les icônes Masquer/Supprimer ne passent plus
     dessous). Reste en wrap sur très petit écran par sécurité. */
  body.guide-immersif .mes-c-acts{ display:flex; flex-wrap:wrap; gap:.4rem; align-items:center; }
  body.guide-immersif .mes-btn{ flex:0 0 auto; white-space:nowrap; }
  body.guide-immersif .mes-btn{ font-family:'Urbanist',sans-serif; font-weight:600; font-size:.78rem; border-radius:99px;
    cursor:pointer; display:inline-flex; align-items:center; gap:.36rem; padding:.42rem .74rem; border:1px solid transparent;
    transition:background .15s ease, border-color .15s ease; }
  body.guide-immersif .mes-btn i{ font-size:.95em; }
  body.guide-immersif .mes-btn--edit{ background:#1F1A03; color:#FCFFE9; }
  body.guide-immersif .mes-btn--edit:hover{ background:#2A3600; }
  body.guide-immersif .mes-btn--star{ background:#D9FF50; color:#2A3600; }
  body.guide-immersif .mes-btn--star:hover{ background:#c7ee3e; }
  body.guide-immersif .mes-btn--star:disabled{ background:#EAEFD3; color:#3B4900; border:1px solid rgba(31,26,3,.14); cursor:default; }
  body.guide-immersif .mes-btn--ghost{ background:transparent; border-color:rgba(31,26,3,.28); color:#1F1A03; }
  body.guide-immersif .mes-btn--ghost:hover{ background:rgba(31,26,3,.06); }
  body.guide-immersif .mes-btn--icon{ width:34px; height:34px; padding:0; justify-content:center;
    background:transparent; border-color:rgba(31,26,3,.2); color:#1F1A03; }
  body.guide-immersif .mes-btn--icon:hover{ background:rgba(31,26,3,.06); }
  body.guide-immersif .mes-btn--icon i{ margin:0; }
  body.guide-immersif .mes-btn--danger{ border-color:rgba(150,40,30,.4); color:#8a2a1e; }
  body.guide-immersif .mes-btn--danger:hover{ background:rgba(150,40,30,.08); }

  /* =====================================================================
     MISE EN PAGE MOBILE / TABLETTE (<=900px) — la galerie flottante ne
     tient pas sur petit écran : on passe à un empilement propre.
     • Sélecteur Galerie·Carte·Liste sur sa propre rangée sous la nav
       (sinon il chevauche la marque « Territoire »).
     • Images dans la zone défilante du haut.
     • Légende (recherche/filtres + infos fiche) en feuille fixe en bas,
       pleine largeur : plus aucun chevauchement avec l'image.
     ===================================================================== */
  @media (max-width:900px){
    /* Mobile : UN SEUL défilement continu. Tout est dans le flux de la page —
       hero → sélecteur → recherche → fiches plein écran l'une après l'autre.
       Plus de zone de défilement séparée (fini le « scroll dans le scroll »). */
    /* Pas de flèches ↑↓ sur téléphone / tablette (défilement de page natif suffit). */
    .gi-page-cues,
    body.guide-immersif.guide-vue-galerie .gi-page-cues,
    body.guide-immersif.guide-vue-carte .gi-page-cues{ display:none !important; }
    .gi-cue-ico-desktop{ display:none; }
    .gi-cue-ico-mobile{ display:inline-block; }
    .gi-page-cues button{ width:2.75rem; height:2.75rem; font-size:1.05rem;
      background:rgba(252,255,233,.85); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
      box-shadow:0 6px 18px rgba(31,26,3,.18); }
    body.guide-immersif .guide-main-card{
      height:auto !important; min-height:0 !important; max-height:none !important;
      overflow:visible !important;
    }
    body.guide-immersif #vue-galerie,
    body.guide-immersif #vue-liste,
    body.guide-immersif #vue-carte,
    body.guide-immersif #vue-mes-annonces,
    body.guide-immersif #vue-favoris{
      position:static !important; inset:auto !important; top:auto !important;
      left:auto !important; right:auto !important; bottom:auto !important;
      height:auto !important; width:100%;
    }
    /* Sélecteur Galerie·Carte : barre pleine largeur, alignée à droite. */
    body.guide-immersif .guide-switch{ position:static; top:auto; left:0; right:0; transform:none;
      width:100%; gap:.4rem;
      padding:8px clamp(28px,7vw,48px) 8px clamp(10px,3vw,16px); background:rgba(252,255,233,.97);
      border-bottom:1px solid rgba(31,26,3,.09); font-size:.64rem; z-index:30; }
    body.guide-immersif .guide-switch-tabs{ justify-content:flex-end; width:100%; }
    /* Boîte flottante desktop → redevient une barre plate pleine largeur ici. */
    body.guide-immersif .guide-switch:has(.guide-switch-tools-slot:not(:empty)){
      width:100%; border-radius:0; box-shadow:none;
      padding:8px clamp(28px,7vw,48px) 8px clamp(10px,3vw,16px); }
    body.guide-immersif .gal-hint{ display:none !important; }
    body.guide-immersif .gal-line{ display:none !important; }
    body.guide-immersif .gal-stage{
      height:auto !important; min-height:0 !important; overflow:visible !important;
      display:flex; flex-direction:column;
    }
    /* Recherche + filtres : MENU qui glisse depuis le BAS, fixe, qui suit le
       défilement — plus besoin de remonter en haut pour chercher. Replié : seule
       la poignée dépasse ; on la tire pour ouvrir. La description reste posée sur
       chaque image (gal-fiche-info) → le menu ne contient QUE recherche/filtres. */
    body.guide-immersif .gal-panel,
    body.guide-immersif .gal-corner.gal-bl.gal-panel{
      order:0; position:fixed; left:0; right:0; bottom:0; top:auto;
      max-width:none; width:100%; max-height:48px !important; overflow:hidden;
      transition:max-height .3s ease; overscroll-behavior:contain;
      background:var(--gi-creme); box-shadow:0 -12px 30px rgba(31,26,3,.22);
      border:0; border-radius:20px 20px 0 0; padding:0 14px; z-index:1350; scrollbar-width:none; }
    body.guide-immersif .gal-panel::-webkit-scrollbar{ display:none; }
    /* Ouvert : le menu monte (recherche + filtres visibles), défilable si besoin. */
    body.guide-immersif.gal-sheet-open .gal-panel,
    body.guide-immersif.gal-sheet-open .gal-corner.gal-bl.gal-panel{
      max-height:80vh !important; overflow-y:auto; padding-bottom:calc(16px + env(safe-area-inset-bottom,0px)); }
    body.guide-immersif .gal-panel-body{ display:none !important; }
    /* Poignée toujours visible en haut du menu (collée pendant le défilement interne). */
    body.guide-immersif .gal-sheet-toggle{ display:flex !important; position:sticky; top:0; z-index:2;
      align-items:center; justify-content:center; width:100%; height:48px;
      background:var(--gi-creme); border:0; cursor:pointer; }
    body.guide-immersif .gal-sheet-toggle::before{ content:"Recherche · filtres"; position:absolute;
      left:6px; font-family:'Urbanist',sans-serif; font-size:.68rem; letter-spacing:.12em;
      text-transform:uppercase; color:var(--gi-muted); }
    body.guide-immersif .gal-sheet-grip{ width:42px; height:5px; border-radius:99px; background:rgba(31,26,3,.3); }
    body.guide-immersif .gal-tools-slot{ position:static; margin:0; padding:2px 2px 10px; border:0; }
    body.guide-immersif .gal-tools-slot .search-box{ background:rgba(252,255,233,.96) !important; }
    /* Colonne d'images : défile dans la page (pas de scroll interne). */
    body.guide-immersif .gal-scroll{
      position:static !important; inset:auto !important; left:auto !important; right:auto !important;
      top:auto !important; bottom:auto !important; height:auto !important; overflow:visible !important;
    }
    body.guide-immersif .gal-col{ width:100% !important; max-width:none !important; padding:0 !important; margin:0 !important; }
    body.guide-immersif .gal-item{
      position:relative; margin:0 0 12px !important; height:auto !important; display:block !important;
    }
    body.guide-immersif .gal-item:last-child{ margin-bottom:0 !important; }
    /* Chaque fiche ~ un écran. Fallback vh si dvh indisponible ; min-height évite
       la hauteur 0 (images en absolute sans boîte parente). */
    body.guide-immersif .gal-media{
      aspect-ratio:auto; width:100%; border-radius:0;
      height:calc(100vh - 118px); min-height:60vh;
    }
    @supports (height:100dvh){
      body.guide-immersif .gal-media{ height:calc(100dvh - 118px); }
    }
    body.guide-immersif .gal-media > img,
    body.guide-immersif .gal-media img{
      position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
    }
    body.guide-immersif .gal-noimg{ position:absolute; inset:0; }
    /* Infos POSÉES SUR l'image : dégradé sombre + texte blanc + ombre → lisible
       quelle que soit la couleur de l'image. Défile avec la fiche. */
    body.guide-immersif .gal-fiche-info{ display:block; position:absolute; left:0; right:0; bottom:0;
      padding:64px 18px calc(18px + env(safe-area-inset-bottom,0px));
      background:linear-gradient(to top, rgba(16,13,2,.94) 0%, rgba(16,13,2,.8) 45%, rgba(16,13,2,.3) 80%, rgba(16,13,2,0) 100%); }
    body.guide-immersif .gal-fiche-info :is(.gal-numof,.gal-name,.gal-meta,.gal-miss){ color:#FCFFE9; text-shadow:0 1px 8px rgba(0,0,0,.6); }
    body.guide-immersif .gal-fiche-info .gal-numof{ font-family:'Urbanist',sans-serif; font-weight:600; font-size:.64rem; letter-spacing:.16em; color:rgba(255,255,255,.82); margin-bottom:.3rem; }
    body.guide-immersif .gal-fiche-info .gal-name{ font-family:'Averia Serif Libre',Georgia,serif; font-style:italic; font-weight:700; font-size:1.7rem; line-height:1.05; margin:0 0 .35rem; }
    body.guide-immersif .gal-fiche-info .gal-meta{ font-family:'Urbanist',sans-serif; font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.82); margin-bottom:.5rem; }
    body.guide-immersif .gal-fiche-info .gal-miss{ font-family:'Lora',Georgia,serif; font-size:.9rem; line-height:1.45; margin-bottom:.6rem; }
    body.guide-immersif .gal-fiche-info .gal-tags{ display:flex; flex-wrap:wrap; gap:.35rem; }
    body.guide-immersif .gal-fiche-info .gal-tag{ background:rgba(255,255,255,.16); color:#FCFFE9; border:1px solid rgba(255,255,255,.45); border-radius:99px; padding:.2rem .6rem; font-family:'Urbanist',sans-serif; font-size:.66rem; }

    /* Vues Liste (+ Mes annonces/Mes préférés/Détail) : recherche/filtres vivent
       désormais dans #guide-switch-tools-slot (le nav lui-même), plus besoin
       d'un en-tête flottant séparé ni de padding-top de compensation. */
    /* Mes annonces / Mes préférés : le sélecteur (Galerie·Carte·Mes annonces·
       Mes préférés + ses outils) reste collant juste sous la nav — sinon la nav
       transparente (logo + menu) passe PAR-DESSUS lui au défilement. Une bande
       crème (fond de .guide-fill) reste visible entre les deux. */
    body.guide-immersif.guide-vue-mes-annonces .guide-switch,
    body.guide-immersif.guide-vue-favoris .guide-switch{
      position:sticky; top:var(--site-nav-h,64px); z-index:32; background:var(--gi-creme); }
    /* Carte : plein flux de page (comme la galerie). L'ancien cadre absolu dans
       une carte de 192px écrasait la carte à ~58px de haut (invisible). Ici la
       carte occupe le haut à une vraie hauteur, puis recherche/filtres + liste
       défilent sous elle. */
    body.guide-immersif #vue-carte{ position:static; inset:auto; top:auto; }
    body.guide-immersif .carte-split{ height:auto; display:flex; flex-direction:column; }
    body.guide-immersif .carte-map-zone{ order:-1; height:auto; min-height:0; display:block; position:relative; }
    body.guide-immersif .carte-map-zone #map-container{ height:58vh !important; min-height:340px !important; flex:none !important; }
    body.guide-immersif .carte-side{ height:auto; }
    body.guide-immersif .carte-liste{ height:auto; max-height:none; overflow:visible; }
    /* Légende repliable visible (mobile/tablette). Le bouton plein écran est géré
       par .carte-fs-ctrl (déplacé dans la pile Mapbox). */
    body.guide-immersif .carte-legende-toggle{ display:inline-flex; }
    /* Légende masquée par défaut ; le bouton l'ouvre/ferme. */
    body.guide-immersif .carte-map-zone:not(.legende-open) #carte-legende{ display:none !important; }
    /* Pas de bouton légende s'il n'y a rien à afficher. */
    body.guide-immersif .carte-map-zone:has(#carte-legende:empty) .carte-legende-toggle{ display:none; }
  }