html{
    height: 100%;/*old or : #A48E4A*/
    --color-or: #E2BC74;
    --color-or-dark: #c9ab71;
    --color-bleu: #37767c;
    --color-bleu-dark: #4e989f;
    --color-black: #424242;
    --color-vert: #2ecc71;
    --color-rouge: #e74c3c;
}
body{
    height: 100%;
    font-family: 'Josefin Sans', sans-serif;
}
#container{
    min-height: 70%;
}
ul li{
    list-style: none;
    line-height: 2em;
}
p{
    padding: 10px;
    line-height: 2em;
    max-width: 700px;
    margin: 2em auto;
}
h1,h2,h3,h4,h5{
    font-family: 'Dancing Script', cursive;
    font-weight: normal;
}
#logo{
    text-indent: -9999px;
    background: url(../img/logo-lestermais-st.png) center no-repeat;
    background-size: contain;
}
#logobig{
    text-indent: -9999px;
    background: url(../img/logo-lestermais-blanc.png) center no-repeat;
    background-size: contain;
}
a{
    color: var(--color-or);
    text-decoration: none;
    transition: .2s ease-out;
}
a:hover{
    opacity: .5;
}
.col5{
    width: 48%;
    padding: 1%;
    float: left;
}
.col25{
    width: 23%;
    padding: 1%;
    float: left;
}
.col33{
    width: 31.33%;
    padding: 1%;
    float: left;
}
.forresponsive{
    display: none;
}
.notforresponsive{
    display: block;
}
a.bout{
    display: block;
    background-color: var(--color-bleu);
    text-align: center;
    width: auto;
    padding: 15px;
    max-width: 700px;
    margin: 0 auto;
}
/*Accueil*/
#home{
    color: #fff;
    background-image: url(../img/lestermais-exp.jpg);
    background-position: center;
    background-color: #666;
    background-size: cover;
    background-blend-mode: overlay;
    height: 100%;
    width: 100%;
    overflow: auto;
    text-align: center;
}
#intro{
    background: #fff;
    color: var(--color-black);
    padding: 20px;
    width: 500px;
    margin: 0 auto 20px;
}
nav ul li a{
    color: #fff;
    text-decoration: none;
    transition: .2s ease-out;
}
#home #logobig{
    margin-top: 1%;
    height: 400px;
}
nav ul li a:hover{
    color: var(--color-or);
}/*
#home h1{
    font-size: 4.2em;
    margin: 10px;
}*/
nav ul{
    margin: 0;
    padding: 0;
    font-size: 1em;
}
nav ul li{
    list-style: none;
    padding: 0;
    margin: 0;
    display: inline;
    padding: 6px;
    line-height: 1em;
}
#messagemail{
    font-size: 4em;
}
#msgok{
    background:  var(--color-bleu);
    padding: 20px;
}
#msgerror{
    background:  var(--color-rouge);
    padding: 20px;
}
#contadmin{
    font-size: .3em;
}
/*Header*/

header{
    background-color: var(--color-black);
    overflow: hidden;
    position: relative;
}
header nav{
    text-align: right;
    width: 520px;
    float: right;
    padding: 23px 10px;
}
header #logo{
    height: 55px;
    width: 94px;
    float: left;
    margin: 4px 0 0px 10px;
}
header h1{
    color: #fff;
    margin: 0;
    padding: 12px 4px;
    /*width: 210px;*/
}
header a{
    text-decoration: none;
}
header a h1{
    transition: .2s ease-out;
    float: left;
}
header a:hover h1{
    color: var(--color-or);
}
header .active{
    background: var(--color-or);
}
header .active a:hover{
    color: #ccc;
}
.calltoaction{
    background: var(--color-bleu);
    float: right;
    color: #fff;
    padding: 23px;
}
#rondprix{
    position: absolute;
    background: var(--color-black);
    left: 50%;
    top: 100px;
    border-radius: 200px;
    margin-left: -105px;
    width: 200px;
    height: 100px;
    text-align: center;
    padding: 50px 0;
    color: var(--color-or);
    border: 5px solid var(--color-or);
}
#rondprix p{
    line-height: 1em;
    padding: 0;
    margin: 0;
    color: #fff;
}
#prixbig{
    font-size: 5em;
    margin-left: 10px;
}
#language-switcher {
    float: right;
    margin: 18px 10px 9px -8px;
}

.lang-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 24px; /* Ajustez la taille des drapeaux si nécessaire */
    margin-left: 5px;
    padding: 0;
    line-height: 1; /* Aligne le drapeau au centre du bouton */
    opacity: 0.7; /* Donne un effet de transparence */
    transition: opacity 0.2s ease-in-out;
}

.lang-btn:hover,
.lang-btn:focus {
    opacity: 1; /* Le drapeau devient opaque au survol */
}
/*Footer*/

footer{
    background: var(--color-black);
    color: #fff;
    display: block;
    height: auto;
}
footer ul li{
    line-height: 1em;
}
#credits{
    text-align: center;
    padding: 0 0 20px 0;
    font-family: 'Dancing Script', cursive;
    width: 100%;
    clear: both;
}
#partenaires, #reseaux{
    width: 46%;
    padding: 0 2%;
}
#partenaires{
    float: left;
}
#reseaux{
    float: right;
    text-align: right;
}
#partenaires ul li, #reseaux ul li{
    list-style: none;
    padding: 0;
    margin: 0;
}
#partenaires ul li{
    float: left;
    margin: 5px;

}
#reseaux ul li{
    margin: 7px;

}
#partenaires ul, #reseaux ul{
    padding: 0;
    margin: 0;
}


/*La Chambre*/

.colim,.colcont{
    float: left;
    width: 50%;
    height: 450px;
    object-fit: cover;
    object-position: center;
}
.colcont{
    
    display: flex;
    justify-content: center;
    align-items: center;
}
.descal{
}
.vertic{
    height: 600px;
    width: 24.8%;
    margin: 0.1%;
}
.gallery{
    overflow: hidden;
    position: relative;
}
.content h1{
    font-size: 3em;
}
.content, .colcont{
    text-align: center;
}
.tarif-container {
            max-width: 700px;
            margin: 0 auto;
            padding: 20px;/*
            border: 1px solid #ddd;
            border-radius: 8px;
            background-color: #fff;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);*/
        }
.tarif-container table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 20px;
        }
     .tarif-container th,.tarif-container td {
            padding: 12px;
            text-align: left;
            border-bottom: 1px solid #eee;
        }
     .tarif-container th {
            background-color: var(--color-black);
            color: #fff;
            font-weight: bold;
        }
    .tarif-container tr:nth-child(even) {
            background-color: #f9f9f9;
        }
     .tarif-container .important {
            font-weight: bold;
            color:  var(--color-or); /* Couleur rouge pour l'info importante */
        }
     .tarif-container ul {
            list-style: none;
            padding-left: 0;
        }
       .tarif-container  ul li:before {
            content: "✅";
            margin-right: 8px;
        }
        .tarif-container .note {
            background-color: #fff3cd;
            border-left: 5px solid #ffc107;
            padding: 15px;
            margin-top: 20px;
            color: #856404;
            border-radius: 4px;
        }
.pet-friendly-box {
            max-width: 500px;
            margin: 20px auto;
            padding: 20px;
            text-align: center;
        }
        .pet-friendly-box h2 {
            color: #28a745; /* Vert pour l'aspect positif */
            margin-top: 0;
            font-size: 1.5em;
        }
        .pet-friendly-box p {
            font-size: 1.1em;
            color: #343a40;
            margin: 0;
            padding: 0;
        }
        .pet-friendly-box span {
            font-size: 1.5em;
        }
        .note {
            font-style: italic;
            font-size: 0.9em;
            color: #6c757d;
            margin-top: 15px;
        }
.no-pet-box {
            max-width: 500px;
            margin: 20px auto;
        }
        .no-pet-box h2 {
            color: #dc3545; /* Rouge pour le titre */
            margin-top: 0;
            font-size: 1.5em;
        }
        .no-pet-box p {
            font-size: 1.1em;
            color: #343a40;
            margin: 0;
            padding: 0;
        }
        .no-pet-box span {
            font-size: 1.5em;
        }
        .reason {
            font-style: italic;
            font-size: 0.9em;
            color: #6c757d;
            margin-top: 15px;
        }
/*Activités*/
#activites{
    display: block;
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
    background: #fff;
    overflow: hidden;
    font-size: 14px;
}
.acti{
    width: 20%;
    float: left;
    background: #fff;
    text-align: center;
}
.insideacti{
    height: 340px;
    padding: 20px;
}
.thumbacti{
    width: 100%;
    height: 220px;
    object-fit: cover;
    object-position: center;
}
.dist{
    color: var(--color-or);
    font-size: .9em;
}

/*Contact*/

.titrecontact{
    text-align: center;
    margin-top: 80px;
    color: var(--color-or-dark);
    font-size: 3em;
}
#contacts{
    text-align: center;
}
#contact, #reservation{
    width: 600px;
    margin: 0 auto;
    padding: 20px 0 50px;
}
#contact input, #contact textarea{
    width: 96%;
    padding: 2%;
    margin: 10px 0;
}
#contact input[type="radio"]{
    width: auto;
}
#contact textarea{
    width: 96.4%;
    height: 100px;
}
#contact button, #reservation button{
    text-align: center;
    margin: 0 auto;
    display: block;
    width: 200px;
    overflow: hidden;
    padding: 10px;
    border: none;
    background: var(--color-or);
    color: #fff;
    transition: .2s ease-out;
}
#contact button:hover{
    
    background: var(--color-or-dark);
}
#miel{
    display: none;
}

/*Réservation*/
#listresa {
            display: flex; /* Utilisation de Flexbox pour aligner les choix */
            gap: 40px; /* Espace entre les deux options */
            flex-wrap: wrap; /* Permet le retour à la ligne sur petits écrans */
            justify-content: center;
            padding: 20px;
        }
        .choice-card {
            width: 300px; /* Largeur fixe pour les cartes */
            text-align: center;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
            transition: transform 0.3s, box-shadow 0.3s;
            cursor: pointer;
            text-decoration: none; /* Supprime le soulignement des liens */
            background-color: #fff;
        }
        .choice-card:hover {
            transform: translateY(-8px); /* Petit effet de soulèvement au survol */
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
        }
        .choice-card img {
            width: 100%;
            height: 200px; /* Hauteur fixe pour les images */
            object-fit: cover; /* Assure que l'image couvre la zone sans se déformer */
            display: block;
        }
        .choice-card h2 {
            margin: 15px 0 10px;
            color: #3498db; /* Bleu pour les titres */
            font-size: 1.3em;
        }
        .choice-card p {
            padding: 0 15px 20px;
            color: #7f8c8d;
            margin: 0;
        }

        /* Styles spécifiques pour le bus (par exemple) */
        .bus-card h2 {
             color: #e74c3c; /* Rouge pour le Bus */
        }
fieldset{
    margin: 20px 0 0 0;
}

/*Responsive*/
@media screen and (max-width: 1250px) {
  .acti{
      width: 25%;
    }
}
@media screen and (max-width: 1100px) {
  
    .colim,.colcont{
        height: 500px;
    }
}
@media screen and (max-width: 930px) {
    
    .acti{
      width: 33.3333333%;
    }
    .colim,.colcont{
        height: auto;
    }
}
@media screen and (max-width: 800px) {
    .acti{
      width: 50%;
    }
    .colim,.colcont{
        width: 100%;
    }
.vertic{
    height: 400px;
    width: 49.8%;
    margin: 0.1%;
}
    #rondprix{
        transform: scale(.8);
    }
    .forresponsive{
        display: block;
    }
    .notforresponsive{
        display: none;
    }
}

@media screen and (max-width: 600px) {
    
    .acti{
      width: 100%;
    }
    #contact,#reservation{
        width: 90%;
        margin: 5%;
    }
    #intro{
        width: 92%;
        margin: 2%;
        padding: 2%;
    }
    .insideacti{
        height: auto;
    }
    
}
@media screen and (max-width: 450px) {
    .col5{
        width: 98%;
    }
    .col25{
        width: 48%;
    }
    .colim{
        height: 300px;
    }
    #rondprix{
        transform: scale(.5);
        top: 0;
    }
    header nav{
        width: auto;
    }
    nav ul li{
        line-height: 2em;
    }
.vertic{
    height: 450px;
    width: 99.8%;
}
    
}
@media screen and (max-width: 450px) {
    .calltoaction{
        width: 90%;
        padding: 5%;
        text-align: center;
    }
    header a h1{
        float: none;
        text-align: center;
    }
    header #logo{
        float: none;
        margin: 0 auto;
    }
    #partenaires, #reseaux {
        width: 96%;
    }
    #reseaux{
        float: none;
        text-align: left;
    }
}