/* ==========================================================================
   FICHIER DE THÈME FOND BLANC & ROUGE #092F65 + MODE SOMBRE
   Typographie : Liberation Sans / Arimo
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Arimo:ital,wght@0,400..700;1,400..700&display=swap');

:root {
  --primary-color: #092F65;
  --primary-hover: #082752;
  --primary-soft: rgba(9, 47, 101, 0.12);
  --primary-border: rgba(9, 47, 101, 0.25);
  --primary-glow: rgba(9, 47, 101, 0.2);

  --bg-main: #FFFFFF;
  --bg-surface: #FFFFFF;
  --bg-card: #FFFFFF;

  --text-primary: #0F172A;
  --text-secondary: #64748B;

  --border-radius: 20px;
  --border-radius-lg: 28px;
  --border-radius-pill: 9999px;
  
  --font-family: "Liberation Sans", "Arimo", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-heading: "Liberation Sans", "Arimo", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

html, body {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* ==========================================================================
   ARRIÈRE-PLAN GÉNÉRAL EXTERNE (EN DEHORS DU SMARTPHONE "LE TRUC")
   Doit TOUJOURS rester identique : blanc avec la grille de points rouges.
   Il ne doit JAMAIS changer, ni en mode clair ni en mode sombre !
   ========================================================================== */
html,
body,
html body,
html.dark,
html.dark body,
#root,
html.dark #root,
div[class*="min-h-[100dvh]"][class*="items-center"] {
  background-color: #FFFFFF !important;
}

/* Remplacements du noir d'origine UNIQUEMENT en mode clair (HORS SPLASH SCREEN) */
html:not(.dark) .bg-\[\#0C0A08\]:not(.splash-screen-root):not(.splash-screen-bg):not(.splash-progress-track),
html:not(.dark) [class*="bg-[#0C0A08]"]:not(.splash-screen-root):not(.splash-screen-bg):not(.splash-progress-track),
html:not(.dark) [class*="bg-neutral-950"] {
  background-color: #FFFFFF !important;
}

/* Garantie absolue : le Splash Screen reste toujours noir profond (#0C0A08) dès 0ms */
.splash-screen-root,
.splash-screen-bg,
html:not(.dark) .splash-screen-root,
html:not(.dark) .splash-screen-bg,
html.dark .splash-screen-root,
html.dark .splash-screen-bg {
  background-color: #0C0A08 !important;
}

.splash-progress-track,
html:not(.dark) .splash-progress-track,
html.dark .splash-progress-track {
  background-color: rgba(12, 10, 8, 0.90) !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
}

html:not(.dark) [class*="bg-[#14120F]"] {
  background-color: #F8FAFC !important;
}

html:not(.dark) [class*="border-[#DCAC39]"] {
  border-color: #F1F5F9 !important;
}

html:not(.dark) .gold-card {
  background: #FFFFFF !important;
  border: none !important;
  box-shadow: 0 6px 22px rgba(15, 23, 42, 0.08) !important;
}

html:not(.dark) .gold-card:hover {
  background: #FFFFFF !important;
  border: none !important;
  box-shadow: 0 8px 26px rgba(15, 23, 42, 0.10) !important;
}

html:not(.dark) .subpage-header {
  background: #FFFFFF !important;
}

html:not(.dark) .subpage-back-btn {
  background: #FFFFFF !important;
  border: 1px solid #F1F5F9 !important;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08) !important;
  color: #0F172A !important;
}

html:not(.dark) .lang-pill-bar {
  background: #FFFFFF !important;
  border: 1px solid #F1F5F9 !important;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.08) !important;
}

html:not(.dark) .cart-clear-btn {
  background: #FFF1D5 !important;
  border: 1px solid #F8DFA9 !important;
  color: #092F65 !important;
}

html:not(.dark) .cart-item-card {
  background: #FFFFFF !important;
  border: none !important;
  box-shadow: 0 8px 26px rgba(15, 23, 42, 0.08), 0 2px 6px rgba(15, 23, 42, 0.04) !important;
}

html:not(.dark) .cart-del-btn {
  background: #F8F8F7 !important;
  color: #092F65 !important;
}

html:not(.dark) .cart-google-card {
  background: #FFF1D5 !important;
  border: 1px solid #F8DFA9 !important;
}

html:not(.dark) .cart-google-icon {
  background: #FFFFFF !important;
}

html:not(.dark) .cart-total-box-green {
  background: #FFFFFF !important;
  border: none !important;
  box-shadow: 0 8px 26px rgba(15, 23, 42, 0.08), 0 2px 6px rgba(15, 23, 42, 0.04) !important;
}

html:not(.dark) .detail-thumbs-row {
  background: #FFFFFF !important;
}

html:not(.dark) .detail-body-card {
  background: #FFFFFF !important;
  box-shadow: 0 -6px 24px rgba(15, 23, 42, 0.04) !important;
}

html:not(.dark) .detail-size-unselected {
  background-color: #FFFFFF !important;
  color: #0F172A !important;
  border: 1.5px solid #E2E8F0 !important;
}

html:not(.dark) .detail-qty-pill {
  background: #FFFFFF !important;
  border: 1.5px solid #F1F5F9 !important;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.08) !important;
}

html:not(.dark) .detail-qty-minus {
  background: #F8FAFC !important;
  color: #0F172A !important;
}

html:not(.dark) .detail-bottom-bar {
  background: #FFFFFF !important;
}

html:not(.dark) nav,
html:not(.dark) nav[class*="pt-2"] {
  border-top: none !important;
  box-shadow: none !important;
  background-color: #FFFFFF !important;
}

html:not(.dark) .bottom-nav-gradient {
  background: linear-gradient(to top, #FFFFFF 0%, rgba(255, 255, 255, 0.85) 45%, rgba(255, 255, 255, 0) 100%) !important;
}

/* ==========================================================================
   BOUTON BASCULE THÈME (THEME TOGGLE BUTTON)
   ========================================================================== */
.theme-toggle-btn {
  width: 36px !important;
  height: 36px !important;
  border-radius: 9999px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.2s ease !important;
}

html:not(.dark) .theme-toggle-btn {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  color: #0F172A !important;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08) !important;
}

.dark-sun-icon { display: none !important; }
.dark-moon-icon { display: block !important; }

html.dark .dark-sun-icon {
  display: block !important;
  color: #FBBF24 !important;
}

html.dark .dark-moon-icon {
  display: none !important;
}

html.dark .theme-toggle-btn {
  background: #181922 !important;
  border: 1px solid #282A36 !important;
  color: #F8FAFC !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4) !important;
}

/* ==========================================================================
   UTILITAIRES COMMUNS
   ========================================================================== */
.btn-red-cta,
.bg-\[\#092F65\] {
  background-color: #092F65 !important;
  color: #FFFFFF !important;
  border: none !important;
}

/* Wildcard span/svg override removed to prevent white-on-white text */

.gold-btn-luxury {
  background: #092F65 !important;
  color: #FFFFFF !important;
  border: none !important;
  box-shadow: 0 4px 14px rgba(9, 47, 101, 0.25) !important;
}

.badge-photo-black,
[data-badge="photo-count"],
div[data-badge="photo-count"] {
  background-color: #000000 !important;
  color: #FFFFFF !important;
}

.badge-photo-black *,
[data-badge="photo-count"] * {
  color: #FFFFFF !important;
}

.dish-card-fixed,
article[data-card="dish-card"] {
  height: 228px !important;
  min-height: 228px !important;
  max-height: 228px !important;
  width: 100% !important;
  position: relative !important;
  overflow: hidden !important;
  margin-bottom: 40px !important;
  border-top-left-radius: 24px !important;
  border-top-right-radius: 24px !important;
  border-bottom-left-radius: 0px !important;
  border-bottom-right-radius: 0px !important;
}

.dish-card-fixed img,
article[data-card="dish-card"] img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
}

/* Rideau (bandeau inférieur) avec transparence et flou d'arrière-plan */
article[data-card="dish-card"] .absolute.bottom-0,
.dish-card-fixed .absolute.bottom-0,
[data-card="dish-card"] [class*="bottom-0"] {
  background: rgba(255, 255, 255, 0.65) !important;
  background-color: rgba(255, 255, 255, 0.65) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

/* Bouton VOIR DÉTAIL rouge sans aucun ombrage */
/* Legacy dish-card button override removed for DAVVERO cream buttons */

/* Legacy dish-card button * override removed */

.bottom-nav-gradient {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 100% !important;
  height: 42px !important;
  pointer-events: none !important;
  z-index: 30 !important;
}

/* Détail produit commun */
.detail-thumb-btn {
  width: 56px !important;
  height: 56px !important;
  border-radius: 14px !important;
}

.detail-thumb-active {
  border: 2.5px solid #092F65 !important;
  box-shadow: 0 4px 12px rgba(9, 47, 101, 0.18) !important;
  opacity: 1 !important;
}

.detail-thumb-inactive {
  border: 1.5px solid transparent !important;
  opacity: 0.9 !important;
}

.detail-title-bar {
  font-size: 23px !important;
  font-weight: 900 !important;
  position: relative !important;
}

.detail-title-bar::before {
  content: "";
  display: block;
  width: 28px;
  height: 3.5px;
  background-color: #092F65;
  border-radius: 999px;
  margin-bottom: 10px;
}

.detail-price-row {
  padding-bottom: 14px !important;
}

.detail-price-text {
  color: #092F65 !important;
  font-size: 24px !important;
  font-weight: 900 !important;
}

.detail-size-card {
  position: relative !important;
  padding: 12px 14px !important;
  border-radius: 16px !important;
  text-align: left !important;
}

.detail-size-selected {
  background-color: #092F65 !important;
  color: #FFFFFF !important;
  border: 1.5px solid #092F65 !important;
  box-shadow: 0 6px 16px rgba(9, 47, 101, 0.22) !important;
}

.detail-size-selected * {
  color: #FFFFFF !important;
}

.detail-size-selected::after {
  content: "✓";
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  border-radius: 9999px;
  background-color: #FFFFFF;
  color: #092F65 !important;
  font-size: 12px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
}

.detail-desc-heading {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.detail-desc-heading::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 2.5px;
  background-color: #092F65;
  border-radius: 999px;
}

.detail-add-btn {
  background: #092F65 !important;
  border: none !important;
  border-radius: 9999px !important;
  box-shadow: 0 8px 22px rgba(9, 47, 101, 0.28) !important;
}


/* ==========================================================================
   MODE SOMBRE DANS LE SMARTPHONE ("LE TRUC") - ZÉRO FOND BLANC
   Le conteneur du téléphone et ses éléments internes s'adaptent au mode sombre.
   L'arrière-plan externe reste blanc à pois rouges en continu.
   ========================================================================== */

/* Conteneur principal du smartphone */
html.dark .max-w-\[390px\],
html.dark [class*="max-w-[390px]"] {
  background-color: #0A0A0E !important;
  border-color: #232530 !important;
  box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05) !important;
  color: #F8FAFC !important;
}

/* 1. Élimination radicale de TOUT fond blanc ou gris clair à l'intérieur du smartphone */
html.dark .max-w-\[390px\] .bg-white,
html.dark [class*="max-w-[390px]"] [class*="bg-white"],
html.dark .max-w-\[390px\] .bg-gray-50,
html.dark [class*="max-w-[390px]"] [class*="bg-gray-50"],
html.dark .max-w-\[390px\] .bg-gray-100,
html.dark [class*="max-w-[390px]"] [class*="bg-gray-100"],
html.dark .max-w-\[390px\] .bg-neutral-50,
html.dark [class*="max-w-[390px]"] [class*="bg-neutral-50"],
html.dark .max-w-\[390px\] .bg-neutral-100,
html.dark [class*="max-w-[390px]"] [class*="bg-neutral-100"],
html.dark .max-w-\[390px\] .bg-\[\#F8FAFC\],
html.dark [class*="max-w-[390px]"] [class*="bg-[#F8FAFC]"],
html.dark .bg-\[\#F8FAFC\],
html.dark [class*="bg-[#F8FAFC]"],
html.dark .bg-white,
html.dark [class*="bg-white"],
html.dark .bg-gray-50,
html.dark [class*="bg-gray-50"],
html.dark .bg-gray-100,
html.dark [class*="bg-gray-100"],
html.dark .bg-neutral-50,
html.dark [class*="bg-neutral-50"],
html.dark .bg-neutral-100,
html.dark [class*="bg-neutral-100"],
html.dark .bg-neutral-950,
html.dark [class*="bg-neutral-950"],
html.dark .bg-\[\#0C0A08\],
html.dark [class*="bg-[#0C0A08]"],
html.dark .bg-\[\#14120F\],
html.dark [class*="bg-[#14120F]"],
html.dark [style*="background: #FFFFFF"],
html.dark [style*="background:#FFFFFF"],
html.dark [style*="background: white"],
html.dark [style*="background-color: #FFFFFF"],
html.dark [style*="background-color: white"],
html.dark [style*="background: rgb(255, 255, 255)"],
html.dark [style*="background-color: rgb(255, 255, 255)"],
html.dark [style*="background: #FFF1D5"],
html.dark [style*="background:#FFF1D5"],
html.dark [style*="background: #F8FAFC"] {
  background-color: #12131A !important;
}

/* 2. Remplacement des dégradés latéraux en mode sombre + Dégradé blanc en haut de la photo Détail Produit */
html.dark .bg-gradient-to-r[class*="from-white"] {
  --tw-gradient-from: #0A0A0E var(--tw-gradient-from-position) !important;
  --tw-gradient-to: rgba(10, 10, 14, 0) var(--tw-gradient-to-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
  background-image: linear-gradient(to right, #0A0A0E, rgba(10, 10, 14, 0.85), transparent) !important;
}

html.dark [class*="bg-gradient-to-l"][class*="from-white"] {
  background-image: linear-gradient(to left, #0A0A0E, rgba(10, 10, 14, 0.85), transparent) !important;
}

/* Suppression du dégradé en haut de l'image mais CONSERVATION du conteneur du bouton Retour */
div[class*="h-[300px]"]::after,
div[class*="sm:h-[380px]"]::after {
  display: none !important;
  content: none !important;
}

[class*="bg-gradient-to-b"][class*="from-white"],
html.dark [class*="bg-gradient-to-b"][class*="from-white"] {
  display: flex !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}

/* Bouton Retour dans la fiche Détail Produit */
[class*="bg-gradient-to-b"] button {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  cursor: pointer !important;
  background-color: #FFFFFF !important;
  color: #0F172A !important;
  border: 1px solid #E2E8F0 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

[class*="bg-gradient-to-b"] button * {
  color: #0F172A !important;
  stroke: #0F172A !important;
}

html.dark [class*="bg-gradient-to-b"] button {
  background-color: #1A1C24 !important;
  color: #F8FAFC !important;
  border: 1px solid #282A38 !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5) !important;
}

html.dark [class*="bg-gradient-to-b"] button * {
  color: #F8FAFC !important;
  stroke: #F8FAFC !important;
}

/* Dégradé réduit sur photos et vidéos du détail produit : BLANC en mode clair */
.detail-media-gradient,
div[class*="h-[300px]"] [class*="bg-gradient-to-t"],
div[class*="sm:h-[380px]"] [class*="bg-gradient-to-t"],
[class*="bg-gradient-to-t"][class*="from-white"]:not(.bottom-nav-gradient) {
  height: 55px !important;
  top: auto !important;
  bottom: 0 !important;
  background: linear-gradient(
    to top,
    rgba(255, 255, 255, 0.85) 0%,
    rgba(255, 255, 255, 0.40) 35%,
    rgba(255, 255, 255, 0) 100%
  ) !important;
  background-image: linear-gradient(
    to top,
    rgba(255, 255, 255, 0.85) 0%,
    rgba(255, 255, 255, 0.40) 35%,
    rgba(255, 255, 255, 0) 100%
  ) !important;
}

/* Dégradé réduit sur photos et vidéos du détail produit : NOIR / DARK en mode sombre */
html.dark .detail-media-gradient,
html.dark div[class*="h-[300px]"] [class*="bg-gradient-to-t"],
html.dark div[class*="sm:h-[380px]"] [class*="bg-gradient-to-t"],
html.dark [class*="bg-gradient-to-t"][class*="from-white"]:not(.bottom-nav-gradient) {
  height: 55px !important;
  top: auto !important;
  bottom: 0 !important;
  background: linear-gradient(
    to top,
    rgba(18, 19, 26, 0.85) 0%,
    rgba(18, 19, 26, 0.40) 35%,
    rgba(18, 19, 26, 0) 100%
  ) !important;
  background-image: linear-gradient(
    to top,
    rgba(18, 19, 26, 0.85) 0%,
    rgba(18, 19, 26, 0.40) 35%,
    rgba(18, 19, 26, 0) 100%
  ) !important;
}

/* Flèches de navigation carrousel détail produit : plus petites et transparentes */
.detail-carousel-arrow {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  min-height: 28px !important;
  background: rgba(255, 255, 255, 0.35) !important;
  background-color: rgba(255, 255, 255, 0.35) !important;
  border: 1px solid rgba(255, 255, 255, 0.45) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12) !important;
  color: #1F2937 !important;
  opacity: 0.70 !important;
  transition: opacity 0.2s ease, transform 0.15s ease, background-color 0.2s ease !important;
}

.detail-carousel-arrow:hover {
  opacity: 0.95 !important;
  background: rgba(255, 255, 255, 0.70) !important;
  background-color: rgba(255, 255, 255, 0.70) !important;
}

.detail-carousel-arrow svg {
  width: 14px !important;
  height: 14px !important;
  stroke-width: 2.2 !important;
}

/* En mode sombre */
html.dark .detail-carousel-arrow {
  background: rgba(0, 0, 0, 0.35) !important;
  background-color: rgba(0, 0, 0, 0.35) !important;
  border: 1px solid rgba(255, 255, 255, 0.20) !important;
  color: #F9FAFB !important;
  opacity: 0.70 !important;
}

html.dark .detail-carousel-arrow:hover {
  opacity: 0.95 !important;
  background: rgba(0, 0, 0, 0.65) !important;
  background-color: rgba(0, 0, 0, 0.65) !important;
}

/* Positionnement rigoureusement symétrique des flèches gauche et droite face au bord */
.detail-carousel-arrow.detail-carousel-prev {
  left: 8px !important;
  right: auto !important;
}

.detail-carousel-arrow.detail-carousel-next {
  right: 8px !important;
  left: auto !important;
}

html.dark .bottom-nav-gradient {
  background: linear-gradient(to top, #0A0A0E 0%, rgba(10, 10, 14, 0.85) 45%, rgba(10, 10, 14, 0) 100%) !important;
}

/* 3. Textes en mode sombre */
html.dark .text-gray-900,
html.dark .text-slate-900,
html.dark .text-\[\#0F172A\],
html.dark [style*="color: #0F172A"],
html.dark [style*="color:#0F172A"] {
  color: #F8FAFC !important;
}

html.dark .text-gray-800,
html.dark .text-slate-800,
html.dark .text-gray-700,
html.dark .text-slate-700,
html.dark [style*="color: #334155"],
html.dark [style*="color:#334155"] {
  color: #E2E8F0 !important;
}

html.dark .text-gray-600,
html.dark .text-slate-600,
html.dark .text-gray-500,
html.dark .text-slate-500,
html.dark .text-neutral-400,
html.dark .text-gray-400,
html.dark [style*="color: #64748B"],
html.dark [style*="color:#64748B"],
html.dark [style*="color: #94A3B8"],
html.dark [style*="color:#94A3B8"] {
  color: #94A3B8 !important;
}

/* 4. Bordures en mode sombre */
html.dark .border-gray-100,
html.dark .border-gray-200,
html.dark .border-gray-300,
html.dark [style*="border: 1px solid #F1F5F9"],
html.dark [style*="border:1px solid #F1F5F9"],
html.dark [style*="border-bottom: 1px solid #F1F5F9"],
html.dark [style*="border-bottom:1px solid #F1F5F9"],
html.dark [style*="border: 1px solid #F8DFA9"],
html.dark [style*="border:1px solid #F8DFA9"] {
  border-color: #232530 !important;
}

/* 5. Barre de catégories et en-tête en mode sombre */
html.dark #category-bar-section,
html.dark [id="category-bar-section"],
html.dark [id="category-bar-section"] > div,
html.dark .subpage-header,
html.dark header {
  background-color: #0A0A0E !important;
}

/* Anneau / fond blanc autour des photos de catégories dans la barre */
html.dark #category-bar-section [class*="rounded-full"][class*="bg-white"] {
  background-color: #1A1C24 !important;
}

html.dark .lang-pill-bar {
  background: #161720 !important;
  border: 1px solid #262838 !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4) !important;
}

html.dark .lang-pill-bar button {
  color: #94A3B8 !important;
}

html.dark .lang-pill-bar button.bg-\[\#092F65\],
html.dark .lang-pill-bar button[class*="bg-[#092F65]"] {
  background-color: #092F65 !important;
  color: #FFFFFF !important;
}

/* 6. Vignettes de plats en mode sombre */
html.dark article[data-card="dish-card"],
html.dark .dish-card-fixed {
  background-color: #12131A !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6) !important;
}

/* Rideau inférieur en mode sombre avec belle transparence et flou */
html.dark article[data-card="dish-card"] .absolute.bottom-0,
html.dark .dish-card-fixed .absolute.bottom-0,
html.dark [data-card="dish-card"] [class*="bottom-0"] {
  background: rgba(10, 10, 14, 0.60) !important;
  background-color: rgba(10, 10, 14, 0.60) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

/* Textes de la vignette en mode sombre : BLANC */
html.dark article[data-card="dish-card"] h3,
html.dark .dish-card-fixed h3,
html.dark article[data-card="dish-card"] p,
html.dark .dish-card-fixed p,
html.dark article[data-card="dish-card"] span,
html.dark .dish-card-fixed span {
  color: #FFFFFF !important;
}

/* Prix barré */
html.dark article[data-card="dish-card"] p span.line-through,
html.dark .dish-card-fixed p span.line-through,
html.dark [data-card="dish-card"] [class*="line-through"] {
  color: #94A3B8 !important;
}

/* Bouton VOIR DÉTAIL en mode sombre : ROUGE sans ombrage avec TEXTE BLANC */
html.dark article[data-card="dish-card"] button,
html.dark .dish-card-fixed button,
html.dark [data-card="dish-card"] button {
  background: #092F65 !important;
  background-color: #092F65 !important;
  color: #FFFFFF !important;
  border: none !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  text-shadow: none !important;
  filter: none !important;
  outline: none !important;
}

html.dark article[data-card="dish-card"] button *,
html.dark .dish-card-fixed button *,
html.dark [data-card="dish-card"] button * {
  color: #FFFFFF !important;
  stroke: #FFFFFF !important;
}

/* 7. Barre de navigation basse */
html.dark nav,
html.dark nav[class*="pt-2"] {
  background-color: #0A0A0E !important;
  border: none !important;
}

html.dark nav button {
  color: #71717A !important;
}

html.dark nav button.text-\[\#092F65\],
html.dark nav button [class*="text-[#092F65]"] {
  color: #092F65 !important;
}

/* 8. Page Panier en mode sombre */
html.dark .cart-main-title {
  color: #F8FAFC !important;
}

html.dark .cart-top-header {
  border-bottom: 1px solid #232530 !important;
}

html.dark .cart-clear-btn {
  background: rgba(9, 47, 101, 0.16) !important;
  border: 1px solid rgba(9, 47, 101, 0.3) !important;
  color: #FF4D4D !important;
}

html.dark .cart-item-card {
  background: #14151C !important;
  border: 1px solid #232530 !important;
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.45) !important;
}

html.dark .cart-item-title,
html.dark .cart-item-price {
  color: #F8FAFC !important;
}

html.dark .cart-del-btn {
  background: rgba(9, 47, 101, 0.16) !important;
  color: #FF4D4D !important;
}

html.dark .cart-google-card {
  background: #161722 !important;
  border: 1px solid #282A38 !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4) !important;
}

html.dark .cart-google-card * {
  color: #F8FAFC !important;
}

html.dark .cart-google-icon {
  background: #202230 !important;
}

html.dark .cart-google-ext {
  background: #092F65 !important;
  color: #FFFFFF !important;
}

html.dark .cart-total-box-green {
  background: #14151C !important;
  border: 1px solid #232530 !important;
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.45) !important;
}

html.dark .cart-total-label,
html.dark .cart-total-amount {
  color: #F8FAFC !important;
}

/* 9. Fiche Détail Produit en mode sombre */
html.dark .detail-thumbs-row {
  background: #12131A !important;
}

html.dark .detail-body-card {
  background: #12131A !important;
  box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.5) !important;
}

html.dark .detail-title-bar {
  color: #F8FAFC !important;
}

html.dark .detail-price-row {
  border-bottom: 1px solid #232530 !important;
}

html.dark .detail-size-unselected {
  background-color: #1A1C24 !important;
  border: 1.5px solid #282A38 !important;
  color: #F8FAFC !important;
}

html.dark .detail-size-selected {
  background-color: #092F65 !important;
  color: #FFFFFF !important;
  border: 1.5px solid #092F65 !important;
}

html.dark .detail-desc-text {
  color: #94A3B8 !important;
}

html.dark .detail-bottom-bar {
  background: #12131A !important;
}

html.dark .detail-qty-pill {
  background: #1A1C24 !important;
  border: 1.5px solid #282A38 !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4) !important;
}

html.dark .detail-qty-minus {
  background: #242734 !important;
  color: #FFFFFF !important;
}

html.dark .detail-qty-pill span {
  color: #FFFFFF !important;
}

/* Modale globale, tiroir commande, popup ingrédients en mode sombre */
html.dark [class*="fixed"][class*="z-50"] > div {
  background-color: #12131A !important;
}

html.dark .detail-body-card button.bg-white,
html.dark [class*="detail-body-card"] button.bg-white {
  background-color: #1A1C24 !important;
  border-color: #282A38 !important;
  color: #F8FAFC !important;
}

html.dark .detail-body-card button.bg-red-50,
html.dark [class*="detail-body-card"] button.bg-red-50 {
  background-color: rgba(9, 47, 101, 0.2) !important;
  border-color: #092F65 !important;
  color: #FFFFFF !important;
}

/* Page Recherche en mode sombre */
html.dark input[type="text"],
html.dark input[type="search"] {
  background-color: #14151C !important;
  border-color: #282A38 !important;
  color: #FFFFFF !important;
}

html.dark input::placeholder {
  color: #71717A !important;
}

/* ==========================================================================
   VERROUILLAGE ABSOLU DE L'EXTÉRIEUR DU TRUC (CANVAS GLOBAL)
   En mode clair, en mode sombre, et lors de l'ouverture de n'importe quelle modale,
   tout l'espace en dehors du smartphone reste impérativement blanc à pois rouges.
   ========================================================================== */
html,
body,
html body,
html.dark,
html.dark body,
#root,
html.dark #root,
div[class*="min-h-[100dvh]"][class*="items-center"],
div[class*="fixed"][class*="inset-0"][class*="bg-[var(--bg-main)]"] {
  background-color: #FFFFFF !important;
  background-image: none !important;
  background-size: 24px 24px !important;
  background-attachment: fixed !important;
}

.max-w-\[390px\],
[class*="max-w-[390px]"] {
  background-image: none !important;
}

@media (max-width: 639px) {
  html, body, html body, #root,
  div[class*="min-h-[100dvh]"][class*="items-center"],
  div[class*="fixed"][class*="inset-0"][class*="bg-[var(--bg-main)]"] {
    background-image: none !important;
  }
  .max-w-\[390px\],
  [class*="max-w-[390px]"] {
    max-width: 100% !important;
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
  }
}

div[style*="radial-gradient(var(--primary-color)"] {
  display: none !important;
}

/* ==========================================================================
   SUPPRESSION DU VOILE GRIS / NOIR PLEIN ÉCRAN LORS DE L'OUVERTURE DES MODALES
   L'extérieur du smartphone ne devient JAMAIS gris ni flou.
   ========================================================================== */
.fixed.inset-0.bg-black\/60,
.fixed.inset-0.bg-black\/85,
div[class*="fixed"][class*="inset-0"][class*="bg-black"],
div[class*="fixed"][class*="inset-0"][class*="backdrop-blur"],
div[class*="fixed"][class*="inset-0"][class*="z-50"],
div[class*="fixed inset-0"][class*="bg-black"],
div[class*="fixed inset-0"][class*="backdrop-blur"],
div[class*="fixed inset-0"][class*="z-50"] {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Legacy button wildcard block removed to prevent white text on white/cream backgrounds */


/* ==========================================================================
   MODALE DE SUGGESTION D'ARTICLE (UPSELL POPUP CLIENT - CLAIR & SOMBRE)
   ========================================================================== */
div.suggestion-modal-backdrop,
.suggestion-modal-backdrop {
  position: absolute !important;
  inset: 0 !important;
  z-index: 85 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 14px !important;
  background-color: rgba(0, 0, 0, 0.72) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
}

div.suggestion-modal-card,
.suggestion-modal-card {
  position: relative !important;
  z-index: 86 !important;
  width: 88% !important;
  max-width: 304px !important;
  border-radius: 24px !important;
  padding: 18px !important;
  overflow: hidden !important;
  background: #FFFFFF !important;
  background-color: #FFFFFF !important;
  border: 1px solid #E5E7EB !important;
  box-shadow: 0 22px 50px rgba(0, 0, 0, 0.28) !important;
}

html.dark div.suggestion-modal-card,
html.dark .suggestion-modal-card {
  background: #14120F !important;
  background-color: #14120F !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  box-shadow: 0 22px 50px rgba(0, 0, 0, 0.85) !important;
}

.suggestion-heading {
  color: #6B7280 !important;
}

html.dark .suggestion-heading {
  color: #D1D5DB !important;
}

.suggestion-item-title {
  color: #111827 !important;
}

html.dark .suggestion-item-title {
  color: #FFFFFF !important;
}

.suggestion-skip-btn {
  background: #F3F4F6 !important;
  background-color: #F3F4F6 !important;
  color: #374151 !important;
  border: 1px solid #E5E7EB !important;
}

html.dark .suggestion-detail-btn,
html.dark .suggestion-skip-btn {
  background: #221F1B !important;
  background-color: #221F1B !important;
  color: #E5E7EB !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
}


/* ==========================================================================
   POPUP TOAST AJOUTÉ AU PANIER (HARMONIE AVEC LE THÈME BLANC & SOMBRE)
   ========================================================================== */
.cart-toast-card {
  background: #FFFFFF !important;
  background-color: #FFFFFF !important;
  border: 1.5px solid rgba(9, 47, 101, 0.25) !important;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.18) !important;
}

.cart-toast-title {
  color: #111827 !important;
}

.cart-toast-subtitle {
  color: #092F65 !important;
}

html.dark .cart-toast-card {
  background: #14120F !important;
  background-color: #14120F !important;
  border: 1.5px solid rgba(9, 47, 101, 0.45) !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.85) !important;
}

html.dark .cart-toast-title {
  color: #FFFFFF !important;
}

html.dark .cart-toast-subtitle {
  color: #F87171 !important;
}



/* ==========================================================================
   MESSAGE DE BIENVENUE & ONBOARDING - TYPOGRAPHIE AGRANDIE (DIRECT SUR LE FOND)
   ========================================================================== */
.welcome-modal-backdrop,
.onboarding-backdrop-bottom,
html.dark .welcome-modal-backdrop,
html.dark .onboarding-backdrop-bottom {
  background-color: rgba(0, 0, 0, 0.78) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  filter: none !important;
  transform: translateZ(0) !important;
  will-change: opacity !important;
}

/* Le haut de l'onboarding et les drapeaux sont 100% RÉVÉLÉS et non assombris */
.onboarding-backdrop-top,
html.dark .onboarding-backdrop-top {
  background: transparent !important;
  background-color: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  filter: none !important;
}

/* Le conteneur d'onboarding reste 100% transparent pour que les catégories s'affichent normalement */
.onboarding-spotlight-wrapper,
html.dark .onboarding-spotlight-wrapper {
  background: transparent !important;
  background-color: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  filter: none !important;
}

/* Les drapeaux de langue et l'en-tête sont totalement révélés au premier plan */
body:has(.onboarding-spotlight-wrapper) .lang-pill-bar {
  opacity: 1 !important;
  z-index: 60 !important;
  position: relative !important;
  transition: opacity 0.25s ease-out !important;
}

body:has(.onboarding-spotlight-wrapper) .home-header-bar,
body:has(.welcome-modal-backdrop) .home-header-bar {
  opacity: 1 !important;
  z-index: 55 !important;
  position: relative !important;
  transition: opacity 0.25s ease-out !important;
}

/* SUPPRESSION DU CONTENEUR BOUTON/ARRONDI (TEXTE DIRECT SUR L'ARRIÈRE-PLAN) */
.welcome-modal-card,
html:not(.dark) .welcome-modal-card,
html.dark .welcome-modal-card,
.onboarding-message-pill,
html:not(.dark) .onboarding-message-pill,
html.dark .onboarding-message-pill {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  filter: none !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
}

.welcome-flag-badge,
html:not(.dark) .welcome-flag-badge,
html.dark .welcome-flag-badge {
  background-color: transparent !important;
  border: 1.5px solid rgba(255, 255, 255, 0.45) !important;
  border-radius: 7px !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.6) !important;
  padding: 0 !important;
  margin-bottom: 12px !important;
  transform: scale(1.15) !important;
}

/* TYPOGRAPHIE AGRANDIE (23px - 25px) DIRECTEMENT SUR L'ARRIÈRE-PLAN */
.welcome-modal-text,
html:not(.dark) .welcome-modal-text,
html.dark .welcome-modal-text,
.onboarding-message-text,
html:not(.dark) .onboarding-message-text,
html.dark .onboarding-message-text {
  font-family: 'Epilogue', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-size: 23px !important;
  font-weight: 900 !important;
  line-height: 1.3 !important;
  letter-spacing: -0.015em !important;
  color: #FFFFFF !important;
  text-shadow: 0 3px 14px rgba(0, 0, 0, 0.90), 0 1px 4px rgba(0, 0, 0, 0.95) !important;
  margin: 0 !important;
  padding: 0.35rem 0.75rem !important;
  text-align: center !important;
  display: inline-block !important;
}

@media (min-width: 360px) {
  .welcome-modal-text,
  html:not(.dark) .welcome-modal-text,
  html.dark .welcome-modal-text,
  .onboarding-message-text,
  html:not(.dark) .onboarding-message-text,
  html.dark .onboarding-message-text {
    font-size: 25px !important;
  }
}

/* Zone des categories pendant l'onboarding : totalement normale, sans noir et sans effet rouge ambré */
.onboarding-spotlight-hole,
html.dark .onboarding-spotlight-hole {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: none !important;
  border-width: 0 !important;
  outline: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  filter: none !important;
}

body:has(.onboarding-spotlight-wrapper) #category-bar-section {
  background-color: transparent !important;
  background: transparent !important;
  margin-top: -44px !important;
  padding-top: 0px !important;
  padding-bottom: 2px !important;
  padding-left: 0px !important;
  padding-right: 0px !important;
  position: relative !important;
  z-index: 30 !important;
}

.davvero-categories-carousel {
  background: transparent !important;
  background-color: transparent !important;
  overflow: hidden !important;
}

.davvero-categories-track {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 8px !important;
  width: max-content !important;
  padding-right: 8px !important;
  background: transparent !important;
  will-change: transform !important;
}

/* Flèche animée pointant vers le haut - Propre sans lueur agressive */
.onboarding-arrow-circle,
html:not(.dark) .onboarding-arrow-circle,
html.dark .onboarding-arrow-circle {
  background: #092F65 !important;
  background-color: #092F65 !important;
  color: #FFFFFF !important;
  border: 1.5px solid rgba(255, 255, 255, 0.30) !important;
  box-shadow: 0 10px 24px -4px rgba(0, 0, 0, 0.50), 0 0 14px rgba(9, 47, 101, 0.40) !important;
  margin-bottom: 12px !important;
  transform: scale(1.1) !important;
}

/* ==========================================================================
   EN-TÊTE MODALE DÉTAIL & BOUTONS DE NAVIGATION TOUTES PAGES
   ========================================================================== */
html:not(.dark) .detail-top-bar {
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0.4) 60%, transparent 100%) !important;
}

html.dark .detail-top-bar {
  background: linear-gradient(to bottom, rgba(18, 19, 26, 0.95) 0%, rgba(18, 19, 26, 0.45) 60%, transparent 100%) !important;
}

html:not(.dark) .detail-back-btn {
  background: #FFFFFF !important;
  color: #0F172A !important;
  border: 1px solid #E2E8F0 !important;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08) !important;
}
html:not(.dark) .detail-back-btn svg {
  color: #0F172A !important;
}

html.dark .detail-back-btn {
  background: #181922 !important;
  color: #F8FAFC !important;
  border: 1px solid #282A36 !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4) !important;
}
html.dark .detail-back-btn svg {
  color: #F8FAFC !important;
  stroke: #F8FAFC !important;
}

html.dark .subpage-back-btn {
  background: #181922 !important;
  border: 1px solid #282A36 !important;
  color: #F8FAFC !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4) !important;
}
html.dark .subpage-back-btn svg {
  color: #F8FAFC !important;
  stroke: #F8FAFC !important;
}

/* ==========================================================================
   PADDING COTÉ BORD SUR LES EN-TÊTES (ACCUEIL & SOUS-PAGES)
   ========================================================================== */
.home-header-bar,
#category-bar-section > div > div:first-child {
  padding-left: 20px !important;
  padding-right: 20px !important;
}

.subpage-header {
  padding-left: 20px !important;
  padding-right: 20px !important;
}

.detail-top-bar {
  padding-left: 20px !important;
  padding-right: 20px !important;
}

/* ==========================================================================
   OPTIMISATIONS VIDÉO 0 LATENCE (POSTER, FASTSTART & STREAMING)
   ========================================================================== */
video {
  background-color: transparent !important;
  object-fit: cover !important;
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
  transform: translateZ(0) !important;
}

video[poster] {
  object-fit: cover !important;
}

.detail-thumb-active video,
.detail-thumb-inactive video {
  pointer-events: none !important;
}

/* ==========================================================================
   FLUIDITÉ MAXIMALE 60/120 FPS & ISOLATION GPU SUR TOUTE L'APPLICATION
   ========================================================================== */
.dish-card-fixed,
article[data-card="dish-card"] {
  contain: layout paint style !important;
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

#category-bar-section {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: translate3d(0, 0, 0);
}

/* Défilement natif fluide iOS / Android sans rebond parasite */
[class*="overflow-y-auto"] {
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior-y: contain !important;
  scroll-behavior: auto !important;
}

/* ==========================================================================
   Ombrage noir affine (-30%) sur les cercles de categories non actives (Aucun contour blanc)
   ========================================================================== */
html:not(.dark) #category-bar-section .category-circle-inactive,
html:not(.dark) .category-circle-inactive {
  background-color: transparent !important;
  border: none !important;
  padding: 0 !important;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.24), 0 2px 5px rgba(0, 0, 0, 0.14) !important;
  filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.21)) !important;
  transition: box-shadow 0.25s ease-out, filter 0.25s ease-out, transform 0.25s ease-out !important;
}

html:not(.dark) #category-bar-section .category-circle-inactive > div,
html:not(.dark) .category-circle-inactive > div {
  background-color: transparent !important;
  border: none !important;
  padding: 0 !important;
}

/* En mode sombre, aucun ombrage sur les cercles non actives */
html.dark #category-bar-section .category-circle-inactive,
html.dark .category-circle-inactive {
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  filter: none !important;
}
/* ==========================================================================
   Barre de progression du Splash Screen en Rouge Royal Lumineux
   ========================================================================== */
.splash-progress-track > div,
[class*="animate-splash-bar"] {
  background: linear-gradient(90deg, #092F65 0%, #092F65 50%, #16477F 100%) !important;
  box-shadow: 0 0 12px rgba(9, 47, 101, 0.8) !important;
  animation: 1.9s cubic-bezier(.16, 1, .3, 1) forwards splash-progress-fill !important;
}

/* ==========================================================================
   PADDING SUPERIEUR DRAPEAUX / EN-TETE (-50%)
   ========================================================================== */
#category-bar-section > div {
  padding-top: max(9px, env(safe-area-inset-top, 9px)) !important;
}

.home-header-bar {
  padding-top: 4px !important;
  min-height: 42px !important;
}

.subpage-header {
  padding-top: max(6px, env(safe-area-inset-top, 6px)) !important;
}

/* ==========================================================================
   ELEVATION DU BLOC CATEGORIES ET VIGNETTES (Distance vignettes preservee)
   ========================================================================== */
.home-header-bar {
  padding-bottom: 6px !important;
}

.category-scroll-track,
#category-bar-section [class*="will-change-transform"][class*="gap-4"] {
  margin-top: 2px !important;
  padding-top: 6px !important;
}

/* ==========================================================================
   NAVIGATION CONFORTABLE & DEFILEMENT FLUIDE (SMOOTH SCROLL & REVEAL)
   ========================================================================== */
html {
  scroll-behavior: smooth !important;
}

/* Base d'optimisation GPU pour toutes les vignettes de plats */
[data-card="dish-card"],
.dish-card-fixed {
  will-change: transform, opacity;
  transform: translate3d(0, 0, 0);
  transition: transform 0.52s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.52s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.3s ease-out !important;
}

/* Etat initial subtil avant entree dans le champ visuel */
html.js-reveal [data-card="dish-card"]:not(.card-revealed),
html.js-reveal .dish-card-fixed:not(.card-revealed) {
  opacity: 0.05;
  transform: translate3d(0, 20px, 0) scale(0.985);
}

/* Revelation douce et soyeuse au fil du defilement */
[data-card="dish-card"].card-revealed,
.dish-card-fixed.card-revealed {
  opacity: 1 !important;
  transform: translate3d(0, 0, 0) scale(1) !important;
}

/* Micro-interaction tactile delicate au survol */
@media (hover: hover) {
  [data-card="dish-card"]:hover,
  .dish-card-fixed:hover {
    transform: translate3d(0, -3px, 0) scale(1.006) !important;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.20), 0 4px 10px rgba(0, 0, 0, 0.12) !important;
  }
}

/* ==========================================================================
   AFFICHAGE BORD-À-BORD 100% COMPLET DANS LE SMARTPHONE (ZÉRO SURFACE PERDUE)
   Supprime tout padding résiduel et force l'app à occuper 100% de la surface.
   ========================================================================== */
html.in-phone-frame,
html.in-phone-frame body,
html.in-phone-frame #root,
html body.in-phone-frame {
  height: 100% !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

html.in-phone-frame div[class*="fixed"][class*="inset-0"],
html.in-phone-frame .fixed.inset-0 {
  padding: 0 !important;
  margin: 0 !important;
  height: 100% !important;
  max-height: 100% !important;
}

@media (max-width: 639px) {
  div[class*="fixed"][class*="inset-0"] {
    padding: 0 !important;
    margin: 0 !important;
    height: 100% !important;
    max-height: 100% !important;
  }
}

html.in-phone-frame .max-w-\[390px\],
html.in-phone-frame [class*="max-w-[390px]"] {
  max-width: 100% !important;
  width: 100% !important;
  height: 100% !important;
  max-height: 100% !important;
  border-radius: 0 !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Correction bordures haut et bas : 100% de la surface occupee par l'app */
html.in-phone-frame,
html.in-phone-frame body,
html.in-phone-frame #root {
  width: 100% !important;
  height: 100dvh !important;
  min-height: 100dvh !important;
  max-height: 100dvh !important;
  margin: 0 !important;
  padding: 0 !important;
}
html.dark.in-phone-frame,
html.dark.in-phone-frame body,
html.dark.in-phone-frame #root,
html.dark.in-phone-frame div[class*="fixed"][class*="inset-0"] {
  background-color: #0A0A0E !important;
}

html.in-phone-frame div[class*="fixed"][class*="inset-0"] {
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  height: 100dvh !important;
  max-height: 100dvh !important;
}

html.in-phone-frame .max-w-\[390px\],
html.in-phone-frame [class*="max-w-[390px]"] {
  width: 100% !important;
  max-width: 100% !important;
  height: 100dvh !important;
  min-height: 100dvh !important;
  max-height: 100dvh !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

#category-bar-section > div {
  padding-top: 4px !important;
}

nav[class*="pt-2"] {
  padding-bottom: 4px !important;
}

/* Prolongation de l'animation de la barre de chargement du Splash Screen */
.animate-splash-bar {
  animation: 2.1s cubic-bezier(.16, 1, .3, 1) forwards splash-progress-fill !important;
}

/* Animation du logo prolongée pour une apparition majestueuse */
.animate-logo-reveal {
  animation: 1.5s cubic-bezier(.16, 1, .3, 1) forwards logo-reveal !important;
}

/* ==========================================================================
   OFFRE DU JOUR / OFFRE SPÉCIALE : CARRÉ SANS CONTOUR + OMBRAGE SUBTIL NOIR
   ========================================================================== */
.gold-card,
.offer-card-clean,
[class*="gold-card"],
[class*="offer-card-clean"],
html .gold-card,
html.dark .gold-card,
html:not(.dark) .gold-card,
html .offer-card-clean,
html.dark .offer-card-clean,
html:not(.dark) .offer-card-clean {
  border: none !important;
  border-width: 0 !important;
  border-color: transparent !important;
  outline: none !important;
  background: #0C0A08 !important;
  background-image: none !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.18), 0 3px 8px rgba(0, 0, 0, 0.10) !important;
}

.gold-card:hover,
.offer-card-clean:hover,
[class*="gold-card"]:hover,
[class*="offer-card-clean"]:hover,
html .gold-card:hover,
html.dark .gold-card:hover,
html:not(.dark) .gold-card:hover,
html .offer-card-clean:hover,
html.dark .offer-card-clean:hover,
html:not(.dark) .offer-card-clean:hover {
  border: none !important;
  border-width: 0 !important;
  border-color: transparent !important;
  outline: none !important;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.22), 0 4px 12px rgba(0, 0, 0, 0.12) !important;
}

/* ==========================================================================
   PRIX PROMO DYNAMIQUE : CLIGNOTEMENT PLUS LENT & RYTHMÉ (DISPARAÎT & RÉAPPARAÎT)
   ========================================================================== */
@keyframes promoBadgeStrobe {
  0%, 28% {
    opacity: 1;
    transform: scale(1);
    box-shadow: 0 2px 10px rgba(9, 47, 101, 0.6);
  }
  34%, 48% {
    opacity: 0;
    transform: scale(0.93);
    box-shadow: none;
  }
  54%, 78% {
    opacity: 1;
    transform: scale(1.07);
    box-shadow: 0 0 18px 4px rgba(239, 27, 36, 0.95);
  }
  84%, 94% {
    opacity: 0;
    transform: scale(0.93);
    box-shadow: none;
  }
  100% {
    opacity: 1;
    transform: scale(1);
    box-shadow: 0 2px 10px rgba(9, 47, 101, 0.6);
  }
}

.promo-price-badge,
[data-promo="price-badge"],
html .promo-price-badge,
html.dark .promo-price-badge,
html:not(.dark) .promo-price-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2px !important;
  padding: 3px 8px !important;
  border-radius: 8px !important;
  background: #092F65 !important;
  background-color: #092F65 !important;
  color: #FFFFFF !important;
  font-family: 'Epilogue', sans-serif !important;
  font-weight: 900 !important;
  font-size: 13.5px !important;
  line-height: 1.2 !important;
  animation: promoBadgeStrobe 2.2s cubic-bezier(0.3, 1, 0.4, 1) infinite !important;
  box-shadow: 0 2px 10px rgba(9, 47, 101, 0.6) !important;
  border: none !important;
  outline: none !important;
  vertical-align: middle !important;
  will-change: opacity, transform, box-shadow !important;
}

.promo-price-badge span,
.promo-price-badge .promo-price-text,
html .promo-price-badge span,
html.dark .promo-price-badge span,
html:not(.dark) .promo-price-badge span {
  color: #FFFFFF !important;
  font-family: 'Epilogue', sans-serif !important;
  font-weight: 900 !important;
  letter-spacing: -0.01em !important;
  text-shadow: 0 0 6px rgba(255, 255, 255, 0.85) !important;
}

.promo-old-price,
html .promo-old-price,
html.dark .promo-old-price,
html:not(.dark) .promo-old-price {
  text-decoration: line-through !important;
  font-weight: 500 !important;
  font-size: 12px !important;
  margin-left: 6px !important;
  vertical-align: middle !important;
}

html:not(.dark) .promo-old-price {
  color: #64748B !important;
}

html.dark .promo-old-price {
  color: #94A3B8 !important;
}


/* ==========================================================================
   DAVVERO — SPÉCIFICATION UI/UX COMPLÈTE (BIZERT 1)
   Palette : #FFFFFF (Blanc dominant), #092F65 (Primary Navy), #F8DFA9 (Crème),
   #102D55 (Text Primary), #526078 / #43536A (Text Secondary), #183452 (Price)
   Typographie : Inter (300, 400, 700, 800) & Caveat / Kaushan Script (Display)
   ========================================================================== */

:root {
  --primary-color: #092F65;
  --primary-navy: #092F65;
  --primary-navy-dark: #082752;
  --primary-navy-light: #16477F;
  --bg-main: #FFFFFF;
  --bg-surface: #FFFFFF;
  --surface-secondary: #F8F8F7;
  --cream: #F8DFA9;
  --cream-light: #FFF1D5;
  --text-primary: #102D55;
  --text-secondary: #43536A;
  --text-muted: #7D8794;
  --border-color: #ECEDEF;
}

/* Fond général et conteneur mobile centré */
html, body, #root {
  background-color: #FFFFFF !important;
  color: #102D55 !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

.davvero-phone-shell {
  background-color: #FFFFFF !important;
  max-width: 480px !important;
}

@media (min-width: 640px) {
  .davvero-phone-shell {
    max-width: 390px !important;
    border-radius: 38px !important;
    border: 1px solid #ECEDEF !important;
    box-shadow: 0px 10px 30px rgba(10, 35, 65, 0.10) !important;
  }
}

.davvero-scroll-inner,
.davvero-home-content {
  background-color: #FFFFFF !important;
}

/* 1. BANNIÈRE PROMOTIONNELLE PRINCIPALE */
.davvero-hero-banner {
  width: 100% !important;
  height: 360px !important;
  border-top-left-radius: 30px !important;
  border-top-right-radius: 30px !important;
  border-bottom-left-radius: 26px !important;
  border-bottom-right-radius: 26px !important;
  overflow: hidden !important;
  position: relative !important;
  box-shadow: 0px 4px 12px rgba(10, 35, 65, 0.10) !important;
}

/* 2. CATÉGORIES DU MENU (4 COLONNES ILLUSTRÉES) */
.davvero-categories-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 8px !important;
  width: 100% !important;
  min-height: 112px !important;
  background-color: transparent !important;
  background: transparent !important;
}

#category-bar-section {
  background-color: transparent !important;
  background: transparent !important;
  margin-top: -36px !important;
  padding-top: 0px !important;
  padding-bottom: 14px !important;
  padding-left: 4px !important;
  padding-right: 4px !important;
  position: relative !important;
  z-index: 30 !important;
}

@media (max-width: 359px) {
  .davvero-categories-grid {
    gap: 6px !important;
  }
}

.davvero-cat-card {
  height: 112px !important;
  border-radius: 19px !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  padding: 0 !important;
}

.davvero-cat-card.davvero-cat-active {
  background: #092F65 !important;
  background-color: #092F65 !important;
  border: 1px solid #092F65 !important;
  box-shadow: 0px 4px 12px rgba(9, 47, 101, 0.20) !important;
}

.davvero-cat-card.davvero-cat-inactive {
  background: #FFFFFF !important;
  background-color: #FFFFFF !important;
  border: 1px solid #EEEEEE !important;
  box-shadow: 0px 3px 9px rgba(10, 35, 65, 0.10) !important;
}

/* 3. LISTE DES PRODUITS & CARTES PRODUITS HORIZONTALES */
.davvero-product-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  margin-top: 0px !important;
  margin-bottom: 20px !important;
  width: 100% !important;
}

article[data-card="dish-card"].davvero-product-card,
.davvero-product-card {
  width: 100% !important;
  height: 112px !important;
  min-height: 112px !important;
  max-height: 112px !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  background: #FFFFFF !important;
  background-color: #FFFFFF !important;
  border-radius: 22px !important;
  border: 1px solid #F0F0F0 !important;
  padding: 6px !important;
  gap: 12px !important;
  overflow: hidden !important;
  box-shadow: 0px 4px 10px rgba(15, 40, 70, 0.10) !important;
  margin-bottom: 0px !important;
  opacity: 1 !important;
  transform: none !important;
}

.davvero-product-img-box {
  width: 120px !important;
  height: 100px !important;
  border-radius: 17px !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
}

@media (max-width: 359px) {
  .davvero-product-img-box {
    width: 30% !important;
    min-width: 92px !important;
  }
  article[data-card="dish-card"].davvero-product-card,
  .davvero-product-card {
    gap: 8px !important;
  }
}

.davvero-product-img-box img {
  width: 100% !important;
  height: 100% !important;
  border-radius: 17px !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
}

/* Hiérarchie typographique stricte des cartes produits */
.davvero-product-title {
  font-family: 'Inter', sans-serif !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  color: #102D55 !important;
  letter-spacing: -0.4px !important;
}

.davvero-product-desc {
  font-family: 'Inter', sans-serif !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  line-height: 1.3 !important;
  color: #526078 !important;
}

/* Règle stricte : NE JAMAIS mettre les prix en gras (font-weight: 300) */
.davvero-product-price,
.davvero-product-price * {
  font-family: 'Inter', sans-serif !important;
  font-size: 18px !important;
  font-weight: 300 !important;
  line-height: 1.2 !important;
  color: #183452 !important;
  margin-top: 4px !important;
}

/* Bouton Crème "Voir détail" avec texte bleu marine #102D55 */
article[data-card="dish-card"].davvero-product-card button.davvero-product-btn,
button.davvero-product-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  height: 36px !important;
  padding: 10px 13px !important;
  border-radius: 30px !important;
  background: #F8DFA9 !important;
  background-color: #F8DFA9 !important;
  color: #102D55 !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

article[data-card="dish-card"].davvero-product-card button.davvero-product-btn span,
button.davvero-product-btn span {
  color: #102D55 !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}

article[data-card="dish-card"].davvero-product-card button.davvero-product-btn svg,
article[data-card="dish-card"].davvero-product-card button.davvero-product-btn svg *,
button.davvero-product-btn svg,
button.davvero-product-btn svg * {
  color: #102D55 !important;
  stroke: #102D55 !important;
}

/* 4. NAVIGATION INFÉRIEURE FIXE */
nav.davvero-bottom-nav,
html:not(.dark) nav.davvero-bottom-nav {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  height: 88px !important;
  background: #FFFFFF !important;
  background-color: #FFFFFF !important;
  border-radius: 28px 28px 0 0 !important;
  box-shadow: 0px -4px 18px rgba(10, 35, 65, 0.08) !important;
  display: flex !important;
  justify-content: space-around !important;
  align-items: center !important;
  z-index: 40 !important;
  padding: 0 12px !important;
  border-top: none !important;
}

#category-bar-section > div {
  padding-top: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}


/* ==========================================================================
   DAVVERO — ADAPTATION GLOBALE DES COULEURS SUR TOUTE L'APPLICATION (BIZERT 4)
   Sous-pages (Recherche, Panier), Fiche Détail Produit et Modales
   ========================================================================== */

/* Sous-en-tête & Sélecteur de langue */
html:not(.dark) .subpage-header {
  background: #FFFFFF !important;
  border-bottom: 1px solid #F0F0F0 !important;
}

html:not(.dark) .subpage-back-btn,
html:not(.dark) .detail-back-btn {
  background: #FFFFFF !important;
  color: #092F65 !important;
  border: 1px solid #EEEEEE !important;
  box-shadow: 0px 3px 9px rgba(10, 35, 65, 0.10) !important;
}

html:not(.dark) .subpage-back-btn svg,
html:not(.dark) .detail-back-btn svg {
  color: #092F65 !important;
  stroke: #092F65 !important;
}

html:not(.dark) .theme-toggle-btn {
  background: #FFFFFF !important;
  color: #092F65 !important;
  border: 1px solid #EEEEEE !important;
  box-shadow: 0px 3px 9px rgba(10, 35, 65, 0.10) !important;
}

/* Fiche Détail Produit (Hg) */
.detail-title-bar {
  font-family: 'Inter', sans-serif !important;
  font-size: 22px !important;
  font-weight: 800 !important;
  color: #102D55 !important;
}

.detail-title-bar::before {
  background-color: #092F65 !important;
}

.detail-price-text {
  font-family: 'Inter', sans-serif !important;
  color: #183452 !important;
  font-size: 22px !important;
  font-weight: 300 !important;
}

.detail-thumb-active {
  border: 2.5px solid #092F65 !important;
  box-shadow: 0px 4px 12px rgba(9, 47, 101, 0.20) !important;
}

.detail-size-selected {
  background-color: #092F65 !important;
  color: #FFFFFF !important;
  border: 1.5px solid #092F65 !important;
  box-shadow: 0px 4px 12px rgba(9, 47, 101, 0.20) !important;
}

.detail-size-selected::after {
  background-color: #F8DFA9 !important;
  color: #102D55 !important;
}

html:not(.dark) .detail-size-unselected {
  background-color: #FFFFFF !important;
  color: #102D55 !important;
  border: 1.5px solid #EEEEEE !important;
}

.detail-desc-heading::before {
  background-color: #092F65 !important;
}

.detail-qty-plus {
  background-color: #092F65 !important;
  color: #FFFFFF !important;
}

.detail-add-btn {
  background: #092F65 !important;
  background-color: #092F65 !important;
  color: #FFFFFF !important;
  box-shadow: 0px 4px 12px rgba(9, 47, 101, 0.22) !important;
}

/* Page Panier / Commandes */
.cart-main-title {
  color: #102D55 !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 800 !important;
}

html:not(.dark) .cart-clear-btn {
  background: #F8DFA9 !important;
  border: none !important;
  color: #102D55 !important;
  border-radius: 30px !important;
}

html:not(.dark) .cart-clear-btn span,
html:not(.dark) .cart-clear-btn svg {
  color: #102D55 !important;
  stroke: #102D55 !important;
}

html:not(.dark) .cart-item-card {
  background: #FFFFFF !important;
  border: 1px solid #F0F0F0 !important;
  border-radius: 22px !important;
  box-shadow: 0px 4px 10px rgba(15, 40, 70, 0.10) !important;
}

.cart-item-title {
  font-family: 'Inter', sans-serif !important;
  font-weight: 800 !important;
  color: #102D55 !important;
}

.cart-item-price {
  font-family: 'Inter', sans-serif !important;
  font-weight: 300 !important;
  color: #183452 !important;
  font-size: 16px !important;
}

.cart-ing-btn {
  background: #F8DFA9 !important;
  background-color: #F8DFA9 !important;
  color: #102D55 !important;
  border-radius: 30px !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 700 !important;
  border: none !important;
}

html:not(.dark) .cart-del-btn {
  background: #F8F8F7 !important;
  color: #102D55 !important;
  border: 1px solid #EEEEEE !important;
}

html:not(.dark) .cart-google-card {
  background: #F8F8F7 !important;
  border: 1px solid #ECEDEF !important;
}

.cart-google-ext {
  background: #092F65 !important;
  color: #FFFFFF !important;
}

html:not(.dark) .cart-total-box-green {
  background: #FFFFFF !important;
  border: 1px solid #EEEEEE !important;
  border-radius: 22px !important;
  box-shadow: 0px 4px 12px rgba(10, 35, 65, 0.10) !important;
}

.cart-total-label {
  color: #102D55 !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 800 !important;
}

.cart-total-amount {
  color: #183452 !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 300 !important;
}


/* ==========================================================================
   GARANTIE STRICTE DE CONTRASTE DAVVERO (ZÉRO TEXTE BLANC SUR FOND BLANC/CRÈME)
   ========================================================================== */

/* 1. Catégories : carte active (#092F65) = texte blanc ; carte inactive (#FFFFFF) = texte bleu marine #102D55 */
.davvero-cat-card.davvero-cat-active span {
  color: #FFFFFF !important;
}
.davvero-cat-card.davvero-cat-inactive span {
  color: #102D55 !important;
}

/* 2. Boutons Crème (#F8DFA9) "Voir détail", "Voir ingrédients", "Vider le panier" = texte et icônes #102D55 */
button.davvero-product-btn,
button.davvero-product-btn span,
button.davvero-product-btn svg,
button.davvero-product-btn svg *,
.cart-ing-btn,
.cart-ing-btn span,
.cart-clear-btn,
.cart-clear-btn span,
.cart-clear-btn svg,
.cart-clear-btn svg * {
  color: #102D55 !important;
  stroke: #102D55 !important;
}

/* 3. Sélecteur de langue (.lang-pill-bar) : bouton inactif = #43536A, bouton actif (#092F65) = #FFFFFF */
.lang-pill-bar button:not([class*="bg-[#092F65]"]),
.lang-pill-bar button:not([class*="bg-[#092F65]"]) span {
  color: #102D55 !important;
}
.lang-pill-bar button[class*="bg-[#092F65]"],
.lang-pill-bar button[class*="bg-[#092F65]"] span {
  background-color: #092F65 !important;
  color: #FFFFFF !important;
}

/* 4. Détail Produit : compteur de quantité, descriptions, garnitures non cochées */
.detail-qty-pill > span {
  color: #102D55 !important;
}
.detail-qty-minus,
.detail-qty-minus svg {
  color: #102D55 !important;
  stroke: #102D55 !important;
}
.detail-qty-plus,
.detail-qty-plus svg {
  background-color: #092F65 !important;
  color: #FFFFFF !important;
  stroke: #FFFFFF !important;
}
.detail-add-btn,
.detail-add-btn span {
  background-color: #092F65 !important;
  color: #FFFFFF !important;
}

/* ==========================================================================
   ANIMATION CLIGNOTANTE PANIER EN VERT VALIDATION (QUAND UN PLAT EST AJOUTÉ : St > 0)
   ========================================================================== */
@keyframes davveroCartBtnBlink {
  0%, 100% {
    background-color: #DCFCE7;
    border-color: #16A34A;
    box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.55), 0 4px 12px rgba(22, 163, 74, 0.20);
    transform: scale(1);
  }
  50% {
    background-color: #BBF7D0;
    border-color: #15803D;
    box-shadow: 0 0 0 9px rgba(22, 163, 74, 0), 0 6px 18px rgba(22, 163, 74, 0.35);
    transform: scale(1.06);
  }
}

@keyframes davveroCartPing {
  0% {
    transform: scale(0.95);
    opacity: 0.9;
  }
  75%, 100% {
    transform: scale(2.15);
    opacity: 0;
  }
}

@keyframes davveroBadgeFlash {
  0%, 100% {
    background-color: #16A34A;
    color: #FFFFFF;
    transform: scale(1);
  }
  50% {
    background-color: #15803D;
    color: #DCFCE7;
    transform: scale(1.16);
  }
}

@keyframes davveroCalloutPulse {
  0%, 100% {
    transform: translateY(0px) scale(1);
    box-shadow: 0 6px 18px rgba(22, 163, 74, 0.32);
  }
  50% {
    transform: translateY(-4px) scale(1.04);
    box-shadow: 0 10px 24px rgba(21, 128, 61, 0.45);
  }
}

@keyframes davveroDotBlink {
  0%, 100% {
    opacity: 1;
    background-color: #FFFFFF;
    box-shadow: 0 0 8px #FFFFFF;
  }
  50% {
    opacity: 0.3;
    background-color: #BBF7D0;
    box-shadow: 0 0 4px #BBF7D0;
  }
}

.davvero-cart-has-items {
  animation: davveroCartBtnBlink 1.35s ease-in-out infinite !important;
}

.davvero-cart-ping-ring {
  animation: davveroCartPing 1.35s cubic-bezier(0, 0, 0.2, 1) infinite !important;
}

.davvero-cart-badge-blink {
  animation: davveroBadgeFlash 1.35s ease-in-out infinite !important;
}

.davvero-cart-callout {
  animation: davveroCalloutPulse 1.35s ease-in-out infinite !important;
}

.davvero-cart-dot-blink {
  animation: davveroDotBlink 0.9s ease-in-out infinite !important;
}