/* ═══════════════════════════════════════════════════════════
   THA IM — Cambodian Food | style.css
   ═══════════════════════════════════════════════════════════ */

/* ── VARIABLES & RESET ─────────────────────────────────── */
:root {
  --rouge:        #b5232a;
  --rouge-fonce:  #8a1018;
  --rouge-clair:  #d44;
  --saumon:       #c97d5a;
  --beige:        #e8d5be;
  --beige-clair:  #f5ede0;
  --beige-chaud:  #d4a97a;
  --brun:         #5a2d0c;
  --brun-fonce:   #2c1206;
  --texte:        #2c1206;
  --texte-doux:   #7a4a2a;
  --texte-leger:  #a07050;
  --blanc:        #fdf8f2;
  --ombre:        rgba(44,18,6,.12);
  --trans:        .3s cubic-bezier(.4,0,.2,1);
}

*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; font-size:16px; }
body {
  font-family:'Lato', sans-serif;
  background:var(--blanc);
  color:var(--texte);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img { display:block; max-width:100%; }
a   { color:inherit; text-decoration:none; }
button { cursor:pointer; font-family:'Lato', sans-serif; }

/* ── NAVIGATION ─────────────────────────────────────────── */
nav {
  position:fixed;
  top:0; left:0; right:0;
  z-index:1000;
  background:rgba(253,248,242,.97);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(181,35,42,.12);
  transition:box-shadow var(--trans);
}
nav.scrolled { box-shadow:0 2px 30px var(--ombre); }

.nav-inner {
  max-width:1200px;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 1.5rem;
  height:72px;
}
.nav-logo {
  display:flex;
  align-items:center;
  gap:.75rem;
  cursor:pointer;
}
.nav-logo img {
  width:52px; height:52px;
  border-radius:50%;
  object-fit:cover;
  border:2px solid var(--rouge);
  box-shadow:0 2px 10px rgba(181,35,42,.3);
}
.nav-logo-text {
  font-family:'Playfair Display', serif;
  font-size:1.5rem;
  font-weight:900;
  font-style:italic;
  color:var(--rouge);
  letter-spacing:.03em;
}
.nav-logo-sub {
  font-size:.6rem;
  color:var(--texte-leger);
  letter-spacing:.12em;
  text-transform:uppercase;
  margin-top:-2px;
}
.nav-links {
  display:flex;
  align-items:center;
  gap:.25rem;
  list-style:none;
}
.nav-links a {
  padding:.5rem .9rem;
  font-size:.82rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.1em;
  color:var(--texte-doux);
  border-radius:6px;
  transition:all var(--trans);
  white-space:nowrap;
  min-height:44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.nav-links a:hover,
.nav-links a.active { color:var(--rouge); background:rgba(181,35,42,.07); }

.nav-cta {
  background:var(--rouge) !important;
  color:#fff !important;
  padding:.55rem 1.2rem !important;
  border-radius:50px !important;
  font-weight:700 !important;
}
.nav-cta:hover {
  background:var(--rouge-fonce) !important;
  color:#fff !important;
  transform:scale(1.03);
}

/* Hamburger */
.hamburger {
  display:none;
  flex-direction:column;
  gap:5px;
  background:none;
  border:none;
  padding:.5rem;
}
.hamburger span {
  width:24px; height:2px;
  background:var(--rouge);
  border-radius:2px;
  transition:all var(--trans);
  display:block;
}

/* ── PAGES SPA ──────────────────────────────────────────── */
.page { display:none; min-height:100vh; padding-top:72px; }
.page.active { display:block; }

/* ── HERO ───────────────────────────────────────────────── */
.hero {
  position:relative;
  height:calc(100vh - 72px);
  min-height:500px;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
}
.hero-bg {
  position:absolute;
  inset:0;
  overflow:hidden;
}
.hero-bg img {
  width:100%; height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
}
.hero-bg::after {
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(to bottom,
    rgba(44,18,6,.5) 0%,
    rgba(181,35,42,.25) 50%,
    rgba(44,18,6,.65) 100%);
  pointer-events:none;
}
.hero-content {
  position:relative;
  z-index:2;
  padding:2rem;
  animation:heroIn 1.2s ease both;
}
@keyframes heroIn {
  from { opacity:0; transform:translateY(30px); }
  to   { opacity:1; transform:translateY(0); }
}
.hero-badge {
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  background:rgba(255,255,255,.15);
  border:1px solid rgba(255,255,255,.3);
  color:#fff;
  padding:.4rem 1rem;
  border-radius:50px;
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.15em;
  text-transform:uppercase;
  margin-bottom:1.5rem;
  backdrop-filter:blur(8px);
}
.hero h1 {
  font-family:'Playfair Display', serif;
  font-size:clamp(3.5rem, 10vw, 7rem);
  font-weight:900;
  font-style:italic;
  color:#fff;
  line-height:.95;
  text-shadow:0 4px 30px rgba(0,0,0,.4);
  margin-bottom:1.25rem;
}
.hero h1 span { color:rgba(255,200,160,.9); }
.hero-sub {
  font-size:clamp(.9rem, 2.5vw, 1.1rem);
  color:rgba(255,255,255,.8);
  max-width:580px;
  margin:0 auto 2.5rem;
  font-style:italic;
  line-height:1.6;
}
.hero-btns {
  display:flex;
  gap:1rem;
  justify-content:center;
  flex-wrap:wrap;
}
.btn-primary {
  background:var(--rouge);
  color:#fff;
  padding:.9rem 2rem;
  border-radius:50px;
  font-weight:700;
  font-size:.9rem;
  letter-spacing:.06em;
  border:none;
  transition:all var(--trans);
  box-shadow:0 4px 20px rgba(181,35,42,.4);
  min-height:44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.btn-primary:hover {
  background:var(--rouge-fonce);
  transform:translateY(-2px);
  box-shadow:0 8px 28px rgba(181,35,42,.45);
}
.btn-outline {
  background:transparent;
  color:#fff;
  padding:.9rem 2rem;
  border-radius:50px;
  font-weight:700;
  font-size:.9rem;
  letter-spacing:.06em;
  border:2px solid rgba(255,255,255,.5);
  transition:all var(--trans);
  min-height:44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.btn-outline:hover { background:rgba(255,255,255,.15); border-color:#fff; }

.hero-scroll {
  position:absolute;
  bottom:2rem;
  left:50%;
  transform:translateX(-50%);
  color:rgba(255,255,255,.6);
  font-size:.75rem;
  letter-spacing:.15em;
  text-transform:uppercase;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.5rem;
  animation:scrollBounce 2s infinite;
}
@keyframes scrollBounce {
  0%,100% { transform:translateX(-50%) translateY(0); }
  50%      { transform:translateX(-50%) translateY(6px); }
}

/* ── SECTIONS GÉNÉRIQUES ────────────────────────────────── */
.section {
  padding:5rem 1.5rem;
  max-width:1200px;
  margin:0 auto;
}
.section-wide { padding:5rem 0; }
.section-tag {
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--rouge);
  margin-bottom:.6rem;
}
.section-title {
  font-family:'Playfair Display', serif;
  font-size:clamp(2rem, 5vw, 3rem);
  font-weight:900;
  font-style:italic;
  color:var(--texte);
  line-height:1.1;
  margin-bottom:.75rem;
}
.section-title span { color:var(--rouge); }
.section-desc {
  color:var(--texte-leger);
  font-size:.95rem;
  line-height:1.7;
  max-width:580px;
}

/* ── ACCUEIL CATÉGORIES ─────────────────────────────────── */
.home-cats {
  background:var(--beige-clair);
  padding:5rem 1.5rem;
}
.home-cats-inner { max-width:1200px; margin:0 auto; }
.cats-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:1.25rem;
  margin-top:3rem;
}
.cat-card {
  background:var(--blanc);
  border-radius:20px;
  overflow:hidden;
  box-shadow:0 4px 20px var(--ombre);
  cursor:pointer;
  transition:all var(--trans);
  border:1.5px solid transparent;
}
.cat-card:hover {
  transform:translateY(-5px);
  box-shadow:0 12px 36px var(--ombre);
  border-color:var(--rouge);
}
.cat-card-img-wrap {
  width:100%;
  aspect-ratio:4/3;
  overflow:hidden;
  background:linear-gradient(135deg, var(--beige), var(--beige-chaud));
}
.cat-card-img-wrap img {
  width:100%; height:100%;
  object-fit:cover;
  display:block;
  transition:transform .4s ease;
}
.cat-card:hover .cat-card-img-wrap img { transform:scale(1.06); }
.cat-card-body { padding:1.25rem; }
.cat-card-title {
  font-family:'Playfair Display', serif;
  font-size:1.2rem;
  font-weight:700;
  font-style:italic;
  color:var(--texte);
  margin-bottom:.3rem;
}
.cat-card-count { font-size:.78rem; color:var(--texte-leger); }
.cat-card-arrow {
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  color:var(--rouge);
  font-size:.78rem;
  font-weight:700;
  margin-top:.6rem;
}

/* ── SECTION HISTOIRE (accueil) ─────────────────────────── */
.home-histoire {
  background:linear-gradient(135deg, var(--rouge-fonce) 0%, var(--rouge) 100%);
  padding:5rem 1.5rem;
  position:relative;
  overflow:hidden;
}
.home-histoire::before {
  content:'';
  position:absolute;
  inset:0;
  background:url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='50' cy='50' r='40' fill='none' stroke='rgba(255,255,255,0.04)' stroke-width='1'/%3E%3C/svg%3E") center/60px;
}
.home-histoire-inner {
  max-width:1200px;
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:4rem;
  align-items:center;
  position:relative;
}
.histoire-text .section-tag  { color:rgba(255,255,255,.6); }
.histoire-text .section-title { color:#fff; }
.histoire-text .section-desc  { color:rgba(255,255,255,.75); max-width:100%; }
.histoire-img {
  border-radius:20px;
  overflow:hidden;
  aspect-ratio:4/3;
  box-shadow:0 20px 60px rgba(0,0,0,.4);
}
.histoire-img img { width:100%; height:100%; object-fit:cover; }

/* Badge Halal */
.halal-badge {
  display:inline-flex;
  align-items:center;
  gap:.75rem;
  background:rgba(255,255,255,.12);
  border:1.5px solid rgba(255,255,255,.25);
  border-radius:12px;
  padding:.75rem 1.25rem;
  margin-top:1.5rem;
  color:#fff;
}
.halal-circle {
  width:44px; height:44px;
  background:#fff;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:.5rem;
  font-weight:900;
  color:var(--rouge);
  text-align:center;
  line-height:1.1;
  letter-spacing:.05em;
  text-transform:uppercase;
  flex-shrink:0;
  border:2px solid var(--rouge);
}
.halal-text strong { display:block; font-size:.88rem; font-weight:700; }
.halal-text span   { font-size:.75rem; opacity:.7; }

/* ── PAGE CARTE & MENUS ─────────────────────────────────── */
.carte-hero {
  background:linear-gradient(to bottom right, var(--rouge-fonce), var(--rouge));
  padding:4rem 1.5rem 3rem;
  text-align:center;
  color:#fff;
}
.carte-hero h1 {
  font-family:'Playfair Display', serif;
  font-size:clamp(2.2rem, 6vw, 3.5rem);
  font-style:italic;
  font-weight:900;
  margin-bottom:.75rem;
}
.carte-hero p { opacity:.8; font-size:.95rem; max-width:500px; margin:0 auto 2rem; }

/* Sous-navigation carte */
.carte-subnav {
  background:var(--blanc);
  border-bottom:2px solid var(--beige);
  position:sticky;
  top:72px;
  z-index:90;
}
.carte-subnav-inner {
  max-width:1200px;
  margin:0 auto;
  display:flex;
  overflow-x:auto;
  scrollbar-width:none;
  padding:0 1rem;
}
.carte-subnav-inner::-webkit-scrollbar { display:none; }
.subnav-btn {
  padding:1rem 1.5rem;
  border:none;
  background:none;
  font-size:.82rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.1em;
  color:var(--texte-leger);
  border-bottom:3px solid transparent;
  transition:all var(--trans);
  white-space:nowrap;
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:.4rem;
  min-height:44px;
}
.subnav-btn:hover  { color:var(--rouge); }
.subnav-btn.active { color:var(--rouge); border-bottom-color:var(--rouge); }

/* Sections menu */
.menu-section { display:none; padding:3rem 1.5rem 2rem; max-width:1200px; margin:0 auto; }
.menu-section.active { display:block; }
.menu-section-title {
  font-family:'Playfair Display', serif;
  font-size:2rem;
  font-weight:900;
  font-style:italic;
  color:var(--texte);
  margin-bottom:.4rem;
}
.menu-section-desc { color:var(--texte-leger); font-size:.88rem; margin-bottom:2.5rem; }

/* Grille plats */
.plats-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));
  gap:1.25rem;
  margin-bottom:3rem;
}
.plat-card {
  background:var(--blanc);
  border:1.5px solid var(--beige);
  border-radius:18px;
  overflow:hidden;
  transition:all var(--trans);
  box-shadow:0 2px 12px var(--ombre);
}
.plat-card:hover {
  transform:translateY(-4px);
  box-shadow:0 10px 30px var(--ombre);
  border-color:var(--saumon);
}
.plat-card-img {
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
  display:block;
}
/* Skeleton/placeholder pour images manquantes */
.plat-card-img-placeholder {
  width:100%;
  aspect-ratio:4/3;
  background:linear-gradient(135deg, var(--beige), var(--beige-chaud));
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:3rem;
}
.plat-card-ingredients {
  font-size:.72rem;
  color:var(--texte-leger);
  padding:.35rem 1.1rem 0;
  font-style:italic;
  line-height:1.4;
}
.plat-card-body { padding:1rem 1.1rem 1.1rem; }
.plat-card-top {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:.5rem;
  margin-bottom:.35rem;
}
.plat-card-name {
  font-family:'Playfair Display', serif;
  font-size:1rem;
  font-weight:700;
  font-style:italic;
  color:var(--texte);
  line-height:1.25;
}
.plat-card-price {
  font-weight:900;
  font-size:1rem;
  color:var(--rouge);
  white-space:nowrap;
}
.plat-card-desc { font-size:.78rem; color:var(--texte-leger); line-height:1.5; }

/* Menu étudiant */
.menu-etudiant {
  background:linear-gradient(135deg, var(--beige-clair), var(--beige));
  border-radius:20px;
  padding:2rem;
  margin-bottom:2rem;
  border:1.5px solid var(--beige-chaud);
}
.menu-etudiant h3 {
  font-family:'Playfair Display', serif;
  font-size:1.4rem;
  font-style:italic;
  font-weight:900;
  color:var(--texte);
  margin-bottom:.25rem;
}
.menu-etudiant p { font-size:.82rem; color:var(--texte-leger); margin-bottom:1rem; }
.menu-etudiant-items { display:flex; flex-direction:column; gap:.5rem; }
.menu-etudiant-item {
  display:flex;
  justify-content:space-between;
  align-items:center;
  background:var(--blanc);
  border-radius:10px;
  padding:.65rem 1rem;
  font-size:.88rem;
}
.menu-etudiant-item span:last-child { font-weight:700; color:var(--rouge); }

/* Boissons */
.boissons-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(160px, 1fr));
  gap:.75rem;
}
.boisson-chip {
  background:var(--blanc);
  border:1.5px solid var(--beige);
  border-radius:12px;
  padding:.75rem 1rem;
  font-size:.85rem;
  font-weight:600;
  color:var(--texte-doux);
  display:flex;
  align-items:center;
  justify-content:space-between;
  transition:all var(--trans);
}
.boisson-chip:hover   { border-color:var(--rouge); color:var(--rouge); }
.boisson-chip span    { font-size:.78rem; color:var(--rouge); font-weight:700; }
.boissons-category-title {
  font-family:'Playfair Display', serif;
  font-size:1.1rem;
  font-style:italic;
  font-weight:700;
  color:var(--rouge);
  margin-bottom:1rem;
}

/* ── SECTION AVIS ───────────────────────────────────────── */
.avis-section {
  background:var(--beige-clair);
  padding:4rem 1.5rem;
  border-top:2px solid var(--beige);
}
.avis-inner { max-width:900px; margin:0 auto; }
.rating-global {
  display:flex;
  align-items:center;
  gap:2rem;
  background:var(--blanc);
  border-radius:20px;
  padding:2rem;
  margin-bottom:2.5rem;
  box-shadow:0 4px 20px var(--ombre);
  flex-wrap:wrap;
}
.rating-number {
  font-family:'Playfair Display', serif;
  font-size:4rem;
  font-weight:900;
  color:var(--rouge);
  line-height:1;
}
.rating-stars-big { display:flex; gap:.3rem; margin-bottom:.3rem; }
.star {
  font-size:1.3rem;
  color:#ddd;
  cursor:pointer;
  transition:color var(--trans);
}
.star.filled,
.star:hover { color:#f0b429; }
.rating-count { font-size:.82rem; color:var(--texte-leger); }

/* Formulaire commentaire */
.comment-form {
  background:var(--blanc);
  border-radius:20px;
  padding:2rem;
  margin-bottom:2.5rem;
  box-shadow:0 4px 20px var(--ombre);
}
.comment-form h3 {
  font-family:'Playfair Display', serif;
  font-size:1.4rem;
  font-style:italic;
  font-weight:700;
  color:var(--texte);
  margin-bottom:1.25rem;
}
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:.75rem; margin-bottom:.75rem; }
.form-row.full { grid-template-columns:1fr; }
.form-field { display:flex; flex-direction:column; gap:.35rem; }
.form-field label {
  font-size:.73rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--texte-leger);
}
.form-field input,
.form-field textarea {
  padding:.75rem 1rem;
  border:1.5px solid var(--beige);
  border-radius:10px;
  font-family:'Lato', sans-serif;
  font-size:.92rem;
  color:var(--texte);
  background:var(--beige-clair);
  transition:border-color var(--trans);
  resize:none;
}
.form-field input:focus,
.form-field textarea:focus { outline:none; border-color:var(--rouge); background:#fff; }

.note-selector { display:flex; gap:.4rem; margin-bottom:1rem; }
.note-selector .star { font-size:1.8rem; }
.submit-btn {
  background:var(--rouge);
  color:#fff;
  border:none;
  padding:.85rem 2rem;
  border-radius:50px;
  font-size:.88rem;
  font-weight:700;
  letter-spacing:.06em;
  transition:all var(--trans);
  box-shadow:0 4px 16px rgba(181,35,42,.3);
  min-height:44px;
}
.submit-btn:hover {
  background:var(--rouge-fonce);
  transform:translateY(-1px);
  box-shadow:0 6px 22px rgba(181,35,42,.35);
}

/* Liste commentaires */
.comments-list { display:flex; flex-direction:column; gap:1rem; }
.comment-card {
  background:var(--blanc);
  border-radius:16px;
  padding:1.25rem 1.5rem;
  box-shadow:0 2px 12px var(--ombre);
  border-left:3px solid var(--beige-chaud);
  animation:fadeUp .4s ease both;
}
.comment-card.own-comment { border-left-color:#1a73e8; background:#fafcff; }
@keyframes fadeUp {
  from { opacity:0; transform:translateY(8px); }
  to   { opacity:1; transform:translateY(0); }
}
.comment-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:.6rem;
  flex-wrap:wrap;
  gap:.5rem;
}
.comment-author {
  font-weight:700;
  font-size:.9rem;
  color:var(--texte);
  display:flex;
  align-items:center;
  gap:.5rem;
}
.comment-author-avatar {
  width:34px; height:34px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:.82rem;
  font-weight:700;
  color:#fff;
  background:var(--brun);
  flex-shrink:0;
}
.own-comment .comment-author-avatar { background:#1a73e8; }
.comment-author-badge {
  font-size:.65rem;
  font-weight:700;
  background:#e8f0fe;
  color:#1a73e8;
  border-radius:50px;
  padding:.15rem .55rem;
}
.comment-date   { font-size:.73rem; color:var(--texte-leger); }
.comment-stars  { display:flex; gap:.2rem; margin-bottom:.5rem; }
.comment-stars .star { font-size:.85rem; cursor:default; }
.comment-text   { font-size:.88rem; color:var(--texte-doux); line-height:1.55; font-style:italic; }

.comment-actions { display:flex; gap:.5rem; margin-top:.75rem; }
.comment-action-btn {
  display:flex;
  align-items:center;
  gap:.3rem;
  font-size:.75rem;
  font-weight:700;
  border:none;
  background:transparent;
  cursor:pointer;
  border-radius:6px;
  padding:.3rem .7rem;
  transition:all .2s;
}
.comment-action-btn.edit   { color:#1a73e8; }
.comment-action-btn.edit:hover { background:#e8f0fe; }
.comment-action-btn.delete { color:#d32f2f; }
.comment-action-btn.delete:hover { background:#fce8e6; }

.comment-edit-form { margin-top:.75rem; display:none; }
.comment-edit-form.open { display:block; }
.comment-edit-form textarea {
  width:100%;
  padding:.65rem .9rem;
  border:1.5px solid #1a73e8;
  border-radius:10px;
  font-family:'Lato', sans-serif;
  font-size:.88rem;
  color:var(--texte);
  background:#fff;
  resize:none;
  margin-bottom:.5rem;
}
.comment-edit-form textarea:focus { outline:none; }
.comment-edit-stars { display:flex; gap:.3rem; margin-bottom:.6rem; }
.comment-edit-stars .star { font-size:1.5rem; cursor:pointer; }
.comment-edit-btns { display:flex; gap:.5rem; }
.btn-save-edit {
  background:#1a73e8;
  color:#fff;
  border:none;
  padding:.45rem 1.2rem;
  border-radius:50px;
  font-size:.8rem;
  font-weight:700;
  cursor:pointer;
}
.btn-save-edit:hover { background:#1558b0; }
.btn-cancel-edit {
  background:transparent;
  color:var(--texte-leger);
  border:1.5px solid var(--beige);
  padding:.45rem 1.2rem;
  border-radius:50px;
  font-size:.8rem;
  font-weight:700;
  cursor:pointer;
}
.btn-cancel-edit:hover { border-color:var(--texte-leger); }

/* Modal suppression */
.modal-overlay {
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.45);
  z-index:9999;
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  pointer-events:none;
  transition:opacity .2s;
}
.modal-overlay.open { opacity:1; pointer-events:all; }
.modal-box {
  background:#fff;
  border-radius:20px;
  padding:2rem;
  max-width:380px;
  width:90%;
  box-shadow:0 20px 60px rgba(0,0,0,.25);
  transform:scale(.95);
  transition:transform .2s;
}
.modal-overlay.open .modal-box { transform:scale(1); }
.modal-box h3 {
  font-family:'Playfair Display', serif;
  font-size:1.2rem;
  font-weight:700;
  color:var(--texte);
  margin-bottom:.5rem;
}
.modal-box p { font-size:.88rem; color:var(--texte-leger); margin-bottom:1.5rem; line-height:1.5; }
.modal-btns { display:flex; gap:.75rem; justify-content:flex-end; }
.btn-modal-cancel {
  background:transparent;
  border:1.5px solid var(--beige);
  color:var(--texte-doux);
  padding:.55rem 1.2rem;
  border-radius:50px;
  font-size:.83rem;
  font-weight:700;
  cursor:pointer;
}
.btn-modal-delete {
  background:#d32f2f;
  color:#fff;
  border:none;
  padding:.55rem 1.4rem;
  border-radius:50px;
  font-size:.83rem;
  font-weight:700;
  cursor:pointer;
}
.btn-modal-delete:hover { background:#b71c1c; }

/* Toast */
.toast {
  position:fixed;
  bottom:2rem;
  left:50%;
  transform:translateX(-50%) translateY(20px);
  background:#323232;
  color:#fff;
  padding:.75rem 1.5rem;
  border-radius:50px;
  font-size:.85rem;
  font-weight:600;
  z-index:99999;
  opacity:0;
  transition:all .3s;
  pointer-events:none;
  white-space:nowrap;
}
.toast.show { opacity:1; transform:translateX(-50%) translateY(0); }

/* ── PAGE HORAIRES & LIEU ───────────────────────────────── */
.horaires-hero {
  background:linear-gradient(135deg, var(--rouge-fonce), var(--rouge));
  padding:4rem 1.5rem 3rem;
  text-align:center;
  color:#fff;
}
.horaires-hero h1 {
  font-family:'Playfair Display', serif;
  font-size:clamp(2rem, 5vw, 3rem);
  font-style:italic;
  font-weight:900;
  margin-bottom:.5rem;
}
.horaires-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:2rem;
  max-width:1000px;
  margin:0 auto;
  padding:3rem 1.5rem;
}
.horaires-card,
.adresse-card {
  background:var(--blanc);
  border-radius:20px;
  padding:2rem;
  box-shadow:0 4px 24px var(--ombre);
  border:1.5px solid var(--beige);
}
.horaires-card h2,
.adresse-card h2 {
  font-family:'Playfair Display', serif;
  font-size:1.5rem;
  font-style:italic;
  font-weight:700;
  color:var(--rouge);
  margin-bottom:1.25rem;
  display:flex;
  align-items:center;
  gap:.5rem;
}
.horaire-row {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:.65rem 0;
  border-bottom:1px solid var(--beige);
  font-size:.9rem;
}
.horaire-row:last-child { border-bottom:none; }
.horaire-row .jour   { font-weight:600; color:var(--texte-doux); }
.horaire-row .heures { color:var(--rouge); font-weight:700; font-size:.85rem; }
.horaire-row .ferme  { color:var(--texte-leger); font-style:italic; }

.adresse-info { display:flex; flex-direction:column; gap:1rem; }
.adresse-ligne {
  display:flex;
  align-items:flex-start;
  gap:.75rem;
  font-size:.9rem;
  color:var(--texte-doux);
}
.adresse-icon { font-size:1.2rem; flex-shrink:0; margin-top:.1rem; }
.adresse-ligne strong {
  display:block;
  font-size:.75rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--texte-leger);
  margin-bottom:.2rem;
}

.map-embed {
  max-width:1000px;
  margin:0 auto 3rem;
  padding:0 1.5rem;
  border-radius:20px;
  overflow:hidden;
  box-shadow:0 4px 24px var(--ombre);
}
.map-embed iframe {
  width:100%;
  height:350px;
  border:none;
  border-radius:20px;
  display:block;
}

.contact-cta {
  max-width:600px;
  margin:0 auto 3rem;
  padding:0 1.5rem;
  text-align:center;
}
.tel-card {
  background:var(--rouge);
  color:#fff;
  border-radius:20px;
  padding:2rem;
  box-shadow:0 6px 24px rgba(181,35,42,.3);
}
.tel-card h3 {
  font-family:'Playfair Display', serif;
  font-size:1.25rem;
  font-style:italic;
  font-weight:700;
  margin-bottom:.5rem;
}
.tel-card .num { font-size:1.6rem; font-weight:900; letter-spacing:.04em; margin:.5rem 0; }
.tel-card p { font-size:.82rem; opacity:.8; }

/* ── PAGE À PROPOS ──────────────────────────────────────── */
.apropos-hero {
  background:
    linear-gradient(to bottom, rgba(44,18,6,.6), rgba(181,35,42,.4)),
    url('https://images.unsplash.com/photo-1414235077428-338989a2e8c0?w=1600&q=80') center/cover no-repeat;
  padding:5rem 1.5rem 4rem;
  text-align:center;
  color:#fff;
  min-height:400px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.apropos-hero-content h1 {
  font-family:'Playfair Display', serif;
  font-size:clamp(2.5rem, 6vw, 4rem);
  font-style:italic;
  font-weight:900;
  margin-bottom:.75rem;
  text-shadow:0 3px 20px rgba(0,0,0,.4);
}
.apropos-hero-content p { opacity:.85; font-size:1rem; max-width:500px; font-style:italic; }

.apropos-content {
  max-width:1100px;
  margin:0 auto;
  padding:4rem 1.5rem;
}
.apropos-block {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:3rem;
  align-items:center;
  margin-bottom:4rem;
}
.apropos-block.reverse { direction:rtl; }
.apropos-block.reverse > * { direction:ltr; }

.apropos-block-img {
  border-radius:20px;
  overflow:hidden;
  aspect-ratio:4/3;
  box-shadow:0 8px 32px var(--ombre);
}
.apropos-block-img img { width:100%; height:100%; object-fit:cover; }
.apropos-block-img-placeholder {
  width:100%; height:100%;
  background:linear-gradient(135deg, var(--beige), var(--saumon));
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:4rem;
  min-height:280px;
  border-radius:20px;
}
.apropos-block-text h2 {
  font-family:'Playfair Display', serif;
  font-size:1.8rem;
  font-style:italic;
  font-weight:900;
  color:var(--texte);
  margin-bottom:.75rem;
}
.apropos-block-text h2 span { color:var(--rouge); }
.apropos-block-text p { color:var(--texte-doux); line-height:1.75; font-size:.95rem; }

/* Engagements */
.engagements-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:1.25rem;
  margin-top:2rem;
}
.engagement-card {
  background:var(--beige-clair);
  border:1.5px solid var(--beige);
  border-radius:16px;
  padding:1.5rem;
  text-align:center;
}
.engagement-icon { font-size:2rem; margin-bottom:.75rem; }
.engagement-card h3 {
  font-family:'Playfair Display', serif;
  font-size:1rem;
  font-style:italic;
  font-weight:700;
  color:var(--texte);
  margin-bottom:.35rem;
}
.engagement-card p { font-size:.78rem; color:var(--texte-leger); line-height:1.5; }

/* Galeries */
.gallery-grid-3 {
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:1rem;
}
.gallery-grid-2 {
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:1rem;
  margin-top:1rem;
}
.gallery-item {
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 6px 24px var(--ombre);
  position:relative;
}
.gallery-item img {
  width:100%; height:100%;
  object-fit:cover;
  display:block;
  transition:transform .5s ease;
}
.gallery-item:hover img { transform:scale(1.07); }
.gallery-caption {
  position:absolute;
  bottom:0; left:0; right:0;
  padding:1rem 1.1rem;
  background:linear-gradient(transparent, rgba(44,18,6,.85));
}
.gallery-caption-title {
  color:#fff;
  font-size:.88rem;
  font-weight:700;
  font-family:'Playfair Display', serif;
  font-style:italic;
}
.gallery-caption-sub {
  color:rgba(255,255,255,.7);
  font-size:.7rem;
}

/* Citation */
.citation-block {
  background:linear-gradient(135deg, var(--rouge-fonce), var(--rouge));
  border-radius:24px;
  padding:3.5rem 2.5rem;
  text-align:center;
  margin:2rem 0 3rem;
  position:relative;
  overflow:hidden;
}
.citation-block::before {
  content:'';
  position:absolute;
  inset:0;
  opacity:.06;
  background:url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cellipse cx='40' cy='40' rx='35' ry='20' fill='none' stroke='%23fff' stroke-width='1'/%3E%3C/svg%3E") center/60px;
}
.citation-block blockquote {
  font-family:'Playfair Display', serif;
  font-size:clamp(1.3rem, 3vw, 1.8rem);
  font-style:italic;
  color:#fff;
  line-height:1.5;
  margin:0 0 1.5rem;
  max-width:700px;
  margin-left:auto;
  margin-right:auto;
  position:relative;
  z-index:2;
}
.citation-credit {
  color:rgba(255,255,255,.65);
  font-size:.85rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  position:relative;
  z-index:2;
}

/* ── FOOTER ─────────────────────────────────────────────── */
footer {
  background:var(--brun-fonce);
  color:rgba(255,255,255,.7);
  padding:3rem 1.5rem 2rem;
}
.footer-inner {
  max-width:1200px;
  margin:0 auto;
  display:grid;
  grid-template-columns:2fr 1fr 1fr;
  gap:3rem;
  margin-bottom:2rem;
}
.footer-logo {
  font-family:'Playfair Display', serif;
  font-size:1.8rem;
  font-style:italic;
  font-weight:900;
  color:var(--rouge-clair);
  margin-bottom:.75rem;
}
.footer-brand p { font-size:.82rem; line-height:1.6; max-width:300px; }
.footer-halal {
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  margin-top:1rem;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.15);
  border-radius:8px;
  padding:.5rem .85rem;
  font-size:.75rem;
  color:rgba(255,255,255,.8);
}
.footer-col h4 {
  font-size:.72rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:rgba(255,255,255,.5);
  margin-bottom:1rem;
}
.footer-col ul { list-style:none; display:flex; flex-direction:column; gap:.5rem; }
.footer-col ul li a {
  font-size:.85rem;
  color:rgba(255,255,255,.65);
  transition:color var(--trans);
}
.footer-col ul li a:hover { color:var(--rouge-clair); }

.footer-bottom {
  border-top:1px solid rgba(255,255,255,.08);
  padding-top:1.5rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:.75rem;
  color:rgba(255,255,255,.4);
  flex-wrap:wrap;
  gap:.5rem;
  max-width:1200px;
  margin:0 auto;
}

/* Réseaux sociaux */
.social-bar {
  display:flex;
  justify-content:center;
  align-items:center;
  gap:1.25rem;
  padding:1.5rem 1rem 1rem;
  border-top:1px solid rgba(255,255,255,.06);
  max-width:1200px;
  margin:0 auto;
  flex-wrap:wrap;
}
.social-link {
  display:flex;
  align-items:center;
  gap:.55rem;
  padding:.6rem 1.4rem;
  border-radius:50px;
  font-size:.82rem;
  font-weight:700;
  text-decoration:none;
  letter-spacing:.04em;
  transition:all .25s ease;
  border:1px solid rgba(255,255,255,.12);
  color:rgba(255,255,255,.75);
  background:rgba(255,255,255,.06);
}
.social-link:hover { transform:translateY(-2px); color:#fff; }
.social-link.tiktok:hover {
  background:rgba(0,0,0,.45);
  border-color:rgba(255,255,255,.4);
  box-shadow:0 4px 18px rgba(0,0,0,.5);
}
.social-link.instagram:hover {
  background:linear-gradient(135deg, rgba(240,148,51,.3), rgba(220,39,100,.3), rgba(130,58,180,.3));
  border-color:rgba(220,100,150,.5);
  box-shadow:0 4px 18px rgba(200,50,100,.35);
}
.social-link svg { flex-shrink:0; }

/* ── RESPONSIVE ─────────────────────────────────────────── */
@media (max-width:768px) {
  .hamburger { display:flex; }
  .nav-links {
    display:none;
    flex-direction:column;
    gap:0;
    position:absolute;
    top:72px; left:0; right:0;
    background:var(--blanc);
    border-bottom:2px solid var(--beige);
    padding:1rem;
  }
  .nav-links.open { display:flex; }
  .nav-links a { padding:.85rem 1rem; width:100%; display:block; border-radius:8px; }

  .home-histoire-inner { grid-template-columns:1fr; gap:2rem; }
  .horaires-grid  { grid-template-columns:1fr; }
  .apropos-block, .apropos-block.reverse { grid-template-columns:1fr; direction:ltr; }
  .footer-inner   { grid-template-columns:1fr; gap:2rem; }
  .form-row       { grid-template-columns:1fr; }
  .plats-grid     { grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); }
  .gallery-grid-3 { grid-template-columns:1fr; }
  .gallery-grid-2 { grid-template-columns:1fr; }
}
@media (max-width:480px) {
  .hero h1       { font-size:3rem; }
  .cats-grid     { grid-template-columns:1fr 1fr; }
  .boissons-grid { grid-template-columns:repeat(auto-fill, minmax(140px, 1fr)); }
  .carte-subnav-inner { padding:0 .5rem; }
  .subnav-btn    { padding:.85rem .85rem; font-size:.75rem; }
  .gallery-grid-3, .gallery-grid-2 { grid-template-columns:1fr; }
}

/* ── SAFE AREA (iPhone notch) ───────────────────────────── */
@supports (padding-top:env(safe-area-inset-top)) {
  nav    { padding-top:env(safe-area-inset-top); }
  footer { padding-bottom:calc(2rem + env(safe-area-inset-bottom)); }
}

/* ── TEL LINK ───────────────────────────────────────────── */
a[href^="tel"] {
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}