/* ==========================================================================
   Mur'Mures — Corrections responsive mobile-first (v193).
   Audit valide client : espacements compacts a 390px, cartes homogenes,
   carrousels tactiles, footer compact, N&B -> couleur au scroll.
   Charge APRES toutes les couches de page pour primer sans toucher au
   desktop : chaque regle vit dans une media query <= 1023px.
   ========================================================================== */

/* ── 1+8. Espace nav → contenu et titre → contenu (Actualites, Medias) ──── */
@media (max-width: 767px) {
    main#contenu.pt-36 { padding-top: 5.5rem !important; }
    main#contenu > header.mb-12 { margin-bottom: 1.5rem !important; }
    /* Titres de section : moins d'air au-dessus des grilles */
    .home-section-title.mt-10 { margin-top: 1.5rem !important; }
}
@media (min-width: 768px) and (max-width: 1023px) {
    main#contenu.pt-36 { padding-top: 6.5rem !important; }
    main#contenu > header.mb-12 { margin-bottom: 2rem !important; }
}

/* ── 3. Footer compact (mobile uniquement) ──────────────────────────────── */
@media (max-width: 767px) {
    .site-footer { padding: 40px 20px 0; }
    .foot-top { gap: 22px; padding-bottom: 28px; }
    .foot-col ul { gap: 4px; }
    /* UNIQUEMENT les liens des listes de navigation (pas l'email/telephone
       de l'adresse, pas le bouton CTA — corrige le bug v193 constate). */
    .foot-col ul a { display: block; padding: 9px 0; font-size: 14px; }
    .foot-col-title { margin: 0 0 8px; }
    .foot-brand p { margin: 0 0 14px; }
    .foot-contact address { line-height: 1.9; }
    .foot-contact address a { display: inline; padding: 0; }
    .foot-cta { display: inline-block; margin-top: 14px; padding: 12px 22px; font-size: 11px; }
    .foot-bottom { padding: 16px 0; gap: 8px 16px; }
}

/* ── 4. Noir & blanc -> couleur au scroll (mobile + tablette) ───────────── */
/* CAUSE RACINE : des couches historiques neutralisaient .scroll-hover avec
   des !important (parcours.css). On retablit ici, en dernier dans la
   cascade, la reaction au scroll posee par parcours.js / touch-hover.js.
   Le hover desktop (hover:hover) n'est pas concerne. */
@media (hover: none), (pointer: coarse) {
    .eng-card.scroll-hover,
    .eng-card.scroll-active {
        border-color: var(--accent) !important;
        transform: translateY(-10px) !important;
    }
    .eng-card.scroll-hover .eng-img,
    .eng-card.scroll-active .eng-img {
        filter: grayscale(0%) !important;
        transform: scale(1.05) !important;
    }
    .portrait-frame.scroll-hover .portrait-img,
    .portrait-frame.scroll-active .portrait-img { filter: grayscale(0%) !important; }
    .impact-card.scroll-hover .impact-img { filter: grayscale(0%) !important; transform: scale(1.04); }
    .impact-card.scroll-hover { border-color: var(--accent); }
    .parcours-portrait-featured.scroll-hover img,
    .parcours-portrait-wide.scroll-hover img { filter: grayscale(0) !important; }
    .booking-project-banner.scroll-hover .cellule-banner-inner > img,
    a.cellule-banner.scroll-hover img { filter: grayscale(0%) !important; }
    .media-hub-tile.scroll-hover .media-hub-tile-media img { transform: scale(1.05); }
    .media-hub-tile.scroll-hover { border-color: var(--accent); }
}

/* ── 6. "Dernieres actions" : carrousel tactile mobile/tablette ─────────── */
@media (max-width: 1023px) {
    #interventions-featured-grid {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        gap: 14px !important;
        padding-bottom: 10px;
    }
    #interventions-featured-grid > * { flex: 0 0 82%; scroll-snap-align: start; min-width: 0; }
    #interventions-featured-grid::-webkit-scrollbar { height: 5px; }
    #interventions-featured-grid::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 99px; }
}
@media (max-width: 480px) {
    #interventions-featured-grid > * { flex-basis: 87%; }
}

/* ── 8+9. Cartes video/audio/presse : DIMENSIONS IDENTIQUES ─────────────── */
/* La hauteur ne depend plus du contenu : media 16:9 fixe + zone texte a
   hauteur bornee (le "Plus" de media.js gere les textes longs) + CTA cale
   en bas. Toutes les cartes d'un meme carrousel = meme hauteur. */
@media (max-width: 1023px) {
    .media-card-carousel > .video-card {
        display: flex;
        flex-direction: column;
        height: auto;
    }
    .media-card-carousel > .video-card .video-wrapper {
        flex: 0 0 auto;
        padding-bottom: 0;
        height: auto;
        aspect-ratio: 16 / 9;
        margin: 10px 10px 0;
    }
    .media-card-carousel > .video-card > .p-8 {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        padding: 16px 18px 18px !important;
    }
    .media-card-carousel > .video-card h2 { font-size: 1.05rem !important; line-height: 1.25; margin-top: 6px !important; }
    .media-card-carousel > .video-card .media-desc { margin-top: 8px !important; font-size: 12.5px; }
    /* CTA toujours cale en bas -> plus de trou entre texte et bouton */
    .media-card-carousel > .video-card .video-card-cta { margin-top: auto !important; padding-top: 10px !important; }
    /* Egalisation : les enfants du carrousel s'etirent a la hauteur du plus grand */
    .media-card-carousel { align-items: stretch !important; }
}

/* ── 10. Radio / Podcast / Presse : "A la une" passe en 2e ligne ────────── */
@media (max-width: 767px) {
    .home-section-title .mm-title-line-break { display: block; }
}

/* ── 11. Presse : meme calibrage que les autres cartes media ────────────── */
/* (herite des regles 8+9 : .media-card-carousel couvre presse et audio) */

/* ── Vitrine sociale : garde-fous 390px ─────────────────────────────────── */
@media (max-width: 560px) {
    .mm-showcase-posts .mm-showcase-card.is-embed-open .mm-showcase-media { height: 440px; }
}

/* ── Garde-fou global : jamais de debordement horizontal ────────────────── */
@media (max-width: 1023px) {
    html, body { overflow-x: hidden; }
}

/* ── A. Page Actualites : espaces compactes (v195) ──────────────────────── */
/* La carte heritait de margin-top:100px (desktop) et les fleches de
   margin-bottom:56px : les 2 gros trous constates sur telephone. */
@media (max-width: 767px) {
    main#contenu .mm-news-carousel .featured-banner { margin: 14px 0 0 !important; }
    .mm-news-carousel-controls,
    .mm-news-carousel-controls.is-single { margin-top: 14px !important; margin-bottom: 8px !important; }
    .actualites-social-section { padding-top: 12px !important; margin-top: 0 !important; }
}
@media (min-width: 768px) and (max-width: 1023px) {
    main#contenu .mm-news-carousel .featured-banner { margin-top: 28px !important; }
    .mm-news-carousel-controls { margin-bottom: 20px !important; }
}

/* ── B. Cercles parfaits sur tous les telephones (v195) ─────────────────── */
/* Samsung Internet (agrandissement du texte Android) gonfle le contenu des
   boutons et deforme les cercles : on verrouille les dimensions. */
@media (max-width: 1023px) {
    .mm-news-arrow {
        flex: 0 0 42px;
        width: 42px; min-width: 42px; max-width: 42px;
        height: 42px; min-height: 42px; max-height: 42px;
        aspect-ratio: 1 / 1;
        padding: 0; line-height: 1;
        display: inline-flex; align-items: center; justify-content: center;
        border-radius: 50% !important;
        box-sizing: border-box;
    }
    .mm-news-dot:not(.is-active) { width: 9px; min-width: 9px; height: 9px; min-height: 9px; aspect-ratio: 1 / 1; }
    /* Pastilles du panneau accessibilite : meme verrouillage. */
    .color-dot {
        width: 14px; min-width: 14px; max-width: 14px;
        height: 14px; min-height: 14px; max-height: 14px;
        aspect-ratio: 1 / 1; flex: 0 0 auto;
        border-radius: 50% !important;
    }
}

/* ══ Gros chantier responsive v197 ══════════════════════════════════════ */

/* ── 2-4. Alignement des titres avec les cartes (mobile + tablette) ────── */
/* Un titre de section commence sur la meme ligne verticale que sa carte. */
@media (max-width: 1023px) {
    /* Page Actualites : "Actualites recentes" aligne a gauche + compact */
    main#contenu > header.text-center { text-align: left !important; margin-bottom: 10px !important; }
    /* Accueil + sections : en-tetes centres -> gauche, meme gouttiere */
    .home-section .text-center.mb-8,
    .home-section .text-center.mb-24,
    #preview-actualites .text-center,
    .mm-showcase > .text-center { text-align: left !important; }
    .mm-showcase-intro { margin-left: 0 !important; margin-right: 0 !important; }
    /* Les titres de rangee de la vitrine suivent la meme grille */
    .mm-showcase-row-title { text-align: left !important; }
    /* Pages Medias / Interventions : titres de section deja a gauche
       (home-section-title) — on garantit juste l'absence de centrage herite */
    #videos .home-section-title, #audio .home-section-title,
    #presse .home-section-title { text-align: left !important; }
}

/* ── 1+5+6. N&B -> couleur au scroll : cartes video et bannieres aussi ── */
@media (hover: none), (pointer: coarse) {
    .video-card.scroll-hover { border-color: var(--accent) !important; }
    .media-featured.scroll-hover { border-color: var(--accent); }
    .media-featured.scroll-hover .media-bg { opacity: .9; }
    .featured-banner.scroll-hover img { filter: grayscale(0%) !important; }
    .booking-project-banner.scroll-hover { border-color: var(--accent); }
    .mm-showcase-card.scroll-hover .mm-showcase-media img { filter: grayscale(0%) !important; }
}

/* ── 7. Pop-up video "Videos a la une" (mobile + tablette) ─────────────── */
/* Reutilise le modal des archives : memes classes, memes styles. */
@media (max-width: 1023px) {
    .media-archive-modal-panel { width: min(94vw, 720px); }
}

/* ══ Retours patron — lot 1 (v202) ══════════════════════════════════════ */

/* ── A2+Q1. Partenaires cliquables : meme rendu qu'avant, curseur main ── */
a.partner-logo { text-decoration: none; cursor: pointer; }
a.partner-logo:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 8px; }

/* ── A3+Q2. Mobile : logos partenaires plus grands + marge du bas reduite */
@media (max-width: 767px) {
    .partner-logo { width: 190px !important; height: 95px !important; }
    .partner-logo img { max-height: 80px; }
    .partners-section { padding-bottom: 24px !important; }
    .partners-section .partners-title-wrap { margin-bottom: 24px !important; }
    /* Q2 : grosse marge sous le carrousel sur Qui sommes-nous */
    .partners-carousel-wrap { margin-bottom: 0 !important; padding-bottom: 8px; }
}

/* ── AG2. Agenda mobile : texte complet au toucher d'une ligne ─────────── */
@media (max-width: 1023px) {
    .agenda-calendar-row.is-expanded .agenda-calendar-city,
    .agenda-calendar-row.is-expanded .agenda-calendar-detail {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
    }
    .agenda-calendar-row { cursor: pointer; }
}

/* ── I1. Bulle de la carte : occupe toute la largeur disponible ────────── */
.mm-map-popup { width: 100%; min-width: 240px; }
.mm-map-popup-item { display: flex; gap: 10px; width: 100%; }
.mm-map-popup-item > div { flex: 1 1 auto; min-width: 0; }
.leaflet-popup-content { width: auto !important; min-width: 250px; margin: 12px 14px; }
@media (max-width: 560px) {
    .leaflet-popup-content-wrapper { max-width: 82vw; }
    .mm-map-popup { min-width: 0; }
}

/* ── M1. Medias mobile : recuperer la place laterale ───────────────────── */
@media (max-width: 767px) {
    body.page-template-page-media main#contenu { padding-left: 12px !important; padding-right: 12px !important; }
    body.page-template-page-media .media-hero-grid-v2 { padding: 12px !important; }
}

/* ── M2. Carrousels medias : slides calees proprement au bord ──────────── */
@media (max-width: 1023px) {
    .media-card-carousel { scroll-padding-left: 12px; padding-left: 2px; }
    .media-card-carousel > * { scroll-snap-align: center; }
}

/* ── AC1. Article : carrousel aligne sur le corps de l'article ─────────── */
/* Le corps porte !px-0 (padding retire) mais le carrousel gardait son
   padding lateral de 24px -> bords decales. On aligne les gouttieres. */
.article-body .article-carousel,
.article-body.\!px-0 ~ .article-carousel,
article .article-carousel { padding-left: 0; padding-right: 0; }
.article-carousel { max-width: 760px; }
@media (max-width: 640px) {
    article .article-carousel { padding-left: 0; padding-right: 0; }
}

/* ── AG1 (suite v205) : les dates disponibles montrent qu'elles sont
      cliquables — curseur main + reaction au survol. ── */
.agenda-calendar-grid .is-free {
    cursor: pointer !important;
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.agenda-calendar-grid .is-free:hover,
.agenda-calendar-grid .is-free:focus-visible {
    background: #cdeeda;
    transform: scale(1.08);
    box-shadow: 0 3px 10px rgba(24, 125, 76, .25);
    outline: 0;
}
.agenda-calendar-grid .is-busy { cursor: not-allowed; }

/* ── I1 (correctif v207) : la bulle de la carte etait dimensionnee par
      Leaflet en JS (style inline) -> le CSS seul ne suffisait pas.
      minWidth ajoute cote JS + le contenu occupe toute la bulle. ── */
.mm-map-popup-wrap .leaflet-popup-content { width: auto !important; min-width: 240px; margin: 12px 14px !important; box-sizing: border-box; }
.mm-map-popup, .mm-map-popup-item { width: 100%; box-sizing: border-box; }
.mm-map-popup-item { display: flex !important; gap: 10px; align-items: flex-start; }
.mm-map-popup-item img { flex: 0 0 64px; }
.mm-map-popup-item > div { flex: 1 1 auto; min-width: 0; }
.mm-map-popup-item p { white-space: normal; }
@media (max-width: 560px) {
    .mm-map-popup-wrap .leaflet-popup-content { min-width: min(240px, 74vw); }
}

/* ══ Page Medias mobile/tablette — correctifs valides patron (v208) ═════ */
@media (max-width: 1023px) {

    /* 1. COULEUR AU SCROLL — cause racine : harmony.css n'ecoutait que
       .scroll-active alors que l'observateur pose .scroll-hover.
       On honore les DEUX classes, pour toutes les cartes medias. */
    .video-card.scroll-hover img,
    .video-card.scroll-active img,
    .media-featured.scroll-hover .media-bg,
    .archive-row.scroll-hover img,
    .media-hub-tile.scroll-hover img {
        filter: grayscale(0%) !important;
    }

    /* 2. FIN DE L'EFFET HOVER ROUGE sur les cartes medias : plus de
       bordure rouge ni de soulevement pendant le defilement — cartes
       stables et alignees. (Le passage en couleur, lui, est conserve.) */
    .video-card.scroll-hover,
    .video-card.scroll-active,
    .video-card:hover,
    .media-card-carousel > .video-card.scroll-hover {
        border-color: var(--border) !important;
        transform: none !important;
        box-shadow: none !important;
    }

    /* 3. HAUTEURS INDEPENDANTES — cause racine : align-items:stretch
       (v193) etirait TOUTES les cartes a la hauteur de la plus grande,
       donc ouvrir une carte agrandissait visuellement les voisines.
       Chaque carte ne depend plus que de son propre contenu. */
    .media-card-carousel { align-items: flex-start !important; }
    .media-card-carousel > .video-card {
        height: auto !important;
        min-height: 0 !important;
        align-self: flex-start;
    }

    /* 4. PLUS DE CHEVAUCHEMENT avec le bouton "Voir" : la zone texte
       pousse naturellement le bouton vers le bas (flux normal), avec un
       espace garanti au-dessus du bouton. */
    .media-card-carousel > .video-card > .p-8 { height: auto !important; overflow: visible !important; }
    .media-card-carousel > .video-card .media-desc { overflow: hidden; }
    .media-card-carousel > .video-card .video-card-cta {
        position: static !important;
        margin-top: 12px !important;
        padding-top: 0 !important;
    }
}

/* ══ Medias : CARTES CALIBREES — même taille pour toutes (v209) ═════════ */
/* Principe : chaque zone de la carte a une hauteur RESERVEE fixe :
   image 16:9 + source (1 ligne) + titre (2 lignes) + texte (3 lignes,
   le "Plus" de media.js tronque deja) + bouton cale en bas.
   => toutes les cartes fermees d'une meme rangee sont identiques.
   Seule une carte OUVERTE au "Plus" depasse — les voisines ne bougent pas. */
@media (max-width: 1023px) {
    .media-card-carousel > .video-card > .p-8 {
        display: flex !important;
        flex-direction: column !important;
    }
    /* Source (RTL, France 3...) : 1 ligne calibree */
    .media-card-carousel > .video-card .text-accent {
        display: block;
        min-height: 18px;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    /* Titre : hauteur reservee de 2 lignes, tronque au-dela */
    .media-card-carousel > .video-card h2 {
        min-height: calc(2 * 1.25em);
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    /* Texte : zone reservee de 3 lignes MEME si la description est vide
       ou courte (c'etait la cause des hauteurs differentes) */
    .media-card-carousel > .video-card .media-desc {
        min-height: calc(3 * 1.5em + 2px);
    }
    /* Carte ouverte au "Plus" : le texte s'etend librement */
    .media-card-carousel > .video-card .media-desc[data-md-expanded="1"] {
        min-height: 0;
    }
    /* Bouton toujours cale en bas de la carte */
    .media-card-carousel > .video-card .video-card-cta { margin-top: auto !important; }
}

/* Desktop : la grille Presse / Radio (3 colonnes) merite le meme calibrage
   — les cartes video ont deja un min-height desktop, on ne touche pas. */
@media (min-width: 1024px) {
    .media-card-carousel.grid > .video-card .text-accent { display: block; min-height: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .media-card-carousel.grid > .video-card h2 { min-height: calc(2 * 1.25em); }
    .media-card-carousel.grid > .video-card .media-desc { min-height: calc(3 * 1.5em + 2px); }
    .media-card-carousel.grid > .video-card .media-desc[data-md-expanded="1"] { min-height: 0; }
    .media-card-carousel.grid > .video-card .video-card-cta { margin-top: auto; }
}

/* ══ Retours 26/08 (v211) ═══════════════════════════════════════════════ */

/* R2. Espace avale avant "48h ouvrees" : inline-flex supprimait l'espace
   entre le texte et le <strong>. display:inline retablit le flux texte. */
.booking-info-bloc li > span:not(.booking-info-num) { display: inline !important; }

/* R1 (corrige v212) : le carrousel copie EXACTEMENT la boite du corps
   d'article rendue par single.php : article-body = max-width 760px,
   margin 0 (cale a gauche du conteneur centre max-w-4xl), padding 0
   via l'utilitaire !px-0. Meme point de depart + meme largeur = bords
   parfaitement alignes a toutes les tailles d'ecran. */
article.max-w-4xl .article-carousel,
article .article-carousel,
.article-carousel {
    max-width: 760px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box;
}

/* R3. Bulle carte multi-interventions : hauteur bornee + defilement
   interne — on voit TOUTES les interventions d'une ville. */
.mm-map-popup { max-height: 300px; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding-right: 4px; }
.mm-map-popup::-webkit-scrollbar { width: 5px; }
.mm-map-popup::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 99px; }
@media (max-width: 560px) {
    .mm-map-popup { max-height: 46vh; }
}
/* v225 : clic sur une ville = zoom sur le point PUIS ouverture de la bulle
   (l'autoPan Leaflet la recadre entiere). La regle haut/bas v224 est retiree. */

/* v223 : badge rouge bien visible quand une ville a plusieurs interventions */
.mm-map-popup-count { display: inline-block; background: var(--accent, #c40000); color: #fff; font-size: 10px; font-weight: 800; text-transform: none; letter-spacing: .02em; margin-top: 4px; padding: 3px 9px; border-radius: 99px; box-shadow: 0 2px 8px rgba(0,0,0,.35); }

/* ══ Carte : bulles mobiles (v214) ══════════════════════════════════════ */
@media (hover: none), (pointer: coarse) {
    /* 3. Scroll interne COMPLET : la derniere intervention etait coupee car
       la hauteur bornee s'appliquait au contenu sans compter les marges
       internes de Leaflet. Le defilement porte la bordure basse + un
       espace de fin garantit que le dernier element respire. */
    .mm-map-popup { max-height: min(46vh, 340px); padding-bottom: 14px; }
    .mm-map-popup-item:last-child { margin-bottom: 6px; }
    .mm-map-popup-wrap .leaflet-popup-content { max-height: none; }

    /* 1. La croix de fermeture : plus grande, toujours DANS la bulle,
       zone tactile confortable (36px). */
    .mm-map-popup-wrap .leaflet-popup-close-button {
        top: 6px; right: 6px;
        width: 32px; height: 32px;
        font-size: 22px; line-height: 30px;
        color: #fff; background: rgba(255,255,255,.14);
        border-radius: 50%;
    }
    .mm-map-popup-wrap .leaflet-popup-close-button:hover { background: var(--accent); color: #fff; }
    /* le titre de ville ne passe pas sous la croix */
    .mm-map-popup-city { padding-right: 36px; }

    /* largeur bornee a l'ecran : jamais de bord coupe lateralement */
    .mm-map-popup-wrap .leaflet-popup-content-wrapper { max-width: min(86vw, 320px); }
}

/* ══ v217 : bulle native mobile/tablette — regles minimales fiables ══ */
@media (hover: none), (pointer: coarse), (max-width: 1023px) {
    /* Largeur bornee a l'ecran : aucun bord coupe lateralement. */
    .mm-map-popup-wrap .leaflet-popup-content-wrapper { max-width: min(86vw, 320px); }
    /* Croix : grande, ronde, toujours dans la bulle. */
    .mm-map-popup-wrap .leaflet-popup-close-button {
        top: 6px; right: 6px;
        width: 32px; height: 32px;
        font-size: 20px; line-height: 30px;
        color: #fff; background: rgba(255,255,255,.14);
        border-radius: 50%;
    }
    .mm-map-popup-city { padding-right: 38px; }
    /* Scroll interne complet : hauteur bornee + espace de fin. */
    .mm-map-popup { max-height: 190px; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding-bottom: 12px; }
    .mm-map-popup-item:last-child { margin-bottom: 4px; }
}