> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://support.superhote.com/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# Personnaliser l'affichage de votre site de réservation avec du CSS

# Personnaliser l'affichage de votre site de réservation avec du CSS

Vous souhaitez masquer certains éléments sur les cartes de logements de votre site de réservation (l'adresse, le prix, les détails, etc.) ? Voici la marche à suivre, étape par étape.

## Étape 1 — Accéder à votre site de réservation

Dans le menu de gauche de SuperHote, cliquez sur **Site de réservations**. La liste de vos sites de réservation s'affiche alors. Cliquez sur le site que vous souhaitez personnaliser (par exemple « Réservez votre séjour »).

## Étape 2 — Ouvrir l'onglet Style

Une fois sur la page de votre site, plusieurs onglets apparaissent en haut : *Contenu*, *Hébergements*, *Style* et *Paramètres et intégration*. Cliquez sur l'onglet **Style**.

## Étape 3 — Accéder à la section CSS personnalisé

Dans la colonne de gauche de l'onglet Style, vous trouverez trois sections : *Modèle du site*, *Couleurs* et **CSS personnalisé**. Cliquez sur **CSS personnalisé** : un éditeur de code s'ouvre avec le message « Ajoutez du CSS pour personnaliser l'apparence de votre site ».

## Étape 4 — Coller votre code CSS

Dans l'encadré prévu à cet effet, collez les règles CSS correspondant aux éléments que vous souhaitez masquer. Par exemple, pour cacher l'adresse des logements :

```css
.sh-rental-address {display: none !important;}
```

Vous pouvez combiner plusieurs règles selon ce que vous voulez masquer sur les cartes d'hébergements :

```css
/* Masquer le type de logement et la ville */
.sh-rental-type {display: none !important;}

/* Masquer le nom du logement */
.sh-rental-name {display: none !important;}

/* Masquer l'adresse */
.sh-rental-address {display: none !important;}

/* Masquer les détails (chambres, lits, voyageurs) */
.sh-rental-details {display: none !important;}

/* Masquer le prix */
.sh-rental-price {display: none !important;}

/* Masquer le "hébergé par" */
#root > div > main > div > main > div:nth-child(3) > div > div > div.space-y-8.max-w-\[720px\].mx-auto.w-full > div.sh-detail-infos.flex.flex-wrap.items-center.gap-x-5.gap-y-3.py-4.border-b.border-element-border > div.flex.items-center.gap-3 {display: none !important;}
```

💡 Astuce : le bouton **Voir les classes CSS** en haut à droite de l'éditeur vous donne accès à la liste complète des classes disponibles sur le site.

## Étape 5 — Enregistrer vos modifications

Une fois votre code saisi, cliquez sur le bouton orange **Enregistrer** en haut à droite de la section CSS personnalisé. Si vous changez d'avis avant d'enregistrer, le bouton **Annuler** (à gauche d'Enregistrer) vous permet de revenir en arrière.

## Étape 6 — Vérifier le rendu

Pour contrôler le résultat, cliquez sur **Voir le site** en haut à droite de la page. Votre site de réservation s'ouvre dans un nouvel onglet et vous pouvez constater que les éléments ciblés sont bien masqués sur les cartes de logements.

Et voilà, votre moteur de réservation est personnalisé ! Vous pouvez à tout moment revenir dans cette section pour ajuster, ajouter ou supprimer des règles CSS.