/*
 * Page publique de la roulette : design commun a tous les restaurants (fond noir, roue noir et jaune dore, cadeaux,
 * pointeur et boutons rouges). Seuls le logo, le nom, les lots et les traductions changent d'un restaurant a l'autre.
 * Polices locales (aucune requete externe) : Lilita One (titres, boutons), Cairo 900 (arabe), Roboto Mono 700 (code).
 * Images : ../img/roulette/fond.webp et cadeau.webp (fournis par le proprietaire du produit).
 */
@font-face{font-family:"Lilita One";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/roulette/LilitaOne-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Lilita One";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/roulette/LilitaOne-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Cairo";font-style:normal;font-weight:900;font-display:swap;src:url(../fonts/roulette/Cairo-arabic.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+0870-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:"Roboto Mono";font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/roulette/RobotoMono-700-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --rl-disp:"Lilita One","Cairo","Arial Black",system-ui,sans-serif;
  --rl-simple:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --rl-mono:"Roboto Mono",ui-monospace,Consolas,"SF Mono",Menlo,monospace;
  --rl-red:#b8323c;
  --rl-gold:#f4b72b;
  --rl-dim:rgba(255,255,255,.72);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body.rl-body{margin:0;background:#000;color:#fff;font-family:var(--rl-simple);min-height:100vh;overflow-x:hidden}
.roulette-hidden{display:none !important}
:where(.rl-page) button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
:where(.rl-page) a{color:inherit}

/* ---------- fond ---------- */
.rl-stage{position:relative;overflow:hidden;background:#000}
/* Scene = contenu de la roulette (logo, titre, roue, bouton, liens) : le fond fourni est ancre au BAS DE LA SCENE, exactement comme avant l'ajout du pied de page
   (le pied de page, hors scene, ne decale donc pas l'image). Un fondu de 64 px vers le noir relie le bas de l'image au pied de page sans raccord visible. */
.rl-scene{position:relative;z-index:1;display:flex;flex-direction:column;min-height:100vh}
/* Fond (telephone) : image ancree au bas de la scene, position inchangee. Son bord bas portait de la fumee encore lumineuse, d'ou une coupure nette devant le pied
   de page ; l'image se dissout maintenant progressivement (masque a courbe adoucie sur son dernier sixieme), sans bande noire ni repetition. */
.rl-scene::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:url(../img/roulette/fond.webp) center bottom/100% auto no-repeat;-webkit-mask-image:linear-gradient(to bottom,#000 0,#000 76%,rgba(0,0,0,.82) 84%,rgba(0,0,0,.5) 91%,rgba(0,0,0,.2) 96.5%,transparent 100%);mask-image:linear-gradient(to bottom,#000 0,#000 76%,rgba(0,0,0,.82) 84%,rgba(0,0,0,.5) 91%,rgba(0,0,0,.2) 96.5%,transparent 100%)}
.rl-shell{position:relative;z-index:1;max-width:560px;margin:0 auto;padding:26px 20px 28px;display:flex;flex-direction:column;align-items:center;text-align:center}

/* ---------- logo, titre ---------- */
.rl-brand{display:flex;flex-direction:column;align-items:center;width:100%}
.rl-logo{display:block;width:auto;height:auto;max-width:min(62vw,240px);max-height:72px;object-fit:contain}
.rl-logo--plate{background:#fff;padding:8px 12px;border-radius:14px}
.rl-name{font-family:var(--rl-disp);font-size:24px;line-height:1.1;text-shadow:0 0 10px rgba(0,0,0,.9)}
.rl-title{margin:16px 0 0;font-family:var(--rl-disp);font-weight:400;font-size:27px;line-height:1.17;max-width:21em;text-wrap:balance;text-transform:uppercase;letter-spacing:.01em;text-shadow:0 0 8px rgba(0,0,0,.95),0 0 2px rgba(0,0,0,.9),0 0 18px rgba(255,255,255,.18)}
[dir=rtl] .rl-title{line-height:1.4;letter-spacing:0;font-size:26px}

/* ---------- roue ---------- */
.rl-wheel{width:min(calc(100vw - 40px),420px);margin-top:10px}
.rl-wheel.is-compact{width:min(50vw,196px);margin-top:6px}
.rl-wheel-svg{display:block;width:100%;height:auto;overflow:visible}
.rl-wheel-svg text{font-family:var(--rl-disp);fill:#fff}

/* ---------- actions ---------- */
.rl-actions{width:100%;max-width:380px;display:flex;flex-direction:column;align-items:center;margin-top:12px}
.roulette-play-wrap{width:100%}
.roulette-btn{display:flex;align-items:center;justify-content:center;width:100%;min-height:58px;padding:8px 20px;border-radius:999px;font-family:var(--rl-disp);font-size:22px;line-height:1.1;text-transform:uppercase;letter-spacing:.01em;text-decoration:none;text-shadow:0 2px 0 rgba(0,0,0,.28)}
[dir=rtl] .roulette-btn{letter-spacing:0}
.roulette-btn-primary{background:var(--rl-red);color:#fff;box-shadow:0 4px 0 #fff}
.roulette-btn[disabled]{cursor:default;pointer-events:none}
.roulette-btn-secondary{background:var(--rl-red);color:#fff;box-shadow:0 4px 0 #fff}
.roulette-btn-link{font-family:var(--rl-simple);font-size:15.5px;font-weight:600;text-transform:none;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1.5px;color:#fff;display:inline-flex;gap:6px;align-items:center}
.rl-under{position:relative;isolation:isolate;display:flex;flex-direction:column;align-items:center;width:100%;margin-top:16px}
.rl-under::before{content:"";position:absolute;z-index:-1;left:-40px;right:-40px;top:-16px;bottom:-30px;background:radial-gradient(ellipse 60% 56% at 50% 50%,rgba(0,0,0,.88) 0%,rgba(0,0,0,.74) 55%,rgba(0,0,0,0) 100%);pointer-events:none}
.roulette-status{width:100%;font-size:16px;font-weight:600;line-height:1.3;text-shadow:0 0 6px #000,0 0 2px #000}
.roulette-status:empty{display:none}
.roulette-status>strong{display:block;font-weight:600}
.roulette-status>p{margin:2px 0 0;color:var(--rl-dim);font-weight:500;font-size:14.5px}
.rl-links{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 26px;margin-top:14px;width:100%}
.rl-links .roulette-btn-link,.rl-links summary{text-shadow:0 0 6px #000,0 0 2px #000}
.roulette-prizes-disclosure{width:100%}
.roulette-prizes-disclosure summary{list-style:none;cursor:pointer;display:inline-block;font-size:15.5px;font-weight:600;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1.5px}
.roulette-prizes-disclosure summary::-webkit-details-marker{display:none}
.roulette-prizes-list{margin-top:14px;text-align:start;background:#000;border:1px solid rgba(255,255,255,.18);border-radius:24px;padding:10px 18px}
.roulette-prize-chip{display:flex;gap:12px;align-items:center;padding:10px 0;font-size:17px;font-weight:600;line-height:1.25;border-top:1px solid rgba(255,255,255,.14)}
.roulette-prize-chip:first-child{border-top:0}
.roulette-prize-chip img{width:30px;height:30px;flex:none}
.roulette-admin-test{margin-top:12px;display:flex;gap:10px;align-items:center;justify-content:center;font-size:13px}
.roulette-admin-test-badge{background:#fff;color:#000;border-radius:99px;padding:3px 10px;font-weight:700;font-size:12px}

/* ---------- fenetres (etapes, resultat) ---------- */
.roulette-overlay,.roulette-result-overlay{position:fixed;inset:0;background:rgba(0,0,0,.66);z-index:50}
.roulette-card{position:fixed;z-index:51;left:0;right:0;bottom:0;margin:0 auto;max-width:560px;background:#000;border:1px solid rgba(255,255,255,.16);border-bottom:0;border-radius:32px 32px 0 0;padding:26px 24px 28px;text-align:center;max-height:92vh;overflow:auto;animation:rl-up .35s cubic-bezier(.2,.8,.2,1)}
@keyframes rl-up{from{transform:translateY(36px);opacity:0}to{transform:none;opacity:1}}
.roulette-intro-logo{display:flex;justify-content:center;margin-bottom:6px}
.roulette-task-icon{display:none;width:44px;height:44px;padding:7px;border-radius:50%;background:#fff}
.roulette-task-icon.is-current{display:block}
.roulette-intro-eyebrow{margin:6px 0 0;font-size:14px;font-weight:600;color:var(--rl-dim)}
.roulette-card h2{margin:6px 0 0;font-family:var(--rl-disp);font-weight:400;font-size:29px;line-height:1.12;text-transform:uppercase;letter-spacing:.01em}
[dir=rtl] .roulette-card h2{letter-spacing:0}
.roulette-steps{display:grid;gap:14px;margin:20px 0 0;text-align:start}
.roulette-step{display:flex;gap:14px;align-items:center;font-size:19px;line-height:1.25;font-weight:700;color:var(--rl-dim)}
.roulette-step.is-active{color:#fff}
.roulette-step.is-done{color:rgba(255,255,255,.55)}
.roulette-step-index{flex:none;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.14);display:grid;place-items:center;font-family:var(--rl-disp);font-size:19px}
.roulette-step.is-active .roulette-step-index{background:var(--rl-red);box-shadow:0 2px 0 #fff}
.roulette-step.is-done .roulette-step-index{background:var(--rl-gold);color:#000}
.roulette-intro-actions{margin-top:22px;display:flex;flex-direction:column;gap:10px}
.roulette-review-status{margin:0;font-size:14px;font-weight:500;color:var(--rl-dim)}
.roulette-gate-link{width:100%}
.roulette-fallback-continue{margin-top:6px}

/* ---------- resultat : carte et fenetre ---------- */
.rl-result{text-align:center}
.rl-kicker{margin:14px 0 0;font-size:16px;font-weight:600;color:var(--rl-dim)}
.rl-prize,.roulette-result-text{margin:6px 0 0;font-family:var(--rl-disp);font-size:29px;line-height:1.12;text-transform:uppercase;overflow-wrap:anywhere}
.roulette-reward-code{margin:18px auto 0;border:2px dashed rgba(255,255,255,.7);border-radius:20px;padding:12px 10px 14px;display:flex;flex-direction:column;align-items:center}
.roulette-reward-code-label{font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--rl-dim)}
[dir=rtl] .roulette-reward-code-label{letter-spacing:0}
.roulette-reward-code-value{font-family:var(--rl-mono);font-weight:700;font-size:clamp(30px,10vw,40px);line-height:1.1;letter-spacing:.14em;padding-inline-start:.14em;margin-top:4px;direction:ltr;font-variant-ligatures:none}
.is-claimed .roulette-reward-code-value,.is-expired .roulette-reward-code-value{opacity:.4;text-decoration:line-through;text-decoration-thickness:3px}
.rl-expiry{margin:14px 0 0;font-size:17px;font-weight:700;line-height:1.3}
.is-expired .rl-expiry{color:#ff8d94}
.rl-instruction{margin:12px 0 0;font-size:18px;font-weight:600;line-height:1.38;text-wrap:balance}
.rl-result-label{margin:10px 0 0;font-size:20px;font-weight:700}
.rl-badge{display:inline-block;margin-top:12px;border:2px solid #fff;border-radius:99px;padding:3px 14px;font-size:15px;font-weight:700}
.rl-badge i{font-style:normal;color:var(--rl-gold)}
.rl-badge--expired{border-color:#ff8d94;color:#ff8d94}
.rl-inline-card{width:100%;margin-top:6px;background:#000;border:1px solid rgba(255,255,255,.18);border-radius:28px;padding:24px 20px}
.rl-inline-card h2{margin:0;font-family:var(--rl-disp);font-weight:400;font-size:29px;line-height:1.12;text-transform:uppercase}
.roulette-result-card .roulette-actions{margin-top:22px}
.is-played .roulette-play-wrap{display:none}

/* ---------- ordinateur : fond limite, fenetre a cote de la roue ---------- */
@media (min-width:700px){
  .rl-title{font-size:34px}
  /* Ordinateur : l'image est calee sur le BAS de la page (et non sur le haut) : meme position qu'avant dans l'etat standard (centre a 62 % de la hauteur de la fenetre),
     mais son bord bas ne peut jamais remonter au-dessus du bas de la page, quelle que soit la hauteur de la fenetre ou de la page (tablette, ecran en portrait, zoom arriere,
     liste des cadeaux ouverte, resultat affiche). Cause du defaut : avec un calage sur le haut, le bord bas de l'image (fumee lumineuse) restait visible en travers de
     la page quand la page etait plus haute que 62 % de la fenetre + 640 px, avec du noir dessous.
     Ancienne note : l'image du fond (position inchangee : calee sur le haut de la page) est portee par la page entiere, scene ET pied de page. Avant, elle etait
     coupee net au bas de la scene alors que la fumee y etait encore tres lumineuse (cause de la coupure horizontale). Elle s'estompe maintenant progressivement
     jusqu'au bas de la page (courbe adoucie), sans bande noire. */
  .rl-scene::before{display:none}
  .rl-stage::before{content:"";position:absolute;z-index:0;left:50%;width:min(720px,100vw);aspect-ratio:941/1672;bottom:min(0px,calc(38vh + 97px - min(720px,100vw)*0.8885));transform:translateX(-50%);background:url(../img/roulette/fond.webp) center/100% 100% no-repeat;-webkit-mask-image:linear-gradient(to right,transparent,#000 22%,#000 78%,transparent);mask-image:linear-gradient(to right,transparent,#000 22%,#000 78%,transparent);pointer-events:none}
  .rl-stage::after{content:"";position:absolute;z-index:0;left:0;right:0;bottom:0;height:min(360px,40vh);pointer-events:none;background:linear-gradient(to bottom,rgba(0,0,0,0) 0%,rgba(0,0,0,.05) 18%,rgba(0,0,0,.18) 36%,rgba(0,0,0,.42) 54%,rgba(0,0,0,.72) 72%,rgba(0,0,0,.92) 88%,#000 100%)}
  /* Roue proportionnee a la hauteur disponible : le viewBox du SVG fait 196 x 224 (ratio 1,143), le reste de la colonne (logo, titre, bouton,
     liens) occupe ~350 px. Plafond 540 px, plancher 300 px. */
  .rl-wheel{width:clamp(300px,calc((100vh - 385px) / 1.143),540px)}
  .rl-wheel.is-compact{width:clamp(250px,calc((100vh - 560px) / 1.143),330px)}
  /* Fenetre (etapes, resultat) : centree dans la page, jamais calee dans un coin. */
  .roulette-card{top:50%;bottom:auto;left:50%;right:auto;margin:0;width:min(480px,calc(100vw - 80px));max-width:none;transform:translate(-50%,-50%);border-bottom:1px solid rgba(255,255,255,.16);border-radius:32px;animation:none}
}
@media (prefers-reduced-motion:reduce){.roulette-card{animation:none}}

/* Pied de page commun sur la roulette (theme sombre fixe) : le fond de la scene se prolonge jusqu'en bas (le pied de page est DANS la scene, sans bande
   rapportee) ; seules les couleurs --lf-* changent. Un voile sombre sous les liens garantit leur lecture meme devant les eclats du fond. */
.rl-stage .legal-footer{--lf-text:rgba(255,255,255,.7);--lf-link:#fff;--lf-border:rgba(255,255,255,.2);--lf-accent:#f4b72b;margin-top:28px;position:relative;z-index:1;background:linear-gradient(to bottom,rgba(0,0,0,0),rgba(0,0,0,.9) 38%)}
.rl-scene .rl-shell{flex:1 0 auto;width:100%}
.rl-stage .legal-footer{width:100%;max-width:none;box-sizing:border-box}
.roulette-odds-note{margin:10px 0 2px;padding-top:10px;border-top:1px solid rgba(255,255,255,.14);font-size:12.5px;line-height:1.4;color:var(--rl-dim)}
/* Resultat unique : pendant que la fenetre du resultat est ouverte, la carte de resultat sous la roue reste masquee (place conservee, aucun decalage). Elle reapparait a la fermeture, et a tout rechargement. */
.is-result-open .rl-inline-card{visibility:hidden}