/* =====================================================================
   Monette — « Riviera rétro / bistrot provençal au feu de bois »
   Palette tirée du lieu réel : rouge tomate du logo, velours olive de la
   banquette, rideau ocre, papier peint rose à éventails, murs crème.
   Signature : l'ÉVENTAIL art déco (papier peint de la salle) — motif de
   fond, bords festonnés en arcs, kicker SVG, ruban du pied de page.
   ===================================================================== */

:root {
  --mo-tomate: #d32d1c;
  --mo-tomate-fonce: #a92213;
  --mo-olive: #4b5a2a;
  --mo-olive-fonce: #2d3818;
  --mo-ocre: #c98b2b;
  --mo-rose: #eaa699;
  --mo-blush: #f5ddd4;
  --mo-creme: #f7f0e3;
  --mo-platre: #fcf8f1;
  --mo-encre: #2a1d16;
  --mo-encre-2: #5b4a3f;
  --mo-ressort: cubic-bezier(0.34, 1.56, 0.64, 1);
  --mo-doux: cubic-bezier(0.16, 1, 0.3, 1);

  --bs-primary: var(--mo-tomate);
  --bs-primary-rgb: 211, 45, 28;
  --bs-secondary: var(--mo-olive);
  --bs-secondary-rgb: 75, 90, 42;
  --bs-body-bg: var(--mo-creme);
  --bs-body-color: var(--mo-encre);
  --bs-body-color-rgb: 42, 29, 22;
  --bs-secondary-color: var(--mo-encre-2);
  --bs-body-font-family: 'Schibsted Grotesk', 'Helvetica Neue', sans-serif;
  --bs-body-font-size: 1.05rem;
  --bs-body-line-height: 1.65;
  --bs-link-color: var(--mo-tomate-fonce);
  --bs-link-color-rgb: 169, 34, 19;
  --bs-link-hover-color: var(--mo-tomate);
  --bs-border-color: rgba(42, 29, 22, 0.14);
  --bs-focus-ring-color: rgba(201, 139, 43, 0.55);

  /* Motif « papier peint à éventails » réutilisable */
  --mo-eventail: radial-gradient(circle at 50% 100%, transparent 0 7px, currentColor 7px 9px, transparent 9px 15px, currentColor 15px 17px, transparent 17px 23px, currentColor 23px 25px, transparent 25px);
}

/* ---------- Base & atmosphère ---------- */
html { scroll-behavior: smooth; }
body {
  background-color: var(--mo-creme);
  background-image:
    radial-gradient(1200px 600px at 85% -10%, rgba(234, 166, 153, 0.35), transparent 60%),
    radial-gradient(900px 500px at -10% 30%, rgba(201, 139, 43, 0.12), transparent 60%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body::after {
  /* grain de plâtre */
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2000;
  opacity: 0.07;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
h1, h2, h3, .h1, .h2, .h3, .display-6 {
  font-family: 'Gloock', Georgia, serif;
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.04;
  color: var(--mo-encre);
}
h6 {
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
a, button, .btn, [role='button'] { cursor: pointer; }
::selection { background: var(--mo-tomate); color: var(--mo-platre); }
:focus-visible { outline: 3px solid var(--mo-ocre); outline-offset: 3px; border-radius: 6px; }
img { display: block; }

/* ---------- Boutons ---------- */
.btn {
  font-weight: 600;
  letter-spacing: 0.04em;
  transition: transform 0.35s var(--mo-ressort), box-shadow 0.3s ease, background-color 0.25s ease, color 0.25s ease;
}
.btn-lg { padding-top: 0.9rem; padding-bottom: 0.9rem; font-size: 1.02rem; }
.btn-primary {
  --bs-btn-bg: var(--mo-tomate);
  --bs-btn-border-color: var(--mo-tomate);
  --bs-btn-hover-bg: var(--mo-tomate-fonce);
  --bs-btn-hover-border-color: var(--mo-tomate-fonce);
  --bs-btn-active-bg: #8c1b0f;
  --bs-btn-active-border-color: #8c1b0f;
  --bs-btn-focus-shadow-rgb: 211, 45, 28;
  box-shadow: 0 10px 24px -10px rgba(169, 34, 19, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.btn-outline-dark {
  --bs-btn-color: var(--mo-encre);
  --bs-btn-border-color: var(--mo-encre);
  --bs-btn-hover-bg: var(--mo-encre);
  --bs-btn-hover-border-color: var(--mo-encre);
  --bs-btn-hover-color: var(--mo-platre);
  border-width: 1.5px;
}
.btn-light {
  --bs-btn-bg: var(--mo-platre);
  --bs-btn-border-color: var(--mo-platre);
  --bs-btn-color: var(--mo-olive-fonce);
  --bs-btn-hover-bg: var(--mo-ocre);
  --bs-btn-hover-border-color: var(--mo-ocre);
  --bs-btn-hover-color: var(--mo-encre);
}
.btn:hover { transform: translateY(-3px); }
.btn:active { transform: translateY(0) scale(0.98); }

/* ---------- Navigation « enseigne » scindée ---------- */
#enseigne {
  transition: background-color 0.4s ease, box-shadow 0.4s ease, backdrop-filter 0.4s ease;
}
#enseigne[data-scrolled='1'] {
  background-color: rgba(252, 248, 241, 0.82);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  backdrop-filter: saturate(1.4) blur(14px);
  box-shadow: 0 1px 0 rgba(42, 29, 22, 0.08), 0 14px 30px -24px rgba(42, 29, 22, 0.5);
}
#enseigne-logo img { width: clamp(130px, 13vw, 180px); height: auto; transition: width 0.4s var(--mo-doux); }
#enseigne[data-scrolled='1'] #enseigne-logo img { width: clamp(120px, 11vw, 150px); }
#enseigne-liens .nav-link,
#enseigne-tel {
  position: relative;
  color: var(--mo-encre);
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
#enseigne-liens .nav-link::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 2px;
  height: 2px;
  background: var(--mo-tomate);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.45s var(--mo-doux);
}
#enseigne-liens .nav-link:hover::after { transform: scaleX(1); }
#enseigne-tel { letter-spacing: 0.08em; }
#enseigne-tel:hover { color: var(--mo-tomate); }
#enseigne .navbar-toggler { color: var(--mo-encre); }
#enseigne .offcanvas { background: var(--mo-platre); }
#enseigne .offcanvas .nav-link { color: var(--mo-encre); font-family: 'Gloock', serif; }

/* ---------- HERO éditorial centré ---------- */
#accueil { padding-top: clamp(7.5rem, 14vh, 10rem); }
#accueil-kicker {
  font-family: 'Schibsted Grotesk', sans-serif;
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--mo-tomate);
  padding-left: 0.42em;
}
#accueil-titre {
  max-width: 15ch;
  font-size: clamp(2.7rem, 7.6vw, 7.8rem);
  line-height: 0.96;
  letter-spacing: -0.025em;
}
#accueil-horaires {
  padding: 0.55rem 1.2rem;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--mo-olive-fonce);
  background: rgba(75, 90, 42, 0.1);
  border: 1px solid rgba(75, 90, 42, 0.25);
}
#accueil-horaires i { color: var(--mo-olive); }
#accueil-salle {
  height: clamp(420px, 78vh, 820px);
  border-radius: 0 0 2.4rem 2.4rem;
  /* bord supérieur festonné en éventails */
  -webkit-mask:
    radial-gradient(30px at 50% 30px, #000 98%, transparent) 50% 0 / 60px 60px repeat-x,
    linear-gradient(#000 0 0) 0 30px / 100% calc(100% - 30px) no-repeat;
  mask:
    radial-gradient(30px at 50% 30px, #000 98%, transparent) 50% 0 / 60px 60px repeat-x,
    linear-gradient(#000 0 0) 0 30px / 100% calc(100% - 30px) no-repeat;
  box-shadow: 0 40px 80px -40px rgba(42, 29, 22, 0.6);
}
#accueil-salle::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(42, 29, 22, 0) 55%, rgba(42, 29, 22, 0.35));
  pointer-events: none;
}

/* ---------- MONETTE RESTAURANT ---------- */
#maison { padding: clamp(5rem, 12vw, 9rem) 0; }
#maison-titre {
  font-size: clamp(2.2rem, 4.6vw, 4rem);
  color: var(--mo-tomate);
}
#maison-titre::after {
  content: '';
  display: block;
  width: 96px;
  height: 18px;
  margin-top: 1.1rem;
  color: var(--mo-ocre);
  background: var(--mo-eventail) 0 0 / 32px 16px repeat-x;
}
#maison-texte {
  font-size: clamp(1.18rem, 1.7vw, 1.55rem);
  line-height: 1.55;
  font-weight: 500;
  color: var(--mo-encre);
  margin: 0;
}
#maison-photo {
  padding: 0.9rem;
  background: var(--mo-platre);
  border-radius: 999px 999px 1.4rem 1.4rem;
  box-shadow: 0 30px 60px -30px rgba(42, 29, 22, 0.55), 0 0 0 1px rgba(42, 29, 22, 0.06);
  transform: rotate(-2.5deg);
}
#maison-photo img {
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 999px 999px 0.8rem 0.8rem;
}
#maison-photo::after {
  /* pastille ocre en éventail, posée en chevauchement */
  content: '';
  position: absolute;
  right: -1.6rem;
  bottom: 2.2rem;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  color: rgba(42, 29, 22, 0.55);
  background: var(--mo-eventail) 0 0 / 26px 13px, var(--mo-ocre);
  box-shadow: 0 16px 30px -12px rgba(42, 29, 22, 0.5);
  transform: rotate(8deg);
}

/* ---------- NOTRE CARTE — section inset olive ---------- */
#notre-carte-cadre {
  padding: clamp(4rem, 9vw, 7.5rem) 0;
  border-radius: 2.4rem;
  color: var(--mo-platre);
  background:
    radial-gradient(700px 400px at 100% 0%, rgba(201, 139, 43, 0.28), transparent 65%),
    linear-gradient(160deg, var(--mo-olive) 0%, var(--mo-olive-fonce) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 40px 80px -50px rgba(45, 56, 24, 0.9);
}
#notre-carte-cadre::before {
  /* papier peint à éventails en filigrane */
  content: '';
  position: absolute;
  inset: 0;
  color: rgba(252, 248, 241, 0.06);
  background: var(--mo-eventail) 0 0 / 52px 26px, var(--mo-eventail) 26px 13px / 52px 26px;
  -webkit-mask: linear-gradient(90deg, #000, transparent 70%);
  mask: linear-gradient(90deg, #000, transparent 70%);
}
#notre-carte-fan { color: var(--mo-ocre); }
#notre-carte-titre {
  color: var(--mo-platre);
  font-size: clamp(3rem, 8vw, 6.6rem);
  line-height: 0.92;
}
#notre-carte-texte {
  max-width: 30ch;
  font-size: clamp(1.15rem, 1.6vw, 1.4rem);
  color: rgba(252, 248, 241, 0.86);
}
#notre-carte-photo {
  max-width: 470px;
  border-radius: 50%;
  padding: 14px;
  background: conic-gradient(from 0deg, var(--mo-ocre), var(--mo-rose), var(--mo-ocre), var(--mo-rose), var(--mo-ocre));
  box-shadow: 0 40px 70px -30px rgba(0, 0, 0, 0.6);
  transition: transform 0.9s var(--mo-doux);
}
#notre-carte-photo img { aspect-ratio: 1; object-fit: cover; border-radius: 50%; border: 6px solid var(--mo-olive-fonce); }
#notre-carte-photo:hover { transform: rotate(6deg) scale(1.02); }

/* ---------- RÉSERVER UNE TABLE — bande tomate ---------- */
#reserver {
  margin-top: clamp(4rem, 9vw, 7rem);
  padding: clamp(4.5rem, 9vw, 7.5rem) 0;
  color: var(--mo-platre);
  background: var(--mo-tomate);
}
#reserver::before {
  content: '';
  position: absolute;
  inset: 0;
  color: rgba(252, 248, 241, 0.13);
  background: var(--mo-eventail) 0 0 / 64px 32px, var(--mo-eventail) 32px 16px / 64px 32px;
}
#reserver::after {
  /* feston supérieur crème */
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: -1px;
  height: 28px;
  background: radial-gradient(28px at 50% 0, var(--mo-creme) 98%, transparent) 50% 0 / 56px 28px repeat-x;
}
#reserver-photo {
  border-radius: 1.6rem;
  overflow: hidden;
  border: 10px solid var(--mo-platre);
  transform: rotate(3deg);
  box-shadow: 0 34px 60px -28px rgba(60, 10, 4, 0.75);
  transition: transform 0.8s var(--mo-ressort);
}
#reserver-photo:hover { transform: rotate(0deg) scale(1.02); }
#reserver-titre {
  color: var(--mo-platre);
  font-size: clamp(2.6rem, 6.4vw, 5.6rem);
  line-height: 0.95;
}
#reserver-tel {
  font-family: 'Gloock', serif;
  font-size: clamp(2rem, 5.2vw, 4.4rem);
  line-height: 1;
  color: var(--mo-platre);
  padding: 0.35em 0.6em;
  border: 2px solid rgba(252, 248, 241, 0.55);
  border-radius: 999px;
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.45s var(--mo-ressort);
}
#reserver-tel i { font-size: 0.6em; }
#reserver-tel:hover { background: var(--mo-platre); color: var(--mo-tomate-fonce); transform: translateY(-4px); }

/* ---------- En-tête des pages intérieures ---------- */
#page-tete { padding: clamp(8.5rem, 16vh, 11rem) 0 clamp(2.5rem, 6vw, 4rem); }
#page-tete-fan { color: var(--mo-tomate); }
#page-tete-titre {
  font-size: clamp(4rem, 15vw, 12rem);
  line-height: 0.85;
  letter-spacing: -0.04em;
  color: var(--mo-tomate);
}

/* ---------- CARTE : planches & photos ---------- */
#planches figure {
  border-radius: 1.4rem;
  overflow: hidden;
  background: var(--mo-platre);
  box-shadow: 0 26px 50px -30px rgba(42, 29, 22, 0.6), 0 0 0 1px rgba(42, 29, 22, 0.06);
}
#planches-photos img { aspect-ratio: 1; object-fit: cover; transition: transform 1.1s var(--mo-doux); }
#planches-photos > div:first-child img { aspect-ratio: 1 / 1; }
#planches-photos > div:nth-child(2) figure { margin-top: 3rem !important; border-radius: 999px 999px 1.4rem 1.4rem; }
#planches-photos > div:nth-child(3) figure { border-radius: 1.4rem 1.4rem 999px 999px; }
#planches-photos figure:hover img { transform: scale(1.06); }
@media (min-width: 992px) {
  #planches-photos > div:nth-child(2) img,
  #planches-photos > div:nth-child(3) img { aspect-ratio: 1 / 2; }
}

/* ---------- CONTACT ---------- */
#visite { padding-top: clamp(8rem, 15vh, 10rem); }
#visite-carton {
  position: relative;
  padding: clamp(2rem, 4vw, 3rem);
  border-radius: 2rem;
  background: var(--mo-platre);
  box-shadow: 0 30px 60px -36px rgba(42, 29, 22, 0.55), 0 0 0 1px rgba(42, 29, 22, 0.06);
  overflow: hidden;
}
#visite-carton::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 14px;
  color: var(--mo-tomate);
  background: radial-gradient(14px at 50% 0, currentColor 98%, transparent) 50% 0 / 28px 14px repeat-x;
}
#visite-fan { color: var(--mo-ocre); }
#visite-titre { font-size: clamp(2.6rem, 5vw, 4.4rem); color: var(--mo-tomate); }
#visite-carton h6 { color: var(--mo-olive); }
#visite-carton address { font-size: 1.2rem; font-style: normal; }
#visite-carton .bi-p-square-fill { color: var(--mo-olive); font-size: 1.3rem; }
#visite-plan {
  --bs-aspect-ratio: 100%;
  min-height: 420px;
  border-radius: 2rem;
  overflow: hidden;
  border: 10px solid var(--mo-platre);
  box-shadow: 0 30px 60px -36px rgba(42, 29, 22, 0.55);
}
#visite-plan iframe { border: 0; filter: sepia(0.25) saturate(0.9); }
@media (min-width: 992px) { #visite-plan { --bs-aspect-ratio: auto; } }

/* ---------- PIED DE PAGE ---------- */
#pied {
  margin-top: clamp(3rem, 7vw, 5rem);
  color: rgba(252, 248, 241, 0.82);
  background: var(--mo-encre);
  border-radius: 2.4rem 2.4rem 0 0;
}
#pied::before {
  content: '';
  position: absolute;
  inset: 0;
  color: rgba(234, 166, 153, 0.07);
  background: var(--mo-eventail) 0 0 / 52px 26px, var(--mo-eventail) 26px 13px / 52px 26px;
  -webkit-mask: linear-gradient(180deg, transparent 10%, #000);
  mask: linear-gradient(180deg, transparent 10%, #000);
}
#pied-ruban {
  position: relative;
  overflow: hidden;
  color: var(--mo-encre);
  background: var(--mo-rose);
  border-radius: 2.4rem 2.4rem 0 0;
}
#pied-ruban > div > div { animation: mo-defile 38s linear infinite; }
#pied-ruban span > span {
  font-family: 'Gloock', serif;
  font-size: clamp(1.4rem, 2.6vw, 2.2rem);
  padding: 0 1.4rem;
}
#pied-ruban svg { color: var(--mo-tomate); }
@keyframes mo-defile { to { transform: translateX(-100%); } }
#pied h3 { color: var(--mo-platre); font-size: clamp(2rem, 3.6vw, 3rem); }
#pied h6 { color: var(--mo-rose); }
#pied li { font-size: 1.02rem; }
#pied a { color: var(--mo-platre); text-decoration: none; transition: color 0.25s ease; }
#pied a:hover { color: var(--mo-rose); }
#pied address { font-style: normal; }
#pied hr { border-color: rgba(252, 248, 241, 0.2); opacity: 1; }
#pied .bi { color: var(--mo-ocre); font-size: 1.15rem; }

/* ---------- Bloc SEO (affiché en bas) ---------- */
#contenu > section.order-last { position: relative; }

/* ---------- Responsive ---------- */
@media (max-width: 991.98px) {
  #maison-photo { max-width: 420px; margin: 0 auto; }
  #maison-photo::after { width: 88px; height: 88px; right: -0.6rem; }
  #notre-carte-cadre { border-radius: 1.6rem; }
}
@media (max-width: 575.98px) {
  #accueil-salle {
    border-radius: 0 0 1.4rem 1.4rem;
    -webkit-mask:
      radial-gradient(18px at 50% 18px, #000 98%, transparent) 50% 0 / 36px 36px repeat-x,
      linear-gradient(#000 0 0) 0 18px / 100% calc(100% - 18px) no-repeat;
    mask:
      radial-gradient(18px at 50% 18px, #000 98%, transparent) 50% 0 / 36px 36px repeat-x,
      linear-gradient(#000 0 0) 0 18px / 100% calc(100% - 18px) no-repeat;
  }
  #reserver-tel { padding: 0.35em 0.5em; }
  #pied { border-radius: 1.4rem 1.4rem 0 0; }
  #pied-ruban { border-radius: 1.4rem 1.4rem 0 0; }
}

/* ---------- Accessibilité : mouvement réduit ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}