/* ═══ L'ACCOMPAGNEMENT — feuille de page, et RIEN QUE de la page ═══
   *(reprise le 19 septembre 2026.)*

   ⚠️⚠️ CE QUI EST PARTI DANS `components.css`, ET POURQUOI. Le dépliant de questions (`.faq-*`) et
   le bloc de preuve (`.preuve-*`) vivaient ici alors qu'ils servent AUSSI à
   `/creation-site-internet-orange`. Cette page-là chargeait donc la feuille d'une autre page pour
   obtenir des règles — une dépendance qui casse au premier rangement, sans qu'aucune erreur ne se
   lève (une classe sans règle ne fait rien, elle ne proteste pas). Depuis le déplacement, le
   gabarit d'Orange ne charge plus cette feuille du tout.
   *C'est la quatrième fois que ce défaut est payé sur ce dépôt.*

   ⚠️ CE QUI A ÉTÉ SUPPRIMÉ, ET QU'IL NE FAUT PAS RESSUSCITER : dix-neuf classes héritées de
   l'époque où les prix vivaient ici — `.border-blue`, `.border-green`, `.highlighted`,
   `.pricing-badge`, `.badge-*`, `.promo-burst*`, `.promo-tag`, `.pricing-price-box`, `.price-*`,
   `.list-blue`, `.list-green`, `.icon-accent` — plus les `@keyframes promoGlow` qui n'animaient
   plus rien. Les prix vivent sur `/tarifs`, et la grille d'offres a quitté cette page avec eux.

   ⚠️ ET LE BALAYAGE QUI LES A TROUVÉES DOIT LIRE LE JAVASCRIPT. `.faq-open` n'apparaît dans aucun
   gabarit : c'est `assets/js/animations.js` qui la pose au clic. Un balayage qui ne lit que les
   gabarits la déclare morte, la supprime, et le dépliant cesse de s'ouvrir sans un mot.

   ⚠️ PAS DE `padding-top` DE HERO ICI. `components.css` le pose sur `main > section:first-of-type`,
   plus spécifique : le `180px` qui était écrit ici ne servait déjà plus à rien.
   ⚠️ NI DE `.section-subtitle`, qui était redéfinie ici par-dessus celle de `components.css` —
   deux sources pour la même règle, dont une qui ne s'applique qu'à deux pages sur six. */

#acc-hero h1 {
    font-size: clamp(2.5rem, 4vw, 4rem);
    margin-bottom: 30px;
}

/* ═══ Les premiers jours ═══ */

/* ⚠️ C'EST UN `<ol>`, ET LE NUMÉROTAGE EST UNE INFORMATION : « sous 24 h » n'a de sens qu'après
   « aujourd'hui ». Le rail et ses points disent la suite sans écrire 01 / 02 / 03 — même choix,
   et mêmes valeurs, que les trois temps de `/realisations`. Si l'un des deux bouge un jour, c'est
   le signe qu'il faut en faire un composant partagé plutôt que d'aligner les copies à la main. */
.etapes {
    list-style: none;
    margin: 0 auto;
    padding: 26px 0 0;
    max-width: 1000px;
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 34px;
}

.etapes::before {
    content: '';
    position: absolute;
    left: 5px;
    right: 5px;
    top: 4px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(to right, var(--accent-blue), var(--accent-green));
    opacity: 0.4;
}

.etapes > li {
    position: relative;
}

.etapes > li::before {
    content: '';
    position: absolute;
    left: 0;
    top: -26px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--bg-cards);
    border: 2px solid var(--accent-blue);
}

.etapes > li:last-child::before {
    border-color: var(--accent-green);
}

.etape-quand {
    display: block;
    margin-bottom: 10px;
    color: var(--text-primary);
    font-family: var(--font-titles);
    font-size: 1rem;
    font-weight: 700;
}

.etapes p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.7;
}

.etapes strong {
    color: var(--text-primary);
}

/* ═══ Ce qui est fait tous les mois ═══ */

#acc-suivi .features-note {
    margin-top: 42px;
}

#acc-suivi .features-note a {
    color: var(--text-secondary);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 4px;
    transition: color 0.3s ease;
}

#acc-suivi .features-note a:hover {
    color: var(--accent-green);
}

/* ═══ La FAQ — le composant est dans `components.css`, ici seulement son espacement de page ═══ */

#faq .section-title {
    margin-bottom: 56px;
}

/* ═══ La fin ═══ */

#acc-cta {
    padding-top: 100px;
    padding-bottom: 160px;
}

#acc-cta h2 {
    margin-bottom: 18px;
}

.acc-cta__actions {
    justify-content: center;
}

@media (max-width: 880px) {
    /* ⚠️ LE RAIL REDEVIENT VERTICAL EN MÊME TEMPS QUE LES COLONNES SE REPLIENT : les deux règles
       sont écrites ensemble exprès, séparées on en déplacerait une et le rail traverserait le vide. */
    .etapes {
        grid-template-columns: 1fr;
        gap: 26px;
        padding: 0 0 0 26px;
    }

    .etapes::before {
        left: 4px;
        right: auto;
        top: 7px;
        bottom: 7px;
        height: auto;
        width: 2px;
        background: linear-gradient(to bottom, var(--accent-blue), var(--accent-green));
    }

    .etapes > li::before {
        left: -26px;
        top: 5px;
    }
}