/* ══════════════════════════════════════════════════════════════════════
   theme-2026.css — Design V4 « Ardoise & lumière » (page de test)
   Chargé EN DERNIER, uniquement par index-test-v4.html.
   Toutes les règles sont limitées à body.v4 : aucun effet ailleurs.
   Palette et typographies validées (octobre 2026).
   ══════════════════════════════════════════════════════════════════════ */
body.v4 {
  --v4-ardoise-0: #17130F; --v4-ardoise: #241E18; --v4-ardoise-2: #3A3027;
  --v4-pierre: #8C7B68; --v4-pierre-2: #CFC3B2;
  --v4-farine: #FAF7F1; --v4-creme: #F4EFE6; --v4-creme-2: #EDE4D3;
  --v4-jaune: #EEC535; --v4-jaune-2: #F5D45E; --v4-dore: #E8BD60;
  --v4-rouge: #C8361F; --v4-rouge-2: #A92B17;
  --v4-encre: #1B0E0E; --v4-encre-2: #5E5248; --v4-creme-txt: #C9BFB1;
  --v4-titre: 'Fraunces', Georgia, serif;
  --v4-texte: 'Figtree', 'Trebuchet MS', system-ui, sans-serif;
  font-family: var(--v4-texte) !important;
  background: var(--v4-farine) !important;
}
body.v4 h1, body.v4 h2, body.v4 h3, body.v4 .section-title { font-family: var(--v4-titre) !important; letter-spacing: -.01em; }
body.v4 button, body.v4 input, body.v4 select, body.v4 textarea { font-family: var(--v4-texte); }

/* ── Boutons V4 ── */
body.v4 .v4-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 26px; border-radius: 999px; text-decoration: none;
  font-family: var(--v4-texte); font-weight: 700; font-size: 15px; letter-spacing: .4px; text-transform: uppercase;
  cursor: pointer; transition: background .2s, transform .2s, border-color .2s; border: 1px solid transparent;
}
body.v4 .v4-btn-primary { background: var(--v4-jaune); color: var(--v4-encre); }
body.v4 .v4-btn-primary:hover { background: var(--v4-jaune-2); transform: translateY(-1px); }
body.v4 .v4-btn-ghost { background: transparent; color: var(--v4-creme); border-color: rgba(244,239,230,.45); }
body.v4 .v4-btn-ghost:hover { background: rgba(244,239,230,.10); border-color: var(--v4-creme); }
body.v4 .v4-btn:focus-visible, body.v4 .v4-seg-btn:focus-visible, body.v4 .tab:focus-visible { outline: 3px solid var(--v4-jaune); outline-offset: 3px; }

/* ══ EN-TÊTE intégré au Hero ══ */
html body.v4 header {
  background: transparent !important; background-image: none !important; box-shadow: none !important;
  transition: background .3s, box-shadow .3s, backdrop-filter .3s;
}
html body.v4.v4-scrolled header {
  background: rgba(23,19,15,.90) !important; box-shadow: 0 6px 24px rgba(0,0,0,.25) !important;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
body.v4 header .nav-inner { height: 84px; transition: height .3s; }
body.v4.v4-scrolled header .nav-inner { height: 64px; }
body.v4 header .logo-complet {
  background: #FFFFFF !important; border-radius: 12px; padding: 6px 12px !important; height: 58px !important; width: auto !important;
  box-shadow: 0 6px 22px rgba(0,0,0,.35); transition: height .3s;
}
body.v4.v4-scrolled header .logo-complet { height: 44px !important; }
body.v4 header nav { gap: 26px; }
body.v4 header .v4-navlink {
  color: var(--v4-creme) !important; text-decoration: none; font-weight: 600; font-size: 13px; letter-spacing: 1.2px; text-transform: uppercase;
  padding: 6px 0; border-bottom: 2px solid transparent; transition: color .2s, border-color .2s; background: none !important;
}
body.v4 header .v4-navlink:hover { color: var(--v4-jaune) !important; border-bottom-color: var(--v4-jaune); }
body.v4 header .cart-btn, body.v4 header .cart-btn > span:not(.cart-count) { color: var(--v4-creme) !important; }
body.v4 header .hero-livreur { display: none !important; }          /* scooter animé : retiré de la V4 */
body.v4 .trust-bar { display: none !important; }                    /* bandeau chiffres : à replacer plus tard (voir rapport) */
@media (max-width: 900px) {
  body.v4 header .nav-inner { height: 68px; }
  body.v4 header .logo-complet { height: 44px !important; padding: 4px 9px !important; }
  body.v4 header nav .v4-navlink { color: var(--v4-encre) !important; font-size: 15px; display: block; padding: 10px 0; }
}

/* ══ HERO « Ardoise & lumière » ══ */
body.v4 .hero.v4-hero {
  position: relative; min-height: 100vh; min-height: 100svh; padding: 140px 0 96px !important; display: flex; align-items: center;
  background-color: var(--v4-ardoise-0) !important;
  background-image:
    linear-gradient(90deg, rgba(20,17,15,.78) 0%, rgba(20,17,15,.42) 42%, rgba(20,17,15,0) 64%),
    linear-gradient(180deg, rgba(20,17,15,.55) 0%, rgba(20,17,15,0) 22%, rgba(20,17,15,0) 70%, var(--v4-ardoise-0) 100%),
    url('images/hero-v4.jpg') !important;
  background-size: cover, cover, cover !important; background-position: center, center, right center !important; background-repeat: no-repeat !important;
  overflow: hidden; color: var(--v4-creme);
}
body.v4 .v4-hero-contenu { max-width: 600px; display: flex; flex-direction: column; gap: 22px; position: relative; z-index: 2; }
body.v4 .v4-hero-kicker { font-size: 13px; letter-spacing: 6px; text-transform: uppercase; color: var(--v4-dore); font-weight: 600; }
body.v4 .v4-hero-titre {
  margin: 0; font-family: var(--v4-titre) !important; font-weight: 700; font-size: clamp(40px, 5.4vw, 72px); line-height: 1.02;
  text-transform: uppercase; color: var(--v4-creme); letter-spacing: -1px;
}
body.v4 .v4-hero-texte { margin: 0; font-size: 18px; line-height: 1.6; color: rgba(244,239,230,.84); max-width: 480px; }
body.v4 .v4-hero-boutons { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 6px; }
body.v4 .v4-hero .hero-phone-cta { text-decoration: none; }
body.v4 .v4-hero .hero-phone-cta svg { width: 18px; height: 18px; }
body.v4 .v4-hero .hero-phone-cta.resto-ferme { opacity: .7; }
/* Statut ouvert / fermé (horaires-enseigne.js écrit dans #enseigne-horaire) */
body.v4 .v4-hero #enseigne-horaire {
  position: static !important; transform: none !important; margin: 0 !important; align-self: flex-start;
  display: inline-flex; align-items: center; min-height: 32px; padding: 0 14px !important; border-radius: 999px !important;
  font-family: var(--v4-texte) !important; font-size: 13px !important; font-weight: 700 !important; letter-spacing: .5px;
  background: rgba(23,19,15,.6) !important; border: 1px solid rgba(232,189,96,.55) !important; color: var(--v4-creme) !important;
  box-shadow: none !important; text-shadow: none !important;
}
/* Barre d'adresse (zones-livraison.js : #apHeroAdresse + apHeroVerifierZone) */
body.v4 .v4-hero .zone-search-band { width: 100%; max-width: 480px; margin: 4px 0 0 !important; position: static !important; transform: none !important; }
body.v4 .v4-hero .zone-search-band__form {
  display: flex; align-items: center; gap: 10px; padding: 6px 6px 6px 18px !important; border-radius: 999px !important;
  background: rgba(244,239,230,.10) !important; border: 1px solid rgba(244,239,230,.24) !important; box-shadow: none !important;
}
body.v4 .v4-hero .zone-search-band__icon { color: var(--v4-creme); display: flex; }
body.v4 .v4-hero .zone-search-band__input {
  flex: 1; min-width: 0; background: transparent !important; border: 0 !important; outline: none; color: var(--v4-creme) !important; font-size: 15px !important;
}
body.v4 .v4-hero .zone-search-band__input::placeholder { color: rgba(244,239,230,.6); }
body.v4 .v4-hero .zone-search-band__btn {
  min-height: 42px; padding: 0 20px !important; border-radius: 999px !important; border: 0 !important;
  background: var(--v4-creme) !important; color: var(--v4-encre) !important; font-weight: 700 !important; font-size: 13px !important; letter-spacing: .5px; text-transform: uppercase; cursor: pointer;
}
body.v4 .v4-hero-flyer { color: rgba(244,239,230,.75); font-size: 14px; text-decoration: underline; text-underline-offset: 4px; align-self: flex-start; }
body.v4 .v4-hero-flyer:hover { color: var(--v4-jaune); }
@media (max-width: 760px) {
  body.v4 .hero.v4-hero {
    min-height: auto; padding: 0 0 40px !important; align-items: flex-end;
    background-image:
      linear-gradient(180deg, rgba(20,17,15,.35) 0%, rgba(20,17,15,0) 14%, rgba(20,17,15,0) 30%, rgba(20,17,15,.9) 52%, var(--v4-ardoise-0) 66%),
      url('images/hero-v4-960.jpg') !important;
    background-size: cover, auto 520px !important; background-position: center, 78% 0 !important;
  }
  body.v4 .v4-hero-contenu { padding-top: 390px; gap: 16px; }
  body.v4 .v4-hero-kicker { font-size: 11px; letter-spacing: 4px; }
  body.v4 .v4-hero-texte { font-size: 15px; }
  body.v4 .v4-hero-boutons .v4-btn { flex: 1 1 140px; }
}

/* ══ LA CARTE : transition ardoise → pierre → crème → farine ══ */
html body.v4 .menu-section {
  position: relative; padding: 0 0 96px !important; color: var(--v4-encre) !important;
  background:
    radial-gradient(520px 150px at 22% 200px, rgba(250,247,241,.16) 0%, rgba(250,247,241,0) 70%),
    radial-gradient(360px 110px at 58% 170px, rgba(250,247,241,.10) 0%, rgba(250,247,241,0) 70%),
    linear-gradient(180deg, var(--v4-ardoise-0) 0px, var(--v4-ardoise-0) 40px, var(--v4-ardoise) 90px, var(--v4-ardoise-2) 140px, var(--v4-pierre) 200px, var(--v4-pierre-2) 255px, var(--v4-creme-2) 300px, var(--v4-farine) 350px, var(--v4-farine) 100%) !important;
}
body.v4 .v4-medaillon {
  position: absolute; right: 8%; top: -150px; width: 340px; height: 340px; border-radius: 50%; z-index: 3;
  background: var(--v4-ardoise) url('images/hero-v4.jpg') 72% 52% / 1800px auto no-repeat;
  border: 10px solid var(--v4-ardoise); box-shadow: 0 30px 60px rgba(0,0,0,.45);
}
body.v4 .v4-carte-grille { display: grid; grid-template-columns: minmax(300px, 440px) 1fr; gap: 72px; align-items: start; padding-top: 300px; }
body.v4 .v4-carte-aside { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 18px; }
body.v4 .v4-kicker { font-size: 12px; letter-spacing: 5px; text-transform: uppercase; color: var(--v4-pierre); font-weight: 700; }
body.v4 .v4-carte-titre { margin: 0; font-family: var(--v4-titre) !important; font-size: clamp(48px, 5vw, 72px); line-height: .95; font-weight: 700; color: var(--v4-encre) !important; letter-spacing: -1.5px; }
body.v4 .v4-carte-texte { margin: 0; font-size: 17px; line-height: 1.6; color: var(--v4-encre-2); }
body.v4 .v4-legende { display: flex; gap: 26px; align-items: flex-end; margin: 10px 0 4px; }
body.v4 .v4-legende-item { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--v4-encre); }
body.v4 .v4-legende-item small { font-weight: 400; color: var(--v4-encre-2); font-size: 12px; margin-top: -4px; }
body.v4 .v4-legende-rond { border-radius: 50%; border: 2px dashed var(--v4-pierre); background: rgba(238,197,53,.10); }

/* Signature mise en avant (rempli par theme-2026.js) */
body.v4 #v4-signature-slot { position: relative; border-radius: 22px; overflow: hidden; background: var(--v4-ardoise-0); color: var(--v4-creme); box-shadow: 0 24px 50px rgba(27,14,14,.22); margin-top: 10px; }
body.v4 #v4-signature-slot[hidden] { display: none; }
body.v4 .v4-sig-photo { height: 230px; background: var(--v4-ardoise) center / cover no-repeat; }
body.v4 .v4-sig-badge { position: absolute; top: 16px; left: 16px; background: var(--v4-rouge); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; padding: 7px 12px; border-radius: 999px; }
body.v4 .v4-sig-corps { padding: 22px 26px 26px; display: flex; flex-direction: column; gap: 8px; }
body.v4 .v4-sig-kicker { font-size: 11px; letter-spacing: 4px; text-transform: uppercase; color: var(--v4-dore); font-weight: 600; }
body.v4 .v4-sig-ligne { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
body.v4 .v4-sig-nom { font-family: var(--v4-titre); font-size: 28px; font-weight: 700; }
body.v4 .v4-sig-prix { font-size: 20px; font-weight: 800; color: var(--v4-jaune); white-space: nowrap; }
body.v4 .v4-sig-desc { font-size: 14px; line-height: 1.5; color: var(--v4-creme-txt); }
body.v4 .v4-sig-ajouter { align-self: flex-start; margin-top: 8px; min-height: 44px; }

/* Encart Ma pizza */
body.v4 .v4-mapizza { border: 1.5px dashed var(--v4-pierre-2); border-radius: 22px; padding: 20px 22px; display: flex; align-items: center; justify-content: space-between; gap: 16px; background: #fff; }
body.v4 .v4-mapizza strong { display: block; font-family: var(--v4-titre); font-size: 22px; color: var(--v4-encre); }
body.v4 .v4-mapizza span { font-size: 14px; color: var(--v4-encre-2); }
body.v4 .v4-mapizza button { min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--v4-encre); background: transparent; color: var(--v4-encre); font-weight: 700; font-size: 13px; letter-spacing: .5px; text-transform: uppercase; cursor: pointer; white-space: nowrap; }
body.v4 .v4-mapizza button:hover { background: var(--v4-encre); color: var(--v4-farine); }

/* Onglets : texte souligné */
body.v4 #menu .menu-tabs { display: flex; flex-wrap: wrap; gap: 6px 24px; justify-content: flex-start; margin: 0 0 18px; padding: 0; border-bottom: 1px solid var(--v4-pierre-2); overflow: visible; }
body.v4 #menu .menu-tabs .tab {
  background: none !important; box-shadow: none !important; border: 0 !important; border-radius: 0 !important; padding: 10px 0 !important;
  font-family: var(--v4-texte); font-size: 14px !important; font-weight: 500; color: var(--v4-encre-2) !important; border-bottom: 2px solid transparent !important; margin-bottom: -1px;
}
body.v4 #menu .menu-tabs .tab:hover { color: var(--v4-encre) !important; }
body.v4 #menu .menu-tabs .tab.active { color: var(--v4-encre) !important; font-weight: 700; border-bottom-color: var(--v4-jaune) !important; }

/* Onglet Pizzas : 4 groupes visibles ensemble (les conteneurs gardent leurs identifiants) */
body.v4 #tab-pizzas.active { display: block !important; padding: 0 !important; }
body.v4 #tab-pizzas .pizza-tab { display: flex !important; flex-direction: column; gap: 0; padding: 0 !important; grid-template-columns: none !important; }
body.v4 .v4-groupe { display: flex; align-items: center; gap: 14px; margin: 26px 0 4px; }
body.v4 .v4-groupe[hidden] { display: none; }
body.v4 .v4-groupe span { font-family: var(--v4-titre); font-style: italic; font-weight: 500; font-size: 22px; color: var(--v4-pierre); white-space: nowrap; }
body.v4 .v4-groupe i { flex: 1; height: 1px; background: var(--v4-pierre-2); }
body.v4 #menu .tab-note { order: 99; font-size: 12px; color: var(--v4-pierre); margin: 8px 0 0; }

/* Listes des onglets « carte de pizzeria » (hors PizzaWiches et Ma pizza, inchangés) */
body.v4 #tab-pates.active, body.v4 #tab-salades.active, body.v4 #tab-texmex.active, body.v4 #tab-panizzan.active,
body.v4 #tab-formules.active, body.v4 #tab-desserts.active, body.v4 #tab-boissons.active {
  display: flex !important; flex-direction: column; gap: 0; padding: 6px 0 0 !important; grid-template-columns: none !important;
}

/* Cartes produits → lignes « carte de pizzeria » */
body.v4 #menu .menu-v-card, body.v4 #menu .gc-card {
  display: grid !important; grid-template-columns: 96px 1fr; gap: 0 20px; align-items: start;
  width: auto !important; max-width: none !important; flex: none !important; margin: 0 !important;
  background: transparent !important; box-shadow: none !important; border-radius: 0 !important; overflow: visible !important;
  border-bottom: 1px solid var(--v4-creme-2); padding: 18px 0 !important; color: var(--v4-encre) !important; transform: none !important;
}
body.v4 #menu .menu-v-photo, body.v4 #menu .gc-img {
  width: 96px !important; height: 96px !important; aspect-ratio: 1 / 1; border-radius: 50% !important; overflow: hidden; position: relative;
  background: var(--v4-ardoise) !important; box-shadow: 0 12px 26px rgba(27,14,14,.18); display: flex; align-items: center; justify-content: center; font-size: 2.2rem;
}
body.v4 #menu .menu-v-photo img, body.v4 #menu .gc-img img { width: 100% !important; height: 100% !important; object-fit: cover; }
body.v4 #menu .gc-img-fallback { aspect-ratio: auto !important; height: 100%; background: transparent !important; }
body.v4 #menu .menu-card-badge, body.v4 #menu .gc-badge {
  position: absolute; left: 50%; bottom: 4px; transform: translateX(-50%); white-space: nowrap;
  background: var(--v4-rouge) !important; color: #fff !important; font-size: 9px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; padding: 3px 7px; border-radius: 999px;
}
body.v4 #menu .menu-v-content, body.v4 #menu .gc-body {
  display: grid !important; grid-template-columns: 1fr auto; align-items: baseline; gap: 6px 12px; padding: 0 !important; min-width: 0; background: transparent !important;
}
body.v4 #menu .menu-v-content h4, body.v4 #menu .gc-body h3 {
  grid-column: 1; grid-row: 1; margin: 0; display: flex; align-items: baseline; gap: 10px; min-width: 0;
  font-family: var(--v4-titre) !important; font-size: 23px !important; font-weight: 700; color: var(--v4-encre) !important; text-align: left;
}
body.v4 #menu .menu-v-content h4::after, body.v4 #menu .gc-body h3::after {
  content: ''; flex: 1; min-width: 24px; border-bottom: 2px dotted var(--v4-pierre-2); transform: translateY(-5px);
}
body.v4 #menu .menu-v-content:not(:has(.menu-card-prix)) h4::after { display: none; }
body.v4 #menu .menu-card-prix, body.v4 #menu .gc-prix {
  grid-column: 2; grid-row: 1; font-family: var(--v4-texte) !important; font-size: 17px !important; font-weight: 800; color: var(--v4-encre) !important; white-space: nowrap; margin: 0 !important;
}
body.v4 #menu .ingr-tags, body.v4 #menu .gc-ingr { grid-column: 1 / -1; grid-row: 2; margin: 0 !important; display: block !important; font-size: 14px; line-height: 1.45; color: var(--v4-encre-2) !important; text-align: left; }
body.v4 #menu .itag { display: inline !important; background: none !important; border: 0 !important; padding: 0 !important; font-size: 14px !important; color: var(--v4-encre-2) !important; }
body.v4 #menu .itag:not(:last-child)::after { content: ', '; }
body.v4 #menu .menu-v-content > button, body.v4 #menu .menu-v-content > div:not(.menu-card-prix):not(.ingr-tags), body.v4 #menu .gc-footer {
  grid-column: 1 / -1; grid-row: 3; margin-top: 6px;
}
body.v4 #menu .gc-footer { display: flex !important; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; background: transparent !important; padding: 0 !important; border: 0 !important; }
body.v4 #menu .gc-footer .gc-prix { margin-right: auto !important; }
body.v4 #menu .menu-v-content > button.mv-add-btn { justify-self: end; }

/* Boutons d'ajout */
body.v4 #menu .mv-add-btn, body.v4 #menu .gc-btn {
  min-height: 40px; padding: 0 18px !important; border-radius: 999px !important; border: 0 !important; cursor: pointer;
  background: var(--v4-jaune) !important; color: var(--v4-encre) !important; font-family: var(--v4-texte) !important; font-weight: 700 !important; font-size: 13px !important;
  letter-spacing: .4px; text-transform: uppercase; box-shadow: none !important; transition: background .2s, transform .2s; width: auto !important; flex: 0 0 auto !important;
}
body.v4 #menu .mv-add-btn:hover, body.v4 #menu .gc-btn:hover { background: var(--v4-jaune-2) !important; transform: translateY(-1px); }

/* Sélecteur de taille Junior / Senior / Méga (pilote le <select> d'origine, masqué) */
body.v4 #menu .mv-size-wrap { display: flex !important; align-items: center; gap: 10px; background: transparent !important; padding: 0 !important; }
body.v4 #menu select.mv-size-sel[data-v4-seg="1"] { display: none !important; }
body.v4 .v4-seg { display: inline-flex; flex: 0 1 auto; border: 1px solid var(--v4-pierre-2); border-radius: 999px; overflow: hidden; background: #fff; margin-right: auto; }
body.v4 .v4-seg-btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; min-height: 44px; min-width: 92px; padding: 4px 12px;
  border: 0; border-left: 1px solid var(--v4-pierre-2); background: transparent; color: var(--v4-encre); cursor: pointer; font-family: var(--v4-texte); line-height: 1.15;
}
body.v4 .v4-seg-btn:first-child { border-left: 0; }
body.v4 .v4-seg-btn.actif { background: var(--v4-encre); color: var(--v4-farine); }
body.v4 .v4-seg-taille { font-size: 11px; font-weight: 600; opacity: .85; }
body.v4 .v4-seg-prix { font-size: 13px; font-weight: 800; }
body.v4 .v4-prix-avenir { font-size: 13px; font-style: italic; color: var(--v4-pierre); }

/* Apparition douce */
body.v4 .v4-anim { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; }
body.v4 .v4-anim.v4-vu { opacity: 1; transform: none; }

/* ── Téléphone / tablette ── */
@media (max-width: 960px) {
  body.v4 .v4-carte-grille { grid-template-columns: 1fr; gap: 28px; padding-top: 230px; }
  body.v4 .v4-carte-aside { position: static; }
  body.v4 .v4-medaillon { width: 220px; height: 220px; top: -70px; right: -30px; border-width: 8px; background-size: 1160px auto; }
  body.v4 #menu .menu-tabs { flex-wrap: nowrap; overflow-x: auto; gap: 22px; scrollbar-width: none; position: sticky; top: 68px; z-index: 20; background: var(--v4-farine); }
  body.v4 #menu .menu-tabs::-webkit-scrollbar { display: none; }
  body.v4 #menu .menu-tabs .tab { flex: 0 0 auto; }
}
@media (max-width: 560px) {
  body.v4 #menu .menu-v-card, body.v4 #menu .gc-card { grid-template-columns: 64px 1fr; gap: 0 14px; }
  body.v4 #menu .menu-v-photo, body.v4 #menu .gc-img { width: 64px !important; height: 64px !important; font-size: 1.6rem; }
  body.v4 #menu .menu-v-content h4, body.v4 #menu .gc-body h3 { font-size: 20px !important; }
  body.v4 #menu .menu-v-content > div.mv-size-wrap { margin-left: -78px; }
  body.v4 .v4-seg { flex: 1; }
  body.v4 .v4-seg-btn { flex: 1; min-width: 0; }
  body.v4 .v4-legende { justify-content: center; }
  body.v4 .v4-sig-photo { height: 180px; }
}

/* Respect du réglage « réduire les animations » */
@media (prefers-reduced-motion: reduce) {
  body.v4 * { transition: none !important; animation: none !important; }
  body.v4 .v4-anim { opacity: 1 !important; transform: none !important; }
}

/* ── Ajustements après contrôle visuel ── */
body.v4 .hero.v4-hero::before, body.v4 .hero.v4-hero::after { display: none !important; }
body.v4 .hero.v4-hero > .container { width: 100%; max-width: 1320px; margin: 0 auto; padding: 0 56px; display: block !important; }
body.v4 .v4-hero .zone-search-band { background: transparent !important; padding: 0 !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important; }
body.v4 .v4-hero .zone-search-band__form { flex-wrap: nowrap !important; width: 100% !important; max-width: none !important; }
body.v4 .v4-hero .zone-search-band__btn { flex: 0 0 auto; width: auto !important; }
body.v4 header .v4-navlink { white-space: nowrap; }
body.v4 header nav { gap: 22px; }
html body.v4 .menu-section .v4-carte-titre { color: var(--v4-encre) !important; -webkit-text-fill-color: var(--v4-encre) !important; background: none !important; }
body.v4 #menu .menu-v-content h4, body.v4 #menu .gc-body h3 {
  background: none !important; box-shadow: none !important; border: 0 !important; padding: 0 !important; justify-content: flex-start !important; text-align: left !important; border-radius: 0 !important; -webkit-text-fill-color: currentColor;
}
@media (max-width: 760px) {
  body.v4 .hero.v4-hero > .container { padding: 0 20px; }
  body.v4 .v4-hero-boutons .v4-btn { font-size: 13px; padding: 0 16px; }
}
body.v4 .v4-hero-boutons { align-items: center; }
body.v4 .v4-hero-boutons .v4-btn { height: 52px; min-height: 52px; padding-top: 0 !important; padding-bottom: 0 !important; line-height: 1; }
body.v4 .v4-carte-grille > * { min-width: 0; }
html body.v4 .menu-section { overflow-x: clip; }
body.v4 .v4-seg-prix, body.v4 .v4-seg-taille { white-space: nowrap; }
@media (max-width: 560px) { body.v4 .v4-seg-prix { font-size: 12px; } body.v4 .v4-seg-btn { padding: 4px 6px; } }

/* ══════════════════════════════════════════════════════════════════════
   V4 — SUITE DE LA PAGE (offres → footer), maquette validée.
   Ajouté à la suite : aucune règle du Hero ni de la Carte n'est modifiée.
   ══════════════════════════════════════════════════════════════════════ */
body.v4 .v4-masque { display: none !important; }
body.v4 #offres .section-title, body.v4 #bestsellers .section-title, body.v4 #contact .section-title,
body.v4 #livraison-villepinte .section-title { color: var(--v4-creme) !important; -webkit-text-fill-color: var(--v4-creme) !important; background: none !important; }
body.v4 #offres .tag, body.v4 #bestsellers .tag, body.v4 #contact .tag, body.v4 #livraison-villepinte .tag {
  background: none !important; border: 0 !important; padding: 0 !important; color: var(--v4-dore) !important;
  font-size: 12px !important; letter-spacing: 5px; text-transform: uppercase; font-weight: 700;
}
body.v4 #offres .section-sub, body.v4 #bestsellers .section-sub, body.v4 #contact .section-sub, body.v4 #livraison-villepinte .section-sub { color: var(--v4-creme-txt) !important; }
body.v4 .section-header { text-align: left !important; margin-left: 0 !important; }
body.v4 .section-header .section-sub { margin-left: 0 !important; }

/* ── 1. Offres & coups de cœur (ardoise) — transition farine → ardoise sous les tickets ── */
html body.v4 #offres {
  background: linear-gradient(180deg, var(--v4-farine) 0px, var(--v4-creme-2) 70px, var(--v4-pierre-2) 130px, var(--v4-pierre) 180px, var(--v4-ardoise-2) 230px, var(--v4-ardoise-0) 290px, var(--v4-ardoise-0) 100%) !important;
  color: var(--v4-creme); padding: 180px 0 30px !important; position: relative;
}
body.v4 .v4-tickets { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-bottom: 64px; }
body.v4 .v4-ticket {
  display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: var(--v4-creme) !important;
  background: var(--v4-ardoise); border: 2px dashed var(--v4-dore); border-radius: 20px; padding: 28px;
  box-shadow: 0 20px 50px rgba(0,0,0,.35); transition: transform .25s;
}
body.v4 .v4-ticket:hover { transform: translateY(-3px); }
body.v4 .v4-ticket-mode { font-size: 12px; letter-spacing: 5px; text-transform: uppercase; color: var(--v4-dore); font-weight: 700; }
body.v4 .v4-ticket-chiffre { font-family: var(--v4-titre); font-size: 84px; line-height: 1; font-weight: 700; color: var(--v4-jaune); margin: 6px 0 2px; }
body.v4 .v4-ticket-titre { font-family: var(--v4-titre); font-size: 24px; font-weight: 700; }
body.v4 .v4-ticket-texte { font-size: 14px; line-height: 1.55; color: var(--v4-creme-txt); margin-top: 4px; }
body.v4 #offres-note { color: var(--v4-pierre) !important; font-size: 13px !important; text-align: left !important; }

html body.v4 #bestsellers { background: var(--v4-ardoise-0) !important; color: var(--v4-creme); padding: 30px 0 90px !important; }
body.v4 #bestsellers .section-header { margin-bottom: 24px !important; }
body.v4 #bestsellers-grid {
  display: flex !important; gap: 28px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 6px 2px 18px !important;
  grid-template-columns: none !important; scrollbar-width: thin; scrollbar-color: var(--v4-ardoise-2) transparent;
}
body.v4 #bestsellers-grid .pizza-card {
  flex: 0 0 230px; scroll-snap-align: start; background: transparent !important; box-shadow: none !important; border: 0 !important;
  border-radius: 0 !important; text-align: center; color: var(--v4-creme) !important; overflow: visible !important; transform: none !important;
}
body.v4 #bestsellers-grid .pizza-img {
  width: 180px !important; height: 180px !important; margin: 0 auto; border-radius: 50% !important; overflow: hidden; position: relative;
  border: 6px solid var(--v4-ardoise); box-shadow: 0 18px 36px rgba(0,0,0,.45); background: var(--v4-ardoise) !important;
}
body.v4 #bestsellers-grid .pizza-img img { width: 100% !important; height: 100% !important; object-fit: cover; }
body.v4 #bestsellers-grid .pizza-body { padding: 14px 0 0 !important; background: transparent !important; }
body.v4 #bestsellers-grid .pizza-body h3 { font-family: var(--v4-titre) !important; font-size: 21px !important; color: var(--v4-creme) !important; margin: 0 0 4px !important; }
body.v4 #bestsellers-grid .pizza-body > p { font-size: 13px !important; color: var(--v4-creme-txt) !important; margin: 0 0 10px !important;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
body.v4 #bestsellers-grid .size-picker-label { color: var(--v4-pierre) !important; font-size: 11px !important; }
body.v4 #bestsellers-grid .size-radios { justify-content: center; gap: 6px; }
body.v4 #bestsellers-grid .size-radios label { background: var(--v4-ardoise) !important; border: 1px solid var(--v4-ardoise-2) !important; color: var(--v4-creme) !important; border-radius: 999px !important; }
body.v4 #bestsellers-grid .size-radios input:checked + label { background: var(--v4-creme) !important; color: var(--v4-encre) !important; border-color: var(--v4-creme) !important; }
body.v4 #bestsellers-grid .pizza-cta, body.v4 #bestsellers .btn {
  background: var(--v4-jaune) !important; color: var(--v4-encre) !important; border: 0 !important; border-radius: 999px !important;
  font-family: var(--v4-texte) !important; font-weight: 700 !important; text-transform: uppercase; letter-spacing: .4px; font-size: 13px !important; box-shadow: none !important;
}
body.v4 #bestsellers .btn-outline, body.v4 #bestsellers a.btn[href="#menu"] { background: transparent !important; color: var(--v4-creme) !important; border: 1px solid rgba(244,239,230,.45) !important; }

/* ── Bandeau événement (admin) : bande photo, inchangé dans son contenu ── */
body.v4 #bande-evenement { margin: 0 !important; border-radius: 0 !important; }

/* ── 3. Avis (crème) — transition ardoise → crème, pastille Google à cheval ── */
html body.v4 #avis {
  background: linear-gradient(180deg, var(--v4-ardoise-0) 0px, var(--v4-ardoise-2) 70px, var(--v4-pierre) 140px, var(--v4-pierre-2) 200px, var(--v4-creme-2) 250px, var(--v4-creme) 300px, var(--v4-creme) 100%) !important;
  padding: 110px 0 90px !important; color: var(--v4-encre);
}
body.v4 #avis .section-header { text-align: center !important; }
body.v4 #avis .section-header .tag { background: none !important; border: 0 !important; color: var(--v4-pierre) !important; letter-spacing: 5px; text-transform: uppercase; font-size: 12px !important; font-weight: 700; }
body.v4 #avis .section-title { color: var(--v4-encre) !important; -webkit-text-fill-color: var(--v4-encre) !important; }
body.v4 #avis .section-sub { color: var(--v4-encre-2) !important; margin: 0 auto !important; }
body.v4 #avis .google-widget { display: flex; justify-content: center; margin: 0 0 28px !important; order: -1; }
body.v4 #avis .google-note-card {
  background: #fff !important; border-radius: 999px !important; box-shadow: 0 20px 40px rgba(0,0,0,.18) !important; border: 0 !important;
  display: inline-flex !important; align-items: center; gap: 18px; padding: 14px 18px 14px 24px !important; width: auto !important; max-width: 100%;
}
body.v4 #avis .google-divider, body.v4 #avis .google-divider2 { display: none !important; }
body.v4 #avis .google-btns a { border-radius: 999px !important; font-family: var(--v4-texte) !important; font-weight: 700 !important; }
body.v4 #avis .reviews-grid:not(:has(.review-card:not(.v4-masque))) { display: none !important; }

/* ── 4. Votre commande (farine) — structure et champs inchangés ── */
html body.v4 #commander { background: linear-gradient(180deg, var(--v4-creme) 0%, var(--v4-farine) 160px, var(--v4-farine) 75%, var(--v4-creme-2) 100%) !important; padding: 90px 0 !important; }
body.v4 #commander .tag { background: none !important; border: 0 !important; padding: 0 !important; color: var(--v4-pierre) !important; letter-spacing: 5px; text-transform: uppercase; font-size: 12px !important; font-weight: 700; }
body.v4 #commander .section-title { color: var(--v4-encre) !important; -webkit-text-fill-color: var(--v4-encre) !important; }
body.v4 #commander .section-title em { color: var(--v4-encre-2) !important; font-style: italic; }
body.v4 #commander .order-steps .step { border-top: 1px solid var(--v4-pierre-2); padding-top: 18px !important; background: transparent !important; box-shadow: none !important; }
body.v4 #commander .step-num {
  background: none !important; box-shadow: none !important; width: auto !important; height: auto !important; border-radius: 0 !important;
  font-family: var(--v4-titre) !important; font-size: 48px !important; font-weight: 700; line-height: .9; color: var(--v4-jaune) !important; -webkit-text-stroke: 1px var(--v4-encre);
}
body.v4 #commander .step-text h5 { font-family: var(--v4-titre) !important; font-size: 21px !important; color: var(--v4-encre) !important; }
body.v4 #commander .step-text p { color: var(--v4-encre-2) !important; }
body.v4 #commander .form-card { background: #fff !important; border-radius: 22px !important; box-shadow: 0 18px 44px rgba(27,14,14,.08) !important; border: 1px solid var(--v4-creme-2) !important; }
body.v4 #commander input:not([type="checkbox"]):not([type="radio"]), body.v4 #commander select, body.v4 #commander textarea {
  background: var(--v4-farine) !important; border: 1px solid var(--v4-pierre-2) !important; border-radius: 12px !important; color: var(--v4-encre) !important; font-family: var(--v4-texte) !important;
}
body.v4 #commander input:focus, body.v4 #commander select:focus, body.v4 #commander textarea:focus { border-color: var(--v4-encre) !important; outline: 2px solid rgba(238,197,53,.6); outline-offset: 1px; }
body.v4 #commander .toggle-btn, body.v4 #commander .rez-tab { border-radius: 999px !important; font-family: var(--v4-texte) !important; font-weight: 700 !important; }
body.v4 #commander .toggle-btn.active, body.v4 #commander .rez-tab.active { background: var(--v4-encre) !important; color: var(--v4-farine) !important; border-color: var(--v4-encre) !important; }
body.v4 #commander .btn-rouge { background: var(--v4-jaune) !important; color: var(--v4-encre) !important; border-radius: 999px !important; text-transform: uppercase; letter-spacing: .4px; font-weight: 700 !important; border: 0 !important; }
/* Club Allo Pizza (section déplacée dans la colonne d'informations) */
body.v4 .v4-club { margin-top: 26px; padding: 0 !important; background: none !important; }
body.v4 .v4-club > .container { padding: 0 !important; max-width: none !important; width: auto !important; }
body.v4 .v4-club > .container > div {
  background: linear-gradient(135deg, #F7E7B4, var(--v4-dore)) !important; border-radius: 20px !important; padding: 24px !important;
  color: var(--v4-encre) !important; box-shadow: 0 18px 40px rgba(27,14,14,.12) !important; border: 0 !important; flex-wrap: wrap;
}
body.v4 .v4-club * { color: var(--v4-encre) !important; }
body.v4 .v4-club .btn { background: var(--v4-encre) !important; color: var(--v4-farine) !important; border-radius: 999px !important; border: 0 !important; }

/* ── Blog (crème) ── */
html body.v4 #blog { background: linear-gradient(180deg, var(--v4-creme-2) 0%, var(--v4-creme) 100%) !important; padding: 70px 0 110px !important; }
body.v4 #blog .section-title { color: var(--v4-encre) !important; -webkit-text-fill-color: var(--v4-encre) !important; }

/* ── 5. Nous trouver (ardoise) — transition crème → ardoise, bouton d'appel à cheval ── */
html body.v4 #contact {
  background: linear-gradient(180deg, var(--v4-creme) 0px, var(--v4-pierre-2) 60px, var(--v4-pierre) 120px, var(--v4-ardoise-2) 170px, var(--v4-ardoise-0) 230px, var(--v4-ardoise-0) 100%) !important;
  color: var(--v4-creme) !important; padding: 0 0 50px !important;
}
body.v4 .v4-appel-wrap { display: flex; justify-content: center; padding-top: 100px; margin-bottom: 70px; }
body.v4 .v4-appel { min-height: 58px; padding: 0 32px; box-shadow: 0 16px 34px rgba(0,0,0,.35); font-size: 17px; }
body.v4 #contact h3, body.v4 #contact h4, body.v4 #contact h5, body.v4 #contact strong { color: var(--v4-creme) !important; font-family: var(--v4-titre) !important; }
body.v4 #contact p, body.v4 #contact span:not(.v4-btn), body.v4 #contact label, body.v4 #contact li { color: var(--v4-creme-txt) !important; }
body.v4 #contact a:not(.v4-btn) { color: var(--v4-jaune) !important; }
body.v4 #contact > .container > div:not(.v4-appel-wrap):not(.section-header) > div,
body.v4 #contact [class*="card"], body.v4 #contact form {
  background: var(--v4-ardoise) !important; border: 1px solid var(--v4-ardoise-2) !important; box-shadow: none !important; border-radius: 20px !important;
}
body.v4 #contact input, body.v4 #contact select, body.v4 #contact textarea {
  background: var(--v4-ardoise-0) !important; border: 1px solid var(--v4-ardoise-2) !important; color: var(--v4-creme) !important; border-radius: 12px !important;
}
body.v4 #contact button[type="submit"], body.v4 #contact form button { background: var(--v4-jaune) !important; color: var(--v4-encre) !important; border-radius: 999px !important; border: 0 !important; font-weight: 700 !important; }
body.v4 #contact-success, body.v4 #contact-error { color: var(--v4-encre) !important; }
body.v4 #contact-success *, body.v4 #contact-error * { color: inherit !important; }

/* Livraison : même chapitre ardoise, communes en pastilles */
html body.v4 #livraison-villepinte { background: var(--v4-ardoise-0) !important; color: var(--v4-creme) !important; border: 0 !important; padding-top: 10px !important; }
body.v4 .v4-communes { list-style: none; margin: 0 0 30px; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
body.v4 .v4-communes li { padding: 9px 16px; border-radius: 999px; background: var(--v4-ardoise-2); color: var(--v4-creme); font-size: 14px; font-weight: 600; }
body.v4 #livraison-villepinte h3 { font-family: var(--v4-titre) !important; }

/* ── 6. Footer (ardoise profonde), QR code intégré ── */
html body.v4 footer { background: var(--v4-ardoise-0) !important; color: var(--v4-creme-txt) !important; border-top: 1px solid var(--v4-ardoise) !important; }
body.v4 footer h5 { color: var(--v4-creme) !important; font-family: var(--v4-texte) !important; }
body.v4 footer a { color: var(--v4-creme-txt) !important; }
body.v4 footer a:hover { color: var(--v4-jaune) !important; }
body.v4 footer .footer-brand img { background: #fff; border-radius: 10px; padding: 6px 12px; height: 56px !important; width: auto !important; }
body.v4 .v4-depuis { font-size: 12px !important; letter-spacing: 5px; text-transform: uppercase; color: var(--v4-dore) !important; font-weight: 700; margin: 14px 0 4px !important; }
body.v4 .v4-footer-horaires a { color: var(--v4-jaune) !important; }
body.v4 .v4-qr { background: transparent !important; padding: 26px 0 0 !important; margin: 26px 0 0 !important; border-top: 1px solid var(--v4-ardoise) !important; color: var(--v4-creme-txt) !important; }
body.v4 .v4-qr > .container { padding: 0 !important; max-width: none !important; }
body.v4 .v4-qr * { color: var(--v4-creme-txt) !important; background-color: transparent !important; box-shadow: none !important; }
body.v4 .v4-qr #qrcode-pwa { background: #fff !important; padding: 8px; border-radius: 10px; display: inline-block; }
body.v4 .v4-qr #qrcode-pwa * { background-color: initial !important; }

/* ── Téléphone ── */
@media (max-width: 760px) {
  html body.v4 #offres { padding-top: 150px !important; }
  body.v4 .v4-tickets { grid-template-columns: 1fr; gap: 18px; margin-bottom: 44px; }
  body.v4 .v4-ticket { padding: 20px; }
  body.v4 .v4-ticket-chiffre { font-size: 60px; }
  body.v4 .v4-ticket-titre { font-size: 19px; }
  body.v4 #bestsellers-grid .pizza-card { flex-basis: 170px; }
  body.v4 #bestsellers-grid .pizza-img { width: 140px !important; height: 140px !important; }
  body.v4 .v4-appel-wrap { padding-top: 80px; margin-bottom: 50px; }
}

/* ── Ajustements après contrôle visuel (suite de la page) ── */
body.v4 #bestsellers-grid .pizza-body h3 { background: none !important; box-shadow: none !important; padding: 0 !important; border: 0 !important; -webkit-text-fill-color: var(--v4-creme); }
body.v4 #bestsellers-grid .size-radios label .sz-name, body.v4 #bestsellers-grid .size-radios label .sz-price { color: inherit !important; }
body.v4 #commander .toggle-btn:not(.active) { background: #fff !important; color: var(--v4-encre) !important; border: 1px solid var(--v4-pierre-2) !important; }
body.v4 #blog .section-sub { color: var(--v4-encre-2) !important; }
body.v4 #blog .tag { background: none !important; border: 0 !important; padding: 0 !important; color: var(--v4-pierre) !important; letter-spacing: 5px; text-transform: uppercase; font-size: 12px !important; font-weight: 700; }
body.v4 #blog-more-wrap .btn, body.v4 #blog-more-wrap button { background: var(--v4-encre) !important; color: var(--v4-farine) !important; border-radius: 999px !important; border: 0 !important; text-transform: uppercase; letter-spacing: .4px; }
body.v4 #livraison-villepinte .tag { background: none !important; color: var(--v4-dore) !important; }
body.v4 #livraison-villepinte .section-title { color: var(--v4-creme) !important; }
body.v4 #livraison-villepinte .section-sub { color: var(--v4-creme-txt) !important; }
body.v4 .v4-faq-titre { color: var(--v4-creme) !important; font-family: var(--v4-titre) !important; font-size: 24px !important; }
body.v4 .v4-qr h2, body.v4 .v4-qr h3 { font-size: 22px !important; line-height: 1.2 !important; font-family: var(--v4-titre) !important; }
body.v4 .v4-qr p, body.v4 .v4-qr li { font-size: 13px !important; }

/* ══════════════════════════════════════════════════════════════════════
   V4 — BLOG (habillage uniquement). Remplace l'ancien thème rouge/noir de
   style.css (l. 3393-3438 et 4410-4433). Aucune règle hors #blog et
   #blog-modal-overlay. Aucun changement de HTML ni de JavaScript.
   ══════════════════════════════════════════════════════════════════════ */
body.v4 #blog .section-header { margin-bottom: 8px !important; }
body.v4 #blog .section-title { font-family: var(--v4-titre) !important; font-size: clamp(34px, 4vw, 48px) !important; line-height: 1.05 !important; }

/* Grille : 3 / 2 / 1 colonnes */
body.v4 #blog .blog-grid { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 40px 32px !important; margin-top: 32px !important; }
@media (max-width: 1024px) { body.v4 #blog .blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
@media (max-width: 640px)  { body.v4 #blog .blog-grid { grid-template-columns: 1fr !important; gap: 34px !important; } }
body.v4 #blog .blog-grid > div:not(.blog-card) { color: var(--v4-encre-2) !important; }

/* Cartes éditoriales : pas de boîte, la photo porte la carte */
body.v4 #blog .blog-card {
  background: transparent !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important;
  overflow: visible !important; transform: none !important; cursor: default;
}
body.v4 #blog .blog-card:hover { transform: none !important; box-shadow: none !important; }
body.v4 #blog .blog-card-img {
  display: block; width: 100% !important; height: auto !important; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: 18px !important; box-shadow: 0 16px 34px rgba(27,14,14,.14); background: var(--v4-ardoise);
  transition: transform .5s ease, box-shadow .5s ease;
}
body.v4 #blog .blog-card:hover .blog-card-img { transform: scale(1.02); box-shadow: 0 22px 44px rgba(27,14,14,.2); }
body.v4 #blog .blog-card-body { padding: 18px 2px 0 !important; background: transparent !important; gap: 0; }
body.v4 #blog .blog-card-cat {
  background: none !important; color: var(--v4-pierre) !important; padding: 0 !important; border-radius: 0 !important; margin: 0 0 8px !important;
  font-family: var(--v4-texte) !important; font-size: 11px !important; letter-spacing: 4px; text-transform: uppercase; font-weight: 700;
}
body.v4 #blog .blog-card-title {
  font-family: var(--v4-titre) !important; font-size: 23px !important; font-weight: 700; line-height: 1.2 !important;
  color: var(--v4-encre) !important; -webkit-text-fill-color: var(--v4-encre) !important; margin: 0 0 8px !important;
}
body.v4 #blog .blog-card-excerpt {
  font-family: var(--v4-texte) !important; font-size: 15px !important; line-height: 1.6 !important; color: var(--v4-encre-2) !important; margin: 0 0 12px !important;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
body.v4 #blog .blog-card-meta { color: var(--v4-pierre) !important; font-size: 13px !important; margin-top: auto; }
body.v4 #blog .blog-card-read { color: var(--v4-encre) !important; }

/* « Lire la suite → » : même bouton, habillé en lien */
body.v4 #blog .blog-card .blog-lire-btn, body.v4 #blog .blog-card button[onclick] {
  display: inline-flex !important; align-self: flex-start; width: auto !important; margin-top: 12px !important; padding: 2px 0 4px !important;
  background: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; transform: none !important;
  color: var(--v4-encre) !important; font-family: var(--v4-texte) !important; font-weight: 700 !important; font-size: 14px !important; letter-spacing: .3px;
  border-bottom: 2px solid var(--v4-jaune) !important; cursor: pointer; transition: color .2s, border-color .2s;
}
body.v4 #blog .blog-card .blog-lire-btn:hover, body.v4 #blog .blog-card button[onclick]:hover { background: none !important; color: var(--v4-rouge) !important; border-bottom-color: var(--v4-rouge) !important; }

/* « Voir plus d'articles » : bouton secondaire V4 */
body.v4 #blog-more-wrap button {
  background: transparent !important; color: var(--v4-encre) !important; border: 1px solid var(--v4-encre) !important; border-radius: 999px !important;
  min-height: 46px; padding: 0 26px !important; font-family: var(--v4-texte) !important; font-weight: 700 !important; font-size: 13px !important;
  letter-spacing: .5px; text-transform: uppercase; box-shadow: none !important; transition: background .2s, color .2s;
}
body.v4 #blog-more-wrap button:hover { background: var(--v4-encre) !important; color: var(--v4-farine) !important; }

/* Fenêtre de lecture d'un article : farine, texte toujours lisible */
body.v4 #blog-modal-overlay { background: rgba(23,19,15,.72) !important; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
body.v4 #blog-modal {
  background: var(--v4-farine) !important; border-radius: 24px !important; max-width: 760px; padding: 40px 40px 32px !important;
  box-shadow: 0 30px 80px rgba(0,0,0,.4); color: var(--v4-encre) !important; font-family: var(--v4-texte) !important;
}
body.v4 #blog-modal-close {
  width: 42px; height: 42px; border-radius: 50% !important; background: #fff !important; color: var(--v4-encre) !important;
  border: 1px solid var(--v4-pierre-2) !important; font-size: 18px !important; display: flex; align-items: center; justify-content: center; top: 18px !important; right: 18px !important;
}
body.v4 #blog-modal-close:hover { background: var(--v4-encre) !important; color: var(--v4-farine) !important; }
body.v4 #blog-modal-cat {
  background: none !important; color: var(--v4-pierre) !important; padding: 0 !important; border-radius: 0 !important;
  font-size: 11px !important; letter-spacing: 4px; text-transform: uppercase; font-weight: 700; margin-bottom: 10px !important;
}
body.v4 #blog-modal-title {
  font-family: var(--v4-titre) !important; font-size: clamp(28px, 4vw, 40px) !important; line-height: 1.1 !important; font-weight: 700;
  color: #120A0A !important; -webkit-text-fill-color: #120A0A !important; margin: 0 48px 10px 0 !important;
}
body.v4 #blog-modal-meta { color: var(--v4-pierre) !important; font-size: 13px !important; margin-bottom: 22px !important; }
body.v4 #blog-modal-img { border-radius: 18px !important; height: auto !important; max-height: 380px; aspect-ratio: 16 / 9; object-fit: cover; box-shadow: 0 14px 30px rgba(27,14,14,.12); }
/* Forçage de lisibilité : encre très sombre pour tout le contenu de l'article, quelles que soient
   les couleurs enregistrées dans l'admin ; les liens gardent leur couleur propre. */
body.v4 #blog-modal-content { color: #120A0A !important; font-family: var(--v4-texte) !important; font-size: 16px !important; line-height: 1.75 !important; }
body.v4 #blog-modal-content *:not(a):not(a *) { color: #120A0A !important; -webkit-text-fill-color: #120A0A !important; background-color: transparent !important; }
body.v4 #blog-modal-content h1, body.v4 #blog-modal-content h2, body.v4 #blog-modal-content h3, body.v4 #blog-modal-content h4 {
  font-family: var(--v4-titre) !important; font-weight: 700 !important; line-height: 1.2 !important; margin: 26px 0 10px !important;
}
body.v4 #blog-modal-content h2 { font-size: 26px !important; }
body.v4 #blog-modal-content h3 { font-size: 22px !important; }
body.v4 #blog-modal-content img, body.v4 #blog-modal-content video { max-width: 100%; height: auto; border-radius: 14px; }
/* Partage : couleurs Facebook / WhatsApp conservées, format pilule */
body.v4 #blog-modal-share { flex-wrap: wrap; margin-top: 28px !important; padding-top: 20px; border-top: 1px solid var(--v4-creme-2); }
body.v4 #blog-modal-share button { border-radius: 999px !important; min-height: 44px; padding: 0 20px !important; font-family: var(--v4-texte) !important; font-weight: 700 !important; }
@media (max-width: 640px) {
  body.v4 #blog-modal { padding: 28px 20px 24px !important; border-radius: 20px !important; }
  body.v4 #blog-modal-title { margin-right: 44px !important; }
}

/* Blog : boutons flottants Téléphone / WhatsApp (#floating-stack) masqués pendant la lecture
   d'un article ; ils réapparaissent seuls à la fermeture (la fenêtre perd sa classe .active). */
body.v4:has(#blog-modal-overlay.active) #floating-stack { display: none !important; }

/* ══════════════════════════════════════════════════════════════════════
   V4 TEST — Mobile : ingrédients sans coupure, photos plus grandes, zoom photo.
   Ajouté à la suite ; aucune règle précédente n'est modifiée.
   ══════════════════════════════════════════════════════════════════════ */
/* Ingrédients : retour à la ligne normal (annule le white-space:nowrap de style.css l. 2675) */
body.v4 #menu .ingr-tags, body.v4 #bestsellers .ingr-tags { white-space: normal !important; overflow-wrap: anywhere; min-width: 0; max-width: 100%; }
body.v4 #menu .itag, body.v4 #bestsellers .itag { white-space: normal !important; }

/* Photos rondes : taille proportionnelle à l'écran sur téléphone (92 px à 320 px → 124 px à 430 px) */
@media (max-width: 560px) {
  body.v4 { --v4-ph: clamp(92px, 29vw, 124px); }
  body.v4 #menu .menu-v-card, body.v4 #menu .gc-card { grid-template-columns: var(--v4-ph) minmax(0, 1fr) !important; gap: 0 14px; }
  body.v4 #menu .menu-v-photo, body.v4 #menu .gc-img { width: var(--v4-ph) !important; height: var(--v4-ph) !important; font-size: 2.2rem; }
  /* La ligne taille + prix + Ajouter passe SOUS la photo et le texte, sur toute la largeur :
     le bloc de contenu « s'efface » (display:contents) et ses éléments se placent dans la grille de la carte. */
  body.v4 #menu .menu-v-card { grid-template-rows: auto auto auto auto; align-items: start; }
  body.v4 #menu .menu-v-card > .menu-v-photo { grid-column: 1; grid-row: 1 / span 3; align-self: start; }
  body.v4 #menu .menu-v-card > .menu-v-content { display: contents !important; }
  body.v4 #menu .menu-v-content h4 { grid-column: 2; grid-row: 1; }
  body.v4 #menu .menu-v-content h4::after { display: none !important; }
  body.v4 #menu .menu-v-content .ingr-tags { grid-column: 2; grid-row: 2; margin-top: 6px !important; }
  body.v4 #menu .menu-v-content .menu-card-prix { grid-column: 2; grid-row: 3; margin-top: 8px !important; }
  body.v4 #menu .menu-v-content > button, body.v4 #menu .menu-v-content > div:not(.menu-card-prix):not(.ingr-tags) {
    grid-column: 1 / -1 !important; grid-row: 4 !important; margin: 14px 0 0 !important;
  }
  body.v4 #menu .menu-v-content > div.mv-size-wrap { margin-left: 0 !important; }
  body.v4 #menu .menu-v-content > button.mv-add-btn { justify-self: end; }
}

/* Zoom photo */
body.v4 #menu .menu-v-photo.v4-zoomable, body.v4 #menu .gc-img.v4-zoomable, body.v4 #bestsellers-grid .pizza-img.v4-zoomable { cursor: zoom-in; }
#v4-zoom {
  position: fixed; inset: 0; z-index: 10050; display: none; align-items: center; justify-content: center; flex-direction: column; gap: 14px;
  padding: max(20px, env(safe-area-inset-top, 0px)) 16px max(20px, env(safe-area-inset-bottom, 0px));
  background: rgba(23,19,15,.82); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
#v4-zoom.ouvert { display: flex; }
#v4-zoom img {
  display: block; max-width: min(92vw, 720px); max-height: 74vh; width: auto; height: auto; object-fit: contain;
  border-radius: 20px; box-shadow: 0 30px 70px rgba(0,0,0,.5); background: #241E18;
}
#v4-zoom .v4-zoom-nom { font-family: 'Fraunces', Georgia, serif; font-size: 22px; font-weight: 700; color: #F4EFE6; text-align: center; max-width: 92vw; }
#v4-zoom .v4-zoom-fermer {
  position: absolute; top: max(14px, env(safe-area-inset-top, 0px)); right: 14px; width: 48px; height: 48px; border-radius: 50%;
  border: 0; background: #F4EFE6; color: #1B0E0E; font-size: 22px; line-height: 1; cursor: pointer; box-shadow: 0 8px 20px rgba(0,0,0,.35);
  display: flex; align-items: center; justify-content: center;
}
#v4-zoom .v4-zoom-fermer:focus-visible { outline: 3px solid #EEC535; outline-offset: 3px; }
html.v4-zoom-ouvert #floating-stack { display: none !important; }
@media (prefers-reduced-motion: no-preference) {
  #v4-zoom.ouvert img { animation: v4ZoomIn .22s ease-out; }
  @keyframes v4ZoomIn { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
}

/* ══════════════════════════════════════════════════════════════════════
   V4 TEST — PANIER (habillage uniquement) + fenêtre de connexion + barre client.
   Remplace l'ancien noir/rouge de style.css (l. 1874-2352, 3233-3292, 3484-3496)
   et neutralise les styles écrits dans le HTML/JS du panier. Aucun JavaScript,
   aucun identifiant, aucun onclick, aucun calcul n'est modifié.
   ══════════════════════════════════════════════════════════════════════ */
html body.v4 .cart-overlay { background: rgba(23,19,15,.55) !important; -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
html body.v4 .cart-panel { background: var(--v4-farine) !important; color: var(--v4-encre) !important; font-family: var(--v4-texte) !important; box-shadow: -10px 0 40px rgba(27,14,14,.18) !important; }
html body.v4 .cart-panel button, html body.v4 .cart-panel input, html body.v4 .cart-panel select, html body.v4 .cart-panel textarea { font-family: var(--v4-texte) !important; }

/* En-tête : farine, titre Fraunces, croix ronde, filet doré */
html body.v4 .cart-panel .cart-header { background: var(--v4-farine) !important; color: var(--v4-encre) !important; border-bottom: 1px solid rgba(232,189,96,.55); padding: 18px 20px !important; }
html body.v4 .cart-panel .cart-header h3 { font-family: var(--v4-titre) !important; font-size: 26px !important; font-weight: 700; letter-spacing: 0 !important; color: var(--v4-encre) !important; margin: 0; }
html body.v4 .cart-panel .cart-close {
  width: 42px; height: 42px; border-radius: 50% !important; display: flex; align-items: center; justify-content: center; padding: 0 !important;
  background: #fff !important; color: var(--v4-encre) !important; border: 1px solid var(--v4-pierre-2) !important; font-size: 18px !important;
}
html body.v4 .cart-panel .cart-close:hover { background: var(--v4-encre) !important; color: var(--v4-farine) !important; }

/* Ticket : note de commande sur papier crème, sans bloc noir */
html body.v4 .cart-panel .ticket { background: #fff !important; border: 1px solid var(--v4-creme-2) !important; border-radius: 18px !important; box-shadow: 0 10px 28px rgba(27,14,14,.06); margin: 16px 16px !important; font-family: var(--v4-texte) !important; color: var(--v4-encre) !important; }
html body.v4 .cart-panel .ticket-head { background: transparent !important; color: var(--v4-encre) !important; padding: 18px 14px 10px !important; }
html body.v4 .cart-panel .ticket-head .tlogo { font-family: var(--v4-texte) !important; font-size: 12px !important; letter-spacing: 5px !important; text-transform: uppercase; font-weight: 700; color: var(--v4-pierre) !important; }
html body.v4 .cart-panel .ticket-head .taddr { color: var(--v4-encre-2) !important; font-size: 12px !important; margin-top: 6px !important; }
html body.v4 .cart-panel .ticket-date { color: var(--v4-pierre) !important; font-size: 12px !important; }
html body.v4 .cart-panel .ticket-dashes, html body.v4 .cart-panel .totaux-sep { border-top: 1.5px dashed var(--v4-pierre-2) !important; }
html body.v4 .cart-panel .offre-bloc-ligne, html body.v4 .cart-panel .offre-bloc-ligne.inactive {
  background: var(--v4-creme) !important; color: var(--v4-encre-2) !important; border: 1px solid var(--v4-creme-2) !important; border-radius: 12px !important; text-align: center;
}
html body.v4 .cart-panel .offre-bloc-ligne.emporter, html body.v4 .cart-panel .offre-bloc-ligne.livraison,
html body.v4 .cart-panel .offre-banner { background: #F7E7B4 !important; color: var(--v4-encre) !important; border: 1px solid var(--v4-dore) !important; border-radius: 12px !important; margin: 0 16px 8px !important; }

/* Lignes d'articles */
html body.v4 .cart-panel .ticket-line { border-bottom: 1px dashed var(--v4-creme-2) !important; padding: 12px 0 !important; align-items: flex-start; }
html body.v4 .cart-panel .tl-qty { background: var(--v4-creme) !important; color: var(--v4-encre) !important; border: 1px solid var(--v4-creme-2); border-radius: 999px !important; min-width: 28px !important; height: 28px !important; font-weight: 800 !important; }
html body.v4 .cart-panel .tl-name { color: var(--v4-encre) !important; font-weight: 700 !important; font-size: 15px !important; }
html body.v4 .cart-panel .tl-detail { color: var(--v4-encre-2) !important; font-size: 13px !important; }
html body.v4 .cart-panel .tl-price { color: var(--v4-encre) !important; font-weight: 800 !important; font-size: 15px !important; }
html body.v4 .cart-panel .tl-price.offert .prix-barre { color: var(--v4-pierre) !important; }
html body.v4 .cart-panel .tl-price.offert .prix-zero { color: #2F6B2A !important; }
html body.v4 .cart-panel .badge-offert { background: #F7E7B4 !important; color: var(--v4-encre) !important; border: 1px solid var(--v4-dore); border-radius: 999px !important; }
/* − / quantité / + alignés */
html body.v4 .cart-panel .tl-actions { display: inline-flex !important; align-items: center !important; gap: 6px !important; margin-top: 0 !important; }
html body.v4 .cart-panel .tl-btn {
  width: 32px !important; height: 32px !important; border-radius: 50% !important; background: #fff !important; color: var(--v4-encre) !important;
  border: 1px solid var(--v4-pierre-2) !important; font-weight: 700 !important; font-size: 15px !important; display: inline-flex !important; align-items: center; justify-content: center; padding: 0 !important; line-height: 1;
}
html body.v4 .cart-panel .tl-btn:hover { background: var(--v4-creme) !important; border-color: var(--v4-encre) !important; }
html body.v4 .cart-panel .tl-btn.del { background: #fff !important; border-color: var(--v4-creme-2) !important; filter: grayscale(1); opacity: .75; }
html body.v4 .cart-panel .tl-btn.del:hover { filter: none; opacity: 1; border-color: var(--v4-rouge) !important; background: #FBEDEA !important; }
html body.v4 .cart-panel .tl-qty-num { color: var(--v4-encre) !important; font-weight: 800 !important; min-width: 22px !important; text-align: center; font-size: 15px !important; }
/* Proposition « sauce piquante » retirée du panier (déjà proposée dans les suppléments des pizzas).
   La ligne « Sauces piquantes » choisie avec une pizza reste affichée avec ses boutons − / +. */
html body.v4 .cart-panel .ticket > div:has(> button[onclick="ajusterSaucesPiquantes(1)"]) { display: none !important; }

/* Code promo */
html body.v4 .cart-panel .promo-row input { background: #fff !important; border: 1px solid var(--v4-pierre-2) !important; border-radius: 999px !important; color: var(--v4-encre) !important; padding: 10px 14px !important; }
html body.v4 .cart-panel .promo-row input:focus { border-color: var(--v4-dore) !important; outline: 2px solid rgba(238,197,53,.5); }
html body.v4 .cart-panel .promo-row button { background: transparent !important; color: var(--v4-encre) !important; border: 1px solid var(--v4-encre) !important; border-radius: 999px !important; padding: 9px 16px !important; }
html body.v4 .cart-panel .promo-row button:hover { background: var(--v4-encre) !important; color: var(--v4-farine) !important; }
html body.v4 .cart-panel .promo-applied { background: #F7E7B4 !important; border: 1px solid var(--v4-dore) !important; color: var(--v4-encre) !important; border-radius: 12px !important; }

/* Totaux : frais de livraison en encre (le vert reste seulement pour « Gratuit ») */
html body.v4 .cart-panel .ticket-totaux { background: var(--v4-creme) !important; border-top: 1px solid var(--v4-creme-2) !important; }
html body.v4 .cart-panel .totaux-row { color: var(--v4-encre) !important; font-size: 14px !important; }
html body.v4 .cart-panel .totaux-row.livraison span:last-child { color: var(--v4-encre) !important; font-weight: 600; }
html body.v4 .cart-panel .totaux-row.livraison span:last-child span[style*="27500A"] { color: #2F6B2A !important; }
html body.v4 .cart-panel .totaux-row.remise { color: #2F6B2A !important; }
html body.v4 .cart-panel .totaux-total .label { font-family: var(--v4-titre) !important; color: var(--v4-encre) !important; -webkit-text-fill-color: var(--v4-encre) !important; font-size: 22px !important; letter-spacing: 0 !important; text-transform: none; }
html body.v4 .cart-panel .totaux-total .amount { font-family: var(--v4-titre) !important; color: var(--v4-encre) !important; -webkit-text-fill-color: var(--v4-encre) !important; font-size: 30px !important; font-weight: 700; }
html body.v4 .cart-panel .ticket-footer-msg, html body.v4 .cart-panel .ticket-footer-msg strong { color: var(--v4-encre-2) !important; }
html body.v4 .cart-panel .cart-empty { color: var(--v4-encre-2) !important; }

/* Étapes Panier → Vous → Paiement → Confirmé */
html body.v4 .cart-panel .cp-step { color: var(--v4-pierre) !important; }
html body.v4 .cart-panel .cp-step.done, html body.v4 .cart-panel .cp-step.active { color: var(--v4-encre) !important; }
html body.v4 .cart-panel .cp-dot { background: #fff !important; color: var(--v4-pierre) !important; border: 1px solid var(--v4-pierre-2); }
html body.v4 .cart-panel .cp-step.done .cp-dot { background: var(--v4-encre) !important; color: var(--v4-farine) !important; border-color: var(--v4-encre); }
html body.v4 .cart-panel .cp-step.active .cp-dot { background: var(--v4-jaune) !important; color: var(--v4-encre) !important; border-color: var(--v4-jaune); }
html body.v4 .cart-panel .cp-line { background: var(--v4-pierre-2) !important; }
html body.v4 .cart-panel .cp-line.done { background: var(--v4-encre) !important; }
html body.v4 .cart-panel .cp-progress-bar { background: var(--v4-creme-2) !important; }
html body.v4 .cart-panel .cp-progress-fill { background: linear-gradient(90deg, var(--v4-dore), var(--v4-jaune)) !important; }

/* Bloc d'identification */
html body.v4 .cart-panel #cart-ident-bloc { background: transparent !important; border-top: 1px solid var(--v4-creme-2) !important; }
html body.v4 .cart-panel #bandeau-connexion-client { background: var(--v4-creme) !important; border: 1px solid var(--v4-dore) !important; border-radius: 14px !important; }
html body.v4 .cart-panel #bandeau-connexion-client span, html body.v4 .cart-panel #bandeau-connexion-client strong { color: var(--v4-encre) !important; }
html body.v4 .cart-panel .cart-delivery-toggle { border: 1px solid var(--v4-pierre-2) !important; border-radius: 999px !important; background: #fff; padding: 3px; gap: 3px !important; }
html body.v4 .cart-panel .cart-toggle-btn { background: transparent !important; color: var(--v4-encre) !important; border-radius: 999px !important; font-weight: 700 !important; min-height: 40px; }
html body.v4 .cart-panel .cart-toggle-btn.active { background: var(--v4-encre) !important; color: var(--v4-farine) !important; }
html body.v4 .cart-panel #cart-user-connecte { background: var(--v4-creme) !important; border: 1px solid var(--v4-dore) !important; border-radius: 16px !important; }
html body.v4 .cart-panel .cx-badge { background: #2F6B2A !important; color: #fff !important; }
html body.v4 .cart-panel .cx-welcome { font-family: var(--v4-titre) !important; color: var(--v4-encre) !important; font-size: 19px !important; }
html body.v4 .cart-panel .cx-info { color: var(--v4-encre-2) !important; }
html body.v4 .cart-panel .cx-pts { background: #F7E7B4 !important; color: var(--v4-encre) !important; border: 1px solid var(--v4-dore); }
html body.v4 .cart-panel .cx-deconnect { border-color: var(--v4-pierre-2) !important; color: var(--v4-encre-2) !important; border-radius: 999px !important; }
html body.v4 .cart-panel .cart-fid-row { background: #fff !important; border: 1px solid var(--v4-dore) !important; color: var(--v4-encre) !important; border-radius: 12px !important; }
html body.v4 .cart-panel #cart-cx-adresse-display { color: var(--v4-encre) !important; }
html body.v4 .cart-panel .ident-titre { font-family: var(--v4-titre) !important; color: var(--v4-encre) !important; font-size: 18px !important; letter-spacing: 0 !important; }
html body.v4 .cart-panel .ident-card { background: #fff !important; border: 1px solid var(--v4-creme-2) !important; border-radius: 14px !important; color: var(--v4-encre) !important; }
html body.v4 .cart-panel .ident-card:hover { border-color: var(--v4-dore) !important; background: var(--v4-creme) !important; box-shadow: 0 6px 16px rgba(27,14,14,.08) !important; }
html body.v4 .cart-panel .ident-card.selected { border-color: var(--v4-encre) !important; background: var(--v4-creme) !important; box-shadow: none !important; }
html body.v4 .cart-panel .ident-card.selected .ic-label { color: var(--v4-encre) !important; }
html body.v4 .cart-panel .ident-field label { color: var(--v4-encre-2) !important; }
html body.v4 .cart-panel .ident-field input, html body.v4 .cart-panel .ident-field select, html body.v4 .cart-panel .ident-field textarea {
  background: #fff !important; border: 1px solid var(--v4-pierre-2) !important; border-radius: 12px !important; color: var(--v4-encre) !important;
}
html body.v4 .cart-panel .ident-field input:focus, html body.v4 .cart-panel .ident-field select:focus, html body.v4 .cart-panel .ident-field textarea:focus { border-color: var(--v4-dore) !important; outline: 2px solid rgba(238,197,53,.45); }
html body.v4 .cart-panel .ident-btn { background: var(--v4-jaune) !important; color: var(--v4-encre) !important; border-radius: 999px !important; font-family: var(--v4-texte) !important; font-weight: 700 !important; text-transform: uppercase; letter-spacing: .4px; font-size: 14px !important; }
html body.v4 .cart-panel .ident-btn:hover { background: var(--v4-jaune-2) !important; }
html body.v4 .cart-panel .ident-btn.green { background: var(--v4-encre) !important; color: var(--v4-farine) !important; }
html body.v4 .cart-panel .ident-teaser { background: var(--v4-creme) !important; border-color: var(--v4-dore) !important; color: var(--v4-encre-2) !important; border-radius: 12px !important; }
html body.v4 .cart-panel .ident-teaser a { color: var(--v4-encre) !important; text-decoration: underline; text-decoration-color: var(--v4-jaune); }
html body.v4 .cart-panel .ident-msg.err, html body.v4 .cart-panel .cx-msg.err { background: #FBEDEA !important; color: #9B2C1B !important; }
html body.v4 .cart-panel #club-join-bloc { background: var(--v4-creme) !important; border: 1px solid var(--v4-dore) !important; border-radius: 14px !important; }
html body.v4 .cart-panel #club-join-bloc div { color: var(--v4-encre) !important; }
html body.v4 .cart-panel #club-join-bloc input[type="checkbox"] { accent-color: var(--v4-encre) !important; }

/* Pied du panier : bouton Commander jaune, « Vider » en lien */
html body.v4 .cart-panel .cart-footer { background: var(--v4-farine) !important; border-top: 1px solid rgba(232,189,96,.55) !important; box-shadow: 0 -10px 24px rgba(27,14,14,.06) !important; }
html body.v4 .cart-panel .cart-footer > div[style*="fff7ed"] { background: var(--v4-creme) !important; border: 1px solid var(--v4-creme-2) !important; color: var(--v4-encre-2) !important; border-radius: 12px !important; }
html body.v4 .cart-panel .cart-footer .btn-commander {
  background: var(--v4-jaune) !important; color: var(--v4-encre) !important; border-radius: 999px !important; min-height: 54px; font-weight: 800 !important;
  font-size: 16px !important; text-transform: uppercase; letter-spacing: .5px; box-shadow: 0 10px 22px rgba(238,197,53,.35) !important;
}
html body.v4 .cart-panel .cart-footer .btn-commander:hover { background: var(--v4-jaune-2) !important; }
html body.v4 .cart-panel .cart-footer .btn-commander:disabled { background: var(--v4-creme-2) !important; color: var(--v4-pierre) !important; box-shadow: none !important; }
html body.v4 .cart-panel .cart-footer .btn-vider { background: none !important; border: 0 !important; color: var(--v4-encre-2) !important; text-decoration: underline; text-underline-offset: 3px; font-size: 13px !important; }
html body.v4 .cart-panel .cart-footer .btn-vider:hover { color: var(--v4-rouge) !important; }

/* ── Fenêtre de connexion / création de compte ── */
html body.v4 #connexion-overlay { background: rgba(23,19,15,.65) !important; }
html body.v4 #connexion-modal { background: var(--v4-farine) !important; border-radius: 24px !important; color: var(--v4-encre) !important; font-family: var(--v4-texte) !important; box-shadow: 0 30px 80px rgba(0,0,0,.4) !important; }
html body.v4 #connexion-modal h2 { font-family: var(--v4-titre) !important; color: var(--v4-encre) !important; -webkit-text-fill-color: var(--v4-encre) !important; font-size: 30px !important; }
html body.v4 #connexion-modal p.sub, html body.v4 #connexion-modal p { color: var(--v4-encre-2) !important; }
html body.v4 #connexion-modal .cx-close { width: 40px; height: 40px; border-radius: 50%; background: #fff !important; border: 1px solid var(--v4-pierre-2) !important; color: var(--v4-encre) !important; font-size: 17px !important; display: flex; align-items: center; justify-content: center; }
html body.v4 #connexion-modal .cx-tabs { border-bottom: 1px solid var(--v4-creme-2) !important; }
html body.v4 #connexion-modal .cx-tab { color: var(--v4-encre-2) !important; }
html body.v4 #connexion-modal .cx-tab.active { color: var(--v4-encre) !important; border-bottom-color: var(--v4-jaune) !important; }
html body.v4 #connexion-modal .cx-field label { color: var(--v4-encre-2) !important; }
html body.v4 #connexion-modal .cx-field input { background: #fff !important; border: 1px solid var(--v4-pierre-2) !important; border-radius: 12px !important; color: var(--v4-encre) !important; }
html body.v4 #connexion-modal .cx-field input:focus { border-color: var(--v4-dore) !important; outline: 2px solid rgba(238,197,53,.45); }
html body.v4 #connexion-modal .cx-btn { background: var(--v4-jaune) !important; color: var(--v4-encre) !important; border-radius: 999px !important; text-transform: uppercase; letter-spacing: .4px; font-weight: 800 !important; }
html body.v4 #connexion-modal .cx-btn:hover { background: var(--v4-jaune-2) !important; }
html body.v4 #connexion-modal .cx-btn.skip { background: transparent !important; color: var(--v4-encre-2) !important; border: 1px solid var(--v4-pierre-2) !important; }
html body.v4 #connexion-modal .cx-forgot a { color: var(--v4-encre-2) !important; text-decoration: underline; }
html body.v4 #connexion-modal button[style*="D83A26"] { color: var(--v4-encre) !important; text-decoration-color: var(--v4-jaune) !important; font-family: var(--v4-texte) !important; }
html body.v4 #connexion-modal div[style*="border-top:1px solid #f0f0f0"] { border-top-color: var(--v4-creme-2) !important; }

/* ── Barre client en bas de l'écran ── */
html body.v4 #client-bar { background: rgba(250,247,241,.96) !important; color: var(--v4-encre) !important; border-top: 1px solid rgba(232,189,96,.6); box-shadow: 0 -8px 24px rgba(27,14,14,.08); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font-family: var(--v4-texte) !important; }
html body.v4 #client-bar span { color: var(--v4-encre) !important; }
html body.v4 #client-bar #cx-user-points { color: #8A6A1A !important; }
html body.v4 #client-bar button { border: 1px solid var(--v4-encre) !important; color: var(--v4-encre) !important; background: transparent !important; border-radius: 999px !important; font-family: var(--v4-texte) !important; font-weight: 700; }
html body.v4 #client-bar button:hover { background: var(--v4-encre) !important; color: var(--v4-farine) !important; }
html body.v4 #client-bar #fid-bar-track { background: var(--v4-creme-2) !important; }
html body.v4 #client-bar #fid-bar-fill { background: linear-gradient(90deg, var(--v4-dore), var(--v4-jaune)) !important; }
html body.v4 #client-bar #fid-bar-label { color: var(--v4-encre-2) !important; }
html body.v4 #client-bar #fid-bar-goal { color: #8A6A1A !important; }

/* Panier ouvert : boutons flottants Téléphone / WhatsApp (#floating-stack) masqués pour ne jamais
   recouvrir le bouton Commander ; ils réapparaissent seuls à la fermeture (#cart-panel perd .open). */
body.v4:has(#cart-panel.open) #floating-stack { display: none !important; }
/* Même masquage, sans dépendre de :has() (navigateurs plus anciens) : à l'ouverture, ouvrirPanier()
   pose style="overflow: hidden" sur <body> ; fermerPanier() le retire. */
body.v4[style*="overflow: hidden"] #floating-stack,
body.v4[style*="overflow:hidden"] #floating-stack { display: none !important; }

/* Panier : icône 🛒 de l'en-tête remplacée par le visuel Allô Pizza (sac + boîte), fond transparent.
   L'emoji fait partie du texte (index.html + traductions) : il est masqué par ::first-letter,
   sans modifier le texte ni le JavaScript. Image 3x (203×150), affichée à 50 px de haut pour rester nette sur mobile. */
html body.v4 .cart-panel .cart-header h3 { position: relative; padding-left: 74px !important; }
html body.v4 .cart-panel .cart-header h3::before {
  content: ""; position: absolute; left: 0; top: 50%; width: 68px; height: 50px; transform: translateY(-50%);
  background: url('images/panier-allo-pizza.png') left center / contain no-repeat; pointer-events: none;
}
html body.v4 .cart-panel .cart-header h3::first-letter { font-size: 0 !important; color: transparent !important; }

/* ══════════════════════════════════════════════════════════════════════
   V4 TEST — Navigation des catégories en pastilles arrondies (apparence uniquement).
   Mêmes boutons .tab[data-tab], même showTab() : aucun changement de fonctionnement.
   Couleurs de la charte V4 : jaune #EEC535, encre #1B0E0E, blanc #FFFFFF, fond farine.
   ══════════════════════════════════════════════════════════════════════ */
html body.v4 #menu .menu-tabs {
  display: flex !important; flex-wrap: wrap !important; gap: 10px 10px !important; justify-content: flex-start !important;
  border-bottom: 0 !important; padding: 6px 2px 16px !important; margin: 0 0 14px !important; overflow: visible;
}
html body.v4 #menu .menu-tabs .tab {
  display: inline-flex !important; align-items: center; gap: 8px; min-height: 48px;
  padding: 0 20px !important; margin: 0 !important; border-radius: 999px !important;
  background: #FFFFFF !important; color: #1B0E0E !important; border: 1.5px solid rgba(27,14,14,.16) !important;
  font-family: var(--v4-texte) !important; font-size: 16px !important; font-weight: 700 !important; line-height: 1 !important;
  white-space: nowrap; box-shadow: 0 2px 8px rgba(27,14,14,.06) !important; cursor: pointer;
  transition: background .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
html body.v4 #menu .menu-tabs .tab[data-tab="pizzas"]::before { content: "🍕"; }
html body.v4 #menu .menu-tabs .tab:hover {
  border-color: #EEC535 !important; box-shadow: 0 6px 16px rgba(238,197,53,.22) !important; transform: translateY(-1px);
}
html body.v4 #menu .menu-tabs .tab.active {
  background: #EEC535 !important; color: #1B0E0E !important; border: 1.5px solid #EEC535 !important;
  box-shadow: 0 6px 18px rgba(238,197,53,.40) !important; transform: none;
}
html body.v4 #menu .menu-tabs .tab:focus-visible { outline: 3px solid #1B0E0E !important; outline-offset: 2px; }

/* Téléphone / tablette : une seule ligne qui défile, boutons NON réduits, fondu à droite pour inviter à faire défiler */
@media (max-width: 960px) {
  html body.v4 #menu .menu-tabs {
    flex-wrap: nowrap !important; overflow-x: auto !important; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
    gap: 10px !important; padding: 10px 2px 14px !important; margin: 0 -20px 12px 0 !important; scrollbar-width: none;
    position: sticky; top: 68px; z-index: 20; background: var(--v4-farine) !important;
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 42px), transparent 100%);
            mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 42px), transparent 100%);
  }
  html body.v4 #menu .menu-tabs::-webkit-scrollbar { display: none; }
  html body.v4 #menu .menu-tabs .tab { flex: 0 0 auto !important; scroll-snap-align: start; min-height: 46px; font-size: 15.5px !important; padding: 0 18px !important; }
  html body.v4 #menu .menu-tabs .tab:last-child { margin-right: 40px !important; }
  html body.v4 #menu .menu-tabs .tab:hover { transform: none; }
  html body.v4 #menu .menu-tabs .tab, html body.v4 #menu .menu-tabs .tab.active { box-shadow: none !important; }
}

/* ══════════════════════════════════════════════════════════════════════
   V4 TEST — Raccourcis par base (onglet Pizzas uniquement).
   Barre créée par theme-2026-test.js à partir des titres .v4-groupe existants.
   Placée DANS #tab-pizzas : elle disparaît d'elle-même quand on quitte l'onglet Pizzas.
   ══════════════════════════════════════════════════════════════════════ */
html body.v4 #tab-pizzas .v4-bases {
  position: sticky; top: var(--v4-sticky-top, 68px); z-index: 19;
  display: flex; gap: 8px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  margin: 0 0 6px; padding: 8px 0 10px; background: var(--v4-farine);
  border-bottom: 1px solid var(--v4-creme-2);
}
html body.v4 #tab-pizzas .v4-bases::-webkit-scrollbar { display: none; }
html body.v4 #tab-pizzas .v4-base-btn {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 16px;
  border-radius: 999px; border: 1.5px solid rgba(27,14,14,.16); background: #FFFFFF; color: #1B0E0E;
  font-family: var(--v4-texte); font-size: 14px; font-weight: 700; letter-spacing: .3px; white-space: nowrap; cursor: pointer;
  transition: background .2s ease, border-color .2s ease;
}
html body.v4 #tab-pizzas .v4-base-btn[hidden] { display: none; }
html body.v4 #tab-pizzas .v4-base-btn:hover { border-color: #EEC535; }
html body.v4 #tab-pizzas .v4-base-btn.actif { background: #EEC535; border-color: #EEC535; color: #1B0E0E; }
html body.v4 #tab-pizzas .v4-base-btn:focus-visible { outline: 3px solid #1B0E0E; outline-offset: 2px; }
/* Le titre de la base arrive juste sous les barres collées (valeur calculée en direct par le script) */
html body.v4 #tab-pizzas .v4-groupe { scroll-margin-top: var(--v4-scroll-marge, 140px); }
/* Téléphone : dans l'onglet Pizzas, seuls les raccourcis restent collés (la barre des catégories reprend sa place) */
@media (max-width: 960px) {
  /* (règle retirée : les catégories restent désormais collées aussi dans l'onglet Pizzas) */
  html body.v4 #tab-pizzas .v4-bases { margin: 0 -20px 6px 0; padding-right: 20px;
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 28px), transparent 100%);
            mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 28px), transparent 100%); }
}
@media (prefers-reduced-motion: reduce) { html body.v4 #tab-pizzas .v4-base-btn { transition: none; } }

/* ══════════════════════════════════════════════════════════════════════
   V4 TEST — Deux niveaux de navigation collés (toutes largeurs).
   Niveau 1 : catégories (dominantes), collées sous l'en-tête.
   Niveau 2 : bases (secondaires), collées sous les catégories, onglet Pizzas uniquement.
   Positions fournies par theme-2026-test.js (--v4-header-h, --v4-bases-top, --v4-scroll-marge).
   ══════════════════════════════════════════════════════════════════════ */
html body.v4 #menu .menu-tabs {
  position: sticky !important; top: var(--v4-header-h, 64px) !important; z-index: 21 !important;
  flex-wrap: nowrap !important; overflow-x: auto !important; overflow-y: hidden !important; scrollbar-width: none;
  -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity;
  background: var(--v4-farine) !important; padding: 8px 2px 8px !important; margin: 0 0 4px !important;
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 36px), transparent 100%);
          mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 36px), transparent 100%);
}
html body.v4 #menu .menu-tabs::-webkit-scrollbar { display: none; }
html body.v4 #menu .menu-tabs .tab { flex: 0 0 auto !important; scroll-snap-align: start; }
html body.v4 #menu .menu-tabs .tab:last-child { margin-right: 36px !important; }
html body.v4 #menu .menu-tabs .tab, html body.v4 #menu .menu-tabs .tab.active { box-shadow: none !important; }
html body.v4 #menu .menu-tabs .tab:hover { transform: none !important; }
@media (max-width: 960px) { html body.v4 #menu .menu-tabs { margin: 0 -20px 4px 0 !important; } }

/* Niveau 2 : bases, plus petites et discrètes */
html body.v4 #tab-pizzas .v4-bases {
  top: var(--v4-bases-top, 128px) !important; z-index: 20 !important;
  padding: 4px 0 8px !important; margin: 0 0 4px !important; gap: 6px !important;
  border-bottom: 1px solid var(--v4-creme-2);
}
html body.v4 #tab-pizzas .v4-base-btn {
  min-height: 36px !important; padding: 0 13px !important; font-size: 13px !important; font-weight: 700;
  background: var(--v4-creme) !important; border: 1px solid rgba(27,14,14,.10) !important; color: #1B0E0E !important;
}
html body.v4 #tab-pizzas .v4-base-btn:hover { border-color: #EEC535 !important; }
html body.v4 #tab-pizzas .v4-base-btn.actif { background: #EEC535 !important; border-color: #EEC535 !important; }

/* ══════════════════════════════════════════════════════════════════════
   V4 TEST — Barre des catégories : vraie barre défilante (doigt, molette, souris).
   Cible UNIQUEMENT #menu .menu-tabs. La barre des bases (.v4-bases) n'est pas concernée.
   ══════════════════════════════════════════════════════════════════════ */
html body.v4 #menu .menu-tabs {
  scroll-snap-type: none !important;
  overscroll-behavior-x: contain;
  touch-action: pan-x pan-y;
  cursor: grab;
}
html body.v4 #menu .menu-tabs.v4-glisse { cursor: grabbing; }
html body.v4 #menu .menu-tabs.v4-glisse .tab { pointer-events: none; }
html body.v4 #menu .menu-tabs .tab { scroll-snap-align: none !important; }
html body.v4 #menu .menu-tabs .tab:last-child { margin-right: 44px !important; }
/* Ordinateur (souris) : fine barre de défilement beige visible sous les catégories */
@media (hover: hover) and (pointer: fine) {
  html body.v4 #menu .menu-tabs { scrollbar-width: thin !important; scrollbar-color: var(--v4-pierre-2) transparent; }
  html body.v4 #menu .menu-tabs::-webkit-scrollbar { display: block !important; height: 6px; }
  html body.v4 #menu .menu-tabs::-webkit-scrollbar-thumb { background: var(--v4-pierre-2); border-radius: 999px; }
  html body.v4 #menu .menu-tabs::-webkit-scrollbar-track { background: transparent; }
}