/* ==========================================================================
   FICHIER DE THÈME FOND BLANC & ROUGE #D80D16 + 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: #D80D16;
  --primary-hover: #b90b13;
  --primary-soft: rgba(216, 13, 22, 0.12);
  --primary-border: rgba(216, 13, 22, 0.25);
  --primary-glow: rgba(216, 13, 22, 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, button, input, select, textarea, h1, h2, h3, h4, h5, h6, span, p, a, div {
  font-family: "Liberation Sans", "Arimo", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
}

/* ==========================================================================
   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: #FFF5F5 !important;
  border: 1px solid #FFE4E6 !important;
  color: #D80D16 !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: #FFF1F2 !important;
  color: #D80D16 !important;
}

html:not(.dark) .cart-google-card {
  background: #FFF5F5 !important;
  border: 1px solid #FFE4E6 !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,
button[class*="bg-[#D80D16]"],
[class*="bg-[#D80D16]"] {
  background-color: #D80D16 !important;
  color: #FFFFFF !important;
  border: none !important;
}

button[class*="bg-[#D80D16]"] span,
[class*="bg-[#D80D16]"] span,
button[class*="bg-[#D80D16]"] svg,
[class*="bg-[#D80D16]"] svg {
  color: #FFFFFF !important;
  stroke: #FFFFFF !important;
}

.gold-btn-luxury {
  background: #D80D16 !important;
  color: #FFFFFF !important;
  border: none !important;
  box-shadow: 0 4px 14px rgba(216, 13, 22, 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 */
article[data-card="dish-card"] button,
.dish-card-fixed button,
[data-card="dish-card"] button {
  background: #D80D16 !important;
  background-color: #D80D16 !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;
}

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

.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 #D80D16 !important;
  box-shadow: 0 4px 12px rgba(216, 13, 22, 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: #D80D16;
  border-radius: 999px;
  margin-bottom: 10px;
}

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

.detail-price-text {
  color: #D80D16 !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: #D80D16 !important;
  color: #FFFFFF !important;
  border: 1.5px solid #D80D16 !important;
  box-shadow: 0 6px 16px rgba(216, 13, 22, 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: #D80D16 !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: #D80D16;
  border-radius: 999px;
}

.detail-add-btn {
  background: #D80D16 !important;
  border: none !important;
  border-radius: 9999px !important;
  box-shadow: 0 8px 22px rgba(216, 13, 22, 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: #FFF5F5"],
html.dark [style*="background:#FFF5F5"],
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 #FFE4E6"],
html.dark [style*="border:1px solid #FFE4E6"] {
  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-\[\#D80D16\],
html.dark .lang-pill-bar button[class*="bg-[#D80D16]"] {
  background-color: #D80D16 !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: #D80D16 !important;
  background-color: #D80D16 !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-\[\#D80D16\],
html.dark nav button [class*="text-[#D80D16]"] {
  color: #D80D16 !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(216, 13, 22, 0.16) !important;
  border: 1px solid rgba(216, 13, 22, 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(216, 13, 22, 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: #D80D16 !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: #D80D16 !important;
  color: #FFFFFF !important;
  border: 1.5px solid #D80D16 !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(216, 13, 22, 0.2) !important;
  border-color: #D80D16 !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;
}

/* ==========================================================================
   BOUTON VOIR DÉTAIL : ROUGE VIF ABSOLU (MODE CLAIR & SOMBRE)
   ========================================================================== */
article[data-card="dish-card"] button,
.dish-card-fixed button,
[data-card="dish-card"] button,
button[class*="bg-[#D80D16]"],
.bg-\[\#D80D16\],
[class*="bg-[#D80D16]"],
html.dark article[data-card="dish-card"] button,
html.dark .dish-card-fixed button,
html.dark [data-card="dish-card"] button,
html.dark button[class*="bg-[#D80D16]"],
html.dark .bg-\[\#D80D16\],
html.dark [class*="bg-[#D80D16]"],
html.dark button[style*="D80D16"],
button[style*="D80D16"] {
  background: #D80D16 !important;
  background-color: #D80D16 !important;
  color: #FFFFFF !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  border: none !important;
  outline: none !important;
  filter: none !important;
}

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


/* ==========================================================================
   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(216, 13, 22, 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: #D80D16 !important;
}

html.dark .cart-toast-card {
  background: #14120F !important;
  background-color: #14120F !important;
  border: 1.5px solid rgba(216, 13, 22, 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 {
  opacity: 1 !important;
  filter: none !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: #D80D16 !important;
  background-color: #D80D16 !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(216, 13, 22, 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, #BA151C 0%, #D80D16 50%, #EF4444 100%) !important;
  box-shadow: 0 0 12px rgba(216, 13, 22, 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(216, 13, 22, 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(216, 13, 22, 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: #D80D16 !important;
  background-color: #D80D16 !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(216, 13, 22, 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;
}


/* ==========================================================================
   RAS JBAL 1 : PROFIL LIVREUR / SERVEUR & COMMANDE WHATSAPP DANS MON PANIER
   ========================================================================== */
html.dark .driver-profile-card {
  background: #14151C !important;
  border-color: #232530 !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55) !important;
}

html.dark .driver-profile-name,
html.dark .driver-contact-title {
  color: #F8FAFC !important;
}

html.dark .driver-profile-bio {
  color: #CBD5E1 !important;
}

html.dark .driver-info-grid {
  border-color: #232530 !important;
}

html.dark .driver-info-pill {
  background: #1C1E28 !important;
  border-color: #2A2D3D !important;
}

html.dark .driver-info-pill span {
  color: #F1F5F9 !important;
}

html.dark .driver-contact-card {
  background: #14151C !important;
  border-color: #232530 !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4) !important;
}

/* Champ adresse dans Mon Panier (clair & sombre) */
.cart-address-input {
  background-color: #F8FAFC !important;
  color: #0F172A !important;
}

.cart-address-input::placeholder {
  color: #64748B !important;
}

html.dark .cart-address-input {
  background-color: #1C1E28 !important;
  color: #F8FAFC !important;
}

html.dark .cart-address-input::placeholder {
  color: #94A3B8 !important;
}

/* Bouton Commander via WhatsApp */
.cart-whatsapp-btn,
html.dark .cart-whatsapp-btn,
html:not(.dark) .cart-whatsapp-btn {
  background: #25D366 !important;
  background-color: #25D366 !important;
  color: #FFFFFF !important;
}

.cart-whatsapp-btn:hover,
html.dark .cart-whatsapp-btn:hover,
html:not(.dark) .cart-whatsapp-btn:hover {
  background: #1EBE5D !important;
  background-color: #1EBE5D !important;
}

/* Boutons Réseaux Sociaux Livreur : Vert WhatsApp (#25D366) & Bleu Facebook (#1877F2) */
.driver-whatsapp-btn,
html.dark .driver-whatsapp-btn,
html:not(.dark) .driver-whatsapp-btn {
  background: #25D366 !important;
  background-color: #25D366 !important;
  color: #FFFFFF !important;
  border: none !important;
}

.driver-whatsapp-btn:hover,
html.dark .driver-whatsapp-btn:hover,
html:not(.dark) .driver-whatsapp-btn:hover {
  background: #1EBE5D !important;
  background-color: #1EBE5D !important;
}



.driver-facebook-btn,
html.dark .driver-facebook-btn,
html:not(.dark) .driver-facebook-btn {
  background: #1877F2 !important;
  background-color: #1877F2 !important;
  color: #FFFFFF !important;
  border: none !important;
}

.driver-facebook-btn:hover,
html.dark .driver-facebook-btn:hover,
html:not(.dark) .driver-facebook-btn:hover {
  background: #1464D0 !important;
  background-color: #1464D0 !important;
}




/* ==========================================================================
   NOMS DE RESTAURANTS / CATÉGORIES SUR 2 LIGNES COMPACTES (ZÉRO ÉLOIGNEMENT)
   ========================================================================== */
.category-name-two-lines {
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: pre-line !important;
  word-break: break-word !important;
  overflow-wrap: break-word !important;
  text-align: center !important;
  line-height: 1.15 !important;
  width: 76px !important;
  max-width: 88px !important;
  min-height: 26px !important;
  max-height: 28px !important;
}

@media (min-width: 360px) {
  .category-name-two-lines {
    width: 84px !important;
    max-width: 90px !important;
  }
}

html.dark .category-name-two-lines.text-gray-900,
html.dark [class*="category-name-two-lines"][class*="text-gray-900"] {
  color: #F8FAFC !important;
}

html.dark .category-name-two-lines.text-gray-400,
html.dark [class*="category-name-two-lines"][class*="text-gray-400"] {
  color: #94A3B8 !important;
}


/* ==========================================================================
   ONBOARDING : SPOTLIGHT CONTACTER LIVREUR (CASE EN BAS À GAUCHE)
   ========================================================================== */
.livreur-spotlight-wrapper {
  touch-action: none;
}

html.dark .livreur-spotlight-wrapper [class*="bg-white"] {
  background-color: #14151C !important;
  color: #F8FAFC !important;
  border-color: #D80D16 !important;
}

html.dark .livreur-spotlight-wrapper [class*="text-gray-900"] {
  color: #F8FAFC !important;
}

html.dark .livreur-spotlight-wrapper [class*="text-gray-500"] {
  color: #94A3B8 !important;
}

html.dark .livreur-spotlight-wrapper [class*="bg-red-50"] {
  background-color: rgba(216, 13, 22, 0.25) !important;
}

html.dark nav button[class*="bg-red-50"] {
  background-color: rgba(216, 13, 22, 0.25) !important;
}


/* ==========================================================================
   ONBOARDING : SPOTLIGHT ENVOYEZ VOS COMMANDES (CASE EN BAS À DROITE)
   ========================================================================== */
.cart-spotlight-wrapper {
  touch-action: none;
}

html.dark .cart-spotlight-wrapper [class*="bg-white"] {
  background-color: #14151C !important;
  color: #F8FAFC !important;
  border-color: #D80D16 !important;
}

html.dark .cart-spotlight-wrapper [class*="text-gray-900"] {
  color: #F8FAFC !important;
}

html.dark .cart-spotlight-wrapper [class*="text-gray-500"] {
  color: #94A3B8 !important;
}

html.dark .cart-spotlight-wrapper [class*="bg-red-50"] {
  background-color: rgba(216, 13, 22, 0.25) !important;
}


/* ==========================================================================
   INTERFACE LIVREUR : SANS CONTOUR + OMBRAGES NOIRS ÉLÉGANTS (COHÉRENCE DESIGN)
   ========================================================================== */
.driver-profile-card,
html .driver-profile-card,
html:not(.dark) .driver-profile-card {
  background: #FFFFFF !important;
  border: none !important;
  border-width: 0 !important;
  border-color: transparent !important;
  outline: none !important;
  border-radius: 26px !important;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.08), 0 3px 10px rgba(0, 0, 0, 0.03) !important;
}

html.dark .driver-profile-card {
  background: #14151C !important;
  border: none !important;
  border-width: 0 !important;
  border-color: transparent !important;
  outline: none !important;
  border-radius: 26px !important;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.65), 0 4px 12px rgba(0, 0, 0, 0.40) !important;
}

.driver-avatar-img {
  border: 3.5px solid #FFFFFF !important;
}

html.dark .driver-avatar-img {
  border: 3.5px solid #14151C !important;
}

.driver-profile-name {
  color: #0F172A !important;
}

html.dark .driver-profile-name {
  color: #F8FAFC !important;
}

.driver-contact-card,
html .driver-contact-card,
html:not(.dark) .driver-contact-card {
  background: #FFFFFF !important;
  border: none !important;
  border-width: 0 !important;
  border-color: transparent !important;
  outline: none !important;
  border-radius: 18px !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06), 0 2px 6px rgba(0, 0, 0, 0.02) !important;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease !important;
}

.driver-contact-card:hover,
html .driver-contact-card:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.10), 0 4px 10px rgba(0, 0, 0, 0.04) !important;
}

html.dark .driver-contact-card {
  background: #14151C !important;
  border: none !important;
  border-width: 0 !important;
  border-color: transparent !important;
  outline: none !important;
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.50) !important;
}

.driver-contact-title {
  color: #0F172A !important;
}

html.dark .driver-contact-title {
  color: #F8FAFC !important;
}

.driver-info-pill,
html .driver-info-pill,
html:not(.dark) .driver-info-pill {
  background: #F8FAFC !important;
  border: none !important;
  border-width: 0 !important;
  border-color: transparent !important;
  border-radius: 14px !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03) !important;
}

html.dark .driver-info-pill {
  background: #1C1E28 !important;
  border: none !important;
  border-width: 0 !important;
  box-shadow: none !important;
}

html.dark .driver-info-pill span {
  color: #F1F5F9 !important;
}

/* Boutons Actions Livreur : Rouge Téléphone, Vert WhatsApp, Bleu Facebook */
.driver-phone-btn,
html .driver-phone-btn,
html.dark .driver-phone-btn {
  background: linear-gradient(135deg, #D80D16 0%, #B91C1C 100%) !important;
  color: #FFFFFF !important;
  border: none !important;
  box-shadow: 0 4px 12px rgba(216, 13, 22, 0.28) !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}

.driver-phone-btn:hover {
  transform: scale(1.02) !important;
  box-shadow: 0 6px 16px rgba(216, 13, 22, 0.38) !important;
}

.driver-whatsapp-btn,
html .driver-whatsapp-btn,
html.dark .driver-whatsapp-btn {
  background: linear-gradient(135deg, #25D366 0%, #1EBE5D 100%) !important;
  color: #FFFFFF !important;
  border: none !important;
  box-shadow: 0 4px 12px rgba(37, 211, 102, 0.32) !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}

.driver-whatsapp-btn:hover {
  transform: scale(1.02) !important;
  box-shadow: 0 6px 16px rgba(37, 211, 102, 0.42) !important;
}

.driver-facebook-btn,
html .driver-facebook-btn,
html.dark .driver-facebook-btn {
  background: linear-gradient(135deg, #1877F2 0%, #1565C0 100%) !important;
  color: #FFFFFF !important;
  border: none !important;
  box-shadow: 0 4px 12px rgba(24, 119, 242, 0.30) !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}

.driver-facebook-btn:hover {
  transform: scale(1.02) !important;
  box-shadow: 0 6px 16px rgba(24, 119, 242, 0.40) !important;
}

/* Carte Découverte Restaurants au bas de la page */
.driver-discovery-card,
html .driver-discovery-card {
  background: linear-gradient(135deg, #181924 0%, #0F1017 100%) !important;
  border: none !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18) !important;
}

html.dark .driver-discovery-card {
  background: linear-gradient(135deg, #1C1E2A 0%, #10121A 100%) !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55) !important;
}


/* ==========================================================================
   PRIX DE LIVRAISON PAR RESTAURANT (VIGNETTES & PANIER)
   ========================================================================== */
.vignette-delivery-pill {
  font-family: Epilogue, sans-serif !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12) !important;
}

html.dark .vignette-delivery-pill {
  background: #14151C !important;
  color: #F87171 !important;
  border-color: #2D313E !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
}

.category-delivery-sub {
  font-family: Epilogue, sans-serif !important;
  letter-spacing: -0.01em !important;
}

html.dark .category-delivery-sub {
  color: #34D399 !important;
}

/* == CHECKOUT MODAL STYLES (COHERENT & UNIFIED) == */
.checkout-modal-card {
  background-color: #161722 !important;
  color: #FFFFFF !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.7) !important;
}

.checkout-modal-input {
  width: 100% !important;
  background-color: #1F212D !important;
  color: #FFFFFF !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 12px !important;
  padding: 10px 12px !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  outline: none !important;
  box-sizing: border-box !important;
  transition: border-color 0.15s ease, background-color 0.15s ease !important;
}

.checkout-modal-input:focus {
  border-color: #25D366 !important;
  background-color: #252837 !important;
}

.checkout-modal-input::placeholder {
  color: #94A3B8 !important;
  font-weight: 400 !important;
}

.checkout-modal-input.error {
  border-color: #EF4444 !important;
}