/* ===============================================================
   TONTONBA — Thème « Nuit de Noël »
   Feuille ajoutée par-dessus styles.css pour la saison de Noël.
   En janvier : remettre le site classique (sans ce fichier).
   =============================================================== */

:root {
  --noel-red: #D7263D;
  --noel-red-2: #B3122E;
  --noel-red-3: #6E0F20;
  --noel-green: #1F7A4D;
  --noel-green-2: #0F4D30;
  --noel-green-3: #3DDC84;
  --snow: #F8FBFF;
  /* les accents rose / turquoise du thème de base deviennent rouge / vert */
  --pink: #FF5A6A;
  --cyan: #3DDC84;
}

/* Correctifs de mise en page : lien d'évitement hors du flux, barre de navigation collante */
body > .skip-link { position: absolute; }
body > .nav { position: sticky; top: 0; z-index: 50; }

/* ---------------------------------------------------------------
   Ciel : nébuleuses chaudes + neige qui tombe
   --------------------------------------------------------------- */
.nebula-a { background: radial-gradient(circle, #4A2F8A 0%, transparent 70%); }
.nebula-b { background: radial-gradient(circle, #D7263D 0%, transparent 70%); opacity: .16; }
.nebula-c {
  width: 520px; height: 520px;
  background: radial-gradient(circle, #1F7A4D 0%, transparent 70%);
  top: 48%; left: 55%;
  opacity: .14;
}

.snow {
  position: absolute;
  left: 0; right: 0;
  background-repeat: repeat;
  pointer-events: none;
  will-change: transform;
}
.snow-1 {
  top: -300px; height: calc(100% + 300px);
  background-image:
    radial-gradient(2px 2px at 8% 12%, rgba(255,255,255,.85), transparent 70%),
    radial-gradient(1.6px 1.6px at 28% 44%, rgba(255,255,255,.75), transparent 70%),
    radial-gradient(2.2px 2.2px at 47% 8%, rgba(255,255,255,.9), transparent 70%),
    radial-gradient(1.4px 1.4px at 63% 63%, rgba(255,255,255,.7), transparent 70%),
    radial-gradient(2px 2px at 82% 27%, rgba(255,255,255,.85), transparent 70%),
    radial-gradient(1.6px 1.6px at 93% 81%, rgba(255,255,255,.75), transparent 70%),
    radial-gradient(1.8px 1.8px at 17% 86%, rgba(255,255,255,.8), transparent 70%),
    radial-gradient(1.4px 1.4px at 72% 96%, rgba(255,255,255,.7), transparent 70%);
  background-size: 300px 300px;
  animation: snow1 18s linear infinite, sway 7s ease-in-out infinite alternate;
}
.snow-2 {
  top: -460px; height: calc(100% + 460px);
  background-image:
    radial-gradient(3px 3px at 12% 30%, rgba(255,255,255,.8), transparent 70%),
    radial-gradient(2.6px 2.6px at 38% 72%, rgba(255,255,255,.7), transparent 70%),
    radial-gradient(3.2px 3.2px at 58% 18%, rgba(255,255,255,.85), transparent 70%),
    radial-gradient(2.4px 2.4px at 77% 54%, rgba(255,255,255,.7), transparent 70%),
    radial-gradient(3px 3px at 91% 6%, rgba(255,255,255,.8), transparent 70%);
  background-size: 460px 460px;
  opacity: .8;
  animation: snow2 26s linear infinite, sway 9s ease-in-out infinite alternate-reverse;
}
.snow-3 {
  top: -720px; height: calc(100% + 720px);
  background-image:
    radial-gradient(4.5px 4.5px at 22% 40%, rgba(255,255,255,.55), transparent 70%),
    radial-gradient(5px 5px at 68% 12%, rgba(255,255,255,.5), transparent 70%),
    radial-gradient(4px 4px at 86% 78%, rgba(255,255,255,.45), transparent 70%);
  background-size: 720px 720px;
  filter: blur(1px);
  animation: snow3 34s linear infinite, sway 11s ease-in-out infinite alternate;
}
@keyframes snow1 { from { translate: 0 0; } to { translate: 0 300px; } }
@keyframes snow2 { from { translate: 0 0; } to { translate: 0 460px; } }
@keyframes snow3 { from { translate: 0 0; } to { translate: 0 720px; } }
@keyframes sway  { from { transform: translateX(-14px); } to { transform: translateX(14px); } }

/* ---------------------------------------------------------------
   Bandeau de Noël (date limite + compte à rebours)
   --------------------------------------------------------------- */
.xmas-bar {
  position: relative;
  z-index: 60;
  margin: 0;
  padding: 9px 16px;
  text-align: center;
  font-size: .87rem;
  line-height: 1.45;
  color: #FFF8E7;
  background:
    repeating-linear-gradient(-45deg, rgba(255,255,255,.045) 0 10px, transparent 10px 20px),
    linear-gradient(90deg, #6E0F20 0%, #A3172F 22%, #C81E36 50%, #A3172F 78%, #6E0F20 100%);
  border-bottom: 1px solid rgba(255, 209, 102, .6);
}
.xmas-bar strong { color: #FFE38C; }
.xmas-bar a {
  color: #FFE38C;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
  margin-left: 4px;
}
.xmas-count {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 10px;
  border-radius: 100px;
  background: rgba(10, 8, 32, .35);
  border: 1px solid rgba(255, 227, 140, .45);
  color: #FFFFFF;
  font-weight: 700;
  white-space: nowrap;
}
.xmas-count:empty { display: none; }
@media (max-width: 640px) {
  .xmas-bar { font-size: .8rem; padding: 8px 12px; }
  .xb-long { display: none; }
}

/* ---------------------------------------------------------------
   Navigation + guirlande lumineuse
   --------------------------------------------------------------- */
.nav { border-bottom: none; }
.guirlande {
  position: absolute;
  left: 0; right: 0;
  bottom: -17px;
  height: 26px;
  pointer-events: none;
  background: url("/assets/noel-guirlande.svg") repeat-x 0 0 / 240px 26px;
}
.guirlande span {
  position: absolute;
  inset: 0;
  background-repeat: repeat-x;
  background-size: 240px 26px;
  animation: blink 1.8s ease-in-out infinite alternate;
}
.guirlande .g2 { animation-delay: .9s; }
@keyframes blink { from { opacity: .25; } to { opacity: 1; } }
.guirlande .g1 {
  background-image:
    radial-gradient(circle at 30px 13px, rgba(255,77,94,.95) 0 3px, rgba(255,77,94,.45) 6px, rgba(255,77,94,0) 14px),
    radial-gradient(circle at 150px 23px, rgba(61,220,132,.95) 0 3px, rgba(61,220,132,.45) 6px, rgba(61,220,132,0) 14px);
}
.guirlande .g2 {
  background-image:
    radial-gradient(circle at 90px 23px, rgba(255,209,102,.95) 0 3px, rgba(255,209,102,.45) 6px, rgba(255,209,102,0) 14px),
    radial-gradient(circle at 210px 13px, rgba(183,149,240,.95) 0 3px, rgba(183,149,240,.45) 6px, rgba(183,149,240,0) 14px);
}

/* ---------------------------------------------------------------
   Boutons : rouge de Noël, liseré doré
   --------------------------------------------------------------- */
.btn-gold {
  background: linear-gradient(135deg, #E23A4F 0%, #C81E36 55%, #A3172F 100%);
  color: #FFFFFF;
  box-shadow:
    0 8px 24px rgba(215, 38, 61, .38),
    0 0 0 1.5px rgba(255, 209, 102, .75) inset;
  text-shadow: 0 1px 0 rgba(110, 15, 32, .45);
}
.btn-gold:hover {
  box-shadow:
    0 14px 32px rgba(215, 38, 61, .55),
    0 0 0 1.5px #FFD166 inset;
}
.btn-gold.btn-raised {
  box-shadow:
    0 16px 36px rgba(215, 38, 61, .55),
    0 0 0 1.5px #FFD166 inset,
    0 0 60px rgba(255, 209, 102, .22);
}
.btn-ghost { border-color: rgba(255, 209, 102, .45); }

/* ---------------------------------------------------------------
   Hero : cadeau, pastille « Spécial Noël », paysage enneigé
   --------------------------------------------------------------- */
.hero { padding-bottom: 170px; }
.hero-paysage {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 170px;
  background: url("/assets/noel-paysage.svg") center bottom / cover no-repeat;
  pointer-events: none;
}
.hero-logo { animation: none; }
.hero-visual { animation: float 6s ease-in-out infinite; }
.hero-halo { background: radial-gradient(circle, rgba(255, 209, 102, .34) 0%, rgba(215, 38, 61, .16) 45%, transparent 68%); }
.hero-bow {
  position: absolute;
  top: -5%;
  left: 50%;
  width: 26%;
  height: auto;
  transform: translateX(-50%) rotate(-4deg);
  z-index: 2;
  filter: drop-shadow(0 8px 14px rgba(5, 4, 22, .55));
}
.sticker-noel {
  position: absolute;
  right: -22px;
  bottom: -2%;
  z-index: 2;
  width: 118px;
  height: 118px;
  border-radius: 50%;
  display: grid;
  place-content: center;
  text-align: center;
  line-height: 1.05;
  color: #FFF8E7;
  font-family: var(--display);
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .02em;
  background: radial-gradient(circle at 35% 30%, #E8455A 0%, #C81E36 55%, #8E0F23 100%);
  box-shadow: 0 0 0 4px #0A0820, 0 0 0 6px #FFD166, 0 14px 30px rgba(5, 4, 22, .6);
  transform: rotate(-10deg);
}
.sticker-noel b {
  display: block;
  font-family: var(--script);
  font-size: 2rem;
  font-weight: 700;
  color: #FFE38C;
  line-height: .9;
}
.sticker-noel small { display: block; font-size: .66rem; font-weight: 600; opacity: .9; margin-top: 3px; }
.hero-trust .dot { background: var(--noel-red); box-shadow: 0 0 8px var(--noel-red); }
.hero-trust li:nth-child(2) .dot { background: var(--noel-green-3); box-shadow: 0 0 8px var(--noel-green-3); }
.hero-trust li:nth-child(3) .dot { background: var(--gold); box-shadow: 0 0 8px var(--gold); }
.hero-trust li:first-child { color: #FFE38C; font-weight: 600; }
@media (max-width: 880px) {
  .hero { padding-bottom: 120px; }
  .hero-paysage { height: 120px; }
  .sticker-noel { width: 92px; height: 92px; font-size: .7rem; right: -14px; bottom: -6%; }
  .hero-paysage { background-position: 0 100%; }
  .sticker-noel b { font-size: 1.6rem; }
}

/* ---------------------------------------------------------------
   Calendrier de Noël (date limite)
   --------------------------------------------------------------- */
.calendrier { padding: 30px 0 70px; position: relative; }
.calendrier .narrow { margin-bottom: 40px; }
.cal-steps {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  max-width: 980px;
  position: relative;
}
.cal-steps::before {
  content: "";
  position: absolute;
  top: 58px; left: 16%; right: 16%;
  border-top: 2px dashed rgba(255, 209, 102, .45);
}
.cal-step {
  position: relative;
  text-align: center;
  padding: 0 14px;
}
.cal-date {
  position: relative;
  display: inline-grid;
  width: 104px;
  margin-bottom: 16px;
  border-radius: 14px;
  overflow: hidden;
  background: #FDF6EC;
  color: #2D3142;
  box-shadow: 0 14px 30px rgba(5, 4, 22, .55), 0 0 0 1px rgba(255, 209, 102, .4);
}
.cal-date i {
  font-style: normal;
  display: block;
  padding: 6px 0 5px;
  background: linear-gradient(180deg, #D7263D, #A3172F);
  color: #FFF8E7;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.cal-step:nth-child(2) .cal-date i { background: linear-gradient(180deg, #1F7A4D, #0F4D30); }
.cal-step:nth-child(3) .cal-date i { background: linear-gradient(180deg, #F5B800, #C99840); color: #2D1B05; }
.cal-date b {
  display: block;
  padding: 8px 0 10px;
  font-family: var(--display);
  font-size: 2.5rem;
  font-weight: 800;
  line-height: 1;
}
.cal-step h3 {
  font-family: var(--display);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--white);
  margin: 0 0 6px;
}
.cal-step p { margin: 0 auto; color: var(--text-soft); font-size: .93rem; max-width: 28ch; }
.cal-count { margin: 34px 0 0; }
.cal-count .xmas-count {
  font-size: 1rem;
  padding: 8px 18px;
  background: linear-gradient(135deg, rgba(215, 38, 61, .25), rgba(31, 122, 77, .2));
  border-color: rgba(255, 209, 102, .5);
  color: #FFE38C;
}
.calendrier .callout { margin: 28px auto 0; max-width: 760px; }
@media (max-width: 760px) {
  .cal-steps { grid-template-columns: 1fr; gap: 28px; max-width: 420px; }
  .cal-steps::before { top: 40px; bottom: 40px; left: 50%; right: auto; border-top: none; border-left: 2px dashed rgba(255, 209, 102, .35); }
  .cal-step { z-index: 1; background: #100D2B; border-radius: 18px; padding: 22px 16px; border: 1px solid var(--border); }
}

/* ---------------------------------------------------------------
   Cartes : liserés rouge / vert / or, nœuds sur les tarifs
   --------------------------------------------------------------- */
.occasion-card { border-top: 3px solid var(--noel-red); }
.occasion-grid > :nth-child(3n+2) { border-top-color: var(--noel-green-3); }
.occasion-grid > :nth-child(3n+3) { border-top-color: var(--gold); }
.occasion-card:hover { box-shadow: 0 24px 50px rgba(215, 38, 61, .16); }

.promise-card.featured { border-color: rgba(255, 90, 106, .45); }
.step { border-top: 3px solid rgba(255, 209, 102, .55); }
.steps-grid > :nth-child(odd) { border-top-color: rgba(255, 90, 106, .7); }
.steps-grid > :nth-child(even) { border-top-color: rgba(61, 220, 132, .6); }

.price-card::before {
  height: 8px;
  opacity: 1;
  background: linear-gradient(180deg, #E23A4F, #A3172F);
  box-shadow: 0 1px 0 rgba(255, 209, 102, .6);
}
.price-card::after {
  content: "";
  position: absolute;
  top: -2px;
  left: 16px;
  width: 64px;
  height: 48px;
  background: url("/assets/noel-noeud.svg") center / contain no-repeat;
  filter: drop-shadow(0 4px 8px rgba(5, 4, 22, .5));
}
.price-card.featured {
  border-color: rgba(255, 209, 102, .55);
  background: linear-gradient(180deg, rgba(215, 38, 61, .18) 0%, rgba(74, 47, 138, .4) 100%);
  box-shadow: 0 30px 60px rgba(215, 38, 61, .18), 0 0 0 1px rgba(255, 209, 102, .3);
}
.launch-note {
  border-color: rgba(255, 90, 106, .55);
  background: linear-gradient(135deg, rgba(215, 38, 61, .22), rgba(31, 122, 77, .12));
  color: #FFE38C;
}

.callout {
  border-color: rgba(255, 90, 106, .45);
  border-left: 4px solid var(--noel-red);
  background: linear-gradient(135deg, rgba(215, 38, 61, .12), rgba(31, 122, 77, .08));
}
.tag { background: rgba(31, 122, 77, .22); }

/* ---------------------------------------------------------------
   Pages de contenu : tableau, encadrés de Noël
   --------------------------------------------------------------- */
.page-hero .eyebrow { color: #FFE38C; }
.breadcrumb { padding-top: 36px; }
.page-hero { padding-bottom: 8px; }
.page-paysage {
  height: 120px;
  margin: 0 0 10px;
  background: url("/assets/noel-paysage.svg") center bottom / cover no-repeat;
  pointer-events: none;
}
@media (max-width: 880px) {
  .page-paysage { height: 90px; background-position: 0 100%; }
}
.data-table .us { background: linear-gradient(180deg, rgba(215, 38, 61, .14), rgba(215, 38, 61, .04)); }
.noel-box {
  margin: 30px 0;
  padding: 22px 26px;
  border-radius: var(--radius);
  border: 1px solid rgba(255, 209, 102, .4);
  background:
    radial-gradient(circle at 100% 0%, rgba(215, 38, 61, .22), transparent 55%),
    radial-gradient(circle at 0% 100%, rgba(31, 122, 77, .2), transparent 55%),
    rgba(10, 8, 32, .55);
}
.noel-box p { margin: 0 0 .6em; color: var(--text); }
.noel-box p:last-child { margin-bottom: 0; }
.noel-box .btn-gold { margin-top: 8px; }

/* ---------------------------------------------------------------
   Pied de page : forêt enneigée, bandeau d'appel aux couleurs de Noël
   --------------------------------------------------------------- */
.footer { margin-top: 80px; }
.footer::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: -70px;
  height: 72px;
  background: url("/assets/noel-foret.svg") repeat-x 0 100% / 480px 72px;
  opacity: .85;
  pointer-events: none;
}
.footer-cta {
  position: relative;
  border-color: rgba(255, 209, 102, .45);
  background:
    radial-gradient(circle at 100% 0%, rgba(215, 38, 61, .3), transparent 55%),
    radial-gradient(circle at 0% 100%, rgba(31, 122, 77, .28), transparent 55%),
    rgba(20, 16, 46, .85);
}
.footer-cta::before {
  content: "";
  position: absolute;
  top: -22px;
  left: 30px;
  width: 76px;
  height: 56px;
  background: url("/assets/noel-noeud.svg") center / contain no-repeat;
  filter: drop-shadow(0 6px 10px rgba(5, 4, 22, .55));
}
@media (min-width: 1041px) {
  .footer-grid { grid-template-columns: 1.25fr 1.2fr 1.1fr 1.25fr 1fr; gap: 28px; }
}
.footer-pills li:first-child { border-color: rgba(255, 90, 106, .5); color: #FFB3BB; }
.footer-pills li:nth-child(2) { border-color: rgba(255, 209, 102, .4); color: #FFE38C; }