/* ==== Layout fallback (respecte .blockgen) ==== */

.blockgen .meche_block {
  box-sizing: border-box;
  display: inline-block;
  vertical-align: top;
  padding: 0 13px 46px 13px;
  transition: transform 150ms ease-out;
  /* fallback colonnes */
  width: 20%;
}
@media (max-width: 1399.98px) { .blockgen .meche_block { width: 25%; } }
@media (max-width: 1199.98px) { .blockgen .meche_block { width: 33.3333%; } }
@media (max-width: 991.98px)  { .blockgen .meche_block { width: 50%; } }
@media (max-width: 767.98px)  { .blockgen .meche_block { width: 50%; } }

/* Hover zoom sans décaler les autres */
.blockgen .meche_block:hover { transform: scale(1.1); }

/* =================== Variables globales flip =================== */
:root{
  --khc-flip-duration: 0.6s;                        /* ex: 5s pour très lent */
  --khc-flip-ease: cubic-bezier(.22,.61,.36,1);     /* courbe un peu plus douce */
}

/* ==== Carte 3D : rotor qui tourne, avant dans le flux, dos en overlay ==== */
.khc-card { position: relative; width: 100%; perspective: 1200px; }
.khc-rotor { position: relative; width: 100%; transform-style: preserve-3d; will-change: transform; }

.khc-face {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
}
.khc-face--front { position: relative; transform: rotateY(0deg); z-index: 2; }
.khc-face--back  { position: absolute; inset: 0; transform: rotateY(180deg); z-index: 1; }

/* (supprimé l’ancienne règle à 5s ici pour éviter le conflit) */

@keyframes khc-rotor-spin {
  0%   { transform: rotateY(0deg); }
  100% { transform: rotateY(360deg); }
}


/* Contenu avant (peut avoir 2 images superposées) */
.khc-front-inner {
  position: relative;
  width: 100%;
}
.khc-front-inner.has-double .khc-img.khibrille.behind {
  position: absolute;
  left: 50%; top: -10%; transform: translateX(-50%);
  width: 82%;
  z-index: 1;
  /* base pour l’anim top du “peek” */
  --khc-behind-top: -10%;
}

.khc-front-inner.has-double .khc-img.normale.front {
  position: relative;       /* <-- dans le flux pour conserver la hauteur */
  z-index: 2;
}

/* Switch d’ordre via classe */
/* quand on switch sur KHIBRILLE : la khibrille passe DEVANT et redevient relative */
.khc-front-inner.has-double.show-khibrille .khc-img.khibrille.behind {
  position: relative;       /* <-- repasse dans le flux */
  left: 0; top: 0;
  width: 100%;
  z-index: 3;
  transform: translate(0);
}
.khc-front-inner.has-double.show-khibrille .khc-img.normale.front {
  position: absolute;       /* <-- passe derrière et sort du flux */
  left: 50%; top: -10%; transform: translateX(-50%);
  width: 82%;
  z-index: 2;
  --khc-behind-top: -10%;
}

/* Animation au clic sur icône : petite mise à l'échelle + léger glow */
.khc-card.has-double .khc-img.khc-swap-anim {
  animation: khc-click-pop 240ms ease-out 1;
  will-change: transform, filter;
}
@keyframes khc-click-pop {
  0%   { transform: scale(0.96); filter: drop-shadow(0 0 0 rgba(0,0,0,0)); }
  60%  { transform: scale(1.06); filter: drop-shadow(0 6px 12px rgba(0,0,0,.2)); }
  100% { transform: scale(1);    filter: drop-shadow(0 0 0 rgba(0,0,0,0)); }
}

/* Derrière : léger slide bas puis retour au switch (ANIME TOP, pas transform) */
.khc-img.khc-slide-peek {
  animation: khc-slide-peek-top 320ms ease-out 1;
  will-change: top;
}
@keyframes khc-slide-peek-top {
  0%   { top: var(--khc-behind-top, -4%); }
  55%  { top: calc(var(--khc-behind-top, -4%) + 6px); } /* ajuste à 8/10px si besoin */
  100% { top: var(--khc-behind-top, -4%); }
}

/* (optionnel explicite) forcer l'état show-normale */
.khc-front-inner.has-double.show-normale .khc-img.khibrille.behind {
  position: absolute; left: 50%; top: -10%; transform: translateX(-50%); width: 82%; z-index: 1; --khc-behind-top: -10%;
}
.khc-front-inner.has-double.show-normale .khc-img.normale.front {
  position: relative; z-index: 2;
}

/* la pastille doit toujours passer au-dessus */
.khc-badge { z-index: 5; pointer-events: none; }

/* Images */
.khc-img { width: 100%; height: auto; display: block; cursor: zoom-in; border-radius:12px;}
.khc-img.gen { cursor: zoom-in; }
.khc-img.is-dim, .khc-img.is-preview { opacity: 0.2; }
.khc-img.is-phy { filter: grayscale(100%); }

/* Pastille */
.khc-badge {
  position: absolute;
  left: 8px;
  bottom: 8px;
  display: inline-block;
  padding: 2px 8px;
  font-size: 12px;
  line-height: 1.2;
  border-radius: 5px;
  background: rgb(37 37 37);
  color: #fff;
  z-index: 5;
  pointer-events: none;
}

/* Infos */
.meche_info {
  margin-top: 6px;
  font-size: 14px;
}
.meche_info .khc-num { font-weight: 600; }
.meche_info .khc-title { }

/* Icônes — centrées sur la ligne */
.khc-icons {
  margin-top: 6px;
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: center;   /* <-- centrage horizontal */
  flex-wrap: wrap;           /* évite les débordements en petit écran */
}

.khc-icons .tooltip-icon {
  transition: opacity 120ms ease;
  cursor: default;
  display: inline-flex;      /* centrage propre de l’icône dans son span */
  align-items: center;
  justify-content: center;
}

.khc-icons .tooltip-icon svg{ opacity:0.1; }
.khc-icons .tooltip-icon.owned svg { opacity: 1; }
.khc-icons .tooltip-icon[data-switch="1"] { cursor: pointer; }


/* Modale */
.khc-modal {
  position: fixed; inset: 0; z-index: 9999;
}
.khc-modal__backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.85);
}
.khc-modal__inner {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  padding: 24px;
}
/* Modale : image à 90% de la hauteur dispo */
.khc-modal__img {
  max-width: 100%;
  max-height: 90vh;   /* <-- 90% de la hauteur de viewport */
  height: auto;
  width: auto;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
  border-radius: 25px;
}

/* Mobile : pas de curseur "zoom" */
@media (max-width: 767.98px) {
  .khc-img { cursor: default; }
}


/* Lazy placeholder (on laisse le src transparent 1x1) */
.khc-lazy { background: transparent; }

/* Couper le zoom sur les blocs non interactifs */
.blockgen .meche_block.no-interaction:hover { transform: none; }

/* Empêcher tout clic sur la carte (les icônes restent cliquables, elles sont hors .khc-card) */
.meche_block.no-interaction .khc-card { pointer-events: none; }

/* Pas d’indice de zoom au survol */
.khc-img.no-modal { cursor: default; }

/* Icône active : très visible (glow + ripple + scale) */
.khc-icons { overflow: visible; }              /* pour laisser l’onde dépasser */
.khc-icons .tooltip-icon { position: relative; z-index: 1; }

.khc-icons .tooltip-icon.is-front {
  animation: khc-pulse-scale 1.1s ease-in-out infinite;
  pointer-events: none;                        /* non cliquable */
  cursor: default;
  will-change: transform;
}

/* halo lumineux sur l’icône */
.khc-icons .tooltip-icon.is-front i {
  animation: khc-pulse-glow 1.1s ease-in-out infinite;
  filter: drop-shadow(0 0 0 rgba(255,255,255,0));
}

/* onde circulaire autour de l’icône */
.khc-icons .tooltip-icon.is-front::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%) scale(0.6);
  width: 2.4em; height: 2.4em;                 /* taille de l’onde */
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,0.55);    /* utilise le blanc ; tu peux passer à currentColor */
  opacity: 0;
  animation: khc-ripple 1.1s ease-out infinite;
  z-index: 0;
}

/* Intensité par défaut des icônes (toujours OK) */
.khc-icons .tooltip-icon { opacity: 0.6; }
.khc-icons .tooltip-icon.owned { opacity: 1; }

/* Animations */
@keyframes khc-pulse-scale {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.18); }
  100% { transform: scale(1); }
}
@keyframes khc-pulse-glow {
  0%   { filter: drop-shadow(0 0 0 rgba(255,255,255,0)); }
  50%  { filter: drop-shadow(0 0 10px rgba(255,255,255,0.85)); }
  100% { filter: drop-shadow(0 0 0 rgba(255,255,255,0)); }
}
@keyframes khc-ripple {
  0%   { opacity: .45; transform: translate(-50%, -50%) scale(0.6); }
  100% { opacity: 0;    transform: translate(-50%, -50%) scale(1.45); }
}

/* Respect des préférences d’accessibilité */
@media (prefers-reduced-motion: reduce) {
  .khc-icons .tooltip-icon.is-front,
  .khc-icons .tooltip-icon.is-front i,
  .khc-icons .tooltip-icon.is-front::after {
    animation: none !important;
  }
  .khc-icons .tooltip-icon.is-front { transform: scale(1.05); } /* accent visuel sans mouvement */
}


/* --- Flip : carte entière sauf quand has-double --- */
.khc-card.can-rotate:not(.has-double):hover .khc-rotor {
  animation: khc-rotor-spin var(--khc-flip-duration) var(--khc-flip-ease) 1;
}

/* --- Flip : en double, seule l’image au premier plan tourne --- */
.khc-card.can-rotate.has-double:hover .khc-front-inner.show-normale .khc-img.normale.front {
  animation: khc-rotateY-img var(--khc-flip-duration) var(--khc-flip-ease) 1;
  transform-origin: center;
  backface-visibility: hidden;
}
.khc-card.can-rotate.has-double:hover .khc-front-inner.show-khibrille .khc-img.khibrille {
  animation: khc-rotateY-img var(--khc-flip-duration) var(--khc-flip-ease) 1;
  transform-origin: center;
  backface-visibility: hidden;
}
@keyframes khc-rotateY-img {
  0%   { transform: rotateY(0deg); }
  100% { transform: rotateY(360deg); }
}

/* === Tilt + Shine – extensions sur ta structure existante === */

/* un peu de profondeur au conteneur (garde ton zoom sur .meche_block) */
.blockgen .meche_block { perspective: 1000px; }

/* on n’écrase pas tes règles existantes de .khc-card, on les complète */
.khc-card {
  /* variables mises à jour par le JS */
  --rx: 0deg; --ry: 0deg;        /* rotations */
  --mx: 50%; --my: 50%;          /* position du reflet */
  --shine: .28;                   /* intensité du reflet (0–1) */
  --tilt-x-max: 14deg;           /* amplitude max X (haut/bas) */
  --tilt-y-max: 18deg;           /* amplitude max Y (gauche/droite) */

  transform-style: preserve-3d;
  transform: rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform 120ms ease; /* lissé du tilt */
}

/* reflet qui suit la souris (au-dessus de tes images) */
.khc-card:hover::before {
  content: "";
  position: absolute; inset: -1px;
  border-radius: 12px;            /* = arrondi de .khc-img */
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: .9;
  transform: translateZ(30px);
  background:
    radial-gradient(220px 220px at var(--mx) var(--my),
      rgba(255,255,255, calc(var(--shine) * .85)) 0%,
      rgba(255,255,255, calc(var(--shine) * .25)) 18%,
      rgba(255,255,255, 0) 45%)
    ,
    conic-gradient(from 210deg at 30% 10%,
      rgba(255,255,255,.12), rgba(255,255,255,0) 30%,
      rgba(255,255,255,.12) 60%, rgba(255,255,255,0) 85%);
}

/* pas d’effet sur les cartes marquées no-interaction (tu as déjà le pointer-events:none) */
.meche_block.no-interaction .khc-card { transform: none !important; }
.meche_block.no-interaction .khc-card::before { display: none !important; }

/* accessibilité */
@media (prefers-reduced-motion: reduce) {
  .khc-card { transition: none; transform: none !important; }
  .khc-card::before { display: none !important; }
}

/* --- Clip propre + stacking confiné --- */
.khc-card{
  border-radius: 12px;     /* même rayon que tes images */
  overflow: hidden;        /* on peut clipper sans perdre le halo */
  isolation: isolate;      /* le blend reste dans la carte */
}

/* On désactive l'ancien halo sur .khc-card::before */
.khc-card::before{ display:none !important; }

/* --- Nouveau halo : dessiné SUR la face avant --- */
.khc-face--front{ position: relative; }
.meche_block:not(.no-interaction) .khc-face--front:hover::after {
  content:"";
  position:absolute; inset:0;
  z-index:4;                /* au-dessus de l’image, sous la pastille */
  pointer-events:none;
  border-radius: inherit;
  mix-blend-mode: screen;
  opacity:.9;               /* intensité globale, ton JS pilote --shine */
  background:
    radial-gradient(1000px 1000px at var(--mx) var(--my),
      rgba(255,255,255, calc(var(--shine) * .85)) 0%,
      rgba(255,255,255, calc(var(--shine) * .25)) 18%,
      rgba(255,255,255, 0) 45%);
}
.meche_block.gold:not(.no-interaction) .khc-face--front::after {
  background:
    radial-gradient(1000px 1000px at var(--mx) var(--my),
      rgba(255, 215, 0, calc(var(--shine) * .9)) 0%,
      rgba(255, 165, 0, calc(var(--shine) * .6)) 20%,
      rgba(255, 140, 0, calc(var(--shine) * .3)) 40%,
      rgba(255, 255, 255, 0) 65%)
    ,
    conic-gradient(
      from 0deg,
      rgba(255, 230, 150, .18),
      rgba(255, 200, 80, .08),
      rgba(255, 255, 200, .18),
      rgba(255, 200, 80, .08),
      rgba(255, 230, 150, .18)
    );
}
/*.meche_block.kh-ho:not(.no-interaction) .khc-face--front::after {
  background:
    radial-gradient(1000px 1000px at var(--mx) var(--my),
      rgba(255,255,255, calc(var(--shine) * .55)) 0%,
      rgba(255,255,255, calc(var(--shine) * .15)) 18%,
      rgba(255,255,255, 0) 45%)
    ,
    conic-gradient(
      from 0deg at 50% 50%,
      rgba(255,0,0,.12),
      rgba(255,154,0,.12),
      rgba(255,255,0,.12),
      rgba(0,255,0,.12),
      rgba(0,255,255,.12),
      rgba(0,0,255,.12),
      rgba(255,0,255,.12),
      rgba(255,0,0,.12)
    );
}*/

/* La pastille doit rester au-dessus du halo */
.khc-badge{ z-index:5; }

/* Garde-fou pendant le flip 360° (si tu l'as gardé) */
.meche_block:not(.no-interaction) .khc-card.is-spinning .khc-face--front::after {
  opacity:0 !important;
}

/* Accessibilité */
@media (prefers-reduced-motion: reduce){
  .meche_block:not(.no-interaction) .khc-face--front::after {
    display:none !important;
  }
}