/* kit-flip.css — carte flip recto/verso.
   Supporte 2 naming conventions :
   - legacy  : .kit-flip-face / .kit-flip-face--back
   - moderne : .kit-flip-front / .kit-flip-back  (utilisé par les leçons V1)

   Architecture grid : les deux faces partagent la cellule (1 / 1) → l'inner
   prend automatiquement max(height-front, height-back). Plus de débordement
   quand le back contient plus de texte que le front. */

.kit-flip {
  perspective: 1000px;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform 200ms ease;
}

/* Hover scale sur le wrapper (pas sur l'inner) : ainsi le rotateY du flip
   n'entre PAS en conflit de spécificité avec le scale. */
.kit-flip:hover:not([data-flipped="1"]) {
  transform: scale(1.02);
}

.kit-flip-inner {
  position: relative;
  display: grid;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  transition: transform 500ms cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}
.kit-flip[data-flipped="1"] .kit-flip-inner { transform: rotateY(180deg); }

/* Les deux faces empilées dans la même cellule grid → l'inner prend
   automatiquement la hauteur de la plus grande face. Anti-débordement
   garanti par overflow:hidden + min-width/height: 0. */
.kit-flip-face,
.kit-flip-front,
.kit-flip-back,
.kit-flip-face--back {
  grid-area: 1 / 1;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  overflow: hidden;
  min-width: 0;
  min-height: 0;
}

.kit-flip-face,
.kit-flip-front {
  transform: rotateY(0deg);
}

.kit-flip-face--back,
.kit-flip-back {
  transform: rotateY(180deg);
}

.kit-flip:focus-visible {
  outline: 2px solid var(--kit-accent, #22d3ee);
  outline-offset: 2px;
}