/* Fonts */
@font-face {
    font-family:'NeulisNeue';
    src: url('../fonts/Neulis_Neue_Light.woff2') format('woff2');
    font-weight:lighter;
    font-style:normal;
}
@font-face {
    font-family:'NeulisNeue';
    src: url('../fonts/Neulis_Neue_Light_Italic.woff2') format('woff2');
    font-weight:lighter;
    font-style:italic;
}
@font-face {
    font-family:'NeulisNeue';
    src: url('../fonts/Neulis_Neue_Medium.woff2') format('woff2');
    font-weight:normal;
    font-style:normal;
}
@font-face {
    font-family:'NeulisNeue';
    src: url('../fonts/Neulis_Neue_Medium_Italic.woff2') format('woff2');
    font-weight:normal;
    font-style:italic;
}
@font-face {
    font-family:'NeulisNeue';
    src: url('../fonts/Neulis_Neue_Bold.woff2') format('woff2');
    font-weight:bold;
    font-style:normal;
}
@font-face {
    font-family:'NeulisNeue';
    src: url('../fonts/Neulis_Neue_Bold_Italic.woff2') format('woff2');
    font-weight:bold;
    font-style:italic;
}

:root{
    --tomate:#000;
    --tomate-fonce:#9E2616;
    --basilic:#000;
    --safran:#000;
    --croute:#D98E3C;
    --croute-claire:#F0BE7A;
    --farine:#FBF1DE;
    --charbon:black;
    --creme:white;
}
* {margin:0; padding:0; box-sizing:border-box;}
html,body{ height:100%; }
body{
    font-family:'NeulisNeue';
    background:black;
    color:white;
    display:flex; flex-direction:column; align-items:center;
    min-height:100%; padding:1.2rem 1rem 2rem;
    overflow-x:hidden;
    -webkit-tap-highlight-color:transparent;
}

/* ── En-tête ── */
header{
    text-align:center; margin-bottom:.8rem;
    .eyebrow{
        display:inline-block; font-size:.7rem; font-weight:700;
        letter-spacing:.18em; text-transform:uppercase;
        border:1.5px solid white;
        border-radius:999px; padding:.25em .9em; margin-bottom:.6rem;
    }
    & h1{
        font-size:clamp(1.9rem, 8vw, 2.6rem); font-weight:900;letter-spacing:-.02em; line-height:1.05;
    }
    & .sub{ margin-top:.35rem; font-size:.95rem; }
}

/* ── Roue ── */
.wheel-wrap{
    position:relative;
    width:min(86vw, 380px); aspect-ratio:1;
    margin:1rem 0 1.4rem;
}
#wheel{
    width:100%; height:100%; display:block;
    transition:transform 5.2s cubic-bezier(.12,.61,.18,1);
    will-change:transform;
    filter:drop-shadow(0 10px 22px rgba(42,30,22,.28));
}
.pointer{
    position:absolute; top:-14px; left:50%; transform:translateX(-50%);
    width:0; height:0; z-index:2;
    border-left:16px solid transparent; border-right:16px solid transparent;
    border-top:26px solid #e6e6e6;
    &::after{
        content:""; position:absolute; top:-26px; left:-11px;
        border-left:11px solid transparent; border-right:11px solid transparent;
        border-top:18px solid white;
    }
}

/* ── Bouton GO ── */
#go{
    font:inherit; font-weight:900; font-size:1.35rem; letter-spacing:.08em;
    color:black; background:white;
    border:none; border-radius:999px; padding:.85em 2.6em;
    cursor:pointer; text-transform:uppercase;
    box-shadow:0 5px 0 #e6e6e6, 0 12px 20px rgba(158,38,22,.3);
    transition:transform .12s, box-shadow .12s, opacity .2s;
    &:active{ transform:translateY(4px); box-shadow:0 1px 0 #e6e6e6; }
    &:disabled{ opacity:.55; cursor:default; }
    &:focus-visible{ outline:3px solid #000; outline-offset:3px; }
}
.hint{ margin-top:.8rem; font-size:.85rem; color:#6b5a4a; min-height:1.2em; text-align:center; }

/* ── Écran résultat ── */
#result{
    position:fixed; inset:0; z-index:10;
    display:none; flex-direction:column; align-items:center; justify-content:center;
    text-align:center; padding:1.5rem;
    background:var(--charbon);
    color:var(--creme);
    &.show{ display:flex; }
}

#confetti{
    position:absolute; inset:0; width:100%; height:100%;
    pointer-events:none; z-index:1;
}
#result-content, #close{ position:relative; z-index:2; }

.won-emoji{ font-size:4.5rem; line-height:1; animation:pop .5s cubic-bezier(.2,1.6,.4,1); }

.won-title{
    font-size:clamp(1.6rem, 7vw, 2.4rem); font-weight:900;
    text-transform:uppercase; letter-spacing:-.01em;
    color:white; margin:.5rem 0 .2rem;
}
.won-label{ font-size:1.25rem; font-weight:700; margin-bottom:1.2rem; }

.voucher{
    background:var(--creme); color:var(--charbon);
    border-radius:18px; padding:1.1rem 1.4rem 1.3rem; max-width:340px; width:100%;
    box-shadow:0 14px 40px rgba(0,0,0,.45);
    & .small{ font-size:.72rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:#6b5a4a; }
    & .qr{
        display:flex; justify-content:center; margin:.5rem 0 .3rem;
        & svg{ border-radius:8px; }
    }
    & .code{
        font-family:ui-monospace, "SF Mono", Menlo, Consolas, monospace;
        font-size:2.1rem; font-weight:800; letter-spacing:.12em;
        color:var(--tomate); margin:.15rem 0 .6rem;
    }
    & hr{ border:none; border-top:2px dashed #d8c6ab; margin:.7rem 0; }
    & p{ font-size:.85rem; line-height:1.45; }
}

/* Étape Instagram avant déblocage du code */
.insta-btn{
    display:block; text-decoration:none; text-align:center;
    font-weight:800; font-size:1.05rem; color:#fff;
    background:linear-gradient(45deg,#F58529,#DD2A7B,#8134AF);
    border-radius:12px; padding:.8em 1em; margin:.7rem 0 .4rem;
}
#insta-confirm{
    display:none; width:100%; font:inherit; font-weight:700; font-size:.95rem;
    background:none; border:2px solid var(--basilic); color:var(--basilic);
    border-radius:12px; padding:.7em; cursor:pointer; margin-top:.3rem;
    &.ready{ display:block; }
}

.lost-title{ font-size:clamp(1.6rem,7vw,2.2rem); font-weight:900; text-transform:uppercase; color:var(--creme); margin:.5rem 0; }
.lost-sub{ font-size:1rem; color:#cdbfa9; max-width:300px; }

#close{
    margin-top:1.4rem; font:inherit; font-weight:700; font-size:.95rem;
    background:none; border:2px solid var(--creme); color:var(--creme);
    border-radius:999px; padding:.6em 1.8em; cursor:pointer;
}
#result.win #close{ display:none; }  /* un gain ne se ferme pas : l'écran sert de bon */

footer{ margin-top:auto; padding-top:1.5rem; font-size:.75rem; color:white; text-align:center; }

@media (prefers-reduced-motion: reduce){
    #wheel{ transition-duration:.8s; }
    .won-emoji{ animation:none !important; }
}

@keyframes slide{ to{ background-position:240px 0; } }
@keyframes pop{ from{ transform:scale(.2); opacity:0; } }

body.admin {
    --bg:#f4f5f7; --surface:#fff; --ink:#0f1115; --muted:#6b7280;
    --line:#e6e8ec; --accent:#e2483a; --accent-soft:rgba(226,72,58,.12);
    --ok:#16a34a; --bad:#dc2626; --bad-bg:#fef2f2; --bad-line:#fecaca;
    --radius:16px; --shadow:0 1px 2px rgba(16,17,21,.04),0 10px 30px rgba(16,17,21,.07);
    font-family:'NeulisNeue';background:var(--bg); color:var(--ink); -webkit-font-smoothing:antialiased; min-height:100vh;padding:2.2rem 1rem 3rem;display:flex; flex-direction:column; align-items:center; gap:1.1rem;
    & header.top{ text-align:center; }
    & .brand{
        display:inline-flex; align-items:center; gap:.5rem; font-weight:700;font-size:.8rem; letter-spacing:.02em; color:var(--muted);
        & .dot{ width:.55rem; height:.55rem; border-radius:50%; background:var(--accent); }
    }
    & h1{font-size:1.3rem; font-weight:700; letter-spacing:-.02em; margin-top:.25rem;}
    & h2{ font-size:.72rem; text-transform:uppercase; letter-spacing:.1em; color:var(--muted);
        margin:0 0 .9rem; font-weight:700; }
    & .card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
            box-shadow:var(--shadow); padding:1.5rem; width:100%; max-width:600px; }
    & label{ font-weight:600; font-size:.78rem; color:var(--muted); display:block; margin-bottom:.4rem; }
    & input[type="password"], & input[type="text"], & input[type="number"]{
        width:100%; font:inherit; font-size:1rem; padding:.6em .8em;border:1.5px solid var(--line); border-radius:11px; background:#fbfbfc; color:var(--ink);transition:border-color .15s, box-shadow .15s, background .15s;
        &:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 4px var(--accent-soft); background:#fff; }
    }
    & input[type="checkbox"]{ accent-color:var(--accent); }
    & button{
        font:inherit; font-weight:600; padding:.75em 1em; border:none; border-radius:11px;cursor:pointer; background:var(--ink); color:#fff; font-size:1rem;transition:transform .08s ease, opacity .15s;
        &:active{ transform:translateY(1px); }
        &:hover{ opacity:.92; }
        &.green{ background:var(--ok); }
        &.full{ width:100%; margin-top:1rem; }
        &.secondary{ background:#fff; color:var(--ink); border:1.5px solid var(--line); }
        &.ghost{ background:none; color:var(--muted); font-weight:600; font-size:.85rem; border:1px solid var(--line); }
        &.small{ font-size:.85rem; padding:.5em .9em; }
    }
    & .status{ border-radius:11px; padding:.8rem 1rem; margin-top:.6rem; font-weight:600; text-align:center; }
    & .bad{ background:var(--bad-bg); color:var(--bad); border:1px solid var(--bad-line); }
    & .flash{ background:var(--ink); color:#fff; border-radius:12px; padding:.8rem 1rem; font-weight:600;font-size:.9rem; width:100%; max-width:600px; text-align:center; }
    & .row{
        display:flex; gap:.8rem; align-items:flex-end; flex-wrap:wrap;border:1px solid var(--line);border-radius:14px; padding:1rem; margin-bottom:.8rem; background:#fbfbfc;
        & .f {
            display:flex; flex-direction:column; gap:.3em;
            &.label{ flex:1 1 100%; }
            &.short{ flex:1 1 130px; }
            &.emoji{ flex:0 0 70px; }
            &.every{ flex:0 0 120px; }
            &.active{ flex:0 0 auto; align-self:center; }
            &.active .switch{
                display:inline-flex; align-items:center; gap:.55em; cursor:pointer; user-select:none;
                font-weight:600; color:var(--ink); font-size:.85rem; margin:0;
            }
            &.active .switch input{ position:absolute; opacity:0; width:1px; height:1px; pointer-events:none; }
            &.active .switch .track{
                position:relative; flex:0 0 auto; width:42px; height:24px; border-radius:999px;
                background:#cdd2da; transition:background .18s ease;
            }
            &.active .switch .thumb{
                position:absolute; top:2px; left:2px; width:20px; height:20px; border-radius:50%;
                background:#fff; box-shadow:0 1px 3px rgba(16,17,21,.25); transition:transform .18s ease;
            }
            &.active .switch input:checked + .track{ background:var(--accent); }
            &.active .switch input:checked + .track .thumb{ transform:translateX(18px); }
            &.active .switch input:focus-visible + .track{ box-shadow:0 0 0 4px var(--accent-soft); }
        }
    }
    & .small-note{ font-size:.8rem; color:var(--muted); margin-top:.5rem; line-height:1.5; }
    & .stats{
        display:flex; gap:.7rem; width:100%; max-width:600px;
        & div{ flex:1; background:var(--surface); border:1px solid var(--line); border-radius:14px;padding:.9rem .5rem; text-align:center; box-shadow:var(--shadow); }
        & b{ display:block; font-size:1.5rem; font-weight:700; letter-spacing:-.02em; }
        & span{ font-size:.66rem; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); }
    }
    & .topbar{ width:100%; max-width:600px; display:flex; justify-content:flex-end; }
    & .cooldown-wrap{ max-width:220px; }
    & hr{ border:none; border-top:1px solid var(--line); margin:1.3rem 0; }
}