/* Layout : un cahier d'ateliers façon autocollants découpés — gros titre joueur, bouton « Surprise-moi », cartes-stickers à contour épais, carnet de tampons pour les enfants, bandeau de confiance pour les parents. Thème clair assumé (univers enfant). */
:root {
  --bg: #DDF0FF;
  --bg-2: #FFF6DA;
  --paper: #FFFFFF;
  --ink: #23264B;
  --muted: #565C7E;
  --line: #23264B;
  --soft-line: #C9D6EA;
  --sun: #FFC23D;
  --sun-soft: #FFF1C7;
  --pumpkin: #FF6B4A;
  --leaf: #2FB373;
  --sky: #3E7BFA;
  --pink: #FF7EB9;
  --lilac: #9B7BFF;
  --on-sun: #23264B;
  --font-display: "Baloo 2", "Trebuchet MS", system-ui, sans-serif;
  --font-body: "Nunito", "Segoe UI", system-ui, sans-serif;
  --r: 22px;
  --pop: 5px 5px 0 var(--ink);
  color-scheme: light;
}
* { box-sizing: border-box; }
body { background: var(--bg); color: var(--ink); font-family: var(--font-body); font-size: 17px; line-height: 1.55; }
body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: .5;
  background-image: radial-gradient(circle at 12% 18%, var(--sun) 0 6px, transparent 7px), radial-gradient(circle at 88% 12%, var(--pink) 0 5px, transparent 6px), radial-gradient(circle at 78% 72%, var(--leaf) 0 6px, transparent 7px), radial-gradient(circle at 6% 82%, var(--lilac) 0 5px, transparent 6px), radial-gradient(circle at 50% 50%, var(--pumpkin) 0 4px, transparent 5px);
  background-size: 520px 520px; }
.wrap { position: relative; z-index: 1; max-width: 1060px; margin: 0 auto; padding-inline: 16px; padding-block: 16px 64px; }
h1, h2, h3 { font-family: var(--font-display); line-height: 1.05; text-wrap: balance; margin: 0; font-weight: 800; }
h1 { font-size: clamp(2.3rem, 8vw, 4.3rem); letter-spacing: -0.01em; }
h2 { font-size: clamp(1.7rem, 5.5vw, 2.6rem); }
h3 { font-size: 1.35rem; font-weight: 700; }
p { margin: 0; }
button { font: inherit; color: inherit; cursor: pointer; }
a { color: var(--sky); font-weight: 700; }
:focus-visible { outline: 3px solid var(--sky); outline-offset: 3px; border-radius: 8px; }
.label { font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 800; color: var(--muted); }
.note { color: var(--muted); font-size: 0.95rem; max-width: 65ch; }

/* Barre du haut */
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-block: 4px 12px; }
.brand { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 800; font-size: 1.35rem; background: none; border: 0; padding: 0; }
.brand svg { width: 42px; height: 42px; }
.stamps-mini { display: flex; align-items: center; gap: 8px; background: var(--paper); border: 2.5px solid var(--line); border-radius: 999px; padding: 4px 12px 4px 6px; font-weight: 800; box-shadow: 3px 3px 0 var(--ink); }
.stamps-mini b { background: var(--sun); border-radius: 999px; padding: 0 9px; font-variant-numeric: tabular-nums; }

/* Héros */
.hero-home { display: grid; grid-template-columns: 1fr; gap: 20px; align-items: center; padding-block: 18px 30px; }
@media (min-width: 780px) { .hero-home { grid-template-columns: 1.25fr 1fr; } }
.hero-home .copy { display: grid; gap: 16px; min-width: 0; }
.tag { justify-self: start; background: var(--paper); border: 2.5px solid var(--line); border-radius: 999px; padding: 4px 14px; font-weight: 800; font-size: 0.92rem; transform: rotate(-2deg); }
.hero-home h1 .hl { background: linear-gradient(transparent 58%, var(--sun) 58% 92%, transparent 92%); padding-inline: 4px; }
.hero-home .lead { font-size: 1.12rem; color: var(--muted); max-width: 46ch; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; }
.btn { border: 3px solid var(--line); border-radius: 999px; padding: 10px 20px; font-weight: 800; font-family: var(--font-display); font-size: 1.1rem; background: var(--sun); color: var(--on-sun); box-shadow: 4px 4px 0 var(--ink); }
.btn:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--ink); }
.btn:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--ink); }
.btn.blue { background: var(--sky); color: #fff; }
.btn.ghost { background: var(--paper); }
.btn.small { font-size: 0.95rem; padding: 6px 14px; box-shadow: 3px 3px 0 var(--ink); }
.btn[disabled] { opacity: .45; cursor: default; }
.mascot-stage { position: relative; display: grid; place-items: center; min-height: 230px; }
.mascot-stage svg.mascot { width: min(300px, 80%); height: auto; }
.bubble { position: absolute; top: 4%; right: 4%; background: var(--paper); border: 2.5px solid var(--line); border-radius: 18px; padding: 8px 14px; font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; box-shadow: 3px 3px 0 var(--ink); transform: rotate(3deg); max-width: 60%; }

/* Bandeau parents */
.trust { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 14px; margin-block: 6px 34px; }
.trust div { background: var(--paper); border: 2.5px solid var(--line); border-radius: 18px; padding: 14px 16px; display: grid; grid-template-columns: 44px 1fr; gap: 12px; align-items: start; }
.trust svg { width: 44px; height: 44px; }
.trust strong { display: block; font-family: var(--font-display); font-size: 1.1rem; line-height: 1.2; }
.trust span { color: var(--muted); font-size: 0.93rem; }

/* Carnet de tampons */
.carnet { background: var(--bg-2); border: 3px solid var(--line); border-radius: var(--r); padding: 18px; display: grid; gap: 12px; margin-block: 0 34px; box-shadow: var(--pop); }
.carnet .row { justify-content: space-between; }
.stamp-row { display: flex; flex-wrap: wrap; gap: 10px; }
.stamp { width: 58px; height: 58px; border-radius: 50%; border: 3px dashed var(--soft-line); display: grid; place-items: center; background: transparent; padding: 0; }
.stamp svg { width: 40px; height: 40px; opacity: .25; filter: grayscale(1); }
.stamp.on { border: 3px solid var(--line); background: var(--paper); transform: rotate(-8deg); }
.stamp.on svg { opacity: 1; filter: none; }

/* Filtres et grille */
.moment { margin-block: 8px 34px; }
/* ---------- Ambiance de saison : fond, confettis et bandeau changent avec le calendrier ; les couleurs des fiches ne bougent pas ---------- */
.moment { --m-bg: #23264B; --m-title: #FFC23D; --m-text: #fff; background: var(--m-bg); color: var(--m-text); border: 3px solid var(--ink); border-radius: var(--r); box-shadow: var(--pop); padding: 20px 18px 22px; }
.moment h2 { color: var(--m-title); }
.moment .lead { color: var(--m-text); opacity: .92; }
.moment .card { color: var(--ink); }
.moment .btn.ghost { background: #fff; color: var(--ink); }
:root[data-moment="halloween"] { --bg: #FFE6D2; --bg-2: #FFF0E3; --c1: #FF7A1A; --c2: #23264B; --c3: #9B7BFF; }
:root[data-moment="halloween"] .moment { --m-bg: #1E1B33; --m-title: #FF8A1F; }
:root[data-moment="noel"] { --bg: #FCE4E4; --bg-2: #FFF3E6; --c1: #D7263D; --c2: #1E8A5A; --c3: #F2B705; }
:root[data-moment="noel"] .moment { --m-bg: #A61B2B; --m-title: #FFD76A; }
:root[data-moment="noel"] .countdown { background: #FFD76A; color: var(--ink); }
:root[data-moment="hiver"] { --bg: #E4F1FF; --bg-2: #F3F9FF; --c1: #FFFFFF; --c2: #7FB2F0; --c3: #B9D8FF; }
:root[data-moment="hiver"] .moment { --m-bg: #1F3A6E; --m-title: #BFE0FF; }
:root[data-moment="hiver"] .countdown { background: #7FB2F0; color: var(--ink); }
:root[data-moment="printemps"] { --bg: #E9F8E4; --bg-2: #FFF4F8; --c1: #FF7EB9; --c2: #2FB373; --c3: #FFC23D; }
:root[data-moment="printemps"] .moment { --m-bg: #1E6E47; --m-title: #FFD1E6; }
:root[data-moment="ete"] { --bg: #FFF4D1; --bg-2: #E5F6FF; --c1: #FFC23D; --c2: #3E7BFA; --c3: #FF6B4A; }
:root[data-moment="ete"] .moment { --m-bg: #0E5E96; --m-title: #FFE27A; }
:root[data-moment="automne"] { --bg: #FBEBD6; --bg-2: #FFF5E8; --c1: #C8641E; --c2: #2FB373; --c3: #8A4B1F; }
:root[data-moment="automne"] .moment { --m-bg: #6E3A14; --m-title: #FFC98A; }
:root[data-moment="paques"] { --bg: #F1F9E8; --bg-2: #FFF6E0; --c1: #FFC23D; --c2: #FF9DC4; --c3: #7FD28C; }
:root[data-moment="paques"] .moment { --m-bg: #5B3FA8; --m-title: #FFE27A; }
:root[data-moment="paques"] .countdown { background: #FFE27A; color: var(--ink); }
:root[data-moment] body::before { background-image: radial-gradient(circle at 12% 18%, var(--c1) 0 6px, transparent 7px), radial-gradient(circle at 88% 12%, var(--c2) 0 5px, transparent 6px), radial-gradient(circle at 78% 72%, var(--c3) 0 6px, transparent 7px), radial-gradient(circle at 6% 82%, var(--c1) 0 5px, transparent 6px), radial-gradient(circle at 50% 50%, var(--c2) 0 4px, transparent 5px); }

.moment .lead { margin-top: -6px; }
.countdown { font-family: "Baloo 2", system-ui, sans-serif; font-weight: 800; background: var(--pumpkin); color: #fff; border: 3px solid var(--ink); border-radius: 999px; padding: 4px 14px; box-shadow: 3px 3px 0 var(--ink); }
.moment-more { text-align: center; margin-top: 18px; }
.section-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px; margin-block: 0 14px; }
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-block: 0 22px; }
.chip { border: 2.5px solid var(--line); background: var(--paper); border-radius: 999px; padding: 5px 14px; font-weight: 800; font-size: 0.95rem; }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); gap: 22px; }
.card { --c: var(--sun); position: relative; background: var(--paper); border: 3px solid var(--line); border-radius: var(--r); padding: 0; text-align: left; display: grid; grid-template-rows: auto 1fr; overflow: hidden; box-shadow: var(--pop); }
.card:nth-child(3n+1) { transform: rotate(-0.6deg); }
.card:nth-child(3n+2) { transform: rotate(0.5deg); }
.card:hover { transform: translateY(-4px) rotate(0deg); box-shadow: 7px 9px 0 var(--ink); }
.card .art { background: color-mix(in srgb, var(--c) 26%, white); border-bottom: 3px solid var(--line); display: grid; place-items: center; padding-block: 16px; }
.card .art svg { width: 128px; height: 128px; }
.card .body { padding: 14px 16px 16px; display: grid; gap: 8px; align-content: start; min-width: 0; }
.card .cat { justify-self: start; background: var(--c); color: var(--ink); border: 2px solid var(--line); border-radius: 999px; padding: 1px 10px; font-weight: 800; font-size: 0.78rem; letter-spacing: 0.04em; text-transform: uppercase; }
.card p { color: var(--muted); font-size: 0.97rem; }
.meta { display: flex; flex-wrap: wrap; gap: 6px; }
.pill { display: inline-flex; align-items: center; gap: 5px; background: var(--bg); border-radius: 999px; padding: 2px 10px; font-weight: 800; font-size: 0.86rem; font-variant-numeric: tabular-nums; }
.dots { letter-spacing: 1px; color: var(--pumpkin); }
.done-badge { position: absolute; top: 12px; right: 12px; background: var(--leaf); color: #fff; border: 2.5px solid var(--line); border-radius: 999px; padding: 2px 12px; font-family: var(--font-display); font-weight: 800; transform: rotate(8deg); }
.card.idea { background: var(--bg-2); grid-template-rows: 1fr; border-style: dashed; box-shadow: none; transform: none; cursor: default; }
.card.idea .body { align-content: center; justify-items: start; gap: 10px; padding: 22px; }
.empty { color: var(--muted); padding-block: 24px; }
.art.photo { position: relative; padding: 0 !important; overflow: hidden; }
.art.photo img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.hero .art.photo img { aspect-ratio: 1; }
.art.photo .credit { position: absolute; left: 8px; bottom: 8px; background: var(--paper); border: 2px solid var(--line); border-radius: 999px; padding: 1px 10px; font-weight: 800; font-size: 0.8rem; }
.gold-box { display: grid; gap: 10px; margin-top: 14px; background: linear-gradient(135deg, #FFF6D0, #FFE7A1); border: 3px solid var(--line); border-radius: 18px; padding: 14px 16px; }
.gold-box strong { font-family: var(--font-display); font-size: 1.25rem; }
.stamp.gold { border-color: #C99A00; background: radial-gradient(circle, #FFF3B8, #FFD24A); box-shadow: 0 0 0 3px #FFE58A; }
.stamps-mini b.gold { background: #FFD24A; }
.lang select { font: inherit; font-weight: 800; font-size: 0.9rem; background: var(--paper); color: var(--ink); border: 2.5px solid var(--line); border-radius: 999px; padding: 4px 10px; box-shadow: 3px 3px 0 var(--ink); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr)); gap: 14px; }
.gallery figure { margin: 0; background: var(--bg-2); border: 2.5px solid var(--line); border-radius: 16px; overflow: hidden; }
.gallery img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-bottom: 2.5px solid var(--line); }
.gallery figcaption { padding: 6px 10px 8px; display: grid; font-size: 0.9rem; }
.gallery figcaption span { color: var(--muted); }
.gallery .cdc { color: var(--pumpkin) !important; font-weight: 800; }
.concours { display: grid; gap: 2px; background: var(--sun-soft); border: 2.5px dashed var(--line); border-radius: 14px; padding: 10px 14px; }
.concours strong { font-family: var(--font-display); font-size: 1.15rem; }
a.btn { text-decoration: none; display: inline-block; }
footer { margin-top: 44px; color: var(--muted); font-size: 0.9rem; display: grid; gap: 6px; }

/* Fiche ouverte */
.back { background: var(--paper); border: 2.5px solid var(--line); border-radius: 999px; padding: 5px 14px; font-weight: 800; box-shadow: 3px 3px 0 var(--ink); }
.hero { --c: var(--sun); display: grid; grid-template-columns: 1fr; gap: 20px; align-items: center; margin-block: 16px 22px; background: var(--paper); border: 3px solid var(--line); border-radius: var(--r); padding: 18px; box-shadow: var(--pop); }
@media (min-width: 740px) { .hero { grid-template-columns: 230px 1fr; } }
.hero .art { background: color-mix(in srgb, var(--c) 26%, white); border: 3px solid var(--line); border-radius: 18px; display: grid; place-items: center; padding: 14px; }
.hero .art svg { width: 100%; max-width: 190px; height: auto; }
.hero .intro { display: grid; gap: 12px; min-width: 0; }
.hero .intro > p { color: var(--muted); max-width: 60ch; font-size: 1.05rem; }
.facts-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
.fact { background: var(--bg); border-radius: 14px; padding: 8px 12px; }
.fact strong { display: block; font-family: var(--font-display); font-size: 1.15rem; font-variant-numeric: tabular-nums; line-height: 1.2; }
.skills { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.skill { background: var(--sun-soft); border: 2px solid var(--line); border-radius: 999px; padding: 1px 10px; font-weight: 800; font-size: 0.86rem; }

.tabs { display: flex; gap: 8px; overflow-x: auto; padding-block: 8px; margin-block: 0 18px; scrollbar-width: none; position: sticky; top: env(safe-area-inset-top, 0px); background: var(--bg); z-index: 3; }
.tab { background: var(--paper); border: 2.5px solid var(--line); border-radius: 999px; padding: 6px 16px; font-weight: 800; white-space: nowrap; }
.tab[aria-selected="true"] { background: var(--sun); box-shadow: 3px 3px 0 var(--ink); }
.panel { display: grid; gap: 18px; background: var(--paper); border: 3px solid var(--line); border-radius: var(--r); padding: 18px; }
.panel > p { max-width: 65ch; }

/* Matériel */
.check { display: grid; gap: 2px; list-style: none; padding: 0; margin: 0; }
.check label { display: grid; grid-template-columns: 30px 1fr; gap: 10px; align-items: start; padding: 10px 0; border-bottom: 2px dashed var(--soft-line); cursor: pointer; }
.check input { width: 24px; height: 24px; margin: 2px 0 0; accent-color: var(--leaf); }
.check .why { display: block; color: var(--muted); font-size: 0.92rem; }
.check input:checked + span { text-decoration: line-through; text-decoration-color: var(--muted); color: var(--muted); }
.progress { font-weight: 800; font-variant-numeric: tabular-nums; font-family: var(--font-display); font-size: 1.15rem; }
.row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

/* Mélange */
.calc { background: var(--bg-2); border: 2.5px solid var(--line); border-radius: 18px; padding: 16px; display: grid; gap: 14px; }
.stepper { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.stepper button { width: 42px; height: 42px; border-radius: 50%; border: 2.5px solid var(--line); background: var(--paper); font-size: 1.3rem; line-height: 1; font-weight: 800; }
.stepper output { font-family: var(--font-display); font-size: 1.8rem; font-weight: 800; min-width: 2ch; text-align: center; font-variant-numeric: tabular-nums; }
.seg { display: inline-flex; border: 2.5px solid var(--line); border-radius: 999px; overflow: hidden; background: var(--paper); }
.seg button { border: 0; background: none; padding: 6px 14px; font-weight: 800; }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.qty { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.qty div { background: var(--paper); border: 2px solid var(--line); border-radius: 14px; padding: 8px 12px; }
.qty strong { display: block; font-family: var(--font-display); font-size: 1.45rem; font-variant-numeric: tabular-nums; }
.timer { font-family: var(--font-display); font-size: 1.5rem; font-weight: 800; font-variant-numeric: tabular-nums; }

/* Étapes */
.session { display: grid; gap: 12px; }
.steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; counter-reset: s; }
.steps li { display: grid; grid-template-columns: 38px 1fr; gap: 12px; align-items: start; }
.steps li::before { counter-increment: s; content: counter(s); width: 34px; height: 34px; border-radius: 50%; background: var(--sun); border: 2.5px solid var(--line); color: var(--on-sun); display: grid; place-items: center; font-weight: 800; font-family: var(--font-display); }
.focus { background: var(--bg-2); border: 3px solid var(--line); border-radius: var(--r); padding: 22px; display: grid; gap: 18px; min-height: 280px; align-content: space-between; }
.focus .big { font-size: clamp(1.35rem, 4.8vw, 1.9rem); line-height: 1.3; font-family: var(--font-display); font-weight: 700; }
.bar { height: 12px; background: var(--paper); border: 2px solid var(--line); border-radius: 999px; overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--leaf); }
.dry { border: 2.5px dashed var(--line); border-radius: 18px; padding: 14px 16px; display: grid; gap: 8px; background: var(--bg-2); }
.science { background: color-mix(in srgb, var(--sky) 14%, white); border: 2.5px solid var(--line); border-radius: 18px; padding: 14px 16px; display: grid; gap: 6px; }
.science strong { font-family: var(--font-display); font-size: 1.15rem; }
.share-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.btn.share { color: #fff; text-decoration: none; }
.btn.share.wa { background: #1E9E57; }
.btn.share.pin { background: #C8102E; }
.btn.share.fb { background: #1877F2; }
.teste { display: inline-block; font-weight: 800; color: #1E7A4C; background: #E3F6EA; border: 2px solid #1E7A4C; border-radius: 999px; padding: 4px 12px; margin: 6px 0 0; }
.statique { background: var(--paper); border: 3px solid var(--line); border-radius: var(--r); padding: 20px; }
#print-area { display: none; }
@media print {
  body::before { display: none !important; }
  body > *:not(#print-area) { display: none !important; }
  #print-area { display: block !important; font: 12pt/1.45 Nunito, Arial, sans-serif; color: #000; }
  #print-area header { display: flex; justify-content: space-between; border-bottom: 2px solid #000; padding-bottom: 6px; margin-bottom: 10px; font-size: 10pt; }
  #print-area h1 { font: 800 24pt/1.1 "Baloo 2", Arial, sans-serif; margin: 6px 0; }
  #print-area h2 { font: 800 15pt "Baloo 2", Arial, sans-serif; margin: 14px 0 4px; break-after: avoid; }
  #print-area h3 { font-size: 12pt; margin: 8px 0 2px; }
  #print-area .print-art { float: right; width: 42mm; margin: 0 0 6px 10px; }
  #print-area .print-art svg { width: 42mm; height: 42mm; }
  #print-area ul.check { list-style: none; padding-left: 0; }
  #print-area ul.check li::before { content: "☐ "; }
  #print-area li { break-inside: avoid; margin-bottom: 2px; }
  #print-area footer { margin-top: 14px; font-size: 9pt; color: #444; border-top: 1px solid #999; padding-top: 6px; }
}
.badges { display: grid; gap: 10px; border-top: 2px dashed var(--soft-line); padding-top: 12px; }
.badge-msg { margin: 0; }
.badge-more summary { cursor: pointer; font-weight: 800; color: var(--sky); margin-bottom: 8px; }
.badge-row { display: flex; flex-wrap: wrap; gap: 8px; }
.badge { display: inline-flex; align-items: center; gap: 6px; border: 2.5px dashed var(--soft-line); border-radius: 999px; padding: 4px 12px 4px 6px; font-size: 14px; font-weight: 800; color: var(--muted); background: transparent; }
.badge .emo { font-size: 20px; filter: grayscale(1); opacity: .45; }
.badge .bp { font-weight: 700; font-size: 12px; opacity: .8; }
.badge.on { border: 2.5px solid var(--line); background: var(--paper); color: var(--ink); box-shadow: 2px 2px 0 var(--ink); }
.badge.on .emo { filter: none; opacity: 1; }
.badge-pop { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; background: rgb(35 38 75 / .45); padding: 16px; }
.badge-card { position: relative; overflow: hidden; max-width: 380px; width: 100%; text-align: center; background: var(--paper); border: 3px solid var(--line); border-radius: var(--r); box-shadow: var(--pop); padding: 26px 20px 22px; animation: pop .45s cubic-bezier(.2, 1.6, .4, 1); }
.big-badge { display: grid; justify-items: center; gap: 4px; margin: 6px 0 10px; }
.big-badge .emo { font-size: 64px; line-height: 1; }
.big-badge strong { font-family: var(--font-display); font-size: 1.5rem; }
.cf { position: absolute; top: -12px; left: var(--x); width: 9px; height: 14px; background: var(--c); border-radius: 2px; animation: fall 1.6s var(--d) ease-in forwards; }
@keyframes pop { from { transform: scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes fall { to { transform: translateY(460px) rotate(540deg); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .badge-card, .cf { animation: none; } .cf { display: none; } }
.done-box { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; background: color-mix(in srgb, var(--leaf) 18%, white); border: 3px solid var(--line); border-radius: 18px; padding: 14px 16px; }
.done-box strong { font-family: var(--font-display); font-size: 1.25rem; }

/* Dépannage */
.table-wrap { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; min-width: 520px; font-size: 0.97rem; }
th, td { text-align: left; vertical-align: top; padding: 10px 8px; border-bottom: 2px dashed var(--soft-line); }
th { font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
td:first-child { font-weight: 800; }
.bullets { margin: 0; padding-left: 20px; display: grid; gap: 8px; max-width: 65ch; }
.sources { margin-top: 26px; }

@media (prefers-reduced-motion: no-preference) {
  .card, .btn, .chip, .tab, .stamp { transition: transform .15s, box-shadow .15s, background .15s; }
  .mascot-stage svg.mascot { animation: bob 3.2s ease-in-out infinite; }
  @keyframes bob { 50% { transform: translateY(-8px) rotate(-2deg); } }
  .stamp.pop { animation: pop .5s ease-out; }
  @keyframes pop { 0% { transform: scale(.4) rotate(-30deg); } 70% { transform: scale(1.15) rotate(-4deg); } 100% { transform: scale(1) rotate(-8deg); } }
}