/*
 * Page « Offres du moment » — la feuille qui manquait
 * ---------------------------------------------------
 * Le contenu de la page porte cinq classes `lmi-offres-*` que NOUS avons
 * posees en construisant le gabarit : surtitre, chapo, soustitre, etapes,
 * faq. Aucune n'avait de regle. Les blocs sortaient donc nus : les etapes en
 * simple liste numerotee, et la FAQ avec le triangle par defaut du
 * navigateur, sans filet ni chevron.
 *
 * POURQUOI NE PAS SE BRANCHER SUR LES COMPOSANTS DU COEUR, QUI EXISTENT :
 * le coeur a bien un composant `faq` et un composant `etapes`, mais ils ne
 * s'appliquent QUE si le gabarit courant les declare. Mesure du 06/11/2026 :
 * le gabarit `page` n'en declare que 2, ni `faq` ni `etapes`. Sans
 * declaration, le marqueur `data-eld-composant` n'est pas pose ET la feuille
 * `bibliotheque-composants.css` n'est meme pas mise en file sur la page
 * (verifie : absente des 17 feuilles servies). Poser le marqueur a la main
 * n'y changerait rien, et declarer un composant de plus releve du plugin de
 * design du Studio, auquel on ne touche pas.
 *
 * Les regles ci-dessous reprennent donc, a l'identique, la specification des
 * composants `faq` et `etapes` du coeur : meme chevron a 8 px, meme hauteur
 * de cible de 44 px, meme pastille ronde de 32 px, meme trait de liaison.
 * Un lecteur doit reconnaitre la meme FAQ d'une page a l'autre.
 *
 * Tout passe par les jetons du site (`--eldorado-*`) : la page suit la marque
 * et restera juste si la palette change.
 */

/* --- Chapeau de page ---------------------------------------------- */

.lmi-offres-surtitre {
    margin-bottom: 8px;
    color: var(--eldorado-texte-doux);
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.lmi-offres-chapo {
    max-width: 62ch;
    margin-bottom: var(--eldorado-espace-section, 32px);
    font-size: 1.125rem;
    line-height: 1.6;
}

/* Se place sous son titre de section, d'ou la marge haute negative. */
.lmi-offres-soustitre {
    margin-top: -8px;
    color: var(--eldorado-texte-doux);
    font-size: 0.9375rem;
}

/* --- « Comment profiter d'un code promo ? » ------------------------ *
 * Specification du composant `etapes` du coeur : numero en pastille pleine
 * d'accent, relie au suivant par un filet vertical. Le compteur est remis a
 * zero sur la liste, jamais sur une autre. */

ol.lmi-offres-etapes {
    margin: var(--eldorado-espace-section, 32px) 0;
    padding: 0;
    list-style: none;
    counter-reset: lmi-offres-etape;
}

ol.lmi-offres-etapes > li {
    position: relative;
    padding: 0 0 24px 48px;
    counter-increment: lmi-offres-etape;
    line-height: 1.6;
}

ol.lmi-offres-etapes > li::before {
    content: counter(lmi-offres-etape);
    position: absolute;
    left: 0;
    top: 0;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: var(--eldorado-accent);
    color: var(--eldorado-sur-accent);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* Le filet s'arrete a la derniere etape : il relie, il ne pend pas. */
ol.lmi-offres-etapes > li:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 15px;
    top: 36px;
    bottom: 4px;
    border-left: 1px solid var(--eldorado-bordure);
}

ol.lmi-offres-etapes > li:last-child {
    padding-bottom: 0;
}

/* --- « Questions frequentes » -------------------------------------- *
 * Specification du composant `faq` du coeur. Les cinq blocs details sont
 * freres, chacun avec sa classe : le filet se pose donc sur chaque bloc, et
 * le dernier le perd pour ne pas doubler la separation de section. */

details.lmi-offres-faq {
    border-bottom: 1px solid var(--eldorado-bordure);
}

details.lmi-offres-faq:first-of-type {
    border-top: 1px solid var(--eldorado-bordure);
}

details.lmi-offres-faq > summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    /* 44 px : la cible tactile minimale recommandee. */
    min-height: 44px;
    padding: 16px 0;
    font-family: var(--eldorado-police-texte);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.4;
    cursor: pointer;
    /* Retire le triangle par defaut : `list-style` pour les navigateurs
       modernes, le pseudo-element webkit pour les plus anciens. */
    list-style: none;
}

details.lmi-offres-faq > summary::-webkit-details-marker {
    display: none;
}

details.lmi-offres-faq > summary::after {
    content: "";
    flex: none;
    width: 8px;
    height: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform var(--eldorado-effectif-duree, .2s) var(--eldorado-courbe, ease);
}

details.lmi-offres-faq[open] > summary::after {
    transform: rotate(-135deg);
}

details.lmi-offres-faq > summary:focus-visible {
    outline: 2px solid var(--eldorado-accent);
    outline-offset: 2px;
}

details.lmi-offres-faq > :not(summary) {
    margin: 0 0 16px;
    padding-right: 24px;
    color: var(--eldorado-texte-doux);
    line-height: 1.6;
}

/* Une animation de rotation n'a pas lieu d'etre pour qui la refuse. */
@media (prefers-reduced-motion: reduce) {
    details.lmi-offres-faq > summary::after {
        transition: none;
    }
}