/* ===== GLOBAL ===== */
body {
  font-family: 'Montserrat', sans-serif;
  margin:0;
  padding:0;
  background:#fdf6f0;
  color:#333;
  scroll-behavior: smooth;
  overflow-x: hidden;
}

/* ===== HEADER ===== */
header {
  background:#a4231e;
  color:white;
  display:flex;
  justify-content:center;
  align-items:center;
  padding:2rem 1rem;
  position:relative;
  overflow:hidden;
}
.header-content {
  text-align:center;
  z-index:2;
  max-width:700px;
  position:relative;
  color:white;
  text-shadow:0 0 10px rgba(0,0,0,0.6);
}
header h1 {
  font-family: 'Playfair Display', serif;
  font-size:2.5rem;
  margin-bottom:0.5rem;
}
header p {
  font-size:1.2rem;
  margin-top:0;
}
.header-image-left,
.header-image-center,
.header-image-right {
  position:absolute;
  top:0;
  height:100%;
  width:33.333%;
  object-fit:cover;
  z-index:1;
}
.header-image-left { left:0; object-position: 62% center; }
.header-image-center { left:33.333%; transform: scale(1.12); object-position:center; }
.header-image-right { right:0; }

/* ===== NAVIGATION ===== */
nav.topnav {
  background:#fff;
  position: sticky;
  top:0;
  z-index:1000;
  box-shadow:0 2px 5px rgba(0,0,0,0.1);
  transition: transform 0.4s ease, opacity 0.4s ease;
}

nav.topnav.hidden {
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
}
nav.topnav ul {
  display:flex;
  justify-content:center;
  list-style:none;
  margin:0;
  padding:0.5rem;
  flex-wrap: wrap;

}
nav.topnav li { margin:0 1.2rem; }
nav.topnav a {
  text-decoration:none;
  color:#a4231e;
  font-weight:600;
}
nav.topnav a:hover { text-decoration:underline; }

/* ===== SIDEBAR ===== */
.sidebar {
  position: fixed;
  left: 0;
  top: 0;
  width: 180px;
  height: 100%;
  background: rgba(164, 35, 30, 0.75);
  backdrop-filter: blur(8px);
  color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 6rem;
  z-index: 999;

  transition: transform 0.4s ease;
}

/* Sidebar cachée */
.sidebar.hidden {
  transform: translateX(-100%);
}

/* Sidebar ouverte manuellement */
.sidebar.active {
  transform: translateX(0);
}

.sidebar a {
  color: white;
  text-decoration: none;
  font-weight: 600;
  margin: 1rem 0;
  transition: all 0.3s ease;
}

.sidebar a:hover {
  transform: scale(1.1);
  color: #ffeaea;
}


/* ===== BOUTON MENU ===== */
.burger {
  display: none;
  position: fixed;
  top: 1rem;
  left: 1rem;
  background: #a4231e;
  color: white;
  font-size: 1.8rem;
  border: none;
  border-radius: 6px;
  padding: 0.5rem 0.8rem;
  z-index: 1001;
  cursor: pointer;

  transition: opacity 0.4s ease, transform 0.4s ease;
}

/* Bouton visible quand le menu est caché */
.burger.visible {
  display: block;
}
/* ===== CONTENU ===== */
main {
  margin-left:180px;
  transition: margin-left 0.3s ease;
}
section {
  max-width:900px;
  margin:2rem auto;
  padding:2rem;
  background:white;
  border-radius:12px;
  box-shadow:0 4px 12px rgba(0,0,0,0.1);
}
h2 {
  font-family: 'Playfair Display', serif;
  color:#a4231e;
  margin-bottom:1rem;
  font-size:1.8rem;
}

/* ===== DISTINCT ===== */
.distinct-columns {
  display:flex;
  justify-content:center;
  gap:20px;
  margin-top:20px;
  flex-wrap:wrap;
}
.distinct-box {
  flex:1;
  min-width:280px;
  max-width:420px;
  background:#fff;
  border-radius:12px;
  padding:20px;
  box-shadow:0 4px 12px rgba(0,0,0,0.1);
  text-align:center;
}
.distinct-box h3 {
  color:#a4231e;
  font-size:1.3rem;
  margin-bottom:10px;
  font-family: 'Playfair Display', serif;
}
.distinct-box p {
  font-size:1rem;
  line-height:1.6;
}

/* ===== GALERIE ===== */
.gallery {
  display:flex;
  flex-wrap:wrap;
  gap:1rem;
  justify-content:center;
}
.gallery figure {
  width:200px;
  margin:0;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
}
.gallery img {
  width:250px;
  height:150px;
  object-fit:cover;
  border-radius:10px;
  box-shadow:0 4px 10px rgba(0,0,0,0.1);
}
.gallery figcaption {
  font-size:0.8rem;
  color:#333;
  margin-top:5px;
}

/* ===== FORMULAIRE ===== */
form {
  display:flex;
  flex-direction:column;
  gap:1rem;
}
input, textarea {
  padding:0.8rem;
  border:1px solid #ccc;
  border-radius:6px;
  font-size:1rem;
  width:100%;
  box-sizing:border-box;
}
button {
  padding:0.8rem;
  background:#a4231e;
  color:white;
  font-weight:600;
  border:none;
  border-radius:6px;
  cursor:pointer;
  font-size:1rem;
}
button:hover { background:#8b1b1a; }

/* ===== FOOTER ===== */
footer {
  background:#a4231e;
  color:white;
  text-align:center;
  padding:1.5rem;
  margin-top:2rem;
}

/* ===== BOUTON OFFRE ===== */
.offer-button {
  display: block;
  margin: 1.5rem auto;
  padding: 1rem 1.4rem;
  background: #333333;
  color: white;
  font-weight: 600;
  border-radius: 8px;
  text-align: center;
  text-decoration: none;
  font-size: 1.1rem;
  width: 90%;
  max-width: 420px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
  transition: background 0.3s ease, transform 0.3s ease;
}

.offer-button:hover {
  background: #555555;
  transform: scale(1.03);
}

.offer-button:hover { background:#8b1b1a; }

/* ===== À PROPOS PHOTO ===== */
.about-flex {
  display:flex;
  align-items:flex-start;
  gap:20px;
  flex-wrap:wrap;
}
.about-flex .about-text { flex:1; }
.about-photo {
  max-width:300px;
  border-radius:10px;
  object-fit:cover;
  display:block;
}

/* ===== RESPONSIVE ===== */
@media(max-width:900px) {
  main {
    margin-left: 0;
  }

  nav.topnav {
    display: none;
  }
}
@media(max-width:800px) {
  .distinct-columns { flex-direction: column; align-items:center; }
  .about-flex { flex-direction: column-reverse; text-align:center; }
  .about-photo { max-width:100%; margin-bottom:1rem; }
}

/* ===== LIENS ET NAVIGATION MULTI-PAGES ===== */
nav.topnav a.active,
.sidebar a.active {
  font-weight: 700;
}

/* ===== ESPACEMENT DES TITRES ===== */
h3 {
  font-family: 'Playfair Display', serif;
  color: #a4231e;
}

/* ===== FORMULAIRE DE DEMANDE D'OFFRE ===== */
form input[type="date"] {
  font-family: 'Montserrat', sans-serif;
}

/* ===== PETITS ÉCRANS ===== */
@media(max-width:900px) {
  .topnav ul {
    display: none;
  }
}

/* ===== AUDIOS ===== */

.audio-section {
  text-align: center;
}

.audio-players {
  display: flex;
  flex-direction: row;
  gap: 2rem;
  justify-content: center;
  align-items: stretch;
  flex-wrap: nowrap;
  max-width: 900px;
  margin: 2rem auto;
}

.audio-player {
  flex: 1 1 0;
  width: 50%;
  min-width: 0;
  padding: 1.2rem;
  background: #f5f5f5;
  border-radius: 8px;
  box-shadow: 0 3px 8px rgba(0,0,0,0.12);
  box-sizing: border-box;
}

.audio-player h3 {
  margin-top: 0;
  margin-bottom: 1rem;
}

.audio-player audio {
  width: 100%;
}

/* ===== MENU MOBILE ===== */

@media (max-width: 900px) {

/* Le bouton ☰ est toujours disponible sur téléphone */
.burger {
display: block;
}

/* Sidebar cachée par défaut */
.sidebar {
transform: translateX(-100%);
width: 220px;
}

/* Quand on appuie sur ☰ */
.sidebar.active {
transform: translateX(0);
}

/* Si le JS lui ajoute hidden, elle reste cachée */
.sidebar.hidden {
transform: translateX(-100%);
}

/* Active doit avoir priorité pour permettre l'ouverture */
.sidebar.hidden.active {
transform: translateX(0);
}

/* Topbar absente sur téléphone */
nav.topnav {
display: none;
}

main {
margin-left: 0;
}
}

.audio-player h3 {
  color: #222;
}