/* CSS Document */

@font-face {
    font-family: 'denseregular';
    src: url('dense-regular-webfont.woff2') format('woff2'),
        url('dense-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'dense_boldbold';
    src: url('cdtype_-_dense_bold-webfont.woff2') format('woff2'),
        url('cdtype_-_dense_bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'orkneylight';
    src: url('orkney-light-webfont.woff2') format('woff2'),
        url('orkney-light-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'orkneymedium';
    src: url('orkney-medium-webfont.woff2') format('woff2'),
        url('orkney-medium-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'orkneyregular';
    src: url('orkney-regular-webfont.woff2') format('woff2'),
        url('orkney-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'orkneybold';
    src: url('orkney-bold-webfont.woff2') format('woff2'),
        url('orkney-bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

.img-responsive,
.thumbnail > img,
.thumbnail a > img,
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
    display: block;
    height: auto;
    max-width: 100%;
}

/* ==========================================================================
Author's custom styles
========================================================================== */

html {
    font-size: 100%;
    height: 100%;
}

body {
    margin-top: 10px;
    background-color: #f7f7f7;
    height: 100%;
    position: relative;
    overflow: inherit;
}

#wrap {
    min-height: 100%;
    position: relative;
}

#header {
    position: relative;
}

#contenu {
    position: relative;
    padding-bottom: 5%;
}


#gdtitre a {
    font-family: 'denseregular', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: clamp(1.7rem, 2.8vw + 1.4rem, 5rem);
    text-decoration: none;
    color: #464a55;
    text-align: center;
    line-height: 1em;
    margin-left: 15px;
    text-decoration: none; /* Assurez-vous que le lien n'a pas de soulignement par défaut */
}

#gdtitre a:hover {
    color: #fe3b37;
    text-decoration: none !important; /* Position correcte de !important */
}


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

    .separateur img{
        width:50%;
    }


}



/* home*/

#lacompagnie {
    background-color: rgba(255, 255, 255, 0.6);
    color: #464a55;
    padding: 20px;
    border-radius: 5px;
    text-align: justify;
}

#lacompagnie p{
    font-size: 14px;
    line-height: 18px;
    font-family: 'orkneyregular';
}

#lacompagnie .distrib{
    font-family: 'orkneyregular';
    font-size: 0.7rem;
    color: #464a55;
}

/* EDITO */
.edito {
    color: #464a55;
    padding: 20px;
    -moz-box-shadow: 0px 0px 30px -5px #656565;
    -webkit-box-shadow: 0px 0px 30px -5px #656565;
    -o-box-shadow: 0px 0px 30px -5px #656565;
    box-shadow: 0px 0px 30px -5px #656565;
    filter: progid:DXImageTransform.Microsoft.Shadow(color=#656565, Direction=NaN, Strength=30);
}

.edito p {
    font-size: 14px;
    line-height: 18px;
    font-family: 'orkneyregular';
    text-align: justify;
}



/* AGENDA */

/*#agenda {
background-color: rgb(255, 255, 255);
color: rgb(93, 93, 93);
padding: 20px;
text-align: left;
-moz-box-shadow: 0px 0px 30px -5px #656565;
-webkit-box-shadow: 0px 0px 30px -5px #656565;
-o-box-shadow: 0px 0px 30px -5px #656565;
box-shadow: 0px 0px 30px -5px #656565;
filter: progid:DXImageTransform.Microsoft.Shadow(color=#656565, Direction=NaN, Strength=30);
font-size: 12px;
line-height: 16px;
font-family: 'orkneyregular';
}*/

.titrepiece {
    color: #464a55;
    font-family: 'dense_boldbold';
    text-transform: uppercase;
    font-size: 24px;
    text-decoration: none;
    letter-spacing: 2px;
    margin-bottom: 10px;
    line-height: 20px;
}


.agenda p {
    font-family: 'orkneymedium';
    color: #464a55;
    font-size: 12px;
    text-transform: none;
    padding-top: 8px;
    border-top: thin solid lightgrey; 
    text-align: left;
}

.agenda .date {
    color: #fe3b37;
}

.agenda .date::before {
    content: '\f017'; /* Code Unicode de l'icône (exemple : Font Awesome étoile pleine) */
    font-family: 'Font Awesome 5 Free'; /* Nom de la famille de polices */
    font-weight: 900; /* Certaines icônes nécessitent un poids de police */
    margin-right: 8px; /* Espace entre l'icône et le titre */
    color: #fe3b37; /* Couleur de l'icône */
    font-size: 12px; /* Taille de l'icône */
}

.agenda .lieu::before {
    content: '\f041'; /* Code Unicode de l'icône (exemple : Font Awesome étoile pleine) */
    font-family: 'Font Awesome 5 Free'; /* Nom de la famille de polices */
    font-weight: 900; /* Certaines icônes nécessitent un poids de police */
    margin-right: 8px; /* Espace entre l'icône et le titre */
    color: #464a55; /* Couleur de l'icône */
    font-size: 12px; /* Taille de l'icône */
}

.agenda .sstitre {
    color: #464a55;
    font-family: 'dense_boldbold';
    font-size: 20px;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.agenda .sstitre2 {
    background-color: darkgrey;
    font-family: 'orkneymedium';
    color: white;
    padding: 1px 2px 0 2px;
    text-transform: uppercase;
    display: inline;
    font-size: 12px;
}

.agenda .type {
    font-family: 'orkneymedium';
    color: darkgrey;
    font-style: italic;  
}

#agenda_old {
    border-top: thin solid #fe3b37;
}

.agenda .titrepiece2{
    color: #464a55;
    font-family: 'orkneymedium';
    font-size: 20px;
    text-decoration: none;
    text-transform: uppercase;
}


#agenda2 .titrepiece2 {
    color: #fff;
    font-family: 'dense_boldbold';
    font-size: 20px;
    text-decoration: none;
    letter-spacing: 2px;
    line-height: 22px;
}



.agenda2 {
    /*background-color:#fe3b37; */
    font-family: 'orkneyregular';
    color: #fff;
    padding: 20px 20px 0px 20px;
    text-align: left;
    font-size: 12px;
}





/* Effect 1: Brackets */

#agenda a {
    color: #464a55;
}

#agenda a:hover {
    color: #fe3b37;
}

#agenda a::before,
#agenda a::after {
    display: inline-block;
    opacity: 0;
    -webkit-transition: -webkit-transform 0.3s, opacity 0.2s;
    -moz-transition: -moz-transform 0.3s, opacity 0.2s;
    transition: transform 0.3s, opacity 0.2s;
}

#agenda a::after {
    margin-left: 10px;
    content: '+';
    -webkit-transform: translateX(-20px);
    -moz-transform: translateX(-20px);
    transform: translateX(-20px);
}

#agenda a:hover::before,
#agenda a:hover::after,
#agenda a:focus::before,
#agenda a:focus::after {
    opacity: 1;
    -webkit-transform: translateX(0px);
    -moz-transform: translateX(0px);
    transform: translateX(0px);
}

#lignes {
    width: 100%;
    height: 20px;
    background-image: url('../img/pattern.png');
    background-repeat: repeat;
    margin-bottom: 10px;
}

#lignes2 {
    width: 100%;
    height: 20px;
    background-image: url('../img/pattern_blanc.png');
    background-repeat: repeat;
}

#lignes3 {
    position: relative;
    min-height: 100%;
    width: 10px;
    background-image: url(pattern.png);
    background-repeat: repeat;
    float: left;
    margin: 0 20px 0 0;
}


.titre {
    font-family: 'denseregular', sans-serif;
    text-transform: uppercase;
    font-size: 46px;
    letter-spacing: 3px;
    line-height: 40px;
    text-align: left;
    color: #464a55;
    padding: 0 0 20px 0;
}

.titreblanc {
    font-family: 'denseregular', sans-serif;
    text-transform: uppercase;
    font-size: 46px;
    letter-spacing: 3px;
    line-height: 40px;
    text-align: left;
    color: white;
    padding: 0 0 20px 0;
    text-shadow: 1px 1px 10px black;
}

.titreblanc a{
    color: white;
    opacity: 1;
}

.titreblanc a:hover{
    opacity: 0.6;
    transition: opacity 0.5s;
}

.titreequipe {
    font-family: 'dense_boldbold', sans-serif;
    text-transform: uppercase;
    font-size: 20px;
    letter-spacing: 3px;
    text-align: center;
    color: #464a55;
}

.titreequipe span {
    font-family: 'dense_boldbold', sans-serif;
    text-transform: uppercase;
    font-size: 20px;
    letter-spacing: 3px;
    text-align: center;
    color: #fe3b37;
}

.titrerouge {
    font-family: 'denseregular', sans-serif;
    text-transform: uppercase;
    color: #fe3b37;
}

.sstitre1 {
    font-family: 'orkneyregular';
    font-size: 1.2rem;
    text-align: center;
    color: white;
    text-shadow: 1px 1px 10px black;
    font-style: italic;
}

#sstitre2 {
    font-family: 'orkneymedium';
    font-size: 12px;
    margin: 2px 0 10px 0;
    text-transform: uppercase;
}

#sstitre2 span {
    padding: 1px 5px 0 5px;
    background-color: #464a55;
}



#texte {
    font-family: 'orkneylight';
    text-align: justify;
    font-size: 14px;
    padding: 0 40px 0 40px;
    background-color: #f7f7f7;
}

#texte h1 {
    font-family: 'orkneymedium';
    font-size: 18px;
    margin: 0;
    color: #fe3b37;
}

#texte h3 {
    font-family: 'orkneymedium';
    font-size: 14px;
    margin: 0;
    color: #464a55;
}


#texte-equipe {
    font-family: 'orkneyregular';
    text-align: justify;
    font-size: 14px;
    color: #464a55;
}

#texte-equipe h1 {
    font-family: 'denseregular', sans-serif;
    text-align: left;
    text-transform: uppercase;
    font-size: 40px;
    margin: 0;
    letter-spacing: 1px;
    color: #fe3b37;
    line-height: 100%;
}

#texte-equipe h2 {
    font-family: 'denseregular', sans-serif;
    text-align: left;
    text-transform: uppercase;
    font-size: 30px;
    margin: 0;
    letter-spacing: 1px;
    margin-bottom: 10px;
}

#photo-equipe {
padding-bottom: 20px;;
}

/*compagnie lien pop up*/

.carrerouge {
    /*background-color:#fe3b37; */
    font-family: 'orkneyregular';
    background-color: #fe3b37;
    font-size: 11px;
    color: #fff;
    padding: 18px;
    text-align: left;
    height: 100%;

}

.carrerouge a{
    font-family: 'orkneybold';
    font-size: 13px;
    line-height: 10px;
    color: white;
    text-decoration: none;
}

.carrerouge a span{
    color : #464a55;
}

.carrerouge li{
    padding-bottom: 13px;
}

.carrerouge a:hover {
    margin: 0;
    color : #464a55;
    text-decoration: none;
}

/* sharebutton */

.share-btn-wrp {
    list-style: none;
    display: block;
    margin-right: 5px;
    padding: 0px;
    width: 36px;
    right: 5px;
    position: fixed;
    z-index: 1000;

}

.button-wrap {
    margin: 2px;

}



@media all and (max-width: 768px) {
    /*699*/
    .share-btn-wrp {

        width: 100%;
        text-align: center;
        position: fixed;
        bottom: 0px;
        left: 0px;
        margin-right: none;
        background-color: #464a55;



    }
    .share-btn-wrp .button-wrap {
        display: inline-block;
        padding: 5px 0 5px 0;
    }

    /*marge bottom*/
    .push {
        height: 200px;
    }

    ul,
    ol {
        margin-bottom: 0px;
    }
}

#footer,
.push2 {
    height: 60px;
}








.icones {
    margin: 0 0 10px 0;
    text-align: left;
}


.icones img {
    margin: 0 4px 0 0;
}


#agenda_old {
    padding-top: 10px;
}

/*menu*/

.navbar {
    border: none;
}

.navbar-default {
    background-color: none;
    border-radius: 0;

}

.sidebar-nav .navbar {
    position: relative;
    min-height: 50px;
    margin-bottom: 20px;
    border: none;
}


/* footer */

/* Styles généraux pour le footer */
.footer {
    display: grid;
    /*grid-template-columns: repeat(7, 1fr);  4 colonnes + 3 espaces pour les images */
    grid-template-columns: 2fr 1fr 2fr 1fr 1fr 1fr 3fr;
    gap: 20px; /* Espacement entre les éléments */
    align-items: center;   
    justify-items: center; /* Centre les éléments horizontalement */
    text-align: center;
    padding: 20px;
    background-color: rgb(247, 247, 247);
    color: #464a55;
    padding: 20px;
    font-family: 'orkneyregular';
    font-size: 14px;
    list-style-type:none;
    box-shadow: 0 -5px 20px rgba(0,0,0,0.3);
}

/* Colonnes du footer */
.footer-column {
    display: flex;
    flex-direction: column; /* Disposition en colonne */
    align-items: center; /* Centrer horizontalement */
}

.footer h3 {
    font-size: 18px;
    margin-bottom: 10px;
}

.footer p,
.footer ul {
    font-size: 14px;
    line-height: 1.6;
}

.footer ul {
    list-style: none;
    padding: 0;
}

.footer li {
}

.footer i {
    margin-right: 8px;
}

.footer a {
    font-family: 'orkneyregular';
    color: #464a55;
    font-size: 14px;
}

.footer a:hover {
    color: #fe3b37
}

/* Section des logos dans la 4ème colonne */
.footer-column-logos {
    display: flex;
    flex-direction: column; /* Disposition en colonne */
    align-items: center;
}

.footer-column-logos img {
    margin: 10px; /* Espacement entre les logos */
}

/* Ajout d'une deuxième ligne de logos avec flex-wrap */
.footer-column-logos .logos-row {
    display: flex;
    flex-wrap: wrap; /* Permet de répartir les logos sur plusieurs lignes */
    justify-content: center; /* Centrer les logos */
}

.footer-column-logos .logos-row img {
    height: 20px;
    margin: 10px; /* Espacement entre les logos */
}

/* Responsive */
@media (max-width: 768px) {
    /* Changer la grille pour 1 seule colonne sur les petits écrans */
    .footer {
        grid-template-columns: 1fr; /* 1 colonne */
    }

    /* Les logos occupent toute la largeur sur les petits écrans */
    .footer-logos {
        grid-column: span 1; /* Sur un seul élément */
    }

    /* Réduire l'espacement entre les colonnes sur petits écrans */
    .footer-column {
        margin-bottom: -10px;
    }
}

.footer-divider img {
    max-width: 100%; /* S'assure que les images ne débordent pas */
    height: auto; /* Maintient le ratio */
    align-self: center; /* Centre les images verticalement */
    justify-self: center; /* Centre les images horizontalement */
}



/*
#footer {
font-family: 'orkneyregular', sans-serif;
font-size: 14px;
line-height: 20px;
color: #464a55;
height: 100px;
width: 100%;
position: absolute;
bottom: 0;
margin: 20px 0 20px 0;
}

#footer a {
color: #fe3b37;
font-family: 'orkneyregular', sans-serif;
font-size: 14px;
line-height: 20px;
letter-spacing: 1px;
}

#footer a:hover {
color: #fe3b37;
text-decoration: none;
}

#footer,
.push2 {
height: 60px;
}

.footer2 {
color: #fe3b37;
font-family: 'orkneyregular', sans-serif;
font-size: 14px;
letter-spacing: 1px;
}

.footer2 a:hover {
color: #fe3b37;
text-decoration: none;
}
*/





/* newsletter*/

.newsletter {
    font-family: 'Montserrat', sans-serif;
    color: #002052;
    font-size: 10pt;
}



/* video responsive */

.videodiv {
    position: relative;
    padding-bottom: 56.25%;
    /* 16:9 */
    padding-top: 25px;
    height: 0;
}

/* L'enfant */

.videodiv iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}


#formulaire {
    height: auto;
    text-align: center;
}

#formulaire p {
    font-family: 'orkneyregular', sans-serif;
    font-size: 14px;
    line-height: 20px;
    color: #464a55;
    height: auto;
    text-align: center;
}


/*accordeon*/

.nav > li > a:hover,
.nav > li > a:focus {
    text-decoration: none;
    background: none;
    border: none;
}


ul,
ol {
    list-style: none;
    padding-left: 0px;
}

#accordion1 li.panel {
    margin-bottom: 0px;
    background: none;
    padding: 5px 0 7px 0;
}

#accordion1 .panel {
    margin-bottom: 20px;
    background-color: #fff;
    border-radius: 0px;
    -webkit-box-shadow: none;
    box-shadow: none;
    font-family: 'orkneyregular', sans-serif;
    font-size: 12px;
    color: white;
    line-height: 120%;
}

#accordion1 .panel a {
    font-family: 'orkneymedium', sans-serif;
    font-style: italic;
    font-weight: 400;
    font-size: 12px;
    color: #464a55;
    border: none;
    padding: 0;
}

#accordion1 .panel a:after {
    font-family: 'FontAwesome';
    font-size: 15px;
    /*  content:   "\f078";*/
    content: "\f107";
    display: inline-block;
    padding-left: 5px;
    vertical-align: middle;
}


#accordion1 .panel a:hover {
    color: grey;
}

/****/

#accordion1 .panel2 {
    margin-bottom: 20px;
    background-color: none;
    border-radius: 0px;
    -webkit-box-shadow: none;
    box-shadow: none;
    font-family: 'orkneyregular';
    color: white;
}

#accordion1 .panel2 a {
    font-family: 'orkneymedium', sans-serif;
    font-weight: 400;
    font-size: 14px;
    text-transform: uppercase;
    color: white;
    border: none;
    padding: 0;
}


#accordion1 .panel2 a:after {
    font-family: 'FontAwesome';
    font-size: 15px;
    /*  content:   "\f078";*/
    content: "\f107";
    display: inline-block;
    padding-left: 5px;
    vertical-align: middle;
}


.rslides img {
    margin-bottom: 20px;
}


.creaama{
    text-transform: lowercase;
}

/*formulaire mailchimp*/

/*#mc_embed_signup {
font-family: 'orkneyregular', sans-serif;
font-weight: normal;
letter-spacing: 1px;
font-size: 14px;
display: block;
}



.email {
background-color: #fe3b37;
font-family: 'orkneyregular', sans-serif;
border: none;
color: white;
margin-left: 2px;
}

.lname {
background-color: #fe3b37;
font-family: 'orkneyregular', sans-serif;
border: none;
color: white;
margin-left: 2px;

}

.fname {
background-color: #fe3b37;
font-family: 'orkneyregular', sans-serif;
border: none;
color: white;
margin-left: 2px;
}

.button {
background-color: #464a55;
font-family: 'denseregular';
font-variant: small-caps;
letter-spacing: 1px;
font-size: 20px;
color: white;
border: none;
}

.button:hover {
background-color: #fe3b37;
}*/






/*MENU*/
/* Style général pour l'en-tête */

.header-container {
    text-align: center;
    padding: 20px 0 20px 0;
}

.navbar {
    min-height: 0px;
}

.navbar-inverse {
    border: none;
}

.navbar-toggle {
    display: none; /* Masqué par défaut */
    background: none;
    border: none;
    font-size: 24px;
    margin: none;
}

.icon-bar {
    display: block;
    width: 22px;
    height: 2px;
    border-radius: 1px;
    background-color: #fe3b37;
}

/* Styles pour petits écrans */
@media (max-width: 768px) {

    .gdtitre a {
        color: #464a55;
    }

    a:hover {
        color: #fe3b37;
        /*background-color: #f7f7f7;*/
        text-decoration: none; !important
    }

    .header-container {
        display: flex;
        align-items: center;
        justify-content: space-between; /* Espace entre le titre et le bouton */
        padding: 15px;
    }

    .navbar-toggle {
        display: block; /* Affiche le bouton toggle */
    }

    /* Ajuster le titre pour qu’il soit à côté du toggle */
    .header-container {
        flex-direction: row;
    }

    /* Masquer le menu de navigation sur petits écrans */
    .navbar-collapse {
        display: none;
    }

    /* Afficher le menu lorsqu'il est activé */
    .navbar-collapse.collapse.in {
        display: block;

    }

}


/*fleche retour vers le haut*/

#backToTopBtn {
    display: none; /* Masqué par défaut */
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 100;
    width: 50px;
    height: 50px;
    background-color: #fe3b37;
    color: white;
    border: none;
    border-radius: 50%; /* Forme circulaire */
    cursor: pointer;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
    font-size: 20px;
    align-items: center;
    justify-content: center;
    transition: opacity 0.3s, transform 0.3s;
    opacity: 0.8; /* Légèrement transparent */
}

#backToTopBtn i {
    display: inline-block;
}

#backToTopBtn:hover {
    background-color: #464a55;
    transform: scale(1.1); /* Légère augmentation de taille au survol */
    opacity: 1; /* Rendre complètement opaque */
}

/* Apparition en fondu */
#backToTopBtn.show {
    display: flex;
    opacity: 1;
}


a:hover, a:focus {
    text-decoration: none;
}


/* modal */
/* Style de la boîte modale */
.custom-modal {
    display: none; /* Cachée par défaut */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #f7f7f7;
    justify-content: center;
    align-items: center;
    z-index: 1050;
}

/* Contenu de la boîte modale */
.custom-modal .modal-content {
    width: 100%;
    max-width: 100%;
    height: 100%;
    background-color: transparent;
    overflow-y: auto;
    position: relative;
}

/* Bouton de fermeture */
.custom-modal .close-btn {
    position: absolute;
    top: 10px;
    right: 20px;
    background: none;
    border: none;
    font-size: 3rem;
    color: #fe3b37;
    cursor: pointer;
    z-index: 1100;
}

/* Masquer le scroll de la page principale quand la modale est ouverte */
body.modal-open {
    overflow: hidden;
}


.modal-body {
    padding: 0; !important
}

.open-modal{
    cursor: pointer;
    width: 100%;
}

.parent {
    display: flex; /* Active Flexbox */
    justify-content: center; /* Centre horizontalement */
    align-items: center; /* Centre verticalement */
    height: 100vh; /* Donne une hauteur au parent, par exemple toute la hauteur de la fenêtre */
}

@media (max-width: 768px) {
    .parent {
        display: flex; /* Active Flexbox */
        justify-content: center; /* Centre horizontalement */
        align-items: center; /* Centre verticalement */
        height: auto; /* Donne une hauteur au parent, par exemple toute la hauteur de la fenêtre */
    }

    .child {
        text-align: justify; 
        padding: 20% 10% 10% 10%; /* Ajoute un espace intérieur pour l'enfant */
    }
}

@media (min-width: 768px) {
    .child {
        text-align: justify; 
        padding: 0 30% 0 30%; /* Ajoute un espace intérieur pour l'enfant */
    }
}



.child2 {
        text-align: justify; 
        padding: 20px 10px 0 10px;; /* Ajoute un espace intérieur pour l'enfant */
    }
    
    
    @media (min-width: 768px) {
    .child2 {
        text-align: justify; 
        padding: 0 10% 0 10%; /* Ajoute un espace intérieur pour l'enfant */
    }
}


/*test image grid*/

/* Container de la grille */
.image-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    padding: 16px;
}

/* Chaque image et sa légende */
.image-item {
    position: relative; /* Nécessaire pour la superposition de la légende */
    overflow: hidden;
    border-radius: 8px; /* Coins arrondis */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

/* Images */
.image-item img {
    width: 100%;
    height: auto;
    display: block;
}

/* Caption */
.caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.6); /* Fond semi-transparent */
    color: #fff; /* Couleur du texte */
    text-align: center;
    padding: 8px 0;
    font-size: 16px;
    opacity: 0; /* Caché par défaut */
    transition: opacity 0.3s ease;
}

/* Effet au survol */
.image-item:hover .caption {
    opacity: 1; /* Affiche la légende */
}

.image-item:hover {
    transform: scale(1.05); /* Agrandit légèrement l'élément */
}




/* header pour fond foncé*/

.menu_blanc #gdtitre a {
    font-family: 'denseregular', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: clamp(1.7rem, 2.8vw + 1.4rem, 5rem);
    text-decoration: none;
    color: white;
    text-align: center;
    background-color: none;
    line-height: 1em;
    margin-left: 15px;
    text-shadow: 1px 1px 10px black;

}

.menu_blanc #gdtitre a:hover {
    color: #fe3b37;
    text-decoration: none !important; /* Position correcte de !important */
}

.menu_blanc .navbar-inverse .navbar-nav>li>a {
    color: white !important; /* Changer la couleur des liens en blanc */
    text-shadow: 1px 1px 10px black;
}

/* INDEX contenu */

/* Conteneur global */
.wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* Prend toute la hauteur de la fenêtre */
    padding: 0 10% 0 10%;
}

/* Conteneur colonnes */
.containerindex {
    flex: 1; /* Occupe tout l'espace disponible */
    display: flex; /* Disposition en colonnes */
    gap: 20px; /* Espacement entre les colonnes */
    align-items: stretch; /* Étire les colonnes pour une hauteur égale */
    padding: 20px;
    box-sizing: border-box; /* Inclut le padding dans les dimensions */
}

/* Colonne de gauche */
.right-column {
    flex: 1; /* Colonne flexible qui s'ajuste */
    padding: 20px;
    display: flex;
    flex-direction: column;
    /*justify-content: space-between;*/
    background-color: rgb(255, 255, 255);
    color: rgb(93, 93, 93);
    -moz-box-shadow: 0px 0px 30px -5px #656565;
    -webkit-box-shadow: 0px 0px 30px -5px #656565;
    -o-box-shadow: 0px 0px 30px -5px #656565;
    box-shadow: 0px 0px 30px -5px #656565;
    filter: progid:DXImageTransform.Microsoft.Shadow(color=#656565, Direction=NaN, Strength=30);
}

/* Colonne de droite avec scrollbar */
.left-column {
    flex: 1; /* Colonne flexible qui s'ajuste */
    padding: 20px;
    overflow-y: auto; /* Barre de défilement verticale si nécessaire */
    max-height: calc(100vh); /* Ajuste la hauteur pour tenir compte du padding et du footer */
    box-sizing: border-box;
    background-color: rgb(255, 255, 255);
    color: rgb(93, 93, 93);
    -moz-box-shadow: 0px 0px 30px -5px #656565;
    -webkit-box-shadow: 0px 0px 30px -5px #656565;
    -o-box-shadow: 0px 0px 30px -5px #656565;
    box-shadow: 0px 0px 30px -5px #656565;
    filter: progid:DXImageTransform.Microsoft.Shadow(color=#656565, Direction=NaN, Strength=30);
    scrollbar-width: thin;
    scrollbar-color: #fe3b37 #e0e0e0;
}

/* Responsive - Écrans de moins de 768px */
@media (max-width: 768px) {
    .wrapper {
        display: flex;
        flex-direction: column;
        min-height: 100vh; /* Prend toute la hauteur de la fenêtre */
        padding: 0;
    }

    .containerindex {
        flex-direction: column; /* Colonnes empilées */
    }

    .right-column {
        max-height: none; /* Désactive la limite de hauteur */
        overflow-y: visible; /* Pas de scrollbar */
    }
}