.md-wrap{
--md-cream:#FFEED0;
--md-purple:#4D43BB;
--md-purple-lit:#5959C9;
--md-yellow:#FBB321;
--md-yellow-lit:#FFD080;
--md-pink:#BC4E6C;
--md-encre:#3A2F8F;
--md-pink-deep:#B03258;
--md-road:#A1A6AD;
flex:0 0 auto;
width:min(310px,86vw);
}
.md-tel{
position:relative;
aspect-ratio:9/16;
border-radius:24px;
overflow:hidden;
background:var(--md-road);
box-shadow:0 18px 44px -18px rgba(28,28,38,.42),
0 2px 0 0 rgba(255,255,255,.5) inset;
cursor:pointer;
}
.md-wrap .md-tel:focus-visible{outline:3px solid var(--md-purple);outline-offset:4px}
.md-wrap .md-ecran:focus,.md-wrap .md-ecran:focus-visible{outline:none}
.md-wrap.joue .md-tel:focus-visible{outline:none}
.md-scene{display:block;width:100%;height:100%}
.md-tel{-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}
.md-wrap.joue .md-tel{touch-action:none}
.md-hud{
position:absolute;inset:0 0 auto 0;
display:grid;grid-template-columns:1fr auto;
align-items:start;gap:8px;
padding:8px 8px 0;
pointer-events:none;
}
.md-obj{
margin:0;padding:8px 12px 8px;
background:var(--md-cream);
border-radius:0 0 16px 16px;
color:var(--md-purple);
font-weight:700;font-size:10.5px;line-height:1.25;
letter-spacing:.06em;text-transform:uppercase;text-align:center;
}
.md-jauges{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.md-ligne{display:flex;gap:6px;align-items:center}
.md-temps{
display:block;padding:4px 8px;
background:var(--md-cream);border-radius:12px;
color:var(--md-purple);
font-variant-numeric:tabular-nums;
font-weight:700;font-size:13px;letter-spacing:.02em;
}
.md-temps.court{color:var(--md-pink-deep)}
.md-pieces{display:flex;gap:4px;padding:4px 8px;
background:var(--md-cream);border-radius:12px}
.md-pieces i{
width:11px;height:11px;border-radius:50%;
background:rgba(77,67,187,.20);
transition:background .3s ease,box-shadow .3s ease;
}
.md-pieces i.plein{background:var(--md-yellow);box-shadow:inset 0 0 0 2px #D9A526}
.md-son{
pointer-events:auto;
width:26px;height:26px;padding:0;
display:flex;align-items:center;justify-content:center;
color:var(--md-purple);background:var(--md-cream);
border:0;border-radius:50%;cursor:pointer;
transition:color .2s,background .2s;
}
.md-son:hover{background:var(--md-yellow-lit)}
.md-wrap .md-son:focus-visible{outline:2px solid var(--md-purple);outline-offset:2px}
.md-son svg{width:14px;height:14px;fill:currentColor;display:block}
.md-pause{margin-left:0}
@media (pointer:coarse){
.md-son{width:32px;height:32px}
.md-son svg{width:16px;height:16px}
}
.md-son .i-on{display:none}
.md-son.on{color:#fff;background:var(--md-purple)}
.md-son.on .i-off{display:none}
.md-son.on .i-on{display:block}
.md-ecran p.md-chrono{
margin:0;font-weight:700;font-size:13px;
font-variant-numeric:tabular-nums;color:var(--md-purple);
}
.md-ecran p.md-chrono:empty{display:none}
.md-ecran.md-pause{background:rgba(255,238,208,.72)}
.md-ecran.md-pause h2{font-size:22px;letter-spacing:.08em}
.md-dit{
position:absolute;left:8px;right:8px;bottom:10px;
display:flex;align-items:flex-end;gap:8px;
pointer-events:none;
opacity:0;transform:translateY(6px);
transition:opacity .3s ease,transform .3s ease;
}
.md-dit.la{opacity:1;transform:none}
.md-face{flex:0 0 auto;width:46px;height:46px;display:block}
.md-dit p{
margin:0;padding:8px 12px;
background:var(--md-pink);color:#fff;
border-radius:12px;
font-family:var(--title-font),serif;font-style:italic;
font-size:12.5px;line-height:1.3;
text-wrap:balance;
}
.md-ecran{
position:absolute;inset:0;
display:flex;flex-direction:column;justify-content:center;align-items:center;
gap:16px;padding:24px;text-align:center;
background:rgba(255,238,208,.90);
backdrop-filter:blur(2px);
}
.md-ecran[hidden]{display:none}
.md-wrap [hidden]{display:none!important}
.md-ecran p.md-ruban{
position:relative;width:calc(100% + 48px);margin:0 -24px;
padding:9px 26px;
background:var(--md-purple);color:var(--md-cream);
font-weight:700;font-size:17px;line-height:1.2;
letter-spacing:.05em;text-transform:uppercase;text-align:center;
transform:rotate(-3deg);
box-shadow:0 4px 0 0 rgba(255,238,208,.85);
}
.md-plaque{
padding:7px 18px;background:var(--md-cream);border-radius:14px;
box-shadow:0 3px 0 0 rgba(188,78,108,.32);
}
.md-ronds{display:flex;gap:12px}
.md-rond{
width:52px;height:36px;padding:0;border:0;border-radius:15px;
display:flex;align-items:center;justify-content:center;
color:var(--md-pink-deep);background:#F7E3B6;
box-shadow:0 4px 0 0 var(--md-pink);
cursor:pointer;transition:transform .12s ease,box-shadow .12s ease;
}
.md-rond:hover{background:var(--md-yellow-lit)}
.md-rond:active{transform:translateY(3px);box-shadow:0 1px 0 0 var(--md-pink)}
.md-wrap .md-rond:focus-visible{outline:3px solid var(--md-purple);outline-offset:3px}
.md-rond svg{width:19px;height:19px;fill:currentColor;display:block}
.md-ecran p.md-objectif{font-weight:600;color:var(--md-purple);max-width:24ch}
.md-ecran .md-lien{margin-top:4px}
.md-ecran p{margin:0;font-size:12.5px;line-height:1.5;color:#4a4560;max-width:26ch}
.md-etoiles{display:flex;gap:4px}
.md-etoiles svg{width:23px;height:23px;display:block;fill:rgba(77,67,187,.18)}
.md-etoiles svg.on{fill:var(--md-yellow)}
.md-btn{
font:inherit;font-weight:700;font-size:13.5px;
letter-spacing:.05em;text-transform:uppercase;
color:var(--md-encre);background:var(--md-yellow);
border:0;border-radius:16px;padding:12px 24px;
box-shadow:0 4px 0 0 var(--md-pink);
cursor:pointer;
transition:transform .12s ease,box-shadow .12s ease;
}
.md-btn:hover{background:var(--md-yellow-lit)}
.md-btn:active{transform:translateY(3px);box-shadow:0 1px 0 0 var(--md-pink)}
.md-wrap .md-btn:focus-visible{outline:3px solid var(--md-purple);outline-offset:3px}
.md-lien{
font-size:12px;color:var(--md-purple);
text-decoration:none;border-bottom:1px solid rgba(77,67,187,.35);
padding-bottom:1px;
}
.md-lien:hover{border-color:var(--md-purple)}
.md-wrap .md-lien:focus-visible{outline:2px solid var(--md-purple);outline-offset:3px}
.md-aide{
list-style:none;margin:14px 0 0;padding:0;
display:flex;flex-direction:column;gap:7px;
}
.md-aide li{display:flex;align-items:center;gap:9px;
font-size:12.5px;line-height:1.3;color:var(--ink-faint)}
.md-aide kbd{
font-family:inherit;font-size:11px;font-weight:600;
min-width:20px;text-align:center;
color:var(--ink-soft);background:rgba(28,28,38,.05);
border:1px solid rgba(28,28,38,.16);
border-radius:5px;padding:2px 6px;
}
.md-aide li kbd + kbd{margin-left:-6px}
.md-tactile{display:none}
.md-geste{
flex:0 0 auto;width:22px;height:22px;border-radius:50%;
border:1.5px solid rgba(28,28,38,.28);position:relative;
}
.md-geste::after{
content:"";position:absolute;width:9px;height:9px;border-radius:50%;
background:var(--md-purple);left:50%;top:22%;transform:translate(-50%,-50%);
}
.md-geste.pause{border-radius:7px}
.md-geste.pause::after{
width:3px;height:9px;border-radius:1px;top:50%;left:calc(50% - 3px);
box-shadow:6px 0 0 var(--md-purple);
}
@media (hover:none) and (pointer:coarse){
.md-clavier{display:none}
.md-tactile{display:flex}
.md-aide li{align-items:flex-start}
.md-geste{margin-top:1px}
}
.md-regle{margin:11px 2px 0;font-size:12.5px;line-height:1.5;color:var(--ink-faint)}
.dt-main.avec-jeu > div{flex:1 1 auto;min-width:0}
@media (min-width:900px){
.dt-main.avec-jeu{gap:clamp(36px,5vw,72px)}
.md-wrap{width:330px}
}
@media (max-width:899px){
.dt-main.avec-jeu{flex-direction:column;align-items:flex-start;
gap:40px;padding-top:clamp(84px,12vh,120px)}
.md-wrap{align-self:center;order:-1}
}
@media (max-height:640px){
.md-wrap{width:max(220px,min(310px,86vw,calc((100svh - 130px) * 9 / 16)))}
}
.md-noscript{margin:16px 0 0;font-size:13px;color:var(--ink-faint);max-width:44ch}
@media print{.md-wrap{display:none}}
@media (prefers-reduced-motion:reduce){
.md-dit,.md-btn,.md-pieces i{transition:none}
}
.md-choix{display:flex;flex-direction:column;gap:8px;
width:100%;max-width:236px;align-items:stretch}
.md-btn.mini{font-size:12px;padding:8px 16px;letter-spacing:.04em}
.md-ecran p.md-note{font-size:11px;line-height:1.45;
color:#6b6580;max-width:32ch;margin-top:-2px}
.md-liens{display:flex;gap:16px;flex-wrap:wrap;justify-content:center}
.md-temps.decompte{background:var(--md-purple);color:#fff}
.md-temps.decompte.court{background:var(--md-pink-deep);color:#fff}
@media (hover:none){
.md-lien{padding-block:12px}
}
@media (max-width:700px){
.md-ecran p.md-note,.md-aide kbd{font-size:12px}
}