/*
 | La FAQ — affichage public.
 |
 | Deux états, et c'est la clef de cette feuille :
 |
 |  - **sans JavaScript**, toutes les questions sont visibles et le bouton est
 |    masqué : il n'aurait rien à révéler. L'accordéon, lui, fonctionne — c'est
 |    le navigateur qui ouvre et ferme les `<details>`.
 |  - **avec JavaScript** (`.cw-faq--js`, posée par le script), les questions qui
 |    ne sont pas mises en avant s'escamotent et le bouton apparaît.
 |
 | Deux colonnes sur grand écran — le titre et son bouton d'un côté, les
 | questions de l'autre —, une seule sur mobile, où le bouton passe sous la
 | liste : c'est là qu'on arrive après avoir lu.
 |
 | Feuille scopée sous `.cw-faq` : elle est chargée dans un thème qui a la
 | sienne, aucune règle ne doit fuir. Les couleurs passent par des variables que
 | le thème peut redéfinir.
 */

.cw-faq {
    /*
     | Valeurs relevees dans le Figma (section `FAQ`) :
     |
     |   section    flex-row, gap 72, padding 96 48, justify center
     |   colonne    titre et bouton, gap 72, en space-between
     |   titre      STIX Two Text 56 / 61,6 / -3 %, #1c1917, aligne a GAUCHE
     |   bouton     padding 16 20, gap 16, fond #2d3e46, rayon 128 (gelule),
     |              libelle Familjen Grotesk Medium 16 / -2 %, #ffffff
     |   liste      gap 12
     |   question   fond #ffffff, rayon 8, padding 20, gap 8
     |   intitule   Familjen Grotesk SemiBold 18 / 22,32 / -2 %, #171c1d
     |   reponse    Familjen Grotesk 16 / 19,84 / -2 %, #32302e
     |
     | Le titre est a gauche et non centre : c'est la seule section de la page
     | dans ce cas, et c'est ce qui la distingue d'un bloc de contenu.
     */
    --cw-faq-marge: 96px 48px;
    --cw-faq-encre: #1c1917;
    --cw-faq-texte: #32302e;
    --cw-faq-bord: #e7e5e4;
    --cw-faq-carte: #ffffff;
    --cw-faq-blanc: #fff;
    --cw-faq-bouton-fond: #2d3e46;
    --cw-faq-rayon: 8px;
    --cw-faq-titre: "STIX Two Text", Georgia, "Times New Roman", serif;
    --cw-faq-colonne: 380px;

    box-sizing: border-box;
    display: grid;
    grid-template-columns: var(--cw-faq-colonne) 1fr;
    gap: 72px;
    align-items: start;
    padding: var(--cw-faq-marge);
    color: var(--cw-faq-texte);
    font-size: 16px;
    line-height: 1.24;
}

.cw-faq *,
.cw-faq *::before,
.cw-faq *::after {
    box-sizing: inherit;
}

.cw-faq-vide {
    padding: 1rem;
    border: 1px dashed #c9a227;
    background: #fffbe6;
    color: #6b5900;
    font-size: 0.9em;
}

/* ── La colonne de gauche ────────────────────────────────────────────────── */

.cw-faq-cote {
    position: sticky;
    /* La liste est longue : le titre et son bouton restent sous les yeux. */
    top: 2rem;
}

.cw-faq-titre {
    /* 72 px entre le titre et le bouton : le `gap` de la colonne. */
    margin: 0 0 72px;
    padding: 0;
    color: var(--cw-faq-encre);
    font-family: var(--cw-faq-titre);
    font-size: 56px;
    font-weight: 400;
    letter-spacing: -0.03em;
    line-height: 1.1;
}

.cw-faq-tout {
    /* Masqué tant que le script n'a pas escamoté les questions : sans lui, tout
       est déjà là et ce bouton ne mènerait nulle part. */
    display: none;
    gap: 16px;
    align-items: center;
    padding: 16px 20px;
    border: 1px solid var(--cw-faq-bouton-fond);
    border-radius: 128px;
    background: var(--cw-faq-bouton-fond);
    color: var(--cw-faq-blanc);
    font: inherit;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: -0.02em;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.cw-faq--js .cw-faq-tout {
    display: inline-flex;
}

/* Tout est déployé : le bouton a fait son office. */
.cw-faq.is-tout .cw-faq-tout {
    display: none;
}

.cw-faq-tout:hover,
.cw-faq-tout:focus-visible {
    background: transparent;
    color: var(--cw-faq-bouton-fond);
}

/* ── L'accordéon ─────────────────────────────────────────────────────────── */

/*
 | La liste est une pile de CARTES blanches espacees de 12 px, et non une suite
 | de lignes separees par des filets : c'est ce que montre la maquette, et c'est
 | ce qui detache chaque question du fond beige de la page.
 */
.cw-faq-liste {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

.cw-faq-item {
    border-radius: var(--cw-faq-rayon);
    background: var(--cw-faq-carte);
}

/* Escamotées jusqu'au clic sur le bouton — et seulement si le script tourne. */
.cw-faq--js .cw-faq-item[data-cw-faq-repli] {
    display: none;
}

.cw-faq--js.is-tout .cw-faq-item[data-cw-faq-repli] {
    display: block;
}

.cw-faq-question {
    display: flex;
    gap: 16px;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
    color: #171c1d;
    font-family: inherit;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.24;
    cursor: pointer;
    list-style: none;
}

/* Le triangle par défaut de `<details>` : retiré des deux façons qu'il faut. */
.cw-faq-question::-webkit-details-marker {
    display: none;
}

.cw-faq-question::marker {
    content: "";
}

.cw-faq-question:hover .cw-faq-intitule {
    color: var(--cw-faq-accent);
}

.cw-faq-question:focus-visible {
    outline: 2px solid var(--cw-faq-accent);
    outline-offset: 3px;
}

.cw-faq-intitule {
    transition: color 0.2s ease;
}

/* Le signe : deux barres, dont l'une disparaît à l'ouverture. */
.cw-faq-marque {
    position: relative;
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
}

.cw-faq-marque::before,
.cw-faq-marque::after {
    position: absolute;
    top: 50%;
    left: 50%;
    background: var(--cw-faq-encre);
    content: "";
    transform: translate(-50%, -50%);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.cw-faq-marque::before {
    width: 16px;
    height: 1.5px;
}

.cw-faq-marque::after {
    width: 1.5px;
    height: 16px;
}

.cw-faq-item[open] .cw-faq-marque::after {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(90deg);
}

/*
 | La reponse est dans la meme carte que la question : elle en reprend donc la
 | marge laterale, et n'ajoute qu'un ecart de 8 px sous l'intitule — le `gap` de
 | la carte dans la maquette.
 */
.cw-faq-reponse {
    padding: 0 20px 20px;
    margin-top: -12px;
    font-size: 16px;
    letter-spacing: -0.02em;
    line-height: 1.24;
}

.cw-faq-reponse p {
    margin: 0 0 0.9em;
}

.cw-faq-reponse p:last-child {
    margin-bottom: 0;
}

/* ── Écrans moyens ───────────────────────────────────────────────────────── */

@media (max-width: 1024px) {
    .cw-faq {
        --cw-faq-colonne: 240px;

        gap: 1.5rem 2.5rem;
    }

    .cw-faq-titre {
        font-size: 2.1em;
    }
}

/* ── Mobile ──────────────────────────────────────────────────────────────── */

@media (max-width: 782px) {
    .cw-faq {
        display: flex;
        flex-direction: column;
        /* La grille se calait en haut de chaque colonne ; en pile, il faut au
           contraire que titre, liste et bouton tiennent toute la largeur —
           sans quoi le titre se centrerait dans sa seule largeur de texte. */
        align-items: stretch;
        padding: 0.5rem 1.25rem 2rem;
    }

    /* `display: contents` fait entrer le titre et le bouton dans la colonne :
       ils s'ordonnent alors librement, et le bouton peut passer SOUS la liste —
       on le rencontre au moment où l'on a fini de lire. */
    .cw-faq-cote {
        position: static;
        display: contents;
    }

    .cw-faq-titre {
        order: 1;
        margin-bottom: 1.5rem;
        font-size: 1.9em;
        text-align: center;
    }

    .cw-faq-liste {
        order: 2;
    }

    .cw-faq-tout {
        order: 3;
        width: 100%;
        margin-top: 1.75rem;
        text-align: center;
    }

    .cw-faq--js .cw-faq-tout {
        display: block;
    }

    .cw-faq-question {
        gap: 1rem;
        padding: 1.15rem 0;
        font-size: 1.02em;
    }

    .cw-faq-reponse {
        padding-right: 20px;
    }
}

/* ── Confort de lecture ──────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .cw-faq-tout,
    .cw-faq-intitule,
    .cw-faq-marque::before,
    .cw-faq-marque::after {
        transition: none;
    }
}