/* Jeu « Mémoire des masques » / « Mask Match » (fichier écrit par outils/jeu-memoire.mjs, ne pas modifier à la main).
   Fond de jeu clair en bleu nuit, gros boutons à icônes, cartes au symbole et à la couleur du type, chute du masque avec lumière. */
.mm-haut { padding-top: clamp(24px, 5vw, 52px); }
.mm-chapeau { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 18px; }
.mm-jeu [hidden], .mm-haut [hidden] { display: none !important; }

/* Haut-parleurs (branchés par site/js/voix.js : sans lui, ils restent cachés) */
.mm-hp { flex: none; width: 52px; height: 52px; min-width: 52px; min-height: 52px; padding: 0; border-radius: 50%; }
.mm-hp:not(.voix-bouton) { display: none !important; }
.mm-hp .voix-icone { width: 28px; height: 28px; }
.mm-tete { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; }
.mm-tete h2 { margin: 0; }

/* Le plateau : bleu nuit, clair et doux (jamais tout noir) */
.mm-jeu {
  --bleu: #5b9bff; --orange: #ff9d42; --nuit: #1d2850;
  position: relative; padding: clamp(10px, 2.4vw, 22px); border-radius: 24px; color: var(--texte);
  background: radial-gradient(120% 55% at 50% 0%, rgba(120, 160, 255, .24), transparent 70%), linear-gradient(180deg, #27346a, #1c254b);
  border: 1px solid rgba(170, 195, 255, .3); box-shadow: var(--ombre);
}

/* Réglages : joueurs, options, défi, région */
.mm-reglages { display: grid; gap: 10px; margin: 0 0 6px; align-content: start; min-width: 0; }
.mm-scene { min-width: 0; }
.mm-modes, .mm-niveaux, .mm-regions__choix { min-width: 0; margin: 0; padding: 0; border: 0; }
.mm-niveaux legend { padding: 0; margin: 0 0 6px; font: 800 .8rem/1.3 var(--police-texte); letter-spacing: .12em; text-transform: uppercase; color: var(--or); }
.mm-choix input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.mm-choix label {
  display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 56px; padding: 6px 12px; text-align: center; cursor: pointer;
  font: 800 1rem/1.1 var(--police-titre); color: var(--creme); background: rgba(10, 14, 34, .35); border: 2px solid rgba(243, 212, 138, .32); border-radius: 16px;
  -webkit-tap-highlight-color: transparent; transition: background-color .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
}
.mm-choix label:hover { background: rgba(243, 212, 138, .12); }
.mm-choix input:checked + label { background: var(--or); color: var(--encre); border-color: var(--or); }
.mm-choix input:focus-visible + label { outline: 3px solid var(--creme); outline-offset: 2px; }
.mm-choix label svg { flex: none; }
.mm-choix--modes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.mm-mode .mm-ico-main { width: 30px; height: 30px; color: var(--bleu); }
.mm-mode .mm-ico-deux { width: 52px; height: 28px; }
.mm-ico-deux .mm-m0 { fill: var(--bleu); } .mm-ico-deux .mm-m1 { fill: var(--orange); }
.mm-choix input:checked + .mm-mode .mm-ico-main { color: #1f5fd1; }
.mm-choix input:checked + .mm-mode .mm-ico-deux .mm-m0 { fill: #1f5fd1; } .mm-choix input:checked + .mm-mode .mm-ico-deux .mm-m1 { fill: #b85a00; }
.mm-choix--niveaux { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.mm-niv { flex-direction: column; gap: 2px !important; min-height: 84px !important; padding: 6px 3px !important; }
.mm-niv b { font: 800 1.7rem/1 var(--police-titre); color: inherit; }
.mm-niv__nom { font: 700 .74rem/1.12 var(--police-texte); }
@media (min-width: 560px) { .mm-niv b { font-size: 1.9rem; } .mm-niv__nom { font-size: .86rem; } }
.mm-choix input:checked + label b { color: var(--encre); }
.mm-niv__picto { display: flex; align-items: center; justify-content: center; height: 22px; color: var(--or); }
.mm-choix input:checked + .mm-niv .mm-niv__picto { color: var(--brique); }
.mm-niv__picto .mm-ico-masque { width: 34px; height: 22px; }
.mm-etoiles { display: inline-flex; gap: 1px; } .mm-etoiles svg { width: 18px; height: 18px; }

.mm-outils { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.mm-bascule {
  display: inline-flex; align-items: center; gap: 6px; min-height: 48px; padding: 6px 14px; cursor: pointer;
  font: 800 .95rem/1 var(--police-titre); color: var(--or); background: rgba(10, 14, 34, .35); border: 2px solid var(--bord-fort); border-radius: 999px;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.mm-bascule:hover { background: rgba(243, 212, 138, .12); }
.mm-bascule:focus-visible { outline: 3px solid var(--creme); outline-offset: 2px; }
.mm-bascule svg { width: 24px; height: 24px; flex: none; }
#mm-chrono[aria-pressed="true"] { background: var(--or); color: var(--encre); border-color: var(--or); }
.mm-bascule .mm-off { display: none; }
.mm-bascule[aria-pressed="false"] .mm-off { display: inline; }
.mm-bascule[aria-pressed="false"] .mm-on { display: none; }
.mm-bascule--voix[aria-pressed="false"], .mm-bascule--sons[aria-pressed="false"] { color: var(--texte-doux); border-color: var(--bord); }

.mm-regions { min-width: 0; }
.mm-regions[open] { flex-basis: 100%; }
.mm-regions summary {
  display: inline-flex; align-items: center; gap: 8px; min-height: 52px; padding: 4px 16px 4px 8px; cursor: pointer; list-style: none;
  font: 800 .98rem/1.1 var(--police-titre); color: var(--creme); background: rgba(10, 14, 34, .35); border: 2px solid rgba(243, 212, 138, .32); border-radius: 999px;
}
.mm-regions summary::-webkit-details-marker { display: none; }
.mm-regions summary::after { content: ""; width: 9px; height: 9px; margin-left: 4px; border-right: 3px solid var(--or); border-bottom: 3px solid var(--or); transform: rotate(45deg) translateY(-3px); transition: transform .2s ease; }
.mm-regions[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
.mm-regions summary:focus-visible { outline: 3px solid var(--creme); outline-offset: 2px; }
.mm-regions__mot { color: var(--texte-doux); font-weight: 700; }
.mm-regions__actuelle .mm-mini { width: 24px; height: 44px; }
.mm-choix--regions { display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: 8px; margin-top: 10px; }
.mm-reg { flex-direction: column; gap: 4px !important; min-height: 104px !important; padding: 6px 4px !important; font-size: .86rem !important; }
.mm-reg span { overflow-wrap: anywhere; }
.mm-mini { width: 34px; height: 62px; flex: none; }
.mm-mini polygon { fill: rgba(243, 212, 138, .2); stroke: #1c254b; stroke-width: 7; stroke-linejoin: round; }
.mm-mini polygon.on { fill: var(--or); }
.mm-choix input:checked + .mm-reg .mm-mini polygon { stroke: var(--or); fill: rgba(42, 28, 12, .25); }
.mm-choix input:checked + .mm-reg .mm-mini polygon.on { fill: var(--brique); }
/* Téléphone : options en gros boutons ronds à icône (le mot reste pour les lecteurs d'écran et dans la bulle « title ») */
@media (max-width: 559px) {
  .mm-outils { gap: 7px; }
  .mm-bascule { width: 46px; height: 46px; min-height: 46px; padding: 0; justify-content: center; border-radius: 50%; }
  .mm-bascule span, .mm-regions__mot { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .mm-regions summary { gap: 5px; min-height: 46px; padding: 2px 10px 2px 6px; }
}
/* Grand écran : les réglages en colonne à gauche, la partie à droite (visible sans faire défiler) */
@media (min-width: 1000px) {
  .mm-jeu { display: grid; grid-template-columns: 280px minmax(0, 1fr); column-gap: 24px; align-items: start; }
  .mm-choix--niveaux { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mm-outils .mm-bascule { flex: 1 1 calc(50% - 4px); justify-content: center; padding: 6px 10px; }
  .mm-mode { gap: 6px !important; padding: 6px 8px !important; white-space: nowrap; font-size: .95rem !important; }
  .mm-regions { flex-basis: 100%; }
  .mm-regions summary { width: 100%; }
  .mm-choix--regions { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mm-barre { margin-top: 0; }
}
.mm-note { margin: 6px 0 0; font-size: .95rem; color: var(--texte-doux); text-align: center; }
.mm-note:empty { display: none; }

/* Barre : les paires trouvées (petits portraits), les mains, le chrono */
.mm-barre { display: grid; gap: 8px; max-width: 760px; margin: 12px auto 4px; }
.mm-progres { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; }
.mm-progres span { position: relative; width: 30px; height: 42px; border-radius: 6px; overflow: hidden; background: rgba(10, 14, 34, .45) url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2064%2040'%3E%3Cpath%20d%3D'M4%2017C4%207.5%2017%202%2032%202s28%205.5%2028%2015c0%209-6%2016-14%2016-6%200-9-5-14-5s-8%205-14%205C10%2033%204%2026%204%2017z'%20fill%3D'%23d4a537'%20stroke%3D'%238c3b2e'%20stroke-width%3D'3'%2F%3E%3Cpath%20d%3D'M14%209.5C22%206%2042%206%2050%209.5'%20fill%3D'none'%20stroke%3D'%238c3b2e'%20stroke-width%3D'2.4'%20stroke-linecap%3D'round'%2F%3E%3Cpath%20d%3D'M11%2018.5c3.5-4.5%2010-4.5%2013%200-3.5%202.4-9.5%202.4-13%200zM40%2018.5c3-4.5%209.5-4.5%2013%200-3.5%202.4-9.5%202.4-13%200z'%20fill%3D'%23fff3c4'%2F%3E%3Cpath%20d%3D'M32%208v8'%20stroke%3D'%238c3b2e'%20stroke-width%3D'2.4'%20stroke-linecap%3D'round'%2F%3E%3Ccircle%20cx%3D'32'%20cy%3D'21'%20r%3D'2.4'%20fill%3D'%238c3b2e'%2F%3E%3C%2Fsvg%3E") no-repeat center / 70% auto; border: 2px dashed rgba(243, 212, 138, .35); opacity: .75; }
.mm-progres span.ok { border: 2px solid var(--or); opacity: 1; animation: mm-pop .5s ease; }
.mm-progres span.main-0 { border-color: var(--bleu); } .mm-progres span.main-1 { border-color: var(--orange); }
.mm-progres img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
.mm-mains { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.mm-main { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 0; min-height: 52px; padding: 4px 10px; border-radius: 16px; border: 3px solid transparent; background: rgba(10, 14, 34, .4); font: 800 .95rem/1.1 var(--police-titre); color: var(--creme); transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease; opacity: .7; }
.mm-main svg { width: 28px; height: 28px; flex: none; }
.mm-main--0 svg { color: var(--bleu); } .mm-main--1 svg { color: var(--orange); transform: scaleX(-1); }
.mm-main b { font-size: 1.4rem; min-width: 1.2em; }
.mm-main.a-son-tour { opacity: 1; transform: scale(1.04); }
.mm-main--0.a-son-tour { border-color: var(--bleu); box-shadow: 0 0 18px -2px var(--bleu); }
.mm-main--1.a-son-tour { border-color: var(--orange); box-shadow: 0 0 18px -2px var(--orange); }
.mm-chiffres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 8px 6px; background: rgba(10, 14, 34, .4); border: 1px solid var(--bord); border-radius: 14px; }
.mm-chiffres p { display: flex; flex-direction: column; align-items: center; margin: 0; line-height: 1.2; min-width: 0; }
.mm-chiffres span { font: 700 .7rem/1.3 var(--police-texte); letter-spacing: .08em; text-transform: uppercase; color: var(--texte-doux); }
.mm-chiffres b { max-width: 100%; font: 800 1.15rem/1.25 var(--police-titre); color: var(--creme); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Le message (lu à voix haute), le haut-parleur et la loupe */
.mm-dialogue { display: flex; align-items: center; gap: 8px; max-width: 760px; margin: 8px auto 10px; }
.mm-message { flex: 1 1 auto; min-width: 0; min-height: 3.1em; margin: 0; display: flex; align-items: center; justify-content: center; text-align: center; font: 800 1.08rem/1.35 var(--police-texte); color: var(--creme); }
.mm-jeu[data-deux][data-tour="0"] .mm-message { color: #cfe0ff; } .mm-jeu[data-deux][data-tour="1"] .mm-message { color: #ffe1c2; }
.mm-indice {
  flex: none; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 64px; min-height: 60px; padding: 4px 8px; cursor: pointer;
  font: 800 .8rem/1 var(--police-titre); color: var(--or); background: rgba(10, 14, 34, .4); border: 2px solid var(--bord-fort); border-radius: 18px; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.mm-indice svg { width: 28px; height: 28px; }
.mm-indice:hover { background: rgba(243, 212, 138, .14); }
.mm-indice:focus-visible { outline: 3px solid var(--creme); outline-offset: 2px; }
.mm-indice.appelle { animation: mm-appel 1s ease-in-out 3; border-color: var(--or); }

/* La grille : toute la largeur sur téléphone, à la hauteur de l'écran sur ordinateur */
.mm-grille { --cols: 4; --rangs: 4; --gap: 8px; list-style: none; margin: 0 auto; padding: 0; width: 100%; display: grid; gap: var(--gap); grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); }
.mm-grille[data-niveau="premier"] { --cols: 4; --rangs: 2; max-width: 620px; }
.mm-grille[data-niveau="facile"] { --cols: 3; --rangs: 4; }
.mm-grille[data-niveau="difficile"] { --cols: 4; --rangs: 6; }
@media (min-width: 700px) {
  .mm-grille { --gap: 12px; width: min(100%, max(460px, calc((100vh - 300px) / var(--rangs) * .714 * var(--cols) + (var(--cols) - 1) * var(--gap)))); }
  .mm-grille[data-niveau="facile"] { --cols: 4; --rangs: 3; }
  .mm-grille[data-niveau="difficile"] { --cols: 6; --rangs: 4; }
}
@supports (height: 100svh) {
  @media (min-width: 700px) { .mm-grille { width: min(100%, max(460px, calc((100svh - 300px) / var(--rangs) * .714 * var(--cols) + (var(--cols) - 1) * var(--gap)))); } }
}
/* Le format de la carte est porté par la case (certains Safari ignorent aspect-ratio sur un bouton) */
.mm-case { min-width: 0; aspect-ratio: 360 / 504; }
.mm-case.ratee { animation: secousse .55s ease .5s; }

/* Une carte : un vrai bouton qui se retourne */
.mm-carte {
  position: relative; display: block; width: 100%; height: 100%; aspect-ratio: 360 / 504; padding: 0; margin: 0;
  -webkit-appearance: none; appearance: none;
  background: transparent; border: 0; border-radius: 6% / 4.3%; color: inherit; font: inherit; cursor: pointer;
  perspective: 900px; touch-action: manipulation; -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none;
}
.mm-carte:focus-visible { outline: 3px solid var(--creme); outline-offset: 3px; }
.mm-interieur { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .5s cubic-bezier(.2, .8, .2, 1); }
.mm-carte.est-ouverte .mm-interieur, .mm-carte.est-trouvee .mm-interieur { transform: rotateY(180deg); }
.mm-dos, .mm-face { position: absolute; inset: 0; border-radius: 6% / 4.3%; overflow: hidden; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
/* Ceinture et bretelles (certains Safari laissent voir l'envers) : la face cachée devient invisible au milieu du retournement */
.mm-face { visibility: hidden; }
.mm-carte.est-ouverte .mm-face, .mm-carte.est-trouvee .mm-face { visibility: visible; }
.mm-carte.est-ouverte .mm-dos, .mm-carte.est-trouvee .mm-dos { visibility: hidden; }
.mm-dos {
  background-color: #8c3b2e;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2064%2040'%3E%3Cpath%20d%3D'M4%2017C4%207.5%2017%202%2032%202s28%205.5%2028%2015c0%209-6%2016-14%2016-6%200-9-5-14-5s-8%205-14%205C10%2033%204%2026%204%2017z'%20fill%3D'%23d4a537'%20stroke%3D'%238c3b2e'%20stroke-width%3D'3'%2F%3E%3Cpath%20d%3D'M14%209.5C22%206%2042%206%2050%209.5'%20fill%3D'none'%20stroke%3D'%238c3b2e'%20stroke-width%3D'2.4'%20stroke-linecap%3D'round'%2F%3E%3Cpath%20d%3D'M11%2018.5c3.5-4.5%2010-4.5%2013%200-3.5%202.4-9.5%202.4-13%200zM40%2018.5c3-4.5%209.5-4.5%2013%200-3.5%202.4-9.5%202.4-13%200z'%20fill%3D'%23fff3c4'%2F%3E%3Cpath%20d%3D'M32%208v8'%20stroke%3D'%238c3b2e'%20stroke-width%3D'2.4'%20stroke-linecap%3D'round'%2F%3E%3Ccircle%20cx%3D'32'%20cy%3D'21'%20r%3D'2.4'%20fill%3D'%238c3b2e'%2F%3E%3C%2Fsvg%3E"), radial-gradient(circle closest-side, #120d0a 0 78%, #d4a537 80% 88%, transparent 90%), url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'40'%20height%3D'40'%3E%3Cpath%20d%3D'M20%203%2037%2020%2020%2037%203%2020Z'%20fill%3D'none'%20stroke%3D'%23d4a537'%20stroke-opacity%3D'.6'%20stroke-width%3D'2.4'%2F%3E%3Cpath%20d%3D'M0%200h7L0%207ZM40%200h-7l7%207ZM0%2040h7l-7-7ZM40%2040h-7l7-7Z'%20fill%3D'%23d4a537'%20fill-opacity%3D'.45'%2F%3E%3Ccircle%20cx%3D'20'%20cy%3D'20'%20r%3D'3'%20fill%3D'%23d4a537'%20fill-opacity%3D'.7'%2F%3E%3C%2Fsvg%3E");
  background-position: center, center, center; background-repeat: no-repeat, no-repeat, repeat; background-size: 46% auto, 70% 50%, 25% auto;
  box-shadow: inset 0 0 0 3px #d4a537, inset 0 0 0 6px #8c3b2e, inset 0 0 0 7px rgba(212, 165, 55, .7), 0 10px 22px -12px rgba(0, 0, 0, .9);
  transition: filter .15s ease, visibility 0s linear 0s;
}
.mm-carte.est-ouverte .mm-dos, .mm-carte.est-trouvee .mm-dos { transition: filter .15s ease, visibility 0s linear .25s; }
@media (hover: hover) { .mm-carte:not(.est-ouverte):not(.est-trouvee):hover .mm-dos { filter: brightness(1.15); } }
.mm-face {
  --t: #d4a537; transform: rotateY(180deg); background: var(--fond-3); isolation: isolate; container-type: inline-size;
  box-shadow: 0 0 0 1px var(--bord), 0 10px 22px -12px rgba(0, 0, 0, .9); transition: box-shadow .4s ease .6s, visibility 0s linear .25s;
}
.mm-carte.est-ouverte .mm-face, .mm-carte.est-trouvee .mm-face { transition: box-shadow .4s ease .6s, visibility 0s linear 0s; }
.mm-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; -webkit-user-drag: none; }
/* Les deux faces portent la couleur (cadre) et le symbole du type (pastille) : on peut relier sans tout mémoriser */
.mm-cadre { position: absolute; inset: 0; z-index: 4; border-radius: inherit; box-shadow: inset 0 0 0 4px var(--t); pointer-events: none; }
.mm-type {
  position: absolute; top: 2.5%; left: 3.5%; z-index: 5; width: 30%; aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%;
  background: var(--t); color: #fff; box-shadow: 0 0 0 2px rgba(18, 13, 10, .9), 0 3px 8px rgba(0, 0, 0, .55);
}
.mm-type--clair { color: var(--encre); }
.mm-type svg { width: 68%; height: 68%; }

/* La paire trouvée : la face masquée glisse vers le bas en tournant, la Forme Éveillée s'éclaire, et la lumière jaillit */
.mm-img--m { z-index: 2; transform-origin: 50% 0; transition: transform .8s cubic-bezier(.55, -0.3, .7, 1) .55s, opacity .45s ease .87s; }
.mm-carte[data-forme="m"] .mm-img--e { z-index: 1; transform: scale(1.07); filter: brightness(.45) saturate(.6); transition: transform 1s cubic-bezier(.2, .8, .2, 1) .75s, filter .7s ease .75s; }
.mm-carte.est-trouvee .mm-img--m { transform: translateY(32%) rotate(-7deg) scale(.92); opacity: 0; }
.mm-carte.est-trouvee .mm-img--e { transform: none; filter: none; }
.mm-face::before { content: ""; position: absolute; inset: -40%; z-index: 3; pointer-events: none; opacity: 0;
  background: repeating-conic-gradient(from 0deg, rgba(255, 236, 170, .75) 0deg 7deg, transparent 7deg 22deg);
  -webkit-mask: radial-gradient(circle, #000 0 22%, transparent 58%); mask: radial-gradient(circle, #000 0 22%, transparent 58%); }
.mm-face::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; background: radial-gradient(circle at 50% 30%, rgba(255, 236, 170, .7), transparent 62%); opacity: 0; }
.mm-carte.est-trouvee .mm-face::before { animation: mm-rayons 1.4s ease-out .7s; }
.mm-carte.est-trouvee .mm-face::after { animation: eclat .9s ease-out .8s; }
.mm-carte.est-trouvee .mm-face { box-shadow: 0 0 0 2px var(--or), 0 0 22px -2px rgba(243, 212, 138, .55); }
.mm-carte.main-0.est-trouvee .mm-face { box-shadow: 0 0 0 4px var(--bleu), 0 0 18px -2px var(--bleu); }
.mm-carte.main-1.est-trouvee .mm-face { box-shadow: 0 0 0 4px var(--orange), 0 0 18px -2px var(--orange); }
/* Carte ouverte : son numéro (il couvre la petite ligne « 061/144 · Nom » imprimée sur la face masquée) ; paire trouvée : le nom */
.mm-num, .mm-nom {
  position: absolute; left: 3%; right: 3%; bottom: 4%; z-index: 6; padding: .32em .3em; border-radius: 999px;
  background: rgba(18, 13, 10, .92); border: 1px solid var(--bord-fort);
  font: 800 clamp(.6rem, 2.7vw, .86rem)/1.1 var(--police-texte); font-size: clamp(.5rem, 10cqi, .92rem);
  text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mm-num { color: var(--creme); letter-spacing: .02em; font-variant-numeric: tabular-nums; transition: opacity .3s ease .5s; }
.mm-carte.est-trouvee .mm-num { opacity: 0; }
.mm-nom { color: var(--or); letter-spacing: -.01em; opacity: 0; transform: translateY(6px); transition: opacity .35s ease 1.1s, transform .35s ease 1.1s; }
.mm-carte.est-trouvee .mm-nom { opacity: 1; transform: none; }
/* Indice : deux cartes qui vont ensemble brillent ; chatouiller un Dahoman trouvé le fait gigoter */
.mm-carte.brille { animation: mm-brille .55s ease-in-out 4 alternate; }
.mm-carte.chatouille { animation: mm-gigote .6s ease; }
.mm-carte.chatouille .mm-face::after { animation: eclat .6s ease-out; }
.mm-grille .mm-carte.est-trouvee { cursor: pointer; }

/* Paire d'exemple (avant la toute première partie) */
.mm-exemple, .mm-salut { margin: 6px auto 14px; padding: clamp(14px, 3vw, 24px); max-width: 640px; text-align: center; background: rgba(10, 14, 34, .35); border: 1px solid var(--bord-fort); border-radius: var(--rayon); }
.mm-exemple h2, .mm-salut h2 { font-size: clamp(1.35rem, 4.4vw, 1.9rem); }
.mm-exemple__paire { display: flex; align-items: center; justify-content: center; gap: clamp(8px, 3vw, 22px); margin: 16px 0 12px; }
.mm-exemple__paire .mm-carte { width: min(36vw, 176px); height: auto; flex: none; cursor: default; }
.mm-egal { font: 800 clamp(2rem, 8vw, 3rem)/1 var(--police-titre); color: var(--or); animation: mm-pouls 1.6s ease-in-out infinite; }
.mm-exemple__texte { font-weight: 700; color: var(--creme); max-width: 46ch; margin: 0 auto 14px; }
.mm-gros { min-height: 62px; padding: .7em 2em; font-size: 1.3rem; }
.mm-gros svg { width: 30px; height: 30px; }

/* Salut de la Parole (à deux) */
.mm-salut p { color: var(--creme); font-weight: 700; max-width: 44ch; margin: 0 auto 14px; }
.mm-salut__mains { display: flex; justify-content: center; gap: clamp(24px, 10vw, 70px); margin: 12px 0 10px; }
.mm-grande-main svg { width: clamp(56px, 16vw, 84px); height: clamp(56px, 16vw, 84px); }
.mm-grande-main--0 { color: var(--bleu); } .mm-grande-main--1 { color: var(--orange); transform: scaleX(-1); }
.mm-salut.salue .mm-grande-main--0 { animation: mm-salue-g 1.1s ease; } .mm-salut.salue .mm-grande-main--1 { animation: mm-salue-d 1.1s ease; }

/* Fin de partie */
.mm-fin { margin: 4px 0 16px; padding: clamp(16px, 4vw, 30px); text-align: center; background: rgba(10, 14, 34, .45); border: 1px solid var(--bord-fort); border-radius: var(--rayon); box-shadow: var(--ombre); }
.mm-fin h2 { font-size: clamp(1.5rem, 5vw, 2.3rem); }
.mm-fin h2:focus { outline: none; }
.mm-fin h2:focus-visible { outline: 3px solid var(--creme); outline-offset: 4px; }
.mm-fin__bilan { font-size: 1.1rem; font-weight: 700; color: var(--creme); margin: .5em 0 .3em; }
.mm-fin__bilan svg { width: 20px; height: 20px; vertical-align: -4px; margin-left: 6px; color: var(--or); }
.mm-fin__record { font-weight: 800; color: var(--or); margin-bottom: .3em; }
.mm-fin__carnet { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 8px; max-width: 520px; margin: 10px auto 4px; padding: 8px 12px; border-radius: 14px; background: rgba(243, 212, 138, .12); border: 1px solid var(--bord-fort); font-weight: 800; color: var(--creme); }
.mm-fin__carnet svg { width: 24px; height: 24px; flex: none; color: var(--or); }
.mm-fin__carnet a { color: var(--or); font-weight: 700; }
#mm-partager svg { width: 22px; height: 22px; flex: none; }
.mm-fin__adulte { margin: 8px 0 0; font-size: .9rem; color: var(--texte-doux); }
.mm-fin__record:empty, .mm-fin__bilan:empty, .mm-fin__etat:empty, .mm-duo__consigne:empty, .mm-duo__scores:empty { display: none; }
.mm-duo { margin: 8px 0 4px; }
.mm-duo__scores { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; font: 800 1.05rem/1.3 var(--police-titre); color: var(--creme); }
.mm-duo__scores span { display: inline-flex; align-items: center; gap: 6px; }
.mm-duo__scores svg { width: 26px; height: 26px; }
.mm-duo__scores .s0 svg { color: var(--bleu); } .mm-duo__scores .s1 svg { color: var(--orange); transform: scaleX(-1); }
.mm-duo__consigne { font: 800 1.1rem/1.35 var(--police-texte); color: var(--or); margin: 10px 0; }
.mm-duo__scene { display: flex; justify-content: center; align-items: flex-end; gap: clamp(14px, 6vw, 40px); margin: 6px 0 14px; }
.mm-fav { position: relative; width: min(34vw, 150px); aspect-ratio: 360 / 504; border-radius: 6% / 4.3%; overflow: hidden; box-shadow: 0 0 0 4px var(--bleu), var(--ombre); }
.mm-fav--1 { box-shadow: 0 0 0 4px var(--orange), var(--ombre); }
.mm-fav img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mm-duo__scene.salue .mm-fav--0 { animation: mm-salue-g 1.2s ease; } .mm-duo__scene.salue .mm-fav--1 { animation: mm-salue-d 1.2s ease; }
.mm-duo__scene.salue .mm-fav::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 35%, rgba(255, 236, 170, .7), transparent 62%); animation: eclat 1.2s ease-out .4s both; }
.mm-session { display: flex; align-items: center; justify-content: center; gap: 12px; max-width: 520px; margin: 14px auto 6px; padding: 10px 14px; background: rgba(243, 212, 138, .1); border: 1px solid var(--bord-fort); border-radius: 18px; text-align: left; }
.mm-session p { margin: 0; font: 800 1.05rem/1.35 var(--police-texte); color: var(--creme); }
.mm-session__dahoman { flex: none; width: 64px; height: 64px; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 3px var(--or); }
.mm-session__dahoman img { width: 100%; height: 160%; object-fit: cover; object-position: 50% 18%; display: block; }
.mm-fin__actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px; margin: 16px 0 6px; }
.mm-fin__etat { font-size: .92rem; color: var(--texte-doux); overflow-wrap: anywhere; margin: 6px 0 0; }
.mm-fin h3 { font-size: 1.15rem; margin: 22px 0 12px; }
.mm-rencontres { list-style: none; margin: 0 auto; padding: 0; max-width: 920px; display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 140px), 1fr)); text-align: left; }
.mm-rencontres button {
  display: flex; align-items: center; gap: 7px; width: 100%; min-width: 0; min-height: 60px; padding: 5px; cursor: pointer; text-align: left;
  font: inherit; color: inherit; background: rgba(10, 14, 34, .4); border: 2px solid var(--bord); border-radius: 12px; -webkit-tap-highlight-color: transparent;
}
.mm-rencontres button:hover { border-color: var(--bord-fort); }
.mm-rencontres button:focus-visible { outline: 3px solid var(--creme); outline-offset: 2px; }
.mm-rencontres .choisi-0 { border-color: var(--bleu); box-shadow: 0 0 0 2px var(--bleu); }
.mm-rencontres .choisi-1 { border-color: var(--orange); box-shadow: 0 0 0 2px var(--orange); }
.mm-rencontres .choisi-0.choisi-1 { border-color: var(--bleu); box-shadow: 0 0 0 2px var(--bleu), 0 0 0 5px var(--orange); }
.mm-rencontres img { flex: none; width: 36px; height: auto; border-radius: 4px; }
.mm-rencontres b { display: block; font: 800 .84rem/1.15 var(--police-titre); color: var(--creme); overflow-wrap: break-word; }
.mm-rencontres small { display: flex; align-items: center; gap: 4px; font-size: .76rem; line-height: 1.3; color: var(--texte-doux); }
.mm-rencontres small svg { width: 14px; height: 14px; flex: none; color: var(--t, var(--or)); }
.mm-fin__liens, .mm-liens { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 20px 0 0; }
.mm-repli { padding: 14px 16px; background: var(--fond-2); border: 1px solid var(--bord); border-radius: 14px; }

/* Comment jouer, et le lien discret vers le Coin des parents */
.mm-regles { margin-top: clamp(36px, 6vw, 56px); max-width: 72ch; }
.mm-regles .mm-tete { justify-content: flex-start; margin-bottom: .6em; }
.mm-regles h2 { font-size: clamp(1.4rem, 3.6vw, 1.8rem); }
.mm-regles ol { padding-left: 1.3em; margin: 0; }
.mm-regles li { margin-bottom: .45em; }
.mm-regles .mm-liens { justify-content: flex-start; }
.mm-parents { margin: 22px 0 0; font-size: .9rem; }
.mm-parents a { color: var(--texte-doux); text-decoration: underline; text-underline-offset: 3px; }
.mm-parents a:hover { color: var(--or); }

@keyframes mm-rayons { 0% { opacity: 0; transform: rotate(0deg) scale(.6); } 30% { opacity: 1; } 100% { opacity: 0; transform: rotate(45deg) scale(1.15); } }
@keyframes mm-brille { from { filter: none; box-shadow: 0 0 0 0 rgba(243, 212, 138, 0); } to { filter: brightness(1.3); box-shadow: 0 0 0 4px var(--or), 0 0 26px 6px rgba(243, 212, 138, .75); } }
@keyframes mm-gigote { 0%, 100% { transform: none; } 20% { transform: rotate(-5deg) scale(1.04); } 45% { transform: rotate(4deg) scale(1.06); } 70% { transform: rotate(-3deg) scale(1.03); } }
@keyframes mm-appel { 0%, 100% { box-shadow: 0 0 0 0 rgba(243, 212, 138, 0); transform: none; } 50% { box-shadow: 0 0 0 6px rgba(243, 212, 138, .35), 0 0 22px rgba(243, 212, 138, .6); transform: scale(1.06); } }
@keyframes mm-pop { 0% { transform: scale(.6); } 60% { transform: scale(1.15); } 100% { transform: none; } }
@keyframes mm-pouls { 0%, 100% { transform: none; opacity: .8; } 50% { transform: scale(1.15); opacity: 1; } }
@keyframes mm-salue-g { 0%, 100% { transform: none; } 40%, 60% { transform: translateX(10px) rotate(12deg) translateY(6px); } }
@keyframes mm-salue-d { 0%, 100% { transform: scaleX(-1); } 40%, 60% { transform: scaleX(-1) translateX(10px) rotate(12deg) translateY(6px); } }
.mm-duo__scene.salue .mm-fav--1 { animation-name: mm-salue-d2; }
@keyframes mm-salue-d2 { 0%, 100% { transform: none; } 40%, 60% { transform: translateX(-10px) rotate(-12deg) translateY(6px); } }

@media (prefers-reduced-motion: reduce) {
  .mm-interieur, .mm-dos, .mm-face { transition: none !important; }
  .mm-carte .mm-img--m, .mm-carte .mm-img--e, .mm-nom { transform: none !important; }
  .mm-case.ratee, .mm-carte.est-trouvee .mm-face::after, .mm-carte.est-trouvee .mm-face::before, .mm-carte.brille, .mm-carte.chatouille,
  .mm-indice.appelle, .mm-progres span.ok, .mm-egal, .mm-salut.salue .mm-grande-main--0, .mm-salut.salue .mm-grande-main--1,
  .mm-duo__scene.salue .mm-fav, .mm-duo__scene.salue .mm-fav::after { animation: none !important; }
  .mm-carte.brille { box-shadow: 0 0 0 4px var(--or), 0 0 26px 6px rgba(243, 212, 138, .75); }
}