/* ==========================================================================
   PIZZA FIFI — theme.css  (« Soleil de Juan » — calque clair, chargé EN DERNIER)
   Reconstruction direction ui-ux-pro-max : crème + rouge tomate + or, photo-forward.
   Remplace les hypothèses sombres de l'ancien thème « Braise 1989 ».
   ========================================================================== */

/* — Surfaces de base — */
body { background: var(--bg); color: var(--text); }
main { background: var(--bg); }

/* — NAVIGATION claire (verre crème) — */
.nav { background: color-mix(in srgb, var(--bg) 82%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.nav[data-scrolled] { background: color-mix(in srgb, var(--bg) 95%, transparent); box-shadow: var(--shadow-sm); }
.brand__name { color: var(--text-hi); }
.brand__since, .brand__mark svg circle, .brand__mark svg path { stroke: var(--ember); }
.brand__since { color: var(--amber); }
.nav__links a { color: var(--text); font-weight: 600; }
.nav__links a:hover { color: var(--ember); }
.nav__tel { color: var(--text-lo); }
.nav__tel:hover { color: var(--ember); }
.cart-toggle { background: var(--surface); border: 1px solid var(--line-2); color: var(--text-hi); }
.cart-toggle:hover { border-color: var(--ember); color: var(--ember); }
.cart-count { background: var(--ember); color: #fff; }
.nav__burger-bar { background: var(--text-hi); }
.status-pill { background: var(--surface); border: 1px solid var(--line); color: var(--text-lo); }
.status-pill__dot { background: var(--basil); }
.status-pill.is-rest .status-pill__dot, .status-pill[data-open="false"] .status-pill__dot { background: var(--dough-dim); }

/* — BOUTONS appétissants — */
.btn { border-radius: var(--r-pill); font-weight: 700; transition: transform var(--t-fast) var(--ease), background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease); }
.btn--ember, .btn--add { background: var(--ember); color: #fff; border: 0; box-shadow: var(--shadow-sm); }
.btn--ember:hover, .btn--add:hover { background: var(--ember-deep); color: #fff; transform: translateY(-2px); box-shadow: var(--shadow); }
.btn--ghost { background: var(--surface); color: var(--text-hi); border: 1.5px solid var(--line-2); }
.btn--ghost:hover { border-color: var(--ember); color: var(--ember); transform: translateY(-2px); }
.btn--uber { background: var(--surface); border: 1.5px solid var(--line-2); color: var(--text-hi); }
.btn--uber:hover { border-color: var(--ember); color: var(--ember); }
.btn--block { width: 100%; }

/* — HERO clair, cadré, photo encadrée — */
.hero { background: linear-gradient(180deg, var(--bg-2), var(--bg) 70%); }
.hero__floor { background: none; }   /* halo orange parasite retiré (défaut de couleur) */
.hero__title { font-size: clamp(2.5rem, 1.9rem + 3vw, 4.4rem); line-height: 1.04; color: var(--text-hi); }
.hero__sub { color: var(--text-lo); }
/* Hero : photo unique propre et mise en valeur (médaillon retiré) */
.hero__stage { display: flex; align-items: center; justify-content: center; }
.hero__photo {
  width: 100%; max-width: 480px; margin: 0; position: relative;
  border-radius: var(--r-xl); box-shadow: var(--shadow-lg); border: 6px solid #fff;
  overflow: hidden; will-change: transform;
}
.hero__photo img { width: 100%; height: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.hero__photo::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 -60px 60px -40px rgba(40,18,10,.45); pointer-events: none; }
.hero__photo-cap {
  position: absolute; left: var(--space-4); bottom: var(--space-4); z-index: 2;
  display: inline-flex; align-items: center; gap: .5em;
  background: rgba(42,23,16,.78); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  color: #fff; font-size: var(--step--1); font-weight: 600;
  padding: .45em .9em; border-radius: var(--r-pill);
}
/* flottement très subtil (vie, pas gadget) */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .hero__photo { animation: heroFloat 7s ease-in-out infinite; }
}
@keyframes heroFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.rate__num { color: var(--ember); }
.rate__stars { color: var(--amber); }
.hero__trust-txt { color: var(--text-lo); }
.hero__scroll span { border-color: var(--ember); }

/* — BANDEAU réputation — */
.trust { background: var(--surface); border-block: 1px solid var(--line); }
.trust__big { color: var(--ember); }
.trust__big.metier { color: var(--ember); }
.trust__big.seal { color: var(--amber); }
.trust__lbl { color: var(--text-lo); }
.trust__sep { background: var(--line-2); }

/* — MARQUEE rouge appétissante — */
.marquee { background: var(--ember); border-block: 0; }
.marquee__item { color: #fff; }
.marquee__sep { color: rgba(255,255,255,.55); }

/* — EN-TÊTES de section — */
.sec-head__title { color: var(--text-hi); }
.sec-head__lead { color: var(--text-lo); }
.kicker { color: var(--ember); }
.kicker::before { background: var(--amber); box-shadow: none; }

/* — SIGNATURES (cartes photo) — */
.sig { border-radius: var(--r-lg); box-shadow: var(--shadow); border: 1px solid var(--line); }
.sig__name { color: #fff; }
.sig__desc { color: rgba(255,255,255,.88); }
.sig__price { color: #fff; }
.sig__add { background: var(--ember); color: #fff; border-radius: var(--r-pill); }
.sig__add:hover { background: var(--ember-deep); }

/* — CARTE : grille de CARTES-PHOTOS (image pour chaque pizza) — */
.menu { background: var(--bg); }
.menu-cat { margin-bottom: var(--space-8); }
.menu-cat__head { text-align: center; max-width: 60ch; margin: 0 auto var(--space-6); }
.menu-cat__title { font-size: var(--step-3); color: var(--text-hi); }
.menu-cat__note { color: var(--text-lo); font-style: italic; max-width: none; }
.menu-cat__list {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--space-5);
}
.dish {
  flex: 1 1 250px; max-width: 318px; min-width: 230px;
  display: flex; flex-direction: column; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}
.dish:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.dish__media { display: block !important; height: clamp(170px, 15vw, 205px); flex: 0 0 auto; overflow: hidden; position: relative; background: var(--bg-2); }
.dish__media--none { display: none !important; }
.dish__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow) var(--ease); }
.dish:hover .dish__media img { transform: scale(1.06); }
.dish__media--none { display: none; }
.dish__media-badges { position: absolute; top: .55rem; left: .55rem; display: flex; gap: .4rem; z-index: 2; }
.dish__body { padding: var(--space-4) var(--space-4) var(--space-2); display: flex; flex-direction: column; gap: .35rem; flex: 1 1 auto; }
.dish__head { display: flex; justify-content: space-between; align-items: baseline; gap: .6rem; }
.dish__name { font-size: var(--step-1); color: var(--text-hi); line-height: 1.15; }
.dish__price { color: var(--ember); font-weight: 700; }
.dish__price-old { color: var(--text-lo); font-weight: 400; }
.dish__desc { font-size: var(--step--1); color: var(--text-lo); line-height: 1.45; max-width: none; }
.dish__actions { padding: var(--space-3) var(--space-4) var(--space-4); display: flex; gap: .5rem; margin-top: auto; }
.dish__actions .btn { flex: 1 1 auto; padding: .62em .8em; min-height: 44px; font-size: .92rem; }
.dish.is-sold { opacity: .7; }
.dish__tags { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .3rem; }
.dish__tag { font-size: .68rem; font-weight: 700; padding: .2em .6em; border-radius: var(--r-pill); border: 1px solid var(--line-2); color: var(--text-lo); background: var(--bg-2); }
.dish__tag--basil { color: var(--basil-lite); border-color: color-mix(in srgb, var(--basil) 35%, var(--line)); }
.dish__badge { font-size: .66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; padding: .3em .65em; border-radius: var(--r-pill); }
.dish__badge--promo { background: var(--amber); color: #3a2400; }
.dish__badge--sold { background: var(--sanmarzano); color: #fff; }

/* — Onglets de la carte — */
.menu__tabs { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin-bottom: var(--space-6); }
.menu__tabs button { background: var(--surface); border: 1px solid var(--line-2); color: var(--text); border-radius: var(--r-pill); padding: .55em 1.15em; font-weight: 600; transition: all var(--t-fast) var(--ease); }
.menu__tabs button:hover { border-color: var(--ember); color: var(--ember); }
.menu__tabs button[aria-selected="true"], .menu__tabs button.is-active { background: var(--ember); color: #fff; border-color: var(--ember); }

/* — COMPOSER / ÉTAPES / FOUR / ENGAGEMENTS — */
.composer { background: var(--bg-2); }
.composer__media img, .four__photo img { border-radius: var(--r-lg); box-shadow: var(--shadow); }
.composer__note { color: var(--text-lo); }
.steps { background: var(--bg); }
.step { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); }
.step__n { color: var(--ember); }
.step__ico { color: var(--ember); }
.step__title { color: var(--text-hi); }
.step p { color: var(--text-lo); }
.step::after { background: linear-gradient(var(--amber), transparent); }
.four { background: var(--bg-2); }
.four__copy p { color: var(--text); }
.four__facts-n { color: var(--ember); }
.four__facts li { color: var(--text-lo); }
.pledges { background: var(--bg); }
.pledge { border-top: 3px solid var(--ember); }
.pledge__ico { color: var(--ember); }
.pledge__title { color: var(--text-hi); }
.pledge p { color: var(--text-lo); }

/* — RECOMMANDATION DU CHEF — */
.chef { background: var(--bg-2); }
.chef__media { box-shadow: var(--shadow-lg); border: 5px solid #fff; aspect-ratio: 4 / 3; }
.chef__badge { background: rgba(42,23,16,.7); color: #fff; border: 0; }
.chef__note { color: var(--text-hi); }
.chef__sign { color: var(--text-lo); font-style: italic; margin-top: var(--space-3); }
.chef__sign span { color: var(--ember); font-weight: 700; font-style: normal; }
.chef__pick-name { color: var(--ember); }

/* — AVIS : VITRINE DE COMPLIMENTS (mur de cartes côte à côté, masonry) — */
.reviews { background: var(--bg); }
.reviews__head h2 .metier { color: var(--ember); }
.rwall {
  position: static; min-height: 0;
  columns: 3 290px; column-gap: var(--space-5);
  max-width: 1140px; margin: var(--space-7) auto 0;
}
.rwall .rdeck__card {
  position: static; left: auto; top: auto;
  transform: none; opacity: 1; filter: none; width: 100%;
  display: flex; break-inside: avoid; -webkit-column-break-inside: avoid;
  margin: 0 0 var(--space-5); padding: var(--space-5);
  background: var(--surface); color: var(--text);
  border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-sm);
  transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}
.rwall .rdeck__card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.rwall .rquote__text { color: var(--text-hi); font-size: var(--step-0); line-height: 1.5; }
.rwall .rquote__text::before { content: "« "; color: var(--ember); }
.rwall .rquote__text::after { content: " »"; color: var(--ember); }
.rwall .rquote__src { color: var(--text-lo); margin-top: auto; }
.rwall .rdeck__stars { color: var(--amber); }
.rsub__label { color: var(--text-lo); }
.rsub__val { color: var(--text-hi); }
.rsub__fill { background: linear-gradient(90deg, var(--amber), var(--ember)); }
@media (max-width: 880px) { .rwall { columns: 2 240px; } }
@media (max-width: 540px) { .rwall { columns: 1; } }

/* — CINÉMA : témoignage lisible (texte BLANC sur photo) + plus cinématique — */
.cinema { isolation: isolate; }
.cinema__bg { filter: saturate(1.05) brightness(.92); height: 122%; top: -11%; object-fit: cover; }
.cinema::after { background: linear-gradient(90deg, rgba(28,16,10,.82), rgba(28,16,10,.55) 55%, rgba(28,16,10,.32)) !important; }
.cinema__quote p { color: #fff; }
.cinema__quote p .metier { color: var(--amber-light); }
.cinema__quote cite { color: var(--amber); }

/* — INFOS / HORAIRES / CARTE / FOOTER — */
.infos { background: var(--bg-2); }
.infos__addr strong { color: var(--text-hi); }
.cartouche--cash { background: var(--surface); border: 1px solid var(--line); color: var(--text); }
.cartouche--cash strong { color: var(--text-hi); }
.cartouche--cash p { color: var(--text-lo); }
.hours__row { border-bottom: 1px solid var(--line); color: var(--text); }
.hours__row.is-today { color: var(--ember); font-weight: 700; }
.hours__day { color: var(--text-hi); }
#map { border-radius: var(--r-lg); border: 1px solid var(--line); overflow: hidden; }
.footer { background: var(--text-hi); color: #f7ece0; }
.footer .brand__name { color: #fff; }
.footer__brand p { color: rgba(255,255,255,.7); }
.footer__nav a { color: rgba(255,255,255,.85); }
.footer__nav a:hover { color: var(--amber); }
.footer__meta, .footer__credit { color: rgba(255,255,255,.55); }
.footer__meta a { color: var(--amber); font-weight: 600; }
.footer__meta a:hover { color: #fff; }
.footer .seal { color: var(--amber); }

/* — Polish premium (inspiré 21st.dev, sobre) — */
.dish__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(40,18,10,.26), transparent 36%); pointer-events: none; z-index: 1; }
.dish:hover { box-shadow: var(--shadow-lg); }
.dish__media img { transform-origin: center; }
/* accent doré centré sous les titres de section (touche éditoriale premium) */
.sec-head__title::after, .menu-cat__title::after {
  content: ""; display: block; width: 52px; height: 3px; margin: .55em auto 0;
  border-radius: 3px; background: linear-gradient(90deg, var(--ember), var(--amber));
}
.chef__copy .sec-head__title::after, .reviews__head h2::after { margin-left: 0; margin-right: auto; }

/* — Micro-animations pro (sobres, pas IA-slop) — */
.sig { transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease); }
.sig:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.sig img { transition: transform var(--t-slow) var(--ease); }
.sig:hover img { transform: scale(1.05); }
.pledge__ico { transition: transform var(--t-base) var(--ease-back); }
.pledge:hover .pledge__ico { transform: translateY(-3px) scale(1.08); }
.step { transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease); }
.step:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.trust__item { transition: transform var(--t-fast) var(--ease); }
.cart-count { transition: transform var(--t-fast) var(--ease-back); }

/* — PANIER + MODALE clairs — */
.cart { background: var(--surface); color: var(--text); box-shadow: var(--shadow-lg); border-left: 1px solid var(--line); }
.cart__title { color: var(--text-hi); }
.cart__close { color: var(--text-lo); }
.cart__mode-btn { background: var(--bg-2); color: var(--text); border: 1px solid var(--line); }
.cart__mode-btn.is-active { background: var(--ember); color: #fff; border-color: var(--ember); }
.field { background: var(--surface); border: 1px solid var(--line-2); color: var(--text); border-radius: var(--r-sm); }
.field:focus { border-color: var(--ember); outline: none; }
.cart__total { color: var(--text-hi); }
.cart__cash { color: var(--text-lo); }
.cart__empty { color: var(--text-lo); }
.modal__panel, .modal__panel.cz { background: var(--surface); color: var(--text); }
.cz__photo { aspect-ratio: 16 / 9; border-radius: var(--r-md); overflow: hidden; margin-bottom: var(--space-4); }
.cz__name { color: var(--text-hi); }
.cz__desc { color: var(--text-lo); }
.cz__group legend { color: var(--text-hi); }
#cz-add { background: var(--ember); color: #fff; }
.qty__btn { background: var(--bg-2); border: 1px solid var(--line); color: var(--text-hi); }
.modal__close { color: var(--text-lo); }

/* — TOASTS — */
.toast { background: var(--text-hi); color: #fff; box-shadow: var(--shadow); }

/* — UBER liens — */
.ubereats-link { color: var(--text-lo); }
.ubereats-link strong { color: var(--ember); }
.lnk-uber { color: var(--ember); border-bottom-color: color-mix(in srgb, var(--ember) 45%, transparent); }

/* — Responsive carte — */
@media (max-width: 560px) {
  .menu-cat__list { grid-template-columns: 1fr 1fr; gap: var(--space-3); }
  .dish__body { padding: var(--space-3); }
  .dish__actions { padding: 0 var(--space-3) var(--space-3); }
  .dish__name { font-size: var(--step-0); }
}

/* ==========================================================================
   CLEANUP AUDIT (workflow 4 agents) — restes du theme sombre + symetrie + slop
   ========================================================================== */
/* 2e halo orange pulsant du hero (.hero__stage::before, oublie) — neutralise */
.hero__stage::before { background: none !important; animation: none !important; }
/* ombre interne de la photo hero : allegee et chaude (etait brun-noir lourde) */
.hero__photo::after { box-shadow: inset 0 -40px 48px -42px rgba(120,70,40,.30); }

/* CARTE : grille reguliere (colonnes alignees) au lieu du flex centre (orphelin jagged) */
.menu-cat__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: var(--space-5); justify-content: stretch; }
.dish { flex: initial; max-width: none; }
.menu-cat__head { display: block; text-align: center; max-width: 60ch; margin: 0 auto var(--space-6); }
.menu-cat__note { grid-column: auto; max-width: 60ch; margin: .4rem auto 0; text-align: center; }
@media (max-width: 560px) { .menu-cat__list { grid-template-columns: 1fr 1fr; } }

/* MUR D'AVIS : grille auto-fit (rangees alignees) au lieu du masonry orphelin */
.rwall { columns: initial; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-5); max-width: 1140px; margin: var(--space-7) auto 0; align-items: start; }
.rwall .rdeck__card { margin: 0; width: 100%; break-inside: auto; }
@media (max-width: 880px) { .rwall { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .rwall { grid-template-columns: 1fr; } }

/* Barres de sous-notes (etaient invisibles : pas de width/height) */
.rsub { display: flex; flex-direction: column; gap: .35em; }
.rsub__val { order: 0; font-family: var(--font-display); font-size: var(--step-2); color: var(--text-hi); line-height: 1; }
.rsub__label { order: 1; font-size: var(--step--1); color: var(--text-lo); }
.rsub__bar { order: 2; width: 100%; max-width: 140px; height: 4px; border-radius: var(--r-pill); background: var(--line); overflow: hidden; }
.rsub__fill { display: block; height: 100%; width: var(--rfill, 0%); background: linear-gradient(90deg, var(--amber), var(--ember)); border-radius: inherit; }

/* Coups de coeur : scrim CHAUD (etait bleu-noir froid hors palette) */
.sig__grad { background: linear-gradient(to top, rgba(42,23,16,.88) 4%, rgba(42,23,16,.42) 40%, rgba(42,23,16,0) 66%); }
/* Photos : retirer la desaturation heritee du theme sombre (nourriture plus vive) */
.g-item img, .sig img { filter: saturate(1.04); }

/* Section four : combler les triangles vides (photos elargies, hauteur reduite) */
.four__photo--a { width: 70%; }
.four__photo--b { width: 62%; bottom: 0; right: 0; }
.four__media { min-height: clamp(340px, 34vw, 460px); }
.four__in { align-items: stretch; }

/* Carte Leaflet : tuiles CLAIRES (etaient assombries brightness .82) */
#map .leaflet-tile { filter: saturate(.96) contrast(1.01); }
#map .leaflet-control-attribution { background: color-mix(in srgb, var(--surface) 88%, transparent); color: var(--text-lo); }
#map .leaflet-control-attribution a { color: var(--ember); }

/* Engagements : filet plus fin (etait 3px = effet 4 barres rouges) */
.pledge { border-top: 2px solid var(--ember); padding-top: var(--space-4); }
/* Separateur reputation : filet uniforme */
.trust__sep { background: var(--line); }
/* Signature Orz : discrete MAIS lisible (etait ~0.27 alpha = quasi invisible) */
.footer__credit { opacity: 1; color: rgba(247,236,224,.5); }

/* ==========================================================================
   APERCU PIZZA 3D (customizer) — la pizza change vraiment selon les ingredients
   ========================================================================== */
.cz__stage {
  position: relative; margin: 0 0 var(--space-4);
  border-radius: var(--r-md); overflow: hidden;
  aspect-ratio: 16 / 10;
  background:
    radial-gradient(120% 90% at 50% 18%, #FFF6E9 0%, #F7E9D2 52%, #F0DEC2 100%);
  border: 1px solid var(--line);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), var(--shadow-sm);
  cursor: grab; touch-action: none;
}
.cz__stage:active { cursor: grabbing; }
.cz__canvas { display: block; width: 100%; height: 100%; }
.cz__hint {
  position: absolute; left: 50%; bottom: .6rem; transform: translateX(-50%);
  font-size: var(--step--1); color: var(--text-lo);
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  padding: .25em .8em; border-radius: var(--r-pill); white-space: nowrap;
  pointer-events: none; opacity: .9;
}
@media (max-width: 760px) { .cz__hint { font-size: .72rem; } .cz__stage { aspect-ratio: 4 / 3; } }