/* ============================================================
   FAQ 10 — QUESTIONS OUVERTES
   Pas d'accordeon : tout est lisible d'un coup, en mosaique a deux colonnes.
   Pensee pour une page FAQ dediee, ou chaque reponse doit etre lue — et
   indexee — sans qu'on ait a cliquer pour la trouver.

   Mosaique en colonnes CSS : chaque bloc garde sa hauteur naturelle, et
   l'ordre de lecture reste celui de la donnee (colonne 1, puis colonne 2).

   Signature : apparition en cascade colonne par colonne, quand la mosaique
   arrive a l'ecran. Rien n'est masque sans JavaScript.
   ============================================================ */

.faq-10 {
    --faq-10-ivoire: color-mix(in srgb, var(--secondary) 7%, var(--white));
    --faq-10-filet: color-mix(in srgb, var(--black) 14%, transparent);
    --faq-10-courbe: cubic-bezier(0.22, 0.61, 0.36, 1);

    padding: clamp(4rem, 9vw, 7.5rem) 5%;
    background: var(--faq-10-ivoire);
    color: var(--black);
}

.faq-10__inner {
    max-width: 1180px;
    margin: 0 auto;
}

/* ---- En-tete ------------------------------------------------ */
.faq-10__entete {
    max-width: 680px;
    margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.faq-10__surtitre {
    margin: 0 0 1.25rem;
    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(--gray-dark);
}

.faq-10__titre,
.faq-10__titre:hover {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(2.125rem, 4.2vw, 3.5rem);
    font-weight: 400;
    line-height: 1.06;
    letter-spacing: -0.015em;
    text-wrap: balance;
    color: var(--black);
}

.faq-10__titre .mcl-accent {
    font-style: italic;
    color: inherit;
}

/* ---- Mosaique ----------------------------------------------- */
.faq-10__mosaique {
    columns: 2;
    column-gap: clamp(3rem, 7vw, 6.5rem);
}

/* Trois questions : trois colonnes, une seule rangee. A deux colonnes, la
   troisieme resterait seule sous la premiere. */
.faq-10__mosaique--trois {
    columns: 3;
    column-gap: clamp(2rem, 4.5vw, 4rem);
}

.faq-10__item {
    break-inside: avoid;
    padding: clamp(1.5rem, 2.6vw, 2rem) 0 clamp(1.75rem, 3vw, 2.4rem);
    border-top: 1px solid var(--faq-10-filet);
}

.faq-10__question,
.faq-10__question:hover {
    margin: 0 0 0.7rem;
    font-family: var(--font-body);
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.45;
    letter-spacing: -0.005em;
    text-wrap: pretty;
    color: var(--black);
}

.faq-10__texte {
    max-width: 56ch;
    margin: 0 0 0.9em;
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.8;
    color: var(--gray-dark);
}

.faq-10__texte:last-child {
    margin-bottom: 0;
}

.faq-10__texte .mcl-accent {
    font-style: italic;
    color: inherit;
}

/* ---- Cascade ------------------------------------------------ */
/* `--faq-10-i` (rang dans la cascade) est calcule par le script d'apres la
   colonne REELLE de chaque bloc : c'est lui qui fait descendre la premiere
   colonne avant la seconde. */
.faq-10--cascade .faq-10__item {
    opacity: 0;
    transform: translateY(16px);
}

.faq-10--vu .faq-10__item {
    opacity: 1;
    transform: none;
    transition: opacity 0.7s var(--faq-10-courbe), transform 0.7s var(--faq-10-courbe);
    transition-delay: calc(var(--faq-10-i, 0) * 90ms);
}

/* ---- Relance ------------------------------------------------ */
.faq-10__relance {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35rem 1rem;
    margin: clamp(1rem, 2vw, 1.5rem) 0 0;
    padding-top: clamp(1.5rem, 3vw, 2rem);
    border-top: 1px solid var(--faq-10-filet);
    font-family: var(--font-body);
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--gray-dark);
}

.faq-10__relance-texte {
    color: var(--gray-dark);
}

.faq-10__lien {
    padding: 0;
    background: none;
    border: 0;
    color: var(--primary);
    font-family: inherit;
    font-weight: 500;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.3em;
    cursor: pointer;
    transition: text-underline-offset 0.4s ease, color 0.4s ease;
}

.faq-10__lien:hover,
.faq-10__lien:focus-visible {
    color: var(--primary);
    text-underline-offset: 0.18em;
}

.faq-10__lien:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 4px;
}

@media (max-width: 1024px) {
    .faq-10__mosaique--trois {
        columns: 1;
    }
}

@media (max-width: 768px) {
    .faq-10__mosaique {
        columns: 1;
    }
}