/* Ecrans communs des jeux a score (accueil, rebours, HUD, fin, classement).
   Les variables --jeu-* sont posees par jeu/theme.js ; les couleurs de la
   marque (--accent, --fond, --couleur-texte, --police) viennent de
   l habillage. Chaque jeu ajoute sa propre feuille pour sa zone de jeu. */
:root {
  --jeu-bouton-fond: #111111; --jeu-bouton-texte: #ffffff; --jeu-hud-texte: #ffffff;
  --jeu-voile: rgba(0, 0, 0, 0.78);
}
.ecran-jeu { position: fixed; inset: 0; overflow: hidden; touch-action: manipulation; font-family: var(--police, Arial, Helvetica, sans-serif); background: #111; }
.ecran-jeu[hidden] { display: none; }
.jeu-bandeau { position: fixed; top: 0; left: 0; right: 0; z-index: 200; padding: 6px 10px; background: #263d30; color: #d7f57b; font: 700 11px/1.3 Arial, sans-serif; letter-spacing: 1px; text-align: center; pointer-events: none; }
.jeu-panneau { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(92vw, 440px); max-height: 94dvh; padding: 22px 18px; background: var(--fond, #ffffff); color: var(--couleur-texte, #111111); border-radius: 22px; text-align: center; overflow-y: auto; z-index: 30; box-shadow: 0 12px 40px rgba(0, 0, 0, .3); }
.jeu-logo { display: block; width: min(65%, 180px); max-height: 85px; object-fit: contain; margin: 0 auto 12px; }
.jeu-titre { font-size: clamp(30px, 9vw, 48px); font-weight: 900; line-height: 1; margin-bottom: 10px; }
.jeu-sous-titre { font-size: clamp(15px, 4vw, 18px); font-weight: 600; margin-bottom: 18px; }
.jeu-champs { display: flex; flex-direction: column; gap: 10px; }
.jeu-champs input, .jeu-champs select { display: block; width: 100%; min-height: 48px; padding: 12px 14px; border: 1px solid #ccc; border-radius: 12px; background: var(--jeu-champ-fond, #fff); color: var(--jeu-champ-texte, #111); font: inherit; font-size: 16px; outline: none; }
.jeu-champs input:focus, .jeu-champs select:focus { border-color: #111; }
.jeu-consentement { display: flex; align-items: flex-start; gap: 9px; margin-top: 10px; text-align: left; font-size: 12px; line-height: 1.35; }
.jeu-consentement input { flex: 0 0 auto; width: 18px; height: 18px; margin: 1px 0 0; }
.jeu-erreur { margin: 10px 0 0; font-size: 13px; color: var(--jeu-alerte-texte, #b3261e); background: var(--jeu-alerte-fond, transparent); padding: var(--jeu-alerte-marge, 0); border-radius: 10px; }
.jeu-bouton { display: block; width: 100%; min-height: 54px; margin-top: 16px; padding: 12px 20px; border: none; border-radius: 14px; background: var(--jeu-bouton-degrade, var(--jeu-bouton-fond)); color: var(--jeu-bouton-texte); font: inherit; font-size: var(--jeu-bouton-taille, 19px); font-weight: 900; cursor: pointer; text-decoration: none; text-align: center; }
.jeu-bouton:active { transform: scale(.98); }
.jeu-info { margin: 12px 0 0; font-size: 12px; opacity: .6; }
.jeu-hud { position: fixed; top: 18px; left: 50%; transform: translateX(-50%); width: 94vw; text-align: center; color: var(--jeu-hud-texte); z-index: 15; pointer-events: none; text-shadow: 0 3px 7px rgba(0, 0, 0, .65); }
.jeu-hud[hidden] { display: none; }
.jeu-hud-manche { display: block; font-size: clamp(18px, 5vw, 28px); font-weight: 900; }
.jeu-hud-score { display: block; margin-top: 3px; font-size: clamp(44px, 13vw, 78px); font-weight: 900; line-height: 1; }
.jeu-rebours { position: fixed; inset: 0; z-index: 40; background: rgba(0, 0, 0, .35); color: #fff; text-align: center; pointer-events: none; }
.jeu-rebours[hidden] { display: none; }
.jeu-rebours-panneau { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(92vw, 420px); padding: 12px; border-radius: 22px; background: rgba(0, 0, 0, .75); }
.jeu-rebours-panneau p { margin: 10px 0; font-size: 18px; line-height: 1.4; }
.jeu-rebours-panneau small { font-size: 13px; }
#jeu-rebours-valeur { display: block; color: var(--accent, #ffdc65); font-size: clamp(64px, 15vh, 100px); line-height: 1; }
.jeu-fin-scene, .jeu-fin-carte { display: contents; }
.jeu-fin { position: fixed; top: 45%; left: 50%; transform: translate(-50%, -50%); width: 90vw; text-align: center; color: #fff; font-size: clamp(28px, 8vw, 44px); font-weight: 900; line-height: 1.2; z-index: 40; text-shadow: 0 3px 10px rgba(0, 0, 0, .75); pointer-events: none; }
.jeu-fin[hidden] { display: none; }
.jeu-fin-lot { display: inline-block; max-width: 40vw; max-height: 22vh; margin-top: 8px; object-fit: contain; }
.jeu-lot { margin: 16px auto 0; text-align: center; }
/* min() borne le QR sur un ecran bas (paysage) : il doit rester entier et
   scannable plutot que de deborder. */
.jeu-lot svg { display: block; margin: 0 auto; width: min(180px, 32vh); height: min(180px, 32vh); border-radius: 8px; }
/* Taille fixe et graisse normale : le bloc de fin est en 900 / 28-44px,
   la ligne email n a pas a suivre. */
.jeu-lot-email { margin: 10px 0 0; font-size: 15px; font-weight: 400; opacity: 0.9; }
.jeu-lot-differe { margin: 10px auto 0; max-width: 320px; font-size: 14px; font-weight: 400; line-height: 1.35; }
.jeu-rejouer { position: fixed; top: 58%; left: 50%; transform: translate(-50%, -50%); width: min(82vw, 340px); min-height: 60px; margin: 0; font-size: 20px; z-index: 100; box-shadow: 0 6px 20px rgba(0, 0, 0, .3); }
.jeu-rejouer[hidden] { display: none; }
.jeu-rejouer:active { transform: translate(-50%, -50%) scale(.96); }
/* meme emplacement que .jeu-rejouer, un peu plus bas : les deux ne s affichent jamais ensemble sur la roue */
#jeu-fin-cta { position: fixed; top: 68%; left: 50%; transform: translate(-50%, -50%); width: min(82vw, 340px); min-height: 60px; margin: 0; font-size: 20px; z-index: 100; box-shadow: 0 6px 20px rgba(0, 0, 0, .3); }
#jeu-fin-cta[hidden] { display: none; }
#jeu-fin-cta:active { transform: translate(-50%, -50%) scale(.96); }
/* Ecran de fin avec un lot gagne : le QR est l element principal de l ecran.
   Classe posee sur <body> par ecrans.js tant que le bloc lot est affiche. Le
   panneau est centre dans la hauteur laissee libre au-dessus de REJOUER / du
   CTA (descendus au ras du bas, jamais affiches ensemble) et defile si besoin ;
   son z-index (40) reste sous le leur (100), donc il ne leur vole aucun clic.
   Score et « game over » passent au second plan, le QR reste grand tant que
   la hauteur le permet, sans descendre sous ~120 px (encore scannable). */
.jeu-lot-affiche { --jeu-lot-reserve: 96px; }
.jeu-lot-affiche .jeu-fin {
  top: calc((100vh - var(--jeu-lot-reserve)) / 2);
  top: calc((100dvh - var(--jeu-lot-reserve)) / 2);
  transform: translate(-50%, -50%);
  width: min(92vw, 420px);
  max-height: calc(100vh - var(--jeu-lot-reserve) - 20px);
  max-height: calc(100dvh - var(--jeu-lot-reserve) - 20px);
  overflow-y: auto;
  pointer-events: auto;
  padding: 16px 16px 18px;
  border-radius: 20px;
  background: rgba(0, 0, 0, .9);
  /* l ombre geante voile le jeu autour du panneau (meme empilement que lui,
     donc sous REJOUER) */
  box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .6);
  text-shadow: none;
  font-size: clamp(14px, 3.8vw, 17px);
  line-height: 1.25;
}
.jeu-lot-affiche .jeu-fin > br { display: none; }
.jeu-lot-affiche .jeu-fin > span { display: block; font-weight: 700; }
.jeu-lot-affiche .jeu-fin > .jeu-lot-titre { margin: 6px 0 2px; font-size: clamp(24px, 7vw, 32px); font-weight: 900; line-height: 1.15; }
.jeu-lot-affiche #jeu-hud { visibility: hidden; }
.jeu-lot-affiche .jeu-fin-lot { max-height: 14vh; }
.jeu-lot-affiche .jeu-lot { margin-top: 12px; }
.jeu-lot-affiche .jeu-lot svg {
  width: clamp(120px, min(36vh, 74vw), 300px);
  height: clamp(120px, min(36vh, 74vw), 300px);
  border-radius: 14px;
  box-shadow: 0 0 0 4px var(--jeu-bouton-fond);
}
.jeu-lot-code { margin: 14px 0 0; font-size: clamp(18px, 5.4vw, 24px); font-weight: 900; letter-spacing: .04em; }
.jeu-lot-consigne { margin: 8px 0 0; font-size: 15px; font-weight: 700; line-height: 1.3; }
.jeu-lot-affiche .jeu-lot-differe { margin-top: 8px; max-width: none; font-size: 14px; }
.jeu-lot-affiche .jeu-lot-email { font-size: 14px; font-weight: 400; }
.jeu-lot-affiche .jeu-rejouer, .jeu-lot-affiche #jeu-fin-cta { top: auto; bottom: max(14px, env(safe-area-inset-bottom)); transform: translateX(-50%); }
.jeu-lot-affiche .jeu-rejouer:active, .jeu-lot-affiche #jeu-fin-cta:active { transform: translateX(-50%) scale(.96); }
@media (orientation: portrait) and (max-height: 620px) {
  .jeu-lot-affiche .jeu-lot svg { width: clamp(120px, 30vh, 180px); height: clamp(120px, 30vh, 180px); }
  .jeu-lot-affiche .jeu-fin > .jeu-lot-titre { font-size: 22px; }
  .jeu-lot-code { margin-top: 10px; font-size: 18px; }
  .jeu-lot-affiche .jeu-lot-differe { font-size: 13px; }
}
@media (orientation: landscape) and (max-height: 500px) {
  .jeu-lot-affiche .jeu-lot svg { width: clamp(120px, 56vh, 200px); height: clamp(120px, 56vh, 200px); }
}
.jeu-classement { position: fixed; inset: 0; z-index: 50; overflow-y: auto; padding: max(24px, env(safe-area-inset-top)) 16px max(24px, env(safe-area-inset-bottom)); background: var(--jeu-voile); color: #fff; text-align: center; }
.jeu-classement[hidden] { display: none; }
.jeu-classement h1 { margin: 12px 0; font-size: clamp(24px, 7vw, 38px); }
.jeu-meilleur { margin: 16px 0; color: var(--accent, #ffdc65); font-size: 24px; font-weight: 900; }
.jeu-rang { margin: -6px 0 12px; font-weight: 700; }
.jeu-legende, #jeu-classement-etat { line-height: 1.5; }
.jeu-liste { list-style: none; display: block; width: min(100%, 420px); margin: 18px auto 0; padding: 14px 18px; border-radius: 15px; background: rgba(0, 0, 0, .62); font-size: clamp(14px, 4vw, 19px); line-height: 1.7; text-align: left; overflow-wrap: anywhere; }
#jeu-classement-reessayer, .jeu-cta { display: inline-block; width: auto; min-height: 52px; padding: 14px 24px; background: var(--accent, #ffdc65); color: #111; font-size: 18px; }
.jeu-cta[hidden], #jeu-classement-reessayer[hidden] { display: none; }
/* Bouton supplementaire de l accueil, fenetre des conditions generales. */
.jeu-bouton-libre { display: block; text-decoration: none; }
/* Ecrans avant et apres l evenement : image ou video dans le panneau. */
.jeu-hors-periode-media { display: block; width: 100%; max-height: 55dvh; object-fit: contain; border-radius: 14px; margin: 0 0 12px; }
.jeu-hors-periode-media[hidden] { display: none; }
.jeu-bouton-libre[hidden] { display: none; }
/* Partage de la page et bandeau de cookies. Accepter et refuser ont le meme poids. */
.jeu-partage { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 12px 0 0; }
.jeu-partage[hidden] { display: none; }
.jeu-partage-lien { padding: 7px 12px; border-radius: 999px; background: rgba(0, 0, 0, .08); color: inherit; font-size: 13px; font-weight: 700; text-decoration: none; }
.jeu-cookies { position: fixed; left: 50%; bottom: 12px; transform: translateX(-50%); width: min(94vw, 520px); box-sizing: border-box; padding: 14px 16px; background: #ffffff; color: #111111; border-radius: 16px; box-shadow: 0 8px 30px rgba(0, 0, 0, .35); z-index: 300; font: 14px/1.4 Arial, Helvetica, sans-serif; text-align: center; }
.jeu-cookies[hidden], .jeu-cookies-gerer[hidden] { display: none; }
.jeu-cookies p { margin: 0 0 10px; }
.jeu-cookies button { min-width: 120px; margin: 4px; padding: 9px 16px; border: 0; border-radius: 999px; background: #111111; color: #ffffff; font-weight: 700; cursor: pointer; }
.jeu-cookies-gerer { position: fixed; left: 8px; bottom: 8px; z-index: 300; padding: 4px 9px; border: 0; border-radius: 999px; background: rgba(0, 0, 0, .45); color: #ffffff; font: 11px Arial, Helvetica, sans-serif; cursor: pointer; }
.jeu-cg { z-index: 40; text-align: left; }
.jeu-cg[hidden] { display: none; }
.jeu-cg-titre { margin: 0 0 12px; text-align: center; }
.jeu-cg-corps { max-height: 50dvh; overflow-y: auto; line-height: 1.5; margin-bottom: 8px; }
/* Liens des textes saisis dans l editeur (HTML) : couleur du texte, soulignes. Les boutons-liens gardent leur style. */
.jeu-cg-corps a, .ecran-jeu a:not(.jeu-bouton):not(.jeu-partage-lien), .jeu-cookies a { color: inherit; text-decoration: underline; font-weight: 700; }
.jeu-cg .jeu-bouton { width: 100%; }
.jeu-bouton-second { background: transparent; color: inherit; box-shadow: inset 0 0 0 2px currentColor; }
@media (max-width: 480px) { .jeu-panneau { width: 94vw; padding: 18px 15px; border-radius: 18px; } .jeu-titre { font-size: 34px; } }
@media (max-height: 700px) { .jeu-panneau { max-height: 96dvh; padding-top: 14px; padding-bottom: 14px; } .jeu-titre { font-size: 29px; } .jeu-champs { gap: 7px; } .jeu-champs input, .jeu-champs select { min-height: 42px; padding-top: 9px; padding-bottom: 9px; } .jeu-bouton { margin-top: 10px; } }

/* Bloc « avis Google » du socle : flottant en bas de l ecran de fin, en flux
   sous le classement (classe jeu-avis-flottant posee par ecrans.js). */
.jeu-avis { box-sizing: border-box; width: min(92vw, 380px); margin: 12px auto 0; padding: 14px 16px; border-radius: 14px; background: var(--jeu-voile, rgba(0, 0, 0, .78)); color: #fff; text-align: center; z-index: 90; }
.jeu-avis[hidden] { display: none; }
.jeu-avis-flottant { position: fixed; left: 50%; bottom: max(12px, env(safe-area-inset-bottom)); transform: translateX(-50%); margin: 0; }
.jeu-avis h2 { margin: 0 0 6px; font-size: 20px; font-weight: 900; }
.jeu-avis p { margin: 0 0 10px; font-size: 15px; line-height: 1.35; }
.jeu-avis .jeu-bouton { display: block; width: 100%; margin: 6px 0; }
.jeu-avis .jeu-bouton[hidden] { display: none; }
.jeu-bouton-secondaire { background: transparent; color: #fff; border: 2px solid rgba(255, 255, 255, .7); }
.jeu-bouton-secondaire:disabled { opacity: .45; cursor: default; }
.jeu-avis-attente { font-size: 13px; opacity: .85; }
.jeu-avis-attente[hidden] { display: none; }
.jeu-avis-etat:empty { display: none; }

/* Habillage avec image de fond (habillage-dom.js) : la zone plein ecran de
   chaque jeu sans decor propre laisse voir la couche #fond-habillage
   derriere. Deux classes l emportent en specificite sur la regle d origine
   de chaque feuille de jeu (une classe), quel que soit l ordre de
   chargement des feuilles. */
/* Image de fond de l habillage : chaque zone de jeu pose sa propre couleur
   de fond, qui la masquerait. Toute zone ajoutee au socle doit figurer ici,
   sinon l option « Image de fond » de l habillage reste sans effet sur ce
   jeu-la (neuf zones y manquaient au 3 novembre 2026). */
.avec-fond-image .fn-jeu, .avec-fond-image .rn-jeu, .avec-fond-image .at-jeu, .avec-fond-image .pm-fond, .avec-fond-image .mm-jeu, .avec-fond-image .av-jeu, .avec-fond-image .rw-jeu, .avec-fond-image .jk-jeu,
.avec-fond-image .gr-jeu, .avec-fond-image .gp-jeu, .avec-fond-image .qz-jeu, .avec-fond-image .pn-jeu, .avec-fond-image .bt-jeu, .avec-fond-image .cf-jeu, .avec-fond-image .ch-jeu, .avec-fond-image .pk-jeu, .avec-fond-image .vs-jeu { background-color: transparent; }
.avec-fond-image .fb-fond { background-color: transparent; }

/* Ecran de fin de tous les jeux : une seule carte centree, sur un voile leger
   qui laisse voir le decor du jeu. La carte defile sur un petit ecran. Le bloc
   du lot garde son propre ecran (.jeu-lot-affiche). Sans :has (navigateur
   ancien), la mise en page precedente s applique. */
body:not(.jeu-lot-affiche) .jeu-fin-scene:has(.jeu-fin:not([hidden])) {
  position: fixed; inset: 0; z-index: 95;
  display: flex; padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
  overflow-y: auto; background: rgba(0, 0, 0, .42);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  animation: jeu-fin-voile .2s ease-out;
}
body:not(.jeu-lot-affiche) .jeu-fin-scene:has(.jeu-fin:not([hidden])) .jeu-fin-carte {
  display: flex; flex-direction: column; gap: 12px;
  box-sizing: border-box; width: min(100%, 400px); margin: auto; padding: 28px 20px 20px;
  border: 1px solid rgba(255, 255, 255, .16); border-radius: 24px;
  background: rgba(8, 8, 24, .86); box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
  animation: jeu-fin-carte .28s cubic-bezier(.2, .9, .3, 1.15);
}
body:not(.jeu-lot-affiche) .jeu-fin-scene:has(.jeu-fin:not([hidden])) .jeu-fin {
  position: static; transform: none; width: auto; pointer-events: auto; text-shadow: none;
  font-size: 18px; font-weight: 700; line-height: 1.3;
}
body:not(.jeu-lot-affiche) .jeu-fin-scene:has(.jeu-fin:not([hidden])) .jeu-fin > br { display: none; }
body:not(.jeu-lot-affiche) .jeu-fin-scene:has(.jeu-fin:not([hidden])) .jeu-fin > span { display: block; font-size: 22px; font-weight: 800; }
body:not(.jeu-lot-affiche) .jeu-fin-scene:has(.jeu-fin:not([hidden])) .jeu-fin > .jeu-fin-titre { font-size: 18px; font-weight: 900; letter-spacing: .08em; opacity: .85; }
body:not(.jeu-lot-affiche) .jeu-fin-scene:has(.jeu-fin:not([hidden])) .jeu-fin > .jeu-fin-score {
  margin: 4px 0 8px; font-size: clamp(36px, 11vw, 52px); font-weight: 900; line-height: 1.05;
  font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
}
body:not(.jeu-lot-affiche):has(.jeu-fin:not([hidden])) #jeu-hud { visibility: hidden; }
body:not(.jeu-lot-affiche) .jeu-fin-scene:has(.jeu-fin:not([hidden])) .jeu-rejouer, body:not(.jeu-lot-affiche) .jeu-fin-scene:has(.jeu-fin:not([hidden])) #jeu-fin-cta {
  position: static; transform: none; width: 100%; min-height: 56px; margin: 0;
}
body:not(.jeu-lot-affiche) .jeu-fin-scene:has(.jeu-fin:not([hidden])) .jeu-rejouer:active, body:not(.jeu-lot-affiche) .jeu-fin-scene:has(.jeu-fin:not([hidden])) #jeu-fin-cta:active { transform: scale(.97); }
/* L avis passe sous un filet ; a cote de REJOUER, son lien cede le premier
   plan pour ne garder qu une action principale. */
body:not(.jeu-lot-affiche) .jeu-fin-scene:has(.jeu-fin:not([hidden])) .jeu-avis-flottant {
  position: static; transform: none; width: 100%; margin: 4px 0 0; padding: 16px 0 0;
  border-top: 1px solid rgba(255, 255, 255, .16); border-radius: 0; background: none;
}
body:not(.jeu-lot-affiche) .jeu-fin-scene:has(.jeu-fin:not([hidden])) .jeu-avis h2 { font-size: 19px; }
body:not(.jeu-lot-affiche) .jeu-fin-scene:has(.jeu-fin:not([hidden])) .jeu-avis h2::before {
  content: ''; display: block; width: 110px; height: 20px; margin: 0 auto 8px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 22'%3E%3Cg fill='%23FFC83D'%3E%3Cpath id='e' d='M11 1l3 6.6 7 .8-5.2 4.8 1.4 7L11 17.7 4.8 21.2l1.4-7L1 8.4l7-.8z'/%3E%3Cuse href='%23e' x='24.5'/%3E%3Cuse href='%23e' x='49'/%3E%3Cuse href='%23e' x='73.5'/%3E%3Cuse href='%23e' x='98'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
}
body:not(.jeu-lot-affiche) .jeu-fin-scene:has(.jeu-fin:not([hidden])) .jeu-avis .jeu-bouton { min-height: 48px; font-size: 17px; }
body:not(.jeu-lot-affiche) .jeu-fin-scene:has(.jeu-fin:not([hidden])) .jeu-rejouer:not([hidden]) ~ .jeu-avis #jeu-avis-lien {
  background: transparent; color: #fff; border: 2px solid rgba(255, 255, 255, .7);
}
body:not(.jeu-lot-affiche) .jeu-fin-scene:has(.jeu-fin:not([hidden])) #jeu-avis-cta { min-height: 44px; background: none; border: none; text-decoration: underline; text-underline-offset: 3px; font-size: 16px; font-weight: 700; }
/* Un bouton de theme sombre (#111 par defaut) reste visible sur la carte. */
body:not(.jeu-lot-affiche) .jeu-fin-scene:has(.jeu-fin:not([hidden])) .jeu-rejouer { box-shadow: 0 0 0 2px rgba(255, 255, 255, .35); }
/* Le lien de sortie ne concurrence pas le bouton principal. */
body:not(.jeu-lot-affiche) .jeu-fin-scene:has(.jeu-fin:not([hidden])) #jeu-fin-cta { background: transparent; color: #fff; border: 2px solid rgba(255, 255, 255, .7); box-shadow: none; }
@keyframes jeu-fin-voile { from { opacity: 0; } to { opacity: 1; } }
@keyframes jeu-fin-carte { from { opacity: 0; transform: translateY(12px) scale(.96); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  body:not(.jeu-lot-affiche) .jeu-fin-scene:has(.jeu-fin:not([hidden])), body:not(.jeu-lot-affiche) .jeu-fin-scene:has(.jeu-fin:not([hidden])) .jeu-fin-carte { animation: none; }
}