@charset "utf-8";
/* CSS Document */
/*
html {
    font-size: 1rem;
font-weight: 400; 
letter-spacing: 0.02em;
}
*/



html, body {
    margin: 0;
    padding: 0;

}


/* Annuler les marges automatiques des titres/paragraphe */
h1, h2, h3, h4, h5, h6, p {
    margin-top: 0;
    margin-bottom: 0;
}





html, body {
  max-width: 100%;
  overflow-x: hidden;
}

body {	

  
    font-family: 'Montserrat', sans-serif;
	line-height:1.3;
    background-color:gainsboro;
    color:#333;
}
a {text-decoration:none; color:#333;}


section {
	
	max-width: 1200px;
    width: 90%;
	margin:20px auto; 
	padding-bottom: 20px;
    border-bottom: 1px solid grey;
}
h1,h2 {
    font-family:'Playfair Display', serif;
	color: #D97451;
}
.hero {
    display:flex;
    gap:50px;
    align-items:center;
}
.hero img {
    max-width:300px;
    border-radius:4px;
}

.card {
    background:white;
    padding:10px;
	margin: 10px;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
 border-radius: 10px;
    font-size: 0.9rem;
    font-weight: normal;

}
.card img {
    width:95%;
	cursor: zoom-in;
}
	
	

.card2 {
    background:white;
    padding:15px;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
}
	
.price {
    font-weight:bold;
    margin-top:10px;
}
	.contact-form {
    max-width:80%;
}
.contact-form input,
.contact-form textarea {
    width:100%;
    padding:12px;
    margin-bottom:15px;
    border:1px solid #ccc;
    font-family:inherit;

}


.contact-form button {
    background:#333;
    color:white;
    padding:12px 30px;
    border:none;
    cursor:pointer;

}
	
	.fade {
    opacity:0;
    transform:translateY(20px);
    transition:all 0.8s ease;
}
.fade.visible {
    opacity:1;
    transform:translateY(0);
}
	
@media(max-width:900px){
    .hero {
        flex-direction:column;
        text-align:center;
    }}

.menu {
    

    top:0; left:0;
    width:100%;
    background:rgba(245,245,245,0.95);
    z-index:1000;
    box-shadow:0 2px 10px rgba(0,0,0,0.05);
}



.menu a {
    text-decoration:none;
    color:#333;
    letter-spacing:2px;
    transition:color .3s;
	padding-right: 30px;
}

.menu a:hover {
    color:#999;
}

	
html {
    scroll-behavior:smooth;
}
	
.site-header {
position: fixed;
top: 0;
	left:0;
    width: 100%;
    background: rgba(245,245,245,0.95);
    backdrop-filter: blur(6px);
    z-index: 1000;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}



.logo-zone {
    display: flex;
    align-items: center;
    gap: 15px;
	padding-left:50px;
	height:auto;
	
}



.logo-zone img {
    width: 150px;
    height: auto;
}

.site-title {
    font-family: 'Playfair Display', serif;
    font-size: 30px;
    line-height: 0.8;
    color: #D97451;
}

.site-title small {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #777;
}

@media(max-width:900px){
.logo-zone {
        padding-left:0;
		margin:0 -30px;}
.site-title {
    font-size: 24px;
			line-height: 0.8;}
.site-title small {
    font-size: 14px;
}}

/* Menu */

/* MENU */

	.menu > ul {
    display: flex;

    justify-content: flex-end;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 20px 40px;
    gap: 30px;
}

.menu a {
    text-decoration: none;
    font-size: 14px;
    letter-spacing: 2px;
    color: #333;
    transition: color .3s ease;
}

.menu a:hover {
    color: #D97451;
}
.menu a {
    text-decoration: none;
 font-size: 14px;
    letter-spacing: 2px;
    color: #333;
    transition: color .3s;
}



.menu a:hover {
    color: #999;
}

/* VERSION MOBILE */
@media (max-width: 1400px) {

    .menu {
        gap: 5px;              /* liens plus rapprochés */
        flex-wrap: wrap;       /* évite le débordement */
        justify-content: center;
    }

    .menu a {
        font-size: 12px;
        letter-spacing: 0;   /* réduit l'espacement des lettres */
        padding: 0 ;      /* moins d’espace interne */
    }
}

	
button, input[type=submit], .submit {
  background: #D97451; /* accent */
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  font-weight: bold;
  cursor: pointer;
}
button:hover {
  background: #C66A47; /* variation légèrement plus sombre */
}

#lightbox-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.85);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  cursor: pointer;
}

#lightbox-overlay img {
  max-width: 90%;
  max-height: 90%;
  box-shadow: 0 20px 40px rgba(0,0,0,0.4);
  background: #fff;
cursor: zoom-out;
}

#footer
{
	background-color: grey;
	color:white;
}


/* VERSION MOBILE  */


@media (max-width: 767px) {
    
    .gallery a:focus,
.gallery a:active,
.gallery img:focus {
    outline: none !important;
}

  .gallery {
 
    display: flex;
    overflow-x: auto;
    gap: 0;                     /* supprime espace entre images */
    scroll-snap-type: x mandatory;
    padding: 0;                 /* supprime le padding */
    margin: 0;
    -webkit-overflow-scrolling: touch;
  }

  .gallery img {
    flex: 0 0 60vw;            /* largeur réelle écran */
    width: 60vw;               /* prend toute la largeur viewport */
    max-width: none;
    scroll-snap-align: start;
    border-radius: 10px;           /* optionnel pour effet immersif */
  }

  .gallery::-webkit-scrollbar {
    display: none;
  }
}





@media (min-width: 768px) {
  .gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    overflow: visible;
	  
  }

  .gallery img {
    flex: initial;
    width: 100%;
  }
}

#menuadmin {
width: 100%; 
padding-right:100px;
text-align: right;	
padding-top: 20px;
background-color:darkgrey;
height:40px;
}

#menuadmin a:hover {background-color: grey;}

.image-rond {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    object-fit: cover;   /* évite la déformation */
}

#photob {
float:left; margin: 5px; max-width: 110px; height:140px;font-size:0.9rem;	
}

#banniere{
width:62%;
height:50vh;
display: block;
        margin: auto;
background-image:url("images/bdo4-2.png");
background-size:cover;
background-position:center;
background-repeat:no-repeat;
}

@media (max-width:1400px){
#banniere{
width:100%;
height:60vh;
}
}

@media (max-width:768px){
#banniere{
width:100%;
height:20vh;
}

}



.menu li {
    position: relative;
}

/* Sous-menu caché */
/* Sous-menu */
.submenu {
    display: none;
    position: absolute;
    top: 100%;           /* plus propre que 150% */
    left: 0;
    background: white;
    min-width: auto;     /* enlève largeur forcée */
    padding: 0;          /* IMPORTANT */
    margin: 0;           /* IMPORTANT */
    list-style: none;    /* enlève retrait puces */
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.submenu li {
    padding: 6px 12px;   /* padding horizontal contrôlé */
    white-space: nowrap; /* évite étirement */
}

.submenu a {
    display: block;
}

/* Desktop : ouverture au survol */
@media(min-width:900px){
    .has-submenu:hover .submenu {
        display: block;
    }
}

/* Masquer le menu admin sur mobile */
@media (max-width: 900px) {
    .menu .has-submenu {
        display: none !important;
    }
}

.avis-home{
    
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:15px;
    margin-top:10px;
}

.avis-item{
    background:#ffffff;
    padding:20px;
    border-radius:12px;
    box-shadow:0 5px 10px rgba(0,0,0,0.05);
    text-align:left;
   
}

.avis-item p{
    margin-bottom:10px;
}

.avis-item small{
    color:#777;
}

/* bouton */
.btn-avis{
    display:inline-block;
    padding:10px 20px;
    background:#D97451;
    color:#fff;
    border-radius:8px;
    text-decoration:none;
    transition:0.3s;
     margin: 0 auto;
    
}

.btn-avis:hover{
    background:#4e6448;
}

/* responsive */
@media screen and (max-width:900px){
    .avis-home{
        grid-template-columns:1fr;
    }
}