/* Conteneur principal des filtres */
.acf-filters-container {
    width: 100%;
    margin: 20px 0;
}

/* === « Votre recherche : » — récapitulatif des critères actifs === */
.acf-active-search {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    margin-bottom: 16px;
    font-size: 14px;
}

.acf-active-search-title {
    font-weight: 700;
    color: #1f2937;
}

.acf-active-search-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.acf-chip {
    display: inline-flex;
    align-items: center;
    background: #e8f1f7;
    color: #0b5d86;
    border: 1px solid #cfe3ef;
    border-radius: 20px;
    padding: 5px 6px 5px 13px;
    line-height: 1.2;
}

.acf-chip-label {
    color: #5b7787;
    margin-right: 4px;
}

.acf-chip-x {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    margin-left: 6px;
    border-radius: 50%;
    color: #0b5d86;
    text-decoration: none;
    font-size: 16px;
    line-height: 1;
}

.acf-chip-x:hover {
    background: rgba(11, 93, 134, 0.16);
}

/* Total disponible après filtrage (pilule, en évidence) */
.acf-active-search-count {
    background: #0073aa;
    color: #fff;
    border-radius: 14px;
    padding: 3px 12px;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}

/* Total disponible affiché à l'arrivée (aucun filtre) : « N Résultats » */
.acf-filters-intro {
    display: flex;
    align-items: center;
    margin-bottom: 16px;
    margin-left: 20px;
}

.acf-filters-intro .acf-active-search-count {
    font-size: 15px;
    padding: 4px 14px;
}

.acf-active-search-clear {
    color: #6b7280;
    text-decoration: underline;
    font-size: 13px;
}

.acf-active-search-clear:hover {
    color: #0073aa;
}

/* Formulaire de filtres : grille 4 colonnes de largeur égale
   (7 filtres -> ligne 1 = 4, ligne 2 = 3 ; chaque filtre même largeur) */
.acf-filters-form {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px 18px;
    align-items: end;
    background: #f8f9fa;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 30px;
}

/* Groupe de filtres = 1 cellule de la grille */
.filter-group {
    display: flex;
    flex-direction: column;
    min-width: 0; /* empêche les selects de déborder la colonne */
}

/* aligne tous les champs en bas de leur cellule même si un label passe sur 2 lignes */
.filter-group .acf-filter-select,
.filter-group .acf-filter-input,
.filter-group .acf-filter-date {
    margin-top: auto;
}

/* === Barre de recherche par mots-clés (pleine largeur, en tête) === */
.filter-search {
    grid-column: 1 / -1;
}

.filter-search-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.filter-search-icon {
    position: absolute;
    left: 18px;
    color: #6b7280;
    pointer-events: none;
}

/* Préfixé .acf-filters-container : le thème Medicross style les input[type="search"]
   (0,1,1 : fond #e7e7e7, border:none, height 60px, padding 25px) et écrasait toutes
   nos déclarations à (0,1,0). Avec le conteneur (0,2,0) le style du plugin l'emporte. */
.acf-filters-container .acf-filter-search {
    width: 100%;
    height: auto;
    padding: 15px 18px 15px 52px;
    border: 1px solid #d8dde2;
    border-radius: 32px;
    font-size: 15px;
    background: #fff;
    color: #1f2937;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    transition: border-color 0.2s, box-shadow 0.2s;
    -webkit-appearance: none;
    appearance: none;
}

.acf-filters-container .acf-filter-search::placeholder {
    color: #9aa3ad;
}

.acf-filters-container .acf-filter-search:focus {
    outline: none;
    border-color: #0073aa;
    box-shadow: 0 0 0 3px rgba(0, 115, 170, 0.12);
}

.acf-filter-search:focus + .filter-search-icon,
.filter-search-wrap:focus-within .filter-search-icon {
    color: #0073aa;
}

/* === Menu d'autocomplétion (suggestions) === */
.acf-suggest {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #e2e6ea;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.14);
    z-index: 1000;
    overflow: hidden;
    padding: 6px;
}

.acf-suggest-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    border-radius: 10px;
    cursor: pointer;
    font-size: 14px;
    line-height: 1.3;
}

.acf-suggest-item:hover,
.acf-suggest-item.is-active {
    background: #eef4f8;
}

.acf-suggest-label {
    color: #1f2937;
}

.acf-suggest-item.is-active .acf-suggest-label {
    color: #0073aa;
    font-weight: 600;
}

.acf-suggest-tag {
    flex: 0 0 auto;
    font-size: 11px;
    color: #5b6571;
    background: #eef2f6;
    border-radius: 10px;
    padding: 2px 9px;
    white-space: nowrap;
}

.filter-group label {
    font-weight: 600;
    margin-bottom: 8px;
    color: #333;
    font-size: 14px;
}

/* Champs de saisie */
.acf-filter-select,
.acf-filter-input,
.acf-filter-date {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
    background: white;
    transition: border-color 0.3s;
}

.acf-filter-select:focus,
.acf-filter-input:focus,
.acf-filter-date:focus {
    outline: none;
    border-color: #0073aa;
    box-shadow: 0 0 0 3px rgba(0, 115, 170, 0.1);
}

/* État de chargement pour les filtres en cascade */
.acf-filter-select.loading {
    opacity: 0.6;
    pointer-events: none;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%230073aa" stroke-width="2"><circle cx="12" cy="12" r="10" stroke-opacity="0.25"/><path d="M12 2a10 10 0 0 1 10 10" stroke-linecap="round"><animateTransform attributeName="transform" type="rotate" from="0 12 12" to="360 12 12" dur="1s" repeatCount="indefinite"/></path></svg>');
    background-repeat: no-repeat;
    background-position: right 30px center;
    background-size: 20px;
}

/* Boutons d'action : leur propre ligne, pleine largeur de la grille */
.filter-actions {
    grid-column: 1 / -1;
    display: flex;
    gap: 10px;
    justify-content: flex-start;
    margin-top: 10px;
}

.btn-filter,
.btn-reset {
    padding: 12px 24px;
    border: none;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
}

.btn-filter {
    background: #0073aa;
    color: white;
}

.btn-filter:hover {
    background: #005a87;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 115, 170, 0.2);
}

.btn-reset {
    background: #e0e0e0;
    color: #333;
}

.btn-reset:hover {
    background: #d0d0d0;
}

/* Loader */
.acf-filters-container .filter-loader {
    text-align: center;
    padding: 40px;
}

.acf-filters-container .spinner {
    border: 4px solid #f3f3f3;
    border-top: 4px solid #0073aa;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 1s linear infinite;
    margin: 0 auto;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* === Overlay de chargement plein écran ===
   Le filtrage recharge toute la page (window.location) : on couvre la transition
   par un voile sombre + spinner pour signifier le chargement / l'application des filtres. */
.acf-loading-overlay {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    background: rgba(15, 23, 42, 0.55);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}

body.acf-filtering .acf-loading-overlay {
    opacity: 1;
    visibility: visible;
}

.acf-loading-overlay .acf-loading-spinner {
    width: 58px;
    height: 58px;
    border: 5px solid rgba(255, 255, 255, 0.25);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

.acf-loading-overlay .acf-loading-text {
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

@media (prefers-reduced-motion: reduce) {
    .acf-loading-overlay .acf-loading-spinner { animation-duration: 1.6s; }
}

/* Résultats filtrés */
.acf-filters-container .filtered-results {
    margin-top: 30px;
}

.acf-filters-container .results-count {
    background: #e8f5e9;
    padding: 12px 20px;
    border-radius: 4px;
    margin-bottom: 20px;
    font-weight: 600;
    color: #2e7d32;
}

/* Grille de posts */
.acf-filters-container .filtered-posts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 30px;
}

.acf-filters-container .filtered-post-item {
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.3s, box-shadow 0.3s;
}

.acf-filters-container .filtered-post-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.acf-filters-container .filtered-post-item .post-thumbnail {
    width: 100%;
    height: 200px;
    overflow: hidden;
}

.acf-filters-container .filtered-post-item .post-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}

.acf-filters-container .filtered-post-item:hover .post-thumbnail img {
    transform: scale(1.05);
}

.acf-filters-container .filtered-post-item .post-content {
    padding: 20px;
}

.acf-filters-container .filtered-post-item h3 {
    margin: 0 0 15px;
    font-size: 20px;
}

.acf-filters-container .filtered-post-item h3 a {
    color: #333;
    text-decoration: none;
    transition: color 0.3s;
}

.acf-filters-container .filtered-post-item h3 a:hover {
    color: #0073aa;
}

.acf-filters-container .post-meta {
    margin-bottom: 15px;
    font-size: 13px;
    color: #666;
}

.acf-filters-container .post-meta p {
    margin: 5px 0;
}

.acf-filters-container .post-excerpt {
    color: #555;
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 15px;
}

.acf-filters-container .read-more {
    display: inline-block;
    color: #0073aa;
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    transition: color 0.3s;
}

.acf-filters-container .read-more:hover {
    color: #005a87;
}

.acf-filters-container .no-results,
.acf-filters-container .error {
    text-align: center;
    padding: 40px;
    background: #f8f9fa;
    border-radius: 8px;
    color: #666;
}

.acf-filters-container .error {
    background: #ffebee;
    color: #c62828;
}

/* Pagination */
.acf-filters-container .pagination-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 30px;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 8px;
}

.acf-filters-container .btn-pagination {
    padding: 12px 24px;
    border: none;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    background: #0073aa;
    color: white;
}

.acf-filters-container .btn-pagination:hover:not(:disabled) {
    background: #005a87;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 115, 170, 0.2);
}

.acf-filters-container .btn-pagination:disabled {
    background: #ccc;
    color: #666;
    cursor: not-allowed;
}

.acf-filters-container .page-indicator {
    font-weight: 600;
    color: #333;
    font-size: 14px;
    padding: 0 30px;
}

/* Responsive */
@media (max-width: 980px) {
    .acf-filters-form {
        grid-template-columns: repeat(2, 1fr); /* tablette : 2 colonnes */
    }
}

@media (max-width: 768px) {
    .acf-filters-container .filtered-posts-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 560px) {
    .acf-filters-form {
        grid-template-columns: 1fr; /* mobile : 1 colonne */
    }

    .filter-actions {
        flex-direction: column;
    }

    .btn-filter,
    .btn-reset {
        width: 100%;
    }
}

/* =====================================================================
   LAYOUT "SIDEBAR" — modèle « Toutes les communications » (v6.4)
   Recherche pleine largeur en haut + colonne de filtres à gauche +
   grille de résultats (Loop Grid) à droite. Le shortcode et ses wrappers
   Elementor passent en display:contents pour que les zones .acf-sidebar-*
   deviennent des items de la grille .comm2-grid (posée sur la page).
   ===================================================================== */
/* Le conteneur .elementor-element-comm2grid reste BOXED (largeur contenue du site,
   alignée au menu/titre). La grille est posée sur son .e-con-inner. */
.elementor-element-comm2grid > .e-con-inner {
    display: grid !important; /* override le flex Elementor de .e-con-inner */
    width: 100%;
    grid-template-columns: 264px minmax(0, 1fr);
    grid-template-areas:
        "search  search"
        "filters results";
    /* !important : bat le `gap` par défaut du conteneur Elementor (sinon ramené à ~20px) */
    column-gap: 30px !important;  /* = écart entre cartes (loop grid) */
    row-gap: 48px !important;     /* espace sous la barre de recherche */
    align-items: start;
}
/* déballer le widget shortcode Elementor (.elementor-widget-shortcode > .elementor-shortcode)
   + le form pour faire remonter .acf-sidebar-search / .acf-sidebar-filters dans la grille.
   ⚠️ Elementor 3.x (PROD) intercale un .elementor-widget-container (block) entre le widget
   et .elementor-shortcode, que le 4.x (LOCAL) n'a pas : sans l'unwrap, la chaîne contents
   casse → recherche+filtres restent dans UNE cellule (empilés) et les résultats tombent en
   ligne 2 sous les filtres. On le passe donc aussi en contents (no-op en local). */
.elementor-element-comm2grid > .e-con-inner > .elementor-widget-shortcode,
.elementor-element-comm2grid .elementor-widget-shortcode > .elementor-widget-container,
.elementor-element-comm2grid .elementor-shortcode,
.elementor-element-comm2grid .acf-layout-sidebar,
.elementor-element-comm2grid .acf-layout-sidebar > .acf-filters-form {
    display: contents;
}
.acf-sidebar-search  { grid-area: search;  width: 100%; }
.acf-sidebar-filters { grid-area: filters; }
.elementor-element-comm2grid > .e-con-inner > .elementor-widget-loop-grid { grid-area: results; }

/* grille de résultats : 2 colonnes (comme le Figma), cartes à la MÊME hauteur */
.elementor-element-comm2grid .elementor-widget-loop-grid .elementor-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-rows: 1fr; /* égalise la hauteur de toutes les lignes (= la plus haute) */
}
/* la carte et ses conteneurs remplissent toute la hauteur de la cellule → aspect uniforme.
   PAS de min-height : grid-auto-rows:1fr égalise déjà à la carte la plus haute ; un min-height
   forcerait les cartes courtes trop hautes → vide excessif au-dessus des tags. */
.elementor-element-comm2grid .e-loop-item { height: 100%; }
.elementor-element-comm2grid .e-loop-item > .e-con,
.elementor-element-comm2grid .e-loop-item .e-con-inner,
.elementor-element-comm2grid .e-loop-item .elementor-element-2267d7e { height: 100%; }
/* la rangée de tags est poussée tout en bas de la carte */
.elementor-element-comm2grid .e-loop-item .elementor-element-a8ad1cc { margin-top: auto; }

/* ===== AFFICHAGE GROUPÉ PAR SESSION (pages de congrès) =====
   Quand on filtre sur un congrès précis, ajax_render_results renvoie des en-têtes
   .comm2-session-head + des sous-grilles .comm2-session-grid (frères dans .elementor-grid).
   La grille plate 2-col bascule alors en flux vertical (display:block) ; chaque session a
   sa propre sous-grille 2 colonnes à hauteurs égales. */
.elementor-element-comm2grid .elementor-widget-loop-grid .elementor-grid:has(.comm2-session-head) {
    display: block !important;          /* annule la grille plate 2-col + auto-rows:1fr */
}
.comm2-session-head { margin: 0 0 18px; }
.comm2-session-head:not(:first-child) { margin-top: 42px; }  /* respiration entre sessions */
.comm2-session-title {
    margin: 0;
    font-size: 20px;
    line-height: 1.25;
    font-weight: 700;
    color: #09243C;                     /* navy du site */
    text-transform: uppercase;          /* normalise la casse variable des programmes */
    letter-spacing: .02em;
    padding-bottom: 10px;
    border-bottom: 2px solid #09243C;
}
.comm2-session-head--autres .comm2-session-title {
    color: #5a6b7b; border-bottom-color: #c7d0d8; text-transform: none; font-weight: 600;
}
.comm2-session-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 30px;
    row-gap: 30px;
    grid-auto-rows: 1fr;                /* cartes à la même hauteur DANS la session */
}
@media (max-width: 767px) {
    .comm2-session-grid { grid-template-columns: 1fr; }
}

/* ===== En-tête de page comm2 (section titre + fil d'Ariane) =====
   Ciblé via le conteneur du fil d'Ariane (:has, indépendant des ids Elementor) et SCOPÉ
   aux pages comm2 (page-id) — sinon ça toucherait le breadcrumb des autres pages (Pathologies…).
   Section remontée sous le header (~35px comme Pathologies) + espace titre→résultats −40px. */
body.page-id-31100 .e-con.e-parent:has(.pxl-breadcrumb-wrap),
body.page-id-29726 .e-con.e-parent:has(.pxl-breadcrumb-wrap) {
    margin-top: 15px !important;   /* item 5 : 50→15 (−35px) → ~35px sous le header (comme Pathologies) */
    margin-bottom: 0 !important;   /* item 7 : 40→0 (−40px) entre le titre et les résultats */
}
/* item 6 : fil d'Ariane + titre alignés à gauche (x=55) — retire le padding du conteneur full */
body.page-id-31100 .e-con-full:has(.pxl-breadcrumb-wrap),
body.page-id-29726 .e-con-full:has(.pxl-breadcrumb-wrap) {
    padding-left: 0 !important;
}
/* item 6 : badge « N Résultats » aligné à gauche comme le reste (pas d'indent) */
.elementor-element-comm2grid .acf-filters-intro,
.elementor-element-comm2grid .acf-active-search-count { margin-left: 0 !important; }
/* mobile : 1 colonne (sinon cartes trop serrées) */
@media (max-width: 767px) {
    .elementor-element-comm2grid .elementor-widget-loop-grid .elementor-grid {
        grid-template-columns: 1fr !important;
    }
}

/* Ligne de tags des cartes : les pastilles ne se compriment PAS (sinon le texte se coupe
   au milieu : « Mai/n », « 202/6 ») ; elles passent à la ligne quand ça ne tient pas.
   Une pastille longue (plusieurs maladies) reste dans la largeur de la carte. */
.elementor-element-comm2grid .elementor-element-a8ad1cc {
    flex-wrap: wrap !important;
    row-gap: 6px;
}
.elementor-element-comm2grid .elementor-element-a8ad1cc > .elementor-element {
    flex-shrink: 0;
    max-width: 100%;
}

/* Recherche AJAX live : état de chargement (léger, pas l'overlay plein écran) */
.elementor-element-comm2grid .elementor-grid.acf-ajax-loading {
    opacity: .45;
    transition: opacity .15s ease;
    pointer-events: none;
}
/* Pagination AJAX (remplace la pagination Elementor en mode sidebar) */
.acf-ajax-pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    align-items: center;
    margin-top: 30px;
}
.acf-ajax-pagination .acf-page {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding: 0 12px;
    border: 1px solid #dfe3e8;
    border-radius: 8px;
    color: #0b2239;
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    background: #fff;
}
.acf-ajax-pagination .acf-page:hover { background: #f0f3f7; }
.acf-ajax-pagination .acf-page.is-current { background: #0b2239; color: #fff; border-color: #0b2239; }
.acf-ajax-pagination .acf-page-dots { padding: 0 4px; color: #8a94a0; }

/* zone recherche (pleine largeur) */
.acf-sidebar-search .filter-group.filter-search { margin: 0; max-width: none; }
.acf-sidebar-search label { font-weight: 600; font-size: 15px; margin-bottom: 6px; display: block; }

/* colonne filtres (gauche) : carte blanche, dropdowns empilés */
.acf-sidebar-filters {
    background: #fff;
    border: 1px solid #e6e8ec;
    border-radius: 12px;
    padding: 18px 16px 50px; /* +50px en bas (demande utilisateur) */
}
/* cascade : panneau de filtres légèrement grisé pendant le re-rendu AJAX des options */
.acf-filter-fields.acf-filters-loading { opacity: .55; pointer-events: none; transition: opacity .12s; }
.acf-sidebar-filters .acf-sidebar-heading {
    font-weight: 700;
    font-size: 16px;
    margin: 0 0 14px;
    color: #0b2239;
}
.acf-sidebar-filters .filter-group {
    display: block;
    margin: 0 0 14px;
}
.acf-sidebar-filters .filter-group:last-of-type { margin-bottom: 6px; }
.acf-sidebar-filters .filter-group label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #4a5763;
    margin-bottom: 5px;
}
.acf-sidebar-filters .acf-filter-select,
.acf-sidebar-filters .acf-filter-input,
.acf-sidebar-filters .acf-filter-date {
    width: 100%;
}
.acf-sidebar-filters .filter-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 14px;
}
.acf-sidebar-filters .filter-actions .btn-filter,
.acf-sidebar-filters .filter-actions .btn-reset { width: 100%; }

/* Bloc filtres : reste fixe au scroll (sous le header sticky) — desktop seulement.
   PAS de max-height/overflow : le bloc doit être entièrement visible, sans scroll interne. */
@media (min-width: 1025px) {
    .acf-sidebar-filters {
        position: sticky;
        top: 120px;
        align-self: start;
    }
}

/* responsive : tout empilé sur tablette/mobile */
@media (max-width: 1024px) {
    .elementor-element-comm2grid > .e-con-inner {
        grid-template-columns: 1fr;
        grid-template-areas: "search" "filters" "results";
    }
}