:root{--fond:#e9f0e4;--surface:#fffefb;--surface-2:#f3e6d4;--texte:#2a1e17;--texte-doux:#5b4a3f;--accent:#c2410c;--accent-fonce:#9a330a;--sur-accent:#fff;--signal-ok:#2f6b4f;--trait:#e3d3bd;--miel:#f2b544;--sauge:#a8c3a0;
--rayon-s:12px;--rayon-m:22px;--rayon-l:32px;--rayon-pilule:999px;--espace:8px;--espace-2:16px;--espace-3:24px;--espace-4:40px;
--police-titre:"Bricolage",system-ui,sans-serif;--police-texte:system-ui,-apple-system,"Segoe UI",sans-serif;
--duree-appui:80ms;--duree-court:150ms;--duree-entree:320ms;--duree-ecart:50ms;--duree-chiffre:1200ms;--courbe-standard:cubic-bezier(.2,0,0,1);--courbe-entree:cubic-bezier(.05,.7,.1,1);--glisse:16px;--survol-monte:-2px;--echelle-appui:.96;color-scheme:light}
@font-face{font-family:"Bricolage";src:url(/fonts/bricolage.woff2) format("woff2");font-weight:200 800;font-display:swap}
*{box-sizing:border-box}
body{margin:0;overflow-x:clip;background:radial-gradient(60% 50% at 85% 10%,#f6d48a 0,transparent 70%),radial-gradient(50% 40% at 5% 30%,#b9d3ae 0,transparent 70%),linear-gradient(180deg,#dfeAd5 0,var(--fond) 900px) no-repeat,var(--fond);color:var(--texte);font:17px/1.6 var(--police-texte)}
.wrap{max-width:760px;margin:0 auto;padding:var(--espace-2)}
h1,h2,h3{font-family:var(--police-titre);line-height:1.1;letter-spacing:-.02em}
h1{font-size:clamp(2.2rem,7vw,3.6rem);font-weight:800;margin:.2em 0}
h2{font-size:1.5rem;font-weight:700;margin-top:var(--espace-4)}
a{color:var(--accent-fonce)}
nav{display:flex;gap:var(--espace);overflow-x:auto;padding:var(--espace) 0;font-size:.95rem}
nav a{white-space:nowrap;padding:10px 14px;border-radius:var(--rayon-pilule);background:var(--surface);border:1px solid var(--trait);text-decoration:none;color:var(--texte);transition:transform var(--duree-court) var(--courbe-standard)}
nav a:hover{transform:translateY(var(--survol-monte))}
section{background:var(--surface);border:1px solid var(--trait);border-radius:var(--rayon-l);padding:var(--espace-3);margin:var(--espace-3) 0;box-shadow:0 1px 0 var(--trait),0 18px 40px -28px var(--accent-fonce)}
label{display:block;margin:12px 0 4px;font-weight:600}
input{width:100%;padding:12px 14px;font-size:1rem;border:1.5px solid var(--texte-doux);border-radius:var(--rayon-s);background:var(--fond);color:var(--texte);transition:border-color var(--duree-court) var(--courbe-standard)}
input:focus-visible,a:focus-visible,button:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
button,.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;margin-top:var(--espace-2);padding:12px 26px;font:700 1.05rem var(--police-titre);background:var(--accent);color:var(--sur-accent);border:0;border-radius:var(--rayon-pilule);text-decoration:none;cursor:pointer;transition:transform var(--duree-court) var(--courbe-standard),background-color var(--duree-court) var(--courbe-standard)}
button:hover,.btn:hover{transform:translateY(var(--survol-monte));background:var(--accent-fonce)}
button:active,.btn:active{transform:scale(var(--echelle-appui));transition-duration:var(--duree-appui)}
.btn-2{background:transparent;color:var(--accent-fonce);border:2px solid var(--accent-fonce)}
.btn-2:hover{background:var(--surface-2)}
.r{margin-top:var(--espace-2);font:700 1.6rem var(--police-titre);color:var(--signal-ok)}
.r:not(:empty){animation:monte var(--duree-entree) var(--courbe-entree)}
small{color:var(--texte-doux);display:block;margin-top:var(--espace)}
footer{font-size:.95rem;margin-top:var(--espace-4);border-top:1px solid var(--trait);padding:var(--espace-2) 0}
footer a{display:inline-block;margin-right:var(--espace-2);padding:10px 0}
.hero{display:grid;gap:var(--espace-3);align-items:center;padding:var(--espace-3) 0}
.pastille{display:inline-block;padding:6px 14px;border-radius:var(--rayon-pilule);background:var(--texte);color:var(--surface);font-weight:700;font-size:1rem}
.aide{font-size:1.2rem;font-weight:600;color:var(--texte);margin:0}
.scene{position:relative;margin:0;width:100%;max-width:480px;justify-self:center}
.scene img{position:relative;display:block;width:100%;height:auto;border-radius:var(--rayon-l);box-shadow:0 30px 60px -30px #5b3a1a,0 2px 0 var(--trait);animation:monte var(--duree-entree) var(--courbe-entree) both}
.halo{position:absolute;border-radius:var(--rayon-l)}.halo.h1{width:46%;height:46%;right:-6%;top:-6%;background:var(--miel);transform:rotate(8deg)}.halo.h2{width:36%;height:36%;left:-6%;bottom:-8%;background:var(--sauge);border-radius:50%}
.carte-chiffre{position:absolute;left:-4%;bottom:6%;display:grid;padding:16px 22px;background:linear-gradient(160deg,#fff 0,var(--surface) 60%,#fbefe0 100%);border:1px solid var(--trait);border-radius:var(--rayon-m);box-shadow:0 20px 40px -18px #5b3a1a,inset 0 1px 0 #fff;animation:monte var(--duree-entree) var(--courbe-entree) both;animation-delay:calc(var(--duree-ecart)*4)}
.formule{font-size:1rem;color:var(--texte-doux);font-weight:600}.chiffre{font:800 clamp(3rem,10vw,4.6rem)/1 var(--police-titre);color:var(--accent);font-variant-numeric:tabular-nums}.unite{font-size:1rem;font-weight:700;color:var(--texte)}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:var(--espace-2)}.actions .btn{margin-top:0}.btn-pack{font-size:1rem;padding:10px 20px;gap:8px}.btn-pack span{font-weight:600;font-size:.9rem;padding:2px 10px;border-radius:var(--rayon-pilule);background:var(--surface-2);color:var(--texte)}
.pastille-ex{justify-self:start;margin-bottom:6px;padding:3px 10px;border-radius:var(--rayon-pilule);background:var(--texte);color:var(--surface);font-size:.8rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.carte-chiffre{animation:monte var(--duree-entree) var(--courbe-entree) both,flotte 2.4s ease-in-out 600ms 2 alternate}
@keyframes flotte{to{transform:translateY(-6px)}}
@media (max-width:859px){.carte-chiffre{left:12px;bottom:12px;padding:12px 16px}.chiffre{font-size:clamp(2.4rem,9vw,2.8rem)}}
.pack{background:linear-gradient(150deg,var(--surface) 0,#fbe9d2 100%);border-color:var(--miel)}
.grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:var(--espace);padding:0;list-style:none}
.grille a{display:flex;align-items:center;gap:14px;min-height:64px;padding:12px 16px;font-size:1.02rem;box-shadow:0 10px 24px -20px #5b3a1a;border-radius:var(--rayon-m);background:var(--surface);border:1px solid var(--trait);text-decoration:none;color:var(--texte);font-weight:600;transition:transform var(--duree-court) var(--courbe-standard)}
.grille a:hover{transform:translateY(var(--survol-monte))}
.picto{flex:none;display:grid;place-items:center;min-width:58px;height:44px;padding:0 8px;border-radius:var(--rayon-s);background:var(--surface-2);color:var(--accent-fonce);font:800 1.05rem var(--police-titre)}
.grille li:nth-child(3n+2) .picto{background:#dfead8;color:var(--signal-ok)}.grille li:nth-child(3n) .picto{background:#fbe3b0;color:var(--texte)}
@keyframes monte{from{opacity:0;transform:translateY(var(--glisse))}to{opacity:1;transform:none}}
@media (min-width:860px){.wrap{max-width:1080px}.hero{grid-template-columns:1.1fr .9fr;min-height:560px}}
@media (prefers-reduced-motion:reduce){.carte-chiffre{animation:none}:root{--glisse:0px;--survol-monte:0px;--echelle-appui:1}*{animation-duration:150ms!important;transition-duration:150ms!important}}
/* v25 : corrections jury v24 */
.actions{flex-direction:column;align-items:flex-start;gap:10px}
.lien-pack{font-size:1rem;font-weight:600;color:var(--accent-fonce);text-decoration:none;min-height:44px;display:inline-flex;align-items:center;gap:8px}
.lien-pack b{text-decoration:underline;text-underline-offset:3px}.lien-pack span{font-size:.875rem;font-weight:600;color:var(--texte-doux);text-decoration:none}
.formule{font-size:1rem}.pastille-ex{font-size:1rem;letter-spacing:.02em}
.carte-chiffre{box-shadow:0 22px 44px -16px #c2410c80,0 6px 18px -8px #5b3a1a,inset 0 1px 0 #fff}
.grille a{min-height:56px}
.grille li{animation:monte var(--duree-entree) var(--courbe-entree) both}
.grille li:nth-child(2){animation-delay:50ms}.grille li:nth-child(3){animation-delay:100ms}.grille li:nth-child(4){animation-delay:150ms}.grille li:nth-child(5){animation-delay:200ms}.grille li:nth-child(6){animation-delay:250ms}.grille li:nth-child(7){animation-delay:300ms}.grille li:nth-child(8){animation-delay:350ms}.grille li:nth-child(9){animation-delay:400ms}.grille li:nth-child(10){animation-delay:450ms}.grille li:nth-child(11){animation-delay:500ms}.grille li:nth-child(12){animation-delay:550ms}
@media (max-width:859px){.hero{padding:var(--espace) 0;gap:var(--espace-2)}.scene img{height:260px;object-fit:cover}.halo{display:none}.chiffre{font-size:4rem}.carte-chiffre{padding:10px 14px}.grille{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.grille a{gap:8px;padding:8px 10px;font-size:.95rem;min-height:52px}.grille .picto{min-width:44px;padding:6px 6px;font-size:.85rem}}
@media (prefers-reduced-motion:reduce){.grille li{animation:none}}
