/* =========================================================
   Mémoire — V2 « Formes pures »
   Cercles, carrés, triangles ; aplats jaune / rouge / bleu / noir.
   Aucune ombre, aucun dégradé, aucun arrondi décoratif.
   La logique (memory.js) n'est pas modifiée : skin.js ne fait que
   placer les cartes en anneaux et dessiner les formes.
   ========================================================= */

.mem-page {
  --ground: #111111;         /* fond */
  --ink: #f7f5ee;            /* traits, texte, moyeu */
  --on-ink: #111111;
  --back: #ffd400;           /* dos des cartes */
  --back-mark: #111111;
  --paper: #ffffff;          /* face des cartes */
  --r: #e3170a;
  --b: #0b3bd9;
  --k: #111111;
  --flood: #0b3bd9;          /* écran de victoire */

  --font-geo: Futura, "Century Gothic", "Avenir Next", "Trebuchet MS", sans-serif;
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --glide: cubic-bezier(0.16, 1, 0.3, 1);

  /* les composants hérités de style.css suivent la nouvelle palette */
  --bg: var(--ground);
  --bg-elevated: var(--ground);
  --text: var(--ink);
  --text-muted: color-mix(in srgb, var(--ink) 72%, var(--ground));
  --border: var(--ink);
  --border-soft: var(--ink);
  --cell-alt: transparent;
  --accent: var(--back);
  --accent-contrast: #111111;

  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-geo);
  overflow-x: clip;
}
:root[data-theme="light"] .mem-page {
  --ground: #ffd400;
  --ink: #111111;
  --on-ink: #ffd400;
  --back: #111111;
  --back-mark: #ffd400;
  --flood: #e3170a;
  --accent: #111111;
  --accent-contrast: #ffd400;
}
.mem-page::before,
:root[data-theme="light"] .mem-page::before { background-image: none; }

.mem-page :focus-visible { outline: 4px solid var(--b); outline-offset: 3px; }

/* ---------- Habillage : en-tête, pied ---------- */
.mem-page .site-header {
  position: static;
  background: var(--ground);
  border-bottom: 4px solid var(--ink);
  padding: 10px clamp(16px, 4vw, 48px);
}
.mem-page .site-header .brand {
  font-family: var(--font-geo);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.02em;
  color: var(--ink);
}
.mem-page .lang-switch select,
.mem-page .icon-btn {
  border: 3px solid var(--ink);
  border-radius: 0;
  box-shadow: none;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-geo);
}
.mem-page .icon-btn { border-radius: 50%; }
.mem-page .theme-toggle,
.mem-page .theme-toggle:hover { background: #111111; }
.mem-page .site-footer {
  background: var(--ground);
  border-top: 4px solid var(--ink);
  color: var(--ink);
}

/* ---------- Scène : colonne étroite à gauche, arène à droite ---------- */
.mem-page main {
  max-width: 1320px;
  padding: clamp(16px, 3vw, 40px) clamp(16px, 4vw, 48px) 64px;
  display: grid;
  grid-template-columns: minmax(200px, 3fr) minmax(0, 9fr);
  grid-template-areas:
    "back  arena"
    "title arena"
    "side  arena"
    "tools arena"
    "ad    ad";
  grid-template-rows: auto auto 1fr auto auto;
  column-gap: clamp(16px, 4vw, 64px);
  align-items: start;
}
.mem-page .back-link { grid-area: back; color: var(--ink); font-weight: 700; }
.mem-page .back-link:hover { color: var(--ink); text-decoration: underline 3px; }
.mem-page .game-header { grid-area: title; display: block; margin: clamp(12px, 3vw, 40px) 0 0; }
.mem-page .anecdote-wrap { grid-column: 1 / -1; justify-self: end; width: min(100%, 760px); margin-left: 0; }
@media (max-width: 700px) { .mem-page .anecdote-wrap { width: calc(100% - 22px); } }
.mem-page .ingame-ad {
  grid-area: ad;
  margin: 48px 0 0;
  border: 3px dashed var(--ink);
  border-radius: 0;
  font-family: var(--font-geo);
  color: var(--ink);
}

.mem-page .game-title {
  display: block;
  font-family: var(--font-geo);
  font-weight: 700;
  font-size: clamp(2.4rem, 4.4vw, 4.2rem);
  line-height: 0.9;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}
.mem-page .help-btn {
  width: 44px;
  height: 44px;
  margin-top: 18px;
  border: 4px solid var(--ink);
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-geo);
  font-size: 1.2rem;
  display: flex;
  transition: rotate 0.5s var(--spring), background 0.15s, color 0.15s;
}
.mem-page .help-btn:hover { background: var(--ink); color: var(--on-ink); rotate: 360deg; }
.mem-page .game-sub {
  margin-top: 18px;
  max-width: 30ch;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink);
}

/* paires + record : deux chiffres, une forme chacun */
.mem-side {
  grid-area: side;
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin: clamp(20px, 4vw, 56px) 0 0;
}
.mem-side .stat {
  display: grid;
  grid-template-columns: 22px 1fr;
  align-items: center;
  column-gap: 14px;
  min-width: 0;
  padding: 0;
  border-left: 0;
  background: none;
  box-shadow: none;
  border-radius: 0;
  text-align: left;
}
.mem-side .stat::before { content: ""; width: 22px; height: 22px; background: var(--r); border-radius: 50%; }
.mem-side .stat + .stat::before { background: var(--b); border-radius: 0; }
:root:not([data-theme="light"]) .mem-side .stat + .stat::before { background: var(--back); }
.mem-side .stat .label {
  grid-column: 2;
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  text-transform: none;
  font-weight: 400;
  color: var(--ink);
}
.mem-side .stat .value {
  grid-column: 2;
  font-family: var(--font-geo);
  font-weight: 700;
  font-size: 1.9rem;
  line-height: 1.1;
  color: var(--ink);
}

.mem-page .toolbar {
  grid-area: tools;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  margin: 32px 0 0;
  max-width: 280px;
}
.mem-page .toolbar .select {
  border: 4px solid var(--ink);
  border-bottom: 0;
  border-radius: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-geo);
  justify-content: space-between;
}
.mem-page .toolbar select {
  border: 0;
  border-radius: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-geo);
  font-weight: 700;
  padding: 4px;
}
.mem-page .btn {
  border: 4px solid var(--ink);
  border-radius: 0;
  box-shadow: none;
  background: var(--ink);
  color: var(--on-ink);
  font-family: var(--font-geo);
  font-weight: 700;
  font-size: 1rem;
  padding: 14px 16px;
  transition: background 0.15s, color 0.15s, letter-spacing 0.4s var(--glide);
}
.mem-page .btn:hover { transform: none; box-shadow: none; background: var(--r); border-color: var(--r); color: #fff; letter-spacing: 0.08em; }
.mem-page .btn:active { scale: 0.97; }

/* ---------- Arène ---------- */
.mem-arena {
  grid-area: arena;
  position: relative;
  justify-self: end;
  width: min(100%, 86vh, 800px);
  aspect-ratio: 1;
}
/* grand cercle tracé au sol, derrière les anneaux de cartes */
.mem-arena::before { content: ""; position: absolute; pointer-events: none; inset: 3%; border: 4px solid var(--ink); border-radius: 50%; opacity: 0.18; }

.mem-page .mem-board {
  display: block;            /* annule la grille posée par memory.js */
  position: absolute;
  inset: 0;
  max-width: none;
  margin: 0;
  perspective: none;
}

/* Moyeu : le nombre de coups, énorme, au centre des anneaux */
.mem-hub {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  width: var(--hub, 30%);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--ink);
  color: var(--on-ink);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  font-family: var(--font-geo);
  font-weight: 700;
  line-height: 1;
  container-type: inline-size;
  transition: width 0.6s var(--glide);
}
.mem-hub-moves { font-size: 44cqw; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.mem-hub-time { margin-top: 4cqw; font-size: 12cqw; font-variant-numeric: tabular-nums; }
.mem-hub.is-tick { animation: mem-hub-tick 0.45s var(--spring); }
@keyframes mem-hub-tick { 40% { scale: 1.09; } }

.mem-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- Cartes ---------- */
.mem-page .mem-card {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--card, 12%);
  aspect-ratio: 1;
  /* avant la distribution : empilées au centre, invisibles */
  translate: -50% -50%;
  rotate: 0deg;
  scale: 0.2;
  opacity: 0;
  perspective: 700px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  transition:
    translate 0.8s var(--glide) calc(var(--i, 0) * 28ms),
    scale 0.5s var(--spring) calc(var(--i, 0) * 28ms),
    opacity 0.25s linear calc(var(--i, 0) * 28ms),
    rotate 0.5s var(--spring);
}
.mem-page .mem-card.is-dealt {
  translate: calc(var(--x) - 50%) calc(var(--y) - 50%);
  rotate: var(--tilt);
  scale: 1;
  opacity: 1;
  animation: mem-float var(--fd, 6s) ease-in-out var(--fdelay, 0s) infinite;
}
@keyframes mem-float {
  50% { transform: translate(var(--fx, 0px), var(--fy, -6px)) rotate(var(--fr, 1deg)); }
}

/* survol : la carte se redresse et s'avance */
.mem-page .mem-card.is-dealt:not(.matched):hover,
.mem-page .mem-card.is-dealt:not(.matched):focus-visible {
  rotate: 0deg;
  scale: 1.12;
  z-index: 3;
  transition-delay: 0s;
}
.mem-page .mem-card.flipped { z-index: 2; scale: 1.08; rotate: 0deg; transition-delay: 0s; }

/* retournement en vraie 3D, avec un léger dépassement élastique */
.mem-page .mem-card-inner {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transition: transform 0.6s var(--spring);
}
.mem-page .mem-card.flipped .mem-card-inner,
.mem-page .mem-card.matched .mem-card-inner { transform: rotateY(180deg); }
.mem-page .mem-face {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
/* dos : aplat + un point. Le « ? » de memory.js est masqué. */
.mem-page .mem-face.back {
  background: var(--back);
  font-size: 0;
  color: transparent;
}
.mem-page .mem-face.back::after {
  content: "";
  width: 22%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--back-mark);
  transition: scale 0.35s var(--spring);
}
.mem-page .mem-card:hover .mem-face.back::after { scale: 1.9; }

.mem-page .mem-face.front {
  background: var(--paper);
  color: var(--c, var(--k));
  transform: rotateY(180deg);
  font-size: 0;              /* masque l'emoji tant que la forme n'est pas dessinée */
}
.mem-face.front svg { width: 64%; height: 64%; display: block; overflow: visible; }

/* --- Paire trouvée : flash en aplat, la forme tourne, une onde part --- */
.mem-page .mem-card.matched {
  rotate: 0deg;
  animation: none;
  cursor: default;
}
.mem-page .mem-card.matched .mem-face.front { animation: mem-flash 0.7s steps(1, end); }
.mem-page .mem-card.matched .mem-face.front svg { animation: mem-spin 0.9s var(--spring); }
.mem-page .mem-card.matched::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 6px solid var(--c, var(--ink));
  border-radius: 50%;
  pointer-events: none;
  animation: mem-wave 0.8s var(--glide) forwards;
}
@keyframes mem-flash {
  0% { background: var(--c); color: #fff; }
  35% { background: var(--paper); color: var(--c); }
  50% { background: var(--c); color: #fff; }
  70% { background: var(--paper); color: var(--c); }
}
@keyframes mem-spin {
  0% { transform: rotate(0deg) scale(1); }
  45% { transform: rotate(200deg) scale(1.35); }
  100% { transform: rotate(360deg) scale(1); }
}
@keyframes mem-wave {
  from { scale: 0.6; opacity: 1; }
  to { scale: 2.6; opacity: 0; border-width: 1px; }
}

/* --- Erreur : secousse volontairement irrégulière --- */
.mem-page .mem-card.mismatch { animation: mem-shake 0.55s linear 0.25s; }
.mem-page .mem-card.mismatch .mem-face.front { outline: 6px solid var(--r); outline-offset: -6px; }
@keyframes mem-shake {
  0% { transform: translate(0, 0) rotate(0deg); }
  12% { transform: translate(-11px, 3px) rotate(-5deg); }
  27% { transform: translate(8px, -4px) rotate(4deg); }
  41% { transform: translate(-5px, -2px) rotate(-2deg); }
  58% { transform: translate(9px, 5px) rotate(3deg); }
  76% { transform: translate(-3px, 1px) rotate(-1deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}

/* ---------- Victoire : l'aplat envahit l'écran ---------- */
.mem-page .overlay { background: var(--flood); padding: 0; justify-content: flex-start; overflow: auto; }
.mem-page .overlay.open { animation: mem-flood 0.9s var(--glide) both; }
@keyframes mem-flood {
  from { clip-path: circle(0% at 50% 50%); }
  to { clip-path: circle(150% at 50% 50%); }
}
.mem-page .modal {
  max-width: none;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 6vw;
  color: #fff;
  text-align: left;
}
.mem-page .modal h2 {
  margin: 0;
  font-family: var(--font-geo);
  font-weight: 700;
  font-size: clamp(3rem, 10vw, 9.5rem);
  line-height: 0.88;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  color: #fff;
  transition: letter-spacing 0.7s var(--glide);
}
.mem-page .modal h2:hover { letter-spacing: 0.06em; }
.mem-page .modal p { margin: 24px 0 32px; max-width: 40ch; font-size: 1.15rem; line-height: 1.6; color: #fff; }
.mem-page .modal-actions { justify-content: flex-start; }
.mem-page .modal .btn { background: #fff; border-color: #fff; color: #111; }
.mem-page .modal .btn + .btn { background: transparent; color: #fff; }
.mem-page .modal .btn:hover { background: #ffd400; border-color: #ffd400; color: #111; }

/* ---------- Écrans étroits ---------- */
@media (max-width: 820px) {
  .mem-page main {
    grid-template-columns: 1fr;
    grid-template-areas: "back" "title" "arena" "side" "tools" "ad";
    grid-template-rows: none;
  }
  .mem-page .game-header { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 14px; margin-top: 12px; }
  .mem-page .help-btn { margin-top: 0; }
  .mem-arena { justify-self: center; width: min(100%, 78vh); margin-top: 20px; }
  .mem-side { flex-direction: row; gap: 32px; margin-top: 28px; }
  .mem-page .toolbar { max-width: none; margin-top: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .mem-page .mem-card,
  .mem-page .mem-card.is-dealt { animation: none; transition-duration: 0.01s; transition-delay: 0s; }
  .mem-page .mem-card-inner { transition-duration: 0.15s; }
  .mem-page .mem-card.mismatch { animation: none; }
  .mem-page .mem-card.matched .mem-face.front,
  .mem-page .mem-card.matched .mem-face.front svg,
  .mem-page .mem-card.matched::after,
  .mem-hub.is-tick,
  .mem-page .overlay.open { animation: none; }
  .mem-page .mem-card.matched::after { display: none; }
}