/* ============================================
   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;
    }

    #navbarNavDropdown-8 .navbar-nav {
        padding: 1rem 0;
        text-align: left;
    }

    #navbarNavDropdown-8 .nav-link {
        padding: 0.75rem 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;
}