/* ==========================================================================
   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 */
html:not(.dark) .bg-\[\#0C0A08\],
html:not(.dark) [class*="bg-[#0C0A08]"],
html:not(.dark) [class*="bg-neutral-950"] {
  background-color: #FFFFFF !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: radial-gradient(rgba(216, 13, 22, 0.25) 1px, transparent 1px) !important;
  background-size: 24px 24px !important;
  background-attachment: fixed !important;
}

.max-w-\[390px\],
[class*="max-w-[390px]"] {
  background-image: 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;
}



/* ==========================================================================
   POPUP MESSAGE DE BIENVENUE (WELCOME MESSAGE) - SANS CONTOUR & MÊME TYPO
   ========================================================================== */
.welcome-modal-backdrop {
  background-color: rgba(0, 0, 0, 0.50) !important;
}

html.dark .welcome-modal-backdrop {
  background-color: rgba(0, 0, 0, 0.80) !important;
}

.welcome-modal-card {
  background: #FFFFFF !important;
  background-color: #FFFFFF !important;
  border: none !important;
  border-width: 0 !important;
  outline: none !important;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(0, 0, 0, 0.06) !important;
}

html.dark .welcome-modal-card {
  background: #14120F !important;
  background-color: #14120F !important;
  border: none !important;
  border-width: 0 !important;
  outline: none !important;
  box-shadow: 0 16px 45px rgba(0, 0, 0, 0.85), 0 4px 15px rgba(0, 0, 0, 0.50) !important;
}

.welcome-flag-badge {
  background-color: #F8FAFC !important;
  border: none !important;
  border-width: 0 !important;
}

html.dark .welcome-flag-badge {
  background-color: rgba(255, 255, 255, 0.10) !important;
  border: none !important;
  border-width: 0 !important;
}

.welcome-modal-text {
  font-family: 'Epilogue', sans-serif !important;
  font-weight: 900 !important;
  letter-spacing: 0.025em !important;
  color: #0F172A !important;
}

html.dark .welcome-modal-text {
  color: #FFFFFF !important;
}

/* ==========================================================================
   SPOTLIGHT D'ONBOARDING DES CATÉGORIES - SANS CONTOUR & MÊME TYPO
   ========================================================================== */
.onboarding-backdrop-top,
.onboarding-backdrop-bottom {
  background-color: rgba(0, 0, 0, 0.60) !important;
  backdrop-filter: blur(2.5px) !important;
  -webkit-backdrop-filter: blur(2.5px) !important;
}

html.dark .onboarding-backdrop-top,
html.dark .onboarding-backdrop-bottom {
  background-color: rgba(0, 0, 0, 0.85) !important;
}

/* Halo de découpe de la barre des catégories - 100% TRANSPARENT et sans bordures dures */
.onboarding-spotlight-hole,
html.dark .onboarding-spotlight-hole,
html.dark div.onboarding-spotlight-hole,
html.dark [class*="onboarding-spotlight-hole"],
html.dark [class*="z-50"] > div.onboarding-spotlight-hole,
html.dark [class*="z-50"] > div[class*="onboarding-spotlight-hole"],
html.dark [class*="absolute"][class*="z-50"] > div.onboarding-spotlight-hole,
html.dark .onboarding-spotlight-wrapper > div.onboarding-spotlight-hole,
html.dark .onboarding-spotlight-wrapper div.onboarding-spotlight-hole {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: none !important;
  border-width: 0 !important;
  box-shadow: 0 0 25px 5px rgba(216, 13, 22, 0.25) inset, 0 6px 20px rgba(216, 13, 22, 0.15) !important;
}

html.dark .onboarding-spotlight-hole {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: none !important;
  border-width: 0 !important;
  box-shadow: 0 0 30px 6px rgba(216, 13, 22, 0.35) inset, 0 8px 25px rgba(216, 13, 22, 0.20) !important;
}

/* Flèche animée pointant vers le haut aux couleurs de Royal Rotisserie */
.onboarding-arrow-circle {
  background-color: #D80D16 !important;
  color: #FFFFFF !important;
  border: 2px solid #FF4A52 !important;
  box-shadow: 0 0 22px rgba(216, 13, 22, 0.85), 0 4px 12px rgba(0, 0, 0, 0.25) !important;
}

/* Bulle textuelle informative ("Explorez les catégories") - SANS CONTOUR */
.onboarding-message-pill {
  background: #FFFFFF !important;
  background-color: rgba(255, 255, 255, 0.98) !important;
  border: none !important;
  border-width: 0 !important;
  outline: none !important;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.14), 0 4px 12px rgba(0, 0, 0, 0.08) !important;
}

html.dark .onboarding-message-pill {
  background: #14120F !important;
  background-color: rgba(20, 18, 15, 0.96) !important;
  border: none !important;
  border-width: 0 !important;
  outline: none !important;
  box-shadow: 0 16px 45px rgba(0, 0, 0, 0.90), 0 4px 15px rgba(0, 0, 0, 0.50) !important;
}

.onboarding-message-text {
  font-family: 'Epilogue', sans-serif !important;
  font-weight: 900 !important;
  letter-spacing: 0.025em !important;
  color: #0F172A !important;
}

html.dark .onboarding-message-text {
  color: #FFFFFF !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;
}