/* ————————————————————————————————————————————————
   Palettes alternatives — prévisualisation via le sélecteur (theme.js).
   La palette par défaut (« Cave ambrée ») est définie dans style.css.
   Pour figer un choix définitif : recopier ses valeurs dans style.css
   et retirer themes.css + theme.js de base.html.twig.
   ———————————————————————————————————————————————— */

html[data-theme="ardoise"] {
  --cave: #14181d; --cave-2: #1c222a; --cave-3: #273039;
  --ambre: #cf7f4a; --ambre-vif: #e29a68; --chene: #9a8878;
  --creme: #edece6; --creme-2: #e0ded4;
  --bordeaux: #5e2233; --bordeaux-vif: #7d2f44;
}

html[data-theme="lie-de-vin"] {
  --cave: #1d1218; --cave-2: #281a22; --cave-3: #36242e;
  --ambre: #d8a154; --ambre-vif: #e7b76f; --chene: #b08d6e;
  --creme: #f3ecdf; --creme-2: #e9dfcd;
}

html[data-theme="vert-bouteille"] {
  --cave: #131f18; --cave-2: #1b2a21; --cave-3: #26382c;
  --ambre: #d9ab4e; --ambre-vif: #e8c06a; --chene: #a29a6f;
  --creme: #f1efe0; --creme-2: #e6e3d0;
}

html[data-theme="papier-clair"] {
  color-scheme: light;
  --cave: #f5f0e4; --cave-2: #ede6d5; --cave-3: #e2d8c2;
  --ambre: #b06d1e; --ambre-vif: #995d15; --chene: #8a6a41;
  --creme: #2a2118; --creme-2: #40352a;
}
html[data-theme="papier-clair"] .hero h1 { text-shadow: 0 2px 30px rgba(255, 252, 244, 0.55); }
html[data-theme="papier-clair"] .hero p.hero-sous { color: var(--creme); }

/* ——— Le sélecteur : pastille discrète en bas à gauche ——— */
.palette-bouton {
  position: fixed; left: 1rem; bottom: 1rem; z-index: 90;
  width: 2.6rem; height: 2.6rem; border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--chene) 55%, transparent);
  background: conic-gradient(var(--ambre) 0 33%, var(--bordeaux-vif) 33% 66%, var(--creme) 66% 100%);
  cursor: pointer; opacity: 0.65; transition: opacity 0.2s;
}
.palette-bouton:hover, .palette-bouton[aria-expanded="true"] { opacity: 1; }

.palette-panneau {
  position: fixed; left: 1rem; bottom: 4.1rem; z-index: 90;
  background: var(--cave-2); color: var(--creme);
  border: 1px solid color-mix(in srgb, var(--chene) 40%, transparent);
  border-radius: 10px; padding: 0.9rem; width: 240px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35);
}
.palette-panneau p {
  font-family: var(--mono); font-size: 0.7rem; text-transform: uppercase;
  letter-spacing: 0.14em; color: var(--chene); margin: 0 0 0.6rem;
}
.palette-choix {
  display: flex; align-items: center; gap: 0.6rem; width: 100%;
  background: none; border: none; color: inherit; font: inherit;
  padding: 0.45rem 0.5rem; border-radius: 6px; cursor: pointer; text-align: left;
}
.palette-choix:hover { background: color-mix(in srgb, var(--chene) 14%, transparent); }
.palette-choix.actif { background: color-mix(in srgb, var(--ambre) 16%, transparent); }
.palette-choix .nuancier {
  display: inline-flex; border-radius: 4px; overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.25); flex: none;
}
.palette-choix .nuancier i { width: 0.85rem; height: 1.15rem; }

html[data-theme="nuit-encre"] {
  --cave: #10151f; --cave-2: #171e2b; --cave-3: #212a3a;
  --ambre: #d6b36a; --ambre-vif: #e6c987; --chene: #8f8a7a;
  --creme: #eef0ee; --creme-2: #dfe2dd;
  --bordeaux: #5a2340; --bordeaux-vif: #77315a;
}

/* Section « mise en page » du panneau */
.palette-panneau p + p { margin-top: 0.8rem; }