/*  GLOBAL  */
:root{
	--primaryColor: #f8b800;
}
body  {
	color: white;
	background: linear-gradient(135deg, #0b0b0b 0%, #161616 50%, #1a1a1a 100% );
	margin: 0;
}

/* HEADER */
.titre{
	display: flex;
	align-items: center;
	justify-content: space-around;
	height: 200px;
	margin-bottom: 30px;
}
.titre img{
	width: 300px;
}
.titre h3 i{
	color: var(--primaryColor);
}

/* SECTION CAROUSEL */
.carrousel{
	position: relative;
	overflow: hidden;
}
.carrousel .images{
	display: flex;
	flex-wrap: nowrap;
	flex-direction: row;
	height: 600px;
	transition: transform 0.7s ease-in-out;	
}
.slider-item{
    width: 100%;
	object-fit: cover;
	flex-shrink: 0;
}
.fleches{
	position: absolute;
	width: 100%;
	padding-left: 10px;
	top: 300px;
	color: var(--primaryColor);
	cursor: pointer;
}
#droite{	
	float: right;
	padding-right: 20px;	
}

/* NAVIGATION */
#toggle-btn{
	display: none;
	position: absolute;
	top: 180px;
	right: 20px;
	cursor: pointer;
}
nav ul{
	display: flex;
	flex-direction: row;
	justify-content: space-evenly;
	position: absolute;
	top: 200px;
	left: -40px;
	width: 100%;
	list-style-type: none;
	opacity: 1;
	transition: opacity 0.5s;
}
nav ul li{
	margin: 0 20px;
    background-color: rgba(112,112,128,0.8);
    font-size: 16px;
    min-width: 110px;
    height: 45px;
    line-height: 45px;
    color: white;
    text-align: center;
    box-shadow: 2px 2px 5px #444;
    cursor: pointer;
}
nav ul li.active{
    background-color: #f1b82d;
    color: white;
}
nav  li a {
    text-decoration: none;
    color: inherit;
}
nav ul li:hover{
	background-color: rgb(96,96,96);
}


/* ARTICLES */
.articles{
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: auto;
	font-size: small;
}
.articles h4, h5{
	font-size: 16px;
	font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}
.un p{
	padding-right: 10px;
}
.deux{
	margin-top: 10px;
	padding: 20px;
	background-color: rgba(128,128,128,0.5);
	border-radius: 0 20px 20px 0;
	height: 500px;
}
.bouton{
	background-color: var(--primaryColor);
	color: white;
	padding: 10px 15px;
	font-size: 14px;
	border-radius: 5px;
	margin: 30px 5px;
	cursor: pointer;
}

/* AVIS */
.temoignages h2{
	font-size: 24px;
	font-weight: bold;
	margin: 20px 0 40px 0;
}
.temoignage_card{
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	grid-auto-rows: auto;
	gap: 15px 20px;
	padding: 20px;
}
.card{
	grid-column: span 2;
	box-shadow: 2px 2px 5px #444;
	padding: 0 15px;
}
.name{
	font-size: 18px;
	font-weight: bold;
	margin-top: 10px;
}
.card p{
	font-size: 14px;
}
.temoignages button{
	background-color: var(--primaryColor);
	color: white;
	font-size: 14px;
	width: 300px;
	height: 40px;
	display: block;
	margin: 40px auto;
	border-radius: 5px;
	cursor: pointer;
}

/* FOOTER */
footer{
	height: 50px;
	background-color: #444;
	color: #ccc;
	font-size: 12px;
	text-align: center;
	padding: 20px 100px;
}
.header-img{
	display: flex;
	width: 100%;
	height: 400px;
	overflow: hidden;
}

#contact { padding-top: 60px; padding-bottom: 100px; }
.contact-card {
  background: linear-gradient(135deg, var(--rose-deep), var(--lilac-deep));
  border-radius: var(--radius-lg);
  padding: 60px 8%;
  text-align: center;
  color: var(--bg);
}
.contact-text { max-width: 460px; margin: 0 auto 32px; color: rgba(27,18,32,0.85); }

.contact-qr {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  background: rgba(255,255,255,0.18);
  padding: 20px 26px;
  border-radius: var(--radius-md);
  margin-bottom: 34px;
}
.contact-qr img { border-radius: 10px; }
.contact-qr p { font-size: 0.8rem; color: rgba(27,18,32,0.8); }

.reseaux {
  display: flex;
  justify-content: center;
  gap: 26px;
  flex-wrap: wrap;
}
.lien-reseau {
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--bg);
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.lien-reseau:hover { transform: translateY(-4px); opacity: 0.75; }

/* =========================================================
   FOOTER & BACK TO TOP
   ========================================================= */
.footer {
  text-align: center;
  padding: 30px;
  color: var(--muted);
  font-size: 0.8rem;
}

.back-to-top {
  position: fixed;
  right: 26px;
  bottom: 26px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: none;
  background: var(--rose-deep);
  color: var(--cream);
  font-size: 1.1rem;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  z-index: 90;
}
.back-to-top.visible { opacity: 1; pointer-events: auto; transform: translateY(0); }
.back-to-top:hover { background: var(--lilac-deep); }


/* RESPONSIVE */
@media screen and (max-width: 900px){
	#toggle-btn{ display: block }
    nav ul{
        opacity: 0;
        flex-direction: column;
        width: 250px;
        padding: 0;
        top: 225px;
        left: calc(50% - 125px);
    }
    .un, .deux{ grid-column: span 2; }
}

@media screen and (min-width: 901px){
    nav ul{ opacity: 1 !important; }
	.contact-container{
		width: 600 px;
	}

}

@media screen and (max-width: 580px){
	.titre { justify-content: space-between; }
    .titre h3{ font-size:  14px; }
    .titre img{ width: 220px; }
    .card{ grid-column: span 3;}	
}

/* page Entrées*/
/* --- Conteneur Principal (Fond sombre) --- */

.indications {
	font-family: "Playfair Display", "TimeS New Roman", serif;
	font-weight: 300;
	font-style: italic;
	color: #19500d;
	font-size: 50px;
}
.menu {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 3rem;
    padding: 3rem;
    background-color: #1a1a1a; /* Fond sombre comme sur le modèle */
    color: #ffffff;
    border-radius: 16px;
    overflow: hidden;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
	max-width: 950px;
	margin: 40px auto;
}
.entrées img{
	margin-top: 0px;
}

/* --- Section Texte (Gauche) --- */
.presentation {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1rem;
	flex-direction: column;
    gap: 12px;
}

.presentation h2 {
    font-size: 28px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    text-transform: lowercase; /* Style moderne tout en minuscules */
    margin: 0;
    color: #9c390b;
	font-weight: 700;
}

.presentation h5{
	font-family: Verdana, Geneva, Tahoma, sans-serif;
	margin: O;
	font-size: 0.75rem ;
	color: #35cf16;
}

.presentation p:first-of-type {
    font-size: 15px;
    line-height: 1.6;
    color: #cccccc; /* Gris clair pour une lecture douce */
    max-width: 400px;
	margin: 0
	;
}
.presentation P:nth-of-type(2)
.presentation P:nth-of-type(3){
	font-size: 14px;
	color: #34495e;
	margin: 0;
	padding-left: 15px;
	border-left: 2px solid #f1b82d;

}


/* --- Section Image Ronde (Droite) --- */
.image-container {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.image-container img {
    width: 320px;
    height: 320px;
    object-fit: cover; /* Recadre l'image proprement */
    border-radius: 50%; /* Rend l'image parfaitement ronde */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    border: 4px solid rgba(255, 255, 255, 0.1); /* Léger contour */
}
.presentation .prix{
	color: #f8b800;
}

/* --- Version Mobile (Responsive) --- */
@media (max-width: 768px) {
    .menu {
        flex-direction: column; /* Aligne verticalement sur petit écran */
        text-align: center;
        padding: 2rem 1.5rem;
    }

    .presentation {
        align-items: center;
    }

    .image-container img {
        width: 240px; /* Réduit la taille du cercle sur mobile */
        height: 240px;
    }
}
.contact-container {
      max-width: 900px;
      margin: 50px auto;
      background:  #b9acac;
      padding: 20px;
      border-radius: 8px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }
    h2 {
      text-align: center;
      color: #333;
    }
    label {
      display: block;
      margin-top: 15px;
      font-weight: bold;
    }
    input, textarea {
      width: 100%;
      padding: 10px;
      margin-top: 5px;
      border: 1px solid #ccc;
      border-radius: 5px;
    }
    button {
      margin-top: 20px;
      width: 100%;
      padding: 12px;
      background: #007BFF;
      color: white;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      font-size: 16px;
    }
    button:hover {
      background: #0056b3;
    }
    .info {
      margin-top: 20px;
      font-size: 14px;
      color: #555;
      text-align: center;
    }