@font-face {
    font-family: 'NotoSansJP-Black'; /* Nom de la police */
    src: url(fonts/NotoSansJP-Black.otf) format('opentype'); /* Chemin vers votre fichier OTF */
    /* Autres propriétés de la police (optionnelles) */
}
@font-face {
    font-family: 'NotoSansJP-Bold'; /* Nom de la police */
    src: url(fonts/NotoSansJP-Bold.otf) format('opentype'); /* Chemin vers votre fichier OTF */
    /* Autres propriétés de la police (optionnelles) */
}
@font-face {
    font-family: 'NotoSansJP-Light'; /* Nom de la police */
    src: url(fonts/NotoSansJP-Light.otf) format('opentype'); /* Chemin vers votre fichier OTF */
    /* Autres propriétés de la police (optionnelles) */
}
@font-face {
    font-family: 'NotoSansJP-Medium'; /* Nom de la police */
    src: url(fonts/NotoSansJP-Medium.otf) format('opentype'); /* Chemin vers votre fichier OTF */
    /* Autres propriétés de la police (optionnelles) */
}
@font-face {
    font-family: 'NotoSansJP-Regular'; /* Nom de la police */
    src: url(fonts/NotoSansJP-Regular.otf) format('opentype'); /* Chemin vers votre fichier OTF */
    /* Autres propriétés de la police (optionnelles) */
}
@font-face {
    font-family: 'NotoSansJP-Thin'; /* Nom de la police */
    src: url(fonts/NotoSansJP-Thin.otf) format('opentype'); /* Chemin vers votre fichier OTF */
    /* Autres propriétés de la police (optionnelles) */
}
@font-face {
    font-family: 'charlotte'; /* Nom de la police */
    src: url(fonts/charlotte.otf) format('opentype'); /* Chemin vers votre fichier OTF */
    /* Autres propriétés de la police (optionnelles) */
}

.body {
    background-color: #f4eaf0;
}

.h3, h3 {
    font-size: 1.30rem !important;
}


/* Style pour la div du pied de page avec image de fond */
.footer {
    /*background-image: url('votre-image.jpg'); /* Chemin vers votre image */
    background-size: cover; /* Ajustement de la taille de l'image */
    float: left;
    color: white; /* Couleur du texte */
    /*padding: 50px 0; /* Espacement intérieur */
    /*text-align: center; /* Alignement du texte au centre */
    height: 100%; /* Alignement du texte au centre */
}
/* Style pour la div de l'en-tête avec image de fond */
.header {
    background-size: cover; /* Ajustement de la taille de l'image */
    float: left;
    color: white; /* Couleur du texte */
    /*padding: 50px 0; /* Espacement intérieur */
    /* text-align: center; /* Alignement du texte au centre */
    height: 100%; /* Alignement du texte au centre */
    /*height: 100vh; /* Hauteur égale à 100% de la hauteur de la fenêtre */
    /*      height: 50vh; /* Hauteur égale à 100% de la hauteur de la fenêtre */
    /*      display: flex; /* Utilisation de flexbox pour centrer le contenu verticalement */
    /*      align-items: center; /* Centrage vertical du contenu */
    /*    justify-content: center; /* Centrage horizontal du contenu */
}

.divgauche {
    background-color: #9B0058;
}

.prix-input {
    margin-left: auto !important; /* pousse le reste à droite */
}



.loader-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.5); /* Fond semi-transparent */
    z-index: 9999;
    display: none; /* Caché par défaut */
}

.loader-container2 {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.5); /* Fond semi-transparent */
    z-index: 9999;
    display: none; /* Caché par défaut */
}

.loader {
    border: 16px solid #f3f3f3; /* Gris clair */
    border-top: 16px solid #9B0058; /* Bleu */
    border-radius: 50%;
    width: 80px;
    height: 80px;
    animation: spin 2s linear infinite;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -40px; /* Moitié de la hauteur */
    margin-left: -40px; /* Moitié de la largeur */
}

.btn-grey {
    background-color: grey !important; /* Changer la couleur de fond du bouton en rouge */
    border-color: grey !important; /* Changer la couleur de la bordure du bouton en rouge */
    /* Ajoutez d'autres styles si nécessaire */
}

.column-layout {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#testresolution {
    background-color: darkmagenta;
}

#imageContainer {
    height: auto; /* Ajuste la hauteur selon l'image */
    display: flex; /* Centre l'image */
    justify-content: center; /* Centre horizontalement */
    align-items: center; /* Centre verticalement */
    overflow: hidden; /* Empêche le débordement */
}

#selectedImage {
    max-width: 100%; /* Ajuste la taille de l'image à la div */
    max-height: 100%; /* Empêche le dépassement */
    display: block; /* Pour éviter les marges blanches */
}

#imageContainerv2 {
    width: 100%; /* Assure que la div parent prend toute la largeur disponible */
    display: flex;
    justify-content: center; /* Centre l'image horizontalement */
    align-items: center; /* Centre l'image verticalement si nécessaire */
    overflow: hidden; /* Empêche l'image de dépasser */
}

#selectedImagev2 {
    max-width: 100%; /* Empêche l'image de dépasser la largeur de la div */
    height: auto; /* Garde le ratio d'aspect */
    display: block; /* Supprime les marges blanches */
    overflow: hidden;
}
.texth3casse {
    color: #FCE5EE;
    text-decoration: none; /* Supprime le soulignement */
}

.texth3casse:hover, .texth3casse:focus, .texth3casse:active, .texth3casse:visited {
    color: inherit; /* Empêche la couleur bleue sur tous les états */
    text-decoration: none; /* Empêche le soulignement */
}

.troisieme-recto-header-v1{
    text-align: center;
    color: #9B0058;
    font-weight: bold; /* Rend le texte gras */
    font-size: 2em; /* Augmente la taille du texte */
}
.troisieme-recto-footer-v1{
    text-align: center;
    color: #9B0058;
    font-weight: bold; /* Rend le texte gras */
    font-size: 2em; /* Augmente la taille du texte */
}

.troisieme-recto-header-v2{
    text-align: center;
    color: #9B0058;
    font-weight: bold; /* Rend le texte gras */
    font-size: 2em; /* Augmente la taille du texte */
}
.troisieme-recto-footer-v2{
    text-align: center;
    color: #9B0058;
    font-weight: bold; /* Rend le texte gras */
    font-size: 2em; /* Augmente la taille du texte */
}








/* Conteneur des formulaires */
.formulaire {
    margin-bottom: 20px;
    border: 1px solid #ddd;
    padding: 10px;
    border-radius: 5px;
    background-color: #f9f9f9;
}

/* En-tête du formulaire */
.form-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    background-color: #f8f8f8;
    cursor: pointer;
    font-weight: bold;
    border-bottom: 1px solid #ccc;
}

/* Flèche animée
.arrow-container {
    width: 30px;
    height: 30px;
    background-color: #9B0058;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
}*/

.arrow {
    font-size: 16px;
    color: white;
    transition: transform 0.3s ease;
}

/* Contenu caché par défaut */
.form-container {
    display: none;
    padding: 10px;
    background-color: #fff;
}

/* Alignement des cases et labels */
.form-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px;
    border-bottom: 1px solid #eee;
}

.checkbox-label {
    display: flex;
    align-items: center;
}

.checkbox-label input[type="checkbox"] {
    margin-right: 5px;
}

/* Champ de prix */
.form-item input[type="number"] {
    width: 80px;
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 4px;
    text-align: right;
}








#troisieme-recto {
    padding: 40px; /* Ajoute un espace autour du contenu */
    margin-top: 20px;
    background-color: #fff;
    border-radius: 5px;
    outline: 2px solid #9B0058; /* Épaisseur, style et couleur */
}

/* Conteneur général */
#troisieme-verso {
    padding: 40px; /* Ajoute un espace autour du contenu */
    position: relative; /* Permet de positionner les images en absolu */
    margin-top: 20px;
    background-color: #fff;
    border-radius: 5px;
    outline: 2px solid #9B0058; /* Épaisseur, style et couleur */
}
#troisieme-recto-v2 {
    padding: 40px; /* Ajoute un espace autour du contenu */
    position: relative; /* Permet de positionner les images en absolu */
    margin-top: 20px;
    background-color: #fff;
    border-radius: 5px;
    outline: 2px solid #9B0058; /* Épaisseur, style et couleur */
}

/* Conteneur général */
#troisieme-verso-v2 {
    padding: 40px; /* Ajoute un espace autour du contenu */
    position: relative; /* Permet de positionner les images en absolu */
    margin-top: 20px;
    background-color: #fff;
    border-radius: 5px;
    outline: 2px solid #9B0058; /* Épaisseur, style et couleur */
}

/* Sections COUPES et CRÊPES */
.section-selections {
    position: relative; /* Permet de positionner l'image dans la section */
    margin-bottom: 20px;
    padding-top: 30px; /* Ajoute un espace pour éviter le chevauchement du titre */
    display: none;
}

/* Sections Tarif */
.section-selections-boules {
    position: relative; /* Permet de positionner l'image dans la section */
    margin-bottom: 20px;
    padding-top: 60px; /* Ajoute un espace pour éviter le chevauchement du titre */
    display: none;
}

/* Titres des sections */
.titre-section {
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 10px;
    color: #9B0058;
    text-transform: uppercase;
}

/* Affichage des sélections */
.affichageSelections {
    padding: 10px;
 /*   background: #f8f8f8;
    border: 1px solid #ddd;*/
    border-radius: 5px;
}

/* Élément sélectionné */
.selection-item {
    padding: 5px;
    /*border-bottom: 1px solid #ddd;*/
    font-size: 18px;
    font-weight: bold;
    color: #9B0058;
}
.item-price {
    white-space: nowrap;
    vertical-align: top;
}

/* Ligne contenant le nom et le prix */
.selection-line {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
    font-weight: bold;
}

/* Points dynamiques qui s'ajustent automatiquement */
.dots {
    flex-grow: 1;
    white-space: nowrap;
    overflow: hidden;
    color: #FCE5EE;
    text-align: center;
}

/* Description sous chaque coupe */
.selection-description {
    font-size: 14px;
    color: #9B0058;
    margin-top: 3px;
    font-style: italic;
}



#selectedImage {
    display: none;
    max-width: 200px;
}


.selection-description {
    font-size: 14px;
    color: #9B0058;
    margin-top: 3px;
    font-style: italic;
}

.selection-saveurs {
    font-size: 14px; /* Taille de texte légèrement plus petite */
    font-style: italic; /* Style en italique pour différencier */
    color: #666; /* Couleur grise pour ne pas surcharger visuellement */
    margin-top: 5px; /* Espacement entre le prix et les saveurs */
    padding-left: 10px; /* Décalage léger pour l'alignement */
    border-left: 3px solid #FCE5EE; /* Petite barre colorée à gauche pour démarquer */
    padding: 3px 10px; /* Ajoute de l'espace intérieur */
}

/* Gestion des flèches */
.arrow-container {
    width: 30px;
    height: 30px;
    background-color: #9B0058;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
}

.arrow {
    font-size: 16px;
    color: white;
    transition: transform 0.3s ease;
}

/* Contenu caché par défaut */
.form-container {
    display: none;
    padding: 10px;
    background-color: #fff;
}



/* BOULES */
.boules-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 colonnes */
    gap: 10px;
    width: 100%;
}

.boule-item {
/*    background: #f8f8f8;*/
    color: #9B0058;
    padding: 10px;
    border-radius: 5px;
    text-align: left;
    font-size: 16px;
    font-weight: bold;
    display: flex;
    justify-content: space-between; /* Nom et prix sur la même ligne */
    align-items: center;
}


/* IMAGE COTE */
/* Style des images de fond */
.background-image {
    position: absolute;
    width: 80px;
    height: auto;
 /*   opacity: 0.6;*/
    transition: all 0.5s ease-in-out;
    top: -20px; /* Place l’image en haut de la section */
    z-index: 1; /* Met l’image au-dessus du contenu */
}

/* Gestion de l'alternance gauche/droite */
.background-left {
    left: 5px; /* Légèrement en dehors de la section */
}

.background-right {
    right: 5px; /* Légèrement en dehors de la section */
}

/* ALCOLISEE */
/* Style des images de fond */
.separator-alcoolisee {
    font-size: 16px;
    font-weight: bold;
    color: #9B0058;
    text-align: center;
    margin-top: 10px;
    margin-bottom: 5px;
    padding: 5px;
    background-color: #F8E8E8;
    border-radius: 5px;
}

.separator-space {
    margin-top: 20px;
    margin-bottom: 10px;
}

.min-img-carte {
    max-height: 100px;
}


#affichageGlacesv2, #affichageSorbetsv2 {
    font-size: 15px;
    font-weight: bold;
    color: #9B0058;
}
/* Conteneur principal
.coupes-wrapper {
    border: 1px solid #FCE5EE;
    border-radius: 5px;
    overflow: hidden;
    font-family: Arial, sans-serif;
    padding: 10px;
}

/* En-tête avec la flèche
.coupes-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    background-color: #FCE5EE;
    cursor: pointer;
    font-weight: bold;
    border-bottom: 1px solid #FCE5EE;
}

/* Conteneur de la flèche
.arrow-container {
    width: 30px;
    height: 30px;
    background-color: #FCE5EE; /* Couleur de fond bleue
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px; /* Coins arrondis
}

/* Flèche avec effet
.arrow {
    font-size: 16px;
    color: #9B0058; /* Couleur de la flèche
    transition: transform 0.3s ease, color 0.3s ease;
}

/* Contenu caché par défaut
.coupes-container {
    display: none;
    padding: 10px;
    background-color: #FCE5EE;
}

/* Amélioration du style des éléments de la liste
.coupe-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px;
    border-bottom: 1px solid #eee;
}

/* Case à cocher
.coupe-item input[type="checkbox"] {
    margin-right: 10px;
}

/* Champ de prix
.coupe-item input[type="number"] {
    width: 80px;
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 4px;
    text-align: right;
}

/* Dernier élément sans bordure
.coupe-item:last-child {
    border-bottom: none;
}
/* Section où s'affichent les langues et prix sélectionnés
#affichageCoupes {
    padding: 10px;
    background: #f8f8f8;
    border: 1px solid #ddd;
    border-radius: 5px;
    margin-top: 10px;
}

.coupe-selectionnee {
    display: flex;
    justify-content: space-between;
    padding: 5px;
    border-bottom: 1px solid #ddd;
}

.coupe-selectionnee:last-child {
    border-bottom: none;
}



/* Conteneur principal
.crepes-wrapper {
    border: 1px solid #FCE5EE;
    border-radius: 5px;
    overflow: hidden;
    font-family: Arial, sans-serif;
    padding: 10px;
}

/* En-tête avec la flèche
.crepes-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    background-color: #FCE5EE;
    cursor: pointer;
    font-weight: bold;
    border-bottom: 1px solid #FCE5EE;
}

/* Contenu caché par défaut
.crepes-container {
    display: none;
    padding: 10px;
    background-color: #FCE5EE;
}

/* Amélioration du style des éléments de la liste
.crepe-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px;
    border-bottom: 1px solid #eee;
}

/* Case à cocher
.crepe-item input[type="checkbox"] {
    margin-right: 10px;
}

/* Champ de prix
.crepe-item input[type="number"] {
    width: 80px;
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 4px;
    text-align: right;
}

/* Dernier élément sans bordure
.crepe-item:last-child {
    border-bottom: none;
}
*/
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
/*
@media (min-width: 992px) {
    .col-lg-4 {
        -ms-flex: 0 0 33.333333%;
        flex: 0 0 33.333333%;
        max-width: 32% !important;
    }
}
@media (min-width: 768px) {
    .col-md-4 {
        -ms-flex: 0 0 33.333333%;
        flex: 0 0 33.333333%;
        max-width: 32% !important;
    }
}
@media (min-width: 576px) {
    .col-sm-4 {
        -ms-flex: 0 0 33.333333%;
        flex: 0 0 33.333333%;
        max-width: 32% !important;
    }
}*/

/* ATTENTION DPR
@media (-webkit-min-device-pixel-ratio: 2) and (max-width: 767px) {
    .high-res-image {
        background-image: url('image@2x.png');
}
}

*/




/*Smartphones en mode portrait*/
@media (max-width: 767px) {

    #testresolution {
        background-color: brown;
    }


}


/*Tablettes : (résolutions moyennes)*/
@media (min-width: 768px) and (max-width: 991px) {

    #testresolution {
        background-color: white;
    }

}


/*Ordinateurs de bureau : (grandes résolutions)*/
@media (min-width: 992px) and (max-width: 1199px) {

    #testresolution {
        background-color: grey;
    }
    .col-sm-2 {
        -ms-flex: 0 0 33.333333%;
        flex: 0 0 33.333333%;
        max-width: 32% !important;
    }

}

/*Grands écrans : (très grandes résolutions)  STEPH MAC*/
@media (min-width: 1200px) and (max-width: 1399px) {

    #testresolution {
        background-color: violet;
    }

    .col-sm-3 {
        -ms-flex: 0 0 20%;
        flex: 0 0 20%;
        max-width: 20% !important;
    }
    .col-sm-3-un {
        -ms-flex: 0 0 30%;
        flex: 0 0 30%;
        max-width: 30% !important;
    }

    .col-lg-3-un {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50% !important;
    }

    .col-md-3-un {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50% !important;
    }

    .col-md-3-un-pal {
        -ms-flex: 0 0 30%;
        flex: 0 0 30%;
        max-width: 30% !important;
    }

    .col-sm-4 {
        -ms-flex: 0 0 31%;
        flex: 0 0 31%;
        max-width: 31% !important;
    }

    .col-sm-un {
        flex: 0 0 48% !important;
        max-width: 50% !important;
    }

 /*   #imageContainer
    {
        height: 108.5vh !important;
    }*/
    #imageContainer {
        height: auto; /* Ajuste la hauteur selon l'image */
        display: flex; /* Centre l'image */
        justify-content: center; /* Centre horizontalement */
        align-items: center; /* Centre verticalement */
        overflow: hidden; /* Empêche le débordement */
    }

    #selectedImage {
        max-width: 100%; /* Ajuste la taille de l'image à la div */
        max-height: 100%; /* Empêche le dépassement */
        display: block; /* Pour éviter les marges blanches */
    }

}


/*Grands écrans : (très grandes résolutions)  STEPH MAC*/
@media (min-width: 1400px) and (max-width: 1499px) {

    #testresolution {
        background-color: navy;
    }

    .col-sm-3 {
        -ms-flex: 0 0 20%;
        flex: 0 0 20%;
        max-width: 20% !important;
    }
    .col-sm-3-un {
        -ms-flex: 0 0 30%;
        flex: 0 0 30%;
        max-width: 30% !important;
    }

    .col-lg-3-un {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50% !important;
    }

    .col-md-3-un {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50% !important;
    }

    .col-md-3-un-pal {
        -ms-flex: 0 0 30%;
        flex: 0 0 30%;
        max-width: 30% !important;
    }

    .col-sm-4 {
        -ms-flex: 0 0 31%;
        flex: 0 0 31%;
        max-width: 31% !important;
    }

    .col-sm-un {
        flex: 0 0 48% !important;
        max-width: 50% !important;
    }

 /*   #imageContainer
    {
        height: 1400px;
    }*/
    #imageContainer {
        height: auto; /* Ajuste la hauteur selon l'image */
        display: flex; /* Centre l'image */
        justify-content: center; /* Centre horizontalement */
        align-items: center; /* Centre verticalement */
        overflow: hidden; /* Empêche le débordement */
    }

    #selectedImage {
        max-width: 100%; /* Ajuste la taille de l'image à la div */
        max-height: 100%; /* Empêche le dépassement */
        display: block; /* Pour éviter les marges blanches */
    }

}


/*AMELIE MAC*/
@media (min-width: 1500px) and (max-width: 1599px) {

    #testresolution {
        background-color: gold;
    }

    #troisieme-recto {
        width: 96vh !important;
        height: 140vh !important;
    }

    /* Conteneur général */
    #troisieme-verso {
        width: 96vh !important;
        height: 140vh !important;
    }
    #troisieme-recto-v2 {
        width: 96vh !important;
        height: 140vh !important;
    }

    /* Conteneur général */
    #troisieme-verso-v2 {
        width: 96vh !important;
        height: 140vh !important;
    }

    #selectedImage {
       /* padding: 10vh;*/
        width : max(180vh);
    }
    .col-sm-3 {
        -ms-flex: 0 0 20%;
        flex: 0 0 20%;
        max-width: 20% !important;
    }
    .col-sm-3-un {
        -ms-flex: 0 0 30%;
        flex: 0 0 30%;
        max-width: 30% !important;
    }

    .col-lg-3-un {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50% !important;
    }

    .col-md-3-un {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50% !important;
    }

    .col-md-3-un-pal {
        -ms-flex: 0 0 30%;
        flex: 0 0 30%;
        max-width: 30% !important;
    }

    .col-sm-4 {
        -ms-flex: 0 0 31%;
        flex: 0 0 31%;
        max-width: 31% !important;
    }

    .col-sm-un {
        flex: 0 0 48% !important;
        max-width: 50% !important;
    }

 /*   #imageContainer
    {
        height: 110vh !important;
    }*/
    /*    #imageContainer
        {
            height: 1400px;
        }*/
    #imageContainer {
        height: auto; /* Ajuste la hauteur selon l'image */
        display: flex; /* Centre l'image */
        justify-content: center; /* Centre horizontalement */
        align-items: center; /* Centre verticalement */
        overflow: hidden; /* Empêche le débordement */
    }

    #selectedImage {
        max-width: 100%; /* Ajuste la taille de l'image à la div */
        max-height: 100%; /* Empêche le dépassement */
        display: block; /* Pour éviter les marges blanches */
    }
}

/**/
@media (min-width: 1600px) and (max-width: 1699px) {

    #testresolution {
        background-color: black;
    }

    #troisieme-recto {
        width: 80vh !important;
        height: 100vh !important;
    }

    /* Conteneur général */
    #troisieme-verso {
        width: 80vh !important;
        height: 100vh !important;
    }
    #troisieme-recto-v2 {
        width: 80vh !important;
        height: 100vh !important;
    }

    /* Conteneur général */
    #troisieme-verso-v2 {
        width: 80vh !important;
        height: 100vh !important;
    }

    #selectedImage {
       /* padding: 10vh;*/
        width : max(180vh);
    }
    .col-sm-3 {
        -ms-flex: 0 0 20%;
        flex: 0 0 20%;
        max-width: 20% !important;
    }
    .col-sm-3-un {
        -ms-flex: 0 0 30%;
        flex: 0 0 30%;
        max-width: 30% !important;
    }

    .col-lg-3-un {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50% !important;
    }

    .col-md-3-un {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50% !important;
    }

    .col-md-3-un-pal {
        -ms-flex: 0 0 30%;
        flex: 0 0 30%;
        max-width: 30% !important;
    }

    .col-sm-4 {
        -ms-flex: 0 0 31%;
        flex: 0 0 31%;
        max-width: 31% !important;
    }

    .col-sm-un {
        flex: 0 0 48% !important;
        max-width: 50% !important;
    }

 /*   #imageContainer
    {
        height: 110vh !important;
    }*/
    /*    #imageContainer
        {
            height: 1400px;
        }*/
    #imageContainer {
        height: auto; /* Ajuste la hauteur selon l'image */
        display: flex; /* Centre l'image */
        justify-content: center; /* Centre horizontalement */
        align-items: center; /* Centre verticalement */
        overflow: hidden; /* Empêche le débordement */
    }

    #selectedImage {
        max-width: 100%; /* Ajuste la taille de l'image à la div */
        max-height: 100%; /* Empêche le dépassement */
        display: block; /* Pour éviter les marges blanches */
    }
}
/*Ecrans :Estelle Mac et STEPH MAC*/
@media (min-width: 1700px) and (max-width: 1799px) {

    #testresolution {
        background-color: coral;
    }

    #troisieme-recto {
        width: 80vh !important;
        height: 100vh !important;
    }

    /* Conteneur général */
    #troisieme-verso {
        width: 80vh !important;
        height: 100vh !important;
    }
    #troisieme-recto-v2 {
        width: 80vh !important;
        height: 100vh !important;
    }

    /* Conteneur général */
    #troisieme-verso-v2 {
        width: 80vh !important;
        height: 100vh !important;
    }

    #selectedImage {
       /* padding: 10vh;*/
        width : max(180vh);
    }
    .col-sm-3 {
        -ms-flex: 0 0 20%;
        flex: 0 0 20%;
        max-width: 20% !important;
    }
    .col-sm-3-un {
        -ms-flex: 0 0 30%;
        flex: 0 0 30%;
        max-width: 30% !important;
    }

    .col-lg-3-un {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50% !important;
    }

    .col-md-3-un {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50% !important;
    }

    .col-md-3-un-pal {
        -ms-flex: 0 0 30%;
        flex: 0 0 30%;
        max-width: 30% !important;
    }

    .col-sm-4 {
        -ms-flex: 0 0 31%;
        flex: 0 0 31%;
        max-width: 31% !important;
    }

    .col-sm-un {
        flex: 0 0 48% !important;
        max-width: 50% !important;
    }

 /*   #imageContainer
    {
        height: 110vh !important;
    }*/
    /*    #imageContainer
        {
            height: 1400px;
        }*/
    #imageContainer {
        height: auto; /* Ajuste la hauteur selon l'image */
        display: flex; /* Centre l'image */
        justify-content: center; /* Centre horizontalement */
        align-items: center; /* Centre verticalement */
        overflow: hidden; /* Empêche le débordement */
    }

    #selectedImage {
        max-width: 100%; /* Ajuste la taille de l'image à la div */
        max-height: 100%; /* Empêche le dépassement */
        display: block; /* Pour éviter les marges blanches */
    }
}

/* Greg */
@media (min-width: 1800px) and (max-width: 2499px) {

    #testresolution {
        background-color: crimson;
    }

    .col-sm-3 {
        -ms-flex: 0 0 20%;
        flex: 0 0 20%;
        max-width: 20% !important;
    }

    .col-sm-3-un {
        -ms-flex: 0 0 30%;
        flex: 0 0 30%;
        max-width: 30% !important;
    }

    .col-lg-3-un {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50% !important;
    }

    .col-md-3-un {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50% !important;
    }

    .col-md-3-un-pal {
        -ms-flex: 0 0 30%;
        flex: 0 0 30%;
        max-width: 30% !important;
    }

    /*  .col-sm-4 {
          -ms-flex: 0 0 33.333333%;
          flex: 0 0 33.333333%;
          max-width: 32% !important;
      }*/

    .col-sm-un {
        flex: 0 0 48% !important;
        max-width: 50% !important;
    }

    .col-sm-un-pal {
        flex: 0 0 30% !important;
        max-width: 30% !important;
    }

 /*   #imageContainer
    {
        height: 1400px;
    }*/
    #imageContainer {
        height: auto; /* Ajuste la hauteur selon l'image */
        display: flex; /* Centre l'image */
        justify-content: center; /* Centre horizontalement */
        align-items: center; /* Centre verticalement */
        overflow: hidden; /* Empêche le débordement */
    }

    #selectedImage {
        max-width: 100%; /* Ajuste la taille de l'image à la div */
        max-height: 100%; /* Empêche le dépassement */
        display: block; /* Pour éviter les marges blanches */
    }

}

/**/
@media (min-width: 2500px) and (max-width: 2699px) {


    #testresolution {
        background-color: chartreuse;
    }

    .col-sm-3 {
        -ms-flex: 0 0 20%;
        flex: 0 0 20%;
        max-width: 20% !important;
    }
    .col-sm-3-un {
        -ms-flex: 0 0 30%;
        flex: 0 0 30%;
        max-width: 30% !important;
    }

    .col-lg-3-un {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50% !important;
    }

    .col-md-3-un {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50% !important;
    }

    .col-md-3-un-pal {
        -ms-flex: 0 0 30%;
        flex: 0 0 30%;
        max-width: 30% !important;
    }

    .col-sm-4 {
        -ms-flex: 0 0 33.333333%;
        flex: 0 0 33.333333%;
        max-width: 32% !important;
    }

    .col-sm-un {
        flex: 0 0 48% !important;
        max-width: 50% !important;
    }

 /*   #imageContainer
    {
        height: 1490px !important;
    }*/
    #imageContainer {
        height: auto; /* Ajuste la hauteur selon l'image */
        display: flex; /* Centre l'image */
        justify-content: center; /* Centre horizontalement */
        align-items: center; /* Centre verticalement */
        overflow: hidden; /* Empêche le débordement */
    }

    #selectedImage {
        max-width: 100%; /* Ajuste la taille de l'image à la div */
        max-height: 100%; /* Empêche le dépassement */
        display: block; /* Pour éviter les marges blanches */
    }

}
/* Mode portrait spécifique à la résolution 2880x1920
@media (min-width: 2880px) and (min-height: 1920px) and (orientation: portrait) {
    .container {
        flex-direction: column;
        background-color: #f0f0f0; /* Par exemple, changer la couleur de fond de la container en mode portrait
    }
}
/* Styles pour les tablettes en portrait avec la même largeur d'écran
@media (min-width: 1920px) and (orientation: portrait) {

    .col-md-6 {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100% !important;
    }
}
/* Styles pour les tablettes en portrait avec la même largeur d'écran
@media (min-width: 2880px) and (orientation: portrait) {

    .col-md-6 {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100% !important;
    }
}
/* Mode paysage spécifique à la résolution 2880x1920
@media (min-width: 2880px) and (min-height: 1920px) and (orientation: landscape) {
    .container {
        flex-direction: row;
        background-color: #cccccc; /* Par exemple, changer la couleur de fond de la container en mode paysage
    }
}*/
/**/
@media (min-width: 2700px) and (max-width: 2999px) {

    #testresolution {
        background-color: black;
    }

    .col-sm-3 {
        -ms-flex: 0 0 20%;
        flex: 0 0 20%;
        max-width: 20% !important;
    }
    .col-sm-3-un {
        -ms-flex: 0 0 30%;
        flex: 0 0 30%;
        max-width: 30% !important;
    }

    .col-lg-3-un {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50% !important;
    }

    .col-md-3-un {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50% !important;
    }

    .col-md-3-un-pal {
        -ms-flex: 0 0 30%;
        flex: 0 0 30%;
        max-width: 30% !important;
    }
    .col-sm-4 {
        -ms-flex: 0 0 33.333333%;
        flex: 0 0 33.333333%;
        max-width: 32% !important;
    }

    .col-sm-un {
        flex: 0 0 48% !important;
        max-width: 50% !important;
    }

    .col-sm-6 {
        -ms-flex: 0 0 47%;
        flex: 0 0 47%;
        max-width: 47% !important;
    }

 /*   #imageContainer
    {
        height: 85vh !important;
    }*/
    #imageContainer {
        height: auto; /* Ajuste la hauteur selon l'image */
        display: flex; /* Centre l'image */
        justify-content: center; /* Centre horizontalement */
        align-items: center; /* Centre verticalement */
        overflow: hidden; /* Empêche le débordement */
    }

    #selectedImage {
        max-width: 100%; /* Ajuste la taille de l'image à la div */
        max-height: 100%; /* Empêche le dépassement */
        display: block; /* Pour éviter les marges blanches */
    }

}
/*Grands écrans : (très grandes résolutions)*/
@media (min-width: 3000px) {


    #testresolution {
        background-color: aqua;
    }

    .col-sm-3 {
        -ms-flex: 0 0 20%;
        flex: 0 0 20%;
        max-width: 20% !important;
    }
    .col-sm-3-un {
        -ms-flex: 0 0 30%;
        flex: 0 0 30%;
        max-width: 30% !important;
    }

    .col-lg-3-un {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50% !important;
    }

    .col-md-3-un {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50% !important;
    }

    .col-md-3-un-pal {
        -ms-flex: 0 0 30%;
        flex: 0 0 30%;
        max-width: 30% !important;
    }

    .col-sm-4 {
        -ms-flex: 0 0 33.333333%;
        flex: 0 0 33.333333%;
        max-width: 32% !important;
    }

    .col-sm-un {
        flex: 0 0 48% !important;
        max-width: 50% !important;
    }

  /*  #imageContainer
    {
        height: 1650px;
    }*/
    #imageContainer {
        height: auto; /* Ajuste la hauteur selon l'image */
        display: flex; /* Centre l'image */
        justify-content: center; /* Centre horizontalement */
        align-items: center; /* Centre verticalement */
        overflow: hidden; /* Empêche le débordement */
    }

    #selectedImage {
        max-width: 100%; /* Ajuste la taille de l'image à la div */
        max-height: 100%; /* Empêche le dépassement */
        display: block; /* Pour éviter les marges blanches */
    }

}