/* =====================================================================
   Brasserie le Rendez-Vous — feuille de style partagée
   Toutes les pages utilisent ce fichier. Modifie ici une seule fois
   pour changer les couleurs, les polices ou la mise en forme partout.
   ===================================================================== */

/* ---- Palette (direction artistique provençale) ---- */
:root {
  --terracotta:    #C45A28;  /* couleur principale, chaleur provençale */
  --terracotta-fonce: #a8481c;
  --olivier:       #6B7A4F;  /* accent secondaire */
  --creme:         #F5EFE6;  /* fond clair principal */
  --creme-fonce:   #ece2d2;
  --lavande:       #5B6B8C;  /* touches, liens */
  --anthracite:    #2B2724;  /* textes */
  --dore:          #D9A441;  /* boutons / accents festifs */
  --gris:          #6f655d;
  --ombre:         0 10px 30px rgba(43, 39, 36, 0.12);
}

/* ---- Base ---- */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Inter', -apple-system, system-ui, sans-serif;
  color: var(--anthracite);
  background: var(--creme);
  line-height: 1.65;
}
h1, h2, h3, h4 { font-family: 'Playfair Display', Georgia, serif; font-weight: 600; line-height: 1.2; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
.conteneur { max-width: 1080px; margin: 0 auto; padding: 0 24px; }
section { padding: 80px 0; }

/* ---- Boutons ---- */
.btn {
  display: inline-block; cursor: pointer; border: none;
  padding: 14px 30px; font-size: 1rem; font-family: inherit; font-weight: 600;
  border-radius: 8px; letter-spacing: 0.3px;
  transition: transform 0.12s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn-primaire { background: var(--terracotta); color: #fff; box-shadow: 0 6px 16px rgba(196,90,40,0.3); }
.btn-primaire:hover { background: var(--terracotta-fonce); }
.btn-dore { background: var(--dore); color: var(--anthracite); }
.btn-dore:hover { background: #c8952f; }
.btn-contour { background: transparent; border: 1.5px solid #fff; color: #fff; }
.btn-contour:hover { background: rgba(255,255,255,0.12); }

/* ---- Navigation (commune à toutes les pages) ---- */
header.site {
  position: sticky; top: 0; z-index: 100;
  background: rgba(245, 239, 230, 0.96);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--creme-fonce);
}
header.site nav {
  max-width: 1080px; margin: 0 auto; padding: 14px 24px;
  display: flex; align-items: center; justify-content: space-between;
}
.logo { font-family: 'Playfair Display', serif; font-size: 1.35rem; color: var(--terracotta); font-weight: 700; }
.logo small { display: block; font-family: 'Inter', sans-serif; font-size: 0.6rem; letter-spacing: 3px; text-transform: uppercase; color: var(--olivier); font-weight: 600; }
.menu-nav { display: flex; align-items: center; gap: 26px; list-style: none; }
.menu-nav a { font-size: 0.95rem; font-weight: 500; transition: color 0.2s; }
.menu-nav a:hover, .menu-nav a.actif { color: var(--terracotta); }
.menu-nav a.actif { font-weight: 700; }
.menu-nav .btn { padding: 9px 20px; font-size: 0.9rem; }
.burger { display: none; background: none; border: none; cursor: pointer; font-size: 1.6rem; color: var(--anthracite); }

@media (max-width: 820px) {
  .burger { display: block; }
  .menu-nav {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; gap: 0; align-items: stretch;
    background: var(--creme); border-bottom: 1px solid var(--creme-fonce);
    box-shadow: var(--ombre);
    max-height: 0; overflow: hidden; transition: max-height 0.3s ease;
  }
  .menu-nav.ouvert { max-height: 420px; }
  .menu-nav a { padding: 14px 24px; border-top: 1px solid var(--creme-fonce); }
  .menu-nav .btn { margin: 12px 24px; text-align: center; }
}

/* ---- Titres de section ---- */
.titre-section { text-align: center; margin-bottom: 50px; }
.titre-section .sur-titre { color: var(--terracotta); font-size: 0.8rem; letter-spacing: 3px; text-transform: uppercase; font-weight: 700; }
.titre-section h2 { font-size: 2.5rem; margin-top: 10px; color: var(--anthracite); }
/* Petit trait vert olive sous les titres (touche discrète de la palette) */
.titre-section h2::after {
  content: ""; display: block; width: 54px; height: 3px; margin: 16px auto 0;
  background: var(--olivier); border-radius: 2px;
}
.titre-section.clair h2, .titre-section.clair .sur-titre { color: #fff; }
.titre-section.clair .sur-titre { color: var(--dore); }
.titre-section.clair h2::after { background: var(--dore); }
.duo .titre-section h2::after { margin-left: 0; } /* aligné à gauche dans les blocs texte+image */

/* ---- Hero (bandeau d'accueil) ---- */
.hero {
  min-height: 82vh; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
  color: #fff; padding: 40px 24px;
  /* La photo s'affiche dès que tu déposes images/facade.jpg.
     En attendant, un dégradé provençal sert de fond. */
  background:
    linear-gradient(rgba(43,39,36,0.52), rgba(43,39,36,0.58)),
    url('../images/terrasse-accueil.webp') center/cover no-repeat,
    linear-gradient(135deg, var(--terracotta), var(--olivier));
}
.hero h1 { font-size: 3.6rem; margin-bottom: 16px; text-shadow: 0 2px 20px rgba(0,0,0,0.3); }
.hero p { font-size: 1.25rem; max-width: 560px; margin-bottom: 34px; font-weight: 300; }
.hero .boutons { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
@media (max-width: 600px) { .hero h1 { font-size: 2.4rem; } .hero p { font-size: 1.05rem; } }

/* ---- Image d'illustration (avec repli dégradé si la photo manque) ---- */
.photo {
  border-radius: 12px; box-shadow: var(--ombre);
  background-size: cover; background-position: center;
  background-color: var(--creme-fonce);
  min-height: 320px;
  background-image: linear-gradient(135deg, rgba(196,90,40,0.15), rgba(107,122,79,0.2));
}
.photo.facade   { background-image: url('../images/facade.jpg'),    linear-gradient(135deg, var(--terracotta), var(--olivier)); }
.photo.terrasse { background-image: url('../images/terrasse.jpg'),  linear-gradient(135deg, var(--olivier), var(--dore)); }
.photo.salle    { background-image: url('../images/salle.jpg'),     linear-gradient(135deg, var(--lavande), var(--terracotta)); }
.photo.bar      { background-image: url('../images/bar.jpg'),       linear-gradient(135deg, var(--anthracite), var(--terracotta)); }
.photo.entrecote{ background-image: url('../images/entrecote.jpg'), linear-gradient(135deg, var(--terracotta), var(--dore)); }
.photo.platdujour{background-image: url('../images/plat-du-jour.jpg'),linear-gradient(135deg, var(--olivier), var(--terracotta)); }
.photo.ambiance { background-image: url('../images/ambiance.jpg'),  linear-gradient(135deg, var(--terracotta), var(--lavande)); }

/* ---- Bloc intro (texte + image) ---- */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.duo p { color: var(--gris); margin-bottom: 16px; }
.duo .titre-section { text-align: left; margin-bottom: 24px; }
@media (max-width: 760px) { .duo { grid-template-columns: 1fr; } .duo .photo { min-height: 240px; } }

/* ---- Les 3 atouts (cartes) ---- */
.atouts { background: var(--creme-fonce); }
.grille-atouts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.carte-atout {
  background: #fff; border-radius: 14px; padding: 34px 28px; text-align: center;
  box-shadow: var(--ombre);
}
.carte-atout .icone { font-size: 2.4rem; margin-bottom: 14px; }
.carte-atout h3 { font-size: 1.3rem; color: var(--terracotta); margin-bottom: 10px; }
.carte-atout p { color: var(--gris); font-size: 0.97rem; }
@media (max-width: 760px) { .grille-atouts { grid-template-columns: 1fr; } }

/* ---- Aperçu carte / menu ---- */
.menu-grille { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 56px; }
.menu-categorie { margin-bottom: 36px; }
.menu-categorie h3 {
  font-size: 1.5rem; color: var(--olivier); margin-bottom: 18px;
  padding-bottom: 8px; border-bottom: 2px solid var(--creme-fonce);
}
.plat { display: flex; justify-content: space-between; gap: 16px; align-items: baseline; padding: 9px 0; }
.plat .nom { font-weight: 600; }
.plat .desc { display: block; font-size: 0.88rem; color: var(--gris); font-weight: 400; margin-top: 3px; max-width: 90%; }
.plat .info { flex: 1; }
.plat .points { flex: 1; border-bottom: 1px dotted #c9bca8; transform: translateY(-4px); }
.plat .prix { color: var(--terracotta); font-weight: 700; white-space: nowrap; }
@media (max-width: 760px) { .menu-grille { grid-template-columns: 1fr; gap: 0; } }

/* ---- Galerie « Nos plats » ---- */
.galerie { background: var(--creme-fonce); }
.galerie-photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.plat-photo { background: #fff; border-radius: 12px; overflow: hidden; box-shadow: var(--ombre); display: flex; flex-direction: column; }
.plat-photo a { display: block; overflow: hidden; }
.plat-photo img { width: 100%; height: 220px; object-fit: cover; display: block; transition: transform 0.35s ease; }
.plat-photo a:hover img { transform: scale(1.07); }
.plat-photo figcaption { padding: 14px 16px; display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.plat-photo .nom { font-family: 'Playfair Display', serif; font-weight: 600; font-size: 1.05rem; }
.plat-photo .prix { color: var(--terracotta); font-weight: 700; white-space: nowrap; }
.plat-photo .prix.note { color: var(--olivier); font-style: italic; font-weight: 600; font-size: 0.85rem; }
@media (max-width: 900px) { .galerie-photos { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .galerie-photos { grid-template-columns: 1fr; } }

/* ---- Bandeau horaires (accueil) ---- */
.bandeau-horaires {
  background: linear-gradient(90deg, var(--terracotta), var(--dore));
  color: #fff; text-align: center; padding: 15px 24px;
  font-size: 1.05rem; box-shadow: var(--ombre);
}
.bandeau-horaires strong { font-family: 'Playfair Display', serif; font-weight: 700; font-size: 1.2rem; }
.bandeau-horaires .sep { opacity: 0.55; margin: 0 10px; }
.bandeau-horaires .dim {
  display: inline-block; background: rgba(43,39,36,0.18);
  padding: 3px 14px; border-radius: 20px; margin-left: 10px; font-size: 0.95rem;
}
@media (max-width: 640px) {
  .bandeau-horaires .sep { display: none; }
  .bandeau-horaires strong { display: block; margin: 2px 0; }
  .bandeau-horaires .dim { display: block; width: fit-content; margin: 8px auto 0; }
}

/* ---- Bandeau réservation ---- */
.bandeau-resa {
  text-align: center; color: #fff;
  background:
    linear-gradient(rgba(43,39,36,0.62), rgba(43,39,36,0.62)),
    url('../images/ambiance.jpg') center/cover no-repeat,
    linear-gradient(135deg, var(--terracotta), var(--olivier));
}
.bandeau-resa h2 { font-size: 2.4rem; margin-bottom: 14px; }
.bandeau-resa p { max-width: 560px; margin: 0 auto 28px; font-weight: 300; font-size: 1.1rem; }

/* ---- Formulaire de réservation ---- */
.bloc-resa { max-width: 720px; margin: 0 auto; }
.form-resa { display: grid; gap: 20px; grid-template-columns: 1fr 1fr; }
.form-resa .pleine { grid-column: 1 / -1; }
.form-resa label { display: block; font-size: 0.85rem; font-weight: 600; margin-bottom: 7px; color: var(--anthracite); }
.form-resa input, .form-resa select, .form-resa textarea {
  width: 100%; padding: 13px 14px; font-size: 1rem; font-family: inherit;
  border: 1.5px solid var(--creme-fonce); border-radius: 8px;
  background: #fff; color: var(--anthracite); transition: border-color 0.2s;
}
.form-resa input:focus, .form-resa select:focus, .form-resa textarea:focus {
  outline: none; border-color: var(--terracotta);
}
.form-resa textarea { resize: vertical; min-height: 90px; }

/* Créneaux horaires (boutons radio stylés) */
.creneaux { display: flex; flex-wrap: wrap; gap: 10px; }
.creneaux input { position: absolute; opacity: 0; width: 0; height: 0; }
.creneaux label {
  margin: 0; cursor: pointer; padding: 10px 16px; border-radius: 8px;
  border: 1.5px solid var(--creme-fonce); background: #fff;
  font-weight: 600; font-size: 0.95rem; transition: all 0.15s;
}
.creneaux input:checked + label { background: var(--terracotta); color: #fff; border-color: var(--terracotta); }
.creneaux label:hover { border-color: var(--terracotta); }
.service-titre { font-weight: 700; color: var(--olivier); margin: 6px 0 4px; font-size: 0.9rem; }

.confirmation {
  grid-column: 1 / -1; text-align: center; padding: 18px;
  background: #eef3e6; border: 1.5px solid var(--olivier); border-radius: 10px;
  color: var(--anthracite); display: none;
}
.confirmation.visible { display: block; }

/* ---- Infos pratiques ---- */
.infos-grille { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.carte-info { background: #fff; border-radius: 14px; padding: 30px; box-shadow: var(--ombre); }
.carte-info h3 { color: var(--terracotta); margin-bottom: 10px; font-size: 1.25rem; }
.carte-info p { color: var(--gris); }
.a-confirmer { color: var(--terracotta); font-style: italic; font-size: 0.85rem; }
@media (max-width: 760px) { .infos-grille { grid-template-columns: 1fr; } }

.services-liste { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 10px; }
.service-tag {
  background: var(--creme-fonce); color: var(--anthracite);
  padding: 8px 16px; border-radius: 20px; font-size: 0.9rem; font-weight: 500;
}
.carte-google { width: 100%; height: 360px; border: 0; border-radius: 14px; box-shadow: var(--ombre); }

/* ---- Pied de page ---- */
footer.site { background: var(--anthracite); color: var(--creme); padding: 50px 0 24px; }
footer.site .conteneur { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 32px; }
footer.site h4 { color: var(--dore); margin-bottom: 14px; font-size: 1.1rem; }
footer.site p, footer.site a { color: #d8cfc2; font-size: 0.93rem; line-height: 1.9; }
footer.site a:hover { color: #fff; }
footer.site .bas { grid-column: 1/-1; border-top: 1px solid #44403b; margin-top: 24px; padding-top: 20px; text-align: center; font-size: 0.82rem; color: #9b9088; }
@media (max-width: 760px) { footer.site .conteneur { grid-template-columns: 1fr; } }

/* ---- Pages légales (texte simple) ---- */
.page-texte { max-width: 760px; margin: 0 auto; }
.page-texte h1 { font-size: 2.4rem; color: var(--terracotta); margin-bottom: 8px; }
.page-texte h2 { font-size: 1.4rem; color: var(--olivier); margin: 28px 0 10px; }
.page-texte p, .page-texte li { color: var(--gris); margin-bottom: 12px; }
.page-texte ul { padding-left: 22px; }
.encart-todo { background: #fdf3e3; border-left: 4px solid var(--dore); padding: 14px 18px; border-radius: 6px; margin: 16px 0; color: var(--anthracite); }