/* ============================================
   SPINNER DE CHARGEMENT SUR LES TUILES (CANTONS / CATÉGORIES)
   ============================================ */
.card-link-loading {
    position: relative;
    display: block;
}

.card-loading-overlay {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    border-radius: 0.375rem;
}

/* ============================================
   COMPENSATION NAVBAR FIXE
   ============================================ */
/* Compenser la hauteur de la navbar fixe */
body {
    padding-top: 70px;
}

@media (max-width: 767px) {
    body {
        padding-top: 60px;
    }
}

/* ============================================
   NAVBAR FIXE
   ============================================ */
/* Navbar fixe qui reste en haut */
nav.navbar.fixed-top {
    z-index: 1030;
}

/* Container de la navbar doit être relative pour les menus absolus */
nav.navbar>.container,
nav.navbar>.container-fluid {
    position: relative;
}

/* ============================================
   MENU BURGER TOUJOURS VISIBLE
   ============================================ */
/* Le bouton burger est toujours visible */
.navbar-toggler {
    display: block !important;
}

/* Icône burger / croix selon l'état ouvert/fermé du menu */
.navbar-toggler .icon-close {
    display: none;
}

.navbar-toggler.menu-open .icon-burger {
    display: none;
}

.navbar-toggler.menu-open .icon-close {
    display: inline-block;
}

/* Menu déroulant positionné */
#navbarNavDropdown-8 {
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-top: none;
    border-radius: 0 0 0.5rem 0.5rem;
}

/* Sur desktop : menu compact à droite */
@media (min-width: 992px) {
    #navbarNavDropdown-8 {
        width: auto;
        min-width: 250px;
        max-width: 300px;
        right: 1rem;
        left: auto;
    }

    #navbarNavDropdown-8 .navbar-nav {
        padding: 0.5rem 0;
    }

    #navbarNavDropdown-8 .nav-link {
        padding: 0.75rem 1.5rem;
        transition: background-color 0.2s ease;
        white-space: nowrap;

    }

    /* Menu burger — alignement gauche */
    #navbarNavDropdown-8 .nav-link {
        text-align: left;
    }

    #navbarNavDropdown-8 .nav-link:hover {
        background-color: rgba(0, 0, 0, 0.05);
    }

    /* Dropdown dans le menu */
    #navbarNavDropdown-8 .dropdown-menu {
        position: static !important;
        transform: none !important;
        border: none;
        box-shadow: none;
        background-color: rgba(0, 0, 0, 0.03);
        margin: 0;
        padding: 0;
    }

    #navbarNavDropdown-8 .dropdown-item {
        padding: 0.5rem 2rem;
        font-size: 0.9rem;
    }
}

/* Sur mobile : menu pleine largeur */
@media (max-width: 991px) {
    #navbarNavDropdown-8 {
        width: 100%;
        right: 0;
        left: 0;
    }

    /* Espacement resserré (testé par Sylvain) pour que le menu déroulant
       tienne entièrement sur l'écran, jusqu'au lien "Don" en bas. */
    #navbarNavDropdown-8 .navbar-nav {
        padding: 0.5rem 0;
        text-align: left;
    }

    #navbarNavDropdown-8 .nav-link {
        padding: 0.25rem 1rem;
    }

    #navbarNavDropdown-8 .dropdown-menu {
        text-align: center;
        background-color: rgba(0, 0, 0, 0.03);
        border: none;
    }

    #navbarNavDropdown-8 .dropdown-item {
        padding: 0.5rem 1rem;
    }
}

/* Animation d'ouverture */
#navbarNavDropdown-8.collapsing {
    transition: height 0.3s ease;
}

/* Effet hover sur les icônes */
.navbar .btn-link:hover i,
.navbar .navbar-toggler:hover i {
    color: var(--bs-primary) !important;
    transition: color 0.3s ease;
}

/* ============================================
   MENU RECHERCHE
   ============================================ */
/* Barre de recherche */
#searchCollapse {
    border-top: 1px solid #dee2e6;
}

#searchCollapse input.form-control {
    border-right: none;
}

#searchCollapse input.form-control:focus {
    box-shadow: none;
    border-color: #ced4da;
}

/* Boutons de recherche */
#searchCollapse .btn-outline-primary,
#searchCollapse .btn-outline-success {
    min-height: 44px;
}

@media (max-width: 575px) {

    #searchCollapse .btn-outline-primary,
    #searchCollapse .btn-outline-success {
        width: 100%;
    }
}

/* Animation d'ouverture Bootstrap */
#searchCollapse.collapsing {
    transition: height 0.3s ease;
}

/* ============================================
   HERO SECTION
   ============================================ */
.hero-section {
    background-position: 60% center;
    background-size: cover;
    min-height: 500px;
}

/* Grand écran - on voit bien l'enfant à droite */
@media (min-width: 992px) {
    .hero-section {
        background-position: 55% center;
    }
}

/* Tablette MD - on garde l'enfant visible */
@media (max-width: 991px) {
    .hero-section {
        background-position: 65% center;
    }
}

/* Mobile - on centre plus sur l'enfant */
@media (max-width: 767px) {
    .hero-section {
        background-position: 0% center;
        min-height: 600px;
    }
}

/* ── HEADER COMPACT AU SCROLL ─────────────────────────────────────── */
header nav {
    transition: padding 0.3s ease, box-shadow 0.3s ease;
}

header nav.header-compact {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
}

header nav.header-compact .navbar-brand img {
    width: 70px !important;
    transition: width 0.3s ease;
}

header nav .navbar-brand img {
    transition: width 0.3s ease;
}

/* ============================================
   CARTES BALADES
   ============================================ */
/* Effet hover sur les cartes */
.card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.2) !important;
}

/* Images de cartes */
.card-img-top {
    border-radius: calc(0.375rem - 1px) calc(0.375rem - 1px) 0 0;
}

/* Offcanvas global "Recherche avancée" : positionné par JS sous le navbar, remplit jusqu'en bas */
#offcanvas-recherche {
    height: auto !important;
    max-height: none !important;
    bottom: 0 !important;
}

/* Desktop : largeur limitée et centrée, pas toute la largeur de l'écran */
@media (min-width: 768px) {
    #offcanvas-recherche {
        left: 50% !important;
        right: auto !important;
        width: 80%;
        max-width: 900px;
        transform: translate(-50%, 100%);
    }

    #offcanvas-recherche.show,
    #offcanvas-recherche.showing {
        transform: translate(-50%, 0) !important;
    }
}

/* Carte Leaflet (page /carte et /balades) */
.carte-leaflet {
    height: 450px;
}

@media (max-width: 767px) {
    .carte-leaflet {
        height: 350px;
    }
}

/* Cartes "Dernières balades" - 2 par ligne en mobile */
.card-derniere-balade-img {
    height: 220px;
    object-fit: cover;
}

@media (max-width: 767px) {
    .card-derniere-balade-img {
        height: 120px;
    }

    .card-derniere-balade-titre {
        font-size: 1rem;
    }
}

/* Badges personnalisés */
.badge {
    font-weight: 600;
    padding: 0.4em 0.8em;
}

/* ============================================
   CARTES CANTONS
   ============================================ */
/* Effet hover sur les cartes de région */
.hover-lift {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hover-lift:hover {
    transform: translateY(-8px);
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.2) !important;
}

#section-contact,
#section-bulletin,
#section-don {
    scroll-margin-top: 120px;
}



/* Breadcrumb sur fond coloré (hero) : séparateur "/" assorti aux liens .text-white-50 */
.breadcrumb-on-dark {
    --bs-breadcrumb-divider-color: rgba(255, 255, 255, 0.5);
}



/* ── LISTE SIMPLE BALADES ─────────────────────────────────────────── */
.balade-ligne:hover {
    background-color: rgba(243, 156, 18, 0.05);
    padding-left: 8px !important;
    transition: all 0.2s ease;
}

/* Compensation scroll pour les ancres avec double sticky (navbar + menu ancres) */
h2[id],
h3[id] {
    scroll-margin-top: 250px
}



/* ── MODE ÉDITION ──────────────────────────────────────────────── */
.btn-edit {
    display: none !important;
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 10;
    opacity: 0.7;
    transition: opacity 0.2s;
}

.btn-edit:hover {
    opacity: 1;
}

html.mode-edition .btn-edit {
    display: flex !important;
}

/* Outils éditeur sur la fiche balade (ID + navigation précédent/suivant) —
   même bascule que .btn-edit, mais sans position absolue (affichage en ligne). */
.outils-edition {
    display: none !important;
}

html.mode-edition .outils-edition {
    display: flex !important;
}

/* Bouton edit en ligne avec les autres icônes (liste simple + grille) — pas en
   badge flottant, pour ne pas chevaucher la photo (grille) ni le contenu. Classes
   explicites plutôt qu'un sélecteur basé sur la position dans le DOM (fragile :
   un sélecteur descendant générique attrapait aussi le badge flottant voulu en
   liste détaillée, le faisant apparaître en pleine largeur au-dessus de la carte). */
.btn-edit-inline {
    position: static !important;
    opacity: 1;
}

/* Bouton edit en badge flottant sur l'IMAGE (liste détaillée) — à gauche, pas à
   droite où se trouvent déjà les icônes du contenu (poussette, etc.). */
.btn-edit-sur-image {
    left: 8px;
    right: auto;
}

/* GLightbox */
.glightbox-clean .gdesc-inner {
    background: rgba(255, 255, 255, 0.85);
    padding: 12px 16px;
    border-radius: 0 0 4px 4px;
}

.glightbox-clean .gslide-description {
    background: rgba(255, 255, 255, 0.85);
}

/* Pub In-feed (vues simple/liste détaillée/grille) : les annonces Fluid calculent
   leurs proportions selon la largeur du conteneur — sur desktop, la colonne de
   contenu est large (~800-900px) et donne un rendu disproportionné en hauteur.
   On limite la largeur du bloc pub sur desktop uniquement (mobile déjà correct). */
@media (min-width: 992px) {
    .pub-liste {
        max-width: 650px;
        margin-left: auto;
        margin-right: auto;
    }
}

.glightbox-clean .gslide-title {
    color: #333;
    font-size: 0.9rem;
    margin-bottom: 0;
}

/* ============================================
   OVERLAY ACTIVATION CARTES (scroll/tactile)
   ============================================ */
/* Calque "cliquer/toucher pour activer" (façon Google Maps embed) posé sur
   les cartes Leaflet et l'iframe SuisseMobile — cf. .card-loading-overlay
   pour le même principe de calque en position absolue.
   z-index élevé volontaire : les panes internes de Leaflet montent jusqu'à
   700 (popups) et ses contrôles (.leaflet-top/.leaflet-bottom) sont à 1000 —
   sans ce niveau, le calque reste sous la carte : invisible et non cliquable,
   la molette/le clic l'atteignent en dessous sans passer par lui. */
.carte-overlay-activation {
    position: absolute;
    inset: 0;
    z-index: 1001;
    background: rgba(0, 0, 0, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    text-align: center;
    padding: 1rem;
}

.carte-overlay-activation__message {
    background: rgba(33, 37, 41, 0.8);
    color: #fff;
    font-size: 0.9rem;
    font-weight: 600;
    padding: 0.5rem 1.25rem;
    border-radius: 2rem;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.carte-overlay-activation--inerte {
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
}

/* Iframe SuisseMobile sur tactile : le calque n'a plus de message permanent,
   juste une teinte discrète, toujours active par défaut (verrouillé). Rendu
   inerte quand l'utilisateur déverrouille via le bouton cadenas (cf.
   ajouterToggleCarte() dans custom.js), pour laisser passer pan/pinch-zoom
   jusqu'à l'iframe en dessous ; réactivé dès qu'il reverrouille. */
.carte-overlay-activation--deverrouille {
    pointer-events: none;
}

/* Variante allégée : iframe SuisseMobile sur souris/trackpad. Cross-origin,
   donc le calque reste la seule option même sur desktop (pas de Ctrl+molette
   possible à l'intérieur) — mais son poids visuel est réduit au minimum pour
   ne pas masquer le contenu : fond quasi transparent, pastille en coin au
   lieu d'un message centré pleine largeur. */
@media (pointer: fine) {
    .carte-overlay-activation--iframe {
        background: rgba(0, 0, 0, 0.02);
        align-items: flex-end;
        justify-content: flex-end;
        padding: 0.5rem;
    }

    .carte-overlay-activation--iframe .carte-overlay-activation__message {
        font-size: 0.75rem;
        font-weight: 500;
        padding: 0.3rem 0.7rem;
        background: rgba(33, 37, 41, 0.55);
    }
}

/* ============================================
   TOGGLE VERROUILLAGE CARTES (tactile)
   ============================================ */
/* Bouton cadenas flottant, coin inférieur GAUCHE — seul moyen d'activer le
   pan/pinch-zoom sur tactile (cf. ajouterToggleCarte() dans custom.js).
   Coin gauche choisi pour ne pas chevaucher l'attribution Leaflet, qui
   occupe par défaut le coin inférieur DROIT (.leaflet-control-attribution,
   z-index natif ~800) ; le zoom Leaflet par défaut est en haut à gauche
   (aucun contrôle personnalisé de position dans ce projet, cf. absence
   d'option zoomControl/attributionControl dans L.map() côté index/show).
   z-index supérieur à .carte-overlay-activation (1001) et aux panes/contrôles
   Leaflet (max 1000) : le bouton doit toujours rester au-dessus, jamais
   recouvert ni intercepté par le calque de protection de l'iframe. */
.carte-toggle-verrouillage {
    position: absolute;
    bottom: 12px;
    left: 12px;
    z-index: 1010;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    color: #212529;
    font-size: 1.1rem;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
    cursor: pointer;
}

.carte-toggle-verrouillage i {
    transition: opacity 0.15s ease;
}

@media (prefers-color-scheme: dark) {
    .carte-toggle-verrouillage {
        background: rgba(33, 37, 41, 0.85);
        color: #fff;
    }
}

/* Toast d'incitation "Utilisez le cadenas..." — premier contact tactile sur
   une carte/iframe verrouillée (cf. ajouterToggleCarte() dans custom.js).
   Centré sur le conteneur, ~2s en fondu, throttlé côté JS. */
.carte-toast {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1005;
    background: rgba(33, 37, 41, 0.85);
    color: #fff;
    font-size: 0.85rem;
    font-weight: 600;
    text-align: center;
    white-space: nowrap;
    padding: 0.5rem 1rem;
    border-radius: 2rem;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.carte-toast--visible {
    opacity: 1;
}

/* ============================================
   INDICE "CTRL + MOLETTE POUR ZOOMER" (cartes Leaflet, desktop)
   ============================================ */
/* Pastille positionnée près du curseur (left/top en coordonnées viewport,
   cf. activerZoomCtrlMolette() dans custom.js), affichée en fondu ~1.5s,
   throttlée côté JS pour ne pas réapparaître à chaque scroll. */
.carte-indice-zoom-molette {
    position: fixed;
    z-index: 2000;
    transform: translate(-50%, -130%);
    background: rgba(33, 37, 41, 0.85);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
    padding: 0.4rem 0.8rem;
    border-radius: 2rem;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.carte-indice-zoom-molette--visible {
    opacity: 1;
}