/* ==========================================================
   La Marmite de Zoé — restaurant FICTIF
   Site de démonstration réalisé par Clic Local.
   Mobile d'abord.
   ========================================================== */

:root {
  --chocolat: #2b1a12;
  --texte: #4a3428;
  --discret: #86695a;
  --creme: #fdf5ea;
  --papier: #fffaf2;
  --ligne: #efdcc6;
  --tomate: #b8321f;
  --tomate-fonce: #93271a;
  --safran: #f2a516;
  --safran-doux: #fde9c2;
  --safran-survol: #ffb935;
  /* Couleurs réglables par les sélecteurs de la démo */
  --fond: #fdf5ea;           /* fond du site (= crème) */
  --encre: #2b1a12;          /* titres et textes forts posés sur le fond */
  --accent-texte: #b8321f;   /* textes mis en avant posés sur le fond */
  --accent-texte-clair: #f39a7f;
  --olive-texte: #5b6b2f;
  --pointille: #dcc3a8;
  --olive: #5b6b2f;
  --rayon: 22px;
  --largeur: 1180px;
  --titres: Rockwell, "Rockwell Nova", "Roboto Slab", "Zilla Slab", "DejaVu Serif", Georgia, serif;
  --police: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --italique: Georgia, "Times New Roman", serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; }
html:has(.onglets) { scroll-padding-top: 140px; } /* en-tête + onglets de la carte */
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0; font-family: var(--police); font-size: 1.0625rem; line-height: 1.6;
  color: var(--texte); background: var(--fond);
  padding-bottom: 76px; /* place pour la barre d'action mobile */
}
@media (min-width: 900px) { body { padding-bottom: 0; } }

/* ---------- Filigrane DÉMO en transparence ---------- */
body::after {
  content: "DÉMO";
  position: fixed; inset: 0; z-index: 999; pointer-events: none; user-select: none;
  display: grid; place-items: center;
  font-family: var(--titres); font-weight: 700; letter-spacing: .1em;
  font-size: clamp(5rem, 28vw, 19rem);
  color: transparent;
  -webkit-text-stroke: 2px color-mix(in srgb, var(--tomate) 16%, transparent);
  transform: rotate(-24deg);
}
.bandeau-demo {
  background: var(--safran); color: var(--chocolat); text-align: center;
  font-size: .82rem; font-weight: 600; padding: .45rem 16px;
}

img { max-width: 100%; display: block; }
a { color: var(--accent-texte); }
h1, h2, h3 { font-family: var(--titres); color: var(--encre); font-weight: 700; line-height: 1.1; margin: 0 0 .5em; }
h1 { font-size: clamp(2.6rem, 11vw, 5.2rem); }
h2 { font-size: clamp(2rem, 7vw, 3.2rem); }
h3 { font-size: 1.3rem; }
p { margin: 0 0 1em; }
.italique { font-family: var(--italique); font-style: italic; font-weight: 400; color: var(--accent-texte); }
:focus-visible { outline: 3px solid var(--safran); outline-offset: 3px; border-radius: 6px; }

.conteneur { width: 100%; max-width: var(--largeur); margin: 0 auto; padding-inline: 20px; }
.petit-titre { display: inline-block; font-weight: 700; font-size: .9rem; color: var(--olive-texte); margin-bottom: .6rem; }
.petit-titre::before { content: "— "; }

.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  min-height: 54px; padding: .85rem 1.6rem; border-radius: 999px; border: 0;
  font: inherit; font-weight: 700; font-size: 1rem; text-decoration: none; cursor: pointer;
  transition: background-color .15s, transform .15s;
}
.bouton:active { transform: scale(.98); }
.bouton svg { width: 20px; height: 20px; }
.bouton-tomate { background: var(--tomate); color: #fff; }
.bouton-tomate:hover { background: var(--tomate-fonce); color: #fff; }
.bouton-safran { background: var(--safran); color: var(--chocolat); }
.bouton-safran:hover { background: var(--safran-survol); color: var(--chocolat); }
.bouton-clair { background: rgba(255, 255, 255, .15); color: #fff; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .7); }
.bouton-clair:hover { background: rgba(255, 255, 255, .28); color: #fff; }
.bouton-large { width: 100%; }

/* ---------- En-tête ---------- */
.entete { position: sticky; top: 0; z-index: 60; background: var(--chocolat); color: var(--creme); }
.entete .conteneur { display: flex; align-items: center; justify-content: space-between; min-height: 64px; }
.logo { font-family: var(--titres); font-weight: 700; font-size: 1.35rem; color: var(--creme); text-decoration: none; line-height: 1; }
.logo em { font-family: var(--italique); font-weight: 400; color: var(--safran); }
.menu-bouton { width: 46px; height: 46px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .1); color: var(--creme); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.menu-bouton svg { width: 22px; height: 22px; }
.navigation { position: absolute; top: 100%; left: 0; right: 0; background: var(--chocolat); padding: .25rem 20px 1.25rem; }
.navigation[data-ouvert="false"] { display: none; }
.navigation ul { list-style: none; margin: 0; padding: 0; }
.navigation a { display: block; padding: .8rem 0; color: var(--creme); text-decoration: none; font-family: var(--titres); font-size: 1.35rem; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.navigation a[aria-current="page"] { color: var(--safran); }
@media (min-width: 900px) {
  .menu-bouton { display: none; }
  .navigation, .navigation[data-ouvert="false"] { display: flex; align-items: center; gap: 1.5rem; position: static; padding: 0; background: none; }
  .navigation ul { display: flex; gap: 1.6rem; }
  .navigation a { font-family: var(--police); font-size: .95rem; font-weight: 600; padding: .3rem 0; border: 0; }
  .navigation a:hover { color: var(--safran); }
  .navigation .bouton { min-height: 44px; padding: .5rem 1.2rem; font-size: .92rem; }
}
.nav-reserver { display: none; }
@media (min-width: 900px) { .nav-reserver { display: inline-flex; } }

/* ---------- Barre d'action fixe (mobile) ---------- */
.barre-action {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  display: grid; grid-template-columns: 1fr 1.4fr; gap: .6rem;
  padding: .7rem 16px calc(.7rem + env(safe-area-inset-bottom, 0px));
  background: color-mix(in srgb, var(--fond) 96%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-top: 1px solid var(--ligne);
}
.barre-action .bouton { min-height: 50px; padding-inline: 1rem; }
.barre-action .bouton-appel { background: var(--chocolat); color: var(--creme); }
@media (min-width: 900px) { .barre-action { display: none; } }

/* ---------- Accueil : grande photo ---------- */
.hero {
  position: relative; min-height: calc(100svh - 64px - 34px); display: flex; align-items: flex-end;
  color: #fff; overflow: hidden; background: var(--chocolat);
}
.hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(43, 26, 18, .15) 0%, rgba(43, 26, 18, .35) 45%, rgba(43, 26, 18, .88) 100%);
}
.hero .conteneur { position: relative; z-index: 2; padding-block: 48px 40px; }
.hero h1 { color: #fff; max-width: 13ch; }
.hero h1 .italique { color: var(--safran); }
.hero p { font-size: 1.15rem; max-width: 34ch; color: #fbeee0; margin-bottom: 1.6rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; }
@media (min-width: 900px) { .hero { min-height: 640px; max-height: 860px; } .hero .conteneur { padding-block: 80px 72px; } }

/* ---------- Sections ---------- */
.section { padding-block: 64px; }
@media (min-width: 900px) { .section { padding-block: 100px; } }
.intro { text-align: center; max-width: 680px; margin: 0 auto 2.5rem; }
.intro p { color: var(--discret); font-size: 1.1rem; }

/* Carrousel de plats (défilement horizontal sur mobile) */
.carrousel {
  display: grid; grid-auto-flow: column; grid-auto-columns: 78%; gap: 1rem;
  overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 20px 1rem; margin: 0 -20px;
  scrollbar-width: none;
}
.carrousel::-webkit-scrollbar { display: none; }
.plat { scroll-snap-align: start; background: var(--papier); border-radius: var(--rayon); overflow: hidden; box-shadow: 0 10px 30px rgba(43, 26, 18, .08); }
.plat img { aspect-ratio: 4 / 3; width: 100%; object-fit: cover; }
.plat div { padding: 1.1rem 1.25rem 1.35rem; }
.plat h3 { margin-bottom: .3rem; }
.plat p { margin: 0; color: var(--discret); font-size: .97rem; }
.plat .prix { display: inline-block; margin-top: .7rem; background: var(--safran-doux); color: var(--chocolat); font-weight: 700; border-radius: 999px; padding: .2rem .75rem; font-size: .92rem; }
@media (min-width: 760px) { .carrousel { grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); overflow: visible; margin: 0; padding: 0; } }
.indication-glisser { text-align: center; font-size: .85rem; color: var(--discret); margin-top: .25rem; }
@media (min-width: 760px) { .indication-glisser { display: none; } }

/* Bande tomate : formule du midi */
.bande { background: var(--tomate); color: #fde8dd; position: relative; overflow: hidden; }
.bande::after {
  content: ""; position: absolute; width: 380px; height: 380px; border-radius: 50%;
  right: -140px; top: -140px; background: color-mix(in srgb, var(--safran) 22%, transparent);
}
.bande .conteneur { position: relative; z-index: 1; display: grid; gap: 2rem; align-items: center; }
.bande h2 { color: #fff; }
.bande .gros-prix { font-family: var(--titres); font-size: clamp(4rem, 18vw, 7rem); line-height: 1; color: var(--safran); }
.bande .gros-prix small { font-size: .3em; color: #fde8dd; display: block; font-family: var(--police); font-weight: 600; margin-top: .4rem; }
@media (min-width: 900px) { .bande .conteneur { grid-template-columns: 1.4fr 1fr; } }

/* Bloc photo + texte */
.duo { display: grid; gap: 2rem; align-items: center; }
.duo img { border-radius: var(--rayon); aspect-ratio: 4 / 5; object-fit: cover; width: 100%; }
@media (min-width: 900px) { .duo { grid-template-columns: 1fr 1.1fr; gap: 4.5rem; } }

/* ---------- La carte ---------- */
.titre-page { background: var(--chocolat); color: #f2e3d3; padding-block: 48px 40px; text-align: center; }
.titre-page h1 { color: var(--creme); font-size: clamp(2.4rem, 10vw, 4rem); }
.titre-page p { max-width: 48ch; margin: 0 auto; color: #d9c4b0; }

.onglets {
  position: sticky; top: 64px; z-index: 40; background: var(--fond);
  border-bottom: 1px solid var(--ligne);
}
.onglets ul { list-style: none; margin: 0 auto; padding: .7rem 20px; display: flex; gap: .5rem; overflow-x: auto; max-width: var(--largeur); scrollbar-width: none; }
.onglets ul::-webkit-scrollbar { display: none; }
.onglets a { display: inline-block; white-space: nowrap; padding: .45rem 1rem; border-radius: 999px; background: var(--papier); border: 1px solid var(--ligne); color: var(--encre); text-decoration: none; font-weight: 600; font-size: .92rem; }
.onglets a:hover { background: var(--safran-doux); }
@media (min-width: 900px) { .onglets ul { justify-content: center; } }

.menu { max-width: 780px; margin: 0 auto; }
.menu-section { margin-bottom: 3.5rem; }
.menu-section h2 { text-align: center; font-size: clamp(2rem, 7vw, 2.6rem); margin-bottom: .25rem; }
.menu-section .sous-titre { text-align: center; color: var(--discret); font-family: var(--italique); font-style: italic; margin-bottom: 1.75rem; }
.menu-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.35rem; }
.menu-liste li { display: grid; grid-template-columns: 1fr auto; gap: .2rem 1rem; }
.menu-liste .nom { font-family: var(--titres); font-weight: 700; color: var(--encre); font-size: 1.12rem; display: flex; align-items: baseline; gap: .5rem; }
.menu-liste .nom::after { content: ""; flex: 1; border-bottom: 2px dotted var(--pointille); transform: translateY(-4px); }
.menu-liste .prix { font-family: var(--titres); font-weight: 700; color: var(--accent-texte); font-size: 1.12rem; }
.menu-liste .desc { grid-column: 1 / -1; color: var(--discret); font-size: .95rem; margin: 0; }
.etiquette { display: inline-block; font-family: var(--police); font-size: .7rem; font-weight: 700; padding: .1rem .5rem; border-radius: 999px; background: #e6ecd5; color: var(--olive); vertical-align: middle; }
.encadre { background: var(--papier); border: 2px dashed var(--safran); border-radius: var(--rayon); padding: 1.5rem; text-align: center; margin-bottom: 3.5rem; }
.encadre h2 { font-size: 1.8rem; }
.encadre p { margin: 0; }
.note { color: var(--discret); font-size: .9rem; text-align: center; }

/* ---------- Infos pratiques ---------- */
.infos-grille { display: grid; gap: 1.5rem; }
@media (min-width: 900px) { .infos-grille { grid-template-columns: 1fr 1.3fr; gap: 2rem; align-items: start; } }
.bloc { background: var(--papier); border-radius: var(--rayon); padding: 1.75rem 1.5rem; box-shadow: 0 10px 30px rgba(43, 26, 18, .06); }
.bloc h2 { font-size: 1.9rem; }
.horaires { list-style: none; margin: 0; padding: 0; }
.horaires li { display: flex; justify-content: space-between; gap: 1rem; padding: .75rem 0; border-bottom: 1px solid var(--ligne); }
.horaires li:last-child { border-bottom: 0; }
.horaires .jour { font-weight: 700; color: var(--encre); }
.horaires .ferme { color: var(--discret); font-style: italic; }
.horaires .heures { text-align: right; }
.plan { border-radius: var(--rayon); overflow: hidden; border: 1px solid var(--ligne); background: var(--papier); }
.plan iframe { display: block; width: 100%; height: 360px; border: 0; }
@media (min-width: 900px) { .plan iframe { height: 460px; } }
.plan p { margin: 0; padding: 1rem 1.25rem; font-size: .92rem; color: var(--discret); }
.acces-liste { list-style: none; padding: 0; margin: 1.25rem 0 0; display: grid; gap: .75rem; }
.acces-liste li { display: flex; gap: .75rem; align-items: flex-start; }
.acces-liste .pastille { flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; background: var(--safran-doux); display: grid; place-items: center; font-size: .8rem; font-weight: 800; color: var(--chocolat); }

/* ---------- Galerie (mosaïque) ---------- */
.galerie { columns: 2 160px; column-gap: .75rem; }
@media (min-width: 900px) { .galerie { columns: 3; column-gap: 1rem; } }
.galerie button {
  display: block; width: 100%; margin: 0 0 .75rem; padding: 0; border: 0; background: none; cursor: zoom-in;
  border-radius: 16px; overflow: hidden; break-inside: avoid;
}
@media (min-width: 900px) { .galerie button { margin-bottom: 1rem; } }
.galerie img { width: 100%; transition: transform .3s; }
.galerie button:hover img { transform: scale(1.03); }
.galerie .haute img { aspect-ratio: 3 / 4; object-fit: cover; }
.galerie .large img { aspect-ratio: 4 / 3; object-fit: cover; }

.visionneuse { border: 0; padding: 0; background: transparent; max-width: min(92vw, 1100px); max-height: 90vh; }
.visionneuse::backdrop { background: rgba(43, 26, 18, .9); }
.visionneuse img { max-height: 80vh; width: auto; margin: 0 auto; border-radius: 12px; }
.visionneuse p { color: var(--creme); text-align: center; margin: .75rem 0 0; }
.visionneuse button { position: fixed; top: 16px; right: 16px; width: 48px; height: 48px; border-radius: 50%; border: 0; background: var(--creme); color: var(--chocolat); font-size: 1.6rem; cursor: pointer; }

/* ---------- Contact & réservation ---------- */
.contact-grille { display: grid; gap: 1.5rem; }
@media (min-width: 900px) { .contact-grille { grid-template-columns: .9fr 1.1fr; gap: 2rem; align-items: start; } }
.appel-carte { background: var(--chocolat); color: #e9d8c6; border-radius: var(--rayon); padding: 2rem 1.5rem; }
.appel-carte h2 { color: var(--creme); font-size: 1.9rem; }
.appel-carte .numero { font-family: var(--titres); font-size: clamp(1.8rem, 8vw, 2.4rem); color: var(--safran); margin-bottom: 1.25rem; }
.appel-carte .bouton { width: 100%; }
.appel-carte .petit { font-size: .9rem; margin: 1rem 0 0; color: #bfa996; }

.formulaire { background: var(--papier); border-radius: var(--rayon); padding: 1.75rem 1.5rem; box-shadow: 0 10px 30px rgba(43, 26, 18, .06); }
@media (min-width: 900px) { .formulaire { padding: 2.25rem; } }
.formulaire h2 { font-size: 1.9rem; }
.champ { margin-bottom: 1.1rem; }
.champ label, .champ legend { display: block; font-weight: 700; color: var(--encre); margin-bottom: .45rem; font-size: .95rem; padding: 0; }
.champ input, .champ select, .champ textarea {
  width: 100%; font: inherit; color: var(--encre); background: var(--fond);
  border: 2px solid var(--ligne); border-radius: 14px; padding: .75rem .9rem; min-height: 52px;
}
.champ textarea { min-height: 100px; resize: vertical; }
.champ input:focus, .champ select:focus, .champ textarea:focus { outline: none; border-color: var(--safran); background: #fff; }
.champs-duo { display: grid; gap: 0 1rem; }
@media (min-width: 600px) { .champs-duo { grid-template-columns: 1fr 1fr; } }
fieldset.champ { border: 0; margin: 0 0 1.1rem; padding: 0; }
.compteur { display: flex; align-items: center; gap: .75rem; }
.compteur button { width: 52px; height: 52px; border-radius: 50%; border: 2px solid var(--ligne); background: var(--fond); font-size: 1.4rem; color: var(--encre); cursor: pointer; }
.compteur button:hover { border-color: var(--safran); }
.compteur output { min-width: 3ch; text-align: center; font-family: var(--titres); font-size: 1.6rem; color: var(--encre); }
.message-demo { margin: 1rem 0 0; padding: .9rem 1rem; background: var(--safran-doux); color: var(--chocolat); border-radius: 14px; font-size: .95rem; }

/* ---------- Pied de page ---------- */
.pied { background: var(--chocolat); color: #d9c4b0; padding-block: 56px 32px; font-size: .95rem; }
.pied .conteneur { display: grid; gap: 2rem; }
.pied .logo { font-size: 1.6rem; }
.pied h2 { font-family: var(--police); font-size: .85rem; text-transform: uppercase; letter-spacing: .12em; color: var(--safran); margin-bottom: .75rem; }
.pied p { margin: 0 0 .35rem; }
.pied a { color: var(--creme); }
.pied-bas { border-top: 1px solid rgba(255, 255, 255, .12); padding-top: 1.5rem; font-size: .85rem; color: #a88f7b; }
@media (min-width: 760px) { .pied .conteneur { grid-template-columns: 1.5fr 1fr 1fr; } .pied-bas { grid-column: 1 / -1; } }

/* ---------- Sélecteurs de couleurs (démo) ----------
   1. « Boutons & accents » : boutons, textes mis en avant et décor (bande du midi, filigrane).
   2. « Fond » : couleur du fond et des cartes uniquement.
   Les photos ne sont jamais teintées. En-tête et pied de page gardent leur chocolat.
   Valeurs par défaut = couleurs d'origine du site. */
.bandeau-demo { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .2rem 1.5rem; }
.selecteurs { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .1rem 1.1rem; }
.selecteur { display: inline-flex; align-items: center; }
.selecteur + .selecteur { padding-left: 1.1rem; border-left: 1px solid rgba(43, 26, 18, .3); }
.selecteur-libelle { font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; margin-right: .4rem; white-space: nowrap; }
.choix-couleur { width: 30px; height: 30px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; border-radius: 50%; }
.choix-couleur::before { content: ""; width: 17px; height: 17px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 1px rgba(43, 26, 18, .35); transition: transform .15s; }
.choix-couleur:hover::before { transform: scale(1.15); }
.choix-couleur[aria-pressed="true"]::before { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--chocolat); transform: scale(1.1); }
@media (min-width: 900px) { .bandeau-demo { justify-content: space-between; text-align: left; } }

body, .bande, .bloc, .formulaire, .plat, .onglets, .barre-action, .bouton { transition: background-color .35s, color .35s; }

/* 1. Boutons & accents (couleur principale, couleur secondaire) */
:root[data-accent="bordeaux"]   { --tomate: #7d2638; --tomate-fonce: #611c2b; --safran: #d6a84e; --safran-survol: #e3b964; --safran-doux: #f5e7c9; --accent-texte: #7d2638; --accent-texte-clair: #e9a3b1; }
:root[data-accent="olive"]      { --tomate: #5e6b2c; --tomate-fonce: #4a5522; --safran: #dcb45c; --safran-survol: #e7c274; --safran-doux: #f3ead0; --accent-texte: #5e6b2c; --accent-texte-clair: #c3d08e; }
:root[data-accent="marine"]     { --tomate: #2e4a6b; --tomate-fonce: #223853; --safran: #d9b77a; --safran-survol: #e4c58e; --safran-doux: #f3e9d6; --accent-texte: #2e4a6b; --accent-texte-clair: #a9c3e3; }
:root[data-accent="terracotta"] { --tomate: #a3563a; --tomate-fonce: #84432c; --safran: #e2b97f; --safran-survol: #ebc791; --safran-doux: #f6e8d4; --accent-texte: #a3563a; --accent-texte-clair: #f0a98a; }

/* 2. Fond : un ton clair en plus du crème, et quatre tons sombres élégants */
:root[data-fond="lin"]      { --fond: #f0eee9; --papier: #faf9f6; --ligne: #e0dcd3; --pointille: #cbc5b9; }
:root[data-fond="bordeaux"] { --fond: #2b1419; --papier: #36191f; --ligne: #4d2a31; --pointille: #6a4249; }
:root[data-fond="sapin"]    { --fond: #15221c; --papier: #1b2b24; --ligne: #2c4037; --pointille: #445c4f; }
:root[data-fond="nuit"]     { --fond: #131a28; --papier: #192233; --ligne: #29364d; --pointille: #415171; }
:root[data-fond="chocolat"] { --fond: #33241c; --papier: #3e2c23; --ligne: #574034; --pointille: #6d5243; }

/* Sur fond sombre : textes clairs et accents dans leur version claire */
:root:is([data-fond="bordeaux"], [data-fond="sapin"], [data-fond="nuit"], [data-fond="chocolat"]) {
  color-scheme: dark;
  --encre: #f6ece0; --texte: #e2d3c4; --discret: #bfa997;
  --accent-texte: var(--accent-texte-clair); --olive-texte: #bccb85;
}
:root:is([data-fond="bordeaux"], [data-fond="sapin"], [data-fond="nuit"], [data-fond="chocolat"]) .champ input:focus, :root:is([data-fond="bordeaux"], [data-fond="sapin"], [data-fond="nuit"], [data-fond="chocolat"]) .champ select:focus, :root:is([data-fond="bordeaux"], [data-fond="sapin"], [data-fond="nuit"], [data-fond="chocolat"]) .champ textarea:focus { background: var(--papier); }
:root:is([data-fond="bordeaux"], [data-fond="sapin"], [data-fond="nuit"], [data-fond="chocolat"]) .barre-action .bouton-appel { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); }