/* Le Grand Concours de la Patatine : étal de marché, ticket de pesée, ardoises. */

@font-face { font-family: "Bagel Fat One"; src: url("../assets/fonts/bagel-fat-one.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Bricolage Grotesque"; src: url("../assets/fonts/bricolage-grotesque-var.woff2") format("woff2"); font-weight: 200 800; font-display: swap; }
@font-face { font-family: "DM Mono"; src: url("../assets/fonts/dm-mono-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }

:root {
  --kraft: #cfa56a;
  --kraft-fonce: #b0844a;
  --papier: #fff6e0;
  --blanc: #fffdf5;
  --encre: #26170f;
  --rouge: #d62f23;
  --rouge-texte: #a81e15;
  --jaune: #f5c531;
  --ardoise: #1f2a26;
  --craie: #f3efe2;
  --sur-fond: var(--encre);
  --titre: "Bagel Fat One", "Arial Black", Impact, sans-serif;
  --texte: "Bricolage Grotesque", "Trebuchet MS", system-ui, sans-serif;
  --mono: "DM Mono", "Courier New", monospace;
  --dock: 92px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overscroll-behavior-y: contain; scroll-padding-top: 12px; overflow-x: clip; }
body {
  margin: 0; padding-bottom: calc(var(--dock) + 40px);
  font: 500 17px/1.45 var(--texte); color: var(--sur-fond);
  background-color: var(--kraft);
  background-image: url("../assets/kraft.svg");
  background-size: 240px 240px;
  overflow-x: clip;
}
h1, h2, h3, p, dl, dd, fieldset, legend, ol, ul { margin: 0; padding: 0; }
fieldset { border: 0; min-width: 0; }
ol, ul { list-style: none; }
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--rouge); outline-offset: 3px; border-radius: 6px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.evitement { position: absolute; left: 8px; top: -80px; z-index: 90; background: var(--encre); color: var(--papier); padding: 12px 16px; border-radius: 0 0 10px 10px; }
.evitement:focus { top: 0; }

/* ---------- Le store rayé de l'étal ---------- */
.store {
  height: 38px;
  background: repeating-linear-gradient(90deg, var(--rouge) 0 30px, var(--papier) 30px 60px);
  -webkit-mask: radial-gradient(circle at 15px 23px, #000 15px, transparent 15.5px) 0 0 / 30px 100%, linear-gradient(#000, #000) 0 0 / 100% 23px no-repeat;
  mask: radial-gradient(circle at 15px 23px, #000 15px, transparent 15.5px) 0 0 / 30px 100%, linear-gradient(#000, #000) 0 0 / 100% 23px no-repeat;
}

/* ---------- Mise en page ---------- */
.etal { max-width: 560px; margin: 0 auto; }
.affiche { position: relative; padding: 18px 20px 30px; }
.affiche-sur { font: 500 11px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; max-width: 68%; }

.titre { margin-top: 20px; font-family: var(--titre); font-weight: 400; line-height: 1; }
.titre span { display: block; width: fit-content; }
.titre-petit {
  font-size: clamp(21px, 6.4vw, 30px); background: var(--jaune); color: var(--encre);
  padding: 8px 14px 6px; border: 2.5px solid var(--encre); box-shadow: 4px 4px 0 var(--encre);
  transform: rotate(-3deg); text-transform: uppercase; letter-spacing: .01em;
}
.titre-de { font: 500 15px/1 var(--mono); text-transform: uppercase; letter-spacing: .2em; margin: 18px 0 2px 6px; transform: rotate(-3deg); }
.titre-gros {
  font-size: clamp(60px, 20.500vw, 132px); line-height: .9; color: var(--papier); margin-left: -3px;
  -webkit-text-stroke: 3px var(--encre); paint-order: stroke fill;
  text-shadow: 5px 6px 0 var(--encre); transform: rotate(-4deg); transform-origin: left bottom;
}
.affiche-logo {
  position: absolute; right: 14px; top: 10px; width: 92px; height: 92px; padding: 0; border: 0; background: none;
  transform: rotate(9deg); animation: dodo 4.200s ease-in-out infinite; -webkit-tap-highlight-color: transparent;
}
.affiche-logo svg, .dock-tete svg, .balance-patate svg, .puce-dessin svg { display: block; width: 100%; height: auto; }
@keyframes dodo { 50% { transform: rotate(5deg) translateY(-5px) scale(1.03); } }
.chatouille { animation: chatouille .5s ease !important; }
@keyframes chatouille { 20% { transform: rotate(-12deg) scale(1.1); } 50% { transform: rotate(10deg) scale(.95); } 80% { transform: rotate(-5deg); } }

.pastille {
  position: absolute; right: 0; top: -30px; z-index: 1; width: 96px; height: 96px; border-radius: 50%;
  display: grid; place-content: center; text-align: center; gap: 1px;
  background: var(--rouge); color: #fff; border: 2.5px solid var(--encre); box-shadow: 3px 4px 0 var(--encre);
  transform: rotate(12deg); font: 500 11px/1.1 var(--mono); text-transform: uppercase; letter-spacing: .06em;
  outline: 2px dashed rgba(255, 255, 255, .7); outline-offset: -8px;
}
.pastille b { font: 400 21px/1 var(--titre); letter-spacing: 0; text-transform: none; }

.ardoise-zone { position: relative; max-width: 350px; margin-top: 44px; }
.ardoise {
  margin: 0 46px 0 0; padding: 14px 16px; background: var(--ardoise); color: var(--craie);
  border: 6px solid #8a5a2b; border-radius: 6px; box-shadow: 4px 5px 0 var(--encre);
  transform: rotate(1.200deg); font: 500 15px/1.3 var(--mono); max-width: 330px;
}
.ardoise div { display: flex; align-items: baseline; gap: 8px; padding: 3px 0; }
.ardoise dt { text-transform: uppercase; font-size: 12px; letter-spacing: .1em; color: #c9d2c4; }
.ardoise dt::after { content: " :"; }
.ardoise dd { font: 400 21px/1.1 var(--titre); color: var(--jaune); }
.affiche-pitch { margin-top: 26px; font-size: 18px; line-height: 1.45; font-weight: 500; max-width: 34em; }
.affiche-liens { margin-top: 20px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; }
.lien { font-weight: 700; text-underline-offset: 4px; text-decoration-thickness: 2px; display: inline-flex; align-items: center; min-height: 44px; }

/* ---------- Boutons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; text-align: center; min-height: 54px; padding: 11px 22px 9px;
  font: 400 20px/1.15 var(--titre); letter-spacing: .01em; text-decoration: none; color: var(--encre);
  background: var(--blanc); border: 2.5px solid var(--encre); border-radius: 14px; box-shadow: 0 5px 0 var(--encre);
  transition: transform .1s, box-shadow .1s; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.btn:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--encre); }
.btn[disabled] { opacity: .6; }
.btn-rouge { background: var(--rouge); color: #fff; }
.btn-jaune { background: var(--jaune); }
.btn-large { width: 100%; }
.btn-fin { min-height: 46px; font: 700 15px/1.2 var(--texte); box-shadow: none; border-width: 2px; background: transparent; padding: 8px 14px; }
.btn-fin:active { transform: scale(.97); box-shadow: none; }

/* ---------- Le ticket (formulaire) ---------- */
.ticket { position: relative; margin: 14px 8px 0; background: var(--papier); color: var(--encre); }
.ticket::before, .ticket::after {
  content: ""; position: absolute; left: 0; right: 0; height: 9px;
  background: conic-gradient(from -45deg at 50% 100%, transparent 0, var(--papier) 1deg 89deg, transparent 90deg) 0 0 / 18px 100%;
}
.ticket::before { top: -9px; }
.ticket::after { bottom: -9px; transform: scaleY(-1); }
.ticket-tete { padding: 26px 16px 22px; text-align: center; }
.ticket-maison, .lot-num, .recu-maison { font: 500 12px/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.ticket-titre { font: 400 34px/1 var(--titre); margin: 6px 0 8px; }
.ticket-note { font-size: 15px; }
.avis-clos, .avis-depose { margin: 0 16px 18px; padding: 12px 14px; background: var(--ardoise); color: var(--craie); border-radius: 8px; font-weight: 700; }

.lot { position: relative; padding: 26px 14px 28px; border-top: 2px dashed rgba(38, 23, 15, .4); }
.lot::before, .lot::after { content: ""; position: absolute; top: -10px; width: 18px; height: 18px; border-radius: 50%; background: var(--kraft); }
.lot::before { left: -9px; }
.lot::after { right: -9px; }
.lot-num { color: var(--rouge-texte); }
.lot-titre { font: 400 27px/1.1 var(--titre); margin: 4px 0 14px; padding: 0; display: block; width: 100%; }
.lot-sous-titre { font: 400 19px/1.1 var(--titre); margin: 0 0 10px; padding: 0; }
.lot-aide { font-size: 14.500px; line-height: 1.4; color: #4f3a2b; margin: -6px 0 14px; }
.champ .lot-aide { margin: 8px 0 0; }
.lot-erreur { margin-top: 10px; color: var(--rouge-texte); font-weight: 700; font-size: 15px; padding-left: 26px; position: relative; }
.lot-erreur::before { content: "!"; position: absolute; left: 0; top: 1px; width: 19px; height: 19px; border-radius: 50%; background: var(--rouge-texte); color: #fff; font: 400 14px/20px var(--titre); text-align: center; }
.lot.en-erreur { box-shadow: inset 6px 0 0 var(--rouge); }

.champ { margin-top: 14px; }
.champ label, .coche span { display: block; font-weight: 700; font-size: 15.500px; margin-bottom: 6px; }
.saisie {
  display: block; width: 100%; min-height: 54px; padding: 12px 14px; font: 600 18px/1.3 var(--texte);
  background: var(--blanc); border: 2.5px solid var(--encre); border-radius: 12px; box-shadow: inset 0 3px 0 rgba(38, 23, 15, .08);
  -webkit-appearance: none; appearance: none;
}
.saisie::placeholder { color: #806a58; font-weight: 500; }
.saisie:focus-visible { outline-offset: 2px; border-radius: 12px; }
.saisie[readonly] { background: #f0e4c6; }
.saisie[aria-invalid="true"] { border-color: var(--rouge); }
.saisie-courte { max-width: 190px; }
textarea.saisie { resize: vertical; }
#lot-pseudo .btn-fin { margin-top: 18px; }

/* Choix (radios) */
.choix { display: grid; gap: 12px; }
.choix-2 { grid-template-columns: 1fr 1fr; }
.choix-3 { grid-template-columns: repeat(3, 1fr); }
.choix-4 { grid-template-columns: 1fr 1fr; }
.puce { position: relative; display: block; -webkit-tap-highlight-color: transparent; }
.puce input, .cal-case input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.puce-corps {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-align: center; height: 100%;
  min-height: 56px; padding: 10px 8px; font-weight: 700; font-size: 15.500px; line-height: 1.2;
  background: var(--blanc); border: 2.5px solid var(--encre); border-radius: 14px; box-shadow: 0 4px 0 var(--encre);
  transition: transform .1s, box-shadow .1s, background-color .1s;
}
.puce input:checked + .puce-corps { background: var(--jaune); transform: translateY(3px); box-shadow: 0 1px 0 var(--encre); }
.puce input:checked + .puce-corps::after {
  content: ""; position: absolute; top: -7px; right: -5px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--rouge) url("../assets/coche.svg") center / 14px no-repeat; border: 2px solid var(--encre);
}
.puce input:focus-visible + .puce-corps, .cal-case input:focus-visible + span { outline: 3px solid var(--rouge); outline-offset: 3px; }
.puce-dessin { width: 74px; }
.choix-teintes { grid-template-columns: 1fr 1fr; }
.choix-teintes .puce:last-child { grid-column: 1 / -1; }
.choix-teintes .puce-corps { flex-direction: row; justify-content: flex-start; gap: 9px; padding: 8px 10px; min-height: 56px; text-align: left; }
.puce-textes { display: block; min-width: 0; }
.puce-textes > span { display: block; }
.puce-sous { display: block; margin-top: 2px; font-size: 12.500px; font-weight: 500; line-height: 1.2; color: #4f3a2b; }
#zone-couleur .lot-aide { margin: -4px 0 12px; }
.pastille-teinte { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--encre); flex: none; }
.teinte-blond { background: #f0cf5a; } .teinte-chatain { background: #9a6a3a; } .teinte-brun { background: #5a3a22; }
.teinte-roux { background: #d9662b; } .teinte-noir { background: #1d1512; }

/* Calendrier */
.calendrier { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px 3px; margin: 0 -6px; transition: opacity .2s; }
.calendrier.inactif { opacity: .45; }
.cal-jour { text-align: center; font: 500 12px/1.6 var(--mono); color: #4f3a2b; }
.cal-case { position: relative; display: block; aspect-ratio: 1; min-height: 44px; -webkit-tap-highlight-color: transparent; }
.cal-case span {
  display: grid; place-items: center; height: 100%; font: 500 17px/1 var(--mono);
  background: var(--blanc); border: 2px solid var(--encre); border-radius: 10px; transition: transform .12s, background-color .12s;
}
.cal-case input:checked + span { background: var(--rouge); color: #fff; transform: rotate(-5deg) scale(1.1); box-shadow: 2px 3px 0 var(--encre); position: relative; z-index: 1; }
.coche { display: flex; align-items: center; gap: 12px; min-height: 48px; margin-top: 14px; }
.coche input { width: 26px; height: 26px; flex: none; accent-color: var(--rouge); margin: 0; }
.coche span { margin: 0; }

/* Balance, afficheurs, curseurs */
/* La balance : le bébé-patate sur son plateau, l'écran dans le socle. Le dessin est piloté par js/mamie.js (pesee). */
.balance { display: flex; flex-direction: column; align-items: center; margin-bottom: 14px; }
.balance-patate { display: block; width: min(100%, 264px); flex: none; }
.pesee-svg { overflow: visible; }
.balance-ecran { margin-top: -5px; position: relative; }
.p-boucle { transform: translate(120px, 110px); }
.craque .p-boucle { transition: transform .5s cubic-bezier(.2, 1.5, .4, 1); }
.p-bebe.frele { transform-origin: 120px 140px; animation: frele 1.800s ease-in-out infinite; }
.p-bebe.tremble { animation: tremble .13s linear infinite; }
.p-goutte { animation: goutte 1.300s ease-in infinite; transform-box: fill-box; }
.p-goutte2 { animation-delay: .45s; } .p-goutte3 { animation-delay: .85s; }
@keyframes frele { 0%, 100% { transform: rotate(-3.500deg); } 50% { transform: rotate(3.500deg); } }
@keyframes tremble { 0%, 100% { transform: translateX(-1.300px); } 50% { transform: translateX(1.300px); } }
@keyframes goutte { 0% { translate: 0 0; opacity: 0; } 20% { opacity: 1; } 100% { translate: 0 16px; opacity: 0; } }
.balance-ecran, .afficheur {
  display: inline-flex; align-items: baseline; gap: 6px; padding: 8px 14px 6px; background: var(--ardoise); color: var(--jaune);
  border-radius: 10px; border: 2.5px solid var(--encre); font: 500 30px/1.1 var(--mono); box-shadow: inset 0 3px 0 rgba(0, 0, 0, .35);
}
.balance-ecran input { width: 5ch; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: right; border-radius: 4px; min-height: 40px; }
.balance-ecran input:focus-visible { outline-color: var(--jaune); }
.balance-ecran > span:last-child { font-size: 17px; color: var(--craie); }
.balance.affolee { animation: affolee .6s; }
@keyframes affolee { 15% { transform: translateX(-7px) rotate(-2deg); } 35% { transform: translateX(7px) rotate(2deg); } 55% { transform: translateX(-5px); } 75% { transform: translateX(4px); } }
.afficheur { margin-bottom: 12px; }

.curseur { display: flex; align-items: center; gap: 10px; }
.pas {
  flex: none; width: 48px; height: 48px; border-radius: 50%; border: 2.5px solid var(--encre); background: var(--blanc);
  font: 400 26px/1 var(--titre); box-shadow: 0 3px 0 var(--encre); padding: 0 0 2px; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.pas:active { transform: translateY(3px); box-shadow: none; }
input[type="range"] { -webkit-appearance: none; appearance: none; flex: 1; min-width: 0; height: 48px; margin: 0; background: transparent; cursor: pointer; --rempli: 50%; }
input[type="range"]::-webkit-slider-runnable-track { height: 14px; border-radius: 9px; border: 2.5px solid var(--encre); background: linear-gradient(90deg, var(--rouge) var(--rempli), var(--blanc) var(--rempli)); }
input[type="range"]::-moz-range-track { height: 9px; border-radius: 9px; border: 2.5px solid var(--encre); background: linear-gradient(90deg, var(--rouge) var(--rempli), var(--blanc) var(--rempli)); }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 36px; height: 30px; margin-top: -11px; border-radius: 48% 52% 46% 54% / 56% 50% 50% 44%; background: var(--jaune); border: 2.5px solid var(--encre); box-shadow: 0 3px 0 var(--encre); }
input[type="range"]::-moz-range-thumb { width: 32px; height: 26px; border-radius: 48% 52% 46% 54% / 56% 50% 50% 44%; background: var(--jaune); border: 2.5px solid var(--encre); box-shadow: 0 3px 0 var(--encre); }
.curseur + .lot-aide { margin: 12px 0 0; }
#zone-couleur { margin-top: 24px; }

/* ---------- Ticket de pesée (récapitulatif) ---------- */
.recap { position: relative; padding: 30px 14px 34px; border-top: 2px dashed rgba(38, 23, 15, .4); background: repeating-linear-gradient(-45deg, transparent 0 12px, rgba(38, 23, 15, .05) 12px 24px); }
.recu { position: relative; padding: 22px 16px 18px; background: #fff; border: 2px solid var(--encre); box-shadow: 5px 6px 0 var(--encre); transform: rotate(-1.200deg); font-family: var(--mono); }
.recu-maison { text-align: center; font-size: 11px; }
.recu-titre { font: 400 30px/1 var(--titre); text-align: center; margin: 6px 0 10px; }
.recu-meta { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-block: 2px dashed var(--encre); font-size: 14px; overflow-wrap: anywhere; }
.recu-meta span:last-child { font-weight: 700; text-align: right; }
.recu-lignes { margin: 10px 0 0; font-size: 14px; }
.recu-ligne { display: flex; align-items: baseline; gap: 6px; padding: 4px 0; }
.recu-ligne dt { flex: 1; min-width: 30%; display: flex; align-items: baseline; gap: 6px; text-transform: uppercase; font-size: 12px; letter-spacing: .04em; }
.recu-ligne dt::after { content: ""; flex: 1; border-bottom: 2px dotted rgba(38, 23, 15, .35); }
.recu-ligne dd { flex: none; max-width: 64%; text-align: right; overflow-wrap: anywhere; }
.recu-ligne.vide dd { color: #7a6654; }
.recu-bonus { margin-top: 12px; padding: 10px 12px; background: var(--papier); border-left: 5px solid var(--jaune); font: 600 15px/1.4 var(--texte); overflow-wrap: anywhere; }
.recu-code-barres { height: 46px; margin: 16px 0 8px; background: repeating-linear-gradient(90deg, var(--encre) 0 2px, transparent 2px 5px, var(--encre) 5px 9px, transparent 9px 11px, var(--encre) 11px 12px, transparent 12px 17px); }
.recu-pied { font-size: 11.500px; text-align: center; line-height: 1.4; }
.tampon {
  position: absolute; right: 8px; top: 96px; width: 128px; height: 128px; border-radius: 50%; display: grid; place-content: center; text-align: center; gap: 2px;
  color: var(--rouge); border: 5px double var(--rouge); font: 500 11px/1.1 var(--mono); text-transform: uppercase; letter-spacing: .1em;
  transform: rotate(-14deg); opacity: 0; pointer-events: none; background: rgba(255, 255, 255, .82);
}
.tampon b { font: 400 25px/1 var(--titre); letter-spacing: .02em; }
.tampon.pose { opacity: .94; }
.tampon.frappe { animation: frappe .5s cubic-bezier(.2, 1.4, .4, 1) both; }
@keyframes frappe { 0% { transform: rotate(-30deg) scale(3); opacity: 0; } 60% { opacity: 1; } 100% { transform: rotate(-14deg) scale(1); opacity: .94; } }
.recap-avis { margin: 22px 0 0; padding: 10px 12px; border: 2px dashed var(--rouge-texte); border-radius: 8px; color: var(--rouge-texte); font-weight: 700; font-size: 15px; line-height: 1.35; background: rgba(255, 255, 255, .7); }
.recap-erreur { margin: 18px 0 0; }
.recap-actions { display: grid; gap: 16px; margin-top: 26px; }
.etat-valide .lot, .etat-valide .ticket-note, .paris-clos.etat-valide #avis-clos { display: none; }

/* ---------- Le comptoir de Mamie ---------- */
.dock {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; display: flex; align-items: center; gap: 10px;
  min-height: 70px; padding: 9px 12px calc(9px + env(safe-area-inset-bottom)) 88px;
  background: var(--encre); color: var(--papier); border-top: 4px solid var(--jaune);
}
.dock-tete { position: absolute; left: 6px; bottom: calc(4px + env(safe-area-inset-bottom)); width: 78px; padding: 0; border: 0; background: none; transform-origin: 50% 100%; -webkit-tap-highlight-color: transparent; }
.dock-bulle { flex: 1; min-width: 0; }
.dock-nom { display: block; font: 500 10.500px/1.2 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--jaune); }
.dock-texte { font-size: 14.500px; line-height: 1.32; font-weight: 500; margin-top: 2px; overflow-wrap: anywhere; }
.dock-compteur { flex: none; font: 500 13px/1 var(--mono); background: var(--jaune); color: var(--encre); padding: 7px 8px 6px; border-radius: 8px; }
.dock-compteur:empty { display: none; }
.dock-secret { display: inline-flex; align-items: center; min-height: 44px; color: var(--jaune); font-weight: 700; text-underline-offset: 4px; }
.dock.parle .dock-tete { animation: hop .45s cubic-bezier(.3, 1.5, .5, 1); }
.dock.parle .dock-texte { animation: apparait .3s ease both; }
@keyframes hop { 30% { transform: translateY(-9px) rotate(-5deg); } 60% { transform: translateY(0) rotate(3deg); } }
@keyframes apparait { from { opacity: 0; transform: translateY(5px); } }
.m-oh { display: none; }
.humeur-oh .m-oh { display: inline; }
.humeur-oh .m-sourire { display: none; }

/* ---------- Pied ---------- */
.pied { max-width: 560px; margin: 40px auto 0; padding: 0 20px; font-size: 14.500px; }
.pied p + p { margin-top: 6px; display: flex; align-items: center; gap: 10px; }
.lune { width: 44px; height: 44px; border: 0; background: none; padding: 0; display: inline-grid; place-items: center; }
.lune span { width: 22px; height: 22px; border-radius: 50%; box-shadow: inset -7px -3px 0 0 var(--sur-fond); transform: rotate(-20deg); }
.bandeau-demo { position: fixed; top: 0; right: 0; z-index: 40; margin: 0; padding: 5px 10px; background: var(--encre); color: var(--jaune); font: 500 10.500px/1.2 var(--mono); letter-spacing: .06em; text-transform: uppercase; border-radius: 0 0 0 10px; }

/* ---------- Effets ---------- */
.pluie { position: fixed; inset: 0; z-index: 80; pointer-events: none; overflow: hidden; }
.pluie-patate { position: absolute; top: 0; will-change: transform; }
.pluie-patate svg { display: block; width: 100%; height: auto; }
.ballon { position: fixed; left: 0; top: 0; z-index: 82; width: 64px; pointer-events: none; will-change: transform; }
.ballon-balle { display: block; will-change: transform; }
.ballon-balle svg { display: block; width: 100%; height: auto; }
.epluchure { position: fixed; z-index: 85; width: 12px; height: 5px; border-radius: 4px; background: #b98228; border: 1px solid var(--encre); pointer-events: none; }
.secousse { animation: secousse .5s; }
@keyframes secousse { 20% { transform: translateX(-9px); } 40% { transform: translateX(9px); } 60% { transform: translateX(-6px); } 80% { transform: translateX(5px); } }

@media (hover: hover) and (pointer: fine) {
  body { cursor: url("../assets/curseur.svg") 3 3, auto; }
  a, button, label, .puce input, .cal-case input, input[type="range"], summary { cursor: url("../assets/curseur-clic.svg") 3 3, pointer; }
  .btn:hover { transform: translateY(-2px); box-shadow: 0 7px 0 var(--encre); }
  .btn-fin:hover { transform: none; box-shadow: none; background: rgba(38, 23, 15, .08); }
  .puce:hover .puce-corps { background: #fff1bd; }
  .cal-case:hover span { background: #fff1bd; }
  .cal-case input:checked + span { background: var(--rouge); }
}

/* ---------- Page classement ---------- */
.affiche-mini { padding-bottom: 8px; }
.affiche-mini .titre { margin-top: 36px; }
.affiche-mini .titre-gros { font-size: clamp(56px, 17vw, 92px); }
.affiche-mini .affiche-logo { width: 74px; height: 74px; }
.bloc { margin: 30px 12px 0; }
.bloc-titre { font: 400 28px/1.05 var(--titre); margin-bottom: 14px; }
.bloc-note { font-size: 15.500px; margin-top: 10px; }

.scelles { position: relative; padding: 26px 18px 24px; background: var(--papier); color: var(--encre); border: 2.5px solid var(--encre); box-shadow: 5px 6px 0 var(--encre); transform: rotate(-.8deg); overflow: hidden; }
.scelles::before { content: ""; position: absolute; left: -10%; right: -10%; top: 44px; height: 30px; background: repeating-linear-gradient(-45deg, var(--jaune) 0 16px, var(--encre) 16px 32px); transform: rotate(-4deg); opacity: .95; }
.scelles-tampon { position: relative; display: inline-block; margin-top: 62px; padding: 8px 14px 4px; font: 400 clamp(34px, 11vw, 52px)/1 var(--titre); color: var(--rouge); border: 5px double var(--rouge); transform: rotate(-5deg); text-transform: uppercase; }
.scelles p { margin-top: 16px; }

.decompte { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.decompte div { background: var(--ardoise); border: 2.5px solid var(--encre); border-radius: 10px; padding: 10px 4px 8px; text-align: center; color: var(--craie); box-shadow: 0 4px 0 var(--encre); }
.decompte b { display: block; font: 500 clamp(26px, 9vw, 40px)/1 var(--mono); color: var(--jaune); font-variant-numeric: tabular-nums; }
.decompte span { font: 500 11px/1.4 var(--mono); text-transform: uppercase; letter-spacing: .08em; }

.cageot { display: flex; flex-wrap: wrap; gap: 12px 10px; }
.cageot li { position: relative; padding: 9px 14px 8px 30px; background: var(--kraft-fonce); color: #fff; border: 2px solid var(--encre); border-radius: 6px 12px 12px 6px; font-weight: 700; font-size: 15.500px; box-shadow: 2px 3px 0 var(--encre); max-width: 100%; overflow-wrap: anywhere; background: #7a4f22; }
.cageot li::before { content: ""; position: absolute; left: 10px; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; background: var(--kraft); border: 2px solid var(--encre); }
.cageot li:nth-child(3n) { transform: rotate(-2.500deg); } .cageot li:nth-child(3n+1) { transform: rotate(1.500deg); } .cageot li:nth-child(4n) { background: var(--ardoise); }
.compte-gros { font: 400 clamp(72px, 24vw, 120px)/.9 var(--titre); color: var(--papier); -webkit-text-stroke: 3px var(--encre); paint-order: stroke fill; text-shadow: 4px 5px 0 var(--encre); }
.compte-ligne { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; }
.compte-ligne p { font: 400 24px/1.1 var(--titre); padding-bottom: 8px; }

.stats { display: grid; gap: 14px; }
.stat { padding: 14px 16px 16px; background: var(--ardoise); color: var(--craie); border: 5px solid #8a5a2b; border-radius: 6px; box-shadow: 3px 4px 0 var(--encre); font-size: 16px; line-height: 1.35; }
.stat b { display: block; font: 400 40px/1 var(--titre); color: var(--jaune); margin-bottom: 4px; }
.stat:nth-child(odd) { transform: rotate(-.7deg); } .stat:nth-child(even) { transform: rotate(.6deg); }

.fiche { background: var(--papier); color: var(--encre); border: 2.5px solid var(--encre); box-shadow: 5px 6px 0 var(--encre); padding: 20px 16px; }
.fiche-prenom { font: 400 clamp(46px, 15vw, 76px)/.95 var(--titre); color: var(--rouge); overflow-wrap: anywhere; }
.fiche dl { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; margin-top: 16px; font-family: var(--mono); }
.fiche dt { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: #4f3a2b; }
.fiche dd { font-size: 16px; }

.podium { display: grid; grid-template-columns: 1fr 1.150fr 1fr; align-items: end; gap: 6px; margin-top: 8px; }
.marche { display: flex; flex-direction: column; align-items: center; min-width: 0; }
.marche-patate { width: 62%; max-width: 92px; animation: saute .6s cubic-bezier(.3, 1.5, .5, 1) both; }
.marche-pseudo { font-weight: 800; font-size: 14.500px; line-height: 1.15; text-align: center; margin: 4px 0 6px; overflow-wrap: anywhere; max-width: 100%; }
.marche-socle { width: 100%; display: grid; place-content: start center; padding-top: 8px; text-align: center; background: var(--rouge); color: #fff; border: 2.5px solid var(--encre); border-bottom: 0; border-radius: 10px 10px 0 0; transform-origin: 50% 100%; animation: pousse .7s cubic-bezier(.2, .9, .3, 1) both; font-family: var(--mono); font-size: 12px; }
.marche-socle b { font: 400 34px/1 var(--titre); display: block; }
.marche-1 { order: 2; } .marche-2 { order: 1; } .marche-3 { order: 3; }
.marche-1 .marche-socle { height: 150px; background: var(--jaune); color: var(--encre); animation-delay: 1.100s; }
.marche-2 .marche-socle { height: 108px; animation-delay: .6s; }
.marche-3 .marche-socle { height: 78px; background: var(--ardoise); animation-delay: .1s; }
.marche-1 .marche-patate { animation-delay: 1.700s; } .marche-2 .marche-patate { animation-delay: 1.200s; } .marche-3 .marche-patate { animation-delay: .7s; }
.marche-1 .marche-pseudo { font-size: 17px; }
@keyframes pousse { from { transform: scaleY(0); } }
@keyframes saute { from { transform: translateY(40px) scale(.2); opacity: 0; } }
.podium-sol { height: 8px; background: var(--encre); border-radius: 4px; }

.rangs { display: grid; gap: 10px; }
.rang { background: var(--papier); color: var(--encre); border: 2.5px solid var(--encre); border-radius: 12px; box-shadow: 0 4px 0 var(--encre); }
.rang summary { display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 8px 14px; list-style: none; font-weight: 700; -webkit-tap-highlight-color: transparent; }
.rang summary::-webkit-details-marker { display: none; }
.rang-num { flex: none; width: 36px; font: 400 24px/1 var(--titre); color: var(--rouge-texte); }
.rang-pseudo { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.rang-points { flex: none; font: 500 15px/1 var(--mono); background: var(--encre); color: var(--jaune); padding: 7px 9px 6px; border-radius: 8px; }
.rang-detail { padding: 4px 14px 14px; font: 500 13.500px/1.35 var(--mono); }
.rang-detail div { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; border-top: 1px dashed rgba(38, 23, 15, .3); }
.rang-detail dt { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.rang-detail dt small { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: #4f3a2b; }
.rang-detail dd { flex: none; font-weight: 700; }
.rang-detail .gagne dd { color: var(--rouge-texte); }

.palmes { display: grid; gap: 8px; }
.palmes li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; padding: 10px 12px; background: var(--papier); color: var(--encre); border-left: 6px solid var(--jaune); border-radius: 4px; }
.palmes small { font: 500 11px/1.3 var(--mono); text-transform: uppercase; letter-spacing: .08em; width: 100%; color: #4f3a2b; }
.palmes b { font-weight: 800; overflow-wrap: anywhere; }
.palmes span { font: 500 13px/1.3 var(--mono); }

.lecture { background: var(--ardoise); color: var(--craie); border: 6px solid #8a5a2b; border-radius: 6px; padding: 20px 16px 16px; box-shadow: 4px 5px 0 var(--encre); }
.lecture-texte { font: 400 clamp(22px, 6.500vw, 30px)/1.2 var(--titre); color: var(--jaune); min-height: 3.6em; overflow-wrap: anywhere; }
.lecture-auteur { margin-top: 10px; font: 500 13px/1.3 var(--mono); }
.lecture-nav { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.lecture-nav .btn { min-height: 48px; font-size: 16px; padding: 8px 14px 6px; box-shadow: 0 4px 0 #000; }

/* ---------- Coulisses et 404 ---------- */
.refus { display: grid; gap: 18px; }
.refus li { position: relative; padding: 18px 16px 14px; background: var(--papier); color: var(--encre); border: 2px solid var(--encre); box-shadow: 4px 5px 0 var(--encre); }
.refus li:nth-child(odd) { transform: rotate(-.8deg); } .refus li:nth-child(even) { transform: rotate(.7deg); }
.refus blockquote { margin: 0; font-size: 17px; font-weight: 600; padding-right: 64px; }
.refus p { margin-top: 10px; font: 500 13px/1.4 var(--mono); color: #4f3a2b; }
.refus li::after { content: "Refusé"; position: absolute; right: 8px; top: 12px; padding: 4px 7px 2px; font: 400 15px/1 var(--titre); text-transform: uppercase; color: var(--rouge); border: 3px double var(--rouge); transform: rotate(9deg); background: rgba(255, 255, 255, .7); }
.perdu { padding: 30px 20px; }
.perdu p.perdu-code { max-width: none; margin: 0; font: 400 clamp(120px, 40vw, 220px)/.8 var(--titre); color: var(--papier); -webkit-text-stroke: 4px var(--encre); paint-order: stroke fill; text-shadow: 7px 8px 0 var(--encre); transform: rotate(-5deg); display: flex; align-items: center; }
.perdu-code span { width: .62em; display: inline-block; transform: rotate(14deg); animation: dodo 3.500s ease-in-out infinite; }
.perdu-code svg { display: block; width: 100%; height: auto; }
.perdu h1 { font: 400 clamp(34px, 10vw, 52px)/1 var(--titre); margin-top: 34px; }
.perdu p { margin-top: 14px; font-size: 18px; max-width: 30em; }

/* ---------- Mode nuit de la naissance ---------- */
.nuit { --kraft: #1c2038; --kraft-fonce: #2c3156; --sur-fond: #f3ead2; }
.nuit body { background-image: radial-gradient(circle at 12% 18%, #fff 0 1px, transparent 1.5px), radial-gradient(circle at 72% 9%, #fff 0 1.2px, transparent 1.7px), radial-gradient(circle at 41% 63%, #ffe9a8 0 1px, transparent 1.5px), radial-gradient(circle at 88% 77%, #fff 0 1px, transparent 1.5px); background-size: 260px 260px, 310px 310px, 220px 220px, 370px 370px; }
.nuit .ticket, .nuit .scelles, .nuit .fiche, .nuit .rang, .nuit .refus li, .nuit .palmes li { --papier: #efe3c2; --blanc: #f8f0d8; }
.nuit .titre-gros, .nuit .compte-gros, .nuit .perdu-code { color: var(--jaune); }
.nuit .lune span { box-shadow: inset -7px -3px 0 0 var(--jaune); }
.nuit .btn-fin { border-color: currentColor; }
.nuit .ticket .btn-fin { border-color: var(--encre); }
.nuit .affiche > .lien, .nuit .affiche-liens .lien { color: var(--sur-fond); }

/* ---------- Grand écran ---------- */
@media (min-width: 480px) {
  .choix-4 { grid-template-columns: repeat(4, 1fr); }
  .lot, .recap { padding-inline: 26px; }
  .calendrier { margin: 0; gap: 8px; }
  .stats { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1000px) {
  body { padding-bottom: 60px; }
  .etal { max-width: 1120px; display: grid; grid-template-columns: minmax(0, 1fr) 520px; gap: 0 72px; align-items: start; padding: 0 32px; }
  .affiche { position: sticky; top: 0; padding: 28px 0 0; }
  .titre-gros { font-size: 108px; }
  .affiche-logo { width: 120px; height: 120px; right: 40px; top: 30px; }
  .ardoise-zone { max-width: 400px; }
  .ticket { margin: 48px 0 0; }
  .etal-large { display: block; max-width: 760px; }
  .etal-large .affiche { position: relative; padding-inline: 12px; }
  .dock { left: max(32px, calc(50% - 528px)); right: auto; bottom: 22px; width: 440px; border: 3px solid var(--jaune); border-radius: 18px; padding: 12px 14px 12px 104px; min-height: 84px; box-shadow: 5px 6px 0 rgba(0, 0, 0, .35); }
  .dock-tete { width: 92px; left: 6px; bottom: 6px; }
  .dock-texte { font-size: 15.500px; }
  .page-large .dock { left: auto; right: 28px; width: 380px; }
  .pied { max-width: 1120px; padding: 0 32px; }
  .page-bulletin .pied { padding-left: calc(32px + 600px); max-width: none; margin-inline: auto; width: min(100%, 1184px); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}