/* Plan : un cahier de vacances vivant. Fond ciel, cartes blanches, une couleur forte par classe.
   Plus la classe est petite, plus le texte est gros et les animations nombreuses (data-anim 3 → 1). */
:root{
  color-scheme:light;
  --sky:#e6f4ff; --paper:#ffffff; --ink:#22304f; --soft:#5d6b8a; --line:#d5e3f3;
  --sun:#ffc93c; --coral:#e8503f; --mint:#0d9478; --blue:#2f6fe0; --grape:#7a4be8;
  --good:#12915f; --warn:#c96a00; --bad:#d23a3a;
  --c:var(--blue); --on:#fff;
  --display:"Baloo 2","Arial Rounded MT Bold","Trebuchet MS",sans-serif;
  --body:"Nunito","Trebuchet MS",Verdana,sans-serif;
  --fs:1rem; --fw:700; --tile:1.15rem;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--sky);color:var(--ink);font-family:var(--body);font-size:var(--fs);font-weight:var(--fw);line-height:1.45;
  background-image:radial-gradient(circle at 12% 8%,#fff 0 40px,transparent 41px),radial-gradient(circle at 16% 9%,#fff 0 28px,transparent 29px),radial-gradient(circle at 86% 14%,#fff 0 34px,transparent 35px),radial-gradient(circle at 90% 13%,#fff 0 24px,transparent 25px);background-repeat:no-repeat}
body[data-cls=cp]{--c:var(--coral);--fs:1.2rem;--fw:800;--tile:1.7rem}
body[data-cls=ce1]{--c:var(--sun);--on:var(--ink);--fs:1.12rem;--fw:800;--tile:1.45rem}
body[data-cls=ce2]{--c:var(--mint);--fs:1.06rem;--tile:1.3rem}
body[data-cls=cm1]{--c:var(--blue);--tile:1.2rem}
body[data-cls=cm2]{--c:var(--grape);--tile:1.15rem}
body[data-cls=cp] .tile,body[data-cls=cp] .bigword{text-transform:uppercase}
h1,h2,h3{font-family:var(--display);font-weight:800;line-height:1.1;margin:0;text-wrap:balance}
h1{font-size:clamp(2rem,5vw,3.2rem)} h2{font-size:clamp(1.5rem,3.4vw,2.1rem)} h3{font-size:1.25rem}
p{margin:0}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.wrap{max-width:1040px;margin:0 auto;padding:0 16px}
.stack{display:flex;flex-direction:column;gap:18px}
.rowf{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.muted{color:var(--soft);font-weight:600}
.small{font-size:.88rem}

/* barre du haut */
header{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.94);border-bottom:3px solid var(--line)}
header .wrap{display:flex;align-items:center;gap:10px;padding-top:8px;padding-bottom:8px;flex-wrap:wrap}
.logo{display:flex;align-items:center;gap:8px;font-family:var(--display);font-weight:800;font-size:1.35rem;background:none;border:0;padding:0}
.logo b{color:var(--coral)}
.sp{flex:1}
.btn{border:0;border-radius:999px;padding:10px 18px;font-weight:800;background:var(--ink);color:#fff;box-shadow:0 4px 0 rgba(0,0,0,.18);transition:transform .1s}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 rgba(0,0,0,.18)}
.btn.c{background:var(--c);color:var(--on)}
.btn.sun{background:var(--sun);color:var(--ink)}
.btn.ghost{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 2px var(--line)}
.btn.sm{padding:6px 12px;font-size:.88rem}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.kidchip{display:flex;align-items:center;gap:6px;border:2px solid var(--line);background:#fff;border-radius:999px;padding:4px 12px 4px 6px;font-weight:800}
.kidchip .av{font-size:1.4rem}

/* accueil */
.hero{display:grid;grid-template-columns:1.3fr .7fr;gap:20px;align-items:center;padding:28px 0 8px}
.hero p{font-size:1.15rem;max-width:34em}
.mascot{width:100%;max-width:240px;justify-self:center}
.classes{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.clscard{border:0;border-radius:26px;padding:18px 12px;text-align:center;color:var(--on);background:var(--c);box-shadow:0 7px 0 rgba(0,0,0,.16);transition:transform .15s}
.clscard:hover{transform:translateY(-4px) rotate(-1.5deg)}
.clscard .em{font-size:2.6rem;display:block}
.clscard .nm{font-family:var(--display);font-size:2rem;font-weight:800;display:block;line-height:1}
.clscard .ag{font-size:.9rem;opacity:.95}
.k-cp{--c:var(--coral);--on:#fff}.k-ce1{--c:var(--sun);--on:var(--ink)}.k-ce2{--c:var(--mint);--on:#fff}.k-cm1{--c:var(--blue);--on:#fff}.k-cm2{--c:var(--grape);--on:#fff}
.card{background:var(--paper);border-radius:22px;padding:20px;border:3px solid var(--line)}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.steps .n{font-family:var(--display);font-size:2.2rem;color:var(--coral);line-height:1}
.prices{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.prices .p{font-family:var(--display);font-size:1.9rem;line-height:1.1}
footer{padding:30px 0 40px;text-align:center}

/* page classe */
.clshead{display:flex;gap:16px;align-items:center;flex-wrap:wrap;background:var(--c);color:var(--on);border-radius:26px;padding:18px 22px;margin-top:18px}
.clshead .em{font-size:3rem}.clshead h1 .em{font-size:inherit}
.tabs{display:flex;gap:8px;flex-wrap:wrap}
.tab{border:0;border-radius:999px;padding:7px 16px;font-weight:800;background:#fff;box-shadow:inset 0 0 0 2px var(--line)}
.tab.on{background:var(--ink);color:#fff;box-shadow:none}
.mods{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}
.mod{position:relative;text-align:left;background:#fff;border:3px solid var(--line);border-top:10px solid var(--c);border-radius:22px;padding:14px 16px 16px;display:flex;flex-direction:column;gap:6px;min-height:170px;transition:transform .15s}
.mod:hover{transform:translateY(-3px)}
.mod .ico{font-size:2.2rem;line-height:1}
.mod .lv{font-size:.82rem;color:var(--soft)}
.mod h3{font-size:1.2rem}
.mod .foot{margin-top:auto;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.pill{display:inline-flex;align-items:center;gap:4px;border-radius:999px;padding:3px 10px;font-size:.82rem;font-weight:800;background:#eef3fa;color:var(--ink);white-space:nowrap}
.pill.good{background:#d9f5e7;color:#0b6b45}.pill.warn{background:#ffe9cc;color:#8a4a00}.pill.lock{background:#ecebf5;color:#4b4770}.pill.new{background:#dcebff;color:#1b4fae}.pill.gold{background:#fff0bf;color:#6b4d00}
.contract{border:3px dashed var(--sun);background:#fffbea}

/* jeu */
.gamebar{display:flex;align-items:center;gap:12px;margin-top:16px}
.prog{flex:1;height:18px;background:#fff;border-radius:999px;border:3px solid var(--line);overflow:hidden}
.prog i{display:block;height:100%;background:var(--c);border-radius:999px;transition:width .4s}
.exo{background:#fff;border-radius:28px;border:4px solid var(--c);padding:22px;display:flex;flex-direction:column;gap:18px;align-items:center;text-align:center;margin-top:14px}
.exo .q{font-family:var(--display);font-size:calc(var(--tile) + .25rem);font-weight:800;line-height:1.2;max-width:26em}
.vis{display:flex;gap:14px;align-items:center;justify-content:center;flex-wrap:wrap}
.bigword{font-family:var(--display);font-size:3rem;letter-spacing:.12em;line-height:1}
.bigemo{font-size:4.5rem;line-height:1}
.objs{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;max-width:340px;font-size:2.4rem;line-height:1}
.op{font-family:var(--display);font-size:3rem}
.sw{display:inline-block;width:64px;height:64px;border-radius:50%;border:4px solid #fff;box-shadow:0 0 0 3px var(--line)}
.vis>.sw{width:110px;height:110px}
.flag{border-radius:6px;box-shadow:0 0 0 2px var(--line);display:block}
.zones{display:flex;flex-direction:column;gap:10px;align-items:center;width:100%}
.zones.inline{flex-direction:row;flex-wrap:wrap;justify-content:center}
.row{display:flex;align-items:center;gap:10px;justify-content:center}
.row .lab{min-width:110px;display:flex;justify-content:flex-end;align-items:center;font-size:var(--tile)}
.row .lab .objs{font-size:1.6rem;max-width:220px;justify-content:flex-end}
.zone{min-width:120px;min-height:66px;border:4px dashed var(--c);border-radius:18px;background:#f4f9ff;display:flex;align-items:center;justify-content:center;padding:4px;transition:background .2s}
.zones.inline .zone{min-width:58px;min-height:62px}
.zone:empty::after{content:"?";font-family:var(--display);font-size:1.6rem;color:var(--line)}
.zone.good{border-style:solid;border-color:var(--good);background:#d9f5e7}
.zone.bad{border-style:solid;border-color:var(--bad);background:#fde2e2;animation:shake .5s}
.zone.shown{border-style:solid;border-color:var(--warn);background:#fff3df}
.tray{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;min-height:70px;padding:12px;border-radius:20px;background:#f1f5fb;width:100%}
.tile{touch-action:none;user-select:none;-webkit-user-select:none;border:0;border-radius:16px;padding:10px 18px;min-width:54px;min-height:54px;background:var(--c);color:var(--on);font-family:var(--display);font-weight:800;font-size:var(--tile);line-height:1.1;box-shadow:0 5px 0 rgba(0,0,0,.2);cursor:grab;display:inline-flex;align-items:center;justify-content:center;position:relative}
.tile.pic{background:#fff;color:var(--ink);box-shadow:0 5px 0 var(--line),inset 0 0 0 3px var(--line);font-size:2.4rem;padding:8px 12px}
.tile.drag{z-index:50;cursor:grabbing;box-shadow:0 14px 22px rgba(0,0,0,.28);transition:none}
.tile.sel{outline:4px solid var(--ink);outline-offset:2px}
.zone .tile{box-shadow:none}
.fb{min-height:64px;display:flex;gap:14px;align-items:center;justify-content:center;flex-wrap:wrap;font-family:var(--display);font-size:1.35rem}
.fb.ok{color:var(--good)}.fb.ko{color:var(--bad)}
.hard{background:#fff0bf;color:#6b4d00}
.result{text-align:center;align-items:center}
.result .note{font-family:var(--display);font-size:4.2rem;line-height:1}
.result .stars{font-size:3rem;letter-spacing:6px}

.feat{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
div.mod{cursor:default}
.peek{display:flex;flex-direction:column;gap:10px;padding:14px 16px}
.peek .vis{justify-content:flex-start;transform-origin:left;zoom:.6}
.peek .lab{zoom:.6;display:flex;align-items:center}
.peek .pill .sw{width:26px;height:26px;border-width:2px}
.peek .pill svg{height:30px;width:auto}
.peek .pill{white-space:normal}
.guide{display:flex;align-items:center;gap:12px;text-align:left}
.bub{background:#fff;color:var(--ink);border:3px solid var(--line);border-radius:18px;padding:8px 14px}
.perso{flex:none}
.duo{display:flex;justify-content:center;align-items:flex-end;gap:4px}
body[data-anim="3"] .perso{animation:bob 2.6s ease-in-out infinite}
body[data-anim="3"] .duo .perso:nth-child(2){animation-delay:.5s}
.mat{width:100%;border-collapse:collapse}.mat th,.mat td{padding:9px 8px;border-bottom:2px solid var(--line);text-align:left;line-height:2}.mat th{width:70px}
.genius{background:#1c2547;color:#fff;border-color:#1c2547}
.genius .muted,.genius .small{color:#d5dcf7}
.genius .feat>div{background:#2a3566;border-radius:16px;padding:12px}
.exo.genius{border-color:var(--sun)}
body[data-duel="1"]{background:#141b3a;background-image:radial-gradient(circle at 50% 0,#3a4aa0 0,transparent 60%)}
body[data-duel="1"] #count,body[data-duel="1"] footer p{color:#fff}
.duel{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:center;margin-top:14px}
.side{background:#232c5c;color:#fff;border-radius:20px;padding:10px 14px;display:flex;align-items:center;gap:10px;border:4px solid transparent;opacity:.6;text-align:left}
.side.on{border-color:var(--sun);opacity:1;box-shadow:0 0 24px rgba(255,201,60,.55)}
.side .av{font-size:2rem}.side .sc{margin-left:auto;font-family:var(--display);font-size:2.2rem;line-height:1}
.vs{font-family:var(--display);font-size:1.8rem;color:var(--sun)}
.turn{text-align:center;color:#fff;font-family:var(--display);font-size:1.5rem;margin-top:10px}
/* animations selon l'âge */
@keyframes bob{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-10px) rotate(2deg)}}
@keyframes wig{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(2deg)}}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-8px)}75%{transform:translateX(8px)}}
@keyframes pop{0%{transform:scale(.6)}70%{transform:scale(1.12)}100%{transform:scale(1)}}
@keyframes fall{to{transform:translateY(105vh) rotate(720deg);opacity:.9}}
.mascot{animation:bob 3s ease-in-out infinite}
body[data-anim="3"] .tray .tile:not(.drag){animation:wig 1.6s ease-in-out infinite}
body[data-anim="3"] .tray .tile:nth-child(even):not(.drag){animation-delay:.4s}
body[data-anim="3"] .mod .ico,body[data-anim="3"] .clshead .em{animation:bob 2.4s ease-in-out infinite}
body[data-anim="2"] .clshead .em{animation:bob 4s ease-in-out infinite}
body[data-anim="1"] .mascot{animation:none}
.zone.good .tile{animation:pop .35s}
.conf{position:fixed;top:-30px;z-index:90;font-size:1.6rem;pointer-events:none;animation:fall linear forwards}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* fenêtres */
.ov{position:fixed;inset:0;background:rgba(20,30,60,.55);z-index:80;display:flex;align-items:center;justify-content:center;padding:16px}
.dlg{background:#fff;border-radius:24px;padding:22px;max-width:480px;width:100%;max-height:90vh;overflow:auto;display:flex;flex-direction:column;gap:14px}
.dlg label{display:flex;flex-direction:column;gap:4px;font-size:.92rem}
input[type=text],input[type=password],input[type=number],select{border:3px solid var(--line);border-radius:12px;padding:8px 10px;background:#fff;min-width:0;font-weight:700}
.demo{background:#fff3df;border-radius:12px;padding:8px 12px;color:#8a4a00;font-size:.9rem}
.err{color:var(--bad)}

/* espace parents */
.adm{font-size:1rem;font-weight:700}
.adm table{width:100%;border-collapse:collapse;font-size:.93rem}
.adm th,.adm td{padding:8px 6px;border-bottom:2px solid var(--line);text-align:left;vertical-align:middle}
.adm th{font-size:.8rem;color:var(--soft);text-transform:uppercase;letter-spacing:.04em}
.adm td.num{font-variant-numeric:tabular-nums;white-space:nowrap}
.scroll{overflow-x:auto}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.grid2 label,.fld{display:flex;flex-direction:column;gap:4px;font-size:.92rem}
.tiles3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.stat .v{font-family:var(--display);font-size:1.9rem;line-height:1.1}
.clsrow td{background:#f4f8fd;font-family:var(--display);font-size:1.05rem}

@media (max-width:760px){
  .hero{grid-template-columns:1fr}.mascot{max-width:150px}
  .classes{grid-template-columns:repeat(2,1fr)}.steps,.prices,.grid2,.tiles3,.feat{grid-template-columns:1fr}
  .exo{padding:16px 10px}.row .lab{min-width:70px}.bigword{font-size:2.2rem}
}
a.btn{text-decoration:none;display:inline-block}
a.clscard{display:block;text-decoration:none}
a.logo{text-decoration:none;color:inherit}
footer a{color:inherit}
.legal{max-width:70ch}.legal h2{margin-top:22px;font-size:1.4rem}.legal p,.legal li{font-weight:600}