/* ==================================================================
 * Page de jeu « v2 » — servie avec les loading pages modeles 4 et 5.
 *
 * Feuille posee EN DERNIER, apres game-mecaniques.css. Ce gabarit ne charge
 * plus ni games.css ni le bundle Bootstrap : les mecaniques de jeu
 * (grattage, rouleaux, roue, cartes retournables, des) sont reprises dans
 * game-mecaniques.css, portees par body.gm. Seule l'enveloppe change ici —
 * en-tete, titre, cartes de fin de partie, boutons, pied.
 *
 * ⚠ Bootstrap parti, les classes qu'il portait n'ont plus de definition que
 * celle que ces deux feuilles leur donnent : .card, .card-footer,
 * .text-center, .text-muted, .hidden. Le balisage des partials partagees
 * s'en sert encore — ne pas supposer qu'une classe Bootstrap fait quelque
 * chose ici sans l'avoir verifiee.
 * ================================================================== */

:root{
    --gm-titre:       #ffffff;
    --gm-texte:       #e9e6e1;
    --gm-fond:        #0d1013;
    --gm-voile:       rgba(8, 10, 14, .55);
    --gm-carte-fond:  rgba(14, 16, 20, .92);
    --gm-carte-texte: #f4f2ee;
    --gm-bouton:      #d81b45;
    --gm-bouton-txt:  #ffffff;
    --gm-rayon:       14px;
    --gm-filet:       rgba(255, 255, 255, .14);
    --gm-font-titre:  'Varela Round', system-ui, sans-serif;
    --gm-font-texte:  'Nunito', system-ui, sans-serif;
}

body.gm{
    /* Repere du voile ci-dessous : il doit couvrir toute la page, pas
       seulement le premier ecran. */
    position: relative;
    display: flex;
    flex-direction: column;
    /* ⚠ games.css pose html, body { height: 100% } : le body restait cloue a
       la hauteur d'ecran et tout le reste de la page debordait au-dehors —
       le voile, cale sur lui, s'arretait a la ligne de flottaison. */
    height: auto;
    min-height: 100vh;
    min-height: 100svh;
    min-height: 100dvh;
    margin: 0;
    padding: 0;
    background-color: var(--gm-fond);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    color: var(--gm-texte);
    font-family: var(--gm-font-texte);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

/* Voile entre le fond et le contenu : la couleur du jeu est souvent
   claire — blanche pour plusieurs d'entre eux — et le texte, lui, est
   blanc. Le gabarit d'origine assombrit d'ailleurs pareil, par un
   linear-gradient pose sur le body.

   ⚠ En position: fixed, ce voile s'arretait a la hauteur de l'ecran : la
   page de jeu etant longue, tout ce qui passait sous la ligne de flottaison
   se retrouvait sur le fond nu, avec une coupure franche au milieu. En
   absolu, il epouse la hauteur reelle du document. */
body.gm::before{
    content: "";
    position: absolute;
    inset: 0;
    background: var(--gm-voile);
    pointer-events: none;
    z-index: 0;
}

body.gm > *{ position: relative; z-index: 1; }

/* ---------------- La carte ---------------- */

/* Meme systeme que la carte de participation (.pm-carte) : le jeu, son
   logo, son titre et sa consigne tiennent dans un seul bloc pose sur le
   decor, au lieu de flotter dessus. */
.gm-carte{
    width: 100%;
    /* Meme largeur que la carte de participation (.pm-scene--large) : le
       parcours v2 garde un seul gabarit d'un ecran a l'autre. */
    max-width: 720px;
    margin: 0 auto;
    padding: 20px;
    border-radius: 20px;
    background-color: var(--gm-carte-fond);
    color: var(--gm-carte-texte);
    text-align: center;
}

/* ---------------- En-tete, dans la carte ---------------- */

.gm-entete{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 0 0 16px;
    text-align: center;
}

/* ⚠ Porte par body.gm : game-mecaniques.css declare body.gm img, plus
   specifique qu'une classe seule, et le logo y perdait sa bride. */
body.gm .gm-entete__logo{
    max-width: 190px;
    max-height: 92px;
    width: auto;
    height: auto;
}

/* Le titre est pose sur la carte, plus sur la photo : il en prend la
   couleur, et n'a plus besoin d'ombre pour rester lisible. */
.gm-entete__titre{
    margin: 0;
    font-family: var(--gm-font-titre);
    font-size: clamp(19px, 4.6vw, 26px);
    font-weight: 700;
    line-height: 1.25;
    color: var(--gm-carte-texte);
    text-shadow: none;
}

/* ---------------- Corps ---------------- */

.gm-scene{
    /* Ne jamais se comprimer : avec flex-shrink a 1, la scene se tassait a
       la hauteur d'ecran imposee par min-height et son contenu debordait du
       body — le voile, cale sur le body, s'arretait donc au premier ecran. */
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    padding: 4px 12px 0;
}

/* Le plateau garde sa mise en page d'origine : on lui donne seulement de
   l'air et une largeur bornee dans la carte. */
body.gm #game-container{
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
}

/* ⚠ Le jackpot fait exception : ses trois rouleaux sont poses sur une image
   de fond de 290 px de large, en taille fixe. Elargir le bloc decalait le
   troisieme rouleau hors du cadre. Il garde donc les 320 px de games.css —
   la regle ci-dessus, plus specifique, les lui avait pris — mais peut
   retrecir sous cette valeur au lieu de deborder sur un petit telephone. */
body.gm #game-container.container-jackpot{
    max-width: 320px;
    min-width: 0;
}

/* Consigne sous le plateau. Elle est deja dans la carte : plus de fond
   propre, seulement du texte. Le style en ligne du back-office pose une
   couleur et un degrade — d'ou les !important pour les neutraliser. */
body.gm .gm-carte #card-text{
    max-width: 100%;
    margin: 16px 0 0;
    padding: 0;
    border-radius: 0;
    background: none !important;
    color: var(--gm-carte-texte) !important;
    font-family: var(--gm-font-texte);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.45;
}

/* ---------------- Fin de partie ---------------- */

/* Les sections arrivent en zoom: 0.01 et .hidden ; le JS les revele. On ne
   touche donc ni a display, ni a zoom : seulement a l'habillage. */
/* Ces sections vivent DANS la carte de jeu, a la suite du plateau : le
   joueur reste devant un seul bloc du debut a la fin de la partie. Elles
   n'ont donc ni fond ni rayon a elles — ce serait une carte dans une carte,
   noir sur noir. Un filet les detache de ce qui precede.

   ⚠ Elles arrivent en .hidden et en zoom: 0.01, et c'est le JS du jeu qui
   les revele en ramenant le zoom a 100 %. On ne touche donc ni a display,
   ni a zoom. */
body.gm #winCard,
body.gm #qrIfWonSection,
body.gm #qrIfLostSection,
body.gm #thankSection{
    /* game-mecaniques.css en fait des colonnes flex CENTRANTES, ce qui
       reduisait leur contenu a sa largeur propre. */
    align-items: stretch;
    width: 100%;
    margin: 18px 0 0;
    padding: 18px 0 0;
    border-top: 1px solid var(--gm-filet);
    text-align: center;
}

/* .card, .card-body et .card-footer viennent de Bootstrap, qui n'est plus
   charge : c'est a cette feuille de leur donner un sens. Ici, aucun : la
   carte, c'est celle qui les contient. */
body.gm #winCard .card,
body.gm #qrIfWonSection .card,
body.gm #qrIfLostSection .card{
    max-width: none;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--gm-carte-texte);
}

/* Le feu d'artifice annonce le resultat : il ouvre le bloc, centre. */
body.gm #fireworks{
    text-align: center;
}

/* Hierarchie des blocs de fin de partie. Le balisage est partage avec le
   gabarit d'origine et ne peut pas changer : on ne dispose que de h3 a h6
   et de .text-cadre. Le rang du titre y fait donc office de niveau —
   h3 l'annonce, h4 le lot, h5/h6 les precisions. */
body.gm #winCard .text-cadre,
body.gm #qrIfWonSection .text-cadre,
body.gm #qrIfLostSection .text-cadre,
body.gm #thankSection .text-cadre{
    /* Habillage prevu pour du texte pose sur le decor : dans la carte,
       l'ombre portee salit et le rembourrage desaligne. */
    padding: 0;
    text-shadow: none;
}

body.gm #winCard h3,
body.gm #qrIfWonSection h3,
body.gm #qrIfLostSection h3,
body.gm #thankSection h3{
    margin: 0;
    font-family: var(--gm-font-titre);
    font-size: 22px;
    font-weight: 700;
    line-height: 1.25;
}

body.gm #winCard h4,
body.gm #qrIfWonSection h4,
body.gm #qrIfLostSection h4,
body.gm #thankSection h4{
    margin: 12px 0 0;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.4;
}

body.gm #winCard h5,
body.gm #qrIfWonSection h5,
body.gm #qrIfLostSection h5,
body.gm #winCard h6,
body.gm #qrIfWonSection h6,
body.gm #qrIfLostSection h6,
body.gm #thankSection h6{
    margin: 10px 0 0;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.45;
    opacity: .85;
}

body.gm #winCard br,
body.gm #qrIfWonSection br,
body.gm #qrIfLostSection br{ line-height: 0; }

/* Le pied de ces blocs porte le bouton « obtenir une carte » : un filet
   plus discret que celui qui ouvre le bloc suffit a l'annoncer. */
body.gm #winCard .card-footer,
body.gm #qrIfWonSection .card-footer,
body.gm #qrIfLostSection .card-footer{
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--gm-filet);
    background: transparent;
}

/* ⚠ .text-color porte la couleur de texte du JEU, prevue pour se poser sur
   le DECOR. Dans la carte, le texte doit prendre la couleur de la CARTE :
   sur un jeu a carte noire et texte gris fonce (#000000 / #2e2e2e), le
   resultat de la partie etait illisible. La regle doit etre en !important
   ET plus specifique que body.gm .text-color, pose en ligne par le gabarit
   — d'ou l'identifiant. Elle ne vise que ces quatre sections : le bouton
   « Lancer les des » porte lui aussi .text-color, et tient sa couleur du
   reglage de bouton. */
body.gm #winCard .text-color,
body.gm #qrIfWonSection .text-color,
body.gm #qrIfLostSection .text-color,
body.gm #thankSection .text-color,
body.gm #winCard .text-cadre,
body.gm #qrIfWonSection .text-cadre,
body.gm #qrIfLostSection .text-cadre,
body.gm #thankSection .text-cadre{
    color: var(--gm-carte-texte) !important;
}

/* ⚠ Le bouton « obtenir une carte » est DANS ces sections et porte lui aussi
   .text-color : la regle ci-dessus le repeignait de la couleur du texte de
   carte — blanc casse sur un bouton blanc. Il a son propre fond, donc sa
   propre couleur de texte, celle reglee au back-office. Meme specificite que
   la regle precedente : c'est sa position, apres, qui la fait gagner. */
body.gm #winCard .getQrCard,
body.gm #qrIfWonSection .getQrCard,
body.gm #qrIfLostSection .getQrCard{
    color: var(--gm-bouton2-txt, var(--gm-bouton-txt)) !important;
}

/* ⚠ Le pied de ces blocs porte .text-muted, dont l'opacite ternit TOUT le
   sous-arbre — bouton d'action compris — et cela ne se rattrape pas sur
   l'enfant : l'opacite d'un parent n'est pas heritee, elle s'applique au
   rendu du groupe entier. Ici le pied se distingue par son filet et la
   taille de son texte, pas par un voile. */
body.gm #winCard .text-muted,
body.gm #qrIfWonSection .text-muted,
body.gm #qrIfLostSection .text-muted{
    opacity: 1;
}

/* ---------------- Boutons ---------------- */

/* Un seul dessin pour les boutons du theme : celui du jeu (JOUER, Lancer
   les des) et celui de fin de partie. La couleur du back-office reste
   prioritaire quand elle est posee en style en ligne. */
body.gm .start,
body.gm #spin_button,
body.gm #roll,
body.gm .getQrCard{
    display: inline-block;
    /* Le texte qui precede collait au bouton : sans respiration, la ligne
       « cliquez pour... » se lisait comme une partie du bouton. */
    margin-top: 14px;
    min-width: 200px;
    padding: 14px 24px;
    border: 0;
    border-radius: 999px;
    background: var(--gm-bouton);
    color: var(--gm-bouton-txt);
    font-family: var(--gm-font-texte);
    font-size: 16px;
    font-weight: 800;
    letter-spacing: .02em;
    text-transform: uppercase;
    /* Pas d'ombre portee : le bouton est le dernier element de la carte, et
       son ombre debordait sous le bord arrondi, coupee net. Le theme v2 n'en
       porte plus nulle part — carte de jeu, cartes de fin de partie, note de
       bas de page. Le survol et l'appui suffisent a le rendre vivant. */
    transition: transform .12s ease, filter .12s ease;
}

/* Le bouton de fin de partie se regle a part : ses variables retombent sur
   celles du bouton de jeu tant qu'aucune couleur ne lui est donnee, donc un
   jeu qui n'y touche pas garde exactement l'aspect qu'il avait. */
body.gm .getQrCard{
    background: var(--gm-bouton2, var(--gm-bouton));
    color: var(--gm-bouton2-txt, var(--gm-bouton-txt));
}

body.gm .start:hover,
body.gm #spin_button:hover,
body.gm #roll:hover,
body.gm .getQrCard:hover{ filter: brightness(1.08); }

body.gm .start:active,
body.gm #spin_button:active,
body.gm #roll:active,
body.gm .getQrCard:active{ transform: translateY(1px); }

body.gm .btn_container,
body.gm #spinButtonDiv{
    margin-top: 14px;
    text-align: center;
}

/* ---------------- Bouton du reglement ---------------- */

/* Meme bouton qu'en bas de la carte de participation (.cm-reglement) et de
   la loading page : le joueur le retrouve identique d'un ecran a l'autre.
   Ses couleurs viennent du jeu, sinon de la loading page — cf.
   rules_button_settings(). */
body.gm .gm-reglement{
    margin: 14px auto 0;
    padding: 9px 22px;
    border: 0;
    border-radius: 999px;
    background: var(--gm-reglement-fond, rgba(255, 255, 255, .92));
    color: var(--gm-reglement-texte, #23211c);
    font-family: var(--gm-font-texte);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

/* ⚠ Bootstrap 3 est charge en JS par _jeu-scripts.phtml, mais plus en CSS
   depuis que cette page a sa propre feuille : la fenetre s'ouvrirait sans
   aucune mise en forme. Le strict necessaire est donc repris ici — c'est le
   JS de Bootstrap qui pose display: block en ligne, ajoute .in et insere
   .modal-backdrop dans le body. */
body.gm .modal{
    position: fixed;
    inset: 0;
    z-index: 1050;
    display: none;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 20px 12px;
}

body.gm .modal-backdrop{
    position: fixed;
    inset: 0;
    z-index: 1040;
    background-color: #000;
}

body.gm .modal-backdrop.in{ opacity: .6; }

body.gm .modal.fade{ opacity: 0; transition: opacity .15s linear; }
body.gm .modal.fade.in{ opacity: 1; }

body.gm .modal-dialog{
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
}

/* ⚠ La fenetre ne suit PAS les couleurs de la carte. C'est une surface de
   lecture : liee a --gm-carte-fond, changer la couleur de la carte changeait
   le fond du reglement, et un jeu aux teintes sombres le rendait penible a
   lire. Fond clair et texte sombre, fixes — exactement le parti pris de la
   fenetre de la carte de participation (.pm-modale, player-modern.css). */
body.gm .modal-content{
    padding: 20px;
    border: 0;
    border-radius: 20px;
    background: #ffffff;
    color: #23211c;
    box-shadow: 0 30px 80px rgba(0, 0, 0, .45);
    text-align: left;
}

body.gm .modal-header{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 14px;
    border-bottom: 1px solid #eceae4;
}

body.gm .modal-title{
    margin: 0;
    font-family: var(--gm-font-titre);
    font-size: 19px;
    font-weight: 700;
    color: #23211c;
}

body.gm .modal-header .close{
    border: 0;
    background: none;
    color: inherit;
    font-size: 26px;
    line-height: 1;
    opacity: .7;
    cursor: pointer;
}

body.gm .modal-body{
    padding: 16px 0;
    font-size: 14px;
    line-height: 1.55;
}

body.gm .modal-body img{ max-width: 100%; height: auto; }

body.gm .modal-footer{
    padding-top: 14px;
    border-top: 1px solid #eceae4;
    text-align: right;
}

/* Le bouton « Fermer » vit dans la fenetre claire, pas sur la carte : il
   prend le contraste de la fenetre, pas celui du reglage du jeu. */
body.gm .modal-footer .gm-reglement{
    background: #23211c;
    color: #ffffff;
}

/* ---------------- Formulaire technique ---------------- */

/* #qrForm ne porte que des champs caches : le JS le poste pour basculer sur
   la carte a code-barres. Laisse dans le flux, il restait un enfant de la
   scene — colonne flex avec gap — et ajoutait donc un liseré de decor sous
   la note de bas de page, alors que la note doit fermer la page.
   Le submit de jQuery fonctionne sur un formulaire en display: none. */
body.gm #qrForm{
    display: none;
}

/* ---------------- Note de bas de page ---------------- */

/* La scene centre ses enfants, qui se reduisent donc a leur contenu : la
   note de bas de page, elle, doit tenir toute la largeur.

   ⚠ Elle etait habillee a deux endroits : game-mecaniques.css lui posait un
   fond aliceblue, des marges et une ombre INTERNE, que cette regle-ci
   reecrivait pour tout sauf l'ombre — laquelle restait donc affichee. La
   note releve de l'enveloppe, pas des mecaniques : elle n'a plus qu'une
   seule regle, celle-ci. */
body.gm .footer-rules{
    align-self: stretch;
    margin: 18px -12px 0;
    /* Derniere chose de la page : elle en occupe le bas, sans marge apres. */
    padding: 16px 26px;
    background: rgba(0, 0, 0, .38);
    font-size: 14px;
    text-align: center;
}

body.gm .footer-rules img{ max-width: 100%; height: auto; }

/* ---------------- Partage ---------------- */

body.gm .social-share{
    display: flex;
    justify-content: center;
    gap: 10px;
    margin: 16px 0 0;
}

@media (max-width: 400px){
    /* Marges resserrees : la carte doit laisser au jackpot ses 320 px de
       large, sinon ses rouleaux se tassent sur leur image de fond. */
    .gm-scene{ padding-left: 8px; padding-right: 8px; }
    /* ⚠ La note de bas de page annule le rembourrage de la scene par une
       marge negative : elle doit suivre quand ce rembourrage change, sinon
       elle deborde de la difference — 4 px de defilement horizontal ici. */
    body.gm .footer-rules{ margin-left: -8px; margin-right: -8px; }
    .gm-carte{ padding: 16px 12px; }
    .gm-entete__logo{ max-height: 72px; }
    body.gm .start,
    body.gm #spin_button,
    body.gm #roll,
    body.gm .getQrCard{ min-width: 0; width: 100%; }
}