/* ============================================================
   FATE — Corrections responsive
   ------------------------------------------------------------
   Auteur : Damien (stage 2026)
   Objectif : rendre le site totalement responsive de 320 à 1920+,
   sans toucher aux fichiers CSS des autres stagiaires.
   Ce fichier est chargé EN DERNIER pour gagner la cascade.
   Toute règle ici corrige un bug identifié par l'audit Playwright
   (voir docs/JOURNAL_RESPONSIVE.md pour le détail).
   ============================================================ */


/* ============================================================
   1. SÉCURITÉ — empêcher tout débordement horizontal global
   ============================================================
   Plusieurs sections (marquees, hero carrousels) génèrent des
   enfants plus larges que le viewport. On force le clip à la
   racine pour neutraliser tout futur overflow accidentel.
*/
html,
body {
    max-width: 100%;
    overflow-x: clip;
}


/* ============================================================
   2. NAVIGATION — bug critique
   ============================================================
   Symptôme : sur tout viewport <=1010px, le menu était affiché
   en permanence (visible sous le header), bloquant le contenu.

   Cause : `fate-branding.css:62` force `.mainNav { display:flex
   !important }` HORS media query, ce qui écrase la règle
   `display:none` mobile de `style.css:10708`. La classe `.navOpen`
   du JS ne sert plus à rien.

   Fix : on remet la logique « masqué par défaut sur mobile,
   visible avec .navOpen ». Breakpoint repoussé à 1100px pour
   éviter le débordement nav desktop observé à 1024px.
*/
@media (max-width: 1100px) {

    /* ── PANEL PREMIUM — marine FATE, accents or #FFC107 ─────────── */
    .mainNav {
        display: flex !important;
        flex-direction: column;
        position: fixed !important;
        top: 70px !important;
        right: 0 !important;
        bottom: 0 !important;
        left: auto !important;
        width: min(380px, 88vw) !important;
        max-width: 88vw !important;
        height: auto !important;
        background-color: #0a0a1e !important;
        background-image:
            radial-gradient(120% 60% at 100% 0%, rgba(255, 193, 7, 0.06), transparent 60%),
            linear-gradient(180deg, #0a0a1e 0%, #12122e 55%, #0a0a1e 100%) !important;
        color: #ffffff !important;
        z-index: 1050;
        padding: 32px 26px 28px !important;
        overflow-y: auto;
        overflow-x: hidden;
        align-items: stretch !important;
        transform: translateX(100%);
        transition: transform 0.52s cubic-bezier(.22, 1, .36, 1);
        box-shadow:
            -1px 0 0 rgba(255, 193, 7, 0.45),
            -28px 0 70px rgba(0, 0, 0, 0.45);
        pointer-events: none;
        visibility: hidden;
    }

    .mainNav.navOpen {
        transform: translateX(0);
        pointer-events: auto;
        visibility: visible;
    }

    /* Voile derrière le drawer : marine FATE, ferme au clic. */
    .navBackdrop {
        position: fixed;
        inset: 0;
        background: linear-gradient(90deg,
                rgba(10, 10, 30, 0.45) 0%,
                rgba(10, 10, 30, 0.65) 100%);
        z-index: 1040;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.45s ease;
        backdrop-filter: blur(6px) saturate(120%);
        -webkit-backdrop-filter: blur(6px) saturate(120%);
    }

    .navBackdrop.open {
        opacity: 1;
        pointer-events: auto;
    }

    /* ── Liens : Montserrat capitales, transition or au hover ────── */
    .mainNav.navOpen .navLink,
    .mainNav.navOpen .navLinkStrong {
        font-family: 'Montserrat', sans-serif !important;
        font-weight: 700 !important;
        font-size: 14px !important;
        letter-spacing: 1.6px !important;
        text-transform: uppercase !important;
        color: rgba(255, 255, 255, 0.86) !important;
        padding: 16px 4px !important;
        border-bottom: 1px solid rgba(255, 193, 7, 0.14);
        position: relative;
        transition: color 0.25s ease, padding-left 0.3s cubic-bezier(.4, 0, .2, 1), background 0.25s ease;
    }

    .mainNav.navOpen .navLink::before {
        content: '';
        position: absolute;
        left: -26px;
        top: 50%;
        transform: translateY(-50%) scaleY(0);
        width: 3px;
        height: 22px;
        background: #FFC107;
        transition: transform 0.3s cubic-bezier(.4, 0, .2, 1);
        transform-origin: center;
    }

    .mainNav.navOpen .navLink:hover,
    .mainNav.navOpen .navLink:focus-visible,
    .mainNav.navOpen .navLinkStrong:hover {
        color: #FFC107 !important;
        padding-left: 14px !important;
        background: transparent !important;
    }

    .mainNav.navOpen .navLink:hover::before,
    .mainNav.navOpen .navLink:focus-visible::before {
        transform: translateY(-50%) scaleY(1);
    }

    /* Wrapper du lien parent + chevron */
    .mainNav.navOpen .navLinkWrapper {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
    }

    .mainNav.navOpen .dropdownIcon {
        color: #FFC107 !important;
        font-weight: 300 !important;
        font-size: 18px !important;
        opacity: 0.7;
        margin-left: auto;
        transition: transform 0.3s ease, opacity 0.25s ease;
    }

    .mainNav.navOpen .hasSubmenu.submenuOpen .dropdownIcon {
        transform: rotate(45deg);
        opacity: 1;
    }

    /* ── Cascade : chaque item glisse en place avec un léger délai ── */
    .mainNav .navItem {
        opacity: 0;
        transform: translateX(24px);
        transition: opacity 0.42s ease, transform 0.5s cubic-bezier(.2, .8, .2, 1);
    }

    .mainNav.navOpen .navItem {
        opacity: 1;
        transform: translateX(0);
    }

    .mainNav.navOpen .navItem:nth-child(1) {
        transition-delay: 140ms;
    }

    .mainNav.navOpen .navItem:nth-child(2) {
        transition-delay: 180ms;
    }

    .mainNav.navOpen .navItem:nth-child(3) {
        transition-delay: 220ms;
    }

    .mainNav.navOpen .navItem:nth-child(4) {
        transition-delay: 260ms;
    }

    .mainNav.navOpen .navItem:nth-child(5) {
        transition-delay: 300ms;
    }

    .mainNav.navOpen .navItem:nth-child(6) {
        transition-delay: 340ms;
    }

    .mainNav.navOpen .navItem:nth-child(7) {
        transition-delay: 400ms;
    }

    .mainNav.navOpen .navItem:nth-child(8) {
        transition-delay: 440ms;
    }

    .mainNav.navOpen .navList {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 8px !important;
        height: auto !important;
        width: 100%;
    }

    /* Empêche `justify-content: space-between` (style.css:10247) de
       coller le menu en bas du drawer avec un vide blanc au milieu.
       Sans ce fix, en column le `space-between` répartit verticalement
       le logoLink (en haut) et le navList (en bas). */
    .mainNav.navOpen {
        justify-content: flex-start !important;
        align-items: stretch !important;
        flex-wrap: nowrap !important;
    }

    /* Masque le logo "desktopOnly" dupliqué à l'intérieur du drawer.
       La règle `.desktopOnly { display: none }` n'existe que jusqu'à
       1010px (style.css:10742) ; entre 1011 et 1100, mon drawer mobile
       est actif mais le logo reste visible → doublon avec le logo
       du `.mobileNav` du header. */
    .mainNav.navOpen .desktopOnly,
    .mainNav.navOpen .logoLink {
        display: none !important;
    }

    .mainNav.navOpen .navItem {
        width: 100%;
    }

    /* Sous-menus : volet en retrait avec liseré or à gauche */
    .mainNav.navOpen .submenuList {
        position: static !important;
        display: none;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        box-shadow: none !important;
        border: none !important;
        border-left: 1px solid rgba(255, 193, 7, 0.25) !important;
        background: transparent !important;
        border-radius: 0 !important;
        padding: 6px 0 10px 14px !important;
        margin: 4px 0 8px 4px !important;
    }

    .mainNav.navOpen .hasSubmenu.submenuOpen .submenuList {
        display: flex !important;
        flex-direction: column;
        animation: fateSubmenuFade 0.35s cubic-bezier(.2, .8, .2, 1);
    }

    @keyframes fateSubmenuFade {
        from {
            opacity: 0;
            transform: translateY(-6px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .mainNav.navOpen .submenuLink {
        white-space: normal !important;
        word-break: break-word;
        font-family: 'Open Sans', sans-serif !important;
        font-size: 13px !important;
        letter-spacing: 0.4px !important;
        color: rgba(255, 255, 255, 0.6) !important;
        padding: 9px 14px !important;
        transition: color 0.2s ease, padding-left 0.25s ease;
    }

    .mainNav.navOpen .submenuLink:hover,
    .mainNav.navOpen .submenuLink:focus-visible {
        color: #FFC107 !important;
        padding-left: 18px !important;
    }

    .mainNav.navOpen .horizontalLine {
        display: none !important;
    }

    /* Boutons CTA Soutenir/Adhérer en mode drawer : pleine largeur,
       sans décor desktop (barre verticale `::before` + margin gauche
       posé par fate-branding.css:184 sur le <li> avant-dernier — ça
       fait une barre orpheline en colonne) */
    .mainNav.navOpen .navList li:nth-last-child(2),
    .mainNav.navOpen .navList li:last-child {
        margin-left: 0 !important;
    }

    .mainNav.navOpen .navList li:nth-last-child(2)::before,
    .mainNav.navOpen .navList li:last-child::before {
        display: none !important;
    }

    /* CTAs Soutenir / Adhérer — version drawer marine */
    .mainNav.navOpen .buttonNav,
    .mainNav.navOpen .btn-adherer-noir,
    .mainNav.navOpen a[href*="soutenir"].buttonNav,
    .mainNav.navOpen a[href*="adherer"].buttonNav {
        display: flex !important;
        width: 100% !important;
        justify-content: center !important;
        align-items: center !important;
        margin: 0 !important;
        padding: 15px 22px !important;
        font-family: 'Montserrat', sans-serif !important;
        font-size: 13px !important;
        font-weight: 800 !important;
        letter-spacing: 1.8px !important;
        text-transform: uppercase !important;
        text-align: center !important;
        box-sizing: border-box;
        border-radius: 50px !important;
        transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, color 0.25s ease, border-color 0.25s ease !important;
    }

    .mainNav.navOpen a[href*="soutenir"].buttonNav {
        background: #FFC107 !important;
        color: #0a0a1e !important;
        border: 2px solid #FFC107 !important;
        box-shadow: 0 10px 28px rgba(255, 193, 7, 0.22) !important;
    }

    .mainNav.navOpen a[href*="soutenir"].buttonNav:hover {
        transform: translateY(-2px);
        box-shadow: 0 14px 32px rgba(255, 193, 7, 0.32) !important;
        background: #F3C23C !important;
    }

    .mainNav.navOpen a[href*="adherer"].buttonNav {
        background: transparent !important;
        color: #ffffff !important;
        border: 2px solid rgba(255, 255, 255, 0.5) !important;
        box-shadow: none !important;
    }

    .mainNav.navOpen a[href*="adherer"].buttonNav:hover {
        background: #ffffff !important;
        color: #0a0a1e !important;
        border-color: #ffffff !important;
        transform: translateY(-2px);
    }

    /* Respiration au-dessus des CTA + filet or au-dessus */
    .mainNav.navOpen .navList li:nth-last-child(2) {
        margin-top: 28px !important;
        padding-top: 24px !important;
        position: relative;
    }

    .mainNav.navOpen .navList li:nth-last-child(2)::after {
        content: '';
        position: absolute;
        top: 0;
        left: 30%;
        right: 30%;
        height: 1px;
        background: linear-gradient(90deg, transparent, rgba(255, 193, 7, 0.5), transparent);
    }

    .mainNav.navOpen .navList li:last-child {
        margin-top: 12px !important;
    }

    /* Filigrane signature Georgia en bas du drawer */
    .mainNav::after {
        content: 'Forum Associatif Tous Ensemble\A Lyon · depuis 2001';
        white-space: pre;
        display: block;
        margin-top: 32px;
        padding-top: 20px;
        font-family: 'Georgia', serif;
        font-style: italic;
        font-size: 11px;
        line-height: 1.7;
        letter-spacing: 0.4px;
        color: rgba(255, 193, 7, 0.4);
        text-align: center;
        align-self: center;
        opacity: 0;
        transform: translateY(8px);
        transition: opacity 0.4s ease 0.55s, transform 0.4s ease 0.55s;
        pointer-events: none;
    }

    .mainNav.navOpen::after {
        opacity: 1;
        transform: translateY(0);
    }

    /* Burger toujours visible <=1100px */
    .mobileNavToggle,
    #mobileToggle {
        display: block !important;
    }

    .mobileNav {
        display: flex !important;
    }
}

/* Body lock quand le drawer est ouvert (déjà ajouté par main.js) */
body.noScroll {
    overflow: hidden;
}


/* ============================================================
   3. NAVIGATION DESKTOP — micro-ajustement
   ============================================================
   À 1024px, la liste de nav (.navList) dépassait l'écran
   parce que le breakpoint d'origine était 1010px. On a déjà
   repoussé à 1100px ci-dessus. Ici on réduit le gap pour les
   intermédiaires 1100-1280px afin d'éviter tout chevauchement
   avec le bouton "Adhérer".
*/
@media (min-width: 1101px) and (max-width: 1280px) {
    .mainNav .navList {
        gap: 18px !important;
    }
}


/* ============================================================
   4. ACCUEIL — image rapport activités
   ============================================================
   Symptôme : `.document-card` et `.rapport-card-img` (carousel
   des rapports) débordaient à 768/1440 avec une image source à
   1075px de large. Le parent flex en `overflow:hidden` masquait
   l'effet, mais c'était à clipper proprement.

   Fix : forcer toutes les images des cards à 100% du conteneur.
*/
.document-card,
.document-card * {
    max-width: 100%;
    box-sizing: border-box;
}

.rapport-card-img,
.rapport-card-img img {
    max-width: 100% !important;
    height: auto;
}


/* ============================================================
   5. ACCUEIL — marquee des archives
   ============================================================
   Le track interne (.archives-marquee-track) fait ~2450px par
   construction (boucle infinie). On s'assure que son parent
   clippe correctement.
*/
.archives-marquee,
[class*="marquee"] {
    overflow: hidden !important;
}


/* ============================================================
   6. PAGE FATE — hero responsive
   ============================================================
   Symptôme à 320/375 : `.fate-hero-left/.fate-hero-text`
   dépassaient (368-336px de large pour un viewport 320-375).
   Cause : largeur min non bornée + padding latéral.
*/
@media (max-width: 480px) {
    .fate-hero-content,
    .fate-hero-left,
    .fate-hero-right,
    .fate-hero-text {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
        box-sizing: border-box;
    }

    .fate-hero-h1,
    .fate-hero-overtitle,
    .fate-hero-sub {
        word-break: break-word;
        hyphens: auto;
    }

    .fate-hero-actions {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    .fate-hero-actions .fate-hero-btn-secondary,
    .fate-hero-actions a {
        width: 100%;
        text-align: center;
        box-sizing: border-box;
    }
}


/* ============================================================
   7. PAGE FATE — timeline horizontale
   ============================================================
   Symptôme : `.fate-tl-year` (boutons d'années) débordent à 375.
   Fix : conteneur scroll horizontal propre + snap.
*/
@media (max-width: 768px) {
    .fate-tl-years,
    [class*="fate-tl-years"] {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 8px;
        scrollbar-width: thin;
    }

    .fate-tl-year {
        flex: 0 0 auto !important;
        scroll-snap-align: start;
    }
}


/* ============================================================
   8. PAGE COLLABORATIONS — hero
   ============================================================
   Symptôme à 375 : .collabs-hero-left (406px) et
   .collabs-hero-text (374px) dépassaient le viewport.
*/
@media (max-width: 768px) {
    .collabs-hero,
    .collabs-hero-left,
    .collabs-hero-right,
    .collabs-hero-text,
    .collabs-hero-desc {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box;
    }

    .collabs-hero-left,
    .collabs-hero-right {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    .collabs-breadcrumb {
        flex-wrap: wrap;
    }
}


/* ============================================================
   9. CONTACT — pop-up suggestion
   ============================================================
   Symptôme à 375 : `.suggestion-prompt` (195px) et son bouton
   close se positionnaient à droite hors viewport.
*/
@media (max-width: 480px) {
    .suggestion-prompt,
    #suggestionPrompt {
        right: 12px !important;
        left: 12px !important;
        max-width: calc(100vw - 24px) !important;
        bottom: 80px !important;
    }

    .suggestion-close {
        right: 4px !important;
    }
}


/* ============================================================
   10. IMAGES — règle de garantie globale
   ============================================================
   Garantit qu'aucune image ne dépasse jamais son conteneur,
   peu importe la page. Filet de sécurité général.
*/
img,
picture > img,
figure > img {
    max-width: 100%;
    height: auto;
}


/* ============================================================
   11. POP-UP D'ACCUEIL — taille mobile
   ============================================================
   `.fate-popup` peut dépasser l'écran à 320px à cause d'un
   `min-width` trop large. On le contraint.
*/
@media (max-width: 480px) {
    #fate-popup-overlay .fate-popup,
    .fate-popup {
        width: calc(100vw - 24px) !important;
        max-width: calc(100vw - 24px) !important;
        min-width: 0 !important;
        margin: 12px !important;
        padding: 20px !important;
        box-sizing: border-box;
    }
}


/* ============================================================
   12. FORMULAIRES — inputs en pleine largeur sur mobile
   ============================================================
   Sécurise tous les formulaires (contact, adherer, suggestions)
   pour qu'aucun champ ne dépasse, peu importe les classes
   utilisées par chaque page.
*/
@media (max-width: 768px) {

    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="number"],
    input[type="url"],
    input[type="search"],
    textarea,
    select {
        max-width: 100%;
        box-sizing: border-box;
    }

    .form-row,
    .form-group {
        flex-wrap: wrap;
        width: 100%;
    }
}


/* ============================================================
   13. TABLEAUX — wrapper scroll sur mobile
   ============================================================
   Si des tableaux sont injectés (rapports, partenaires…),
   on évite qu'ils explosent le layout.
*/
@media (max-width: 768px) {
    table {
        display: block;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}


/* ============================================================
   14. FOOTER & TYPOGRAPHIE — fluidité 320→1920
   ============================================================
   Évite les ruptures brutales de taille de texte entre
   breakpoints. clamp() rend les titres fluides.
*/
@media (max-width: 480px) {

    h1,
    .h1 {
        font-size: clamp(28px, 8vw, 40px) !important;
        line-height: 1.15 !important;
    }

    h2,
    .h2 {
        font-size: clamp(22px, 6vw, 32px) !important;
        line-height: 1.2 !important;
    }
}


/* ============================================================
   15. IFRAMES (YouTube, Google Maps) — responsive
   ============================================================
   Toute iframe doit s'adapter au conteneur.
*/
iframe {
    max-width: 100%;
}

.video-wrapper,
[class*="video-wrap"] {
    position: relative;
    width: 100%;
    aspect-ratio: 16/9;
}

.video-wrapper iframe,
[class*="video-wrap"] iframe {
    width: 100%;
    height: 100%;
    border: 0;
}


/* ============================================================
   16. SUGGESTION PROMPT — cause racine du scroll horizontal
   ============================================================
   Symptôme : scroll horizontal de la page entière sur l'index
   (et toute page incluant la prompt) en 320/375/768. Cause :
   `.suggestion-prompt` est `position: fixed` + `transform:
   translateX(100%) scale(0.8)` quand non `.show`. Le translateX
   pousse l'élément hors viewport à droite, et `position: fixed`
   échappe au clipping de `body { overflow-x: clip }` (les fixed
   sont positionnés par rapport au viewport, hors du flux body).
   Conséquence : la page entière scrolle horizontalement.

   Fix : tant que la classe `.show` n'est pas posée par le JS,
   on retire l'élément du flux visuel via `display: none`. La
   transition d'apparition reste pilotée par le JS (toggle de
   `.show`), donc aucun comportement utilisateur n'est cassé.

   Bonus : on neutralise aussi tout `transform` initial qui
   pourrait causer le même problème sur d'autres éléments fixed.
*/
.suggestion-prompt:not(.show),
#suggestionPrompt:not(.show) {
    display: none !important;
}

/* Garde-fou : aucun élément fixed ne doit jamais provoquer un
   scroll horizontal de la page, même en cours d'animation. */
@media (max-width: 1100px) {

    .suggestion-prompt,
    #suggestionPrompt {
        max-width: calc(100vw - 24px) !important;
    }
}


/* ============================================================
   17. HERO SLIDER — neutraliser le scale qui force un scroll
   ============================================================
   Symptôme persistant après le fix de la prompt : à 375/768 sur
   l'index, scroll horizontal subsistant. Cause : les `<img>` du
   hero ont `transform: scale(1.05)` (effet zoom à l'arrivée du
   slide). À 105% du parent, l'image déborde de 5% à droite. Le
   parent `.fate-hero` est pourtant `overflow: hidden`, mais
   selon l'enchaînement des transitions Playwright capture la
   page avant la fin de l'animation, et le scale est encore
   appliqué pleinement. Sur les vrais navigateurs mobile, le
   même comportement peut générer un sursaut latéral à l'arrivée.

   Fix : sur tous viewports, l'image hero reste à scale(1) ou
   inférieur — l'effet "zoom" passe d'un effet de scale à un
   effet d'opacity (déjà géré par le transition opacity:0.8s).
*/
.fate-hero-slide img {
    max-width: 100% !important;
    transform: scale(1) !important;
}


/* ============================================================
   18. CLIP HORIZONTAL — double sécurité root
   ============================================================
   `overflow-x: clip` est censé contenir tout débordement, mais
   sur certains navigateurs/setups, des éléments `position: fixed`
   ou transformés peuvent encore provoquer du scrollWidth résiduel.
   Le complément `overflow-x: hidden` sur html assure le clipping
   même dans ces cas — combiné, on couvre tous les moteurs.
*/
html {
    overflow-x: hidden;
}


/* ============================================================
   19. HEROS DES PAGES INTÉRIEURES — titres tronqués
   ============================================================
   Symptôme à 320/375 : sur les pages "À propos" (fate.html),
   "Collaborations", "Partenaires", etc., le titre principal
   (`.fate-page-hero h1`) débordait du viewport. Sur fate.html,
   le `<em>` du titre ("Notre Histoire") avait `white-space: nowrap`
   qui forçait le mot sur une seule ligne, peu importe la largeur.

   Cause :
   - `pages-fate.css:101` impose `font-size: clamp(40px, 5.5vw, 72px)`
     → à 320 px, on est toujours à 40 px minimum, alors qu'il faudrait
     descendre à 26-30 px pour tenir.
   - `pages-fate.css:114` impose `white-space: nowrap` sur `em` —
     fait pour éviter "Notre / Histoire" mais casse à <=375 px.

   Fix : on autorise un seuil mobile plus bas, on libère le wrap,
   on réduit le letter-spacing négatif (qui rendait le calcul de
   largeur encore plus serré).
*/
@media (max-width: 480px) {

    .fate-page-hero h1,
    .fate-page-hero h1 em,
    .collabs-hero h1,
    .collabs-hero h1 em,
    .actu-hero h1,
    .actu-hero h1 em,
    .actions-hero h1,
    .actions-hero h1 em,
    .ev-hero h1,
    .ev-hero h1 em {
        font-size: clamp(26px, 8vw, 36px) !important;
        letter-spacing: -0.5px !important;
        white-space: normal !important;
        word-break: break-word;
        hyphens: auto;
        line-height: 1.1 !important;
    }

    .fate-page-hero h1 em,
    .collabs-hero h1 em,
    .actu-hero h1 em,
    .actions-hero h1 em,
    .ev-hero h1 em {
        display: block !important;
    }
}

/* À 481-768 : laisser un peu plus de respiration */
@media (min-width: 481px) and (max-width: 768px) {

    .fate-page-hero h1,
    .fate-page-hero h1 em,
    .collabs-hero h1,
    .collabs-hero h1 em,
    .actu-hero h1,
    .actu-hero h1 em,
    .actions-hero h1,
    .actions-hero h1 em,
    .ev-hero h1,
    .ev-hero h1 em {
        font-size: clamp(32px, 5vw, 44px) !important;
        white-space: normal !important;
    }
}


/* ============================================================
   20. PAGES ÉVÉNEMENT — overlay/badges sur l'image hero
   ============================================================
   Symptôme à 320 sur les pages CAN/Assainissement/Plantation :
   les badges en overlay sur l'image hero (`Actions écocitoyennes`,
   `Missions économiques`) se posaient juste à côté du bord droit,
   parfois clippés ("Diffusion des marc..." tronqué).

   Fix : padding mobile + max-width 100% sur les overlays / badges.
*/
@media (max-width: 480px) {

    .ev-hero,
    .ev-hero-left,
    .ev-hero-right,
    .ev-hero-text,
    .ev-breadcrumb {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box;
    }

    [class*="ev-overlay"],
    [class*="ev-badge"] {
        max-width: calc(100% - 16px);
        word-break: break-word;
    }
}


/* ============================================================
   21. RESIZE MOBILE → DESKTOP — drawer "fantôme"
   ============================================================
   Symptôme : ouvrir le burger en mobile, puis agrandir la
   fenêtre vers desktop, laisse `body.noScroll` actif et la
   classe `.mainNav.navOpen` posée. Le body est locké, on ne
   peut plus scroller la page, alors que visuellement on est
   repassé en mode nav desktop normal.

   Le JS (`main.js`) gère désormais le resize côté logique
   (cf bloc 1 navigation), mais on garantit ici côté CSS qu'au
   delà du breakpoint desktop :
   - `body.noScroll` n'a plus aucun effet (le scroll page reste
     toujours possible en desktop),
   - les styles drawer mobile de `.mainNav.navOpen` sont
     neutralisés (déjà couvert par notre section 2 puisque la
     règle est `@media (max-width: 1100px)`, mais on double).
*/
@media (min-width: 1101px) {

    body.noScroll {
        overflow: auto !important;
    }

    .mainNav.navOpen {
        position: static !important;
        height: auto !important;
        background: transparent !important;
        padding: 0 !important;
    }
}


/* ============================================================
   22. ACCUEIL MOBILE - hero, video et stats
   ============================================================ */
@media (max-width: 768px) {

    .fate-hero {
        min-height: 0 !important;
        padding-top: 0 !important;
    }

    .fate-hero-slide img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center center !important;
    }

    .fate-hero-overlay {
        align-items: center !important;
        padding: 60px 18px !important;
        background: rgba(10, 10, 30, 0.55) !important;
    }

    .fate-hero-content {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
    }

    .fate-hero-overtitle {
        display: flex !important;
        max-width: 100% !important;
        font-size: 10px !important;
        letter-spacing: 1.4px !important;
        line-height: 1.45 !important;
        white-space: normal !important;
    }

    .fate-hero-h1 {
        font-size: clamp(28px, 9vw, 42px) !important;
        line-height: 1.08 !important;
        margin-bottom: 12px !important;
        word-break: normal;
        overflow-wrap: anywhere;
    }

    .fate-hero-sub {
        max-width: 100% !important;
        font-size: 14px !important;
        line-height: 1.55 !important;
        margin-bottom: 18px !important;
    }

    .fate-hero-actions {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        width: 100%;
    }

    .fate-hero-btn-primary,
    .fate-hero-btn-secondary {
        width: 100% !important;
        min-height: 46px;
        justify-content: center !important;
        padding: 12px 16px !important;
        text-align: center;
        white-space: normal;
    }

    .fate-hero-arrow {
        top: auto !important;
        bottom: 24px !important;
        width: 38px;
        height: 38px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 26px !important;
        background: rgba(10, 10, 30, 0.45) !important;
        border: 1px solid rgba(255, 255, 255, 0.24) !important;
        border-radius: 999px !important;
    }

    .fate-hero-arrow-left {
        left: 18px !important;
    }

    .fate-hero-arrow-right {
        right: 18px !important;
    }

    .fate-hero-dots {
        left: 50% !important;
        bottom: 38px !important;
        transform: translateX(-50%);
        justify-content: center;
    }

    .fate-about-strip {
        padding: 56px 0 34px !important;
    }

    .fate-about-wrapper {
        gap: 30px !important;
    }

    .fate-about-video {
        width: 100% !important;
        flex-basis: auto !important;
    }

    .fate-about-video-inner {
        border-radius: 12px !important;
        box-shadow: 0 14px 30px rgba(0, 0, 0, 0.16) !important;
    }

    .fun-facts-1 {
        margin-top: 0 !important;
        padding-top: 34px !important;
        padding-bottom: 42px !important;
    }

    .fun-facts-1 .row {
        --bs-gutter-x: 12px;
        --bs-gutter-y: 12px;
    }

    .fun-facts-1 [class*="col-"] {
        padding-top: 0 !important;
    }

    .fun-facts-card {
        min-height: 132px;
        margin-top: 0 !important;
        padding: 16px 10px 14px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        text-align: center !important;
        border-radius: 14px !important;
    }

    .fun-facts-card .icone-key {
        display: flex !important;
        align-items: center;
        justify-content: center;
        min-height: 42px;
    }

    .fun-facts-card .icone-key img {
        width: 42px !important;
        height: 42px !important;
    }

    .fun-facts-card h2 {
        font-size: clamp(30px, 9vw, 40px) !important;
        line-height: 1 !important;
        margin: 0 !important;
    }

    .fun-facts-card p {
        max-width: 100%;
        font-size: 10.5px !important;
        line-height: 1.25 !important;
        letter-spacing: 0.6px !important;
        overflow-wrap: anywhere;
    }
}

@media (max-width: 380px) {

    .fate-hero {
        height: min(700px, 100svh) !important;
    }

    .fate-hero-overlay {
        padding: 96px 14px 82px !important;
    }

    .fun-facts-1 .row {
        --bs-gutter-x: 8px;
        --bs-gutter-y: 8px;
    }

    .fun-facts-card {
        min-height: 126px;
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
}


/* ============================================================
   23. ACTIONS / COLLABORATIONS - mobile sans frise
   ============================================================ */
@media (max-width: 768px) {

    .actions-main .fate-timeline,
    .collabs-main .fate-timeline {
        display: none !important;
    }

    .actions-main .fate-panels-viewport,
    .collabs-main .fate-panels-viewport {
        overflow: visible !important;
    }

    .actions-main .fate-year-panel,
    .collabs-main .fate-year-panel {
        display: block !important;
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
        margin-bottom: 32px;
    }

    .actions-main .fate-year-panel:last-child,
    .collabs-main .fate-year-panel:last-child {
        margin-bottom: 0;
    }

    .actions-main .fate-panel-header,
    .collabs-main .fate-panel-header {
        margin-top: 4px;
        margin-bottom: 14px;
    }

    .actions-main .fate-panel-title,
    .collabs-main .fate-panel-title {
        font-size: 16px !important;
        letter-spacing: 0.5px !important;
        line-height: 1.25 !important;
    }

    .actions-main .voirPlusButton,
    .collabs-main .voirPlusButton {
        width: 100%;
        justify-content: center !important;
        margin-bottom: 8px !important;
        white-space: normal;
        text-align: center;
    }
}


/* ============================================================
   24. ACCUEIL MOBILE - centrage slider et actions du bas
   ============================================================ */
@media (max-width: 768px) {

    .fate-hero-dots {
        left: 50% !important;
        right: auto !important;
        width: auto !important;
        max-width: calc(100vw - 120px);
        transform: translateX(-50%) !important;
        justify-content: center !important;
        align-items: center;
    }

    .events {
        text-align: center;
    }

    .events .default-section-title {
        text-align: center !important;
        margin-left: auto;
        margin-right: auto;
    }

    .events .default-section-title h3,
    .events .default-section-title p {
        margin-left: auto;
        margin-right: auto;
    }

    .actions-grid {
        grid-template-columns: minmax(0, 1fr) !important;
        justify-items: center;
        gap: 22px !important;
        padding: 18px 0 0 !important;
    }

    .blog-card.homeActionsCardContainer {
        width: min(100%, 390px);
        margin-left: auto;
        margin-right: auto;
        text-align: center;
    }

    .blog-card.homeActionsCardContainer .blog-card-text-area {
        align-items: center;
        padding: 22px 18px !important;
        text-align: center;
    }

    .blog-card.homeActionsCardContainer .blog-date ul,
    .blog-card.homeActionsCardContainer .blog-date li {
        justify-content: center;
        text-align: center;
    }

    .blog-card.homeActionsCardContainer h4,
    .blog-card.homeActionsCardContainer .cardDescription {
        text-align: center;
    }

    .blog-card.homeActionsCardContainer .read-more-link {
        justify-content: center;
        margin-left: auto;
        margin-right: auto;
    }

    .content-btn-center {
        display: flex;
        justify-content: center;
        margin-top: 34px !important;
    }
}