@import url('couleurs.css');
/* Mini (jusqu'à 479px) - Portrait de téléphones */
@media screen and (max-width: 479px) {
    .upepo-container-m {
        padding: 0 2.5em;
    }

    #upepo-navigation,
    .side__menu {
        display: none;
    }

    #upepo-navigation.show {
        display: block;
    }

    #menu-principal {
        display: flex;
        flex-direction: column;
    }

    #menu-principal .sub-menu.show {
        display: flex;
        flex-direction: column;
    }

    .sub-menu {
        padding: 0;
    }

    header {
        display: flex;
        flex-direction: column;

    }

    .container__wrap__navigation {
        display: flex;
        width: 100%;
        align-items: baseline;
        justify-content: space-between;
    }

    /* ------------ */
    /* Animation de slide pour afficher la navigation */
    #upepo-navigation {
        position: fixed;
        top: 0;
        left: -60%;
        width: 60%;
        height: 100%;
        background-color: white;
        transition: left 0.3s ease;
        z-index: 1000;
    }

    #wrapper__404__pages {
        /* align-items: center; */
        flex-direction: column;
    }

    #wrapper__404__pages>.illustration__404 {
        display: flex;
        margin: 2em 0;
    }

    #wrapper__404__pages>.redirect__content {
        /* margin-top: 2em; */
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .site-footer>.top__footer>* {
        flex: 0 0 45%;
    }

    .site-footer>.top__footer {
        display: flex;
        flex-direction: column;
    }

    .follow__us {
        flex-direction: column;
        align-items: initial;
    }

    .follow__us>.legal_doc {
        order: 2;
    }

    .follow__us>.follow__website {
        display: flex;
        justify-content: center;
    }

    .follow__us>.legal_doc {
        flex-direction: column;
    }

    .bottom__copyright {
        flex-direction: column;
        display: flex;
    }

    .copyright>p {
        text-align: center;
    }

    .by__lmb {
        order: 2;
        margin-top: 2.5em;
    }

    .copyright {
        order: 1;
    }

    .text__404 {
        font-size: 7em;
    }

    .content__single__post>.side__bar {
        display: none;
    }

    #container__filter__post>.post-item {
        flex: initial;
    }

    .top__info__single__post {
        flex-direction: column;
    }

    .top__info__single__post>.fil__ariane {
        order: 1;
    }

    .top__info__single__post>.categories {
        order: 2;
    }

    .container__more__read>.article-interessant,
    .ctr__our__selection>.article-interessant {
        flex: auto;
    }

    .hero__front-page {
        justify-content: center;
    }

    .hero__front-page>.cta__front-page {
        width: 65%;
    }

    .hero__front-page>.cta__front-page>h1 {
        font-size: 1.5rem;
    }

    .hero__front-page>.cta__front-page {
        padding: 1.5em !important;
    }

    .head__content>button {
        display: none;
    }

    #head__content__front__page>.container__btn,
    .our__selection>.container__btn,
    .new_head__content__front__page>.container__btn,
    .ctr__structures__in__front-page>.container__btn {
        display: flex;
        justify-content: center;
        margin: 2em 0;
    }

    .news-recentes-ftpage-item-content {
        margin-left: 0;
    }

    .news-recentes-ftpage-item {
        flex-direction: column;
    }

    #upepo-navigation {
        padding: 1.5em;
    }

    .two__ctr {
        flex-direction: column;
    }

    .two__ctr>.info__gen>.reseaux__sociaux>h3 {
        margin-top: 1em;
    }

    .top__info__single__structure {
        flex-direction: column;
    }

    .top__info__single__structure>.categories {
        margin: 1em 0;
    }

    #menu-mobile a.uk-navbar-toggle {
        min-height: 45px !important;
    }

    .content__single__structure .header__content>.thumbnail,
    .content__single__post>.content>.thumbnail {
        height: 77vw !important;
        display: inline-flex;
    }

    .uk-slider-container>.uk-slider-items>div.uk-grid,
    .uk-slider-container>.uk-slider-items>div.uk-grid-small {
        margin-left: 0 !important;
    }

    .two__ctr>.info__gen>.reseaux__sociaux>ul {
        padding-left: 0 !important;
    }

    .hero__front-page>.cta__front-page>.original {
        display: none !important;
    }

    .hero__front-page {
        height: 40vh;
    }

    #wrap__taxonomy__secteur_activite>.side__bar {
        display: none;
    }

    /*? ------------ Début des styles sur proverbes ------------*/
    .wrap_proverbes>.container_proverbes {
        flex-direction: column;
    }

    .wrap_proverbes>.container_proverbes>.proverbe {
        width: 100%;
    }

    .wrap_proverbes>.container_proverbes>.ctr_proverbes>.content_proverbes {
        margin: 2.5em 0;
        width: auto;
    }

    .wrap_proverbes>.container_proverbes>.side_bar {
        margin-top: 2em;
    }

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

    .new_head__content__front__page>.ctr__new__content {
        flex-direction: column;
    }

    .ctr__structures__in__front-page>.ctr__structures__item {
        flex-direction: column;
    }
}

/* Petit (480px à 767px) - Paysage des téléphones */
@media screen and (min-width: 480px) and (max-width: 767px) {

    .upepo-container-m {
        padding: 0 2.5em;
    }

    #upepo-navigation,
    .side__menu {
        display: none;
        /* Cache par défaut */
    }

    #upepo-navigation.show {
        display: block;
    }

    #menu-principal {
        display: flex;
        flex-direction: column;
    }

    #menu-principal .sub-menu.show {
        display: flex;
        flex-direction: column;
    }

    .sub-menu {
        padding: 0;
    }

    header {
        display: flex;
        flex-direction: column;

    }

    .container__wrap__navigation {
        display: flex;
        width: 100%;
        align-items: baseline;
        justify-content: space-between;
    }

    /* ------------ */
    /* Animation de slide pour afficher la navigation */
    #upepo-navigation {
        position: fixed;
        top: 0;
        left: -60%;
        width: 60%;
        height: 100%;
        background-color: white;
        transition: left 0.3s ease;
        z-index: 1000;
    }

    #wrapper__404__pages {
        /* align-items: center; */
        flex-direction: column;
    }

    #wrapper__404__pages>.illustration__404 {
        display: flex;
    }

    #wrapper__404__pages>.redirect__content {
        margin-top: 2em;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .site-footer>.top__footer>* {
        flex: 0 0 45%;
    }

    .site-footer>.top__footer {
        display: flex;
        flex-direction: column;
    }

    .follow__us,
    .bottom__copyright,
    .bottom__copyright>.legal_doc {
        flex-direction: column;
    }

    .follow__us>.by__lmb {
        justify-content: center;
        order: 2;
    }

    .copyright>p {
        text-align: center;
    }

    /*? ------------ Début des styles sur proverbes ------------*/
    .wrap_proverbes>.container_proverbes {
        flex-direction: column;
    }

    .wrap_proverbes>.container_proverbes>.proverbe {
        width: 100%;
    }

    .wrap_proverbes>.container_proverbes>.ctr_proverbes>.content_proverbes {
        margin: 2.5em 0;
        width: auto;
    }

    .wrap_proverbes>.container_proverbes>.side_bar {
        margin-top: 2em;
    }

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

    .new_head__content__front__page>.ctr__new__content {
        flex-direction: column;
    }

    .ctr__structures__in__front-page>.ctr__structures__item {
        flex-direction: column;
    }
    .communes_mayotte .elementor-shortcode {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: 20px;
    }
}

/* Large (768px à 959px) - Portrait de tablettes */
@media screen and (min-width: 768px) and (max-width: 959px) {

    .upepo-container-m {
        padding: 0 2.5em;
    }

    #upepo-navigation,
    .side__menu {
        display: none;
        /* Cache par défaut */
    }

    #upepo-navigation.show {
        display: block;
    }

    #menu-principal {
        display: flex;
        flex-direction: column;
    }

    #menu-principal .sub-menu.show {
        display: flex;
        flex-direction: column;
    }

    .sub-menu {
        padding: 0;
    }

    header {
        display: flex;
        flex-direction: column;

    }

    .container__wrap__navigation {
        display: flex;
        width: 100%;
        align-items: baseline;
        justify-content: space-between;
    }

    /* ------------ */
    /* Animation de slide pour afficher la navigation */
    #upepo-navigation {
        position: fixed;
        top: 0;
        left: -60%;
        width: 60%;
        height: 100%;
        background-color: white;
        transition: left 0.3s ease;
        z-index: 1000;
    }

    #wrapper__404__pages {
        /* align-items: center; */
        flex-direction: column;
    }

    #wrapper__404__pages>.illustration__404 {
        display: flex;
        margin: 2em 0;
    }

    #wrapper__404__pages>.redirect__content {
        /* margin-top: 2em; */
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .thumbnail>img {
        object-fit: unset !important;
    }

    .site-footer>.top__footer {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .site-footer>.top__footer>* {
        flex: 0 0 45%;
    }

    .text__404 {
        font-size: 8em;
    }

    .content__single__post>.side__bar {
        display: none;
    }

    #container__filter__post>.post-item {
        flex: auto;
    }

    .container__more__read>.article-interessant {
        flex: initial;
        width: 48%;
    }

    #upepo-navigation {
        padding: 1.5em;
    }

    .hero__front-page {
        justify-content: center;
    }

    .hero__front-page>.cta__front-page>.mobile {
        display: none !important;
    }

    .hero__front-page>.cta__front-page {
        width: 65%;
    }

    #head__content__front__page>.container__btn,
    .new_head__content__front__page>.container__btn,
    .ctr__structures__in__front-page>.container__btn {
        display: none;
    }

    .our__selection {
        margin-top: 2em;
    }

    .our__selection>.container__btn {
        margin: 2em 0 0 0;
        display: flex;
        justify-content: center;
    }

    .ctr__our__selection>.article-interessant {
        width: 45%;
        flex: initial;
    }

    .top__info__single__structure {
        flex-direction: column;
    }

    .top__info__single__structure>.categories {
        margin-bottom: 1em;
    }

    .two__ctr {
        flex-direction: column;
    }

    .two__ctr>.info__gen>.reseaux__sociaux>ul {
        flex-wrap: wrap;
    }

    .two__ctr>.info__gen {
        display: flex;
        margin-bottom: 2em;
    }

    .two__ctr>.info__gen>div {
        width: 50%;
    }

    #wrap__taxonomy__secteur_activite {
        display: flex;
        flex-direction: column;
    }

    #wrap__taxonomy__secteur_activite>.side__bar {
        display: flex;
        flex-direction: initial;
        align-items: initial;
    }

    #wrap__taxonomy__secteur_activite>.side__bar>.container__secteur__activite>ul {
        display: flex;
        gap: 1.5em;
        flex-wrap: wrap;
    }

    /*? ------------ Début des styles sur proverbes ------------*/
    .wrap_proverbes>.container_proverbes {
        flex-direction: column;
    }

    .wrap_proverbes>.container_proverbes>.proverbe {
        width: 100%;
    }

    .wrap_proverbes>.container_proverbes>.ctr_proverbes>.content_proverbes {
        margin: 2.5em 0;
        width: auto;
    }

    .wrap_proverbes>.container_proverbes>.side_bar {
        margin-top: 2em;
    }

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

    .new_head__content__front__page>.ctr__new__content {
        flex-direction: column;
    }

    .ctr__structures__in__front-page>.ctr__structures__item {
        flex-wrap: wrap;
        gap: 1rem;
        justify-content: center;
    }

    .ctr__structures__in__front-page>.ctr__structures__item>div {
        width: 47% !important;
    }
    .communes_mayotte .elementor-shortcode {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
}

/* Grand (960px à 1199px) - paysage de bureau et tablettes */
@media screen and (min-width: 960px) and (max-width: 1199px) {
    .upepo-container {
        padding: 0 2.5em;
        width: initial;
    }

    #menu-mobile,
    #upepo-navigation>.close-button,
    .side__menu {
        display: none;
    }

    header {
        display: flex;
        flex-direction: column;
    }

    .container__wrap__navigation {
        display: flex;
        width: 100%;
        justify-content: center;
    }

    .container__wrap__navigation>#upepo-navigation>#menu-principal>li {
        margin: 0 1em;
    }

    .container__wrap__navigation>#upepo-navigation>#menu-principal>li>a {
        border: initial;
    }

    /* -------- */
    /* Assurez-vous que les éléments parents des sous-menus ont une position relative */
    #menu-principal>li {
        position: relative;
    }

    /* Styles pour les sous-menus */
    #menu-principal .sub-menu {
        display: none;
        position: absolute;
        top: 100%;
        /* Positionne le sous-menu juste en dessous de l'élément parent */
        left: -30px;
        /* Aligné avec le côté gauche de l'élément parent */
        width: 100%;
        /* Optionnel: ajustez selon la largeur désirée */
        background-color: white;
        /* Optionnel: couleur de fond */
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
        /* Optionnel: ombre pour le sous-menu */
        z-index: 1000;
        /* Assurez-vous qu'il est au-dessus des autres éléments */
    }

    /* Styles pour afficher les sous-menus */
    #menu-principal .sub-menu.show {
        display: block;
        width: max-content;
    }

    #menu-principal .sub-menu li>.sub-menu {
        width: 100%;
        position: absolute;
        left: 0;
    }

    .container__wrap__navigation>#upepo-navigation>#menu-principal>li>a::before {
        content: "";
        position: absolute;
        width: 100%;
        height: 3px;
        background-color: #222222;
        bottom: 0;
        left: 0;
        transform: scaleX(0);
        transition: transform 0.5s ease-in-out;
        transform-origin: left center;
    }

    .container__wrap__navigation>#upepo-navigation>#menu-principal>li>a:hover::before {
        transform: scaleX(1);
    }

    .hero__front-page>.cta__front-page {
        margin-left: 8em;
    }

    .hero__front-page>.cta__front-page>.mobile {
        display: none !important;
    }
    .communes_mayotte .elementor-shortcode {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
}

/* Xlarge (1200px et plus) - Grands ordinateurs de bureau */
@media screen and (min-width: 1200px) {

    #menu-mobile,
    #upepo-navigation>.close-button,
    .side__menu {
        display: none;
    }

    header {
        display: flex;
        flex-direction: column;
    }

    .container__wrap__navigation {
        display: flex;
        width: 100%;
        justify-content: center;
    }

    .container__wrap__navigation>#upepo-navigation>#menu-principal>li {
        margin: 0 1em;
    }

    .container__wrap__navigation>#upepo-navigation>#menu-principal>li>a {
        border: initial;
    }

    /* -------- */
    /* Assurez-vous que les éléments parents des sous-menus ont une position relative */
    #menu-principal>li {
        position: relative;
    }

    /* Styles pour les sous-menus */
    #menu-principal .sub-menu {
        display: none;
        position: absolute;
        top: 100%;
        /* Positionne le sous-menu juste en dessous de l'élément parent */
        left: -30px;
        /* Aligné avec le côté gauche de l'élément parent */
        width: 100%;
        /* Optionnel: ajustez selon la largeur désirée */
        background-color: white;
        /* Optionnel: couleur de fond */
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
        /* Optionnel: ombre pour le sous-menu */
        z-index: 1000;
        /* Assurez-vous qu'il est au-dessus des autres éléments */
    }

    /* Styles pour afficher les sous-menus */
    #menu-principal .sub-menu.show {
        display: block;
        width: max-content;
    }

    #menu-principal .sub-menu li>.sub-menu {
        width: 100%;
        position: absolute;
        left: 0;
    }

    .container__wrap__navigation>#upepo-navigation>#menu-principal>li>a::before {
        content: "";
        position: absolute;
        width: 100%;
        height: 3px;
        background-color: #222222;
        bottom: 0;
        left: 0;
        transform: scaleX(0);
        transition: transform 0.5s ease-in-out;
        transform-origin: left center;
    }

    .container__wrap__navigation>#upepo-navigation>#menu-principal>li>a:hover::before {
        transform: scaleX(1);
    }

    .text__404 {
        font-size: 12em;
    }

    .hero__front-page>.cta__front-page {
        margin-left: 10em;
    }

    #head__content__front__page>.container__btn,
    .new_head__content__front__page>.container__btn,
    .ctr__structures__in__front-page>.container__btn,
    .our__selection>.container__btn  {
        display: none !important;
    }

    .our__selection>.head__content {
        padding: 2em 0;
    }

    .our__selection>.container__btn {
        display: flex;
        justify-content: center;
        margin: 2em 0;
    }

    .two__ctr>.info__gen>.infos__generales {
        margin-bottom: 1.25em;
    }

    .hero__front-page>.cta__front-page>.mobile {
        display: none !important;
    }
    .communes_mayotte .elementor-shortcode {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
}