/* Jeu et compte : pastille de la flamme, fenêtres (connexion, célébrations), coffre et défis
   du jour, page « Ma progression », menu du thème. Chargé après effets.css. */

.petit { font-size: var(--taille-xs); color: var(--encre-pale); margin: 0; }
.chip-or { background: var(--or-pale); color: var(--or-texte); }
.lien-bouton { border: 0; background: none; padding: 0; color: var(--lien); font-weight: 700; text-decoration: underline; cursor: pointer; }
.lien-bouton[disabled] { color: var(--encre-pale); text-decoration: none; cursor: default; }

/* --- Menu du thème (en-tête) -------------------------------------------- */
.menu-theme { position: relative; }
.menu-theme > summary { list-style: none; cursor: pointer; }
.menu-theme > summary::-webkit-details-marker { display: none; }
.menu-theme[open] > summary { background: rgba(37, 99, 235, 0.14); }
.menu-theme-liste {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 60; min-width: 220px; padding: 6px;
  background: var(--surface); color: var(--encre); border: 1px solid var(--ligne); border-radius: var(--rayon-m);
  box-shadow: var(--ombre-l); display: grid; gap: 2px; animation: menu-entre 160ms ease-out;
}
@keyframes menu-entre { from { opacity: 0; transform: translateY(-6px); } }
.menu-theme-liste button {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 12px; border: 0;
  border-radius: var(--rayon-s); background: transparent; font-weight: 700; text-align: left; color: inherit;
}
.menu-theme-liste button small { margin-left: auto; font-weight: 600; color: var(--encre-pale); font-size: var(--taille-xs); }
.menu-theme-liste button:hover { background: var(--surface-2); }
.menu-theme-liste button[aria-pressed="true"] { background: var(--bleu-pale); color: var(--bleu-texte); }

/* --- Zone du compte et pastille de la flamme ----------------------------- */
.zone-compte { display: inline-flex; align-items: center; min-width: 42px; }
.zone-compte-attente { width: 92px; height: 34px; border-radius: var(--rayon-plein); background: rgba(127, 150, 200, 0.18); }
.bouton-connexion .ico { width: 1.1em; height: 1.1em; }
.pastille-jeu {
  display: inline-flex; align-items: center; gap: 4px; padding: 4px; border-radius: var(--rayon-plein);
  background: var(--surface); border: 1.5px solid var(--ligne-forte); color: var(--encre); text-decoration: none !important;
  transition: border-color var(--transition), transform var(--transition);
}
.pastille-jeu:hover { border-color: var(--or); transform: translateY(-1px); }
.entete-sur-nuit:not(.defile) .pastille-jeu { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.24); color: #fff; }
.pastille-flamme {
  display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px 3px 7px; border-radius: var(--rayon-plein);
  font-family: var(--police-titre); font-weight: 900; font-size: 1.02rem; font-variant-numeric: tabular-nums;
  color: var(--encre-pale); background: var(--gris-pale);
}
.pastille-flamme .ico { width: 20px; height: 20px; }
.pastille-flamme.allumee, .pastille-flamme.danger { color: #c2410c; background: #ffedd5; box-shadow: 0 0 16px rgba(255, 122, 26, 0.35); }
[data-theme="sombre"] .pastille-flamme.allumee, [data-theme="sombre"] .pastille-flamme.danger,
.entete-sur-nuit:not(.defile) .pastille-flamme.allumee, .entete-sur-nuit:not(.defile) .pastille-flamme.danger { color: #ffb36b; background: rgba(255, 122, 26, 0.18); }
.pastille-flamme.allumee .ico, .pastille-flamme.danger .ico, .flamme-grande .ico { fill: url(#degrade-flamme); stroke: none; filter: drop-shadow(0 0 5px rgba(255, 122, 26, 0.8)); }
.pastille-flamme.danger { animation: flamme-alerte 2.6s ease-in-out infinite; }
.pastille-flamme.danger::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--corail); margin-left: 2px; box-shadow: 0 0 0 2px var(--surface); }
@keyframes flamme-alerte { 0%, 80%, 100% { transform: none; } 85% { transform: rotate(-8deg); } 90% { transform: rotate(8deg); } 95% { transform: rotate(-4deg); } }
.pop { animation: flamme-pop 700ms cubic-bezier(0.3, 1.6, 0.5, 1) !important; }
@keyframes flamme-pop { 40% { transform: scale(1.45); } }
.pastille-niveau { padding: 0 10px 0 4px; font-weight: 800; font-size: var(--taille-s); white-space: nowrap; }
/* Sous 520 px, le niveau disparaît : la pastille de la flamme se passe de son cadre. */
@media (max-width: 520px) {
  .pastille-niveau { display: none; }
  .pastille-jeu, .entete-sur-nuit:not(.defile) .pastille-jeu { padding: 0; border-color: transparent; background: none; }
}
@media (max-width: 360px) {
  .pastille-flamme { padding: 3px 7px 3px 5px; font-size: 0.95rem; }
}
/* Icône seule sous 560 px : la place du sélecteur FR | EN dans l'en-tête. */
@media (max-width: 560px) {
  .bouton-connexion { padding: 0.5em; width: 40px; height: 40px; }
  .bouton-connexion span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}

/* --- Fenêtres ------------------------------------------------------------ */
.fenetre {
  border: 0; padding: 0; background: transparent; color: var(--encre);
  width: min(460px, calc(100vw - 24px)); max-width: none; max-height: calc(100dvh - 24px); overflow: visible;
}
.fenetre::backdrop { background: var(--voile); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.fenetre-corps {
  position: relative; background: var(--surface); border: 1px solid var(--ligne); border-radius: var(--rayon-l);
  padding: 28px 24px 22px; box-shadow: var(--ombre-l); max-height: calc(100dvh - 24px); overflow: auto;
}
.fenetre[open] .fenetre-corps { animation: fenetre-entre 320ms cubic-bezier(0.3, 1.3, 0.5, 1); }
@keyframes fenetre-entre { from { opacity: 0; transform: translateY(18px) scale(0.96); } }
.fenetre h2 { font-size: 1.6rem; margin-bottom: 8px; }
.fenetre-fermer {
  position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; border-radius: 50%; border: 0;
  background: var(--surface-2); color: var(--encre); display: grid; place-items: center; z-index: 2;
}
.fenetre-fermer:hover { background: var(--bleu-pale); }
.fenetre-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; margin-top: 18px; }
.fenetre-actions.gauche { justify-content: flex-start; }
.fenetre-petite .champ { margin-top: 14px; }

/* Connexion */
.fenetre-connexion .fenetre-corps { padding-top: 22px; }
.connexion-mascotte { width: 96px; height: 96px; object-fit: contain; margin: -6px 0 4px; filter: drop-shadow(0 10px 14px var(--ombre-objet)); }
.connexion-intro { color: var(--encre-douce); }
.connexion-etape { display: grid; gap: 12px; }
.connexion-etape .bouton { width: 100%; padding: 0.85em 1em; }
.connexion-envoye { margin: 0; color: var(--encre-douce); }
.connexion-envoye strong { color: var(--encre); overflow-wrap: anywhere; }
.saisie-code { font-family: var(--police-titre); font-weight: 900; font-size: 1.6rem; letter-spacing: 0.35em; text-align: center; font-variant-numeric: tabular-nums; }
.connexion-liens { margin: 0; text-align: center; font-size: var(--taille-s); color: var(--encre-pale); }
.connexion-message:not(:empty) { margin-top: 12px; }
.connexion-legal { margin: 16px 0 0; font-size: var(--taille-xs); color: var(--encre-pale); }
.separateur-ou { display: flex; align-items: center; gap: 12px; color: var(--encre-pale); font-size: var(--taille-s); font-weight: 700; }
.separateur-ou::before, .separateur-ou::after { content: ""; flex: 1; height: 1px; background: var(--ligne); }
.bouton-google { background: #ffffff; color: #1f1f1f; border: 1.5px solid #dadce0; font-family: var(--police-texte); font-weight: 700; }
.bouton-google:hover { background: #f8faff; border-color: #c3d2f0; }

/* Célébrations : nouveau niveau, nouveaux badges */
.fenetre-fete .fenetre-corps {
  --titre: #ffffff; color: #fff; text-align: center; overflow: hidden;
  background: radial-gradient(420px 260px at 50% 0%, rgba(251, 191, 36, 0.32), transparent 65%), linear-gradient(180deg, var(--nuit-2), var(--nuit));
  border: 1.5px solid rgba(251, 191, 36, 0.55); box-shadow: 0 0 60px rgba(251, 191, 36, 0.25), var(--ombre-l);
}
.fenetre-fete .fenetre-fermer { background: rgba(255, 255, 255, 0.1); color: #fff; }
.celebration { display: grid; justify-items: center; gap: 10px; }
.celebration p { color: var(--texte-nuit-doux); margin: 0; }
.celebration .bouton { min-width: 180px; }
.celebration-mascotte { width: 130px; height: 130px; object-fit: contain; filter: drop-shadow(0 14px 18px rgba(0, 0, 0, 0.45)); animation: flotter 4s ease-in-out infinite; }
.celebration-surtitre { font-family: var(--police-titre); font-weight: 900; text-transform: uppercase; letter-spacing: 0.16em; font-size: var(--taille-s); color: var(--or) !important; text-shadow: 0 0 12px rgba(251, 191, 36, 0.6); }
.medaille-niveau {
  position: relative; width: 92px; height: 92px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 35% 30%, #fff3c4, var(--or) 50%, var(--or-fonce));
  box-shadow: 0 0 0 5px rgba(251, 191, 36, 0.25), 0 0 34px rgba(251, 191, 36, 0.6), inset 0 -4px 0 rgba(180, 83, 9, 0.5);
}
.medaille-niveau span { font-family: var(--police-titre); font-weight: 900; font-size: 2.6rem; color: #78350f; line-height: 1; }
.medaille-niveau.petite { width: 64px; height: 64px; flex: none; }
.medaille-niveau.petite span { font-size: 1.8rem; }
.animations .fenetre-fete .medaille-niveau { animation: medaille-entre 900ms cubic-bezier(0.3, 1.6, 0.5, 1) both 120ms; }
@keyframes medaille-entre { from { transform: scale(0.2) rotate(-40deg); opacity: 0; } }
.badges-gagnes { list-style: none; margin: 4px 0 8px; padding: 0; display: grid; gap: 8px; width: 100%; text-align: left; }
.badges-gagnes li { display: flex; gap: 12px; align-items: center; padding: 10px 12px; border-radius: var(--rayon-m); background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(251, 191, 36, 0.35); }
.badges-gagnes strong { display: block; }
.badges-gagnes small { color: var(--texte-nuit-doux); }
.badge-emoji { font-size: 1.9rem; line-height: 1; flex: none; }
.fenetre-fete .bouton-contour { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.35); }

/* « +25 XP » qui monte */
.gain-xp {
  position: fixed; z-index: 450; pointer-events: none; transform: translate(-50%, 0);
  font-family: var(--police-titre); font-weight: 900; font-size: 1.7rem; color: var(--or); white-space: nowrap;
  text-shadow: 0 2px 0 #b45309, 0 0 18px rgba(251, 191, 36, 0.85);
  animation: gain-monte 1.6s cubic-bezier(0.2, 0.7, 0.3, 1) forwards;
}
@keyframes gain-monte {
  0% { opacity: 0; transform: translate(-50%, 0) scale(0.6); }
  15% { opacity: 1; transform: translate(-50%, -14px) scale(1.15); }
  70% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -96px) scale(1); }
}
@media (prefers-reduced-motion: reduce) { .gain-xp { animation: none !important; transform: translate(-50%, -30px); } }

/* --- Salle de jeu : flamme, coffre, défis -------------------------------- */
.section-jeu { padding-top: 40px; }
.section-jeu .section-tete:empty { display: none; }
.cartes-jeu { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; align-items: stretch; }
.cartes-jeu-deux { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.carte-jeu {
  position: relative; display: flex; flex-direction: column; gap: 12px; padding: 20px; border-radius: var(--rayon-l);
  background: var(--surface); border: 1px solid var(--ligne); box-shadow: var(--ombre-s); overflow: hidden;
}
.carte-jeu p { margin: 0; color: var(--encre-douce); }
.carte-jeu .bouton { align-self: flex-start; }
.carte-jeu-tete { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.carte-jeu-tete h3 { margin: 0; font-size: 1.15rem; }

/* Flamme */
.carte-flamme.allumee, .carte-flamme.danger { border-color: rgba(255, 122, 26, 0.45); background: linear-gradient(160deg, rgba(255, 122, 26, 0.12), transparent 55%), var(--surface); }
.carte-flamme.danger { border-color: rgba(244, 63, 94, 0.55); }
.flamme-grande { display: flex; align-items: baseline; gap: 8px; color: var(--encre-pale); }
.flamme-grande .ico { width: 44px; height: 44px; align-self: center; }
.carte-flamme.eteinte .flamme-grande .ico { fill: none; stroke: currentColor; filter: none; opacity: 0.6; }
.flamme-grande strong { font-family: var(--police-titre); font-weight: 900; font-size: 3.2rem; line-height: 1; color: var(--feu-texte); font-variant-numeric: tabular-nums; }
.carte-flamme.eteinte .flamme-grande strong { color: var(--encre-pale); }
.flamme-grande span { font-weight: 800; color: var(--orange-texte); }
.carte-flamme.eteinte .flamme-grande span { color: var(--encre-pale); }
.semaine { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.semaine li { display: grid; justify-items: center; gap: 2px; padding: 8px 0 6px; border-radius: 12px; background: var(--gris-pale); color: var(--encre-pale); font-size: var(--taille-xs); font-weight: 800; }
.semaine li > span:first-child { font-size: 1.05rem; line-height: 1.2; }
.semaine li.fait { background: var(--orange-pale); color: var(--orange-texte); }
.semaine li.aujourdhui { outline: 2px dashed var(--feu); outline-offset: -2px; }
.semaine li.aujourdhui.fait { outline-style: solid; }

/* Coffre */
.carte-coffre { align-items: center; text-align: center; }
.carte-coffre .carte-jeu-tete { align-self: stretch; }
.carte-coffre.dispo { border-color: rgba(251, 191, 36, 0.55); background: radial-gradient(260px 160px at 50% 35%, rgba(251, 191, 36, 0.18), transparent 70%), var(--surface); }
.carte-coffre .bouton { align-self: center; }
.coffre-scene { position: relative; width: 150px; height: 130px; display: grid; place-items: center; }
.coffre-objet { position: relative; z-index: 1; width: 120px; height: 120px; object-fit: contain; filter: drop-shadow(0 14px 16px var(--ombre-objet)); transition: transform 500ms cubic-bezier(0.3, 1.6, 0.5, 1), filter 400ms; }
.carte-coffre.pris .coffre-objet { filter: grayscale(0.6) drop-shadow(0 10px 12px var(--ombre-objet)); opacity: 0.7; }
.animations .carte-coffre.dispo .coffre-objet { animation: coffre-attend 2.8s ease-in-out infinite; }
@keyframes coffre-attend { 0%, 70%, 100% { transform: none; } 76% { transform: rotate(-6deg) scale(1.04); } 82% { transform: rotate(5deg) scale(1.04); } 88% { transform: rotate(-3deg); } }
.animations .coffre-objet.secoue { animation: coffre-secoue 0.45s linear infinite !important; }
@keyframes coffre-secoue { 0%, 100% { transform: rotate(0) translateY(0); } 25% { transform: rotate(-9deg) translateY(-3px); } 75% { transform: rotate(9deg) translateY(-3px); } }
.carte-coffre.ouvert .coffre-objet { transform: scale(1.18) translateY(-6px); filter: drop-shadow(0 0 22px rgba(251, 191, 36, 0.95)); animation: none; }
.coffre-rayons {
  position: absolute; inset: -30px; z-index: 0; border-radius: 50%; opacity: 0; pointer-events: none;
  background: repeating-conic-gradient(rgba(251, 191, 36, 0.55) 0 10deg, transparent 10deg 30deg);
  mask-image: radial-gradient(circle, #000 25%, transparent 70%); transition: opacity 400ms;
}
.carte-coffre.ouvert .coffre-rayons { opacity: 1; animation: rayons-tournent 6s linear infinite; }
@keyframes rayons-tournent { to { transform: rotate(360deg); } }
.coffre-recompense:empty { display: none; }
.coffre-recompense { display: grid; gap: 2px; animation: gagnant-entre 600ms cubic-bezier(0.3, 1.5, 0.5, 1); }
.coffre-recompense strong { font-family: var(--police-titre); font-weight: 900; font-size: 1.7rem; color: var(--or-texte); }
.coffre-recompense span { color: var(--encre-douce); font-weight: 700; font-size: var(--taille-s); }
.coffre-pris { font-weight: 700; }

/* Défis */
.defis { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.defi { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 10px 12px; border-radius: var(--rayon-m); background: var(--surface-2); border: 1px solid var(--ligne); }
.defi.fait:not(.reclame) { border-color: rgba(251, 191, 36, 0.65); background: var(--or-pale); }
.defi.reclame { opacity: 0.8; }
.defi-emoji { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font-size: 1.3rem; background: var(--surface); box-shadow: var(--ombre-s); }
.defi-texte { min-width: 0; display: grid; gap: 4px; }
.defi-texte strong { font-size: var(--taille-s); line-height: 1.25; }
.defi-texte small { font-size: var(--taille-xs); color: var(--encre-pale); font-weight: 700; font-variant-numeric: tabular-nums; }
.barre-defi, .barre-xp { height: 8px; border-radius: 4px; background: var(--ligne); overflow: hidden; }
.barre-defi span, .barre-xp span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--or), var(--or-fonce)); transition: width 600ms cubic-bezier(0.2, 0.7, 0.3, 1); }
.defi.reclame .barre-defi span { background: var(--menthe); }
.defi-xp { font-family: var(--police-titre); font-weight: 900; font-size: var(--taille-s); color: var(--encre-pale); white-space: nowrap; }

/* Invitation à se connecter */
.invitation-jeu {
  position: relative; overflow: hidden; display: grid; grid-template-columns: 1.4fr 1fr; gap: 24px; align-items: center;
  padding: clamp(24px, 4vw, 40px); border-radius: var(--rayon-l); color: #fff; --titre: #fff;
  background: radial-gradient(520px 300px at 100% 0%, rgba(255, 122, 26, 0.35), transparent 60%),
              radial-gradient(520px 300px at 0% 100%, rgba(37, 99, 235, 0.45), transparent 60%), var(--nuit);
  border: 1px solid rgba(251, 191, 36, 0.3);
}
.invitation-jeu h2 { font-size: var(--taille-2xl); margin: 12px 0 10px; }
.invitation-jeu p { color: var(--texte-nuit-doux); font-size: var(--taille-l); }
.invitation-jeu .petit { color: var(--texte-nuit-doux); font-size: var(--taille-s); margin-bottom: 18px; }
.invitation-deco { position: relative; height: 200px; }
.invitation-flamme { position: absolute; left: 50%; top: 50%; width: 140px; height: 140px; margin: -80px 0 0 -70px; display: grid; place-items: center; }
.invitation-flamme .ico { width: 140px; height: 140px; fill: url(#degrade-flamme); stroke: none; filter: drop-shadow(0 0 24px rgba(255, 122, 26, 0.85)); animation: flamme-danse 2.4s ease-in-out infinite; transform-origin: 50% 90%; }
@keyframes flamme-danse { 0%, 100% { transform: scale(1) rotate(-2deg); } 50% { transform: scale(1.06, 1.1) rotate(2deg); } }
.invitation-objet { position: absolute; width: 96px; filter: drop-shadow(0 14px 18px rgba(0, 0, 0, 0.45)); animation: flotter 5.5s ease-in-out infinite; }
.invitation-objet.o1 { left: 4%; bottom: 0; --rot: -10deg; }
.invitation-objet.o2 { right: 4%; top: 0; --rot: 8deg; animation-delay: -2.5s; }
@media (max-width: 760px) { .invitation-jeu { grid-template-columns: 1fr; } .invitation-deco { display: none; } }
.invitation-mini {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 14px; padding: 12px 14px;
  border-radius: var(--rayon-m); background: var(--orange-pale); color: var(--orange-texte);
}
.invitation-mini > .ico { width: 26px; height: 26px; fill: url(#degrade-flamme); stroke: none; }
.invitation-mini p { flex: 1 1 200px; margin: 0; font-weight: 700; font-size: var(--taille-s); color: inherit; }

/* Fiche : « J'ai participé » mis en avant au retour du site officiel */
#bouton-participe.invite { animation: invite-pouls 1.8s ease-in-out infinite; }
@keyframes invite-pouls { 50% { box-shadow: 0 0 0 6px rgba(251, 191, 36, 0.35), var(--ombre-or); } }

/* Roue de fortune : bouton des sons */
.bouton-sons { color: #fff; border-color: rgba(255, 255, 255, 0.25); }
.bouton-sons:hover { background: rgba(255, 255, 255, 0.1); }
.bouton-sons[aria-pressed="true"] { border-color: var(--or); color: var(--or); }
.robot-chiffres.robot-chiffres-seul { grid-template-columns: minmax(0, 240px); }

/* --- Ma progression ------------------------------------------------------- */
.tete-moi { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.tete-moi p { overflow-wrap: anywhere; }
.moi-mascotte { width: 110px; height: 110px; object-fit: contain; filter: drop-shadow(0 12px 16px var(--ombre-objet)); animation: flotter 5s ease-in-out infinite; }
@media (max-width: 560px) { .moi-mascotte { width: 72px; height: 72px; } }
.infos-jeu { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; margin: 0; padding-top: 4px; border-top: 1px solid var(--ligne); }
.infos-jeu dt { color: var(--encre-douce); font-weight: 600; font-size: var(--taille-s); padding-top: 6px; }
.infos-jeu dd { margin: 0; font-weight: 800; font-variant-numeric: tabular-nums; padding-top: 6px; }
.niveau-ligne { display: flex; align-items: center; gap: 14px; }
.niveau-ligne strong { display: block; font-family: var(--police-titre); font-weight: 900; font-size: 1.6rem; color: var(--titre); }
.niveau-ligne small { color: var(--encre-douce); font-weight: 600; }
.barre-xp { height: 12px; border-radius: 6px; }
.liste-gains { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: var(--taille-s); }
.liste-gains li { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px dashed var(--ligne); color: var(--encre-douce); }
.liste-gains strong { color: var(--encre); white-space: nowrap; }
.tours-jeu { font-size: var(--taille-s); }
.tours-jeu strong { color: var(--encre); }
.badges-compte { margin: 0 0 12px; font-weight: 800; color: var(--encre-douce); }
.badges-grille { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.badge {
  display: grid; justify-items: center; text-align: center; gap: 4px; padding: 16px 12px; border-radius: var(--rayon-l);
  background: var(--surface); border: 1px solid var(--ligne); transition: transform var(--transition), box-shadow var(--transition);
}
.badge .badge-emoji { font-size: 2.2rem; margin-bottom: 4px; }
.badge strong { font-family: var(--police-titre); font-weight: 900; font-size: 1rem; }
.badge small { color: var(--encre-douce); font-size: var(--taille-xs); }
.badge-etat { margin-top: 4px; font-size: var(--taille-xs); font-weight: 800; color: var(--encre-pale); display: inline-flex; gap: 4px; align-items: center; }
.badge.obtenu { border-color: rgba(251, 191, 36, 0.6); background: radial-gradient(200px 120px at 50% 0%, rgba(251, 191, 36, 0.2), transparent 70%), var(--surface); box-shadow: 0 6px 18px rgba(245, 158, 11, 0.15); }
.badge.obtenu .badge-etat { color: var(--menthe-texte); }
.badge.obtenu:hover { transform: translateY(-3px); }
.badge.verrouille .badge-emoji { filter: grayscale(1); opacity: 0.4; }
.badge.verrouille strong { color: var(--encre-douce); }
.moi-colonnes { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 18px; margin-top: 40px; }
.moi-colonnes .bloc { margin-bottom: 0; }
.page-moi > .bloc { margin-top: 18px; }
.abonnement-statut { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.abonnement-statut strong { font-family: var(--police-titre); font-weight: 900; font-size: 1.3rem; color: var(--titre); }
.abonnement-statut small { color: var(--encre-douce); }
.formulaire-profil { display: grid; gap: 16px; }
.segmente { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.segmente label { position: relative; }
.segmente input { position: absolute; opacity: 0; }
.segmente span {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border: 1.5px solid var(--ligne-forte);
  border-radius: var(--rayon-m); font-weight: 800; cursor: pointer; background: var(--surface); color: var(--encre);
}
.segmente small { color: var(--encre-pale); font-weight: 600; }
.segmente input:checked + span { border-color: var(--bleu); background: var(--bleu-pale); color: var(--bleu-texte); }
.segmente input:checked + span small { color: inherit; }
.segmente input:focus-visible + span { outline: 3px solid var(--or); }
.regles-jeu { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; margin-bottom: 14px; }
.regles-jeu .bloc { margin: 0; }
.regles-jeu h3 { font-size: 1.1rem; }
.regles-jeu p { color: var(--encre-douce); margin: 0; }
.bloc-compte p { color: var(--encre-douce); }

/* --- Nos gagnants -------------------------------------------------------- */
.banniere-gagnants .b1 { width: 120px; }
.banniere-gagnants .b2 { width: 104px; }
.chiffres-gagnants { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 22px 0 6px; }
.chiffres-gagnants > div {
  padding: 18px 16px; border-radius: var(--rayon-l); background: var(--surface); border: 1px solid var(--ligne);
  box-shadow: var(--ombre-s); display: grid; gap: 4px;
}
.chiffres-gagnants strong { font-family: var(--police-titre); font-weight: 900; font-size: clamp(1.6rem, 3vw, 2.2rem); line-height: 1.05; color: var(--titre); font-variant-numeric: tabular-nums; }
.chiffres-gagnants > div:first-child strong { color: var(--or-fonce, #f59e0b); }
.chiffres-gagnants span { color: var(--encre-douce); font-weight: 600; font-size: var(--taille-s); }
@media (max-width: 760px) { .chiffres-gagnants { grid-template-columns: 1fr 1fr; } }

.mur-gagnants { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.carte-gagnant {
  position: relative; display: grid; gap: 8px; padding: 18px; border-radius: var(--rayon-l);
  background: linear-gradient(160deg, rgba(251, 191, 36, 0.14), transparent 55%), var(--surface);
  border: 1px solid var(--ligne); box-shadow: var(--ombre-s);
}
.carte-gagnant-tete { display: flex; align-items: center; gap: 10px; }
.carte-gagnant-tete > div { display: grid; min-width: 0; }
.carte-gagnant-tete strong { font-family: var(--police-titre); font-size: 1.1rem; }
.carte-gagnant-tete span:not(.pastille-valeur) { color: var(--encre-douce); font-size: var(--taille-s); font-weight: 600; }
.carte-gagnant-tete .pastille-valeur { position: static; margin-left: auto; font-size: 1rem; }
.carte-gagnant-objet { width: 48px; height: 48px; object-fit: contain; flex: none; }
.carte-gagnant-prix { margin: 0; font-weight: 800; font-size: 1.05rem; }
.carte-gagnant-org { margin: 0; color: var(--encre-douce); font-size: var(--taille-s); }
.carte-gagnant blockquote { margin: 0; padding: 10px 12px; border-left: 3px solid var(--or); border-radius: 0 var(--rayon-s) var(--rayon-s) 0; background: var(--surface-2); color: var(--encre); font-style: italic; }
.carte-gagnant-date { margin: 0; display: flex; gap: 6px; align-items: center; color: var(--encre-pale); font-size: var(--taille-xs); font-weight: 700; }
.vide-gagnants { grid-column: 1 / -1; }

.declarer-gain { margin-top: 40px; }
.declarer-gain h2 { display: flex; align-items: center; gap: 10px; }
.declarer-mascotte { width: 52px; height: 52px; object-fit: contain; flex: none; }
.formulaire-gain { display: grid; gap: 14px; }
.declarer-invitation { display: grid; gap: 12px; justify-items: start; }
.declarer-invitation p { margin: 0; color: var(--encre-douce); }
.zone-validation { margin-top: 24px; border-color: var(--or); }
.ligne-validation { display: flex; gap: 14px; justify-content: space-between; align-items: center; padding: 12px 0; border-top: 1px solid var(--ligne); }
.ligne-validation small { display: block; color: var(--encre-douce); }
.ligne-validation em { display: block; margin-top: 4px; color: var(--encre-douce); }
.actions-validation { display: flex; gap: 8px; flex: none; }
@media (max-width: 640px) { .ligne-validation { flex-direction: column; align-items: stretch; } }
.note-gagnants { display: flex; gap: 8px; align-items: flex-start; margin-top: 28px; color: var(--encre-pale); font-size: var(--taille-xs); }
.note-gagnants .ico { flex: none; margin-top: 2px; }
.mes-annonces { margin-top: 24px; }

/* --- Participation en cours (js/participation.js) -------------------------------------
   Bandeau qui garde Wini visible pendant que la personne est sur le site de l'organisateur,
   et fenêtre « Tu as participé? » au retour. */
.bandeau-participation {
  position: fixed; right: 20px; bottom: 20px; z-index: 75; width: min(540px, calc(100vw - 40px));
  display: flex; align-items: center; gap: 10px; padding: 10px 8px 10px 14px;
  background: var(--verre-fort); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--ligne); border-radius: 18px; box-shadow: var(--ombre-l);
}
.animations .bandeau-participation { animation: bandeau-participation-entre 450ms cubic-bezier(0.3, 1.3, 0.5, 1); }
@keyframes bandeau-participation-entre { from { opacity: 0; transform: translateY(30px); } }
.bandeau-participation-logo { flex: none; width: 40px; height: auto; }
.bandeau-participation-texte { flex: 1; min-width: 0; display: grid; line-height: 1.3; }
.bandeau-participation-texte strong { font-size: var(--taille-s); }
.bandeau-participation-texte span { font-size: var(--taille-xs); color: var(--encre-douce); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bandeau-participation .bouton { flex: none; }
.bandeau-participation-fermer {
  flex: none; width: 32px; height: 32px; border: 0; border-radius: 50%; padding: 0;
  background: transparent; color: var(--encre-douce); display: grid; place-items: center; cursor: pointer;
}
.bandeau-participation-fermer:hover { background: var(--bleu-pale); }
.bandeau-participation-fermer .ico { width: 16px; height: 16px; }
/* Le fil des nouveaux concours occupe le même coin : il attend la fin de la participation. */
.participation-en-cours .fil-direct { display: none; }
@media (max-width: 760px) {
  .bandeau-participation { left: 12px; right: 12px; width: auto; bottom: calc(80px + env(safe-area-inset-bottom)); }
}
.fenetre-retour .fenetre-corps { text-align: center; }
.fenetre-retour .connexion-mascotte { display: block; margin-inline: auto; }
.fenetre-retour .fenetre-actions { justify-content: center; }
.retour-concours { display: grid; gap: 2px; margin: 0 0 8px; }
.retour-concours span { color: var(--encre-douce); font-size: var(--taille-s); }