/* The Moral Code — papier du site : fond crème, Fraunces (titres), Karla (texte), accents pastel. */
/* polices servies par le site (variables : toutes les graisses ; copies de celles qu'embarque la présentation du cours) */
@font-face{font-family:Fraunces;font-style:normal;font-weight:100 900;font-display:swap;src:url(/moral/assets/fonts/fraunces-var-normal.woff2) format("woff2")}
@font-face{font-family:Karla;font-style:normal;font-weight:200 800;font-display:swap;src:url(/moral/assets/fonts/karla-var-normal.woff2) format("woff2")}
:root{--ink:#1F2A3A;--ink2:#4A4F5C;--cream:#FBF8F2;--paper:#F3EEE6;--mute:#6E6B72;--hair:#E7DFD2;
 --sage:#9DBF9A;--sage-p:#E6EFE2;--sage-i:#3E6A42;--lav:#8E82B8;--lav-p:#E8E4F2;--lav-i:#4E4377;--butter:#E2C98F;--butter-p:#F5E9D6;--butter-i:#7A5F2A;
 --rose:#E3A9B4;--rose-p:#F6E4E6;--rose-i:#9A4456;--blue-p:#DCE8F2;--blue-i:#2D5878;
 --disp:Fraunces,Georgia,serif;--sans:Karla,system-ui,-apple-system,"Segoe UI",sans-serif;
 --card-sh:0 1px 0 #fff inset,0 1px 2px rgba(60,52,80,.06),0 12px 26px -14px rgba(60,52,80,.28)}
*{box-sizing:border-box}[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;color:var(--ink);font:16px/1.45 var(--sans);background:#F3EEE6 url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .35  0 0 0 0 .3  0 0 0 0 .25  0 0 0 .07 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
button{font:inherit;color:inherit}
.eyebrow{font:700 11.5px var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.card{background:var(--cream);border-radius:18px;box-shadow:var(--card-sh);padding:18px}
.err{background:var(--rose-p);color:var(--rose-i);border-radius:12px;padding:10px 12px;font-weight:600}
.hint{color:var(--mute);font-size:14.5px;margin:10px 0 0}
.lk{background:none;border:0;padding:0;color:var(--blue-i);font-weight:700;text-decoration:underline;cursor:pointer;min-height:auto}

/* ===================== téléphone (play.html, solo.html) ===================== */
.ph{max-width:560px;margin:0 auto;padding:12px 16px 32px;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;gap:12px}
.ph-top{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:44px}
.ph-top .brand{font:800 19px/1.1 var(--disp);letter-spacing:-.005em;display:flex;align-items:center;gap:8px;min-width:0}
.ph-top .brand img{width:26px;height:26px;border-radius:7px;flex:none}
.ph-top .me{display:flex;align-items:center;gap:8px;font:700 14px var(--sans);background:var(--cream);border-radius:999px;padding:6px 6px 6px 12px;box-shadow:var(--card-sh);max-width:60%}
.ph-top .me span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ph-top .me button{border:0;background:#EFEAE1;border-radius:999px;padding:6px 10px;font:700 12.5px var(--sans);color:var(--ink2);cursor:pointer;min-height:32px;white-space:nowrap}
.pick h2,.ph h2{font:800 26px/1.12 var(--disp);margin:4px 0 12px;letter-spacing:-.005em}
.pick input{font:600 18px var(--sans);padding:14px 16px;border-radius:14px;border:1.5px solid var(--hair);background:#fff;color:var(--ink);width:100%;min-height:52px}
.pick input:focus{outline:3px solid var(--lav-p);border-color:var(--lav)}
.hits{display:grid;gap:8px;margin-top:10px}
.hit{text-align:left;font:700 17px var(--sans);padding:12px 16px;min-height:52px;border-radius:14px;border:0;background:#fff;box-shadow:0 1px 0 #fff inset,0 2px 6px -2px rgba(60,52,80,.3);cursor:pointer}
.hit:active{background:var(--lav-p)}
.case-h{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.case-h b{font:800 22px/1.1 var(--disp)}
.case-h .coins{font:700 13.5px var(--sans);color:var(--butter-i);background:var(--butter-p);border-radius:999px;padding:5px 11px;white-space:nowrap}
.status{font:700 15px/1.35 var(--sans);color:var(--ink2);margin:2px 0 0}
.opts{display:grid;gap:10px}
.opt{display:flex;flex-direction:column;align-items:flex-start;gap:3px;text-align:left;width:100%;min-height:84px;padding:14px 16px 14px 18px;border-radius:18px;border:2px solid transparent;cursor:pointer;box-shadow:0 1px 0 rgba(255,255,255,.7) inset,0 3px 0 rgba(60,52,80,.12),0 10px 22px -14px rgba(60,52,80,.4);transition:transform .08s,box-shadow .12s,border-color .12s;position:relative;-webkit-tap-highlight-color:transparent}
.opt:active{transform:translateY(2px);box-shadow:0 1px 0 rgba(255,255,255,.7) inset,0 1px 0 rgba(60,52,80,.12)}
.opt .w{font:800 21px/1.1 var(--disp)}
.opt .d{font:600 15.5px/1.3 var(--sans);color:var(--ink2)}
.opt.stay{background:var(--sage-p)}.opt.stay .w{color:var(--sage-i)}
.opt.swerve{background:var(--lav-p)}.opt.swerve .w{color:var(--lav-i)}
.opt.coin{background:var(--butter-p);min-height:60px;flex-direction:row;align-items:center;justify-content:space-between}.opt.coin .w{color:var(--butter-i);font-size:19px}
.opt.coin .d{font-size:14px}
.opt[disabled]{opacity:.5;cursor:default;transform:none}
.opt.on{border-color:var(--ink);box-shadow:0 0 0 3px rgba(31,42,58,.1),0 10px 22px -14px rgba(60,52,80,.4)}
.opt.on::after{content:"✓ Your Vote";position:absolute;top:10px;right:12px;font:800 12px var(--sans);letter-spacing:.06em;background:var(--ink);color:var(--cream);border-radius:999px;padding:4px 9px}
.opt.dim{opacity:.55}
.saved{display:flex;align-items:center;gap:10px;background:var(--sage-p);color:var(--sage-i);border-radius:14px;padding:12px 14px;font:700 16px/1.3 var(--sans)}
.saved .ck{flex:none;width:30px;height:30px;border-radius:50%;background:var(--sage);color:#fff;display:grid;place-items:center;font:800 17px var(--sans)}
.saved.wait{background:#EFEAE1;color:var(--ink2)}.saved.wait .ck{background:#D9D1C3}
.saved.bad{background:var(--rose-p);color:var(--rose-i)}.saved.bad .ck{background:var(--rose)}
.bar{height:10px;border-radius:999px;background:#E9E2D6;overflow:hidden}
.bar i{display:block;height:100%;background:var(--lav);border-radius:999px;transition:width .25s linear}
.bar.low i{background:var(--rose)}
.res{display:grid;gap:8px}
.res .row{display:grid;grid-template-columns:96px 1fr 40px;gap:10px;align-items:center;font:700 15px var(--sans)}
.res .row .n{text-align:right;font-variant-numeric:tabular-nums}
.res .row .bar{height:14px}
.res .row.stay .bar i{background:var(--sage)}.res .row.swerve .bar i{background:var(--lav)}.res .row.coin .bar i{background:var(--butter)}
.res .row.win{color:var(--ink)}.res .row:not(.win){color:var(--mute)}
.verdict{font:800 22px/1.2 var(--disp);margin:0}
.article{background:#fff;border-radius:12px;padding:12px 14px;font:700 16px/1.35 var(--disp);box-shadow:0 1px 3px rgba(60,52,80,.12);border-left:5px solid var(--lav)}
.article small{display:block;font:700 11.5px var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--mute);margin-bottom:3px}
.code{margin:0;padding:0;list-style:none;display:grid;gap:6px}
.code li{font:600 14.5px/1.35 var(--sans);background:#fff;border-radius:10px;padding:8px 10px}
.code li b{font-family:var(--disp);margin-right:4px}
.code li.coin{background:var(--butter-p)}
.big{font:800 54px/1 var(--disp);letter-spacing:-.02em}
.stat{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;align-items:baseline}
.go{display:flex;align-items:center;justify-content:center;width:100%;min-height:56px;border:0;border-radius:16px;background:var(--ink);color:var(--cream);font:800 18px var(--sans);cursor:pointer;text-decoration:none;box-shadow:0 3px 10px -4px rgba(31,42,58,.5)}
.go.ghost{background:#EFEAE1;color:var(--ink);box-shadow:0 1px 0 #fff inset,0 2px 4px -2px rgba(60,52,80,.25)}
.go:disabled{opacity:.45;cursor:default}
.wait-dots::after{content:"";display:inline-block;width:1.2em;text-align:left;animation:dots 1.4s steps(4) infinite}
@keyframes dots{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}}
.net{position:fixed;left:50%;bottom:12px;transform:translateX(-50%);background:var(--rose-p);color:var(--rose-i);font:700 13px var(--sans);border-radius:999px;padding:6px 12px;box-shadow:var(--card-sh);z-index:50}
@media (prefers-reduced-motion:reduce){.opt,.bar i{transition:none}.wait-dots::after{animation:none;content:"…"}}

/* ===================== le procès : l'avis de contravention, en papier ===================== */
.notice{position:relative;background:#FFFDF7;border-radius:6px 6px 14px 14px;padding:26px 18px 18px;box-shadow:0 1px 0 #fff inset,0 2px 4px rgba(60,52,80,.08),0 14px 30px -16px rgba(60,52,80,.4);
 background-image:repeating-linear-gradient(0deg,transparent 0 27px,rgba(142,130,184,.10) 27px 28px);background-position:0 12px}
.notice::before{content:"";position:absolute;left:0;right:0;top:0;height:12px;background:radial-gradient(circle at 8px 0,var(--paper) 5px,transparent 5.5px) 0 0/16px 12px repeat-x;border-bottom:2px dashed #E3DACB}
.notice .nh{display:flex;justify-content:space-between;align-items:baseline;gap:10px;border-bottom:2px solid var(--ink);padding-bottom:6px;margin-bottom:10px}
.notice .nh b{font:800 21px/1.1 var(--disp);letter-spacing:.01em}
.notice .nh span{font:600 12px ui-monospace,Menlo,Consolas,monospace;color:var(--rose-i);letter-spacing:.06em;white-space:nowrap}
.notice .nr{display:grid;grid-template-columns:72px 1fr;gap:8px;padding:6px 0;border-bottom:1px dotted #DDD3C2;font:600 15.5px/1.35 var(--sans)}
.notice .nr i{font:700 11px var(--sans);font-style:normal;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);padding-top:3px}
.notice .nr b{font-family:var(--disp)}
.notice .vt{display:inline-block;margin-top:8px;font:700 12px var(--sans);letter-spacing:.06em;background:var(--lav-p);color:var(--lav-i);border-radius:999px;padding:3px 10px}
.notice .ins{font:800 18px/1.25 var(--disp);margin:14px 0 8px}
.notice .body{white-space:pre-wrap;overflow-wrap:anywhere;font:500 16px/1.5 var(--sans);margin:12px 0 4px;background:#fff;border-radius:10px;padding:10px 12px}
.notice .from{font:700 13px var(--sans);color:var(--mute);margin-top:6px}
.ta{width:100%;font:500 16.5px/1.45 var(--sans);padding:12px 14px;border-radius:12px;border:1.5px solid var(--hair);background:#fff;color:var(--ink);resize:vertical;min-height:150px}
.ta:focus{outline:3px solid var(--lav-p);border-color:var(--lav)}
.pleas{display:grid;gap:10px;margin:12px 0}
.plea{min-height:58px;border-radius:16px;border:2px solid transparent;font:800 18px var(--disp);cursor:pointer;box-shadow:0 3px 0 rgba(60,52,80,.12),0 10px 22px -14px rgba(60,52,80,.4)}
.plea.guilty{background:var(--rose-p);color:var(--rose-i)}.plea.notguilty{background:var(--sage-p);color:var(--sage-i)}.plea.repeal{background:var(--blue-p);color:var(--blue-i)}
.plea.on{border-color:var(--ink)}.plea[disabled]{opacity:.5;cursor:default}
.stampbox svg{width:200px;height:120px;display:block;margin:6px auto 0;transform:rotate(-7deg)}
.stampbox.anim svg{animation:mmstamp .5s cubic-bezier(.2,1.6,.4,1) both}
@keyframes mmstamp{0%{transform:rotate(-7deg) scale(2.2);opacity:0}100%{transform:rotate(-7deg) scale(1);opacity:1}}
@media (prefers-reduced-motion:reduce){.stampbox.anim svg{animation:none}}

/* ===== les trois choix (retour de l'enseignant, 13 nov.) : un seul rang, trois boutons égaux, deux lignes au-dessus ===== */
.vscreen{display:flex;flex-direction:column;justify-content:flex-start;gap:16px;padding-top:clamp(4px,6vh,64px)}
/* écran de vote de la classe : le cas, les deux lignes et les trois boutons dans le haut-milieu de l'écran, en grand */
.vscreen .mini{font-size:15px}
.vscreen .hits2{font-size:20px;gap:8px}.vscreen .hits2 b{font-size:21px}
.vscreen .c3{min-height:clamp(96px,15vh,150px);border-radius:20px}.vscreen .c3 b{font-size:25px}.vscreen .c3.coin b{font-size:21px}.vscreen .c3 small{font-size:14px}
@media (max-width:370px){.vscreen .hits2{font-size:18px}.vscreen .c3 b{font-size:22px}.vscreen .c3.coin b{font-size:18px}}
@media (orientation:landscape) and (max-height:520px){.vscreen{padding-top:0;gap:8px}.vscreen .c3{min-height:70px}.vscreen .hits2{font-size:17px;gap:3px}}
.mini{display:flex;justify-content:space-between;align-items:center;gap:8px;font:700 13px var(--sans);color:var(--mute);letter-spacing:.02em}
.hits2{display:grid;gap:6px;font:600 17.5px/1.3 var(--sans);color:var(--ink)}
.hits2 b{font:800 18px var(--disp)}
.row3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.c3{position:relative;min-height:78px;border:2.5px solid transparent;border-radius:18px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:8px 4px;cursor:pointer;text-align:center;color:var(--ink);
 box-shadow:0 1px 0 rgba(255,255,255,.7) inset,0 3px 0 rgba(60,52,80,.14),0 10px 20px -14px rgba(60,52,80,.45);-webkit-tap-highlight-color:transparent;transition:transform .08s}
.c3:active{transform:translateY(2px)}
.c3 b{font:800 22px/1.02 var(--disp)}
.c3 small{font:700 13px/1.1 var(--sans)}
.c3.stay{background:var(--sage-p)}.c3.stay b{color:var(--sage-i)}
.c3.swerve{background:var(--lav-p)}.c3.swerve b{color:var(--lav-i)}
.c3.coin{background:var(--butter-p)}.c3.coin b{color:var(--butter-i);font-size:19px}.c3.coin small{color:var(--butter-i)}
.c3.on{border-color:var(--ink)}
.c3.on::after{content:"✓";position:absolute;top:5px;right:8px;font:800 14px var(--sans);color:var(--ink)}
.c3[disabled]{cursor:default;transform:none}
.c3[disabled]:not(.on){opacity:.55}
.c3.off{background:#ECE7DE!important;box-shadow:none}.c3.off b,.c3.off small{color:#A39E95!important}
@media (min-width:700px){.c3{min-height:92px}.c3 b{font-size:26px}}