/* Jeux & Compagnie — feuille de style commune à toutes les pages. */
:root {
  --fond: #fbf7ff;
  --texte: #241f3a;
  --doux: #645e7a;
  --violet: #5b3fd1;
  --violet-fonce: #432bb0;
  --orange: #ff8a3d;
  --jaune: #ffd23f;
  --vert: #22a35f;
  --rouge: #d6384a;
  --carte: #ffffff;
  --bord: #241f3a;
  --ombre: 0 5px 0 var(--bord);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--texte);
  background: radial-gradient(circle at 80% 0, #efe7ff 0, var(--fond) 50%) fixed;
  line-height: 1.55;
}
a { color: var(--violet); }
a:focus-visible, button:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }
img, svg { max-width: 100%; }

/* En-tête */
.entete {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .6rem 1rem;
  max-width: 1040px;
  width: 100%;
  margin: 0 auto;
  padding: 1rem 16px;
}
.marque { display: flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--texte); }
.marque img { width: 44px; height: 44px; }
.marque .nom { font-weight: 900; font-size: 1.35rem; letter-spacing: -.01em; }
.marque .nom span { color: var(--orange); }
.menu { display: flex; flex-wrap: wrap; gap: .3rem; margin: 0; padding: 0; list-style: none; }
.menu a {
  display: block;
  padding: .4rem .8rem;
  border-radius: 999px;
  font-weight: 700;
  text-decoration: none;
  color: var(--texte);
}
.menu a:hover, .menu a[aria-current="page"] { background: var(--violet); color: #fff; }

main { flex: 1; width: 100%; max-width: 1040px; margin: 0 auto; padding: .5rem 16px 2.5rem; }
.etroit { max-width: 760px; }

/* Fil d'Ariane */
.fil { margin: 0 0 1rem; font-size: .95rem; font-weight: 600; color: var(--doux); }

/* Accueil */
.accroche { text-align: center; padding: 1.5rem 0 1rem; }
.accroche h1 { margin: 0 0 .6rem; font-size: clamp(1.9rem, 6vw, 3rem); line-height: 1.1; letter-spacing: -.02em; }
.accroche h1 span { color: var(--violet); }
.accroche p { margin: 0 auto; max-width: 620px; font-size: 1.15rem; color: var(--doux); }
.section-titre { margin: 2.4rem 0 1rem; font-size: clamp(1.4rem, 4vw, 1.8rem); }

/* Cartes (jeux et articles) */
.grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1.1rem; margin: 0; padding: 0; list-style: none; }
.carte {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 1.2rem;
  background: var(--carte);
  border: 3px solid var(--bord);
  border-radius: 22px;
  box-shadow: var(--ombre);
  color: inherit;
  text-decoration: none;
  transition: transform .15s, box-shadow .15s;
}
.carte:hover, .carte:focus-visible { transform: translateY(-3px); box-shadow: 0 8px 0 var(--bord); }
.carte .icone {
  display: grid;
  place-items: center;
  width: 3.4rem;
  height: 3.4rem;
  margin-bottom: .8rem;
  border: 3px solid var(--bord);
  border-radius: 16px;
  font-size: 1.8rem;
  background: var(--jaune);
}
.carte.violet .icone { background: #d9cfff; }
.carte.orange .icone { background: #ffd2b3; }
.carte.vert .icone { background: #c4f0d6; }
.carte h2, .carte h3 { margin: 0 0 .35rem; font-size: 1.2rem; line-height: 1.25; color: var(--violet-fonce); }
.carte p { margin: 0; color: var(--doux); }
.carte .lien { margin-top: auto; padding-top: .8rem; font-weight: 800; color: var(--violet); }
.meta { margin: 0 0 .3rem; font-size: .85rem; font-weight: 700; color: var(--doux); text-transform: uppercase; letter-spacing: .04em; }

/* Encadré de présentation */
.encart {
  margin: 2.4rem 0 0;
  padding: 1.4rem 1.5rem;
  background: #fff8d6;
  border: 3px dashed var(--violet);
  border-radius: 22px;
}
.encart h2 { margin: 0 0 .5rem; font-size: 1.35rem; }
.encart p { margin: .4rem 0; }

/* Pages de jeu */
.jeu-tete { text-align: center; margin: 0 0 1rem; }
.jeu-tete h1 { margin: 0 0 .3rem; font-size: clamp(1.7rem, 5vw, 2.4rem); line-height: 1.15; }
.jeu-tete p { margin: 0; color: var(--doux); }
.plateau {
  margin: 0 auto;
  padding: clamp(.8rem, 3vw, 1.5rem);
  max-width: 640px;
  background: var(--carte);
  border: 3px solid var(--bord);
  border-radius: 26px;
  box-shadow: 0 8px 24px rgba(36, 31, 58, .1);
}
.commandes { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin: 0 0 1rem; }
.bouton {
  appearance: none;
  padding: .55rem 1.1rem;
  border: 3px solid var(--bord);
  border-radius: 14px;
  background: var(--violet);
  color: #fff;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 4px 0 var(--bord);
}
.bouton:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--bord); }
.bouton.secondaire { background: #fff; color: var(--texte); }
.bouton[aria-pressed="true"] { background: var(--orange); color: var(--texte); }
.scores { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 1.4rem; margin: 0 0 1rem; font-weight: 700; }
.scores span { color: var(--violet-fonce); }
.message { min-height: 1.6em; margin: 1rem 0 0; text-align: center; font-weight: 800; font-size: 1.15rem; }

/* Texte des articles et guides sous les jeux */
.texte {
  margin: 2rem auto 0;
  max-width: 760px;
  padding: clamp(1.2rem, 4vw, 2rem);
  background: var(--carte);
  border: 3px solid var(--bord);
  border-radius: 26px;
  font-size: 1.06rem;
  line-height: 1.7;
}
.texte h1 { margin: 0 0 .5rem; font-size: clamp(1.6rem, 5vw, 2.2rem); line-height: 1.2; color: var(--violet-fonce); }
.texte h2 { margin: 2rem 0 .6rem; font-size: 1.35rem; line-height: 1.3; color: var(--violet); }
.texte h2:first-child { margin-top: 0; }
.texte h3 { margin: 1.4rem 0 .4rem; font-size: 1.12rem; }
.texte ul, .texte ol { padding-left: 1.3rem; }
.texte li { margin: .3rem 0; }
.texte .chapo { font-size: 1.15rem; color: var(--doux); }
.astuce {
  margin: 1.5rem 0;
  padding: 1rem 1.2rem;
  background: #fff8d6;
  border: 3px dashed var(--violet);
  border-radius: 18px;
}
.astuce::before { content: "💡 Astuce"; display: block; margin-bottom: .2rem; font-weight: 800; color: var(--violet); }
.astuce p { margin: 0; }
.appel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
  margin: 2rem 0 0;
  padding: 1rem 1.2rem;
  background: #efe7ff;
  border: 3px solid var(--bord);
  border-radius: 18px;
}
.appel p { margin: 0; font-weight: 700; }
.appel a.bouton { text-decoration: none; }
.faq details { margin: .6rem 0; padding: .7rem 1rem; border: 2px solid #e4ddf5; border-radius: 14px; }
.faq summary { font-weight: 800; cursor: pointer; }
.faq details p { margin: .5rem 0 0; }

/* Pied de page */
footer { padding: 1.5rem 16px 2rem; text-align: center; font-size: .95rem; color: var(--doux); }
footer p { margin: .35rem 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
@media (max-width: 560px) {
  .entete { justify-content: center; }
}

/* Memory */
.memory { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(.4rem, 2vw, .7rem); max-width: 480px; margin: 0 auto; }
.memory.cartes-24 { grid-template-columns: repeat(6, 1fr); max-width: 600px; }
@media (max-width: 520px) { .memory.cartes-24 { grid-template-columns: repeat(4, 1fr); } }
.carte-memory {
  aspect-ratio: 1;
  padding: 0;
  border: 3px solid var(--bord);
  border-radius: 14px;
  background: var(--violet) radial-gradient(circle at 50% 50%, #7a62e6 0 22%, transparent 23%);
  cursor: pointer;
  box-shadow: 0 4px 0 var(--bord);
  font-size: clamp(1.6rem, 7vw, 2.6rem);
  transition: transform .2s, background-color .2s;
}
.carte-memory .face { visibility: hidden; }
.carte-memory.visible { background: #fff; transform: rotateY(180deg) scaleX(-1); }
.carte-memory.visible .face { visibility: visible; }
.carte-memory.trouvee { background: #c4f0d6; cursor: default; }
.carte-memory:disabled { color: inherit; opacity: 1; }

/* Morpion */
.morpion { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; max-width: 340px; margin: 0 auto; }
.case-morpion {
  aspect-ratio: 1;
  border: 3px solid var(--bord);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 4px 0 var(--bord);
  font-size: clamp(2rem, 11vw, 3.4rem);
  line-height: 1;
  cursor: pointer;
}
.case-morpion:not(:disabled):hover { background: #f3eeff; }
.case-morpion:disabled { color: inherit; cursor: default; opacity: 1; }
.case-morpion.gagnante { background: #ffe9a8; }

/* Pendu */
.potence { display: block; width: 200px; height: 180px; margin: 0 auto .6rem; }
.potence .etape { opacity: .1; transition: opacity .25s; }
.potence .etape.visible { opacity: 1; }
.mot-pendu { display: flex; flex-wrap: wrap; justify-content: center; gap: .35rem; margin: 0 0 1.2rem; font-size: clamp(1.3rem, 6vw, 2rem); font-weight: 900; }
.mot-pendu .lettre { display: inline-block; min-width: 1.15em; border-bottom: 4px solid var(--bord); text-align: center; line-height: 1.3; }
.mot-pendu .separateur { display: inline-block; min-width: .6em; text-align: center; }
.clavier { display: grid; grid-template-columns: repeat(auto-fill, minmax(2.6rem, 1fr)); gap: .4rem; max-width: 560px; margin: 0 auto; }
.touche {
  min-height: 2.8rem;
  border: 3px solid var(--bord);
  border-radius: 12px;
  background: #fff;
  font: inherit;
  font-weight: 800;
  font-size: 1.1rem;
  cursor: pointer;
  box-shadow: 0 3px 0 var(--bord);
}
.touche:not(:disabled):hover { background: #f3eeff; }
.touche:disabled { cursor: default; box-shadow: none; transform: translateY(3px); color: var(--texte); }
.touche.bonne { background: #c4f0d6; }
.touche.mauvaise { background: #f6c9cf; text-decoration: line-through; }
a.bouton { display: inline-block; text-decoration: none; }

/* Avant de jouer : seul ou à plusieurs, salle d'attente */
[hidden] { display: none !important; }
.salon { text-align: center; }
.salon h2 { margin: 0 0 1rem; font-size: 1.4rem; color: var(--violet-fonce); }
.salon .choix { display: flex; flex-wrap: wrap; justify-content: center; gap: .7rem; margin: 0 0 1rem; }
.salon .choix .bouton { font-size: 1.05rem; padding: .75rem 1.2rem; }
.salon .choix .nombre { min-width: 3.4rem; font-size: 1.2rem; }
.salon .aide { max-width: 460px; margin: .6rem auto; color: var(--doux); }
.salon .etiquette { margin: 1rem 0 .5rem; font-weight: 800; }
.salon .erreur { min-height: 1.2em; margin: .5rem 0; font-weight: 700; color: var(--rouge); }
.salon .erreur:empty { min-height: 0; margin: 0; }
.salon .retour { margin: 1.2rem 0 0; }
.formulaire { max-width: 340px; margin: 0 auto; }
.champ { display: flex; flex-direction: column; gap: .25rem; margin: 0 0 .8rem; text-align: left; font-weight: 800; }
.champ input {
  width: 100%;
  padding: .6rem .8rem;
  border: 3px solid var(--bord);
  border-radius: 12px;
  font: inherit;
  font-weight: 600;
  background: #fff;
  color: var(--texte);
}
.champ input:focus-visible { outline: 3px solid var(--orange); outline-offset: 1px; }
.bouton.lien-retour { background: none; border: 0; box-shadow: none; color: var(--violet); text-decoration: underline; padding: .3rem .5rem; }
.bouton.petit { padding: .3rem .7rem; font-size: .9rem; box-shadow: 0 3px 0 var(--bord); }
.numero-salle { display: inline-flex; flex-direction: column; margin: 0 0 .6rem; padding: .6rem 1.6rem; background: var(--jaune); border: 3px solid var(--bord); border-radius: 18px; box-shadow: var(--ombre); }
.numero-salle span { font-weight: 800; }
.numero-salle strong { font-size: clamp(2.4rem, 12vw, 3.4rem); line-height: 1.1; letter-spacing: .08em; }
.liste-joueurs { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; margin: 0 0 1rem; padding: 0; list-style: none; }
.liste-joueurs li, .scores-joueurs li { padding: .25rem .8rem; background: #efe7ff; border: 2px solid var(--bord); border-radius: 999px; font-weight: 700; }
.bandeau-salon { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .4rem .8rem; margin: 0 0 1rem; padding: 0 0 .8rem; border-bottom: 2px dashed #e4ddf5; }
.bandeau-salon p { margin: 0; font-weight: 700; color: var(--doux); }
.bandeau-salon .alerte { flex-basis: 100%; text-align: center; color: var(--rouge); }
.scores-joueurs { padding: 0; list-style: none; }
.scores-joueurs li.tour { background: var(--orange); }
.bouton:disabled { opacity: .45; cursor: not-allowed; }
.bouton:disabled:active { transform: none; box-shadow: 0 4px 0 var(--bord); }

/* Boutique (liens affiliés) */
.produits { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.1rem; margin: 1rem 0 1.5rem; padding: 0; list-style: none; }
.produit {
  display: flex;
  flex-direction: column;
  padding: 1.2rem;
  background: var(--carte);
  border: 3px solid var(--bord);
  border-radius: 22px;
  box-shadow: var(--ombre);
}
.produit .icone { display: grid; place-items: center; width: 3.2rem; height: 3.2rem; margin-bottom: .7rem; border: 3px solid var(--bord); border-radius: 16px; font-size: 1.7rem; background: var(--jaune); }
.produit.violet .icone { background: #d9cfff; }
.produit.orange .icone { background: #ffd2b3; }
.produit.vert .icone { background: #c4f0d6; }
.produit h3 { margin: 0 0 .4rem; font-size: 1.2rem; line-height: 1.25; color: var(--violet-fonce); }
.texte .produit h3 { margin-top: 0; }
.produit .infos { display: flex; flex-wrap: wrap; gap: .3rem; margin: 0 0 .6rem; padding: 0; list-style: none; font-size: .9rem; font-weight: 700; }
.texte .produit .infos li { margin: 0; }
.produit .infos li { padding: .1rem .6rem; background: #efe7ff; border-radius: 999px; }
.produit p { margin: 0 0 1rem; color: var(--doux); font-size: 1rem; line-height: 1.55; }
.produit .bouton { margin-top: auto; align-self: flex-start; text-decoration: none; font-size: .95rem; }
.texte .produits { padding-left: 0; }
.mention-amazon { margin: 0 0 1rem; padding: .6rem 1rem; background: #fff8d6; border: 2px dashed var(--violet); border-radius: 14px; font-size: .9rem; color: var(--doux); }
footer .petit { font-size: .85rem; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Loto */
.plateau-loto { max-width: 760px; }
.tirage { display: flex; align-items: center; justify-content: center; gap: clamp(1rem, 5vw, 2.5rem); margin: 0 0 .6rem; }
.sortie { display: flex; flex-direction: column; align-items: center; gap: .4rem; }
.boulier { width: clamp(150px, 42vw, 210px); height: auto; overflow: visible; }
.boulier .socle { fill: url(#bois); stroke: var(--bord); stroke-width: 3; }
.boulier .montant { stroke: url(#laiton); stroke-width: 7; stroke-linecap: round; }
.boulier .goulotte { fill: #d9c48a; stroke: var(--bord); stroke-width: 2.5; }
.boulier .godet { fill: #f3d27a; stroke: var(--bord); stroke-width: 3; }
.boulier .vitre { fill: url(#vitre); }
.boulier .balle { stroke: rgba(36, 31, 58, .75); stroke-width: 1.5; }
.boulier .fils line, .boulier .meridien { fill: none; stroke: #b58a1e; stroke-width: 1.6; opacity: .9; }
.boulier .cerclage { fill: none; stroke: url(#laiton); stroke-width: 6; }
.boulier .axe { stroke: #7d5d10; stroke-width: 4; stroke-linecap: round; }
.boulier .moyeu { fill: #f3d27a; stroke: var(--bord); stroke-width: 2.5; }
.boulier .manivelle path { stroke: #7d5d10; stroke-width: 4; stroke-linecap: round; }
.boulier .manivelle circle:not(.moyeu) { fill: #c0392b; stroke: var(--bord); stroke-width: 2.5; }
.boulier .sortante { opacity: 0; stroke: var(--bord); stroke-width: 1.5; transform-box: fill-box; transform-origin: center; }
.boulier .sortante.pose { opacity: 1; }
.boulier .sortante.sort { opacity: 1; animation: sortir-boule .35s cubic-bezier(.5, 0, 1, 1); }
@keyframes sortir-boule { from { transform: translateY(-26px); } to { transform: translateY(0); } }
.boule {
  --c: #e9e4f5; --c2: #b9b0d4;
  display: grid; place-items: center;
  width: clamp(84px, 24vw, 110px); aspect-ratio: 1;
  border: 3px solid var(--bord); border-radius: 50%;
  background:
    radial-gradient(circle at 32% 26%, rgba(255, 255, 255, .9) 0 6%, rgba(255, 255, 255, 0) 16%),
    radial-gradient(circle at 42% 38%, var(--c) 0 40%, var(--c2) 100%);
  box-shadow: 0 5px 0 var(--bord), inset -6px -8px 14px rgba(0, 0, 0, .18);
}
.boule span {
  display: grid; place-items: center; width: 58%; aspect-ratio: 1; border-radius: 50%;
  background: #fff; border: 2px solid rgba(36, 31, 58, .5);
  font-weight: 900; font-size: clamp(1.6rem, 7vw, 2.2rem); line-height: 1; letter-spacing: -.03em;
}
.boule.cachee { visibility: hidden; }
.boule.tombe { animation: tomber-boule .75s cubic-bezier(.3, 0, .5, 1); }
@keyframes tomber-boule {
  0% { transform: translate(-70px, 40px) scale(.15); }
  55% { transform: translate(0, 0) scale(1); }
  72% { transform: translate(0, -18px); }
  86% { transform: translate(0, 0); }
  93% { transform: translate(0, -5px); }
  100% { transform: translate(0, 0); }
}
:is(.boule, .petite-boule).rouge { --c: #ff7b84; --c2: #c9303d; }
:is(.boule, .petite-boule).orange { --c: #ffab6e; --c2: #e0681c; }
:is(.boule, .petite-boule).jaune { --c: #ffe274; --c2: #e0ae12; }
:is(.boule, .petite-boule).vert { --c: #5fd394; --c2: #1d8a50; }
:is(.boule, .petite-boule).violet { --c: #a48cff; --c2: #5b3fd1; }
.compteur { margin: 0; font-weight: 800; color: var(--doux); }
.sorties { display: flex; flex-wrap: wrap; justify-content: center; gap: .35rem; min-height: 2.2rem; margin: 0 0 1rem; padding: 0; list-style: none; }
.petite-boule { display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border: 2px solid var(--bord); border-radius: 50%; font-weight: 900; font-size: .9rem; background: radial-gradient(circle at 50% 50%, #fff 0 42%, transparent 44%), radial-gradient(circle at 40% 35%, var(--c, #ddd) 0 40%, var(--c2, #999) 100%); }
.cartons { display: grid; gap: 1rem; max-width: 560px; margin: 0 auto; }
.carton {
  --papier: #fbe7a1; --encre: #e0a91f;
  padding: .45rem .5rem .55rem;
  background: var(--papier);
  border: 3px solid var(--bord); border-radius: 8px;
  box-shadow: 0 4px 0 var(--bord), inset 0 0 0 3px rgba(255, 255, 255, .45);
}
.papier-rouge { --papier: #f8c6bf; --encre: #d9483b; }
.papier-bleu { --papier: #c4dcf7; --encre: #2f6fc4; }
.papier-vert { --papier: #c8ebc4; --encre: #2f8a3c; }
.papier-jaune { --papier: #fbe7a1; --encre: #d39a12; }
.papier-orange { --papier: #fdd3b0; --encre: #e06f1c; }
.papier-violet { --papier: #dccdf7; --encre: #6a4cc7; }
.papier-rose { --papier: #f8c9e0; --encre: #c93f80; }
.papier-turquoise { --papier: #bfece6; --encre: #1f8f81; }
.carton.plein { box-shadow: 0 4px 0 var(--bord), 0 0 0 5px var(--jaune), 0 0 22px 6px rgba(255, 210, 63, .8); }
.tete-carton { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; margin: 0 .1rem .35rem; color: var(--encre); }
.marque-carton { font-family: Georgia, "Times New Roman", serif; font-style: italic; font-weight: 900; font-size: 1.25rem; letter-spacing: .12em; text-shadow: 1px 1px 0 rgba(36, 31, 58, .35); }
.nom-carton { flex: 1; overflow: hidden; text-align: center; text-overflow: ellipsis; white-space: nowrap; font-weight: 800; color: var(--texte); }
.serie-carton { font-family: "Courier New", monospace; font-size: .8rem; font-weight: 700; }
.grille-loto { container-type: inline-size; display: grid; grid-template-columns: repeat(9, 1fr); gap: 2px; padding: 2px; background: #1d1a2e; border-radius: 3px; }
.case-loto, .case-vide { aspect-ratio: 1 / 1.08; }
.case-vide { background: var(--encre); background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, .12) 0 3px, transparent 3px 7px); }
.case-loto {
  position: relative; padding: 0; border: 0; border-radius: 0; background: #fffdf5; color: #1d1a2e;
  font-family: "Arial Black", "Helvetica Neue", Arial, sans-serif; font-weight: 900;
  font-size: clamp(1rem, 4.6vw, 1.7rem); letter-spacing: -.04em; cursor: pointer;
}
@supports (font-size: 1cqi) { .case-loto { font-size: clamp(.85rem, 6cqi, 1.7rem); } }
.case-loto:hover { background: #fff3c4; }
.case-loto.cochee { cursor: default; }
/* Le jeton transparent posé sur le numéro, comme au vrai loto */
.case-loto.cochee::after {
  content: ""; position: absolute; inset: 8%; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .55) 0 12%, rgba(214, 40, 60, .55) 14% 100%);
  border: 2px solid rgba(150, 20, 35, .75);
  box-shadow: 0 2px 3px rgba(0, 0, 0, .3);
  animation: poser-jeton .25s ease-out;
}
@keyframes poser-jeton { from { transform: scale(1.6) translateY(-12px); opacity: 0; } }
.case-loto.non { animation: secouer .35s; }
@keyframes secouer { 25% { transform: translateX(-4px); } 50% { transform: translateX(4px); } 75% { transform: translateX(-2px); } }
.victoire { position: relative; overflow: hidden; margin: 1rem 0 0; padding: 1.2rem 1rem; text-align: center; background: var(--jaune); border: 3px solid var(--bord); border-radius: 22px; box-shadow: var(--ombre); }
.victoire p { position: relative; margin: .2rem 0; font-weight: 700; }
.victoire .titre-victoire { font-size: clamp(1.5rem, 6vw, 2.2rem); font-weight: 900; line-height: 1.2; color: var(--violet-fonce); }
.confettis span { position: absolute; top: -12px; width: 8px; height: 14px; border-radius: 2px; animation: confetti 2.4s ease-in forwards; }
@keyframes confetti { to { transform: translateY(260px) rotate(540deg); opacity: 0; } }
.victoire .question { margin: 1rem 0 .6rem; font-size: 1.15rem; font-weight: 900; }
.victoire .commandes { position: relative; margin: 0; }
.tableau-scores { margin: 1.2rem 0 0; }
.tableau-scores .defile { overflow-x: auto; }
.tableau-scores table { width: 100%; border-collapse: separate; border-spacing: 0; border: 3px solid var(--bord); border-radius: 16px; overflow: hidden; background: #fff; font-weight: 700; text-align: center; }
.tableau-scores caption { margin: 0 0 .4rem; font-weight: 800; color: var(--violet-fonce); }
.tableau-scores th, .tableau-scores td { padding: .4rem .6rem; border-bottom: 2px solid #e4ddf5; white-space: nowrap; }
.tableau-scores thead th { background: #efe7ff; }
.tableau-scores tfoot th, .tableau-scores tfoot td { background: #fff8d6; border-bottom: 0; font-weight: 900; }
.tableau-scores td.gagne { background: #c4f0d6; }
.fin-loto { text-align: center; }
.fin-loto h2 { margin: 0 0 .4rem; font-size: 1.6rem; color: var(--violet-fonce); }
.fin-loto .titre-victoire { margin: 0 0 .4rem; font-size: clamp(1.4rem, 6vw, 2rem); font-weight: 900; }
.fin-loto .aide { color: var(--doux); }
.fin-loto .commandes { margin: 1rem 0 0; }
.carton-exemple { max-width: 460px; margin: 1.2rem auto .4rem; }
.carton-exemple .case-loto { display: grid; place-items: center; cursor: default; }
.carton-exemple .case-loto:hover { background: #fffdf5; }
.carton-exemple .case-loto.cochee::after { animation: none; }
.legende { margin: 0 0 1rem; text-align: center; font-size: .95rem; color: var(--doux); }

/* Glouton : la borne d'arcade */
@font-face { font-family: "Press Start 2P"; src: url("/polices/press-start-2p.ttf") format("truetype"); font-display: swap; }
.salle-arcade {
  margin: 0 auto;
  padding: clamp(1.2rem, 4vw, 2.2rem) 16px 1.4rem;
  max-width: 760px;
  border: 3px solid var(--bord);
  border-radius: 26px;
  box-shadow: 0 8px 24px rgba(36, 31, 58, .25);
  background:
    radial-gradient(ellipse at 15% 0, rgba(255, 0, 170, .35), transparent 45%),
    radial-gradient(ellipse at 85% 0, rgba(0, 200, 255, .3), transparent 45%),
    linear-gradient(transparent 72%, rgba(255, 210, 0, .08) 72%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .03) 0 2px, transparent 2px 40px),
    #120a2a;
}
.borne {
  position: relative;
  max-width: 470px;
  margin: 0 auto;
  padding: 12px clamp(10px, 4vw, 22px) 0;
  background: linear-gradient(90deg, #d9a600, #ffd21a 12%, #ffd21a 88%, #d9a600);
  border: 4px solid #111;
  border-radius: 18px 18px 8px 8px;
  box-shadow: 0 0 60px rgba(255, 210, 0, .25), 0 22px 0 -6px #0a0614;
}
.borne-fronton {
  position: relative;
  padding: 12px 10px 10px;
  text-align: center;
  background: radial-gradient(ellipse at 50% 40%, #3b1e00, #120800 75%);
  border: 4px solid #111;
  border-radius: 10px;
  box-shadow: inset 0 0 18px rgba(255, 180, 0, .45);
  animation: neon 6s infinite;
}
.borne-logo {
  margin: 0;
  font: clamp(1.5rem, 8vw, 2.5rem)/1.1 "Press Start 2P", monospace;
  color: #ffd800;
  letter-spacing: .04em;
  text-shadow: 3px 3px 0 #e05a00, -2px -2px 0 #3a1d00, 0 0 18px rgba(255, 216, 0, .7);
}
@keyframes neon { 0%, 92%, 100% { filter: none; } 94% { filter: brightness(.6); } 96% { filter: brightness(1.15); } }
.borne-defile { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 10px; }
.mini-pac { width: 18px; height: 18px; border-radius: 50%; background: conic-gradient(from 60deg, #ffd800 0 240deg, transparent 240deg); transform: rotate(-30deg); }
.mini-gomme { width: 5px; height: 5px; background: #ffb8ae; }
.mini-fantome { width: 16px; height: 17px; border-radius: 8px 8px 2px 2px; }
.mini-fantome::before { content: ""; display: block; width: 100%; height: 5px; margin-top: 4px; background: radial-gradient(circle at 30% 50%, #fff 0 2.5px, transparent 3px), radial-gradient(circle at 70% 50%, #fff 0 2.5px, transparent 3px); }
.mini-fantome.rouge { background: #ff0000; }
.mini-fantome.rose { background: #ffb8ff; }
.mini-fantome.cyan { background: #00ffff; }
.mini-fantome.orange { background: #ffb852; }
.borne-ecran {
  margin: 12px 0 0;
  padding: clamp(10px, 3.5vw, 18px);
  background: linear-gradient(#1a1a1a, #050505);
  border: 4px solid #111;
  border-radius: 10px;
}
.borne-crt {
  position: relative;
  overflow: hidden;
  border-radius: 16px / 12px;
  background: #000;
  box-shadow: 0 0 0 2px #2a2a2a, 0 0 22px rgba(80, 120, 255, .35);
}
.borne-crt canvas {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 7 / 9;
  image-rendering: pixelated;
  touch-action: none;
  cursor: pointer;
}
.borne-crt::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(rgba(0, 0, 0, .22) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse at 50% 50%, transparent 62%, rgba(0, 0, 0, .55) 100%);
}
.borne-panneau {
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: 12px;
  margin: 14px -10px 0;
  padding: 16px 14px 18px;
  background: linear-gradient(#2c2c2c, #111);
  border: 4px solid #111;
  border-radius: 12px;
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, .08);
}
.joystick {
  position: relative;
  flex: none;
  width: 104px;
  height: 104px;
  border-radius: 50%;
  background: radial-gradient(circle, #3a3a3a 0 26%, #0b0b0b 27% 58%, #222 59%);
  box-shadow: inset 0 4px 10px rgba(0, 0, 0, .8), 0 2px 0 #444;
  touch-action: none;
  cursor: grab;
}
.manche {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 46px;
  height: 46px;
  margin: -23px 0 0 -23px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ff8a8a, #e0101a 45%, #7a0008);
  box-shadow: 0 6px 8px rgba(0, 0, 0, .6);
  transition: transform .06s;
}
.borne-boutons { display: flex; gap: 14px; }
.bouton-arcade {
  width: 70px;
  height: 70px;
  border: 4px solid #000;
  border-radius: 50%;
  font: .55rem "Press Start 2P", monospace;
  color: #fff;
  text-shadow: 1px 1px 0 #000;
  cursor: pointer;
  box-shadow: 0 6px 0 #000, inset 0 -6px 0 rgba(0, 0, 0, .3);
}
.bouton-arcade.rouge { background: radial-gradient(circle at 35% 30%, #ff7a7a, #e0101a 55%, #8a0010); }
.bouton-arcade.bleu { background: radial-gradient(circle at 35% 30%, #8fb2ff, #2147e0 55%, #0d1f7a); }
.bouton-arcade:active { transform: translateY(5px); box-shadow: 0 1px 0 #000, inset 0 -3px 0 rgba(0, 0, 0, .3); }
.borne-porte {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin: 14px 0 0;
  padding: 14px 10px 18px;
  background: linear-gradient(#1b1b1b, #000);
  border: 4px solid #111;
  border-bottom: 0;
  border-radius: 10px 10px 0 0;
}
.fente-piece {
  width: 54px;
  height: 64px;
  border: 3px solid #555;
  border-radius: 6px;
  background: linear-gradient(90deg, transparent 44%, #000 44% 56%, transparent 56%) center 8px / 100% 26px no-repeat, linear-gradient(#ff5a1f, #b51e00);
  font: .7rem "Press Start 2P", monospace;
  color: #fff3c4;
  padding-top: 32px;
  cursor: pointer;
  box-shadow: 0 0 14px rgba(255, 90, 31, .7);
  animation: piece 1.6s infinite;
}
@keyframes piece { 50% { box-shadow: 0 0 4px rgba(255, 90, 31, .3); } }
.bouton-son {
  padding: .5rem .8rem;
  border: 3px solid #555;
  border-radius: 10px;
  background: #222;
  font: .6rem "Press Start 2P", monospace;
  color: #fff;
  cursor: pointer;
}
.bouton-son[aria-pressed="true"] { color: #ffb852; }
.aide-arcade { max-width: 560px; margin: 1.4rem auto 0; text-align: center; font-size: .95rem; color: #d9d2f5; }
.aide-arcade strong { color: #ffd800; }
@media (max-width: 420px) {
  .joystick { width: 84px; height: 84px; }
  .manche { width: 38px; height: 38px; margin: -19px 0 0 -19px; }
  .bouton-arcade { width: 58px; height: 58px; }
  .borne-boutons { gap: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .borne-fronton, .fente-piece { animation: none; }
}
.tableau-arcade { max-width: 470px; margin: 1.6rem auto 0; padding: 1rem clamp(.8rem, 4vw, 1.4rem) 1.2rem; background: #000; border: 4px solid #2121de; border-radius: 14px; box-shadow: 0 0 18px rgba(33, 33, 222, .5); color: #dedeff; }
.tableau-arcade h2 { margin: 0 0 .8rem; text-align: center; font: 1rem/1.4 "Press Start 2P", monospace; color: #ffd800; }
.onglets-arcade { display: flex; justify-content: center; gap: .5rem; margin: 0 0 .8rem; }
.onglets-arcade button { padding: .5rem .7rem; border: 2px solid #2121de; border-radius: 8px; background: transparent; font: .6rem/1.3 "Press Start 2P", monospace; color: #dedeff; cursor: pointer; }
.onglets-arcade button[aria-selected="true"] { background: #2121de; color: #fff; }
.liste-scores { margin: 0; padding: 0; list-style: none; font: .7rem/1 "Press Start 2P", monospace; }
.liste-scores li { display: grid; grid-template-columns: 2.6em 3.6em 1fr auto; gap: .5em; align-items: center; padding: .55em .3em; border-bottom: 1px dashed #1a1a6e; }
.liste-scores li:nth-child(4n+2) { color: #ffb8ff; }
.liste-scores li:nth-child(4n+3) { color: #00ffff; }
.liste-scores li:nth-child(4n+4) { color: #ffb852; }
.liste-scores .points { text-align: right; }
.liste-scores .niveau { font-size: .55rem; opacity: .75; }
.liste-scores li.nouveau { color: #ffd800; animation: clignote-score 1s steps(2) infinite; }
.liste-scores li.vide { display: block; border: 0; text-align: center; line-height: 1.6; font-size: .6rem; }
@keyframes clignote-score { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .liste-scores li.nouveau { animation: none; } }
.pave-tactile {
  position: absolute;
  z-index: 2;
  width: 96px;
  height: 96px;
  margin: -48px 0 0 -48px;
  border: 2px solid rgba(255, 255, 255, .45);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .06) 0 40%, rgba(255, 255, 255, .16));
  pointer-events: none;
}
.pave-tactile[hidden] { display: none; }
.pave-boule {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  margin: -22px 0 0 -22px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ff8a8a, #e0101a 45%, #7a0008);
  box-shadow: 0 4px 8px rgba(0, 0, 0, .5);
  opacity: .85;
}
.pave-tactile.repos { opacity: .45; }
.pave-tactile.repos::after {
  content: "Pose ton doigt";
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-bottom: 6px;
  transform: translateX(-50%);
  white-space: nowrap;
  font: .45rem "Press Start 2P", monospace;
  color: #fff;
}

/* Quatre en ligne */
.jeton-mini, .pion-mini { display: inline-block; width: .9em; height: .9em; border: 2px solid var(--bord); border-radius: 50%; vertical-align: -.1em; }
.jeton-mini.orange { background: var(--orange); }
.jeton-mini.violet { background: var(--violet); }
.quatre {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: clamp(3px, 1.2vw, 8px);
  max-width: 460px;
  margin: 0 auto;
  padding: clamp(6px, 2vw, 12px);
  background: #3b5bdb;
  border: 3px solid var(--bord);
  border-radius: 18px;
  box-shadow: 0 6px 0 var(--bord);
}
.colonne-quatre {
  display: grid;
  gap: clamp(3px, 1.2vw, 8px);
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
}
.colonne-quatre:not(:disabled):hover { background: rgba(255, 255, 255, .18); }
.colonne-quatre:disabled { cursor: default; }
.trou { display: block; aspect-ratio: 1; border-radius: 50%; background: #fbf7ff; box-shadow: inset 0 3px 0 rgba(0, 0, 0, .25); }
.trou.orange { background: radial-gradient(circle at 35% 30%, #ffb27f, var(--orange) 60%); }
.trou.violet { background: radial-gradient(circle at 35% 30%, #8f7cf0, var(--violet) 60%); }
.trou.tombe { animation: tomber .32s cubic-bezier(.4, 0, 1, 1); }
@keyframes tomber { from { transform: translateY(calc(var(--chute) * -110%)); } }
.trou.gagnant { box-shadow: 0 0 0 4px #ffd23f, inset 0 3px 0 rgba(0, 0, 0, .2); animation: briller .8s steps(2) 3; }
@keyframes briller { 50% { filter: brightness(1.35); } }

/* Dames */
.plateau-large { max-width: 720px; }
.pion-mini.blanc { background: #fff6e0; }
.pion-mini.noir { background: #3a2a1f; }
.damier {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  max-width: 560px;
  margin: 0 auto;
  border: 6px solid #6b3f1e;
  border-radius: 10px;
  box-shadow: 0 6px 0 var(--bord);
  overflow: hidden;
}
.case-claire { aspect-ratio: 1; background: #f3dfb8; }
.case-dames {
  position: relative;
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: #a0643a;
  cursor: pointer;
}
.case-dames.dernier { background: #b97a45; }
.case-dames.cible::after { content: ""; position: absolute; inset: 32%; border-radius: 50%; background: rgba(255, 210, 63, .9); }
.case-dames.prise .pion { opacity: .45; }
.pion {
  position: absolute;
  inset: 11%;
  border-radius: 50%;
  border: 2px solid rgba(0, 0, 0, .55);
  box-shadow: 0 3px 0 rgba(0, 0, 0, .45), inset 0 0 0 4px rgba(0, 0, 0, .12);
}
.pion.blanc { background: radial-gradient(circle at 35% 30%, #fffdf6, #efe2c4 70%); }
.pion.noir { background: radial-gradient(circle at 35% 30%, #6b5444, #2b1d14 70%); }
.pion.dame::after { content: "♛"; position: absolute; inset: 0; display: grid; place-items: center; font-size: clamp(.7rem, 3.4vw, 1.4rem); line-height: 1; color: #d4a017; }
.case-dames.jouable .pion { box-shadow: 0 0 0 3px #ffd23f, 0 3px 0 rgba(0, 0, 0, .45); }
.case-dames.choisie .pion { box-shadow: 0 0 0 4px var(--orange), 0 3px 0 rgba(0, 0, 0, .45); transform: translateY(-2px); }

/* Code secret */
.code-secret { max-width: 460px; margin: 0 auto; }
.solution-code, .essai-code { display: flex; align-items: center; gap: .6rem; }
.solution-code { justify-content: center; margin: 0 0 .8rem; padding: .5rem; background: var(--texte); border-radius: 14px; color: #fff; font-weight: 800; }
.essais-code { margin: 0 0 1rem; padding: 0; list-style: none; }
.essai-code { padding: .3rem .5rem; border-radius: 12px; }
.essai-code:nth-child(odd) { background: #f3eeff; }
.essai-code.courant { background: #fff8d6; outline: 2px dashed var(--orange); }
.essai-code .numero { width: 1.6em; text-align: right; font-weight: 800; color: var(--doux); }
.rangee { display: flex; gap: .35rem; }
.pion-code {
  display: inline-grid;
  place-items: center;
  width: clamp(28px, 8vw, 36px);
  height: clamp(28px, 8vw, 36px);
  border: 2px solid var(--bord);
  border-radius: 50%;
  font-size: .8rem;
  color: rgba(255, 255, 255, .9);
  text-shadow: 0 1px 0 rgba(0, 0, 0, .4);
}
.pion-code.vide { background: #e4ddf5; border-style: dashed; border-color: #b9aee0; }
.pion-code.cache { background: #555; color: #fff; }
.trou-code, .couleur-code { padding: 0; border: 0; background: none; border-radius: 50%; cursor: pointer; }
.indices { display: grid; grid-template-columns: repeat(3, 12px); gap: 3px; margin-left: auto; min-width: 42px; }
.indice { width: 12px; height: 12px; border: 2px solid var(--bord); border-radius: 50%; }
.indice.noir { background: var(--texte); }
.indice.blanc { background: #fff; }
.palette-code { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin: 0 0 .8rem; }
.palette-code .pion-code { width: 44px; height: 44px; font-size: 1.1rem; box-shadow: 0 3px 0 var(--bord); }
.couleur-code:active .pion-code { transform: translateY(2px); box-shadow: 0 1px 0 var(--bord); }

/* Sudoku */
.sudoku {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  max-width: 460px;
  margin: 0 auto;
  border: 3px solid var(--bord);
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
}
.case-sudoku {
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  border-right: 1px solid #cfc6ea;
  border-bottom: 1px solid #cfc6ea;
  background: #fff;
  font: 700 clamp(1rem, 5vw, 1.6rem)/1 system-ui, sans-serif;
  color: var(--violet);
  cursor: pointer;
}
.case-sudoku.bord-droit { border-right: 3px solid var(--bord); }
.case-sudoku.bord-bas { border-bottom: 3px solid var(--bord); }
.case-sudoku.donnee { color: var(--texte); }
.case-sudoku.zone { background: #f3eeff; }
.case-sudoku.meme { background: #e0d6ff; }
.case-sudoku.choisie { background: #ffe9a8; }
.case-sudoku.conflit { color: var(--rouge); background: #ffe0e4; }
.case-sudoku.notee { display: grid; grid-template-columns: repeat(3, 1fr); font-size: clamp(.5rem, 2.2vw, .7rem); font-weight: 600; color: var(--doux); }
.case-sudoku.notee span { display: grid; place-items: center; }
.sudoku.gagnee .case-sudoku { background: #c4f0d6; }
.pave-sudoku { display: grid; grid-template-columns: repeat(9, 1fr); gap: .35rem; max-width: 460px; margin: .8rem auto; }
.touche-sudoku {
  padding: .6rem 0;
  border: 2px solid var(--bord);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 3px 0 var(--bord);
  font: 800 1.2rem system-ui, sans-serif;
  color: var(--violet-fonce);
  cursor: pointer;
}
.touche-sudoku.complet { opacity: .35; }
.outils-sudoku { margin-bottom: 0; }