/* =========================================================
   EIKO CRÉATION — « ÉDITION NOËL »
   ---------------------------------------------------------
   Chargé APRÈS site.css, theme.css, night.css et night-fx.css,
   uniquement sur les pages /noel/. Il réchauffe le « mur de
   nuit » : rouge de Père Noël, or, vert sapin et neige.

   Le HTML du site n'est pas modifié : cette feuille réécrit les
   variables du thème, puis les lueurs néon roses/cyan qui
   resteraient visibles dans night.css (beaucoup de rgba() y
   sont écrites en dur, donc les variables seules ne suffisent
   pas — les halos roses se mélangeraient aux halos or).

   Contraintes tenues :
     · tout le texte reste au-dessus de 4,5:1 (WCAG AA) ;
     · rien ne bouge sans prefers-reduced-motion ;
     · aucune animation ne provoque de décalage de mise en page.
   ========================================================= */

:root {
  /* Sol */
  --xmas-bg: #060d09;        /* nuit presque noire, sous-ton sapin */
  --xmas-bg-2: #0a1610;
  --xmas-surface: #0f1f17;
  --xmas-surface-2: #14291e;
  --xmas-line: #2a4a3a;

  /* Matières */
  --xmas-cream: #fdf6ea;       /* 18:1 sur --xmas-bg */
  --xmas-cream-soft: #e0d3c0;  /* 11,6:1 */
  --xmas-cream-mute: #b0a390;  /*  7,3:1 */
  --xmas-ink: #07100b;         /* texte posé sur or / rouge */

  /* Couleurs de fête — réservées aux traits, bordures et titres */
  --xmas-red: #ff5b57;         /*  6,3:1 sur --xmas-bg */
  --xmas-red-2: #e2403c;
  --xmas-gold: #ffd479;        /* 13,6:1 */
  --xmas-gold-2: #f0b64c;
  --xmas-pine: #5ddb8f;        /* 11,2:1 */
  --xmas-pine-2: #2e9e63;
  --xmas-ice: #a9e4ff;

  --glow-red: 0 0 18px rgba(255, 91, 87, .45), 0 0 46px rgba(255, 91, 87, .22);
  --glow-gold: 0 0 18px rgba(255, 212, 121, .42), 0 0 46px rgba(240, 182, 76, .18);
  --glow-pine: 0 0 18px rgba(93, 219, 143, .38), 0 0 46px rgba(46, 158, 99, .16);

  /* On réécrit les variables héritées : night.css et site.css les
     utilisent partout (ombres, bordures, mark, dégradés). */
  --paper: var(--xmas-bg);
  --white: var(--xmas-surface);
  --ink: var(--xmas-cream);
  --night: var(--xmas-bg);
  --night-2: var(--xmas-bg-2);
  --surface: var(--xmas-surface);
  --surface-2: var(--xmas-surface-2);
  --line: var(--xmas-line);
  --tx: var(--xmas-cream);
  --tx-soft: var(--xmas-cream-soft);
  --tx-mute: var(--xmas-cream-mute);
  --tx-on-neon: var(--xmas-ink);
  --neon-magenta: var(--xmas-red);
  --neon-green: var(--xmas-pine);
  --neon-cyan: var(--xmas-ice);
  --neon-yellow: var(--xmas-gold);
  --magenta: var(--xmas-red);
  --magenta-dk: #ff7b78;
  --green: var(--xmas-pine);
  --green-2: var(--xmas-pine-2);
  --green-dk: var(--xmas-pine);
  --yellow: var(--xmas-gold);
  --brown: #7a4b2a;
  --accent-soft: linear-gradient(180deg, rgba(255, 212, 121, .14), rgba(93, 219, 143, .08));
}

/* ---------------------------------------------------------
   1. SOL : sapin la nuit, halos chauds, neige
   --------------------------------------------------------- */
html { background: var(--xmas-bg); }
body {
  background: var(--xmas-bg);
  color: var(--xmas-cream);
}

/* La grille technique reste, mais passe du rose/cyan au rouge/sapin. */
.sky::before {
  background-image:
    linear-gradient(rgba(255, 91, 87, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(93, 219, 143, .05) 1px, transparent 1px);
}
.sky::after {
  background:
    radial-gradient(680px 420px at 12% 6%, rgba(255, 91, 87, .16), transparent 70%),
    radial-gradient(620px 420px at 88% 18%, rgba(255, 212, 121, .13), transparent 72%),
    radial-gradient(720px 520px at 50% 106%, rgba(46, 158, 99, .16), transparent 70%);
}
/* La neige est dessinée par noel.js dans cette couche décorative
   fixe : elle ne peut donc jamais passer devant le contenu. */
.xmas-snow {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.vignette {
  background: radial-gradient(120% 90% at 50% 45%, transparent 38%, rgba(6, 13, 9, .8) 100%);
}

/* ---------------------------------------------------------
   2. NAVIGATION : rouge, or et guirlande
   --------------------------------------------------------- */
nav.topnav {
  background: rgba(10, 22, 16, .74);
  border-bottom: 2px solid rgba(255, 91, 87, .42);
  box-shadow: 0 10px 40px rgba(0, 0, 0, .55);
}
nav.topnav.scrolled {
  background: rgba(7, 16, 11, .92);
  border-bottom-color: var(--xmas-gold);
  box-shadow: 0 1px 0 rgba(255, 212, 121, .35), 0 14px 50px rgba(0, 0, 0, .65);
}
/* Guirlande lumineuse accrochée sous la barre : trois ampoules qui
   défilent (or, rouge, sapin) sur un fil sombre. Purement décoratif. */
nav.topnav::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -12px;
  height: 12px;
  pointer-events: none;
  background-repeat: repeat-x;
  background-image:
    radial-gradient(circle at 7px 5px, #fff3c9 0 2.4px, rgba(255, 214, 128, .55) 3.2px, transparent 5.2px),
    radial-gradient(circle at 25px 5px, #ff6b67 0 2.4px, rgba(255, 107, 103, .5) 3.2px, transparent 5.2px),
    radial-gradient(circle at 43px 5px, #7ef0ac 0 2.4px, rgba(126, 240, 172, .5) 3.2px, transparent 5.2px),
    linear-gradient(180deg, rgba(74, 108, 88, .95) 0 1.5px, transparent 1.5px);
  background-size: 54px 12px, 54px 12px, 54px 12px, 100% 12px;
  background-position: 0 0, 0 0, 0 0, 0 0;
  filter: drop-shadow(0 0 7px rgba(255, 201, 120, .55));
  animation: xmasTwinkle 4.5s ease-in-out infinite;
  opacity: .92;
}
@keyframes xmasTwinkle {
  0%, 100% { filter: drop-shadow(0 0 6px rgba(255, 201, 120, .45)); opacity: .82; }
  50%      { filter: drop-shadow(0 0 12px rgba(255, 201, 120, .8)); opacity: 1; }
}
.brand { color: var(--xmas-cream); }
.brand b { color: var(--xmas-red); text-shadow: var(--glow-red); }
.navlogo { filter: drop-shadow(0 0 14px rgba(255, 91, 87, .45)); }

/* Le personnage du logo porte son bonnet de Noël. Le bonnet est une
   image SVG posée en ::after sur .brand : la mise en page ne bouge
   pas d'un pixel. Il n'y a que 8 px au-dessus du logo, donc le bonnet
   est dessiné pour tenir dans cette marge. --logo-w suit la largeur
   réelle de .navlogo (92, 66 puis 54 px) pour que le bonnet garde la
   même échelle sur la tête quand le logo se tasse au défilement. */
.brand {
  position: relative;
  --logo-w: 92px;
  --hat-left: 21.2px;
  --hat-top: -7.7px;
}
.brand::after {
  content: "";
  position: absolute;
  left: var(--hat-left);
  top: var(--hat-top);
  width: calc(var(--logo-w) * .6);
  aspect-ratio: 160 / 108;
  background: url("/assets/img/chapeau-noel-logo.svg") no-repeat center / contain;
  transform: rotate(-9deg);
  /* Origine = centre du logo : au survol le bonnet s'incline et
     grossit exactement comme l'image, il ne se décolle pas. */
  transform-origin: calc(var(--logo-w) * .2045) calc(var(--logo-w) * .592);
  z-index: 3;
  pointer-events: none;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .55));
  /* le logo se tasse en .3 s au défilement : le bonnet suit */
  transition: transform .2s, width .3s, left .3s, top .3s;
}
.brand:hover::after { transform: rotate(-17deg) scale(1.05); }

.nav-links a { color: var(--xmas-cream-soft); }
.nav-links a:not(.nav-cta)::after {
  background: linear-gradient(90deg, var(--xmas-pine), var(--xmas-gold));
  box-shadow: 0 0 10px rgba(255, 212, 121, .7);
  height: 3px;
}
.nav-links a:hover { color: var(--xmas-cream); text-shadow: 0 0 14px rgba(255, 212, 121, .5); }

.nav-cta {
  background: transparent;
  color: var(--xmas-gold) !important;
  border: 2px solid var(--xmas-gold);
  box-shadow: 0 0 14px rgba(255, 212, 121, .32), inset 0 0 14px rgba(255, 212, 121, .1);
  animation: xmasCtaPulse 3.4s ease-in-out infinite;
}
@keyframes xmasCtaPulse {
  0%, 100% { box-shadow: 0 0 14px rgba(255, 212, 121, .3), inset 0 0 14px rgba(255, 212, 121, .1); }
  50%      { box-shadow: 0 0 26px rgba(255, 212, 121, .6), inset 0 0 20px rgba(255, 212, 121, .2); }
}
/* Badge saisonnier à côté du nom : il dit tout de suite où l'on est. */
.xmas-brand-badge {
  font-family: 'Space Mono', monospace;
  font-size: .56rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--xmas-gold);
  border: 1px solid rgba(255, 212, 121, .55);
  border-radius: 6px;
  padding: 3px 7px;
  margin-left: 2px;
  transform: rotate(-3deg) translateY(2px);
  box-shadow: 0 0 16px rgba(255, 212, 121, .18);
  white-space: nowrap;
}
/* Retour vers le site habituel : présent dans la barre sur grand
   écran, dans le tiroir et le pied de page sur mobile. */
.nav-classic {
  font-size: .7rem !important;
  letter-spacing: .6px !important;
  color: var(--xmas-cream-mute) !important;
  border: 1px solid var(--xmas-line);
  border-radius: 8px;
  padding: 5px 9px;
  text-transform: none !important;
}
.nav-classic:hover { color: var(--xmas-gold) !important; border-color: rgba(255, 212, 121, .5); }

.burger { background: var(--xmas-surface); border-color: var(--xmas-line); box-shadow: none; }
.burger span { background: var(--xmas-pine); }
.nav-links { border-left-color: var(--xmas-line); background: rgba(10, 22, 16, .97); }
@media (max-width: 960px) {
  .nav-links { background: rgba(7, 16, 11, .98); border-left: 2px solid rgba(255, 91, 87, .4); }
  .nav-classic { border: 0; padding: 6px 0; }
}
@media (max-width: 1100px) {
  /* Le badge saisonnier allonge la marque : sous 1100 px, il entrait
     en collision avec « Entreprises ». Il reste le titre de la page
     pour dire où l'on est. */
  .xmas-brand-badge { display: none; }
}
@media (min-width: 961px) and (max-width: 1100px) {
  /* Barre horizontale serrée : on resserre les liens au lieu de
     laisser la marque toucher le premier item. */
  .nav-links { gap: 15px; }
  .nav-links a { font-size: .82rem; letter-spacing: .3px; }
  .nav-classic { font-size: .66rem !important; padding: 4px 7px; }
}
/* Le logo rétrécit au défilement (66 px, puis 54 px sous 660 px) :
   le bonnet suit la même échelle et reste posé au même endroit. */
nav.topnav.scrolled .brand { --logo-w: 66px; --hat-left: 13.5px; --hat-top: -6.6px; }
@media (max-width: 660px) {
  .brand { --logo-w: 66px; --hat-left: 15.5px; --hat-top: -6.6px; }
  nav.topnav.scrolled .brand { --logo-w: 54px; --hat-left: 12px; --hat-top: -6.2px; }
  .xmas-brand-badge { display: none; }
}

#prog {
  background: linear-gradient(90deg, var(--xmas-red), var(--xmas-gold) 52%, var(--xmas-pine));
  box-shadow: 0 0 16px rgba(255, 91, 87, .8);
}

/* ---------------------------------------------------------
   3. HERO : la vitrine s'allume
   --------------------------------------------------------- */
.hero { padding: 158px 0 76px; }
.hero::before {
  background:
    radial-gradient(52% 62% at 80% 22%, rgba(255, 212, 121, .12), transparent 70%),
    radial-gradient(46% 58% at 8% 74%, rgba(255, 91, 87, .12), transparent 72%),
    radial-gradient(60% 50% at 50% 110%, rgba(46, 158, 99, .14), transparent 70%);
}
/* Le mur de particules néon de night.js resterait rose : on
   l'éteint au profit de la neige et des guirlandes. */
.hero .spray-canvas { display: none; }

.eyebrow {
  background: rgba(255, 91, 87, .14);
  color: var(--xmas-red);
  border: 1px solid rgba(255, 91, 87, .5);
  box-shadow: 0 0 22px rgba(255, 91, 87, .28), inset 0 0 18px rgba(255, 91, 87, .1);
}
.hero h1 {
  color: var(--xmas-cream);
  text-shadow: 0 0 26px rgba(253, 246, 234, .18), 0 0 60px rgba(255, 212, 121, .14);
}
.hero h1 .hl {
  color: var(--xmas-gold);
  -webkit-text-stroke: 0;
  text-shadow:
    0 0 18px rgba(255, 212, 121, .7),
    0 0 52px rgba(240, 182, 76, .38),
    0 0 96px rgba(240, 182, 76, .18);
}
.scribble path { stroke: var(--xmas-red); filter: drop-shadow(0 0 10px rgba(255, 91, 87, .85)); }
.hero p.lead { color: var(--xmas-cream-soft); }
.hero p.lead strong { color: var(--xmas-cream); }

/* Compte à rebours : la seule urgence affichée sur la page. */
.xmas-count {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 22px;
  font-family: 'Space Mono', monospace;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .9px;
  color: var(--xmas-cream-soft);
  border: 1px dashed rgba(255, 212, 121, .45);
  background: rgba(255, 212, 121, .06);
  border-radius: 99px;
  padding: 7px 15px;
}
.xmas-count b {
  font-family: 'Bangers', cursive;
  font-size: 1.15rem;
  font-weight: 400;
  letter-spacing: 1px;
  color: var(--xmas-gold);
  text-shadow: 0 0 16px rgba(255, 212, 121, .5);
}
.xmas-count strong { color: var(--xmas-cream); }
.xmas-count.is-off { display: none; }

/* Cadre photo = vitrine de boutique */
.xmas-visual { position: relative; }
.hero-frame {
  border: 2px solid rgba(255, 212, 121, .55);
  box-shadow:
    0 0 0 1px rgba(255, 212, 121, .22),
    0 0 44px rgba(240, 182, 76, .26),
    0 0 90px rgba(255, 91, 87, .14),
    0 24px 70px rgba(0, 0, 0, .72);
  background: var(--xmas-surface);
}
.hero-frame.fx-ready {
  box-shadow:
    0 0 0 1px rgba(255, 212, 121, .3),
    0 0 48px rgba(240, 182, 76, .34),
    0 0 96px rgba(255, 91, 87, .16),
    0 24px 70px rgba(0, 0, 0, .72);
}
.hero-frame .hero-photo { filter: saturate(1.06) contrast(1.02); }
.hero-cap {
  background: rgba(7, 16, 11, .92);
  color: var(--xmas-gold);
  border: 1px solid rgba(255, 212, 121, .45);
  box-shadow: 0 0 18px rgba(255, 212, 121, .25);
}
/* Sur le hero de Noël, la légende passe SOUS la photo : posée en
   surimpression, elle recouvrait l'interrupteur de guirlandes situé
   dans l'angle bas-droit du cadre. */
.xmas-visual .hero-cap {
  position: static;
  display: inline-block;
  margin-top: 20px;
  max-width: 100%;
}
.trust li {
  background: rgba(15, 31, 23, .86);
  border: 1px solid var(--xmas-line);
  color: var(--xmas-cream-soft);
  box-shadow: 0 0 0 1px rgba(255, 91, 87, .1), 0 8px 26px rgba(0, 0, 0, .5);
}
.trust b { color: var(--xmas-gold); }

/* Guirlande sur le haut du cadre : trois ampoules par motif. */
.xmas-visual::before {
  content: "";
  position: absolute;
  left: 2%;
  right: 2%;
  top: -20px;
  height: 22px;
  z-index: 5;
  pointer-events: none;
  background-repeat: repeat-x;
  background-image:
    radial-gradient(circle at 6px 7px, #fff3c9 0 2.8px, rgba(255, 214, 128, .55) 3.8px, transparent 6px),
    radial-gradient(circle at 24px 7px, #ff6b67 0 2.8px, rgba(255, 107, 103, .5) 3.8px, transparent 6px),
    radial-gradient(circle at 42px 7px, #7ef0ac 0 2.8px, rgba(126, 240, 172, .5) 3.8px, transparent 6px),
    linear-gradient(180deg, rgba(74, 108, 88, .9) 0 1.5px, transparent 1.5px);
  background-size: 60px 22px, 60px 22px, 60px 22px, 100% 22px;
  filter: drop-shadow(0 0 9px rgba(255, 201, 120, .6));
  transition: opacity .35s, filter .35s;
}
/* L'interrupteur : la vitrine s'éteint, la photo se refroidit.
   Le bouton est posé dans le cadre, comme un interrupteur sur la
   vitrine elle-même — et il reste accessible au clavier. */
.xmas-visual.is-off::before { opacity: .18; filter: none; }
.xmas-visual.is-off .hero-photo { filter: brightness(.64) saturate(.68); }
.xmas-visual.is-off .hero-cap { opacity: .7; }
.hero-photo { transition: filter .45s; }
.xmas-switch {
  position: absolute;
  right: 14px;
  bottom: 14px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: 'Space Mono', monospace;
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .9px;
  color: var(--xmas-cream-soft);
  background: rgba(7, 16, 11, .82);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid var(--xmas-line);
  border-radius: 9px;
  padding: 8px 13px;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .45);
  transition: border-color .2s, color .2s, box-shadow .2s;
}
.xmas-switch::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--xmas-gold);
  box-shadow: 0 0 10px rgba(255, 212, 121, .8);
}
.xmas-switch:hover { color: var(--xmas-cream); border-color: rgba(255, 212, 121, .55); box-shadow: 0 0 20px rgba(255, 212, 121, .18); }
.xmas-switch[aria-pressed="false"]::before { background: #4a5c50; box-shadow: none; }
.xmas-switch:focus-visible { outline: 3px solid var(--xmas-ice); outline-offset: 3px; }

/* ---------------------------------------------------------
   4. BANDEAUX DÉFILANTS
   --------------------------------------------------------- */
.band {
  background: rgba(7, 16, 11, .92);
  border-block: 2px solid;
  border-image: linear-gradient(90deg, var(--xmas-red), var(--xmas-gold), var(--xmas-pine)) 1;
}
.seq span { text-shadow: 0 0 16px currentColor; }
.seq span:nth-child(4n+1) { color: var(--xmas-pine); }
.seq span:nth-child(4n+2) { color: var(--xmas-cream); }
.seq span:nth-child(4n+3) { color: var(--xmas-gold); }
.seq span:nth-child(4n+4) { color: var(--xmas-red); }

/* ---------------------------------------------------------
   5. SECTIONS ET TITRES
   --------------------------------------------------------- */
.sec-kicker {
  background: transparent;
  color: var(--xmas-gold);
  border: 1px solid rgba(255, 212, 121, .5);
  box-shadow: 0 0 18px rgba(255, 212, 121, .22), inset 0 0 16px rgba(255, 212, 121, .07);
}
.sec-title { color: var(--xmas-cream); text-shadow: 0 0 40px rgba(255, 212, 121, .14); }
.sec-title mark {
  background: none !important;
  color: inherit;
  padding: 0 2px;
  position: relative;
  text-shadow: 0 0 26px rgba(255, 212, 121, .45);
}
.sec-title mark::after {
  background: linear-gradient(90deg, var(--xmas-gold), var(--xmas-red));
  box-shadow: 0 0 18px rgba(255, 212, 121, .75);
}
.sec-sub { color: var(--xmas-cream-soft); }
.gallery-note { color: var(--xmas-cream-mute); }
.gallery-note a { color: var(--xmas-ice); }

/* Brumes de bombe : trois couleurs de fête selon la section. */
.sec-head::before { filter: blur(8px); opacity: 1.5; }
.sec-head { --spray: rgba(255, 91, 87, .22); }
#formules .sec-head,
#entreprises .sec-head { --spray: rgba(255, 212, 121, .22); }
#calendrier .sec-head { --spray: rgba(93, 219, 143, .18); }

.tone { margin: 34px 0; }
.tone-green { --tone: #081711; }
.tone-yellow { --tone: #14100a; }
.tone-ink { --tone: #040a07; }
.tone::before, .tone::after { opacity: .5; }

/* ---------------------------------------------------------
   6. CARTES, PRESTATIONS, GALERIE
   --------------------------------------------------------- */
.svc, .step, .presscard, .aside-card, .bubble, .review,
.parti-cta, .hub-card, .faq-item, .cta-band, .p404-nav, .form {
  background: linear-gradient(180deg, rgba(20, 41, 30, .92), rgba(11, 24, 17, .92));
  border: 1px solid var(--xmas-line);
  color: var(--xmas-cream);
  box-shadow: 0 14px 40px rgba(0, 0, 0, .55);
}
/* Un liseré différent par carte, comme les guirlandes. */
.svc:nth-child(4n+1), .step:nth-child(4n+1) { box-shadow: 0 0 0 1px rgba(255, 212, 121, .24), 0 14px 40px rgba(0, 0, 0, .55); }
.svc:nth-child(4n+2), .step:nth-child(4n+2) { box-shadow: 0 0 0 1px rgba(255, 91, 87, .24), 0 14px 40px rgba(0, 0, 0, .55); }
.svc:nth-child(4n+3), .step:nth-child(4n+3) { box-shadow: 0 0 0 1px rgba(93, 219, 143, .22), 0 14px 40px rgba(0, 0, 0, .55); }
.svc:nth-child(4n+4), .step:nth-child(4n+4) { box-shadow: 0 0 0 1px rgba(169, 228, 255, .18), 0 14px 40px rgba(0, 0, 0, .55); }
.svc:hover, .step:hover, .hub-card:hover, .presscard:hover {
  border-color: rgba(255, 212, 121, .5);
  box-shadow: 0 0 34px rgba(255, 212, 121, .24), 0 18px 50px rgba(0, 0, 0, .6);
}
.svc h3, .svc h4, .step h3, .hub-card h2, .aside-h, .faq-item summary { color: var(--xmas-cream); }
.svc p, .step p, .hub-card p, .aside-card p, .review blockquote p { color: var(--xmas-cream-soft); }
.svc .ic, .hub-ic { filter: drop-shadow(0 0 12px rgba(255, 212, 121, .5)); }
.svc-more, .hub-more { color: var(--xmas-gold); }
.svc-link:hover::after { border-color: var(--xmas-gold); box-shadow: 0 0 24px rgba(255, 212, 121, .35); }

.burst::before, .burst::after { background: var(--xmas-surface-2); border-color: var(--xmas-gold); }
.burst b { color: var(--xmas-gold); }

.stick, .target {
  background: rgba(20, 41, 30, .9);
  border-color: var(--xmas-line);
  color: var(--xmas-cream-soft);
}
.stick:nth-child(even) { background: rgba(255, 91, 87, .13); border-color: rgba(255, 91, 87, .38); }
.target { box-shadow: 0 0 0 1px rgba(255, 212, 121, .16); }
.target:nth-child(even) { box-shadow: 0 0 0 1px rgba(255, 91, 87, .2); }
.target span { color: var(--xmas-gold); }

.proj { border: 1px solid var(--xmas-line); box-shadow: 0 16px 44px rgba(0, 0, 0, .6); }
.proj:hover {
  box-shadow: 0 0 34px rgba(255, 212, 121, .28), 0 20px 54px rgba(0, 0, 0, .65);
  border-color: rgba(255, 212, 121, .45);
}
.proj .meta { background: rgba(7, 16, 11, .94); border: 1px solid var(--xmas-line); box-shadow: 4px 4px 0 rgba(255, 212, 121, .45); }
.proj .cat { color: var(--xmas-ice); }
.proj .ttl { color: var(--xmas-cream); }
.bam { background: var(--xmas-gold); color: var(--xmas-ink); border-color: transparent; box-shadow: 0 0 18px rgba(255, 212, 121, .45); }
.proj:hover .bam { background: var(--xmas-red); color: #fff; }
.proj-open span { background: var(--xmas-red); color: #fff; border-color: transparent; box-shadow: 0 0 20px rgba(255, 91, 87, .55); }
.proj::after { background: var(--xmas-gold) !important; }
.proj-img::after {
  background: linear-gradient(105deg, transparent 40%, rgba(255, 212, 121, .28) 50%, transparent 60%);
}

.review::before { color: var(--xmas-red); text-shadow: var(--glow-red); }
.review figcaption b { color: var(--xmas-cream); }
.review figcaption span { color: var(--xmas-cream-mute); }

.bubble strong { background: none; color: var(--xmas-gold); }
.about-img { border: 2px solid rgba(255, 91, 87, .5); box-shadow: 0 0 40px rgba(255, 91, 87, .25); }
.about-img-wrap .bam { background: var(--xmas-gold); color: var(--xmas-ink); }

.presscard::before { background: rgba(255, 212, 121, .35); border-color: rgba(255, 212, 121, .5); }
.pc-outlet { color: var(--xmas-cream); }
.pc-year { background: transparent; color: var(--xmas-gold); border-color: rgba(255, 212, 121, .5); }
.pc-desc { color: var(--xmas-cream-soft); }
.pc-link { color: var(--xmas-ice); }
.tone-ink .sec-title, .tone-ink .sec-sub, .tone-ink .gallery-note { color: var(--xmas-cream); }

/* ---------------------------------------------------------
   7. BOUTONS
   --------------------------------------------------------- */
.btn {
  border: 2px solid var(--xmas-line);
  background: var(--xmas-surface);
  color: var(--xmas-cream);
  box-shadow: none;
}
.btn-primary {
  background: linear-gradient(120deg, rgba(255, 91, 87, .2), rgba(255, 212, 121, .16));
  border-color: var(--xmas-red);
  color: var(--xmas-cream);
  box-shadow: 0 0 20px rgba(255, 91, 87, .35), inset 0 0 22px rgba(255, 91, 87, .1);
}
.btn-primary:hover {
  border-color: var(--xmas-gold);
  box-shadow: 0 0 30px rgba(255, 212, 121, .5), inset 0 0 26px rgba(255, 212, 121, .15);
}
.btn-ghost {
  background: rgba(15, 31, 23, .7);
  border-color: rgba(255, 212, 121, .4);
  color: var(--xmas-cream-soft);
}
.btn-ghost:hover { color: var(--xmas-cream); border-color: var(--xmas-gold); box-shadow: 0 0 26px rgba(255, 212, 121, .35); }
.btn-primary::before {
  background: linear-gradient(105deg,
    rgba(255, 212, 121, 0) 35%,
    rgba(255, 212, 121, .45) 50%,
    rgba(255, 212, 121, 0) 65%) !important;
}
.tab {
  background: rgba(15, 31, 23, .9);
  border: 1px solid var(--xmas-line);
  color: var(--xmas-cream-soft);
}
.tab:hover { color: var(--xmas-cream); border-color: rgba(255, 212, 121, .5); box-shadow: 0 0 22px rgba(255, 212, 121, .2); }
.tab[aria-selected="true"] {
  background: rgba(255, 212, 121, .12);
  border-color: var(--xmas-gold);
  color: var(--xmas-cream);
  box-shadow: 0 0 24px rgba(255, 212, 121, .28), inset 0 0 20px rgba(255, 212, 121, .07);
}

/* Filet de sécurité pour les liens de contenu (night.css le fait
   déjà en cyan ; on garde la même règle, en or). */
.prose a, .aside-card a, .legal a, .review a, .faq-a a, main p a, main li a { color: var(--xmas-ice); }
.aside-card a:hover, .prose a:hover { color: var(--xmas-gold); }

.xmas-note {
  margin-top: 22px;
  font-size: .82rem;
  line-height: 1.55;
  color: var(--xmas-cream-mute);
  max-width: 78ch;
}
.xmas-note a { color: var(--xmas-ice); }

/* ---------------------------------------------------------
   9. CALENDRIER
   --------------------------------------------------------- */
.xmas-track {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  position: relative;
  margin-top: 10px;
}
.xmas-track::before {
  content: "";
  position: absolute;
  left: 2%;
  right: 2%;
  top: 23px;
  height: 2px;
  background: linear-gradient(90deg, var(--xmas-red), var(--xmas-gold) 55%, var(--xmas-pine));
  box-shadow: 0 0 16px rgba(255, 212, 121, .45);
  z-index: 0;
}
.xmas-step { position: relative; padding-top: 58px; }
.xmas-step::before {
  content: "";
  position: absolute;
  top: 15px;
  left: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--xmas-bg);
  border: 2px solid var(--xmas-gold);
  box-shadow: 0 0 18px rgba(255, 212, 121, .5);
  z-index: 1;
}
.xmas-date {
  display: block;
  font-family: 'Space Mono', monospace;
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.3px;
  color: var(--xmas-gold);
  margin-bottom: 6px;
}
.xmas-step h3 {
  font-family: 'Bangers', cursive;
  font-size: 1.32rem;
  font-weight: 400;
  letter-spacing: .6px;
  line-height: 1.1;
  color: var(--xmas-cream);
  margin-bottom: 7px;
}
.xmas-step p { font-size: .88rem; font-weight: 500; color: var(--xmas-cream-soft); }
.xmas-step.is-deadline::before { border-color: var(--xmas-red); background: var(--xmas-red); box-shadow: 0 0 22px rgba(255, 91, 87, .65); }
.xmas-step.is-deadline .xmas-date { color: var(--xmas-red); }
.xmas-step.is-deadline h3 { color: var(--xmas-gold); }

/* Encart compte à rebours du calendrier. */
.xmas-deadline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 26px;
  margin-top: 42px;
  padding: 24px 26px;
  background: linear-gradient(120deg, rgba(255, 91, 87, .1), rgba(255, 212, 121, .07));
  border: 1px solid rgba(255, 212, 121, .35);
  border-radius: 18px;
  box-shadow: 0 0 40px rgba(255, 91, 87, .12), 0 20px 60px rgba(0, 0, 0, .45);
}
.xmas-deadline-big {
  font-family: 'Bangers', cursive;
  font-size: 3.1rem;
  line-height: .9;
  color: var(--xmas-gold);
  text-shadow: 0 0 30px rgba(255, 212, 121, .4);
  flex: none;
}
.xmas-deadline-big span {
  display: block;
  font-family: 'Space Mono', monospace;
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--xmas-cream-mute);
  text-shadow: none;
  margin-top: 6px;
}
.xmas-deadline-txt { flex: 1 1 260px; }
.xmas-deadline-txt h3 {
  font-family: 'Bangers', cursive;
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: .6px;
  color: var(--xmas-cream);
  margin-bottom: 5px;
}
.xmas-deadline-txt p { font-size: .9rem; font-weight: 500; color: var(--xmas-cream-soft); }

/* ---------------------------------------------------------
   10. ÉTUDE DE CAS : vitrine du Tacos Avenue
   --------------------------------------------------------- */
.xmas-case { display: grid; grid-template-columns: 1.05fr .95fr; gap: 46px; align-items: center; }
.xmas-case-media { position: relative; }
.xmas-case-media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 18px;
  border: 2px solid rgba(255, 212, 121, .45);
  box-shadow: 0 0 50px rgba(240, 182, 76, .16), 0 24px 60px rgba(0, 0, 0, .62);
  transform: rotate(-.8deg);
  background: var(--xmas-surface);
}
.xmas-sticker {
  position: absolute;
  top: -14px;
  left: -10px;
  z-index: 2;   /* l'image est transformée : elle crée un contexte d'empilement */
  font-family: 'Bangers', cursive;
  font-size: 1.05rem;
  letter-spacing: 1px;
  color: var(--xmas-ink);
  background: var(--xmas-gold);
  border-radius: 9px;
  padding: 4px 12px;
  transform: rotate(-6deg);
  box-shadow: 0 0 26px rgba(255, 212, 121, .45);
}
.xmas-case p { font-size: .98rem; font-weight: 500; color: var(--xmas-cream-soft); margin-bottom: 14px; }
/* Titre secondaire (h3) : même famille et même poids qu'un titre de
   section, pour ne pas empiler deux h2 de même niveau. */
.xmas-h3 {
  font-family: 'Bangers', cursive;
  font-size: clamp(1.9rem, 4vw, 2.7rem);
  font-weight: 400;
  letter-spacing: .8px;
  line-height: 1.03;
  color: var(--xmas-cream);
  margin-bottom: 14px;
}
.xmas-h3 mark {
  background: none;
  color: var(--xmas-gold);
  text-shadow: 0 0 26px rgba(255, 212, 121, .4);
}
.xmas-facts {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 20px 0 0;
}
.xmas-facts li {
  flex: 1 1 120px;
  background: rgba(20, 41, 30, .75);
  border: 1px solid var(--xmas-line);
  border-radius: 12px;
  padding: 10px 14px;
}
.xmas-facts b {
  display: block;
  font-family: 'Bangers', cursive;
  font-size: 1.45rem;
  font-weight: 400;
  letter-spacing: .5px;
  line-height: 1.1;
  color: var(--xmas-gold);
}
.xmas-facts span {
  display: block;
  font-family: 'Space Mono', monospace;
  font-size: .6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.1px;
  color: var(--xmas-cream-mute);
  margin-top: 3px;
}
.xmas-quote {
  margin: 20px 0 0;
  padding: 4px 0 4px 20px;
  border-left: 3px solid var(--xmas-gold);
}
.xmas-quote p { font-style: italic; color: var(--xmas-cream); margin-bottom: 8px; }
.xmas-quote cite {
  font-style: normal;
  font-family: 'Space Mono', monospace;
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.1px;
  color: var(--xmas-cream-mute);
}

/* ---------------------------------------------------------
   11. BLOC ENTREPRISES + FORMULAIRE + PIED DE PAGE
   --------------------------------------------------------- */
.xmas-card {
  background: linear-gradient(180deg, rgba(20, 41, 30, .92), rgba(11, 24, 17, .92));
  border: 1px solid rgba(255, 212, 121, .3);
  border-radius: 18px;
  padding: 26px 24px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .5);
}
.xmas-card h3 {
  font-family: 'Bangers', cursive;
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: .7px;
  color: var(--xmas-cream);
  margin-bottom: 12px;
}
.xmas-card p { font-size: .92rem; font-weight: 500; color: var(--xmas-cream-soft); }
.xmas-card .check-list { margin-top: 4px; }
.xmas-card .check-list .i { color: var(--xmas-gold); }
.xmas-card .check-list li { color: var(--xmas-cream-soft); }

.xmas-split { display: grid; grid-template-columns: 1.05fr .95fr; gap: 44px; align-items: start; }
.xmas-split p { font-size: .98rem; font-weight: 500; color: var(--xmas-cream-soft); margin-bottom: 14px; }

/* Tableau comparatif (autocollants / guirlandes / peinture).
   Il déborde volontairement sur mobile : le conteneur défile. La
   légende est posée hors du conteneur, sinon elle défilait avec le
   tableau et se retrouvait coupée. */
.xmas-table-cap {
  margin: 26px 0 10px;
  font-family: 'Space Mono', monospace;
  font-size: .66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.4px;
  color: var(--xmas-cream-mute);
}
.xmas-scroll-hint {
  display: none;
  margin: 0 0 8px;
  font-family: 'Space Mono', monospace;
  font-size: .66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--xmas-gold);
}
.xmas-table-wrap {
  margin-top: 0;
  overflow-x: auto;
  border: 1px solid var(--xmas-line);
  border-radius: 16px;
  background: rgba(10, 22, 16, .62);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .45);
  -webkit-overflow-scrolling: touch;
}
.xmas-table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: .86rem; }
.xmas-table th, .xmas-table td { padding: 12px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid rgba(42, 74, 58, .55); }
.xmas-table thead th {
  font-family: 'Bangers', cursive;
  font-size: 1.05rem;
  font-weight: 400;
  letter-spacing: .6px;
  color: var(--xmas-cream);
  background: rgba(255, 212, 121, .08);
}
.xmas-table thead th:last-child, .xmas-table tbody td:last-child { background: rgba(255, 212, 121, .07); color: var(--xmas-cream); }
.xmas-table tbody th { font-size: .82rem; font-weight: 600; color: var(--xmas-cream-soft); }
.xmas-table tbody td { color: var(--xmas-cream-soft); }
.xmas-table tr:last-child th, .xmas-table tr:last-child td { border-bottom: 0; }
.xmas-table .yes { color: var(--xmas-pine); font-weight: 700; }
.xmas-table .no { color: var(--xmas-cream-mute); }

.faq-item[open] { border-color: rgba(255, 212, 121, .45); box-shadow: 0 0 28px rgba(255, 212, 121, .18); }
.faq-item summary::after { background: transparent; color: var(--xmas-gold); border-color: rgba(255, 212, 121, .6); }
.faq-a p { color: var(--xmas-cream-soft); }

.contact-line .ic { background: rgba(20, 41, 30, .9); border-color: var(--xmas-line); color: var(--xmas-gold); }
.contact-line a { color: var(--xmas-cream); }
.contact-line a:hover { color: var(--xmas-gold); }
.contact-reassure li::before { background: transparent; color: var(--xmas-pine); border-color: rgba(93, 219, 143, .6); }
.field label { color: var(--xmas-cream-mute); }
.field input, .field textarea, .field select {
  background: rgba(7, 16, 11, .8);
  color: var(--xmas-cream);
  border: 1px solid var(--xmas-line);
}
.field input::placeholder, .field textarea::placeholder { color: #837868; }
.field input:focus, .field textarea:focus, .field select:focus {
  border-color: var(--xmas-gold);
  box-shadow: 0 0 0 1px var(--xmas-gold), 0 0 24px rgba(255, 212, 121, .28);
}
.form-legal { color: var(--xmas-cream-mute); }
.form-legal a { color: var(--xmas-gold); }
.form-msg { color: var(--xmas-ink); border-color: transparent; }
.form-msg.ok { background: var(--xmas-pine); }
.form-msg.err { background: var(--xmas-gold); }
.form .btn {
  background: linear-gradient(120deg, var(--xmas-gold), var(--xmas-gold-2));
  color: var(--xmas-ink);
  border-color: var(--xmas-gold);
  box-shadow: 0 0 26px rgba(255, 212, 121, .32);
}
.form .btn:hover { box-shadow: 0 0 38px rgba(255, 212, 121, .55); }

.cta-band {
  background: linear-gradient(120deg, rgba(255, 91, 87, .12), rgba(255, 212, 121, .09));
  border: 1px solid rgba(255, 212, 121, .38);
  color: var(--xmas-cream);
  box-shadow: 0 0 40px rgba(255, 212, 121, .14), 0 20px 60px rgba(0, 0, 0, .55);
}
.cta-band h2 { color: var(--xmas-cream); }
.cta-band p { color: var(--xmas-cream-soft); }
.cta-kicker { color: var(--xmas-gold); }
.cta-actions .btn { box-shadow: 0 0 20px rgba(255, 91, 87, .3); }
.cta-actions .btn-ghost { box-shadow: 0 0 20px rgba(255, 212, 121, .26); }

/* Coulures de peinture au-dessus du pied de page : le SVG de site.css
   est rempli avec l'ancien noir ; on le recharge avec le noir du pied
   de page pour que les gouttes prolongent le footer, pas l'inverse. */
.drip {
  opacity: .9;
  filter: drop-shadow(0 0 12px rgba(255, 212, 121, .3));
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 30' preserveAspectRatio='none'><path fill='%23040a07' d='M0,0 H120 V8 C114,8 114,21 109,21 C104,21 105,8 99,8 C93,8 94,27 88,27 C82,27 83,8 77,8 C71,8 72,17 66,17 C60,17 61,8 55,8 C49,8 50,23 44,23 C38,23 39,8 33,8 C27,8 28,19 22,19 C16,19 17,8 11,8 C5,8 6,14 0,14 Z'/></svg>");
}
footer { background: #040a07; border-top: 1px solid var(--xmas-line); color: var(--xmas-cream-soft); }
.foot-brand .fb { color: var(--xmas-cream); }
.foot-brand .fb b { color: var(--xmas-red); text-shadow: var(--glow-red); }
.foot-brand p { color: var(--xmas-cream-mute); }
.foot-h { color: var(--xmas-gold); }
.foot-col a { color: var(--xmas-cream-soft); }
.foot-col a:hover { color: var(--xmas-gold); text-shadow: 0 0 12px rgba(255, 212, 121, .5); }
.foot-contact a { color: var(--xmas-ice); }
.foot-bottom { color: var(--xmas-cream-mute); border-top-color: var(--xmas-line); }
.foot-bottom a { color: var(--xmas-gold); }
@media (max-width: 960px) {
  .nav-links a { display: block; padding: 6px 0; position: relative; }
}
@media (max-width: 700px) {
  .xmas-scroll-hint { display: block; }
  .foot-col a { display: block; padding: 5px 0; }
  .foot-bottom a, .foot-contact a { display: inline-block; padding: 4px 0; }
  .gallery-note a, .bubble-more a, .form-legal a, .prose p a, .legal p a { display: inline-block; padding: 4px 0; }
}

/* ---------------------------------------------------------
   12. PAGES INTÉRIEURES, VISIONNEUSE
   --------------------------------------------------------- */
.breadcrumb a { color: var(--xmas-gold); }
.breadcrumb li[aria-current] { color: var(--xmas-cream-mute); }
.prose h2 { color: var(--xmas-cream); }
.prose p { color: var(--xmas-cream-soft); }
.prose a { color: var(--xmas-ice); }
.page-hero h1 { color: var(--xmas-cream); text-shadow: 0 0 34px rgba(255, 212, 121, .18); }
.page-hero-media img { border: 2px solid rgba(255, 212, 121, .45); box-shadow: 0 0 40px rgba(255, 212, 121, .22); }
/* Pages intérieures de l'édition : la photo est un peu plus large
   (elle fait face à un titre de trois lignes) et reçoit la même
   guirlande que la vitrine de l'accueil. La répartition ne
   s'applique qu'au-delà du point de rupture : en dessous, la
   grille doit redevenir une seule colonne (theme.css). */
.xmas-hero .page-hero-media { position: relative; }
@media (min-width: 881px) {
  .xmas-hero .page-hero-grid { grid-template-columns: 1.1fr .9fr; }
}
.xmas-hero .page-hero-media::before {
  content: "";
  position: absolute;
  left: 4%;
  right: 4%;
  top: -18px;
  height: 20px;
  z-index: 2;
  pointer-events: none;
  background-repeat: repeat-x;
  background-image:
    radial-gradient(circle at 6px 7px, #fff3c9 0 2.6px, rgba(255, 214, 128, .55) 3.6px, transparent 5.6px),
    radial-gradient(circle at 24px 7px, #ff6b67 0 2.6px, rgba(255, 107, 103, .5) 3.6px, transparent 5.6px),
    radial-gradient(circle at 42px 7px, #7ef0ac 0 2.6px, rgba(126, 240, 172, .5) 3.6px, transparent 5.6px),
    linear-gradient(180deg, rgba(74, 108, 88, .9) 0 1.5px, transparent 1.5px);
  background-size: 60px 20px, 60px 20px, 60px 20px, 100% 20px;
  filter: drop-shadow(0 0 8px rgba(255, 201, 120, .55));
}
.check-list .i { color: var(--xmas-pine); }
.plain-list li + li { border-top-color: var(--xmas-line); }
.chip-list li { background: rgba(20, 41, 30, .9); border-color: var(--xmas-line); color: var(--xmas-cream-soft); }
.aside-accent { background: linear-gradient(180deg, rgba(255, 212, 121, .12), rgba(255, 91, 87, .07)); border-color: rgba(255, 212, 121, .35); }
.legal h2 { color: var(--xmas-cream); }
.legal p { color: var(--xmas-cream-soft); }
.legal a { color: var(--xmas-ice); }
.legal .updated { color: var(--xmas-cream-mute); }
.legal-header h1 { color: var(--xmas-cream); }
.page404 h1 { color: var(--xmas-red); -webkit-text-stroke: 0; text-shadow: var(--glow-red), 0 0 90px rgba(255, 91, 87, .4); }
.page404 p { color: var(--xmas-cream-soft); }
.p404-h { color: var(--xmas-cream-mute); }
.p404-nav a { color: var(--xmas-ice); }

.lightbox::backdrop { background: rgba(4, 10, 7, .93); }
.lb-img { border: 2px solid rgba(255, 212, 121, .5); box-shadow: 0 0 60px rgba(255, 212, 121, .25); background: var(--xmas-bg); }
.lb-cap { background: rgba(7, 16, 11, .92); color: var(--xmas-gold); border-color: var(--xmas-line); box-shadow: 0 0 20px rgba(255, 212, 121, .25); }
.lb-btn { background: transparent; color: var(--xmas-gold); border: 2px solid var(--xmas-gold); box-shadow: 0 0 18px rgba(255, 212, 121, .35); }
.lb-btn:hover { background: var(--xmas-gold); color: var(--xmas-ink); }

.fab-devis {
  background: rgba(7, 16, 11, .92);
  color: var(--xmas-gold);
  border: 2px solid var(--xmas-gold);
  box-shadow: 0 0 22px rgba(255, 212, 121, .4);
}

/* ---------------------------------------------------------
   13. EFFETS (night-fx.css) RECOLORÉS
   --------------------------------------------------------- */
.has-cursor .cursor-dot { background: var(--xmas-gold); box-shadow: 0 0 12px rgba(255, 212, 121, .9), 0 0 30px rgba(255, 212, 121, .45); }
.has-cursor .cursor-ring {
  border-color: rgba(255, 212, 121, .75);
  background: radial-gradient(circle, rgba(255, 212, 121, .1), transparent 68%);
}
.has-cursor .cursor-ring.big {
  border-color: rgba(255, 91, 87, .85);
  background: radial-gradient(circle, rgba(255, 91, 87, .14), transparent 70%);
}
.has-cursor .cursor-ring[data-kind="link"] { border-color: rgba(93, 219, 143, .9); }
.has-cursor .cursor-ring.press { background: rgba(255, 91, 87, .22); }

#wipe {
  background: repeating-linear-gradient(115deg,
    rgba(255, 91, 87, .95) 0 22px,
    rgba(255, 212, 121, .95) 22px 44px,
    rgba(93, 219, 143, .95) 44px 66px);
}

.tilt .tilt-glare {
  background: radial-gradient(260px circle at var(--gx, 50%) var(--gy, 50%),
              rgba(255, 212, 121, .16), rgba(255, 91, 87, .07) 45%, transparent 70%);
}
.tilt::after {
  background: radial-gradient(180px circle at var(--gx, 50%) var(--gy, 50%),
              rgba(255, 212, 121, .7), transparent 62%);
}

.btn .ripple, .lb-btn .ripple, .proj-open .ripple,
.nav-cta .ripple, .xmas-switch .ripple {
  background: radial-gradient(circle, rgba(255, 212, 121, .8), rgba(255, 212, 121, 0) 70%);
}
/* L'onde du clic déborde du bouton : le conteneur la rogne.
   (.xmas-switch est déjà en position absolue dans le cadre, il n'a
   pas besoin de cette règle — l'ajouter ici écrasait son ancrage.) */
.nav-cta { position: relative; overflow: hidden; }
.xmas-switch { overflow: hidden; }

/* night.js éclate des taches de bombe aux couleurs néon à chaque
   clic : on les éteint ici, noel.js pose à la place des étincelles
   dorées (voir .xmas-spark). */
.paint-blob { display: none; }
.xmas-spark {
  position: fixed;
  z-index: 3900;
  pointer-events: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--xmas-gold);
  box-shadow: 0 0 14px currentColor, 0 0 30px currentColor;
  will-change: transform, opacity;
  animation: xmasSparkOut .75s cubic-bezier(.2, .8, .2, 1) forwards;
}
@keyframes xmasSparkOut {
  0%   { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  100% { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(.2); opacity: 0; }
}

.spotlight {
  background: radial-gradient(460px circle at var(--sx, 50%) var(--sy, 50%),
              rgba(255, 212, 121, .12), rgba(255, 91, 87, .08) 42%, transparent 70%);
}

.steps-line {
  background: linear-gradient(90deg, var(--xmas-red), var(--xmas-gold) 50%, var(--xmas-pine));
  box-shadow: 0 0 16px rgba(255, 212, 121, .6);
}

/* ---------------------------------------------------------
   14. DÉCOR D'ÉTOILES DANS LE HERO (très discret)
   --------------------------------------------------------- */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    radial-gradient(1.6px 1.6px at 18% 22%, rgba(255, 243, 201, .9), transparent),
    radial-gradient(1.2px 1.2px at 72% 14%, rgba(255, 243, 201, .75), transparent),
    radial-gradient(1.4px 1.4px at 86% 62%, rgba(255, 212, 121, .8), transparent),
    radial-gradient(1.2px 1.2px at 42% 78%, rgba(255, 243, 201, .6), transparent),
    radial-gradient(1.5px 1.5px at 8% 54%, rgba(255, 212, 121, .7), transparent);
  animation: xmasStars 6s ease-in-out infinite alternate;
}
@keyframes xmasStars {
  from { opacity: .55; }
  to   { opacity: 1; }
}

/* ---------------------------------------------------------
   15. RESPONSIVE
   --------------------------------------------------------- */
@media (max-width: 1000px) {
  .xmas-case, .xmas-split { grid-template-columns: 1fr; gap: 34px; }
  .xmas-case-media { order: -1; }
}
@media (max-width: 880px) {
  .hero { padding: 132px 0 54px; }
  .xmas-track { grid-template-columns: repeat(2, 1fr); gap: 18px 26px; }
  .xmas-track::before { display: none; }
}
@media (max-width: 660px) {
  .xmas-track { grid-template-columns: 1fr; }
  .xmas-step { padding-top: 12px; padding-left: 32px; }
  .xmas-step::before { top: 14px; }
  .xmas-deadline { padding: 20px; }
  .xmas-deadline-big { font-size: 2.5rem; }
  .xmas-count { font-size: .64rem; padding: 7px 12px; }
  .xmas-visual::before { top: -16px; }
  .xmas-switch { font-size: .62rem; }
}

/* ---------------------------------------------------------
   16. MOUVEMENT RÉDUIT
   --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  nav.topnav::after, .nav-cta, .hero::after { animation: none; }
  .xmas-spark { display: none; }
  .xmas-visual.is-off .hero-frame { filter: none; }
}