@charset "UTF-8";
/* Icônes 3D des abonnements (Apple Music, Spotify…) : tuile en relief qui flotte,
   tranche colorée, reflet brillant et ombre au sol. Chargé après site.css et mode-sombre.css. */

.ab-ico3d{
  --ab-taille:64px;
  --ab-tranche:color-mix(in srgb,var(--ab-c,#333) 58%,#000);
  position:relative;width:var(--ab-taille);height:var(--ab-taille);flex:0 0 auto;
  perspective:420px;margin:.15rem 0 .55rem;
}
.ab-ico3d .ab-logo,
.ab-ico3d .ab-logo.ab-vrai{
  width:100%;height:100%;border-radius:28%;
  transform:rotateX(16deg) rotateY(-20deg);transform-style:preserve-3d;
  transition:transform .55s cubic-bezier(.2,.8,.2,1);
  /* la tranche : 6 couches décalées = épaisseur de la tuile */
  box-shadow:
    1px 1px 0 var(--ab-tranche),2px 2px 0 var(--ab-tranche),3px 3px 0 var(--ab-tranche),
    4px 4px 0 var(--ab-tranche),5px 5px 0 var(--ab-tranche),6px 6px 0 var(--ab-tranche),
    12px 16px 22px -6px rgba(0,0,0,.45),
    6px 14px 30px -10px var(--ab-c,#111),
    inset 0 1.5px 0 rgba(255,255,255,.55),
    inset 0 -4px 9px rgba(0,0,0,.22);
  animation:abFlotte 5.5s ease-in-out infinite;animation-delay:calc(var(--i,0) * -.7s);
}
/* reflet brillant sur le dessus */
.ab-ico3d .ab-logo::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:1;
  background:
    radial-gradient(120% 75% at 22% 0%,rgba(255,255,255,.6),rgba(255,255,255,0) 55%),
    linear-gradient(180deg,rgba(255,255,255,.14),transparent 45%,rgba(0,0,0,.14));
}
.ab-ico3d .ab-logo::after{z-index:2;}
.ab-ico3d .ab-logo svg{width:56%;height:56%;filter:drop-shadow(0 2px 1.5px rgba(0,0,0,.35));}

/* ombre au sol qui respire avec le flottement */
.ab-ico-sol{
  position:absolute;left:8%;right:-6%;bottom:-14px;height:12px;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(0,0,0,.38),transparent);filter:blur(1.5px);
  animation:abSol 5.5s ease-in-out infinite;animation-delay:calc(var(--i,0) * -.7s);
}
html[data-mode="sombre"] .ab-ico-sol{background:radial-gradient(closest-side,rgba(0,0,0,.75),transparent);}

@keyframes abFlotte{
  0%,100%{transform:rotateX(16deg) rotateY(-20deg) translateY(0);}
  50%{transform:rotateX(9deg) rotateY(-9deg) translateY(-6px);}
}
@keyframes abSol{50%{transform:scale(.8);opacity:.55;}}

/* survol (ordinateur) : la tuile se redresse et se soulève */
@media (hover:hover){
  .ab-card:hover .ab-ico3d .ab-logo{animation:none;transform:rotateX(0) rotateY(0) translateY(-7px) scale(1.06);}
  .ab-card:hover .ab-ico-sol{animation:none;transform:scale(.72);opacity:.5;transition:transform .55s,opacity .55s;}
}

@media (prefers-reduced-motion:reduce){
  .ab-ico3d .ab-logo,.ab-ico-sol{animation:none;}
}

/* ── Tailles d'écran ── */
@media (max-width:760px){
  .ab-ico3d{--ab-taille:54px;}
  .ab-ico3d .ab-logo,.ab-ico3d .ab-logo.ab-vrai{border-radius:28%;}
  .ab-btn{font-size:.76rem;padding:.55rem .6rem;}
}
/* Téléphones étroits : une carte par ligne, icône à gauche, texte à droite (moins de défilement) */
@media (max-width:420px){
  .ab-grid{grid-template-columns:1fr;}
  .ab-card:not(.ab-other){display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:1rem;row-gap:.35rem;align-items:center;}
  .ab-card:not(.ab-other) .ab-ico3d{grid-row:1 / span 2;margin:0 0 .4rem;}
  .ab-card:not(.ab-other) .ab-name{align-self:end;}
  .ab-card:not(.ab-other) .ab-desc{align-self:start;}
  .ab-card:not(.ab-other) .ab-price,.ab-card:not(.ab-other) .ab-btn{grid-column:1 / -1;}
  .ab-card:not(.ab-other) .ab-price{margin-top:.35rem;}
}