/* OhPapaNoel : chaleureux, premium, sobre. Palette des PDF (rouge profond, crème, or).
   Polices auto-hébergées (public/polices, licence SIL OFL) : aucune police ni script d'un autre site. */
@font-face { font-family: 'EB Garamond'; src: url('/polices/pdf/EBGaramond_400Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'EB Garamond'; src: url('/polices/pdf/EBGaramond_400Regular_Italic.ttf') format('truetype'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'EB Garamond'; src: url('/polices/pdf/EBGaramond_600SemiBold.ttf') format('truetype'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Cinzel'; src: url('/polices/pdf/Cinzel_600SemiBold.ttf') format('truetype'); font-weight: 600; font-style: normal; font-display: swap; }

:root {
  color-scheme: light;
  --rouge: #8e1c1c;
  --rouge-vif: #a8141f;
  --rouge-sombre: #5e1010;
  --creme: #fbf5e7;
  --creme-2: #f4ece0;
  --papier: #fffaf1;
  --or: #c59a3d;
  --or-clair: #e9d3a1;
  --or-fonce: #7a5512;
  --encre: #3b2412;
  --gris: #6b5a48;
  --vert: #2f5d46;
  --ombre: 0 1px 2px rgb(59 36 18 / 8%), 0 8px 24px rgb(59 36 18 / 8%);
  --rayon: 16px;
  --titres: 'Cinzel', 'Trajan Pro', Georgia, serif;
  --texte: 'EB Garamond', Garamond, Georgia, 'Times New Roman', serif;
  --large: 1120px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: #0a1430; color: var(--encre); font-family: var(--texte); font-size: 1.1875rem; line-height: 1.55; overflow-x: hidden;
  min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; } /* pied de page en bas même sur une page courte */
img, video, svg { max-width: 100%; }
a { color: var(--rouge); text-underline-offset: 3px; }
a:hover { color: var(--rouge-sombre); }
:focus-visible { outline: 3px solid var(--or-fonce); outline-offset: 2px; border-radius: 4px; }
h1, h2, h3 { font-family: var(--titres); font-weight: 600; color: var(--rouge); line-height: 1.2; letter-spacing: .01em; }
h1 { font-size: clamp(1.75rem, 1.2rem + 2.6vw, 2.9rem); margin: .2em 0 .45em; }
h2 { font-size: clamp(1.3rem, 1.05rem + 1.2vw, 1.9rem); margin: 1.6em 0 .6em; }
h3 { font-size: 1.25rem; margin: .4em 0 .3em; }
p { margin: 0 0 .9em; }
strong { font-weight: 600; }
mark.a-completer { background: #ffe58a; color: #4a2b00; padding: 0 .2em; border-radius: 3px; font-style: normal; }

/* Flocon du site (src/site/flocon.js) : blanc au contour noir épais, dessiné une fois (#flocon) et repris partout */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.flocon { flex: none; overflow: visible; }
.flocon__contour, .flocon__trait { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.flocon__contour { stroke: #140808; stroke-width: 5; }
.flocon__trait { stroke: #fff; stroke-width: 2.4; }

.aller-contenu { position: absolute; left: -999px; top: 0; background: var(--papier); padding: 8px 12px; z-index: 10; }
.aller-contenu:focus { left: 8px; }

/* Bandeau et en-tête */
.bandeau { background: var(--rouge-sombre); color: #fff3dc; text-align: center; font-size: .95rem; padding: 7px 16px; letter-spacing: .01em; }
.bandeau .rebours { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.entete { background: var(--rouge); color: #fff3dc; border-bottom: 3px solid var(--or); }
.entete__dedans { max-width: var(--large); margin: 0 auto; padding: 10px 16px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 18px; }
.logo { display: inline-flex; align-items: center; gap: 8px; color: #fff3dc; text-decoration: none; font-family: var(--titres); font-size: 1.35rem; letter-spacing: .04em; min-height: 44px; }
.logo:hover { color: #fff; }
.logo__flocon { width: 28px; height: 28px; }
.menu { display: flex; flex-wrap: wrap; gap: 2px 14px; }
.menu a { color: #fff3dc; text-decoration: none; font-size: 1.02rem; padding: 8px 2px; display: inline-block; }
.menu a:hover { color: #fff; text-decoration: underline; }

/* Le contenu est posé sur des feuilles crème, au-dessus du village animé (fond fixe, voir « Fond animé ») */
main { display: block; flex: 1 0 auto; padding: 18px 0 30px; }
main > section, .texte {
  max-width: min(var(--large), calc(100% - 20px)); margin: 0 auto 18px; padding: 22px clamp(16px, 3.4vw, 34px);
  background: var(--creme); border-radius: 20px; /* opaque : le village ne transparaît jamais derrière le texte */
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 55%), 0 18px 48px rgb(3 8 24 / 45%);
}

/* Boutons */
.bouton { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 12px 26px; border-radius: 999px; border: 0;
  background: var(--rouge-vif); color: #fff; font-family: var(--texte); font-size: 1.12rem; font-weight: 600; text-decoration: none; cursor: pointer;
  box-shadow: 0 2px 0 var(--rouge-sombre), 0 6px 16px rgb(142 28 28 / 22%); transition: transform .12s ease, background .12s ease; }
.bouton:hover { background: var(--rouge); color: #fff; transform: translateY(-1px); }
.bouton:active { transform: translateY(1px); }
.bouton[disabled] { opacity: .55; cursor: not-allowed; transform: none; }
.bouton--grand { min-height: 56px; font-size: 1.2rem; padding: 14px 30px; width: 100%; }
.bouton--clair { background: var(--papier); color: var(--rouge); border: 2px solid var(--rouge); box-shadow: none; }
.bouton--clair:hover { background: #fff; color: var(--rouge-sombre); }
.lien { background: none; border: 0; padding: 6px 0; color: var(--rouge); text-decoration: underline; font: inherit; cursor: pointer; min-height: 44px; }

.carte { background: var(--papier); border: 1px solid var(--or-clair); border-radius: var(--rayon); padding: 18px 18px; box-shadow: var(--ombre); }
.pastille { display: inline-block; align-self: flex-start; background: var(--or); color: #2b1a05; font-family: var(--titres); font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; padding: 4px 12px; border-radius: 999px; margin: 0 0 6px; }
.prix { margin: .2em 0 .7em; }
.prix__montant { font-family: var(--titres); font-size: 2rem; color: var(--rouge); white-space: nowrap; }
.prix__tva { display: block; font-size: .9rem; color: var(--gris); }
.coches { list-style: none; padding: 0; margin: 0 0 1em; }
.coches li { position: relative; padding-left: 28px; margin: 0 0 .45em; }
.coches li::before { content: ''; position: absolute; left: 2px; top: .45em; width: 14px; height: 8px; border-left: 2.5px solid var(--vert); border-bottom: 2.5px solid var(--vert); transform: rotate(-45deg); }
.avis { padding: 12px 16px; border-radius: 12px; background: #f2e6cf; border-left: 5px solid var(--or); }
.avis--info { background: #eef3ee; border-left-color: var(--vert); }
.avis--ok { background: #e7f2ea; border-left-color: var(--vert); font-size: 1.15rem; }
.avis--erreur { background: #fbe4e2; border-left-color: var(--rouge-vif); }
.petit, .mentions { font-size: .95rem; color: var(--gris); }

/* Accueil */
.heros { display: grid; gap: 24px; align-items: center; }
.heros__promesse { font-style: italic; color: var(--or-fonce); font-size: 1.15rem; margin-bottom: .3em; }
.heros__sous-titre { font-size: 1.22rem; }
.heros__bandeau { font-size: .98rem; color: var(--gris); }
.heros__image img { border-radius: var(--rayon); box-shadow: var(--ombre); height: auto; }
/* Accueil sans image de Théo : le texte est posé sur le village, dans un cadre de nuit, le village reste visible autour */
main > section.heros--plein { background: transparent; box-shadow: none; padding: clamp(24px, 9vh, 96px) clamp(10px, 3vw, 32px) clamp(40px, 22vh, 230px); }
.heros--plein .heros__texte { max-width: 620px; padding: 24px clamp(18px, 3vw, 32px) 18px; border-radius: 20px; color: #f3efe6;
  background: linear-gradient(160deg, rgb(10 18 44 / 88%), rgb(16 27 60 / 86%)); border: 1px solid rgb(233 211 161 / 40%);
  box-shadow: 0 18px 50px rgb(0 0 0 / 40%); }
.heros--plein h1 { color: #fff; text-shadow: 0 2px 18px rgb(0 0 0 / 45%); }
.heros--plein .heros__promesse { color: #ffd98a; }
.heros--plein .heros__bandeau { color: #d9e0f2; }

/* Fond animé de toutes les pages, fixé derrière le contenu (100lvh : il ne bouge pas quand la barre d'adresse du téléphone
   apparaît ou disparaît). Photo du village (src/site/fond-photo.js, images de npm run fond) ou, à défaut, village dessiné
   (src/site/village.js). Ce qui bouge est sur des calques déplacés par la carte graphique. Chaque animation part de
   --fond-t (fond-temps.js) : sur toutes les pages, le même instant, rien ne saute quand on change de page ; toutes les
   durées (aller-retour compris) divisent une heure. */
.fond { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; height: 100lvh; z-index: -1; overflow: hidden; background: #1c2a45;
  pointer-events: none; container-type: size; --t: calc(-1 * var(--fond-t, 0s)); }
.fond img { max-width: none; }
.fond .village { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.village .v-d0 { animation-delay: 0s; } .village .v-d1 { animation-delay: .8s; } .village .v-d2 { animation-delay: 1.6s; } .village .v-d3 { animation-delay: 2.4s; }
.v-scint { animation: v-scint 3.2s ease-in-out infinite both; }
.v-vacille { animation: v-vacille 5.5s ease-in-out infinite both; }
.v-guirlande { animation: v-guirlande 1.6s ease-in-out infinite alternate both; }
.v-etoile-sapin { transform-box: fill-box; transform-origin: center; animation: v-pulse 2.6s ease-in-out infinite; }
.v-bouffee { opacity: 0; transform-box: fill-box; transform-origin: center; animation: v-fumee 4.8s ease-out infinite both; }
.v-bouffee.v-b1 { animation-delay: 1.6s; } .v-bouffee.v-b2 { animation-delay: 3.2s; }
/* Traîneau : traverse le haut de l'écran en 9 s, puis revient 15 s plus tard */
.fond__traineau { position: absolute; left: 0; top: 0; width: clamp(220px, 30vw, 470px); max-width: none; height: auto; overflow: visible;
  filter: drop-shadow(0 0 7px rgb(255 214 120 / 55%)); will-change: transform; animation: traineau-ciel 24s linear 1.5s infinite both; }
.fond__traineau .v-scint { animation-duration: 1.4s; }
.v-galop { animation: v-galop .44s ease-in-out infinite alternate; }
.v-galop.v-d1 { animation-delay: .11s; } .v-galop.v-d2 { animation-delay: .22s; }
.fond__flocon { position: absolute; top: -60px; width: 30px; height: 30px; will-change: transform; animation: flocon-tombe 22s linear infinite both; }
.fond__flocon svg { display: block; width: 100%; height: 100%; }
.fond__flocon--0 { left: 8%; } .fond__flocon--1 { left: 31%; width: 22px; height: 22px; animation-duration: 27s; animation-delay: -11s; }
.fond__flocon--2 { left: 55%; width: 34px; height: 34px; animation-duration: 19s; animation-delay: -6s; }
.fond__flocon--3 { left: 76%; width: 24px; height: 24px; animation-duration: 25s; animation-delay: -17s; } .fond__flocon--4 { left: 92%; animation-duration: 23s; animation-delay: -3s; }
@keyframes v-scint { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
@keyframes v-vacille { 0%, 100% { opacity: 1; } 42% { opacity: .82; } 47% { opacity: .97; } 53% { opacity: .8; } }
@keyframes v-guirlande { from { opacity: .3; } to { opacity: 1; } }
@keyframes v-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.14); } }
@keyframes v-fumee { 0% { opacity: 0; transform: translate(0, 0) scale(.6); } 20% { opacity: .32; } 100% { opacity: 0; transform: translate(9px, -38px) scale(1.9); } }
/* Trajet calé sur la lune du paysage (vers 80 % de la largeur, 20 % de la hauteur sur un ordinateur) */
@keyframes traineau-ciel { 0% { transform: translate(-70vw, 36vh) rotate(-5deg); } 12% { transform: translate(-8vw, 30vh) rotate(-6deg); } 25% { transform: translate(50vw, 22vh) rotate(-5deg); } 38% { transform: translate(118vw, 13vh) rotate(-4deg); } 100% { transform: translate(118vw, 13vh) rotate(-4deg); } }
@keyframes v-galop { from { transform: translateY(0); } to { transform: translateY(-2.6px); } }
@keyframes flocon-tombe { from { transform: translate(0, 0) rotate(0deg); } to { transform: translate(-40px, calc(100vh + 120px)) rotate(340deg); } }

/* Photo : couvre l'écran, centrée sur le sapin et la place du marché (55,6 % de la largeur, 47 % de la hauteur) */
.fond__scene { position: absolute; --l: max(100cqw, 56.25cqh); --h: calc(var(--l) * 16 / 9); width: var(--l); height: var(--h);
  left: clamp(calc(100cqw - var(--l)), calc(50cqw - var(--l) * .556), 0px);
  top: clamp(calc(100cqh - var(--h)), calc(50cqh - var(--h) * .47), 0px); }
/* Le village « respire » : un très lent rapprochement, 1 minute dans chaque sens */
.fond__plan { position: absolute; inset: 0; transform-origin: 55.6% 58%; will-change: transform;
  animation: fond-respire 60s ease-in-out var(--t) infinite alternate; }
.fond__plan > img { position: absolute; inset: 0; width: 100%; height: 100%; }
/* Lumières tirées de la photo (fenêtres, sapin, guirlandes, lampadaires, étoiles) : la lueur respire, les ampoules scintillent */
.fond__lueur { opacity: .6; }
.fond__lueur--halo { animation: fond-halo 6s ease-in-out var(--t) infinite alternate; }
.fond__lueur--a { animation: fond-scintille-a 4.8s ease-in-out var(--t) infinite; }
.fond__lueur--b { animation: fond-scintille-b 3.6s ease-in-out var(--t) infinite; }
/* Fumée : 3 bouffées décalées par cheminée (cheminées qui fument déjà sur la photo) */
.fond__cheminee { position: absolute; width: 2.2%; aspect-ratio: 1; translate: -50% -50%; --d: 0s; }
.fond__cheminee i { position: absolute; inset: 0; border-radius: 50%; opacity: 0;
  background: radial-gradient(closest-side, rgb(226 233 246 / 70%), rgb(226 233 246 / 30%) 55%, rgb(226 233 246 / 0));
  animation: fond-fumee 9s linear calc(var(--t) - var(--d)) infinite; }
.fond__cheminee i:nth-child(2) { animation-delay: calc(var(--t) - var(--d) - 3s); }
.fond__cheminee i:nth-child(3) { animation-delay: calc(var(--t) - var(--d) - 6s); }
.fond__cheminee--0 { left: 34.4%; top: 54.9%; } .fond__cheminee--1 { left: 31.1%; top: 51.8%; --d: 1.1s; }
.fond__cheminee--2 { left: 9.8%; top: 49.4%; --d: 2.3s; } .fond__cheminee--3 { left: 66.4%; top: 54.8%; --d: .6s; }
.fond__cheminee--4 { left: 71.6%; top: 52.6%; --d: 1.8s; } .fond__cheminee--5 { left: 95.4%; top: 51.3%; --d: 2.7s; }
.fond__cheminee--6 { left: 46.4%; top: 44.7%; --d: 1.4s; width: 1.5%; } .fond__cheminee--7 { left: 61.6%; top: 44.6%; --d: .3s; width: 1.5%; }
/* Traîneau : passe au loin, de gauche à droite en 16 s, toutes les 30 s, juste sous l'en-tête (au-dessus du texte de
   l'accueil), en s'éloignant (il rapetisse) ; il tangue, la traînée scintille, les rennes galopent.
   --y0, --y1, --y2 : hauteur au départ, au milieu, à l'arrivée. */
.fond__vol { position: absolute; left: 0; top: 0; width: clamp(180px, 20cqw, 330px); will-change: transform; --y0: 152px; --y1: 140px; --y2: 130px;
  animation: fond-vol-x 30s linear var(--t) infinite; }
.fond__cap { animation: fond-vol-y 30s ease-in-out var(--t) infinite; }
.fond__attelage { position: relative; animation: fond-tangage 1.5s ease-in-out var(--t) infinite alternate; }
.fond__attelage > img { display: block; width: 100%; height: auto; }
/* Pattes des rennes : bande de N images (public/images/fond/fond.css, générée : place, nombre d'images, cadence) qui défile
   d'une image à la fois, sous le traîneau fixe (le haut des pattes passe sous le ventre) */
.fond__rennes { position: absolute; overflow: hidden; }
.fond__attelage .fond__rennes img { position: absolute; left: 0; top: 0; height: 100%; max-width: none; }
.fond__poussiere { position: absolute; left: 0; top: 0; transform-origin: 46% 70%;
  animation: fond-paillettes 1.2s ease-in-out var(--t) infinite alternate; }
.fond__traineau-photo { position: relative; }
.fond__lanterne { position: absolute; width: 4.5%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%;
  background: radial-gradient(closest-side, rgb(255 206 120 / 60%), rgb(255 180 80 / 0)); animation: fond-lanterne 2.4s linear var(--t) infinite; }
.fond__lanterne--0 { left: 33%; top: 50.5%; } .fond__lanterne--1 { left: 49.8%; top: 49.5%; animation-delay: calc(var(--t) - .8s); }
.fond__lanterne--2 { left: 51.4%; top: 48%; animation-delay: calc(var(--t) - 1.5s); }

/* Neige : trois profondeurs (loin, près, tout près et floue), motifs répétés qui descendent d'une tuile exactement */
.fond__neige { position: absolute; left: -40px; right: -40px; bottom: 0; will-change: transform; }
.fond__neige--loin { top: -300px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cdefs%3E%3CradialGradient id='f'%3E%3Cstop offset='0' stop-color='white'/%3E%3Cstop offset='0.35' stop-color='white' stop-opacity='.85'/%3E%3Cstop offset='1' stop-color='white' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cg fill='url(%23f)'%3E%3Ccircle cx='203.5' cy='220.2' r='2.6' opacity='0.77'/%3E%3Ccircle cx='29.9' cy='233.2' r='2.3' opacity='0.79'/%3E%3Ccircle cx='87.1' cy='38.7' r='2.1' opacity='0.80'/%3E%3Ccircle cx='128.3' cy='228.5' r='3.2' opacity='0.65'/%3E%3Ccircle cx='158.2' cy='258.6' r='1.8' opacity='0.78'/%3E%3Ccircle cx='8.9' cy='31.8' r='1.9' opacity='0.62'/%3E%3Ccircle cx='75.5' cy='14.6' r='2.8' opacity='0.74'/%3E%3Ccircle cx='124.8' cy='25.0' r='2.2' opacity='0.81'/%3E%3Ccircle cx='292.5' cy='260.4' r='1.9' opacity='0.59'/%3E%3Ccircle cx='29.5' cy='52.1' r='2.2' opacity='0.87'/%3E%3Ccircle cx='213.2' cy='100.2' r='3.1' opacity='0.66'/%3E%3Ccircle cx='85.5' cy='154.2' r='2.7' opacity='0.67'/%3E%3Ccircle cx='140.5' cy='45.3' r='2.7' opacity='0.69'/%3E%3Ccircle cx='160.8' cy='165.3' r='2.0' opacity='0.58'/%3E%3Ccircle cx='58.1' cy='110.1' r='3.0' opacity='0.75'/%3E%3Ccircle cx='59.7' cy='69.0' r='2.6' opacity='0.87'/%3E%3Ccircle cx='217.5' cy='222.5' r='2.9' opacity='0.64'/%3E%3Ccircle cx='58.9' cy='217.7' r='2.6' opacity='0.88'/%3E%3Ccircle cx='256.8' cy='51.7' r='3.0' opacity='0.55'/%3E%3Ccircle cx='138.4' cy='268.5' r='2.8' opacity='0.61'/%3E%3Ccircle cx='127.8' cy='129.7' r='2.9' opacity='0.58'/%3E%3Ccircle cx='3.4' cy='116.9' r='2.7' opacity='0.58'/%3E%3Ccircle cx='90.8' cy='279.4' r='2.0' opacity='0.68'/%3E%3Ccircle cx='43.4' cy='169.7' r='2.8' opacity='0.67'/%3E%3Ccircle cx='153.9' cy='207.1' r='2.5' opacity='0.77'/%3E%3Ccircle cx='149.3' cy='156.0' r='1.9' opacity='0.79'/%3E%3Ccircle cx='262.5' cy='296.6' r='2.4' opacity='0.62'/%3E%3Ccircle cx='89.7' cy='240.3' r='2.5' opacity='0.71'/%3E%3Ccircle cx='155.2' cy='292.4' r='2.8' opacity='0.62'/%3E%3Ccircle cx='9.1' cy='231.6' r='2.1' opacity='0.63'/%3E%3Ccircle cx='115.5' cy='169.5' r='3.2' opacity='0.74'/%3E%3Ccircle cx='241.1' cy='152.8' r='2.4' opacity='0.73'/%3E%3Ccircle cx='1.0' cy='227.2' r='3.0' opacity='0.79'/%3E%3Ccircle cx='133.2' cy='189.6' r='1.9' opacity='0.60'/%3E%3C/g%3E%3C/svg%3E"); background-size: 300px 300px; opacity: .85;
  animation: fond-neige-loin 15s linear var(--t) infinite, balance 7.5s ease-in-out var(--t) infinite alternate; }
.fond__neige--pres { top: -440px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='440' height='440'%3E%3Cdefs%3E%3CradialGradient id='f'%3E%3Cstop offset='0' stop-color='white'/%3E%3Cstop offset='0.3' stop-color='white' stop-opacity='.85'/%3E%3Cstop offset='1' stop-color='white' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cg fill='url(%23f)'%3E%3Ccircle cx='357.3' cy='8.7' r='4.3' opacity='0.63'/%3E%3Ccircle cx='341.5' cy='226.8' r='4.2' opacity='0.74'/%3E%3Ccircle cx='193.1' cy='139.7' r='6.1' opacity='0.70'/%3E%3Ccircle cx='238.3' cy='92.9' r='5.1' opacity='0.94'/%3E%3Ccircle cx='297.7' cy='377.0' r='4.3' opacity='0.62'/%3E%3Ccircle cx='15.3' cy='223.4' r='5.4' opacity='0.92'/%3E%3Ccircle cx='216.0' cy='163.5' r='5.1' opacity='0.70'/%3E%3Ccircle cx='134.2' cy='266.3' r='5.5' opacity='0.64'/%3E%3Ccircle cx='53.4' cy='227.5' r='4.3' opacity='0.69'/%3E%3Ccircle cx='65.8' cy='186.3' r='4.9' opacity='0.84'/%3E%3Ccircle cx='314.2' cy='397.3' r='4.4' opacity='0.63'/%3E%3Ccircle cx='233.4' cy='227.5' r='4.9' opacity='0.88'/%3E%3Ccircle cx='361.9' cy='378.5' r='4.8' opacity='0.61'/%3E%3Ccircle cx='248.3' cy='292.4' r='4.6' opacity='0.84'/%3E%3C/g%3E%3C/svg%3E"); background-size: 440px 440px;
  animation: fond-neige-pres 8s linear var(--t) infinite, balance 5s ease-in-out calc(var(--t) - 2s) infinite alternate; }
.fond__neige--flou { top: -760px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='760' height='760'%3E%3Cdefs%3E%3CradialGradient id='f'%3E%3Cstop offset='0' stop-color='white'/%3E%3Cstop offset='0.05' stop-color='white' stop-opacity='.85'/%3E%3Cstop offset='1' stop-color='white' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cg fill='url(%23f)'%3E%3Ccircle cx='664.4' cy='561.2' r='13.1' opacity='0.29'/%3E%3Ccircle cx='353.5' cy='325.2' r='13.0' opacity='0.43'/%3E%3Ccircle cx='263.0' cy='343.2' r='9.4' opacity='0.37'/%3E%3Ccircle cx='650.2' cy='214.5' r='13.5' opacity='0.33'/%3E%3Ccircle cx='307.1' cy='185.0' r='11.7' opacity='0.40'/%3E%3Ccircle cx='233.9' cy='579.9' r='14.8' opacity='0.29'/%3E%3C/g%3E%3C/svg%3E"); background-size: 760px 760px;
  animation: fond-neige-flou 7.2s linear var(--t) infinite, balance 6s ease-in-out calc(var(--t) - 1s) infinite alternate; }
@keyframes fond-respire { from { transform: scale(1); } to { transform: scale(1.06); } }
@keyframes fond-halo { from { opacity: .3; } to { opacity: .8; } }
@keyframes fond-scintille-a { 0%, 100% { opacity: .2; } 22% { opacity: .95; } 40% { opacity: .45; } 63% { opacity: 1; } 82% { opacity: .3; } }
@keyframes fond-scintille-b { 0%, 100% { opacity: .9; } 30% { opacity: .2; } 52% { opacity: .85; } 75% { opacity: .3; } }
@keyframes fond-fumee { 0% { opacity: 0; transform: translate(0, 0) scale(.45); } 12% { opacity: .55; } 100% { opacity: 0; transform: translate(70%, -330%) scale(2.6); } }
@keyframes fond-vol-x { 0% { transform: translateX(-100%); } 53.3%, 100% { transform: translateX(100vw); } }
@keyframes fond-vol-y { 0% { transform: translateY(var(--y0)) rotate(-1deg) scale(1); opacity: .97; } 27% { transform: translateY(var(--y1)) rotate(-2deg) scale(.9); }
  53.3%, 100% { transform: translateY(var(--y2)) rotate(-1.5deg) scale(.8); opacity: .88; } }
/* Téléphone : l'en-tête est plus haut (bandeau sur 2 lignes, menu dessous) */
@media (max-width: 699px) { .fond__vol { --y0: 214px; --y1: 206px; --y2: 198px; } }
@keyframes fond-tangage { from { transform: translateY(-1.5px) rotate(-.4deg); } to { transform: translateY(2px) rotate(.35deg); } }
@keyframes fond-galop { to { transform: translateX(-100%); } }
@keyframes fond-paillettes { from { opacity: .7; transform: scaleX(.97); } to { opacity: 1; transform: scaleX(1.03); } }
@keyframes fond-lanterne { 0%, 100% { opacity: .5; } 30% { opacity: .9; } 55% { opacity: .6; } 70% { opacity: 1; } }
@keyframes fond-neige-loin { from { transform: translateY(0); } to { transform: translateY(300px); } }
@keyframes fond-neige-pres { from { transform: translateY(0); } to { transform: translateY(440px); } }
@keyframes fond-neige-flou { from { transform: translateY(0); } to { transform: translateY(760px); } }
@keyframes balance { from { translate: -9px 0; } to { translate: 9px 0; } }
.simulateur .fond { display: none; }
.arguments { display: grid; gap: 16px; }
.arguments .carte h2 { font-size: 1.2rem; margin: 0 0 .4em; }
.arguments__note { text-align: center; color: var(--gris); }
.exemple video { width: 100%; border-radius: var(--rayon); background: #000; }
.etapes__liste { counter-reset: etape; list-style: none; padding: 0; display: grid; gap: 14px; }
.etapes__liste li { counter-increment: etape; position: relative; padding: 14px 16px 14px 64px; background: var(--papier); border-radius: var(--rayon); border: 1px solid var(--or-clair); }
.etapes__liste li::before { content: counter(etape); position: absolute; left: 16px; top: 12px; width: 34px; height: 34px; border-radius: 50%; background: var(--rouge); color: #fff3dc; font-family: var(--titres); display: grid; place-items: center; }
.etapes__fin { color: var(--gris); }
.offres__grille { display: grid; gap: 18px; }
.offre { background: var(--papier); border: 1px solid var(--or-clair); border-radius: var(--rayon); padding: 20px; box-shadow: var(--ombre); display: flex; flex-direction: column; }
.offre > p:last-child { margin-top: auto; }
.offre .bouton { width: 100%; }
.offre--phare { border: 2px solid var(--or); background: linear-gradient(#fffdf6, var(--papier)); }
.recevez__liste { list-style: none; padding: 0; display: grid; gap: 10px; }
.recevez__liste li { display: flex; gap: 12px; align-items: flex-start; background: var(--papier); border-radius: 12px; padding: 12px 14px; border: 1px solid var(--or-clair); }
.puce { width: 22px; height: 22px; flex: none; margin-top: 2px; }
.promesses__liste { padding-left: 1.3em; }
.promesses__liste li { margin: 0 0 .6em; }
.faq-extrait details, .p-faq .question { background: var(--papier); border: 1px solid var(--or-clair); border-radius: 12px; padding: 4px 16px; margin: 0 0 10px; }
.faq-extrait summary { cursor: pointer; font-weight: 600; padding: 10px 0; min-height: 44px; }

/* Page d'une offre */
.fiche { display: grid; gap: 18px; padding-top: 22px !important; }
.fiche__accroche { font-size: 1.2rem; }
.fiche__contenu h2 { margin-top: 0; font-size: 1.25rem; }
.fiche__date { color: var(--vert); font-weight: 600; }

/* Encart « pack sur mesure » (page Magie) : bien visible, entre la fiche et le formulaire */
.surmesure { display: grid; gap: 16px; align-items: center; margin-top: 8px; padding: 22px 22px !important;
  background: linear-gradient(135deg, #fffdf6 0%, #f9ecc4 100%); border: 2px solid var(--or); border-radius: var(--rayon);
  box-shadow: var(--ombre), inset 0 0 0 4px rgb(255 255 255 / 70%); position: relative; }
main > section.surmesure { max-width: min(var(--large), calc(100% - 32px)); }
.surmesure h2 { margin: .1em 0 .35em; font-size: clamp(1.25rem, 1.05rem + 1vw, 1.7rem); }
.surmesure__texte p:not(.pastille) { margin: 0 0 .5em; }
.surmesure__places { color: var(--rouge-vif); font-weight: 600; }
.surmesure__bouton { margin: 0; }
.surmesure .bouton { width: 100%; background: var(--or-fonce); box-shadow: 0 2px 0 #4d3409, 0 6px 16px rgb(122 85 18 / 30%); }
.surmesure .bouton:hover { background: #8b6216; }
/* Encart « calendrier du Père Noël » (accueil, sous les offres) : même cadre doré que l'encart sur mesure, bouton rouge */
.calendrier-encart { display: grid; gap: 16px; align-items: center; padding: 22px 22px !important;
  background: linear-gradient(135deg, #fffdf6 0%, #f6e3c0 100%); border: 2px solid var(--or); border-radius: var(--rayon);
  box-shadow: var(--ombre), inset 0 0 0 4px rgb(255 255 255 / 70%); }
main > section.calendrier-encart { max-width: min(var(--large), calc(100% - 32px)); }
.calendrier-encart h2 { margin: .1em 0 .35em; font-size: clamp(1.25rem, 1.05rem + 1vw, 1.7rem); }
.calendrier-encart__texte p:not(.pastille) { margin: 0 0 .5em; }
.calendrier-encart__bouton { margin: 0; }
.calendrier-encart .bouton { width: 100%; }
.commande { padding-bottom: 30px !important; }
.formulaire { max-width: 680px; margin: 0 auto; }
.formulaire__intro { background: var(--papier); border-left: 5px solid var(--or); padding: 12px 16px; border-radius: 10px; }
.enfant { border: 1px solid var(--or-clair); border-radius: var(--rayon); background: var(--papier); padding: 14px 16px 6px; margin: 0 0 18px; }
.enfant > legend { font-family: var(--titres); color: var(--rouge); font-size: 1.15rem; padding: 0 8px; }
.champ { margin: 0 0 16px; border: 0; padding: 0; min-width: 0; }
.champ > label, .champ > legend { display: block; font-weight: 600; margin: 0 0 4px; padding: 0; }
.champ input[type="text"], .champ input[type="email"], .champ select, .champ textarea {
  width: 100%; min-height: 48px; padding: 10px 12px; border: 1.5px solid #b9a283; border-radius: 10px; background: #fff; color: var(--encre);
  font-family: var(--texte); font-size: 1.1rem; }
.champ textarea { resize: vertical; min-height: 64px; }
.champ input:focus, .champ select:focus, .champ textarea:focus { border-color: var(--rouge); outline: 2px solid rgb(142 28 28 / 25%); outline-offset: 0; }
.champ [aria-invalid="true"] { border-color: var(--rouge-vif); background: #fff6f5; }
.choix label { display: inline-flex; align-items: center; gap: 8px; margin: 0 22px 0 0; min-height: 44px; font-weight: 400; cursor: pointer; }
.choix input { width: 22px; height: 22px; accent-color: var(--rouge); }
.aide { display: block; font-size: .95rem; color: var(--gris); margin-top: 4px; }
.compteur { display: block; text-align: right; font-size: .85rem; color: var(--gris); margin-top: 2px; }
.idees { background: var(--papier); border: 1px dashed var(--or); border-radius: 12px; padding: 6px 16px; margin: 0 0 16px; }
.idees summary { cursor: pointer; font-weight: 600; min-height: 44px; display: flex; align-items: center; }
.idees ol { columns: 1; font-size: 1rem; }
.piege { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.recap { background: var(--papier); border: 1px solid var(--or-clair); border-radius: var(--rayon); padding: 14px 18px; margin: 0 0 8px; }
.recap dt { font-weight: 600; color: var(--rouge); margin-top: 8px; }
.recap dd { margin: 0 0 4px; }
.case { display: flex; gap: 12px; align-items: flex-start; background: var(--papier); border: 1.5px solid var(--or); border-radius: 12px; padding: 14px; margin: 14px 0 6px; }
.case input { width: 26px; height: 26px; flex: none; margin-top: 2px; accent-color: var(--rouge); }
.case label { cursor: pointer; }
.confiance { list-style: none; padding: 0; margin: 12px 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; font-size: .98rem; }
.confiance li { display: flex; gap: 6px; align-items: center; background: #f6eedd; border-radius: 10px; padding: 8px 10px; }
.confiance .puce { margin-top: 0; width: 18px; height: 18px; }

/* Pages de texte */
.texte { max-width: min(820px, calc(100% - 20px)); padding-top: 24px; padding-bottom: 36px; }
.texte h2 { font-size: 1.3rem; }
/* Bloc de lignes serrées (ex. éditeur du site, en bas des mentions légales : une information par ligne), en plus petit
   (toujours lisible) ; son titre aussi */
.texte p.lignes { font-size: .86em; line-height: 1.45; }
.texte h2:has(+ p.lignes) { font-size: 1.08rem; margin-bottom: .35em; }
/* Panneaux repliés (fin des CGV : formulaire de rétractation, identité du vendeur) : texte visible au clic sur le titre */
.texte .repli { background: var(--papier); border: 1px solid var(--or-clair); border-radius: 12px; padding: 0 16px; margin: 0 0 12px; }
.texte .repli > summary { cursor: pointer; font-weight: 600; min-height: 44px; padding: 10px 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; list-style: none; }
.texte .repli > summary::-webkit-details-marker { display: none; }
.texte .repli > summary::after { content: "+"; flex: none; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--or); display: grid; place-items: center; font-size: 1.1rem; line-height: 1; color: var(--rouge); }
.texte .repli[open] > summary::after { content: "\2212"; }
.texte .repli > summary:focus-visible { outline: 3px solid var(--or); outline-offset: 2px; border-radius: 6px; }
.texte .repli[open] > summary { border-bottom: 1px solid var(--or-clair); margin-bottom: 10px; }
.texte .repli__contenu { font-size: .9em; padding-bottom: 6px; }
.texte .repli__contenu > :last-child { margin-bottom: 8px; }
.texte ul, .texte ol { padding-left: 1.3em; }
.texte li { margin: 0 0 .35em; }
.tableau { overflow-x: auto; margin: 0 0 1em; -webkit-overflow-scrolling: touch; }
.tableau table { border-collapse: collapse; width: 100%; min-width: 520px; font-size: 1rem; background: var(--papier); }
.tableau th, .tableau td { border: 1px solid var(--or-clair); padding: 8px 10px; text-align: left; vertical-align: top; }
.tableau th { background: #f2e6cf; }
.encadre { margin: 1em 0; padding: 14px 18px; border: 2px solid var(--encre); border-radius: 6px; background: #fff; font-size: 1rem; }
.p-faq .question h2 { font-size: 1.15rem; margin: .7em 0 .4em; }
.titre__flocon { width: 32px; height: 32px; vertical-align: -5px; }
.telechargement .fichier { margin: 0 0 16px; }
.telechargement .fichier h2 { font-size: 1.15rem; margin: 0 0 8px; }
.telechargement video { width: 100%; border-radius: 10px; background: #000; }
.telechargement audio { width: 100%; }
/* « Mon espace » : formulaire de connexion et liste des commandes */
.espace__form { max-width: 460px; }
.espace__form input[type="email"] { width: 100%; }
.espace__commande { margin: 0 0 14px; }
.espace__commande h2 { font-size: 1.15rem; margin: 0 0 4px; }
.espace__commande p { margin: 0 0 6px; }
.espace__statut { color: var(--vert); font-weight: 600; }
/* Calendrier : vidéos arrivées (la plus récente en haut), puis les prochains matins, en cases fermées */
.jours-a-venir { margin: 0 0 16px; }
.jours-a-venir h2 { font-size: 1.15rem; margin: 0 0 8px; }
.texte .jours { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.jour--ferme { display: grid; grid-template-columns: auto 1fr; column-gap: 10px; align-items: center; padding: 8px 12px; margin: 0;
  border: 1px dashed var(--or); border-radius: 12px; background: var(--creme); color: var(--gris); font-size: .92rem; line-height: 1.3; }
.jour__numero { grid-row: span 2; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  background: var(--rouge); color: #ffe9c2; font-family: var(--titres); font-weight: 700; font-size: .95rem; }
.jour__quand { font-size: .82rem; }
.contact__email .bouton { word-break: break-all; }

/* Formulaire de rétractation */
.retractation .champ input, .retractation .champ textarea { width: 100%; min-height: 48px; padding: 10px 12px; border: 1.5px solid #b9a283; border-radius: 10px; background: #fff; font-family: var(--texte); font-size: 1.1rem; }
.retractation .declaration { font-size: 1.2rem; font-style: italic; }

/* Pied de page */
.pied { background: var(--encre); color: #f1e4cc; margin-top: 30px; border-top: 3px solid var(--or); }
/* Pied compact : logo, liens légaux (lisibles : « Renoncer au contrat ici » doit rester visible), comparatif en petit */
.pied { margin-top: 24px; border-top-width: 2px; }
.pied__dedans { max-width: var(--large); margin: 0 auto; padding: 9px 16px 10px; text-align: center; line-height: 1.35; }
.pied__logo { font-family: var(--titres); font-size: .85rem; color: var(--or-clair); display: flex; align-items: center; justify-content: center; gap: 6px; margin: 0 0 2px; }
.pied__flocon { width: 14px; height: 14px; }
/* Liens espacés sans « · » : aucun séparateur orphelin en fin de ligne sur téléphone ; ~13 px, contraste fort : lisibles */
.pied__liens, .pied__petit { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 14px; }
.pied__liens { font-size: .8rem; }
.pied__liens a, .pied__petit a { color: #f1e4cc; display: inline-block; padding: 3px 0; }
.pied__liens a:hover, .pied__petit a:hover { color: #fff; }
.pied__petit { font-size: .72rem; margin: 0; }
.pied__petit a { color: #d9c9ad; }

/* Simulateur Stripe (démo seulement) */
.simulateur { background: #eef0f6; font-family: system-ui, sans-serif; }
.carte-simulateur { max-width: 440px; margin: 40px auto; background: #fff; padding: 24px; border-radius: 12px; box-shadow: 0 6px 24px rgb(0 0 0 / 12%); }
.carte-simulateur h1 { font-family: system-ui, sans-serif; color: #222; font-size: 1.3rem; }
.carte-simulateur input[type="email"] { width: 100%; padding: 10px; font-size: 1rem; margin: 4px 0 12px; }
.carte-simulateur .case { background: none; border: 0; padding: 0; }
.badge-demo { background: #ffe58a; padding: 6px 10px; border-radius: 6px; font-weight: 700; font-size: .85rem; }
.prix-simulateur { font-size: 1.6rem; font-weight: 700; }

/* Ordinateur */
@media (min-width: 760px) {
  body { font-size: 1.25rem; }
  .heros { grid-template-columns: 1.25fr 1fr; }
  .heros .bouton--grand { width: auto; }
  /* Un peu plus de ciel au-dessus du texte : le traîneau y passe */
  main > section.heros--plein { padding-top: clamp(24px, 13vh, 130px); }
  .arguments { grid-template-columns: repeat(3, 1fr); }
  .arguments__note { grid-column: 1 / -1; }
  .etapes__liste { grid-template-columns: repeat(3, 1fr); }
  .offres__grille { grid-template-columns: repeat(3, 1fr); align-items: stretch; }
  .offre--phare { transform: translateY(-8px); }
  .recevez__liste { grid-template-columns: repeat(2, 1fr); }
  .fiche { grid-template-columns: 1.1fr 1fr; align-items: start; padding-top: 40px !important; }
  .surmesure { grid-template-columns: 1fr auto; gap: 28px; }
  .surmesure .bouton { width: auto; white-space: nowrap; }
  .calendrier-encart { grid-template-columns: 1fr auto; gap: 28px; }
  .calendrier-encart .bouton { width: auto; white-space: nowrap; }
  .idees ol { columns: 2; column-gap: 32px; }
  .confiance { grid-template-columns: repeat(4, auto); justify-content: start; }
}
/* Transitions entre les pages : l'ancienne page s'efface, la nouvelle apparaît en montant un peu ; le bandeau et l'en-tête
   ne bougent pas. View Transitions (Chrome, Edge, Safari récents) ; ailleurs, le contenu apparaît en fondu au chargement. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  .bandeau { view-transition-name: bandeau; }
  .entete { view-transition-name: entete; }
  /* Le village ne bouge pas pendant le changement de page : seule la page posée dessus change */
  .fond { view-transition-name: fond; }
  ::view-transition-group(fond), ::view-transition-new(fond) { animation: none; }
  ::view-transition-old(fond) { display: none; }
  ::view-transition-old(root) { animation: pn-sortie .2s ease-in both; }
  ::view-transition-new(root) { animation: pn-entree .42s cubic-bezier(.2, .7, .2, 1) both; }
  @supports not (view-transition-name: none) { main { animation: pn-entree .45s cubic-bezier(.2, .7, .2, 1) both; } }
  /* Formulaire : le récapitulatif arrive de la même façon */
  .etape[data-etape="2"]:not([hidden]) { animation: pn-entree .35s cubic-bezier(.2, .7, .2, 1) both; }
}
@keyframes pn-sortie { to { opacity: 0; transform: translateY(-6px); } }
@keyframes pn-entree { from { opacity: 0; transform: translateY(12px); } }

/* Moins de mouvement demandé : rien ne bouge, le traîneau reste posé dans le ciel */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .bouton { transition: none; }
  .fond, .fond * { animation: none !important; }
  .fond__traineau { transform: translate(56vw, 9vh) rotate(-6deg); }
  .fond__flocon { display: none; }
  .v-bouffee { opacity: .3; }
  /* Photo : le traîneau reste posé dans le ciel, à droite ; pas de fumée */
  .fond__vol { transform: translateX(calc(100cqw - 100% - 8px)); }
  .fond__cap { transform: translateY(var(--y2)) rotate(-2deg); }
  .fond__cheminee { display: none; }
}
@media print { .fond, .bandeau, .entete, .pied, .bouton { display: none; } body { background: #fff; } main > section, .texte { box-shadow: none; } }