/*
 * Cartes empilées. Le collage est fait en CSS pur ; le JS n'ajoute que le
 * rétrécissement de la carte recouverte. Sans JavaScript, l'empilement
 * fonctionne quand même — il est juste plat.
 *
 * La section est l'îlot « console » de l'accueil (voir hitech.css).
 * `overflow: clip` coupe la grille de fond sans créer de conteneur de
 * défilement, donc le sticky des cartes tient toujours.
 */

/* Le fond vient de .console ; on y ajoute une nappe de grille en perspective. */
.section.methode {
    overflow: clip;
}

.section.methode::before {
    content: "";
    position: absolute;
    inset: auto 0 0;
    block-size: 60%;
    z-index: -1;
    pointer-events: none;
    background-image:
        linear-gradient(to right, rgb(46 163 242 / 0.16) 1px, transparent 1px),
        linear-gradient(to bottom, rgb(46 163 242 / 0.16) 1px, transparent 1px);
    background-size: 5rem 5rem;
    transform: perspective(40rem) rotateX(62deg);
    transform-origin: center bottom;
    -webkit-mask-image: linear-gradient(transparent, #000 70%);
    mask-image: linear-gradient(transparent, #000 70%);
}

.methode .entete-section h2 {
    background: linear-gradient(100deg, #fff 40%, #9fdcff);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.methode__pile {
    margin-block-start: clamp(3rem, 8vh, 6rem);
    list-style: none;
    padding: 0;
    display: grid;
    gap: clamp(1rem, 3vh, 2rem);
}

.methode__carte {
    position: sticky;
    /* Chaque carte se colle un cran plus bas que la précédente : on voit
       dépasser le haut de celles du dessous, comme un jeu de cartes en main. */
    inset-block-start: calc(var(--entete-h) + 1.5rem + var(--rang) * 1.1rem);
    /* Fond opaque : les cartes se recouvrent, un verre laisserait voir le
       texte de celle du dessous. */
    background:
        radial-gradient(28rem 16rem at 100% 50%, rgb(46 163 242 / 0.12), transparent 70%),
        linear-gradient(160deg, #110b3d, #0a0628);
    border-color: transparent;
    box-shadow: 0 30px 70px -30px rgb(0 0 0 / 0.9);
    min-block-size: clamp(14rem, 34vh, 20rem);
    justify-content: center;
    padding-inline-end: clamp(1.5rem, 22vw, 20rem);
    will-change: transform;
}

/* Chaque faisceau part d'un angle différent : ils ne tournent pas en chœur. */
.methode__carte.faisceau::after {
    animation-delay: calc(var(--rang) * -1.75s);
}

/* Le grand numéro en contour néon : il se lit de loin, la carte de près. */
.methode__numero {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-end: clamp(1rem, 4vw, 3.5rem);
    translate: 0 -50%;
    font-family: var(--police-titre);
    font-size: clamp(5rem, 3rem + 9vw, 13rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.05;
    color: transparent;
    -webkit-text-stroke: 1.5px rgb(46 163 242 / 0.85);
    filter: drop-shadow(0 0 18px rgb(46 163 242 / 0.45));
    pointer-events: none;
}

.methode__carte .carte__index {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    color: var(--texte-tres-doux);
}

.methode__etape {
    padding: 0.2rem 0.55rem;
    border: 1px solid rgb(46 163 242 / 0.6);
    border-radius: var(--rayon-xs);
    background: rgb(46 163 242 / 0.1);
    color: #9fdcff;
}

.methode__carte .carte__texte {
    max-inline-size: 60ch;
}

@media (max-width: 48rem) {
    .methode__carte {
        padding-inline-end: clamp(1.5rem, 3vw, 2.25rem);
    }

    .methode__numero {
        inset-block-start: 1rem;
        translate: none;
        font-size: 4.5rem;
        opacity: 0.4;
    }
}

@media (prefers-reduced-motion: reduce) {
    .methode__carte {
        position: static;
    }
}