Design System

<h2>Titre H2</h2>
<h3>Titre H3</h3>
<h4>Titre H4</h4>
<p>Paragraphe courant avec <strong>gras</strong> et <a href="#">lien</a>.</p>
<p class="has-dropcap">Paragraphe avec drop cap...</p>

<!-- HTML : simple <span> — l'icône vient du CSS de la variante parent -->
<span class="al-ic" aria-hidden="true"></span>

/* CSS : SVG pré-colorés sur R2, chargés en background-image (cross-origin OK, pas besoin de CORS) */
.al-ic {
    width: 28px; height: 28px;
    display: block;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}
.alert.info .al-ic {
    background-image: url('https://images.fournisseurs-gaz.com/fournisseurs-gaz.com/icons/colored/info-blue.svg');
}

<!-- Variantes -->
<button class="btn btn-primary">Comparer les offres</button>
<button class="btn btn-outline">En savoir plus</button>
<button class="btn btn-ghost">Annuler</button>
<button class="btn btn-dark">Je m'abonne</button>
<button class="btn btn-danger">Supprimer</button>

<!-- Tailles : .btn-sm  ·  (défaut)  ·  .btn-lg -->
<button class="btn btn-primary btn-sm">Small</button>
<button class="btn btn-primary btn-lg">Large</button>

<!-- Modificateur pleine largeur -->
<button class="btn btn-primary btn-block">Pleine largeur</button>

<!-- Avec icône (SVG 16×16 en premier enfant) -->
<button class="btn btn-primary">
    <svg viewBox="0 0 24 24" ...>...</svg>
    Avec icône
</button>

<div class="progress-bar"></div>

<!-- Un seul élément vide suffit. article-design.js met à jour width
     selon la position du scroll dans l'élément .art-body. -->

<div class="alert info">
    <span class="al-ic" aria-hidden="true"></span>
    <div class="al-body">
        <div class="al-title">Titre du callout</div>
        <p>Contenu avec <strong>du gras</strong> et des liens possibles.</p>
    </div>
</div>

<!-- Sémantiques : info · tip · warning · success · error -->
<!-- Thématiques : pricing · guarantee · gas · eco · step · check ·
                    deadline · duration · meter · contract -->
<!-- Une seule classe de variante par callout. Fond + icône inclus. -->

<x-slot:tldr>
    <li>Premier point clé ;</li>
    <li>Deuxième point clé ;</li>
    <li>Troisième point clé.</li>
</x-slot:tldr>

<div class="keyfigs">
    <div>
        <div class="val">0,1042<span class="sup">€/kWh</span></div>
        <div class="lab">Libellé du chiffre</div>
        <div class="src">Source de la donnée</div>
    </div>
</div>

<div class="expert">
    <div class="ex-photo">
        <img src="https://images.fournisseurs-gaz.com/fournisseurs-gaz.com/authors/matias-perea.webp"
             alt="Matias Perea, Expert marché de l'énergie chez Selectra"
             loading="lazy" decoding="async" width="120" height="120">
    </div>
    <div>
        <div class="ex-label">Avis Selectra</div>
        <div class="ex-text">« Citation du verdict éditorial. »</div>
        <div class="ex-by"><strong>Nom Rédacteur</strong> · Titre</div>
    </div>
    <div class="ex-score">8,5<small>/10</small></div>
</div>

<div class="expert">
    <div class="ex-photo">MP</div>
    <div>
        <div class="ex-label">Avis Selectra</div>
        <div class="ex-text">« Citation du verdict éditorial. »</div>
        <div class="ex-by"><strong>Nom Rédacteur</strong> · Titre</div>
    </div>
</div>

<div class="example">
    <div class="b-title">Sujet de l'exemple (personnage nommé ou titre du calcul)</div>
    <p>Contenu chiffré de l'exemple.</p>
</div>

<!-- Le label "Exemple concret" + l'icône ampoule sont générés par
     .example::before — ne pas le saisir manuellement. -->

<dl class="def">
    <dt>Terme à définir</dt>
    <dd>Définition complète du terme.</dd>
</dl>

<!-- Le badge § orange et le label « Définition » sont générés
     automatiquement par le CSS. L'éditeur écrit juste <dl> + <dt> + <dd>. -->

<blockquote class="quote-ed">
    <p>« Texte de la citation. »</p>
    <cite>Source ou auteur</cite>
</blockquote>

<x-layouts.article
    author="matias-perea"
    datePublished="2026-01-01"
    :readingTime="6"
    ...>
    
</x-layouts.article>


<x-author-footer
    :author="$author"
    :publish-date="$publishDate"
    :modified-date="$modifiedDate"
    :reading-time="$readingTime"
    :show-pubmeta="false" />

<section class="related">
    <h3>À lire aussi</h3>
    <div class="related-grid">
        <a href="..." class="related-card">
            <div class="thumb"></div>
            <div class="rc-cat">Catégorie</div>
            <div class="b-title">Titre de l'article lié</div>
        </a>
    </div>
</section>

<!-- Auto-injecté par le layout via <x-related-articles />.
     Le dégradé thumb change par position (1er orange, 2e bleu, 3e vert). -->

<div class="proscons">
    <div class="pros">
        <div class="b-title">— Les points forts</div>
        <ul>
            <li>Avantage 1</li>
            <li>Avantage 2</li>
        </ul>
    </div>
    <div class="cons">
        <div class="b-title">— Les points faibles</div>
        <ul>
            <li>Inconvénient 1</li>
            <li>Inconvénient 2</li>
        </ul>
    </div>
</div>

<ul class="ds-offer-list">
    <li class="ds-offer-row">
        <span class="rank">01</span>
        <div class="supplier">
            <div class="lg"><img src="logo-url" alt="Fournisseur"></div>
            <div>
                <p class="offer-kicker">Offre</p>
                <div class="b-title">Nom de l'offre</div>
                <span class="ofn">Type de tarif</span>
            </div>
        </div>
        <ul class="checklist">
            <li>Avantage 1</li>
            <li>Avantage 2</li>
            <li>Avantage 3</li>
        </ul>
        <div class="price-cell">
            <div class="pr">1&nbsp;211&nbsp;€<small>/an TTC · 0,0996&nbsp;€/kWh</small></div>
            <span class="eco">Économies de 148&nbsp;€</span>
        </div>
        <div class="cta">
            <a class="row-phone" href="tel:...">09&nbsp;75&nbsp;18&nbsp;41&nbsp;65</a>
            <a href="..." class="row-online">Découvrir l'offre →</a>
        </div>
    </li>
</ul>

<ol class="timeline">
    <li>
        <div class="tl-date">Juillet 2023</div>
        <div class="tl-title">Titre de l'événement</div>
        <p>Description courte.</p>
    </li>
    <li class="is-current">
        <div class="tl-date">Mai 2026</div>
        <div class="tl-title">Jalon courant</div>
        <p>Pastille orange pleine avec halo.</p>
    </li>
</ol>

<ol class="steps">
    <li>
        <div>
            <div class="b-title">Titre de l'étape</div>
            <p>Description détaillée.</p>
        </div>
    </li>
</ol>

<!-- Le <div> wrapper est obligatoire : .steps > li est un grid à 2 colonnes
     (pastille numérotée + contenu). Sans wrapper, le <p> passerait sous
     la pastille. Compteur CSS automatique, pas d'attribut value à gérer. -->

<div class="ds-t3-grid">
    <article class="ds-t3-card">  
        <div class="ds-t3-flag ds-t3-flag--green">Offre la moins chère</div>
        <div class="ds-t3-header">
            <div class="ds-t3-logo"><img src="..." alt="..."></div>
            <div class="ds-t3-meta">
                <div class="ds-t3-provider">TotalEnergies</div>
                <div class="ds-t3-offer">Spéciale Gaz</div>
                <div class="ds-t3-rating">★★★★★ <strong>4,3</strong></div>
                <div class="ds-t3-tags"><span class="ds-t3-tag ds-t3-tag--blue">Prix fixe</span></div>
            </div>
            <div class="ds-t3-score">
                <img class="sscore-badge" src="/scores/A-score.svg" alt="Selectra Score A" width="23" height="36">
            </div>
        </div>
        <div class="ds-t3-divider"></div>
        <div class="ds-t3-savings">
            <div class="ds-t3-savings-label">Économies</div>
            <div class="ds-t3-savings-value">−148 €</div>
            <div class="ds-t3-savings-note">/an vs le Prix Repère Gaz</div>
        </div>
        <div class="ds-t3-divider"></div>
        <div class="ds-t3-args">...liste des arguments avec coches...</div>
        <div class="ds-t3-cta">
            <a href="tel:..." class="btn btn-primary btn-lg">09 69 32 14 60</a>
            <div class="ds-t3-footer">
                <a class="ds-t3-footer-link">Voir les tarifs détaillés</a>
                <div class="ds-t3-partner">Partenaire Selectra</div>
            </div>
        </div>
    </article>
</div>

<!-- Variantes de flag : .ds-t3-flag--green · .ds-t3-flag--featured · .ds-t3-flag--yellow
     La carte featured utilise .ds-t3-card--featured pour être scalée / centrée. -->

<!-- Même structure que #ranklist : .ds-offer-list > .ds-offer-row -->
<!-- Différence sémantique : toutes les lignes partagent le même fournisseur. -->
<ul class="ds-offer-list">
    <li class="ds-offer-row">
        <span class="rank">01</span>
        <div class="supplier">
            <div class="lg"><img src="logo-fournisseur" alt="..."></div>
            <div>
                <p class="offer-kicker">Offre</p>
                <div class="b-title">Nom de l'offre</div>
                <span class="ofn">Type tarifaire</span>
            </div>
        </div>
        <ul class="checklist">...avantages...</ul>
        <div class="price-cell">
            <div class="pr">1&nbsp;211&nbsp;€<small>...</small></div>
            <span class="eco">Économies de ... €</span>
        </div>
        <div class="cta">
            <a class="row-phone" href="tel:...">...</a>
            <a href="..." class="row-online">Découvrir l'offre →</a>
        </div>
    </li>
</ul>

<article class="partner">
    <div class="prt-grid">
        <div class="prt-lg" style="background: #...">T</div>
        <div>
            <div class="b-title">Spéciale Gaz — TotalEnergies</div>
            <p class="prt-sub">Tagline courte.</p>
            <div class="prt-tags">
                <span>...badges...</span>
            </div>
        </div>
        <div class="prt-price">
            <div class="prt-price-row">
                <strong>1&nbsp;211&nbsp;€</strong>
                <span class="info-tip" data-tip="Détails...">ⓘ</span>
            </div>
            <small>/an TTC</small>
        </div>
    </div>
</article>

<!-- Le badge "Offre partenaire" en haut-gauche est généré automatiquement
     par .partner::before. -->

<!-- Version maxi : échelle horizontale A-E, data-grade boost la lettre courante -->
<div class="sscore sscore-mini" data-grade="B">
    <span class="sscore-grades">
        <span>A</span><span>B</span><span>C</span><span>D</span><span>E</span>
    </span>
</div>

<!-- Version mini : badge SVG pré-rendu hébergé sur R2 -->
<img class="sscore-badge"
     src="https://images.fournisseurs-gaz.com/scores/B-score.svg"
     alt="Selectra Score B" width="23" height="36" loading="lazy">

<!-- Variante petite (tableaux serrés) : ajouter .sscore-badge-sm -->
<img class="sscore-badge sscore-badge-sm" src="..." alt="..." width="15" height="24">

<!-- Fichiers disponibles : /scores/{A|B|C|D|E}-score.svg -->

<div class="ds-savings-table-wrap">
    <table class="ds-savings-table">
        <thead>
            <tr>
                <th>Profil</th><th>Conso</th><th>Médiane</th><th>Meilleure</th><th>Économie</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Libellé en gras</td>
                <td>~6 000 kWh</td>
                <td>960 €</td>
                <td>845 €</td>
                <td><strong class="eco">−115 €</strong></td>
            </tr>
        </tbody>
    </table>
</div>
<p class="tbl-caption">Légende ou source du tableau.</p>

<div class="tabs" x-data="{ tab: 't1' }">
    <div class="tab-list" role="tablist">
        <button type="button" class="tab-btn" :class="{ 'on': tab === 't1' }" @click="tab = 't1'" data-tab="t1" role="tab">Onglet 1</button>
        <button type="button" class="tab-btn" :class="{ 'on': tab === 't2' }" @click="tab = 't2'" data-tab="t2" role="tab">Onglet 2</button>
    </div>
    <div class="tab-panel" :class="{ 'on': tab === 't1' }" data-tab="t1">Contenu 1</div>
    <div class="tab-panel" :class="{ 'on': tab === 't2' }" data-tab="t2">Contenu 2</div>
</div>

<!-- IMPORTANT : les attributs data-tab sont obligatoires.
     article-design.js utilise un switch vanilla en plus d'Alpine,
     qui se base sur data-tab pour cibler le bon panel. -->

@php
    $faqItems = [
        ['q' => 'Question 1 ?', 'a' => 'Réponse 1.'],
        ['q' => 'Question 2 ?', 'a' => 'Réponse 2.'],
    ];
    $faqSchema = [
        '@context' => 'https://schema.org',
        '@type' => 'FAQPage',
        'mainEntity' => array_map(fn ($i) => [
            '@type' => 'Question',
            'name' => $i['q'],
            'acceptedAnswer' => ['@type' => 'Answer', 'text' => $i['a']],
        ], $faqItems),
    ];
@endphp

@push('head')
<script type="application/ld+json">{"@context":"https://schema.org","@type":"FAQPage","mainEntity":[{"@type":"Question","name":"Comment changer de fournisseur sans coupure ?","acceptedAnswer":{"@type":"Answer","text":"Le nouveau fournisseur résilie automatiquement votre ancien contrat. Aucune intervention technique, pas de coupure, pas de frais. Délai moyen de bascule : 21 jours."}},{"@type":"Question","name":"Quelle différence entre PRG et tarif réglementé ?","acceptedAnswer":{"@type":"Answer","text":"Le tarif réglementé a disparu en juillet 2023. Le PRG est un indice mensuel publié par la CRE, qui sert de référence aux fournisseurs pour construire leurs offres, sans leur être imposé."}},{"@type":"Question","name":"Les offres vertes sont-elles plus chères ?","acceptedAnswer":{"@type":"Answer","text":"L'option verte (biogaz ou compensation carbone) coûte en moyenne 1,5 à 3 % de plus que l'équivalent non-vert chez le même fournisseur."}}]}</script>
@endpush

<div class="faq">
    @foreach($faqItems as $item)
        <details>
            <summary>Les offres vertes sont-elles plus chères ?</summary>
            <div class="faq-body"><p>L'option verte (biogaz ou compensation carbone) coûte en moyenne 1,5 à 3 % de plus que l'équivalent non-vert chez le même fournisseur.</p></div>
        </details>
    @endforeach
</div>

<aside class="phone-cta-provider" aria-label="Parler à un conseiller EDF">
    <div class="pcp-main">
        <div class="pcp-txt">
            <div class="pcp-badge">
                <span class="pcp-badge-ic" aria-hidden="true"><svg>...</svg></span>
                <span>Jusqu'à <strong>350&nbsp;€</strong> d'économies<sup>(1)</sup></span>
            </div>
            <h3 class="pcp-title">
                Infos et souscriptions EDF&nbsp;:
                <span class="pcp-accent">un conseiller vous accompagne.</span>
            </h3>
            <p>Obtenez toutes les informations sur les offres EDF…
                <strong>Service gratuit, sans engagement.</strong></p>
        </div>

        <div class="pcp-right">
            <div class="pcp-logo"><img src="..." alt="Logo EDF"></div>
            <a href="tel:..." class="pcp-phone">
                <span class="pcp-phone-ic" aria-hidden="true"><svg>...</svg></span>
                <span class="pcp-phone-txt">
                    <small>Appelez — service gratuit</small>
                    <strong>09&nbsp;69&nbsp;32&nbsp;14&nbsp;60</strong>
                </span>
            </a>
        </div>
    </div>
    <p class="pcp-mention">Service Selectra non surtaxé…</p>
</aside>

<!-- Règle légale : la mention .pcp-mention est obligatoire (service Selectra, courtier).
     L'accent orange se pose UNIQUEMENT sur la clause finale du titre (la promesse conseiller). -->

<aside class="phone-cta-2" aria-label="Parler à un conseiller Selectra">
    <div class="pc2-main">
        <div class="pc2-txt">
            <div class="pc2-badge">
                <span class="pc2-badge-ic" aria-hidden="true"><svg>...</svg></span>
                <span>Jusqu'à <strong>350&nbsp;€</strong> d'économies</span>
                <span class="info-tip" data-tip="Estimation basée sur…" tabindex="0" aria-label="Détails du calcul">
                    <svg>...</svg>
                </span>
            </div>
            <h3 class="pc2-title">
                Un conseiller Selectra
                <span class="pc2-accent">compare pour vous.</span>
            </h3>
            <p>Il identifie une offre adaptée à votre profil et souscrit à votre place.</p>
        </div>

        <a href="tel:..." class="pc2-phone">
            <span class="pc2-phone-ic" aria-hidden="true"><svg>...</svg></span>
            <span class="pc2-phone-txt">
                <small>Appelez — service gratuit</small>
                <strong>09&nbsp;74&nbsp;59&nbsp;22&nbsp;94</strong>
            </span>
        </a>
    </div>
</aside>

<!-- Page générique : pas de .pc2-mention. La mention légale n'est requise que sur
     les pages partenaire / non-partenaire / Engie / Enedis-GRDF (cf. /monetisation). -->

<x-layouts.article
    ctaHeadline="Votre déménagement gaz clés en main —"
    ctaAccentHeadline="un conseiller s'occupe de tout."
    ctaText="Résiliation, comparaison… <strong>Service gratuit.</strong>"
    :ctaSavings="$ctaSavings ?? null"
    ctaTooltip="Estimation basée sur 14 000 kWh/an à Paris 11ᵉ…"
    
>


<x-layouts.article
    ctaHeadline="Infos et souscriptions EDF :"
    ctaAccentHeadline="un conseiller vous accompagne."
    ctaText="Obtenez toutes les informations… <strong>Service gratuit.</strong>"
    :ctaSavings="$ctaSavings ?? null"
    ctaTooltip="Estimation basée sur 6 000 kWh/an en 6 kVA option Base…"
    ctaAnnonce="Annonce — Service Selectra partenaire d'EDF pour une sélection d'offres…"
    ctaLogo="https://images.fournisseurs-gaz.com/logos/fournisseurs/edf-md.png"
    ctaLogoAlt="Logo EDF"
>

<x-article-comparator />


<x-article-comparator
    title="Comparez les offres avant la mise en service —"
    accent="Selectra trouve l'offre adaptée à votre commune."
    subtitle="Renseignez votre code postal et votre consommation pour obtenir le classement personnalisé des offres disponibles à votre adresse."
    buttonLabel="Voir les offres pour ma commune"
/>

<div
    x-data="businessHours(hoursConfig)"
    x-cloak
    class="fixed bottom-0 inset-x-0 z-40 md:hidden"
>
    <div
        x-data="{ show: false }"
        x-init="const update = () => { show = window.scrollY > 400; };
                window.addEventListener('scroll', update, { passive: true });
                update();"
        :class="show ? 'translate-y-0' : 'translate-y-full'"
        class="bg-white/95 backdrop-blur-md border-t border-gray-200 shadow-[0_-6px_20px_rgba(20,36,59,0.08)] px-3 py-2.5 transition-transform duration-200 ease-out"
        style="padding-bottom: max(0.625rem, env(safe-area-inset-bottom))"
    >
        <div class="flex items-stretch gap-2">
            <!-- Logo (partenaire uniquement) -->
            @if($isPartner)
                <img src="{{ $logoUrl }}" alt="..." class="h-7 w-auto max-w-[72px] object-contain shrink-0">
            @endif

            <!-- Ouvert : CTA appel -->
            <a href="tel:{{ $phoneTel }}" x-show="isOpen" x-cloak
               class="flex-1 inline-flex items-center justify-center gap-2 bg-primary text-white rounded-xl py-2.5 px-3 shadow-[inset_0_-2px_0_rgba(0,0,0,0.14)] active:scale-[0.98]">
                <svg class="w-4 h-4">...</svg>
                <span class="flex flex-col leading-tight text-left">
                    <span class="text-[9px] opacity-85 uppercase tracking-wider">Appel gratuit</span>
                    <span class="text-[15px] font-extrabold">{{ $phone }}</span>
                </span>
            </a>

            <!-- Fermé : CTA comparateur -->
            <a href="/comparateur-gaz" x-show="!isOpen" x-cloak
               class="flex-1 inline-flex items-center justify-center gap-1.5 bg-primary text-white text-sm font-bold rounded-xl py-2.5 px-3">
                <svg class="w-4 h-4">...</svg>
                Comparer les offres
            </a>
        </div>
    </div>
</div>

<!-- Logique ouvert/fermé via x-data="businessHours(...)" (helper Alpine global)
     Apparition au scroll > 400px, translate-y-full par défaut -->

<x-tools.diagnostic-aides-demenagement />