/* ============================================================
   AVANTAGES 13 — RITUEL EN DEFILEMENT
   Deux colonnes. A gauche, sur-titre, titre et description restent en place
   (sticky) ; a droite, les points defilent un a un, comme les temps d'un
   rituel. Celui qui passe au centre de l'ecran est pleinement lisible, les
   autres s'effacent LEGEREMENT : ils passent au gris du theme, jamais sous
   le contraste AA.

   En mobile, colonne unique, sans sticky : la mise en avant reste, la
   colonne figee n'aurait pas la place d'exister.

   SIGNATURE — mise en avant progressive du point actif, et une fine barre
   verticale qui se remplit a mesure qu'on avance dans la liste. C'est le
   script qui pose l'attenuation : sans lui, tous les points sont pleins.

   FOND — ivoire par defaut, `--avantages-13-fond` se redefinit dans le theme.
   ============================================================ */

.avantages-13 {
    --avantages-13-fond: color-mix(in srgb, var(--secondary) 7%, var(--white));
    --avantages-13-filet: color-mix(in srgb, var(--black) 14%, transparent);
    --avantages-13-doux: color-mix(in srgb, var(--gray-dark) 78%, var(--black));
    --avantages-13-courbe: cubic-bezier(0.22, 1, 0.36, 1);

    padding: clamp(4.5rem, 10vw, 8.5rem) 5%;
    background: var(--avantages-13-fond);
    color: var(--black);
}

.avantages-13--bandeau {
    padding-block: clamp(2.5rem, 5vw, 4rem);
}

.avantages-13__inner {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(2.5rem, 6vw, 6.5rem);
    max-width: 1280px;
    margin: 0 auto;
}

.avantages-13--bandeau .avantages-13__inner {
    grid-template-columns: minmax(0, 1fr);
    max-width: 880px;
}

/* ---------- La colonne figee ---------- */

.avantages-13__collant {
    position: sticky;
    top: calc(var(--header-height, 0px) + clamp(2rem, 8vh, 5rem));
    display: flex;
    flex-direction: column;
    gap: clamp(1rem, 1.8vw, 1.5rem);
}

.avantages-13__surtitre {
    margin: 0;
    font-family: var(--font-body);
    font-size: 0.6875rem;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--avantages-13-doux);
}

.avantages-13__titre,
.avantages-13__titre:hover {
    max-width: 16ch;
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(2.125rem, 4vw, 3.5rem);
    font-weight: 400;
    line-height: 1.08;
    letter-spacing: -0.015em;
    text-wrap: balance;
    color: var(--black);
}

.avantages-13__titre .mcl-accent {
    font-style: italic;
    color: inherit;
}

.avantages-13__intro {
    max-width: 40ch;
    margin: 0;
    font-family: var(--font-body);
    font-size: clamp(1rem, 1.15vw, 1.0625rem);
    font-weight: 400;
    line-height: 1.85;
    color: var(--avantages-13-doux);
}

.avantages-13__masque,
.avantages-13__masque:hover {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
    color: var(--black);
}

/* ---------- Le flux de points et sa barre de progression ---------- */

.avantages-13__flux {
    position: relative;
    padding-left: clamp(1.75rem, 3.5vw, 3rem);
}

.avantages-13__piste {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 1px;
    background: var(--avantages-13-filet);
}

.avantages-13__progression {
    position: absolute;
    inset: 0;
    background: var(--black);
    transform: scaleY(var(--avantages-13-avance, 1));
    transform-origin: top center;
}

.avantages-13__points {
    margin: 0;
    padding: 0;
    list-style: none;
}

.avantages-13__point {
    display: grid;
    grid-template-columns: clamp(2.5rem, 4vw, 3.5rem) minmax(0, 1fr);
    column-gap: clamp(0.75rem, 1.5vw, 1.25rem);
    margin: 0;
    padding: clamp(2rem, 7vh, 4.5rem) 0;
}

.avantages-13__point:first-child {
    padding-top: 0.25rem;
}

.avantages-13__point:last-child {
    padding-bottom: 0.25rem;
}

.avantages-13__numero {
    grid-row: 1 / span 2;
    padding-top: 0.45em;
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    letter-spacing: 0.12em;
    color: var(--avantages-13-doux);
}

.avantages-13__point-titre,
.avantages-13__point-titre:hover {
    grid-column: 2;
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(1.625rem, 2.7vw, 2.375rem);
    font-weight: 400;
    line-height: 1.12;
    letter-spacing: -0.01em;
    color: var(--black);
}

.avantages-13__point-titre .mcl-accent {
    font-style: italic;
    color: inherit;
}

.avantages-13__point-texte {
    grid-column: 2;
    max-width: 46ch;
    margin: 0.85rem 0 0;
    font-family: var(--font-body);
    font-size: clamp(0.9375rem, 1.1vw, 1.0625rem);
    font-weight: 400;
    line-height: 1.8;
    color: var(--black);
}

/* ---------- Signature : le point actif, les autres en retrait ---------- */

.avantages-13--guide .avantages-13__point-titre,
.avantages-13--guide .avantages-13__point-texte,
.avantages-13--guide .avantages-13__numero {
    transition: color 0.6s var(--avantages-13-courbe);
}

/* En retrait = le gris du theme, deja teste AA sur ces fonds. Pas d'opacite :
   elle ferait tomber le contraste sans qu'on le voie. */
.avantages-13--guide .avantages-13__point:not(.is-actif) .avantages-13__point-titre,
.avantages-13--guide .avantages-13__point:not(.is-actif) .avantages-13__point-titre:hover,
.avantages-13--guide .avantages-13__point:not(.is-actif) .avantages-13__point-texte {
    color: var(--avantages-13-doux);
}

.avantages-13--guide .avantages-13__point.is-actif .avantages-13__numero {
    color: var(--black);
}

.avantages-13--guide .avantages-13__progression {
    transition: transform 0.25s linear;
}

/* ---------- Responsive ---------- */

@media (max-width: 768px) {
    .avantages-13__inner {
        grid-template-columns: minmax(0, 1fr);
    }

    .avantages-13__collant {
        position: static;
    }

    .avantages-13__point {
        padding-block: clamp(1.5rem, 5vh, 2.5rem);
    }
}

@media (prefers-reduced-motion: reduce) {
    .avantages-13--guide .avantages-13__point-titre,
    .avantages-13--guide .avantages-13__point-texte,
    .avantages-13--guide .avantages-13__numero,
    .avantages-13--guide .avantages-13__progression {
        transition: none;
    }
}