/* La Joute éclair (jeu 3) : duel de cartes contre Buzz & Klik, Enzo ou Maître Vernis. Produit par outils/jeu-joute.mjs : ne pas modifier à la main.
   Mobile d'abord (360 px), puis ordinateur. Zone de jeu bleu nuit (jamais tout noir) ; la chute du masque reprend celle des 5 Phares (style.css). */
.jj { padding-top: clamp(24px, 5vw, 48px); }
.jj-intro { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 18px; }
.jj-intro .chapeau { flex: 1 1 auto; min-width: 0; margin: 0; }
.jj-app { --nuit: #1c2750; --nuit-2: #26346a; --nuit-3: #31427e; --nuit-bord: rgba(243, 212, 138, .34);
  position: relative; background: linear-gradient(180deg, #24326a 0%, var(--nuit) 55%); border: 1px solid var(--nuit-bord); border-radius: var(--rayon);
  padding: 12px 12px 18px; box-shadow: var(--ombre); color: var(--creme); }
@media (min-width: 700px) { .jj-app { padding: 18px 24px 24px; } }
.jj-h2 { font: 800 1.35rem/1.2 var(--police-titre); color: var(--creme); margin: 0; }
.jj-h3 { font: 800 1.08rem/1.2 var(--police-titre); color: var(--creme); margin: 0; }
.jj-alerte { background: var(--fond-3); border: 1px solid var(--bord-fort); border-radius: 14px; padding: 12px 14px; color: var(--creme); }
.jj-svg { width: 1.3em; height: 1.3em; flex: none; }

/* Haut-parleurs (module js/voix.js) et boutons Voix / Sons */
.jj-hp.voix-bouton { flex: none; width: 44px; height: 44px; min-width: 44px; min-height: 44px; padding: 0; border-radius: 999px; background: var(--nuit-2); border: 2px solid var(--nuit-bord); color: var(--or); }
.jj-hp.voix-bouton:hover { background: var(--nuit-3); }
.jj-hp.voix-bouton.voix-parle { background: var(--or); border-color: var(--or); color: var(--encre); }
.jj-hp.voix-bouton .voix-icone { width: 24px; height: 24px; }
.jj-hp:empty { display: none; }
.jj-intro .jj-hp.voix-bouton { background: var(--fond-3); border-color: var(--bord-fort); }
.jj-outils { display: flex; justify-content: flex-end; gap: 8px; margin: 0 0 10px; }
.jj-outil { display: inline-grid; place-items: center; width: 48px; height: 48px; min-width: 48px; min-height: 48px; padding: 0; border-radius: 999px; background: var(--nuit-2); border: 2px solid var(--nuit-bord); color: var(--or); cursor: pointer; }
.jj-outil:empty { display: none; }
.jj-outil .voix-icone, .jj-outil .jj-svg { width: 26px; height: 26px; }
.jj-outil.voix-coupee, .jj-outil.jj-coupe { color: var(--texte-doux); border-style: dashed; }
.jj-outil:focus-visible, .jj-hp:focus-visible { outline: 3px solid var(--creme); outline-offset: 2px; }
.jj-ligne-hp { display: flex; align-items: center; gap: 10px; margin: 0; text-align: left; }
.jj-ligne-hp > span { flex: 1 1 auto; min-width: 0; }

/* Gros boutons */
.jj-gros { display: inline-flex; align-items: center; justify-content: center; gap: .5em; width: 100%; min-height: 60px; font-size: 1.2rem; }
.jj-gros .jj-svg { width: 1.6em; height: 1.6em; }
@media (min-width: 560px) { .jj-gros { width: auto; min-width: 280px; } }

/* Départ */
.jj-depart { display: grid; gap: 18px; }
.jj-choix { display: grid; gap: 18px; justify-items: stretch; }
.jj-choix > .jj-gros { justify-self: center; }
.jj-premiere { display: grid; justify-items: center; gap: 12px; text-align: center; padding: 18px 12px 20px; background: var(--nuit-2); border: 1px solid var(--nuit-bord); border-radius: var(--rayon); }
.jj-premiere .jj-ligne-hp { max-width: 32em; }
.jj-groupe { border: 0; margin: 0; padding: 0; min-width: 0; }
.jj-groupe legend { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 0; margin-bottom: 10px; }
.jj-advs { display: grid; gap: 10px; }
@media (min-width: 700px) { .jj-advs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.jj-tuile { position: relative; min-width: 0; }
.jj-tuile input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
.jj-tuile label { display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: center; gap: 2px 12px; height: 100%; min-height: 92px; padding: 12px 58px 12px 12px; border: 2px solid var(--nuit-bord); border-radius: 16px; background: var(--nuit-2); line-height: 1.25; transition: border-color .15s ease, background-color .15s ease; }
.jj-tuile .jj-avatar { grid-row: span 3; width: 64px; height: 64px; }
.jj-tuile label b { font: 800 1.12rem/1.15 var(--police-titre); color: var(--creme); overflow-wrap: anywhere; }
.jj-tuile label small { font-size: .88rem; color: var(--texte); }
.jj-tuile .jj-hp { position: absolute; top: 10px; right: 10px; z-index: 2; }
.jj-tuile input:hover + label { border-color: var(--bord-fort); }
.jj-tuile input:checked + label { border-color: var(--or); background: var(--nuit-3); box-shadow: 0 0 0 2px var(--or); }
.jj-tuile input:checked + label b::after { content: " ✓"; color: var(--or); }
.jj-tuile input:focus-visible + label { outline: 3px solid var(--creme); outline-offset: 2px; }
@media (min-width: 700px) {
  .jj-tuile--adv label { grid-template-columns: 1fr; justify-items: center; text-align: center; padding: 14px 12px 16px; }
  .jj-tuile--adv .jj-avatar { grid-row: auto; width: 78px; height: 78px; }
}
.jj-niveau { display: inline-flex; gap: 4px; }
.jj-niveau i { width: 12px; height: 12px; border-radius: 999px; border: 2px solid var(--or); }
.jj-niveau i.plein { background: var(--or); }
.jj-modes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.jj-tuile--mode label { grid-template-columns: 1fr; justify-items: center; text-align: center; padding: 14px 8px 58px; min-height: 0; }
.jj-tuile--mode .jj-hp { top: auto; bottom: 8px; right: 50%; transform: translateX(50%); }
.jj-points-mode { display: inline-flex; gap: 5px; margin-bottom: 4px; }
.jj-points-mode i { width: 13px; height: 13px; border-radius: 999px; background: var(--or); }

/* Avatars (emblèmes, jamais de visage humain) */
.jj-avatar { display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: 999px; background: #2e3e7a; border: 2px solid var(--nuit-bord); overflow: hidden; flex: none; }
.jj-avatar svg { width: 80%; height: 80%; }
.jj-avatar img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; transform: scale(1.4); }
.jj-avatar--toi { color: var(--or); background: #3a2f1a; }
.jj-avatar--toi svg { width: 64%; height: 64%; }
.jj-avatar--vernis { background: #3c4360; }
.jj-avatar--grand { width: 96px; height: 96px; }
.jj-avatar--petit { width: 44px; height: 44px; }

/* Plus de choix : paquet et Défi chrono */
.jj-options { background: var(--nuit-2); border: 1px solid var(--nuit-bord); border-radius: 14px; }
.jj-options summary { display: flex; align-items: center; gap: 8px; min-height: 50px; padding: 10px 14px; cursor: pointer; font: 800 1rem/1.2 var(--police-titre); color: var(--or); list-style: none; }
.jj-options summary::-webkit-details-marker { display: none; }
.jj-options summary::before { content: "+"; display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 999px; border: 1px solid var(--bord-fort); font-size: 1rem; line-height: 1; flex: none; }
.jj-options[open] summary::before { content: "−"; }
.jj-options summary:focus-visible { outline: 3px solid var(--creme); outline-offset: -3px; border-radius: 14px; }
.jj-options__corps { display: grid; gap: 16px; padding: 0 14px 14px; }
.jj-paquets { border: 0; margin: 0; padding: 0; min-width: 0; }
.jj-partage-adulte { margin: 8px 0 0; font-size: .9rem; color: var(--texte-doux); text-align: center; }
.jj-paquets legend { padding: 0; margin-bottom: 8px; }
.jj-paquets__liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 560px) { .jj-paquets__liste { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.jj-paquet { position: relative; min-width: 0; }
.jj-paquet--s1 { grid-column: 1 / -1; }
.jj-paquet input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.jj-paquet label { display: flex; flex-direction: column; justify-content: center; gap: 2px; min-height: 54px; padding: 8px 12px; border: 1px solid var(--nuit-bord); border-radius: 12px; background: var(--nuit); line-height: 1.2; }
.jj-paquet label b { color: var(--creme); font: 800 1rem/1.15 var(--police-titre); overflow-wrap: anywhere; }
.jj-paquet label small { color: var(--texte-doux); font-size: .8rem; }
.jj-paquet input:checked + label { border-color: var(--or); background: var(--nuit-3); box-shadow: inset 0 0 0 1px var(--or); }
.jj-paquet input:checked + label b::after { content: " ✓"; color: var(--or); }
.jj-paquet input:focus-visible + label { outline: 3px solid var(--creme); outline-offset: 2px; }
.jj-chrono-opt { display: flex; align-items: center; gap: 10px; }
.jj-chrono-opt input { width: 28px; height: 28px; margin: 0; flex: none; accent-color: var(--or); }
.jj-chrono-opt label { flex: 1 1 auto; min-width: 0; cursor: pointer; line-height: 1.3; }
.jj-chrono-opt small { color: var(--texte-doux); }
.jj-stats { margin: 0; font-size: .92rem; color: var(--texte); text-align: center; }
.jj-stats b { color: var(--or); }

/* Le Salut de la Parole */
.jj-salut { display: grid; justify-items: center; gap: 16px; text-align: center; padding: 6px 0 4px; }
.jj-salut .jj-h2:focus { outline: none; }
.jj-salut__textes { display: grid; gap: 8px; max-width: 34em; }
.jj-scene { display: flex; align-items: flex-end; justify-content: center; gap: clamp(18px, 8vw, 56px); }
.jj-perso { margin: 0; display: grid; justify-items: center; gap: 6px; font: 800 .95rem/1.2 var(--police-titre); color: var(--creme); }
.jj-perso .jj-avatar { width: 92px; height: 92px; }
.jj-scene--petite .jj-perso .jj-avatar { width: 64px; height: 64px; }
.jj-perso.salue .jj-avatar { animation: jj-salut 1s ease; }
@keyframes jj-salut { 35% { transform: translateY(10px) rotate(-6deg) scale(.94); } 70% { transform: none; } }
.jj-salut-btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 84px; min-width: 240px; padding: 14px 32px; border: 0; border-radius: 999px; background: var(--or); color: var(--encre); font: 800 1.6rem/1 var(--police-titre); box-shadow: 0 5px 0 var(--or-ombre); cursor: pointer; touch-action: manipulation; transition: transform .12s ease, background-color .12s ease; }
.jj-salut-btn .jj-svg { width: 46px; height: 46px; }
.jj-salut-btn:hover { background: var(--or-clair); }
.jj-salut-btn:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--or-ombre); }
.jj-salut-btn:disabled { opacity: .6; cursor: default; }
.jj-salut-btn:focus-visible { outline: 3px solid var(--creme); outline-offset: 4px; }
.jj-bulle { position: relative; display: flex; align-items: center; gap: 8px; margin: 0; padding: 10px 12px; background: #fff8e6; color: var(--encre); border-radius: 16px; font-weight: 700; line-height: 1.35; text-align: left; }
.jj-bulle p { margin: 0; flex: 1 1 auto; min-width: 0; }
.jj-bulle--seule { display: block; max-width: 34em; }
.jj-bulle .jj-hp.voix-bouton { background: #f3e3b8; color: var(--encre); border-color: rgba(42, 28, 12, .25); }

/* Partie */
.jj-jeu { display: grid; gap: 14px; }
.jj-tableau { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; background: var(--nuit-2); border: 1px solid var(--nuit-bord); border-radius: 14px; padding: 8px 12px; }
.jj-manche { margin: 0; display: flex; align-items: center; gap: 8px; font: 800 .95rem/1.2 var(--police-texte); color: var(--or); }
.jj-pastilles { display: inline-flex; gap: 4px; }
.jj-pastilles i { width: 14px; height: 14px; border-radius: 999px; border: 2px solid var(--nuit-bord); }
.jj-pastilles i.j { background: var(--or); border-color: var(--or); }
.jj-pastilles i.a { background: #8d94b3; border-color: #8d94b3; }
.jj-pastilles i.e { background: linear-gradient(90deg, var(--or) 50%, #8d94b3 50%); border-color: var(--or); }
.jj-pastilles i.en-cours { border-color: var(--or); box-shadow: 0 0 0 2px rgba(243, 212, 138, .3); }
.jj-score { margin: 0; display: flex; align-items: center; gap: 8px; font: 800 1rem/1 var(--police-titre); color: var(--creme); }
.jj-score b { display: inline-grid; place-items: center; min-width: 34px; height: 34px; padding: 0 6px; border-radius: 999px; font-size: 1.15rem; }
.jj-score__j { background: var(--or); color: var(--encre); }
.jj-score__a { background: var(--nuit-3); color: var(--creme); border: 1px solid var(--bord-fort); }
.jj-score b.bondit { animation: jj-bond .5s ease; }
@keyframes jj-bond { 40% { transform: scale(1.3); } }
.jj-chrono { margin: 0; font: 800 .95rem var(--police-texte); color: var(--creme); font-variant-numeric: tabular-nums; }
.jj-adv { display: flex; align-items: center; gap: 12px; }
.jj-adv .jj-bulle { flex: 1 1 auto; min-width: 0; }
.jj-adv .jj-bulle::before { content: ""; position: absolute; left: -8px; top: 50%; margin-top: -8px; border: 8px solid transparent; border-left: 0; border-right-color: #fff8e6; }
.jj-promesse { display: flex; align-items: center; gap: 10px; padding: 8px 10px 8px 12px; border: 2px dashed var(--or); border-radius: 14px; font-weight: 700; color: var(--creme); }
.jj-promesse p { margin: 0; flex: 1 1 auto; min-width: 0; }
.jj-promesse > .jj-svg { color: var(--or); width: 28px; height: 28px; }
.jj-promesse.est-tenue { border-style: solid; background: rgba(243, 212, 138, .14); }
.jj-petit-titre { font-size: .9rem; color: var(--texte); margin-bottom: 6px; }

/* Les masques de l'adversaire : on voit le type, jamais les qualités */
.jj-adverse { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 5px; }
.jj-masque { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; min-height: 74px; padding: 7px 1px 6px; text-align: center; border-radius: 12px; background: var(--nuit-2); border: 1px solid var(--nuit-bord); border-top: 3px solid var(--t); font-size: .7rem; line-height: 1.15; transition: background-color .3s ease; }
.jj-masque .jj-ico { width: 24px; height: 24px; }
.jj-masque__type { font-weight: 800; color: var(--creme); overflow-wrap: anywhere; letter-spacing: -.01em; }
.jj-masque__bas { color: var(--texte); font-weight: 700; overflow-wrap: anywhere; }
.jj-masque--pose { box-shadow: 0 0 0 2px var(--or); }
.jj-masque--promis { box-shadow: 0 0 0 2px var(--or); border-style: dashed; }
.jj-masque--joue { background: var(--nuit); border-top-color: var(--nuit-bord); }
.jj-masque--joue .jj-ico, .jj-masque--joue .jj-masque__type { opacity: .55; }
.jj-masque--joue .jj-masque__bas { font-size: .85em; -webkit-hyphens: auto; hyphens: auto; }
.jj-masque--vernis { background: linear-gradient(135deg, #cfd5e2 0%, #9aa2b6 45%, #eef1f6 55%, #a3abbe 100%); border-color: #cfd5e2; }
.jj-masque--vernis .jj-masque__type, .jj-masque--vernis .jj-masque__bas { color: #1d2233; }
.jj-masque--vernis .jj-ico { filter: none; color: #1d2233; }
@media (min-width: 600px) { .jj-masque { font-size: .8rem; } }

/* Les types : symbole + nom (la couleur n'est jamais seule) */
.jj-type { display: inline-flex; align-items: center; gap: 5px; font: 800 .8rem/1.15 var(--police-texte); color: var(--creme); max-width: 100%; min-width: 0; }
.jj-type > span { min-width: 0; overflow-wrap: anywhere; }
.jj-ico { width: 1.2em; height: 1.2em; flex: none; color: var(--t, var(--or)); filter: brightness(1.4) saturate(1.1); }
.jj-type--grand { font-size: 1rem; padding: 4px 10px; border-radius: 999px; background: rgba(0, 0, 0, .22); border: 1px solid var(--t, var(--nuit-bord)); }
.jj-type--grand .jj-ico { width: 1.5em; height: 1.5em; }

/* L'arène : deux cartes, les masques tombent comme ceux des 5 Phares */
.jj-arene { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: start; gap: 8px; }
.jj-place { display: flex; flex-direction: column; align-items: center; min-width: 0; }
.jj-place__qui { margin: 0 0 6px; font: 800 .74rem/1 var(--police-texte); letter-spacing: .14em; text-transform: uppercase; color: var(--or); }
.jj-visuel { position: relative; width: 100%; max-width: 210px; aspect-ratio: 360 / 504; border-radius: 5.1% / 3.65%; overflow: hidden; isolation: isolate; background: var(--nuit-2); box-shadow: var(--ombre), 0 0 0 1px var(--nuit-bord); }
.jj-vide { position: absolute; inset: 0; display: grid; place-items: center; font: 800 3rem/1 var(--police-titre); color: var(--bord-fort); border: 2px dashed var(--nuit-bord); border-radius: inherit; }
.jj-place.est-pose .jj-vide { display: none; }
.jj-place:not(.est-pose) .jj-face { display: none; }
.jj-face { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.jj-face--m { z-index: 2; transform-origin: 50% 0; transition: transform .8s cubic-bezier(.55, -0.3, .7, 1), opacity .45s ease .32s; }
.jj-face--e { z-index: 1; transform: scale(1.07); filter: brightness(.45) saturate(.6); transition: transform 1s cubic-bezier(.2, .8, .2, 1) .2s, filter .7s ease .2s; }
.jj-visuel::after { content: ""; position: absolute; inset: 0; z-index: 5; pointer-events: none; border-radius: inherit; background: radial-gradient(circle at 50% 30%, rgba(255, 236, 170, .6), transparent 62%); opacity: 0; }
.jj-place.est-eveille .jj-face--m { transform: translateY(32%) rotate(-7deg) scale(.92); opacity: 0; }
.jj-place.est-eveille .jj-face--e { transform: none; filter: none; }
.jj-place.est-eveille .jj-visuel::after { animation: eclat .9s ease-out .25s; }
.jj-place.est-pose:not(.est-eveille) .jj-visuel { animation: jj-pose .45s ease-out; }
@keyframes jj-pose { from { transform: translateY(14px) scale(.96); opacity: .4; } }
.jj-place.gagne .jj-visuel { box-shadow: var(--ombre), 0 0 0 3px var(--or), 0 0 28px rgba(243, 212, 138, .45); }
.jj-place.salue .jj-visuel { animation: jj-salut .9s ease .1s; }
.jj-sans-transition .jj-face, .jj-sans-transition .jj-vernis { transition: none !important; }
.jj-place__nom { margin: 8px 0 0; min-height: 1.2em; text-align: center; font: 800 1rem/1.15 var(--police-titre); color: var(--creme); overflow-wrap: anywhere; max-width: 100%; }
.jj-place__type { margin: 6px 0 0; min-height: 1.6em; display: flex; justify-content: center; max-width: 100%; }
.jj-contre { margin: 40% 0 0; font: 800 .85rem/1 var(--police-titre); color: var(--texte-doux); text-transform: uppercase; letter-spacing: .08em; }
/* Masque de vernis (Maître Vernis) : brillant, lisse, faux ; il tombe quand on gagne la manche */
.jj-vernis { position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit; opacity: 0;
  background: linear-gradient(125deg, rgba(232, 236, 243, .78) 0%, rgba(160, 168, 186, .6) 38%, rgba(255, 255, 255, .9) 50%, rgba(150, 158, 178, .6) 62%, rgba(220, 225, 235, .74) 100%);
  transition: transform .9s cubic-bezier(.55, -0.3, .7, 1), opacity .5s ease .35s; }
.jj-place--vernis .jj-vernis { opacity: 1; }
.jj-place--vernis.est-eveille .jj-vernis { opacity: .5; }
.jj-place--vernis.vernis-fendu .jj-vernis { transform: translateY(40%) rotate(8deg); opacity: 0; }

/* Consignes, Indice */
.jj-etape { min-width: 0; }
.jj-consigne { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.jj-consigne .jj-h3 { flex: 1 1 auto; min-width: 0; }
.jj-indice-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 6px 14px; border-radius: 999px; border: 2px solid var(--nuit-bord); background: var(--nuit-2); color: var(--or); font: 800 .95rem/1 var(--police-texte); cursor: pointer; flex: none; }
.jj-indice-btn:hover { background: var(--nuit-3); }
.jj-indice-btn:focus-visible { outline: 3px solid var(--creme); outline-offset: 2px; }
.jj-indice-texte { margin: 0 0 10px; padding: 8px 12px; border-radius: 12px; background: rgba(127, 224, 208, .12); border: 1px solid #7fe0d0; font-weight: 700; }

/* Ta main */
.jj-main { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.jj-main--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (min-width: 640px) { .jj-main--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.jj-carte { position: relative; width: 100%; min-height: 44px; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 5px 3px 7px; background: var(--nuit-2); border: 2px solid var(--nuit-bord); border-radius: 12px; color: var(--texte); font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease, opacity .2s ease; }
.jj-carte img { width: 100%; height: auto; aspect-ratio: 360 / 504; border-radius: 7px; object-fit: cover; }
.jj-carte__nom { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; font: 800 .82rem/1.15 var(--police-titre); color: var(--creme); overflow-wrap: anywhere; } /* lu par les lecteurs d'écran ; visible dès 600 px */
.jj-carte .jj-type { flex-direction: column; gap: 2px; font-size: .64rem; text-align: center; }
.jj-carte:hover:not(:disabled) { transform: translateY(-2px); border-color: var(--bord-fort); }
.jj-carte.est-choisie { border-color: var(--or); box-shadow: 0 0 0 2px var(--or), 0 12px 26px -12px rgba(243, 212, 138, .7); transform: translateY(-4px); }
.jj-carte:focus-visible { outline: 3px solid var(--creme); outline-offset: 2px; }
.jj-carte:disabled { cursor: default; }
.jj-carte--jouee { opacity: .32; filter: grayscale(.7); }
.jj-carte__bonus { position: absolute; top: -9px; right: -5px; z-index: 2; }
.jj-carte.jj-indice, .jj-qualite.jj-indice { box-shadow: 0 0 0 3px #7fe0d0, 0 0 18px rgba(127, 224, 208, .6); }
@media (min-width: 600px) {
  .jj-main { gap: 10px; }
  .jj-carte__nom { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; max-width: 100%; }
  .jj-carte .jj-type { flex-direction: row; font-size: .74rem; }
}
.jj-bonus { display: inline-flex; align-items: center; gap: 2px; padding: 2px 7px; border-radius: 999px; font: 800 .84rem/1.2 var(--police-texte); white-space: nowrap; }
.jj-bonus .jj-svg { width: 1em; height: 1em; }
.jj-bonus--plus { background: var(--or); color: var(--encre); box-shadow: 0 0 12px rgba(243, 212, 138, .75); }
.jj-bonus--moins { background: #5b647f; color: var(--creme); }

/* Les qualités : icône, nom, barre (et le chiffre en Grande Joute) */
.jj-qualites { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 8px; }
.jj-qualite { width: 100%; min-height: 58px; display: grid; grid-template-columns: 32px 5.4em minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 12px; background: var(--nuit-2); border: 2px solid var(--nuit-bord); border-radius: 14px; color: var(--creme); font: 800 1.02rem/1.2 var(--police-texte); text-align: left; cursor: pointer; touch-action: manipulation; transition: background-color .15s ease, border-color .15s ease; }
.jj-qualite:hover { background: var(--nuit-3); }
.jj-qualite.est-choisie { border-color: var(--or); background: var(--nuit-3); box-shadow: 0 0 0 2px var(--or); }
.jj-qualite:focus-visible { outline: 3px solid var(--creme); outline-offset: 2px; }
.jj-q-ico { width: 30px; height: 30px; flex: none; color: var(--or); }
.jj-qualite__nom { overflow-wrap: anywhere; }
.jj-qualite__val { font: 800 1.2rem/1 var(--police-titre); min-width: 2.2em; text-align: right; font-variant-numeric: tabular-nums; }
.jj-barre { display: flex; height: 14px; border-radius: 999px; background: rgba(255, 248, 230, .12); overflow: hidden; min-width: 0; }
.jj-barre i { display: block; height: 100%; flex: none; transform-origin: 0 50%; }
.jj-barre__base { background: var(--or-2); }
.jj-barre__plus { background: var(--or-clair); box-shadow: 0 0 10px var(--or-clair); }
.jj-barre__moins { background: repeating-linear-gradient(135deg, rgba(255, 181, 158, .6) 0 4px, transparent 4px 8px); }
.jj-jouer { display: flex; margin-inline: auto; }

/* Le résultat de la manche */
.jj-resultat { display: grid; gap: 12px; background: var(--nuit-2); border: 2px solid var(--nuit-bord); border-radius: var(--rayon); padding: 14px 12px 18px; }
.jj-resultat .jj-gros { justify-self: center; }
.jj-verdict { display: flex; align-items: center; justify-content: center; gap: 12px; text-align: center; }
.jj-verdict__titre { margin: 0; font: 800 clamp(1.6rem, 7vw, 2.2rem)/1.1 var(--police-titre); color: var(--or); }
.jj-verdict__petit { margin: 4px 0 0; font: 700 .95rem/1.3 var(--police-texte); color: var(--texte); }
.jj-verdict__petit:empty { display: none; }
.jj-res { display: grid; gap: 8px; }
.jj-res__ligne { display: grid; gap: 4px; padding: 8px 10px; border-radius: 12px; background: rgba(0, 0, 0, .16); border: 2px solid transparent; }
.jj-res__ligne.est-gagnant { border-color: var(--or); }
.jj-res__qui { margin: 0; font-size: .88rem; color: var(--texte); overflow-wrap: anywhere; }
.jj-res__qui b { font-family: var(--police-titre); }
.jj-res__barre { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 8px; }
.jj-res__barre .jj-q-ico { width: 26px; height: 26px; }
.jj-res__calc { margin: 0; font: 800 1rem/1.2 var(--police-texte); color: var(--creme); font-variant-numeric: tabular-nums; }
.jj-res .jj-barre i { animation: jj-pousse .9s cubic-bezier(.2, .8, .2, 1) both; }
.jj-res .jj-barre i + i { animation-delay: .7s; }
@keyframes jj-pousse { from { transform: scaleX(0); } }
.jj-explication { margin: 0; text-align: center; font-size: .95rem; }

/* Ton Dahoman se concentre (après deux manches perdues de suite ; on peut passer) */
.jj-concentre { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 16px; background: rgba(22, 30, 62, .9); }
.jj-concentre__btn { display: grid; justify-items: center; gap: 10px; background: none; border: 0; color: var(--creme); font: 800 1.4rem/1.2 var(--police-titre); cursor: pointer; text-align: center; }
.jj-concentre__btn img { width: 150px; border-radius: 5.1% / 3.65%; box-shadow: 0 0 34px rgba(243, 212, 138, .55); animation: respire 1.6s ease-in-out infinite; }
.jj-concentre__btn small { font: 700 .95rem/1.2 var(--police-texte); color: var(--texte-doux); }
.jj-concentre__btn:focus-visible { outline: 3px solid var(--creme); outline-offset: 6px; border-radius: 12px; }

/* Fin de la Joute : salut, puis bilan */
.jj-fin { display: grid; justify-items: center; gap: 12px; text-align: center; padding: 8px 0 0; }
.jj-fin__titre { margin: 0; font-size: clamp(1.7rem, 7vw, 2.4rem); color: var(--or); }
.jj-fin__titre:focus { outline: none; }
.jj-fin__ligne { display: flex; align-items: center; justify-content: center; gap: 10px; }
.jj-fin__petit { margin: 0; font-weight: 700; }
.jj-fin__petit:empty { display: none; }
.jj-fin__score { margin: 0; font-weight: 800; color: var(--creme); }
.jj-heros { margin: 4px auto 6px; max-width: 170px; }
.jj-heros img { width: 100%; border-radius: 5.1% / 3.65%; box-shadow: var(--ombre), 0 0 0 1px var(--bord-fort); animation: apparition .7s ease both; }
.jj-heros figcaption { margin-top: 8px; font: 800 .95rem/1.3 var(--police-titre); color: var(--creme); }
.jj-salut-fin { display: grid; justify-items: center; gap: 14px; width: 100%; padding: 14px 10px 18px; border-radius: var(--rayon); background: var(--nuit-2); border: 1px solid var(--nuit-bord); }
.jj-apres { display: grid; justify-items: center; gap: 14px; width: 100%; }
.jj-bulle--fin { width: 100%; max-width: 36em; }
.jj-vernis-libres { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0; font: 800 1.15rem/1.3 var(--police-titre); color: var(--or); }
.jj-vernis-libres .jj-svg { width: 1.6em; height: 1.6em; animation: respire 1.6s ease-in-out infinite; }
.jj-session { display: flex; align-items: center; gap: 10px; width: 100%; max-width: 36em; padding: 12px 14px; border-radius: 14px; background: var(--nuit-3); border: 1px solid var(--or); text-align: left; font-weight: 700; }
.jj-session p { margin: 0; flex: 1 1 auto; }
.jj-session:focus { outline: none; }
.jj-session:focus-visible { outline: 3px solid var(--creme); outline-offset: 2px; }
.jj-carnet { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 8px; width: 100%; max-width: 36em; margin: 0; padding: 8px 12px; border-radius: 14px; background: rgba(243, 212, 138, .12); border: 1px solid var(--bord-fort); font-weight: 800; color: var(--creme); }
.jj-carnet .jj-svg { width: 24px; height: 24px; color: var(--or); }
.jj-carnet a { color: var(--or); font-weight: 700; }
.jj-actions .btn .jj-svg { width: 1.25em; height: 1.25em; }
.jj-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 12px; }
.jj-partage-msg { min-height: 1.4em; margin: 0; font-weight: 700; color: var(--or); overflow-wrap: anywhere; }
.jj-partage-msg:empty { display: none; }
.jj-secret { width: 100%; max-width: 36em; text-align: left; padding: 12px 14px; border-radius: 14px; background: #3a2f1a; border: 1px solid var(--bord-fort); }
.jj-secret__haut { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.jj-secret__haut .jj-h3 { flex: 1 1 auto; min-width: 0; color: var(--or); }
.jj-secret p { margin: 0; }
.jj-chrono-fin { margin: 0; font-weight: 800; color: var(--creme); }
.jj-aide--bilan { width: 100%; max-width: 36em; margin-top: 0; text-align: left; }
.jj-bilan { margin: 0; padding-left: 1.4em; display: grid; gap: 4px; font-size: .9rem; }
.jj-bilan li::marker { color: var(--or); font-weight: 800; }
.jj-bilan .jj-svg { width: 1.1em; height: 1.1em; vertical-align: -.2em; margin-left: 4px; color: #7fe0d0; }
.jj-liens { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 22px; margin: 0; }
.jj-liens a { display: inline-flex; align-items: center; gap: .3em; min-height: 44px; }
.jj-quitter { margin: 0; text-align: center; }
.jj-lien { min-height: 44px; padding: 8px 12px; background: none; border: 0; color: var(--texte-doux); font: 700 .9rem var(--police-texte); text-decoration: underline; text-underline-offset: .2em; cursor: pointer; }
.jj-lien:hover { color: var(--or); }

/* Aide : table des types et règles ; Coin des parents (discret) */
.jj-aide { margin-top: 18px; background: var(--fond-2); border: 1px solid var(--bord); border-radius: 14px; }
.jj-aide summary { display: flex; align-items: center; gap: 8px; min-height: 50px; padding: 10px 16px; cursor: pointer; font: 800 1.02rem/1.2 var(--police-titre); color: var(--or); list-style: none; }
.jj-aide summary::-webkit-details-marker { display: none; }
.jj-aide summary::before { content: "+"; display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 999px; border: 1px solid var(--bord-fort); font-size: 1rem; line-height: 1; flex: none; }
.jj-aide[open] summary::before { content: "−"; }
.jj-aide summary:focus-visible { outline: 3px solid var(--creme); outline-offset: -3px; border-radius: 14px; }
.jj-aide__corps { padding: 0 16px 16px; font-size: .95rem; overflow-x: auto; } /* filet de sécurité sous 360 px : la table défile dans son cadre, jamais la page */
.jj-regles { margin: 0; padding-left: 1.4em; display: grid; gap: 6px; }
.jj-regles li::marker { color: var(--or); font-weight: 800; }
.jj-table { width: 100%; border-collapse: collapse; font-size: .86rem; line-height: 1.35; }
.jj-table th, .jj-table td { text-align: left; vertical-align: top; padding: 8px 6px; border-top: 1px solid var(--bord); }
.jj-table thead th { border-top: 0; color: var(--or); font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; }
.jj-table tbody th { white-space: nowrap; }
.jj-table b { color: var(--creme); }
.jj-pourquoi { color: var(--texte-doux); }
.jj-parents { margin: 18px 0 0; text-align: center; font-size: .86rem; }
.jj-parents a { display: inline-block; padding: 10px 4px; color: var(--texte-doux); }
.jj-parents a:hover { color: var(--or); }

@media (prefers-reduced-motion: reduce) {
  .jj-face--m, .jj-face--e, .jj-vernis { transition: opacity .25s ease !important; transform: none !important; }
  .jj-place.est-eveille .jj-face--m, .jj-place--vernis.vernis-fendu .jj-vernis { transform: none !important; }
  .jj-place.est-eveille .jj-visuel::after, .jj-place.salue .jj-visuel, .jj-place.est-pose:not(.est-eveille) .jj-visuel, .jj-score b.bondit, .jj-heros img,
  .jj-perso.salue .jj-avatar, .jj-res .jj-barre i, .jj-concentre__btn img, .jj-vernis-libres .jj-svg { animation: none !important; }
  .jj-carte, .jj-carte.est-choisie, .jj-carte:hover:not(:disabled) { transform: none !important; }
}