/* Declaration des couleurs pour la charte graphique */
:root {
    --bleu: #1E3D7F;
    --jaune: #FFCB00;
    --gris-fonce: #4C4C4C;
    --gris-clair: #ECECEC;
    --vert-pale: #EAECDA;
    --jaune-pale : #F8F2E0;
}

.pt-6,
.py-6 {
    padding-top: 3.7rem !important;
}

.pe-6,
.px-6 {
    padding-right: 3.7rem !important;
}

.pb-6,
.py-6 {
    padding-bottom: 3.7rem !important;
}

.ps-6,
.px-6 {
    padding-left: 3.7rem !important;
}


.pt-7,
.py-7 {
    padding-top: 5.5rem !important;
}

.pe-7,
.px-7 {
    padding-right: 5.5rem !important;
}

.pb-7,
.py-7 {
    padding-bottom: 5.5rem !important;
}

.ps-7,
.px-7 {
    padding-left: 5.5rem !important;
}

.bg-grey {
    background-color: var(--gris-clair);
}

html {
  font-size: 16px;
  font-family: source sans;
  overflow-x: hidden;
}

body {
    color: var(--gris-fonce);
}

input:invalid {
    border: red solid 2px;
}

ul:not(.navbar, .pagination, .chosen-choices, .chosen-results) {
    list-style: none; /* Remove list bullets */
    padding: 0;
    margin: 0;
}

ul li:not(.nav-item, .page-item, .active-result, .result-selected, .search-choice, .search-field, .dropdown-menu) {
    padding-left: 16px;
}

ul li:not(.nav-item, .page-item, .active-result, .result-selected, .search-choice, .search-field, [class^='select2-'], .validation-summary-errors, .dropdown-item)::before {
    content: '■';
    padding-right: 8px;
    color: var(--bleu);
    font-size: 15px;
}

/* Pour les colonnes triables */
th a {
    border: none !important;
    color: black !important;
}

th {
    text-align: center !important;
}

/* Désactive le changement de couleur au survol */
.btn-articles:hover {
    color: white;
    text-decoration: none !important;
}

.text-titre-accordion {
    font-size: 26px;
    font-weight: bold;
    text-transform: uppercase;
    color: var(--bleu);
    text-align: left;
    border-bottom: 2.5px solid var(--jaune);
    display: inline-block; /* Pour que le soulignement ne prenne que la largeur du texte */
}


.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
    font-family: 'Source Sans 3', sans-serif !important;
}

.store-badge {
    height: 60px; /* Hauteur uniforme */
    width: auto; /* Conserve les proportions */
    max-width: 100%; /* Reste responsive */
}

.form-group{
    margin-bottom:15px;
}

.landscape-container {
    width: 100%;
    overflow: hidden; /* Cache les parties de l'image qui dépassent */
}

.landscape-container .landscape-img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Recadre l'image pour qu'elle remplisse le conteneur */
    object-position: center; /* Centre l'image */
}

.bandeau-top {
    height: 125px; /* Ajuste cette hauteur */
    background: linear-gradient(to bottom, #A3BFEC, #FDFEFF); /* Dégradé vertical */
    align-items: center;
    padding: 0 20px; /* Espace sur les côtés */
}

.breadcrumb-container {
    margin: 0; /* Supprime les marges par défaut */
    padding: 0;
}

.breadcrumb {
    margin-bottom: 0; /* Supprime la marge inférieure */
    background-color: transparent; /* Fond transparent */
    padding: 0;
}

.breadcrumb-item,
.breadcrumb-item a {
    color: black !important;
    text-transform: uppercase;
    font-size: 15px;
    text-decoration: none;
}

.breadcrumb-item + .breadcrumb-item {
    padding-left: 0px;
}

.breadcrumb-item > li {
    display: inline-block;
}

.breadcrumb-item + .breadcrumb-item::before {
    content: ">" !important; /* Force l'affichage du chevron */
    padding: 0 5px;
    color: black; /* Couleur du chevron */
}

.breadcrumb-item + .active {
    font-weight: 630; /* Épaisseur de la police */
}

.conteneur-sousentete {
    display: flex;
    justify-content: space-between; /* Espace les images aux extrémités */
    align-items: center; /* Centre verticalement */
}

.image-sousentete {
    width: 40%; /* Largeur de chaque image (ajustez selon vos besoins) */
    padding: 0 5%;

}

    .image-sousentete img {
        max-height: 60px; /* Image responsive */
    }

/* Style du menu principal */
.menu-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px; /* Espacement entre les éléments */
    padding: 15px 0;
    overflow-x: hidden; /* Masque les éléments qui dépassent */
    position: relative;
}

/* Style des éléments du menu */
.menu-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 80px;
    text-decoration: none;
    color: #333;
    transition: transform 0.2s;
}

    .menu-item:hover {
        transform: scale(1.1);
    }

    .menu-item i {
        font-size: 1.5rem;
        margin-bottom: 5px;
    }

    .menu-item span {
        font-size: 0.8rem;
        text-align: center;
    }

/* Style du carrousel (visible uniquement sur mobile) */
.menu-carousel {
    display: none; /* Masqué par défaut */
    overflow-x: auto;
    scroll-behavior: smooth;
    padding: 10px 0;
    gap: 15px;
    white-space: nowrap;
}

/* Style pour les flèches de navigation du carrousel */
.carousel-nav {
    display: none; /* Masqué par défaut */
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.8);
    border: none;
    padding: 10px;
    cursor: pointer;
    z-index: 10;
}

    .carousel-nav.left {
        left: 10px;
    }

    .carousel-nav.right {
        right: 10px;
    }

/* Style de base pour les indicateurs (ronds) */
.carousel-coopelso.carousel-dark .carousel-indicators [data-bs-target] {
    width: 12px;
    height: 12px;
    border-radius: 50%; /* Forme ronde */
    margin: 0 4px;
    border: 2px solid var(--bleu); /* Bordure blanche pour visibilité */
    background-color: transparent;
    transition: all 0.3s ease; /* Animation fluide */
}

/* Style pour l'indicateur actif (rempli) */
.carousel-coopelso.carousel-dark .carousel-indicators .active {
    background-color: var(--bleu) !important;
    border-color: var(--bleu);
}


.text-center {
    padding-bottom: 60px;
}

.btn-primary {
    background-color: var(--bleu);
    border-color: var(--bleu);
}

/* Classe pour un titre stylisé avec trait vertical jaune */
.text-titre1 {
    display: flex; /* Utilise flexbox pour aligner le contenu */
    align-items: center; /* Centre verticalement le texte et le trait */
    font-size: 45px; 
    font-weight: bold; 
    color: var(--bleu);
    position: relative; /* Permet de positionner le trait absolument */
    margin: 20px 0; /* Marge verticale */
    text-align: left;
    width: 80% !important;
}

/* Trait vertical jaune à gauche */
/*.text-titre1::before {
    content: "";*/ /* Contenu vide pour le pseudo-élément */
    /*position: absolute;
    left: 0;*/ /* Positionne le trait à gauche */
    /*top: 0;
    bottom: 0;*/ /* S'étend sur toute la hauteur */
    /*width: 5px;*/ /* Épaisseur du trait */
    /*background-color: var(--jaune);
    border-radius: 2px;*/ /* Arrondi léger des bords */
/*}*/

/* Classe pour un titre stylisé avec trait vertical jaune */
.text-titre2 {
    font-size: 26px; 
    font-weight: bold; 
    text-transform: uppercase;
    color: var(--bleu);
    text-align: left;
    border-bottom: 2.5px solid var(--jaune); 
    display: inline-block; /* Pour que le soulignement ne prenne que la largeur du texte */
    padding-top: 40px;
}

/* Classe pour un titre stylisé */
.text-titre3 {
    font-size: 66px;
    font-weight: bold; 
    color: var(--bleu); 
    text-align: left;
    font-family: 'Caveat', sans-serif !important;
    line-height: 4rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
}

/* Classe pour un sous-titre stylisé */
.text-sous-titre3 {
    font-size: 3rem;
    font-weight: bold;
    color: var(--bleu);
    text-align: left;
    font-family: 'Caveat', sans-serif !important;
    line-height: 4rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
}

/* Classe pour un titre stylisé avec trait vertical jaune */
.text-titre4 {
    font-size: 1.3rem; /* Taille de la police (ajustable) */
    font-weight: 620; /* Épaisseur de la police */
    text-transform: uppercase;
    color: var(--gris-fonce); /* gris */
    text-align: left;
    border-bottom: 3px solid var(--jaune); /* Épaisseur et couleur du soulignement */
    display: inline-block; /* Pour que le soulignement ne prenne que la largeur du texte */
    padding-top: 40px;
}

/* Classe pour un titre stylisé avec trait vertical jaune */
.text-presentation {
    font-size: 30px;
    padding-left: 15px; /* Espace entre le trait et le texte */
    position: relative; /* Permet de positionner le trait absolument */
    margin-top: 30px; /* Marge verticale */
    text-align: left;
    width: 75% !important;
    color: var(--gris-fonce);
}

.articles-container {
    background-color: var(--vert-pale);
    padding-left: 5%; /* Rétablit l'alignement du contenu */
    padding-right: 5%; /* Idem */
    padding-bottom: 40px;
}

.text-articles {
    padding-bottom: 20px;
    font-size: 22px;
}

.article-principal-container {
    width: 70%;
}

.article-principal-titre {
    font-size: 2rem;
    font-weight: bold;
    text-transform: uppercase;
}
    
.article-principal-resume {
    font-size: 18px;
}

/* Optionnel : pour espacer l'icône du texte */
.lien-avec-icone{
    color: var(--bleu);
    font-size: 1.125rem;
    font-weight: bold;
    text-decoration: none;
}

.article-secondaire-titre {
    text-transform: uppercase;
}

.article-principal-image-container img {
    max-width: 100%;
    height: auto;
    width: 100%;
    object-fit: contain;
}

.article-secondaire-img img {
    max-width: 200px;
    height: auto;
}

/* Style personnalisé pour le bouton */
.btn-articles {
    background-color: var(--bleu);
    color: white;
    border-radius: 1rem; /* Angles arrondis (équivalent à rounded en Bootstrap) */
    display: inline-flex;
    align-items: center;
    text-transform: uppercase;
    font-size: 1.375rem;
    text-decoration: none;
    padding-right: 1rem;
    padding-left: 1rem;
}

.article-secondaire{
    padding-bottom: 15px;
}

/* Style pour le carrousel */
.article-carousel-titre {
    font-size: 1.2rem;
    text-transform: uppercase;
}

.article-carousel-resume {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.carousel-item {
    align-items: center;
    padding: 2rem;
    background-color: var(--gris-clair);
    text-align: center;
}

    .carousel-item .image-container {
        margin-bottom: 20px; /* Espace entre l'image et le texte */
    }

    .carousel-item img {
        max-width: 100%; /* Largeur maximale de l'image */
        width: auto;
        height: auto;
        object-fit: contain; /* Conserve les proportions de l'image */
    }

.carousel-vert {
    background-color: var(--vert-pale);
}

.carousel-jaune {
    background-color: var(--jaune-pale);
}

.carousel-blanc {
    background-color: white;
}

.carousel-caption {
    position: static;
    padding: 0;
    color: #333;
    background: transparent;
    margin-top: auto; /* Pour pousser le texte vers le bas */
    width: 100%; /* Prend toute la largeur disponible */
}

    .carousel-caption h3 {
        margin-bottom: 10px; /* Espace entre le titre et le texte */
    }

.services-container {
    padding-left: 5%; /* Rétablit l'alignement du contenu */
    padding-right: 5%; /* Idem */
    padding-bottom: 40px;
    color : var(--gris-fonce) !important;
}


.kiosque-container {
    background-color: var(--jaune-pale);
    padding-left: 5%; /* Rétablit l'alignement du contenu */
    padding-right: 5%; /* Idem */
    padding-bottom: 40px;
}


.histoire-container {
    padding-left: 5%; /* Rétablit l'alignement du contenu */
    padding-right: 5%; /* Idem */
    padding-bottom: 40px;
    color: var(--gris-fonce) !important;
}

.recrutement-container {
    padding-left: 5%; /* Rétablit l'alignement du contenu */
    padding-right: 5%; /* Idem */
    padding-bottom: 40px;
    background-color: var(--gris-clair);
}

.partenaires-container {
    padding-left: 5%; /* Rétablit l'alignement du contenu */
    padding-right: 5%; /* Idem */
    padding-bottom: 40px;
    color: var(--gris-fonce) !important;
}

.text-newsletter {
    padding-left: 50%; /* Rétablit l'alignement du contenu */
    width: 80%;
}

.text-partenaires {
    padding-left: 50%; /* Rétablit l'alignement du contenu */
    width: 80%;
}

.index-footer {
    background: linear-gradient(#1E3D7F, #001032);
    padding-top: 15px;
    overflow: hidden; /* Empêche le débordement */
    width: 100%;
    box-sizing: border-box;
    position: relative;
    z-index: 1;
}

.footer-link {
    padding-top: 40px;
    padding-bottom: 120px;
    color: white !important;
    text-decoration: none;
}

.vertical-divider {
    border-right: 2px solid var(--jaune);
}

.titre-annonce {   
    font-size: 1.2rem;
    font-weight: 400;
    color: var(--gris-fonce);
    padding-left: 15px;
    position: relative;
    margin: 20px 0;
    text-align: left;
    width: 50%;
    text-transform:uppercase;
}
    .titre-annonce::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 2px;
        background-color: var(--jaune);
        border-radius: 2px;
    }

.newsletter-container-full {
    padding-left: 5%; /* Rétablit l'alignement du contenu */
    padding-right: 5%; /* Idem */
    padding-bottom: 40px;
    color: var(--gris-fonce) !important;
}

.partenaires-container-full {
    padding-left: 5%; /* Rétablit l'alignement du contenu */
    padding-right: 5%; /* Idem */
    padding-bottom: 40px;
}

.recrutement-column {
    padding-bottom: 40px;
    background-color: var(--gris-clair);
    padding-right: 5% !important;
}

.texte-sous-image{
    padding-top: 30px;
    padding-bottom: 0 !important;
    font-style: italic;
}


.texte-magazine-principal{
    max-width: 250px;
}


.magazine-secondaire-img{
    max-width: 250px;
}

.article-titre {  
    font-size: 2rem; 
    font-weight: 630;
    color: var(--bleu); 
    margin: 20px 0; 
    text-align: left;
    width: 70%;
    text-transform: uppercase;
    line-height: 2rem;
}

.article-date {
    font-size: 1.0rem; /* Taille de la police (ajustable) */
    font-weight: 600; /* Épaisseur de la police */
    color: var(--gris-fonce); /* gris */
    margin: 20px 0; /* Marge verticale */
    text-align: left;
    font-style: italic;
}

.article-image-wide {
    left: 0;
    top: 0;
    width: 100%;
    z-index: 100; /* Assure que l'image est au-dessus */
}

    .article-image-wide img {
        width: 100%;
        height: auto;
        display: block;
    }

.article-image {
        width: 100%;
    }

.article-image img {
    width: 100%;
}

.article-image-inrow {
    height: 100%;
    display: flex;
}

    .article-image-inrow img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        max-height: 45vh;
    }

.object-fit-cover {
    object-fit: cover;
}

.accueil-img {
    max-height: 45vh !important;
}
/*
.ratio-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}*/

.article-image-legend {
    font-size: 1.0rem; /* Taille de la police (ajustable) */
    font-weight: 400; /* Épaisseur de la police */
    color: var(--gris-fonce); /* gris */
    margin: 20px 0; /* Marge verticale */
    text-align: left;
    font-style: italic;
}

.article-chapo {
    font-size: 1.2rem; /* Taille de la police (ajustable) */
    font-weight: 600; /* Épaisseur de la police */
    color: var(--gris-fonce); /* gris */
    text-align: left;
}

.article-texte {
    font-size: 1.0rem; /* Taille de la police (ajustable) */
    font-weight: 400; /* Épaisseur de la police */
    color: var(--gris-fonce); /* gris */
    text-align: left;
}

/* Style pour le conteneur de la vidéo */
.video-container {
    position: relative;
    width: 100%; /* Prend toute la largeur de la div parente */
    padding-bottom: 56.25%; /* Ratio 16:9 (9/16 = 0.5625) */
    height: 0; /* Nécessaire pour que le padding-bottom fonctionne */
    overflow: hidden;
    margin: 20px 0; /* Espacement vertical */
}

    /* Style pour l'iframe YouTube */
    .video-container iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border: none;
    }

.articles-autres {
    font-size: 1.4rem;
    font-weight: 620;
    text-transform: uppercase;
    color: var(--gris-fonce);
    text-align: left;
    border-top: 3px solid var(--jaune);
    display: inline-block;
    margin-top: 15px;
    padding-top: 10px;
    padding-bottom: 20px;
}

.annonce-container{
    padding-bottom: 20px;
}

.article-liste-item:not(:last-child) {
    border-bottom: 1px solid var(--bleu);    
}
.article-liste-item-titre {
    font-size: 1.3rem;
    font-weight: 620;
    text-transform: uppercase
}

.article-liste-item-chapo {
    font-size: 1rem;
    color: var(--gris-fonce);
}

/* Wrapper du carrousel mobile avec boutons */
.menu-carousel-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 10px 0;
    position: relative;
}

/* Style des flèches de scroll */
.scroll-arrow {
    width: 24px;
    height: 24px;
    cursor: pointer;
    flex-shrink: 0;
    transition: transform 0.2s ease;
    object-fit: contain;
}

.scroll-arrow:hover {
    transform: scale(1.1);
}

.scroll-arrow:active {
    transform: scale(0.95);
}

/* Le carrousel doit prendre l'espace restant */
.menu-carousel {
    flex: 1;
    display: flex;
    overflow-x: auto;
    scroll-behavior: smooth;
    gap: 15px;
    white-space: nowrap;
    padding: 10px 0;
}

.menu-carousel::-webkit-scrollbar {
    height: 4px;
}

.menu-carousel::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

.menu-carousel::-webkit-scrollbar-thumb {
    background: var(--bleu);
    border-radius: 10px;
}

.menu-carousel::-webkit-scrollbar-thumb:hover {
    background: var(--jaune);
}

/* ========= Media query (max-width) ============== */
@media (max-width: 1200px) {
    .tag-row {
        padding-left: 0px;
    }

    .accordion-item {
        padding-right: 0rem;
        padding-left: 0rem;
    }

    .accordion-collapse {
        padding-right: 1rem;
        padding-left: 1rem;
    }

    .text-titre-accordion {
        width: 98%;
    }

    .accordion-header {
        padding-left: 0.8rem;
    }
}

@media (max-width: 768px) {
    .menu-carousel-wrapper {
        gap: 5px;
        padding: 10px 5px;
    }

    .scroll-arrow {
        width: 20px;
        height: 20px;
    }

    .text-nos-services {
        text-align: justify;
    }

    .px-m-4 {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    .text-titre2 {
        font-size: 1.3rem;
    }

    .text-titre3 {
        font-size: 3.3rem;
        line-height: 3rem;
        padding-top: 0rem;
    }

    .newsletter-column {
        padding-left: 5% !important;
        padding-bottom: 40px;
        background-color: var(--gris-clair);
        position: relative; /* AJOUT NÉCESSAIRE */
    }

    .carousel-item {
        min-height: 55vh;
    }


    /* Classe pour un titre stylisé avec trait vertical jaune */
    .text-titre1 {
        width: 90% !important;
        line-height: 3rem;
    }

    /* Classe pour un titre stylisé avec trait vertical jaune */
    .text-presentation {
        width: 90% !important;
    }

    .menu-container {
        display: none; /* Masque le menu principal sur mobile */
    }

    .articles-container-desktop {
        display: none !important; /* Masque le menu principal sur mobile */
    }

    .articles-container-mobile {
        display: block; /* Masque le menu principal sur mobile */
    }

    .landscape-col {
        padding-left: 0px !important;
        padding-right: 0px !important;
    }

    .menu-carousel {
        display: flex; /* Affiche le carrousel sur mobile */
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch; /* Pour un défilement fluide sur iOS */
        overflow-x: hidden;
    }

    .carousel-nav {
        display: block; /* Affiche les flèches de navigation */
    }

    .menu-item {
        scroll-snap-align: start; /* Aligne les éléments au début du conteneur */
        flex: 0 0 auto; /* Empêche les éléments de rétrécir */
    }

    .accordion-header {
        padding-left: 1.5rem;
    }

    .text-titre-accordion {
        width: 96%;
    }

    .ps-5,
    .px-5 {
        padding-left: 1rem !important;
    }

    .ps-6,
    .px-6 {
        padding-left: 1.6rem !important;
    }
}

@media (max-width: 480px) {
    .menu-carousel-wrapper {
        gap: 3px;
        padding: 10px 0;
    }

    .scroll-arrow {
        width: 18px;
        height: 18px;
    }

    .carousel-item {
        min-height: 52vh;
    }

    .text-titre-accordion {
        width: 95%;
    }
}

@media (max-width: 400px) {
    .carousel-item {
        min-height: 42vh;
    }

    .text-titre-accordion {
        width: 93%;
    }
}
/* ========= Fin des Media query (max-width) ============== */


/* ========= Media query (min-width) ============== */
@media (min-width: 480px){
    .newsletter-column {
        padding-left: 5% !important;
        padding-bottom: 40px;
        background-color: var(--gris-clair);
        position: relative; /* AJOUT NÉCESSAIRE */
    }
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }

    .carousel-item {
        min-height: 50vh;
    }

    .newsletter-column::before {
        content: "";
        position: absolute;
        left: 0;
        top: 10px; /* "Padding" en haut */
        bottom: 0px; /* "Padding" en bas */
        width: 2px; /* Épaisseur de la bordure */
        background-color: var(--bleu); /* Couleur de la bordure */
    }
}

/* Règles pour les grands écrans */
@media (min-width: 1200px) {
    .padding-xl-10 {
        padding-right: 10% !important;
        padding-left: 10% !important;
    }

    .accordion-item {
        padding-right: 8rem;
        padding-left: 8rem;
    }
}

/* Padding de 20% à partir de xxl */
@media (min-width: 1400px) {
    .padding-xxl-15 {
        padding-right: 15% !important;
        padding-left: 15% !important;
    }


    .accordion-item {
        padding-right: 13.8rem;
        padding-left: 13.8rem;
    }
}
/* ========= Fin des Media query (min-width) ============== */



.img-shadow {
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
}

.pagination-front {
    justify-content: center;
}

.pagination-front .page-item .page-link {
    color: black !important;
    border-left: 1px solid #1e3d7e;
    border-right: 1px solid #1e3d7e;
    border-top: none;
    border-bottom: none;
}

.pagination-front .page-item .page-link:hover {
    color: white !important;
    background-color: #1e3d7e;
}

.pagination-front .page-item.active .page-link {
    color: white !important;
    background-color: #1e3d7e !important;
}

.pagination-front .page-item:first-child .page-link {
    color: white !important;
    background-color: #1e3d7e;
}

.pagination-front .page-item:last-child .page-link {
    color: white !important;
    background-color: #1e3d7e;
}

/* Responsivité pagination */
@media (max-width: 576px) {
    .pagination-front {
        font-size: 0.85rem;
    }

    .pagination-front .page-item .page-link {
        padding: 0.4rem 0.6rem;
    }

    /* Masque les numéros de page au-delà de 5 sur mobile */
    .pagination-front .page-item:nth-child(n+10):not(.active):not(:last-child):not(:nth-last-child(2)) {
        display: none;
    }
}

@media (min-width: 576px) and (max-width: 768px) {
    .pagination-front .page-item .page-link {
        padding: 0.45rem 0.7rem;
        font-size: 0.9rem;
    }

    /* Masque les numéros de page au-delà de 5 sur mobile */
    .pagination-front .page-item:nth-child(n+15):not(.active):not(:last-child):not(:nth-last-child(2)) {
        display: none;
    }
}

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

    /* Masque les numéros de page au-delà de 5 sur mobile */
    .pagination-front .page-item:nth-child(n+20):not(.active):not(:last-child):not(:nth-last-child(2)) {
        display: none;
    }
}

@media (min-width: 992px) and (max-width: 1200px) {

    /* Masque les numéros de page au-delà de 5 sur mobile */
    .pagination-front .page-item:nth-child(n+25):not(.active):not(:last-child):not(:nth-last-child(2)) {
        display: none;
    }
}

/* Styles spécifiques aux articles */
.title {
    font-size: 4rem;
    font-weight: bold;
    color: var(--bleu);
}

.intertitle {
    font-size: 2rem;
    font-weight: bold;
}

.exergue {
    border: none;
    height: 4px !important;
    width: 200px;
    background-color: var(--jaune);
    margin: 20px auto;
    /*margin: 20px 0;*/ /*à utiliser si on veut pas le centrage auto*/
}

.exergue-text {
    text-align: center;
}

.tag {
    background-color: transparent;
    border: 1px solid var(--bleu);
    border-radius: 8px;
    text-align: center;
    text-transform: uppercase;
}

.tag-selected {
    background-color: var(--gris-fonce);
    color: white;
    border: 1px solid var(--bleu);
    border-radius: 8px;
    text-align: center;
    text-transform: uppercase;
}

.tag:hover, .tag-selected:hover {
    cursor: pointer;
}

.framed {
    padding: 1rem 2rem;
    background-color: var(--gris-clair);
}

    .framed .title {
        font-size: 1.5rem;
        font-weight: bold;
        color: black;
    }

.framed-icon {
    background: var(--gris-clair);
    width: 80px;
    height: 80px;
    color: black; /* couleur de la lettre */
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 50px; /* taille de la lettre */
    font-family: Arial, sans-serif;
}

.menu-accordeon ul li {
    padding-left: 0px;
}

.menu-accordeon li a{
    color: var(--gris-fonce);
    text-align: right;
}

    .menu-accordeon li a.principale {
        border-top: 1px solid var(--bleu);
    }

    .menu-accordeon li:last-child a.principale.collapsed {
        border-bottom: 1px solid var(--bleu);
    }

    .menu-accordeon li:last-child div.collapse.show {
        border-bottom: 1px solid var(--bleu);
    }

    .menu-accordeon li a:not(.selected):hover {
        background-color: var(--gris-clair);
    }

    .menu-accordeon li a.selected {
        color: white;
        background-color: var(--bleu);
    }

.menu-accordeon li::before {
    content: unset !important;
}

/*Surcharge bleu de selection*/
.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option.select2-results__option--selected, .select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option[aria-selected=true]:not(.select2-results__option--highlighted) {
    color: #fff;
    background-color: var(--bleu) !important;
}

/*Surcharge bleu de selection*/
.select2-container--bootstrap-5 {
    border-top: 1px solid #ced4da !important;
    border-bottom: 1px solid #ced4da !important;
}
/*masque l'espace supplémentaire dans la liste choix multiple*/
.select2-selection--multiple .select2-search {
    width: 100%;
    height: 1.5rem;
    border: none !important; /* supprime les bordures pour les refaire avec la classe juste au-dessus (seulement top/bottom) */
}
.text-service {
    text-transform: uppercase;
    font-size: 15px;
}

.select2-selection {
    border: none !important; /* supprime les bordures pour les refaire avec la classe juste au-dessus (seulement top/bottom) */
}

.select2-selection__choice {
    border-color: var(--bleu) !important;
    border-radius: 0.5rem !important;
    padding: 0.1rem 0.4rem;
}

/* Force l'alignement vertical des éléments de la navbar */
.navbar .navbar-nav {
    align-items: center;
}

/* Centre verticalement le paragraphe "Bonjour" dans la navbar */
.navbar .navbar-text {
    display: inline-flex;
    align-items: center;
    margin: 0; /* supprime la marge par défaut du <p> */
    padding-left: 0.5rem; /* optionnel : petit espacement à gauche */
}

/* Espace horizontal entre éléments de la navbar (seule la marge entre éléments) */
.navbar-nav .nav-item + .nav-item {
    margin-left: 0.75rem; /* ajustez la valeur si besoin */
}

.gabarit-visu {
    max-height: 90vh;
    max-width: 50vh;
}

.champ-miel {
    display: none;
}

/* Gestion accordéons dans Nos services */
.accordion-button:not(.collapsed), .accordion-button:focus {
    background-color: white;
    color: var(--bleu);
    box-shadow: none;
    border-color: var(--jaune);
}

/* on écrase bootstrap pour l'état global */

.accordion-button::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%231E3D7F'%3E%3Cpath d='M12.14 8.753 5.482 12.796c-.646.39-1.482-.078-1.482-.796V3.999c0-.718.836-1.185 1.482-.796l6.658 4.043a.905.905 0 0 1 0 1.507z'/%3E%3C/svg%3E");
    transform: rotate(0deg);
    color: var(--bleu);
}

.accordion-button:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%231E3D7F'%3E%3Cpath d='M12.14 8.753 5.482 12.796c-.646.39-1.482-.078-1.482-.796V3.999c0-.718.836-1.185 1.482-.796l6.658 4.043a.905.905 0 0 1 0 1.507z'/%3E%3C/svg%3E");
    transform: rotate(90deg);
}


/* Gestion des champs obligatoires dans la création d'articles */
.required:after {
    content: " *";
}

#goToTop {
    position: fixed;
    right: 4vw;
    bottom: 4vh; /* marge par rapport au bas */

    background: var(--bleu);
    color: white;
    padding: 1rem;
    border-radius: 20%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* caché par défaut */
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

    #goToTop.visible {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }