/*
Theme Name: Hello Elementor Child
Description: Hello Elementor Child Theme
Template: hello-elementor
*/

.article-img-container a,
.article-img-container a img {
    display: block;
    width: 100%;
    height: auto;
}

body {
    font-family: Montserrat, sans-serif !important;
}

/* =========================================================
   CLASSE GÉNÉRALE : .deco-block
   Ajoute des blocs turquoise décoratifs DERRIÈRE un élément.
   Réutilisable sur n'importe quel conteneur.

   Usage :   <div class="deco-block"> ... contenu ... </div>
   Couleur : redéfinir --deco-color sur l'élément si besoin.
   ========================================================= */
:root {
    --deco-color: #bfe0dd;
    /* turquoise Provence Verte */
    --base-color: #007026;
    /* vert Provence Verte */
}

/* =========================================================
   LISTE DES COMMUNES (#commune-list-container)
   Remplie dynamiquement par custom.js (data-ville de la carte).
   ========================================================= */
#commune-list-container {
    /* display:block obligatoire : les colonnes CSS sont ignorées sur un
       conteneur flex/grid (cas des conteneurs Elementor). */
    display: block !important;
    column-count: 2;
    column-gap: 40px;
}

#commune-list-container .commune-list__item {
    display: block;
    break-inside: avoid;
    /* évite qu'un nom soit coupé entre 2 colonnes */
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    /* compat anciens navigateurs */
    margin-bottom: 8px;
    padding: 4px 10px;
    line-height: 1.3;
    cursor: pointer;
    width: 200px;
    transition: background-color .15s ease, color .15s ease;
}

/* Surbrillance du nom : au survol direct OU quand la carte est survolée (.is-active) */
#commune-list-container .commune-list__item:hover,
#commune-list-container .commune-list__item.is-active {
    background-color: var(--base-color);
    color: #fff;
}

/* Nom = lien vers la fiche commune : on garde le style de la liste
   (pas de soulignement ni de couleur de lien par défaut/Elementor). */
#commune-list-container a.commune-list__item {
    text-decoration: none !important;
    color: inherit !important;
}

#commune-list-container a.commune-list__item:hover,
#commune-list-container a.commune-list__item.is-active {
    color: #fff !important;
    text-decoration: underline !important;
}

/* Surbrillance de la commune sur la carte quand on survole son nom dans la liste */
#svg-map path.is-active {
    fill: var(--base-color);
}

/* Curseur main sur les communes cliquables (celles qui ont une fiche) */
#svg-map path.has-fiche {
    cursor: pointer;
}

/* =========================================================
   CARROUSEL PUBLICATIONS — DESKTOP UNIQUEMENT (> 1024px)
   Tout l'habillage custom (tailles fixes des couvertures + effet
   éventail) ne s'applique qu'au desktop. En dessous de 1025px, aucun
   style perso : le carrousel reste celui d'Elementor par défaut.
   ========================================================= */
@media (min-width: 1025px) {

    /* Taille FIXE identique pour toutes les couvertures (ratio A4 ≈ 210/297),
       quelles que soient les dimensions des images sources.
       -> Ajuster la largeur/hauteur ICI (une seule fois). */
    .carrossel-img-publication {
        --pub-w: 250px;
        --pub-h: 350px;
    }

    /* On dimensionne uniquement le CONTENU (figure / lien / wrapper), pas la
       .swiper-slide elle-même : Swiper mesure la largeur des diapos pour les
       espacer et centrer, donc y toucher casse le positionnement. La diapo,
       en largeur "auto", s'ajuste alors à ce contenu fixe. */
    .carrossel-img-publication .swiper-slide>figure,
    .carrossel-img-publication .swiper-slide .swiper-slide-inner,
    .carrossel-img-publication .swiper-slide>a {
        width: var(--pub-w) !important;
        height: var(--pub-h) !important;
        margin: 0 !important;
    }

    /* L'image remplit exactement la boîte ; l'excédent est recadré.
       object-position: top garde le haut (titre) visible.
       Repasser à object-fit: contain pour voir la couverture entière. */
    .carrossel-img-publication .swiper-slide img,
    .carrossel-img-publication .swiper-slide .swiper-slide-image {
        box-shadow: -1px -2px 3px 1px;
        width: var(--pub-w) !important;
        height: var(--pub-h) !important;
        object-fit: cover;
        object-position: top center;
        display: block;
    }

    .carrossel-img-publication .swiper-horizontal {
        padding-top: 30px;
    }

    .carrossel-img-publication .swiper-slide {
        transition: transform .45s ease, opacity .45s ease;
        transform: scale(.9);
        opacity: .9;
        position: relative;
        z-index: 1;
    }

    /* Éventail (5 diapos affichées) : on tire chaque couverture vers le centre
       avec translateX pour supprimer les espaces vides et créer le recouvrement.
       L'active est la 1re visible → le centre est la 3e (active + 2).
       Ajuste les % de translateX pour resserrer (plus grand) ou écarter. */

    /* col 1 — extrême gauche */
    .carrossel-img-publication .swiper-slide-active {
        transform: translateX(62%) scale(.88);
        z-index: 1;
    }

    /* col 2 — gauche */
    .carrossel-img-publication .swiper-slide-active+.swiper-slide {
        transform: translateX(34%) scale(1);
        z-index: 3;
    }

    /* col 3 — centre (déborde sur ses voisines) */
    .carrossel-img-publication .swiper-slide-active+.swiper-slide+.swiper-slide {
        transform: scale(1.1);
        opacity: 1;
        z-index: 5;
    }

    /* col 4 — droite */
    .carrossel-img-publication .swiper-slide-active+.swiper-slide+.swiper-slide+.swiper-slide {
        transform: translateX(-34%) scale(1);
        z-index: 3;
    }

    /* col 5 — extrême droite */
    .carrossel-img-publication .swiper-slide-active+.swiper-slide+.swiper-slide+.swiper-slide+.swiper-slide {
        transform: translateX(-62%) scale(.88);
        z-index: 1;
    }

    .carrossel-img-publication .swiper-slide img {
        box-shadow: 0 6px 18px rgba(0, 0, 0, .14);
        transition: box-shadow .45s ease;
    }

    .carrossel-img-publication .swiper-slide-active+.swiper-slide+.swiper-slide img {
        box-shadow: 0 14px 40px rgba(0, 0, 0, .26);
    }

    .img-container-pub {
        width: var(--pub-w) !important;
    }

    header nav .sub-menu.elementor-nav-menu--dropdown {
        box-shadow: -1px 1px 3px 0px var(--base-color);
    }
}

header ul.sub-menu .menu-item a:hover {
    background-color: var(--base-color) !important;
    color: #fff !important;
}

@media (max-width: 1024px) {
    .info-maire-container {
        flex-wrap: nowrap;
    }

    .info-maire-container {
        width: 50%;
    }

    #commune-list-container .commune-list__item {
        font-size: 14px;
        width: auto !important;
    }

    nav .menu-item .has-submenu {
        justify-content: space-between !important;
    }

    nav .menu-item .has-submenu:hover {
        background-color: var(--base-color) !important;
    }

    header .elementor-widget-off-canvas .e-off-canvas__content {
        margin-top: 110px !important;
    }

}

.home-watch-container img,
.photo-maire img {
    object-fit: cover;
}

.elementor-widget-text-editor a,
.elementor-widget-text-editor a:hover {
    text-decoration: underline !important;
    color: var(--base-color) !important;
}


.text-editor-fiche-commune ul {
    padding: 12px;
}

#text-editior-link-footer a {
    text-decoration: none !important;
    color: gray !important;
}