/* =======================================
   Carte générique
======================================= */
.ahc-card{
  position:relative;
  display:block;
  --ahc-radius:14px;
  overflow:visible;
  transition:transform .25s ease;
  /* espace vertical par défaut (mode normal) */
  /*padding-block: clamp(8px, 1.5vw, 20px);*/
  /*padding-block: clamp(20px, 3vw, 40px);*/
  padding-block: clamp(24px, 3.5vw, 48px);
}
.ahc-card:hover,
.ahc-card:focus-within{
  transform:translateY(-4px);
}

/* =======================================
   Dimensions/fallback
======================================= */
.ahc-inner{
  position:relative;
  width:min(14rem,38vw);
  padding:1.25rem 1rem 1.5rem;
  border-radius:var(--ahc-radius);
  margin-inline:auto;

  /* variable pour l’effet overshoot ±5% */
  --ahc-overshoot: 5%;
}
.ahc-face{ position:relative; }

/* =======================================
   Images SVG
======================================= */
.ahc-svg{
  display:block;
  width:clamp(130px, 26vw, 180px);
  height:auto;
  margin-inline:auto;
  pointer-events:none;
}

/* Fallback si pas d’image */
.ahc-fallback{
  height:90px;
  background:rgba(255,255,255,0.08);
  border-radius:12px;
}

/* =======================================
   Titres
======================================= */
.ahc-title{
  text-align:center;
  margin:.75rem 0 0;  /* pour l’état normal */
}
.ahc-back .ahc-title--back{
  width:100%;
  text-align:center;
  margin:0 auto .25rem !important; /* top=0, petit bottom */
}

/* =======================================
   Description
======================================= */
.ahc-desc{
  margin:.25rem 0 0;
  word-break:break-word;
  width:100%;
}

/* =======================================
   Effet overshoot ±5% (fond derrière)
======================================= */
.ahc-inner::before{
  content:"";
  position:absolute;
  left:-18px;
  right:-18px;
  top: calc(-1 * var(--ahc-overshoot));
  bottom: calc(-1 * var(--ahc-overshoot));
  border-radius:0;
  box-shadow:none; /* pas d’ombre → pas de double bloc */
  opacity:0;
  transition: opacity .28s ease;
  pointer-events:none;
  z-index:2; /* sous .ahc-back (z=3) */
}

.ahc-card:hover .ahc-inner::before,
.ahc-card:focus-within .ahc-inner::before{
  opacity:1;
}

/* =======================================
   Panneau hover (auto-hauteur)
======================================= */
.ahc-back{
  position:absolute;

  /* centré par rapport au bloc normal */
  left:-18px;
  right:-18px;
  top:50%;
  transform: translateY(-50%) scale(.98);

  border-radius:0;
  box-shadow:0 18px 38px rgba(0,0,0,.28);

  /* ===== Variables placement décor ===== */
  --ahc-decor-size:  clamp(130px, 26vw, 180px);
  --ahc-decor-top:   clamp(10px, 2.5vw, 18px);
  --ahc-decor-right: -24px;
  --ahc-gap-top:     clamp(4px, 0.8vw, 10px);

  /* espacement */
  padding: clamp(1rem, 2vw, 1.5rem);

  /* contenu sous le décor */
  padding-top: calc(var(--ahc-decor-top) + var(--ahc-decor-size) + var(--ahc-gap-top));

  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:.5rem;

  opacity:0;
  transition: opacity .28s ease, transform .28s ease;
  pointer-events:none;
  z-index:3;

  overflow:hidden; /* coupe le décor qui déborde */
}

/* Décor SVG au hover */
.ahc-back .ahc-svg--back{
  position:absolute;
  top: var(--ahc-decor-top);
  right: var(--ahc-decor-right);
  width: var(--ahc-decor-size);
  height:auto;
  margin:0;
  opacity:0.9;
  pointer-events:none;
}

/* état visible */
.ahc-card:hover .ahc-back,
.ahc-card:focus-within .ahc-back{
  opacity:1;
  transform: translateY(-50%) scale(1.02);
}

.ahc-expand-right .ahc-back{ transform-origin:right top; }
.ahc-expand-left  .ahc-back{ transform-origin:left top; }

/* =======================================
   Responsive
======================================= */
@media (min-width:640px){
  .ahc-inner{ width:clamp(12rem,28vw,16rem); }
}