/* =============================================================
   CSS/ROUE.CSS - Mimba-Educ : la roue du hasard sur Lycee.php (mode « Bientôt »)
   version 1.0 - 2026-10-28   (copie adaptée de bientot/css/bientot.css ; tout est rangé sous .rz)
   ============================================================= */
.rz{position:relative;z-index:2;margin:0 auto 26px;width:min(1100px,100%);padding:26px 20px 22px;border-radius:26px;color:#e6edf3;text-align:center;
  font-family:'Segoe UI Variable','Segoe UI',system-ui,-apple-system,Roboto,Arial,sans-serif;
  background:radial-gradient(70% 60% at 50% 0%,rgba(56,189,248,.16),transparent 70%),radial-gradient(55% 45% at 90% 100%,rgba(167,139,250,.14),transparent 70%),
    linear-gradient(rgba(56,189,248,.05) 1px,transparent 1px) 0 0/44px 44px,linear-gradient(90deg,rgba(56,189,248,.05) 1px,transparent 1px) 0 0/44px 44px,#050816;
  border:1px solid rgba(56,189,248,.28);box-shadow:0 40px 80px -40px rgba(0,0,0,.9),0 0 50px -24px rgba(56,189,248,.5)}
.rz *{box-sizing:border-box}
.rz h2{margin:0;font-size:clamp(22px,4.6vw,32px);font-weight:900;color:#fff;line-height:1.2}
.rz h2 span{background:linear-gradient(90deg,#38bdf8,#818cf8,#a78bfa);-webkit-background-clip:text;background-clip:text;color:transparent}
.rz .rz-sous{margin:8px auto 0;color:#93a4c3;font-size:15px;max-width:640px;line-height:1.5}
.rz-x{position:absolute;top:10px;right:12px;width:34px;height:34px;border-radius:50%;border:0;cursor:pointer;background:transparent;color:#93a4c3;display:grid;place-items:center}
.rz-x:hover{color:#fff;background:rgba(255,255,255,.06)}

/* compte à rebours */
.rz-reb{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:16px 0 4px}
.rz-c{min-width:74px;padding:12px 6px 10px;border-radius:16px;position:relative;overflow:hidden;
  background:linear-gradient(180deg,rgba(15,23,42,.92),rgba(8,12,28,.92));border:1px solid rgba(56,189,248,.35);box-shadow:0 0 22px -8px rgba(56,189,248,.55)}
.rz-c::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:rgba(56,189,248,.18)}
.rz-c b{display:block;font-size:30px;font-weight:900;color:#fff;font-variant-numeric:tabular-nums;line-height:1.05;text-shadow:0 0 16px rgba(56,189,248,.6)}
.rz-c span{display:block;margin-top:4px;font-size:11.5px;color:#93a4c3;font-weight:700}
.rz-date{flex-basis:100%;text-align:center;font-size:14px;color:#fde68a;font-weight:700}
.rz-ouvert{font-size:22px;font-weight:900;color:#4ade80;text-shadow:0 0 16px rgba(74,222,128,.5)}

/* les boutons */
.rz-boutons{margin:20px auto 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px;width:min(820px,100%)}
.rz-bt{display:flex;align-items:center;gap:12px;padding:15px 18px;border-radius:20px;border:1px solid rgba(56,189,248,.22);background:rgba(10,16,36,.85);color:#fff;
  font:800 16px 'Segoe UI',system-ui,sans-serif;cursor:pointer;text-align:left;transition:transform .15s,border-color .2s,box-shadow .2s}
.rz-bt:hover{transform:translateY(-2px);border-color:#38bdf8;box-shadow:0 0 26px -8px rgba(56,189,248,.8)}
.rz-bt.on{border-color:#facc15;box-shadow:0 0 26px -8px rgba(250,204,21,.8)}
.rz-bt:disabled{opacity:.5;cursor:wait;transform:none}
.rz-bt .ic{width:42px;height:42px;border-radius:13px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.rz-bt .ic svg{width:24px;height:24px}
.rz-bt small{display:block;font-size:12.5px;color:#93a4c3;font-weight:600;margin-top:2px}

/* la roue (dessinée en SVG par js/roue.js) */
.rz-scene{margin:20px auto 0;width:100%;display:none;flex-direction:column;align-items:center}
.rz-scene.on{display:flex}
.rz-etape{font-size:13px;color:#7dd3fc;font-weight:800;text-transform:uppercase;letter-spacing:.16em;min-height:18px;text-shadow:0 0 10px rgba(56,189,248,.7)}
.rz-roue{position:relative;width:min(84vw,420px);aspect-ratio:1;margin-top:6px}
.rz-roue svg{width:100%;height:100%;display:block;overflow:visible}
.rz .rw-tics{animation:rzTourne 40s linear infinite;transform-origin:0 0}
.rz .rw-anneau{animation:rzTourne 14s linear infinite reverse;transform-origin:0 0}
.rz .rw-tourne .rw-tics{animation-duration:6s}
.rz .rw-tourne .rw-anneau{animation-duration:2.5s}
@keyframes rzTourne{to{transform:rotate(360deg)}}
.rz .rw-aiguille{transition:transform .14s cubic-bezier(.3,1.6,.5,1);transform-origin:0 -176px}
.rz .rw-aiguille.coup{transition:none;transform:rotate(-16deg)}
.rz .rw-part{transition:opacity .4s}
.rz .rw-gagne .rw-part{opacity:.22}
.rz .rw-gagne .rw-part.rw-g{opacity:1}
.rz .rw-halo{opacity:0}
.rz .rw-gagne .rw-halo{animation:rzHalo 1.2s ease-out 3}
@keyframes rzHalo{0%{opacity:.9;transform:scale(.85)}100%{opacity:0;transform:scale(1.18)}}
.rz .rw-gagne .rw-led{animation:rzLed .35s step-end 6 alternate}
@keyframes rzLed{50%{fill:#facc15;opacity:1}}
.rz-encours{margin-top:12px;min-height:30px;font-size:clamp(17px,4vw,22px);font-weight:900;color:#fff;text-align:center;text-shadow:0 0 14px rgba(56,189,248,.6)}
.rz-resultat{margin-top:6px;text-align:center;opacity:0;transform:scale(.9);transition:opacity .5s,transform .5s}
.rz-resultat.on{opacity:1;transform:none}
.rz-resultat .n{font-size:13px;color:#a5b4fc;font-weight:800;text-transform:uppercase;letter-spacing:.1em}
.rz-resultat .titre{font-size:clamp(20px,4.6vw,28px);font-weight:900;color:#fde68a;text-shadow:0 0 18px rgba(250,204,21,.45)}
.rz-cadre{margin-top:16px;width:100%;display:none;border-radius:20px;overflow:hidden;border:1px solid rgba(56,189,248,.3);background:#0b1226;box-shadow:0 30px 60px -30px rgba(0,0,0,.9),0 0 40px -20px rgba(56,189,248,.5)}
.rz-cadre.on{display:block}
.rz-cadre .tete{display:flex;align-items:center;gap:8px;padding:8px 10px;background:rgba(10,16,36,.96);border-bottom:1px solid rgba(56,189,248,.2);flex-wrap:wrap;text-align:left}
.rz-cadre .tete b{flex:1;min-width:160px;font-size:14px;color:#e2e8f0}
.rz-cadre .tete button,.rz-cadre .tete a{padding:7px 12px;border-radius:10px;border:1px solid rgba(148,163,184,.3);background:#111a2e;color:#e2e8f0;font:700 13px 'Segoe UI',sans-serif;cursor:pointer;text-decoration:none}
.rz-cadre .tete button:hover,.rz-cadre .tete a:hover{border-color:#38bdf8;color:#38bdf8}
.rz-cadre iframe{width:100%;height:80vh;border:0;display:block;background:#0b1226}
.rz-moi{margin-top:16px;display:inline-flex;align-items:center;gap:8px;padding:9px 18px;border-radius:999px;cursor:pointer;font:800 14px 'Segoe UI',system-ui,sans-serif;
  color:#cbd5e1;background:transparent;border:1px solid rgba(148,163,184,.4);text-decoration:none}
.rz-moi:hover{border-color:#38bdf8;color:#fff}
@media(max-width:560px){.rz{padding:22px 12px 18px;border-radius:20px}.rz-reb{gap:6px}.rz-c{min-width:60px}.rz-c b{font-size:24px}}
@media (prefers-reduced-motion:reduce){.rz .rw-tics,.rz .rw-anneau{animation:none}}
@media print{.rz{display:none!important}}