:root {
    --vert: #009831;
    --orange: #ff5200;
    --noir: #000000;
    --bleu: #012d51;
    --rouge: #f44336;
}

@font-face { font-family: 'Eurostile'; src: url('/fonts/Eurostile%20Bold.ttf') format('truetype'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Roboto'; src: url('/fonts/ROBOTO-REGULAR.TTF') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Roboto'; src: url('/fonts/ROBOTO-BOLD.TTF') format('truetype'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Roboto'; src: url('/fonts/ROBOTO-ITALIC.TTF') format('truetype'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Roboto Condensed'; src: url('/fonts/ROBOTO-BOLDCONDENSED.TTF') format('truetype'); font-weight: 700; font-display: swap; }

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
    font-family: 'Roboto', system-ui, sans-serif;
    color: var(--noir);
    background: url('/img/spit/bg.jpg') center / cover no-repeat fixed;
}

.borne {
    position: relative;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* White header band (logos + title + dates) with an orange bottom border.
   The Ultra-SPIT logo and the nailer/ball overhang below the border onto the fence. */
.borne-header {
    position: relative;
    z-index: 5;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 3vw;
    height: 180px;
    padding: 0 3vw;
    background: #fff;
    border-bottom: 5px solid var(--orange);
}

.hdr-logo-paslode { height: 80px; }
.hdr-logo-ultra { height: 240px; transform: translateY(22px); }
.hdr-title { margin: 0 auto; text-align: center; }
.hdr-title-main { font-family: 'Eurostile', sans-serif; font-weight: 700; font-size: 60px; line-height: 1; margin: 0; }
.hdr-green { color: var(--vert); }
.hdr-orange { color: var(--orange); }
.hdr-dates { font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 36px; margin: 6px 0 0; color: var(--noir); }
.hdr-ball {
    height: 150px;
    margin-left: auto;
    margin-top: 80px;
}

.stage {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 3vh 4vw;
    gap: 2vw;
}

.stage-left {
    width: 46%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3vh;
}

.stage-right {
    width: 46%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Cards */
.card {
    background: #fff;
    border-radius: 16px;
    padding: 3vh 3vw;
    width: 100%;
    max-width: 640px;
    text-align: center;
    box-shadow: 0 6px 24px rgba(0, 0, 0, .25);
}

.card--center {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5vh;
}

/* Entry screen: prize visuals scattered around the card. */
.entry { position: relative; width: 100%; max-width: 640px; }
.deco { position: absolute; z-index: 3; pointer-events: none; }
.deco-ps5 { height: 170px; left: -30px; bottom: calc(7vh - 20px); }
.deco-pluxee { height: 85px; right: -60px; top: 50px; transform: rotate(-15deg); }
.deco-promo { height: 60px; right: -75px; top: 140px; transform: rotate(15deg); }
.deco-230av { height: 170px; right: -80px; top: 350px; transform: rotate(-15deg); }

/* Typography (charte) */
.titre { font-family: 'Eurostile', sans-serif; font-weight: 700; font-size: 33px; margin: .3em 0 0 0; }
.titre--orange { color: var(--orange); }
.titre--vert { color: var(--vert); }
.titre--rouge { color: var(--rouge); }
.texte { font-size: 27px; margin: .4em 0; }
.cadeau { font-family: 'Roboto'; font-weight: 700; font-size: 27px; margin: 0; }
.modalites { font-family: 'Roboto'; font-style: italic; font-size: 24px; color: #333; }
.erreur { color: var(--rouge); font-size: 22px; margin: .3em 0; }
.redirect { font-size: 18px; color: #666; margin: 1.2vh 0 0; }

/* Accueil : condition d'achat 299 € (sous le titre) + mention pro (en pied de carte) */
.condition {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 1.25;
    color: var(--bleu);
    margin: .2em 0 0;
}
.instruction { margin-top: 4vh; }
.mention-pro {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-size: 19px;
    color: var(--bleu);
    margin: 1.6vh 0 0;
}

/* BL input + buttons */
.bl-input {
    display: block;
    width: 80%;
    margin: 1.5vh auto;
    font-size: 30px;
    text-align: center;
    text-transform: uppercase;
    padding: .5em;
    border: 1px solid #cfcfcf;
    border-radius: 8px;
}

.btn-vert, .btn-bleu {
    border: none;
    border-radius: 8px;
    color: #fff;
    cursor: pointer;
    font-family: 'Roboto';
}

.btn-vert { background: var(--vert); font-size: 30px; padding: .55em 1.6em; }
.btn-vert:hover { filter: brightness(.92); }
.btn-vert:disabled { opacity: .7; cursor: not-allowed; }
.btn-bleu { background: var(--bleu); font-size: 22px; padding: .55em 1.4em; }

.btn-reglement { position: absolute; right: 2vw; bottom: 2.5vh; z-index: 3; }
.btn-chausson { position: absolute; left: 2vw; bottom: 2.5vh; z-index: 3; }

/* Pictos + prize */
.picto { width: 55px; height: 55px; object-fit: contain; }
.fleche-jouer { max-width: 100px; height: auto; object-fit: contain; }
.prize { display: flex; align-items: center; justify-content: center; gap: 1.5vw; }
.prize-img { max-height: 200px; max-width: 48%; object-fit: contain; }

/* Countdown */
.countdown {
    background: #111;
    color: #fff;
    border-radius: 12px;
    padding: 1.6vh 2vw;
    text-align: center;
    max-width: 640px;
    margin-top: 20px;
}

.countdown-titre { font-family: 'Eurostile'; font-weight: 700; font-size: 33px; margin: 0 0 1.2vh; }
.countdown-cells { display: flex; justify-content: center; gap: 1vw; }
.countdown-cells > div { display: flex; flex-direction: column; align-items: center; gap: .35em; }
.countdown-cells .num {
    font-family: 'Roboto Condensed';
    font-weight: 700;
    font-size: 43px;
    line-height: 1;
    background: #fff;
    color: #111;
    border-radius: 8px;
    padding: .12em .28em;
    min-width: 1.7em;
}
.countdown-cells .leg { font-family: 'Roboto Condensed'; font-weight: 700; font-size: 20px; }

/* Wheel */
.wheel-wrap { position: relative; display: inline-block; margin-bottom: 7vh; }
.roue { display: block; max-height: 65vh; max-width: 100%; }
.fleche { position: absolute; top: -3%; left: 50%; transform: translateX(-50%); height: 14%; z-index: 4; pointer-events: none; }
.roue-hit {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 100%; height: 100%;
    border-radius: 50%;
    background: transparent;
    border: none;
    cursor: pointer;
    z-index: 3;
}

/* Reglement */
/* Reglement view: card shrinks to leave room for the floating corner buttons
   (bottom-left "Accéder à Chausson.fr" / bottom-right "Retour au jeu"), so the
   layout matches the accueil. */
.stage--reglement { align-items: stretch; padding-bottom: 9vh; }
.card--reglement {
    max-width: none;
    width: 92vw;
    margin: 0 auto;
    min-height: 0;
    max-height: 100%;
    text-align: left;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.reglement-title { flex: 0 0 auto; }
.reglement-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    margin-top: 2vh;
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color: #1a1a1a;
    text-align: left;
}
.reglement-intro { font-family: 'Eurostile', sans-serif; font-weight: 700; font-size: 20px; color: var(--noir); margin: 0 0 .6em; }
.reglement-body h3 { font-family: 'Eurostile', sans-serif; font-weight: 700; font-size: 19px; color: var(--orange); margin: 1.3em 0 .3em; }
.reglement-body p { margin: .5em 0; }
.reglement-body ul { margin: .4em 0 .8em; padding-left: 1.4em; }
.reglement-body li { margin: .2em 0; }
.reglement-note { font-style: italic; color: #666; }
.reglement-agences { columns: 3; column-gap: 3vw; }
.reglement-agences li { break-inside: avoid; }