<div class="fe-prose">
    <h2>Titre H2</h2>
    <h3>Titre H3</h3>
    <p>Paragraphe avec <strong>gras</strong> et <a href="#">lien</a>.</p>
    <ul>
        <li>Item avec puce orange ;</li>
        <li>Deuxième item.</li>
    </ul>
</div>

/* Fonts :
   --fe-font-display: Fraunces (titres, quotes, stats)
   --fe-font-body:    Inter (corps, UI)
   --fe-font-mono:    JetBrains Mono (chiffres, code, labels) */

<!-- Primaire (bleu) -->
<a href="#" class="fe-btn fe-btn-primary">Comparer les offres</a>

<!-- Accent (orange) -->
<a href="#" class="fe-btn fe-btn-accent">Souscrire en ligne</a>

<!-- Pleine largeur -->
<a href="#" class="fe-btn fe-btn-primary fe-btn-full">Pleine largeur</a>

<!-- Variante bleue (défaut) -->
<x-fe-tip label="Bon à savoir" title="Titre optionnel">
    <p>Contenu du conseil.</p>
</x-fe-tip>

<!-- Variante verte (astuce) -->
<x-fe-tip label="Notre petite astuce" title="Titre" variant="astuce">
    <p>Contenu de l'astuce.</p>
</x-fe-tip>

<!-- HTML natif -->
<div class="fe-tip">  <!-- ou class="fe-tip astuce" pour le vert -->
    <div class="fe-tip-ico"><svg>...</svg></div>
    <div>
        <div class="fe-tip-label">Bon à savoir</div>
        <div class="fe-tip-title">Titre optionnel</div>
        <div class="fe-tip-body"><p>Contenu.</p></div>
    </div>
</div>

<!-- Orange (défaut) -->
<x-fe-warn label="Attention" title="Titre optionnel">
    <p>Contenu de l'avertissement.</p>
</x-fe-warn>

<!-- Rouge (bold) -->
<x-fe-warn label="Attention" title="Titre" variant="bold">
    <p>Contenu critique.</p>
</x-fe-warn>

<x-fe-insight label="Bon à savoir" title="Titre optionnel">
    <p>Contenu factuel.</p>
</x-fe-insight>

<!-- HTML natif -->
<div class="fe-insight">
    <div class="fe-insight-label"><span class="dot"></span> Bon à savoir</div>
    <div class="fe-insight-title">Titre optionnel</div>
    <div class="fe-insight-body"><p>Contenu.</p></div>
</div>

<x-fe-expert author="misitia-ravaloson">
    Texte du verdict éditorial.
</x-fe-expert>

<!-- Props disponibles :
     author    (slug) — charge avatar, nom, rôle, nb articles
     name      — override du nom
     role      — override du rôle
     verified  — bool, badge "Expert certifié" -->

<!-- HTML natif -->
<div class="fe-expert">
    <div class="fe-expert-avatar">MR</div>
    <div>
        <div class="fe-expert-label">L'avis de l'expert</div>
        <div class="fe-expert-name">Nom <span class="fe-expert-verified">Expert certifié</span></div>
        <div class="fe-expert-role">Rôle · X articles</div>
        <blockquote class="fe-expert-quote">Texte du verdict.</blockquote>
    </div>
</div>

<div class="fe-stat">
    <div class="fe-stat-grid">
        <div>
            <div class="fe-stat-num">0,1740<span class="unit">€/kWh</span></div>
            <div class="fe-stat-label">Libellé du chiffre</div>
            <div class="fe-stat-source">Source</div>
        </div>
    </div>
</div>

<!-- Responsive : < 640px passe en 1 colonne -->

<div class="fe-proscons">
    <div class="fe-proscons-grid">
        <div class="fe-proscons-col pros">
            <div class="fe-proscons-header">
                <span class="fe-proscons-badge pros"><svg>...</svg></span>
                Avantages
            </div>
            <ul>
                <li><span class="fe-proscons-dot pros"><svg>...</svg></span> Item</li>
            </ul>
        </div>
        <div class="fe-proscons-col cons">
            <div class="fe-proscons-header">
                <span class="fe-proscons-badge cons"><svg>...</svg></span>
                Inconvénients
            </div>
            <ul>
                <li><span class="fe-proscons-dot cons"><svg>...</svg></span> Item</li>
            </ul>
        </div>
    </div>
</div>

<div class="fe-ordered">
    <div class="fe-ordered-item">
        <div class="fe-ordered-num">01</div>
        <div>
            <div class="fe-ordered-title">Titre de l'étape</div>
            <div class="fe-ordered-text">Description.</div>
        </div>
    </div>
</div>

<div class="fe-channels fe-channels-cols-2">
    <div class="fe-channel">
        <div class="fe-channel-head">
            <div class="fe-channel-ico"><svg>...</svg></div>
            <div class="fe-channel-label">Par téléphone</div>
        </div>
        <div class="fe-channel-body">Contenu.</div>
    </div>
</div>

<div class="fe-table-wrap">
    <table class="fe-table">
        <thead>
            <tr>
                <th>Libellé</th>
                <th class="num">Valeur</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Libellé</td>
                <td class="num">0,1740</td>
            </tr>
        </tbody>
        <caption>Source et date.</caption>
    </table>
</div>

<!-- .num aligne à droite + JetBrains Mono tabular-nums
     <caption> en bas, 12px gris -->

{{-- Le composant fetch les prix depuis l'API via l'offer ID --}}
{{-- CSS : classes .pg-* dans felec-v2.css --}}
{{-- JS  : pricingGrid() enregistré dans app.js --}}

{{-- Usage 1 : avec offer ID (fetch automatique depuis l'API) --}}

    {{-- copier le HTML ci-dessus (HEAD, HEATMAP, FACTURE, ANNUEL, FOOTER) --}}


{{-- Usage 2 : avec données inline (si presentPrices déjà disponible côté serveur) --}}

    
    {{-- même HTML --}}


{{-- Propriétés Alpine exposées : --}}
{{-- consoLegend  — légende de répartition conso (Base/HPHC/Tempo) --}}
{{-- sourceLabel  — "Prix TTC en vigueur en {mois année}." --}}
{{-- selectedRow.cols[c.key] — prix unitaire par colonne --}}

@php $items = [
    [
        'title' => 'Titre de la section',
        'content' => '
Contenu HTML riche avec gras, listes, liens.
',
    ],
    [
        'title' => 'Autre section',
        'content' => '
Autre contenu.
',
    ],
]; @endphp

{{-- Mode multi-items (le plus courant) --}}


{{-- Mode single-item (slot) --}}

    
Contenu directement dans le slot.


{{-- Avec schéma JSON-LD FAQPage (rare en mid-article) --}}

@php $faqs = [
    ['Question 1 ?', '
Réponse avec HTML.
'],
    ['Question 2 ?', '
Réponse 2.
'],
]; @endphp

{{-- Schéma JSON-LD FAQPage --}}
@push('head')

@endpush

{{-- Un seul x-data partagé → un seul item ouvert à la fois --}}

    Questions fréquentes


    @foreach($faqs as $j => $faq)
    

        
            {{ $faq[0] }}
            
        
        

            

                {!! $faq[1] !!}
            
        
    
    @endforeach

<div class="fe-sim">
    <div class="fe-sim-header">
        <div class="fe-sim-header-title">
            <div class="fe-sim-ico"><svg>...</svg></div>
            <div>
                <span class="fe-sim-eyebrow">Simulateur</span>
                <div class="fe-sim-title">Titre</div>
            </div>
        </div>
    </div>
    <div class="fe-sim-steps">
        <div class="fe-sim-step">
            <div class="fe-sim-step-num">1</div>
            <div>
                <div class="fe-field">
                    <label class="fe-field-label">Label</label>
                    <input type="text" class="fe-input">
                </div>
                <div class="fe-seg">
                    <button class="active">Option</button>
                </div>
            </div>
        </div>
    </div>
    <div class="fe-sim-result">
        <div class="fe-sim-result-item">
            <div class="label">Label</div>
            <div class="value">1 143<span class="unit">€/an</span></div>
        </div>
    </div>
</div>

<div class="fe-split">
    <div class="fe-split-left">
        <div class="fe-split-ico"><svg>...</svg></div>
        <div>
            <div class="fe-split-title">Titre</div>
            <p class="fe-split-body">Description.</p>
        </div>
    </div>
    <div class="fe-split-right">
        <select class="fe-split-select">...</select>
        <a href="#" class="fe-btn fe-btn-primary fe-btn-full">CTA</a>
    </div>
</div>

<div class="fe-side-toc">
    <div class="fe-side-toc-head">Sommaire</div>
    <ul class="fe-side-toc-list">
        <div class="fe-side-toc-progress"></div>
        <li class="fe-side-toc-item revealed passed"><a href="#">Section passée</a></li>
        <li class="fe-side-toc-item revealed active"><a href="#">Section courante</a></li>
        <li class="fe-side-toc-item revealed"><a href="#">Section à venir</a></li>
        <li class="fe-side-toc-item revealed sub"><a href="#">Sous-section (H3)</a></li>
        <li class="fe-side-toc-item"><a href="#">Section non révélée</a></li>
    </ul>
    <div class="fe-side-toc-footer">
        <span><span class="count">3</span> / 6 sections</span>
    </div>
</div>

<!-- Classes dynamiques (JS) :
     .revealed  — item visible (fade-in)
     .active    — section en cours de lecture (pastille bleue)
     .passed    — section déjà lue (pastille grise)
     .sub       — sous-section H3 (indentée, plus petite) -->

<x-fe-mon
    title="Titre du CTA"
    phone="09 75 18 41 65"
    href="/selection/fr-ei-cc-felec"
    disclaimer="Service gratuit, sans engagement."
    statNum="350"
    statLabel="€ d'économies max/an"
/>

<!-- Props disponibles :
     title       — Titre en Fraunces 20px
     phone       — Numéro affiché dans le bouton CTA
     href        — Lien du bouton (défaut : /selection/fr-ei-cc-felec)
     disclaimer  — Texte en italique sous le bouton
     statNum     — Chiffre à droite (mono 42px)
     statLabel   — Label sous le chiffre -->

<x-fe-mon-compare
    title="Titre"
    body="Description."
    href="/contrat-electricite-gaz/comparatif"
    cta="Voir les meilleures offres"
    :options="[
        ['value', 'Label'],
    ]"
/>

<!-- Props disponibles :
     title    — Titre 20px bold
     body     — Description 14.5px
     href     — Lien cible (défaut : /contrat-electricite-gaz/comparatif)
     cta      — Texte du bouton
     options  — Array de [value, label] pour le dropdown -->

<div class="fe-hero">
    <div class="fe-hero-inner">
        <div class="fe-hero-main">
            <nav class="fe-hero-crumb">...</nav>
            <div class="fe-hero-eyebrow">
                <span class="fe-hero-eyebrow-dot"></span>
                Guide complet
            </div>
            <h1 class="fe-hero-title">Titre de l'article</h1>
            <div class="fe-hero-meta">
                <div class="fe-hero-avatars">...</div>
                <div class="fe-hero-authors">...</div>
            </div>
            <p class="fe-hero-lede">Chapô de l'article.</p>
        </div>
        <div class="fe-hero-card">
            <div class="fe-hero-card-trust">...</div>
            <div class="fe-hero-card-body">
                <div class="fe-hero-card-title">CTA titre</div>
                <ul class="fe-hero-card-list">...</ul>
                <a href="tel:..." class="fe-hero-card-cta">Numéro</a>
            </div>
        </div>
    </div>
</div>