/* Mission de la Lutine Accroche-Cœur — feuille de style du site public.
   Le style (neige, cadeau, chandail, atelier, bonbons) est choisi dans la configuration : <html data-theme="…">.
   Les textures générées (kraft, tricot, confettis…) sont posées par assets/decor.js dans des variables --tx-*. */

:root{
  color-scheme: light;
  --ink:#25213B; --ink-2:#56516B; --ink-3:#8F8AA3; --line:#DAD4E3; --paper-2:#F2ECDF;
  --red:#E5483F; --green:#2A9A5E; --green-d:#1C6E43; --yellow:#F7BE33; --blue:#3B9EDB; --pink:#F272A8; --violet:#8C62E0;
  --body:"Atkinson Hyperlegible","Segoe UI",system-ui,sans-serif;
  --display:"Mountains of Christmas","Trebuchet MS",serif;
  --wobble:22px 26px 20px 28px / 26px 20px 28px 22px;
  /* Jetons par défaut = Atelier du Père Noël ; chaque style les redéfinit plus bas */
  --bg:#4A2612; --bg-img:none; --on-bg:#FFF4DC; --on-bg-2:#F3D9A8; --on-bg-shadow:0 1px 2px rgba(0,0,0,.6);
  --card:#FFF4DC; --primary:#E9B640; --primary-fg:#3B1E10; --accent:#B3202A; --accent-fg:#fff;
  --title:#9E1B24; --kicker:#F4C95D; --band:#1B1414; --band-fg:#F4C95D; --band-shadow:none; --heart:#F4C95D;
}
/* 1. Nuit de neige */
[data-theme="neige"]{
  --display:"Sniglet","Trebuchet MS",sans-serif;
  --bg:#0B1D4A; --bg-img:linear-gradient(180deg,#0B1D4A 0%,#1C4585 55%,#7FB0E0 100%);
  --on-bg:#fff; --on-bg-2:#D5E4FA; --on-bg-shadow:0 1px 3px rgba(0,0,0,.45);
  --card:#F7FBFF; --primary:#E5483F; --primary-fg:#fff; --accent:#5BC0EB; --accent-fg:#0B1D4A; --title:#16366E; --kicker:#FFE08A;
  --band:linear-gradient(180deg,#1C4585,#0B1D4A); --band-fg:#fff; --band-shadow:none; --heart:#FF8A80;
}
/* 2. Papier cadeau */
[data-theme="cadeau"]{
  --display:"Lilita One","Trebuchet MS",sans-serif;
  --bg:#C9A47E; --bg-img:var(--tx-kraft, none);
  --on-bg:#3B2414; --on-bg-2:#5B3A22; --on-bg-shadow:0 1px 0 rgba(255,255,255,.35);
  --card:#FFF8EC; --primary:#D63A34; --primary-fg:#fff; --accent:#1E7A4C; --accent-fg:#fff; --title:#B8302A; --kicker:#B8302A;
  --band:radial-gradient(circle, rgba(255,255,255,.35) 1.6px, transparent 2.2px) 0 0/14px 14px, #1E7A4C; --band-fg:#fff; --band-shadow:0 1px 0 rgba(0,0,0,.3); --heart:#FFD7D4;
}
/* 3. Chandail de Noël */
[data-theme="chandail"]{
  --display:"Bowlby One","Trebuchet MS",sans-serif;
  --bg:#C8262D; --bg-img:var(--tx-knit-red, none);
  --on-bg:#fff; --on-bg-2:#FFE3E0; --on-bg-shadow:0 2px 0 rgba(0,0,0,.35);
  --card:#FFF6E9; --primary:#1F7A4C; --primary-fg:#fff; --accent:#C8262D; --accent-fg:#fff; --title:#B01F26; --kicker:#FFF1B8;
  --band:var(--tx-fi-edge, none) top left/8px 8px repeat-x, var(--tx-fi-edge, none) bottom left/8px 8px repeat-x, #1F7A4C; --band-fg:#fff; --band-shadow:0 1px 0 rgba(0,0,0,.45); --heart:#fff;
}
/* 4. Atelier du Père Noël */
[data-theme="atelier"]{
  --display:"Mountains of Christmas","Trebuchet MS",serif;
  --bg:#4A2612;
  --bg-img:repeating-linear-gradient(90deg, rgba(0,0,0,.28) 0 3px, transparent 3px 132px), repeating-linear-gradient(90deg, rgba(255,255,255,.045) 0 38px, transparent 38px 66px), linear-gradient(#6B3A1E,#4A2612);
}
/* 5. Pays des bonbons */
[data-theme="bonbons"]{
  --display:"Chewy","Trebuchet MS",sans-serif;
  --bg:#FFD9E6; --bg-img:var(--tx-sprinkles, none);
  --on-bg:#5A1F3D; --on-bg-2:#7A3656; --on-bg-shadow:0 1px 0 rgba(255,255,255,.6);
  --card:#FFFFFF; --primary:#FF4F8B; --primary-fg:#fff; --accent:#2BB38A; --accent-fg:#fff; --title:#E0306E; --kicker:#E0306E;
  --band:#7ED9B3; --band-fg:#3D1230; --band-shadow:none; --heart:#E0306E;
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0; min-height:100vh; overflow-x:hidden; color:var(--ink); font:17px/1.5 var(--body); background-color:var(--bg); background-image:var(--bg-img)}
[data-theme="neige"] body{background-attachment:fixed}
a{color:inherit}
button,input,textarea{font:inherit}
:focus-visible{outline:3px solid var(--blue); outline-offset:2px}
.visuellement-cache{position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.piege{position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden}   /* champ piège contre les robots */

.barre{position:relative; z-index:2; display:flex; align-items:center; gap:10px; padding:12px 18px; background:var(--band); color:var(--band-fg); text-shadow:var(--band-shadow); border-bottom:2px solid var(--ink); font:400 19px/1.1 var(--display)}
.barre .coeur{color:var(--heart); font-size:22px}
.barre a{text-decoration:none}
.barre .sous{opacity:.75}
[data-theme="atelier"] .barre{box-shadow:inset 0 3px 0 -1px #C9962B, inset 0 -3px 0 -1px #C9962B}
[data-theme="bonbons"] .barre{border-bottom:0; margin-bottom:8px}
[data-theme="bonbons"] .barre::after{content:""; position:absolute; left:0; right:0; bottom:-8px; height:8px; background:repeating-linear-gradient(45deg,#E23B36 0 8px,#fff 8px 16px)}

.contenu{position:relative; z-index:1; max-width:620px; margin:0 auto; padding:22px 16px 60px; display:grid; gap:20px}
.contenu.large{max-width:960px}
.carte{background:var(--card); border:2.5px solid var(--ink); border-radius:22px; padding:22px 20px; box-shadow:0 6px 0 rgba(0,0,0,.22)}
.pied{position:relative; z-index:1; text-align:center; color:var(--on-bg-2); text-shadow:var(--on-bg-shadow); font-size:14px; padding:0 16px 40px}
.pied a{color:var(--on-bg)}

h1,h2,h3{font-family:var(--display); font-weight:400; color:var(--title); line-height:1.08; margin:0 0 12px}
h1{font-size:34px} h2{font-size:25px; margin-top:6px} h3{font-size:21px}
[data-theme="neige"] h1{font-size:30px} [data-theme="chandail"] h1{font-size:27px; line-height:1.12} [data-theme="atelier"] h1{font-size:38px}
p{margin:0 0 12px}
.chapeau{font-size:18px; color:var(--ink-2)}
.fine{font-size:14.5px; color:var(--ink-2)}
/* Accueil : le parent qui a déjà donné retrouve sa mission sans le courriel */
.deja-donne{margin:14px 0 0; padding:10px 12px; background:#fff; border:1.5px solid var(--ink-3); border-radius:14px; text-align:center; font-size:16px}
.deja-donne a{font-weight:700; color:var(--title); white-space:nowrap}
.deja-donne label{display:block}
.code-ligne{display:flex; gap:8px; margin-top:8px}
.code-ligne .saisie{flex:1; min-width:0; text-transform:uppercase}
.code-ligne .btn{width:auto; margin-top:0; padding:10px 14px; font-size:18px}
.centre{text-align:center}
.etiquette{display:inline-block; font:400 14px var(--display); letter-spacing:.06em; text-transform:uppercase; background:var(--accent); color:var(--accent-fg); padding:5px 12px; border-radius:99px; rotate:-2deg; margin-bottom:12px}
[data-theme="chandail"] .etiquette{outline:1.5px dashed rgba(255,255,255,.8); outline-offset:-4px}

/* ---------- Boutons et champs ---------- */
.btn{display:flex; align-items:center; justify-content:center; gap:8px; width:100%; padding:15px 18px; margin-top:12px; font:400 21px/1.1 var(--display); color:var(--ink); background:#fff; border:2.5px solid var(--ink); border-radius:16px; box-shadow:0 5px 0 var(--ink); cursor:pointer; text-decoration:none; text-align:center; transition:translate .08s, box-shadow .08s}
.btn:hover{translate:0 -1px; box-shadow:0 6px 0 var(--ink)}
.btn:active{translate:0 4px; box-shadow:0 1px 0 var(--ink)}
.btn.principal{background:var(--primary); color:var(--primary-fg, #fff)}
.btn.discret{background:transparent; box-shadow:none; border-style:dashed}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.5; cursor:not-allowed; translate:none}
[data-theme="neige"] .btn.principal{position:relative}
[data-theme="neige"] .btn.principal::before{content:""; position:absolute; left:8px; right:8px; top:-9px; height:14px; background:radial-gradient(circle at 11px 13px,#fff 9px,transparent 10px) 0 0/22px 16px repeat-x; filter:drop-shadow(0 1px 0 rgba(22,54,110,.25))}
[data-theme="cadeau"] .btn.principal{background:linear-gradient(180deg,#F0625A 0%,#D63A34 48%,#B02924 100%); border-color:#6E1512}
[data-theme="chandail"] .btn.principal{outline:2px dashed rgba(255,255,255,.8); outline-offset:-7px}
[data-theme="atelier"] .btn.principal{background:linear-gradient(180deg,#F9DC7E,#E0A92E); border-color:#7A4A12; box-shadow:0 5px 0 #7A4A12, 0 0 20px rgba(247,190,51,.55)}
[data-theme="bonbons"] .btn.principal{background:linear-gradient(180deg,#FF8DB3,#FF4F8B 55%,#E0306E); border-color:#8C1640; box-shadow:inset 0 6px 0 rgba(255,255,255,.35), 0 5px 0 #8C1640}

.champ{display:block; margin-top:16px}
.champ > span{display:block; font-weight:700; margin-bottom:6px}
.saisie{width:100%; font-size:19px; font-weight:700; padding:12px 14px; border:2.5px solid var(--ink); border-radius:14px; background:#fff; color:var(--ink)}
.saisie:focus{outline:none; box-shadow:0 0 0 4px rgba(59,158,219,.35)}
.aide{display:block; font-size:14px; color:var(--ink-2); margin-top:5px}
.case{display:flex; gap:10px; align-items:flex-start; margin-top:16px; font-size:15.5px; line-height:1.4; cursor:pointer}
.case input{width:22px; height:22px; accent-color:var(--green); margin:2px 0 0; flex:none}
.erreur{background:#F8C9C5; border:2px solid #C8262D; border-radius:12px; padding:10px 14px; margin-top:14px; font-weight:700}
.erreur:empty{display:none}

/* Photo : de vrais boutons (atteignables au clavier, exigence d'accessibilité) ouvrent les champs de fichier cachés */

.etapes{list-style:none; padding:0; margin:0; display:grid; gap:10px}
.etapes li{display:flex; gap:12px; align-items:center; background:#fff; border:2px solid var(--ink); border-radius:var(--wobble); padding:10px 12px; font-size:16px; line-height:1.35}
.etapes .n{width:36px; height:36px; border-radius:50%; border:2px solid var(--ink); display:grid; place-items:center; font:400 18px var(--display); flex:none; color:#fff}
.rdv{display:grid; gap:10px}
.rdv .evt{display:flex; gap:12px; align-items:center; padding:10px 12px; border:2px dashed var(--ink); border-radius:14px; background:#fff; font-size:15.5px; line-height:1.35}
.rdv .date{font:400 15px/1.1 var(--display); text-align:center; background:var(--green); color:#fff; border:2px solid var(--ink); border-radius:10px; padding:6px 8px; min-width:62px}
[data-theme="atelier"] :is(.etapes li,.rdv .evt){border:3px double #C9962B}
[data-theme="bonbons"] :is(.etapes li,.rdv .evt){border:3px solid #FF9CC2; border-radius:22px; box-shadow:0 5px 0 #F9C6DA}
[data-theme="chandail"] :is(.etapes li,.rdv .evt){outline:2px dashed #C8262D; outline-offset:-7px}
[data-theme="cadeau"] :is(.etapes li,.rdv .evt){border:2px dashed #8A5A3B; border-radius:8px 20px 20px 8px; background:#FFFDF6}

.compteur{display:flex; align-items:center; gap:12px; margin:12px 0 4px; font-size:16px; line-height:1.3}
.compteur b{font:400 38px/1 var(--display); color:var(--primary); flex:none}
[data-theme="atelier"] .compteur b{color:#B3202A}
.lutin-coin{float:right; width:112px; margin:-8px -6px 0 8px}
.lutin-coin svg{display:block; width:100%; height:auto}

/* ---------- Le sapin (murale) ---------- */
.sapin{position:relative; width:100%; border:2px solid var(--ink); border-radius:var(--wobble); overflow:hidden; background:linear-gradient(#F7F7FA,#E1E2E8); --p:0; isolation:isolate}
.sapin::before{content:""; position:absolute; inset:0; z-index:-1; background:radial-gradient(120% 70% at 50% 0%, #2F5498 0%, #15306A 55%, #0D1C40 100%); opacity:var(--p); transition:opacity .5s}
.sapin .aurore, .sapin .decor{position:absolute; inset:0; width:100%; height:100%}
.sapin .aurore{opacity:var(--p); transition:opacity .5s}
.sapin .decor{filter:saturate(calc(0.04 + var(--p) * 1.15)); transition:filter .5s}
.sapin .places{position:absolute; inset:0}
.place{position:absolute; aspect-ratio:1/1; border-radius:50%; background:#fff center/cover no-repeat; border:1.5px solid #6f6a86; box-shadow:inset -2px -3px 0 rgba(37,33,59,.07)}
.place::before{content:""; position:absolute; left:34%; width:32%; top:-13%; height:15%; background:#C9C4D3; border:1px solid #6f6a86; border-radius:2px 2px 0 0}
.place.pleine{border-color:var(--ink); animation:apparait .45s cubic-bezier(.2,1.8,.4,1) both}
.place.mienne{z-index:4; box-shadow:0 0 0 2px var(--yellow), 0 0 14px 6px rgba(247,190,51,.95); animation:brille 1.4s ease-in-out infinite}
.sapin.petit .place{border-width:1px}
.sapin.petit .place.mienne{animation-name:brilleFort}
.sapin.grand .place.pleine{transition:scale .2s; cursor:pointer}
.sapin.grand .place.pleine:focus-visible{outline:3px solid var(--yellow); outline-offset:2px; z-index:7}
/* Survol seulement avec une souris : au doigt, toucher la boule l'ouvre en grand (dialogue .zoom-boule) */
@media (hover:hover){
.sapin.grand .place.pleine:hover{scale:2.6; z-index:7; box-shadow:0 6px 14px rgba(0,0,0,.35)}
.sapin.grand .place.pleine[data-qui]:hover::after{content:attr(data-qui); position:absolute; left:50%; top:100%; translate:-50% 4px; scale:.42; transform-origin:top center; background:var(--ink); color:#fff; font:700 14px var(--body); padding:3px 8px; border-radius:6px; white-space:nowrap}
}
/* Une boule de la murale, en grand, avec le prénom de l'enfant */
.zoom-boule{width:min(88vw, 420px); padding:28px 20px 20px; border:2.5px solid var(--ink); border-radius:24px; background:var(--card); color:var(--ink); text-align:center}
.zoom-boule::backdrop{background:rgba(14,12,29,.72)}
.zoom-boule[open]{animation:apparait .4s cubic-bezier(.2,1.6,.4,1) both}
.zoom-image{position:relative; width:100%; aspect-ratio:1; border-radius:50%; border:3px solid var(--ink); background:#fff center/cover no-repeat}
.zoom-image::before{content:""; position:absolute; left:41%; width:18%; top:-6%; height:7%; background:#C9C4D3; border:2.5px solid var(--ink); border-radius:4px 4px 0 0}
.zoom-nom{margin:16px 0 0; font:400 30px/1.1 var(--display); color:var(--title); overflow-wrap:anywhere}
.drapeau{position:absolute; translate:-50% -100%; margin-top:-8px; background:var(--yellow); border:2px solid var(--ink); font:700 13px/1 var(--body); padding:4px 7px; border-radius:8px; white-space:nowrap; z-index:6; pointer-events:none}
.drapeau::after{content:""; position:absolute; left:50%; bottom:-7px; translate:-50% 0; border:6px solid transparent; border-top-color:var(--ink); border-bottom:0}
@keyframes apparait{from{scale:.4}}
@keyframes brille{50%{scale:1.25}}
@keyframes brilleFort{0%,100%{scale:1.6}50%{scale:1.9}}
.murale-tete{text-align:center; color:var(--on-bg); text-shadow:var(--on-bg-shadow)}
.murale-tete h1{color:var(--on-bg); font-size:clamp(30px,5vw,48px)}
.murale-tete .kicker{font:400 18px var(--display); color:var(--kicker); letter-spacing:.06em}
.murale-cadre{position:relative}
.gros-compteur{position:absolute; top:14px; left:14px; z-index:8; background:var(--card); border:2px solid var(--ink); border-radius:14px; padding:8px 12px; text-align:center; box-shadow:0 4px 0 var(--ink)}
.gros-compteur b{display:block; font:400 34px/1 var(--display); color:var(--title)}
.gros-compteur span{font-size:13px}
/* Projection plein écran aux rendez-vous (murale.php?projection=1) */
.projection .barre, .projection .pied, .projection .contenu > :not(.murale-cadre):not(.murale-tete){display:none}
.projection .contenu{max-width:none; padding:76px 3vw 16px}
.projection .murale-cadre .sapin{max-width:min(96vw, calc(100vh * 0.95)); margin:0 auto}

/* ---------- Coloriage à imprimer ---------- */
.feuille-cadre{container-type:inline-size}
.feuille{aspect-ratio:3/4; background:#fff; border:2px solid var(--ink); border-radius:4px; padding:5cqw 6cqw 3.5cqw; display:flex; flex-direction:column; gap:2.4cqw; color:var(--ink)}
.feuille-kicker{font:700 3.3cqw/1.2 var(--body); letter-spacing:.08em; text-transform:uppercase; color:var(--ink-2); text-align:center}
.feuille-titre{font:400 9.5cqw/1 var(--display); text-align:center; overflow-wrap:anywhere}
.feuille-boule{flex:1; min-height:0; display:flex; justify-content:center}
.feuille-boule svg{height:100%; width:auto; max-width:100%; overflow:visible}
.feuille-consigne{font:400 5cqw/1.15 var(--display); text-align:center}
.feuille-pied{display:flex; gap:4cqw; align-items:center; border:2px dashed var(--ink); border-radius:3cqw; padding:3cqw}
.feuille-qr{flex:none; width:22cqw; aspect-ratio:1}
.feuille-qr img,.feuille-qr canvas{width:100%; height:100%; display:block; image-rendering:pixelated}
.feuille-texte{font-size:3.5cqw; line-height:1.3}
.feuille-texte b{display:block; font:400 5cqw/1.1 var(--display); margin-bottom:.8cqw}
.feuille-marque{font:700 2.8cqw var(--body); text-align:center; color:var(--ink-3)}
@media print{
  @page{size:letter; margin:.5in}
  body{background:#fff}
  body > *:not(.contenu), .contenu > *:not(.a-imprimer), .a-imprimer > *:not(.feuille-cadre){display:none !important}
  /* !important : certains styles (ex. Atelier) ajoutent de l'espace en haut, qui pousserait le bas de la feuille sur une 2e page */
  .contenu{display:block; max-width:none; padding:0 !important}
  .a-imprimer{border:0; box-shadow:none; padding:0; background:#fff}
  .feuille-cadre{width:7.5in}
  .feuille{height:9.9in; aspect-ratio:auto; border:none}
}

/* ---------- Le message de la Lutine (vidéo, ou animation en attendant la vidéo) ---------- */
.lecteur{position:relative; border-radius:20px; overflow:hidden; border:2.5px solid #000; background:#0e0c1d}
.lecteur video{display:block; width:100%; max-height:78vh; background:#000}
.lecteur .scene-boite{position:relative; aspect-ratio:4/5; overflow:hidden}
.lecteur .scene{position:absolute; inset:0; width:100%; height:100%}
.lecteur .lutin-place{position:absolute; left:50%; bottom:12%; width:62%; translate:-50% 0}
.lecteur .lutin-place svg{display:block; width:100%; height:auto}
.sous-titres{position:absolute; left:4%; right:4%; bottom:4%; background:rgba(21,18,42,.88); color:#fff; font:700 18px/1.3 var(--body); padding:10px 12px; border-radius:12px; text-align:center; opacity:0; transition:opacity .2s; z-index:2}
.sous-titres.on{opacity:1}
.sous-titres .nm, .prenom-video{background:var(--yellow); color:var(--ink); padding:0 6px; border-radius:6px}
/* Le prénom écrit sur la liste de la Lutine, par-dessus la vidéo, au moment prévu (zone et temps dans la configuration) */
.prenom-video{position:absolute; display:flex; align-items:center; justify-content:center; text-align:center; font:400 clamp(22px,7vw,46px)/1 var(--display); background:transparent; color:#B3202A; opacity:0; transition:opacity .35s; pointer-events:none; z-index:3}
.prenom-video.on{opacity:1}
.lecteur .lancer{position:absolute; inset:0; z-index:4; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:14px; padding:0 20px 30px; text-align:center; background:linear-gradient(to top, rgba(14,12,29,.94) 32%, rgba(14,12,29,.3) 72%, rgba(14,12,29,0)); color:#fff; border:0; width:100%; cursor:pointer; font:inherit}
.lecteur .lancer .k{font:700 13px var(--body); letter-spacing:.12em; text-transform:uppercase; color:var(--yellow)}
.lecteur .lancer .t{font:400 34px/1.05 var(--display)}
.lecteur .lancer .rond{width:78px; height:78px; border-radius:50%; background:var(--red); border:3px solid #fff; display:grid; place-items:center; font-size:30px; padding-left:6px}
.lecteur[data-etat="joue"] .lancer, .lecteur[data-etat="fini"] .lancer{display:none}

/* ---------- Mission accomplie ---------- */
.tampon{display:block; width:fit-content; margin:6px auto; text-align:center; font:400 40px/.95 var(--display); color:var(--red); border:4px solid var(--red); border-radius:14px; padding:10px 14px 8px; rotate:-4deg; background:#fff; animation:tampon .6s cubic-bezier(.2,1.6,.4,1) both}
@keyframes tampon{from{scale:2.4; opacity:0}}
.membre{display:flex; align-items:center; gap:10px; background:#FFF0A0; border:2px solid var(--ink); border-radius:14px; padding:10px 12px; font-weight:700; margin-top:14px; line-height:1.3}
.membre .h{font-size:22px; color:var(--red); line-height:1}
.invitation{margin-top:18px; border:2.5px solid var(--ink); border-radius:18px; padding:14px; background:#fff}
.invitation .tete{display:flex; gap:10px; align-items:center}
.invitation .tete .lutin-coin{float:none; width:76px; margin:0; flex:none}
.invitation .k{font:700 13px var(--body); letter-spacing:.08em; text-transform:uppercase; color:var(--title)}
.invitation .fin{font:400 22px var(--display); text-align:center; margin:12px 0 2px; color:var(--title)}
.apercu{width:62%; margin:14px auto 8px; aspect-ratio:1; border-radius:50%; border:3px dashed var(--ink-3); display:grid; place-items:center; background:#fff center/cover no-repeat; color:var(--ink-2); font-weight:700; text-align:center; padding:18px; cursor:pointer}
.apercu .icone{display:block; font-size:44px; line-height:1.2}
.apercu.pleine{border:3px solid var(--ink); color:transparent}
.apercu.pleine > span{visibility:hidden}
.apercu + .aide{font-weight:700}
/* Coloriage : imprimer, ou colorier à l'écran (la boule, la palette de crayons) */
.choix-coloriage{margin:4px 0 14px}
.pas-imprimante{margin-top:20px}
.ecran-boule svg{display:block; width:min(100%, 420px); height:auto; margin:6px auto 0}
.ecran-boule .zone{cursor:pointer; outline:none}
.ecran-boule .zone:focus-visible{stroke:#F7BE33; stroke-width:7}
.palette{display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin:12px 0 4px}
.crayon{width:44px; height:44px; border-radius:50%; border:2.5px solid var(--ink); background:var(--c); cursor:pointer; padding:0; transition:scale .15s}
.crayon[aria-pressed="true"]{box-shadow:0 0 0 3px var(--card), 0 0 0 6px var(--ink); scale:1.08}
.crayon.gomme{background:linear-gradient(135deg,#fff 0 55%,#F7A1C4 55%)}
.crayon:focus-visible{outline:3px solid var(--ink); outline-offset:4px}
/* La boule attend la vérification d'un lutin (après l'envoi, et sur la murale du même téléphone) */
.attente{margin:12px 0; padding:12px 14px; background:#FFF3C4; color:var(--ink); border:2px solid var(--ink); border-radius:14px; font:700 16px/1.35 var(--body); text-shadow:none; text-align:center}
.attente:empty{display:none}

/* ---------- La Lutine (SVG animé) ---------- */
.lutin .l-all{animation:balance 1.8s ease-in-out infinite; transform-origin:150px 360px}
@keyframes balance{50%{transform:translateY(-6px)}}
.lutin .eyes{animation:cligne 4.2s infinite; transform-origin:150px 147px}
@keyframes cligne{0%,93%,100%{transform:scaleY(1)}95%{transform:scaleY(.1)}}
.lutin .m, .lutin .brow-w, .lutin .sweat{display:none}
.lutin.mood-happy .m-smile, .lutin.mood-oops .m-oops, .lutin.mood-panic .m-panic, .lutin.mood-whisper .m-whisper, .lutin.mood-plead .m-plead{display:inline}
.lutin:is(.mood-oops,.mood-panic,.mood-plead,.mood-whisper) .brow-w{display:inline}
.lutin:is(.mood-oops,.mood-panic,.mood-plead,.mood-whisper) .brow-n{display:none}
.lutin:is(.mood-oops,.mood-panic) .sweat{display:inline}
.lutin .head{transform-origin:150px 205px; transition:transform .3s}
.lutin .armL{transform-origin:104px 222px; transition:transform .35s}
.lutin .armR{transform-origin:196px 222px; transition:transform .35s}
.lutin .pompom{transform-origin:246px 52px; animation:pompon 2.4s ease-in-out infinite}
@keyframes pompon{50%{transform:rotate(16deg)}}
.lutin.mood-oops .armL{transform:rotate(38deg)}
.lutin.mood-oops .head{transform:rotate(4deg)}
.lutin.mood-panic .l-all{animation:panique .32s linear infinite}
@keyframes panique{25%{transform:translateX(-4px) rotate(-2deg)}75%{transform:translateX(4px) rotate(2deg)}}
.lutin.mood-panic .armL{animation:brasG .45s ease-in-out infinite alternate}
.lutin.mood-panic .armR{animation:brasD .45s ease-in-out infinite alternate}
@keyframes brasG{from{transform:rotate(60deg)}to{transform:rotate(118deg)}}
@keyframes brasD{from{transform:rotate(-60deg)}to{transform:rotate(-118deg)}}
.lutin.mood-whisper .armL{transform:rotate(-168deg)}
.lutin.mood-whisper .head{transform:rotate(-6deg)}
.lutin.mood-plead .armR{transform:rotate(-40deg)}
.lutin .scroll{transform:translateY(80px); opacity:0; transition:transform .35s, opacity .25s}
.lutin text{font-family:var(--body)}
.lutin .l-name{font-family:var(--display); font-weight:700}
.lutin.naming .scroll{transform:none; opacity:1}
.lutin.naming .armL{transform:rotate(133deg)}
.lutin.naming .armR{transform:rotate(-132deg)}

/* ---------- Couche de décor, derrière le contenu (assets/decor.js) ---------- */
.decor-fond{position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden}
.decor-fond > *{display:none; position:absolute}
[data-theme="neige"] .d-neige, [data-theme="cadeau"] .d-cadeau, [data-theme="chandail"] .d-chandail,
[data-theme="atelier"] .d-atelier, [data-theme="bonbons"] .d-bonbons{display:block}
.d-neige.collines{left:0; right:0; bottom:0; height:210px}
.d-neige.collines svg{width:100%; height:100%}
#neige{inset:0; width:100%; height:100%}
.d-cadeau.ruban-v{top:0; bottom:0; right:7%; width:44px; background:linear-gradient(90deg,#8E1F1B,#D8453D 35%,#FF8F85 50%,#D8453D 65%,#8E1F1B)}
.d-cadeau.ruban-h{left:0; right:0; bottom:120px; height:44px; background:linear-gradient(180deg,#8E1F1B,#D8453D 35%,#FF8F85 50%,#D8453D 65%,#8E1F1B)}
.d-cadeau.boucle{right:calc(7% - 58px); bottom:84px; width:160px; height:104px; background:var(--tx-bow) center/contain no-repeat}
.d-chandail.bande{left:0; right:0; bottom:0; height:64px; background:var(--tx-fairisle) 0 0/72px 64px repeat-x; border-top:3px solid #F7E9D0; box-shadow:0 -4px 0 #1F7A4C}
.d-atelier.lumieres{left:0; right:0; top:52px; height:64px}
.d-atelier.lumieres svg{width:100%; height:100%}
.d-atelier.boules{top:110px; width:90px}
.d-atelier.boules.g{left:6px} .d-atelier.boules.d{right:6px; transform:scaleX(-1)}
.d-bonbons.sucette{left:-20px; bottom:-30px; width:220px}
.d-bonbons.canne{right:10px; bottom:-10px; width:230px}
.scintille{animation:scintille 1.6s ease-in-out infinite}
.scintille.t2{animation-delay:.5s} .scintille.t3{animation-delay:1s}
@keyframes scintille{50%{opacity:.35}}
[data-theme="atelier"] .contenu{padding-top:70px}
@media (max-width:1100px){ .d-atelier.boules{display:none !important} }
@media (max-width:760px){ .d-cadeau.boucle, .d-bonbons.canne, .d-cadeau.ruban-v{display:none !important} }

@media (max-width:420px){ h1{font-size:28px} [data-theme="atelier"] h1{font-size:32px} .carte{padding:18px 16px} }
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important}
}