/* =========================
   THEME — Restaurant (Provençal chic)
   Compatible Bootstrap 5
========================= */

:root{
  /* Palette */
  --bg: #fbfaf7;
  --surface: rgba(255,255,255,.78);
  --text: #1b1a17;
  --muted: rgba(27,26,23,.68);

  --brand: #b98a3b;      /* ocre/doré */
  --brand-hover: #a97d33;
  --dark: #1b1a17;

  /* UI */
  --radius: 18px;
  --radius-sm: 14px;

  --border: rgba(27,26,23,.12);
  --shadow-sm: 0 12px 28px rgba(0,0,0,.10);
  --shadow-md: 0 26px 70px rgba(0,0,0,.16);

  /* Layout */
  --section-pad: 5.5rem;
}

/* =========================
   Base
========================= */
html{ scroll-behavior: smooth; }

body{
  background: var(--bg);
  color: var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  text-rendering: optimizeLegibility;
}

img{ max-width: 100%; height: auto; display: block; }

/* Typo "éditoriale" */
h1,h2,h3,h4,h5{
  font-family: ui-serif, Georgia, "Times New Roman", serif;
  letter-spacing: -0.02em;
}
p{ line-height: 1.65; }

/* Helpers */
.section-pad{ padding: var(--section-pad) 0; }
@media (max-width: 991.98px){
  :root{ --section-pad: 4rem; }
}

/* Texte blanc utilitaire (Bootstrap-like mais plus fin) */
.text-white-75{ color: rgba(255,255,255,.82) !important; }
.text-white-50{ color: rgba(255,255,255,.56) !important; }
.text-muted{ color: var(--muted) !important; }

/* =========================
   HERO
========================= */
header.hero{
  min-height: 92vh;
  position: relative;
  display: flex;
  background: center / cover no-repeat url("../images/hero.jpg");
}

/* Overlay premium (évite le “gris plat”) */
header.hero::before{
  height: 100vh;
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.5)),
    url("../images/photo-plat.jpg") center / cover no-repeat;
}


header.hero > .container{
  position: relative;
  z-index: 1;
}

/* Kicker au-dessus du H1 */
header.hero p.text-white-50{
  letter-spacing: .16em;
  text-transform: uppercase;
  font-size: .82rem;
}

/* =========================
   Navbar (au-dessus du hero)
========================= */
.navbar .navbar-brand{
  letter-spacing: .10em;
  text-transform: uppercase;
  font-size: .95rem;
}

.navbar .btn{ border-radius: 999px; }

/* =========================
   Buttons (premium)
========================= */
.btn{
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: .02em;
}

.btn-primary{
  background: var(--brand);
  border-color: var(--brand);
  color: #111;
}
.btn-primary:hover,
.btn-primary:focus{
  background: var(--brand-hover);
  border-color: var(--brand-hover);
  color: #111;
}

.btn-dark{
  background: var(--dark);
  border-color: var(--dark);
}

.btn-outline-light{
  border-color: rgba(255,255,255,.78);
  color: #fff;
}
.btn-outline-light:hover{
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.92);
  color: #fff;
}

.btn-outline-dark{
  border-color: rgba(27,26,23,.55);
}
.btn-outline-dark:hover{
  background: rgba(27,26,23,.06);
}

/* =========================
   Cards / Surfaces
========================= */
.card{
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: none;
}

.card:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
  transition: transform .18s ease, box-shadow .18s ease;
}

.rounded-4{ border-radius: var(--radius) !important; }

/* “Glass” card dans le hero */
.hero-glass{
  background: rgba(255,255,255,.10) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  backdrop-filter: blur(10px);
  box-shadow: none;
}

/* Blocs sombres */
.bg-dark{ background: var(--dark) !important; }

/* =========================
   Images / ratios / galerie
========================= */
.ratio-hero{
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

/* Bootstrap 5.3 => object-fit utilities OK, au cas où */
.object-fit-cover{ object-fit: cover; }

/* Galerie : petit effet premium */
#galerie .ratio{
  box-shadow: 0 10px 24px rgba(0,0,0,.10);
  transition: transform .18s ease, box-shadow .18s ease;
}
#galerie .ratio:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 44px rgba(0,0,0,.14);
}

/* =========================
   Sections (petit raffinement)
========================= */
section.bg-light{
  background: rgba(255,255,255,.55) !important;
}

/* =========================
   Footer / Modal
========================= */
footer{
  background: transparent;
}

footer a{
  text-decoration: none;
}
footer a:hover{
  text-decoration: underline;
}

.modal-content{
  border-radius: var(--radius);
  border: 1px solid var(--border);
}

.modal-header, .modal-footer{
  border-color: rgba(27,26,23,.08);
}

/* =========================
   Responsive fine-tuning
========================= */
@media (max-width: 575.98px){
  header.hero{ min-height: 84vh; }
  header.hero h1{ font-size: calc(1.6rem + 2.4vw); }
}

/* NAVBAR CUSTOM */

.navbar-custom{
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(0,0,0,.10);
}

.navbar-custom .navbar-brand{
  color:#111 !important;
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.navbar-custom .btn{
  border-radius: 999px;
  font-weight: 700;
}

.navbar-custom .btn-outline-light{
  color: #000 !important;
  border-color: rgba(0,0,0,.6) !important;
}

.navbar-custom .btn-outline-light:hover{
  background: rgba(0,0,0,.05);
  color: #000 !important;
}

.navbar-custom .navbar-toggler{
  border-color: rgba(0,0,0,.4);
}

.navbar-custom .navbar-toggler-icon{
  filter: invert(1); /* rend l’icône noire */
}
/* FIX: la navbar doit être au-dessus de l'overlay du hero */
.navbar-custom{
  z-index: 1000;      /* supérieur au ::before */
}

/* FIX: l'overlay reste derrière le contenu */
header.hero::before{
  z-index: 0;
}

header.hero{
  position: relative;
}

header.hero > .container{
  position: relative;
  z-index: 1;
}