body,html {
height:100%;
margin:0px;
font-size:1em;
}

body {
font-family:"liberation serif", times new roman, helvetica;
margin:0px;
padding:0px;
color:#000;
background-color:#fff;
}

/* Style de la banniere */
.header {
width:100%;
margin:0px;
padding:0px;
overflow: hidden;
}

.header img {
width:100%;
height:auto;
display:block;
}

/* Styles du menu pour smartphone */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

.menu {
background-color: #000;
color: #fff;
padding: 5px 25px;
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
font-size: 2.2rem;
z-index:2;
}

.menu .logo {
font-size: 1.1rem;
font-weight: bold;
letter-spacing: 1px;
}

.menu-links {
list-style: none;
display: none;
flex-direction: column;
background-color: #000;
position: absolute;
top: 35px;
left: 0;
width: 100%;
transition: all 0.3s ease;
}

.menu-links li {
text-align: center;
padding: 12px 0;
border-top: 2px solid #1799e6;
}

.menu-links a {
color: #fff;
text-decoration: none;
display: block;
font-size: 1rem;
transition: color 0.3s ease;
}

.menu-links a:hover {
color: #1799e6;
}

.menu-toggle {
display: block;
font-size: 1.3rem;
cursor: pointer;
}

.menu.active .menu-links { /* État actif du menu (quand on clique sur le burger) */
  display: flex;
}

/* Styles du menu pour PC */
@media (min-width: 1024px) {
    .menu {
    flex-direction: row;
    font-size: 1rem;  
    }
  
    .menu .logo {
    display: none;
    }

    .menu-links {
    display: flex !important;
    position: static;
    flex-direction: row;
    gap: 100px; /* Espacement entre les menus */
    background: none;
    margin-left: 50px;
    }

    .menu-links li {
    width:100%;
    border:none;
    padding: 0;
    }

    .menu-toggle {
    display: none;
    }    
}

/* Styles du content sur smartphone */
.content {
min-height:75% !important;
}

.container {
padding:15px !important;
overflow: auto;
display: flow-root;
}

.container img {
width: 45%; 
height:auto;
float: left;
margin: 0px 5px 0px 0px !important;
}

.container ul {
font-size: 1rem;
list-style-position: outside;
padding-left: 30px;
display: flow-root;
}
.container p {
margin-bottom:10px !important;
}

/* Styles du content sur PC */
@media (min-width: 1024px) {
    .content {
    min-height:60% !important; 
    } 

    .container img {
    width: 15%; 
    }
    
   .container ul {
    font-size: 1.1rem;
    } 
}

/* Styles de la page de contact sur smartphone */
.container-contact {
margin:25px !important;
text-align:center;
}

.container-contact p {
text-align:center;
margin-bottom:20px;
}

.container-contact img {
width:15%;
height:auto;
margin:10px 5px 0px 5px;
}

/* Styles des images de la page de contact sur PC */
@media (min-width: 1024px) {
    .container-contact img {
    width:2.5%;
    }
}


/* Styles du formulaire la page de contact */
.contact-form {
max-width: 600px;
margin: 0px auto 20px auto;
border: 1px solid #ccc;
border-radius: .3rem;
padding:5px;
background-color:#f9f8f8;
}

.contact-form p {
margin-bottom:5px !important;
}

.champs-form {
display: flex;
flex-direction: column;
}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea {
width: 100%;
padding: .2rem;
font-size: 1rem;
border: 1px solid #ccc;
border-radius: .3rem;
box-sizing: border-box;
}

.contact-form .bouton {
max-width: 150px;
margin:auto;
background:linear-gradient(70deg, #1799e6, #9669d3);
color: #fff;
border: none;
padding: .3rem 1.2rem;
border-radius: .3rem;
cursor: pointer;
font-size: 1rem;
}

.contact-form .bouton:hover {
background:linear-gradient(70deg, #8acef7, #c3a7e9);
color: #000;
}

.phone {
position: absolute;
left: -9999px;
}

.captcha-wrapper {
display: flex;
justify-content: center;
}

.g-recaptcha {
display: inline-block;
}

/* Styles du formulaire la page de contact sur petits écrans */
@media (max-width: 480px) {
    .contact-form {
    padding: .5rem;
    }
}
@media (max-width: 380px) {
    .g-recaptcha {
    transform: scale(0.85);
    transform-origin: center top;
    }
}

/* Styles de la pages des mentions légales */
.container-mentions {
width:95%;
margin:auto;
}

.container-mentions p {
margin-top:20px;
text-align: center; 
}

/* Styles des titres, liens et paragraphes sur smartphone */
h1 {
text-align:center;
margin:0px;
font-size: 1.3rem;
}

h2 {
text-align:center;
font-weight:bold;
font-size: 1.1rem;
padding:0px;
margin:0px;
}

p {
font-size: 1rem;
}

a {
color: #0e6090;
text-decoration: none;
transition: color 0.3s ease;
}

a:hover {
color: #1799e6;
}

/* Styles des titres et paragraphes sur PC */
@media (min-width: 1024px) {
    h1 {
    font-size: 1.5rem;
    }
    
    h2 {
    font-size: 1.2rem;
    }
    
    p {
    font-size: 1.1rem;
    }
}

/* Style du diaporama */
.container-diaporama {
padding:5px;
overflow:auto;
display:flow-root;
}

.slider-translation-container {
width:100%;
max-width:650px;
overflow:hidden;
margin:auto;
border-radius:10px;
z-index:1;
}

.slider-translation {
display:flex;
transition:transform 0.8s ease-in-out;
}

.slider-translation img {
width:100%;
max-width:650px;
height:auto;
flex-shrink:0;
object-fit:cover;
}

.slide-img {
width:100%;
flex-shrink:0;
}

/* Style de la galerie */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
}

.gallery img {
  width: 95%;
  margin:10px;
  height: auto;
  border-radius: 6px;
  object-fit: cover;
  transition: transform .3s ease;
}

.gallery img:hover {
  transform: scale(1.05);
}

/* Styles du bas de page */
.container-bas {
width:100%;
position:absolute;
margin-top:5px;
padding:5px 0px;
background-color:#000;
}

.container-bas p {
text-align:right;
color:#fff;
margin:0px 10px 0px 0px;
}

.container-bas a {
color: #fff;
text-decoration: none;
transition: color 0.3s ease;
}

.container-bas a:hover {
color: #1799e6;
}