/* ============================================================
   Terragir – Custom theme
   ============================================================ */

/* ----------------------------------------------------------
   1. VARIABLES & BASE
   ---------------------------------------------------------- */
:root {
    --red: #e2654d;
    --yellow: #f6b409;

    --primary-accent: #9f1a0b;
    --secondary-accent: #d79c06;

    /* Repeint un pictogramme fourni en image, là où le thème attend une icône
       blanche sur pastille de couleur. Un SVG suit `currentColor`, pas une
       image : `brightness(0)` ramène tous les pixels au noir, `invert(1)` les
       passe au blanc. La transparence est préservée — seul le tracé change de
       couleur. Vaut pour un pictogramme d'une seule couleur ; un visuel
       polychrome serait aplati en silhouette. */
    --icon-white: brightness(0) invert(1);

    /* Chevron des menus déroulants. Le caractère « ⯆ » (U+2BC6) manquait dans
       les polices de certains postes et s'affichait en carré ; un SVG en
       masque le remplace, ce qui garde la couleur du lien (currentColor) et
       donc le survol. */
    /* Flèche des carrousels, de la pagination et des liens « lire la suite ».
       Remplace « 🡨 » et « 🡪 » (U+1F868 / U+1F86A), absents de beaucoup de
       polices. Une seule définition : la flèche gauche est celle-ci retournée
       par scaleX(-1). */
    --arrow-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 20'%3E%3Cpath d='M2 10h20M14 2l8 8-8 8' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

    --caret-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 7'%3E%3Cpath d='M0 0h10L5 7z'/%3E%3C/svg%3E");
}

body {
    margin: 0;
    font-family: Arial;
    padding-top: 120px;
}

h2 {
    position: relative;
    font-size: 30px;
    margin-bottom: 20px;
}


.arrows {
    text-align: right;

    .see-all {
        margin-right: 10px;
    }
}

button.arrow {
    border-radius: 50%;
    height: 40px;
    width: 40px;
    border: 2px solid #ddd;
    background: #fff;
    line-height: 0;
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;

    /* Le bouton est vide : son intitulé est porté par aria-label, et la
       flèche est dessinée ici. */
    &::before {
        content: "";
        display: block;
        width: 14px;
        height: 12px;
        margin: 0 auto;
        background-color: currentColor;
        -webkit-mask: var(--arrow-right) no-repeat center / contain;
        mask: var(--arrow-right) no-repeat center / contain;
    }

    &.left::before {
        transform: scaleX(-1);
    }

    &:hover {
        background: #ddd;
    }

    &:active {
        background: #aaa;
        border-color: #aaa;
        color: #fff;
    }
}

.read-more {
    cursor: pointer;
    transition: 0.2s;
    color: inherit;
    text-decoration: none;

    &.small:hover {
        color: var(--red);
    }

    &::after {
        content: attr(data-icon);
        white-space: pre;
        margin-left: 0px;
        transition: 0.5s;
    }

    &:hover {

        &::after {
            margin-left: 20px;
        }
    }

    /* Variante flèche. L'écart d'origine venait des espaces contenus dans
       data-icon ; il est repris ici en marge : 18px après un bouton, 9px
       après un lien discret. */
    &.arrow-after::after {
        content: "";
        display: inline-block;
        width: 14px;
        height: 12px;
        margin-left: 18px;
        vertical-align: middle;
        background-color: currentColor;
        -webkit-mask: var(--arrow-right) no-repeat center / contain;
        mask: var(--arrow-right) no-repeat center / contain;
    }

    &.small.arrow-after::after {
        margin-left: 9px;
    }

    &.arrow-after:hover::after {
        margin-left: 38px;
    }

    &.small.arrow-after:hover::after {
        margin-left: 29px;
    }
}

.center {
    text-align: center;
}

section {
    margin-bottom: 40px;
}

.columns {
    display: flex;
    gap: 80px;
    justify-content: space-around;
    margin: 60px 0;
    &.tiny{
        p{
            flex:1;
        }
    }
}

.column {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    i {
        border-radius: 50%;
        height: 160px;
        width: 160px;
    }

    h3 {
        font-size: 22px;
        margin-bottom: 10px;
    }

    p {
        text-align: center;
        line-height: 24px;
        /*! max-width: 70%; */
        margin: 0 0 20px;
        /* flex: 1; */
    }

    ul {
        flex: 1;
        margin: 0 0 40px;
        list-style: none;
        max-width: 60%;
        min-width: 50%;

        li {
            position: relative;

            &::before {
                content: ">";
                font-weight: bold;
                position: absolute;
                top: 5px;
                left: -20px;
                color: var(--yellow);
            }

            a {
                color: #888;
            }
        }
    }
    
    a {
        color:#000;
        text-decoration: none;
        line-height: 28px;
    }
    
    .wrap {
        position: relative;
    }

    .read-more {
        font-weight: bold;
    }
}

.imgbox {
    padding: 40px 0;

    .wrap {
        display: flex;
        gap: 40px;
        align-items: center;
    }

    .content {
        flex: 1.5;

        h3 {
            font-size: 34px;
            margin: 20px 0 20px;
        }

        p {
            line-height: 24px;
            font-size: 16px;
            margin-bottom: 20px;
        }
    }

    /* Cadre d'image commun à l'image seule et aux diapositives du carrousel :
       même largeur, même proportion, que le bloc contienne une image ou dix.
       La proportion est imposée plutôt que déduite de l'image, sans quoi des
       photos de formats différents feraient sauter la hauteur d'une
       diapositive à l'autre.
       `min-width: 0` empêche la largeur intrinsèque de l'image d'élargir la
       colonne au-delà de sa part. */
    picture {
        flex: 2 1 0;
        min-width: 0;
        display: block;
        position: relative;
        aspect-ratio: 3 / 2;
        background: var(--red);
        border-radius: 20px;
        overflow: hidden;
    }
}

.bullets {
    display: flex;
    gap: 40px;
    margin: 40px 0 0;
    padding: 0;
    list-style: none;

    .bullet {
        display: flex;
        gap: 20px;
        align-items: center;

        i {
            display: flex;
            height: 80px;
            width: 80px;
            border-radius: 50%;
            background: var(--red);
            flex: 0 0 80px;
            align-items:center;
            justify-content:center;
            svg{
                width:60%;
                height:60%;
                color:#fff;
            }
            img{
                width:60%;
                height:60%;
                filter: var(--icon-white);
            }
        }

        .content {
            flex: 1;

            h3 {
                margin: 0 0 10px;
            }

            p {
                margin: 0;
                color: #888;
            }

            flex: 1;
        }
    }
}
.titledeco {
    position: absolute;
    height: 2px;
    background: var(--red);
    width: 40px;
    bottom: -8px;
    left: 0;
    
    &::after{
        content:"";
        position:absolute;
        bottom:-10px;
        height:10px;
        width:2px;
        background:var(--red);
        left:19px;
    }

    &.center{
        left: 50%;
        transform:translateX(-50%);
    }

    &.yellow{
        background: var(--yellow);
        &::after{
        background:var(--yellow);
        }
    }
}
.rel{
    position:relative;
}
/* ----------------------------------------------------------
   3. HEADER / NAV
   ---------------------------------------------------------- */
#header {
    height: 120px !important;
    padding: 10px 40px;
    box-sizing: border-box;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    background: #fff;
    z-index: 10;
    transition: height 0.3s ease;
    
    
    
    
    
    
    
    
    
    



    .container {
        display: flex;
        align-items: center;
        flex-direction: row;
        padding: 0;
        height: 100%;
        /*! border-bottom: 2px solid grey; */
        justify-content: space-between;
        transition: border-bottom-color 0.3s ease;
    }

}

/* Au défilement, l'en-tête se compacte et son trait de séparation s'efface.
   La classe .scrolled est posée par terragir.js. Le logo suit tout seul :
   .navbar-brand est dimensionné en pourcentage de la hauteur de l'en-tête. */
#header.scrolled {
    height: 80px !important;
}

#header.scrolled .container {
    border-bottom-color: transparent;
}

#header .navbar-section {
    height: calc(4rem + 30px) !important;
}

#header .logo img,
#header .logo svg {
    height: 56px !important;
}

#header li a:hover {
    color: var(--red);
}

.container {
    max-width: 1300px;
    margin: auto;
    padding: 0 80px;

    &.small {
        max-width: 1100px;
    }
}

.navbar-brand {
    margin: 10px 0;
    height: 60%;

    img {
        height: 100%;
    }
}

.navbar {
    flex: 1;
}

#menu {
    list-style: none;
    display: flex;
    justify-content: end;
    align-items: center;
}

.submenu {
    display: none;
    position: absolute;
    list-style: none;
    padding: 0;
    left: 0;
    top: 100%;
    min-width: 200px;

    li {
        padding: 6px 10px;
        background: #fff;
        border-bottom: 2px solid var(--red);

        a {
            display: block;
        }

    }
}

#menu li {
    position: relative;




    &.dropdown {

        &:hover {
            .submenu {
                display: block;
            }

            >a {
                color: var(--red);
            }
        }

        &.red>a {
            color: var(--red);

            &:hover {
                color: var(--yellow);
            }
        }

        >a::after {
            content: "";
            display: inline-block;
            width: 9px;
            height: 7px;
            margin-left: 6px;
            vertical-align: middle;
            background-color: currentColor;
            -webkit-mask: var(--caret-down) no-repeat center / contain;
            mask: var(--caret-down) no-repeat center / contain;
        }
    }

    a {
        text-decoration: none;
        color: #000;
        font-weight: 600;
        cursor: pointer;
    }
}

#menu>li {
    padding: 10px;


    &:nth-child(n+2) {
        margin-left: 20px;
    }
}


/* ----------------------------------------------------------
   4. BOUTONS
   ---------------------------------------------------------- */
.button,
a.button {
    display: inline-block;
    padding: 14px 20px;
    box-sizing: border-box;
    border-radius: 30px;
    text-decoration: none !important;
    cursor: pointer;
    transition: 0.2s;
    background: var(--red);
    color: #fff !important;
    letter-spacing: 1.2px;
    font-weight: normal !important;

    &.secondary {
        background: var(--yellow);
    }
    
    &.small{
        
    padding: 7px 10px;
    font-size: 12px;
    vertical-align: center;
    }

    &.go {
        padding: 0;
        width: 40px;
        height: 40px;

        &::before {
            content: "";
            display: block;
            width: 14px;
            height: 12px;
            background-color: currentColor;
            -webkit-mask: var(--arrow-right) no-repeat center / contain;
            mask: var(--arrow-right) no-repeat center / contain;
        }
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;

        &:hover {
            width: 50px;
            height: 50px;
            margin-top: -5px;
            margin-bottom: -5px;
        }
    }
}

.button:hover,
a.button:hover {
    background: #000;
    color: #fff !important;
    outline: none;
}

.button:active,
a.button:active {
    transform: translateY(0);
}

.buttons {

    &.centered {
        justify-content: center;
    }
}

/* ----------------------------------------------------------
   5. SECTION HERO
   ---------------------------------------------------------- */


#hero {
    height: 500px;
    overflow: hidden;
    
    
    
    
    
    




    >.wrap {
        padding: 40px 0;
        position: relative;
        height: 100%;
    }
}

#hero-text-container {
    h1 {
        font-size: 46px;
        width: 50%;
        min-width: 700px;
    }

    p {
        font-size: 18px;
        font-weight: bold;
        line-height: 28px;
        width: 35%;
        min-width: 550px;
    }

    position:relative;
    z-index: 1;
}


@keyframes disc{
    0%{
        transform:translate(0,0px);
    }
    50%{
        transform:translate(0,-20px);
    }
    100%{
        transform:translate(0,0px);
    }
}

#hero-bg-container {
    position: absolute;
    inset: 0;
    overflow: hidden;


    .wrap {
        position: relative;
        height: 100%;
        width: 100%;
    }

    .disc {

        border-radius: 50%;
        position: absolute;
        transform-origin:center;

        &.red {
            background: var(--red);
            height: 600px;
            width: 600px;
            bottom: -200px;
            right: 100px;
            animation: disc 6s ease infinite;
        }

        &.yellow {
            background: var(--yellow);
            height: 400px;
            width: 400px;
            bottom: -150px;
            right: -50px;
            animation: disc 4s 1s ease infinite;
        }

    }
}

/* ----------------------------------------------------------
   5. SECTION STATS
   ---------------------------------------------------------- */

#stats {
    padding: 80px;
    
    

    .wrap {
        display: flex;
        justify-content: space-around;
        list-style: none;
        /*! margin: 0; */
        padding: 0;

        .item {
            display: flex;

            .icon {
                display: block;
                height: 100px;
                width: 100px;
                svg, img{
                    height:100%;
                    width:100%;
                }
            }

            .text {
                strong {
                    display: block;
                    font-size: 60px;
                    filter: blur(0px);
                    transition:0.3s;
                    &.incrementing{
                        filter:blur(2px);
                    }
                    &.done{
                        filter:blur(0px);
                    }
                }

                small {
                    font-size: 14px;
                    color: #888;
                }

                margin-left: 20px;
            }
        }
    }
}


/* ----------------------------------------------------------
   5. SECTION ACTUALITES
   ---------------------------------------------------------- */
#news, .bloc-posts {

    .siema {
        overflow: hidden;
    }

    .posts {
        display: flex;
        gap: 20px;
        margin-top: 20px;

        .single {
            flex: 1 60%;

            .newscard {
                height: 100%;
            }
        }

        .duo {
            flex: 1 40%;
            display: flex;
            flex-direction: column;
            gap: 20px;
        }

        /* Groupe incomplet : 1 ou 2 articles, chacun sur une demi-largeur
           (un article seul ne s'étire donc pas sur toute la ligne). */
        &.all-single .single {
            flex: 0 1 calc(50% - 10px);
        }
    }
}
picture img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.newscard {
    border-radius: 20px;
    display: flex;

    picture {
        display: block;
        position: relative;
        min-height: 160px;
        width: 50%;
        background: #e1d9cd;
        flex: 1 50%;
        border-radius: 20px;
        overflow: hidden;
    }

    /* L'image est sortie du flux : quel que soit son format (portrait,
       paysage, carré), elle ne peut pas imposer sa hauteur à la carte.
       C'est le texte, ou la hauteur de la rangée, qui la détermine. */
    picture img {
        position: absolute;
        inset: 0;
        height: 100%;
        object-fit: unset;
        width: auto;
        transform: translateX(-50%);
        left: 50%;
    }

    >div {
        flex: 1 50%;
        padding: 20px;
        width: 50%;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
    }

    &.small {
        picture {
            flex: 1 30%;
        }

        >div {
            padding: 20px;
        }

        .card-title {
            font-size: 16px;
            font-weight: bold;
            margin: 10px 0;
            flex: 1;
        }
    }

    time {
        color: var(--red);
        font-weight: bolder;
    }

    .card-title {
        font-size: 28px;
        font-weight: bold;
        margin: 10px 0;

        a {
            color: inherit;
            text-decoration: none;

            &:hover {
                color: var(--red);
            }
        }
    }

    p {
        line-height: 24px;
        flex: 1;
    }
}



.red {
    color: var(--red);
}

.yellow {
    color: var(--yellow);
}

.yellow-bg {
    background: var(--yellow);
}

/* Pictogramme fourni en image plutôt qu'en SVG. Il occupe le même cadre, mais
   garde ses propres couleurs : contrairement à un SVG en `currentColor`, une
   image ne suit pas la couleur du texte. */
.icon img {
    width: 60%;
    height: 60%;
    object-fit: contain;
}

.grey, picture {
    background: #f5f1eb;
    /* background: lightgrey; */
}


#engage-partners {
    h2 {
        font-size: 24px;
    position: relative;
    }

    >.wrap {
        display: flex;
        gap: 40px;

        >section {
            flex: 1;
            /* Siema donne au carrousel une largeur en pixels : sans min-width,
               le min-content de la colonne suit cette largeur et la colonne
               s'élargit sans fin. */
            min-width: 0;
        }
    }
}

#partners {
    .siema {
        overflow: hidden;
    }

    .partner-slide {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 20px;
        box-sizing: border-box;

        a {
            display: flex;
        }

        img {
            max-width: 100%;
            max-height: 60px;
            width: auto;
            height: auto;
            filter: grayscale(1);
            opacity: 0.7;
            transition: 0.2s;
        }

        a:hover img {
            filter: grayscale(0);
            opacity: 1;
        }

        span {
            font-weight: 600;
            color: #888;
        }
    }
}



footer{
    .wrap{
    border-top: 2px solid #ddd;
    padding: 0;
    margin: auto;
        > .columns{
           margin: 20px 0;
           gap: 40px;
           .column{
               flex:1;
               align-items: start;
               justify-content: flex-start;

               h4{
                   margin:0 0 10px;
               }
               ul{
                   margin:0;
                   padding-left: 20px;
                   max-width: unset;
                   min-width: unset;
                   width: 100%;

                   li::before{
                       color:#000;
                   }
               }

               /* Labels et certifications sous le logo. Volontairement
                  discrets : hauteur plafonnée, et ni puces ni retrait, que
                  la règle ul ci-dessus applique aux listes de liens. */
               ul.footer-images{
                   display: flex;
                   flex-wrap: wrap;
                   align-items: center;
                   gap: 20px;
                   margin-top: 20px;
                   padding-left: 0;

                   li::before{
                       content: none;
                   }

                   a{
                       display: block;
                   }

                   img{
                       display: block;
                       width: auto;
                       max-height: 70px;
                   }
               }
               >a{
                   text-decoration: none;
                   color: #000;
                   font-weight: bold;
                   line-height: 28px;
                   &:hover{
                       text-decoration:underline;
                   }
               }
           }
        }
    }
    .navbar-brand {
    height: auto;
    max-width: 200px;
    
    img {
            width: 100%;
            height: auto;
        }
    }

    padding: 10px 40px;
    .footer-meta{
        text-align:center;
        color:#888;
        font-size:14px;
        margin-top:40px;
        a{
            color:#888;
            text-decoration:none;
        }
    }
}


#prestations, #branches, .prestations-list {

    .columns p{
        max-width: 70%;
    }
    
.icon {
    display:flex;
    align-items:center;
    justify-content:center;
    svg{
        height:60%;
    width:60%;
    color:#fff;
    }
    img{
        height:60%;
        width:60%;
        filter: var(--icon-white);
    }
    &.grey img{
        filter: none;
    }
}
}
#branches{
    .icon svg{
        color:#000;
    }
}


/* ----------------------------------------------------------
   6. PAGES INTÉRIEURES
   ---------------------------------------------------------- */
.page-hero {
    padding: 60px 0 40px;

    h1 {
        display: inline-block;
        font-size: 40px;
        margin: 0;
    }

    .intro {
        /*! max-width: 720px; */
        margin-top: 32px;

        p {
            font-size: 18px;
            line-height: 28px;
            color: #555;
            margin: 0;
        }
    }
}

.page-content {
    line-height: 28px;

    padding-top: 1px;
    h2 {
        margin-top: 40px;
    }

    h2:first-child {
        margin-top: 0;
    }

    ul, ol {
        line-height: 28px;
    }

    a {
        color: var(--red);
    }
}

.prestations-list {
    margin-bottom: 40px;

    .column p {
        color: #888;
    }
}

.page-buttons {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    margin-top: 40px;
}

/* Blocs modulaires */
.bloc {
    padding: 40px 0;

    /* Un bloc doté d'une ancre (/page#mon-bloc) est une cible de défilement :
       sans cette marge, l'en-tête fixe recouvrirait son titre à l'arrivée.
       120px d'en-tête + une respiration. */
    scroll-margin-top: 140px;

    &.grey {
        background: #f5f1eb;
    }
}

.bloc-columns {
    .columns {
        flex-wrap: wrap;
        margin: 40px 0 0;
    }

    .column {
        flex: 1 1 200px;

        h3 {
            text-align: center;
        }
    }

    /* Photo d'une colonne : exactement le gabarit de la pastille d'icone
       qu'elle remplace — 160px de cote, ronde — pour que la grille garde
       son rythme, qu'une colonne porte une photo, une icone ou rien. Le
       recadrage vient de object-fit, herite de la regle picture img. */
    .column-photo {
        display: block;
        flex: 0 0 auto;
        width: 160px;
        height: 160px;
        border-radius: 50%;
        overflow: hidden;
        background: #f5f1eb;
    }
}

/* Formulaire de don RaiseNow (page Contribuer). La largeur maximale est celle
   recommandée par RaiseNow ; au-delà, le formulaire s'étire sans bénéfice. */
.bloc.donation {
    #rnw-solution-embed {
        width: 100%;
        max-width: 580px;
        margin: 40px auto 0;
    }

    .page-content {
        max-width: 700px;
        margin: 0 auto;
    }
}

/* Plusieurs images : carrousel occupant exactement la place d'une image seule.
   Les diapositives réutilisent le cadre défini par `.imgbox picture`, seule
   l'enveloppe est décrite ici. Règle partagée par les blocs « Bloc avec
   image » et par la section Robin des Watts de l'accueil.
   `min-width: 0` est indispensable : Siema fige la largeur de son cadre en
   pixels, et sans cela cette largeur repousserait la colonne à l'infini. */
.imgbox .imgbox-gallery {
    flex: 2 1 0;
    min-width: 0;
    box-sizing: border-box;

    .siema {
        overflow: hidden;
        border-radius: 20px;
    }

    .arrows {
        margin-top: 20px;
        text-align: center;
    }
}

.bloc.imgbox {
    &.img-left .wrap {
        flex-direction: row-reverse;
    }
}

/* Bloc « Texte avec galerie d'images » : texte large, images empilées dans une
   colonne étroite. Les 75 / 25 sortent de `flex: 3` contre `flex: 1`, qui se
   partagent la largeur restante une fois l'écart retiré. */
.bloc-gallerytext {
    .wrap {
        display: flex;
        gap: 40px;
        align-items: flex-start;
    }

    .content {
        flex: 2 1 0;
        min-width: 0;
    }

    &.text-right .wrap {
        flex-direction: row-reverse;
    }

    .gallery {
        flex: 1 1 0;
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 20px;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    picture {
        display: block;
        position: relative;
        aspect-ratio: 3 / 2;
        background: var(--red);
        border-radius: 20px;
        overflow: hidden;
    }
}

/* Bloc « Liens » : vignettes cliquables, titre facultatif. */
.bloc-liens {
    .liens {
        display: flex;
        flex-wrap: wrap;
        gap: 30px;
        list-style: none;
        margin: 40px 0 0;
        padding: 0;
    }

    .lien {
        flex: 1 1 200px;
        max-width: 320px;
        margin: 0;

        a {
            display: block;
            color: inherit;
            text-decoration: none;

            &:hover .lien-title {
                color: var(--red);
            }

            &:hover img {
                transform: scale(1.03);
            }
        }

        picture {
            display: block;
            position: relative;
            aspect-ratio: 3 / 2;
            border-radius: 20px;
            overflow: hidden;
            /*! background: #eee; */
        }

        img {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: contain;
            transition: transform 0.3s ease;
        }

        .lien-title {
            display: block;
            margin-top: 12px;
            text-align: center;
            font-weight: bold;
            transition: color 0.2s;
        }
    }
}


/* ----------------------------------------------------------
   7. ACTUALITÉS (liste + article)
   ---------------------------------------------------------- */
.chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 30px;
    border: 2px solid #ddd;
    background: #fff;
    color: #000;
    text-decoration: none;
    font-weight: 600;
    font-size: 15px;
    line-height: 1.2;
    transition: 0.2s;

    .count {
        color: #888;
        font-weight: normal;
        font-size: 13px;
    }

    &:hover {
        border-color: var(--red);
        color: var(--red);
    }

    &.active {
        background: var(--red);
        border-color: var(--red);
        color: #fff;

        .count {
            color: #fff;
        }
    }

    &.small {
        padding: 4px 12px;
        font-size: 13px;
        font-weight: normal;
    }
}

.blog-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 40px 0 30px;
}

.blog-active-filter {
    color: #888;
    margin: 0 0 30px;

    a {
        color: var(--red);
    }
}

.blog-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-bottom: 40px;

    .newscard {
        height: 100%;
    }
}

.post-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    margin: 20px 0 0;

    time {
        color: var(--red);
        font-weight: bolder;
    }
}

.post-tags {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 8px;
}

.post {
    padding-top: 24px;
    .post-image {
        display: block;
        border-radius: 20px;
        overflow: hidden;
        max-height: 420px;
        margin-bottom: 30px;
    }
}

.back-link {
    margin-top: 40px;

    a {
        font-weight: bold;
    }
}

.pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 8px;
    list-style: none;
    margin: 50px 0 0;
    padding: 0;

    margin-bottom: 50px;
    li {
        margin: 0;
    }

    .page-link {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 44px;
        height: 44px;
        padding: 0 12px;
        box-sizing: border-box;
        border: 2px solid #ddd;
        border-radius: 30px;
        background: #fff;
        color: #000;
        font-weight: 600;
        font-size: 15px;
        line-height: 1;
        text-decoration: none;
        transition: 0.2s;
    }

    .page-link.page-prev::before,
    .page-link.page-next::before {
        content: "";
        display: block;
        width: 13px;
        height: 11px;
        background-color: currentColor;
        -webkit-mask: var(--arrow-right) no-repeat center / contain;
        mask: var(--arrow-right) no-repeat center / contain;
    }

    .page-link.page-prev::before {
        transform: scaleX(-1);
    }

    a.page-link:hover {
        border-color: var(--red);
        color: var(--red);
    }

    .page-link.active {
        background: var(--red);
        border-color: var(--red);
        color: #fff;
    }

    .page-link.disabled {
        border-color: #eee;
        color: #ccc;
    }

    .page-gap {
        padding: 0 4px;
        color: #888;
    }
}



/* ----------------------------------------------------------
   3bis. MENU MOBILE
   ---------------------------------------------------------- */
.mobile-menu {
    display: none;
}

.mobile-container {
    display: none;
}

body.no-scroll, body.no-scroll>div, body.no-scroll footer {
    overflow: hidden;
    /* height: 100vh; */
}

@media (max-width: 980px) {

    #menu {
        display: none;
    }

    .mobile-menu {
        display: flex;
        align-items: center;
        gap: 20px;
    }

    .mobile-quick-menu {
        list-style: none;
        margin: 0;
        padding: 0;

        li.dropdown {
            position: relative;

            >a {
                font-weight: 600;
                cursor: pointer;

                &::after {
                    content: "";
                    display: inline-block;
                    width: 8px;
                    height: 6px;
                    margin-left: 6px;
                    vertical-align: middle;
                    background-color: currentColor;
                    -webkit-mask: var(--caret-down) no-repeat center / contain;
                    mask: var(--caret-down) no-repeat center / contain;
                    transition: 0.2s;
                }
            }

            &.open>a::after {
                transform: rotate(180deg);
            }

            .submenu {
                left: auto;
                right: 0;
                li{
                    line-height: 28px;
                    font-size:20px;
                    
                    
                    
                    a{
                        text-decoration:none;
                        color:#000;
                        font-weight: bold;
                    }
                }
            }
        }
    }

    .mobile-menu .dropdown.open>.submenu,
    .mobile-container .dropdown.open>.submenu {
        display: block;
    }

    .button_container {
        cursor: pointer;
        width: 26px;
        height: 18px;
        position: relative;
        flex: 0 0 auto;

        span {
            display: block;
            position: absolute;
            left: 0;
            width: 100%;
            height: 3px;
            border-radius: 3px;
            background: #000;
            transition: 0.3s;

            &.top {
                top: 0;
            }

            &.middle {
                top: 50%;
                margin-top: -1.5px;
            }

            &.bottom {
                bottom: 0;
            }
        }

        &.open {

            span.top {
                top: 50%;
                margin-top: -1.5px;
                transform: rotate(45deg);
            }

            span.middle {
                opacity: 0;
            }

            span.bottom {
                bottom: 50%;
                margin-bottom: -1.5px;
                transform: rotate(-45deg);
            }
        }
    }

    /* Hamburger – opens the main menu, fullscreen, below the header */
    .mobile-container {
        display: flex;
        align-items: center;
        justify-content: center;
        position: fixed;
        top: 120px;
        left: 0;
        height: calc(100vh - 120px);
        width: 100vw;
        z-index: 8;
        background: #fff;
        opacity: 0;
        visibility: hidden;
        transition: 0.3s;
        
        &.open {
            opacity: 1;
            visibility: visible;
        }

        .mobile-nav-list {
            list-style: none;
            margin: 0;
            padding: 0;
            text-align: center;

            >li {
                margin-bottom: 20px;
            }

            a {
                display: inline-block;
                text-decoration: none;
                color: #000;
                font-size: 26px;
                font-weight: 600;

                &:hover {
                    color: var(--red);
                }
            }

            .dropdown>a {
                cursor: pointer;

                &::after {
                    content: "";
                    display: inline-block;
                    width: 10px;
                    height: 8px;
                    margin-left: 8px;
                    vertical-align: middle;
                    background-color: currentColor;
                    -webkit-mask: var(--caret-down) no-repeat center / contain;
                    mask: var(--caret-down) no-repeat center / contain;
                    transition: 0.2s;
                }
            }

            .dropdown.open>a::after {
                transform: rotate(180deg);
            }

            .submenu {
                display: none;
                position: static;
                list-style: none;
                margin: 14px 0 0;
                padding: 0;
                min-width: 0;

                li {
                    margin-bottom: 10px;
                }

                a {
                    font-size: 18px;
                    font-weight: 500;
                }
            }
        }
    }
    #header {
        padding: 10px;
    }
    
    .navbar-brand {
        max-width: 160px;
        img{
            height:auto;
            width:100%;
        }
    }
#news, .bloc-posts {
    & .posts {
        flex-direction: column;
    }

    & .posts.all-single .single {
        flex: 1 1 auto;
    }
}

.blog-grid {
    grid-template-columns: 1fr;
}

.newscard {
    picture {
        height:auto;
        text-align: center;
    }
    &.small {
        picture {
            flex: 1 20%;
            min-width:160px;
        }
    }
}

.container {
    padding: 0 40px;
}

#stats {
    padding: 40px;
    .wrap{
        flex-direction: column;
        display: inline-block;
        /* align-items:center; */
        position: relative;
        left: 50%;
        transform: translateX(-50%);
        .item:nth-child(n+2){
            margin-top:40px;
        }
    }
}


#hero-text-container {
    h1 {
        font-size: 26px;
        min-width: auto;
        width: auto;
    }

    p {
        font-size: 18px;
        font-weight: bold;
        line-height: 28px;
        width: 80%;
        min-width: unset;
    }

    position:relative;
    z-index: 1;
}

#hero-bg-container {

    .wrap {
        transform:scale(0.7);
        transform-origin:bottom;
    }
}

.columns {
    flex-wrap: wrap;
}

footer{
    .wrap > .columns {
        flex-direction:column;
        align-items:center;
    }
}

.imgbox {

    .wrap {
        flex-direction:column-reverse;
        gap: 20px;
    }

    /* En colonne, les éléments ne s'étirent pas d'eux-mêmes (align-items:
       center) : il faut leur rendre la pleine largeur. `flex: none` est
       nécessaire : l'axe principal devient vertical, et le `flex-basis: 0`
       du cadre d'image s'y appliquerait à la hauteur, qui tomberait à zéro.
       La hauteur revient donc à la proportion 4/3 héritée. */
    & > .wrap > picture,
    .imgbox-gallery {
        flex: none;
        width: 100%;
    }
}

/* Le texte passe au-dessus — donc `column`, et non `column-reverse`, y compris
   quand il est à droite sur grand écran — et les images s'étalent sur deux
   colonnes plutôt que de former une longue file. */
.bloc-gallerytext {
    .wrap,
    &.text-right .wrap {
        flex-direction: column;
        gap: 30px;
    }

    .content,
    .gallery {
        flex: none;
        width: 100%;
    }

    .gallery {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }
}

#engage-partners {
    
    >.wrap {
        display: flex;
        flex-direction:column;
    }
}
    
}


@media (max-width: 1200px) {
    
    .navbar-brand {
        height: 50%;
    }
    
    #menu>li {
        &:nth-child(n+2) {
            margin-left: 0;
        }
        a{
            font-size: 14px;
        }
    }
    #stats {
        padding: 80px 40px;
        .wrap {
            gap: 80px;
        }
    }

    .newscard {
        .card-title {
            font-size: 22px;
        }
    }
    .bullets {
        flex-direction: column;
    }
}


@media (max-width: 560px) {

    .newscard {
        &:not(.small){
            flex-direction: column;
            >div,picture{
                width:100%;
            }
        }
        picture {
            height:auto;
        }
        &.small {
        picture {
                flex: 1 10% !important;
        min-width:120px;
            }
        }
    }

    footer .columns .columns{
        width:auto !important;
        gap: 20px !important;
        flex-direction: column;
        
        ul{
            width:auto !important;
        } 
    }
    
}