/* Questions / Réponses — bande bleu nuit, rangée d'onglets, un seul cartouche.

   Toutes les valeurs ci-dessous sont relevées dans la feuille de la prod
   (`.faq`, `.faq__list_cat`, `.blk_q_and_a`, `.faq__question`, `.faq__answer`),
   converties de rem en px : la prod pose `html { font-size: 62.5% }`, donc
   1.6rem = 16px et 4.2rem = 42px. La maquette FAQ 7:1690 dit la même chose.

   Point de forme à retenir : le cartouche des réponses a son coin haut-gauche
   carré (`0 60px 60px 60px`), ce qui l'accroche visuellement à la rangée
   d'onglets — c'est un dossier à intercalaires, pas une carte. La prod et la
   maquette sont d'accord là-dessus. */

.exo-faq {
    /* La prod peint cette bande en #2A424D, pas en bleu foncé. */
    background: var(--exo-bleu-nuit);
    color: var(--exo-blanc);
}

/* La prod écarte titre, onglets et cartouche de 40px via un `gap`, sans marge
   sur les éléments : on reprend le même ressort. */
.exo-faq__inner {
    padding: 60px 120px;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

/* La marge basse de `.exo-titre` ferait doublon avec le `gap` du conteneur. */
.exo-faq__titre {
    margin: 0;
    color: var(--exo-blanc);
    text-transform: uppercase;
}

/* ----- Onglets ------------------------------------------------------------ */

.exo-faq__onglets {
    display: flex;
    gap: 20px;
}

/* `flex: 1` : les quatre onglets se partagent la rangée à parts égales, quelle
   que soit la longueur du libellé (« Le plan » contre « Modalités de
   souscription »). Hauteur naturelle de 41px = 10px + 21px + 10px. */
.exo-faq__onglet {
    flex: 1;
    min-width: 0;
    padding: 10px;
    border: 2px solid var(--exo-cerulean);
    border-radius: 8px;
    background: rgba(0, 103, 131, 0.4);
    color: var(--exo-blanc);
    font-family: inherit;
    font-size: 16px;
    font-weight: 400;
    /* Un bouton est centré par défaut ; la prod aligne le libellé sur le bord
       de lecture, et `start` suit l'hébreu sans règle supplémentaire. */
    text-align: start;
    line-height: normal;
    cursor: pointer;
}

/* Survol et onglet courant partagent le même aspect dans la prod : blanc, halo
   franc, libellé en gras. La prod passe `border: 0` ; on garde une bordure de
   2px transparente pour que la rangée ne saute pas de 4px au survol. */
.exo-faq__onglet:hover,
.exo-faq__onglet.is-active {
    border-color: transparent;
    background: var(--exo-blanc);
    box-shadow: 0 0 20px 0 var(--exo-blanc);
    color: var(--exo-bleu-nuit);
    font-weight: 700;
}

.exo-faq__onglet:focus-visible {
    outline: 2px solid var(--exo-jaune);
    outline-offset: 2px;
}

/* ----- Cartouche ---------------------------------------------------------- */

/* Un seul cadre pour les quatre catégories : c'est lui qui porte la bordure et
   les grands arrondis, les panneaux ne sont que du contenu qui s'échange. */
.exo-faq__boite {
    padding: 40px;
    border: 2px solid var(--exo-cerulean);
    border-radius: 0 60px 60px 60px;
    background: rgba(0, 103, 131, 0.4);
    box-shadow: 0 0 100px 0 rgba(0, 0, 0, 0.1);
}

/* En hébreu la rangée d'onglets démarre à droite : le coin carré, qui marque le
   début de la lecture, doit passer de l'autre côté. */
[dir = "rtl"] .exo-faq__boite {
    border-radius: 60px 0 60px 60px;
}

/* 20px entre chaque question et sa réponse, et autant d'une question à la
   suivante : la prod obtient ce rythme régulier avec un seul `gap`. */
.exo-faq__panneau,
.exo-faq__item {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Sans cette ligne, le `display: flex` ci-dessus l'emporterait sur l'attribut
   `hidden` et les quatre catégories s'afficheraient l'une sous l'autre. */
.exo-faq__panneau[hidden] {
    display: none;
}

/* Le panneau est focalisable au clavier : on montre le focus sans le cadre
   bleu du navigateur, illisible sur ce fond. */
.exo-faq__panneau:focus-visible {
    outline: 2px solid var(--exo-jaune);
    outline-offset: 4px;
}

/* ----- Question ----------------------------------------------------------- */

.exo-faq__question {
    display: flex;
    gap: 10px;
    margin: 0;
    color: var(--exo-jaune);
    font-size: 16px;
    font-weight: 700;
    line-height: normal;
}

/* La pastille est un petit carré jaune à chiffre blanc. `flex-start` la garde
   carrée quand la question passe sur deux lignes — la prod, qui laisse
   l'étirement par défaut, y affiche une barre jaune haute que la maquette ne
   montre nulle part. */
.exo-faq__numero {
    flex: 0 0 auto;
    align-self: flex-start;
    padding: 4px;
    border-radius: 2px;
    background: var(--exo-jaune);
    color: var(--exo-blanc);
}

.exo-faq__libelle {
    flex: 1 1 auto;
}

/* ----- Réponse ------------------------------------------------------------ */

/* Pas de retrait sous la question : la prod aligne la réponse sur la pastille.
   Interligne `normal` comme elle, et non l'1.5 hérité du corps de page. */
.exo-faq__reponse {
    color: var(--exo-blanc);
    font-size: 16px;
    font-weight: 400;
    line-height: normal;
}

/* Les réponses migrées arrivent en plusieurs `<p>` là où la prod n'avait que
   des retours à la ligne : marge nulle pour retrouver son bloc continu. */
.exo-faq__reponse p {
    margin: 0;
}

/* base.css supprime les puces partout ; la prod, elle, ne les retire qu'aux
   `<ul>` et garde la numérotation des `<ol>`, qui porte le sens dans les
   réponses (les 13 cas de déblocage, l'ordre d'imputation). La puce des `<ul>`
   est rétablie : aucune réponse n'en utilise aujourd'hui, mais sans marqueur le
   jour où l'admin en saisira une, la liste passerait pour un bug. */
.exo-faq__reponse ol {
    list-style: decimal outside;
}

.exo-faq__reponse ul {
    list-style: disc outside;
}

/* Le décalage des listes se fait sur le `<li>` : les `<ol>` sont remis à plat
   par le reset, le marqueur se loge dans cette marge. */
.exo-faq__reponse li {
    margin-left: 40px;
}

[dir = "rtl"] .exo-faq__reponse li {
    margin-left: 0;
    margin-right: 40px;
}

.exo-faq__reponse a {
    color: var(--exo-jaune);
    text-decoration: underline;
}

/* ----- Mobile ------------------------------------------------------------- */
/* Rupture à 768px et valeurs reprises du bloc responsive de la prod. */

@media screen and (max-width: 768px) {
    .exo-faq__inner {
        padding: 40px 20px;
        gap: 24px;
    }

    .exo-faq__titre {
        font-size: 28px;
    }

    .exo-faq__onglets {
        flex-direction: column;
        gap: 12px;
    }

    .exo-faq__onglet {
        font-size: 14px;
        text-align: center;
    }

    .exo-faq__boite {
        padding: 20px;
        border-radius: 20px;
    }

    /* Le coin carré n'a plus de sens quand les onglets sont empilés. */
    [dir = "rtl"] .exo-faq__boite {
        border-radius: 20px;
    }

    .exo-faq__panneau,
    .exo-faq__item {
        gap: 5px;
    }

    /* La pastille passe au-dessus de la question, faute de largeur. */
    .exo-faq__question {
        flex-direction: column;
        gap: 5px;
        font-size: 14px;
    }

    .exo-faq__numero {
        margin-bottom: 4px;
        padding: 2px 6px;
        font-size: 12px;
    }

    .exo-faq__reponse {
        font-size: 14px;
    }
}