Couleurs — Marque

La palette est intentionnellement restreinte. Navy = structure · Electric = conversion · Orange = éditorial

Typographie — Display (Epilogue)

Utilisé pour H1–H4 et les grands chiffres stats. Tracking négatif, poids 700–900.

Typographie — Body (Fira Sans)

Tout le reste : corps, UI, nav, boutons, labels, cellules tableau, footer.

Logo

Construit en CSS — pas d'image. Deux variantes : fond clair et fond sombre.

Boutons

Flat au repos. Hover : élévation légère + ombre. Transitions 0.18s cubic-bezier(.2,.7,.2,1).

Eyebrows & Badges

Pills 100px. Eyebrow = contexte éditorial (orange). Badges = labels inline sur cartes.

Callouts

Info (contexte neutre), Success (bon à savoir), Warning (attention), Danger (gotcha).

Cartes offres

Fond blanc, border 1px solid --lfo-border, radius 16px. Hover : translateY(-3px) + shadow md + border-strong.

Cartes statistiques

Fond navy semi-transparent. Sur fond navy uniquement. Hover : translateY(-3px) + border electric.

Cartes guides

Fond blanc, icon block electric 44×44px, radius 10px. Hover élévation.

Rayons de bordure

Quatre niveaux : sm (chips), md (callouts), lg (cartes), pill (eyebrows).

Élévation & ombres

Plat au repos. Ombres sur hover uniquement (sauf CTA flottant).

L'essentiel & Tech cards

Bloc TL;DR vert + cartes technologie côte à côte dans les articles.

Motion

Transitions et animations — aucun rebond, aucun spring. Site éditorial sérieux.

Listes

5 variantes. Structure : <li><span class="marker">…</span><span>texte</span></li>

Timeline d'étapes — .step-row

Frise verticale avec ligne de connexion entre les étapes. Chaque étape a un badge numéroté (fond primary) et un titre + description. Usage : guides, processus, calendriers. Toujours envelopper les étapes dans un <div> nu — le :last-child supprime la ligne sur la dernière étape.

<div>
    <div class="step-row">
        <div class="step-num">1</div>
        <div>
            <p class="step-title" style="margin-top:0">Titre de l'étape</p>
            <p class="step-desc">Description de l'étape.</p>
        </div>
    </div>
    <div class="step-row">
        <div class="step-num">2</div>
        <div>
            <p class="step-title" style="margin-top:0">Titre de l'étape</p>
            <p class="step-desc">Description de l'étape.</p>
        </div>
    </div>
</div>


<div class="step-num" style="font-size:11px;letter-spacing:-0.5px">2027</div>

Bloc maillage — <x-shared.link-block>

Encadré "À lire aussi" visuellement distinct du corps de texte. Un seul lien par bloc. Prop href obligatoire, label optionnel (défaut : "À lire aussi").

<x-shared.link-block href="/guide/ftth">
    Tout comprendre sur la fibre optique FTTH
</x-shared.link-block>


<x-shared.link-block href="/guide/ftth" label="Voir aussi">
    Tout comprendre sur la fibre optique FTTH
</x-shared.link-block>

Navigation situationnelle — <x-shared.situation-nav>

Grille de cartes qui aident l'utilisateur à sauter à la section correspondant à sa situation. Liens internes (ancres) ou URLs complètes. Auto-responsive : 1 carte → 1 col, 2 → 2 cols, 3+ → 3 cols.

<x-shared.situation-nav :items="[
    ['href' => '#anchor',  'label' => 'Label principal', 'sub' => 'Sous-titre', 'variant' => 'green',  'icon' => 'check'],
    ['href' => '#anchor2', 'label' => 'Autre situation', 'sub' => 'Sous-titre', 'variant' => 'orange', 'icon' => 'cross'],
    ['href' => '#anchor3', 'label' => 'Troisième cas',   'sub' => 'Sous-titre', 'variant' => 'blue',   'icon' => 'calendar'],
]" />

Carte fermeture cuivre — <x-tools.carte-fermeture-cuivre>

Carte Leaflet interactive — 20 400 communes, dates de fermeture ADSL/RTC par lot Orange. Recherche par nom, code postal ou INSEE. Filtres par année de fermeture et département. Version LFO : palette primary, sidebar #F4F7FB, lien éligibilité câblé sur /test-eligibilite.

<x-tools.carte-fermeture-cuivre />


<x-tools.carte-fermeture-cuivre :title="false" />


<x-tools.carte-fermeture-cuivre title="Fermeture de l'ADSL dans votre commune" />

Vérificateur d'éligibilité — <x-shared.aide-raccordement-checker>

Wizard Alpine.js 5 questions pour qualifier l'éligibilité à l'aide ASP au raccordement fibre. Autonome, aucune prop requise.

<x-shared.aide-raccordement-checker />

Couleurs opérateurs

Marques officielles — jamais sur fond coloré, toujours sur fond blanc ou navy .