/* ════════════════════════════════════════════════════════════════
   AHCE — Icônes 3D : tuile en relief + tilt + float idle
   Auto-wrap des emojis isolés via icons-3d.js
   ════════════════════════════════════════════════════════════════ */

/* ─── KEYFRAMES ──────────────────────────────────────────────── */
@keyframes ahceIcoFloat{
  0%,100%{transform:translateY(0) rotate(0)}
  50%{transform:translateY(-4px) rotate(-1.5deg)}
}
@keyframes ahceIcoFloatSlow{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-6px)}
}
@keyframes ahceIcoShine{
  0%{background-position:-200% 0}
  100%{background-position:300% 0}
}
@keyframes ahceIcoPopIn{
  0%{opacity:0;transform:scale(.5) rotate(-12deg)}
  60%{opacity:1;transform:scale(1.08) rotate(2deg)}
  100%{transform:scale(1) rotate(0)}
}
@keyframes ahceIcoBeat{
  0%,100%{transform:scale(1)}
  35%{transform:scale(1.12)}
  70%{transform:scale(.96)}
}
@keyframes ahceIcoSpin{
  from{transform:rotateY(0)}
  to{transform:rotateY(360deg)}
}

/* ─── TUILE 3D — base ───────────────────────────────────────── */
.ahce-ico-3d{
  display:inline-flex;align-items:center;justify-content:center;
  width:56px;height:56px;
  border-radius:18px;
  font-style:normal;text-decoration:none;
  font-size:30px;line-height:1;
  color:#fff;
  position:relative;isolation:isolate;
  background:linear-gradient(140deg,#2a7ed8 0%,#1e60b6 55%,#0c4a8c 100%);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.35),
    inset 0 -3px 0 rgba(0,0,0,.22),
    0 8px 18px rgba(30,96,182,.35),
    0 2px 4px rgba(0,0,0,.08);
  text-shadow:0 1px 2px rgba(0,0,0,.25);
  transform-style:preserve-3d;
  transition:transform .35s cubic-bezier(.22,.61,.36,1), box-shadow .35s ease, filter .35s ease;
  animation:ahceIcoFloat 4.5s ease-in-out infinite;
  animation-delay:var(--ico-delay,0s);
  vertical-align:middle;
  flex-shrink:0;
}

/* Brillance interne en couche pseudo-élément */
.ahce-ico-3d::before{
  content:"";position:absolute;inset:2px;border-radius:16px;pointer-events:none;
  background:linear-gradient(140deg,rgba(255,255,255,.32) 0%,rgba(255,255,255,0) 38%);
  z-index:-1;
}
/* Reflet glissant sur hover */
.ahce-ico-3d::after{
  content:"";position:absolute;top:0;left:-100%;width:80%;height:100%;
  background:linear-gradient(110deg,transparent,rgba(255,255,255,.35),transparent);
  transform:skewX(-22deg);pointer-events:none;border-radius:18px;
  z-index:-1;
}

/* Le glyph (emoji) à l'intérieur — drop-shadow 3D */
.ahce-ico-3d > .ahce-ico-glyph{
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.35));
  display:block;
}

/* ─── HOVER 3D ──────────────────────────────────────────────── */
@media (hover:hover){
  .ahce-ico-3d:hover{
    transform:translateY(-5px) rotateX(12deg) rotateY(-8deg) scale(1.05);
    box-shadow:
      inset 0 2px 0 rgba(255,255,255,.45),
      inset 0 -3px 0 rgba(0,0,0,.25),
      0 18px 32px rgba(30,96,182,.55),
      0 4px 6px rgba(0,0,0,.12);
    filter:brightness(1.06);
  }
  .ahce-ico-3d:hover::after{animation:ahceIcoShine .9s ease}
}

/* ─── VARIANTES DE COULEURS ────────────────────────────────── */
.ahce-ico-3d.ico-blue{background:linear-gradient(140deg,#43b8ea 0%,#1e60b6 55%,#0c4a8c 100%);box-shadow:inset 0 2px 0 rgba(255,255,255,.35),inset 0 -3px 0 rgba(0,0,0,.22),0 8px 18px rgba(30,96,182,.4),0 2px 4px rgba(0,0,0,.08)}
.ahce-ico-3d.ico-gold{background:linear-gradient(140deg,#f4cf86 0%,#c49050 55%,#8a5c1f 100%);box-shadow:inset 0 2px 0 rgba(255,255,255,.4),inset 0 -3px 0 rgba(0,0,0,.22),0 8px 18px rgba(196,144,80,.5),0 2px 4px rgba(0,0,0,.08)}
.ahce-ico-3d.ico-green{background:linear-gradient(140deg,#5fdc8b 0%,#16a34a 55%,#0f7a37 100%);box-shadow:inset 0 2px 0 rgba(255,255,255,.35),inset 0 -3px 0 rgba(0,0,0,.22),0 8px 18px rgba(22,163,74,.45),0 2px 4px rgba(0,0,0,.08)}
.ahce-ico-3d.ico-red{background:linear-gradient(140deg,#ff7b85 0%,#dc2626 55%,#9a1c1c 100%);box-shadow:inset 0 2px 0 rgba(255,255,255,.35),inset 0 -3px 0 rgba(0,0,0,.22),0 8px 18px rgba(220,38,38,.45),0 2px 4px rgba(0,0,0,.08)}
.ahce-ico-3d.ico-violet{background:linear-gradient(140deg,#c4a8ff 0%,#8b5cf6 55%,#5b21b6 100%);box-shadow:inset 0 2px 0 rgba(255,255,255,.35),inset 0 -3px 0 rgba(0,0,0,.22),0 8px 18px rgba(139,92,246,.45),0 2px 4px rgba(0,0,0,.08)}
.ahce-ico-3d.ico-pink{background:linear-gradient(140deg,#ff9bb5 0%,#ec4899 55%,#9d174d 100%);box-shadow:inset 0 2px 0 rgba(255,255,255,.35),inset 0 -3px 0 rgba(0,0,0,.22),0 8px 18px rgba(236,72,153,.45),0 2px 4px rgba(0,0,0,.08)}
.ahce-ico-3d.ico-cyan{background:linear-gradient(140deg,#7be0e8 0%,#0891b2 55%,#0e576b 100%);box-shadow:inset 0 2px 0 rgba(255,255,255,.35),inset 0 -3px 0 rgba(0,0,0,.22),0 8px 18px rgba(8,145,178,.45),0 2px 4px rgba(0,0,0,.08)}
.ahce-ico-3d.ico-dark{background:linear-gradient(140deg,#4b5563 0%,#1f2937 55%,#0a0f17 100%);box-shadow:inset 0 2px 0 rgba(255,255,255,.18),inset 0 -3px 0 rgba(0,0,0,.35),0 8px 18px rgba(15,23,42,.5),0 2px 4px rgba(0,0,0,.08)}
.ahce-ico-3d.ico-orange{background:linear-gradient(140deg,#ffb070 0%,#ea580c 55%,#92330a 100%);box-shadow:inset 0 2px 0 rgba(255,255,255,.35),inset 0 -3px 0 rgba(0,0,0,.22),0 8px 18px rgba(234,88,12,.45),0 2px 4px rgba(0,0,0,.08)}

/* ─── TAILLES ───────────────────────────────────────────────── */
.ahce-ico-3d.size-xs{width:32px;height:32px;border-radius:11px;font-size:18px}
.ahce-ico-3d.size-sm{width:44px;height:44px;border-radius:14px;font-size:24px}
.ahce-ico-3d.size-md{width:56px;height:56px;border-radius:18px;font-size:30px}/* défaut */
.ahce-ico-3d.size-lg{width:72px;height:72px;border-radius:22px;font-size:38px}
.ahce-ico-3d.size-xl{width:96px;height:96px;border-radius:28px;font-size:52px}
.ahce-ico-3d.size-2xl{width:128px;height:128px;border-radius:36px;font-size:70px}

/* ─── ANIMATIONS DE COMPORTEMENT ───────────────────────────── */
.ahce-ico-3d.ico-beat{animation:ahceIcoBeat 1.6s ease-in-out infinite}
.ahce-ico-3d.ico-spin{animation:ahceIcoSpin 4s linear infinite;transform-origin:center}
.ahce-ico-3d.ico-still{animation:none}
.ahce-ico-3d.ico-pop{animation:ahceIcoPopIn .55s cubic-bezier(.34,1.56,.64,1) both}
.ahce-ico-3d.ico-float-slow{animation:ahceIcoFloatSlow 6s ease-in-out infinite}

/* ─── FALLBACK : élément sans wrap (icônes existantes en SVG) ─ */
/* Donne un peu de relief même aux SVG inline déjà présents */
.ahce-svg-3d{
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.25));
  transition:transform .3s cubic-bezier(.22,.61,.36,1), filter .3s ease;
}
@media (hover:hover){
  .ahce-svg-3d:hover{transform:translateY(-2px) scale(1.06);filter:drop-shadow(0 4px 8px rgba(0,0,0,.32))}
}

/* ─── REDUCED MOTION ────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  .ahce-ico-3d{animation:none !important;transition:box-shadow .2s ease}
  .ahce-ico-3d:hover{transform:none}
}

/* ─── MOBILE ────────────────────────────────────────────────── */
@media (max-width:680px){
  .ahce-ico-3d{animation-duration:6s}
  .ahce-ico-3d:hover{transform:translateY(-2px) scale(1.03);box-shadow:inset 0 2px 0 rgba(255,255,255,.35),inset 0 -3px 0 rgba(0,0,0,.22),0 10px 20px rgba(0,0,0,.18)}
}