/*
Theme Name: ListingHive Pro V46
Theme URI: https://hivepress.io/themes/listinghive
Template: listinghive
Author: Pro V46
Description: Thème enfant premium pour ListingHive 1.2.12. V46 : SUPPRESSION DÉFINITIVE ET TOTALE de tout "cercle de chargement" (spinner) externe au préchargeur, sur toutes les pages et à tout moment — recherche exhaustive confirmant qu'aucun fichier de ce thème enfant ne crée ce spinner (il provient du thème parent, de HivePress ou d'un plugin tiers) ; la règle CSS qui le masquait n'était active QUE pendant la fenêtre de chargement initiale (corrigé : suppression désormais permanente, motifs élargis) ; renforcée par un filet de sécurité JavaScript strictement passif (aucune interception de clic ni de navigation, donc sans risque de régression comme en V44) qui masque en ligne, en continu, tout élément correspondant. Hérite de tous les correctifs et fonctionnalités précédents (V4 à V45). Aucun fichier de HivePress, du thème parent, ni d'aucune extension HivePress n'est jamais modifié.
Version: 46.0.0
Requires PHP: 8.0
License: GNU General Public License
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Text Domain: listinghive-pro-v4
*/

/* Note technique : le préfixe interne des fonctions/réglages (lhpv4_) est
   volontairement conservé en V19 pour ne pas casser les réglages déjà
   enregistrés lors d'une mise à jour depuis une version précédente. La
   nouveauté de cette version (dégradé animé de la bannière catégorie)
   utilise le préfixe CSS "lhpv19-".
   CORRECTIF IMPORTANT V15 : après réception du thème parent ListingHive
   1.2.12 en source, il s'est avéré que ".hp-listing-category__image" est
   un <div> conteneur (contenant un lien + une <img>), et non l'image
   elle-même. Toutes les versions précédentes (V6 à V14) stylaient donc
   le mauvais élément pour la mise en page/le recadrage de l'image, ce qui
   explique le rendu cassé observé (cartes grises). La V15 corrige cela en
   ciblant ".hp-listing-category__image img", et reconstruit le design de
   la carte + de la bannière de catégorie strictement sur la structure
   HTML réelle du thème parent (voir sections "V15 — CATÉGORIES" et
   "V15 — HERO DE CATÉGORIE" plus bas). Le wrapper "#lhpv10-site-hero",
   ajouté à tort en V10 dans header.php, est également retiré : le thème
   cible désormais directement l'élément natif ".header-hero.hp-listing-category"
   rendu par le thème parent. Rien d'autre n'est retiré. */

/* ============================================================
   0. BASE — typographies du site (Montserrat + Poppins)
   ============================================================ */

:root {
	--font-heading: 'Montserrat', sans-serif;
	--font-body: 'Poppins', sans-serif;

	--ios-radius: 24px;
	--ios-inner-radius: 18px;
	--glass-effect: blur(12px) saturate(160%);
	--glass-bg: rgba(255, 255, 255, 0.1);
	--glass-border: rgba(255, 255, 255, 0.2);
	--smooth-ease: cubic-bezier(0.16, 1, 0.3, 1);

	/* ============================================================
	   V10 — SYSTÈME DE COULEURS CENTRALISÉ
	   --color-primary et --color-secondary sont injectées par PHP
	   (functions.php > lhpv4_inline_colors) depuis Personnaliser >
	   Couleurs. Tout le reste ci-dessous EN DÉCOULE automatiquement
	   via color-mix() : aucune couleur de marque n'est donc jamais
	   codée en dur ailleurs dans ce fichier. Si le thème parent ne
	   fournit pas encore --color-primary/--color-secondary, des
	   valeurs de secours neutres et cohérentes sont utilisées.
	   ============================================================ */
	--color-primary: #3b45c4;
	--color-secondary: #c9a84c;

	/* Nuances dérivées de la couleur principale, utilisées pour les
	   fonds légers, bordures, halos de focus, états actifs, etc. */
	--color-primary-08: color-mix(in srgb, var(--color-primary) 8%, transparent);
	--color-primary-14: color-mix(in srgb, var(--color-primary) 14%, transparent);
	--color-primary-25: color-mix(in srgb, var(--color-primary) 25%, transparent);
	--color-primary-50: color-mix(in srgb, var(--color-primary) 50%, transparent);
	--color-primary-dark: color-mix(in srgb, var(--color-primary) 82%, black);
	--color-primary-darker: color-mix(in srgb, var(--color-primary) 62%, black);
	--color-secondary-14: color-mix(in srgb, var(--color-secondary) 14%, transparent);

	/* Dégradé de marque, réutilisé partout (boutons, titres, liserés,
	   badges) au lieu de répéter le même linear-gradient() partout. */
	--brand-gradient: linear-gradient(120deg, var(--color-primary), var(--color-secondary));
	--brand-gradient-soft: linear-gradient(120deg, var(--color-primary-14), var(--color-secondary-14));

	/* Couleurs de texte / surfaces neutres, centralisées elles aussi
	   pour garder une cohérence si une charte "sombre" est activée
	   plus tard sans dupliquer les gris dans tout le fichier. */
	--surface-ink: #0f1727;
	--surface-ink-soft: color-mix(in srgb, var(--surface-ink) 65%, transparent);
	--surface-ink-faint: color-mix(in srgb, var(--surface-ink) 42%, transparent);
	--surface-border: color-mix(in srgb, var(--surface-ink) 8%, transparent);
	--surface-card: #ffffff;

	/* États sémantiques (succès/alerte/erreur) : volontairement non
	   liés à la couleur de marque, par convention UX (reconnaissance
	   immédiate quel que soit le thème de couleur choisi), mais
	   toujours pilotés depuis une seule variable centrale. */
	--color-success: #1fa971;
	--color-warning: #d69a1f;
	--color-danger: #e2483d;
}

body,
input,
select,
textarea,
button {
	font-family: var(--font-body);
}

h1, h2, h3, h4, h5, h6,
.header-logo__name,
.title,
.content-title,
.hp-page__title,
.hp-section__title {
	font-family: var(--font-heading);
	letter-spacing: -0.01em;
}

/* ============================================================
   GLOBAL STYLE: EXPRESS LISTING LIVE (IPHONE EDITION)
   UNIFIED PROFESSIONAL DESIGN - NO IMPOSED COLORS
   ============================================================ */

/* 1. MAP ANNOUNCEMENTS (Fixing the persistent blue) */
.hp-map__popup {
    background: white !important; /* Forces a clean background */
    border-radius: var(--ios-radius) !important;
    padding: 10px !important;
    box-shadow: 0 15px 40px rgba(0,0,0,0.15) !important;
    border: none !important;
}

.hp-map__popup .hp-listing--view-card {
    background: transparent !important;
    box-shadow: none !important;
}

/* 2. ANNOUNCEMENTS & ANNOUNCERS (Listings & Vendors Cards) */
.hp-listing--view-block, 
.hp-vendor--view-block, 
.hp-listing-category--view-block {
    background: var(--glass-bg) !important;
    backdrop-filter: var(--glass-effect) !important;
    -webkit-backdrop-filter: var(--glass-effect) !important;
    
    border-radius: var(--ios-radius) !important;
    border: 1px solid var(--glass-border) !important;
    padding: 0 !important;
    overflow: hidden;
    transition: all 0.5s var(--smooth-ease);
    box-shadow: 0 10px 30px rgba(0,0,0,0.05) !important;
    position: relative;
}

/* Hover Animations for all Cards */
.hp-listing--view-block:hover, 
.hp-vendor--view-block:hover, 
.hp-listing-category--view-block:hover {
    transform: translateY(-8px) scale(1.02);
    background: rgba(255, 255, 255, 0.15) !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
    box-shadow: 0 25px 50px rgba(0,0,0,0.12) !important;
}

/* 3. CATEGORY ANNOUNCERS — voir section "V15 — CATÉGORIES" plus bas :
   carte photo pleine carte fidèle à la structure native du thème
   parent (remplace les tentatives précédentes V6-V14, qui ciblaient
   par erreur le mauvais élément — voir le correctif détaillé V15). */

/* 4. SINGLE ANNOUNCEMENT PAGE (Refining the Listing Page) */
.hp-template--listing-view-page .hp-page__content {
    background: var(--glass-bg) !important;
    backdrop-filter: var(--glass-effect);
    border-radius: var(--ios-radius);
    padding: 30px !important;
    border: 1px solid var(--glass-border);
}

/* Gallery corner radius */
.hp-listing__images, .hp-listing__image img {
    border-radius: var(--ios-inner-radius) !important;
}

/* 5. ARTICLES / BLOG POSTS (Professionalizing the Article Page) */
.post, .hp-post--view-block {
    background: white !important;
    border-radius: var(--ios-radius) !important;
    border: 1px solid rgba(0,0,0,0.05) !important;
    padding: 20px !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.03) !important;
    transition: all 0.4s var(--smooth-ease);
}

.post:hover {
    box-shadow: 0 20px 40px rgba(0,0,0,0.08) !important;
    transform: translateY(-5px);
}

.post .post__thumbnail img {
    border-radius: var(--ios-inner-radius) !important;
}

.post .post__title, .post h2 {
    font-weight: 800 !important;
    letter-spacing: -0.03em;
    color: #1d1d1f !important; /* Apple Black */
}

/* 6. GENERAL BUTTONS (Professional Inheritance) */
.button, 
button, 
.hp-form--listing-search button {
    border-radius: 14px !important;
    padding: 12px 24px !important;
    font-weight: 600 !important;
    text-transform: none !important;
    letter-spacing: -0.01em !important;
    transition: all 0.3s var(--smooth-ease) !important;
}

/* 7. SEARCH BAR (Futuristic & Translucent) */
.hp-form--listing-search {
    background: rgba(255, 255, 255, 0.08) !important;
    backdrop-filter: blur(20px) !important;
    border-radius: 20px !important;
    border: 1px solid var(--glass-border) !important;
    box-shadow: 0 20px 50px rgba(0,0,0,0.1) !important;

/* ============================================================
   V42 — CORRECTIF : BARRE DE RECHERCHE DE LA PAGE D'ACCUEIL —
   BORDS ARRONDIS + TRANSPARENCE GARANTIS, EN TOUTE CIRCONSTANCE
   ------------------------------------------------------------
   CONSTAT : la règle générale ci-dessus (".hp-form--listing-search")
   donne déjà des bords arrondis (20px) et un fond transparent à la
   barre de recherche — mais avec une opacité volontairement très
   subtile (8% de blanc), pensée pour un effet "verre" discret. Sur
   la page d'accueil, superposée à certaines photos de bannière très
   contrastées, cette transparence quasi invisible pouvait donner
   l'impression que la barre n'a plus ni bord arrondi ni fond
   distinct (les deux se "noient" visuellement dans la photo).
   CORRECTIF : sur la page d'accueil (".front-page", classe native
   WordPress posée automatiquement sur <body> pour la page
   d'accueil, quelle que soit sa configuration : page statique
   personnalisée OU derniers articles), la barre de recherche est
   désormais un vrai "pilule" totalement arrondie (border-radius en
   valeur très élevée = coins totalement circulaires, comme demandé)
   avec un fond légèrement plus présent, pour que sa forme reste
   lisible sur n'importe quelle photo de fond — tout en restant
   nettement transparent (on voit toujours la photo au travers).
   Spécificité volontairement renforcée ("body.front-page ... !important")
   pour que cette règle ne puisse jamais être neutralisée par une
   autre déclaration, quel que soit l'état de la barre (chargée au
   premier affichage, après un défilement, etc. — aucun état de ce
   type ne change la classe ".hp-form--listing-search" elle-même,
   donc cette règle s'applique bien dans TOUS les cas de figure).
   ============================================================ */
}

body.front-page .hp-form--listing-search {
	border-radius: 999px !important;
	background: rgba(255, 255, 255, 0.14) !important;
	border: 1px solid rgba(255, 255, 255, 0.4) !important;
}

/* Les deux champs aux extrémités de la barre reprennent le même
   arrondi que le conteneur (au lieu de rester à angle droit à
   l'intérieur d'un contour arrondi), pour une forme de pilule sans
   aucune arête visible, y compris tout au bord. */
body.front-page .hp-form--listing-search > .hp-form__field-wrap:first-child,
body.front-page .hp-form--listing-search > .hp-field:first-child {
	border-top-left-radius: 999px !important;
	border-bottom-left-radius: 999px !important;
}

@media only screen and (max-width: 47.99em) {
	body.front-page .hp-form--listing-search > .hp-form__field-wrap:first-child,
	body.front-page .hp-form--listing-search > .hp-field:first-child {
		border-top-left-radius: 20px !important;
		border-top-right-radius: 20px !important;
		border-bottom-left-radius: 0 !important;
	}
}

/* V33 — Les champs ajoutés DYNAMIQUEMENT à cette barre par une extension
   HivePress (ex. le champ "Localisation" de HivePress Geolocation) ne
   sont pas stylés ici : voir le fichier dédié
   assets/css/search-bar-fields.css (chargé juste après ce fichier, voir
   functions.php > lhpv4_enqueue()), qui force la transparence de tout
   conteneur de champ composite ET de son input réel dans cette barre
   (fond, bordure, ET texte blanc légèrement réduit), quelle que soit
   l'extension qui l'a ajoutée — SANS jamais toucher au bouton
   "Rechercher" (exclu par son identité propre — classe, balise, type —
   voir plus bas la section "PRO V4 — Bouton Rechercher", garantie
   intacte, dégradé animé inchangé). Rien à modifier ici lors de l'ajout
   d'une nouvelle extension HivePress. */

/* ============================================================
   V35 — CORRECTIF : BARRE DE RECHERCHE DÉCENTRÉE SUR ANDROID
   ------------------------------------------------------------
   CONSTAT : sur certains téléphones Android (écran plus large
   que l'iPhone), la barre de recherche apparaissait décalée vers
   la gauche au lieu de rester centrée, alors qu'elle restait bien
   centrée sur iPhone. La barre est pourtant centrée par un calcul
   indépendant de la largeur d'écran ("left: 50%" + "transform:
   translateX(-50%)", voir plus bas "HERO DE CATÉGORIE"), qui
   fonctionne à l'identique quelle que soit la largeur de l'écran.
   CAUSE RÉELLE : un champ FLEX (ex. le champ "Localisation" ajouté
   par l'extension HivePress Geolocation) n'a, par défaut CSS,
   aucune limite de largeur minimale au sein d'une rangée flex
   ("min-width: auto" par défaut) : il peut donc s'étirer au-delà
   de la largeur disponible si son contenu interne (rendu natif
   du champ, qui diffère légèrement entre iOS et Android) est plus
   large que prévu. Résultat : la barre déborde discrètement de son
   propre conteneur d'un côté, ce qui donne l'illusion qu'elle
   n'est plus centrée — uniquement visible sur les appareils où ce
   rendu natif est plus large (typiquement Android). Corrigé ici à
   la source, pour CHAQUE champ de la barre (natif ou ajouté par
   une extension, actuelle ou future), sans dépendre d'un nom de
   champ précis. Aucun changement visuel du design : uniquement une
   limite de largeur maximale posée sur des éléments qui ne
   devraient de toute façon jamais dépasser leur conteneur. */
.hp-form--listing-search,
.hp-form--vendor-search {
	box-sizing: border-box !important;
	max-width: 100%;
}

.hp-form--listing-search .hp-form__field-wrap,
.hp-form--listing-search .hp-field,
.hp-form--listing-search [class*="hp-field--"],
.hp-form--listing-search [data-component],
.hp-form--vendor-search .hp-form__field-wrap,
.hp-form--vendor-search .hp-field,
.hp-form--vendor-search [class*="hp-field--"],
.hp-form--vendor-search [data-component] {
	min-width: 0 !important;
	max-width: 100%;
	box-sizing: border-box !important;
}

.hp-form--listing-search input,
.hp-form--listing-search select,
.hp-form--listing-search .chosen-container,
.hp-form--listing-search .select2-container,
.hp-form--vendor-search input,
.hp-form--vendor-search select,
.hp-form--vendor-search .chosen-container,
.hp-form--vendor-search .select2-container {
	min-width: 0 !important;
	max-width: 100% !important;
	box-sizing: border-box !important;
}

/* Sécurité anti-débordement horizontal : étendue à tout le site et
   toutes les tailles d'écran (auparavant limitée au mobile, voir
   règle historique plus bas dans ce fichier "max-width: 47.99em"),
   pour ne plus jamais dépendre d'une largeur d'écran précise. */
html {
	overflow-x: hidden;
}

/* ============================================================
   V36 — CENTRAGE & ANTI-DÉBORDEMENT GLOBAL (mobile/tablette)
   ------------------------------------------------------------
   Filet de sécurité complémentaire à la règle "html{overflow-x:
   hidden}" ci-dessus : celle-ci empêche la BARRE de défilement
   horizontale d'apparaître, mais un élément trop large peut quand
   même exister hors-écran et décaler visuellement tout le reste
   vers la gauche sur certains appareils (Android notamment, voir
   correctif V35 sur la barre de recherche). On sécurise donc aussi
   "body", et on garantit que les conteneurs centraux du thème
   restent bien centrés par eux-mêmes (indépendamment de tout
   éventuel débordement d'un enfant), sur mobile ET tablette.
   ============================================================ */
body {
	overflow-x: hidden;
	width: 100%;
}

@media only screen and (max-width: 61.99em) {
	.container,
	.header-navbar__container,
	.header-hero__content,
	.hp-page__container {
		width: 100%;
		max-width: 100%;
		margin-left: auto;
		margin-right: auto;
		box-sizing: border-box;
	}

	.lhpv10-search-in-cover {
		margin-left: auto;
		margin-right: auto;
	}
}

/* --- MOBILE OPTIMIZATION --- */
@media (max-width: 768px) {
    .hp-listing--view-block, .hp-vendor--view-block {
        margin: 10px !important;
        border-radius: 20px !important;
    }
    
    .hp-page__content {
        padding: 15px !important;
    }
}

/* ============================================================
   PRO V3 — Halo lumineux qui suit la souris sur les cartes
   (s'appuie sur --mx / --my mis à jour par assets/js/frontend.js)
   ============================================================ */
.hp-listing--view-block::after,
.hp-vendor--view-block::after,
.hp-listing-category--view-block::after,
.hp-form--listing-search::after {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
	border-radius: inherit;
	opacity: 0;
	background: radial-gradient(circle 220px at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, 0.35), transparent 70%);
	transition: opacity 0.4s var(--smooth-ease);
}

.hp-listing--view-block:hover::after,
.hp-vendor--view-block:hover::after,
.hp-listing-category--view-block:hover::after,
.hp-form--listing-search:hover::after {
	opacity: 1;
}

/* ============================================================
   PRO V3 — HEADER : logo et menu centrés, professionnel
   ============================================================ */
.site-header {
	position: sticky;
	top: 0;
	z-index: 999;
	background: rgba(255, 255, 255, 0.55);
	backdrop-filter: blur(18px) saturate(160%);
	-webkit-backdrop-filter: blur(18px) saturate(160%);
	border-bottom: 1px solid rgba(255, 255, 255, 0.4);
	transition: background-color 0.3s var(--smooth-ease), box-shadow 0.3s var(--smooth-ease);
}

.site-header.is-scrolled {
	background: rgba(255, 255, 255, 0.85);
	box-shadow: 0 8px 30px rgba(20, 20, 40, 0.08);
}

.header-navbar {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	align-items: center;
	column-gap: 1.5rem;
	min-height: 86px;
	width: 100%;
	max-width: 1320px;
	margin: 0 auto;
}

/* Le logo n'occupe plus toute la largeur : il reste compact et légèrement centré dans sa colonne */
.header-navbar__start {
	display: flex;
	justify-content: center;
	align-items: center;
}

.header-logo {
	display: inline-flex;
}

.header-logo a {
	display: inline-flex;
	flex-direction: column;
	align-items: flex-start;
	line-height: 1.15;
}

.header-logo__name {
	font-weight: 700;
	font-size: 1.375rem;
	letter-spacing: -0.01em;
	background-image: linear-gradient(95deg, var(--color-primary, #3b45c4), var(--color-secondary, #c9a84c));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.header-logo__description {
	font-size: 0.6875rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: rgba(15, 23, 39, 0.5);
	margin-top: 2px;
}

.header-logo img {
	max-height: 42px;
	width: auto;
}

/* Menu desktop : colonne centrale, parfaitement centré */
.header-navbar__menu {
	justify-self: center;
	position: relative;
}

.header-navbar__menu > ul {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.25rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.header-navbar__menu > ul > li > a {
	display: inline-flex;
	align-items: center;
	padding: 0.625rem 1.125rem;
	border-radius: 9999px;
	font-weight: 500;
	font-size: 0.9375rem;
	color: rgba(15, 23, 39, 0.85);
	transition: background-color 0.25s var(--smooth-ease), color 0.25s var(--smooth-ease);
}

.header-navbar__menu > ul > li > a:hover,
.header-navbar__menu > ul > li.current-menu-item > a {
	background-color: rgba(255, 255, 255, 0.6);
	color: var(--color-primary, #3b45c4);
}

.ht-menu-indicator {
	position: absolute;
	bottom: -6px;
	height: 3px;
	border-radius: 9999px;
	background-image: linear-gradient(90deg, var(--color-primary, #3b45c4), var(--color-secondary, #c9a84c));
	opacity: 0;
	transition: left 0.35s var(--smooth-ease), width 0.35s var(--smooth-ease), opacity 0.25s;
}

/* Actions + burger : alignés à droite, équilibrés avec le logo */
.header-navbar__end {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 0.75rem;
}

.header-navbar__actions {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.625rem;
}

@media only screen and (max-width: 74.99em) {
	.header-navbar {
		grid-template-columns: auto 1fr auto;
	}

	.header-navbar__start {
		justify-content: flex-start;
		grid-column: 1;
	}

	.header-navbar__menu {
		display: none;
	}

	.header-navbar__end {
		grid-column: 3;
	}
}

/* ============================================================
   PRO V3 — Bouton « Ajouter une annonce » et CTA principaux :
   dégradé aux couleurs du site, look professionnel
   ============================================================ */
.button--primary,
.header-navbar__actions .button,
a.hp-listing__submit-button,
.hp-page__actions .button {
	background-image: linear-gradient(120deg, var(--color-primary, #3b45c4), var(--color-secondary, #c9a84c)) !important;
	background-color: var(--color-primary, #3b45c4) !important;
	border: none !important;
	color: #fff !important;
	box-shadow: 0 6px 18px rgba(7, 36, 86, 0.22);
	transition: transform 0.25s var(--smooth-ease), box-shadow 0.25s var(--smooth-ease), background-position 0.4s var(--smooth-ease);
	background-size: 160% 160%;
	background-position: 0% 50%;
}

.button--primary:hover,
.header-navbar__actions .button:hover,
a.hp-listing__submit-button:hover,
.hp-page__actions .button:hover {
	transform: translateY(-2px);
	box-shadow: 0 14px 28px rgba(7, 36, 86, 0.28);
	background-position: 100% 50%;
}

/* ============================================================
   V11 — Filet de sécurité : le bouton "Ajouter une annonce" doit
   TOUJOURS afficher le dégradé de marque, quels que soient les
   classes exactes que HivePress lui attribue selon le contexte.
   Ciblage volontairement précis pour ne pas affecter les autres
   icônes/boutons du header (favoris, langue, compte...).
   ============================================================ */
a.hp-listing__submit-button,
.header-navbar__actions .button--primary,
a[href*="listings/submit"],
a[href*="listing/add"] {
	background-image: var(--brand-gradient, linear-gradient(120deg, var(--color-primary, #3b45c4), var(--color-secondary, #c9a84c))) !important;
	background-color: var(--color-primary, #3b45c4) !important;
	color: #fff !important;
	border: none !important;
}


/* ============================================================
   PRO V4 — Portée globale : tout le site suit le même design
   (pas seulement l'accueil et les annonces)
   ============================================================ */
body {
	background-color: #f7f7fb;
}

.site-content {
	min-height: 50vh;
}

.hp-page__content,
.entry-content,
.page__content {
	font-family: var(--font-body);
}

/* Widgets de sidebar, partout sur le site */
.widget--sidebar,
.widget.hp-menu {
	background: rgba(255, 255, 255, 0.75) !important;
	backdrop-filter: blur(14px) saturate(140%);
	-webkit-backdrop-filter: blur(14px) saturate(140%);
	border-radius: var(--ios-inner-radius) !important;
	border: 1px solid rgba(255, 255, 255, 0.5) !important;
}

/* Comptes, pagination, commentaires : même esprit translucide partout */
.woocommerce-MyAccount-navigation,
.comments > ul > li,
#comments > .comment-respond,
.comments > ul > .comment-respond,
.woocommerce form.checkout_coupon,
.woocommerce form.login,
.woocommerce form.register {
	background: rgba(255, 255, 255, 0.8) !important;
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border-radius: var(--ios-inner-radius) !important;
	border: 1px solid rgba(7, 36, 86, 0.06) !important;
}

.pagination > span,
.pagination .nav-links > a,
.pagination .nav-links > span,
.pagination > a,
.pagination ul li a,
.pagination ul li span.current {
	transition: all 0.25s var(--smooth-ease);
}

.pagination .nav-links > span.current,
.pagination ul li span.current {
	background-image: linear-gradient(135deg, var(--color-primary, #3b45c4), var(--color-secondary, #c9a84c));
	border-color: transparent !important;
	color: #fff !important;
}

/* Tous les formulaires HivePress (hors barre de recherche, gérée à part) :
   même carte premium translucide, partout où ils apparaissent sur le site */
.hp-form:not(.hp-form--listing-search):not(.hp-form--vendor-search):not(.hp-form--listing-sort):not(.hp-form--vendor-sort) {
	background: rgba(255, 255, 255, 0.85);
	backdrop-filter: blur(16px) saturate(150%);
	-webkit-backdrop-filter: blur(16px) saturate(150%);
	border: 1px solid rgba(255, 255, 255, 0.6);
	border-radius: var(--ios-radius);
	padding: 2rem;
	box-shadow: 0 16px 40px rgba(7, 36, 86, 0.07);
}

@media only screen and (max-width: 47.99em) {
	.hp-form:not(.hp-form--listing-search):not(.hp-form--vendor-search):not(.hp-form--listing-sort):not(.hp-form--vendor-sort) {
		padding: 1.25rem;
		border-radius: var(--ios-inner-radius);
	}
}

/* ============================================================
   PRO V4 — Formulaire de soumission d'annonce : design soigné
   ============================================================ */
.hp-form--listing-update,
.hp-form--listing-submit,
.hp-block--listing-submit-categories,
[class*="hp-form--listing-update"] {
	background: rgba(255, 255, 255, 0.9);
	backdrop-filter: blur(18px) saturate(150%);
	-webkit-backdrop-filter: blur(18px) saturate(150%);
	border-radius: var(--ios-radius);
	border: 1px solid rgba(255, 255, 255, 0.6);
	box-shadow: 0 20px 50px rgba(7, 36, 86, 0.08);
	padding: 2.5rem;
}

.hp-form--listing-update .hp-form__field,
.hp-form--listing-submit .hp-form__field,
.hp-form:not(.hp-form--listing-search):not(.hp-form--vendor-search) .hp-form__field {
	margin-bottom: 1.5rem;
}

.hp-form--listing-update .hp-field__label,
.hp-form--listing-submit .hp-field__label,
.hp-form:not(.hp-form--listing-search):not(.hp-form--vendor-search) .hp-field__label {
	font-family: var(--font-heading);
	font-weight: 600;
	color: rgba(15, 23, 39, 0.65);
	margin-bottom: 0.5rem;
	display: inline-block;
}

.hp-form input[type='text'],
.hp-form input[type='email'],
.hp-form input[type='tel'],
.hp-form input[type='number'],
.hp-form input[type='url'],
.hp-form input[type='password'],
.hp-form select,
.hp-form textarea,
.select2-container--default .select2-selection {
	border: 1.5px solid rgba(7, 36, 86, 0.1) !important;
	border-radius: var(--lhp-radius, 12px) !important;
	background-color: #fff !important;
	transition: border-color 0.2s var(--smooth-ease), box-shadow 0.2s var(--smooth-ease);
}

.hp-form input[type='text']:focus,
.hp-form input[type='email']:focus,
.hp-form input[type='tel']:focus,
.hp-form input[type='number']:focus,
.hp-form input[type='url']:focus,
.hp-form textarea:focus,
.select2-container--default.select2-container--focus .select2-selection {
	border-color: var(--color-primary, #3b45c4) !important;
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-primary, #3b45c4) 14%, transparent) !important;
	outline: none;
}

/* Étapes de soumission (si le thème HivePress affiche un fil d'étapes) */
.hp-menu--tabbed .hp-menu__item {
	font-family: var(--font-heading);
	font-weight: 600;
}

.hp-menu--tabbed .hp-menu__item--current::before {
	background-image: linear-gradient(90deg, var(--color-primary, #3b45c4), var(--color-secondary, #c9a84c)) !important;
}

/* Zone d'upload d'images */
.hp-field--attachment-upload {
	border: 2px dashed rgba(7, 36, 86, 0.15);
	border-radius: var(--ios-inner-radius);
	padding: 1.5rem;
	background: rgba(7, 36, 86, 0.02);
	transition: border-color 0.25s var(--smooth-ease), background-color 0.25s var(--smooth-ease);
}

.hp-field--attachment-upload:hover {
	border-color: var(--color-primary, #3b45c4);
	background: rgba(7, 36, 86, 0.04);
}

/* ============================================================
   PRO V4 — Bouton "Rechercher" : légère vibration automatique
   toutes les 5 secondes, même sans survol (plus de halo tournant)
   V21 — Le fond du bouton reprend désormais un dégradé animé en
   boucle avec les couleurs du site (--color-primary/--color-secondary),
   au lieu d'une couleur fixe : la vibration périodique et le
   dégradé qui "coule" se combinent sans se gêner (deux animations
   distinctes sur la même propriété "animation", voir plus bas).
   ============================================================ */
.hp-form--listing-search .hp-form__button,
.hp-form--vendor-search .hp-form__button {
	background-image: linear-gradient(90deg, var(--color-primary, #3b45c4), var(--color-secondary, #c9a84c), var(--color-primary, #3b45c4)) !important;
	background-color: var(--color-primary, #3b45c4) !important;
	background-size: 220% auto !important;
	animation: lhpv4-autoshake 5s ease-in-out infinite, lhpv21-button-gradient-flow 6s linear infinite;
	transform-origin: center;
}

.hp-form--listing-search .hp-form__button:hover,
.hp-form--vendor-search .hp-form__button:hover {
	box-shadow: 0 8px 20px rgba(7, 36, 86, 0.22);
}

@keyframes lhpv4-autoshake {
	0%, 6%, 100% { transform: translateX(0) rotate(0); }
	1% { transform: translateX(-3px) rotate(-2deg); }
	2% { transform: translateX(3px) rotate(2deg); }
	3% { transform: translateX(-2.5px) rotate(-1.5deg); }
	4% { transform: translateX(2.5px) rotate(1.5deg); }
	5% { transform: translateX(-1px) rotate(-0.5deg); }
}

@media (prefers-reduced-motion: reduce) {
	.hp-form--listing-search .hp-form__button,
	.hp-form--vendor-search .hp-form__button {
		animation: none;
	}
}

/* ============================================================
   PRO V4 — Forfaits / Packages / Abonnements : design premium
   ============================================================ */
.hp-listing-package--view-block,
.hp-membership-plan--view-block {
	position: relative;
	background: rgba(255, 255, 255, 0.92) !important;
	border: 1px solid rgba(7, 36, 86, 0.07) !important;
	border-radius: var(--ios-radius) !important;
	box-shadow: 0 14px 36px rgba(7, 36, 86, 0.08) !important;
	transition: transform 0.35s var(--smooth-ease), box-shadow 0.35s var(--smooth-ease), border-color 0.35s var(--smooth-ease) !important;
	overflow: hidden;
}

.hp-listing-package--view-block::before,
.hp-membership-plan--view-block::before {
	content: '';
	display: block;
	height: 5px;
	width: 100%;
	background-image: linear-gradient(90deg, var(--color-primary, #3b45c4), var(--color-secondary, #c9a84c));
}

.hp-listing-package--view-block:hover,
.hp-membership-plan--view-block:hover {
	transform: translateY(-10px) scale(1.015) !important;
	box-shadow: 0 28px 60px rgba(7, 36, 86, 0.16) !important;
	border-color: color-mix(in srgb, var(--color-primary, #3b45c4) 35%, transparent) !important;
}

.hp-listing-package--view-block .hp-listing-package__header,
.hp-membership-plan--view-block .hp-membership-plan__header {
	text-align: center;
	padding: 2rem 1.75rem 1rem !important;
	border-bottom: 1px dashed rgba(7, 36, 86, 0.1) !important;
}

.hp-listing-package--view-block .hp-listing-package__name,
.hp-membership-plan--view-block .hp-membership-plan__name {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 1.25rem;
}

.hp-listing-package--view-block .hp-listing-package__price,
.hp-membership-plan--view-block .hp-membership-plan__price {
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: 2.25rem;
	background-image: linear-gradient(120deg, var(--color-primary, #3b45c4), var(--color-secondary, #c9a84c));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	margin-top: 0.5rem;
	display: inline-block;
}

.hp-listing-package--view-block .hp-listing-package__content,
.hp-membership-plan--view-block .hp-membership-plan__content {
	padding: 1.75rem !important;
}

.hp-listing-package--view-block .hp-listing-package__content ul,
.hp-membership-plan--view-block .hp-membership-plan__content ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.hp-listing-package--view-block .hp-listing-package__content ul li,
.hp-membership-plan--view-block .hp-membership-plan__content ul li {
	position: relative;
	padding: 0.5rem 0 0.5rem 1.75rem;
	font-size: 0.9375rem;
	color: rgba(15, 23, 39, 0.75);
	border-bottom: 1px solid rgba(7, 36, 86, 0.05);
}

.hp-listing-package--view-block .hp-listing-package__content ul li::before,
.hp-membership-plan--view-block .hp-membership-plan__content ul li::before {
	content: '\2713';
	position: absolute;
	left: 0;
	top: 0.5rem;
	width: 1.125rem;
	height: 1.125rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 0.6875rem;
	font-weight: 700;
	color: #fff;
	border-radius: 50%;
	background-image: linear-gradient(135deg, var(--color-primary, #3b45c4), var(--color-secondary, #c9a84c));
}

.hp-listing-package--view-block .hp-listing-package__footer,
.hp-membership-plan--view-block .hp-membership-plan__footer {
	padding: 1.5rem 1.75rem 2rem !important;
	border-top: none !important;
	display: flex;
	justify-content: center;
}

.hp-listing-package--view-block .hp-listing-package__footer .button,
.hp-membership-plan--view-block .hp-membership-plan__footer .button {
	width: 100%;
}

/* Mise en avant du forfait recommandé, si présent */
.hp-listing-package--featured,
.hp-membership-plan--featured {
	border-color: var(--color-secondary, #c9a84c) !important;
	transform: translateY(-6px) scale(1.02);
}

/* ============================================================
   PRO V4 — Messagerie interne : design plus élégant
   ============================================================ */
.hp-message--view-block {
	background: #fff !important;
	border: 1px solid rgba(7, 36, 86, 0.07) !important;
	border-radius: var(--ios-inner-radius) !important;
	box-shadow: 0 6px 18px rgba(7, 36, 86, 0.05) !important;
	padding: 1.25rem 1.5rem !important;
	transition: box-shadow 0.25s var(--smooth-ease), transform 0.25s var(--smooth-ease);
}

.hp-message--view-block:hover {
	box-shadow: 0 14px 28px rgba(7, 36, 86, 0.1) !important;
	transform: translateY(-2px);
}

.hp-message--view-block:not(:last-child) {
	margin-bottom: 0.875rem;
}

.hp-message__sent-date {
	color: rgba(15, 23, 39, 0.4) !important;
}

/* Formulaire de réponse / nouveau message */
.hp-form--message,
.hp-form--listing-update-message,
[class*='hp-form--message'] {
	background: rgba(255, 255, 255, 0.95);
	border-radius: var(--ios-inner-radius);
	border: 1px solid rgba(7, 36, 86, 0.08);
	padding: 1.5rem;
	box-shadow: 0 10px 28px rgba(7, 36, 86, 0.06);
}

.hp-form--message textarea,
[class*='hp-form--message'] textarea {
	min-height: 120px;
	border-radius: var(--lhp-radius, 12px) !important;
}

/* ============================================================
   PRO V9 — Fenêtre modale (fenêtre de discussion « Répondre à
   cette annonce », etc.) : croix de fermeture renforcée et
   garantie visible.
   HivePress embarque Fancybox v3.5.7, qui ne pilote PAS sa croix
   via des variables CSS (contrairement aux versions 4/5) : par
   défaut elle est gris clair (#ccc) sur fond transparent, donc
   quasi invisible sur un fond clair. On la cible ici directement
   et on verrouille taille/position pour empêcher tout écrasement
   par une future mise à jour de la librairie. Un filet de
   sécurité JS (voir frontend.js) applique en plus ce style en
   ligne dès que la fenêtre s'ouvre, pour une fiabilité totale.
   ============================================================ */

/* Variables CSS de Fancybox v4/5 (au cas où la librairie serait
   mise à jour un jour) : la couleur de la croix est pilotée par
   ces variables, il faut donc les redéfinir en priorité. */
.fancybox-container,
.f-carousel,
.f-carousel__slide {
	--f-button-color: #1a1d29;
	--f-button-hover-color: #1a1d29;
	--f-button-bg: #ffffff;
	--f-button-hover-bg: #ffffff;
	--f-button-svg-stroke: #1a1d29;
	--fancybox-color: #1a1d29;
	--fancybox-hover-color: #1a1d29;
	--fancybox-bg: #ffffff;
}

.fancybox-button--close,
.fancybox-button.fancybox-close-small,
.fancybox-close-small,
.f-button.is-close-button,
.f-carousel__button.is-close-button,
.hp-modal__close,
.mfp-close,
[class*='close'][class*='fancybox'],
[class*='close'][class*='modal'] {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	visibility: visible !important;
	width: 36px !important;
	height: 36px !important;
	min-width: 36px !important;
	min-height: 36px !important;
	padding: 0 !important;
	top: 12px !important;
	right: 12px !important;
	background: #ffffff !important;
	border: 1px solid rgba(15, 17, 28, 0.08) !important;
	border-radius: 50% !important;
	box-shadow: 0 4px 16px rgba(7, 36, 86, 0.18) !important;
	z-index: 20 !important;
	transition: transform 0.2s var(--smooth-ease), background-color 0.2s var(--smooth-ease) !important;
}

.fancybox-button--close:hover,
.fancybox-button.fancybox-close-small:hover,
.fancybox-close-small:hover,
.f-button.is-close-button:hover,
.f-carousel__button.is-close-button:hover,
.hp-modal__close:hover,
.mfp-close:hover {
	background: #fff !important;
	transform: scale(1.08) rotate(90deg);
}

/* Icônes SVG (fill, stroke ou currentColor selon la version de la librairie) */
.fancybox-button--close svg,
.fancybox-button--close svg path,
.fancybox-close-small svg,
.fancybox-close-small svg path,
.f-button.is-close-button svg,
.f-button.is-close-button svg path,
.f-carousel__button.is-close-button svg,
.f-carousel__button.is-close-button svg path,
.hp-modal__close svg,
.hp-modal__close svg path {
	color: #1a1d29 !important;
	fill: #1a1d29 !important;
	stroke: #1a1d29 !important;
	opacity: 1 !important;
	width: 14px !important;
	height: 14px !important;
}

/* Croix « texte » (ex. Magnific Popup, qui utilise le caractère × plutôt qu'un SVG) */
.hp-modal__close,
.mfp-close {
	color: #1a1d29 !important;
	text-shadow: none !important;
	opacity: 1 !important;
	font-size: 1.5rem !important;
	line-height: 1 !important;
}

.fancybox-bg {
	background: rgba(15, 17, 28, 0.55) !important;
}

/* ============================================================
   PRO V9 — Footer : fond dégradé animé aux couleurs du thème
   (effet "aurora" qui dérive doucement + orbes flottants en
   arrière-plan), tout regroupé sur une seule ligne centrée.
   ============================================================ */
.site-footer {
	position: relative;
	overflow: hidden;
	background-color: #0a0c16;
	background-image:
		radial-gradient(circle at 15% 20%, color-mix(in srgb, var(--color-primary, #1a1f6e) 45%, transparent) 0%, transparent 55%),
		radial-gradient(circle at 85% 80%, color-mix(in srgb, var(--color-secondary, #c9a84c) 32%, transparent) 0%, transparent 60%),
		radial-gradient(circle at 50% 100%, color-mix(in srgb, var(--color-primary, #1a1f6e) 20%, transparent) 0%, transparent 50%),
		linear-gradient(180deg, var(--color-primary, #1a1f6e) -120%, #14172a 45%, #0a0c16 100%);
	background-size: 200% 200%, 200% 200%, 200% 200%, 100% 100%;
	background-position: 0% 0%, 100% 100%, 50% 100%, 0 0;
	animation: lhpv9-aurora 20s ease-in-out infinite alternate;
	padding: 0;
}

@keyframes lhpv9-aurora {
	0%   { background-position: 0% 0%,  100% 100%, 50% 100%, 0 0; }
	50%  { background-position: 30% 25%, 65% 70%,  60% 85%,  0 0; }
	100% { background-position: 10% 35%, 90% 55%,  35% 100%, 0 0; }
}

.site-footer::before {
	content: '';
	display: block;
	height: 2px;
	width: 100%;
	background-image: linear-gradient(90deg, transparent, var(--color-secondary, #c9a84c), var(--color-primary, #3b45c4), transparent);
	background-size: 200% 100%;
	animation: lhpv4-shimmer 8s linear infinite;
	opacity: 0.8;
}

@keyframes lhpv4-shimmer {
	0% { background-position: 0% 0; }
	100% { background-position: 200% 0; }
}

.site-footer .container {
	position: relative;
	z-index: 1;
}

/* Orbes lumineuses qui dérivent doucement en arrière-plan, aux
   couleurs primaire/secondaire du thème — effet "still animation" */
.footer-orbs {
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
	z-index: 0;
}

.footer-orbs__orb {
	position: absolute;
	border-radius: 50%;
	filter: blur(70px);
	opacity: 0.38;
	will-change: transform;
}

.footer-orbs__orb--a {
	width: 280px;
	height: 280px;
	left: -70px;
	top: -90px;
	background-color: var(--color-primary, #3b45c4);
	animation: lhpv9-drift-a 15s ease-in-out infinite;
}

.footer-orbs__orb--b {
	width: 320px;
	height: 320px;
	right: -90px;
	bottom: -110px;
	background-color: var(--color-secondary, #c9a84c);
	animation: lhpv9-drift-b 19s ease-in-out infinite;
}

.footer-orbs__orb--c {
	width: 200px;
	height: 200px;
	left: 45%;
	bottom: -140px;
	background-color: var(--color-primary, #3b45c4);
	animation: lhpv9-drift-c 23s ease-in-out infinite;
}

@keyframes lhpv9-drift-a {
	0%, 100% { transform: translate(0, 0) scale(1); }
	50%      { transform: translate(70px, 45px) scale(1.18); }
}

@keyframes lhpv9-drift-b {
	0%, 100% { transform: translate(0, 0) scale(1); }
	50%      { transform: translate(-55px, -35px) scale(1.12); }
}

@keyframes lhpv9-drift-c {
	0%, 100% { transform: translate(0, 0) scale(1); }
	50%      { transform: translate(40px, -25px) scale(1.1); }
}

@media (prefers-reduced-motion: reduce) {
	.site-footer,
	.footer-orbs__orb,
	.site-footer::before {
		animation: none !important;
	}
}

/* Halo translucide qui suit le curseur (piloté par frontend.js) */
.footer-glow {
	position: absolute;
	top: 0;
	left: 0;
	width: 360px;
	height: 360px;
	border-radius: 50%;
	pointer-events: none;
	transform: translate(-50%, -50%);
	background: radial-gradient(circle, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 70%);
	opacity: 0;
	transition: opacity 0.5s var(--smooth-ease);
	filter: blur(2px);
	z-index: 1;
}

@supports not (background: color-mix(in srgb, red, blue)) {
	.site-footer {
		background-image: linear-gradient(180deg, #14172a 0%, #0d0f1c 100%);
	}
}

/* ============================================================
   PRO V4 — Bouton WhatsApp sur la page d'une annonce
   ============================================================ */
.lhpv4-whatsapp-button {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.625rem;
	width: 100%;
	margin-top: 0.75rem;
	padding: 0.875rem 1.5rem;
	border-radius: var(--lhp-radius, 12px);
	background-color: #25d366;
	background-image: linear-gradient(135deg, #25d366, #128c7e);
	color: #fff !important;
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: 0.9375rem;
	text-decoration: none !important;
	box-shadow: 0 8px 20px rgba(18, 140, 126, 0.25);
	transition: transform 0.25s var(--smooth-ease), box-shadow 0.25s var(--smooth-ease);
}

.lhpv4-whatsapp-button:hover {
	transform: translateY(-2px);
	box-shadow: 0 14px 28px rgba(18, 140, 126, 0.32);
	color: #fff !important;
}

.lhpv4-whatsapp-button svg {
	flex-shrink: 0;
}

/* ============================================================
   PRO V5 — PRÉCHARGEUR : logo du site, effet de pulsation
   (remplace le cercle de chargement générique)
   ------------------------------------------------------------
   V43 — VÉRIFICATION FAITE DIRECTEMENT SUR LE CODE SOURCE DU THÈME
   PARENT : le thème parent ListingHive ne contient AUCUN
   préchargeur natif (aucune balise, aucun cercle de chargement
   n'existe dans son "header.php" d'origine). Le seul préchargeur du
   site est donc bien celui-ci, et il n'affiche déjà QUE le logo (ou,
   à défaut de logo configuré, une lettre de repli — voir plus bas
   ".lhpv5-preloader__fallback"). Si un cercle de chargement est
   malgré tout visible, il ne peut provenir ni de ce thème enfant ni
   du thème parent : la cause la plus probable est alors une
   EXTENSION/PLUGIN tiers installée sur le site qui affiche son
   propre indicateur de chargement (ex. un plugin "preloader" dédié,
   ou une fonctionnalité de ce type incluse dans un plugin de cache/
   optimisation) — totalement indépendant de ce thème, donc hors de
   portée d'une correction ici. Par précaution, le "z-index" de notre
   préchargeur est néanmoins porté à sa valeur maximale possible
   ci-dessous, pour qu'il s'affiche toujours AU-DESSUS de tout autre
   élément de la page, quel qu'il soit.
   ------------------------------------------------------------
   V44 — RENFORCEMENT DE LA FIABILITÉ, DANS LES DEUX SENS DE
   NAVIGATION (accueil → autre page, ET autre page → accueil) :
   1) #lhpv5-preloader est un unique élément, présent tel quel dans
      header.php sur CHAQUE page sans exception (aucune condition
      liée à la page d'origine ou de destination) : son contenu (le
      logo) ne peut donc structurellement pas différer selon le sens
      de navigation.
   2) Le déclenchement de son affichage ne repose plus uniquement sur
      l'évènement "beforeunload" (dont le rendu visuel n'est pas
      garanti à temps par tous les navigateurs avant le changement de
      page, notamment Safari/iOS) : un clic sur un lien de navigation
      interne affiche désormais le préchargeur immédiatement, AVANT
      le début du changement de page (voir assets/js/frontend.js).
   3) Un filet de sécurité actif (MutationObserver, voir
      assets/js/frontend.js) masque en plus, sur toutes les pages et
      dans les deux sens, tout élément ressemblant à un indicateur de
      chargement qu'un plugin tiers injecterait dynamiquement dans la
      page — en plus de la neutralisation CSS déjà en place plus bas
      dans ce fichier pour les éléments présents dès le chargement.
   ------------------------------------------------------------
   V45 — CORRECTIF DE RÉGRESSION : les points (2) et (3) de la V44
   ci-dessus se sont révélés être la cause d'un bug réel (un petit
   cercle de chargement HivePress natif, affiché lors d'une action
   AJAX — pagination, filtres... — se superposait au préchargeur,
   que notre intercepteur de clic déclenchait par erreur aussi sur ce
   type de lien, qui ne quitte pourtant jamais réellement la page).
   L'intercepteur de clic et le MutationObserver ont donc été retirés
   de assets/js/frontend.js : le déclenchement repose de nouveau
   uniquement sur "load", "pageshow" (bfcache) et "beforeunload",
   exactement comme en V36 — la seule garantie qu'aucun élément
   parasite ne puisse apparaître, puisqu'on ne déclenche plus jamais
   le préchargeur sur autre chose qu'une vraie navigation de page.
   Ce bloc CSS (règles ci-dessous) n'a pas eu besoin d'être modifié :
   le bug provenait uniquement du JavaScript.
   ============================================================ */
.lhpv5-preloader {
	position: fixed;
	inset: 0;
	z-index: 2147483647;
	display: flex;
	align-items: center;
	justify-content: center;
	/* PRO V6 — fond clair en deux tons de blanc (plus de fond sombre) */
	background-image:
		radial-gradient(circle at 50% 38%, #ffffff 0%, #f3f4f8 100%);
	transition: opacity 0.5s var(--smooth-ease), visibility 0.5s var(--smooth-ease);
}

.lhpv5-preloader.is-hidden {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

body:not(.lhpv5-loaded) {
	overflow: hidden;
}

/* PRO V9 — logo encore agrandi pour une présence maximale à l'écran */
.lhpv5-preloader__logo {
	width: 232px;
	height: 232px;
	display: flex;
	align-items: center;
	justify-content: center;
	animation: lhpv5-pulse 1.15s ease-in-out infinite;
}

.lhpv5-preloader__logo img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	/* ombre adoucie pour un fond clair */
	filter: drop-shadow(0 10px 26px rgba(15, 23, 39, 0.16));
}

.lhpv5-preloader__fallback {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background-image: linear-gradient(135deg, var(--color-primary, #3b45c4), var(--color-secondary, #c9a84c));
	color: #fff;
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: 4.25rem;
	box-shadow: 0 10px 28px rgba(15, 23, 39, 0.18);
}

@keyframes lhpv5-pulse {
	0%, 100% { transform: scale(1); opacity: 1; }
	50%      { transform: scale(1.14); opacity: 0.7; }
}

/* Tablette */
@media only screen and (max-width: 74.99em) {
	.lhpv5-preloader__logo {
		width: 186px;
		height: 186px;
	}
}

/* Téléphone */
@media only screen and (max-width: 47.99em) {
	.lhpv5-preloader__logo {
		width: 148px;
		height: 148px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.lhpv5-preloader__logo {
		animation: none;
	}
}

/* ============================================================
   PRO V9 — FOOTER (base) : logo, menu et copyright, séparés par
   de fins points de séparation. Sert de socle mobile/tablette
   (empilé et centré) ; voir bloc "V12 — 3 COLONNES" plus bas pour
   la disposition grand écran avec colonne centrale élargie.
   ============================================================ */
.footer-line {
	position: relative;
	z-index: 1;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 1.5rem;
	text-align: center;
	padding: 2.5rem 0;
}

/* Logo */
.footer-line__logo {
	display: flex;
	align-items: center;
	justify-content: center;
}

.footer-line__logo a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.footer-line__logo img {
	max-height: 40px;
	width: auto;
}

.footer-logo__name {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 1.1875rem;
	letter-spacing: -0.01em;
	background-image: linear-gradient(95deg, #fff, var(--color-secondary, #c9a84c));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent !important;
	text-decoration: none !important;
}

/* Point de séparation entre chaque bloc (masqué en disposition 3
   colonnes grand écran, où l'espacement fait déjà office de séparation) */
.footer-line__divider {
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.3);
	flex-shrink: 0;
}

/* Menu */
.footer-line__menu ul {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.375rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.footer-line__menu ul li {
	position: relative;
}

.footer-line__menu ul li:not(:last-child)::after {
	content: '';
	position: absolute;
	right: -0.375rem;
	top: 50%;
	transform: translateY(-50%);
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.25);
}

.footer-line__menu ul li a {
	display: inline-flex;
	align-items: center;
	padding: 0.5rem 0.875rem;
	border-radius: 9999px;
	font-family: var(--font-heading);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: rgba(255, 255, 255, 0.8);
	transition: background-color 0.25s var(--smooth-ease), color 0.25s var(--smooth-ease), transform 0.25s var(--smooth-ease);
}

.footer-line__menu ul li a:hover {
	background-color: rgba(255, 255, 255, 0.1);
	color: #fff;
	transform: translateY(-1px);
}

/* Copyright */
.footer-line__copyright {
	margin: 0;
	font-family: var(--font-body);
	font-size: 0.8125rem;
	font-weight: 400;
	letter-spacing: 0.01em;
	color: rgba(255, 255, 255, 0.55);
	white-space: nowrap;
}

.footer-line__copyright strong {
	color: rgba(255, 255, 255, 0.75);
	font-weight: 600;
}

/* ============================================================
   V12 — FOOTER EN 3 COLONNES ÉQUILIBRÉES (grand écran ≥ 992px)
   ------------------------------------------------------------
   logo | menu (élargi) | informations, répartis sur toute la
   largeur du footer avec un alignement harmonieux : le logo reste
   à gauche, le copyright à droite, et la colonne du menu — bien
   plus large qu'auparavant — absorbe l'espace central pour que
   les liens respirent davantage. Les points de séparation, inutiles
   dans cette disposition en colonnes, sont masqués.
   ============================================================ */
@media only screen and (min-width: 62em) {
	.footer-line {
		flex-wrap: nowrap;
		justify-content: space-between;
		gap: 2rem;
		text-align: left;
	}

	.footer-line__divider {
		display: none;
	}

	/* Colonne logo : largeur naturelle, ne rétrécit pas */
	.footer-line__logo {
		flex: 0 1 auto;
		justify-content: flex-start;
	}

	/* Colonne menu : nettement élargie, occupe la majorité de
	   l'espace central disponible entre logo et copyright, avec des
	   liens plus espacés pour une lecture plus confortable. */
	.footer-line__menu {
		flex: 1 1 auto;
		min-width: 0;
	}

	.footer-line__menu ul {
		justify-content: center;
		gap: 0.75rem;
	}

	.footer-line__menu ul li a {
		padding: 0.5625rem 1.25rem;
	}

	.footer-line__menu ul li:not(:last-child)::after {
		right: -0.75rem;
	}

	/* Colonne informations (copyright) : largeur naturelle, alignée
	   à droite pour équilibrer visuellement la colonne logo. */
	.footer-line__copyright {
		flex: 0 0 auto;
		text-align: right;
	}
}

/* Tablette : on resserre un peu les espacements, tout reste sur une ligne */
@media only screen and (max-width: 74.99em) {
	.footer-line {
		gap: 1.125rem;
	}
}

/* Mobile : empilement propre logo → menu → copyright, toujours centré,
   les points de séparation disparaissent (inutiles à la verticale) */
@media only screen and (max-width: 61.99em) {
	.footer-line {
		flex-direction: column;
		gap: 1.125rem;
		padding: 2.25rem 0 2rem;
	}

	.footer-line__divider {
		display: none;
	}

	.footer-line__menu ul {
		gap: 0.25rem;
	}

	.footer-line__copyright {
		white-space: normal;
		font-size: 0.75rem;
		padding: 0 1rem;
	}
}


/* ============================================================
   V15 — CATÉGORIES : correction importante + nouveau design.
   ------------------------------------------------------------
   En analysant le code source réel du thème parent ListingHive
   1.2.12, la structure d'une carte de catégorie est :

     <div class="hp-listing-category--view-block">
       <div class="hp-listing-category__image">      <-- un DIV, pas une image
         <a href="...">
           <img ...>                                  <-- l'image est ICI
         </a>
       </div>
       <div class="hp-listing-category__item-count">…annonces</div>
       <div class="hp-listing-category__content">     <-- superposé en bas
         <a><h3 class="hp-listing-category__name">…</h3></a>
       </div>
     </div>

   Les versions V6 à V14 stylaient `.hp-listing-category__image`
   comme si c'était directement une balise <img> (width/height/
   object-fit dessus), ce qui n'a jamais eu d'effet réel sur
   l'image — d'où le rendu cassé (cartes grises, image invisible)
   constaté sur le site. Cette version cible enfin le bon élément
   (`.hp-listing-category__image img`), sans toucher à la structure
   HTML native : carte photo pleine carte avec légende superposée en
   bas à gauche et badge du nombre d'annonces en haut à gauche,
   coins fortement arrondis, zoom doux de l'image au survol.
   ============================================================ */

.hp-listing-category--view-block {
	--lhpv15-cat-delay: calc(var(--lhpv10-i, 0) * 60ms);

	position: relative;
	display: block;
	width: 100%;
	overflow: hidden;
	border-radius: 32px !important;
	background-color: var(--color-primary-08);
	box-shadow: 0 10px 30px rgba(15, 23, 39, 0.12) !important;
	transition: transform 0.4s var(--smooth-ease), box-shadow 0.4s var(--smooth-ease);

	/* V16 — CORRECTIF : un "aspect-ratio" seul dépend d'une largeur
	   correctement calculée par le conteneur parent. Si ce conteneur
	   (grille/colonnes générées par le plugin HivePress, hors de ce
	   thème enfant) ne correspond pas exactement à ce qui était prévu,
	   la largeur peut être mal calculée et la carte devenir invisible
	   (hauteur 0). On utilise donc une hauteur minimale garantie en
	   plus de l'aspect-ratio : la carte reste TOUJOURS visible, quelle
	   que soit la largeur réellement obtenue. */
	aspect-ratio: 3 / 4;
	min-height: 280px;

	/* Apparition en cascade : masquée jusqu'à ce que .is-visible soit
	   ajoutée par l'IntersectionObserver de frontend.js (inchangé). */
	opacity: 0;
	transform: translateY(18px);
}

.hp-listing-category--view-block.is-visible {
	animation: lhpv15-cat-in 0.55s var(--smooth-ease) forwards;
	animation-delay: var(--lhpv15-cat-delay);
}

@keyframes lhpv15-cat-in {
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.hp-listing-category--view-block {
		opacity: 1;
		transform: none;
	}
	.hp-listing-category--view-block.is-visible {
		animation: none;
	}
}

.hp-listing-category--view-block:hover,
.hp-listing-category--view-block:focus-within {
	transform: translateY(-6px);
	box-shadow: 0 22px 44px rgba(15, 23, 39, 0.2) !important;
}

/* Le conteneur image (DIV natif) occupe toute la carte en fond */
.hp-listing-category--view-block .hp-listing-category__image {
	position: absolute;
	inset: 0;
	margin: 0 !important;
	border-radius: 0 !important;
	z-index: 0;
}

.hp-listing-category--view-block .hp-listing-category__image a {
	display: block;
	width: 100%;
	height: 100%;
}

/* La vraie balise <img> : recadrage automatique, jamais déformée */
.hp-listing-category--view-block .hp-listing-category__image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0 !important;
	transition: transform 0.6s var(--smooth-ease);
}

.hp-listing-category--view-block:hover .hp-listing-category__image img {
	transform: scale(1.08);
}

/* Voile sombre (déjà natif au thème parent via ::after sur le lien),
   simplement affiné pour un dégradé plus doux et plus lisible. */
.hp-listing-category--view-block .hp-listing-category__image a::after {
	border-radius: 0 !important;
	background-image: linear-gradient(180deg, rgba(10, 12, 22, 0) 35%, rgba(10, 12, 22, 0.72) 100%) !important;
}

/* Badge "X annonces" en haut à gauche : blanc semi-transparent,
   déjà positionné nativement par le thème parent — on affine juste
   la matière (flou de fond) et la typographie. */
.hp-listing-category--view-block .hp-listing-category__item-count {
	z-index: 2;
	background-color: rgba(255, 255, 255, 0.85) !important;
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	color: var(--surface-ink) !important;
	font-family: var(--font-body);
	font-weight: 700;
}

/* Légende (nom de catégorie), déjà positionnée en overlay bas par le
   thème parent (.hp-listing-category__content) — on affine juste
   l'espacement et la typographie du titre. */
.hp-listing-category--view-block .hp-listing-category__content {
	z-index: 2;
	width: 100%;
	padding: 1.5rem !important;
}

.hp-listing-category--view-block .hp-listing-category__name,
.hp-listing-category--view-block .hp-listing-category__name a {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 1.125rem;
	line-height: 1.3;
	letter-spacing: -0.005em;
	color: #fff !important;
	text-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}

/* La description n'apparaît pas dans le rendu souhaité (légende
   courte uniquement) : masquée visuellement dans la grille, sans
   toucher au HTML natif (reste disponible sur la page de catégorie
   elle-même, où .hp-listing-category--view-page l'affiche toujours). */
.hp-listing-category--view-block .hp-listing-category__description {
	display: none;
}

/* ============================================================
   V15 — GRILLE « TOUTES LES CATÉGORIES », SANS CARROUSEL
   Le carrousel horizontal façon Fiverr (V5) est entièrement retiré,
   ainsi que toute logique de défilement gauche/droite — voir aussi
   assets/js/frontend.js où buildCategoryCarousel() a été supprimée.
   Toutes les catégories renvoyées par WordPress/HivePress s'affichent
   désormais dans une grille responsive classique, en Mobile First :
   1 carte/ligne sur smartphone, 2 sur tablette, 4 sur grand écran —
   cartes homogènes en hauteur (CSS Grid aligne nativement chaque
   rangée grâce à aspect-ratio sur la carte, voir plus haut).
   IMPORTANT : le thème n'invente pas de catégories — il affiche
   toutes celles que WordPress lui transmet. Si un nombre limité de
   catégories apparaît encore (ex. 6), vérifier le réglage « Nombre
   d'éléments / Number of items » du bloc ou du widget qui affiche
   cette section (Elementor, éditeur de blocs, ou shortcode) et le
   mettre à 0 / illimité — voir aussi lhpv13_uncap_category_block()
   dans functions.php, qui retire cette limite côté requête quand
   HivePress le permet.
   ============================================================ */
.hp-listing-categories,
[class*="listing-categories"] {
	display: grid !important;
	grid-template-columns: repeat(1, minmax(0, 1fr));
	gap: 1.5rem;
}

@media only screen and (min-width: 48em) {
	.hp-listing-categories,
	[class*="listing-categories"] {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 1.75rem;
	}
}

@media only screen and (min-width: 75em) {
	.hp-listing-categories,
	[class*="listing-categories"] {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 2rem;
	}
}

/* ============================================================
   V16 — FILET DE SÉCURITÉ : le thème parent ListingHive utilise la
   librairie "flexboxgrid" (classes .row > .col-xs-*/.col-sm-*/
   .col-md-*/.col-lg-*) pour la mise en page de ses blocs, y compris
   probablement celui des catégories (rendu par le plugin HivePress,
   dont le code source n'est pas inclus dans le thème et ne peut donc
   pas être vérifié directement). Si la grille CSS ci-dessus ne
   s'applique pas (classe réelle différente de ".hp-listing-categories"),
   ce filet de sécurité reprend directement le contrôle des largeurs
   de colonnes réelles — mais UNIQUEMENT sur les lignes qui contiennent
   effectivement une carte de catégorie (:has()), pour ne jamais
   affecter les autres grilles Bootstrap-like du site (en-tête de
   catégorie, mise en page générale, etc.). */
@supports selector(:has(a, b)) {
	.row:has(> [class*="col-"] .hp-listing-category--view-block) {
		display: flex;
		flex-wrap: wrap;
	}

	.row:has(> [class*="col-"] .hp-listing-category--view-block) > [class*="col-"] {
		flex: 0 0 100%;
		max-width: 100%;
	}

	@media only screen and (min-width: 48em) {
		.row:has(> [class*="col-"] .hp-listing-category--view-block) > [class*="col-"] {
			flex: 0 0 50%;
			max-width: 50%;
		}
	}

	@media only screen and (min-width: 75em) {
		.row:has(> [class*="col-"] .hp-listing-category--view-block) > [class*="col-"] {
			flex: 0 0 25%;
			max-width: 25%;
		}
	}
}

/* ============================================================
   PRO V5 — Cartes d'annonces : titres adaptés à la couleur du thème
   (plus de couleur fixe imposée)
   ============================================================ */
.hp-listing--view-block .hp-listing__title,
.hp-listing--view-block .hp-listing__title a,
.hp-vendor--view-block .hp-vendor__name,
.hp-vendor--view-block .hp-vendor__name a {
	font-family: var(--font-heading);
	font-weight: 700;
	background-image: linear-gradient(95deg, var(--color-primary, #3b45c4), var(--color-secondary, #c9a84c));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent !important;
	transition: opacity 0.25s var(--smooth-ease);
}

.hp-listing--view-block:hover .hp-listing__title,
.hp-vendor--view-block:hover .hp-vendor__name {
	opacity: 0.82;
}

@supports not (background: color-mix(in srgb, red, blue)) {
	.hp-listing--view-block .hp-listing__title,
	.hp-vendor--view-block .hp-vendor__name {
		background-image: linear-gradient(120deg, var(--color-primary, #3b45c4), var(--color-secondary, #c9a84c));
	}
}


/* ============================================================
   V15 — HERO DE CATÉGORIE + BARRE DE RECHERCHE FLOTTANTE
   ------------------------------------------------------------
   Cible directement l'élément réel du thème parent (confirmé dans
   son code source) : <section class="header-hero hp-listing-category
   hp-listing-category--view-page ..."> — aucun wrapper ajouté, la
   structure native (.header-hero__content > .container > .row >
   .hp-listing-category__header avec badge + titre centrés) reste
   strictement celle du thème parent. On ne fait qu'AJOUTER par-dessus :
     - une hauteur compacte et adaptée au contenu/à l'image choisie
       (voir le correctif V18 juste en dessous — plus de hauteur
       imposée, uniquement du padding réduit) ;
     - une barre de recherche qui vient flotter à cheval sur le bas
       de la bannière (déplacée ici par buildCoverSearch() dans
       frontend.js, qui la retrouve où qu'elle soit rendue par
       HivePress et ne modifie rien d'autre) ;
     - un style spécifique "fond blanc" pour cette barre UNIQUEMENT
       dans ce contexte (elle garde son style "verre" habituel
       partout ailleurs sur le site — voir section "SEARCH BAR"
       plus haut dans ce fichier, non modifiée).
   Le voile sombre (overlay ~0.35) et le badge du nombre d'annonces
   sont déjà natifs au thème parent (.header-hero--cover::after et
   .hp-listing-category__item-count) : on ne les redéfinit pas.
   ============================================================ */
/* ============================================================
   V16 — CORRECTIF : en V15, ".header-hero" était transformé en
   conteneur flex "display:flex; justify-content:center;" pour
   centrer verticalement son contenu. Erreur : sur l'axe principal
   (horizontal, en row), justify-content NE STRETCH PAS l'enfant —
   il le réduit à la largeur de son contenu et le centre. Résultat :
   ".header-hero__content" (qui contient .container > .row > .col-*)
   perdait sa largeur de 100%, cassant les calculs de la grille
   Bootstrap-like interne (col-sm-8, col-sm-offset-2...) et donnant
   l'impression d'une "colonne trop grande"/mal alignée. Corrigé en
   centrant verticalement via ".header-hero__content" lui-même, en
   flex-direction:column (l'axe principal devient vertical, l'axe
   croisé — horizontal — reste "stretch" par défaut : la largeur de
   100% est donc préservée, comme nativement dans le thème parent).
   ============================================================ */
/* ============================================================
   V18 — CORRECTIF DE FOND : en creusant plus loin dans le CSS du
   thème parent (vendor/hivepress/hivetheme/assets/css/frontend.min.css),
   il s'avère que ".header-hero" n'a JAMAIS de hauteur fixe ni de
   min-height nativement : sa taille vient uniquement du padding
   (3rem de base, 6rem puis 9rem pour le modificateur "--large" selon
   l'écran) PLUS la hauteur du texte (badge + titre + description).
   L'image de fond (".header-hero--cover", déjà sélectionnée dans
   l'administration WordPress) s'affiche ensuite en "background-size:
   cover" dans CETTE boîte — c'est ce qui permet à l'image choisie de
   s'adapter naturellement, sans qu'aucune hauteur imposée ne la
   comprime ou ne la cache. Les V15 à V17 imposaient un "min-height"
   qui allait à l'encontre de ce fonctionnement natif. Corrigé : on
   ne fixe plus aucune hauteur, uniquement un padding réduit — plus
   compact que le padding par défaut du thème parent lui-même, comme
   demandé explicitement ("beaucoup plus réduites").
   ============================================================ */
.header-hero.hp-listing-category {
	position: relative;
	overflow: visible;
	padding-top: 2.25rem !important;
	/* Marge basse réservée pour laisser la barre de recherche flottante
	   "déborder" proprement sous la bannière sans chevaucher le contenu
	   qui suit (listings, filtres...). Augmentée en V27 (voir bloc mobile
	   dédié plus bas) car sur mobile la barre de recherche s'empile en
	   colonne (mot-clé + catégorie + bouton) et devient donc bien plus
	   haute que sur desktop : il lui faut plus de place pour ne pas
	   chevaucher le nom/la description de la catégorie juste au-dessus. */
	padding-bottom: 3rem !important;
}

@media only screen and (min-width: 48em) {
	.header-hero.hp-listing-category {
		padding-top: 2.25rem !important;
		padding-bottom: 3.5rem !important;
	}
}

@media only screen and (min-width: 75em) {
	.header-hero.hp-listing-category {
		padding-top: 2.75rem !important;
		padding-bottom: 4rem !important;
	}
}

/* ============================================================
   V19 — DÉGRADÉ ANIMÉ (COULEURS DU SITE) SUR LA BANNIÈRE DE CATÉGORIE
   ------------------------------------------------------------
   Ajouté en ::before, donc sans toucher au HTML natif ni au fond
   propre du thème parent (image de couverture posée en inline-style
   sur ".header-hero" lui-même, voir correctif V18 ci-dessus) :
     - Catégorie SANS image ("not(.header-hero--cover)") : le dégradé
       devient le fond à part entière de la bannière — plus de fond
       neutre par défaut du thème parent.
     - Catégorie AVEC image (".header-hero--cover") : le même dégradé
       est posé en fine teinte semi-transparente, mélangée à la photo
       via mix-blend-mode, pour une identité de marque cohérente sans
       jamais nuire à la lisibilité du titre (le voile sombre natif du
       thème parent, ".header-hero--cover::after", n'est pas touché :
       ::before et ::after coexistent sans conflit).
   Uniquement --color-primary / --color-secondary (+ une nuance dérivée
   automatiquement via color-mix) : aucune couleur codée en dur, le
   dégradé suit donc toujours la palette choisie dans le Personnaliseur.
   ============================================================ */
.header-hero.hp-listing-category::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background-image: linear-gradient(
		-45deg,
		var(--color-primary, #3b45c4),
		var(--color-secondary, #c9a84c),
		var(--color-primary-dark, #2a3199),
		var(--color-secondary, #c9a84c)
	);
	background-size: 400% 400%;
	animation: lhpv19-gradient-flow 14s ease infinite;
}

.header-hero.hp-listing-category:not(.header-hero--cover)::before {
	opacity: 1;
}

/* ============================================================
   V21 — CORRECTIF : quand une catégorie A une image de couverture,
   le dégradé animé ne doit JAMAIS être posé dessus. En V19/V20, une
   fine teinte semi-transparente (mix-blend-mode) restait appliquée
   par-dessus la photo : selon les couleurs choisies dans le
   Personnaliseur (couleurs très claires/saturées), ce mélange pouvait
   suffire à rendre la photo quasi invisible. Pour garantir que la
   photo reste TOUJOURS pleinement visible, quelles que soient les
   couleurs du site, le dégradé est désormais entièrement désactivé
   dès qu'une image de couverture est présente — il ne s'affiche plus
   que sur les catégories qui n'ont réellement aucune image.
   ============================================================ */
.header-hero.hp-listing-category.header-hero--cover::before {
	content: none;
	opacity: 0;
	animation: none;
}

/* Le contenu natif (badge, titre, description) reste toujours au-dessus
   du dégradé animé. La recherche flottante n'a pas besoin d'une règle
   ici : elle déclare déjà son propre "z-index: 5" plus bas dans ce
   fichier, largement suffisant au-dessus du "z-index: 0" du dégradé. */
.header-hero.hp-listing-category > .header-hero__content {
	position: relative;
	z-index: 1;
}

/* ============================================================
   V35 — CORRECTIF : ESPACEMENT BARRE DE RECHERCHE / FILTRE / TITRE
   ------------------------------------------------------------
   CONSTAT : depuis l'ajout du champ "Localisation" (extension
   HivePress Geolocation), la barre de recherche flottante est plus
   haute qu'avant (voir ".lhpv10-search-in-cover" plus bas) : son
   débordement sous la bannière ("transform: translate(-50%, 50%)")
   s'étend donc un peu plus bas qu'auparavant, et pouvait chevaucher
   le filtre et le contenu qui suit la bannière sur tablette/desktop.
   Un espacement de compensation existait déjà, mais UNIQUEMENT sur
   mobile (voir bloc "@media max-width: 47.99em" plus bas, V27).
   Cette règle générale comble le manque sur tablette et desktop : le
   contenu qui suit immédiatement la bannière de catégorie (filtre,
   liste d'annonces...) reçoit désormais toujours assez d'air pour ne
   jamais toucher la barre de recherche flottante ni le titre de la
   catégorie, quelle que soit la taille d'écran. La règle mobile dédiée
   (plus spécifique par ordre de déclaration) continue de s'appliquer
   telle quelle en dessous de 48em et prend le dessus sur celle-ci. */
.header-hero.hp-listing-category + * {
	margin-top: 3rem;
}

@media only screen and (min-width: 75em) {
	.header-hero.hp-listing-category + * {
		margin-top: 3.5rem;
	}
}

@keyframes lhpv19-gradient-flow {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.header-hero.hp-listing-category::before {
		animation: none;
		background-position: 50% 50%;
	}
}

/* Barre de recherche flottante, à cheval sur le bord bas de la bannière */
.lhpv10-search-in-cover {
	position: absolute;
	left: 50%;
	bottom: 0;
	transform: translate(-50%, 50%);
	z-index: 5;
	width: min(92%, 1100px);
	margin: 0;
	padding: 0;
}

/* V15 — dans ce contexte précis (superposée à la bannière photo), la
   barre de recherche passe en fond blanc opaque avec une ombre douce,
   comme demandé : c'est une exception volontaire et scoped à cet
   emplacement uniquement (elle garde son style "verre" habituel sur
   le reste du site, voir plus haut dans ce fichier). */
.lhpv10-search-in-cover.hp-form--listing-search,
.lhpv10-search-in-cover .hp-form--listing-search {
	background: #fff !important;
	backdrop-filter: none !important;
	-webkit-backdrop-filter: none !important;
	border: none !important;
	border-radius: 28px !important;
	box-shadow: 0 20px 45px rgba(15, 23, 39, 0.18) !important;
	padding: clamp(0.5rem, 1vw, 0.875rem) !important;
	min-height: 85px;
	display: flex;
	align-items: center;
}

.lhpv10-search-in-cover input[type="text"],
.lhpv10-search-in-cover input[type="search"],
.lhpv10-search-in-cover .hp-form__field {
	background: transparent !important;
	border: none !important;
	font-size: 1rem;
	padding-left: 2.75rem !important;
}

/* Icône de recherche à gauche du champ, discrète */
.lhpv10-search-in-cover .hp-form__field-wrap {
	position: relative;
}

.lhpv10-search-in-cover .hp-form__field-wrap::before {
	content: '\f002';
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
	position: absolute;
	left: 1rem;
	top: 50%;
	transform: translateY(-50%);
	color: var(--surface-ink-faint);
	pointer-events: none;
	z-index: 1;
}

/* Bouton "Rechercher" : dégradé animé aux couleurs du site (V21),
   coins arrondis, même hauteur que le champ, effet hover doux. */
.lhpv10-search-in-cover .button,
.lhpv10-search-in-cover button[type="submit"] {
	background-image: linear-gradient(90deg, var(--color-primary, #3b45c4), var(--color-secondary, #c9a84c), var(--color-primary, #3b45c4)) !important;
	background-color: var(--color-primary, #3b45c4) !important;
	background-size: 220% auto !important;
	animation: lhpv21-button-gradient-flow 6s linear infinite;
	color: #fff !important;
	border: none !important;
	border-radius: 18px !important;
	height: 100%;
	min-height: 60px;
	padding: 0 1.75rem !important;
	font-weight: 700;
	transition: transform 0.3s var(--smooth-ease), box-shadow 0.3s var(--smooth-ease);
}

.lhpv10-search-in-cover .button:hover,
.lhpv10-search-in-cover button[type="submit"]:hover {
	transform: translateY(-1px);
	box-shadow: 0 10px 24px rgba(15, 23, 39, 0.22);
}

@keyframes lhpv21-button-gradient-flow {
	0% {
		background-position: 0% 50%;
	}
	100% {
		background-position: 220% 50%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.lhpv10-search-in-cover .button,
	.lhpv10-search-in-cover button[type="submit"] {
		animation: none;
	}
}

@media only screen and (max-width: 47.99em) {

	/* ------------------------------------------------------------
	   V27 — CORRECTIF RESPONSIVE MOBILE (bannière de catégorie)
	   --------------------------------------------------------------
	   Trois problèmes distincts remontés sur mobile, tous corrigés
	   ci-dessous :
	   1) Le nom et la description de la catégorie collaient aux bords
	      de la bannière → padding haut/bas augmenté (voir règle de
	      base ".header-hero.hp-listing-category" plus haut + bloc
	      dédié ci-dessous).
	   2) Les champs de la barre de recherche (mot-clé, filtre de
	      catégorie, bouton) étaient collés les uns aux autres une fois
	      empilés en colonne : aucun "gap" n'était défini entre eux.
	   3) La barre de recherche flottante — bien plus haute une fois
	      empilée verticalement — débordait trop fortement au-dessus
	      de son bord inférieur et pouvait chevaucher le nom/la
	      description juste au-dessus : le débordement est réduit et
	      le contenu qui suit la bannière reçoit une marge de
	      compensation pour ne jamais coller à la barre de recherche.
	   ------------------------------------------------------------ */

	.header-hero.hp-listing-category {
		padding-top: 2.5rem !important;
		padding-bottom: 5.5rem !important;
	}

	.header-hero.hp-listing-category .header-hero__content h1,
	.header-hero.hp-listing-category .header-hero__content .hp-listing-category__count,
	.header-hero.hp-listing-category .header-hero__content p {
		margin-bottom: 0.625rem;
	}

	/* Déborde moins vers le haut (35 % de sa hauteur au lieu de 50 %) :
	   suffisant pour garder l'effet "flottant", sans venir chevaucher
	   le texte de la bannière juste au-dessus. */
	.lhpv10-search-in-cover {
		width: 94%;
		transform: translate(-50%, 35%);
	}

	.lhpv10-search-in-cover.hp-form--listing-search,
	.lhpv10-search-in-cover .hp-form--listing-search {
		flex-direction: column;
		align-items: stretch;
		min-height: 0;
		gap: 0.625rem;
		border-radius: 20px !important;
	}

	/* Chaque champ (mot-clé, filtre de catégorie) prend toute la
	   largeur disponible et garde une hauteur confortable au doigt,
	   maintenant qu'ils ne sont plus collés grâce au "gap" ci-dessus. */
	.lhpv10-search-in-cover .hp-form__field-wrap,
	.lhpv10-search-in-cover select,
	.lhpv10-search-in-cover .chosen-container,
	.lhpv10-search-in-cover .select2-container {
		width: 100% !important;
		min-height: 44px;
	}

	.lhpv10-search-in-cover .button,
	.lhpv10-search-in-cover button[type="submit"] {
		width: 100%;
		min-height: 48px;
		margin-top: 0;
	}

	/* ------------------------------------------------------------
	   V36 — RENFORCEMENT : la barre compte désormais jusqu'à 4
	   éléments empilés sur mobile (mot-clé + localisation ajoutée
	   par HivePress Geolocation + filtre de catégorie + bouton), donc
	   plus haute qu'au moment du correctif V27 ci-dessus (3 éléments).
	   On augmente en conséquence la place réservée sous la bannière,
	   et on couvre aussi les champs ajoutés par une extension (pas
	   seulement les sélecteurs natifs), pour qu'aucune configuration
	   de champs ne recolle les éléments entre eux.
	   V40 — RENFORCEMENT SUPPLÉMENTAIRE : retour utilisateur — sur
	   mobile, le titre de la catégorie, la barre de recherche et les
	   filtres juste en dessous donnaient encore une impression de
	   superposition/manque d'air. On resserre donc le débordement de
	   la barre sous la bannière (28% → 20% de sa propre hauteur, donc
	   moins de chevauchement) ET on augmente les deux espaces
	   demandés : celui entre le titre et la barre (padding-bottom de
	   la bannière, ci-dessous) et celui entre la barre et les filtres
	   (margin-top du contenu qui suit, un peu plus bas).
	   V40 PLUS — encore renforcé à la demande : padding-bottom
	   9rem → 10rem, margin-top 5rem → 5.5rem, et les trois valeurs
	   sont désormais posées en "!important" pour ne plus jamais
	   pouvoir être réduites par une règle chargée après celle-ci. */
	.header-hero.hp-listing-category {
		padding-bottom: 10rem !important;
	}

	.lhpv10-search-in-cover {
		transform: translate(-50%, 20%) !important;
	}

	.lhpv10-search-in-cover.hp-form--listing-search,
	.lhpv10-search-in-cover .hp-form--listing-search {
		gap: 0.75rem;
	}

	.lhpv10-search-in-cover .hp-form__field-wrap,
	.lhpv10-search-in-cover .hp-field,
	.lhpv10-search-in-cover [class*="hp-field--"],
	.lhpv10-search-in-cover [data-component],
	.lhpv10-search-in-cover select,
	.lhpv10-search-in-cover .chosen-container,
	.lhpv10-search-in-cover .select2-container {
		width: 100% !important;
		min-height: 44px;
	}

	.header-hero.hp-listing-category + * {
		margin-top: 5.5rem !important;
	}
	/* ------------------------------------------------------------ */
}

/* ============================================================
   V10 MAX — PRÉCHARGEUR : compatible navigation Back/Forward
   (bfcache). L'élément n'est plus retiré du DOM par frontend.js ;
   il reste présent et masqué, prêt à être réaffiché brièvement
   via l'évènement "pageshow" (persisted) déclenché par le
   navigateur lors d'un retour/avance en arrière — voir frontend.js.
   ============================================================ */
.lhpv5-preloader.is-replaying {
	transition: none;
	opacity: 1;
	visibility: visible;
	pointer-events: none;
}

/* Neutralise tout préchargeur générique éventuellement fourni par le
   thème parent (noms de classes usuels), pour garantir qu'il n'y en a
   plus qu'un seul et unique sur l'ensemble du site : celui ci-dessus.
   Portée volontairement restreinte à ces sélecteurs génériques précis
   pour ne jamais masquer un composant légitime de la page. */
body.lhp-pro-v10-max .site-preloader:not(.lhpv5-preloader),
body.lhp-pro-v10-max #preloader:not(#lhpv5-preloader),
body.lhp-pro-v10-max .page-loader:not(.lhpv5-preloader),
body.lhp-pro-v10-max .theme-preloader:not(.lhpv5-preloader) {
	display: none !important;
}

/* ============================================================
   V46 — SUPPRESSION DÉFINITIVE ET TOTALE DE TOUT "CERCLE DE
   CHARGEMENT" (spinner), QUELLE QUE SOIT LA PAGE ET QUEL QUE SOIT
   LE MOMENT — SUR DEMANDE EXPLICITE.
   ------------------------------------------------------------
   RECHERCHE EFFECTUÉE (V46) : aucun fichier de ce thème enfant
   (PHP, JS, CSS) ne crée, n'injecte ni n'affiche le moindre
   spinner : ni élément HTML en dur dans header.php/footer.php, ni
   fonction JavaScript dans assets/js/*.js. Ce cercle provient donc
   nécessairement du thème parent ListingHive, du cœur HivePress,
   ou d'un plugin tiers (cache, optimisation, formulaire...).
   CORRECTIF V42 INSUFFISANT (retiré ci-dessous) : la règle
   précédente ne masquait ces spinners que PENDANT la fenêtre de
   chargement initiale (sélecteur "body:not(.lhpv5-loaded)"), qui se
   termine dès que notre préchargeur disparaît. C'est exactement ce
   qui expliquait le "cercle qui apparaît juste après" le logo : une
   fois cette fenêtre refermée, plus rien ne le masquait.
   CORRECTIF V46 : la restriction temporelle est retirée. Ces règles
   s'appliquent désormais EN PERMANENCE, sur toutes les pages, à
   tout moment (chargement initial, navigation ultérieure, actions
   AJAX...). La liste de motifs est aussi élargie pour couvrir un
   maximum de conventions de nommage utilisées par WordPress, les
   thèmes/plugins courants et les bibliothèques d'icônes usuelles.
   Seul notre propre préchargeur (".lhpv5-preloader" et tout ce
   qu'il contient) est explicitement épargné, dans toutes les
   règles ci-dessous, pour ne jamais se masquer lui-même.
   AVERTISSEMENT (transparence) : ces règles sont volontairement
   larges, comme demandé ("sous aucune condition"). Si un plugin
   légitime (ex. ajout au panier WooCommerce) utilise l'un de ces
   noms de classe/id pour SON propre indicateur de chargement
   pendant une action de l'utilisateur, il sera lui aussi masqué. Il
   n'existe pas de solution intermédiaire fiable en CSS pur : un nom
   de classe/id générique ne permet pas de distinguer "le mauvais
   cercle" d'un éventuel autre usage légitime du même nom.
   ============================================================ */
:where(
	[class*="spinner" i],
	[id*="spinner" i],
	[class*="loader" i],
	[id*="loader" i],
	[class*="loading" i],
	[id*="loading" i],
	[class*="throbber" i],
	[class*="preloader" i],
	[id*="preloader" i],
	.fa-spinner,
	.fa-circle-notch,
	.fa-spin,
	.hp-spinner,
	.hp-page__spinner,
	.elementor-loading,
	.elementor-preloader,
	.blockUI,
	.blockOverlay,
	.blockMsg,
	progress
):not(.lhpv5-preloader):not(.lhpv5-preloader *) {
	display: none !important;
	visibility: hidden !important;
	opacity: 0 !important;
	pointer-events: none !important;
}

/* Pseudo-éléments (::before / ::after) : certains plugins ne créent pas
   un élément séparé mais dessinent le cercle en CSS pur directement sur
   le bouton/conteneur (ex. ".hp-form__button--loading::after"). On
   neutralise donc aussi ce cas, avec la même portée permanente. */
:where(
	[class*="spinner" i],
	[id*="spinner" i],
	[class*="loader" i],
	[id*="loader" i],
	[class*="loading" i],
	[id*="loading" i],
	[class*="throbber" i],
	[class*="preloader" i],
	[id*="preloader" i]
):not(.lhpv5-preloader)::before,
:where(
	[class*="spinner" i],
	[id*="spinner" i],
	[class*="loader" i],
	[id*="loader" i],
	[class*="loading" i],
	[id*="loading" i],
	[class*="throbber" i],
	[class*="preloader" i],
	[id*="preloader" i]
):not(.lhpv5-preloader)::after {
	display: none !important;
	content: none !important;
	opacity: 0 !important;
}

/* ============================================================
   V10 MAX — ÉTATS DE FOCUS COHÉRENTS, PARTOUT (accessibilité +
   couleur de marque plutôt que le contour bleu par défaut du
   navigateur). S'applique à tous les éléments interactifs du
   thème sans exception.
   ============================================================ */
a:focus-visible,
button:focus-visible,
.button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
	outline: 2.5px solid var(--color-primary) !important;
	outline-offset: 2px;
	border-radius: 6px;
}

/* ============================================================
   V10 MAX — BADGES "PROFIL VÉRIFIÉ" ET LIBELLÉS / INDICATEURS
   Couleur pilotée par la marque plutôt qu'un bleu fixe.
   ============================================================ */
.hp-icon--verified,
[class*="verified-badge"],
.hp-vendor__badge,
.hp-label {
	color: var(--color-primary) !important;
}

.hp-badge,
[class*="hp-listing__label"],
[class*="hp-listing__badge"] {
	background-image: var(--brand-gradient) !important;
	background-color: var(--color-primary) !important;
	color: #fff !important;
	border: none !important;
	border-radius: 9999px !important;
}

/* ============================================================
   V10 MAX — NOTIFICATIONS / ALERTES HIVEPRESS
   Les couleurs sémantiques (succès/alerte/erreur) restent stables
   pour la lisibilité, mais la structure (rayon, ombre, typo) suit
   désormais la charte visuelle premium du thème.
   ============================================================ */
.hp-message--success,
.woocommerce-message,
.notice-success {
	border-left: 4px solid var(--color-success) !important;
}

.hp-message--error,
.woocommerce-error,
.notice-error {
	border-left: 4px solid var(--color-danger) !important;
}

.hp-message--warning,
.notice-warning {
	border-left: 4px solid var(--color-warning) !important;
}

.hp-message--success,
.hp-message--error,
.hp-message--warning,
.woocommerce-message,
.woocommerce-error,
.notice-success,
.notice-error,
.notice-warning {
	border-radius: var(--ios-inner-radius) !important;
	background: var(--surface-card) !important;
	box-shadow: 0 8px 24px rgba(15, 23, 39, 0.06) !important;
	font-family: var(--font-body);
	padding: 1rem 1.25rem !important;
}

/* ============================================================
   V12 — SYNCHRONISATION COMPLÈTE DE LA COULEUR DE MARQUE
   ------------------------------------------------------------
   Le thème parent ListingHive compile ses styles avec une couleur
   d'accent par défaut figée (jaune, #ffc107) pour plusieurs
   éléments décoratifs mineurs qui ne passent pas par les réglages
   dynamiques du Personnaliseur : le petit trait au-dessus des
   titres de section, le survol des tags, le ruban "à la une" des
   annonces, et le repère du menu actif. Ces éléments restent donc
   jaunes même après changement de la couleur principale du site.
   Le bloc ci-dessous les fait TOUS suivre --color-primary /
   --brand-gradient, au même titre que les boutons et badges déjà
   synchronisés plus haut dans ce fichier. Rien n'est retiré : ces
   règles ne font que remplacer une couleur figée par une variable.
   ============================================================ */

/* Trait décoratif au-dessus des titres (.title, .content-title,
   .hp-page__title, .hp-section__title côté thème parent). */
.title::before,
.content-title::before,
.hp-page__title::before,
.hp-section__title::before {
	background-color: var(--color-primary) !important;
	background-image: var(--brand-gradient) !important;
}

/* Nuage de tags : couleur de survol alignée sur la marque. */
.tagcloud a:hover,
.wp-block-tag-cloud a:hover {
	border-color: var(--color-primary) !important;
	color: var(--color-primary) !important;
}

/* Ruban "à la une" sur les cartes d'annonces (coin supérieur gauche). */
.hp-listing__featured-badge {
	background-color: var(--color-primary) !important;
	background-image: var(--brand-gradient) !important;
}

/* Repère visuel du lien de menu actif (soulignement/pastille générés
   par le thème parent en ::before, aussi bien dans le menu desktop
   que dans le menu du burger mobile). */
.header-navbar__menu > ul > li.current-menu-item::before,
.header-navbar__burger > ul > li.current-menu-item::before {
	background-color: var(--color-primary) !important;
	background-image: var(--brand-gradient) !important;
}

/* Cases à cocher, boutons radio et curseurs natifs (ex. filtres de
   recherche, champs de formulaire HivePress) : suivent la couleur
   de marque au lieu du bleu par défaut du navigateur. */
input[type="checkbox"],
input[type="radio"],
input[type="range"] {
	accent-color: var(--color-primary);
}

/* Boutons WooCommerce (boutique, panier, commande) : même dégradé de
   marque que les boutons HivePress, pour une expérience cohérente
   sur les sites qui combinent annonces et boutique. */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce .add_to_cart_button,
.woocommerce a.checkout-button {
	background-image: var(--brand-gradient) !important;
	background-color: var(--color-primary) !important;
	color: #fff !important;
	border: none !important;
}

/* Prix WooCommerce : le montant fort suit la marque, comme les prix
   des forfaits/annonces déjà stylés plus haut dans ce fichier. */
.woocommerce ins .amount,
.woocommerce p.price ins {
	color: var(--color-primary-dark) !important;
}

/* ============================================================
   V11 — Le bloc "polish général" ajouté en V10 Max (boutons
   secondaires transparents, recoloration de tous les liens du site,
   couleur de sélection de texte) a été retiré : il n'avait pas été
   demandé et pouvait interférer avec des boutons existants (dont
   celui d'ajout d'annonce). Le design d'origine reste inchangé ici.
   ============================================================ */

/* ============================================================
   V15 — MOBILE FIRST : ajustements fins finaux pour les cartes
   catégories (coins et légende légèrement resserrés sur très petit
   écran ; la carte reste une photo pleine carte à toutes les tailles).
   ============================================================ */
@media only screen and (max-width: 30em) {
	.hp-listing-category--view-block {
		border-radius: 24px !important;
	}

	.hp-listing-category--view-block .hp-listing-category__content {
		padding: 1.125rem !important;
	}

	.hp-listing-category--view-block .hp-listing-category__name {
		font-size: 1rem;
	}
}

/* Empêche tout débordement horizontal accidentel sur petit écran,
   quel que soit le composant HivePress affiché. */
@media only screen and (max-width: 47.99em) {
	body {
		overflow-x: hidden;
	}

	.hp-page__content,
	.hp-form,
	.hp-listing--view-block,
	.hp-vendor--view-block {
		max-width: 100%;
	}
}

/* ============================================================
   V28 — TAILLE D'IMAGE UNIFORME SUR LES CARTES D'ANNONCES
   ------------------------------------------------------------
   Constat : le thème parent enregistre la taille "landscape_small"
   (400×300) SANS recadrage forcé ("crop" désactivé par défaut côté
   HivePress) : WordPress redimensionne donc chaque photo en gardant
   ses propres proportions d'origine, ce qui donne un fichier de
   hauteur différente pour chaque annonce. Comme aucun style ne fixe
   la hauteur de ".hp-listing__image" sur la carte, chaque vignette
   s'affichait donc avec une taille différente selon la photo envoyée
   dans le formulaire — d'où l'aspect "vilain" remonté.
   Correctif (CSS uniquement, portée strictement limitée aux CARTES —
   ".hp-listing--view-block", donc jamais à la page de détail de
   l'annonce, qui garde sa propre galerie/carrousel plein format
   inchangée) : chaque carte reçoit désormais un cadre de ratio fixe
   (4/3, proportion "paysage" déjà visée par le thème parent), et la
   photo vient le remplir en recadrage "cover" (zoom centré, jamais
   déformée). Toutes les cartes ont donc exactement la même taille
   d'image, quelle que soit la photo d'origine ; en cliquant sur une
   annonce, la photo complète (non recadrée) reste bien visible sur
   sa fiche détaillée.
   ============================================================ */
.hp-listing--view-block .hp-listing__image {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background-color: rgba(7, 36, 86, 0.04);
}

.hp-listing--view-block .hp-listing__image img,
.hp-listing--view-block .hp-listing__image video {
	position: absolute !important;
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	max-height: none !important;
	object-fit: cover !important;
	object-position: center !important;
}

/* Annonces à plusieurs photos (carrousel Slick, activé dans les réglages
   HivePress) : chaque diapositive doit aussi occuper tout le cadre
   uniforme ci-dessus pour que le recadrage "cover" s'applique aussi bien
   à la 1ère photo qu'aux suivantes lors du glissement. */
.hp-listing--view-block .hp-listing__image .slick-list,
.hp-listing--view-block .hp-listing__image .slick-track,
.hp-listing--view-block .hp-listing__image .slick-slide {
	height: 100%;
}

.hp-listing--view-block .hp-listing__image .slick-slide {
	position: relative;
}

/* ============================================================
   V38 — RESTAURATION DE LA COLONNE DE FILTRES (DESKTOP)
   ------------------------------------------------------------
   CONSTAT REMONTÉ : les règles V36/V37 ci-dessus (désormais
   supprimées) masquaient ".site-sidebar" en entier et forçaient la
   colonne principale en pleine largeur sur la page de catégorie.
   Or cette colonne latérale contient aussi les FILTRES légitimes
   (catégories, sous-catégories, options de recherche) que le thème
   parent y place nativement — ils disparaissaient donc avec le
   widget "Archives" visé à l'origine.
   CORRECTIF : la colonne latérale n'est plus jamais masquée en CSS.
   Elle réapparaît donc, intacte, avec la mise en page à deux
   colonnes native du thème parent sur bureau. Le nettoyage du bloc
   "Archives" reste assuré — mais uniquement côté PHP, de façon
   chirurgicale (voir functions.php,
   lhpv36_hide_archive_category_widgets, section "V38" juste
   au-dessus) : WordPress ne génère alors tout simplement aucun HTML
   pour ce widget précis, sur aucune taille d'écran, sans qu'aucune
   règle CSS n'ait besoin de le masquer après coup.
   On garde uniquement un léger espacement entre les widgets de
   cette colonne, pour un rendu propre maintenant qu'elle est de
   nouveau visible (demande V38 point 4 : pas d'éléments agglutinés).
   ============================================================ */
.tax-hp_listing_category .site-sidebar .widget:not(:last-child) {
	margin-bottom: 1.5rem;
}

/* ============================================================
   V38 — AJUSTEMENTS MOBILE : ESPACEMENT COLONNE DE FILTRES
   ------------------------------------------------------------
   Sur mobile/tablette, la colonne de filtres (".site-sidebar", de
   nouveau visible depuis le correctif ci-dessus) et la grille
   d'annonces s'empilent l'une sous l'autre (comportement natif du
   thème parent). Un espacement est ajouté entre les deux pour
   qu'elles ne soient jamais collées l'une à l'autre.
   ============================================================ */
@media only screen and (max-width: 61.99em) {
	.tax-hp_listing_category .site-sidebar {
		margin-bottom: 2rem;
	}
}

/* ============================================================
   V39 — FILET DE SÉCURITÉ CSS : BLOC ARCHIVES/CATÉGORIES
   ------------------------------------------------------------
   CONSTAT (retour utilisateur après la V38) : le petit bloc vide
   "Archives" ("Aucune archive à afficher") / "Catégories" ("Aucune
   catégorie") était encore visible, en bas de la colonne de filtres,
   sur mobile ET sur bureau. CAUSE RÉELLE : il s'agit d'un bloc
   Gutenberg ("Archives"/"Catégories") ajouté via l'éditeur de blocs
   de la zone de widgets (Apparence > Widgets), pas du widget
   classique WordPress visé par le correctif V36 — voir functions.php,
   section "V39" pour le correctif PHP principal, qui empêche
   maintenant ce bloc précis de s'afficher.
   Cette règle CSS est un filet de sécurité complémentaire (au cas où
   ce contenu serait injecté par une autre voie que
   "dynamic_sidebar()") : elle masque tout widget de la colonne dont
   le contenu correspond aux classes CSS natives que WordPress pose
   sur ces deux blocs précis ("wp-block-archives",
   "wp-block-categories"), en ciblant le widget ENTIER qui les
   contient (pas seulement le bloc) pour ne jamais laisser un titre
   "Archives"/"Catégories" orphelin sans rien en dessous. Portée
   strictement limitée à la page de catégorie, sur toutes les tailles
   d'écran. Aucun impact sur les vraies catégories/sous-catégories des
   filtres HivePress, qui utilisent un tout autre balisage.
   ============================================================ */
.tax-hp_listing_category .site-sidebar .widget:has(.wp-block-archives),
.tax-hp_listing_category .site-sidebar .widget:has(.wp-block-categories) {
	display: none !important;
}

/* ============================================================
   V39 — REDESIGN MOBILE : COLONNE DE FILTRES (PAGE DE CATÉGORIE)
   ------------------------------------------------------------
   Demande : "redessiner un peu" la page de catégorie sur mobile,
   maintenant que la colonne de filtres y est de nouveau visible
   (voir V38). Elle reprenait jusqu'ici le style "widget" générique
   du thème parent, assez plat sur petit écran. On lui donne ici,
   UNIQUEMENT sur mobile/tablette et UNIQUEMENT sur la page de
   catégorie, une présentation en carte plus soignée — cohérente
   avec le style "verre dépoli" déjà utilisé ailleurs dans le thème
   (mêmes tokens : var(--ios-radius), var(--ios-inner-radius)) :
   respiration interne, ombre douce, titres de filtre mieux séparés
   du contenu. Aucune structure HTML modifiée, uniquement du style.
   ============================================================ */
@media only screen and (max-width: 61.99em) {
	.tax-hp_listing_category .site-sidebar {
		padding: 0 0.25rem;
	}

	.tax-hp_listing_category .site-sidebar .widget {
		padding: 1.25rem 1.25rem 1.5rem;
		box-shadow: 0 10px 30px rgba(20, 20, 40, 0.06);
	}

	.tax-hp_listing_category .site-sidebar .widget-title,
	.tax-hp_listing_category .site-sidebar .widget .hp-block__title {
		font-family: var(--font-heading);
		font-size: 1.0625rem;
		font-weight: 700;
		margin-bottom: 1rem;
		padding-bottom: 0.75rem;
		border-bottom: 1px solid rgba(7, 36, 86, 0.08);
	}

	.tax-hp_listing_category .site-sidebar .hp-form__field-wrap:not(:last-child) {
		margin-bottom: 0.875rem;
	}
}

/* ============================================================
   V37 — BOUTON BURGER MOBILE : zone tactile agrandie + design
   ------------------------------------------------------------
   CONSTAT : le thème parent affiche le bouton burger comme une
   simple icône (Font Awesome, 16px) sans aucun padding ni zone de
   fond — une cible tactile bien trop petite sur téléphone (loin des
   ~44×44px recommandés pour un doigt), ce qui le rendait difficile
   à toucher précisément, en particulier sur Android où la densité
   d'écran/le rendu du navigateur peut encore le faire paraître plus
   petit. On agrandit ici uniquement l'APPARENCE et la ZONE
   CLIQUABLE du bouton (l'icône elle-même reste "fa-bars", geste et
   fonctionnement inchangés — voir le script autonome de
   frontend.js, V36) : un fond arrondi bien visible, une icône plus
   grande, un léger retour visuel au toucher (":active"), pour un
   bouton à la fois plus facile à repérer et à activer avec
   certitude sur tous les mobiles, Android comme iPhone.
   Le logo (".header-logo", ".header-navbar__start") n'est ni ciblé
   ni modifié par cette règle : seul le bouton burger est concerné.
   V38 — CORRECTIF : "justify-content: center" n'avait ici aucun
   effet, car la règle ne déclarait pas "display: flex" (un lien
   <a> est "inline" par défaut) : l'icône pouvait donc apparaître
   décalée dans son cadre au lieu d'être bien centrée. Ajout de
   "display: flex" + "align-items: center" pour un centrage parfait,
   et zone tactile légèrement agrandie (48×48px, seuil recommandé
   par les guides d'accessibilité tactile mobiles).
   V40 — CONSTAT : ce correctif était pourtant bien présent, à
   l'identique, dans le fichier livré en V39 — il n'a pas été retiré
   par erreur. S'il n'apparaissait plus sur le site, la cause la plus
   probable est un cache (plugin de cache, CDN, ou cache navigateur)
   qui continuait de servir l'ancien style.css : à vérifier en
   vidant tout cache actif après import de cette version. Par
   précaution, toutes les valeurs de taille/couleur de ce bloc sont
   désormais posées en "!important", pour qu'elles ne puissent plus
   jamais être silencieusement écrasées par une règle du thème
   parent chargée après celle-ci.
   ============================================================ */
@media only screen and (max-width: 61.99em) {
	.header-navbar__burger > a {
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		width: 48px !important;
		height: 48px !important;
		min-width: 48px !important;
		min-height: 48px !important;
		padding: 0 !important;
		box-sizing: border-box !important;
		border-radius: 12px !important;
		background-color: rgba(7, 36, 86, 0.06) !important;
		position: relative;
		z-index: 20;
		cursor: pointer;
		transition: background-color 0.2s ease, transform 0.15s ease;
	}

	/* ============================================================
	   V41 — CORRECTIF : LE CLIC DOIT MARCHER PARTOUT SUR LE BOUTON
	   ------------------------------------------------------------
	   Le lien <a> couvrait déjà tout le bouton (48×48px, voir
	   ci-dessus), mais l'icône (<i>) et le petit badge de
	   notification (<small>) À L'INTÉRIEUR peuvent, sur certains
	   navigateurs mobiles, "capter" le toucher avant qu'il
	   n'atteigne le lien parent — en particulier une icône de
	   police d'icônes, dont la zone réellement dessinée ne
	   correspond pas toujours pile à sa boîte CSS. On neutralise ici
	   ces deux éléments avec "pointer-events: none" : un appui
	   n'importe où dans le bouton (fond, bord, icône, badge) est
	   donc toujours reçu par le lien <a> lui-même, qui ouvre le
	   menu — sans aucune zone "morte" possible dans le bouton.
	   ============================================================ */
	.header-navbar__burger > a i,
	.header-navbar__burger > a small {
		pointer-events: none;
	}

	.header-navbar__burger > a i {
		font-size: 22px !important;
	}

	.header-navbar__burger > a:hover {
		background-color: rgba(7, 36, 86, 0.1) !important;
	}

	/* Retour visuel immédiat au toucher (tactile), pour confirmer que
	   l'appui a bien été détecté — utile en particulier sur Android. */
	.header-navbar__burger > a:active {
		background-color: rgba(7, 36, 86, 0.16) !important;
		transform: scale(0.94);
	}

	.header-navbar__burger > a small {
		position: absolute;
		top: -0.25rem;
		right: -0.25rem;
		margin-left: 0;
	}
}

/* ============================================================
   V41 — HARMONISATION DES TAILLES DANS L'ENTÊTE MOBILE
   (logo / bouton "Ajouter une annonce" / bouton burger)
   ------------------------------------------------------------
   CONSTAT : sur mobile, le logo paraissait nettement plus petit que
   le bouton burger (agrandi en V37-V40) et le bouton "Ajouter une
   annonce"/"Louer un bien", donnant un bandeau visuellement
   déséquilibré. On aligne ici la hauteur perçue des trois éléments
   sur une même échelle (~44-48px), sans changer leur nature
   (le logo reste un logo, le bouton reste un bouton, le burger reste
   un burger) :
   — Logo image (si un logo personnalisé est défini dans
   Apparence > Personnaliser > Identité du site) : hauteur remontée à
   46px sur mobile (aucun changement sur bureau, où le logo actuel de
   42px reste très bien proportionné à la barre de navigation plus
   large).
   — Logo texte (utilisé seulement si aucune image de logo n'est
   définie) : taille de police augmentée pour peser visuellement
   autant qu'une image de 46px.
   — Bouton "Ajouter une annonce" : hauteur minimale alignée sur
   celle du burger (48px), pour qu'aucun des trois éléments ne
   paraisse plus petit que les autres.
   ============================================================ */
@media only screen and (max-width: 61.99em) {
	.header-logo img {
		max-height: 46px !important;
		width: auto !important;
	}

	.header-logo__name {
		font-size: 1.625rem !important;
	}

	.header-logo__description {
		font-size: 0.75rem !important;
	}

	.header-navbar__actions .button {
		min-height: 48px !important;
		display: inline-flex !important;
		align-items: center !important;
		box-sizing: border-box !important;
	}
}