/* ==========================================================================
   Hasbro × Coupe du Monde de la FIFA 2026 — feuille de styles globale
   ========================================================================== */

/* Reset minimal */
*, *::before, *::after { box-sizing: border-box; }
html, body, div, span, h1, h2, h3, h4, h5, h6, p, a, img, ul, ol, li,
form, label, input, button, select, textarea, fieldset, legend, table {
    margin: 0;
    padding: 0;
    border: 0;
    font: inherit;
    vertical-align: baseline;
}
ol, ul { list-style: none; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
input, button, select, textarea { outline: none; font-family: inherit; }

/* Variables */
:root {
    --rouge: #E30613;
    --rouge-fonce: #B30000;
    --jaune: #FFCD00;
    --jaune-clair: #FFE357;
    --vert-popup: #1E5631;
    --vert-clair: #2E7D3E;
    --noir: #000;
    --blanc: #fff;
    --gris-texte: #333;
    --sidebar-w: clamp(360px, 30vw, 591px);
    --footer-h: 48px;
}

/* Base */
html, body { height: 100%; }
body {
    font-family: 'Montserrat', system-ui, -apple-system, Arial, sans-serif;
    font-weight: 400;
    color: var(--noir);
    background: var(--noir);
    overflow-x: hidden;
}

/* ==========================================================================
   Layout principal — pleine largeur, footer noir fixed
   ========================================================================== */

#site {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1fr var(--sidebar-w);
    grid-template-areas: "main sidebar";
    width: 100%;
    /* Le fond Monopoly couvre TOUT le site (visible derrière l'arrondi de la sidebar) */
    background-image: url('/img/fond.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: var(--noir);
    position: relative;
}

#main {
    grid-area: main;
    position: relative;
    min-height: 100vh;
    padding: 32px 0 var(--footer-h) 48px;
    overflow: hidden;
}

#sidebar {
    grid-area: sidebar;
    background: var(--rouge);
    color: var(--blanc);
    padding: 26px 35px 240px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
    overflow: hidden;
    border-top-left-radius: 210px;
}

.footer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: var(--footer-h);
    background: var(--noir);
    color: var(--blanc);
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    padding: 0 16px;
}
.footer a {
    color: var(--blanc);
    text-transform: uppercase;
    margin: 0 8px;
    font-weight: 600;
}
.footer a:hover { text-decoration: underline; }
.footer .sep { color: #666; margin: 0 4px; }

/* ==========================================================================
   Logo Monopoly + FIFA (haut-gauche du main)
   ========================================================================== */

.logo-monopoly {
    display: inline-block;
    position: relative;
    z-index: 5;
    width: clamp(220px, 22vw, 380px);
}
.logo-monopoly img { width: 100%; height: auto; display: block; }

/* ==========================================================================
   Mr Monopoly — toujours visible bas-gauche du viewport, coupé par le footer
   ========================================================================== */

.mr-monopoly {
    position: fixed;
    left: -10px;
    bottom: 0;
    width: clamp(220px, 22vw, 360px);
    z-index: 4;
    pointer-events: none;
    user-select: none;
}
.mr-monopoly img { width: 100%; height: auto; display: block; }
.mr-monopoly.pose-jeu     { width: clamp(320px, 34vw, 520px); }
.mr-monopoly.pose-gagne,
.mr-monopoly.pose-perdu   { width: clamp(220px, 22vw, 360px); }

/* ==========================================================================
   Sidebar contenu
   ========================================================================== */

.sidebar-logo-fifa {
    width: 80px;
    margin: 0 auto 16px;
}
.sidebar-logo-fifa img { width: 100%; height: auto; }

.sidebar-slogan {
    width: 100%;
    margin: 12px 0 24px;
}
.sidebar-slogan img { width: 100%; height: auto; margin: 0 auto; }

.sidebar-cartes {
    width: 100%;
    margin: 0 0 16px;
}
.sidebar-cartes img { width: 100%; height: auto; }

.sidebar-mention {
    font-size: 11px;
    line-height: 1.4;
    margin: 0 0 16px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

/* Plateau Monopoly : ancré au viewport (comme le footer) pour que la moitié
   haute soit toujours visible juste au-dessus du footer noir, indépendamment
   de la hauteur de la sidebar et du scroll. */
.sidebar-plateau {
    position: fixed;
    bottom: var(--footer-h);
    right: 0;
    width: var(--sidebar-w);
    z-index: 2;
    pointer-events: none;
}
.sidebar-plateau img {
    width: 100%;
    height: auto;
    display: block;
    /* Coupé au milieu de la hauteur réelle du plateau (le 60% compense
       la zone vide d'ombre/perspective présente en bas de l'image). */
    transform: translateY(60%);
}

/* Sur viewport bas (< 815px de haut), le plateau ne doit plus être fixed
   pour ne pas chevaucher le contenu de la sidebar. Il revient dans le flux. */
@media (max-height: 815px) {
    .sidebar-plateau {
        position: static;
        width: 100%;
        margin-top: auto;
        order: 99;
    }
    .sidebar-plateau img {
        transform: none;
        margin-bottom: calc(0px - var(--footer-h));
    }
}

/* ==========================================================================
   Zone centrale : popup blanc / vert
   ========================================================================== */

.content {
    position: relative;
    z-index: 3;
    width: 100%;
    max-width: 720px;
    margin: 56px 0 220px auto;
    padding-right: 0;
    text-align: center;
}
body.preview .content,
body.termine .content,
body.deja .content {
    max-width: 820px;
    /* Visuellement collé à la sidebar : on annule le padding-right du #main */
    margin-right: -48px;
}
body.form .content,
body.resultat.mr-pose-perdu .content {
    /* Aligné à droite à 20px de la sidebar (cf. Figma) */
    margin: 56px 20px 220px auto;
}
body.form2 .content,
body.resultat.mr-pose-gagne .content {
    /* Collé à la sidebar (cf. Figma) */
    margin: 56px 0 220px auto;
}
body.jeu .content {
    /* Collé à la sidebar (comme home) */
    margin: 56px 0 220px auto;
}

.popup-card {
    background: var(--blanc);
    border-radius: 12px;
    padding: 32px 36px 28px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.25);
    text-align: center;
    color: var(--noir);
}

.popup-card.vert {
    background: var(--vert-popup);
    color: var(--blanc);
}

.popup-card h1, .popup-card .h1 {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.25;
    margin-bottom: 16px;
    text-transform: uppercase;
}
.popup-card p { font-size: 14px; line-height: 1.5; margin-bottom: 12px; }
.popup-card strong, .popup-card b { font-weight: 700; }
.popup-card img { max-width: 100%; height: auto; display: block; margin: 0 auto; }
.popup-card .produit-photo { margin: 16px 0 0; }
.popup-card .produit-photo img { max-width: 280px; }

/* image-only : aucune décoration ajoutée — le visuel est porté par l'image elle-même */
.popup-card.image-only {
    padding: 0;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
}
.popup-card.image-only img { border-radius: 0; box-shadow: none; }

.highlight-yellow {
    background: var(--jaune);
    color: var(--noir);
    padding: 6px 16px;
    border-radius: 4px;
    display: inline-block;
    font-weight: 700;
    text-transform: uppercase;
}

/* ==========================================================================
   CTA boutons
   ========================================================================== */

.cta {
    display: inline-block;
    background: var(--jaune);
    color: var(--noir);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 18px;
    padding: 14px 36px;
    border: 0;
    border-radius: 8px;
    cursor: pointer;
    letter-spacing: 0.05em;
    box-shadow: 0 4px 0 var(--noir);
    transition: transform 0.1s ease, box-shadow 0.1s ease;
}
.cta:hover { transform: translateY(-2px); box-shadow: 0 6px 0 var(--noir); }
.cta:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--noir); }

/* Variante : CTA porté par une image PNG (cf. doc/images/desktop/cta) */
.cta.cta-image {
    background: transparent;
    padding: 0;
    border: 0;
    box-shadow: none;
    line-height: 0;
}
.cta.cta-image:hover { transform: translateY(-2px); box-shadow: none; }
.cta.cta-image:active { transform: translateY(1px); box-shadow: none; }
.cta.cta-image img {
    display: block;
    width: 220px;
    max-width: 100%;
    height: auto;
}

/* ==========================================================================
   Formulaires
   ========================================================================== */

form .field {
    margin-bottom: 14px;
    text-align: left;
}
form .field-row {
    display: flex;
    gap: 12px;
    margin-bottom: 14px;
}
form .field-row .field { flex: 1; margin-bottom: 0; }

form input[type="text"],
form input[type="email"],
form input[type="tel"],
form select {
    width: 100%;
    padding: 12px 16px;
    border: 1.5px solid var(--noir);
    border-radius: 28px;
    font-size: 14px;
    background: var(--blanc);
    color: var(--noir);
    font-family: inherit;
}
form input::placeholder,
form select { color: var(--noir); }
form input:focus, form select:focus { outline: 2px solid var(--noir); outline-offset: -1px; }

form .upload {
    position: relative;
    border: 1.5px solid var(--noir);
    border-radius: 28px;
    padding: 12px 16px 12px 14px;
    background: var(--blanc);
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    cursor: pointer;
    color: var(--noir);
}
form .upload input[type="file"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}
form .upload .upload-icon {
    color: var(--noir);
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    line-height: 0;
}
form .upload .upload-name { flex: 1; }
form .upload .help-icon {
    color: var(--noir);
    cursor: pointer;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    line-height: 0;
    /* Au-dessus de l'input[type=file] qui couvre tout le label */
    position: relative;
    z-index: 2;
}
form .upload .icon-camera,
form .upload .icon-info { display: block; }

form .checkbox-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 12px;
    font-size: 12px;
    line-height: 1.4;
    text-align: left;
}
form .checkbox-row input[type="checkbox"] {
    margin-top: 2px;
    flex-shrink: 0;
}
form .checkbox-row a { text-decoration: underline; }

form .legal {
    font-size: 10.5px;
    font-style: italic;
    line-height: 1.2;
    color: var(--gris-texte);
    margin: 12px 0;
    text-align: justify;
}

/* Custom select (libellé visuel par-dessus le select natif) */
form .field select.custom-select {
    color: #888;
}
form .field select.custom-select.has-value { color: var(--noir); }

/* États d'erreur */
form .has-error,
form input.has-error,
form select.has-error,
form .field.has-error select,
form .upload.has-error,
form .checkbox-row.has-error {
    border-color: var(--rouge) !important;
    color: var(--rouge);
}
form input.has-error::placeholder { color: var(--rouge); }

/* Titre du formulaire (image) */
.form-title {
    margin: 0 auto 20px;
    display: block;
    text-align: center;
}
.form-title img,
.form-title picture { max-width: 100%; height: auto; margin: 0 auto; }

.submit-zone {
    text-align: center;
    margin-top: 18px;
}

.upload .upload-name {
    color: var(--noir);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: calc(100% - 28px);
}
.upload.has-file .upload-name { color: var(--noir); }

/* Popup overlay : titres et paragraphes */
.popup-overlay h2 {
    font-size: 16px;
    font-weight: 700;
    text-align: center;
    margin: 0 0 12px;
}
.popup-overlay p {
    font-size: 13px;
    line-height: 1.5;
    text-align: center;
    margin: 0;
}

/* ==========================================================================
   Mini-jeu (4 cartes)
   ========================================================================== */

/* Pavé jaune englobant titre + cartes (cf. Figma 03_Game-start) */
.jeu-block {
    background: #E3E137;
    border-radius: 50px 0 0 0;
    padding: 40px 28px 90px;
    position: relative;
    z-index: 3;
}

.jeu-titre {
    text-align: center;
    margin-bottom: 70px;
    position: relative;
}
.jeu-titre img { display: inline-block; max-width: 80%; height: auto; }

.cartes-jeu {
    display: flex;
    gap: 16px;
    justify-content: center;
    align-items: flex-start;
    margin: 0 auto;
    max-width: 760px;
    perspective: 1200px;
    position: relative;
}
.carte-jeu {
    flex: 1;
    aspect-ratio: 0.7;
    position: relative;
    cursor: pointer;
    transform-style: preserve-3d;
    transition: transform 0.7s ease;
    max-width: 180px;
}
.carte-jeu.flipped { transform: rotateY(180deg); cursor: default; }
.carte-jeu .face {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    overflow: hidden;
    background: var(--blanc);
    box-shadow: 0 8px 18px rgba(0,0,0,0.35);
}
.carte-jeu .face img { width: 100%; height: 100%; object-fit: cover; display: block; }
.carte-jeu .face.recto { transform: rotateY(0deg); }
.carte-jeu .face.verso { transform: rotateY(180deg); }
.carte-jeu .nom {
    position: absolute;
    top: calc(100% + 12px);
    left: 0; right: 0;
    text-align: center;
    color: var(--noir);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.1;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    transform: translateZ(1px);
    transition: opacity 0.3s ease;
}
.carte-jeu.flipped .nom { opacity: 0; }
.carte-jeu.flipped .carte-fleche { transform: translateX(-50%) rotateY(-180deg); }

/* Flèche noire au-dessus de chaque carte (cf. doc/images/fleche.png) */
.carte-jeu .carte-fleche {
    position: absolute;
    top: -42px;
    left: 50%;
    transform: translateX(-50%);
    width: 37px;
    height: auto;
    z-index: 5;
    pointer-events: none;
    transition: transform 0.7s ease;
}

/* ==========================================================================
   Popup contact (overlay)
   ========================================================================== */

.popup-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 100;
    padding: 24px;
}
.popup-overlay.open { display: flex; }
.popup-overlay .popup-inner {
    background: var(--blanc);
    border-radius: 12px;
    max-width: 560px;
    width: 100%;
    position: relative;
}
.popup-overlay .popup-inner.image-only {
    background: transparent;
    border-radius: 0;
    max-width: min(900px, 90vw);
    padding: 0;
}
.popup-overlay .popup-inner.image-only img {
    width: 100%;
    height: auto;
    display: block;
    background: var(--blanc);
    border-radius: 16px;
}
.popup-overlay .close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--noir);
    color: var(--blanc);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 16px;
    font-weight: 700;
}
.popup-overlay .popup-inner img { width: 100%; height: auto; }
.popup-overlay .popup-inner.only-mobile { display: none; }

/* ==========================================================================
   Mobile
   ========================================================================== */

@media (max-width: 911px) {
    #site {
        grid-template-columns: 1fr;
        grid-template-areas:
            "main"
            "sidebar"
            "footer";
        grid-template-rows: auto auto auto;
    }
    #site {
        background-image: url('/img/fond-mobile.jpg');
    }
    #main {
        padding: 20px 20px 0px 20px;
        min-height: auto;
    }
    .logo-monopoly {
        display: block;
        width: 297px;
        max-width: 70%;
        margin: 0 auto;
    }

    .mr-monopoly {
        width: 180px;
        left: -10px;
        bottom: 0;
    }
    .mr-monopoly.pose-jeu { width: 200px; }

    .content {
        max-width: 100%;
        margin: 32px auto 0;
    }
    .popup-card { padding: 22px 22px 18px; }
    .popup-card h1, .popup-card .h1 { font-size: 16px; }
    .popup-card p { font-size: 11px; }

    body.form form .field-row { flex-direction: column; gap: 14px; }
    body.form form .field-row .field { margin-bottom: 0; }
    body.form .content { margin-bottom: 0; }

    .popup-overlay .popup-inner.only-desktop { display: none; }
    .popup-overlay.open .popup-inner.only-mobile { display: block; }
    .popup-overlay .popup-inner.image-only.only-mobile { max-width: min(514px, 92vw); }

    #sidebar {
        padding: 24px 20px 32px;
    }
    .sidebar-logo-fifa { width: 90px; margin-bottom: 18px; }
    .sidebar-slogan { max-width: 60%; margin: 0 auto 20px; }
    .sidebar-cartes { max-width: 80%; margin: 0 auto 12px; }
    .sidebar-mention { font-size: 10px; }
    .sidebar-plateau { max-width: 100%; margin-top: 18px; }

    .footer { font-size: 10px; padding: 10px 8px; }
    .footer a { display: inline-block; margin: 2px 4px; }

    .cta { font-size: 16px; padding: 12px 28px; }

    .cartes-jeu { gap: 56px 20px; flex-wrap: wrap; max-width: 260px; margin: 0 auto; }
    .carte-jeu { flex: 0 0 calc(50% - 10px); max-width: calc(50% - 10px); }
    .carte-jeu .nom { font-size: 11px; bottom: -22px; }
    .carte-jeu .carte-fleche { display: none; }
    body.jeu .content { margin: 28px -20px 100px auto; }
    body.jeu .jeu-block { padding: 24px 18px 50px; border-radius: 40px 0 0 0; }
    body.jeu .jeu-titre { margin-bottom: 28px; }
    body.resultat.mr-pose-perdu .content { margin-bottom: 100px; }
}

@media (max-width: 480px) {
    .mr-monopoly { width: 140px; }
    .mr-monopoly.pose-jeu { width: 160px; }
}


/* ==========================================================================
   États spécifiques par page (body class)
   ========================================================================== */

/* Pages "écran fixe" : preview / deja / termine — pas de scroll vertical, contenu
   contraint à la hauteur du viewport (comme sur le Figma) */
body.preview,
body.deja,
body.termine {
    overflow: hidden;
    height: 100vh;
}
body.preview #site,
body.deja #site,
body.termine #site {
    height: 100vh;
    min-height: 100vh;
}
body.preview #main,
body.deja #main,
body.termine #main {
    height: 100vh;
    max-height: 100vh;
}
body.preview .content,
body.deja .content,
body.termine .content {
    /* Espace réservé sous le content : 220px sur grand écran (cf. Figma),
       réduit sur viewport bas pour préserver la place du popup. */
    --bottom-gap: 220px;
    margin: clamp(24px, 4vh, 80px) 0 var(--bottom-gap) auto;
    max-height: calc(100vh - var(--footer-h) - var(--bottom-gap) - 80px);
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
@media (max-height: 800px) {
    body.preview .content,
    body.deja .content,
    body.termine .content {
        --bottom-gap: clamp(100px, 22vh, 200px);
    }
}
body.preview .popup-card,
body.deja .popup-card,
body.termine .popup-card {
    max-height: 100%;
}
body.preview .popup-card.image-only img {
    max-height: calc(100vh - var(--footer-h) - 220px - 100px);
    width: auto;
    max-width: 100%;
    object-fit: contain;
}
@media (max-height: 800px) {
    body.preview .popup-card.image-only img {
        max-height: calc(100vh - var(--footer-h) - clamp(100px, 22vh, 200px) - 80px);
    }
}

/* Page jeu : retirer la marge basse de .content car les cartes l'occupent */
body.jeu .content { margin: 64px 0 200px auto; max-width: 640px; }

/* Page form : popup plus large */
body.form .content { max-width: 560px; }

/* Page form2 : popup plus compact */
body.form2 .content { max-width: 480px; }
body.form2 .popup-card { border-radius: 50px 0 0 0; }

/* ==========================================================================
   Mobile : annule le mode "écran fixe" — le layout passe en stack vertical
   et la sidebar doit pouvoir s'afficher dessous via scroll naturel.
   En mobile, l'image /img/slogan-mobile.png contient déjà tout le contenu de
   la sidebar (Mr Monopoly + logo FIFA + slogan + cartes + plateau + fond
   rouge), on cache donc tous les autres éléments de la sidebar et le
   Mr Monopoly fixed pour ne garder que cette image en pleine largeur.
   (Doit être après les règles "écran fixe" pour les override.)
   ========================================================================== */
@media (max-width: 911px) {
    body.preview,
    body.deja,
    body.termine {
        overflow: auto;
        height: auto;
    }
    body.preview #site,
    body.deja #site,
    body.termine #site {
        height: auto;
        min-height: 100vh;
    }
    body.preview #main,
    body.deja #main,
    body.termine #main {
        height: auto;
        max-height: none;
        min-height: auto;
        padding-bottom: 0px;
    }
    body.preview .content,
    body.deja .content,
    body.termine .content {
        margin: 16px auto 0px;
        max-height: none;
        max-width: 100%;
        --bottom-gap: 0;
        justify-content: center;
    }
    body.preview .popup-card.image-only img {
        max-height: none;
        width: 100%;
        max-width: 100%;
    }

    /* Mr Monopoly : pas de version fixed en mobile (il est dans slogan-mobile.png) */
    .mr-monopoly { display: none; }

    /* Sidebar : pas de fond, ni arrondi, ni padding — l'image fait tout */
    #sidebar {
        background: transparent;
        border-top-left-radius: 0;
        padding: 0 0 0 20px;
        overflow: visible;
    }
    .sidebar-logo-fifa,
    .sidebar-cartes,
    .sidebar-mention,
    .sidebar-plateau {
        display: none;
    }
    .sidebar-slogan {
        width: 100%;
        max-width: none;
        margin: 0;
    }
    .sidebar-slogan img,
    .sidebar-slogan picture {
        width: 100%;
        height: auto;
        max-width: none;
        margin: 0;
        display: block;
    }

    /* Override de la règle desktop body.jeu .content (ligne 759) qui appliquait
       margin-bottom: 200px sur mobile à cause de l'ordre du cascade. */
    body.jeu .content { margin: 28px -20px 100px auto; max-width: none; }

}