/* ==========================================================
   OPTIX — DECK DES 4 BÉNÉFICES
   Retour à la DA de l'ancienne version (cartes glow + collages
   d'images) mais en grille 2×2 pour laisser respirer les
   visuels, avec une arrivée en cascade (décalage + scale) et un
   balayage lumineux qui traverse chaque carte à son apparition.

   Chargé après index.css : les règles de base (.benefit,
   .benefit__collage, .collage-img*) viennent de là et ne sont
   pas dupliquées ici — uniquement les écarts.
   ========================================================== */

/* ----------------------------------------------------------
   1. GRILLE 2×2 (desktop)
   index.css passe déjà en 1 colonne sous 900px : on ne touche
   qu'au-dessus pour ne pas repasser par-dessus ce repli.
   ---------------------------------------------------------- */
@media (min-width: 901px) {
    .benefits--deck .benefits__grid {
        grid-template-columns: repeat(2, 1fr);
        max-width: 1040px;
        gap: 28px;
    }

    /* Cartes plus hautes : les collages ont enfin la place de
       se déployer (l'ancienne grille 3 colonnes les écrasait) */
    .benefits--deck .benefit {
        min-height: 320px;
    }
}

.benefits--deck {
    position: relative;
    padding: 70px 20px;
}

/* ----------------------------------------------------------
   2. CARTE 04 — « Un Copilote au Quotidien »
   Pas encore de visuel : zone collage prête à recevoir des
   images, avec un placeholder discret en attendant.
   Accent vert, repris de la rencontre « escorte » du rework.
   ---------------------------------------------------------- */
.benefit--copilot {
    --benefit-accent: 56, 224, 123;
}

.benefit__collage--placeholder {
    /* Le collage normal est en opacity .6 : ici on veut le
       placeholder lisible tel quel */
    opacity: 1;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    padding: 16px;
}

.collage-placeholder {
    width: 168px;
    height: 118px;
    border-radius: 12px;
    border: 1px dashed rgba(255, 255, 255, 0.14);
    background: rgba(41, 85, 255, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    transform: rotate(-8deg);
    transition: transform 0.3s ease, border-color 0.3s ease;
}

.collage-placeholder span {
    font-size: var(--text-xs);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.28);
}

.benefit:hover .collage-placeholder {
    transform: rotate(-4deg) scale(1.04);
    border-color: rgba(56, 224, 123, 0.35);
}

@media (max-width: 768px) {
    .collage-placeholder {
        width: 120px;
        height: 86px;
    }
}

/* ----------------------------------------------------------
   3. BALAYAGE LUMINEUX À L'ARRIVÉE
   ::before est déjà pris (.glow-card + .motion-trail) → ::after.
   z-index 3 : passe au-dessus du contenu (2) et du collage (0).
   Joué une seule fois, quand JS pose .swept.
   ---------------------------------------------------------- */
.benefits--deck .benefit::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 3;
    opacity: 0;
    background: linear-gradient(105deg,
            transparent 38%,
            rgba(255, 255, 255, 0.10) 47%,
            rgba(0, 240, 255, 0.22) 50%,
            rgba(255, 255, 255, 0.10) 53%,
            transparent 62%);
    background-size: 260% 100%;
    background-position: 130% 0;
}

.benefits--deck .benefit.swept::after {
    animation: deck-sweep 0.9s ease-out 1 forwards;
}

@keyframes deck-sweep {
    0% {
        opacity: 0;
        background-position: 130% 0;
    }

    18% {
        opacity: 1;
    }

    82% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        background-position: -30% 0;
    }
}