/* ==========================================================================
   BLOC FRONT : ENTITY LIST (Premium UI)
   ========================================================================== */

/* == JETONS DE SURFACE DU BLOC ============================================
   Ce bloc lisait `--solisrentcar-card-bg`, `--solisrentcar-border-color`,
   `--solisrentcar-text-main`... qui ne sont JAMAIS definis sur le site public :
   seule la couleur d'accentuation l'est (`solisrentcar_dynamic_white_label_css`).
   Chaque `var()` retombait donc sur sa valeur de repli - toutes claires - et le
   mode sombre ne tenait plus qu'a une poignee de surcharges en `!important`.

   Les surfaces se deduisent maintenant des jetons REELS de l'application
   (`variables.css`), qui basculent avec `body.solisrentcar-dark-mode`. Une carte
   n'a donc plus qu'une seule definition, valable dans les deux themes.

   Le basculement se fait par CLASSE, jamais par `prefers-color-scheme` : la
   preference du systeme ne sert qu'a choisir le theme au premier affichage, et
   l'interrupteur du site prime ensuite. Les regles en media query rendaient la
   barre de filtres, les champs, la pagination et les squelettes sourds a cet
   interrupteur - sombres sur un site clair, clairs sur un site sombre. */
.solisrentcar-front-list-wrapper,
.solisrentcar-entity-card-bottomsheet-overlay {
    --sb-surface: var(--color-bg, #ffffff);
    --sb-surface-2: var(--color-bg-secondary, #f5f5f7);
    --sb-border: var(--color-border, #e5e5ea);
    --sb-text: var(--color-text, #1d1d1f);
    --sb-text-muted: var(--color-text-muted, #86868b);
    --sb-accent: var(--solisrentcar-primary, var(--color-primary, #3b82f6));
    --sb-card-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
    --sb-card-shadow-hover: 0 12px 24px -4px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.04);
    --sb-hover-tint: rgba(15, 23, 42, 0.06);
}

.solisrentcar-dark-mode .solisrentcar-front-list-wrapper,
.solisrentcar-dark-mode .solisrentcar-entity-card-bottomsheet-overlay,
.dark .solisrentcar-front-list-wrapper,
[data-theme="dark"] .solisrentcar-front-list-wrapper {
    /* La carte ne peut pas etre du noir du fond : sans ecart de surface, il ne
       resterait que la bordure pour dire ou elle commence. */
    --sb-surface: var(--color-bg-secondary, #1c1c1e);
    --sb-surface-2: #2c2c2e;
    --sb-border: var(--color-border, #38383a);
    --sb-text: var(--color-text, #f5f5f7);
    --sb-text-muted: var(--color-text-muted, #98989d);
    --sb-card-shadow: none;
    --sb-card-shadow-hover: 0 12px 28px -6px rgba(0, 0, 0, 0.6);
    --sb-hover-tint: rgba(255, 255, 255, 0.08);
}

/* 1. Wrapper principal & Layouts */
.solisrentcar-front-list-wrapper {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    /* La liste finissait au ras du pied de page : dernière carte et première
       ligne du pied se touchaient, sans rien pour dire où l'une s'arrête. La
       marge suit la largeur de l'écran — un pied collé se voit surtout au
       large. */
    padding-bottom: clamp(48px, 6vw, 88px);
    color: var(--sb-text);
    font-family: var(--font-primary, system-ui, -apple-system, sans-serif);
}

/* Modifier : Sidebar Left */
.solisrentcar-front-list-wrapper.solisrentcar-filters-sidebar_left {
    flex-direction: row;
    align-items: flex-start;
}

.solisrentcar-front-list-wrapper.solisrentcar-filters-sidebar_left .solisrentcar-front-filters {
    width: 280px;
    flex-shrink: 0;
    position: sticky;
    top: 24px;
}

.solisrentcar-front-list-wrapper.solisrentcar-filters-sidebar_left .solisrentcar-front-list-main {
    flex-grow: 1;
    min-width: 0;
}

/* Modifier : Sidebar Right */
.solisrentcar-front-list-wrapper.solisrentcar-filters-sidebar_right {
    flex-direction: row-reverse;
    align-items: flex-start;
}

.solisrentcar-front-list-wrapper.solisrentcar-filters-sidebar_right .solisrentcar-front-filters {
    width: 280px;
    flex-shrink: 0;
    position: sticky;
    top: 24px;
}

.solisrentcar-front-list-wrapper.solisrentcar-filters-sidebar_right .solisrentcar-front-list-main {
    flex-grow: 1;
    min-width: 0;
}

/* Modifier : Top Filters */
.solisrentcar-front-list-wrapper.solisrentcar-filters-top .solisrentcar-front-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    background: var(--sb-surface);
    padding: 16px 20px;
    border-radius: 12px;
    border: 1px solid var(--sb-border);
}

/* La recherche prend la largeur de la barre et se centre : c'est le point
   d'entrée le plus utilisé, il ne se dispute pas une colonne de 180 px avec
   sept listes déroulantes. */
.solisrentcar-front-list-wrapper.solisrentcar-filters-top .solisrentcar-search-group {
    flex: 1 1 100%;
    max-width: 440px;
    margin-inline: auto;
}

.solisrentcar-front-list-wrapper.solisrentcar-filters-top .solisrentcar-front-filter-scroll-area {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 16px;
    flex-grow: 1;
}

/* 2. Filtres & Recherche */
.solisrentcar-front-filters {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* En colonne latérale, la barre était une simple pile de champs posée à même la
   page : rien ne la rattachait à la grille qu'elle commande. Elle prend la même
   surface que la barre haute — une seule idée de « panneau de filtres », deux
   emplacements. */
.solisrentcar-filters-sidebar_left .solisrentcar-front-filters,
.solisrentcar-filters-sidebar_right .solisrentcar-front-filters {
    padding: 20px;
    border: 1px solid var(--sb-border);
    border-radius: 12px;
    background: var(--sb-surface);
}

/* La zone défilante n'était mise en page QUE dans la barre haute : en colonne,
   ses groupes se touchaient faute d'écart déclaré. */
.solisrentcar-front-filter-scroll-area {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.solisrentcar-front-filter-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 180px;
}

.solisrentcar-front-filter-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--sb-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Input Recherche */
.solisrentcar-search-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

.solisrentcar-search-icon {
    position: absolute;
    left: 12px;
    color: var(--sb-text-muted);
}

.solisrentcar-front-search {
    width: 100%;
    padding: 10px 12px 10px 38px;
    border: 1px solid var(--sb-border);
    border-radius: 8px;
    font-size: 14px;
    color: var(--sb-text);
    background: var(--sb-surface-2);
    transition: all 0.2s ease;
}

.solisrentcar-front-search::placeholder {
    color: var(--sb-text-muted);
}

.solisrentcar-front-search:focus {
    outline: none;
    border-color: var(--sb-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--sb-accent) 22%, transparent);
    background: var(--sb-surface);
}

/* Selects */
.solisrentcar-front-select-wrapper {
    position: relative;
    width: 100%;
}

.solisrentcar-front-filter-select {
    width: 100%;
    appearance: none;
    padding: 10px 36px 10px 12px;
    border: 1px solid var(--sb-border);
    border-radius: 8px;
    font-size: 14px;
    color: var(--sb-text);
    background: var(--sb-surface-2);
    cursor: pointer;
    transition: all 0.2s ease;
}

.solisrentcar-front-filter-select:focus {
    outline: none;
    border-color: var(--sb-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--sb-accent) 22%, transparent);
}

/* Les options sont peintes par le systeme : sans couleur explicite, une liste
   deroulante ouverte en mode sombre affiche du texte clair sur fond clair. */
.solisrentcar-front-filter-select option {
    background: var(--sb-surface);
    color: var(--sb-text);
}

/* == BORNES DES FILTRES A PLAGE (prix, dates) =============================
   Deux champs et un separateur, alignes comme un seul controle. */
.solisrentcar-front-range {
    display: flex;
    align-items: center;
    gap: 6px;
}

.solisrentcar-front-filter-input {
    min-width: 0;
    flex: 1 1 0;
    padding: 10px;
    border: 1px solid var(--sb-border);
    border-radius: 8px;
    font-size: 14px;
    font-family: inherit;
    color: var(--sb-text);
    background: var(--sb-surface-2);
    transition: all 0.2s ease;
}

.solisrentcar-front-filter-input::placeholder {
    color: var(--sb-text-muted);
}

.solisrentcar-front-filter-input:focus {
    outline: none;
    border-color: var(--sb-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--sb-accent) 22%, transparent);
}

/* L'icone native du selecteur de date est noire : invisible sur fond sombre. */
.solisrentcar-dark-mode .solisrentcar-front-filter-input::-webkit-calendar-picker-indicator {
    filter: invert(1) opacity(0.65);
}

.solisrentcar-front-range-sep {
    color: var(--sb-text-muted);
    font-size: 13px;
}

.solisrentcar-select-arrow {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: var(--sb-text-muted);
}


/* 3. La Grille de Résultats (Layout: Grid) */
.solisrentcar-front-list-main {
    display: flex;
    flex-direction: column;
    gap: 32px;
    width: 100%;
}

/* `align-items: start` : une grille étire par défaut chaque carte à la hauteur
   de la plus grande de sa rangée. Une fiche sans image ni extrait devenait donc
   une boîte de 400 px dont 300 de vide, à côté d'une carte illustrée — le
   défaut le plus visible de la liste. Chaque carte reprend la hauteur de son
   contenu ; l'alignement se fait par le haut, qui est là où l'oeil balaye. */
.solisrentcar-layout-grid .solisrentcar-front-grid {
    display: grid;
    gap: 24px;
    align-items: start;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

/* `minmax(0, 1fr)` et non `1fr` : un titre long ou une valeur métier sans
   espace élargit sinon sa colonne au-delà de sa part, et les colonnes cessent
   d'être égales. */
.solisrentcar-layout-grid.solisrentcar-cols-2 .solisrentcar-front-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.solisrentcar-layout-grid.solisrentcar-cols-3 .solisrentcar-front-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.solisrentcar-layout-grid.solisrentcar-cols-4 .solisrentcar-front-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 768px) {
    .solisrentcar-layout-grid[class*="solisrentcar-cols-"] .solisrentcar-front-grid {
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    }
}

/* Deux colonnes dès que la place manque, quelle que soit la consigne : trois
   cartes de 210 px n'affichent plus ni titre lisible ni vignette utile. */
@media (min-width: 769px) and (max-width: 1100px) {
    .solisrentcar-layout-grid.solisrentcar-cols-3 .solisrentcar-front-grid,
    .solisrentcar-layout-grid.solisrentcar-cols-4 .solisrentcar-front-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* La Grille de Résultats (Layout: List) */
.solisrentcar-layout-list .solisrentcar-front-grid {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* 4. Les Cartes Premium (Entity Card - Instagram Style) */
.solisrentcar-entity-card-container {
    display: flex;
    flex-direction: column;
    background: var(--sb-surface) !important;
    border: 1px solid var(--sb-border) !important;
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: var(--sb-card-shadow);
    color: var(--sb-text);
    position: relative;
}

.solisrentcar-entity-card-container:hover {
    transform: translateY(-3px);
    box-shadow: var(--sb-card-shadow-hover);
    border-color: color-mix(in srgb, var(--sb-accent) 35%, var(--sb-border)) !important;
}

/* Header de Carte Instagram Style */
.solisrentcar-entity-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    background: transparent !important;
    border-bottom: 1px solid var(--sb-border) !important;
}

.solisrentcar-entity-card-author {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.solisrentcar-card-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 1.5px solid var(--sb-accent);
}

.solisrentcar-card-avatar-initials {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-primary, #3b82f6) 0%, #8b5cf6 100%);
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    text-transform: uppercase;
}

.solisrentcar-entity-card-author-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.25;
}

.solisrentcar-entity-card-author-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--sb-text) !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.solisrentcar-entity-card-author-meta {
    font-size: 12px;
    color: var(--sb-text-muted) !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Options Button (...) - Épuré et transparent */
.solisrentcar-entity-card-options-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none !important;
    background: transparent !important;
    color: var(--sb-text-muted) !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
    box-shadow: none !important;
}

.solisrentcar-entity-card-options-btn:hover {
    background: var(--sb-hover-tint) !important;
    color: var(--sb-text) !important;
}

/* Media de la Carte Instagram Style (Square 1:1 Aspect Ratio) */
.solisrentcar-entity-card-media {
    position: relative;
    width: 100%;
    padding-top: 100%;
    /* 1:1 Square Ratio Instagram */
    background: var(--sb-surface-2);
    overflow: hidden;
    cursor: pointer;
}

.solisrentcar-entity-card-media img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.solisrentcar-entity-card-container:hover .solisrentcar-entity-card-media img {
    transform: scale(1.03);
}

.solisrentcar-entity-card-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    /* Verre sombre : il se pose sur une photo dont on ne sait rien, et doit
       rester lisible sur un ciel comme sur un mur noir. */
    background: rgba(15, 23, 42, 0.62);
    backdrop-filter: blur(10px) saturate(140%);
    -webkit-backdrop-filter: blur(10px) saturate(140%);
    color: #ffffff;
    padding: 4px 10px;
    border-radius: 999px;
    /* Ni capitales ni interlettrage forcé : « PUBLISHED » criait plus fort que
       le titre pour dire ce que le visiteur sait déjà — une liste publique ne
       sert que des éléments publiés. Le statut est une note, pas un titre. */
    font-size: 11px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0.01em;
    line-height: 1.4;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

/* Badge Nombre de photos */
.solisrentcar-card-media-count-badge {
    position: absolute;
    bottom: 12px;
    right: 12px;
    background: rgba(15, 23, 42, 0.75);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    z-index: 5;
    transition: all 0.2s ease;
}

.solisrentcar-card-media-count-badge:hover {
    background: rgba(15, 23, 42, 0.95);
    transform: scale(1.05);
    border-color: #ffffff;
}

.solisrentcar-card-media-count-badge svg {
    stroke: currentColor;
    width: 14px;
    height: 14px;
}

/* Barre d'Actions Instagram (Placée sous le Média) */
.solisrentcar-entity-card-actions {
    background: transparent !important;
    border: none !important;
    /* Les icônes touchaient le bord bas de la carte, dont l'arrondi de 16 px
       les rognait visuellement. */
    padding: 6px 12px 12px;
}

.solisrentcar-entity-card-actions .solisrentcar-interactions-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.solisrentcar-entity-card-actions .solisrentcar-interactions-group-left {
    display: flex;
    align-items: center;
    gap: 14px;
}

.solisrentcar-entity-card-actions .solisrentcar-interactions-group-right {
    display: flex;
    align-items: center;
    gap: 14px;
}

.solisrentcar-entity-card-actions .solisrentcar-interaction-btn {
    background: transparent !important;
    border: none !important;
    padding: 4px;
    cursor: pointer;
    color: var(--sb-text) !important;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    font-weight: 600;
    transition: transform 0.15s ease, color 0.2s ease;
}

.solisrentcar-entity-card-actions .solisrentcar-interaction-btn:hover {
    transform: scale(1.12);
    color: var(--sb-accent) !important;
}

.solisrentcar-entity-card-actions .solisrentcar-interaction-btn:active {
    transform: scale(0.95);
}

/* Like Active State (Cœur rouge vif Instagram) */
.solisrentcar-entity-card-actions .solisrentcar-interaction-btn-like.is-active {
    color: var(--color-danger, #ef4444) !important;
}

.solisrentcar-entity-card-actions .solisrentcar-interaction-btn-like.is-active svg {
    fill: var(--color-danger, #ef4444) !important;
    stroke: var(--color-danger, #ef4444) !important;
}

/* Bookmark Active State (Signet rempli) */
.solisrentcar-entity-card-actions .solisrentcar-interaction-btn-bookmark.is-active {
    color: var(--sb-text) !important;
}

.solisrentcar-entity-card-actions .solisrentcar-interaction-btn-bookmark.is-active svg {
    fill: currentColor !important;
}

/* Compteur J'aime */
.solisrentcar-card-likes-count {
    font-size: 13px;
    font-weight: 700;
    color: var(--sb-text) !important;
    margin-bottom: 2px;
}

/* Contenu & Légende de la Carte */
.solisrentcar-entity-card-body {
    background: transparent !important;
    padding: 14px 16px 16px;
    display: flex;
    flex-direction: column;
    /* Groupes serrés, séparation généreuse : l'étiquette colle à son titre,
       le titre à son extrait, et la méta se détache par sa règle. */
    gap: 8px;
    flex-grow: 1;
}

.solisrentcar-entity-card-caption {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.solisrentcar-entity-card-title {
    /* Le titre est ce qu'on vient lire : il portait la même graisse que le nom
       de l'auteur et deux pixels de plus que l'extrait. Aucun palier ne
       distinguait le sujet de son commentaire. */
    font-size: 17px !important;
    font-weight: 700 !important;
    letter-spacing: -0.011em !important;
    color: var(--sb-text) !important;
    line-height: 1.32 !important;
    margin: 0 !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    cursor: pointer;
    transition: color 0.2s ease;
    text-decoration: none !important;
}

.solisrentcar-entity-card-container:hover .solisrentcar-entity-card-title {
    color: var(--sb-accent) !important;
}

.solisrentcar-entity-card-excerpt {
    font-size: 13.5px !important;
    color: var(--sb-text-muted) !important;
    line-height: 1.55 !important;
    margin: 0 !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.solisrentcar-entity-card-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 14px;
    margin-top: 4px;
    padding-top: 10px;
    /* Une règle d'un pixel plutôt que des puces : elle sépare le sujet de ses
       attributs sans rien ajouter à lire. */
    border-top: 1px solid var(--sb-border);
    font-size: 12.5px !important;
    color: var(--sb-text-muted) !important;
}

.solisrentcar-entity-card-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.solisrentcar-entity-card-meta-item svg {
    color: var(--sb-accent);
}

/* == DISPOSITION LISTE ====================================================
   Une ligne par élément : vignette à gauche en taille FIXE, texte à droite.

   Deux défauts se cumulaient. Le format de vignette choisi pour la grille
   (`padding-top: 75%` et consorts, déclaré plus bas donc prioritaire)
   s'appliquait ici aussi : la colonne d'image gonflait à plusieurs centaines
   de pixels de haut, entraînait toute la ligne, et le texte flottait au milieu
   du vide. Et la carte restant en `flex` horizontal, les frères de la vignette
   — en-tête auteur, barre de réactions — devenaient des COLONNES à côté d'elle
   au lieu de suivre le texte.

   Une grille à deux colonnes règle les deux : la vignette occupe toute la
   hauteur de la première, tout le reste s'empile dans la seconde, dans l'ordre
   voulu par le modèle de carte. La hauteur vient du texte — c'est ce qui
   distingue cette disposition de la grille. */
.solisrentcar-front-list-wrapper.solisrentcar-layout-list .solisrentcar-entity-card-container {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    align-items: stretch;
}

.solisrentcar-front-list-wrapper.solisrentcar-layout-list .solisrentcar-entity-card-container > * {
    grid-column: 2;
}

.solisrentcar-front-list-wrapper.solisrentcar-layout-list .solisrentcar-entity-card-media {
    grid-column: 1;
    grid-row: 1 / -1;
    width: auto;
    /* Le format de la grille n'a pas cours ici. */
    padding-top: 0;
    height: 100%;
    min-height: 160px;
}

.solisrentcar-front-list-wrapper.solisrentcar-layout-list .solisrentcar-entity-card-body {
    justify-content: center;
    padding: 16px 18px;
}

.solisrentcar-front-list-wrapper.solisrentcar-layout-list .solisrentcar-entity-card-header {
    border-bottom: 0 !important;
    padding-bottom: 0;
}

/* Le bouton d'options reste posé sur la carte, pas dans la grille. */
.solisrentcar-front-list-wrapper.solisrentcar-layout-list .solisrentcar-entity-card-container > .solisrentcar-entity-card-options-btn {
    grid-column: 2;
}

@media (max-width: 640px) {
    .solisrentcar-front-list-wrapper.solisrentcar-layout-list .solisrentcar-entity-card-container {
        display: flex;
        flex-direction: column;
        align-items: stretch;
    }

    .solisrentcar-front-list-wrapper.solisrentcar-layout-list .solisrentcar-entity-card-media {
        width: 100%;
        height: 180px;
        min-height: 0;
    }
}

/* == MODE SOMBRE =========================================================
   Ce bloc rassemblait une centaine de selecteurs (`.dark`, `html.dark`,
   `[data-theme="dark"]`, `.solisrentcar-dark-mode`) pour repeindre en dur ce que
   les couleurs codees en clair imposaient au-dessus. Les surfaces, textes et
   bordures venant desormais des jetons definis en tete de fichier, une carte
   n'a plus qu'une seule definition et suit le theme sans surcharge.

   Ne restent ici que les elements dont l'apparence CHANGE de nature d'un theme
   a l'autre, et non simplement de valeur. */

/* Signet actif : rempli de la couleur du texte, qui s'inverse avec le theme. */
.solisrentcar-dark-mode .solisrentcar-entity-card-actions .solisrentcar-interaction-btn-bookmark.is-active {
    color: #ffffff !important;
}

/* 5. Pagination */
.solisrentcar-front-pagination {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 16px;
}

.solisrentcar-page-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 12px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    color: var(--sb-text);
    background: var(--sb-surface);
    border: 1px solid var(--sb-border);
    cursor: pointer;
    transition: all 0.2s;
}

.solisrentcar-page-btn:hover {
    background: var(--sb-surface-2);
    border-color: var(--sb-accent);
    color: var(--sb-accent);
}

.solisrentcar-page-btn.is-active {
    background: var(--sb-accent);
    border-color: var(--sb-accent);
    color: #ffffff;
}

/* 6. Skeletons (État de chargement) */
.solisrentcar-is-loading {
    opacity: 0.6;
    pointer-events: none;
}

.solisrentcar-skeleton-card {
    background: var(--sb-surface);
    border: 1px solid var(--sb-border);
    border-radius: 16px;
    overflow: hidden;
    height: 380px;
}

.solisrentcar-layout-list .solisrentcar-skeleton-card {
    height: 160px;
}

.solisrentcar-skeleton-pulse {
    animation: solisrentcar-pulse 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    background-color: var(--skeleton-bg, #f5f5f7);
}

@keyframes solisrentcar-pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

/* No results */
.solisrentcar-front-no-results {
    text-align: center;
    padding: 64px 20px;
    color: var(--sb-text-muted);
    background: var(--sb-surface-2);
    border-radius: 16px;
    border: 2px dashed var(--sb-border);
    grid-column: 1 / -1;
}

.solisrentcar-front-no-results svg {
    margin-bottom: 16px;
    opacity: 0.5;
}

.solisrentcar-front-no-results p {
    font-size: 16px;
    margin: 0;
}

/* ==========================================================================
   7. Quick-View Offcanvas Premium Styles (Airbnb / Instagram Style)
   ========================================================================== */

.solisrentcar-front-quickview-offcanvas .solisrentcar-offcanvas-header {
    padding: 16px !important;
}

.solisrentcar-front-quickview-offcanvas .solisrentcar-offcanvas-body {
    padding: 16px !important;
    background: var(--color-bg);
}

/* Media Banner & Gallery */
.solisrentcar-quickview-media {
    width: 100%;
    position: relative;
    margin-bottom: 24px;
    background-size: cover;
    background-position: center;
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 300px;
}

.solisrentcar-quickview-media img {
    position: relative;
    z-index: 3;
    width: 100%;
    height: 100%;
    max-height: 400px;
    object-fit: contain;
    display: block;
}


/* Fallback Header (no image) */
.solisrentcar-quickview-fallback-header {
    height: 120px;
    background: color-mix(in srgb, var(--color-primary) 10%, var(--color-bg-secondary));
    border-bottom: 1px solid var(--color-border);
}

/* --- Gallery --- */
.solisrentcar-quickview-gallery-wrapper {
    width: 100%;
    position: relative;
    background: var(--color-bg);
}

.solisrentcar-quickview-gallery {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* Firefox */
}

.solisrentcar-quickview-gallery::-webkit-scrollbar {
    display: none;
    /* Chrome/Safari */
}

.solisrentcar-quickview-gallery-item {
    flex: 0 0 100%;
    scroll-snap-align: center;
    position: relative;
    background-size: cover;
    background-position: center;
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 300px;
}

.solisrentcar-quickview-gallery-item img {
    position: relative;
    z-index: 3;
    width: 100%;
    height: 100%;
    max-height: 400px;
    object-fit: contain;
    display: block;
}

/* Glassmorphism Blur Backdrop for images */
.solisrentcar-gallery-blur-backdrop {
    position: absolute;
    inset: -20px;
    background: inherit;
    filter: blur(20px);
    transform: scale(1.1);
    z-index: 1;
}

.solisrentcar-gallery-blur-backdrop::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    /* Assombrit le fond flouté pour faire ressortir l'image */
    z-index: 2;
}

/* Arrows */
.solisrentcar-gallery-nav {
    position: absolute;
    bottom: 16px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #0f172a;
    border: none;
    cursor: pointer;
    z-index: 3;
    opacity: 0;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.solisrentcar-quickview-gallery-wrapper:hover .solisrentcar-gallery-nav {
    opacity: 1;
}

.solisrentcar-gallery-nav:hover {
    background: #ffffff;
    transform: scale(1.1);
}

.solisrentcar-gallery-prev {
    left: auto;
    right: 60px;
}

.solisrentcar-gallery-next {
    right: 16px;
}


/* Main Content */
.solisrentcar-quickview-content-wrapper {
    background: transparent;
    position: relative;
}

/* Header Author Info (Injected in Offcanvas Title) */
.solisrentcar-quickview-header-author {
    display: flex;
    align-items: center;
    gap: 12px;
}

.solisrentcar-author-avatar {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    /* Carré avec bord arrondi (Squircle) */
    object-fit: cover;
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
}

.solisrentcar-author-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.solisrentcar-author-name {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: var(--color-text);
    line-height: 1.2 !important;
}

.solisrentcar-author-meta {
    font-size: 13px !important;
    color: var(--color-text-muted);
    margin-top: 2px !important;
    font-weight: 400 !important;
    line-height: 1.2 !important;
}

/* QuickView Body - Titre Principal */
.solisrentcar-quickview-title {
    font-size: 26px !important;
    font-weight: 700 !important;
    color: var(--color-text) !important;
    margin: 16px 0 24px 0 !important;
    line-height: 1.25 !important;
    letter-spacing: -0.02em !important;
}

/* Badges (Tags & Categories) */
.solisrentcar-quickview-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 24px;
    margin-bottom: 24px;
}

.solisrentcar-badge-tag {
    background: var(--color-bg-secondary);
    color: var(--color-text-muted);
    border: 1px solid var(--color-border);
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.solisrentcar-badge-category {
    background: color-mix(in srgb, var(--color-primary) 10%, var(--color-bg));
    color: var(--color-primary);
    border: 1px solid color-mix(in srgb, var(--color-primary) 20%, transparent);
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Rich Text & Bridation SVG/Images */
.solisrentcar-quickview-text {
    font-size: 16px;
    line-height: 1.7;
    color: var(--color-text);
    margin-bottom: 24px;
}

.solisrentcar-quickview-text h1,
.solisrentcar-quickview-text h2,
.solisrentcar-quickview-text h3,
.solisrentcar-quickview-text h4 {
    margin-top: 1.5em;
    margin-bottom: 12px;
    color: var(--color-text);
    font-weight: 700;
}

.solisrentcar-quickview-text h1:first-child,
.solisrentcar-quickview-text h2:first-child,
.solisrentcar-quickview-text h3:first-child,
.solisrentcar-quickview-text h4:first-child {
    margin-top: 0;
}

/* CRITICAL: Brider STRICTEMENT la taille des icônes SVG injectées par les custom fields / the_content */
.solisrentcar-quickview-text svg {
    max-width: 24px !important;
    max-height: 24px !important;
    display: inline-block;
    vertical-align: middle;
}

.solisrentcar-quickview-text .solisrentcar-event-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 24px;
    padding: 16px;
    background: var(--color-bg-secondary);
    border-radius: 12px;
}

.solisrentcar-quickview-text .solisrentcar-entity-meta-row {
    margin-bottom: 12px;
}

.solisrentcar-quickview-text .solisrentcar-event-meta>div {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 500;
}

.solisrentcar-quickview-text .solisrentcar-event-meta svg {
    color: var(--color-primary);
}

.solisrentcar-quickview-text img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

/* Footer & Bouton "Pill" */
.solisrentcar-front-quickview-offcanvas .solisrentcar-offcanvas-footer {
    height: 64px !important;
    min-height: 64px !important;
    max-height: 64px !important;
    padding: 0 16px !important;
    box-sizing: border-box !important;
    border-top: 1px solid var(--color-border);
    background: var(--color-bg);
    box-shadow: 0 -10px 20px rgba(0, 0, 0, 0.02);
    display: flex !important;
    gap: 12px !important;
    justify-content: flex-start !important;
    align-items: center !important;
}

.solisrentcar-app-pill-btn {
    height: 48px;
    padding: 0 20px;
    font-size: 15px;
    font-weight: 600;
    border-radius: 24px !important;
    /* Shape "Pill" */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s ease, opacity 0.2s;
    background: var(--color-bg);
    color: var(--color-text) !important;
    border: 1px solid var(--color-border);
    cursor: pointer;
    text-decoration: none !important;
}

.solisrentcar-app-pill-btn:hover {
    background: var(--color-bg-secondary);
}

.solisrentcar-app-pill-btn svg {
    color: var(--color-text);
}

/* ==========================================================================
   OFFCANVAS UNIFIÉ (MODE APERÇU / ÉDITION DUO)
   ========================================================================== */

.solisrentcar-front-quickview-offcanvas .solisrentcar-offcanvas-header {
    height: 76px !important;
    min-height: 76px !important;
    max-height: 76px !important;
    padding: 0 20px !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

.solisrentcar-btn-mode-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 500;
    border-radius: 8px;
    border: 1px solid var(--sb-border);
    background: var(--sb-surface-2);
    color: var(--sb-text);
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.solisrentcar-btn-mode-toggle:hover {
    background: var(--sb-accent);
    color: #ffffff !important;
    border-color: var(--sb-accent);
}

.solisrentcar-btn-mode-toggle svg {
    stroke: currentColor;
    flex-shrink: 0;
}

/* Independent Offcanvas Containers */
.solisrentcar-front-quickview-offcanvas .solisrentcar-offcanvas-panel,
.solisrentcar-front-edit-offcanvas .solisrentcar-offcanvas-panel {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* ==========================================================================
   Frontend Entity Edit Form Styles (Light Mode)
   ========================================================================== */

/* 1. Header & Lang Bar (Handled by Master offcanvas.css) */

/* ==========================================================================
   Entity Card Options Menu (Popover Desktop & Bottomsheet Mobile)
   ========================================================================== */

/* 1. Options Button on Card */
.solisrentcar-entity-card {
    position: relative;
}

.solisrentcar-entity-card-container > .solisrentcar-entity-card-options-btn,
.solisrentcar-entity-card > .solisrentcar-entity-card-options-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 10;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid var(--sb-border) !important;
    /* Pastille translucide teintee de la surface courante : lisible aussi bien
       sur une photo que sur une carte sans vignette, dans les deux themes. */
    background: color-mix(in srgb, var(--sb-surface) 78%, transparent) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: var(--sb-text-muted) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 0;
}

.solisrentcar-entity-card-container > .solisrentcar-entity-card-options-btn:hover,
.solisrentcar-entity-card > .solisrentcar-entity-card-options-btn:hover {
    background: var(--sb-accent) !important;
    color: #ffffff !important;
    border-color: var(--sb-accent) !important;
    transform: scale(1.05);
}

.solisrentcar-entity-card-options-btn svg {
    pointer-events: none;
}

/* 2. Popover Menu (Desktop) */
.solisrentcar-entity-card-popover {
    position: absolute;
    top: 48px;
    right: 12px;
    z-index: 100;
    min-width: 150px;
    background: var(--sb-surface);
    border: 1px solid var(--sb-border);
    border-radius: 12px;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.18), 0 8px 10px -6px rgba(0, 0, 0, 0.12);
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    opacity: 0;
    transform: translateY(-8px) scale(0.95);
    transition: opacity 0.2s ease, transform 0.2s ease;
    pointer-events: none;
}

.solisrentcar-entity-card-popover.is-open {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.solisrentcar-popover-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 12px;
    font-size: 13px;
    font-weight: 500;
    color: var(--sb-text);
    background: transparent;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
    text-align: left;
}

.solisrentcar-popover-item:hover {
    background: var(--sb-hover-tint);
    color: var(--sb-accent);
}

.solisrentcar-popover-item.solisrentcar-text-danger:hover {
    background: rgba(239, 68, 68, 0.12);
    color: var(--color-danger, #ef4444);
}

.solisrentcar-popover-item svg {
    flex-shrink: 0;
}

/* 3. Bottomsheet Menu (Mobile) */
.solisrentcar-entity-card-bottomsheet-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99999;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.solisrentcar-entity-card-bottomsheet-overlay.is-open {
    opacity: 1;
}

.solisrentcar-entity-card-bottomsheet {
    width: 100%;
    max-width: 500px;
    background: var(--sb-surface);
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    border: 1px solid var(--sb-border);
    border-bottom: none;
    padding: 12px 16px 24px 16px;
    box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.4);
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    box-sizing: border-box;
}

.solisrentcar-entity-card-bottomsheet-overlay.is-open .solisrentcar-entity-card-bottomsheet {
    transform: translateY(0);
}

.solisrentcar-bottomsheet-drag-handle {
    width: 36px;
    height: 4px;
    background: var(--sb-border);
    border-radius: 2px;
    margin: 0 auto 16px auto;
}

.solisrentcar-bottomsheet-header {
    margin-bottom: 16px;
    text-align: center;
}

.solisrentcar-bottomsheet-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--sb-text);
}

.solisrentcar-bottomsheet-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.solisrentcar-bottomsheet-item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 14px;
    font-size: 15px;
    font-weight: 500;
    color: var(--sb-text);
    background: var(--sb-surface-2);
    border: 1px solid var(--sb-border);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

.solisrentcar-bottomsheet-item:active {
    transform: scale(0.98);
}

.solisrentcar-bottomsheet-item.solisrentcar-text-danger {
    color: var(--color-danger, #ef4444);
    border-color: rgba(239, 68, 68, 0.2);
    background: rgba(239, 68, 68, 0.08);
}

.solisrentcar-bottomsheet-action-cancel {
    margin-top: 8px;
    background: transparent;
    border-color: transparent;
    color: var(--sb-text-muted);
}


/* =========================================================================
   6. DISPOSITIONS ET MODÈLES DE CARTE PILOTÉS PAR LA CONFIGURATION
   =========================================================================

   Ce bloc rend réels les choix de l'écran de configuration de l'entité :
   disposition de la liste, format de vignette, modèle de carte, mode de
   chargement. Avant, seuls « grid » et « list » existaient — les autres
   valeurs s'enregistraient sans rien changer à l'affichage.

   Les classes sont posées par PHP sur l'enveloppe
   (`solisrentcar-layout-*`, `solisrentcar-cols-*`, `solisrentcar-cards-*`,
   `solisrentcar-ratio-*`), donc tout se joue en cascade sans JavaScript.
   ========================================================================= */

/* ── FORMAT DE VIGNETTE ───────────────────────────────────────────────────
   `padding-top` plutôt que `aspect-ratio` : la vignette est un conteneur à
   image absolue, et ce bloc doit rester lisible par les navigateurs qui
   servent encore ces pages. La règle 1:1 codée en dur plus haut devient un
   simple défaut, que ces classes remplacent. */
.solisrentcar-ratio-1_1 .solisrentcar-entity-card-media {
    padding-top: 100%;
}

.solisrentcar-ratio-4_3 .solisrentcar-entity-card-media {
    padding-top: 75%;
}

.solisrentcar-ratio-16_9 .solisrentcar-entity-card-media {
    padding-top: 56.25%;
}

.solisrentcar-ratio-3_4 .solisrentcar-entity-card-media {
    padding-top: 133.33%;
}

/* Hauteur naturelle : l'image commande, ce qui n'a de sens qu'en masonry —
   ailleurs, des cartes de hauteurs inégales cassent l'alignement. */
.solisrentcar-ratio-auto .solisrentcar-entity-card-media {
    padding-top: 0;
}

.solisrentcar-ratio-auto .solisrentcar-entity-card-media img {
    position: static;
    height: auto;
}

/* ── MASONRY ──────────────────────────────────────────────────────────────
   Colonnes CSS : c'est le seul masonry qui ne demande ni bibliothèque, ni
   mesure au chargement, ni repositionnement à chaque image arrivée. Il
   ordonne en colonnes (haut-bas puis gauche-droite) et non en lignes — un
   compromis assumé pour une grille de contenus, où l'ordre strict de
   lecture n'est pas un enjeu. */
.solisrentcar-layout-masonry .solisrentcar-front-grid {
    display: block;
    column-gap: 24px;
}

.solisrentcar-layout-masonry.solisrentcar-cols-2 .solisrentcar-front-grid {
    column-count: 2;
}

.solisrentcar-layout-masonry.solisrentcar-cols-3 .solisrentcar-front-grid {
    column-count: 3;
}

.solisrentcar-layout-masonry.solisrentcar-cols-4 .solisrentcar-front-grid {
    column-count: 4;
}

.solisrentcar-layout-masonry .solisrentcar-entity-card-container {
    height: auto;
    margin: 0 0 24px;
    /* Sans cela, une carte se coupe en deux entre le bas d'une colonne et le
       haut de la suivante. */
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
}

/* En masonry, la vignette suit sa hauteur naturelle par défaut : c'est ce
   qui produit l'irrégularité recherchée. */
.solisrentcar-layout-masonry.solisrentcar-ratio-auto .solisrentcar-entity-card-media {
    padding-top: 0;
}

/* ── CARROUSEL ────────────────────────────────────────────────────────────
   Défilement horizontal avec ancrage : le geste s'arrête sur une carte, pas
   entre deux. La barre de défilement est masquée mais le défilement reste
   possible au trackpad, au clavier et au tactile. */
.solisrentcar-layout-carousel .solisrentcar-front-grid {
    display: grid;
    grid-auto-flow: column;
    gap: 24px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 4px;
    padding-bottom: 8px;
    scrollbar-width: none;
}

.solisrentcar-layout-carousel .solisrentcar-front-grid::-webkit-scrollbar {
    display: none;
}

.solisrentcar-layout-carousel .solisrentcar-entity-card-container {
    scroll-snap-align: start;
}

.solisrentcar-layout-carousel.solisrentcar-cols-2 .solisrentcar-front-grid {
    grid-auto-columns: calc(50% - 12px);
}

.solisrentcar-layout-carousel.solisrentcar-cols-3 .solisrentcar-front-grid {
    grid-auto-columns: calc(33.333% - 16px);
}

.solisrentcar-layout-carousel.solisrentcar-cols-4 .solisrentcar-front-grid {
    grid-auto-columns: calc(25% - 18px);
}

.solisrentcar-front-carousel-nav {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

@media (max-width: 768px) {
    .solisrentcar-layout-masonry[class*="solisrentcar-cols-"] .solisrentcar-front-grid {
        column-count: 1;
    }

    .solisrentcar-layout-carousel[class*="solisrentcar-cols-"] .solisrentcar-front-grid {
        grid-auto-columns: 82%;
    }
}

@media (min-width: 769px) and (max-width: 1100px) {
    .solisrentcar-layout-masonry.solisrentcar-cols-3 .solisrentcar-front-grid,
    .solisrentcar-layout-masonry.solisrentcar-cols-4 .solisrentcar-front-grid {
        column-count: 2;
    }

    .solisrentcar-layout-carousel.solisrentcar-cols-3 .solisrentcar-front-grid,
    .solisrentcar-layout-carousel.solisrentcar-cols-4 .solisrentcar-front-grid {
        grid-auto-columns: calc(50% - 12px);
    }
}

/* ── MODÈLE : HORIZONTALE ─────────────────────────────────────────────────
   Vignette à gauche, texte à droite, hauteur commandée par le texte. Vaut
   dans toutes les dispositions, contrairement à la surcharge historique qui
   ne s'appliquait qu'au mode liste. */
.solisrentcar-card-horizontal {
    flex-direction: row;
    align-items: stretch;
}

.solisrentcar-card-horizontal .solisrentcar-entity-card-media {
    flex: 0 0 38%;
    max-width: 240px;
    padding-top: 0;
    min-height: 160px;
}

.solisrentcar-card-horizontal .solisrentcar-entity-card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.solisrentcar-card-horizontal .solisrentcar-entity-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: auto;
    padding-top: 10px;
}

@media (max-width: 640px) {
    .solisrentcar-card-horizontal {
        flex-direction: column;
    }

    .solisrentcar-card-horizontal .solisrentcar-entity-card-media {
        flex: none;
        max-width: none;
        width: 100%;
        padding-top: 60%;
        min-height: 0;
    }
}

/* ── MODÈLE : SUPERPOSÉE ──────────────────────────────────────────────────
   Le texte est posé sur l'image. Le dégradé n'est pas décoratif : sans lui,
   un titre clair sur une photo claire devient illisible, et le contraste ne
   peut pas être garanti puisque l'image vient du client. */
.solisrentcar-card-overlay .solisrentcar-entity-card-media {
    padding-top: 125%;
}

.solisrentcar-card-overlay .solisrentcar-entity-card-overlay {
    position: absolute;
    inset: auto 0 0 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 44px 18px 18px;
    background: linear-gradient(to top, rgba(2, 6, 23, .92) 12%, rgba(2, 6, 23, .55) 55%, rgba(2, 6, 23, 0) 100%);
    color: #fff;
    pointer-events: none;
}

.solisrentcar-card-overlay .solisrentcar-entity-card-title,
.solisrentcar-card-overlay .solisrentcar-entity-card-excerpt,
.solisrentcar-card-overlay .solisrentcar-entity-card-author-name,
.solisrentcar-card-overlay .solisrentcar-entity-card-author-meta {
    color: #fff !important;
}

.solisrentcar-card-overlay .solisrentcar-entity-card-excerpt {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    opacity: .88;
}

/* ── MODÈLE : MINIMALE ────────────────────────────────────────────────────
   Aucun média, aucun cadre : une entrée de sommaire. La bordure de gauche
   au survol remplace l'élévation, qui n'a pas de sens sans surface. */
.solisrentcar-card-minimal {
    background: transparent !important;
    border: 0 !important;
    border-left: 2px solid transparent !important;
    border-radius: 0;
    box-shadow: none;
    padding-left: 16px;
}

.solisrentcar-card-minimal:hover {
    transform: none;
    box-shadow: none;
    border-left-color: var(--solisrentcar-primary, #3b82f6) !important;
}

.solisrentcar-card-minimal .solisrentcar-entity-card-body {
    padding-left: 0;
    padding-right: 0;
}

/* ── ÉLÉMENTS COMMUNS AUX MODÈLES ─────────────────────────────────────── */

.solisrentcar-entity-card-tag {
    display: inline-block;
    align-self: flex-start;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .02em;
    /* Teinte derivee de la couleur du produit : un bleu fixe jurait avec toute
       autre couleur d'accentuation, et disparaissait sur fond sombre. */
    color: var(--sb-accent);
    background: color-mix(in srgb, var(--sb-accent) 14%, transparent);
}

.solisrentcar-entity-card-cta {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 4px;
    margin-top: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--sb-accent);
}

/* == DRAPEAUX HORS VIGNETTE ==============================================
   Statut et compteur de photos vivent d'ordinaire SUR l'image. Quand la
   vignette est coupee par la configuration - ou absente de l'element - le
   pilote les repose ici, en ligne : sans ces regles, ils resteraient en
   position absolue et se superposeraient au titre. */
.solisrentcar-entity-card-flags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

/* Sur la vignette, statut et mise en avant partagent le même coin : posés
   chacun en absolu, ils se superposaient — et la rangée passait sous le bouton
   d'options, qui rognait le dernier badge. La largeur est bornée pour lui
   laisser son coin. */
.solisrentcar-entity-card-media-flags {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 4;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    max-width: calc(100% - 68px);
}

.solisrentcar-entity-card-media-flags .solisrentcar-entity-card-badge {
    position: static;
    top: auto;
    left: auto;
}

/* == MISE EN AVANT ========================================================
   Le badge que l'onglet « Champs » promet depuis toujours. Teinté de la
   couleur du produit, il se distingue du badge de statut sans reprendre la
   couleur d'alerte, qui dirait autre chose. */
.solisrentcar-entity-card-featured {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .01em;
    line-height: 1.4;
    color: #ffffff;
    background: var(--sb-accent);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.22);
}

.solisrentcar-entity-card-featured svg {
    flex-shrink: 0;
}

.solisrentcar-entity-card-flags .solisrentcar-entity-card-featured {
    box-shadow: none;
}

.solisrentcar-entity-card-flags .solisrentcar-entity-card-badge,
.solisrentcar-entity-card-flags .solisrentcar-card-media-count-badge {
    position: static;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    background: var(--sb-surface-2);
    color: var(--sb-text-muted);
    border: 1px solid var(--sb-border);
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.solisrentcar-entity-card-cta::after {
    content: '\2192';
    transition: transform .2s ease;
}

.solisrentcar-entity-card-container:hover .solisrentcar-entity-card-cta::after {
    transform: translateX(3px);
}

/* Fiches individuelles coupées : la carte ne prétend plus être un lien. */
.solisrentcar-front-list-wrapper[data-detail-mode="none"] .solisrentcar-entity-card-container {
    cursor: default;
}

.solisrentcar-front-list-wrapper[data-detail-mode="none"] .solisrentcar-entity-card-container:hover {
    transform: none;
}

/* ── PIEDS DE LISTE : VOIR PLUS, DÉFILEMENT INFINI ────────────────────── */

.solisrentcar-front-load-more {
    display: flex;
    justify-content: center;
}

.solisrentcar-front-load-more[hidden],
.solisrentcar-front-infinite-sentinel[hidden],
.solisrentcar-front-pagination[hidden],
.solisrentcar-front-list-end[hidden] {
    display: none;
}

.solisrentcar-front-infinite-sentinel {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 56px;
}

.solisrentcar-infinite-spinner {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid var(--sb-border);
    border-top-color: var(--sb-accent);
    /* Ne tourne QUE pendant une requête : une roue qui tourne en permanence
       en bas de page laisse croire à un chargement qui n'arrive jamais. */
    opacity: 0;
    transition: opacity .15s ease;
}

.solisrentcar-is-appending .solisrentcar-infinite-spinner {
    opacity: 1;
    animation: solisrentcar-infinite-spin .7s linear infinite;
}

@keyframes solisrentcar-infinite-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .solisrentcar-is-appending .solisrentcar-infinite-spinner {
        animation-duration: 2s;
    }
}

.solisrentcar-front-list-end {
    margin: 0;
    text-align: center;
    font-size: 13px;
    color: var(--sb-text-muted);
}

.solisrentcar-page-gap {
    display: inline-flex;
    align-items: center;
    padding: 0 4px;
    color: var(--sb-text-muted);
}

/* ── APERÇU EN MODALE ─────────────────────────────────────────────────────
   Même panneau que le tiroir latéral, posé au centre. Seule la façon dont il
   arrive à l'écran change : dupliquer le composant aurait dupliqué la
   galerie, les réactions et leur pilote pour une question de position. */
.solisrentcar-front-quickview-offcanvas.solisrentcar-as-modal {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.solisrentcar-front-quickview-offcanvas.solisrentcar-as-modal .solisrentcar-offcanvas-panel {
    position: relative;
    inset: auto;
    width: min(760px, 100%);
    max-height: 88vh;
    height: auto;
    border-radius: 16px;
    transform: scale(.96);
    transition: transform .22s cubic-bezier(.4, 0, .2, 1), opacity .22s ease;
    opacity: 0;
}

.solisrentcar-front-quickview-offcanvas.solisrentcar-as-modal.is-open .solisrentcar-offcanvas-panel {
    transform: scale(1);
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .solisrentcar-front-quickview-offcanvas.solisrentcar-as-modal .solisrentcar-offcanvas-panel {
        transition: opacity .15s ease;
        transform: none;
    }
}


/* == APERCU RAPIDE : BLOCS DE LA FICHE ====================================
   Le tiroir et la modale SONT la fiche quand « Ce qui se passe au clic » ne
   pointe pas vers une page dediee. Ils rendent donc les memes blocs qu'elle -
   chapo, champs metier, partage - qui n'avaient ici ni markup ni style. */

.solisrentcar-quickview-lead {
    margin: 0 0 20px;
    font-size: 1.05rem;
    line-height: 1.6;
    font-weight: 500;
    color: var(--sb-text-muted);
}

.solisrentcar-quickview-meta-card {
    margin-bottom: 24px;
    padding: 18px 20px;
    border: 1px solid var(--sb-border);
    border-radius: 14px;
    background: var(--sb-surface-2);
}

.solisrentcar-quickview-meta-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 14px 24px;
    margin: 0;
}

.solisrentcar-quickview-meta-row dt {
    margin-bottom: 2px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--sb-text-muted);
}

.solisrentcar-quickview-meta-row dd {
    margin: 0;
    font-size: 15px;
    font-weight: 500;
    color: var(--sb-text);
}

.solisrentcar-quickview-share {
    display: flex;
    padding: 16px 0 4px;
    border-top: 1px solid var(--sb-border);
}

/* Compteur de la galerie : il portait ses couleurs en style en ligne avec
   `!important`, ce qui le rendait impossible a reprendre ici. */
.solisrentcar-quickview-gallery-wrapper .solisrentcar-gallery-counter {
    top: 12px;
    bottom: auto;
    color: #ffffff;
    pointer-events: none;
}

.solisrentcar-quickview-gallery-wrapper .solisrentcar-gallery-counter span {
    color: #ffffff;
}


/* == VIGNETTE DE REPLI ====================================================
   Élément sans image alors que la carte en prévoit une. L'initiale du titre
   sur un aplat teinté de la couleur du produit : la carte garde son anatomie
   et sa hauteur, sans le gris d'une image manquante ni le trou d'un bloc
   absent. */
.solisrentcar-entity-card-media-fallback {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Le monogramme est un repère, pas un titre : il se lit en second, très
       en retrait, et laisse les badges au premier plan. Optiquement décalé
       vers le bas, la rangée de badges occupant le haut de la bande. */
    padding-top: 14px;
    font-size: clamp(34px, 7vw, 52px);
    font-weight: 800;
    letter-spacing: -.03em;
    color: color-mix(in srgb, var(--sb-accent) 32%, transparent);
    background:
        radial-gradient(110% 90% at 22% 12%, color-mix(in srgb, var(--sb-accent) 14%, transparent) 0%, transparent 62%),
        var(--sb-surface-2);
    user-select: none;
}

/* Fine ligne de séparation : sans image, rien ne disait où finissait la
   vignette et où commençait le texte. */
.solisrentcar-card-media-empty {
    border-bottom: 1px solid var(--sb-border);
}

/* Hauteur naturelle : sans image, il n'y a rien pour donner sa hauteur au
   conteneur, qui s'écraserait à zéro. */
.solisrentcar-ratio-auto .solisrentcar-card-media-empty {
    padding-top: 56.25%;
}

/* En mosaïque, une carte sans image n'a aucune raison de simuler une hauteur
   d'image : c'est même l'intérêt de la disposition. */
.solisrentcar-layout-masonry .solisrentcar-card-media-empty {
    padding-top: 38%;
}

/* == LIGNE MÉTA ===========================================================
   Trois valeurs au plus, chacune préfixée de son libellé. Le point médian les
   sépare mieux qu'une espace : « Lieu : Tunis Prix : 10 » se lisait comme une
   seule phrase. */
/* Chaque entrée porte son libellé, en petites capitales discrètes, et sa
   valeur dans la couleur du texte. Le point médian qui les séparait donnait
   une liste à puces bancale dès que la carte était étroite — la règle
   supérieure sépare mieux, sans rien ajouter au contenu. */
.solisrentcar-entity-card-meta-item {
    display: flex;
    align-items: baseline;
    gap: 6px;
    min-width: 0;
    max-width: 100%;
}

.solisrentcar-entity-card-meta-label {
    flex-shrink: 0;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--sb-text-muted);
    opacity: .75;
}

.solisrentcar-entity-card-meta-value {
    min-width: 0;
    color: var(--sb-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Un fait vrai — « en ligne », « accès libre » — n'a pas de valeur à montrer :
   il est ou il n'est pas. Une pastille cochée le dit d'un coup d'oeil, là où
   « Est-ce un événement en ligne ? » se lisait comme une question. */
.solisrentcar-entity-card-fact {
    align-items: center;
    gap: 4px;
    padding: 3px 9px 3px 7px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--sb-accent);
    background: color-mix(in srgb, var(--sb-accent) 12%, transparent);
    white-space: nowrap;
}

.solisrentcar-entity-card-fact svg {
    flex-shrink: 0;
    opacity: .9;
}

.solisrentcar-card-meta-date {
    font-variant-numeric: tabular-nums;
}


/* =========================================================================
   COUCHE DE DESIGN — CARTE, PANNEAU DE FILTRES, ÉTATS
   =========================================================================

   Ce que la liste montrait : des cartes de hauteurs quelconques dont les
   badges se chevauchaient, une colonne de neuf listes déroulantes identiques
   sans titre ni sortie, un « Aucun résultat trouvé. » en cul-de-sac, et des
   rectangles gris pour toute attente. Rien n'était faux ; rien n'était tenu.

   Le vocabulaire ne change pas — jetons de `variables.css`, icônes vectorielles,
   surfaces sobres, arrondis existants. Ce sont les paliers qui reviennent :
   un titre qui domine, une méta qui se subordonne, un panneau qui s'annonce,
   des états qui proposent un geste.
   ========================================================================= */

/* ── LA CARTE : ÉTATS ET AFFORDANCE ─────────────────────────────────────
   Elle est cliquable dans son entier. Le survol le disait par une élévation
   seule, invisible en mode sombre où l'ombre ne porte pas : la bordure prend
   la couleur du produit, et le titre suit. */
.solisrentcar-entity-card-container {
    /* Le contenu ne déborde jamais du cadre arrondi, image comprise. */
    isolation: isolate;
}

.solisrentcar-front-list-wrapper:not([data-detail-mode="none"]) .solisrentcar-entity-card-container {
    cursor: pointer;
}

/* Un survol de carte ne doit pas déclencher trois animations : l'élévation
   porte le mouvement, l'image accompagne, le reste ne bouge pas. */
.solisrentcar-entity-card-container:focus-visible,
.solisrentcar-entity-card-container:focus-within {
    outline: 2px solid var(--sb-accent);
    outline-offset: 2px;
}

/* ── ENTRÉE DES CARTES ──────────────────────────────────────────────────
   Un seul moment animé sur la page : les cartes montent de 10 px en se
   révélant, décalées de 45 ms sur les six premières. Au-delà, la cascade
   devient une attente. */
@keyframes solisrentcar-card-enter {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.solisrentcar-card-enter {
    animation: solisrentcar-card-enter .42s cubic-bezier(.16, 1, .3, 1) both;
    animation-delay: var(--sb-enter-delay, 0ms);
}

@media (prefers-reduced-motion: reduce) {
    .solisrentcar-card-enter {
        animation: none;
    }

    .solisrentcar-entity-card-container:hover {
        transform: none;
    }

    .solisrentcar-entity-card-container:hover .solisrentcar-entity-card-media img {
        transform: none;
    }
}

/* ── BARRE DE RÉSULTATS ─────────────────────────────────────────────────
   Combien d'éléments répondent. Elle tient sur une ligne et ne concurrence
   rien : c'est une légende, pas un titre. */
.solisrentcar-front-list-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: -12px;
}

.solisrentcar-front-list-head[hidden] {
    display: none;
}

.solisrentcar-front-count {
    margin: 0;
    font-size: 13px;
    font-weight: 500;
    color: var(--sb-text-muted);
    font-variant-numeric: tabular-nums;
}

/* ── PANNEAU DE FILTRES ─────────────────────────────────────────────────
   Il s'annonce et propose sa sortie. Neuf contrôles empilés sans en-tête ne
   disaient ni ce qu'ils étaient, ni comment revenir à la liste entière. */
.solisrentcar-front-filters-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--sb-border);
}

.solisrentcar-front-filters-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .01em;
    color: var(--sb-text);
}

.solisrentcar-front-filters-title svg {
    color: var(--sb-accent);
}

.solisrentcar-front-reset {
    padding: 4px 10px;
    border: 1px solid transparent;
    border-radius: 999px;
    background: transparent;
    color: var(--sb-text-muted);
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: color .18s ease, background .18s ease, border-color .18s ease;
}

.solisrentcar-front-reset:hover {
    color: var(--sb-accent);
    background: color-mix(in srgb, var(--sb-accent) 10%, transparent);
    border-color: color-mix(in srgb, var(--sb-accent) 22%, transparent);
}

.solisrentcar-front-reset[hidden] {
    display: none;
}

/* En barre haute, l'en-tête occupe toute la largeur au-dessus des contrôles. */
.solisrentcar-front-list-wrapper.solisrentcar-filters-top .solisrentcar-front-filters-head {
    flex: 1 1 100%;
    order: -1;
    padding-bottom: 12px;
}

/* En colonne, le panneau suit la lecture au lieu de disparaître en haut de
   page, et défile pour lui-même quand il est plus haut que l'écran. */
@media (min-width: 993px) {

    .solisrentcar-filters-sidebar_left .solisrentcar-front-filters,
    .solisrentcar-filters-sidebar_right .solisrentcar-front-filters {
        max-height: calc(100vh - 48px);
        overflow-y: auto;
        overscroll-behavior: contain;
    }
}

/* ── BARRE DE DÉFILEMENT DU PANNEAU ─────────────────────────────────────
   La barre native de Windows fait 17 px de large et porte ses propres gris :
   dans un panneau de 280 px, elle mange 6 % de la largeur et devient l'élément
   le plus contrasté de la colonne. Elle est ramenée à un filet de 6 px, teinté
   des jetons — donc juste dans les deux thèmes.

   `scrollbar-width` couvre Firefox et les Chromium récents ; les pseudo-
   éléments couvrent le reste. Les deux déclarations sont nécessaires. */
.solisrentcar-front-filters {
    scrollbar-width: thin;
    scrollbar-color: var(--sb-border) transparent;
}

.solisrentcar-front-filters::-webkit-scrollbar {
    width: 6px;
}

.solisrentcar-front-filters::-webkit-scrollbar-track {
    background: transparent;
}

.solisrentcar-front-filters::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: var(--sb-border);
}

.solisrentcar-front-filters::-webkit-scrollbar-thumb:hover {
    background: var(--sb-text-muted);
}

/* Un intitulé de filtre n'est pas un titre de section : il annonce le contrôle
   qui le suit et doit s'effacer devant lui. */
.solisrentcar-front-filter-label {
    font-size: 11px;
    letter-spacing: .05em;
    opacity: .85;
}

/* Un critère posé se voit : la bordure prend la couleur du produit. Sans quoi
   sept listes sur « Tous » et une sur « Tunis » se ressemblent trait pour
   trait. */
.solisrentcar-front-filter-select[data-active="true"],
.solisrentcar-front-filter-input[data-active="true"] {
    border-color: color-mix(in srgb, var(--sb-accent) 45%, var(--sb-border));
    background: color-mix(in srgb, var(--sb-accent) 7%, var(--sb-surface));
    color: var(--sb-text);
    font-weight: 600;
}

/* La recherche est un filtre comme les autres : une fois saisie, elle se
   distingue de la même façon. */
.solisrentcar-front-search[data-active="true"] {
    border-color: color-mix(in srgb, var(--sb-accent) 45%, var(--sb-border));
    background: color-mix(in srgb, var(--sb-accent) 7%, var(--sb-surface));
}

/* ── ÉTAT VIDE ──────────────────────────────────────────────────────────
   Un titre qui nomme la situation, une phrase qui dit quoi faire, et le geste
   qui la résout. */
.solisrentcar-front-no-results {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 72px 24px;
    text-align: center;
    /* Ni tirets ni boîte : un état vide n'est pas une zone de dépôt. */
    border: 0;
    background: transparent;
    color: var(--sb-text-muted);
    grid-column: 1 / -1;
    /* En mosaïque, la grille est un jeu de COLONNES CSS : un bloc unique s'y
       coupe en quatre morceaux répartis d'une colonne à l'autre — c'est ce qui
       découpait le message d'erreur en tranches illisibles. */
    column-span: all;
    break-inside: avoid;
}

/* Le carrousel place ses enfants en colonnes de largeur fixe : un état vide y
   deviendrait une carte de 300 px au milieu du rail. */
.solisrentcar-layout-carousel .solisrentcar-front-no-results {
    grid-column: 1 / -1;
    width: 100%;
}

/* Erreur : même composition, teinte d'alerte. */
.solisrentcar-front-error .solisrentcar-front-no-results-icon {
    color: var(--color-danger, #ef4444);
    background: color-mix(in srgb, var(--color-danger, #ef4444) 12%, transparent);
}

.solisrentcar-front-no-results-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin-bottom: 6px;
    border-radius: 50%;
    color: var(--sb-accent);
    background: color-mix(in srgb, var(--sb-accent) 10%, transparent);
}

.solisrentcar-front-no-results-title {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    color: var(--sb-text);
}

.solisrentcar-front-no-results-hint {
    max-width: 42ch;
    margin: 0;
    font-size: 13.5px;
    line-height: 1.55;
}

.solisrentcar-front-reset-inline {
    margin-top: 6px;
    padding: 9px 18px;
    border: 1px solid var(--sb-border);
    background: var(--sb-surface);
}

/* ── SQUELETTES ─────────────────────────────────────────────────────────
   Ils reprennent l'anatomie de la carte : la page ne saute plus à l'arrivée
   des vraies données. */
.solisrentcar-skeleton-card {
    display: flex;
    flex-direction: column;
    height: auto;
}

.solisrentcar-skeleton-media {
    width: 100%;
    padding-top: 62%;
    border-bottom: 1px solid var(--sb-border);
}

.solisrentcar-skeleton-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px;
}

.solisrentcar-skeleton-line {
    display: block;
    border-radius: 6px;
}

.solisrentcar-layout-list .solisrentcar-skeleton-card {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    height: auto;
}

.solisrentcar-layout-list .solisrentcar-skeleton-media {
    padding-top: 0;
    height: 100%;
    min-height: 160px;
    border-bottom: 0;
    border-right: 1px solid var(--sb-border);
}

/* L'opacité générale du chargement écrasait le contraste des squelettes, déjà
   volontairement faible : ils devenaient invisibles sur fond clair. */
.solisrentcar-front-grid.solisrentcar-is-loading {
    opacity: 1;
}