
:root{font-family:Inter,ui-sans-serif,system-ui,sans-serif;color:#dbe7df;background:#102a32;color-scheme:dark}*{box-sizing:border-box}body{margin:0}button,select{font:inherit}button,a,input,select,summary{touch-action:manipulation}button{cursor:pointer;border:1px solid #547276;background:transparent;color:#dbe7df;border-radius:4px;padding:12px 18px}button:hover{background:#25434a}button:disabled{opacity:.4;cursor:default}button:focus-visible,canvas:focus-visible{outline:3px solid #c2f288;outline-offset:4px}header,footer{display:flex;align-items:center;justify-content:space-between;padding:26px 5vw;border-bottom:1px solid #36515a}.brand{font-size:24px;font-weight:800;letter-spacing:3px;color:#eef4e8;text-decoration:none}.brand span{font-size:13px;color:#c2f288;vertical-align:middle;margin:0 5px}.edition,.eyebrow,.surface-label,footer{font-size:10px;letter-spacing:1.8px}.edition{color:#9ab7ba}#connection{border:1px solid #55716e;border-radius:20px;padding:5px 12px;font-size:12px}main{display:grid;grid-template-columns:minmax(250px,.65fr) minmax(400px,1.7fr);gap:5vw;max-width:1550px;margin:auto;padding:45px 5vw}.intro{padding-top:25px}.eyebrow{color:#c2f288;line-height:1.8}h1{font-family:Georgia,serif;font-weight:400;font-size:clamp(42px,5vw,80px);line-height:1.03;letter-spacing:-3px;margin:30px 0}.intro>p{line-height:1.7;color:#adc0bf}form{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:36px}label{font-size:12px;color:#adc0bf}select{display:block;width:100%;padding:10px;background:#19353d;color:#eef4e8;border:1px solid #52696b;border-radius:3px;margin-top:8px}form label:last-of-type,form button{grid-column:1/-1}form button,#drop{background:#c2f288;color:#19353d;border-color:#c2f288;display:flex;justify-content:space-between;gap:28px;font-weight:600}form button{margin-top:8px}.fine{font-size:11px;max-width:30em}.toolbar,.actions{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:12px}.toolbar{margin-bottom:14px;letter-spacing:1.5px}.toolbar button{font-size:11px;padding:6px 12px}.surface{position:relative;background:#d8e6db;border-radius:4px;overflow:hidden;aspect-ratio:1;box-shadow:0 20px 80px #0003}canvas{width:100%;height:100%;display:block;cursor:crosshair;touch-action:none}.surface-label{position:absolute;bottom:16px;left:20px;color:#355259;pointer-events:none}.actions{margin:16px 0}#scores{display:flex;gap:16px;flex-wrap:wrap;margin:20px 0}.score{border-top:2px solid var(--color);padding-top:10px;min-width:100px;font-size:12px}.score b{font-size:24px;display:block;margin:5px 0}.score small{color:#adc0bf}#message{min-height:20px;font-size:13px;color:#c2f288}.extras{display:flex;flex-wrap:wrap;gap:10px}.extras button,.file{padding:8px 12px;font-size:11px;border:1px solid #547276;cursor:pointer}.file input{display:none}details{font-size:12px;color:#adc0bf;margin:24px 0}details p{line-height:1.7}footer{border-top:1px solid #36515a;border-bottom:0;color:#adc0bf}footer span{font-size:9px}@media(max-width:800px){main{display:flex;flex-direction:column;padding:24px 5vw;gap:25px}.intro{padding:0}.intro h1{font-size:48px;margin:14px 0}.intro h1 br{display:none}.intro>p:not(.eyebrow){font-size:13px}.intro>p br{display:none}form{grid-template-columns:1fr 1fr 1fr;margin-top:20px;gap:8px}form label:last-of-type{grid-column:auto}form button{grid-column:1/-1}.fine{display:none}.edition{display:none}footer span{display:none}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}

#seats{display:flex;flex-wrap:wrap;gap:10px;grid-column:1/-1}#seats label{flex:1;min-width:85px}

#language{width:70px;margin:0 12px;font-size:12px}.brand{white-space:nowrap}.intro details button{padding:8px;margin:5px 3px 5px 0}#invite{display:block;width:100%;padding:9px;margin:8px 0;background:#19353d;color:#eef4e8;border:1px solid #547276}
@media(min-width:900px){.play{width:min(100%,calc(100dvh - 300px));min-width:400px;justify-self:center}.score{min-width:0;flex:1}.intro{padding-top:15px}main{padding-top:28px}.extras{margin-top:12px}.extras label{display:flex;align-items:center;gap:4px}}

#seats .seat-setup{flex:1;min-width:110px}#seats .seat-setup label{display:block;margin-bottom:10px}.color-swatch{display:inline-block;width:14px;height:14px;border:1px solid #dbe7df88;border-radius:50%;margin-left:8px;vertical-align:middle}#turn{border-left:4px solid var(--player-color,#2d8391);padding-left:9px}#online-colors[hidden]{display:none}

#play-status,#score-note{font-size:12px;line-height:1.5;color:#adc0bf;margin:8px 0 14px}#play-status{color:#c2f288}

#audio-status{font-size:12px;line-height:1.5;color:#adc0bf;margin:14px 0 0;max-width:48em}
html[data-deployment="static"] #static-note:not([hidden]){display:block}

/* Proposition visuelle locale, sans changement de règles ni de commande. */
:root{color-scheme:light;color:#493515;background:#fff8df;font-family:ui-rounded,"Arial Rounded MT Bold",system-ui,sans-serif}
body{background:radial-gradient(ellipse at 0% 0%,#ffe38a 0,transparent 34%),radial-gradient(ellipse at 100% 5%,#ffefb8 0,transparent 40%),#fff9e9;color:#493515}
header{padding:20px 5vw;border:0;gap:14px}.brand{font-size:26px;letter-spacing:1px;color:#493515}.brand span{color:#dd9b19}.edition{color:#8a703c}#connection{border:0;background:#fff0bc;color:#65490b;font-weight:700;padding:9px 16px}
main{gap:3vw;max-width:1440px;padding:24px 4vw 55px;grid-template-columns:minmax(300px,.82fr) minmax(400px,1.3fr)}
.intro,.play{background:#ffffffdf;border:1px solid #fff;border-radius:30px;box-shadow:0 16px 55px #a77a2022;padding:28px}.intro{padding-top:28px}.play{width:100%;min-width:0;max-width:760px;justify-self:center}
.eyebrow{color:#895608;letter-spacing:1.4px;font-weight:800}.intro h1{color:#473315;font-weight:700;font-size:clamp(42px,4vw,66px);letter-spacing:-2px;margin:18px 0}.intro>p{color:#75603c;line-height:1.55}
form{gap:12px;margin-top:25px}label{color:#6c552b;font-weight:650}select,#invite{color:#513d1c;background:#fffae9;border:1px solid #ead39a;border-radius:14px;min-height:48px;padding:11px;font-size:14px}
button,.file{min-height:44px;border-radius:16px;color:#624b24;border:1px solid #ecdcae;background:#fff8df;font-weight:700}button:hover{background:#ffefb9}button:focus-visible,canvas:focus-visible{outline:3px solid #bf7d08;outline-offset:3px}
form button,#drop{background:#f3bf37;border-color:#f3bf37;color:#513500;border-radius:17px;justify-content:center;box-shadow:0 6px 0 #bd8512;min-height:54px;font-size:15px}form button:hover,#drop:hover{background:#e9ab20}button:disabled{opacity:.56;box-shadow:none}
.toolbar{background:#fff0ba;color:#654809;border-radius:18px;padding:10px 14px;letter-spacing:.6px}.toolbar button{min-height:40px;padding:8px 14px}.surface{border-radius:32px;box-shadow:inset 0 0 0 2px #c5defa,0 14px 36px #778ccb26;background:#e8f6ff}.surface-label{border-radius:20px;background:#ffffffb8;padding:6px 10px;color:#55749b;letter-spacing:1px}
.actions{gap:14px;color:#79623f}.actions #drop{flex:0 1 230px}#play-status,#score-note,#audio-status{color:#79623f}.score{background:#fff9e5;padding:12px;border-radius:14px;border-top-width:4px}.score b{color:#60471d}.score small{color:#786747}#message{color:#9b5a0a}.extras{gap:8px}.extras label{background:#fff8df;border-radius:14px;padding:8px 10px;min-height:44px;display:flex;align-items:center;gap:7px}.extras button,.file{font-size:12px;padding:9px 12px;border-color:#edd9a5;min-height:44px}.file{display:inline-flex;align-items:center}.extras input[type=checkbox]{width:19px;height:19px;accent-color:#be7c0e}details{color:#806d4d}.fine{color:#806d4d}footer{border:0;color:#88724e}
@media(max-width:800px){header{padding:16px 5vw}main{padding:8px 4vw 35px;gap:16px}.intro,.play{padding:20px;border-radius:24px}.intro h1{font-size:42px;margin:10px 0}.intro>p:not(.eyebrow){font-size:14px}form{gap:9px}.surface{border-radius:24px}.actions{flex-wrap:wrap}.actions #drop{flex:1 1 180px}.toolbar{font-size:11px}}

/* Direction visuelle d’essai : horizon lumineux et accents soleil. */
:root{color-scheme:light;background:#f6f5ee;color:#172c48;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
body{background:radial-gradient(ellipse at 88% 0%,#e0f2fa 0,transparent 36%),radial-gradient(ellipse at 0% 8%,#fff2ca 0,transparent 32%),#f8f8f3;color:#172c48}
header{max-width:1500px;margin:auto;padding:20px 4vw;gap:16px;border:0}.brand{color:#142b47;font-size:23px;letter-spacing:2px;font-weight:850}.brand span{color:#f0b536}.edition{color:#708199;font-size:10px;letter-spacing:1.5px}#language{background:#fff;border:1px solid #e5eaf0;color:#263b55;border-radius:12px;min-height:40px}#connection{background:#e7f3ee;color:#326a5e;border:0;border-radius:25px;font-size:12px;padding:8px 14px;font-weight:700}
main{max-width:1500px;grid-template-columns:minmax(290px,.7fr) minmax(440px,1.3fr);gap:26px;padding:12px 4vw 56px;align-items:start}
.intro,.play{background:#fff;border:1px solid #edf0ed;border-radius:28px;box-shadow:0 18px 55px #253a5110;padding:30px}.intro{padding-top:30px}.play{max-width:none;width:100%;min-width:0;justify-self:stretch}.eyebrow{font-size:10px;letter-spacing:1.8px;color:#a16f17;font-weight:800;line-height:1.4}.intro h1{font-family:Georgia,serif;color:#142b47;font-size:clamp(42px,4vw,64px);font-weight:400;letter-spacing:-2.5px;line-height:1.04;margin:17px 0}.intro>p{font-size:14px;line-height:1.6;color:#697b8e;max-width:30em}
.setup-heading{display:flex;align-items:center;gap:12px;margin:28px 0 0;padding-top:23px;border-top:1px solid #edf0ed}.setup-heading>span{width:36px;height:36px;border-radius:12px;background:#fff1cc;color:#9b6a10;display:grid;place-items:center;font-size:11px;font-weight:800}.setup-heading strong,.setup-heading small{display:block}.setup-heading strong{font-size:14px}.setup-heading small{font-size:11px;color:#8190a1;margin-top:2px}form{margin-top:18px;gap:12px}label{color:#647487;font-size:12px;font-weight:650}select,#invite{background:#f7f9fa;border:1px solid #e6eaeb;border-radius:13px;color:#263b53;font-size:14px;min-height:47px;padding:10px}#seats .seat-setup label{margin-bottom:8px}button,.file{border-radius:14px;border:1px solid #e0e8e9;background:#f8faf9;color:#334c5d;font-weight:700;min-height:44px}button:hover{background:#eef5f4}button:focus-visible,canvas:focus-visible{outline:3px solid #dd9a13;outline-offset:3px}form button,#drop{background:#ffd25e;color:#26364a;border-color:#ffd25e;box-shadow:none;border-radius:15px;min-height:52px;justify-content:center;font-size:14px}form button:hover,#drop:hover{background:#f6c14a}button:disabled{opacity:.52;box-shadow:none}
.play-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 18px}.play-heading span:first-child{font-size:10px;letter-spacing:1.5px;font-weight:800;color:#9b7a38}.play-heading h2{font-family:Georgia,serif;font-weight:400;letter-spacing:-.5px;font-size:26px;margin:5px 0 0;color:#18314d}.play-chip{font-size:11px;white-space:nowrap;background:#f5f6ed;color:#6a7a72;padding:8px 12px;border-radius:30px;font-weight:700}.toolbar{background:#f3f7f7;border:1px solid #eaf0ed;color:#324c5e;border-radius:14px;padding:7px 12px;font-size:11px;letter-spacing:.5px}.toolbar button{min-height:38px;border-radius:10px;padding:7px 14px;background:#fff}#play-status{color:#73879a;margin:10px 0;font-size:12px}.surface{border-radius:25px;box-shadow:0 10px 35px #47748b15;background:#e1f2fa}.surface-label{background:#ffffffc9;color:#607c90;padding:6px 10px;border-radius:15px;letter-spacing:1px;font-weight:700}.actions{color:#718296;margin:16px 0;gap:12px}.actions #drop{flex:0 1 230px}#score-note,#audio-status{color:#8390a0}#scores{gap:10px}.score{background:#f8faf9;border-top-width:3px;border-radius:12px;padding:10px 12px}.score b{color:#203b56}.score small{color:#8190a0}#message{color:#9a6a16}.tools-heading{margin:24px 0 9px;color:#91a0a9;font-size:10px;font-weight:800;letter-spacing:1.3px}.extras{gap:8px}.extras label,.extras button,.file{display:inline-flex;align-items:center;gap:7px;background:#f7f9f8;border:1px solid #e9efec;border-radius:12px;min-height:44px;padding:8px 12px;font-size:11px;color:#4d6670}.extras input[type=checkbox]{width:18px;height:18px;accent-color:#cb9527}.fine,details{color:#81909f}footer{border:0;max-width:1500px;margin:auto;color:#9ba9ae}
@media(max-width:800px){header{padding:16px 5vw}.edition{display:none}main{display:flex;flex-direction:column;gap:14px;padding:6px 4vw 32px}.intro,.play{width:100%;padding:21px;border-radius:22px}.intro h1{font-size:40px;letter-spacing:-1.8px;margin:11px 0}.intro>p:not(.eyebrow){font-size:14px}.setup-heading{margin-top:18px;padding-top:16px}form{grid-template-columns:1fr 1fr;gap:9px;margin-top:14px}form label:last-of-type{grid-column:auto}.play-heading h2{font-size:23px}.surface{border-radius:20px}.actions{flex-wrap:wrap}.actions #drop{flex:1 1 180px}}
