/* flânerie — les décors au défilement (motion.decor), feuille émise par le
   build seulement quand la config demande un décor. Les dessins sont posés
   par assets/js/decors.js ; tout se teinte de la palette (--accent-rgb,
   --terracotta, --terracotta-fonce), donc suit le bouton « Couleurs ». */

/* ---- le calque : au-dessus du contenu, sous la fumée et la barre -------- */
.decor { position: fixed; inset: 0; z-index: 57; pointer-events: none; }

/* ---- le bouton « Décor » : le jumeau du bouton « Couleurs » --------------
   Il emprunte ses classes (pal-bouton, pal-liste, pal-choix) pour prendre
   l'allure que chaque peau leur donne ; sa racine reste .dec, que le script
   des palettes ne confond jamais avec la sienne. */
.dec { position: relative; }
.dec .pal-liste { min-width: 236px; }
.dec.est-ouvert .pal-liste { opacity: 1; transform: none; pointer-events: auto; }
.dec-icone {
  display: inline-grid; place-items: center; flex: none;
  width: 20px; height: 20px; color: var(--terracotta);
}
.dec-icone svg {
  width: 18px; height: 18px;
  fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
}

/* ==========================================================================
   RAMEAUX DE LUMIÈRE
   ========================================================================== */
/* la lueur qu'elles jettent sur le « mur » suit la pousse (--pousse, 0 → 1) */
.decor--rameaux::before,
.decor--rameaux::after {
  content: ''; position: absolute; bottom: -10vh; width: 38vh; height: 120vh;
  background: radial-gradient(closest-side, rgba(var(--accent-rgb), .16), rgba(var(--accent-rgb), 0));
  opacity: calc(var(--pousse, 0) * .9);
}
.decor--rameaux::before { left: -14vh; }
.decor--rameaux::after { right: -14vh; }
/* une boîte par branche, à la proportion du dessin (320 × 1000) : le bois
   et les lumières s'y placent en pourcentages, le côté droit est un miroir */
.rameau {
  position: absolute; bottom: 0; height: 100%; width: 32vh;
  contain: layout style; will-change: transform;
}
.rameau--gauche { left: 0; }
.rameau--droite { right: 0; transform: scaleX(-1); }
.rameau svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
/* le bois reste sombre : ce sont les lumières qui doivent briller. L'opacité
   va au groupe, pas aux traits : sur chaque trait, les jointures arrondies
   qui se recouvrent dessineraient un chapelet de perles */
.rm-bois { opacity: .64; }
.rm-bois path { fill: none; stroke: var(--terracotta-fonce); stroke-linecap: round; }
/* une lumière : cœur presque blanc, halo à l'accent ; --r est son rayon dans
   le dessin (1 unité = 0,1 vh). Éteinte, elle est à l'échelle zéro ; elle
   s'allume d'un éclat, puis scintille à son propre rythme */
.rm-feu, .rm-pointe {
  position: absolute; display: block;
  width: calc(var(--r, 2) * 1.3vh); height: calc(var(--r, 2) * 1.3vh);
  margin: calc(var(--r, 2) * -.65vh) 0 0 calc(var(--r, 2) * -.65vh);
  border-radius: 50%;
  background: radial-gradient(circle,
    #FFF6E2 0 8%, rgba(var(--accent-rgb), .95) 13%,
    rgba(var(--accent-rgb), .32) 30%, rgba(var(--accent-rgb), 0) 68%);
}
.rm-feu { transform: scale(0); transition: transform .9s cubic-bezier(.34, 1.56, .64, 1); }
.rm-feu.est-allume {
  transform: none;
  animation: rm-scintille var(--p, 3.4s) ease-in-out var(--d, 0s) infinite alternate;
}
@keyframes rm-scintille { from { opacity: 1; } to { opacity: .35; } }
/* tout en bas, une vague de lumière remonte les deux branches */
.decor--rameaux.est-complet .rm-feu.est-allume {
  animation:
    rm-scintille var(--p, 3.4s) ease-in-out var(--d, 0s) infinite alternate,
    rm-vague 1.3s ease-out calc(var(--y, 0) * 1.6s) 1 both;
}
@keyframes rm-vague { 0%, 100% { transform: none; } 35% { transform: scale(1.9); } }
/* la pointe qui pousse : plus vive que les lumières, visible pendant la pousse */
.rm-pointe {
  --r: 3.4; top: 0; left: 0;
  opacity: 0; transition: opacity .5s ease;
  will-change: transform;
}
.rm-pointe.est-visible { opacity: 1; }
.rm-pointe::after {
  content: ''; position: absolute; inset: -40%; border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--accent-rgb), .35), rgba(var(--accent-rgb), 0) 65%);
  animation: rm-flamme 1.6s ease-in-out infinite alternate;
}
@keyframes rm-flamme { from { transform: scale(.8); opacity: .7; } to { transform: scale(1.15); opacity: 1; } }

/* ==========================================================================
   FLÛTES DE CHAMPAGNE
   ========================================================================== */
/* une flûte au milieu de chaque marge ; elles pivotent sur leur pied pour
   trinquer, d'où l'origine en bas */
.flute {
  position: absolute; bottom: 9vh;
  height: 62vh; aspect-ratio: 100 / 420;
  left: max(10px, calc((100vw - 1180px) / 4 - 7.4vh));
  transform-origin: 50% 100%;
  transition: transform 1.4s cubic-bezier(.34, 1.4, .64, 1);
}
.flute--droite { left: auto; right: max(10px, calc((100vw - 1180px) / 4 - 7.4vh)); }
.flute svg { width: 100%; height: 100%; overflow: visible; }
.fl-verre { fill: none; stroke: var(--terracotta); stroke-width: .9; stroke-linecap: round; opacity: .85; }
.fl-reflet { fill: none; stroke: #FFFFFF; stroke-width: 1.3; stroke-linecap: round; opacity: .28; }
/* le vin garde sa couleur de champagne, quelle que soit la palette */
.fl-s0 { stop-color: #FFF1C4; stop-opacity: .88; }
.fl-s1 { stop-color: #F0CF7E; stop-opacity: .72; }
.fl-s2 { stop-color: #C99A45; stop-opacity: .82; }
.fl-mousse { fill: #FFF8E6; opacity: .85; }
/* chaque bulle monte de son point de naissance jusqu'au buvant ; le clip
   l'efface au-dessus de la surface du vin */
.fl-bulle { fill: #FFFBEF; opacity: 0; animation: fl-monte 3.4s linear infinite; }
@keyframes fl-monte {
  0% { transform: translate(0, 0); opacity: 0; }
  8% { opacity: .9; }
  50% { transform: translate(1.2px, -92px); }
  100% { transform: translate(-.6px, -184px); opacity: .9; }
}
/* on trinque : les flûtes s'inclinent l'une vers l'autre, le cristal tinte */
.decor--flutes.est-complet .flute--gauche { transform: rotate(9deg); }
.decor--flutes.est-complet .flute--droite { transform: rotate(-9deg); }
.decor--flutes.est-complet .fl-verre { animation: fl-tinte 1s ease .9s 1 both; }
@keyframes fl-tinte { 0%, 100% { opacity: .85; } 30% { opacity: 1; stroke: #FFF6DA; } }
.fl-eclats { position: absolute; left: 50%; top: 5.2%; width: 0; height: 0; }
.fl-eclat {
  position: absolute; width: 7px; height: 7px; margin: -3.5px; border-radius: 50%;
  background: radial-gradient(circle, #FFFFFF 0 22%, rgba(var(--accent-rgb), .9) 40%, rgba(var(--accent-rgb), 0) 70%);
  opacity: 0;
}
.decor--flutes.est-complet .fl-eclat { animation: fl-eclat 1.6s cubic-bezier(.2, .7, .3, 1) calc(.9s + var(--d, 0s)) 1 both; }
@keyframes fl-eclat {
  0% { transform: translate(0, 0) scale(.4); opacity: 0; }
  15% { opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) scale(1); opacity: 0; }
}

/* ==========================================================================
   LA NUIT TOMBE
   ========================================================================== */
/* la nuit voile la page d'un bleu à peine posé : un calque translucide,
   sans mode de fusion (qu'un défilement ferait recomposer à chaque image) ;
   assez léger pour que le texte garde son contraste */
.nuit-fond { position: fixed; inset: 0; z-index: 56; pointer-events: none; }
.nuit-crepuscule, .nuit-ciel { position: absolute; inset: 0; opacity: 0; }
.nuit-crepuscule {
  background: radial-gradient(140% 80% at 50% 118%,
    rgba(255, 150, 70, .16), rgba(220, 100, 70, .06) 45%, rgba(220, 100, 70, 0) 72%);
}
.nuit-ciel {
  background: linear-gradient(180deg, rgba(24, 44, 120, .16), rgba(18, 34, 100, .1) 60%, rgba(12, 22, 70, .15));
}
.etoile {
  position: absolute;
  width: calc(var(--t, 1.4) * 1.6px); height: calc(var(--t, 1.4) * 1.6px);
  margin: calc(var(--t, 1.4) * -.8px) 0 0 calc(var(--t, 1.4) * -.8px);
  border-radius: 50%;
  background: #FFF8EA;
  box-shadow: 0 0 6px 1px rgba(var(--accent-rgb), .45);
  opacity: 0; transform: scale(.2);
  transition: opacity 1.2s ease, transform 1.2s ease;
}
.etoile.est-allume { opacity: .85; transform: none; }
.etoile--vive { will-change: opacity; }
.etoile--vive.est-allume { animation: nuit-scintille 3.2s ease-in-out var(--d, 0s) infinite alternate; }
@keyframes nuit-scintille { from { opacity: .95; } to { opacity: .3; } }
.etoile--astre { --t: 2.3; box-shadow: 0 0 10px 2px rgba(var(--accent-rgb), .6); }
.nuit-constellations { position: absolute; inset: 0; width: 100%; height: 100%; }
.nuit-ligne { fill: none; stroke: var(--terracotta); stroke-width: .8; stroke-opacity: .55; stroke-linecap: round; stroke-linejoin: round; }
/* un croissant : l'ombre intérieure d'un disque vide */
.lune {
  position: absolute; left: 0; top: 0;
  width: 64px; height: 64px; margin: -32px; border-radius: 50%;
  box-shadow: inset -14px 8px 0 0 #FFF3D6;
  filter: drop-shadow(0 0 18px rgba(255, 236, 190, .55));
  opacity: 0; will-change: transform;
}
.filante {
  position: absolute; top: 14%; left: -12%;
  width: 170px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, rgba(255, 250, 235, 0), rgba(255, 250, 235, .95));
  opacity: 0;
}
.decor--nuit.est-complet .filante { animation: nuit-filante 1.5s ease-in .5s 1 both; }
@keyframes nuit-filante {
  0% { transform: translate(0, 0) rotate(18deg); opacity: 0; }
  10% { opacity: 1; }
  100% { transform: translate(78vw, 25vw) rotate(18deg); opacity: 0; }
}
/* sur téléphone la marge n'existe pas : la lune passerait sur les photos */
@media (max-width: 719px) { .lune { display: none; } }
/* la dernière constellation dessine l'initiale de la maison */
.etoile--initiale { --t: 1.9; transition: opacity .9s ease, transform .9s ease; }
.decor--nuit.est-complet .etoile--initiale { opacity: 1; transform: none; }

/* ==========================================================================
   LE TRAIT D'OR
   ========================================================================== */
/* le seul décor posé dans la page plutôt que sur l'écran : il défile avec
   elle, à la hauteur du document */
.decor--trait { position: absolute; inset: 0 auto auto 0; width: 100%; z-index: 56; }
.tr-dessin { position: absolute; left: 0; top: 0; overflow: visible; }
.tr-ligne { fill: none; stroke: var(--terracotta); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; opacity: .9; }
/* la plume : un point de lumière au bout de la ligne qui s'écrit */
.tr-plume {
  position: absolute; left: 0; top: 0;
  width: 26px; height: 26px; margin: -13px; border-radius: 50%;
  background: radial-gradient(circle, #FFF7E6 0 14%, rgba(var(--accent-rgb), .7) 30%, rgba(var(--accent-rgb), 0) 70%);
  opacity: 0; transition: opacity .4s ease; will-change: transform;
}
.tr-plume.est-visible { opacity: 1; }
.decor--trait.est-complet .tr-ligne:last-of-type { animation: tr-signe 1.8s ease .2s 1 both; }
@keyframes tr-signe {
  0%, 100% { filter: none; }
  40% { filter: drop-shadow(0 0 5px rgba(var(--accent-rgb), .9)); }
}

/* ==========================================================================
   LES CHANDELLES
   ========================================================================== */
/* la chaleur qu'elles répandent : --allumees, de 0 à 1 */
.decor--chandelles::before,
.decor--chandelles::after {
  content: ''; position: absolute; bottom: -22vh; width: 64vh; height: 76vh;
  background: radial-gradient(closest-side, rgba(255, 190, 110, .2), rgba(var(--accent-rgb), 0));
  opacity: var(--allumees, 0); transition: opacity .8s ease;
}
.decor--chandelles::before { left: -20vh; }
.decor--chandelles::after { right: -20vh; }
.chandelles {
  position: absolute; bottom: 0; height: 100%;
  width: clamp(110px, calc((100vw - 1180px) / 2 - 6px), 230px);
  display: flex; align-items: flex-end; justify-content: space-evenly;
}
.chandelles--gauche { left: 0; }
.chandelles--droite { right: 0; }
/* elle se lève du bas de l'écran, puis on l'allume */
.chandelle {
  position: relative; flex: none;
  width: var(--l, 16px); height: calc(var(--h, .4) * 100vh);
  transform: translateY(112%);
  transition: transform 1.2s cubic-bezier(.22, .61, .36, 1);
}
.chandelle.est-levee { transform: none; }
.chandelle i, .chandelle svg { position: absolute; display: block; }
.ch-cire {
  left: 0; right: 0; top: 0; bottom: 12px;
  border-radius: 4px 4px 1px 1px;
  background: linear-gradient(90deg, #8F7F62 0%, #D8CAAA 30%, #EADFC6 46%, #CDBE9C 70%, #7E6F55 100%);
}
/* une coulure de cire sur le flanc */
.ch-cire::before {
  content: ''; position: absolute; left: 2px; top: 3px; width: 4px; height: 24%;
  border-radius: 0 0 3px 3px; background: #E2D6BA;
}
/* la cuvette qui rougeoie sous la flamme */
.ch-cire::after {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 9px;
  border-radius: 4px 4px 50% 50%;
  background: radial-gradient(ellipse at 50% 0%, rgba(255, 214, 140, .8), rgba(255, 214, 140, 0) 70%);
  opacity: 0; transition: opacity .8s ease;
}
.chandelle.est-allumee .ch-cire::after { opacity: 1; }
/* le bougeoir, à gradin, en laiton de la palette */
.ch-bougeoir {
  left: -7px; right: -7px; bottom: 0; height: 14px;
  border-radius: 2px 2px 0 0;
  background: linear-gradient(180deg, var(--terracotta), var(--terracotta-fonce));
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .35);
}
.ch-bougeoir::before {
  content: ''; position: absolute; left: 4px; right: 4px; top: -4px; height: 4px;
  border-radius: 1px 1px 0 0; background: var(--terracotta-fonce);
}
.ch-meche { left: 50%; top: -8px; width: 1.6px; height: 9px; margin-left: -.8px; border-radius: 1px; background: #2B2117; }
/* l'axe se couche au vent du défilement ; la flamme, dessus, vacille */
.ch-axe {
  left: 50%; bottom: calc(100% + 5px); width: 14px; height: 30px; margin-left: -7px;
  transform-origin: 50% 100%;
  transform: rotate(calc(var(--vent, 0) * 1deg));
  transition: transform .6s cubic-bezier(.22, .61, .36, 1);
}
.ch-flamme {
  inset: 0;
  border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%;
  background: radial-gradient(ellipse at 50% 74%,
    #FFFFFF 0 10%, #FFF2C4 24%, #FFC860 48%, rgba(255, 140, 50, .55) 64%, rgba(255, 120, 40, 0) 76%);
  transform-origin: 50% 100%;
  opacity: 0; transform: scale(.1);
  transition: opacity .35s ease, transform .5s cubic-bezier(.34, 1.56, .64, 1);
  filter: blur(.4px);
}
.chandelle.est-allumee .ch-flamme { opacity: 1; transform: none; animation: ch-flamme .16s ease-in-out infinite alternate; }
@keyframes ch-flamme { from { transform: scale(1, 1) rotate(-1.4deg); } to { transform: scale(.93, 1.07) rotate(1.4deg); } }
.ch-halo {
  left: 50%; bottom: calc(100% + 18px);
  width: 200px; height: 200px; margin: 0 0 -100px -100px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 210, 140, .3), rgba(var(--accent-rgb), .12) 40%, rgba(var(--accent-rgb), 0) 70%);
  opacity: 0; transition: opacity .9s ease;
}
.chandelle.est-allumee .ch-halo { opacity: 1; animation: ch-halo 2.8s ease-in-out infinite alternate; }
@keyframes ch-halo { from { opacity: .7; transform: scale(.94); } to { opacity: 1; transform: scale(1.04); } }
/* soufflée en remontant la page : un filet de fumée quitte la mèche */
.ch-fumet { left: 50%; bottom: calc(100% + 2px); width: 20px; height: 90px; margin-left: -10px; overflow: visible; opacity: 0; }
.ch-fumet path {
  fill: none; stroke: rgba(235, 225, 205, .55); stroke-width: 1.4; stroke-linecap: round;
  stroke-dasharray: 120; stroke-dashoffset: 120;
}
.chandelle.est-soufflee .ch-fumet { animation: ch-fumet 2.2s ease-out 1 both; }
.chandelle.est-soufflee .ch-fumet path { animation: ch-trace 2.2s ease-out 1 both; }
@keyframes ch-fumet { 0% { opacity: 0; transform: none; } 15% { opacity: 1; } 100% { opacity: 0; transform: translateY(-40px) scaleX(1.6); } }
@keyframes ch-trace { to { stroke-dashoffset: 0; } }
/* tout en bas, toutes les flammes s'avivent d'un coup */
.decor--chandelles.est-complet .chandelle.est-allumee .ch-halo {
  animation: ch-apotheose 1.8s ease-out 1, ch-halo 2.8s ease-in-out 1.8s infinite alternate;
}
@keyframes ch-apotheose { 0% { transform: scale(1); } 40% { transform: scale(1.5); opacity: 1; } 100% { transform: scale(1); } }

/* ==========================================================================
   SOLEIL ART DÉCO
   ========================================================================== */
/* plein dans les marges, voilé au-dessus de la colonne de texte : le
   voile est dans la couleur du trait (un dégradé horizontal), pas dans un
   masque, qu'il faudrait recalculer à chaque image du défilement */
.so-dessin { position: absolute; inset: 0; width: 100%; height: 100%; }
.so-f0 { stop-color: var(--terracotta); stop-opacity: 1; }
.so-f1 { stop-color: var(--terracotta); stop-opacity: .1; }
.so-rayon { fill: none; stroke: url(#so-fondu); stroke-width: .9; stroke-opacity: .42; }
.so-rayon--fort { stroke-width: 1.5; stroke-opacity: .68; }
.so-arc { fill: none; stroke: url(#so-fondu); stroke-width: 1.2; stroke-opacity: .75; }
.so-arc--1, .so-arc--3 { stroke-width: .7; stroke-opacity: .55; }
.so-arc--2 { stroke-width: 1.6; }
.so-tour { fill: none; stroke: var(--terracotta); stroke-width: 1.6; stroke-opacity: .8; }
.so-strie { fill: none; stroke: var(--terracotta); stroke-width: .7; stroke-opacity: .45; }
.so-fenetre { fill: rgba(255, 226, 160, 0); transition: fill .8s ease; }
.so-fenetre.est-allume { fill: rgba(255, 226, 160, .75); }
.so-s0 { stop-color: #FFF3D2; stop-opacity: .9; }
.so-s1 { stop-color: var(--terracotta); stop-opacity: .45; }
.so-s2 { stop-color: var(--terracotta); stop-opacity: 0; }
.so-astre { opacity: 0; transform-box: fill-box; transform-origin: 50% 50%; }
/* tout en bas, le soleil se lève tout à fait : une bouffée de lumière monte
   de l'horizon (un dégradé dont seule l'opacité s'anime) */
.so-lueur {
  position: absolute; left: 50%; bottom: -40vh; width: 120vh; height: 80vh; margin-left: -60vh;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 228, 170, .32), rgba(var(--accent-rgb), .12) 50%, rgba(var(--accent-rgb), 0));
  opacity: 0;
}
.decor--soleil.est-complet .so-lueur { animation: so-eclat 2.4s ease-out .2s 1 both; }
@keyframes so-eclat { 0% { opacity: 0; transform: scale(.8); } 40% { opacity: 1; transform: scale(1.05); } 100% { opacity: .55; transform: none; } }

/* ---- rien ne bouge sous « réduire les animations » -----------------------
   Le script n'installe alors aucun décor ; ces règles ne servent qu'au cas
   où la préférence change pendant la visite. */
@media (prefers-reduced-motion: reduce) {
  .decor, .nuit-fond { display: none; }
}