/* Simulateur — bande bleu nuit, trois cartes cerclées de cerulean.

   Toutes les valeurs viennent de la feuille de la prod (`.simulator`,
   `.ct_simulator`, `.row`, `.champ_*`, `#slider-li`), converties de rem en px :
   la prod pose `html { font-size: 62.5% }`, donc 1.6rem = 16px, 2rem = 20px et
   4.2rem = 42px.

   Deux écarts assumés par rapport à la prod, l'un et l'autre décrits dans le
   rapport :

   1. La prod donne `padding: 60px 120px` à la bande et laisse le contenu
      s'étirer sur toute la largeur. Sur un écran de 1440 cela fait exactement
      1200px de contenu : on garde donc le cadre 1200px du socle, qui rend la
      même chose à 1440 et se tient mieux au-delà.

   2. La prod pose `class="hidden"` sur le curseur et sur son pourcentage, et
      `.hidden` y vaut `visibility: hidden`. Résultat : la réglette existe,
      occupe sa place et fonctionne à la souris, mais reste invisible. C'est un
      reliquat, pas une intention — la maquette SIMULATEUR la montre. On la rend
      donc visible, aux couleurs de la charte. */

.exo-sim {
    /* Relevé sur la prod : #2A424D, la même bande que la FAQ. */
    background: var(--exo-bleu-nuit);
    color: var(--exo-blanc);
}

.exo-sim__inner {
    padding: 60px 120px;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.exo-sim__titre {
    margin: 0;
    color: var(--exo-blanc);
    text-transform: uppercase;
}

.exo-sim__form {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

/* ----- Carte ---------------------------------------------------------------
   `.ct_simulator` : cadre de 2px cerulean sur un fond cerulean à 50%, coins de
   20px et une ombre portée noire très diffuse (100px) qui décolle la carte de
   la bande. */

.exo-sim__carte {
    border-radius: 20px;
    border: 2px solid var(--exo-cerulean);
    background: rgba(0, 103, 131, 0.5);
    box-shadow: 0 0 100px 0 var(--exo-noir);
    padding: 40px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.exo-sim__soustitre {
    margin: 0;
    color: var(--exo-blanc);
    font-size: 20px;
    font-weight: 700;
}

.exo-sim__intro,
.exo-sim__intro p {
    margin: 0;
    color: var(--exo-blanc);
    font-size: 16px;
    font-weight: 400;
}

.exo-sim__intro strong {
    font-weight: 700;
}

/* ----- Bandes de résultat --------------------------------------------------
   `.row` : coins de 10px, 10px de marge intérieure, texte blanc gras 16px.
   Deux rangées consécutives dans la même bande sont séparées de 10px. */

.exo-sim__bande {
    border-radius: 10px;
    padding: 10px;
    font-size: 16px;
    font-weight: 700;
    color: var(--exo-blanc);
}

.exo-sim__bande--nuit  { background: var(--exo-bleu-nuit); }
.exo-sim__bande--clair { background: var(--exo-bleu-clair); }
.exo-sim__bande--jaune { background: var(--exo-jaune); }

/* La prod n'utilise pas --exo-bleu-fonce plein mais sa version à 40%. */
.exo-sim__bande--fonce { background: rgba(20, 63, 77, 0.4); }

.exo-sim__bande--blanc {
    background: var(--exo-blanc);
    color: var(--exo-cerulean);
}

.exo-sim__rangee {
    display: flex;
    justify-content: space-between;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
}

.exo-sim__rangee + .exo-sim__rangee {
    margin-top: 10px;
}

.exo-sim__libelle {
    /* La prod ne met en gras que la ligne d'abondement ; le reste hérite du
       poids de la bande, déjà à 700. */
    flex: 1 1 auto;
}

.exo-sim__libelle--gras {
    font-weight: 700;
}

.exo-sim__cellules {
    text-align: right;
    flex: 0 0 auto;
}

html[dir="rtl"] .exo-sim__cellules {
    text-align: left;
}

/* Rangée à colonnes (`#row--colonne`) : des cases de 140px alignées à droite,
   espacées de 10px. */
.exo-sim__cellules--colonnes {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

.exo-sim__cellules--colonnes > .exo-sim__champ,
.exo-sim__cellules--colonnes > .exo-sim__creux {
    width: 140px;
}

/* En-tête de colonnes : 14px, chaque libellé centré sur sa case. */
.exo-sim__cellules--entete {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    font-size: 14px;
    font-weight: 700;
    color: var(--exo-blanc);
}

.exo-sim__cellules--entete span {
    width: 140px;
    display: inline-block;
    text-align: center;
}

/* Sur bande blanche, la prod colore aussi l'en-tête en cerulean. */
.exo-sim__bande--blanc .exo-sim__cellules--entete {
    color: var(--exo-cerulean);
}

.exo-sim__creux {
    display: inline-block;
}

/* ----- Champs --------------------------------------------------------------
   Saisie : fond blanc, coins de 8px, texte bleu clair gras aligné à droite,
   70% de la largeur de la cellule. Résultat : pas de fond, pas de bordure. */

.exo-sim__champ {
    font-family: inherit;
    font-size: 16px;
    line-height: normal;
    text-align: right;
}

html[dir="rtl"] .exo-sim__champ {
    text-align: left;
}

.exo-sim__champ--saisie,
.exo-sim__champ--curseur {
    padding: 8px;
    border: 0;
    border-radius: 8px;
    background: var(--exo-blanc);
    color: var(--exo-bleu-clair);
    font-weight: 700;
    width: 70%;
}

.exo-sim__champ--blanc-gras,
.exo-sim__champ--blanc,
.exo-sim__champ--cerulean {
    background: transparent;
    border: none;
    padding: 0;
}

.exo-sim__champ--blanc-gras {
    color: var(--exo-blanc);
    font-weight: 700;
}

.exo-sim__champ--blanc {
    color: var(--exo-blanc);
    font-weight: 400;
}

.exo-sim__champ--cerulean {
    color: var(--exo-cerulean);
    font-weight: 700;
}

/* Un résultat n'est pas saisissable : le curseur du texte n'a rien à y faire. */
.exo-sim__champ[readonly] {
    cursor: default;
}

/* ----- Curseur du cours à échéance ----------------------------------------
   `#slider-ul` aligne le libellé et la réglette avec 20px d'écart, `#slider-li`
   met la réglette, le pourcentage et le champ bout à bout avec 10px. */

.exo-sim__rangee--curseur {
    gap: 20px;
}

.exo-sim__rangee--curseur .exo-sim__cellules {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: flex-end;
    flex: 1 1 auto;
}

.exo-sim__rangee--curseur .exo-sim__champ--curseur {
    width: 28%;
}

.exo-sim__rangee--curseur .exo-sim__cellules--colonnes .exo-sim__champ {
    width: 140px;
}

.exo-sim__curseur {
    width: 300px;
    max-width: 100%;
    accent-color: var(--exo-jaune);
    cursor: pointer;
}

/* `.slider-percent` : 20px, gras, largeur fixe de 100px pour que la ligne ne
   saute pas quand la valeur passe de « 0 » à « -10 ».
   La prod écrit `color: var(--cerulean)`, soit #006783 sur une bande #2A424D —
   illisible, mais sans conséquence puisqu'elle masque le libellé. Comme on le
   rend visible, on prend le bleu clair de la maquette, qui passe le contraste. */
.exo-sim__pourcent {
    width: 100px;
    flex: 0 0 auto;
    text-align: center;
    color: var(--exo-bleu-clair);
    font-size: 20px;
    font-weight: 700;
}

/* ----- Bloc repliable Oui / Non -------------------------------------------
   En-tête bleu clair à 60% avec les coins hauts arrondis, corps blanc à 10%
   avec les coins bas arrondis : les deux forment un seul cartouche. */

.exo-sim__repli-entete {
    padding: 10px;
    border-radius: 10px 10px 0 0;
    background: rgba(15, 148, 195, 0.6);
    color: var(--exo-blanc);
    font-size: 16px;
}

.exo-sim__repli-entete ul {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.exo-sim__repli-entete ul li:first-child {
    font-weight: 700;
}

.exo-sim__bascule {
    display: flex;
    gap: 10px;
}

.exo-sim__btn {
    border: 0;
    border-radius: 8px;
    background: var(--exo-cerulean);
    padding: 4px 8px;
    color: var(--exo-bleu-clair);
    text-align: center;
    font-family: inherit;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
}

.exo-sim__btn.is-active {
    background: var(--exo-blanc);
    color: var(--exo-bleu-nuit);
}

/* GLISSEMENT DU REPLI. Le legacy repliait ce bloc en `slideUp/slideDown(300)`
   (jQuery), qui anime la hauteur RÉELLE. On le reproduit par une transition de
   `max-height` : le JS (simulator.js) fixe la valeur exacte au moment du clic —
   `scrollHeight` du bloc — puis la ramène à zéro. Aucun plafond deviné, donc
   aucun contenu coupé (le simulateur français mesure 1674 px replié), et rien
   n'est figé à l'ouverture — le JS libère `max-height` en fin de transition pour
   que le bloc puisse encore grandir si une saisie l'allonge. */
.exo-sim__repli-corps {
    border-radius: 0 0 10px 10px;
    background: rgba(255, 254, 254, 0.1);
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow: hidden;
    /* Le padding entre aussi dans l'animation : sinon une bande de 20 px de fond
       subsiste une fois le bloc replié, là où le legacy descend jusqu'à zéro. */
    transition: max-height 0.3s ease, padding 0.3s ease;
}

/* ----- Notes ---------------------------------------------------------------
   `.simulator small` : 13px gras blanc, centré par `margin: auto`. */

.exo-sim__note,
.exo-sim__note p {
    font-size: 13px;
    font-weight: 700;
    color: var(--exo-blanc);
    margin: 0;
}

.exo-sim__note--pied {
    margin: 0 auto;
}

.exo-sim__note ul {
    margin: 0 0 0 20px;
}

.exo-sim__note li {
    list-style: disc;
}

/* ----- Bande de souscription ----------------------------------------------
   `.simulator__souscrire` : deux flèches encadrant le bouton, écartées de
   280px de chaque bord sur la prod. */

.exo-sim__souscrire {
    display: flex;
    padding: 0 280px;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
}

/* La seconde flèche est la première retournée. */
.exo-sim__souscrire > img:last-child {
    transform: rotate(180deg);
}

html[dir="rtl"] .exo-sim__souscrire > img:last-child {
    transform: none;
}

html[dir="rtl"] .exo-sim__souscrire > img:first-child {
    transform: rotate(180deg);
}

/* ----- Sous 1050px ---------------------------------------------------------
   La prod bascule à 1050px : les rangées passent en colonne, les champs
   prennent toute la largeur, la réglette et les flèches disparaissent. */

@media screen and (max-width: 1050px) {
    .exo-sim__inner {
        padding: 10px;
        gap: 20px;
    }

    .exo-sim__titre {
        font-size: 24px;
    }

    .exo-sim__form {
        gap: 20px;
    }

    .exo-sim__carte {
        padding: 10px;
        gap: 15px;
    }

    .exo-sim__soustitre {
        font-size: 16px;
        text-align: center;
    }

    .exo-sim__intro,
    .exo-sim__intro p {
        font-size: 14px;
        text-align: left;
    }

    .exo-sim__repli-entete ul {
        flex-direction: column;
        gap: 10px;
    }

    .exo-sim__repli-entete ul li {
        justify-content: center;
        text-align: center;
    }

    .exo-sim__repli-corps {
        gap: 15px;
        padding: 10px;
    }

    .exo-sim__rangee {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
    }

    .exo-sim__libelle,
    .exo-sim__cellules {
        width: 100%;
        text-align: left;
    }

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

    .exo-sim__champ--saisie,
    .exo-sim__champ--curseur {
        width: 100%;
    }

    .exo-sim__rangee--curseur {
        gap: 10px;
    }

    .exo-sim__rangee--curseur .exo-sim__cellules {
        flex-wrap: wrap;
    }

    .exo-sim__rangee--curseur .exo-sim__champ--curseur {
        width: 100%;
    }

    /* La prod masque réglette et pourcentage sur mobile : le champ suffit. */
    .exo-sim__curseur,
    .exo-sim__pourcent {
        display: none;
    }

    /* Une rangée à colonnes ne rentre pas : elle défile horizontalement, dans
       son propre cadre, sans jamais faire déborder la page. */
    .exo-sim__bande:has(.exo-sim__cellules--colonnes) {
        overflow-x: auto;
    }

    .exo-sim__bande:has(.exo-sim__cellules--colonnes) .exo-sim__rangee {
        flex-direction: row;
        align-items: center;
        min-width: 750px;
    }

    .exo-sim__cellules--colonnes > .exo-sim__champ,
    .exo-sim__cellules--colonnes > .exo-sim__creux {
        width: 140px;
    }

    .exo-sim__souscrire {
        flex-direction: column;
        padding: 10px;
        gap: 20px;
    }

    .exo-sim__souscrire > img {
        display: none;
    }

    .exo-sim__note,
    .exo-sim__note p {
        font-size: 12px;
    }

    .exo-sim__note ul {
        margin-left: 16px;
    }
}