/* Styles partagés des jeux Calcul mental, Suite de Simon et Paires de cartes
   (complète css/style.css et memoire/memoire.css) */

.plateau--large { max-width: 46rem; }
.boutons-fin { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; margin: .5rem 0 0; }
.boutons-fin .lien-fort { margin-top: 0; }
.ecran .bouton-contour { cursor: pointer; font: inherit; font-family: var(--display); font-weight: 800;}
.retour { min-height: 1.6em; margin: 0; font-weight: 600; }
.retour.ok { color: #7ee2a8; }
.retour.rate { color: #ff8fa6; }
.astuce { margin: 0; font-size: .75rem; color: rgba(233, 235, 243, .45); }
@media (hover: none) { .astuce { display: none; } }

/* ---------- Calcul mental ---------- */
#ecran-jeu .barre span { transform-origin: left center; transition: transform .1s linear; }
.operation {
  margin: .5rem 0 0;
  font-family: var(--display);
  font-size: clamp(2.2rem, 11vw, 4.2rem);
  line-height: 1.1;
  color: var(--gold-light);
  text-shadow: 0 0 24px rgba(255, 230, 128, .4);
  white-space: nowrap; font-weight: 800;}
@media (prefers-reduced-motion: no-preference) {
  .operation.ok { animation: pop-ok .3s ease-out; }
  .operation.rate { animation: secoue-calc .3s ease; }
}
@keyframes pop-ok { 50% { transform: scale(1.08); color: #7ee2a8; } }
@keyframes secoue-calc { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
#form-calcul { display: flex; flex-direction: column; align-items: center; gap: .8rem; width: 100%; }
#form-calcul .champ { width: min(100%, 14rem); }

/* ---------- Suite de Simon ---------- */
.ecran-simon { gap: 1.25rem; }
.etat { margin: 0; min-height: 1.6em; font-weight: 600; color: var(--cream); }
.simon {
  position: relative;
  width: min(100%, 22rem);
  aspect-ratio: 1;
  display: grid; grid-template-columns: 1fr 1fr; gap: .7rem;
  padding: .7rem;
  border-radius: 50%;
  background: #030209;
  border: 2px solid var(--gold);
  box-shadow: 0 0 40px rgba(255, 210, 63, .25), inset 0 0 30px rgba(0, 0, 0, .6);
  touch-action: manipulation;
}
.pad {
  border: 0; padding: 0;
  opacity: .38;
  transition: opacity .08s ease, filter .08s ease, box-shadow .08s ease;
  -webkit-tap-highlight-color: transparent;
}
.pad--or        { border-radius: 100% 0 0 0; background: radial-gradient(circle at 100% 100%, #ffe680, #ffd23f 60%, #b38a00); color: #ffe680; }
.pad--violet    { border-radius: 0 100% 0 0; background: radial-gradient(circle at 0 100%, #d8b4fe, #ff4fa3 60%, #7b5cff); color: #c084fc; }
.pad--rose      { border-radius: 0 0 0 100%; background: radial-gradient(circle at 100% 0, #ffc2cf, #ff6b8a 60%, #9d1d3c); color: #ff8fa6; }
.pad--turquoise { border-radius: 0 0 100% 0; background: radial-gradient(circle at 0 0, #a7f3e9, #2dd4bf 60%, #0f766e); color: #5eead4; }
.simon.a-vous .pad { cursor: pointer; opacity: .55; }
.simon.a-vous .pad:hover { opacity: .75; }
.pad.allume, .pad.indice {
  opacity: 1 !important;
  filter: brightness(1.3) saturate(1.2);
  box-shadow: 0 0 34px currentColor, inset 0 0 20px rgba(255, 255, 255, .45);
}
.pad:disabled { cursor: default; }
.simon-centre {
  position: absolute; left: 50%; top: 50%;
  width: 30%; aspect-ratio: 1;
  transform: translate(-50%, -50%);
  display: grid; place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 30%, #1a1440, #0c0d1c);
  border: 2px solid var(--gold);
  font-family: var(--display);
  font-size: clamp(1.4rem, 6vw, 2.2rem);
  color: var(--gold-light);
  pointer-events: none; font-weight: 800;}
.simon.perdu { border-color: #ff6b8a; box-shadow: 0 0 40px rgba(255, 107, 138, .35); }
.bouton-son {
  font: inherit; font-family: var(--display); font-weight: 800; font-size: inherit; letter-spacing: inherit;
  color: var(--gold-light); background: none; border: 0; padding: 0; cursor: pointer;
}
.bouton-son[aria-pressed="false"] { color: rgba(233, 235, 243, .4); }

/* ---------- Paires de cartes ---------- */
.ecran .modes + .modes { margin-top: -.25rem; }
.modes label:has(input:disabled) { opacity: .4; cursor: not-allowed; }
.grille-paires {
  --colonnes: 4;
  --lignes: 4;
  /* le plateau tient toujours dans la hauteur de l'écran */
  width: min(100%, calc((100svh - 17rem) * var(--colonnes) / var(--lignes)));
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(var(--colonnes), minmax(0, 1fr));
  gap: clamp(.4rem, 1.5vw, .7rem);
}
.carte {
  aspect-ratio: 1;
  padding: 0; border: 0; background: none;
  perspective: 900px;
  cursor: pointer;
  border-radius: 12px;
}
.carte:disabled { cursor: default; }
.carte-inner {
  position: relative; display: block;
  width: 100%; height: 100%;
  transform-style: preserve-3d;
  transition: transform .45s cubic-bezier(.2, .7, .2, 1);
}
.carte.retournee .carte-inner, .carte.trouvee .carte-inner { transform: rotateY(180deg); }
.dos, .face {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  border-radius: 12px;
  overflow: hidden;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.dos {
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 230, 128, .35) 0 12%, transparent 13%),
    repeating-linear-gradient(45deg, rgba(255, 210, 63, .14) 0 6px, transparent 6px 12px),
    linear-gradient(160deg, var(--purple), var(--purple-deep));
  border: 2px solid rgba(255, 210, 63, .55);
}
.dos::after { content: "✦"; font-size: clamp(1rem, 4vw, 1.6rem); color: var(--gold-light); }
.carte:hover:not(:disabled) .dos { border-color: var(--gold-light); box-shadow: 0 0 16px rgba(255, 210, 63, .35); }
.face {
  transform: rotateY(180deg);
  background: var(--bg-navy);
  border: 2px solid var(--gold);
}
.face img { width: 100%; height: 100%; object-fit: cover; display: block; }
.face--symbole { font-size: clamp(1.6rem, 7vw, 2.8rem); color: var(--gold-light); }
.carte.trouvee .face { border-color: #7ee2a8; box-shadow: 0 0 18px rgba(126, 226, 168, .45); }
@media (prefers-reduced-motion: reduce) { .carte-inner { transition: none; } }