/* ==========================================================================
   Chez Fleurette — THÈME « Veillée d'atelier »
   Le café après la fermeture : l'atelier céramique la nuit. Fond brun-encre
   profond dérivé de l'encre de la charte (jamais de noir « tech ») ; les
   5 couleurs de Margaux deviennent des LUMIÈRES : rouge #EC1C25 = enseigne
   néon, rose #EBA6CA = lueur des liens, vert = plante sous la lampe,
   crème #FDEDD5 = craie d'ardoise (couleur d'écriture).
   Toutes les règles sont préfixées html[data-theme="veillee"] — le thème est
   inerte tant que l'attribut n'est pas posé (main.js / theme-boot.js).
   Ne touche JAMAIS aux outils : .cf-* (édition), .ec-fbw* (feedback),
   .cf-tour* (tuto) — seul un garde-fou neutralise les variables redéfinies.
   ========================================================================== */

/* ── Jetons (tokens) — inversion nocturne de la charte ───────────────────── */
html[data-theme="veillee"] {
  color-scheme: dark;
  /* Surfaces : bruns-encre profonds (dérivés de l'encre #3a2724, jamais noir) */
  --cream:      #241713;
  --paper:      #2e1e19;
  --cream-deep: #1b100d;
  /* La craie d'ardoise devient la couleur d'écriture */
  --ink:        #FDEDD5;
  --ink-soft:   #e8cfae;
  /* Voiles colorés translucides (remplacent les pastels clairs) */
  --red-soft:   rgba(236, 28, 37, .16);
  --green-soft: rgba(13, 161, 82, .14);
  --blue-soft:  rgba(52, 98, 174, .18);
  --pink-soft:  rgba(235, 166, 202, .14);
  --hair:       rgba(253, 237, 213, .16);
  /* Les ombres deviennent des lueurs (box-shadow uniquement — jamais de blur) */
  --shadow-sm:  0 0 0 1px rgba(253, 237, 213, .08);
  --shadow-md:  0 0 24px rgba(236, 28, 37, .10), 0 0 0 1px rgba(253, 237, 213, .10);
  --shadow-pop: 0 0 30px rgba(235, 166, 202, .14);
  /* Rayons INCHANGÉS (--r-lg 28px…) : la rondeur reste l'ADN, c'est la lumière qui change. */
}

/* ── Fond de page : brun-encre + grain de grès (body uniquement) ─────────── */
html[data-theme="veillee"] body {
  background-color: #241713;
  color: var(--ink);
  /* Grain feTurbulence très léger (opacité .04), tuile 300px — jamais par carte */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='vlgrain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23vlgrain)' opacity='.04'/%3E%3C/svg%3E");
  background-size: 300px 300px;
}

/* ── Texte & liens génériques ────────────────────────────────────────────── */
/* Le --red-dark du base est illisible sur sombre → liens roses soulignés.
   Scopé à #main (le header/footer ont leurs propres règles), .btn exclus. */
html[data-theme="veillee"] #main a:not(.btn) {
  color: var(--pink);
  text-decoration: underline;
}
html[data-theme="veillee"] :focus-visible { outline-color: var(--pink); }

/* Rouge néon réservé aux GRANDS titres (4.2:1 = AA large uniquement) */
html[data-theme="veillee"] .title  { color: var(--red); }
/* Kicker rose (8.4:1) — remplace le vert-foncé et les rouges sombres du base */
html[data-theme="veillee"] .kicker { color: var(--pink); }
html[data-theme="veillee"] .lead   { color: var(--ink-soft); }
html[data-theme="veillee"] .muted  { color: var(--ink-soft); }

/* ── En-tête / navigation ────────────────────────────────────────────────── */
html[data-theme="veillee"] .site-header {
  background: rgba(27, 16, 13, .9);
  backdrop-filter: blur(10px);
  border-bottom: 0;
}
/* La « guirlande » 4 couleurs sous le header (lumières de l'atelier) */
html[data-theme="veillee"] .site-header::after {
  content: "";
  display: block;
  height: 3px;
  background: linear-gradient(90deg, #EC1C25 0 25%, #0DA152 0 50%, #3462AE 0 75%, #EBA6CA 0);
}
html[data-theme="veillee"] .brand__name,
html[data-theme="veillee"] .brand__sub,
html[data-theme="veillee"] .nav-links a { color: #FDEDD5; }
html[data-theme="veillee"] .nav-links a:not(.nav-cta):hover {
  background: rgba(236, 28, 37, .16);
  color: #EBA6CA;
}
html[data-theme="veillee"] .nav-links a[aria-current="page"]:not(.nav-cta) {
  background: rgba(236, 28, 37, .16);
  color: #EBA6CA;
}
/* Soulignage animé de la nav : trait rose (lueur) au lieu du rouge */
html[data-theme="veillee"] .nav-links a:not(.btn)::after { background: var(--pink); }
/* CTA « Réserver » : texte blanc garanti (notre règle générique le passait crème) */
html[data-theme="veillee"] .nav-links a.nav-cta,
html[data-theme="veillee"] .nav-links a.nav-cta:hover { color: #fff; }
html[data-theme="veillee"] .nav-burger {
  background: #2e1e19;
  color: var(--pink);
  border-color: var(--hair);
}
@media (max-width: 900px) {
  /* Panneau mobile (checkbox hack) : encre profonde + liseré enseigne */
  html[data-theme="veillee"] .nav-links {
    background: #1b100d;
    border-color: var(--red);
  }
}

/* ── Hero : l'atelier sous la lampe ──────────────────────────────────────── */
html[data-theme="veillee"] .hero {
  background-color: #1b100d;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 64 64'%3E%3Cg fill='%23FDEDD5' opacity='0.04'%3E%3Cellipse cx='32' cy='18' rx='5' ry='8'/%3E%3Cellipse cx='32' cy='46' rx='5' ry='8'/%3E%3Cellipse cx='18' cy='32' rx='8' ry='5'/%3E%3Cellipse cx='46' cy='32' rx='8' ry='5'/%3E%3Ccircle cx='32' cy='32' r='3.4'/%3E%3C/g%3E%3C/svg%3E"),
    radial-gradient(1000px 500px at 15% 0%, rgba(236, 28, 37, .18), transparent 60%),
    radial-gradient(800px 460px at 90% 100%, rgba(52, 98, 174, .16), transparent 60%);
  background-size: 132px 132px, cover, cover;
}
html[data-theme="veillee"] .hero h1 { color: #FDEDD5; }
html[data-theme="veillee"] .hero h1 .accent { color: var(--pink); }
/* Eyebrow : le bleu du base est interdit en texte sur sombre → rose */
html[data-theme="veillee"] .hero__eyebrow { color: var(--pink); }
html[data-theme="veillee"] .hero__lead { color: var(--ink); }
/* Rond de lumière sous la mascotte (la lampe de l'atelier) */
html[data-theme="veillee"] .hero__art::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -6%;
  width: min(440px, 96%);
  aspect-ratio: 1 / 1;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(253, 237, 213, .10), transparent 72%);
  pointer-events: none;
  z-index: -1;
}
html[data-theme="veillee"] .hero__mascotte {
  filter: drop-shadow(0 0 34px rgba(253, 237, 213, .32)) drop-shadow(0 12px 20px rgba(0, 0, 0, .5));
}
/* Badges : petites étiquettes éclairées */
html[data-theme="veillee"] .hero__badge {
  background: rgba(27, 16, 13, .85);
  border-color: rgba(235, 166, 202, .4);
  color: var(--pink);
}
html[data-theme="veillee"] .hero__badge--1 { color: var(--green); border-color: rgba(13, 161, 82, .45); }
/* Badge 2 : bleu interdit en texte sur sombre → rose */
html[data-theme="veillee"] .hero__badge--2 { color: var(--pink); border-color: rgba(235, 166, 202, .4); }

/* ── Bandeau « valeurs » ─────────────────────────────────────────────────── */
html[data-theme="veillee"] .valuestrip { background: #1b100d; }
html[data-theme="veillee"] .valuestrip__row li { color: var(--ink-soft); }
html[data-theme="veillee"] .valuestrip__row li:not(:last-child)::after { background: var(--pink); }

/* ── Sections : chaque teinte pastel devient une pénombre teintée ────────── */
/* Les insets colorés 3px servent de repères entre deux sections sombres. */
html[data-theme="veillee"] .section--cream { background: #241713; }
html[data-theme="veillee"] .section--paper { background: #2e1e19; }
html[data-theme="veillee"] .section--pink  { background: #2b1a20; box-shadow: inset 0 3px 0 var(--pink); }
html[data-theme="veillee"] .section--green { background: #1c231c; box-shadow: inset 0 3px 0 var(--green); }
html[data-theme="veillee"] .section--blue  { background: #1c2130; box-shadow: inset 0 3px 0 var(--blue); }
/* Sections pleines rouge/vert : fonds INCHANGÉS (texte blanc déjà géré par le
   base) — simple liseré clair pour les détacher des fonds sombres voisins. */
html[data-theme="veillee"] .section--red,
html[data-theme="veillee"] .section--green-solid { border-top: 3px solid rgba(255, 255, 255, .18); }
/* Ré-assertions : nos règles génériques (rose/rouge/crème) sont plus
   spécifiques que les blancs du base — on les repose explicitement. */
html[data-theme="veillee"] .section--red .title,
html[data-theme="veillee"] .section--green-solid .title,
html[data-theme="veillee"] .section--red .kicker,
html[data-theme="veillee"] .section--green-solid .kicker { color: #fff; }
html[data-theme="veillee"] .section--red .lead,
html[data-theme="veillee"] .section--green-solid .lead { color: rgba(255, 255, 255, .92); }

/* ── Boutons ─────────────────────────────────────────────────────────────── */
/* Primaire = l'enseigne néon : rouge vif + halo (box-shadow, jamais de blur) */
html[data-theme="veillee"] .btn--primary {
  background: var(--red);
  color: #fff;
  box-shadow: 0 0 22px rgba(236, 28, 37, .45), inset 0 0 0 1px rgba(255, 255, 255, .25);
}
html[data-theme="veillee"] .btn--primary:hover {
  box-shadow: 0 0 34px rgba(236, 28, 37, .45), inset 0 0 0 1px rgba(255, 255, 255, .25);
}
html[data-theme="veillee"] .btn--outline {
  color: #FDEDD5;
  border-color: rgba(253, 237, 213, .4);
}
html[data-theme="veillee"] .btn--outline:hover {
  background: rgba(253, 237, 213, .08);
  border-color: rgba(253, 237, 213, .6);
}
/* --green / --blue / --white : conservés du base (blanc AA sur fonds pleins). */
/* Reflet au survol : plus doux sur fonds lumineux sombres */
html[data-theme="veillee"] .btn::after {
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .25), transparent);
}

/* ── Cartes ──────────────────────────────────────────────────────────────── */
html[data-theme="veillee"] .card {
  background: #2e1e19;
  border: 1px solid var(--hair);
  box-shadow: none;
}
html[data-theme="veillee"] .card--lift:hover {
  border-color: rgba(235, 166, 202, .45);
  box-shadow: var(--shadow-pop);
}
html[data-theme="veillee"] .card h3 { color: var(--ink); }
/* .card--red (défini par style.css — pendant systémique) : liseré clair au
   lieu du liseré encre (devenu crème via --ink). */
html[data-theme="veillee"] .card--red { border-color: rgba(255, 255, 255, .18); }
/* .card__icon : les fonds .bg-* suivent déjà les voiles rgba des tokens. */

/* ── Étapes numérotées ───────────────────────────────────────────────────── */
/* Pastille 4 (fond rose) : var(--ink) est devenu crème → encre du base */
html[data-theme="veillee"] .step:nth-child(4) .step__num { color: #3a2724; }

/* ── Emplacements photo : trait de craie sur l'ardoise ───────────────────── */
html[data-theme="veillee"] .photo {
  background-color: #1b100d;
  border: 1.5px dashed rgba(253, 237, 213, .45);
  color: var(--pink);
}
html[data-theme="veillee"] .photo__inner small { color: var(--ink-soft); }
html[data-theme="veillee"] .photo--green { border-color: var(--green); color: var(--green); }
/* photo--blue : cadre bleu conservé, mais texte crème (bleu interdit en texte) */
html[data-theme="veillee"] .photo--blue { border-color: var(--blue); color: var(--ink); }
/* Une vraie photo posée : plus de trait ni de libellé (ré-assertion — notre
   règle .photo est plus spécifique que .photo.cf-has-photo du base). */
html[data-theme="veillee"] .photo.cf-has-photo {
  border-style: solid;
  border-color: transparent;
  color: transparent;
}

/* ── Menu / listes de prix : pointillés craie ────────────────────────────── */
html[data-theme="veillee"] .menu-item { border-bottom: 2px dotted rgba(253, 237, 213, .35); }
html[data-theme="veillee"] .menu-item:last-child { border-bottom: 0; }
html[data-theme="veillee"] .menu-item__dots { border-bottom: 2px dotted rgba(253, 237, 213, .35); }
html[data-theme="veillee"] .menu-item__name { color: #FDEDD5; }
html[data-theme="veillee"] .menu-item__price {
  color: var(--pink);
  text-shadow: 0 0 12px rgba(235, 166, 202, .35);
}

/* ── Cartes tarifs ───────────────────────────────────────────────────────── */
html[data-theme="veillee"] .price-card .price { color: var(--pink); }
html[data-theme="veillee"] .price-card--feature {
  background: var(--red-dark);
  box-shadow: 0 0 30px rgba(236, 28, 37, .3);
}
/* Ré-assertion (après la règle générique) : la carte mise en avant reste blanche */
html[data-theme="veillee"] .price-card--feature .price,
html[data-theme="veillee"] .price-card--feature h3 { color: #fff; }

/* ── Produits boutique ───────────────────────────────────────────────────── */
html[data-theme="veillee"] .product__price { color: var(--pink); }
/* tag--pink : var(--ink) est devenu crème → encre du base sur le rose */
html[data-theme="veillee"] .tag--pink { color: #3a2724; }
html[data-theme="veillee"] .pill-tag { color: var(--pink); }

/* ── Faits / chiffres ────────────────────────────────────────────────────── */
html[data-theme="veillee"] .fact .fact__num { color: var(--pink); }
html[data-theme="veillee"] .fact .fact__lbl { color: var(--ink-soft); }
html[data-theme="veillee"] .section--red .fact .fact__num,
html[data-theme="veillee"] .section--red .fact .fact__lbl { color: #fff; }

/* ── FAQ ─────────────────────────────────────────────────────────────────── */
html[data-theme="veillee"] .faq details {
  background: #2e1e19;
  border-color: var(--hair);
}
html[data-theme="veillee"] .faq summary { color: var(--ink); }
html[data-theme="veillee"] .faq details[open] summary,
html[data-theme="veillee"] .faq details[open] summary::after { color: var(--pink); }

/* ── Encadré note : voile bleu, texte craie (bleu interdit en texte) ─────── */
html[data-theme="veillee"] .note {
  background: rgba(52, 98, 174, .18);
  border-color: rgba(52, 98, 174, .45);
  border-left-color: var(--blue);
  color: #FDEDD5;
}
html[data-theme="veillee"] .note strong { color: #FDEDD5; }

/* ── Infos pratiques / horaires ──────────────────────────────────────────── */
html[data-theme="veillee"] .hours li { border-bottom: 2px dotted rgba(253, 237, 213, .35); }
html[data-theme="veillee"] .hours li:last-child { border-bottom: 0; }

/* ── Pied de page : la nuit la plus profonde + guirlande ─────────────────── */
html[data-theme="veillee"] .site-footer {
  position: relative;
  background: #150c0a;
}
html[data-theme="veillee"] .site-footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #EC1C25 0 25%, #0DA152 0 50%, #3462AE 0 75%, #EBA6CA 0);
}
/* Liens roses du footer : déjà var(--pink) dans le base — conservés. */

/* ── Formulaires (champs éventuels dans le contenu) ──────────────────────── */
html[data-theme="veillee"] #main input:not([type="checkbox"]):not([type="radio"]),
html[data-theme="veillee"] #main select,
html[data-theme="veillee"] #main textarea {
  background: #1b100d;
  color: #FDEDD5;
  border: 1px solid var(--hair);
}
html[data-theme="veillee"] #main input::placeholder,
html[data-theme="veillee"] #main textarea::placeholder { color: rgba(253, 237, 213, .55); }

/* ══════════════════════════════════════════════════════════════════════════
   VARIANTES PAR ÉLÉMENT (data-cv) — re-déclarations obligatoires
   La spécificité de html[data-theme] gagne sur les [data-cv] du base : chaque
   variante est reposée ici avec un rendu lisible sur fond sombre.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Titres ── */
html[data-theme="veillee"] .title[data-cv="1"] { color: var(--green); }   /* 5.2:1, titres larges */
html[data-theme="veillee"] .title[data-cv="2"] { color: var(--pink); }    /* le bleu du base est interdit */
html[data-theme="veillee"] .title[data-cv="3"] {
  background: rgba(235, 166, 202, .16);
  color: var(--pink);
}
html[data-theme="veillee"] .title[data-cv="4"] { color: var(--red); }
/* (le trait vert ::after du base reste valable sur sombre) */

/* ── Sous-titres (kicker) ── */
html[data-theme="veillee"] .kicker[data-cv="1"] { color: var(--ink); }    /* le rouge du base est trop faible en petit */
html[data-theme="veillee"] .kicker[data-cv="2"] { color: var(--green); }  /* le bleu du base est interdit */
html[data-theme="veillee"] .kicker[data-cv="3"] { background: var(--red-dark); color: #fff; }
html[data-theme="veillee"] .kicker[data-cv="4"] { font-style: normal; letter-spacing: .26em; }

/* ── Boutons ── */
html[data-theme="veillee"] .btn[data-cv="1"] { border-radius: 12px; }
/* cv=2 (flèche) et cv=3 (typographique) : hérités du base, rien à reposer */
html[data-theme="veillee"] .btn[data-cv="4"] { box-shadow: 0 5px 0 rgba(0, 0, 0, .45); }
html[data-theme="veillee"] .btn[data-cv="4"]:hover { box-shadow: 0 8px 0 rgba(0, 0, 0, .45); }

/* ── Cartes ── */
html[data-theme="veillee"] .card[data-cv="1"] { border-color: transparent; box-shadow: var(--shadow-md); }
html[data-theme="veillee"] .card[data-cv="2"] { background: var(--cream); } /* = #241713 via le token */
html[data-theme="veillee"] .card[data-cv="3"] { border-top: 4px solid var(--red); }
html[data-theme="veillee"] .card[data-cv="4"] {
  border: 2px solid var(--red);
  border-radius: var(--r-xl);
  box-shadow: none;
}

/* ── Emplacements photo ── */
html[data-theme="veillee"] .photo[data-cv="1"] { border-style: solid; border-color: var(--hair); }
/* Polaroid : le cadre blanc du base éblouit sur sombre → carton brun */
html[data-theme="veillee"] .photo[data-cv="2"] {
  border: 10px solid #33221c;
  box-shadow: var(--shadow-md);
  border-radius: 8px;
}
html[data-theme="veillee"] .photo[data-cv="3"] { border-radius: 36px; }
html[data-theme="veillee"] .photo[data-cv="4"] { border: 3px solid var(--green); }

/* ── Sections ── */
/* Motif fleuri recoloré craie (l'original rouge disparaît sur sombre) */
html[data-theme="veillee"] .section[data-cv="1"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 64 64'%3E%3Cg fill='%23FDEDD5' opacity='0.04'%3E%3Cellipse cx='32' cy='18' rx='5' ry='8'/%3E%3Cellipse cx='32' cy='46' rx='5' ry='8'/%3E%3Cellipse cx='18' cy='32' rx='8' ry='5'/%3E%3Cellipse cx='46' cy='32' rx='8' ry='5'/%3E%3Ccircle cx='32' cy='32' r='3.4'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 132px 132px;
}
/* Halos crème très doux (les pastels du base sont trop denses sur sombre) */
html[data-theme="veillee"] .section[data-cv="2"] {
  background-image:
    radial-gradient(900px 420px at 15% 0%, rgba(253, 237, 213, .05), transparent 60%),
    radial-gradient(800px 420px at 88% 100%, rgba(253, 237, 213, .04), transparent 60%);
}
html[data-theme="veillee"] .section[data-cv="3"] {
  background-color: var(--cream); /* = #241713 via le token */
  background-image: none;
  box-shadow: none;
}
html[data-theme="veillee"] .section[data-cv="4"] {
  background-color: var(--paper); /* = #2e1e19 via le token */
  box-shadow: inset 0 6px 0 var(--red);
}

/* ══════════════════════════════════════════════════════════════════════════
   GARDE-FOU OUTILS (parade n° 3) — on ne THÈME pas la barre/panneaux d'édition
   (.cf-bar, .cf-panel, .cf-vpanel…) ni le tuto : fonds clairs, lisibles tels
   quels. Mais leurs styles du base consomment des variables que ce thème
   redéfinit : on les remet à plat ici pour qu'ils restent EXACTEMENT comme
   avant. Aucun style nouveau n'est ajouté.
   ══════════════════════════════════════════════════════════════════════════ */
html[data-theme="veillee"] .cf-bar,
html[data-theme="veillee"] .cf-tour-tip,
html[data-theme="veillee"] .cf-panel,
html[data-theme="veillee"] .cf-vpanel,
html[data-theme="veillee"] .cf-eltag,
html[data-theme="veillee"] .cf-toast,
html[data-theme="veillee"] .cf-tryband,
html[data-theme="veillee"] .cf-pvband,
html[data-theme="veillee"] dialog.cf-dlg {
  --ink: #3a2724;
  --ink-soft: #6a5650;
  --cream: #FDEDD5;
  --paper: #fffaf2;
  --red-soft: #fde3e4;
  --green-soft: #d8f1e2;
  --blue-soft: #dde6f5;
  --pink-soft: #f8e1ee;
  --hair: rgba(58, 39, 36, .12);
  --shadow-sm: 0 6px 20px rgba(58, 39, 36, .07);
  --shadow-md: 0 18px 44px rgba(58, 39, 36, .11);
  --shadow-pop: 0 10px 30px rgba(58, 39, 36, .09);
}

/* ══════════════════════════════════════════════════════════════════════════
   ANIMATION PROPRE AU THÈME — respiration du rond de lumière du hero.
   Uniquement si l'utilisateur accepte le mouvement (désactivée sinon).
   ══════════════════════════════════════════════════════════════════════════ */
@keyframes vl-veilleuse {
  0%, 100% { opacity: 1; }
  50%      { opacity: .72; }
}
@media (prefers-reduced-motion: no-preference) {
  html[data-theme="veillee"] .hero__art::before {
    animation: vl-veilleuse 6s ease-in-out infinite;
  }
}
@media (prefers-reduced-motion: reduce) {
  html[data-theme="veillee"] .hero__art::before { animation: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   IMPRESSION — retour au fond clair (on n'imprime pas une page sombre).
   Les jetons reviennent aux valeurs du base ; les couleurs codées en dur
   (craie / lueurs) sont reposées en encre / rouge profond.
   ══════════════════════════════════════════════════════════════════════════ */
@media print {
  html[data-theme="veillee"] {
    color-scheme: light;
    --cream:      #FDEDD5;
    --paper:      #fffaf2;
    --cream-deep: #f7e1bf;
    --ink:        #3a2724;
    --ink-soft:   #6a5650;
    --red-soft:   #fde3e4;
    --green-soft: #d8f1e2;
    --blue-soft:  #dde6f5;
    --pink-soft:  #f8e1ee;
    --hair:       rgba(58, 39, 36, .12);
    --shadow-sm:  none;
    --shadow-md:  none;
    --shadow-pop: none;
  }
  html[data-theme="veillee"] body {
    background: #fff;
    color: #3a2724;
  }
  /* Surfaces sombres → claires */
  html[data-theme="veillee"] .site-header,
  html[data-theme="veillee"] .hero,
  html[data-theme="veillee"] .valuestrip,
  html[data-theme="veillee"] .section--cream,
  html[data-theme="veillee"] .section--paper,
  html[data-theme="veillee"] .section--pink,
  html[data-theme="veillee"] .section--green,
  html[data-theme="veillee"] .section--blue,
  html[data-theme="veillee"] .card,
  html[data-theme="veillee"] .faq details,
  html[data-theme="veillee"] .photo,
  html[data-theme="veillee"] .note {
    background: #fff;
    background-image: none;
    box-shadow: none;
  }
  html[data-theme="veillee"] .site-footer { background: #3a2724; }
  /* Textes craie → encre */
  html[data-theme="veillee"] .brand__name,
  html[data-theme="veillee"] .brand__sub,
  html[data-theme="veillee"] .nav-links a,
  html[data-theme="veillee"] .hero h1,
  html[data-theme="veillee"] .menu-item__name,
  html[data-theme="veillee"] .faq summary,
  html[data-theme="veillee"] .note,
  html[data-theme="veillee"] .note strong,
  html[data-theme="veillee"] .photo--blue { color: #3a2724; }
  /* Textes roses (lueurs) → couleurs profondes lisibles sur blanc */
  html[data-theme="veillee"] #main a:not(.btn),
  html[data-theme="veillee"] .kicker,
  html[data-theme="veillee"] .hero__eyebrow,
  html[data-theme="veillee"] .hero h1 .accent,
  html[data-theme="veillee"] .hero__badge,
  html[data-theme="veillee"] .menu-item__price,
  html[data-theme="veillee"] .price-card .price,
  html[data-theme="veillee"] .product__price,
  html[data-theme="veillee"] .fact .fact__num,
  html[data-theme="veillee"] .pill-tag,
  html[data-theme="veillee"] .photo,
  html[data-theme="veillee"] .faq details[open] summary,
  html[data-theme="veillee"] .faq details[open] summary::after { color: #c8141c; }
  html[data-theme="veillee"] .menu-item__price { text-shadow: none; }
  html[data-theme="veillee"] .hero__lead { color: #3a2724; }
  html[data-theme="veillee"] .hero__art::before { content: none; }
  html[data-theme="veillee"] .hero__mascotte { filter: none; }
}