/* Kolyora Lithophanie : edition de Noel. Scene photo en haut, neige, sections claires et sombres. */
:root {
  --neige: #f6f3ee;
  --neige-2: #e9e3da;
  --encre: #22180f;
  --gris: #6c5f53;
  --nuit: #140d08;
  --nuit-2: #1f1510;
  --cire: #fbf3e6;
  --flamme: #f1a24a;
  --flamme-2: #f7bf6d;
  --rouge: #a3161f;
  --rouge-2: #c8232c;
  --titre: "Young Serif", Georgia, serif;
  --texte: "Literata", Georgia, serif;
  --large: 74rem;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: var(--texte); font-size: 1.05rem; line-height: 1.62; color: var(--encre); background: var(--neige); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3 { font-family: var(--titre); font-weight: 400; line-height: 1.1; margin: 0; }
h2 { font-size: clamp(2rem, 3.8vw, 3rem); margin-bottom: 1.75rem; }
h3 { font-size: 1.4rem; }
a { color: inherit; text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--flamme); outline-offset: 3px; border-radius: 3px; }

/* ---------- boutons ---------- */
.bouton {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .9rem 1.6rem; border-radius: 999px;
  font-family: var(--texte); font-weight: 600; font-size: 1.05rem; text-decoration: none;
  transition: transform .2s, box-shadow .2s, background-color .2s;
}
.bouton img { width: 1.35rem; height: 1.35rem; }
.bouton--ambre { background: linear-gradient(180deg, var(--flamme-2), var(--flamme)); color: var(--encre); box-shadow: 0 6px 20px -6px rgba(241,162,74,.7); }
.bouton--ambre img { filter: brightness(0) saturate(100%) invert(9%) sepia(25%) saturate(1500%) hue-rotate(350deg); }
.bouton--rouge { background: var(--rouge); color: var(--cire); box-shadow: 0 6px 20px -8px rgba(163,22,31,.7); }
.bouton:hover { transform: translateY(-2px); }
.bouton:active { transform: translateY(0); }

/* ---------- scène du haut ---------- */
.lumiere-etat { position: absolute; opacity: 0; pointer-events: none; }
.scene { position: relative; color: var(--cire); background: var(--nuit); overflow: hidden; isolation: isolate; }
.scene__fond { position: absolute; inset: 0; z-index: -1; }
.fond { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 55%; transition: opacity 1.3s ease; }
.fond--allume { opacity: 0; }
.lumiere-etat:checked + .scene .fond--allume { opacity: 1; }
/* voile sombre a gauche pour lire le texte */
.scene__fond::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(20,13,8,.92) 0%, rgba(20,13,8,.72) 34%, rgba(20,13,8,.15) 62%, rgba(20,13,8,0) 75%),
              linear-gradient(180deg, rgba(20,13,8,.55) 0%, rgba(20,13,8,0) 18%);
}

.top { max-width: var(--large); margin: 0 auto; display: flex; align-items: center; gap: 2rem; padding: 1.6rem clamp(1.25rem, 5vw, 3rem); }
.logo { position: relative; display: inline-flex; flex-direction: column; align-items: center; text-decoration: none; color: var(--cire); line-height: 1; }
.logo__nom { font-family: var(--titre); font-size: 1.75rem; letter-spacing: .14em; padding-left: .14em; }
.logo__sous { font-family: var(--texte); font-size: .8rem; letter-spacing: .08em; margin-top: .3rem; display: flex; align-items: center; gap: .45rem; color: var(--flamme-2); }
.logo__sous::before, .logo__sous::after { content: ""; width: 1.1rem; height: 1px; background: currentColor; opacity: .8; }
.logo__bonnet { position: absolute; left: -1.05rem; top: -1rem; width: 2rem; transform: rotate(-18deg); }
.top nav { margin-left: auto; display: flex; gap: 2.25rem; font-size: 1.02rem; }
.top nav a { text-decoration: none; opacity: .92; }
.top nav a:hover { opacity: 1; text-decoration: underline; }

.hero { max-width: var(--large); margin: 0 auto; padding: clamp(1.5rem, 5vw, 4rem) clamp(1.25rem, 5vw, 3rem) clamp(7rem, 12vw, 10rem); }
.hero__texte { max-width: 34rem; }
.badge {
  display: inline-flex; align-items: center; gap: .55rem; margin: 0 0 1.4rem;
  padding: .45rem 1.1rem .45rem .9rem; border-radius: 999px;
  background: var(--rouge); color: var(--cire); font-weight: 600; font-size: 1rem;
  box-shadow: 0 0 24px -4px rgba(200,35,44,.6);
}
.badge img { width: 1.25rem; height: 1.25rem; filter: invert(1); }
.hero h1 { font-size: clamp(2.8rem, 6.4vw, 5rem); text-shadow: 0 2px 30px rgba(0,0,0,.4); }
.hero h1 .houx { display: inline-block; width: .9em; height: auto; margin-left: .25em; vertical-align: -.05em; }
.hero__intro { font-size: 1.12rem; margin: 1.6rem 0 2rem; color: #eadfcf; max-width: 32rem; }

/* interrupteur */
.interrupteur { display: inline-flex; align-items: center; gap: .9rem; cursor: pointer; font-weight: 600; user-select: none; }
.interrupteur__piste { position: relative; width: 4.3rem; height: 2.35rem; border-radius: 999px; background: #3a2c22; box-shadow: inset 0 0 0 2px #7b6a5c; transition: background-color .4s, box-shadow .4s; }
.interrupteur__bouton { position: absolute; top: .32rem; left: .32rem; width: 1.7rem; height: 1.7rem; border-radius: 50%; background: #cfc2b3; transition: transform .4s cubic-bezier(.5,1.6,.5,1), background-color .4s, box-shadow .4s; }
.lumiere-etat:checked + .scene .interrupteur__piste { background: #5a3a1c; box-shadow: inset 0 0 0 2px var(--flamme); }
.lumiere-etat:checked + .scene .interrupteur__bouton { transform: translateX(1.95rem); background: var(--flamme); box-shadow: 0 0 16px 4px rgba(241,162,74,.65); }
.interrupteur__texte--on { display: none; }
.lumiere-etat:checked + .scene .interrupteur__texte--on { display: inline; }
.lumiere-etat:checked + .scene .interrupteur__texte--off { display: none; }
.lumiere-etat:focus-visible + .scene .interrupteur__piste { outline: 2px solid var(--flamme); outline-offset: 4px; }

.hero__achat { margin-top: 2rem; display: flex; flex-direction: column; align-items: flex-start; gap: 1.1rem; }
.stock { margin: 0; font-size: 1rem; display: flex; align-items: center; gap: .6rem; }
.stock::before { content: ""; width: .6rem; height: .6rem; border-radius: 50%; background: var(--rouge-2); box-shadow: 0 0 8px var(--rouge-2); flex: none; }

/* bord de neige + branches */
.neige-bord {
  position: absolute; left: 0; right: 0; bottom: -1px; height: clamp(5rem, 9vw, 7.5rem); pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23ffffff'/%3E%3Cstop offset='.35' stop-color='%23eef0f3'/%3E%3Cstop offset='1' stop-color='%23f6f3ee'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0 52 C70 30 130 44 190 38 C260 30 300 12 380 22 C450 31 500 48 580 40 C660 32 700 14 790 20 C870 26 920 46 1000 42 C1080 38 1120 16 1200 22 C1280 28 1340 46 1440 34 L1440 120 L0 120 Z' fill='url(%23g)'/%3E%3Cpath d='M0 52 C70 30 130 44 190 38 C260 30 300 12 380 22 C450 31 500 48 580 40 C660 32 700 14 790 20 C870 26 920 46 1000 42 C1080 38 1120 16 1200 22 C1280 28 1340 46 1440 34' fill='none' stroke='%23d9dde4' stroke-width='3'/%3E%3C/svg%3E") bottom / 100% 100% no-repeat;
  filter: drop-shadow(0 -6px 14px rgba(0,0,0,.35));
  z-index: 2;
}
.sapin { position: absolute; width: clamp(8rem, 15vw, 13rem); bottom: -30%; filter: drop-shadow(0 8px 12px rgba(0,0,0,.35)); }
.sapin--g { left: -1.5rem; }
.sapin--d { right: -1.5rem; transform: scaleX(-1); }

/* ---------- sections ---------- */
main > section { max-width: var(--large); margin: 0 auto; padding: clamp(3.5rem, 8vw, 6rem) clamp(1.25rem, 5vw, 3rem); position: relative; }
.titre-deco { display: inline-flex; align-items: center; gap: .9rem; position: relative; padding-bottom: .9rem; }
.titre-deco::after {
  content: ""; position: absolute; left: .1rem; bottom: 0; width: 6.5rem; height: .55rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 10'%3E%3Cpath d='M2 7 C30 2 70 2 118 5' stroke='%23a3161f' stroke-width='3.2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / contain;
}
.titre-icone { width: 2.6rem; height: 2.6rem; filter: invert(13%) sepia(84%) saturate(4500%) hue-rotate(350deg) brightness(78%); }

/* fond neigeux avec flocons */
.offres, .etapes-bloc, .details, .faq-bloc {
  background-image: url(images/flocon.svg), url(images/flocon.svg), url(images/flocon.svg);
  background-repeat: no-repeat;
  background-size: 2.6rem, 1.8rem, 2.2rem;
  background-position: 1.5% 30%, 97% 12%, 94% 78%;
}
.offres { padding-top: clamp(2.5rem, 5vw, 4rem) !important; }
.offres__grille { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 3vw, 2.5rem); }
.offre { display: flex; flex-direction: column; background: #fff; border-radius: 14px; overflow: hidden; box-shadow: 0 18px 40px -22px rgba(60,30,10,.45); }
.offre img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; object-position: 50% 45%; }
.offre__corps { padding: clamp(1.4rem, 2.6vw, 2.1rem); display: flex; flex-direction: column; flex: 1; }
.offre__prix { font-family: var(--titre); font-size: 2.5rem; margin: .3rem 0 .7rem; color: var(--rouge); }
.offre__corps p { margin: 0 0 1rem; }
.offre ul { padding-left: 1.15rem; margin: 0 0 1.6rem; color: var(--gris); font-size: .98rem; }
.offre li { margin-bottom: .3rem; }
.offre li::marker { color: var(--rouge-2); }
.offre .bouton { margin-top: auto; align-self: flex-start; }
.offre--cadre { background: var(--nuit-2); color: var(--cire); }
.offre--cadre ul { color: #d8cbbb; }
.offre--cadre li::marker { color: var(--flamme); }
.offre--cadre .offre__prix { color: var(--flamme); }
.offres__note { margin: 1.6rem 0 0; color: var(--gris); font-size: .97rem; }

/* ---------- la lumière ---------- */
.bougie { display: grid; grid-template-columns: auto 1fr; gap: clamp(2rem, 6vw, 6rem); align-items: center; }
main > .bougie { max-width: none; background: radial-gradient(ellipse at 25% 50%, #3a2412 0%, var(--nuit) 60%); color: var(--cire); padding-inline: max(clamp(1.25rem, 5vw, 3rem), calc((100% - var(--large)) / 2 + 3rem)); }
.bougie__texte p { max-width: 35rem; color: #e0d3c2; margin: 0 0 1rem; }
.anneau { position: relative; width: clamp(13rem, 26vw, 19rem); aspect-ratio: 1; }
.anneau span {
  position: absolute; left: 50%; top: 50%; width: 13%; aspect-ratio: 1; border-radius: 50%; background: #3e2a1b;
  transform: translate(-50%, -50%) rotate(calc(var(--i) * 30deg)) translateY(-310%);
  transition: background-color .35s ease, box-shadow .35s ease; transition-delay: calc(var(--i) * 160ms);
}
.anneau span:nth-child(1) { --i: 0; }  .anneau span:nth-child(2) { --i: 1; }  .anneau span:nth-child(3) { --i: 2; }
.anneau span:nth-child(4) { --i: 3; }  .anneau span:nth-child(5) { --i: 4; }  .anneau span:nth-child(6) { --i: 5; }
.anneau span:nth-child(7) { --i: 6; }  .anneau span:nth-child(8) { --i: 7; }  .anneau span:nth-child(9) { --i: 8; }
.anneau span:nth-child(10) { --i: 9; } .anneau span:nth-child(11) { --i: 10; } .anneau span:nth-child(12) { --i: 11; }
.anneau--on span { background: var(--flamme); box-shadow: 0 0 18px 6px rgba(241,162,74,.45); animation: vacille 2.9s infinite; animation-delay: calc(2.2s + var(--i) * -0.37s); }
@keyframes vacille { 0%, 100% { opacity: 1; } 17% { opacity: .55; } 26% { opacity: .9; } 44% { opacity: .62; } 57% { opacity: 1; } 71% { opacity: .7; } 86% { opacity: .95; } }

/* ---------- étapes ---------- */
.etapes { list-style: none; counter-reset: e; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5rem; }
.etapes li { counter-increment: e; background: #fff; border-radius: 14px; padding: 1.6rem; box-shadow: 0 14px 34px -24px rgba(60,30,10,.4); }
.etapes li::before {
  content: counter(e); display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%;
  background: var(--rouge); color: var(--cire); font-family: var(--titre); font-size: 1.3rem; margin-bottom: 1rem;
}
.etapes h3 { margin-bottom: .6rem; font-size: 1.25rem; }
.etapes p { margin: 0; color: var(--gris); }

/* ---------- fiche ---------- */
.fiche { margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.75rem 2.5rem; }
.fiche div { border-left: 3px solid var(--flamme); padding-left: 1rem; }
.fiche dt { font-weight: 600; }
.fiche dd { margin: .2rem 0 0; color: var(--gris); }

/* ---------- Noël ---------- */
main > .noel {
  max-width: none; overflow: hidden;
  background: linear-gradient(135deg, #7d0f17, var(--rouge) 55%, #8a1119);
  color: var(--cire); display: grid; grid-template-columns: 1fr; justify-items: start;
  padding-inline: max(clamp(1.25rem, 5vw, 3rem), calc((100% - var(--large)) / 2 + 3rem));
}
.noel__texte { position: relative; z-index: 1; max-width: 40rem; }
.noel p { margin: 0 0 1rem; color: #f6dfd9; }
.noel__date { font-family: var(--titre); font-size: 1.6rem; color: var(--flamme-2) !important; margin-bottom: 1.8rem !important; }
.noel__sapin { position: absolute; right: -3rem; top: -3rem; width: clamp(14rem, 30vw, 26rem); transform: scaleX(-1) rotate(-10deg); opacity: .95; }

/* ---------- FAQ ---------- */
.faq { max-width: 48rem; background: #fff; border-radius: 14px; padding: .5rem 1.6rem; box-shadow: 0 14px 34px -24px rgba(60,30,10,.4); }
.faq details { border-bottom: 1px solid var(--neige-2); }
.faq details:last-child { border-bottom: 0; }
.faq summary { cursor: pointer; padding: 1.15rem 2.2rem 1.15rem 0; font-weight: 600; list-style: none; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: .25rem; top: .85rem; font-size: 1.5rem; font-weight: 400; color: var(--rouge); transition: transform .25s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin: 0 0 1.25rem; color: var(--gris); }

/* ---------- pied ---------- */
.pied { background: var(--nuit); color: #d2c4b2; display: grid; grid-template-columns: 1fr 1.6fr; gap: 2rem 4rem; padding: 3.5rem max(clamp(1.25rem, 5vw, 3rem), calc((100% - var(--large)) / 2 + 3rem)); font-size: .95rem; }
.logo--pied { align-items: flex-start; margin: 0 0 1rem; }
.logo--pied .logo__sous::before { display: none; }
.pied p { margin: 0 0 .75rem; }
.pied a { color: var(--cire); }
.mentions h2 { font-size: 1.1rem; color: var(--cire); margin-bottom: .6rem; }

/* ---------- pages de texte (merci, CGV) ---------- */
.page-texte .scene { background: var(--nuit); }
.page-texte .scene .top .marque { font-family: var(--titre); font-size: 1.6rem; letter-spacing: .14em; text-decoration: none; }
.page { max-width: 46rem; margin: 0 auto; padding: clamp(3rem, 7vw, 5rem) clamp(1.25rem, 6vw, 3rem); }
.page h1 { font-size: clamp(2rem, 4vw, 3rem); margin-bottom: 1.5rem; }
.page h2 { font-size: 1.4rem; margin: 2.5rem 0 .75rem; }
.page p, .page li { color: #3a2f26; }
.page .bouton { margin-top: 1.5rem; background: var(--rouge); color: var(--cire); }
.encadre { background: #fff; border-left: 3px solid var(--rouge); padding: 1rem 1.25rem; margin: 1.5rem 0; }
.pied--court { display: block; padding-block: 1.5rem; }

/* ---------- mobile ---------- */
@media (max-width: 900px) {
  .fond { object-position: 72% 60%; }
  .scene__fond::after { background: linear-gradient(180deg, rgba(20,13,8,.55) 0%, rgba(20,13,8,.78) 45%, rgba(20,13,8,.9) 100%); }
  .offres__grille, .etapes, .fiche { grid-template-columns: 1fr; }
  .bougie { grid-template-columns: 1fr; justify-items: center; }
  .pied { grid-template-columns: 1fr; }
  .noel__sapin { opacity: .35; }
}
@media (max-width: 600px) {
  .top nav { display: none; }
  .sapin { width: 8rem; bottom: -25%; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
  html { scroll-behavior: auto; }
  .anneau span { background: var(--flamme); box-shadow: 0 0 18px 6px rgba(241,162,74,.45); }
}