/* ============================================================
   article-card3d.css
   Carte recto verso en 3D (JS : article-card3d.js), dans un article de blog ou une page.
   Variante sans fond : article-card3d--bare. Hors blog, le bouton révélé porte la classe article-card3d__reveal.
   <figure class="article-card3d" data-card3d>
     <div class="article-card3d__stage">
       <div class="article-card3d__card" data-card3d-card>
         <div class="article-card3d__face article-card3d__face--front"><img …></div>
         <div class="article-card3d__face article-card3d__face--back"><img …></div>
       </div>
     </div>
     <div class="article-card3d__actions">
       <button type="button" class="article-card3d__turn" data-card3d-turn data-label-back="…" data-label-front="…">…</button>
       <a class="article-card3d__cta" href="…">…</a>
     </div>
     <figcaption>…</figcaption>
   </figure>
   ============================================================ */

.article-card3d {
    --card3d-rx: 0deg;
    --card3d-ry: 0deg;
    --card3d-flip: 0deg;
    --card3d-shine-x: 30%;
    margin: 2rem 0;
    padding: 2.2rem 1.25rem 1.4rem;
    border-radius: 24px;
    background:
        radial-gradient(circle at 25% 15%, rgba(255, 186, 223, 0.55), transparent 50%),
        radial-gradient(circle at 80% 85%, rgba(165, 167, 255, 0.55), transparent 50%),
        #f6f2ff;
    text-align: center;
}

.article-card3d__stage {
    width: min(100%, 560px);
    margin: 0 auto;
    perspective: 1400px;
}

.article-card3d__card {
    display: grid;
    gap: 1rem;
}

.article-card3d__face {
    position: relative;
    overflow: hidden;
    border-radius: 3.6% / 5.7%;
    box-shadow: 0 26px 50px rgba(59, 31, 110, 0.3);
}

.article-card3d .article-card3d__face img {
    display: block;
    width: 100%;
    height: auto;
    max-height: none;
    margin: 0;
    border-radius: 0;
    object-fit: fill;
    background: transparent;
}

/* ---- Version animée (le script ajoute is-enhanced) ---- */
.article-card3d.is-enhanced .article-card3d__card {
    position: relative;
    display: block;
    aspect-ratio: 1200 / 756;
    cursor: pointer;
    transform-style: preserve-3d;
    transform:
        translateY(34px)
        rotateX(calc(18deg + var(--card3d-rx)))
        rotateY(calc(-26deg + var(--card3d-ry) + var(--card3d-flip)))
        scale(0.88);
    opacity: 0;
    transition:
        transform 0.9s cubic-bezier(0.22, 0.9, 0.3, 1),
        opacity 0.6s ease;
}

.article-card3d.is-enhanced.is-in .article-card3d__card {
    transform:
        rotateX(calc(6deg + var(--card3d-rx)))
        rotateY(calc(-10deg + var(--card3d-ry) + var(--card3d-flip)));
    opacity: 1;
}

.article-card3d.is-enhanced.is-back {
    --card3d-flip: 180deg;
}

.article-card3d.is-enhanced .article-card3d__face {
    position: absolute;
    inset: 0;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.article-card3d.is-enhanced .article-card3d__face--back {
    transform: rotateY(180deg);
}

/* Reflet qui suit la souris et balaie la carte à son arrivée. */
.article-card3d__face--front::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, 0.35) 48%, transparent 62%);
    background-size: 250% 100%;
    background-position: var(--card3d-shine-x) 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.article-card3d.is-in .article-card3d__face--front::after {
    animation: card3d-shine 1.4s ease 0.5s both;
}

.article-card3d__card:hover .article-card3d__face--front::after {
    opacity: 1;
    animation: none;
}

@keyframes card3d-shine {
    0% { opacity: 1; background-position: 120% 0; }
    100% { opacity: 0; background-position: -20% 0; }
}

/* ---- Actions ---- */
.article-card3d__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 1.6rem;
}

.article-card3d__turn {
    display: none;
    align-items: center;
    gap: 0.45rem;
    padding: 0.55rem 1rem;
    border: 1px solid rgba(102, 111, 236, 0.35);
    border-radius: 999px;
    background: #ffffff;
    color: #3b2a78;
    font: inherit;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
}

.article-card3d.is-enhanced .article-card3d__turn {
    display: inline-flex;
}

.article-card3d__turn svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.article-card3d .article-card3d__cta {
    display: inline-flex;
    align-items: center;
    padding: 0.8rem 1.5rem;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(135deg, #6847ef, #b25bd0);
    box-shadow: 0 14px 30px rgba(104, 71, 239, 0.35);
    color: #ffffff;
    font-weight: 800;
    text-decoration: none;
}

.article-card3d .article-card3d__cta:hover,
.article-card3d .article-card3d__cta:focus-visible {
    border: 0;
    color: #ffffff;
    transform: translateY(-2px);
}

/* Le bouton d'action n'apparaît qu'à la fin de l'animation (classe article-card3d__reveal hors blog). */
.article-card3d.is-enhanced .article-card3d__cta,
.article-card3d.is-enhanced .article-card3d__reveal {
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px) scale(0.96);
    transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.22, 0.9, 0.3, 1.2), visibility 0s linear 0.5s;
}

.article-card3d.is-enhanced.is-cta-visible .article-card3d__cta,
.article-card3d.is-enhanced.is-cta-visible .article-card3d__reveal {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.22, 0.9, 0.3, 1.2), visibility 0s;
    animation: card3d-glow 2.4s ease-in-out 0.6s 2;
}

@keyframes card3d-glow {
    0%, 100% { box-shadow: 0 14px 30px rgba(104, 71, 239, 0.35); }
    50% { box-shadow: 0 14px 40px rgba(210, 91, 181, 0.6); }
}

.article-card3d figcaption,
.blog-article .article-card3d figcaption {
    margin-top: 1rem;
    color: #5b677a;
    font-size: 0.9rem;
}

[data-theme="dark"] .article-card3d {
    background:
        radial-gradient(circle at 25% 15%, rgba(210, 91, 181, 0.22), transparent 50%),
        radial-gradient(circle at 80% 85%, rgba(104, 71, 239, 0.3), transparent 50%),
        rgba(255, 255, 255, 0.04);
}

[data-theme="dark"] .article-card3d__turn {
    border-color: rgba(196, 181, 253, 0.4);
    background: rgba(255, 255, 255, 0.08);
    color: #f3eaff;
}

[data-theme="dark"] .article-card3d figcaption,
[data-theme="dark"] .blog-article .article-card3d figcaption {
    color: #c7cfe0;
}

@media (prefers-reduced-motion: reduce) {
    .article-card3d.is-enhanced .article-card3d__card,
    .article-card3d.is-enhanced .article-card3d__cta,
    .article-card3d.is-enhanced .article-card3d__reveal {
        transition: none;
    }

    .article-card3d.is-in .article-card3d__face--front::after,
    .article-card3d.is-cta-visible .article-card3d__cta {
        animation: none;
    }
}

/* ---- Variante sans fond (pages sombres ou déjà encadrées) ---- */
.article-card3d.article-card3d--bare {
    margin: 0;
    padding: 0.4rem 0 0;
    background: none;
}

.article-card3d--bare .article-card3d__actions {
    margin-top: 1.1rem;
}

.article-card3d--bare .article-card3d__reveal {
    width: 100%;
}