/* =====================================================================
   Symphonie de Saveurs — thème « Nuit orientale » (01/10/2026)
   Chargé APRÈS style.css : il surcharge sans le réécrire.
   Rollback = retirer la ligne <link ... theme-oriental.css> des templates.
   Inspiré de l'affiche des horaires : arches mauresques, lanternes,
   or cuivré sur noir chaud, titres en calligraphie.
   ===================================================================== */
:root {
  --bg: #0c0806;
  --bg-soft: #120c08;
  --bg-card: #1a120c;
  --gold: #d9a55a;
  --gold-light: #f3cf8e;
  --gold-deep: #9c6a2c;
  --teal: #e0a45c;            /* l'ancien accent turquoise devient cuivre */
  --copper: #c07a3a;
  --text: #f1e6d6;
  --text-dim: #b9a88f;
  --border: rgba(217, 165, 90, 0.22);
  --glow: rgba(255, 170, 70, 0.16);
  --font-script: 'Great Vibes', 'Playfair Display', cursive;
  --font-title: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
}

body {
  font-variant-numeric: lining-nums;
  background:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(255,160,60,0.06), transparent 70%),
    var(--bg);
}

/* ---------- Titres : calligraphie + serif ---------- */
h1, h2, h3 { font-weight: 600; letter-spacing: 0.3px; }
* { font-variant-numeric: lining-nums; }
.section-head h2 {
  font-family: var(--font-script); font-weight: 400;
  font-size: clamp(2.6rem, 6vw, 3.8rem); line-height: 1.1;
  background: linear-gradient(180deg, #ffe1a8 0%, var(--gold) 60%, var(--copper) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 14px rgba(255,160,60,0.18));
  padding: 0 .15em;           /* évite que les boucles de la calligraphie soient coupées */
}
.section-head .kicker {
  color: var(--gold); font-family: var(--font-title); font-weight: 600;
  letter-spacing: 5px; font-size: 0.85rem;
}
.nav-logo { font-family: var(--font-script); font-size: 1.75rem; color: var(--gold-light); letter-spacing: 0; }
.nav-logo span { color: var(--gold); }
.nav { background: rgba(12, 8, 6, 0.82); }

/* Ornement : fleuron + étoile orientale */
.ornament { color: var(--gold); font-size: 1rem; }
.ornament::before, .ornament::after { width: 90px; }

/* ---------- Boutons : or cuivré ---------- */
.btn-gold, .btn-reserver {
  background: linear-gradient(135deg, #f3cf8e, var(--gold) 45%, var(--copper));
  color: #1a0f05 !important;
  box-shadow: 0 0 0 1px rgba(255,220,160,0.25) inset;
}
.btn-gold:hover, .btn-reserver:hover { box-shadow: 0 8px 28px rgba(255,160,60,0.4); }

/* ---------- Hero : arche + lueur de lanternes ---------- */
.hero::before {
  background:
    radial-gradient(circle at 8% 30%, rgba(255,160,60,0.22), transparent 22%),
    radial-gradient(circle at 92% 30%, rgba(255,160,60,0.22), transparent 22%),
    linear-gradient(180deg, rgba(12,8,6,0.78) 0%, rgba(12,8,6,0.5) 45%, rgba(12,8,6,0.95) 100%);
}
.hero::after {           /* arche mauresque dorée qui encadre le titre */
  content: ''; position: absolute; z-index: -1; pointer-events: none;
  left: 50%; top: 90px; bottom: 40px; width: min(760px, 90vw);
  transform: translateX(-50%);
  border: 1px solid rgba(243, 207, 142, 0.45);
  border-bottom: none;
  border-radius: 50% 50% 0 0 / 22% 22% 0 0;
  box-shadow: inset 0 0 60px rgba(255,160,60,0.08);
}
.hero h1 { font-family: var(--font-title); font-weight: 600; }
.hero h1 em {
  font-family: var(--font-script); font-style: normal; font-weight: 400;
  font-size: 1.25em; color: var(--gold-light);
}
.hero-sur { color: var(--gold-light); }
.hero-badge { border-color: rgba(217,165,90,0.35); background: rgba(12,8,6,0.5); }

/* Pastille « ouvert maintenant » */
.open-status {
  display: inline-flex; align-items: center; gap: 10px; margin-bottom: 22px;
  padding: 7px 18px; border-radius: 30px; font-size: 0.9rem; letter-spacing: 0.5px;
  background: rgba(12,8,6,0.6); backdrop-filter: blur(6px);
  border: 1px solid rgba(217,165,90,0.4); color: var(--text);
}
.open-status[hidden] { display: none; }
.open-status .dot { width: 9px; height: 9px; border-radius: 50%; background: #d96b5a; box-shadow: 0 0 10px #d96b5a; }
.open-status.is-open .dot { background: #7fd48a; box-shadow: 0 0 10px #7fd48a; animation: pulse 2s infinite; }
@keyframes pulse { 50% { opacity: .45; } }

/* ---------- Cartes / encadrés : arches ---------- */
.espace-card { border-radius: 140px 140px var(--radius) var(--radius); }
.espace-card .photo { height: 200px; }
.espace-card:hover { border-color: var(--gold); box-shadow: 0 14px 40px rgba(0,0,0,0.5), 0 0 30px var(--glow); }
.apropos-photos img.tall { border-radius: 200px 200px var(--radius) var(--radius); }
.chef-quote img { filter: sepia(.35) saturate(1.1); }
.carte-frame {
  border-radius: 260px 260px 22px 22px / 90px 90px 22px 22px;
  padding-top: 70px;
  border-color: rgba(217,165,90,0.35);
  box-shadow: 0 30px 80px rgba(0,0,0,0.55), 0 0 60px rgba(255,160,60,0.05);
}
.carte-frame::before, .carte-frame::after { content: '✦'; background: var(--bg); }
.carte-section {
  background:
    radial-gradient(ellipse 60% 40% at 15% 0%, rgba(255,160,60,0.08), transparent),
    radial-gradient(ellipse 50% 35% at 90% 100%, rgba(192,122,58,0.07), transparent),
    var(--bg);
}
.carte-cat-head h3 { font-family: var(--font-script); font-weight: 400; font-size: clamp(2rem, 4vw, 2.5rem); letter-spacing: 0; }
.badge.signature { background: rgba(217,165,90,0.12); color: var(--gold-light); border-color: rgba(217,165,90,0.45); }

/* Motif géométrique discret (étoiles à 8 branches) sur les sections sombres */
.apropos, .galerie, footer {
  background-color: var(--bg-soft);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cg fill='none' stroke='%23d9a55a' stroke-opacity='0.07'%3E%3Crect x='18' y='18' width='20' height='20'/%3E%3Crect x='18' y='18' width='20' height='20' transform='rotate(45 28 28)'/%3E%3C/g%3E%3C/svg%3E");
}

.ambiance-band::before {
  background:
    radial-gradient(ellipse at 50% 50%, rgba(255,150,50,0.14), transparent 60%),
    linear-gradient(180deg, rgba(12,8,6,0.9), rgba(12,8,6,0.62) 50%, rgba(12,8,6,0.94));
}
.ambiance-band h2 { font-family: var(--font-script); font-weight: 400; font-size: clamp(2.4rem, 6vw, 3.6rem); color: var(--gold-light); }

/* =====================================================================
   HORAIRES — reprend l'affiche : arche, jours en calligraphie, pastilles
   ===================================================================== */
.horaires {
  position: relative;
  background:
    radial-gradient(circle at 6% 20%, var(--glow), transparent 18%),
    radial-gradient(circle at 94% 20%, var(--glow), transparent 18%),
    radial-gradient(circle at 6% 85%, var(--glow), transparent 18%),
    radial-gradient(circle at 94% 85%, var(--glow), transparent 18%),
    var(--bg);
}
.horaires-arch {
  max-width: 720px; margin: 0 auto; position: relative;
  padding: 90px clamp(16px, 5vw, 56px) 44px;
  border: 1px solid rgba(243,207,142,0.55);
  border-radius: 50% 50% 18px 18px / 150px 150px 18px 18px;
  background: linear-gradient(180deg, rgba(255,170,70,0.06), rgba(12,8,6,0.4) 30%), #0e0906;
  box-shadow: 0 0 0 6px rgba(12,8,6,1), 0 0 0 7px rgba(217,165,90,0.25), 0 30px 80px rgba(0,0,0,0.6);
}
.horaires-arch::before {       /* fleuron au sommet de l'arche */
  content: '❦'; position: absolute; top: 34px; left: 50%; transform: translateX(-50%);
  color: var(--gold); font-size: 1.5rem;
}
.horaires-arch h2 {
  text-align: center; font-family: var(--font-script); font-weight: 400;
  font-size: clamp(3rem, 9vw, 4.6rem); line-height: 1;
  background: linear-gradient(180deg, #ffe1a8, var(--gold) 60%, var(--copper));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.horaires-arch .sous-titre {
  text-align: center; font-family: var(--font-title); font-size: clamp(1.5rem, 4vw, 2rem);
  color: var(--gold-light); margin-top: -4px;
}
.horaires-table { width: 100%; border-collapse: collapse; margin-top: 26px; }
.horaires-table th {
  font-family: var(--font-title); font-weight: 600; color: var(--gold-light);
  font-size: 1.1rem; padding-bottom: 6px;
}
.horaires-table td {
  padding: 14px 4px; text-align: center; vertical-align: middle;
  border-top: 1px solid rgba(217,165,90,0.28);
}
.horaires-table td.jour {
  text-align: left; font-family: var(--font-script); font-size: clamp(1.7rem, 5vw, 2.3rem);
  color: var(--gold-light); line-height: 1; white-space: nowrap; padding-right: 10px;
}
.horaires-table .h {
  display: block; font-family: var(--font-title); font-weight: 700;
  font-size: clamp(1.05rem, 3.4vw, 1.4rem); color: #f7dcae; white-space: nowrap;
}
.pill {
  display: inline-block; margin-top: 4px; padding: 2px 12px;
  font-family: var(--font-title); font-weight: 700; letter-spacing: 1.5px;
  font-size: 0.72rem; text-transform: uppercase; color: var(--gold-light);
  border: 1px solid var(--gold); border-radius: 4px;
  clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 8px 100%, 0 50%);
  padding-left: 16px; padding-right: 16px; background: rgba(217,165,90,0.08);
}
.pill.ferme { font-size: 0.85rem; padding-top: 5px; padding-bottom: 5px; color: #e8cfa6; }
.horaires-table tr.today td { background: rgba(255,170,70,0.07); }
.horaires-table tr.today td.jour::after {
  content: 'aujourd’hui'; display: block; font-family: var(--font-body);
  font-size: 0.66rem; letter-spacing: 2px; text-transform: uppercase; color: var(--gold); margin-top: 4px;
}
.horaires-foot {
  text-align: center; margin-top: 28px; font-family: var(--font-script);
  font-size: clamp(1.6rem, 5vw, 2.1rem); color: var(--gold-light);
}
.horaires-foot small {
  display: block; font-family: var(--font-title); font-size: 0.95rem;
  letter-spacing: 3px; text-transform: uppercase; color: var(--text-dim); margin-top: 8px;
}

/* Contact : deux cartes centrées maintenant que les horaires ont leur section */
.contact-grid.deux { grid-template-columns: repeat(2, 1fr); max-width: 820px; margin: 0 auto; }
.contact-card h3 { color: var(--gold); font-family: var(--font-title); font-size: 1.3rem; }
.contact-card { border-radius: 90px 90px var(--radius) var(--radius); padding-top: 42px; text-align: center; }

@media (max-width: 860px) {
  .contact-grid.deux { grid-template-columns: 1fr; }
  .hero::after { top: 80px; }
}
@media (max-width: 480px) {
  .horaires-arch { border-radius: 50% 50% 14px 14px / 90px 90px 14px 14px; padding-top: 70px; }
  .horaires-arch::before { top: 22px; }
  .horaires-table td { padding: 10px 2px; }
  .pill { font-size: 0.62rem; letter-spacing: 1px; padding-left: 12px; padding-right: 12px; }
  .pill.ferme { font-size: 0.72rem; }
  .espace-card { border-radius: 110px 110px var(--radius) var(--radius); }
  .carte-frame { border-radius: 140px 140px 18px 18px / 50px 50px 18px 18px; padding-top: 50px; }
}

/* =====================================================================
   v2 (01/10/2026) — icônes dorées, lanternes suspendues, correctifs mobile
   ===================================================================== */
.ico {
  width: 1.15em; height: 1.15em; vertical-align: -0.2em; flex-shrink: 0;
  fill: none; stroke: currentColor; stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
}
.ico.petit { width: 1em; height: 1em; color: var(--gold); }
.ico.grand { width: 72px; height: 72px; stroke-width: 1.2; color: var(--gold-light);
  filter: drop-shadow(0 0 14px rgba(255,170,70,0.35)); }
.contact-card h3 { justify-content: center; }
.contact-card h3 .ico { width: 1.3em; height: 1.3em; }
.hero-badge b .ico { width: 1.5rem; height: 1.5rem; stroke-width: 1.4; }
.footer-social a { color: var(--gold-light); }
.footer-social a .ico { width: 20px; height: 20px; }
.footer-social a:hover { box-shadow: 0 0 18px rgba(255,170,70,0.3); }
.espace-card .photo.emoji {
  background: radial-gradient(ellipse at 50% 110%, rgba(255,160,60,0.22), transparent 70%), var(--bg-soft);
}

/* Lanternes : se balancent doucement, la vitre scintille comme une bougie */
.lanterne {
  position: absolute; top: 0; z-index: 0; pointer-events: none;
  width: 70px; height: 198px; transform-origin: 50% 0;
  animation: balance 7s ease-in-out infinite alternate, lueur 2.6s ease-in-out infinite;
  filter: drop-shadow(0 0 18px rgba(255,160,60,0.55));
}
.lanterne.g { left: 3%; }
.lanterne.d { right: 3%; animation-delay: -3.5s; }
.hero .lanterne { top: 58px; z-index: -1; }
.hero .l1 { width: 84px; height: 238px; }
.hero .l2 { width: 76px; height: 215px; top: 40px; }
.hero .l3 { left: 12%; width: 50px; height: 142px; top: 30px; opacity: .75; animation-duration: 9s, 3.1s; }
.hero .l4 { right: 12%; width: 46px; height: 130px; top: 50px; opacity: .75; animation-duration: 8s, 2.3s; }
.horaires .l5 { left: 5%; width: 80px; height: 226px; }
.horaires .l6 { right: 5%; width: 80px; height: 226px; animation-delay: -2s; }
@keyframes balance { from { transform: rotate(-2.2deg); } to { transform: rotate(2.2deg); } }
@keyframes lueur {
  0%, 100% { filter: drop-shadow(0 0 18px rgba(255,160,60,0.55)); }
  35% { filter: drop-shadow(0 0 26px rgba(255,170,70,0.75)); }
  60% { filter: drop-shadow(0 0 14px rgba(255,150,50,0.45)); }
}
.horaires .container { position: relative; z-index: 1; }

@media (max-width: 1000px) {
  .hero .loin { display: none; }
  .horaires .lanterne { width: 50px; height: 142px; }
  .horaires .l5 { left: 1%; } .horaires .l6 { right: 1%; }
}
@media (max-width: 600px) {
  .hero .lanterne { top: 62px; }
  .hero .l1, .hero .l2 { width: 34px; height: 96px; }
  .hero .l2 { top: 62px; }
  .lanterne.g { left: 2px; } .lanterne.d { right: 2px; }
  .horaires .lanterne { display: none; }   /* l'arche occupe toute la largeur */
  .hero-sur { letter-spacing: 3px; font-size: 0.72rem; gap: 10px; white-space: nowrap; }
  .hero-sur::before, .hero-sur::after { width: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .lanterne { animation: none !important; }
}