/* ==========================================================================
    GLOBAL CSS - ASSOCIATION "UNE AUTRE FEMME"
    Inclus : Barre fixe, Boutons d'action, Menu Burger & États Actifs/Hover
   ========================================================================== */

/* --- 1. BARRE DE NAVIGATION (CONTENEUR) --- */
nav.ma-navbar-perso {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 80px !important;
    background-color: #373536 !important;
    color: #faf7f2 !important;
    z-index: 9998 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    border-radius: 0 0 5px 5px !important;
}

/* --- 2. LOGO --- */
nav.ma-navbar-perso img,
#logo-UAF {
    margin-left: 0 !important;
    padding-left: 0 !important;
    display: block !important;
    max-height: 103px !important;
    width: auto !important;
    z-index: 10000 !important;
}

/* --- 3. LIENS DE NAVIGATION (COMMUN) --- */
nav.ma-navbar-perso ul li a {
    text-decoration: none !important;
    transition: all 0.3s ease !important;
}

/* Fallback du burger si le composant JS/CSS Canvas ne se monte pas. */
html body .burger-menu-btn {
    display: none !important;
    position: fixed !important;
    top: 37px !important;
    left: 50% !important;
    right: auto !important;
    z-index: 10005 !important;
    width: 42px !important;
    height: 38px !important;
    padding: 8px !important;
    margin: 0 !important;
    margin-left: 0 !important;
    margin-top: 0 !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    flex-direction: column !important;
    justify-content: space-around !important;
    transform: translate(-50%, -50%) !important;
}

html body .burger-line {
    display: block !important;
    width: 100% !important;
    height: 3px !important;
    background-color: #faf7f2 !important;
    border-radius: 2px !important;
    transition: all 0.3s ease !important;
}

html body .burger-menu-btn.active .burger-line:nth-child(1) {
    transform: translateY(8px) rotate(45deg) !important;
}

html body .burger-menu-btn.active .burger-line:nth-child(2) {
    opacity: 0 !important;
}

html body .burger-menu-btn.active .burger-line:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg) !important;
}

/* --- 4. BOUTONS D'ACTION FIXES --- */
.button-connexion,
.button-escape {
    position: fixed !important;
    top: 40px !important;
    transform: translateY(-50%) !important;
    z-index: 9999 !important;
    display: flex !important;
    align-items: center !important;
    white-space: nowrap !important;
    text-decoration: none !important;
}

.button-connexion {
    right: 170px !important;
    color: #faf7f2 !important;
    font-size: 16px !important;
}

.button-escape {
    right: 20px !important;
    padding: 10px 18px !important;
    background-color: #e67e3a !important;
    color: white !important;
    border-radius: 8px !important;
}


img#logo-UAF {
    margin-right: 0 !important;
    padding-right: 0 !important;
}
nav.ma-navbar-perso a:has(#logo-UAF) {
    margin-right: 0 !important;
    padding-right: 0 !important;
    display: inline-flex !important;
    
}



/* ==========================================================================
    CONFIGURATIONS SELON LA TAILLE D'ÉCRAN
   ========================================================================== */

/* --- A. GRAND BUREAU (> 1400PX) --- */
@media (min-width: 1401px) {

    nav.ma-navbar-perso ul,
    nav.ma-navbar-perso .menu--main {
        display: flex !important;
        align-items: center !important;
        gap: 0px !important;
        margin-left: 0px !important;
        padding: 0 !important;
        list-style: none !important;
    }

    nav.ma-navbar-perso ul li a {
        font-size: 17px !important;
        color: #faf7f2 !important;
        white-space: nowrap !important;
        font-weight: 500 !important;
    }

    nav.ma-navbar-perso #logo-UAF {
        transform: translateX(-18px) !important;
    }
}

/* --- B. TABLETTE ET MOBILE (<= 1400PX) --- */
@media (max-width: 1400px) {

    nav.ma-navbar-perso {
        height: 75px !important;
    }

    #logo-UAF {
        max-height: 96px !important;
    }

    nav.ma-navbar-perso #logo-UAF {
        transform: translateX(-16px) !important;
    }

    /* MODIFICATION ICI : On cache le bouton Connexion du haut */
    .button-connexion {
        display: none !important;
    }

    .button-escape {
        top: 37px !important;
    }

    html body .burger-menu-btn {
        display: flex !important;
    }

    /* CACHE LE MENU HORIZONTAL */
    nav.ma-navbar-perso ul,
    nav.ma-navbar-perso .menu--main {
        display: none !important;
    }

    /* LE MENU DÉROULANT (VERSION COMPACTE) */
    nav.ma-navbar-perso ul.is-open {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;
        position: fixed !important;
        top: 75px !important;
        left: 0 !important;
        width: 100% !important;
        height: auto !important;
        background-color: #373536 !important;
        padding: 5px 0 !important;
        z-index: 9996 !important;
        list-style: none !important;
        border-bottom: 3px solid #f1873b !important;
        box-shadow: 0 8px 15px rgba(0, 0, 0, 0.4) !important;
        animation: slideDown 0.4s ease-out forwards;
    }

    nav.ma-navbar-perso ul.is-open li {
        width: 100% !important;
        text-align: center !important;
        margin: 0 !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.03) !important;
    }

    nav.ma-navbar-perso ul.is-open li a {
        display: block !important;
        padding: 10px 0 !important;
        font-size: 16px !important;
        font-weight: 400 !important;
        color: #faf7f2 !important;
    }

    /* EFFET HOVER / TOUCHER */
    nav.ma-navbar-perso ul.is-open li a:hover,
    nav.ma-navbar-perso ul.is-open li a:active {
        color: #f1873b !important;
        background-color: rgba(255, 255, 255, 0.02) !important;
    }

    /* ÉTAT ACTIF */
    nav.ma-navbar-perso ul.is-open li a.is-active {
        color: #f1873b !important;
        font-weight: 600 !important;
        background-color: rgba(241, 135, 59, 0.05) !important;
    }
}

/* --- C. PETIT MOBILE (< 600PX) --- */
@media (max-width: 600px) {
    nav.ma-navbar-perso {
        height: 70px !important;
    }

    .button-escape {
        top: 35px !important;
        right: 10px !important;
        padding: 8px 12px !important;
        font-size: 13px !important;
    }

    html body .burger-menu-btn {
        top: 35px !important;
    }

    #logo-UAF {
        max-height: 90px !important;
        }

    nav.ma-navbar-perso ul.is-open {
        top: 70px !important;
    }
}

/* --- ANIMATIONS --- */
@keyframes slideDown {
    from {
        transform: translateY(-20px);
        opacity: 0;
    }

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





.button-default {
    color: #faf7f2;
    margin-top: 90px;
    min-width: 200px; /* Règle de base (PC/Tablette) */
}

@media (max-width: 600px) {

    .button-default {
        min-width: 160px; 
    }
}



h2 {
    margin-top: 100px;
    margin-bottom: 100px;
}



#logo-UAF {
    width: 200px;
    height: auto;
    margin-right: 50px;
    margin-left: -18px;

}

.heading-responsive-4xl {
    color: #2f4f4f;
}


/* --- Base (Bureau) --- */
.group-home {
    background-image: url('../image/aditya-saxena-_mIXHvl_wzA-unsplash.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 15px;
}

.group-home-inner {
    display: grid;
    /* 3 colonnes par défaut pour grand écran */
    grid-template-columns: 1fr 0.8fr 1fr;
    gap: 20px;
    padding: 100px 5%;
    border-radius: 15px;
}

.group-home-inner>* {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start;
    text-align: left;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 30px;
    border-radius: 15px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.1);
}

/* Positionnement par défaut (Bureau) */
.group-home-inner>*:first-child {
    grid-column: 1;
}

.group-home-inner>*:last-child {
    grid-column: 3;
}

.group-home-inner h2,
.group-home-inner .heading {
    width: 100%;
    margin-bottom: 15px;
}

/* --- RESPONSIVE --- */

/* Tablettes (Écrans moyens, max 1024px) */
@media (max-width: 1024px) {
    .group-home-inner {
        /* On réduit l'espace vide au milieu pour que les cartes aient plus de place */
        grid-template-columns: 1fr 0.2fr 1fr;
        /* On réduit un peu le padding en haut et en bas */
        padding: 60px 5%;
    }
}

/* Mobiles (Petits écrans, max 768px) */
@media (max-width: 768px) {
    .group-home-inner {
        grid-template-columns: minmax(0, 1fr);
        padding: 40px 5%;
    }

    .group-home-inner > *:first-child,
    .group-home-inner > *:last-child {
        grid-column: 1;
    }

    .group-home-inner > * {
        min-width: 0;
        /* Sécurité supplémentaire : inclure le padding dans la largeur de la carte */
        box-sizing: border-box; 
    }

    /* --- LA CORRECTION EST ICI --- */
    /* On cible spécifiquement les titres pour régler le problème du mot long */
    .group-home-inner h6,
    .group-home-inner .heading {
        /* Force le navigateur à couper le mot s'il est trop long pour l'écran */
        overflow-wrap: break-word;
        word-wrap: break-word;
        word-break: break-word;
        -webkit-hyphens: auto;
        hyphens: auto; 
    
        font-size: 1.8rem;
    }


    .group-home-inner {
        /* On s'assure que le conteneur prend bien 100% de l'espace disponible */
        width: 100%;
        box-sizing: border-box;
        /* On centre le conteneur lui-même */
        margin: 0 auto; 
    }

    .group-home-inner > * {
        /* On force la carte à prendre 100% de la largeur autorisée par le padding */
        width: 100%;
        /* On écrase les marges par défaut que Drupal pourrait ajouter */
        margin: 0 !important; 
        box-sizing: border-box;
    }
}







/* --- LE CONTENEUR FLEXBOX --- */
.group-mission,
.group-mission>div,
.group-mission>.flex-container {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: stretch !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* 1. LE CONTENEUR (Le fond gris) */
.group-mission {
    border-radius: 15px;
    padding: 20px 0 !important;
}

/* --- 1. LA CARTE DE BASE (Taille uniforme) --- */
.card-mission {
    width: 100% !important;
    max-width: 380px !important;
    height: auto !important;
    aspect-ratio: auto !important;
    min-height: 250px !important;

    margin: 15px 15px 30px 15px !important;
    box-sizing: border-box !important;
}

/* --- TABLETTES ET MOBILES (Moins de 1250px) --- */
@media (max-width: 1250px) {
    .card-mission {
        max-width: 320px !important;
        margin: 10px 10px 25px 10px !important;
    }
}

/* --- 2. ALIGNEMENT INTERNE : ICÔNES ET TEXTE --- */

/* On aligne le contenu en haut et on s'assure qu'il prend toute la place interne */
.card-mission>div.flex-col {
    justify-content: flex-start !important;
    padding-top: 1rem !important;
    /* Un peu d'espace en haut */
    height: 100% !important;
}

/* On fixe la taille du conteneur de l'icône pour aligner le texte */
.card-mission .card-mission-icon {
    min-height: 40px !important;
    /* Espace réservé à l'icône */
    align-items: center !important;
    margin-bottom: 0.5rem !important;
    /* Espace sous l'icône */
}

.group-actualite {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 20px;
    padding: 80px;
    border-radius: 15px;
}

.card-actu {
    flex: 0 0 40%;
    min-width: 300px;
    height: auto;
    color: #373536;
    border: 1px solid #e67e3a
}

.card-actu h3 {
    color: #2f4f4f;
}


.group-temoignage {
    border-radius: 15px;
    padding-top: 20px;
    padding-bottom: 40px;
}


.temoignage {
    border-bottom: 2px solid #e67e3a;
    padding-bottom: 70px;
    margin-bottom: 20px;
    margin-top: 15px;
    width: 100%;

}

.h2-custom {
    margin-top: 150px;
    margin-bottom: -30px;
}

.small-paragraphe {
    margin-top: 50px;
    margin-bottom: 70px;
}

.small-paragraphe strong {
    color: #e67e3a;
}



/* ==========================================================================
   1. CARTE PRODUIT - BASE (Mobile par défaut < 600px)
   ========================================================================== */

/* Conteneur principal qui sert de repère absolu pour le groupe Prix/Bouton */
.ma-carte-produit {
    margin-top: 60px;
    position: relative; /* TRÈS IMPORTANT : Garde le prix et le bouton à l'intérieur */
}

/* La carte avec la bordure verte */
.ma-carte-produit .card-price {
    display: flex;
    flex-direction: column; /* Sur mobile : image en haut, texte en bas */
    width: 100%;
    align-items: flex-start;
    border: 1px solid #2f4f4f;
    box-sizing: border-box;
    /* On met le padding ici pour agrandir la bordure vers le bas et faire de la place aux boutons */
    padding-bottom: 90px; 
}

/* Conteneur de l'image */
.ma-carte-produit .img-price-card {
    width: 100%;
    height: auto;
    border-radius: 15px;
    border: 1px solid #e67e3a;
    box-sizing: border-box;
    display: flex;
    overflow: hidden;
}

.ma-carte-produit .img-price-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Zone de texte */
.ma-carte-produit .text-price-card {
    width: 100%;
    padding: 40px; 
    color: #373536;
    display: flex;
    flex-direction: column;
}

.ma-carte-produit .text-price-card h3 {
    color: #2f4f4f;
    width: 100%;
}


/* ==========================================================================
   2. ZONE INFO PRODUITS (Prix + Bouton) - POSITIONNEMENT MOBILE
   ========================================================================== */

/* On positionne le groupe par-dessus la carte pour qu'il rentre dans la bordure */
.group-info-produit {
    position: absolute;
    z-index: 10;
    bottom: 30px; 
    left: 0; 
    right: 0; 
}

/* On cible le groupe et le sous-dossier généré par Drupal */
.group-info-produit,
.group-info-produit > div {
    display: flex;
    /* column-reverse met le prix en haut et le bouton en bas (car inversé dans Drupal) */
    flex-direction: column-reverse !important; 
    align-items: center !important;
    justify-content: center !important;
    gap: 15px;
}

/* Sécurité : on annule totalement tes anciens réglages */
.group-info-produit .txt-prix,
.group-info-produit .button-achat {
    transform: none !important;
    margin: 0 !important;
}


/* ==========================================================================
   3. MODE TABLETTE ET BUREAU (Dès 601px) - POSITIONNEMENT BUREAU
   ========================================================================== */
@media screen and (min-width: 701px) {
        
    .ma-carte-produit .card-price {
        flex-direction: row;
    }

  
    .ma-carte-produit .img-price-card {
        width: 35%;
        min-width: 250px;
        min-height: 300px;
    }


    .group-info-produit {
        left: auto;   
        right: 40px;  
        bottom: 30px; 
        
    }

  
    .group-info-produit,
    .group-info-produit > div {
        flex-direction: row-reverse !important; 
        justify-content: flex-end !important;
        align-items: center !important; 
        gap: 30px; 
    }
}

.image-custom {

    margin-top: 70px;
    width: 65%;
    height: auto;
}

.image-custom-2 {

    margin-top: 70px;
    max-width: 200px;
    width: auto;
    height: auto;
}

.image-custom-3 {

    margin-top: 70px;
    width: 30%;
    height: auto;
}

/* ==========================================================================
   STYLE DE BASE (POUR TÉLÉPHONES ET TABLETTES)
   ========================================================================== */
.image-custom-4 {
    display: block;
    /* Indispensable pour centrer une image avec margin */
    width: 90%;
    /* L'image prend 90% de l'écran sur mobile, pour être lisible */
    max-width: 400px;
    /* Évite que l'image devienne floue si on l'étire trop */
    height: auto;
    /* Garde les proportions intactes */
    margin: 70px auto 40px auto;
    /* 70px en haut, auto (centre) à gauche/droite, 40px en bas */
}

/* ==========================================================================
   STYLE POUR ORDINATEURS (Écrans > 768px)
   ========================================================================== */
@media (min-width: 768px) {
    .image-custom-4 {
        width: 30%;
        /* Sur grand écran, l'image reprend sa taille initiale de 30% */
        /* Le margin: auto continuera de la centrer proprement */
    }
}


/* =========================================
   BLOC RESSOURCES (Violentomètre)
========================================= */

.group-ressources {
    display: grid !important;
    /* On donne plus de place à l'image car elle est large : 45% pour l'image, le reste pour le texte */
    grid-template-columns: 1.2fr 1fr !important;

    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;

    align-items: center !important;
    gap: 40px !important;
    padding: 40px !important;
    box-sizing: border-box !important;

    /* On s'assure que le flex natif ne nous gêne pas */
    flex-direction: unset !important;
}

/* 1. L'IMAGE (Violentomètre) */
.image-custom-7 {
    width: 100% !important;
    max-width: 500px !important;
    /* On limite un peu pour ne pas qu'elle soit géante sur écran cinéma */
    height: auto !important;
    margin: 0 !important;
    justify-self: center !important;
}

/* 2. LE TEXTE */
.txt-ressources {
    /* On réutilise la même logique d'expansion que tout à l'heure */
    width: 100% !important;
    max-width: none !important;
    text-align: left !important;
}

/* On force le contenu du texte à prendre toute la largeur de sa colonne */
.txt-ressources *,
.txt-ressources p {
    max-width: none !important;
    width: 100% !important;
}

/* =========================================
   FIX MOBILE : VIOLENTOMÈTRE (image-custom-7)
========================================= */

@media (max-width: 900px) {

    /* 1. On s'assure que le conteneur est bien en mode "empilement" */
    .group-ressources {
        display: flex !important;
        /* On passe en Flex pour le mobile, c'est plus stable */
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        padding: 20px !important;
    }

    /* 2. ON FORCE L'IMAGE À APPARAÎTRE */
    .image-custom-7 {
        display: block !important;
        /* On annule tout éventuel "hidden" */
        visibility: visible !important;
        opacity: 1 !important;

        /* Taille adaptée au téléphone */
        width: 100% !important;
        max-width: 320px !important;
        /* Largeur idéale pour un smartphone */
        height: auto !important;

        /* On la place en haut avec un peu d'espace */
        order: 1 !important;
        margin: 0 auto 20px auto !important;
    }

    /* 3. LE TEXTE S'AFFICHE EN DESSOUS */
    .group-ressources .txt-ressources {
        order: 2 !important;
        width: 100% !important;
    }
}




/* =========================================
   BLOC PLATEFORME - VERSION PLEINE LARGEUR
========================================= */

.groupe-plateforme {
    display: grid !important;
    /* On garde nos 3 colonnes */
    grid-template-columns: 220px 1fr auto !important;

    /* SOLUTION : On fait sauter les limites et les marges oranges */
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;

    /* Espacements internes */
    gap: 0 40px !important;
    align-items: center !important;
    padding: 20px 40px !important;
    /* Ajuste le 40px si tu veux que le contenu soit moins collé aux bords de l'écran */
    box-sizing: border-box !important;
}

/* On s'assure que le texte reste bien large */
.txt-ressources {
    grid-column: 2 !important;
    width: 100% !important;
    max-width: none !important;
}

/* On cible tous les sous-éléments (p, div, span) à l'intérieur du texte */
.txt-ressources *,
.txt-ressources div,
.txt-ressources p {
    max-width: none !important;
    width: 100% !important;
}

/* --- LE BOUTON --- */
.button-ressources {
    grid-column: 3 !important;
    justify-self: end !important;
    white-space: nowrap !important;
    /* Empêche le bouton de s'écraser */
}

/* --- L'IMAGE --- */
.image-custom-5,
.groupe-plateforme figure {
    grid-column: 1 !important;
    width: 200px !important;
    margin: 0 !important;
}

/* =========================================
   RESPONSIVE MOBILE
========================================= */
@media (max-width: 900px) {
    .groupe-plateforme {
        grid-template-columns: 1fr !important;
        text-align: center !important;
        gap: 20px !important;
    }

    .groupe-plateforme>* {
        grid-column: 1 !important;
        justify-self: center !important;
    }
}



.group-soutien {
    background-image: url('../image/Sport--bien-etre.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 15px;
    margin-top: 70px;
    margin-bottom: 70px;

}

/* La grille pour séparer les deux groupes natifs */
.group-soutien-inner {
    display: grid;
    /* 3 colonnes : Gauche (1) / Vide (0.8) / Droite (1) */
    grid-template-columns: 1fr 0.8fr 1fr;
    gap: 20px;
    padding: 100px 5%;
    border-radius: 15px;
}

/* On cible les deux Group natifs de Drupal injectés dans le slot */
.group-soutien-inner>* {
    display: flex !important;
    flex-direction: column !important;
    /* Force le Header AU-DESSUS du texte */
    align-items: flex-start;
    text-align: left;
    color: #2f4f4f;

    /* 1. Fond blanc très transparent */
    background: rgba(255, 255, 255, 0.2);

    /* 2. L'effet de flou (Glassmorphism) */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    /* Pour Safari */

    /* 3. Esthétique : bords arrondis et marges internes */
    padding: 30px;
    border-radius: 15px;

    /* 4. Bordure légère pour faire ressortir le bloc */
    border: 1px solid rgba(255, 255, 255, 0.3);

    /* 5. Ombre portée douce pour la profondeur */
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.1);
}

/* Positionnement du premier groupe (Gauche) */
.group-soutien-inner>*:first-child {
    grid-column: 1;
}

/* Positionnement du deuxième groupe (Droite) */
.group-soutien-inner>*:last-child {
    grid-column: 3;
}

/* Ajustement des Headers (H2 ou autre) pour qu'ils ne flottent pas */
.group-soutien-inner h2,
.group-soutien-inner .heading {
    width: 100%;
    margin-bottom: 15px;
}

.group-accompagnement {
    background-image: url('../image/Group-accompagnement.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 15px;
    margin-top: 70px;
    margin-bottom: 70px;

}

/* La grille pour séparer les deux groupes natifs */
.group-accompagnement-inner {
    display: grid;
    /* 3 colonnes : Gauche (1) / Vide (0.8) / Droite (1) */
    grid-template-columns: 1fr 0.8fr 1fr;
    gap: 20px;
    padding: 100px 5%;
    border-radius: 15px;
}

/* On cible les deux Group natifs de Drupal injectés dans le slot */
.group-accompagnement-inner>* {
    display: flex !important;
    flex-direction: column !important;
    /* Force le Header AU-DESSUS du texte */
    align-items: flex-start;
    text-align: left;
    color: #2f4f4f;

    /* 1. Fond blanc très transparent */
    background: rgba(255, 255, 255, 0.6);

    /* 2. L'effet de flou (Glassmorphism) */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    /* Pour Safari */

    /* 3. Esthétique : bords arrondis et marges internes */
    padding: 30px;
    border-radius: 15px;

    /* 4. Bordure légère pour faire ressortir le bloc */
    border: 1px solid rgba(255, 255, 255, 0.3);

    /* 5. Ombre portée douce pour la profondeur */
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.1);
}

/* Positionnement du premier groupe (Gauche) */
.group-accompagnement-inner>*:first-child {
    grid-column: 1;
}

/* Positionnement du deuxième groupe (Droite) */
.group-accompagnement-inner>*:last-child {
    grid-column: 3;
}

/* Ajustement des Headers (H2 ou autre) pour qu'ils ne flottent pas */
.group-accompagnement-inner h2,
.group-accompagnement-inner .heading {
    width: 100%;
    margin-bottom: 15px;
}

/* ==========================================================================
   CONFIGURATIONS GLOBAL POUR L'IMAGE-CUSTOM-6
   ========================================================================== */

/* 1. RÉGLAGES POUR ORDINATEUR (Desktop : > 900px) */
/* (J'ai agrandi la taille de 10% pour un meilleur rendu visuel) */


@media (min-width: 901px) {
    .image-custom-6 {
        display: block;
        width: 100%;
        max-width: 935px;
        height: auto;
        margin: 50px auto;
    }
}

/* ==========================================================================
   CONFIGURATIONS RESPONSIVE (Tablette et Téléphone)
   ========================================================================= */


@media (max-width: 900px) {
    .image-custom-6 {
        max-width: 100%;
        width: 100%;
        min-width: 100%;
        height: auto;
        object-fit: contain;
        margin-bottom: 30px;
    }

    /* On dit aux groupes contenant ces images d'autoriser le retour à la ligne (Important pour Mercury) */
    div:has(.image-custom-6) {
        flex-wrap: wrap !important;
    }
}


.group-actions {
    background-image: url('../image/group-actions.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 15px;
    margin-top: 70px;
    margin-bottom: 70px;

}

/* La grille pour séparer les deux groupes natifs */
.group-actions-inner {
    display: grid;
    /* 3 colonnes : Gauche (1) / Vide (0.8) / Droite (1) */
    grid-template-columns: 1fr 0.8fr 1fr;
    gap: 20px;
    padding: 100px 5%;
    border-radius: 15px;
}

/* On cible les deux Group natifs de Drupal injectés dans le slot */
.group-actions-inner>* {
    display: flex !important;
    flex-direction: column !important;
    /* Force le Header AU-DESSUS du texte */
    align-items: flex-start;
    text-align: left;
    color: #faf7f2;

    /* 1. Fond blanc très transparent */
    background: rgba(255, 255, 255, 0.2);

    /* 2. L'effet de flou (Glassmorphism) */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    /* Pour Safari */

    /* 3. Esthétique : bords arrondis et marges internes */
    padding: 30px;
    border-radius: 15px;

    /* 4. Bordure légère pour faire ressortir le bloc */
    border: 1px solid rgba(255, 255, 255, 0.3);

    /* 5. Ombre portée douce pour la profondeur */
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.1);
}

/* Positionnement du premier groupe (Gauche) */
.group-actions-inner>*:first-child {
    grid-column: 1;
}

/* Positionnement du deuxième groupe (Droite) */
.group-actions-inner>*:last-child {
    grid-column: 3;
}

/* Ajustement des Headers (H2 ou autre) pour qu'ils ne flottent pas */
.group-actions-inner h2,
.group-actions-inner .heading {
    width: 100%;
    margin-bottom: 15px;
}

.image-custom-7 {

    margin: 50px;
    width: 650px;
    height: auto;
    justify-content: center;
}

h1 {
    margin-top: 100px;
    color: #2f4f4f;
}



/* =========================================
   FOOTER GLOBAL
========================================= */
.footer-custom {
    width: 100%;
    box-sizing: border-box;
    padding-top: 20px;
    margin-top: 90px;
    color: #faf7f2;
    background-color: #373536;
    border-radius: 5px;
    overflow: hidden;
}

/* Le grand conteneur principal */
.footer-custom > div {
    display: flex;
    position: relative;
    flex-direction: row;
    justify-content: space-between; 
    align-items: center;
    width: 100%;
    /* On met 50px à gauche, mais seulement 10px à droite pour coller les boutons au bord ! */
    padding: 40px 10px 40px 50px; 
    box-sizing: border-box;
}

/* =========================================
   RÉGION 1 : GAUCHE (Suivez-nous + Contact)
========================================= */
.footer-custom > div > div:first-child {
    display: grid;
    /* Le 1fr permet au bloc contact de s'étirer et de se centrer naturellement */
    grid-template-columns: max-content max-content 1fr; 
    grid-auto-rows: min-content;
    align-items: center;
    column-gap: 40px; /* Espace entre le texte Suivez-nous et les icônes */
    row-gap: 15px;
    width: 75%; /* On réserve 75% de la largeur pour cette partie */
    margin: 0;
    padding: 0;
}

/* 1. Texte "Suivez-nous" */
.footer-paragraphe {
    grid-column: 1;
    grid-row: 1 / span 10;
    margin: 0;
    padding: 0;
    align-self: center; /* Centre le texte sur la hauteur des icônes */
    transform: translateY(-46px);
}

/* 2. Icônes */
a.icon-custom {
    grid-column: 2;
    margin: 0;
    display: flex;
    transition: transform 0.3s ease, color 0.3s ease;
    color: #faf7f2;
}

a.icon-custom:hover {
    transform: scale(1.15);
    color: #e67e3a;
}

/* 3. Le texte de Contact */
.footer-paragraphe-2 {
    display:flex;
    grid-column: 3;
    grid-row: 1 / span 10;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center; /* Centre parfaitement le texte Contact dans son espace 1fr */
    text-align: center;
    height: 100%;

    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}



.footer-paragraphe-2 a,
.footer-paragraphe-2 span,
.footer-paragraphe-2 p {
    display: block;
    margin-top: 5px;
    text-align: left;
}

/* =========================================
   RÉGION 2 : DROITE (Les boutons)
========================================= */
.footer-custom > div > div:last-child {
    display: flex;
    flex-direction: column;
    align-items: flex-end; /* Colle les boutons au bord droit de leur conteneur */
    justify-content: center;
    width: 230px;
    gap: 15px;
    padding: 0;
    margin: 0;
}

.button-footer {
    color: #faf7f2;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: 200px;
    margin: 0;
}

/* =========================================
   RESPONSIVE : MOBILES & TABLETTES
========================================= */
@media (max-width: 1024px) {
    .footer-custom > div {
        padding: 40px 20px; /* On égalise les marges sur tablette */
    }
    .footer-custom > div > div:first-child {
        width: 70%;
        column-gap: 20px;
    }
    .footer-custom > div > div:last-child {
        width: 30%;
    }
}



@media (max-width: 900px) {
    .footer-custom > div {
        flex-direction: column;
        padding: 40px 20px;
        gap: 50px;
    }

    .footer-custom > div > div:first-child {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        gap: 20px;
    }

    .footer-paragraphe {
        margin-top: 20px;
        margin-bottom: -50px;
        text-align: center;
    }


    .footer-paragraphe-2 {
        position: static !important;
        transform: none !important;
        margin-top: 20px;

    }

    .footer-custom > div > div:last-child {
        width: 100%;
        align-items: center;
    }
}











/* =========================================
   BLOC ACTUALITÉS - 
========================================= */

div.block-actus {
    background-color: var(--secondary);
    border-radius: 15px;
    margin-top: 50px;
    padding: 80px 20px;
    box-sizing: border-box !important;
    width: 100% !important;
}

div.block-actus h2 {
    margin-top: 5px;
    margin-bottom: 60px;
}

/* 1. La vraie grille CSS (Priorité maximale) */
div.block-actus .view-content {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(280px, 650px)) !important;
    justify-content: center !important;
    gap: 40px !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;

}

/* 2. Les cartes : On cible TOUS les enfants directs (l'astuce est le "> *") */
div.block-actus .view-content>* {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    background-color: var(--card) !important;
    padding: 30px 15px !important;
    width: 100% !important;
    border: 1px solid #e67e3a !important;
    border-radius: 15px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    /* Empêche l'image de déborder si elle est trop grande */
}

/* 3. Boutons "En savoir plus" (Style générique des liens) */
div.block-actus a {
    border: 1px solid #373536;
    border-radius: 15px;
    padding: 15px;
    text-decoration: none;
    display: inline-block;
    width: fit-content;
    transition: all 0.2s ease-in-out;
    color: #2f4f4f;
}

div.block-actus a:hover {
    background-color: #e67e3a;
    color: #faf7f2;
}

/* 4. Images */
div.block-actus img {
    border-radius: 15px !important;
    width: 100% !important;
    height: 300px !important;
    object-fit: cover !important;
    max-width: 100% !important;
    /* Sécurité anti-débordement */
}

/* 5. Nettoyage TOTAL des liens sur les titres (pour éviter l'effet "gros bouton") */
div.block-actus .view-content>*>a:first-of-type,
div.block-actus .view-content>* h2 a,
div.block-actus .view-content>* h3 a,
div.block-actus .view-content>* header a {
    font-size: 28px !important;
    padding: 0 !important;
    border: none !important;
    background-color: transparent !important;
    color: #2f4f4f !important;
    margin-top: 0 !important;
    pointer-events: none !important;
    /* Rend le titre non-cliquable */
    white-space: normal !important;
    word-break: break-word !important;
}

/* 6. Nettoyage listes Drupal */
div.block-actus .view-content>* ul,
div.block-actus .view-content>* li {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

div.block-actus .view-content>* li::marker {
    display: none !important;
}

/* =========================================
   RESPONSIVE : MOBILES (Max 768px)
========================================= */
@media (max-width: 768px) {
    div.block-actus {
        padding: 40px 15px !important;
    }

    /* On passe à 1 seule colonne */
    div.block-actus .view-content {
        grid-template-columns: 1fr !important;
        gap: 30px !important;
    }
}






/* ==========================================================================
   MUR DE PARTENAIRES - FLEXBOX (Centrage des orphelins)
   ========================================================================== */

/* 1. LE CONTENEUR PARENT */
.group-partenaire {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;

    gap: 40px;
    width: 100%;
    max-width: 1200px;

    /* MODIFICATION CLÉ : On centre le bloc entier sur la page */
    margin-left: auto;
    margin-right: auto;
    margin-top: 40px;
    margin-bottom: 40px;
    /* OU la version raccourcie si tu préfères : margin: 40px auto; */

    padding: 20px;
    box-sizing: border-box;
}

/* 2. LES BOÎTES DRUPAL (Chaque case de logo) */
.group-partenaire>* {
    /* flex: grow shrink basis */
    /* 0 = ne grandit pas pour remplir le vide, 1 = peut rétrécir sur petit écran, 180px = largeur de base */
    flex: 0 1 180px;

    display: flex;
    justify-content: center;
    align-items: center;
    height: 120px;
    /* On fixe une hauteur de case pour que la ligne soit bien droite */
}

/* 3. CIBLAGE DES IMAGES (Les logos) */
.group-partenaire img {
    display: block;
    max-width: 100%;
    height: auto;
    max-height: 100px !important;
    /* Le logo ne débordera jamais de sa case de 120px */
    object-fit: contain;
    margin: 0;
}


/* ==========================================================================
   SÉCURITÉ MOBILE - GRILLE DE LOGOS (2 par ligne PARFAITEMENT CENTRÉS)
   ========================================================================== */
@media screen and (max-width: 650px) {

    .group-partenaire {
        gap: 15px !important;
        padding: 10px !important;
        justify-content: center !important;
        /* 1. Force le groupe de logos au centre de l'écran */
    }

    .group-partenaire>* {
        /* 45% de largeur assure qu'on en met exactement 2 par ligne, avec de la marge */
        flex: 0 0 45% !important;
        max-width: 45% !important;

        /* 2. Force le comportement Flex sur la case elle-même */
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;

        height: 100px !important;
        box-sizing: border-box !important;
        margin: 0 !important;
    }


}




/* =========================================
   PAGE ACTUALITÉS
========================================= */

/* Conteneur principal */
.view-id-actualites {
    background-color: var(--secondary);
    border-radius: 15px;
    display: block !important;
    margin: 50px auto 40px auto !important;
    padding: 60px 20px;
    box-sizing: border-box !important;
    width: fit-content !important;
    max-width: 100% !important;
}

/* Grille principale (Bureau) */
.view-id-actualites .view-content {
    display: grid !important;
    grid-template-columns: repeat(4, 280px) !important;
    justify-content: center !important;
    gap: 25px !important;
    width: 100% !important;
    margin: 0 auto 40px auto !important;
}

/* Cartes (Colonnes) */
.page-actus-column {
    display: flex !important;
    flex-direction: column !important;
    background-color: var(--card);
    padding: 20px 15px !important;
    border: 1px solid #e67e3a;
    border-radius: 15px;
    box-sizing: border-box !important;
    width: 280px !important;
    margin-bottom: 50px !important;
}

/* Typographie et espacements des textes */
.page-actus-column h2 {
    margin-top: 20px;
    margin-bottom: 30px;
}

.page-actus-column h2,
.page-actus-column h3,
.page-actus-column .node__content,
.page-actus-column p {
    padding-left: 6px !important;
    padding-right: 6px !important;
    margin-bottom: 15px !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
    line-height: 1.2 !important;
    width: 100% !important;
}

/* Images */
.page-actus-column img {
    border-radius: 10px;
    width: 100% !important;
    height: 180px !important;
    object-fit: cover;
    padding: 4px;
    margin-bottom: 10px;
}

/* Boutons "En savoir plus" (Liens génériques) */
.page-actus-column a {
    border: 1px solid #373536;
    border-radius: 10px;
    padding: 10px 15px;
    margin-left: 5px;
    margin-bottom: 5px;
    text-decoration: none;
    display: inline-block;
    width: fit-content;
    transition: all 0.2s ease-in-out;
    color: #2f4f4f;
    font-size: 14px;
}

.page-actus-column a:hover {
    background-color: #e67e3a;
    color: #faf7f2;
}

/* Reset des liens sur les titres */
.page-actus-column h2 a,
.page-actus-column h3 a {
    border: none !important;
    background-color: transparent !important;
    padding: 0 !important;
    margin-bottom: 15px !important;
    font-size: 20px !important;
    color: #2f4f4f !important;
    display: block !important;
    pointer-events: none !important;
    cursor: default !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
    line-height: 1.2 !important;
    width: 100% !important;
}

.page-actus-column h2 a:hover,
.page-actus-column h3 a:hover {
    background-color: transparent !important;
    color: #2f4f4f !important;
}

/* Nettoyage des listes Drupal */
.page-actus-column::marker {
    content: none !important;
    display: none !important;
}

.view-id-actualites ul,
.view-id-actualites li,
.page-actus-row,
.page-actus-column {
    list-style: none !important;
}

/* =========================================
   RESPONSIVE : TABLETTES (Max 1300px)
========================================= */
@media (max-width: 1300px) {
    .view-id-actualites {
        margin: 40px auto !important;
        padding: 40px 20px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .view-id-actualites .view-content {
        display: grid !important;
        grid-template-columns: repeat(2, 280px) !important;
        justify-content: center !important;
        gap: 30px !important;
        width: 100% !important;
        margin: 0 auto !important;
    }

    .page-actus-column {
        width: 100% !important;
        max-width: 280px !important;
        margin: 0 auto !important;
    }
}

/* =========================================
   RESPONSIVE : MOBILES (Max 768px)
========================================= */
@media (max-width: 768px) {
    .view-id-actualites {
        margin: 20px auto !important;
        padding: 30px 15px !important;
        width: 100% !important;
        max-width: 100vw !important;
        box-sizing: border-box !important; 
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }

    .view-id-actualites .view-content {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        width: 100% !important;
        gap: 30px !important;
        margin: 0 !important;
    }

    .page-actus-column {
        margin-bottom: 30px !important;
    }

    .page-actus-column:last-child {
        margin-bottom: 0 !important;
    }

    .page-actus-column,
    .page-actus-row,
    .view-id-actualites {
        height: auto !important;
        min-height: min-content !important;
        overflow: visible !important;
    }
}


/* =========================================
   1. LE CONTENEUR GLOBAL
========================================= */
.group-card-promo {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 1rem !important;

    min-width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 auto !important;

}

/* =========================================
   2. LES CARTES (S'adaptent toutes seules)
========================================= */
.card-promo {
    max-width: 460px !important;
    
    /* LA CORRECTION EST ICI : 100% au lieu de auto */
    width: 100%; 
    
    box-sizing: border-box !important;
    min-width: 400px; /* Attention, rappelle-toi qu'on a annulé ça sur mobile ! */
}

.card-promo>*:last-child {
    margin-top: auto !important;
}


.group-card-inner {
    justify-content: center;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    border-radius: 15px;
}

.group-card-inner>* {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start;
    
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 30px;
    border-radius: 15px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.1);
    
}




@media (max-width: 768px) {
    .card-promo {
        /* On retire l'obligation de faire 400px minimum */
        min-width: 0 !important; 
        
        /* On dit à la carte de prendre toute la largeur disponible */
        width: 100% !important; 
    }
    
    .group-card-inner > * {
        /* Sécurité : on s'assure que le padding intérieur (30px) 
           ne s'ajoute pas à la largeur totale de la carte */
        box-sizing: border-box !important;
    }
}




/* ==========================================================================
   COMPOSANT : GROUPE ACTIVITÉ (Missions & Diagrammes)
   ========================================================================== */

/* 1. BASE DU CONTENEUR (Empêche l'écrasement et centre globalement) */
.group-activite {
    display: flex !important;
    flex-wrap: wrap !important;
    /* La clé pour que les éléments ne s'écrasent pas */
    justify-content: center !important;
    /* Centre les éléments sur la ligne */
    align-items: center !important;

    width: 100% !important;
    margin-left: auto !important;
    /* Centre le grand groupe sur la page */
    margin-right: auto !important;
    box-sizing: border-box !important;
}

/* 2. BOÎTES ENFANTS DIRECTS (Les conteneurs autour de tes diagrammes) */
.group-activite>* {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    box-sizing: border-box !important;
    margin: 0 !important;
}

/* 3. COMPORTEMENT DE BASE DES IMAGES */
.group-activite img {
    display: block !important;
    height: auto !important;
    /* Conserve les proportions */
    object-fit: contain !important;
    margin: 0 auto !important;
}


/* ==========================================================================
   RESPONSIVE : TÉLÉPHONE (Jusqu'à 600px)
   ========================================================================== */
@media screen and (max-width: 600px) {
    .group-activite {
        gap: 30px !important;
        padding: 15px !important;
    }

    .group-activite>* {
        flex: 1 1 100% !important;
        /* 1 seul diagramme par ligne pour la lisibilité */
        max-width: 100% !important;
    }

    .group-activite img {
        width: 100% !important;
        max-width: 350px !important;
    }
}


/* ==========================================================================
   RESPONSIVE : TABLETTE (De 601px à 1024px)
   ========================================================================== */
@media screen and (min-width: 601px) and (max-width: 1024px) {
    .group-activite {
        gap: 30px !important;
        padding: 20px !important;
    }

    .group-activite>* {
        flex: 1 1 calc(50% - 15px) !important;
        /* 2 diagrammes par ligne */
        max-width: calc(50% - 15px) !important;
    }

    .group-activite img {
        width: 100% !important;
        max-width: 400px !important;
    }
}


/* ==========================================================================
   RESPONSIVE : BUREAU (Dès 1025px) - Agrandissement
   ========================================================================== */
@media screen and (min-width: 1025px) {
    .group-activite {
        max-width: 1200px !important;
        /* Limite la largeur totale du bloc sur les très grands écrans */
        gap: 60px !important;
        /* Plus d'espace pour respirer entre les gros diagrammes */
        padding: 40px 20px !important;
    }

    .group-activite>* {
        /* C'est ici qu'on force la grande taille : 450px par diagramme */
        flex: 0 0 450px !important;
        max-width: 450px !important;
    }

    .group-activite img {
        width: 100% !important;
        /* L'image prend 100% de sa boîte de 450px */
        max-width: 500px !important;
        /* Sécurité */
    }
}