/* ══════════════════════════════════════════════════════════════════════════
   SOLUTION ENTREPRISE — feuille des CINQ PAGES FILLES.

   Une seule feuille pour /solution-entreprise/application-web, site-web,
   application-mobile, logiciel-metier et maintenance-support : c'est la même
   page, rendue par le même gabarit, avec un contenu différent.

   ── POURQUOI ELLE NE RÉUTILISE PAS solution-entreprise-style.css ──────────

   Celle du hub fait plus de mille lignes et décrit un configurateur : barre de
   sections collante, cartes de solution, grille de services, onglets, panier,
   formulaire. Ces pages-ci n'ont rien de tout cela — un fil d'Ariane, un titre
   et des sections de texte. La charger entière pour en employer trois règles
   aurait coûté plus cher que ce fichier tout entier.

   CE QU'ELLES LUI EMPRUNTENT, EN REVANCHE, C'EST SON HABILLAGE : Archivo, le
   fond #f5f7fb, l'encre #101a2b, le gris secondaire #647287 et l'accent
   #1e5eff. Ce sont des pages filles ; elles doivent avoir l'air de venir de là.
   Ces gris sont ceux que le hub a retenus APRÈS mesure de contraste (voir son
   en-tête) : les reprendre tels quels, c'est hériter du réglage AA plutôt que
   de le refaire à l'œil.

   Tout est préfixé `sep-` et vit sous `.sep` — la page est servie dans le
   gabarit public, à côté de Bootstrap 3, d'elements.css et de fp-universal, et
   rien ici ne doit fuir vers le reste du site.
   ══════════════════════════════════════════════════════════════════════════ */

.sep {
    font-family: Archivo, system-ui, -apple-system, 'Segoe UI', sans-serif;
    background: #f5f7fb;
    color: #101a2b;
    letter-spacing: -0.012em;
    line-height: 1.6;
    padding: 34px 20px 72px;
}

.sep *,
.sep *::before,
.sep *::after { box-sizing: border-box; }

/* La colonne de lecture. 760px : au-delà, une ligne de texte devient pénible à
   suivre, et ces pages sont faites pour être lues, pas parcourues. */
.sep-corps {
    max-width: 760px;
    margin: 0 auto;
}

/* ──────────────────────────── Le fil d'Ariane ─────────────────────────── */

.sep-fil {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    color: #647287;
    margin-bottom: 22px;
}

.sep-fil a {
    color: #647287;
    text-decoration: none;
    border-bottom: 1px solid transparent;
}

.sep-fil a:hover,
.sep-fil a:focus {
    color: #1e5eff;
    border-bottom-color: #1e5eff;
}

.sep-fil [aria-current='page'] { color: #101a2b; font-weight: 600; }

/* ──────────────────────────── Le titre de page ────────────────────────── */

.sep-tete { margin-bottom: 38px; }

.sep-tete h1 {
    font-size: 40px;
    line-height: 1.16;
    font-weight: 800;
    letter-spacing: -0.028em;
    color: #101a2b;
    margin: 0;
}

.sep-promesse {
    margin: 16px 0 0;
    font-size: 18px;
    line-height: 1.55;
    color: #56657c;
}

/* ───────────────────────────── Les sections ───────────────────────────── */

/* La marge est POSÉE ENTRE les sections, jamais sur la première : une section
   qui ne se rend pas ne doit laisser aucun blanc derrière elle, et c'est
   exactement ce qui arrive tant que le contenu n'est pas validé. */
.sep-sect + .sep-sect { margin-top: 44px; }

.sep-h2 {
    font-size: 24px;
    line-height: 1.25;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #101a2b;
    margin: 0 0 16px;
}

.sep-h3 {
    font-size: 16.5px;
    line-height: 1.35;
    font-weight: 600;
    color: #101a2b;
    margin: 0 0 6px;
}

.sep-p {
    font-size: 16px;
    color: #56657c;
    margin: 0 0 14px;
}

.sep-p:last-child { margin-bottom: 0; }

/* ─────────────────────── Listes simples et couples ────────────────────── */

.sep-liste {
    margin: 0;
    padding-left: 22px;
    font-size: 16px;
    color: #56657c;
}

.sep-liste li { margin-bottom: 8px; }

.sep-couples {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 14px;
}

.sep-couples li {
    background: #fff;
    border: 1px solid #e2e8f2;
    border-radius: 12px;
    padding: 18px 20px;
}

/* LES ÉTAPES SE NUMÉROTENT PAR CSS, sur un `ol` qui reste un `ol`.
   `list-style: none` supprime les puces du navigateur ; le compteur les
   remplace devant le titre de chaque étape. L'ordre reste donc porté par la
   balise — un lecteur d'écran annonce « élément 2 sur 5 » même si la pastille
   bleue, elle, est purement décorative. */
ol.sep-couples { counter-reset: sep-etape; }

ol.sep-couples li { counter-increment: sep-etape; }

ol.sep-couples .sep-h3::before {
    content: counter(sep-etape);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    margin-right: 10px;
    border-radius: 999px;
    background: #eaf0ff;
    color: #1d5cfa;
    font-size: 12.5px;
    font-weight: 700;
    vertical-align: 2px;
}

/* ───────────────── Questions fréquentes, encadré, appel ───────────────── */

.sep-faq .sep-h3 { margin-top: 22px; }

.sep-faq .sep-h3:first-child { margin-top: 0; }

.sep-bloc {
    background: #fff;
    border: 1px solid #e2e8f2;
    border-radius: 12px;
    padding: 22px 24px;
}

.sep-lien {
    display: inline-block;
    margin-top: 6px;
    color: #1e5eff;
    font-weight: 600;
    font-size: 15px;
    text-decoration: none;
    border-bottom: 1px solid #c3d4ff;
}

.sep-lien:hover,
.sep-lien:focus { color: #1547cc; border-bottom-color: #1547cc; }

.sep-cta {
    background: #fff;
    border: 1px solid #d9e2f2;
    border-radius: 12px;
    padding: 30px 28px;
    text-align: center;
}

.sep-cta .sep-p { margin-bottom: 20px; }

.sep-btn {
    display: inline-block;
    padding: 14px 24px;
    border-radius: 9px;
    background: #1e5eff;
    border: 1px solid #1e5eff;
    color: #fff;
    font-size: 14.5px;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    transition: background .15s, border-color .15s;
}

.sep-btn:hover,
.sep-btn:focus { background: #1547cc; border-color: #1547cc; color: #fff; }

/* ──────────────────────────────── Téléphone ───────────────────────────── */

@media (max-width: 640px) {
    .sep { padding: 24px 16px 56px; }
    .sep-tete h1 { font-size: 30px; }
    .sep-promesse { font-size: 16.5px; }
    .sep-h2 { font-size: 21px; }
    .sep-sect + .sep-sect { margin-top: 36px; }
    .sep-cta { padding: 24px 18px; }
}