/* Jeu de mémoire : styles propres à l'outil. */
.o-memoire { --cols: 4; --o-memoire-trouvee: #16a34a; min-width: 0; }
.o-memoire [hidden] { display: none !important; }
.o-memoire-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.o-memoire-reglages { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); padding-bottom: 6px; }
.o-memoire-reglages label.case { min-height: 36px; }
.o-memoire-aide { grid-column: 1 / -1; margin: 0; font-size: .85rem; color: var(--texte-2); }
.o-memoire .btn:focus-visible, .o-memoire select:focus-visible, .o-memoire input:focus-visible { outline: 3px solid var(--marque); outline-offset: 2px; }

.o-memoire-scene { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 14px 0 18px; border-top: 1px solid var(--bord); margin-top: 12px; }
.o-memoire-etat { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0; }
.o-memoire-etat div { display: flex; align-items: baseline; gap: 6px; padding: 4px 12px; border-radius: 999px; background: var(--surface-2); border: 2px solid transparent; }
.o-memoire-etat dt { font-size: .88rem; color: var(--texte-2); }
.o-memoire-etat dd { margin: 0; font: 700 1.05rem var(--mono); color: var(--texte); font-variant-numeric: tabular-nums; }
.o-memoire-etat .o-memoire-joueur.actif { border-color: var(--marque); }
.o-memoire-etat .o-memoire-joueur.actif dt { color: var(--texte); font-weight: 700; }
.o-memoire-message { min-height: 1.5em; font-weight: 700; font-size: 1.02rem; text-align: center; color: var(--texte); }
.o-memoire.fini .o-memoire-message { color: var(--marque); }

.o-memoire-grille { display: grid; grid-template-columns: repeat(var(--cols), 1fr); gap: 8px; width: min(100%, calc(var(--cols) * 112px)); }
.o-memoire[data-colonnes="8"] .o-memoire-grille { gap: 6px; }
@media (max-width: 480px) { .o-memoire-grille { gap: 5px; } }

.o-memoire-carte { position: relative; display: block; min-width: 0; aspect-ratio: 1; padding: 0; border: 0; background: none; color: var(--texte); cursor: pointer; perspective: 600px; container-type: inline-size; font: inherit; border-radius: var(--rayon-petit); }
.o-memoire-carte[aria-disabled="true"] { cursor: default; }
.o-memoire-carte:focus-visible { outline: 3px solid var(--marque); outline-offset: 2px; z-index: 1; }
.o-memoire-int { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .35s ease; }
.o-memoire-carte.visible .o-memoire-int { transform: rotateY(180deg); }
.o-memoire-dos, .o-memoire-face { position: absolute; inset: 0; display: grid; place-items: center; border-radius: var(--rayon-petit); backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden; }
.o-memoire-dos { background: repeating-linear-gradient(45deg, var(--marque) 0 8px, var(--marque-fort) 8px 16px); border: 2px solid var(--marque-fort); }
.o-memoire-carte:hover:not([aria-disabled="true"]) .o-memoire-dos { filter: brightness(1.1); }
.o-memoire-face { transform: rotateY(180deg); background: var(--surface); border: 2px solid var(--bord); }
.o-memoire-carte.trouvee .o-memoire-face { border-color: var(--o-memoire-trouvee); background: var(--surface-2); }

.o-memoire-svg { width: 78%; height: 78%; }
.o-memoire-forme { stroke: var(--texte); stroke-width: 4; stroke-linejoin: round; }
.o-memoire-emoji { font-size: 56cqi; line-height: 1; }
.o-memoire-signe { font: 800 48cqi/1 var(--police); color: var(--texte); }
.o-memoire-mot { --l: 6; padding: 0 4%; font-weight: 700; font-size: min(18cqi, calc(165cqi / var(--l))); line-height: 1.15; text-align: center; overflow-wrap: anywhere; hyphens: auto; color: var(--texte); }

@media (prefers-reduced-motion: reduce) {
  .o-memoire-int { transition: none; }
}

.o-memoire-records { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 16px; padding-top: 14px; border-top: 1px solid var(--bord); }
.o-memoire-records table { border-collapse: collapse; font-size: .92rem; flex: 1 1 280px; }
.o-memoire-records caption { text-align: left; font-weight: 600; color: var(--texte-2); padding-bottom: 6px; }
.o-memoire-records th, .o-memoire-records td { padding: 4px 10px; border-bottom: 1px solid var(--bord); text-align: left; }
.o-memoire-records td { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.o-memoire-records thead th { color: var(--texte-2); font-weight: 600; }
.o-memoire-records tr.actuelle { background: var(--surface-2); }
.o-memoire-records tr.actuelle th { color: var(--marque); }