/* ==========================================================
   LES 3 COUPS TRÉMENTINAIS
   CSS GLOBAL DU SITE
   ========================================================== */


/* ==========================================================
   0. ÉLÉMENTS COMMUNS À TOUTES LES PAGES
   ========================================================== */


/* ----------------------------------------------------------
   LOGO DU HEADER - MOBILE
   ---------------------------------------------------------- */

@media screen and (max-width: 768px) {

    /*
     * Agrandissement du logo du HEADER uniquement.
     */
    .line-header .mod-header-logo,
    header .mod-header-logo {
        width: 180px !important;
        max-width: 65vw !important;

        height: auto !important;
        max-height: none !important;

        object-fit: contain !important;
    }

}



/* ==========================================================
   1. PIED DE PAGE - TOUTES LES PAGES
   ========================================================== */


/* ----------------------------------------------------------
   HAUTEUR / ESPACEMENT
   ---------------------------------------------------------- */

/*
 * Réduit la hauteur générale du footer.
 *
 * IMPORTANT :
 * aucune couleur de fond n'est définie ici.
 * La couleur reste gérée directement par Yapla.
 */
.line-footer {
    margin: 0 !important;

    padding-top: 20px !important;
    padding-bottom: 18px !important;

    box-sizing: border-box !important;
}


/*
 * Réduction des espacements ajoutés
 * par les conteneurs Yapla.
 */
.line-footer > .container,
.line-footer > .container-fluid {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}


.line-footer .row,
.line-footer .row-fluid,
.line-footer .zone-footer {
    margin-top: 0 !important;
    margin-bottom: 0 !important;

    padding-top: 0 !important;
    padding-bottom: 0 !important;
}



/* ----------------------------------------------------------
   MODULE FOOTER
   ---------------------------------------------------------- */

.line-footer .footer-classic {
    margin: 0 !important;
    padding: 0 !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;

    text-align: center !important;
}



/* ----------------------------------------------------------
   LOGO DU FOOTER
   ---------------------------------------------------------- */

.line-footer .footer-logo {
    margin: 0 0 10px !important;
    padding: 0 !important;

    text-align: center !important;
}


.line-footer .footer-logo .mod-header-logo {
    display: block !important;

    width: auto !important;
    max-width: 180px !important;

    height: auto !important;
    max-height: 110px !important;

    margin: 0 auto !important;
    padding: 0 !important;

    object-fit: contain !important;

    transform: none !important;
}



/* ----------------------------------------------------------
   RÉSEAUX SOCIAUX
   ---------------------------------------------------------- */

.line-footer .footer-social {
    margin: 0 !important;
    padding: 0 !important;

    text-align: center !important;
}


/*
 * Titre "Nous suivre".
 */
.line-footer .footer-social h3 {
    margin: 0 0 8px !important;
    padding: 0 !important;
}



/* ----------------------------------------------------------
   BOUTONS RÉSEAUX SOCIAUX
   ---------------------------------------------------------- */

/*
 * Aucun fond ajouté par ce CSS.
 * Seule l'icône est en bordeaux.
 */
.line-footer .footer-social .social-link {
    display: inline-flex !important;

    align-items: center !important;
    justify-content: center !important;

    width: 36px !important;
    height: 36px !important;

    margin: 0 4px !important;
    padding: 0 !important;

    border: none !important;
    box-shadow: none !important;

    color: #9A0020 !important;

    text-decoration: none !important;

    transition:
        color 0.2s ease,
        transform 0.2s ease;
}


/*
 * Icônes Facebook / YouTube / Instagram.
 */
.line-footer .footer-social .social-link span,
.line-footer .footer-social .social-link i,
.line-footer .footer-social .social-link .fab {
    margin: 0 !important;
    padding: 0 !important;

    color: #9A0020 !important;
}


/*
 * Font Awesome utilise généralement
 * le pseudo-élément ::before.
 */
.line-footer .footer-social .social-link span::before,
.line-footer .footer-social .social-link i::before,
.line-footer .footer-social .social-link .fab::before {
    color: #9A0020 !important;
}



/* ----------------------------------------------------------
   SURVOL RÉSEAUX SOCIAUX
   ---------------------------------------------------------- */

.line-footer .footer-social .social-link:hover,
.line-footer .footer-social .social-link:focus {
    color: #B72D46 !important;

    transform: translateY(-2px);

    text-decoration: none !important;
}


.line-footer .footer-social .social-link:hover span,
.line-footer .footer-social .social-link:hover i,
.line-footer .footer-social .social-link:hover .fab,
.line-footer .footer-social .social-link:focus span,
.line-footer .footer-social .social-link:focus i,
.line-footer .footer-social .social-link:focus .fab {
    color: #B72D46 !important;
}


.line-footer .footer-social .social-link:hover span::before,
.line-footer .footer-social .social-link:hover i::before,
.line-footer .footer-social .social-link:hover .fab::before,
.line-footer .footer-social .social-link:focus span::before,
.line-footer .footer-social .social-link:focus i::before,
.line-footer .footer-social .social-link:focus .fab::before {
    color: #B72D46 !important;
}



/* ----------------------------------------------------------
   FOOTER - MOBILE
   ---------------------------------------------------------- */

@media screen and (max-width: 768px) {

    /*
     * Footer plus compact sur téléphone.
     */
    .line-footer {
        padding-top: 15px !important;
        padding-bottom: 15px !important;
    }


    /*
     * Logo plus compact.
     */
    .line-footer .footer-logo {
        margin-bottom: 8px !important;
    }


    .line-footer .footer-logo .mod-header-logo {
        max-width: 155px !important;
        max-height: 95px !important;
    }


    /*
     * Titre rapproché des réseaux sociaux.
     */
    .line-footer .footer-social h3 {
        margin-bottom: 6px !important;
    }


    /*
     * Réseaux sociaux légèrement plus compacts.
     */
    .line-footer .footer-social .social-link {
        width: 34px !important;
        height: 34px !important;

        margin-left: 3px !important;
        margin-right: 3px !important;
    }

}





/* ==========================================================
   PAGE : ACCUEIL
   ========================================================== */


/* ==========================================================
   ACCUEIL - 1. BANNIÈRE
   Classe Yapla : accueil-banniere
   ========================================================== */

/*
 * Remonte la bannière afin de supprimer
 * l'espace blanc situé sous le menu.
 */
.accueil-banniere {
    margin-top: -50px !important;
    margin-bottom: 0 !important;
}


/*
 * Supprime les marges latérales internes
 * afin que la bannière puisse utiliser
 * toute la largeur disponible.
 */
.accueil-banniere .container-fluid {
    padding-left: 0 !important;
    padding-right: 0 !important;
}



/* ==========================================================
   ACCUEIL - 2. SECTION NOUVELLES
   Classe Yapla : accueil-nouvelles
   ========================================================== */

.accueil-nouvelles {
    margin: 0 !important;

    padding-top: 0 !important;
    padding-bottom: 15px !important;
}


/*
 * Petit trait doré sous le titre "Nouvelles".
 */
.accueil-nouvelles h2::after {
    content: "";

    display: block;

    width: 55px;
    height: 3px;

    margin: 15px auto 0;

    border-radius: 3px;

    background: #E9BD72;
}



/* ==========================================================
   ACCUEIL - 3. CARROUSEL NOUVELLES
   ========================================================== */

/*
 * Espace réservé sous les actualités
 * pour les flèches et les points.
 */
.accueil-nouvelles .carousel {
    position: relative !important;

    padding-bottom: 70px !important;

    box-sizing: border-box !important;
}



/* ==========================================================
   ACCUEIL - 4. CARROUSEL NOUVELLES - PC
   ========================================================== */

@media screen and (min-width: 769px) {

    /*
     * Hauteur fixe du carrousel afin d'éviter
     * les changements de hauteur entre articles.
     */
    .accueil-nouvelles .carousel-inner {
        height: 430px !important;
        min-height: 430px !important;
        max-height: 430px !important;

        overflow: hidden !important;
    }


    /*
     * Chaque actualité conserve
     * exactement la même hauteur.
     */
    .accueil-nouvelles .carousel-inner > .item {
        position: relative !important;

        width: 100% !important;

        height: 430px !important;
        min-height: 430px !important;
        max-height: 430px !important;

        overflow: hidden !important;

        box-sizing: border-box !important;
    }



    /* ------------------------------------------------------
       IMAGE PC
       ------------------------------------------------------ */

    /*
     * Image placée à droite.
     *
     * object-fit: contain :
     * - conserve les proportions
     * - ne coupe pas l'image
     * - ne déforme pas l'image
     */
    .accueil-nouvelles .carousel-inner > .item > img {
        position: absolute !important;

        top: 0 !important;
        right: 0 !important;
        bottom: auto !important;
        left: auto !important;

        display: block !important;

        width: 48% !important;
        max-width: 48% !important;

        height: 430px !important;
        min-height: 430px !important;
        max-height: 430px !important;

        margin: 0 !important;
        padding: 0 !important;

        object-fit: contain !important;
        object-position: center center !important;

        transform: none !important;

        box-sizing: border-box !important;
    }



    /* ------------------------------------------------------
       TEXTE PC
       ------------------------------------------------------ */

    /*
     * Texte placé à gauche et centré
     * verticalement.
     */
    .accueil-nouvelles .carousel-caption {
        position: absolute !important;

        top: 50% !important;
        bottom: auto !important;

        left: 0 !important;
        right: auto !important;

        width: 45% !important;
        max-width: 45% !important;

        margin: 0 !important;
        padding: 0 !important;

        text-align: left !important;

        transform: translateY(-50%) !important;

        box-sizing: border-box !important;
    }


    /*
     * Le titre et le résumé utilisent
     * toute la largeur disponible.
     */
    .accueil-nouvelles .carousel-caption h3,
    .accueil-nouvelles .carousel-caption .caption-title,
    .accueil-nouvelles .carousel-caption .caption-intro {
        width: 100% !important;
        max-width: 100% !important;
    }

}



/* ==========================================================
   ACCUEIL - 5. BOUTON "LIRE LA SUITE"
   ========================================================== */

.accueil-nouvelles .carousel-link-detail,
.accueil-nouvelles .btn {
    position: relative !important;

    z-index: 2 !important;

    margin-bottom: 10px !important;
}



/* ==========================================================
   ACCUEIL - 6. FLÈCHES DU CARROUSEL
   ========================================================== */

.accueil-nouvelles .carousel-control {
    top: auto !important;
    bottom: 5px !important;

    width: 38px !important;
    height: 38px !important;
}


/*
 * Flèche précédente.
 */
.accueil-nouvelles .carousel-control.left {
    left: 0 !important;
}


/*
 * Flèche suivante.
 */
.accueil-nouvelles .carousel-control.right {
    left: 48px !important;
    right: auto !important;
}



/* ==========================================================
   ACCUEIL - 7. POINTS D'AVANCEMENT
   ========================================================== */

/*
 * Les points sont placés
 * à droite des deux flèches.
 */
.accueil-nouvelles .carousel-indicators {
    position: absolute !important;

    left: 110px !important;
    right: auto !important;

    bottom: 13px !important;

    width: auto !important;

    margin: 0 !important;

    text-align: left !important;
}



/* ==========================================================
   ACCUEIL - 8. NEWSLETTER
   Classe Yapla : accueil-newsletter
   ========================================================== */

.accueil-newsletter {
    margin-top: 0 !important;

    padding-top: 20px !important;
}


.accueil-newsletter > .container-fluid {
    margin-top: 0 !important;

    padding-top: 0 !important;
}



/* ==========================================================
   ACCUEIL - 9. VERSION MOBILE
   ========================================================== */

@media screen and (max-width: 768px) {

    /* ------------------------------------------------------
       BANNIÈRE MOBILE
       ------------------------------------------------------ */

    /*
     * On conserve le déplacement de la bannière
     * également sur mobile.
     */
    .accueil-banniere {
        margin-top: -50px !important;
        margin-bottom: 0 !important;
    }



    /* ------------------------------------------------------
       HAUTEUR FIXE DU CARROUSEL
       ------------------------------------------------------ */

    /*
     * Empêche le carrousel de sauter
     * lors du changement d'actualité.
     */
    .accueil-nouvelles .carousel-inner {
        height: 490px !important;
        min-height: 490px !important;
        max-height: 490px !important;

        overflow: hidden !important;
    }


    .accueil-nouvelles .carousel-inner > .item {
        position: relative !important;

        width: 100% !important;

        height: 490px !important;
        min-height: 490px !important;
        max-height: 490px !important;

        overflow: hidden !important;

        box-sizing: border-box !important;
    }



    /* ------------------------------------------------------
       IMAGE MOBILE
       ------------------------------------------------------ */

    .accueil-nouvelles .carousel-inner > .item > img {
        position: relative !important;

        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;

        display: block !important;

        width: 100% !important;
        max-width: 100% !important;

        height: 245px !important;
        min-height: 245px !important;
        max-height: 245px !important;

        margin: 0 auto !important;
        padding: 0 !important;

        object-fit: contain !important;
        object-position: center center !important;

        transform: none !important;

        box-sizing: border-box !important;
    }



    /* ------------------------------------------------------
       TEXTE MOBILE
       ------------------------------------------------------ */

    .accueil-nouvelles .carousel-caption {
        position: relative !important;

        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;

        display: block !important;

        width: 100% !important;
        max-width: 100% !important;

        height: 245px !important;
        min-height: 245px !important;
        max-height: 245px !important;

        margin: 0 !important;

        padding: 18px 15px 10px !important;

        text-align: left !important;

        transform: none !important;

        box-sizing: border-box !important;
    }



    /*
     * Titre.
     */
    .accueil-nouvelles .carousel-caption .caption-title {
        margin-top: 0 !important;
        margin-bottom: 15px !important;
    }



    /*
     * Résumé.
     */
    .accueil-nouvelles .carousel-caption .caption-intro {
        width: 100% !important;
        max-width: 100% !important;

        margin-bottom: 0 !important;
    }



    /* ------------------------------------------------------
       BOUTON "LIRE LA SUITE"
       ------------------------------------------------------ */

    /*
     * Bouton pleine largeur avec texte
     * parfaitement centré.
     */
    .accueil-nouvelles
    .carousel-caption
    .carousel-link-detail {

        display: flex !important;

        align-items: center !important;
        justify-content: center !important;

        width: 100% !important;
        min-height: 50px !important;

        margin-top: 20px !important;
        margin-bottom: 0 !important;

        padding: 10px 20px !important;

        text-align: center !important;
        line-height: 1.2 !important;

        box-sizing: border-box !important;
    }



    /* ------------------------------------------------------
       NAVIGATION
       ------------------------------------------------------ */

    .accueil-nouvelles .carousel {
        padding-bottom: 70px !important;
    }



    /* ------------------------------------------------------
       NEWSLETTER
       ------------------------------------------------------ */

    .accueil-newsletter {
        margin-top: 0 !important;

        padding-top: 15px !important;
    }

}





/* ==========================================================
   PAGE : ASSOCIATIONS SOUTENUES
   ========================================================== */


/* ==========================================================
   ASSOCIATIONS - 1. CARROUSEL
   Classe Yapla : associations-carrousel
   ========================================================== */

.associations-carrousel .carousel {
    position: relative !important;

    box-sizing: border-box !important;
}



/* ==========================================================
   ASSOCIATIONS - 2. CONTENU
   ========================================================== */

/*
 * Espace réservé en bas pour éviter
 * que la navigation masque le lien.
 */
.associations-carrousel .carousel-text {
    padding-bottom: 75px !important;

    box-sizing: border-box !important;
}



/* ==========================================================
   ASSOCIATIONS - 3. TITRE
   ========================================================== */

.associations-carrousel .caption-title {
    margin-top: 0 !important;
    margin-bottom: 20px !important;

    text-align: center !important;
}



/* ==========================================================
   ASSOCIATIONS - 4. LOGOS
   ========================================================== */

/*
 * Tous les logos utilisent une zone
 * de hauteur identique.
 *
 * Les proportions sont conservées.
 */
.associations-carrousel .caption-intro img {
    display: block !important;

    width: auto !important;
    max-width: 100% !important;

    height: 250px !important;
    max-height: 250px !important;

    margin-left: auto !important;
    margin-right: auto !important;

    object-fit: contain !important;
    object-position: center center !important;
}



/* ==========================================================
   ASSOCIATIONS - 5. "EN SAVOIR PLUS"
   ========================================================== */

.associations-carrousel .caption-intro p:last-child {
    position: relative !important;

    z-index: 5 !important;

    margin-top: 20px !important;
    margin-bottom: 0 !important;

    text-align: center !important;
}


.associations-carrousel .caption-intro p:last-child a {
    position: relative !important;

    z-index: 5 !important;
}



/* ==========================================================
   ASSOCIATIONS - 6. VERSION MOBILE
   ========================================================== */

@media screen and (max-width: 768px) {

    /*
     * Plus d'espace en bas pour les contrôles.
     */
    .associations-carrousel .carousel-text {
        padding-bottom: 90px !important;
    }


    /* ------------------------------------------------------
       LOGOS MOBILE
       ------------------------------------------------------ */

    .associations-carrousel .caption-intro img {
        width: 100% !important;
        max-width: 100% !important;

        height: 220px !important;
        max-height: 220px !important;

        object-fit: contain !important;
        object-position: center center !important;
    }


    /* ------------------------------------------------------
       "EN SAVOIR PLUS"
       ------------------------------------------------------ */

    .associations-carrousel
    .caption-intro
    p:last-child {

        margin-top: 15px !important;
        margin-bottom: 30px !important;
    }


    /* ------------------------------------------------------
       POINTS
       ------------------------------------------------------ */

    .associations-carrousel .carousel-indicators {
        bottom: 15px !important;

        margin-bottom: 0 !important;
    }


    /* ------------------------------------------------------
       FLÈCHES
       ------------------------------------------------------ */

    .associations-carrousel .carousel-control {
        top: auto !important;
        bottom: 7px !important;
    }

}

/* ==========================================================
   PAGE : NOS RÉSEAUX
   URL : /fr/nos-reseaux
   Classe Yapla : nos-reseaux
   ========================================================== */

/*
 * La zone "Nos Réseaux" utilise le module social Yapla :
 *
 * .nos-reseaux
 *   .mod-header-part__right
 *     .mod-social-links
 *       .social-link.facebook
 *       .social-link.youtube
 *       .social-link.instagram
 *
 * Les règles ci-dessous ne touchent donc ni le header global,
 * ni le footer.
 */


/* ----------------------------------------------------------
   CENTRAGE DU BLOC RÉSEAUX
   ---------------------------------------------------------- */

.nos-reseaux .rf-mod-header-wrapper,
.nos-reseaux .mod-header-container,
.nos-reseaux .mod-header-part__right {
    width: 100% !important;
    max-width: none !important;

    margin-left: auto !important;
    margin-right: auto !important;
}


.nos-reseaux .mod-header-container {
    display: flex !important;

    align-items: center !important;
    justify-content: center !important;
}


.nos-reseaux .mod-header-part__right {
    float: none !important;

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;
}


/*
 * Liste Yapla contenant le module des réseaux.
 */
.nos-reseaux .mod-header-wrapper {
    float: none !important;

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;

    margin: 0 auto !important;
    padding: 0 !important;
}


.nos-reseaux .header-ext-social-links {
    float: none !important;

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;

    margin: 0 auto !important;
    padding: 0 !important;

    list-style: none !important;
}


/*
 * Conteneur direct des trois liens.
 */
.nos-reseaux .mod-social-links {
    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    flex-wrap: wrap !important;

    gap: 28px !important;

    width: 100% !important;

    margin: 12px auto 0 !important;
    padding: 0 !important;

    text-align: center !important;
}


/* ----------------------------------------------------------
   BOUTONS FACEBOOK / YOUTUBE / INSTAGRAM
   ---------------------------------------------------------- */

.nos-reseaux .mod-social-links > .social-link {
    float: none !important;

    display: inline-flex !important;

    align-items: center !important;
    justify-content: center !important;

    width: 82px !important;
    min-width: 82px !important;
    height: 82px !important;
    min-height: 82px !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    box-shadow: none !important;

    text-align: center !important;
    text-decoration: none !important;

    line-height: 1 !important;

    transition:
        transform 0.2s ease,
        opacity 0.2s ease;
}


/* ----------------------------------------------------------
   ICÔNES FONT AWESOME
   ---------------------------------------------------------- */

.nos-reseaux .mod-social-links > .social-link > .fab,
.nos-reseaux .mod-social-links > .social-link > .icon-facebook,
.nos-reseaux .mod-social-links > .social-link > .icon-youtube,
.nos-reseaux .mod-social-links > .social-link > .icon-instagram {
    display: block !important;

    width: auto !important;
    height: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    font-size: 58px !important;
    line-height: 1 !important;

    text-align: center !important;
}


/* ----------------------------------------------------------
   SURVOL
   ---------------------------------------------------------- */

.nos-reseaux .mod-social-links > .social-link:hover,
.nos-reseaux .mod-social-links > .social-link:focus {
    transform: translateY(-3px) scale(1.06);

    opacity: 0.88;
}


/* ----------------------------------------------------------
   VERSION MOBILE
   ---------------------------------------------------------- */

@media screen and (max-width: 768px) {

    .nos-reseaux .mod-social-links {
        gap: 18px !important;

        margin-top: 10px !important;
    }


    .nos-reseaux .mod-social-links > .social-link {
        width: 66px !important;
        min-width: 66px !important;

        height: 66px !important;
        min-height: 66px !important;
    }


    .nos-reseaux .mod-social-links > .social-link > .fab,
    .nos-reseaux .mod-social-links > .social-link > .icon-facebook,
    .nos-reseaux .mod-social-links > .social-link > .icon-youtube,
    .nos-reseaux .mod-social-links > .social-link > .icon-instagram {
        font-size: 46px !important;
    }

}


/* ==========================================================
   HEADER - BOUTON CONNEXION MOBILE
   ========================================================== */

/*
 * Sur mobile, le lien "Connexion" devient un vrai bouton
 * visible en haut à droite du header.
 *
 * Aucun changement sur la version ordinateur.
 */
@media screen and (max-width: 768px) {

    /*
     * Sert de repère au positionnement du bouton.
     */
    .line-header .mod-header-container {
        position: relative !important;
    }


    /*
     * Le bloc de connexion est sorti du flux afin
     * de ne plus créer une petite ligne isolée au-dessus du logo.
     */
    .line-header .header-ext-login {
        position: absolute !important;

        top: 10px !important;
        right: 12px !important;
        left: auto !important;

        z-index: 30 !important;

        width: auto !important;
        height: auto !important;

        margin: 0 !important;
        padding: 0 !important;

        float: none !important;

        list-style: none !important;
    }


    /*
     * Bouton Connexion.
     */
    .line-header .header-ext-login .member-login.btn {
        display: inline-flex !important;

        align-items: center !important;
        justify-content: center !important;

        min-width: 92px !important;
        min-height: 36px !important;

        margin: 0 !important;
        padding: 8px 15px !important;

        border: 1px solid #9A0020 !important;
        border-radius: 999px !important;

        background: #9A0020 !important;

        color: #FFFFFF !important;

        font-family: "Dosis", Arial, sans-serif !important;
        font-size: 14px !important;
        font-weight: 700 !important;
        line-height: 1 !important;

        text-align: center !important;
        text-decoration: none !important;

        box-shadow: 0 3px 8px rgba(39, 19, 13, 0.18) !important;

        transition:
            background-color 0.2s ease,
            border-color 0.2s ease,
            transform 0.2s ease !important;
    }


    /*
     * Survol / focus.
     */
    .line-header .header-ext-login .member-login.btn:hover,
    .line-header .header-ext-login .member-login.btn:focus {
        background: #B72D46 !important;
        border-color: #B72D46 !important;

        color: #FFFFFF !important;

        transform: translateY(-1px);

        text-decoration: none !important;
    }

}