/* Fond du site */

body {
    background-attachment: fixed;
    background-size: auto;
    background-position: center center;
    background-color: transparent;
    background-repeat: repeat;
    background-image: linear-gradient(90deg, rgb(179 90 129 / 80%) 0%, rgb(0 0 0) 2%, rgb(202 219 28 / 12%) 50%), url(https://echo-system.art/wp-content/uploads/2026/01/Texture-fond-de-site.webp);
    background-blend-mode: overlay;
    background-attachment: fixed;
}

/* Boutons primaires et secondaires */
button.button-primary, .wp-block-button.is-style-primary  {
    box-shadow: 0 6px 20px rgb(0 0 0) !important;
    border-color: transparent !important;
    border-radius: 12px;
}

button.button-secondary, .wp-block-button.is-style-secondary {
    border-color: transparent !important;
    border-width: 1px !important;
    box-shadow: 0 6px 20px rgb(0 0 0) !important;
    border-radius: 12px;
}

/* En-tête */

/* Slogan */
.site-logo small {
    font-style: italic;
}

.header {
    background-attachment: fixed;
    background-size: cover;
    background-position: top;
    background-repeat: no-repeat;
    background-image: url(https://echo-system.art/wp-content/uploads/2026/01/Fond_entete-scaled.jpg.webp);
/*    background-color: rgb(199 199 36 / 40%);  ->  Pour appliquer un fond de couleur si besoin    */
    background-blend-mode: overlay;
    background-attachment: fixed;
}

.site-logo img {
    box-shadow: none !important;
    filter: drop-shadow(0px 4px 15px black);
    border-radius: 0;
    font-weight: bold;
}

.title-with-logo small {
    font-size: 20px;
}

.hfg_header.site-header .header--row.header-top.hide-on-mobile.hide-on-tablet .row--wrapper {
    grid-template-columns: auto auto;
    /* Si jamais problème d'affichage alors tester avec la règle : grid-template-columns: 2fr 1fr; */
}

.actu-focus-buttons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.2rem;
    flex-wrap: wrap;
}

@media (min-width: 1000px) {
    .site-logo .title-with-logo > :first-child {
        margin-right: 61px !important;
    }
}

.hfg-slot.center {
    margin-right: 50px;
}

@media (max-width: 768px) {
    .hfg-slot.center {
        margin-right: 500px !important;
    }
}


.nav-item.nav-langue {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    align-self: flex-end;
}

/* hero */

.before-home-hero {
    display: flex;
    align-items: center;
    gap: 0.2rem;
    flex-direction: column-reverse;
}

.hero {
    margin-top: 50px;
    margin-bottom: 30px;
}

.hero .wp-block-buttons  {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.2rem;
    flex-wrap: wrap;
}

.hero h2 {
    text-align: center;
    margin-bottom: 0px;
}

.hero p {
    font-style: italic;
}

/* Icône en haut de chaque page, en dessous du h1 */

.head-icon-page {
    font-size: 48px;
}

.home-hero {
    height: 0px;
    overflow: hidden;
    visibility: hidden;
}

.home .home-hero {
    height: auto;
    overflow: visible;
    visibility: visible;
}

/* Affichage du menu */

.mega-sub-menu .mega-menu-column {
    opacity: 1 !important; transition: opacity 0.3s ease-in-out !important;

}

.mega-sub-menu:hover .mega-menu-column {
    opacity: 0.5 !important; transition: opacity 0.3s ease-in-out !important;
}

.mega-sub-menu .mega-menu-column:hover {
    opacity: 1 !important; transition: opacity 0.3s ease-in-out !important;
}

#mega-menu-wrap-primary #mega-menu-primary {
    border-radius: 15px;
}


#mega-menu-wrap-primary #mega-menu-primary img {
    border-radius: 5px;
}

#mega-menu-wrap-primary #mega-menu-primary li.mega-menu-item.mega-icon-top > a.mega-menu-link::before {
    font-size: 25px;
    margin-bottom: 10px;
    color: #b4e1a3;
}

#mega-menu-wrap-primary #mega-menu-primary li.mega-menu-item-4484 img {
    height: 145px !important;
    width: 145px !important;
    margin-left: auto;
    margin-right: auto;
}

#mega-menu-wrap-primary #mega-menu-primary li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-row .mega-menu-column > ul.mega-sub-menu > li.mega-menu-item {
    padding: 5px;
    width: 100%;
    text-align: center;
}

@media (max-width: 768px) {
    #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu {
        padding-left: 50px;
        padding-right: 50px;
        padding-top: 20px;
        padding-bottom: 50px;
    }

    #mega-menu-wrap-primary #mega-menu-primary li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-row .mega-menu-column > ul.mega-sub-menu > li.mega-menu-item {
        text-align: center;
    }

    #mega-menu-item-4484 .textwidget.custom-html-widget {
        margin-bottom: 20px;
    }


}

.nav-circulaire {
    z-index: 4;
    position: relative;
}

.nav-ul li {
    z-index: 105;
    margin: 10px !important;
}

/* Style des menus principaux */
.nav-ul li a {
    font-size: 19px;
    font-weight: bold;
    color: #053726 !important;
}

.not-clickable > a {
    cursor: default;     /* Le curseur par défaut */
}

/* Style des sous-menus */
.not-clickable .sub-menu a {
    cursor: pointer; /* Réinitialise le curseur pour les sous-liens */
    color: #f4f3e6 !important;
}

.nav-ul .sub-menu {
    background: rgba(0, 121, 145, 0.77) !important;
}

.nav-ul li:hover > .wrap > a {
    color: #f1f4c9 !important;
    text-shadow: 0 1px 2px rgb(0, 0, 0);
    font-size: 19px;
    font-weight: bold;
}

/* Élément actif (page actuelle) */
.nav-ul li.nv-active > .wrap > a:not([href="https://echo-system.art/"]) {
    color: #93ffae !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.57);
}

/* Menu "S'inscrire" et "Connexion" et "Actulités du site" et "Focus Art" */
.menu-item-1669, .menu-item-1670, .menu-item-1671, .menu-item-4184, .menu-item-4185 {
    background: #EFF8D9;
    padding: 6px 18px;
    padding-top: 6px;
    border-radius: 50px;
    backdrop-filter: blur(3px);
}

.menu-item-1669:hover, .menu-item-1670:hover, .menu-item-1671:hover, .menu-item-4184:hover, .menu-item-4185:hover {
    background: rgba(255,255,255,0.28);
}

@media (max-width: 1024px) {
    .nav-ul li:hover > .wrap > a {
        color: #2e8b57 !important;
        text-shadow: none;
        font-size: 16px;
    }
    
    .nav-ul.menu-mobile li a {
        font-size: 16px;
        font-weight: 600;
        color: #053726 !important;
        padding: 10px 0 !important;
        margin: 0;
        max-width: 80% !important;
    }
/*

    #secondary-menu-mobile-top.nav-ul li a {
        font-size: 15px;
        font-weight: bold;
        color: #1d747b !important;
    }
*/

    /* Ajout d'une ligne de séparation (simulée par une bordure) sous les titres principaux */
    .nav-ul.menu-mobile li:not(:last-child) > .wrap > a {
        border-bottom: 1px solid #3B8C8630;
        margin-bottom: 5px; /* Espace après la ligne */
        padding-bottom: 10px !important;
    }

    /* Style des caret (flèches d'ouverture/fermeture) */
    .nav-ul li > .wrap .caret, .nav-ul li:hover > .wrap .caret {
        color: #1d747b !important; /* Couleur d'accentuation */
    }

    .header-menu-sidebar-bg {
        --bgcolor: #fafafa !important;
        box-shadow: 0 0 20px rgba(11, 10, 11, 0.44);
    }
    
    /* Élément actif (page actuelle) */
    .nav-ul li.nv-active > .wrap > a:not([href="https://echo-system.art/"]) {
        color: #1d747b !important;
        text-shadow: none;
        background-color: transparent;
        font-weight: bold;
    }
    .not-clickable .sub-menu a {
        color: #333333 !important;
        background-color: transparent !important;
        font-weight: 400;
        font-size: 15px;
        padding-left: 20px !important;
        line-height: 2.2;
    }

    .nav-ul .sub-menu {
        background: none !important;
        padding: 5px 0;
        padding-left: 12px;
        border-left: 15px solid #3B8C86;
    }

    .nav-ul.menu-mobile li {
        margin: 10px 0;
    }

    .nav-ul.menu-mobile {
        margin: 20px;
    }

    #secondary-menu-mobile-top.nav-ul {
        margin: auto;
    }

    #secondary-menu-mobile-top.nav-ul li {
        margin-top: 10px !important;
        margin-bottom: 10px !important;
        margin-right: auto !important;
        margin-left: auto !important;
    }

    .header--row.header-top.hide-on-desktop.layout-full-contained.header--row .header--row-inner.header-top-inner .container .row.row--wrapper {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
    }

    .header-menu-sidebar {
        z-index: 9999999999999 !important;
    }
/*
    .header-menu-sidebar .nav-ul {
        width: 60vw !important;
    }
*/
}

/* Bannière sous le titre en page d'accueil */
.home .wp-block-cover__image-background.wp-image-4053 {
    background-size: auto;
}

@media (max-width: 1024px) {
    .home .wp-block-cover__image-background.wp-image-4053 {
        zoom: 0.5;
    }
    .banniere-page-accueil {
        min-height: 164px !important;
    }
}

/* Fil d'ariane */

.nv--yoast-breadcrumb.neve-breadcrumbs-wrapper {
    color: #336c3f;
}

.neve-breadcrumbs-wrapper {
    text-align: center;
}

/* Liens de manière générale */

a {
    color: var(--nv-primary-accent);
    cursor: pointer;
    text-decoration: var(--linkdeco);
}




/* Page d'accueil */

.wp-block-group__inner-container.is-layout-constrained.wp-block-group-is-layout-constrained {
    padding: 4rem 1rem;
    box-shadow: 0 10px 30px rgb(19 22 54 / 41%);
}

/* Section "À qui s'adresse Echo-System.Art ?" */

.home-target .target-item {
  text-align: center;
}

.home-target .target-item svg {
  width: 48px;
  height: 48px;
  margin-bottom: 0.75rem;
}

@media (max-width: 768px) {
    .home-target .wp-block-columns:not(.is-not-stacked-on-mobile)>.wp-block-column {
        flex-basis: 30% !important;
    }

    .home-target .target-item svg {
        width: 40px;
        height: 40px;
    }
}

.target-item {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease, transform 0.8s ease;
  transition-delay: 0.1s;
}

.target-item.is-visible {
    opacity: 1;
    transform: translateY(0);
    text-align: center;
}

/* Section "Votre coup de pouce au quotidien" */

.see-more-btn {
  display: none;
}

.home-benefits {
    text-align: center;
    background: #f2f9da66;
}

.home-benefits h2 {
    margin-bottom: 50px;
}

.home-benefits .card {
    background: #ffffff5e;
    padding: 40px 30px;
    border-radius: 12px;
    height: 100%;
    transition: all 0.4s ease;
    
    box-shadow: 0 10px 30px rgba(19, 22, 54, 0.05); 
    
    display: flex;
    flex-direction: column;
    align-items: center;
    border: 1px solid rgba(19, 22, 54, 0.05);
}

/* Effet de survol doux */
.home-benefits .card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(19, 22, 54, 0.08);
    border-color: #C2BC4E;
}

/* --- Style de l'icône --- */
.home-benefits .card svg {
    width: 48px;
    height: 48px;
    margin-bottom: 0.75rem;
}

.home-benefits .card a {
    color: #336c3f;
}

@media (max-width: 768px) {
    .home-benefits .card svg {
        width: 40px;
        height: 40px;
    }

    .see-more-btn {
        display: inline-block;
        margin: 1.5rem auto 0;
        padding: 0.6rem 1.2rem;
        border-radius: 30px;
        border: none;
        background: #000;
        color: #fff;
        font-size: 0.9rem;
        cursor: pointer;
    }

    .mobile-see-more-columns > .wp-block-column:nth-child(n+3) {
        display: none; 
    }

  /* Ouverture fluide */
    .mobile-see-more-columns.is-open > .wp-block-column:nth-child(n+3) {
        display: flex;
  }

/* Si on veut mettre les cartes "coup de pouce au quotidien" sur deux colonnes 
    .home-benefits .wp-block-columns:not(.is-not-stacked-on-mobile)>.wp-block-column {
        flex-basis: 30% !important;
    }
*/

}


.home-benefits .card h3 {
    color: #131636;
    font-size: 1.2rem !important;
    margin-bottom: 15px !important;
    line-height: 1.3;
}

.home-benefits .card p {
    color: #336c3f;
    font-size: 0.95rem;
    margin: 0;
}

/* --- Ajustement de la grille --- */
.home-benefits .wp-block-columns {
    gap: 25px !important;
}

/* Section 3 "La cœur battant : La carte des événements et des acteurs de l’art" */

/* --- Style du bouton "accordéon" --- */

.explore_map {
    padding-left: 10vw;
    padding-right: 10vw;
}

.main-sous-explorer-carte {
    text-align: center;
    bottom: 20px;
    position: relative;
}

.explore_map summary {
    /* Couleurs contractuelles (Charte 3.0) */
    background-color: #E67E22 !important; /* Orange Terreux Vif (CTA) */
    color: #000000 !important;
    
    /* Structure et forme */
    list-style: none; /* Enlève la petite flèche par défaut du navigateur */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 22px 40px !important;
    border-radius: 8px;
    
    /* Typographie */
    font-family: 'Inter', sans-serif !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 1.1rem;
    
    /* Animation et Ombre */
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    box-shadow: 0 6px 20px rgba(230, 126, 34, 0.25);
    border: 2px solid #000000;

    margin-left: auto;
    margin-right: auto;
    width: 198px;
    margin-top: 50px;

    text-align: center;
    box-shadow: 0 6px 20px rgb(0 0 0) !important;
}

/* Enlever la flèche sur Safari/Chrome */
.explore_map summary::-webkit-details-marker {
    display: none;
}

/* --- Effet au survol (Hover) --- */
.explore_map summary:hover {
    background-color: #b43966 !important;
    transform: translateY(-4px);
    box-shadow: 0 10px 25px rgba(19, 22, 54, 0.3);
    color: #fff !important;
}

/* --- Style quand l'accordéon est OUVERT --- */
/* (Le sélecteur [open] cible le parent <details> quand il est déplié) */
.explore_map[open] summary {
    background-color: #b43966 !important;
    border-radius: 8px 8px 0 0; /* On "aplatit" le bas pour le lier au contenu */
    box-shadow: none;
    color: white !important;
}

/* --- Style du contenu déployé (La carte et les filtres) --- */
/* On cible le groupe à l'intérieur de l'accordéon */
.explore_map .wp-block-group {
    border-top: none;
    border-radius: 0 0 8px 8px;
    animation: slideDown 0.5s ease-out;
}

/* Petite animation de déploiement fluide */
@keyframes slideDown {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Section 4 - Pourquoi Echo-System.Art ? */

.home-why {
    padding: 5rem 1rem;
}



/* Section 5 - Les chiffres */

 /* Conteneur général */

.wp-block-group__inner-container:has(.esa-stats) {
    background: #f2f9da66;
}

.esa-stats {
    text-align: center;
    padding: 4rem 1rem;
}

.esa-stats-title {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.esa-stats-subtitle {
    margin-bottom: 3rem;
    opacity: 0.8;
    font-style: italic;
}

.esa-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.5rem;
}

.esa-stat {
    display: flex;
    align-items: center;
    gap: 20px;
    background: rgb(255 255 255 / 32%);
    padding: 1.5rem;
    border-radius: 14px;
    text-decoration: none;
    color: inherit;
    justify-content: space-evenly;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    /* flex-direction: column; Si on veut que les icones/chiffres/textes soient de de haut en bas plutôt que de gauche à droite */
    transition: transform 0.35s ease, box-shadow 0.35s ease, background-color 0.35s ease;
}

.esa-stat:hover {
    transform: translateY(-6px);
    background-color: rgba(255, 255, 255, 0.55);
    box-shadow: 0 14px 35px rgb(19 22 54 / 31%), 0 0 0 1px rgb(230 126 34 / 51%);
}

.esa-icon {
    width: 40px;
    height: 40px;
    stroke: #5b7c78;
    fill: none;
    stroke-width: 2;
}

.esa-stat:hover .esa-icon {
    stroke: #E67E22;
}

.esa-stat:hover .counter {
    color: #E67E22;
}

.counter {
    font-size: 2rem;
    font-weight: 600;
}

.esa-stat-label {
    display: block;
    font-size: 0.95rem;
    opacity: 0.8;
}

@media (max-width: 768px) {
    .esa-stats {
        padding: 4rem 0.1rem;
    }

    .esa-stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }

    .esa-stat {
        padding: 0.2rem;
    }

    .esa-stats-grid > .esa-stat:nth-child(n+3) {
        display: none;
    }

    /* quand ouvert : tout afficher */
    .esa-stats-grid.is-open > .esa-stat {
        display: flex;
    }
}

@media (max-width: 480px) {
    .esa-stats-grid {
        grid-template-columns: repeat(1, 1fr);
    }

    .esa-stat {
        padding: 0.2rem;
        flex-direction: column;
        gap: 0px;
    }
}

/* Section 6 - Grille des artistes */

.artists-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    padding: 20px 0;
}

/* Carte artiste */
.artist-item {
    background-color: rgb(255 255 255 / 32%);
    border-radius: 12px;
    overflow: hidden;
    text-align: center;
    text-decoration: none;
    color: inherit;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 8px 20px rgb(0 0 0 / 22%);
}

.artist-item:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 28px rgba(0,0,0,0.10);
}

/* Image + zoom au survol */
.artist-img {
    width: 100%;
    height: 260px; /* tu peux ajuster la hauteur si tu veux */
    overflow: hidden;
    background: #eae7e1;
}

.artist-img img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* plus “photo”, comme ta capture */
    transition: transform 0.4s ease;
}

.artist-item:hover .artist-img img {
    transform: scale(1.06);
}

.artist-item h4 {
    margin: 0;
    padding: 16px 12px;
    font-size: 1.05rem;
    font-weight: 600;
    background-color: rgb(255 255 255 / 32%);
}

.artist-date {
    display: block;
    font-size: 0.9rem;
    margin: 4px 0;
    font-style: italic;
    opacity: 0.55;
}

@media (max-width: 900px) {
    .artists-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 768px) {
    .artists-grid {
        gap: 1rem;
    }
}

/* Section 7 - Grille des événements */

.events-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}

.events-grid .fas{
    color: #ed7d32;    
}

.event-card {
    display: flex;
    background-color: rgb(255 255 255 / 32%);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 8px 20px rgb(0 0 0 / 22%);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.event-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 28px rgba(0,0,0,0.1);
}

.event-image {
    width: 40%;
    min-width: 160px;
    overflow: hidden;
}

.event-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Contenu */
.event-content {
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.event-title {
    margin: 0 0 10px;
    font-size: 1.2rem;
}

.event-meta {
    margin: 4px 0;
    font-size: 0.95rem;
    opacity: 0.85;
}

/* Bouton */
.event-button {
    margin-top: 12px;
    display: inline-block;
    align-self: flex-start;
    padding: 8px 14px;
    background: #2f3e3b;
    color: #fff;
    border-radius: 8px;
    font-size: 0.9rem;
    text-decoration: none;
    transition: background 0.3s ease;
}

.event-button:hover {
    background: #445f5a;
}

@media (max-width: 900px) {
    .events-grid {
        grid-template-columns: 1fr;
        max-height: 900px;
    }

    .event-card {
        flex-direction: column;
    }

    .event-image {
        width: 100%;
        height: 220px;
    }
/* Si on veut mettre que 2 événements plutôt que 4 sur mobiles :
    .event-card:nth-child(n+3) {
        display: none;
    }
*/
}

/* Section 8 - Grille des actualités */

.news-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}

.news-card {
    display: flex;
    background-color: rgb(255 255 255 / 32%);
    box-shadow: 0 8px 20px rgb(0 0 0 / 22%);
    border-radius: 16px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    align-self: flex-end;
}

.news-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 28px rgba(0,0,0,0.1);
}

.news-image {
    width: 40%;
    min-width: 160px;
}

.news-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.news-content {
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.news-title {
    margin: 0 0 8px;
    font-size: 1.2rem;
}

.news-excerpt {
    font-size: 0.95rem;
    opacity: 0.85;
    margin-bottom: 8px;
}


.news-grid .news-excerpt svg {
    margin-right: 5px;
    margin-bottom: 8px;
    margin-top: 20px;
}

.news-meta {
    font-size: 0.85rem;
    opacity: 0.7;
}

.news-grid .news_date {
    display: flex;
    align-items: baseline;
}

.news-grid .news_date svg {
    margin-right: 10px;
    margin-top: 5px;
    position: relative;
    top: 3px;
}

.news-button {
    margin-top: 12px;
    align-self: flex-start;
    padding: 8px 14px;
    background: #2f3e3b;
    color: #fff;
    border-radius: 8px;
    font-size: 0.9rem;
    text-decoration: none;
}

.news-button:hover {
    background: #445f5a;
}

.news-grid svg {
    color: #131636;    
}

@media (max-width: 900px) {
    .news-grid {
        grid-template-columns: 1fr;
        max-height: 900px;
    }

    .news-content {
        display: flex;
        flex-direction: column;
        height: 100%;
    }

    .news-button {
        margin-top: auto;
    }

    .news-card {
          display: flex;
          flex-direction: column;
          height: 100%;
    }

    .news-title {
        display: -webkit-box;
        -webkit-line-clamp: 2; /* 2 lignes max */
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .news-excerpt {
        display: -webkit-box;
        -webkit-line-clamp: 3; /* ajuste à 2 ou 3 selon ton design */
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .news-image {
        width: 100%;
        height: 220px;
    }

    .news-card:active .news-title,
    .news-card:active .news-excerpt {
        -webkit-line-clamp: unset;
    }

/* Si on veut mettre que 2 news plutôt que 4 sur mobiles :
    .news-card:nth-child(n+3) {
            display: none;
        } 
*/
}


/* Section 9 - Grille des bons plans */

.deals-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}

.deals-card {
    display: flex;
    background-color: rgb(255 255 255 / 32%);
    box-shadow: 0 8px 20px rgb(0 0 0 / 22%);
    border-radius: 16px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    align-self: flex-end;
}

.deals-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 28px rgba(0,0,0,0.1);
}

.deals-image {
    width: 40%;
    min-width: 160px;
}

.deals-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.deals-content {
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.deals-title {
    margin: 0 0 8px;
    font-size: 1.2rem;
}

.deals-excerpt {
    font-size: 0.95rem;
    opacity: 0.85;
    margin-bottom: 8px;
}


.deals-grid .deals-excerpt svg {
    margin-right: 5px;
    margin-bottom: 8px;
    margin-top: 20px;
}

.deals-meta {
    font-size: 0.85rem;
    opacity: 0.7;
}

.deals-grid .deals_date {
    display: flex;
    align-items: baseline;
}

.deals-grid .deals_date svg {
    margin-right: 10px;
    margin-top: 5px;
    position: relative;
    top: 3px;
}

.deals-button {
    margin-top: 12px;
    align-self: flex-start;
    padding: 8px 14px;
    background: #2f3e3b;
    color: #fff;
    border-radius: 8px;
    font-size: 0.9rem;
    text-decoration: none;
}

.deals-button:hover {
    background: #445f5a;
}

.deals-grid svg {
    color: #131636;    
}

@media (max-width: 900px) {
    .deals-grid {
        grid-template-columns: 1fr;
        max-height: 900px;
    }

    .deals-content {
        display: flex;
        flex-direction: column;
        height: 100%;
    }

    .deals-button {
        margin-top: auto;
    }

    .deals-card {
          display: flex;
          flex-direction: column;
          height: 100%;
    }

    .deals-title {
        display: -webkit-box;
        -webkit-line-clamp: 2; /* 2 lignes max */
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .deals-excerpt {
        display: -webkit-box;
        -webkit-line-clamp: 3; /* ajuste à 2 ou 3 selon ton design */
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .deals-image {
        width: 100%;
        height: 220px;
    }

    .deals-card:active .deals-title,
    .deals-card:active .deals-excerpt {
        -webkit-line-clamp: unset;
    }

/* Si on veut mettre que 2 news plutôt que 4 sur mobiles :
    .deals-card:nth-child(n+3) {
            display: none;
        } 
*/
}




/* Section 6-7-8 sur la page d'accueil pour la version mobile */

/* --- CONFIGURATION "CARROUSEL" MOBILE --- */
@media (max-width: 768px) {

    @keyframes bounce-hint {
        0%, 100% { transform: translateX(0); }
        50% { transform: translateX(-20px); }
    }

    /* 1. Le conteneur parent permet le défilement horizontal */
    .mobile-carousel-wrapper {
        overflow-x: auto;
        scroll-snap-type: x mandatory; /* Force l'aimantage */
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch; /* Inertie sur iOS */
        padding-bottom: 20px; /* Espace pour ne pas couper l'ombre portée */
        margin: 0 -20px; /* Sortir des marges du site pour coller aux bords de l'écran */
        padding-left: 20px;
    }

    /* 2. On force les grilles à rester sur une seule ligne */
    .artists-grid, 
    .events-grid, 
    .news-grid,
    .deals-grid {
        animation: bounce-hint 1.2s ease-out;
        padding-bottom: 15px;
        display: flex !important; /* On remplace le grid par du flex */
        flex-wrap: nowrap;
        gap: 15px; /* Espace entre les cartes */
    }

    /* 3. On définit la largeur des cartes pour le "Peek" (aperçu de la suivante) */
    .artist-item, 
    .event-card, 
    .news-card,
    .deals-card {
        flex: 0 0 82%; /* La carte prend 75% de la largeur, laissant 25% pour voir la suivante */
        scroll-snap-align: center; /* La carte s'aimante au centre */
        margin-right: 15px;
    }

    /* Ajustement spécifique pour les images dans les cartes horizontales */
    .event-card, .news-card, .deals-card {
        flex-direction: column !important; /* On repasse en vertical pour le carrousel */
    }
    
    .event-image, .news-image, .deals-image {
        width: 100% !important;
        height: 180px !important;
    }

    .mobile-carousel-wrapper::-webkit-scrollbar-track {
        background: rgba(0, 0, 0, 0.05); /* Fond discret */
        margin: 0 40px; /* La barre est plus courte que l'écran */
        border-radius: 10px;
    }

    /* Cacher la barre de défilement pour un look plus "App" */
    .mobile-carousel-wrapper::-webkit-scrollbar {
        display: block;
        height: 4px;
    }

    .mobile-carousel-wrapper::-webkit-scrollbar-thumb {
        background: #ed7d32; /* Ta couleur accent (orange) */
        border-radius: 10px;
    }
}

/* Section 10 - L'appel à l'action final */
.home-cta {
    background: #e67e2224;
}

.cta-line {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 14px;
    opacity: 0;
    transform: translateX(-28px);
    transition: opacity 1.4s ease-out, transform 1.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.cta-line.is-visible {
    opacity: 1;
    transform: translateX(0);
}

.cta-line p {
    margin: 0;
}

.icon-communaute::before {
    content: "\f328";
    color: #131636;
    margin-right: 0.4rem;
    font: 400 35px / 1 dashicons;
}

@media (max-width: 768px) {
    .home-cta svg {
        min-width: 24px !important;
        min-height: 24px !important;
    }
}

@media (max-width: 600px) {
    .cta-line {
        gap: 12px;
    }
}

/* Personnalisation de la grille des articles dans les pages Actualités, Bons plans, Focus Art, Presse, Tutoriels  */

.echo-grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 2rem;
    margin: 3rem 0;
    max-width: 1200px;
}

@media (min-width: 992px) {
    .echo-grid-container {
        /* Force la grille à se comporter comme s'il y avait 3 colonnes potentielles */
        /* Ainsi, un item seul ne dépassera pas 33% de la largeur */
        grid-template-columns: repeat(3, minmax(300px, 1fr));
    }
}

.echo-grid-item {
    background-color: rgb(255 255 255 / 32%); 
    box-shadow: 0 8px 20px rgb(0 0 0 / 22%);
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease;
}

.echo-grid-item:hover {
    transform: translateY(-4px);
}

.echo-grid-thumb img {
    width: 100%;
    height: auto;
    display: block;
}

.echo-grid-content {
    padding: 1.2rem;
}

.echo-grid-title {
    font-size: 1.25rem;
    margin-bottom: 0.5rem;
    color: #034732;
}

.echo-grid-date {
  color: #666;
  font-size: 0.9em;
  margin: 4px 0 8px;
  font-style: italic;
}

.echo-grid-excerpt {
    color: #555;
    font-size: 0.95rem;
    margin-bottom: 1rem;
}

.echo-grid-link {
    color: #2a9d8f;
    font-weight: 600;
    text-decoration: none;
}

.echo-grid-pagination {
    text-align: center;
    margin-top: 2rem;
}

.echo-grid-pagination a {
    padding: 8px 12px;
    margin: 0 3px;
    background: #f1f4c9;
    border-radius: 6px;
    text-decoration: none;
    color: #034732;
}

.echo-grid-pagination a:focus {
    color: #f1f4c9;
}

.echo-grid-pagination .current {
    background: #3B8C86;
    border-radius: 8px;
    text-decoration: none;
    color: #fff;
    padding: 8px 12px;
    margin: 0 3px;
}

.page-numbers:hover {
    background-color: #76c893;
    color: #fff;
}

/* Personnalisation des articles */

article .h2seo {
    text-align: left !important;
}

article h1 {
    text-align: center !important;
}

article .nv-meta-list {
    text-align: center !important;
}


/* Personnalisation de la grille des articles dans la page de résultats de recherches  */
@media (min-width: 960px) {
    .search .neve-main > .container .col  {
        max-width: 100%;
    }
}

.search .echo-grid-container {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

/* Centrer et personnaliser les titres des pages */

.nv-page-title h1 {
    text-align: center !important;
    margin-bottom: 76px;
}

.h2seo {
    text-align: center !important;
    font-size: 34px;
    margin-bottom: 33px;
}

.h3seo {
    text-align: center !important;
    font-size: 24px;
    margin-bottom: 33px;
}

.flip-card {
    background-color: transparent;
    width: 314px;
    height: 371px;
    perspective: 1000px;
    font-family: sans-serif;
    margin-left: auto;
    margin-right: auto;
}

.flip-card-front .title {
    font-size: 1.5em;
    font-weight: 900;
    text-align: center;
    margin: 20px;
}

.flip-card-front p {
    margin-left: 10px;
    margin-right: 10px;
}

.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.8s;
    transform-style: preserve-3d;
}

.flip-card:hover .flip-card-inner {
    transform: rotateY(180deg);
}

.flip-card-front, .flip-card-back {
    box-shadow: 0 8px 14px 0 rgba(0,0,0,0.2);
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    border: 1px solid coral;
    border-radius: 1rem;
}

.flip-card-front {
    background: linear-gradient(120deg, bisque 60%, rgb(255, 231, 222) 88%,
     rgb(255, 211, 195) 40%, rgba(255, 127, 80, 0.603) 48%);
    color: #3b8c86;
}

.flip-card-inner a {
    color: var(--nv-primary-accent);
    cursor: pointer;
    text-decoration: var(--linkdeco);
}

.flip-card-back {
    background: linear-gradient(120deg, rgb(255, 174, 145) 30%, coral 88%,
     bisque 40%, rgb(255, 185, 160) 78%);
    color: #160d2a;
    transform: rotateY(180deg);
}

.flip-card-back h2 {
    font-size: 20px;
    margin-left: 16px;
    margin-right: 16px;
    margin-top: 10px;
    margin-bottom: 20px;
}

.flip-card-back p {
    margin-left: 16px;
    margin-right: 16px;
    margin-top: 10px;
    margin-bottom: 20px;
}

@media (max-width: 768px) {
    .separator-desktop {
        height: 30px !important;
    }
}

.flip-card-front::after {
    content: '\21BA'; /* Flèche de rotation */
    position: absolute;
    bottom: -5px;
    right: 4px;
    font-size: 2.5em;
    font-weight: bold;
    color: #3b8c86;
    cursor: pointer;
    z-index: 10;
    transition: opacity 0.3s ease; /* Transition pour l'opacité */
}

.flip-card-front::after {
    opacity: 0.8;
}

.flip-card:hover .flip-card-front::after {
    opacity: 0;
}

/* Container principal */
.custom-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.8rem 1rem;
    background: white;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    position: sticky;
    top: 0;
    z-index: 999;
}

/* Menu principal
.main-menu {
    display: flex;
    gap: 1rem;
}

.main-menu li {
    list-style: none;
}

.main-menu a {
    text-decoration: none;
    color: #333;
    font-weight: 500;
}


.nav-right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.nav-btn {
    display: flex;
    align-items: center;
}

.custom-nav-wrapper {
    background-color: #5fa9aa;
    padding: 0.5rem 1rem;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 114%;
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    top: 0;
    z-index: 100;
}

.custom-nav-inner {
    display: flex;
    align-items: center;
    width: 100%;
    margin-right: auto;
    margin-left: auto;
}

.main-bar {
    justify-content: space-between;
}

.secondary-bar {
    justify-content: center;
    gap: 1.5rem;
    position: relative;
    z-index: 100;
}

.nav-left {
    display: flex;
    align-items: center;
    gap: 2rem;
}

.home-icon {
    position: relative;
    display: inline-block;
    width: 34px;
    height: 34px;
    font-family: "Font Awesome 7 Free";
    font-weight: 900;
    font-size: 34px;
    text-shadow: 1px 1px 0 #f7ff01, -1px 1px 0 #f7ff01, 1px -1px 0 #f7ff01, -1px -1px 0 #f7ff01;
    color: #22638a !important;
    z-index: 101;

}

.home-icon::before {
    content: "\f015";
    font-family: "Font Awesome 7 Free";
    font-weight: 900;
    color: inherit;
}

.home-icon:hover::before {
    color: #86670c;
    text-shadow: 1px 1px 10px #eeeebe, -1px 1px 10px #eaea0a, 1px -1px 10px #f0ef72, -1px -1px 10px #eccad8;
}

.site-title {
    font-weight: bold;
    font-size: 1.2rem;
    color: white;
}

.nav-right {
    display: flex;
    align-items: center;
    gap: 2rem;
    align-self: end;
}

.nav-item {
    display: flex;
    align-items: center;
}

.nav-item.nav-profil {
    position: relative;
    z-index: 101;
}


.nav-icons {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    border: 1px solid #655be1 !important;
    margin-left: 11px;
    padding: 11px;
    border-radius: 20px;
    margin-right: 11px;
    margin-top: 20px;
    box-shadow: 0 2px 10px #1e625d;
}

.nav-icons .icon-button i {
    color: #22638a;
}

.icon-button {
    color: white;
    font-size: 20px;
    cursor: pointer;
    transition: color 0.3s ease;
    display: flex;
    align-items: center;
    position: relative;
    z-index: 101;
}

.icon-button i:hover {
    color: #f7ff01;
}

.menu-profil-overlay {
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 150;
    pointer-events: none;
}

.menu-profil-overlay[style*="opacity: 1"] {
    pointer-events: auto;
}


@media (max-width: 768px) {
    .custom-nav {
        flex-direction: column;
        align-items: stretch;
    }
    .main-menu {
        flex-direction: column;
        gap: 0;
    }
    .nav-right {
        justify-content: center;
        padding-top: 0.5rem;
    }
    .custom-nav-inner {
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.5rem;
    }
    .nav-left, .nav-right {
        justify-content: center;
    }
}


.menu-item a[href="https://echo-system.art/"] {
    font-size: 0; 
    display: flex;
    align-items: center;
    justify-content: center;
}


.menu-item a[href="https://echo-system.art/"]::before {
    content: "\f015";
    font-family: "Font Awesome 7 Free";
    font-weight: 900;
    font-size: 34px;
    color: inherit;
    text-shadow: 1px 1px 0 #f7ff01, -1px 1px 0 #f7ff01, 1px -1px 0 #f7ff01, -1px -1px 0 #f7ff01;
    position: absolute;
}

.menu-item a[href="https://echo-system.art/"]:hover::before {
    color: #86670c;
    text-shadow: 1px 1px 10px #eeeebe, -1px 1px 10px #eaea0a, 1px -1px 10px #f0ef72, -1px -1px 10px #eccad8;
}

.menu-item a[href="https://echo-system.art/"]:active::before {
    color: #2e8e59 !important;
    text-shadow: 1px 1px 0 #93ffae, -1px 1px 0 #93ffae, 1px -1px 0 #93ffae, -1px -1px 0 #93ffae;
}

#menu-item-1518:hover {
  z-index: 999999;
}

#menu-item-1519:hover {
  z-index: 999999;
}

#menu-item-1520:hover {
  z-index: 999999;
}

#menu-item-890:hover {
  z-index: 999999;
}


#menu-item-1929:hover {
  z-index: 999999;
}

 */

/* Footer */
.footer-top {
    margin-top: 134px;
}

.footer-main .container a, .footer-bottom .container a {
    color: var(--nv-primary-accent) !important
}

@media (max-width: 768px) {
    .footer--row .row {
        display: block !important; /* Annule la grille qui cause le décalage */
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 15px;
        padding-right: 15px;
    }
    
    /* On s'assure que les colonnes à l'intérieur prennent toute la largeur */
    .footer--row .row > div {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* Centrer les images dans la création et la modification d'une fiche (artiste, association, etc..) */

.acf-image-uploader {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

/* Définir la hauteur du groupe de champ "Coordonnées GPS" de la fiche fournisseur pour scroller dans le bloc plutôt que d'afficher les 150 champs sur toute leur hauteur */
.acf-field.acf-field-group.acf-field-684d41167a9e6 {
    max-height: 400px; /* Ou la hauteur que vous souhaitez */
    overflow-y: scroll; /* Permet le défilement vertical */
    padding-right: 15px; /* Pour éviter que le contenu ne soit sous la barre de défilement (ajustez si besoin) */
}

/* Définir la hauteur de la liste des zones géographiques dans les fiches pour scroller dans le bloc plutôt que d'afficher les 552 zones géographiques sur toute leur hauteur */
.acf-related-terms-field[data-taxonomy="geographical-areas-equipment-sal"] {
    height: 544px;
    overflow-y: scroll;
    scrollbar-color: green #efe7f7;
}

.acf-related-terms-field[data-taxonomy="geographical-areas-events"] {
    height: 544px;
    overflow-y: scroll;
    scrollbar-color: green #efe7f7;
}

.acf-related-terms-field[data-taxonomy="geographical-areas-announcements"] {
    height: 544px;
    overflow-y: scroll;
    scrollbar-color: green #efe7f7;
}

.acf-related-terms-field[data-taxonomy="geographical-areas-artists"] {
    height: 544px;
    overflow-y: scroll;
    scrollbar-color: green #efe7f7;
}

.acf-related-terms-field[data-taxonomy="geographical-areas-associations"] {
    height: 544px;
    overflow-y: scroll;
    scrollbar-color: green #efe7f7;
}

.acf-related-terms-field[data-taxonomy="geographical-areas-cultural-cent"] {
    height: 544px;
    overflow-y: scroll;
    scrollbar-color: green #efe7f7;
}

.acf-related-terms-field[data-taxonomy="geographical-areas-collectives"] {
    height: 544px;
    overflow-y: scroll;
    scrollbar-color: green #efe7f7;
}


.acf-related-terms-field[data-taxonomy="geographical-areas-art-diffusers"] {
    height: 544px;
    overflow-y: scroll;
    scrollbar-color: green #efe7f7;
}

.acf-related-terms-field[data-taxonomy="geographical-areas-art-of-school"] {
    height: 544px;
    overflow-y: scroll;
    scrollbar-color: green #efe7f7;
}

.acf-related-terms-field[data-taxonomy="geographical-areas-art-foundatio"] {
    height: 544px;
    overflow-y: scroll;
    scrollbar-color: green #efe7f7;
}

.acf-related-terms-field[data-taxonomy="geographical-areas-suppliers"] {
    height: 544px;
    overflow-y: scroll;
    scrollbar-color: green #efe7f7;
}

.acf-related-terms-field[data-taxonomy="geographical-areas-galleries"] {
    height: 544px;
    overflow-y: scroll;
    scrollbar-color: green #efe7f7;
}

.acf-related-terms-field[data-taxonomy="geographical-areas-auction-house"] {
    height: 544px;
    overflow-y: scroll;
    scrollbar-color: green #efe7f7;
}

.acf-related-terms-field[data-taxonomy="geographical-areas-art-markets"] {
    height: 544px;
    overflow-y: scroll;
    scrollbar-color: green #efe7f7;
}

.acf-related-terms-field[data-taxonomy="geographical-areas-museums"] {
    height: 544px;
    overflow-y: scroll;
    scrollbar-color: green #efe7f7;
}

/* Styles pour la carte */

.fa.fa-home {
    font-family: 'Font Awesome 7 Free';
    font-weight: 900;
    content: "\f015";
    font-size: 25px;
    line-height: 28px;
    opacity: 0.7;
    color: sienna;
}

.leaflet-touch .leaflet-control-layers, .leaflet-touch .leaflet-bar {
    background-color: #eeffc8;
}

.leaflet-touch .leaflet-control-layers, .leaflet-touch .leaflet-bar {
    border: 2px solid rgb(0 0 0 / .2);
    background-clip: padding-box;
}

.leaflet-touch .leaflet-bar a {
    background-color: #eeffc8 !important;
}

.map-instruction-overlay {
    display: none;
}

@media (max-width: 1024px) {
    .map-instruction-overlay {
        display: block;
        position: absolute;
        z-index: 99999;
        text-align: center;
        font-size: 25px;
        font-weight: bold;
        background-color: #3b8c866e;
        top: 313px;
    }
}

/* Styles pour les pop-up des grilles (Filter&Grids) de publication */

/* Styles pour le pop-up général */
.fiche-popup {
    border: 1px solid #eee;
    padding: 25px; /* Augmenter le padding pour plus d'espace */
    border-radius: 8px; /* Coins arrondis */
    box-shadow: 0 4px 15px rgba(0,0,0,0.1); /* Une ombre légère */
    max-width: 80%; /* Limiter la largeur du pop-up */
    margin: 20px auto; /* Centrer le pop-up et ajouter de l'espace */
    font-family: 'Arial', sans-serif; /* Une police plus moderne */
    color: #333;
    line-height: 1.6;
    background-attachment: fixed;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-image: url(https://echo-system.art/wp-content/uploads/2026/01/Fond_entete-scaled.jpg.webp);
    background-color: rgb(199 199 36 / 25%);
    background-blend-mode: overlay;
    background-attachment: fixed;
}

.ymc-popup-overlay {
    background: #00805694 !important; /* Votre couleur de fond actuelle */
    display: block;
    opacity: 1; /* L'opacité est importante pour que le flou soit visible */
    /* --- Effet de flou --- */
    backdrop-filter: blur(5px); /* Applique un flou de 5 pixels */
    -webkit-backdrop-filter: blur(5px); /* Préfixe pour la compatibilité Safari */
}

.ymc-popup-overlay .ymc-popup-wrp {
    background: #0a474a42 !important;
}

/* Gestion des titres des images dans les galeries */

.fiche-popup.fiche-artiste .fiche-section.fiche-gallery {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 55px;
}

.fiche-popup .gallery-item .gallery-item-caption .media-title {
    font-weight: lighter;
    font-size: 16px;
}

/* Désactivation des liens dans les pop-ups */
popup-entry a {
    pointer-events: none;
}

/* Titre principal de la fiche */
.fiche-popup .fiche-title {
    font-size: 2.2em;
    color: #2c3e50;
    margin-bottom: 20px;
    text-align: center;
    border-bottom: 2px solid #e0e0e0;
    padding-bottom: 15px;
}

/* Vignette/Image principale */
.fiche-popup .fiche-thumbnail {
    text-align: center;
    margin-bottom: 25px;
}

.fiche-popup .fiche-thumbnail img {
    max-width: 100%;
    height: auto;
    max-height: 369px;
    width: auto;
    border-radius: 5px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* Contenu principal (description) */
.fiche-popup .fiche-content {
    margin-bottom: 30px;
    font-size: 1.1em;
    color: #555;
}

/* Conteneur des détails ACF */
.fiche-popup .fiche-details {
    padding-top: 20px;
    border-top: 1px dashed #e0e0e0; /* Une ligne de séparation élégante */
}

/* Chaque section de champ ACF */
.fiche-popup .fiche-section {
    margin-bottom: 20px; /* Espacement entre chaque section */
    padding-bottom: 15px;
    border-bottom: 1px dotted #eee; /* Ligne pointillée fine */
}
.fiche-popup .fiche-section:last-child {
    border-bottom: none; /* Pas de ligne pour la dernière section */
    margin-bottom: 0;
    padding-bottom: 0;
}

.fiche-section.fiche-adresse-e-mail-artistes {
    text-align: center;
}

.fiche-section.fiche-adresse-e-mail-associations {
    text-align: center;
}

.fiche-section.fiche-adresse-e-mail-institutions {
    text-align: center;
}

.fiche-section.fiche-adresse-e-mail-marches-d-art {
    text-align: center;
}

.fiche-section.fiche-adresse-e-mail-fondations {
    text-align: center;
}

.fiche-section.fiche-adresse-e-mail-diffuseurs {
    text-align: center;
}

.fiche-section.fiche-adresse-e-mail-de-contact {
    text-align: center;
}

.fiche-section.fiche-adresse-e-mail-maisons-de-ventes-aux-encheres {
    text-align: center;
}

.fiche-section.fiche-adresse-e-mail-collectifs {
    text-align: center;
}

.fiche-section.fiche-adresse-e-mail-centres-culturels {
    text-align: center;
}

.fiche-section.fiche-adresse-e-mail-equipment-sales {
    text-align: center;
}

.fiche-section.fiche-adresse-e-mail-evenements {
    text-align: center;
}

.fiche-section.fiche-adresse-e-mail-galeries {
    text-align: center;
}

.fiche-section.fiche-adresse-e-mail-musees {
    text-align: center;
}

.fiche-section.fiche-adresse-e-mail-fournisseurs {
    text-align: center;
}

.fiche-section.fiche-modalites-de-candidature .field-value {
    max-width: 701px;
    margin-left: auto;
    margin-right: auto;
    text-align: initial;
}

.fiche-section.fiche-presentation-de-l-annonceur .field-value {
    max-width: 701px;
    margin-left: auto;
    margin-right: auto;
    text-align: initial;
}

/* Titre des sections de champs (ex: "Techniques :", "Galerie :") */
.fiche-popup .fiche-section .section-title {
    font-size: 1.25em;
    color: #34495e;
    margin-top: 80px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 38px;
}

.fiche-popup .pays_zone_lieu {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 15px;
    max-width: 905px;
    margin-left: auto;
    margin-right: auto;
}

.fiche-popup .pays_zone_lieu .fiche-section h3 {
    height: 30px;
}

.fiche-popup .pays_zone_lieu div {
    margin-left: auto;
    margin-right: auto;
}

.fiche-popup.fiche-events {
    text-align: center;
}

/* Alignement du champ "Organisé par" */
.fiche-popup .fiche-organise-par-announcement .related-posts-list {
    text-align: center;
}

.fiche-popup .fiche-organise-par-equipment-sales .related-posts-list {
    text-align: center;
}

/* Mise en gras et alignement vertical des icônes de Google Fonts */
.material-symbols-outlined {
    font-weight: bold !important;
    vertical-align: middle;
}

/* Liste des termes de taxonomie (Techniques, Styles d'art, Pays, Zones géographiques) */
.fiche-popup .terms-list {
    display: flex; /* Afficher les termes en ligne */
    flex-wrap: wrap; /* Permettre le passage à la ligne */
    gap: 8px; /* Espacement entre les termes */
    justify-content: center;
}

.fiche-popup .terms-list .term-item {
    background-color: #009ca4 !important; /* Couleur de fond des "tags" */
    color: white;
    padding: 6px 12px;
    border-radius: 20px;
    text-decoration: none;
    font-size: 0.9em;
    transition: background-color 0.3s ease;
}

.fiche-popup .terms-list .term-item:hover {
    background-color: #006b6b !important;
}

/* Galerie d'images dans les pop-up */

/* Chaque ligne de galerie (qui contient 3 images) */
.fiche-popup .gallery-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Force 3 colonnes égales */
    gap: 15px; /* Espacement entre les images sur la même ligne */
    margin-top: 15px; /* Espacement entre les lignes de galerie */
    /* align-items: start; // Alignement en haut si les images n'ont pas la même hauteur  */
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}

/* Les éléments individuels de la galerie (chaque image) */
.fiche-popup .gallery-item {
    /* La largeur est gérée par grid-template-columns */
    position: relative; /* Pour positionner l'icône de zoom si vous en ajoutez une */
    overflow: hidden; /* Pour s'assurer que l'image ne dépasse pas */
    border-radius: 4px; /* Reprend le border-radius de l'image si vous l'aviez */
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.55); /* Reprend le shadow de l'image */
}

.fiche-popup .gallery-item img {
    width: 100%; /* L'image prend 100% de la largeur de son conteneur .gallery-item */
    height: auto; /* La hauteur s'ajuste proportionnellement */
    display: block;
    cursor: zoom-in;
    object-fit: none;
    aspect-ratio: 1 / 1; /* Force un ratio carré pour toutes les images de la grille, très utile pour l'uniformité */
}

/* Style pour les emplacements d'image vides */
.fiche-popup .empty-gallery-item {
    display: none;
}

/* Ajustements pour les petits écrans (responsive) */
@media (max-width: 768px) {
    .ymc-popup-wrp {
        width: 100% !important;
    }
    .fiche-popup {
        max-width: 100% !important;
    }
    .fiche-popup .gallery-row {
        grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); /* S'adapte mieux sur mobile (2 ou 1 colonne) */
        gap: 10px;
        width: 100%;
    }
    .fiche-popup .gallery-item img {
        /* aspect-ratio: 1 / 1; À décommenter et ajuster si nécessaire */
    }
    .fiche-popup .empty-gallery-item {
        min-height: 100px;
    }

    .fiche-popup.fiche-artiste .fiche-section.fiche-gallery {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .fiche-popup .gallery-row {
        grid-template-columns: 1fr; /* Une seule colonne sur les très petits écrans */
        width: 100%;
    }
}

/* Champs simples (Dernières news, Diplômes, Email, etc.) */
.fiche-popup .field-value {
    font-size: 1em;
    color: #666;
    text-align: center;
}

/* Pour les liens */
.fiche-popup .field-value a {
    color: #007bff;
    text-decoration: underline;
}
.fiche-popup .field-value a:hover {
    color: #0056b3;
}

/* Styles pour les liens sociaux dans le pop-up */

.fiche-popup .social-links-list {
    margin-left: auto;
    margin-right: auto;
}

.fiche-popup .social-links-list p a {
    display: flex; /* Permet d'aligner l'icône et le texte */
    align-items: center; /* Centre verticalement l'icône et le texte */
    text-decoration: none; /* Supprime le soulignement par défaut des liens */
    color: #333; /* Couleur par défaut du texte et de l'icône (ajustez si besoin) */
    transition: color 0.3s ease; /* Ajoute une transition douce pour le changement de couleur */
    overflow-wrap: break-word;
    word-break: break-all;
    max-width: 100%; /* S'assurer que le lien ne dépasse pas la largeur du parent */
}

/* Espacement entre l'icône et le texte du lien et taille et couleur d'icône' */
.fiche-popup .social-links-list p a i {
    margin-right: 11px; /* Ajustez cette valeur pour plus ou moins d'espacement */
    font-size: 25px;
    color: #126f84;
}

.fa-share-alt::before, .fa-share-nodes::before {
    margin-right: 25px;
    font-size: 25px;
}

.fiche-popup i {
    margin-right: 11px;
    font-size: 25px;
}

/* Effet de survol pour l'icône et le lien */
.fiche-popup .social-links-list p a:hover {
    color: #007bff; /* Couleur au survol (exemple : bleu vif, ajustez à votre charte graphique) */
}

/* Valeurs des checkboxes (contact) */
.fiche-popup .field-value-list .checkbox-value {
    display: inline-block;
    background-color: #e9ecef;
    padding: 5px 10px;
    border-radius: 5px;
    margin-right: 8px;
    margin-bottom: 8px;
    font-size: 0.9em;
    color: #495057;
}

.fiche-jaccepte-detre-contacte-par-les-acteurs-de-l-art div {
    text-align: center;
}

.fiche-jaccepte-detre-contacte-par-les-fournisseurs-dart div {
    text-align: center;
}

.fiche-popup .open_fiche {
    text-align: center;
    display: inherit;
    margin: auto;
    text-align: center;
    width: auto;
    background-color: #fbfbf154;
}

.fiche-popup .fiche-author-info {
    text-align: center;
    background-color: #fbfbf154;
}

.fiche-popup .fiche-author-info a, .fiche-popup .open_fiche a {
    color: #336c3f;
}

/* Styles pour les templates des grilles (Filter&Grids) de publication */

/* Personnalisation de la modale du bouton d'information à droite du bouton "Rechercher" */
.data-target-ymc1261-1 .post-custom-layout-1261-1 article.ymc-post-custom-layout article.ymc-post-layout1.post-item div.event-meta {
    margin-bottom: 0em;
}
.data-target-ymc1261-1 .post-custom-layout-1261-1 article.ymc-post-custom-layout article.ymc-post-layout1.post-item div.event-meta p {
    margin-bottom: 0em;
}
.data-target-ymc1261-1 .post-custom-layout-1261-1 article.ymc-post-custom-layout article.ymc-post-layout1.post-item div.category-list {
    margin-top: 0.5em;
}

.data-target-ymc1261-1 .post-custom-layout-1261-1 article.ymc-post-custom-layout article.ymc-post-layout1.post-item figure img {
    width: auto;
    max-height: 138px;
}

.data-target-ymc1268-1 .post-custom-layout-1268-1 article.ymc-post-custom-layout article.ymc-post-layout1.post-item figure img {
    width: auto;
    max-height: 138px;
}

.data-target-ymc1266-1 .post-custom-layout-1266-1 article.ymc-post-custom-layout article.ymc-post-layout1.post-item figure img {
    width: auto;
    max-height: 138px;
}

.data-target-ymc1281-1 .post-custom-layout-1281-1 article.ymc-post-custom-layout article.ymc-post-layout1.post-item figure img {
    width: auto;
    max-height: 138px;
}

.data-target-ymc1255-1 .post-custom-layout-1255-1 article.ymc-post-custom-layout article.ymc-post-layout1.post-item figure img {
    width: auto;
    max-height: 138px;
}

.data-target-ymc1273-1 .post-custom-layout-1273-1 article.ymc-post-custom-layout article.ymc-post-layout1.post-item figure img {
    width: auto;
    max-height: 138px;
}

.data-target-ymc1270-1 .post-custom-layout-1270-1 article.ymc-post-custom-layout article.ymc-post-layout1.post-item figure img {
    width: auto;
    max-height: 138px;
}

.data-target-ymc1285-1 .post-custom-layout-1285-1 article.ymc-post-custom-layout article.ymc-post-layout1.post-item figure img {
    width: auto;
    max-height: 138px;
}

.data-target-ymc1287-1 .post-custom-layout-1287-1 article.ymc-post-custom-layout article.ymc-post-layout1.post-item figure img {
    width: auto;
    max-height: 138px;
}

.data-target-ymc1277-1 .post-custom-layout-1277-1 article.ymc-post-custom-layout article.ymc-post-layout1.post-item figure img {
    width: auto;
    max-height: 138px;
}

.data-target-ymc1283-1 .post-custom-layout-1283-1 article.ymc-post-custom-layout article.ymc-post-layout1.post-item figure img {
    width: auto;
    max-height: 138px;
}

.data-target-ymc1275-1 .post-custom-layout-1275-1 article.ymc-post-custom-layout article.ymc-post-layout1.post-item figure img {
    width: auto;
    max-height: 138px;
}

.data-target-ymc1279-1 .post-custom-layout-1279-1 article.ymc-post-custom-layout article.ymc-post-layout1.post-item figure img {
    width: auto;
    max-height: 138px;
}

.data-target-ymc1258-1 .post-custom-layout-1258-1 article.ymc-post-custom-layout article.ymc-post-layout1.post-item figure img {
    width: auto;
    max-height: 138px;
}

.data-target-ymc1289-1 .post-custom-layout-1289-1 article.ymc-post-custom-layout article.ymc-post-layout1.post-item figure img {
    width: auto;
    max-height: 138px;
}

.sort-container .menu-active {
    box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
    background-color: #f5deb3 !important;
    border-radius: 5px;
}

.modale_recherche {
    list-style: initial;
}

.ymc-smart-filter-container .container-posts {
    overflow: scroll;
    max-height: 900px;
    scrollbar-color: #41918c white;
}

@media (max-width: 768px) {
    .container-posts .container-post-custom-layout {
        overflow: scroll;
        max-height: 100px !important;
    }

    .ymc-smart-filter-container .container-posts {
        border: 1px solid #2e8b57;
        scrollbar-color: #41918c white;
    }
}

.ymc-smart-filter-container .container-posts .post-item .post-item {
    background-color: #553c0c57;
    border-radius: 6px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.7);
    background-attachment: fixed;
    background-size: auto;
    background-position: center center;
    background-repeat: repeat;
    background-image: url(https://echo-system.art/wp-content/uploads/2026/01/Texture-fond-de-site.webp);
    background-blend-mode: overlay;
    background-attachment: fixed;
}

/* Pour centrer le titre */
.ymc-smart-filter-container .container-posts .post-item .post-item .title {
    text-align: center;
}

/* Pour le titre plus grand */
.ymc-smart-filter-container .container-posts .post-item .post-item .title h2 a {
    font-size: 22px !important;
    margin-bottom: 0.5em !important;
    color: #000 !important;
    text-decoration: none !important;
    font-weight: 600;
}

.ymc-smart-filter-container .container-posts .post-item .post-item figure a {
    text-align: center;
}

.ymc-smart-filter-container .container-posts .post-item .post-item figure img {
    box-shadow: 0 4px 20px rgb(0, 0, 0);
    border-radius: 9px;
}

/* Pour les taxonomies */
.ymc-smart-filter-container .container-posts .post-item .post-item .category-list .taxonomy-item {
    margin-bottom: 0.5em; /* Espace entre les lignes de taxonomie */
}

.ymc-smart-filter-container .container-posts .post-item .post-item .category-list hr {
    border-top: 1px solid #eee;
    margin: 0.5em 0; /* Espace autour de la ligne de séparation */
}

/* Pour le bouton "Voir la fiche" */
.ymc-smart-filter-container .container-posts .post-item .post-item .read-more {
    text-align: center;
    margin-top: 1em; /* Espace au-dessus du bouton */
}

.ymc-smart-filter-container .container-posts .post-item .post-item .read-more .btn-read-more {
    background-color: black;
    color: white;
    padding: 0.8em 1.5em;
    text-decoration: none;
    border-radius: 5px;
    display: inline-block; /* Pour que padding et margin fonctionnent */
}

/* Fond pour les dates de candidatures pour les annonces */
.ymc-smart-filter-container .container-posts .post-item .post-item .candidature-dates {
    background-color: beige;
}

/* Fond pour les organisateurs et les dates pour les évènements */
.ymc-smart-filter-container .container-posts .post-item .post-item .event-meta {
    background-color: beige;
}

/* Mise en gras des termes parents pour les pages d'ajout ou de modification de fiches */

.acf-field-684eb2432f3a0 .acf-related-terms-field .related-term {
    /* Mettre en gras les termes qui n'ont pas de parent */
    font-weight: bold;
    
    /* Ajouter un espace sous le terme parent */
    margin-bottom: 1.5rem;
    
    background-color: beige;
}

/* Cibler les termes enfants (ceux qui sont dans un <ul> imbriqué) et retirer l'effet de gras */
.acf-field-684eb2432f3a0 .acf-related-terms-field .related-term ul.children .related-term {
    font-weight: normal;
    margin-bottom: 0;
}

/* Styles pour les filtres des grilles (Filter&Grids) de publication */

#search-filters-block {
    background-repeat: repeat !important;
    background-image: url(https://echo-system.art/wp-content/uploads/2026/01/Texture-fond-de-site.webp) !important;
    background-blend-mode: overlay;
    background-attachment: fixed !important;
    border: 1px solid #006b6b !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.7) !important;
    background-color: #fbfbf157 !important;
    background-size: auto !important;
    background-position: center center !important;
}


.ymc-smart-filter-container .group-filters {
    box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
    background-color: #f5deb3 !important;
    color: #336c3f;
}

.ymc-smart-filter-container .group-filters .filter-item button {
    background-color: #009ca4 !important;
    color: white !important;
}

.ymc-smart-filter-container .group-filters .filter-item button:hover {
    background-color: #009ca4 !important;
    color: white !important;
    opacity: 1 !important;
}

.ymc-smart-filter-container .filter-entry .filter-item button.active {
    background-color: #006b6b !important;
    color: white !important;
}

.ymc-smart-filter-container .filter-entry .filter-item button {
    background-color: #009ca4 !important;
    color: white !important;
}

.ymc-smart-filter-container .filter-entry .filter-item button:hover {
    background-color: #006b6b !important;
    color: white !important;
    opacity: 1 !important;
}

.ymc-smart-filter-container .filter-entry .filter-item button.active:hover {
    background-color: #009ca4 !important;
    color: white !important;
}

.ymc-smart-filter-container .search-layout .search-form__submit {
    background: #f5deb3 !important;
    color: #1e1d1dbd !important;
    opacity: 0.85;
    border-radius: 5px;
}

.ymc-smart-filter-container .search-layout .search-form__submit:hover {
    opacity: 1;
}

.ymc-smart-filter-container .filter-entry .group-filters .name-tax::after {
    border: solid #006b6b !important;
    border-width: 0 3px 3px 0 !important;
}

.ymc-smart-filter-container .filter-layout4 .filter-entry .filter-item .filter-link.active {
    background-color: #49ad52 !important;
    color: white !important;
}

/* Styles pour le conteneur du filtre personnalisé par dates et par organisateurs pour les évènements */

/* Conteneur global du filtre */
.extra-date-filters {
    display: flex;
    flex-direction: column;
    gap: 25px;
    background: linear-gradient(160deg, #fff8f0, #fff2e0);
    padding: 30px 40px;
    border-radius: 15px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.12);
    max-width: 950px;
    margin: 25px auto;
    font-family: 'Helvetica Neue', Arial, sans-serif;
    color: #333;
    transition: all 0.3s ease;
}

/* Titres de sections */
.extra-date-filters h3.filter-block-title {
    font-size: 1.4rem;
    margin-bottom: 10px;
    color: #e67e22;
    font-weight: 600;
    text-align: center;
    text-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

/* Groupe label + input/select */
.extra-date-filters .filter-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px;
}

/* Labels */
.extra-date-filters label {
    font-weight: 500;
    min-width: 180px;
    color: #444;
}

/* Champs date */
.extra-date-filters input[type="date"] {
    border: 1px solid #ccc;
    border-radius: 12px;
    padding: 9px 14px;
    font-size: 15px;
    color: #555;
    flex-grow: 1;
    min-width: 150px;
    cursor: pointer;
    background: #fffaf0;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    transition: all 0.25s ease;
}

.extra-date-filters input[type="date"]:focus {
    border-color: #f39c12;
    box-shadow: 0 0 8px rgba(243,156,18,0.5);
    outline: none;
}

/* Champs select avec dégradé */
.extra-date-filters select {
    border: 1px solid #ccc;
    border-radius: 12px;
    padding: 9px 14px;
    font-size: 15px;
    color: #333;
    flex-grow: 1;
    min-width: 150px;
    cursor: pointer;
    background: linear-gradient(145deg, #fffaf0, #ffe6cc);
    transition: all 0.25s ease, transform 0.15s ease;
}

.extra-date-filters select:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.1);
}

.extra-date-filters select:focus {
    border-color: #f39c12;
    box-shadow: 0 0 8px rgba(243,156,18,0.5);
    outline: none;
}

/* Bouton Filtrer */
.extra-date-filters button#apply-date-filters {
    align-self: flex-start;
    background: linear-gradient(135deg, #f39c12, #e67e22);
    color: #fff;
    font-size: 16px;
    font-weight: bold;
    padding: 13px 28px;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.25s ease;
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}

.extra-date-filters button#apply-date-filters:hover {
    background: linear-gradient(135deg, #e67e22, #d35400);
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0,0,0,0.15);
}

/* Responsive pour petits écrans */
@media (max-width: 768px) {
    .extra-date-filters .filter-group {
        flex-direction: column;
        align-items: flex-start;
    }
    .extra-date-filters input[type="date"],
    .extra-date-filters select {
        width: 100%;
    }
}



/* Gestion des informations des fiches/pages/archives uniques */

.fiche-announcement-page {
    text-align: center;
}

.fiche-announcement-page h3 {
    margin-top: 50px;
}

.fiche-association-page {
    text-align: center;
}

.fiche-association-page h3 {
    margin-top: 50px;
}

.fiche-art-diffuser-page {
    text-align: center;
}

.fiche-art-diffuser-page h3 {
    margin-top: 50px;
}

.fiche-art-foundation-page {
    text-align: center;
}

.fiche-art-foundation-page h3 {
    margin-top: 50px;
}

.fiche-artist-page {
    text-align: center;
}
.fiche-artist-page h3 {
    margin-top: 50px;
}

.fiche-supplier-page {
    text-align: center;
}

.fiche-supplier-page h3 {
    margin-top: 50px;
}

.fiche-museum-page {
    text-align: center;
}

.fiche-museum-page h3 {
    margin-top: 50px;
}

.fiche-gallerie-page {
    text-align: center;
}

.fiche-gallerie-page h3 {
    margin-top: 50px;
}

.fiche-event-page {
    text-align: center;
}

.fiche-event-page h3 {
    margin-top: 50px;
}

.fiche-equipment-sale-page {
    text-align: center;
}

.fiche-equipment-sale-page h3 {
    margin-top: 50px;
}

.fiche-cultural-center-page {
    text-align: center;
}

.fiche-cultural-center-page h3 {
    margin-top: 50px;
}

.fiche-collective-page {
    text-align: center;
}

.fiche-collective-page h3 {
    margin-top: 50px;
}

.fiche-auction-house-page {
    text-align: center;
}

.fiche-auction-house-page h3 {
    margin-top: 50px;
}

.fiche-art-of-school-page {
    text-align: center;
}

.fiche-art-of-school-page h3 {
    margin-top: 50px;
}

.fiche-art-market-page {
    text-align: center;
}

.fiche-art-market-page h3 {
    margin-top: 50px;
}

.fiche-content {
    max-width: 701px;
    margin-right: auto;
    margin-left: auto;
    text-align: initial;
    margin-top: 67px;
    margin-bottom: 67px;
}

.fiche-content .is-content-justification-center.is-layout-flex {
    justify-content: center;
}

.technique_style {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 15px;
    max-width: 905px;
    margin-left: auto;
    margin-right: auto;
}

.fiche-dernieres-news-artistes p {
    max-width: 701px;
    margin-right: auto;
    margin-left: auto;
    text-align: left;
}

.fiche-dernieres-news-associations p {
    max-width: 701px;
    margin-right: auto;
    margin-left: auto;
    text-align: left;
}

.fiche-dernieres-news-institutions p {
    max-width: 701px;
    margin-right: auto;
    margin-left: auto;
    text-align: left;
}

.fiche-dernieres-news-marches-d-art p {
    max-width: 701px;
    margin-right: auto;
    margin-left: auto;
    text-align: left;
}

.fiche-dernieres-news-fondations p {
    max-width: 701px;
    margin-right: auto;
    margin-left: auto;
    text-align: left;
}

.fiche-dernieres-news-diffuseurs p {
    max-width: 701px;
    margin-right: auto;
    margin-left: auto;
    text-align: left;
}

.fiche-dernieres-news-maisons-de-ventes-aux-encheres p {
    max-width: 701px;
    margin-right: auto;
    margin-left: auto;
    text-align: left;
}

.fiche-dernieres-news-collectifs p {
    max-width: 701px;
    margin-right: auto;
    margin-left: auto;
    text-align: left;
}

.fiche-dernieres-news-centres-culturels p {
    max-width: 701px;
    margin-right: auto;
    margin-left: auto;
    text-align: left;
}

.fiche-dernieres-news-galeries p {
    max-width: 701px;
    margin-right: auto;
    margin-left: auto;
    text-align: left;
}

.fiche-dernieres-news-musees p {
    max-width: 701px;
    margin-right: auto;
    margin-left: auto;
    text-align: left;
}

.fiche-diplomes {
    max-width: 701px;
    margin-left: auto;
    margin-right: auto;
}

.fiche-diplomes p {
    text-align: left;
}

.social-links-list {
    max-width: 701px;
    margin-left: auto;
    margin-right: auto;
}

.social-links-list p {
    text-align: left;
}

.social-links-list i {
    font-size: 30px;
}

.pays_zone_lieu {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 15px;
    max-width: 905px;
    margin-left: auto;
    margin-right: auto;
}

.pays_zone_lieu .fiche-section h3 {
    height: 90px;
}

.partage-social {
    margin-top: 1rem;
    font-size: 0.95rem;
    border: 1px solid #020202;
    border-radius: 25px;
    box-shadow: 0 4px 20px rgba(12, 13, 12, 0.81);
    max-width: 701px;
    margin-left: auto;
    margin-right: auto;
}

.partage-social button {
    border-radius: 20px;
    box-shadow: 0 4px 20px rgba(12, 13, 13, 0.64);
    margin-bottom: 20px;
}

.partage-social a {
    text-decoration: none;
    color: #2f6f4e;
    margin: 0 0.3rem;
}

.partage-social a:hover {
    text-decoration: underline;
}

.fiche-section.fiche-artists-in-collective {
    text-align:center;
}

.fiche-section.fiche-artists-in-association {
    text-align:center;
}

.fiche-section.fiche-artists-in-galerie {
    text-align:center;
}

.fiche-section.fiche_association_collectif_dont_lartiste_fait_partie {
    text-align:center;
}

.fiche-author-info {
    margin-top: 48px;
    margin-bottom: 48px;
    font-size: 20px;
}

.wp-singular .fiche-thumbnail img {
    max-width: 100%;
    height: auto;
    max-height: 552px;
    width: auto;
    border-radius: 5px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.59);
}

.separator {
    content: "";
    border-top: 4px dotted;
    display: block;
    color: #eac626;
    width: 34%;
    margin-left: auto;
    margin-right: auto;
}

/* Galerie d'images des fiches/pages/archives uniques */

.wp-singular .fiche-section.fiche-gallery {
    width: 50%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 55px;
}

/* Chaque ligne de galerie (qui contient 3 images) */
.wp-singular .gallery-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Force 3 colonnes égales */
    gap: 15px; /* Espacement entre les images sur la même ligne */
    margin-top: 15px; /* Espacement entre les lignes de galerie */
    /* align-items: start; // Alignement en haut si les images n'ont pas la même hauteur */
}

/* Les éléments individuels de la galerie (chaque image) */
.wp-singular .gallery-item {
    /* La largeur est gérée par grid-template-columns */
    position: relative; /* Pour positionner l'icône de zoom si vous en ajoutez une */
    border: 1px solid #ddd;
    margin: 0 !important;
    overflow: hidden;
    border-radius: 12px;
    background: rgb(255 255 255);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    padding: 20px;
}

.wp-singular .gallery-item img {
    width: auto; /* L'image prend 100% de la largeur de son conteneur .gallery-item */
    height: auto; /* La hauteur s'ajuste proportionnellement */
    display: initial;
    cursor: zoom-in;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.81); /* Mettre l'ombre ici */
    border-radius: 0px; /* Appliquer le même border-radius à l'image */
    margin-top: 20px;
    max-height: 200px
    object-fit: cover;
    margin-left: auto;
    margin-right: auto;
}

.wp-singular .gallery-item-caption {
    padding: 10px;
    font-size: 0.85rem;
    color: #131636;
    font-style: italic;
    text-align: center;
    background: rgba(255, 255, 255, 0.8);
}

.wp-singular .gallery-item-caption .media-title {
    font-size: 22px;
}


/* Style pour les emplacements d'image vides */
.wp-singular .empty-gallery-item {
    display: none;
}

/* Ajustements pour les petits écrans (responsive) */
@media (max-width: 768px) {
    .wp-singular #content {
        margin-right: 20px;
        margin-left: 20px;
    }
    .wp-singular .gallery-row {
        grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); /* S'adapte mieux sur mobile (2 ou 1 colonne) */
        gap: 10px;
    }
    .wp-singular .gallery-item img {
        /* aspect-ratio: 1 / 1; À décommenter et ajuster si nécessaire */
    }
    .wp-singular .empty-gallery-item {
        min-height: 100px;
        box-shadow: 0 4px 20px rgb(0 0 0 / .81);
        border-radius: 43px;
        border: 1px solid #ddd;
    }
    .wp-singular .fiche-section.fiche-gallery {
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        margin-top: 55px;
    }
    .wp-singular .gallery-item {
        background: rgb(255 255 255 / 29%);
    }
}

@media (max-width: 480px) {
    .wp-singular .gallery-row {
        grid-template-columns: 1fr; /* Une seule colonne sur les très petits écrans */
    }
}

/* Masquer les informations non nécessaires sur les fiches des grilles de publication Filter&Grids en page d'accueil */

.home #ymc-smart-filter-container-1 .container-posts .category-list {
    display: none;
}

/* Réduction de la taille de l'image pour les fiches des grilles de Filter&Grids en page d'accueil */
.home #ymc-smart-filter-container-1 .container-posts img {
    max-width: 70px;
}

/* Masquer les informations non nécessaires sur les fiches des grilles de publication Filter&Grids des deux pages de carnet d'adresses */

.page-id-1488 #ymc-smart-filter-container-1 .category-list {
    display: none;
}

.page-id-1488 #ymc-smart-filter-container-1 img {
    display: none;
}

.page-id-55 #ymc-smart-filter-container-1 .category-list {
    display: none;
}

.page-id-55 #ymc-smart-filter-container-1 img {
    display: none;
}

/* Style pour les archives/pages uniques des taxonomies */

.taxonomy-posts-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 15px; /* Espacement entre les colonnes et les lignes */
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
    max-width: 1200px; /* Largeur maximale de la grille sur les grands écrans */
}

.taxonomy-posts-grid .post-item {
    flex: 0 0 calc(16.66% - 13px); /* 6 colonnes sur grand écran */
    max-width: calc(16.66% - 13px);
    box-sizing: border-box;
    text-align: center;
    background: #fff;
    border: 1px solid #eee;
    padding: 10px;
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.taxonomy-posts-grid .post-item figure.media {
    margin: 0 auto 10px;
    text-align: center;
    width: 100%;
    height: auto;
}

.taxonomy-posts-grid .post-item figure.media img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto; /* Centrage de l'image */
}

.taxonomy-posts-grid .post-item .title h2 {
    font-size: 1.2em;
    line-height: 1.3em;
    margin: 0;
    min-height: 2.6em; /* Pour uniformiser la hauteur des titres */
    display: flex;
    align-items: center;
    justify-content: center;
}

.taxonomy-posts-grid .post-item .title h2 a {
    color: #333;
    text-decoration: none;
}

.taxonomy-posts-grid .post-item .read-more {
    text-align: center;
    margin-top: auto; /* Pour pousser le bouton en bas */
    padding-top: 10px;
}

.taxonomy-posts-grid .post-item .btn-read-more {
    background-color: black;
    color: white;
    padding: 0.8em 1em;
    text-decoration: none;
    border-radius: 5px;
    display: inline-block;
    font-size: 0.9em;
}

/* --- Media Queries --- */

/* Pour les tablettes et petits desktops (ex: entre 768px et 1024px de large) */
@media (max-width: 1024px) {
    .taxonomy-posts-grid .post-item {
        flex: 0 0 calc(33.33% - 13px); /* 3 colonnes */
        max-width: calc(33.33% - 13px);
    }
}

/* Pour les tablettes en mode portrait et grands smartphones (ex: entre 481px et 767px de large) */
@media (max-width: 767px) {
    .taxonomy-posts-grid .post-item {
        flex: 0 0 calc(50% - 13px); /* 2 colonnes */
        max-width: calc(50% - 13px);
    }
}

/* Pour les petits smartphones (ex: jusqu'à 480px de large) */
@media (max-width: 480px) {
    .taxonomy-posts-grid .post-item {
        flex: 0 0 98%; /* 1 colonne, presque pleine largeur */
        max-width: 98%;
    }
}

/* Gestion du bloc de filtre en page d'accueil */

/* Tant que le bloc n'est pas généré, on affiche un message d'attente'*/

.map-loading-message {
    position: absolute;
    inset: 0;
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(2px);
    text-align: center;
    padding: 20px;
    font-size: 1em;
    color: #333;
}

.map-loading-message small {
  display: block;
  margin-top: 4px;
  font-size: 0.85em;
  color: #666;
}

/* Conteneur global */
.map-interface-wrapper {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* Layout horizontal */
.map-layout-container {
    display: flex;
    flex-direction: row;
    border: 1px solid #ddd;
    border-radius: 8px 8px 0 0;
    background: #fff;
    overflow: hidden;
}

/* Zone Carte */
.map-main-content {
    flex-grow: 1;
    background-color: #fbfbf1;
    position: relative;
}

/* Sidebar gauche */
.map-sidebar {
    width: 300px;
    min-width: 300px;
    background-color: #f8f9fa;
    border-right: 1px solid #ddd;
    padding: 20px;
}

.map-sidebar p {
    color: initial;
    text-align: center;
}

/* Style pour le conteneur des boutons de type de publication */
.post-type-selector {
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex-wrap: wrap; /* Permet aux éléments de passer à la ligne suivante si l'espace manque */
    max-width: 100%; /* S'assure que le conteneur ne dépasse pas la largeur parent */
}

/* Cache les inputs radio originaux */
.post-type-selector input[type="radio"] {
    display: none; /* Cache l'input radio visuellement */
}

/* Zone des filtres sous la carte */
.map-extra-filters-area {
    border: 1px solid #ddd;
    border-top: none;
    border-radius: 0 0 8px 8px;
    padding: 15px;
    text-align: center;
}

/* Style de base pour les labels (qui vont ressembler à des boutons) */
.post-type-selector .post-type-label-button {
    cursor: pointer;
    padding: 8px 15px; /* Remplissage pour l'aspect bouton */
    border: 1px solid #13163622; /* Bleu nuit très transparent */
    border-radius: 12px;
    background-color: #FBFBF1;
    color: #131636;
    font-size: 14px;
    white-space: nowrap; /* Empêche le texte de se casser sur plusieurs lignes */
    box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
    display: block;
    width: 100%;
    box-sizing: border-box;
    text-align: left;
    transition: all 0.3s ease;
}

/* Style au survol (hover) */
.post-type-selector .post-type-label-button:hover {
    background: linear-gradient(90deg, #37e2bc, #20b094);
    opacity: 0.85;
    border-color: #aaa;
    box-shadow: rgba(50, 50, 93, 0.11) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.23) 0px 18px 36px -18px inset;
    border-style: inset;
}

/* Style lorsque le bouton radio correspondant est 'checked' (sélectionné) */
.post-type-selector input[type="radio"]:checked + .post-type-label-button {
    background: linear-gradient(90deg, #37e2bc, #20b094);
    opacity: 0.85;
    box-shadow: rgba(50, 50, 93, 0.11) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.23) 0px 18px 36px -18px inset;
    border-style: inset;
    border-color: #0073aa;
}

/* Styles pour le bouton d'affichage/masquage des filtres */
#toggle-search-filters {
    background-color: #5AC6BE;
    color: #fff;
    border: none;
    padding: 10px 15px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    margin-bottom: 0; /* Évite un saut quand fermé */
    transition: background-color 0.3s ease;
    box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset, rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset, rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
}

#toggle-search-filters:hover {
    background-color: #3f8e88;
}

#toggle-search-filters.active:hover {
    background-color: #3f8e88;
}

/* Style du bloc de filtres (initialement masqué par défaut) */
#search-filters-block {
    display: none; /* Cache tout l'ensemble (Sidebar + Carte) initialement */
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
    margin-top: 15px;
}

/* Style pour afficher le bloc de filtres */
#search-filters-block.active {
    display: block !important;
}

/* Ajustements pour les paragraphes dans les filtres */
#search-filters-block p {
    margin-top: 0;
    margin-bottom: 15px;
    font-weight: bold;
}

/* Menu déroulant de tri */

span.name-sort {
    color: #131636;
    font-weight: bold;
}

/* Réduction du menu déroulant de tri */
#search-filters-block .sort-container {
    width: 200px;
}

/* Modification du fond du menu déroulant de tri */
.ymc-smart-filter-container .sort-container .dropdown-filter .menu-passive {
    background: #3B8C86;
}

.ymc-smart-filter-container .sort-container .dropdown-filter .menu-passive::before, .ymc-extra-filter .sort-container .dropdown-filter .menu-passive::before, .ymc-extra-search .sort-container .dropdown-filter .menu-passive::before, .ymc-extra-sort .sort-container .dropdown-filter .menu-passive::before {
    background: #3B8C86;
}

.ymc-smart-filter-container .sort-container .dropdown-filter .menu-passive__item .menu-link {
    font-weight: bold;
}

@media (max-width: 900px) {
    .map-layout-container {
        flex-direction: column;
    }

    #search-filters-block {
        width: 100%;
        height: auto;
        display: none !important; /* Le JS gérera l'affichage avec le bouton toggle */
    }
    #search-filters-block.active {
        flex-direction: column;
    }
    
    .map-sidebar {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid #ddd;
    }
}

/* Affichage du nombre de résultats */

#map-stats-bar {
    background: linear-gradient(90deg, rgba(55, 226, 188, 0.1), rgba(32, 176, 148, 0.1));
    border: 1px solid #1316361a;
    border-radius: 50px;
    padding: 10px 25px !important;
    margin: 10px auto;
    width: fit-content;
    color: #131636;
    font-weight: 500;
    font-size: 1rem;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03);
    text-align: center;
    font-style: italic;
}

/* Gestion du pop-up du marqueur sur la carte en page d'accueil */

/* Mise en page compacte pour les dates et l'organisateur */
.map-popup .event-meta {
    padding: 5px;
    border-radius: 4px;
    background-color: #dcfcf2;
    margin-bottom: 10px !important;
}

.map-popup-link .icon-left, .map-popup button .fas {
    margin-right: 2px;
}

/* Style pour compacter l'affichage des dates */
.map-popup .compact-dates p {
    margin: 0;
    font-size: 0.95em;
}

.map-popup .compact-dates {
   margin-top : 5px;
}

/* Mise en évidence des dates */
.map-popup .compact-dates span {
    font-weight: bold;
    color: #3b8c86;
}

.home .leaflet-popup-content-wrapper {
    background: #3b8c86;
    box-shadow: 0 0 20px rgba(59, 140, 134, 0.99);
}

.home .leaflet-container a {
    color: #0E6B3B !important;
}

.home .leaflet-container h3 {
    color: #eff8d9 !important;
}

.home .leaflet-popup-content {
    margin: 13px 24px 13px 20px;
    line-height: 1.3;
    font-size: 13px;
    font-size: 1.08333em;
    min-height: 1px;
    width: 182px;
}

.home .leaflet-popup-content a {
    display: flex;
    align-items: center;
    --linkdeco: none !important;
}

.home .leaflet-popup-close-button span {
    color: floralwhite;
}

.home .leaflet-popup-content a img {
    width: 50px;
    height: 50px;
    margin-right: 10px;
    object-fit: cover;
    max-width: 100%;
}

.home .leaflet-popup-content .leaflet-container a {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}

.home .leaflet-popup-content h3 {
    margin-bottom: 0px !important;
    margin-left: auto;
    margin-right: auto;
    text-shadow: 0 0 5px rgba(0,0,0,0.5);
    font-size: 18px;
}

.home .leaflet-popup-content button {
    background-color: #f1f9da;
    padding: 0.8em 1.5em;
    text-decoration: none;
    border-radius: 5px;
    font-size: 12px;
    margin-left: 29px;
    margin-right: 29px;
    margin-top: 5px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}

/* Les partenaires */

.ymc-smart-filter-container .container-posts .post-carousel-layout .swiper-pagination {
    bottom: -33px !important;
}

.ymc-smart-filter-container .container-posts .post-carousel-layout .swiper-scrollbar {
    bottom: -56px !important;
}

/* Gestion de la visionneuse */

#custom-lightbox-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8); /* Fond semi-transparent */
    display: none; /* Caché par défaut */
    justify-content: center;
    align-items: center;
    z-index: 9999999; /* Assure que la lightbox est au-dessus de tout */
    cursor: pointer; /* Indique que l'overlay est cliquable */
}

#custom-lightbox-content {
    position: relative;
    max-width: 100%;
    max-height: 100%;
    background-color: #ffffff21;
    padding: 20px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
    display: flex; /* Pour centrer l'image */
    justify-content: center;
    box-sizing: border-box;
    overflow: hidden; /* Empêche l'image de dépasser si par mégarde elle était trop grande */
}

#custom-lightbox-image {
    max-width: 100%;
    max-height: 100%;
    display: block; /* Supprime l'espace sous l'image */
    object-fit: contain; /* Assure que l'image est contenue sans être coupée */
    padding: 0;
    margin: 0;
}

#custom-lightbox-close {
    position: absolute;
    top: 10px;
    right: 10px;
    background: none;
    border: none;
    color: #fff; /* Couleur de l'icône de fermeture */
    font-size: 30px;
    cursor: pointer;
    z-index: 100000; /* Assure que le bouton est au-dessus de l'image */
    text-shadow: 0 0 5px rgba(0,0,0,0.5); /* Pour rendre l'icône plus visible sur des images claires */
}

/* Style de l'icône X */
#custom-lightbox-close.fas.fa-times::before {
    font-family: "Font Awesome 7 Free"; /*
    content: "\f00d"; /* Code Unicode pour l'icône X */
    font-weight: 900; /* Pour les icônes solid */
    color: #fff;
    text-shadow: 0 0 5px rgba(0,0,0,0.5);
}

/* Gestion des favoris */
              
.favoris-section {
    margin-bottom: 40px;
}

.favoris-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
}

.favoris-item {
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    text-align: center;
    padding-bottom: 10px;
}

.favoris-item img.favoris-thumbnail {
    width: 100%;
    height: auto;
    display: block;
}

.favoris-item .favoris-title {
    font-size: 1.2em;
    margin: 10px 0;
}

.favoris-item a {
    text-decoration: none;
    color: #333;
}

.no-favoris {
    text-align: center;
    font-size: 1.2em;
    padding: 50px 0;
    color: #666;
}

/* Le style du bouton de favori déjà en place */
.favoris-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1em;
    color: #666;
}

.favoris-btn.is-favori i.fas {
    color: #ffcc00; /* Couleur pour l'étoile pleine */
}

.favoris-notification {
    position: fixed;
    top: 20px;
    right: 20px;
    background-color: #4CAF50;
    color: white;
    padding: 15px 20px;
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    z-index: 10000000;
    display: none; /* Caché par défaut */
}

.favoris-notification.removed {
    background-color: #f44336;
}

.favoris-btn-grid {
    /* background-color: transparent; */
    border: none;
    /* color: white; ou une couleur contrastante */
    font-size: 1.5em;
    cursor: pointer;
}

.favoris-btn-grid.is-favori {
    color: #ffc107; /* La couleur jaune pour l'étoile pleine */
}

.favoris-btn-wrapper {
    text-align: center !important;
}

/* Gestion des alertes */

/* Style de la fenêtre modale des alertes */
.alert-modal-overlay {
    display: none; /* Invisible par défaut */
    position: fixed;
    z-index: 1000; /* Assurez-vous qu'elle soit au-dessus de tout */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.7);
    justify-content: center;
    align-items: center;
}

.alert-modal-content {
    background-color: #fff;
    padding: 25px;
    border-radius: 5px;
    width: 90%;
    max-width: 450px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    position: relative;
    text-align: center;
}

.alert-modal-close-btn {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 28px;
    font-weight: bold;
    color: #aaa;
    cursor: pointer;
}

.alert-modal-close-btn:hover,
.alert-modal-close-btn:focus {
    color: #333;
    text-decoration: none;
}

#alert-name-input {
    width: 100%;
    padding: 10px;
    margin: 15px 0;
    box-sizing: border-box;
    border: 1px solid #ccc;
    border-radius: 4px;
}

#alert-modal-save-btn {
    width: 100%;
}

/* Style des notifications */
.alert-notification {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: #fff;
    color: #333;
    padding: 15px 25px;
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    opacity: 0;
    transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
    transform: translateY(100%);
    z-index: 10000;
    max-width: 300px;
}

.alert-notification.show {
    opacity: 1;
    transform: translateY(0);
}

.alert-notification.success {
    border-left: 5px solid #28a745;
}

.alert-notification.error {
    border-left: 5px solid #dc3545;
}

/* Style des boutons dans la modale */
.alert-modal-buttons {
    display: flex;
    justify-content: space-between;
    margin-top: 15px;
}

.alert-modal-buttons button {
    flex: 1;
    margin: 0 5px;
}

.alert-modal-buttons button.button-secondary {
    background-color: #f0f0f0;
    color: #333;
}

#alert-modal-form-area, #alert-modal-confirm-area {
    display: none; /* Ces zones sont masquées par défaut */
}

/* Style du bouton de calendrier pour l'export des évènements et des annonces vers un agenda d'outil de messagerie */

.calendar-btn {
    display: inline-block;
    margin-top: 8px;
    padding: 8px 12px;
    background: #e3f1e6;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
    color: #2a5934;
}

.calendar-btn:hover {
    background: #ccebd8;
}

.event-calendar-links {
    text-align: center;
}

/* Style pour les partenaires */

/* Version mobile par défaut (pas besoin de media query) */
.partenaires-footer {
    display: flex;
    flex-direction: column;
    align-items: normal;
    gap: 1.5rem;
    padding: 2rem 0;
}

.partenaires-footer .partenaire-item {
    text-align: center;
    max-width: 800px; /* Conservez cette largeur pour la version mobile */
}

.partenaires-footer .partenaire-item h2 {
    text-align: center;
    max-width: 800px; /* Conservez cette largeur pour la version mobile */
    margin-bottom: 0px;

}

/* Version PC */
@media (min-width: 769px) {
    .partenaires-footer {
      flex-direction: row;
        flex-wrap: wrap; /* Permet le retour à la ligne sur plusieurs rangées */
        justify-content: space-around; /* Centre les partenaires horizontalement */
        align-items: first baseline; /* Aligne les partenaires en haut */
        gap: 2rem;
  }

    .partenaires-footer .partenaire-item {
        flex: 0 1 calc(25% - 1.5rem); /* Calcule la largeur pour 4 colonnes, tout en prenant en compte le gap */
        max-width: none;
        text-align: inherit;
  }
    .partenaires-footer .partenaire-item h2 {
        text-align: center;
        max-width: 800px;
        margin-bottom: 32px;
    }

    #cb-row--footer-desktop-top .footer-top-inner .row {
        grid-template-columns: auto;
    }

    /* Carte globale */
    .flip-card-partner {
        height: 260px;
    }
}

.partenaires-footer img {
    max-width: 100%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
}

.partenaires-footer p {
    margin-top: 0.5rem;
    font-size: 0.9rem;
    text-align: left;
}

#block-17 {
    text-align: center;
}

.partner-button {
    display: inline-block;
    margin-top: 1rem;
    padding: 0.5rem 1rem;
    background-color: #E67E22;
    color: #FBFBF1;
    border-radius: 0.4rem;
    text-decoration: none;
    font-weight: 600;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.partner-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.15);
}

/* Carte globale */
.flip-card-partner {
    width: 100%;
    max-width: 280px;
    height: 340px;
    perspective: 1000px;
    margin: 0 auto;
}

/* Inner */
.flip-card-inner-partner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.8s ease;
    transform-style: preserve-3d;
}

/* Flip au survol (desktop) */
.flip-card-partner:hover .flip-card-inner-partner {
    transform: rotateY(180deg);
}

/* Faces */
.flip-card-front-partner,
.flip-card-back-partner {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: 14px;
    box-shadow: 0 8px 14px 0 rgba(0,0,0,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    -webkit-backface-visibility: hidden;
}

/* FACE AVANT */
.flip-card-front-partner img {
    max-width: 100%;
    max-height: 85%;
    object-fit: contain;
}

/* FACE ARRIÈRE */
.flip-card-back-partner {
    transform: rotateY(180deg);
    flex-direction: column;
    justify-content: space-between;
    text-align: center;
    padding: 0.9rem;
    background: #f2f9da;
    overflow: hidden;
}

.flip-card-back-partner h2 {
    font-size: 1.05rem;
    font-weight: 600;
    color: #131636;
    margin: 0.2rem 0 0.4rem;
    line-height: 1.2;
}

.flip-card-back-partner p {
    font-size: 0.85rem;
    line-height: 1.4;
    color: #336c3f;
    margin: auto;
    flex-grow: 1;
    overflow: hidden;
}

/* Bouton partenaire */
.flip-card-back-partner .partner-button {
    display: inline-block;
    padding: 0.45rem 0.9rem;
    background-color: #E67E22;
    color: #FBFBF1;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.flip-card-back-partner .partner-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(0,0,0,0.15);
}

.flip-card-front-partner::after {
    content: '\21BA'; /* Flèche de rotation */
    position: absolute;
    bottom: -5px;
    right: 4px;
    font-size: 2.5em;
    font-weight: bold;
    color: #3b8c86;
    cursor: pointer;
    z-index: 10;
    transition: opacity 0.3s ease; /* Transition pour l'opacité */
}

.flip-card-front-partner::after {
    opacity: 0.8;
}

.flip-card-partner:hover .flip-card-front-partner::after {
    opacity: 0;
}

/* Style pour la grille tarifaire des partenaires */

.bg-gray-100 {
    background-color: #f3f4f68f;
    font-weight: bold;
}

.page-id-59 .bg-gray-100 {
    background-color: #f3f4f666;
    font-weight: bold;
    color: #000000c9;
}

tr .font-medium {
    background-color: #7aa1ee5c;
}

/* Page de charte de vision */

.separateur-vision {
    width: 50%;
    margin-right: auto;
    margin-left: auto;
}

/* Bouton et charte de vision */

#openCharteModal {
    box-shadow: 0 6px 20px rgb(0 0 0) !important;
}

 /* Styles de l'overlay (fond sombre) */
.charte-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.7); /* Voile sombre */
    /* display: none; EST DÉFINI EN LIGNE POUR PLUS DE FIABILITÉ */
    justify-content: center; /* Utilisé quand display: flex */
    align-items: center; /* Utilisé quand display: flex */
    z-index: 9999; /* TRÈS ÉLEVÉ pour être au-dessus de tout */
    opacity: 0; /* Caché par défaut pour la transition */
    visibility: hidden; /* Empêche les interactions quand caché */
    transition: opacity 0.3s ease, visibility 0.3s ease; /* Transition douce */
}

/* Styles du contenu de la modale */
.charte-modal-content {
    background-color: #EFF2D5;
    padding: 30px;
    border-radius: 10px;
    max-width: 90%; /* Largeur maximale sur grands écrans */
    width: 700px; /* Largeur préférée */
    max-height: 90vh; /* Hauteur maximale pour permettre le défilement */
    overflow-y: auto; /* Active le défilement si le contenu est trop long */
    position: relative;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    transform: translateY(20px); /* Effet d\'apparition */
    transition: transform 0.3s ease;
    z-index: 10000; /* Doit être au-dessus de son propre overlay */
}

.charte-modal-header {
    display: flex;
    align-items: center;
    gap: 16px;
    justify-content: center;
    margin-bottom: 1.5rem;
}

.charte-modal-header svg {
    flex-shrink: 0;
    color: currentColor;
}

.charte-modal-title {
    margin: 0;             /* supprime l’espace par défaut du h2 */
    line-height: 1.2;
}

/* Contenu du corps de la modale */
.charte-modal-body p, .charte-modal-body ul {
    font-size: 1em;
    line-height: 1.6;
    margin-bottom: 1em;
    color: #555;
}
.charte-modal-body ul {
    margin-left: 20px;
    list-style: disc;
}
.charte-modal-body strong {
    color: #333;
}

/* Bouton de fermeture */
.charte-modal-close {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 2em;
    font-weight: bold;
    color: #aaa;
    cursor: pointer;
    transition: color 0.2s ease;
}
.charte-modal-close:hover,
.charte-modal-close:focus {
    color: #333;
    text-decoration: none;
}

/* État actif de la modale (montré par JS) */
.charte-modal-overlay.is-active {
    opacity: 1;
    visibility: visible;
    display: flex; /* Passe à display: flex quand actif pour centrer le contenu */
}
.charte-modal-overlay.is-active .charte-modal-content {
    transform: translateY(0); /* Ramène à la position normale */
}

.charte-modal-content .wp-block-button {
    text-align: center;
    margin-top: 50px;
    margin-bottom: 20px;
}

/* Media Queries pour la responsivité */
@media (max-width: 768px) {
    .charte-modal-content {
        max-width: 95%; /* Plus de largeur sur petits écrans */
        padding: 20px;
    }
    .charte-modal-title {
        font-size: 1.5em;
    }
}

/* Personnalisation de la page "S'inscrire" */

.page-id-35 .um-stripe-product-desc {
    display: none;
}

.page-id-35 ul.wp-block-list {
    list-style: initial;
}

.um-stripe-product-desc {
    font-style: italic;
}

/* Styles pour l'accordéon */
.acc-kontainer {
    width: 100%;
    max-width: 800px;
    margin: 20px auto;
    background-color: #6a9c9b;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

/* Styles pour les corps de l'accordéon (contenu) */
.acc-kontainer .acc-body {
    width: calc(100% - 40px);
    margin: 0 auto;
    height: 0;
    color: rgba(0, 0, 0, 0); /* Cache le texte quand replié */
    background-color: rgba(255, 255, 255, 0.1);
    line-height: 1.6;
    padding: 0 20px;
    box-sizing: border-box;
    transition: height 0.5s ease-out, color 0.5s ease-out, padding 0.5s ease-out;
    overflow: hidden; /* Cache le débordement quand replié */
}

/* Styles pour les étiquettes (en-têtes de l'accordéon) */
.acc-kontainer label {
    cursor: pointer;
    background-color: rgba(255, 255, 255, 0.15);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    display: flex; /* Utilise flexbox pour l'alignement */
    align-items: center; /* Centre verticalement le contenu */
    justify-content: space-between; /* Pousse les éléments aux extrémités */
    padding: 15px 20px;
    width: 100%;
    color: #fff;
    font-weight: 600;
    box-sizing: border-box;
    z-index: 100;
    transition: background-color 0.3s ease;
}

.acc-kontainer label:hover {
    background-color: rgba(255, 255, 255, 0.25);
}

/* Cache les inputs radio */
.acc-kontainer input[type="radio"] {
    display: none;
}

/* Styles pour le conteneur du texte de la question */
.acc-kontainer label .label-content {
    flex-grow: 1; /* Permet au contenu de prendre l'espace disponible */
}

.acc-kontainer label h3 {
    margin-bottom: inherit;
    font-family: inherit;
    color: inherit;
    font-weight: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    font-size: inherit;
}

/* Styles pour les icônes de bascule (+ et X) */
.acc-kontainer label .toggle-icon-plus,
.acc-kontainer label .toggle-icon-times {
    font-family: 'FontAwesome';
    font-weight: bolder;
    font-size: 1em;
    margin-left: 15px; /* Espace entre le contenu de la question et l'icône de bascule */
    transition: transform 0.3s ease, opacity 0.3s ease;
}

/* Masque l'icône X par défaut */
.acc-kontainer label .toggle-icon-times {
    display: none;
    opacity: 0;
}

/* Masque l'icône plus et affiche l'icône X lorsque l'accordéon est ouvert (radio:checked) */
.acc-kontainer input[type="radio"]:checked + label .toggle-icon-plus {
    display: none;
    opacity: 0;
}

.acc-kontainer input[type="radio"]:checked + label .toggle-icon-times {
    display: inline-block;
    opacity: 1;
    transform: rotate(90deg); /* Légère rotation pour un effet plus fluide */
}

.acc-kontainer input[type="radio"]:checked + label {
    background-color: rgba(255, 255, 255, 0.25);
    border-bottom-color: rgba(255, 255, 255, 0.3);
}

/* Affichage du contenu quand l'input est coché (radio:checked) */
.acc-kontainer input[type="radio"]:checked ~ .acc-body {
    height: auto; /* Permet au contenu de s'adapter */
    color: #fff;
    font-size: 16px;
    padding: 20px; /* Padding plein quand ouvert */
    transition: height 0.5s ease-in, color 0.5s ease-in, padding 0.5s ease-in;
}

/* Styles spécifiques pour les listes dans l'accordéon */
.acc-kontainer .acc-body ul li {
    padding: 5px 0;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.2); /* Lignes séparatrices légères */
}

.acc-kontainer .acc-body ul li:last-child {
    border-bottom: none; /* Pas de bordure pour le dernier élément */
}

/* Style pour l'accordéon imbriqué */
.acc-kontainer .acc-body .acc-kontainer {
    margin: 20px 0;
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    box-shadow: none;
}

.acc-kontainer .acc-body .acc-kontainer label {
    background-color: rgba(255, 255, 255, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    font-weight: 500;
    padding: 12px 15px;
}

.acc-kontainer .acc-body .acc-kontainer label:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

.acc-kontainer .acc-body .acc-kontainer input[type="radio"]:checked + label {
    background-color: rgba(255, 255, 255, 0.2);
    border-bottom-color: rgba(255, 255, 255, 0.25);
}

.acc-kontainer .acc-body .acc-kontainer .acc-body {
    background-color: rgba(255, 255, 255, 0.05);
    width: calc(100% - 30px);
    padding: 0 15px;
}

.acc-kontainer .acc-body .acc-kontainer input[type="radio"]:checked ~ .acc-body {
    padding: 15px;
}

/* Personnalisation de la page FAQ */

.page-id-59 h2 {
    margin-bottom: 0px
}

.page-id-59 .acc-body a {
    color: #c1fddb;
}

.page-id-59 .acc-body a:hover {
    color: #f7d4a0;
}

/* Statistiques privées */
.chart-pair-container {
    display: flex;
    flex-wrap: wrap; /* Permet de passer à la ligne sur les petits écrans */
    gap: 40px;
    align-items: center; /* Aligne les graphiques verticalement */
    margin-bottom: 40px;
}

#artistStyleChart {
    height: 510px;
}

#membershipChart {
    max-width: 510px;
    height: 510px !important;
}

#announcementsByYearChart {
    height: 500px !important;
    width: auto !important;
}

.bloc-adhesion,
.bloc-annonce,
.bloc-vente,
.bloc-evenement,
.bloc-revenu,
.bloc-artiste {
    display: flex;
    align-items: center;
}

.private-stats-dashboard h4 {
    text-align: center;
    margin-top: 55px;
    margin-bottom: 55px;
    font-size: 35px;
    box-shadow: 1px 4px 4px 5px rgba(177, 47, 181, 0.4);
    border-radius: 11px;
    border: 2px double #a45be1d6 !important;
    padding: 20px;
}

#membershipByRoleChart, #membershipHistoryChart, #deletedMembersChart, #eventsByYearChart, #equipmentSalesByYearChart, #paymentsBarChart, #revenueBarChart, #alertsBarChart, #alertsUsersBarChart, #privateMessageMembersByYearChart, #privateMessagesByYearChart {
    height: auto !important;
    width: 579px !important;
}

#friendRequestsByYearChart, #partnersByYearChart {
    height: auto !important;
    width: 579px !important;
    margin-right: auto;
    margin-left: auto;
}

#equipmentSalesDonutChart {
    height: 459px !important;
    width: auto !important;
}

#eventChart {
  height: auto !important;
  width: 379px !important;
}

/* Gestion du bouton pour afficher et masquer les filtres et filtres supplémentaires sur mobile */

/* Masquer le bouton par défaut sur bureau, il n'est visible que sur mobile */
#toggle-grid-filters-button.show-on-mobile {
    display: none !important;  
}

/* Afficher le bouton uniquement sur les petits écrans (mobile) */
@media screen and (max-width: 768px) {
    #toggle-grid-filters-button.show-on-mobile {
        display: block !important; 
        padding: 10px 20px;
        width: 100%;
        text-align: center;
        background-color: #5AC6BE;
        color: #fff;
        border: none;
        padding: 10px 15px;
        border-radius: 5px;
        cursor: pointer;
        font-size: 16px;
        margin-bottom: 15px;
        transition: background-color 0.3s ease;
        box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset, rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset, rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
        width: 100%;
    }
    
    #ymc-extra-filter-1, #filter-layout4-1 {
        display: none; 
    }
}

@media screen and (min-width: 769px) { 
    #ymc-extra-filter-1, 
    #filter-layout4-1,
    #date-filters-events {
        display: block !important; 
    }
}

/* Gestion des widgets */

.cky-revisit-bottom-left {
    bottom: 145px !important;
}
.userway_buttons_wrapper  {
    left: 15px !important;
    bottom: 226px !important;
}

@media screen and (max-width: 769px) { 
    .cky-revisit-bottom-left {
        bottom: 107px !important;
    }
    .userway_buttons_wrapper  {
        left: 15px !important;
        bottom: 56px !important;
    }
}

/* Personnalisation de la page des membres */

.um-directory .um-members-wrapper .um-members.um-members-grid .um-member .um-member-photo a img {
    border: 2px solid #3b8c86 !important;
}

.um-directory .um-members-wrapper .um-members.um-members-grid .um-member {
    border-radius: 25px;
    background: #f1f9da !important;
}

.um-directory .um-members-wrapper .um-members.um-members-grid .um-member .um-member-card .um-member-tagline {
    color: #21575b !important;
}

.um-members-friend-stats span, .um-members-friend-stats {
    color: #21575b !important;
}

.um-directory .um-members-wrapper .um-members.um-members-grid .um-member .um-member-card .um-members-edit-btn {
    margin-bottom: 19px !important;
}

/* Personnalisation de la page Mon tableau de bord */

.mon-bouton-tableau-de-bord {
    /* Affichage du bouton */
    display: inline-block;
    padding: 10px 20px;
    margin-right: 15px; /* Pour séparer les deux boutons s'ils sont côte à côte */
    border-radius: 6px; /* Bords légèrement arrondis */
    font-weight: 600; /* Texte en gras */
    text-align: center;
    text-decoration: none !important; /* Retire le soulignement par défaut des liens */
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.1s ease; /* Animation fluide */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Légère ombre pour donner du relief */
}

/* ---------------------------------------------------- */
/* Style pour le bouton "Voir ma fiche" (Primaire ou accent) */
/* ---------------------------------------------------- */
.mon-bouton-tableau-de-bord.voir-fiche {
    background-color: #5d5dff; /* Couleur vive (bleu ou violet, à ajuster à votre charte) */
    color: #ffffff; /* Texte blanc */
}

.mon-bouton-tableau-de-bord.voir-fiche:hover {
    background-color: #4a4afe; /* Assombrissement au survol */
    transform: translateY(-1px); /* Effet 3D léger */
}

/* ---------------------------------------------------- */
/* Style pour le bouton "Gérer ma fiche" (Secondaire ou neutre) */
/* ---------------------------------------------------- */
.mon-bouton-tableau-de-bord.gerer-fiche {
    background-color: #5d5dff; /* Fond clair */
    color: #ffffff; /* Texte sombre */
}

.mon-bouton-tableau-de-bord.gerer-fiche:hover {
    background-color: #5d5dffad;
    transform: translateY(-1px);
    color: #09534a;
}

/* --- 1. Styles généraux des Cartes --- */

.dashboard-card {
    background-color: #ffffff; /* Fond blanc pur pour la carte */
    padding: 30px;
    margin-bottom: 30px; /* Espace entre les cartes */
    border-radius: 10px; /* Bords légèrement arrondis */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); /* Ombre douce et moderne */
    border: 1px solid #eeeeee; /* Bordure très légère pour délimiter */
}

.card-icon-fiche {
    font-size: 1.8em;
    color: #5d5dff;
    margin-right: 15px;
}

.card-icon-favoris {
    font-size: 1.8em;
    color: #ffcc32;
    margin-right: 15px;
}

.card-icon-evenement {
    font-size: 1.8em;
    color: #328cff;
    margin-right: 15px;
}

.card-icon-vente {
    font-size: 1.8em;
    color: #2e8b57;
    margin-right: 15px;
}

.card-icon-annonce {
    font-size: 1.8em;
    color: #81dbfc;
    margin-right: 15px;
}

.card-icon-communaute {
    font-size: 1.8em;
    color: #bd7f6f;
    margin-right: 15px;
}

.card-icon-compte {
    font-size: 1.8em;
    color: #7d4b84;
    margin-right: 15px;
}

.card-icon-good-deals {
    font-size: 1.8em;
    color: #6ca21b;
    margin-right: 15px;
}

/* Conteneur des Boutons (pour alignement) */

.card-actions {
    display: flex;
    gap: 15px; /* Espace entre les boutons */
    flex-wrap: wrap; /* Assure que les boutons passent à la ligne sur mobile */
    margin-top: 15px;
}

.card-actions .wp-block-button.is-style-primary {
    border-radius: 20px; /* Bords légèrement arrondis */
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.31);
    margin-right: 15px;
    font-weight: 600;
    text-align: center;
}

.card-actions .wp-block-button.is-style-primary:hover {
    opacity: 0.8;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);

}

.card-actions .wp-block-button.is-style-primary a,.card-actions a {
    border-radius: 10px;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.17);
    margin-right: 15px;
    font-weight: 600;
    text-align: center;
}

.card-actions .wp-block-button.is-style-primary a:hover {
    color: #09534a;
}

/* Modification des marges pour s'adapter au conteneur card-actions */

.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    margin-top: 40px;
}

.dashboard-card {
    background: rgba(255,255,255,0.9);
    border-radius: 24px;
    padding: 25px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.06);
    transition: transform .25s ease, box-shadow .25s ease;
}

.dashboard-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 55px rgba(0,0,0,0.08);
}

.dashboard-card-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 10px;
}

.dashboard-card h3 {
    font-size: 1.25rem;
    margin: 0;
    color: #2b2b2b;
}

.dashboard-card p {
    font-size: .95rem;
    color: #555;
    margin-bottom: 18px;
}

.dashboard-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

@media (max-width: 1024px) {
    .favoris-alertes {
        flex-wrap: wrap;
    }
}

/* Personnalisation de la page Bons plans */

/* Container global */
.good-deals-wrapper {
    max-width: 1100px;
    margin: 0 auto;
    padding: 2rem 1rem;
}

/* Header */
.good-deals-header {
    text-align: center;
    margin-bottom: 4rem;
}

.good-deals-quote {
    background: #f1f4c9;
    padding: 2rem;
    border-radius: 20px;
    border-left: 6px solid #3B8C86;
    margin: 2rem auto;
    max-width: 850px;
    font-style: italic;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

/* Argumentaire en colonnes */
.good-deals-benefits {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin-bottom: 4rem;
}

.benefit-item {
    text-align: center;
    padding: 1.5rem;
}

.benefit-icon {
    font-size: 2.5rem;
    display: block;
    margin-bottom: 1rem;
}

.benefit-item h3 {
    color: #3B8C86;
    margin-bottom: 0.5rem;
}

/* Séparateur élégant */
.echo-separator {
    border: 0;
    height: 1px;
    background-image: linear-gradient(to right, transparent, #3B8C86, transparent);
    margin: 4rem 0;
}

.page-id-4030 .section-title {
    text-align: center;
    color: #034732;
    margin-bottom: 2.5rem;
    font-size: 1.8rem;
}