Shortcodes déménagement : référence des composants

x-callout

Utilisé sur 100 pages /demenagement

Encadré coloré expressif avec barre verticale, icône et titre par défaut. 6 variants : warning (orange), danger (rouge), info (bleu, défaut), success (vert), tip (jaune), important (violet). Titre customisable via title, icône désactivable via :icon="false".

Variant warning

<x-callout variant="warning">
    Si vous ne renvoyez pas le formulaire Cerfa dans les 30 jours, votre
    demande est <strong>automatiquement rejetée</strong>.
</x-callout>

Variant important (titre custom + liste)

<x-callout variant="important" title="À vérifier avant le jour J">
    <ul class="list-disc list-inside space-y-1">
        <li>Relever les compteurs (eau, gaz, électricité).</li>
        <li>Faire suivre votre courrier auprès de La Poste.</li>
        <li>Mettre à jour votre adresse sur la carte grise.</li>
    </ul>
</x-callout>

Variants info, success, tip, danger

x-check-list

Utilisé sur 13 pages /demenagement

Liste à puces dans un encart coloré (vert, bleu ou orange). Variant éditorial plus dense que <x-icon-list>. Idéal pour les listes type « 15 plus grandes sociétés de déménagement », « Documents à fournir », « Conditions d'éligibilité ». Les items peuvent être des chaînes ou des objets {text, href} pour devenir des liens.

<x-check-list
    title="Les 5 plus grandes sociétés de déménagement en France :"
    :items="[
        ['text' => 'Demeco',                      'href' => '/demenagement/demenageurs/demeco'],
        ['text' => 'Les Gentlemen du Déménagement', 'href' => '/demenagement/demenageurs/gentlemen-demenagement'],
        ['text' => 'Les Déménageurs Bretons',       'href' => '/demenagement/demenageurs/demenageurs-bretons'],
        'France Armor Déménagements',
        'AGS Mobilitas',
    ]"
/>

x-accordion

Utilisé sur 87 pages /demenagement

Groupe de boîtes dépliables (titre cliquable + contenu masqué) regroupées dans un même conteneur. Le wrapper <x-accordion variant="card"> contient une ou plusieurs <x-accordion.item>. Sert à empiler des sous-sections denses (problèmes fréquents, cas particuliers, sous-parcours) sans noyer le lecteur, tout en gardant le contenu indexable.

Différence avec les voisins : <x-faq> = liste de paires Q/R avec schema FAQPage (pour une vraie FAQ). <x-accordion> = conteneur multi-items, chaque <x-accordion.item> ayant un contenu libre dans son slot.

Pattern recommandé pour les sections « Problèmes fréquents » : une <x-accordion.item> par sous-problème dans un même <x-accordion variant="card">, avec id="..." pour préserver les ancres intra-page et title portant éventuellement un emoji décoratif (le contexte de l'en-tête sort de la règle §5.2 anti-emoji H3/H4).

<x-accordion variant="card">
<x-accordion.item id="contester-edl" title="📝 Contester un état des lieux de sortie après signature">
    <p class="mb-4">Il existe <strong>deux manières de contester</strong> l'état des lieux de sortie une fois signé :</p>
    <x-icon-list icon="arrow" color="primary" :items="[
        'Saisir la Commission Départementale de Conciliation pour un règlement amiable.',
        'Saisir le juge des contentieux de la protection si l\'amiable a échoué.',
    ]" />
</x-accordion.item>

<x-accordion.item id="absence-edl" title="❓ Absence d'état des lieux de sortie : quelles conséquences ?">
    <p class="mb-4">L'absence d'état des lieux induit que le <strong>logement est réputé en bon état</strong>...</p>
</x-accordion.item>
</x-accordion>

x-table

Utilisé sur 69 pages /demenagement

Wrapper canonique des tables de la rubrique. Scroll horizontal mobile, ombre de scroll, en-têtes en gras. 3 colonnes maximum sur mobile ; au-delà, préférer <x-accordion> ou <x-tabs>. Chiffres toujours suivis de leur unité avec espace insécable.

<x-table caption="Préavis légal par situation (loi du 6 juillet 1989)">
    <thead>
        <tr>
            <th>Situation</th>
            <th>Zone tendue</th>
            <th>Hors zone tendue</th>
        </tr>
    </thead>
    <tbody>
        <tr><th scope="row">Location vide</th><td>1&nbsp;mois</td><td>3&nbsp;mois</td></tr>
        <tr><th scope="row">Location meublée</th><td>1&nbsp;mois</td><td>1&nbsp;mois</td></tr>
    </tbody>
</x-table>

Faites défiler

x-status-cell

Utilisé sur 1 page /demenagement

<td> coloré pour les colonnes de statut d'obligation dans les tables (Obligatoire / Recommandé / Non annexé…). Centralise le mapping de couleurs pour rester cohérent partout sur la rubrique. À utiliser uniquement dans un <tr> à l'intérieur d'une <x-table>. 4 variants : required (vert, obligation stricte), conditional (bleu, obligation conditionnelle), recommended (ambre, bonne pratique), neutral (gris, informatif).

<x-table>
    <thead><tr><th>Document</th><th>Statut</th><th>Quand le fournir</th></tr></thead>
    <tbody>
        <tr><td>Contrat de bail</td><x-status-cell variant="required">Obligatoire</x-status-cell><td>À la signature</td></tr>
        <tr><td>Acte de cautionnement</td><x-status-cell variant="conditional">Obligatoire si garant</x-status-cell><td>À la signature</td></tr>
        <tr><td>Inventaire détaillé</td><x-status-cell variant="recommended">Recommandé</x-status-cell><td>Annexe au bail</td></tr>
        <tr><td>Diagnostic ERP</td><x-status-cell variant="neutral">Non annexé au bail</x-status-cell><td>Transmis sur demande</td></tr>
    </tbody>
</x-table>

Faites défiler

x-timeline

Utilisé sur 2 pages /demenagement

Frise chronologique horizontale (desktop) ou verticale (mobile). Cas d'usage canonique : J-60 → J+30 du parcours déménagement. Statuts past (vert, coche), active (bleu, halo), future (gris, numéro). 4 à 6 étapes max.

<x-timeline :items="[
    ['time' => 'J-60',    'title' => 'Préavis de bail',     'description' => 'LRAR au bailleur.', 'status' => 'past'],
    ['time' => 'J-30',    'title' => 'Devis déménageur',    'description' => 'Comparer 3 devis.', 'status' => 'active'],
    ['time' => 'J-15',    'title' => 'Changement d\'adresse', 'description' => 'CAF, employeur, banque.'],
    ['time' => 'Jour J',  'title' => 'État des lieux',     'description' => 'Sortie ancien + entrée nouveau logement.'],
    ['time' => 'J+15',    'title' => 'Mise en service',    'description' => 'Compteurs, internet, redirection courrier.'],
]" />

x-pros-cons

Pas encore utilisé en production

Override rubrique du composant global <x-pros-cons> : typographie épurée (pas de gros encadrés vert/rouge), markers + primary blue et − slate-gray inline.

<x-pros-cons
    :pros="[
        'Devis gratuit en moins de 24 h',
        'Déménageurs vérifiés et assurés',
        'Tarification transparente au m³',
    ]"
    :cons="[
        'Délai de réservation 2 à 3 semaines minimum',
        'Surcoût en haute saison (juin à août)',
    ]"
/>

x-price-grid

Pas encore utilisé en production

Variante de table spécialisée fourchettes de prix par profil × distance. Source datée obligatoire en pied. Espaces insécables auto-injectés entre nombre et unité.

<x-price-grid
    caption="Prix moyen d'un déménagement par profil et par distance"
    source="Devis Selectra, mai 2026"
    :distances="['Intra-ville', 'Régional 300 km', 'National 700 km']"
    :rows="[
        ['profile' => 'Studio (10 m³)', 'prices' => ['450 €',  '900 €',  '1 500 €']],
        ['profile' => 'T2 (20 m³)',     'prices' => ['700 €',  '1 400 €', '2 200 €']],
        ['profile' => 'T3 (30 m³)',     'prices' => ['950 €',  '1 900 €', '2 900 €']],
    ]"
/>

x-provider-hero

Utilisé sur 3 pages /demenagement

Bloc d'identité standardisé en tête de page SDP (/demenagement/demenageurs/{slug}). Logo + tagline + badge partenaire / annonce + grille 2x2 stats + zones desservies + certifications.

<x-provider-hero
    name="Demeco"
    tagline="Réseau de déménageurs créé en 1965, présent dans 170+ pays."
    :partner="true"
    logoUrl="https://images.selectra.info/selectra.info/images/demenagement/logos/demeco-provider.webp"
    :stats="[
        ['value' => '1965',  'label' => 'année de création'],
        ['value' => '3 000', 'label' => 'collaborateurs'],
        ['value' => '170+',  'label' => 'pays desservis'],
        ['value' => '90',    'label' => 'agences en France'],
    ]"
    :areas="['France entière', 'International', 'Outre-mer']"
    :certifications="['Norme NF Service', 'Membre CSD']"
/>

x-icon-card-link

Utilisé sur 1 page /demenagement

Petite carte cliquable avec icône Heroicons outline 24×24, label, sous-label optionnel, chevron flottant au hover. Pattern unifié pour les grilles « Démarches », « Déménageurs », « Villes ». Props : href, label, sub, icon (d= Heroicons), align="left|center".

x-provider-list

Utilisé sur 2 pages /demenagement

Listing éditorial neutre des marques d'une rubrique. Pas de badge partenaire ni « Annonce » : pour la présentation monétisée avec badge, utiliser <x-demenageur-comparator>. ctaLabel personnalisable.

<x-provider-list ctaLabel="Voir la fiche" :items="[
    [
        'name'        => 'Demeco',
        'description' => 'Réseau de 90 agences en France, créé en 1965.',
        'href'        => '/demenagement/demenageurs/demeco',
    ],
    [
        'name'        => 'Les Gentlemen du Déménagement',
        'description' => 'Réseau coopératif, 200 villes desservies.',
        'href'        => '/demenagement/demenageurs/gentlemen-demenagement',
    ],
]" />

x-essentials

Utilisé sur 4 pages /demenagement

Bloc d'orientation « Gagnez du temps, allez à l'essentiel » : bandeau coloré + grille 3 colonnes d'accès rapides (icône emoji + titre + description + bouton bleu pleine largeur). Pattern de cross-nav pour les hubs et les piliers de cluster. :items reçoit un tableau de 4 à 6 entrées (icon, title, description, label, href) ; sans :items, le cluster « location saisonnière » par défaut s'affiche.

<x-essentials :items="[
    ['icon' => '📄', 'title' => 'Mon contrat',         'description' => 'Téléchargez un modèle de bail prêt à l\'emploi.',          'label' => 'Modèle gratuit',   'href' => '/demenagement/contrat-bail/modele'],
    ['icon' => '⚖️', 'title' => 'La réglementation',   'description' => 'Faites le point sur vos obligations légales.',            'label' => 'Mes obligations',  'href' => '/demenagement/location'],
    ['icon' => '💰', 'title' => 'Aides au déménagement','description' => 'Quelles primes et aides demander avant le jour J.',       'label' => 'Voir les aides',   'href' => '/demenagement/guides/demarches/aides'],
]" />

x-demenageur-comparator

Pas encore utilisé en production

Surface monétisée. Cartes prestataires avec badge Selectra (partenaire) ou mention « Annonce » (non-partenaire). À distinguer de <x-provider-list> qui est un listing éditorial neutre.

<x-demenageur-comparator :providers="[
    [
        'slug'        => 'demeco',
        'name'        => 'Demeco',
        'partner'     => true,
        'rating'      => 4.3,
        'description' => 'Réseau de 90 agences. Devis gratuit en moins de 24 h.',
    ],
    [
        'slug'        => 'gentlemen-demenagement',
        'name'        => 'Les Gentlemen du Déménagement',
        'partner'     => false,
        'rating'      => 4.1,
        'description' => 'Réseau coopératif présent dans 200 villes françaises.',
    ],
]" />

x-partners-marquee

Utilisé sur 1 page /demenagement

Bandeau de logos auto-défilant (CSS keyframes + duplication des items pour boucle continue). Pas de pause au hover, respect de prefers-reduced-motion. Props : items (array ['name' => .., 'logo' => url]), duration (secondes, défaut 22).

x-pdf-selector

Utilisé sur 3 pages /demenagement

Dropdown compact « Choisissez le modèle X » à placer dans le slot heroBottom du layout article. Préféré à <x-pdf-grid> quand il y a beaucoup d'options (6+) pour orienter vers la bonne sous-page ou le bon PDF par profil. Items numérotés par défaut (:numbered="false" pour désactiver).

<x-slot:heroBottom>
    @php
    $items = [
        ['label' => 'Contrat de location meublé',     'href' => '/demenagement/contrat-bail/meuble'],
        ['label' => 'Contrat de location non meublé', 'href' => '/demenagement/contrat-bail/non-meuble'],
        ['label' => 'Contrat de location saisonnière','href' => '/demenagement/contrat-bail/saisonnier'],
        ['label' => 'Contrat de bail colocation',     'href' => '/demenagement/contrat-bail/colocation'],
        ['label' => 'Contrat de bail mobilité',       'href' => '/demenagement/contrat-bail/mobilite'],
        ['label' => 'Contrat de bail commercial',     'href' => '/demenagement/contrat-bail/commercial'],
    ];
    @endphp
    <x-pdf-selector
        title="Choisissez le modèle de contrat de location correspondant à votre logement :"
        ctaLabel="Télécharger"
        :items="$items"
    />
</x-slot:heroBottom>

Aperçu hors slot (rendu identique, fond clair pour visibilité) :

x-letter-template

Utilisé sur 19 pages /demenagement

Version générique de <x-tool::letter-generator>. Génère un formulaire + un aperçu live + boutons copier/imprimer pour n'importe quel modèle de lettre, attestation, quittance ou acte à remplir. À utiliser partout où un callout statique forcerait le visiteur à recopier à la main. Le token spécial {today} insère la date du jour en français.

<x-letter-template
    title="Générer ma quittance de loyer"
    subtitle="Conforme à l'article 21 de la loi du 6 juillet 1989."
    fileName="Quittance de loyer"
    :fields="[
        ['key' => 'mois',     'label' => 'Mois concerné',        'placeholder' => 'ex. mai 2026'],
        ['key' => 'adresse',  'label' => 'Adresse du logement',  'placeholder' => 'ex. 12 rue Exemple, 75011 Paris'],
        ['key' => 'bailleur', 'label' => 'Nom du bailleur',      'placeholder' => 'ex. Camille Martin'],
        ['key' => 'locataire','label' => 'Nom du locataire',     'placeholder' => 'ex. Jean Dupont'],
        ['key' => 'loyer',    'label' => 'Loyer (€)',            'placeholder' => 'ex. 850'],
    ]"
    template="QUITTANCE DE LOYER

Quittance pour le mois de {mois}.

Logement : {adresse}

Je soussigné(e) {bailleur}, bailleur, déclare avoir reçu de {locataire} la somme de {loyer} € au titre du loyer.

Fait le {today}." />

x-tool::aide-eligibility-calculator

Pas encore utilisé en production

Outil 5 questions (situation pro, âge, enfants, handicap, revenus) → liste réactive des aides au déménagement éligibles (prime CAF, France Travail, FSL, Loca-Pass, Mobili-Jeune, Visale, retraite, fonctionnaire, PCH handicap). 100 % Alpine, logique encodée en JS. Pensé pour la page /demenagement/guides/demarches/aides.

<x-tool::aide-eligibility-calculator />

x-tool::orienteur

Pas encore utilisé en production

Tool GÉNÉRIQUE 1-à-N questions → 1 démarche. Config en props : title, questions[] (key/label/options), outcomes[] (match → title/steps/cta/anchor), urgentWhen. Pattern « j'ai 3 cas de figure mélangés dans ma page, l'utilisateur ne devrait voir QUE le sien ». Démo ci-dessous avec la config de /changement-adresse-liste-electorale ; réutilisable sur toute page démarches qui mélange plusieurs procédures (en ligne / courrier / téléphone, locataire / propriétaire, etc.).

<x-tool::orienteur
    title="Quelle démarche pour votre liste électorale ?"
    :questions="[...]"
    :outcomes="[...]"
    :urgentWhen="['urgent' => 'oui']" />

x-tool::budget-travaux-calculator

Pas encore utilisé en production

Estimateur de budget de chantier : l'utilisateur coche les prestations dont il a besoin (avec une quantité via un stepper +/−) et le total moyen se calcule en direct. Catalogue entièrement surchargeable par @prop :catalog="[...]" (catégories → items label/price) ; sans prop, il reprend les coûts moyens de la page devis-travaux. Idéal sur toute page « prix des travaux / coût rénovation ».

<x-tool::budget-travaux-calculator />

x-tool::letter-generator

Utilisé sur 4 pages /demenagement

Outil interactif : générateur de lettre de résiliation de bail (loi 1989 + ALUR). Boutons copier / imprimer / télécharger. S'auto-suffit, aucun paramètre nécessaire.

<x-tool::letter-generator />

x-tool::preavis-calculator

Utilisé sur 10 pages /demenagement

Outil interactif : l'utilisateur saisit la date de réception de son congé et sa situation (logement vide / zone tendue / meublé / motif légitime), le tool calcule la date de fin de préavis exacte (compte de date à date, loi du 6 juillet 1989) et le nombre de jours restants. 100% client. Props optionnels : title, subtitle.

<x-tool::preavis-calculator />

x-tool::irl-calculator

Utilisé sur 1 page /demenagement

Outil interactif : l'utilisateur saisit son loyer et les deux indices IRL (ancien et nouveau), le tool calcule le loyer révisé plafonné et l'augmentation en € et en % (loi du 6 juillet 1989 art. 17-1). Saisie pilotée, aucune table d'indices embarquée. 100% client. Props optionnels : title, subtitle.

<x-tool::irl-calculator />

x-tool::reexpedition-simulator

Utilisé sur 1 page /demenagement

Outil interactif : l'utilisateur choisit son profil (particulier / professionnel), son besoin (déménagement définitif / absence temporaire) et, pour les pros, la destination (France / étranger). Le tool affiche la ou les formules La Poste adaptées avec le détail durée → tarif 2026 et un bouton d'activation. 100% client, réutilisable. Props : profil, besoin, ctaUrl, ctaLabel, title, subtitle, showHelp.

<x-tool::reexpedition-simulator />

x-tool::conge-demenagement-calculator

Utilisé sur 1 page /demenagement

Outil interactif : l'utilisateur sélectionne sa convention collective dans une liste déroulante, le tool affiche le nombre de jours de congé déménagement dûs et la condition éventuelle (ancienneté, mutation). Conventions embarquées. 100% client. S'auto-suffit, aucun paramètre nécessaire.

<x-tool::conge-demenagement-calculator />

x-tool::dpe-simulateur-classe

Utilisé sur 2 pages /demenagement

Outil interactif : l'utilisateur saisit sa consommation d'énergie primaire (kWh/m²/an) et ses émissions de gaz à effet de serre (kg CO₂/m²/an), le tool renvoie la classe DPE A→G en appliquant les seuils officiels (réforme 2021) et en retenant la moins bonne des deux étiquettes. 100% client. Props optionnels : title, subtitle.

<x-tool::dpe-simulateur-classe />

x-tool::passoire-thermique-checker

Utilisé sur 1 page /demenagement

Outil interactif : l'utilisateur sélectionne sa classe DPE (A→G), le tool indique si le logement est une passoire thermique, s'il peut encore être loué et la date d'interdiction applicable (calendrier loi Climat-Résilience : G en 2025, F en 2028, E en 2034). 100% client. Props optionnels : title, subtitle.

<x-tool::passoire-thermique-checker />

x-further-reading

Pas encore utilisé en production

Bloc « Pour aller plus loin » de 1 à 4 cartes éditoriales en fin d'article. readingTime auto-résolu depuis la page cible si absent. Wrapper appelant data-toc-ignore obligatoire.

<div data-toc-ignore>
    <x-further-reading
        label="Démarches et obligations"
        :links="[
            ['href' => '/demenagement/contrat-bail',          'tag' => 'DÉMARCHE', 'title' => 'Modèle de contrat de bail',  'readingTime' => 5],
            ['href' => '/demenagement/etat-des-lieux',        'tag' => 'DÉMARCHE', 'title' => 'État des lieux : modèle',    'readingTime' => 7],
            ['href' => '/demenagement/location/quittance-loyer','tag' => 'MODÈLE',   'title' => 'Quittance de loyer',         'readingTime' => 3],
        ]"
    />
</div>

x-review

Utilisé sur 3 pages /demenagement

Carte de citation client pour les pages SDP déménageur. Pastille d'initiales + nom + date · source en haut, note 1-5 ou badge « Avis critique » à droite, citation cadrée à gauche par une barre d'accent. sentiment="negative" pour les avis négatifs (accent rouge). Remplace systématiquement le pattern <blockquote class="border-l-4 …"> + <em>auteur</em> sur les SDP.

Avis positif avec note

<x-review author="Nicole D." date="04/10/2022" source="Avis-Vérifiés" :rating="5">
    Juste super équipe dynamique et professionnelle. Je la recommande.
</x-review>

Avis négatif

<x-review author="Yannick P." date="21/09/2022" source="Avis-Vérifiés" sentiment="negative">
    Déménageurs pas précautionneux, détérioration d'une entrée.
</x-review>

x-author-opinion

Utilisé sur 15 pages /demenagement

« L'avis de … » : opinion éditoriale signée en fin d'article (contenu non-commodity). Sur une fiche déménageur, remplace un bloc d'avis figés/trompeurs par un jugement honnête et daté, complété par <x-sources> pour les chiffres. Props : author, authorRole, authorPhoto, title + slot HTML.

<x-author-opinion author="Camille Sorel" authorRole="Rédactrice déménagement">
    <p>Demeco traîne de vieux avis négatifs, mais sa note actuelle…</p>
</x-author-opinion>

x-reexpedition-cta

Utilisé sur 1 page /demenagement

Bouton vert d'activation du suivi de courrier La Poste (lien partenaire, attribut rel="sponsored"), centré, à placer sous un tableau de tarifs de réexpédition. L'URL partenaire est centralisée dans le composant. Props : label, url.

<x-reexpedition-cta />

x-monetisation.download-cta

Utilisé sur 18 pages /demenagement

Bloc monétisation hero pour téléchargement de modèle PDF/Word/Excel. Jumeau de <x-monetisation.cta-block> avec la même barre d'accent navy à gauche, mais le CTA est un téléchargement direct (vert bg-accent) + badge format auto-dérivé de l'extension de l'url. Position canonique : juste après <x-slot:lead>, avant la section 1 (qui peut garder une grille multi-PDFs pour les variantes).

Quand l'utiliser : toute page « modèle » (état des lieux, contrat de bail, lettre type, attestation, kit, quittance…) où l'utilisateur arrive avec l'intention de télécharger. Quand l'éviter : pages avec <x-pdf-selector> en heroBottom (dropdown déjà hero), pages outils interactifs (<x-tool::letter-generator>, <x-letter-template>), pages hub.

<x-slot:lead>
... lead intro ...
</x-slot:lead>

{{-- Hero monétisation : téléchargement direct du modèle --}}
<section class="py-6 md:py-8" data-toc-ignore>
<div class="max-w-content mx-auto px-4 sm:px-6">
<x-monetisation.download-cta
    title="Modèle d'état des lieux de sortie"
    description="Téléchargez un <strong>modèle gratuit d'état des lieux de sortie</strong>. Actualisé normes {{ $annee }} - Loi Alur."
    url="https://images.selectra.info/demenagement/edl/etat-des-lieux-meuble.pdf"
/>
</div>
</section>

Variante Word (badge auto-dérivé de l'extension)

x-sticky-footer

Pas encore utilisé en production

Barre flottante mobile-only, déclenchée après 400 px de scroll. Auto-injectée par le layout déménagement sur toute URL /demenagement* : ne jamais l'embarquer manuellement. Le variant est résolu via les règles routing de sites/selectra.info/demenagement/config/sticky-footer.php.

QA HO : ajouter ?sf=open ou ?sf=closed à n'importe quelle URL /demenagement*.

Aperçu : scrolle vers le bas de cette page sur un viewport mobile (≤ 768 px). La barre apparaît en bas avec le wording du variant rubrique-general.

x-hub-hero

Utilisé sur 7 pages /demenagement

Hero pattern télécom pour les hubs de premier niveau (page mère, sous-hubs G1) : eyebrow pill + headline + heroBottom podium (cartes) + 4 trust pills. Props : preTitle, headline, subtitle, cards (array de 3 max), trustPills (array de 4 max).

<x-hub-hero
    preTitle="Service Selectra Déménagement"
    headline="Préparez votre déménagement en un appel"
    subtitle="Tous vos contrats centralisés gratuitement."
    :cards="[
        ['title' => 'Déménageurs', 'href' => '/demenagement/demenageurs'],
        ['title' => 'Démarches',   'href' => '/demenagement/guides/demarches'],
        ['title' => 'Contrat bail','href' => '/demenagement/contrat-bail'],
    ]"
    :trustPills="['100% gratuit', 'Sans engagement', 'Réponse sous 24h', '+50 000 clients']"
/>

Aperçu visible directement sur /demenagement (page mère).

x-monetisation.transfer-banner

Utilisé sur 4 pages /demenagement

Bannière gradient marketing pleine largeur. Headline marketing percutant + un seul CTA. À utiliser modérément (impact visuel fort), typiquement sur les pages où le transfert de contrats est le bénéfice central (déménagement, énergie, contrat-bail).

<x-monetisation.transfer-banner />

Aperçu

x-monetisation.studapart-cta

Utilisé sur 1 page /demenagement

Encart sponsorisé partenaire Studapart (logement étudiant). Mention « Annonce » obligatoire (DGCCRF). À ne placer que sur les pages avec intent étudiant (logement étudiant, résidence universitaire, alternance).

<x-monetisation.studapart-cta />

Aperçu