/*
 * Design tokens portés depuis constants/theme.ts (repo RN PostiGo) et carte
 * reproduisant components/listing-card.tsx — plan § Thème / apparence.
 *
 * Éléments volontairement NON reproduits (propres à l'app, sans usage sur un
 * site public anonyme) : cœur favoris, overlay "relancer la remontée", badge
 * drapeau pays, animation "shine" sur les vedettes.
 */

/* --- Tokens (constants/theme.ts Colors/Font) --- */
:root {
	--pg-color-primary: #FF6B2B;
	--pg-color-primary-dark: #E55A1C;
	--pg-color-primary-light: #FFF3EE;
	--pg-color-secondary: #14B8A6;
	--pg-color-success: #22C55E;
	--pg-color-warning: #F59E0B;
	--pg-color-error: #EF4444;

	--pg-text: #111827;
	--pg-text-secondary: #6B7280;
	--pg-background: #F5F5F7;
	--pg-card-bg: #FFFFFF;
	--pg-border: #E5E7EB;

	--pg-verified: #10B981;
	--pg-pro: #6366F1;
	--pg-price-drop: #16A34A;

	--pg-font-regular: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
	--pg-font-weight-regular: 400;
	--pg-font-weight-semibold: 600;
	--pg-font-weight-bold: 700;
	--pg-font-weight-extrabold: 800;
}

@media (prefers-color-scheme: dark) {
	:root {
		--pg-text: #F9FAFB;
		--pg-text-secondary: #9CA3AF;
		--pg-background: #111827;
		--pg-card-bg: #1F2937;
		--pg-border: #374151;
	}
}

/* Police auto-hébergée (plan § Thème — pas de dépendance Google Fonts CDN).
   Déposer les fichiers réels dans assets/fonts/ avant mise en prod (cf. README). */
@font-face {
	font-family: 'Inter';
	src: url('../fonts/Inter-Regular.woff2') format('woff2');
	font-weight: 400;
	font-display: swap;
}
@font-face {
	font-family: 'Inter';
	src: url('../fonts/Inter-SemiBold.woff2') format('woff2');
	font-weight: 600;
	font-display: swap;
}
@font-face {
	font-family: 'Inter';
	src: url('../fonts/Inter-Bold.woff2') format('woff2');
	font-weight: 700;
	font-display: swap;
}
@font-face {
	font-family: 'Inter';
	src: url('../fonts/Inter-ExtraBold.woff2') format('woff2');
	font-weight: 800;
	font-display: swap;
}

/* --- Reset minimal --- */
*, *::before, *::after { box-sizing: border-box; }
body {
	margin: 0;
	/* Filet de sécurité : un élément qui déborde (ex. nav avec trop de liens
	   pour tenir sur une ligne mobile) ne doit jamais entraîner toute la page
	   en défilement horizontal — seul cet élément doit défiler, pas la page. */
	overflow-x: hidden;
	background: var(--pg-background);
	color: var(--pg-text);
	font-family: var(--pg-font-regular);
	font-weight: var(--pg-font-weight-regular);
	line-height: 1.5;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }

.pg-container {
	max-width: 1120px;
	margin: 0 auto;
	padding: 0 16px;
}

/* Icônes SVG maison (Postigo_Icons) — remplacent les émojis, cf. plan. */
.pg-icon {
	display: inline-block;
	vertical-align: -2px;
	flex: none;
}

/* --- Header / nav --- */
.pg-header {
	background: var(--pg-card-bg);
	box-shadow: 0 1px 3px rgba(0, 0, 0, .06), 0 1px 2px rgba(0, 0, 0, .04);
	padding: 14px 0;
	position: sticky;
	top: 0;
	z-index: 10;
}
.pg-header__inner { display: flex; align-items: center; gap: 24px; }
.pg-logo { font-weight: var(--pg-font-weight-extrabold); font-size: 23px; color: var(--pg-color-primary); text-decoration: none; letter-spacing: -.02em; }
.pg-nav { display: flex; gap: 4px; font-weight: var(--pg-font-weight-semibold); font-size: 14.5px; }
.pg-nav a { color: var(--pg-text-secondary); text-decoration: none; padding: 8px 14px; border-radius: 999px; transition: color .15s ease, background-color .15s ease; }
.pg-nav a:hover { color: var(--pg-color-primary); background: var(--pg-color-primary-light); }
.pg-nav a.is-active { color: var(--pg-color-primary); background: var(--pg-color-primary-light); }
.pg-header__cta {
	display: flex;
	align-items: center;
	gap: 6px;
	background: var(--pg-color-primary);
	color: #FFFFFF;
	font-weight: var(--pg-font-weight-semibold);
	font-size: 13.5px;
	text-decoration: none;
	white-space: nowrap;
	padding: 9px 16px;
	border-radius: 999px;
	transition: background-color .15s ease;
}
.pg-header__cta:hover { background: var(--pg-color-primary-dark); }
.pg-header__cta .pg-icon { flex-shrink: 0; }
/* Hamburger : masqué en desktop, le menu reste en ligne (cf. media query
   mobile plus bas pour l'affichage + l'état ouvert). */
.pg-nav-toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 34px;
	height: 34px;
	border: 1px solid var(--pg-border);
	border-radius: 8px;
	background: var(--pg-card-bg);
	cursor: pointer;
	flex-shrink: 0;
}
.pg-nav-toggle span {
	display: block;
	width: 16px;
	height: 2px;
	margin: 0 auto;
	background: var(--pg-text);
	border-radius: 2px;
	transition: transform .15s ease, opacity .15s ease;
}
/* Transforme les 3 traits en croix quand le menu est ouvert. */
.pg-nav-toggle.is-active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.pg-nav-toggle.is-active span:nth-child(2) { opacity: 0; }
.pg-nav-toggle.is-active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.pg-search {
	margin-left: auto;
	position: relative;
	display: flex;
	align-items: center;
}
.pg-search .pg-icon {
	position: absolute;
	left: 10px;
	color: var(--pg-text-secondary);
	pointer-events: none;
}
.pg-search input {
	border: 1.5px solid var(--pg-border);
	border-radius: 10px;
	padding: 9px 14px 9px 34px;
	font-family: inherit;
	font-size: 13.5px;
	width: 240px;
	background: var(--pg-background);
	color: var(--pg-text);
	transition: border-color .15s ease, box-shadow .15s ease;
}
.pg-search input:focus {
	outline: none;
	border-color: var(--pg-color-primary);
	box-shadow: 0 0 0 3px var(--pg-color-primary-light);
	background: var(--pg-card-bg);
}
/* --- Bannières promo internes (app / parrainage / PRO) --- */
.pg-promo-row {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px;
	margin: 18px 0 6px;
}
.pg-promo-banner {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
	padding: 18px;
	border-radius: 16px;
	color: #FFFFFF;
	text-decoration: none;
	min-height: 108px;
	transition: transform .15s ease, box-shadow .15s ease;
	box-shadow: 0 4px 14px rgba(0, 0, 0, .1);
}
.pg-promo-banner:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0, 0, 0, .16); }
.pg-promo-banner__emoji { font-size: 22px; line-height: 1; }
.pg-promo-banner__tag {
	font-size: 11px;
	font-weight: var(--pg-font-weight-bold);
	text-transform: uppercase;
	letter-spacing: .04em;
	opacity: .85;
}
.pg-promo-banner__title {
	font-size: 15px;
	font-weight: var(--pg-font-weight-extrabold);
	line-height: 1.3;
	margin-top: 2px;
}
.pg-promo-banner__btn {
	margin-top: auto;
	padding-top: 10px;
	font-size: 12.5px;
	font-weight: var(--pg-font-weight-semibold);
	text-decoration: underline;
	text-underline-offset: 2px;
}
@media (max-width: 720px) {
	.pg-promo-row { grid-template-columns: 1fr; }
}

/* --- Rangée catégories (reproduit components/category-card.tsx) — défilement
   horizontal façon leboncoin plutôt qu'un retour à la ligne : le nombre de
   catégories actives varie selon le site (dynamique, cf. front-page.php), un
   retour à la ligne laissait une dernière rangée orpheline mal alignée. --- */
.pg-category-row {
	display: flex;
	flex-wrap: nowrap;
	gap: 7px;
	margin: 14px 0 8px;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x proximity;
	-webkit-overflow-scrolling: touch;
	/* Espace réservé au survol : la tuile se soulève de 3px et son icône grossit
	   de 8% (cf. .pg-category-tile:hover plus bas), qui sans cette marge se
	   retrouvaient rognés en haut par cet overflow-y:hidden. */
	padding-top: 6px;
	padding-bottom: 4px;
	scrollbar-width: none;
	-ms-overflow-style: none;
}
.pg-category-row::-webkit-scrollbar { display: none; }
/* padding réservé aux flèches (desktop) : elles ont leur propre espace,
   jamais par-dessus la première/dernière tuile. Pas de fondu décoratif ici :
   même motif retiré de .pg-featured-rail-wrap (cf. plan § Blog/rail similaires) —
   mal positionné selon la largeur réelle du conteneur, retombait sur une
   tuile au lieu du bord réel. Les flèches + l'aperçu naturel d'une tuile
   partielle suffisent comme indice de défilement. */
.pg-category-row-wrap { position: relative; padding: 0 36px; }
/* Indice de défilement mobile (texte statique, pas de fondu) : masqué par
   défaut, affiché uniquement dans la media query tactile ci-dessous où les
   flèches desktop disparaissent — sans lui, rien ne signale qu'il y a 11
   catégories de plus hors champ. */
.pg-category-row__hint { display: none; }
/* Flèches de défilement — souris/desktop seulement, le tactile a déjà le
   glissement natif. */
.pg-category-row__arrow {
	position: absolute;
	top: 46px;
	transform: translateY(-50%);
	width: 34px;
	height: 34px;
	border-radius: 50%;
	border: 1px solid var(--pg-border);
	background: var(--pg-card-bg);
	color: var(--pg-text);
	font-size: 18px;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: 0 3px 10px rgba(0, 0, 0, .14);
	transition: color .15s ease, border-color .15s ease;
	z-index: 5;
}
.pg-category-row__arrow:hover { color: var(--pg-color-primary); border-color: var(--pg-color-primary); }
.pg-category-row__arrow--left { left: 0; }
.pg-category-row__arrow--right { right: 0; }
@media (max-width: 782px), (hover: none) {
	.pg-category-row__arrow { display: none; }
	.pg-category-row-wrap { padding: 0; }
	.pg-category-row__hint {
		display: block;
		margin: -4px 0 10px;
		font-size: 12.5px;
		color: var(--pg-text-secondary);
	}
}
.pg-category-tile {
	position: relative;
	width: 76px;
	flex-shrink: 0;
	scroll-snap-align: start;
}
.pg-category-tile__main {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	text-decoration: none;
	transition: transform .15s ease;
}
.pg-category-tile:hover .pg-category-tile__main { transform: translateY(-3px); }
.pg-category-tile__icon {
	width: 60px;
	height: 60px;
	border-radius: 18px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 24px;
	transition: transform .15s ease, box-shadow .15s ease;
}
.pg-category-tile__icon svg { width: 28px; height: 28px; }
.pg-category-tile:hover .pg-category-tile__icon {
	transform: scale(1.08);
	box-shadow: 0 6px 14px rgba(0, 0, 0, .12);
}
/* Sous-menu déroulant (survol/focus) — position:fixed + repositionné en JS
   (assets/js/category-menu.js) : la rangée catégories défile horizontalement
   avec overflow masqué, un simple position:absolute serait rogné. */
.pg-category-tile__subs {
	position: fixed;
	top: 0;
	left: 0;
	transform: translate(-50%, 4px);
	background: var(--pg-card-bg);
	border: 1px solid var(--pg-border);
	border-radius: 12px;
	box-shadow: 0 10px 28px rgba(0, 0, 0, .16);
	padding: 8px;
	min-width: 190px;
	max-width: 240px;
	display: flex;
	flex-direction: column;
	gap: 1px;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity .15s ease;
	z-index: 999;
}
.pg-category-tile__subs.is-open { opacity: 1; visibility: visible; pointer-events: auto; }
.pg-category-tile__sub-link {
	display: block;
	padding: 8px 10px;
	border-radius: 8px;
	font-size: 13px;
	font-weight: var(--pg-font-weight-regular);
	color: var(--pg-text);
	text-decoration: none;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	transition: background-color .12s ease, color .12s ease;
}
.pg-category-tile__sub-link:hover { background: var(--pg-color-primary-light); color: var(--pg-color-primary); }
.pg-category-tile__label {
	font-size: 11px;
	font-weight: var(--pg-font-weight-semibold);
	color: var(--pg-text);
	text-align: center;
	line-height: 1.2;
	transition: color .15s ease;
}
.pg-category-tile:hover .pg-category-tile__label { color: var(--pg-color-primary); }

/* --- Section headers + rail "Annonces vedettes" (reproduit app/(tabs)/index.tsx) --- */
.pg-section-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 24px 0 12px; }
.pg-section-header h2 { font-size: 15px; font-weight: var(--pg-font-weight-bold); margin: 0; }
.pg-section-header__link {
	font-size: 13px;
	font-weight: var(--pg-font-weight-semibold);
	color: var(--pg-color-primary);
	text-decoration: none;
	white-space: nowrap;
}
.pg-section-header__link:hover { text-decoration: underline; }
/* Bandeau teinté (pas un cadre blanc bordé, pour éviter l'effet "boîte dans
   la boîte" avec des .pg-card qui ont déjà leur propre ombre/coin arrondi) —
   même teinte que le reste des accents "vedette" du site (étoile, badge). */
.pg-featured-section {
	background: var(--pg-color-primary-light);
	border-radius: 16px;
	padding: 20px;
	margin: 24px 0;
}
.pg-featured-section .pg-section-header { margin-top: 0; }
/* Défilement horizontal (comme la rangée catégories et l'app, cf. plan) plutôt
   qu'une grille qui retourne à la ligne — une seule rangée, quel que soit le
   nombre de cartes vedettes. */
.pg-featured-rail {
	display: flex;
	flex-wrap: nowrap;
	gap: 14px;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x proximity;
	-webkit-overflow-scrolling: touch;
	padding-bottom: 4px;
	scrollbar-width: none;
	-ms-overflow-style: none;
}
.pg-featured-rail::-webkit-scrollbar { display: none; }
.pg-featured-rail .pg-card { flex: 0 0 160px; scroll-snap-align: start; }
.pg-featured-rail-wrap { position: relative; padding: 0 60px; }
/* Pas de fondu décoratif ici : mal positionné selon la largeur réelle du
   conteneur (constaté en DevTools — retombait sur la 4e carte au lieu du
   bord droit), et les flèches + l'aperçu naturel d'une carte partielle
   suffisent déjà comme indice de défilement. */
/* Flèches réutilisées de la rangée catégories (.pg-category-row__arrow) : même
   bouton rond, juste recentré verticalement sur des cartes annonce (plus
   hautes que les tuiles catégorie). */
.pg-featured-rail-wrap .pg-category-row__arrow { top: 119px; }
@media (max-width: 782px), (hover: none) {
	.pg-featured-rail-wrap .pg-category-row__arrow { display: none; }
	.pg-featured-rail-wrap { padding: 0; }
}
.pg-featured-empty {
	color: var(--pg-text-secondary);
	font-size: 13px;
	text-align: center;
	padding: 24px 0;
}

/* --- Description de terme (SEO) + état vide --- */
.pg-term-description { color: var(--pg-text-secondary); font-size: 14px; max-width: 68ch; margin: 8px 0 0; }
.pg-empty-state { color: var(--pg-text-secondary); font-size: 14px; padding: 30px 0; }
.pg-empty-state a { color: var(--pg-color-primary); font-weight: var(--pg-font-weight-semibold); }

/* --- Fil d'Ariane --- */
.pg-breadcrumb { font-size: 12.5px; color: var(--pg-text-secondary); margin: 20px 0 16px; }
.pg-breadcrumb a { color: var(--pg-text-secondary); text-decoration: none; }
.pg-breadcrumb a:hover { color: var(--pg-color-primary); }

/* --- En-tête catégorie (icône + titre + compteur) --- */
.pg-category-hero { display: flex; align-items: center; gap: 16px; }
.pg-category-hero__icon {
	flex-shrink: 0;
	width: 56px;
	height: 56px;
	border-radius: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.pg-category-hero h1 { margin: 0; font-size: 24px; font-weight: var(--pg-font-weight-extrabold); }
.pg-category-hero__count { margin: 2px 0 0; font-size: 13px; color: var(--pg-text-secondary); }

/* --- Carte profil vendeur (page /vendeur/{slug}/) --- */
.pg-seller-hero { padding: 0; overflow: hidden; }
.pg-seller-hero__banner { width: 100%; height: 110px; object-fit: cover; display: block; background: var(--pg-color-primary-light); }
.pg-seller-hero__body { padding: 20px; }
.pg-seller-hero__body--overlap { margin-top: -28px; align-items: flex-end; }

/* --- Puces sous-catégories (filtre) --- */
.pg-subcat-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 26px; }
.pg-subcat-chip {
	padding: 7px 15px;
	border-radius: 999px;
	border: 1.5px solid var(--pg-border);
	font-size: 13px;
	font-weight: var(--pg-font-weight-semibold);
	color: var(--pg-text);
	text-decoration: none;
	transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
.pg-subcat-chip:hover { border-color: var(--pg-color-primary); color: var(--pg-color-primary); }
.pg-subcat-chip.is-active { background: var(--pg-color-primary); border-color: var(--pg-color-primary); color: #FFFFFF; }

/* --- Barre de filtres (tri/prix/état/ville) --- */
.pg-filters {
	display: flex;
	width: fit-content;
	max-width: 100%;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin: 4px auto 20px;
	padding: 14px;
	background: var(--pg-card-bg);
	border: 1px solid var(--pg-border);
	border-radius: 12px;
}
.pg-filters__select,
.pg-filters__input {
	padding: 8px 12px;
	border: 1px solid var(--pg-border);
	border-radius: 8px;
	font-family: inherit;
	font-size: 13px;
	background: var(--pg-background);
	color: var(--pg-text);
}
.pg-filters__input { width: 100px; }
.pg-filters__submit {
	padding: 8px 18px;
	border: none;
	border-radius: 8px;
	background: var(--pg-color-primary);
	color: #FFFFFF;
	font-weight: var(--pg-font-weight-semibold);
	font-size: 13px;
	cursor: pointer;
	transition: background-color .15s ease;
}
.pg-filters__submit:hover { background: var(--pg-color-primary-dark); }
.pg-filters__reset {
	font-size: 12.5px;
	color: var(--pg-text-secondary);
	text-decoration: underline;
	text-underline-offset: 2px;
}
.pg-filters__reset:hover { color: var(--pg-color-primary); }
.pg-filters__check {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	color: var(--pg-text);
	cursor: pointer;
	white-space: nowrap;
}
.pg-filters__check input { accent-color: var(--pg-color-primary); cursor: pointer; }
@media (max-width: 600px) {
	.pg-filters { display: flex; width: 100%; flex-direction: column; align-items: stretch; }
	.pg-filters__input { width: auto; }
}

/* --- Grille d'archive --- */
.pg-archive__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	gap: 14px;
	margin: 20px 0;
}

/* Pagination WordPress standard (paginate_links() / the_posts_pagination()) —
   même markup sur l'accueil et les archives catégorie/ville, un seul style. */
.navigation.pagination {
	display: flex;
	width: 100%;
	justify-content: center;
	margin: 24px 0 8px;
}

.navigation.pagination .nav-links {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
}

.navigation.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 38px;
	height: 38px;
	padding: 0 10px;
	border-radius: 10px;
	background: var(--pg-card-bg);
	border: 1px solid var(--pg-border);
	color: var(--pg-text);
	font-family: var(--pg-font-regular);
	font-weight: var(--pg-font-weight-semibold);
	font-size: 14px;
	text-decoration: none;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.navigation.pagination a.page-numbers:hover {
	border-color: var(--pg-color-primary);
	color: var(--pg-color-primary);
}

.navigation.pagination .page-numbers.current {
	background: var(--pg-color-primary);
	border-color: var(--pg-color-primary);
	color: #FFFFFF;
}

.navigation.pagination .page-numbers.dots {
	background: none;
	border: none;
	color: var(--pg-text-secondary);
}

/* --- Carte annonce (reproduit components/listing-card.tsx) --- */
.pg-card {
	display: block;
	background: var(--pg-card-bg);
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
	transition: transform 0.15s ease;
}
.pg-card:hover { transform: scale(0.99); }
.pg-card--featured { border: 1.5px solid var(--pg-color-warning); }

/* Animation "shine" (reproduit ShineSweep de components/listing-card.tsx) —
   uniquement sur les cartes vedettes rencontrées normalement (pas dans le
   rail vedettes lui-même, cf. `no_shine` dans card-listing.php, comme la prop
   `noShine` de l'app). 13 répétitions puis arrêt (mêmes économie que l'app). */
.pg-card--shine { position: relative; }
.pg-card--shine::after {
	content: "";
	position: absolute;
	top: -15%;
	left: -15%;
	width: 28%;
	height: 130%;
	background: linear-gradient(
		90deg,
		rgba(255, 255, 255, 0) 0%,
		rgba(255, 255, 255, 0.5) 35%,
		rgba(255, 255, 255, 0.85) 50%,
		rgba(255, 255, 255, 0.5) 65%,
		rgba(255, 255, 255, 0) 100%
	);
	transform: rotate(18deg) translateX(-400%);
	animation: pg-shine-sweep 6s ease-in-out infinite;
	animation-iteration-count: 13;
	animation-fill-mode: forwards; /* reste à l'état final (invisible) après les 13 cycles, pas de retour à l'état de base par accident */
	pointer-events: none;
	z-index: 2;
}
@keyframes pg-shine-sweep {
	0%   { transform: rotate(18deg) translateX(-400%); opacity: 0; }
	8%   { opacity: 1; }
	20%  { opacity: 1; }
	28%  { transform: rotate(18deg) translateX(500%); opacity: 0; }
	100% { transform: rotate(18deg) translateX(500%); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
	.pg-card--shine::after { animation: none; display: none; }
}

/* Pulsation discrète du CTA header (attire l'œil vers l'action principale,
   sans clignoter en continu — bien plus lent qu'un spinner de chargement). */
.pg-header__cta { animation: pg-cta-pulse 2.6s ease-in-out infinite; }
@keyframes pg-cta-pulse {
	0%, 100% { box-shadow: 0 0 0 0 rgba(255, 107, 43, .45); }
	50%      { box-shadow: 0 0 0 8px rgba(255, 107, 43, 0); }
}

/* Entrée en fondu au chargement, pour casser l'effet figé — opacité SEULE,
   sans transform, sur cartes ET tuiles catégories. Deux effets de bord
   constatés avec `transform` (même translateY(0), une fois l'animation
   finie, reste une valeur de transform ≠ none) : (1) un ancêtre de
   .pg-category-tile__subs (position:fixed) le piège dans le défilement
   masqué de la rangée ; (2) un `transform` crée aussi son propre contexte
   d'empilement, ce qui a fait passer les cartes vedettes AU-DESSUS du menu
   déroulant malgré son z-index plus élevé. D'où : opacité uniquement ici. */
@keyframes pg-fade-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}
.pg-card, .pg-category-tile { animation: pg-fade-in .45s ease both; }
.pg-category-row .pg-category-tile:nth-child(1) { animation-delay: .00s; }
.pg-category-row .pg-category-tile:nth-child(2) { animation-delay: .03s; }
.pg-category-row .pg-category-tile:nth-child(3) { animation-delay: .06s; }
.pg-category-row .pg-category-tile:nth-child(4) { animation-delay: .09s; }
.pg-category-row .pg-category-tile:nth-child(5) { animation-delay: .12s; }
.pg-category-row .pg-category-tile:nth-child(6) { animation-delay: .15s; }
.pg-category-row .pg-category-tile:nth-child(7) { animation-delay: .18s; }
.pg-category-row .pg-category-tile:nth-child(8) { animation-delay: .21s; }
.pg-category-row .pg-category-tile:nth-child(9) { animation-delay: .24s; }
.pg-category-row .pg-category-tile:nth-child(10) { animation-delay: .27s; }

@media (prefers-reduced-motion: reduce) {
	.pg-header__cta { animation: none; }
	.pg-category-tile, .pg-card { animation: none; }
}

.pg-card__image-area {
	position: relative;
	height: 150px;
	background: #eee;
	display: flex;
	align-items: center;
	justify-content: center;
}
.pg-card__image-area img { width: 100%; height: 100%; object-fit: cover; }
.pg-card__fallback { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 0 10px; text-align: center; }
.pg-card__fallback-icon { font-size: 28px; }
.pg-card__fallback-label { font-size: 11px; font-weight: var(--pg-font-weight-semibold); }

.pg-badge {
	position: absolute;
	display: inline-flex;
	align-items: center;
	gap: 3px;
	border-radius: 8px;
	padding: 3px 7px;
	font-size: 11px;
	font-weight: var(--pg-font-weight-bold);
	color: #fff;
}
.pg-badge--featured { top: 8px; left: 8px; background: var(--pg-color-warning); }
.pg-badge--request-closed { top: 8px; left: 8px; background: var(--pg-color-success); }
.pg-badge--request-complete { top: 8px; left: 8px; background: var(--pg-text-secondary); }
.pg-badge--photo-count { top: 8px; left: 8px; background: rgba(0, 0, 0, 0.45); font-size: 10px; }
.pg-card--featured .pg-badge--photo-count { top: 34px; }
.pg-badges-bottom-left { position: absolute; bottom: 8px; left: 8px; display: flex; gap: 4px; }
.pg-badge--delivery { position: static; background: var(--pg-color-primary); padding: 5px; }
.pg-badge--verified { position: static; background: var(--pg-verified); padding: 5px 6px; }

.pg-card__info { padding: 10px; }
.pg-card__title {
	font-size: 13px;
	font-weight: var(--pg-font-weight-semibold);
	color: var(--pg-text);
	line-height: 18px;
	margin: 0 0 4px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.pg-card__price-row { display: flex; align-items: center; gap: 3px; margin-bottom: 5px; }
.pg-card__price { font-size: 15px; font-weight: var(--pg-font-weight-extrabold); color: var(--pg-color-primary); }
.pg-card__price-drop-arrow { color: var(--pg-price-drop); font-size: 13px; }

.pg-card__meta {
	display: flex;
	align-items: center;
	gap: 3px;
	font-size: 11px;
	color: var(--pg-text-secondary);
}
.pg-card__meta-item { display: inline-flex; align-items: center; gap: 3px; }
.pg-card__meta-dot { color: var(--pg-text-secondary); }
.pg-badge--pro {
	position: static;
	background: var(--pg-pro);
	border-radius: 4px;
	padding: 1px 5px;
	font-size: 11px;
	font-weight: var(--pg-font-weight-extrabold);
	letter-spacing: 0.5px;
	color: #fff;
}

/* --- Fiche annonce --- */
.pg-listing { padding: 0 0 60px; }
.pg-listing__card {
	background: var(--pg-card-bg);
	border: 1px solid var(--pg-border);
	border-radius: 16px;
	padding: 20px;
	margin-bottom: 20px;
}
.pg-listing__card-title {
	margin: 0 0 12px;
	font-size: 12px;
	font-weight: var(--pg-font-weight-bold);
	text-transform: uppercase;
	letter-spacing: .05em;
	color: var(--pg-text-secondary);
}
.pg-listing__gallery { border-radius: 12px; overflow: hidden; margin-bottom: 10px; aspect-ratio: 4 / 3; }
.pg-listing__gallery img { width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; }
.pg-listing__gallery--fallback { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; height: 280px; cursor: default; }
.pg-listing__thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 8px; margin-bottom: 16px; }
.pg-listing__thumbs img { border-radius: 8px; height: 90px; width: 100%; object-fit: cover; cursor: zoom-in; }
.pg-listing__featured-badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	background: var(--pg-color-warning);
	color: #fff;
	font-size: 11px;
	font-weight: var(--pg-font-weight-bold);
	border-radius: 6px;
	padding: 3px 8px;
	margin-bottom: 8px;
}
.pg-listing__title { font-size: 22px; font-weight: var(--pg-font-weight-bold); margin: 0 0 8px; }
.pg-listing__price-row { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 0 0 12px; }
.pg-listing__price { font-size: 26px; font-weight: var(--pg-font-weight-extrabold); color: var(--pg-color-primary); }
.pg-listing__old-price { font-size: 15px; color: var(--pg-text-secondary); text-decoration: line-through; }
.pg-listing__discount-badge { background: var(--pg-success); color: #fff; font-size: 12px; font-weight: var(--pg-font-weight-bold); border-radius: 6px; padding: 2px 7px; }
.pg-listing__meta { color: var(--pg-text-secondary); font-size: 13px; margin-bottom: 20px; }
.pg-listing__description { white-space: pre-line; }
.pg-listing__vehicle {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	gap: 12px;
	margin: 0 0 20px;
	padding: 14px;
	background: var(--pg-background);
	border-radius: 10px;
}
.pg-listing__vehicle-item dt { font-size: 11px; color: var(--pg-text-secondary); margin: 0 0 2px; }
.pg-listing__vehicle-item dd { font-size: 14px; font-weight: var(--pg-font-weight-semibold); color: var(--pg-text); margin: 0; }
.pg-listing__actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 20px; }
.pg-listing__share { display: flex; align-items: center; gap: 12px; margin-top: 16px; }
.pg-listing__share-label { font-size: 13px; color: var(--pg-text-secondary); }
.pg-listing__share-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--pg-background);
	color: var(--pg-text-secondary);
	transition: color .15s ease, background-color .15s ease;
}
.pg-listing__share-link:hover { background: var(--pg-color-primary-light); color: var(--pg-color-primary); }
.pg-listing__seller {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: -10px -12px;
	padding: 10px 12px;
	border-radius: 10px;
	transition: background-color .15s ease;
}
.pg-listing__seller:hover { background: var(--pg-background); }
.pg-listing__seller:hover .pg-listing__seller-name { color: var(--pg-color-primary); }
.pg-listing__seller:hover .pg-listing__seller-name .pg-icon { transform: translateX(2px); }
.pg-listing__seller-avatar {
	flex-shrink: 0;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--pg-color-primary-light);
	color: var(--pg-color-primary);
	font-weight: var(--pg-font-weight-extrabold);
	font-size: 19px;
}
.pg-listing__seller-info { display: flex; flex-direction: column; gap: 5px; }
.pg-listing__seller-name {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	width: fit-content;
	color: var(--pg-text);
	font-weight: var(--pg-font-weight-bold);
	font-size: 16px;
	text-decoration: none;
}
.pg-listing__seller-name .pg-icon { color: var(--pg-color-primary); transition: transform .15s ease; }
.pg-listing__seller-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.pg-listing__seller-badges { display: inline-flex; gap: 8px; }
.pg-listing__seller-rating {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	color: var(--pg-color-warning);
	font-weight: var(--pg-font-weight-bold);
	font-size: 13px;
}
.pg-listing__seller-rating-count { color: var(--pg-text-secondary); font-weight: var(--pg-font-weight-regular); }
.pg-seller-badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	height: 22px;
	padding: 0 9px;
	border-radius: 6px;
	font-size: 11px;
	font-weight: var(--pg-font-weight-bold);
	color: #fff;
	letter-spacing: .02em;
}
.pg-seller-badge--verified { background: var(--pg-verified); }
.pg-seller-badge--pro { background: var(--pg-pro); }

/* --- Lightbox galerie (clic sur une image = agrandissement plein écran) --- */
.pg-lightbox {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, .88);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1000;
	padding: 24px;
}
.pg-lightbox[hidden] { display: none; }
.pg-lightbox__img { max-width: 100%; max-height: 100%; border-radius: 8px; }
.pg-lightbox__close {
	position: absolute;
	top: 18px;
	right: 24px;
	background: none;
	border: none;
	color: #fff;
	font-size: 32px;
	line-height: 1;
	cursor: pointer;
}

/* --- Boutons --- */
.pg-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	border: none;
	border-radius: 10px;
	padding: 12px 18px;
	font-family: inherit;
	font-size: 14px;
	font-weight: var(--pg-font-weight-semibold);
	cursor: pointer;
	background: var(--pg-color-primary-light);
	color: var(--pg-color-primary);
}
.pg-btn-primary { background: var(--pg-color-primary); color: #fff; }
.pg-btn-outline { background: transparent; border: 1px solid var(--pg-border); color: var(--pg-text); }
.pg-btn-outline-strong { background: var(--pg-card-bg); border: 1.5px solid var(--pg-color-primary); color: var(--pg-color-primary); }
.pg-btn-whatsapp { background: #25D366; color: #fff; }
.pg-btn-tel { background: var(--pg-text); color: #fff; }
.pg-phone-links { display: flex; gap: 10px; flex-wrap: wrap; }

.js-app-fallback { margin-top: 12px; padding: 12px; border-radius: 10px; background: var(--pg-color-primary-light); }

/* --- Page 410 --- */
.pg-gone { padding: 60px 0; text-align: center; }
.pg-gone__box { max-width: 480px; margin: 0 auto; }
.pg-gone__box h1 { font-size: 22px; }
.pg-gone__box p { margin-bottom: 20px; }

/* --- Blog --- */
.pg-blog__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 20px;
	margin: 24px 0;
}
.pg-post-card {
	background: var(--pg-card-bg);
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
}
/* aspect-ratio plutôt qu'une hauteur fixe : la largeur de carte varie selon le
   nombre de colonnes (grille responsive), une hauteur figée à 160px rognait
   donc les images à un ratio proche du carré au lieu du 16:9 des images
   à la une (même pattern que .pg-listing__gallery). */
.pg-post-card__image { aspect-ratio: 16 / 9; background: var(--pg-border); }
.pg-post-card__image img { width: 100%; height: 100%; object-fit: cover; }
.pg-post-card__body { padding: 14px; }
.pg-post-card__title { font-size: 15px; font-weight: var(--pg-font-weight-semibold); margin: 0 0 6px; }
.pg-post-card__excerpt { font-size: 13px; color: var(--pg-text-secondary); }
.pg-article { max-width: 720px; margin: 0 auto; padding: 30px 0 60px; }
/* Page Contact : colonne plus étroite qu'un article long — évite un vide
   visible entre le formulaire (contenu court) et les bords de la carte. */
.pg-article.pg-contact { max-width: 560px; }
.pg-article__title { font-size: 26px; font-weight: var(--pg-font-weight-bold); }
.pg-article__meta { color: var(--pg-text-secondary); font-size: 13px; margin-bottom: 20px; }
.pg-article__content { line-height: 1.7; }
.pg-article__content img { border-radius: 12px; margin: 16px 0; }
/* Les liens éditoriaux (maillage interne ajouté à la rédaction, cf. single.php)
   héritaient du reset global `a { text-decoration: none }` et étaient donc
   invisibles dans le texte, sans couleur ni soulignement. */
.pg-article__content a { color: var(--pg-color-primary); text-decoration: underline; }
.pg-article__content h2 { margin: 28px 0 10px; }

/* --- Page Contact --- */
.pg-contact__hours {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	background: var(--pg-color-primary-light);
	color: var(--pg-color-primary);
	border-radius: 12px;
	padding: 14px 16px;
	margin: 16px 0 20px;
}
.pg-contact__hours-title { margin: 0; font-size: 12px; font-weight: var(--pg-font-weight-bold); text-transform: uppercase; letter-spacing: .04em; }
.pg-contact__hours-value { margin: 2px 0 0; font-size: 14px; font-weight: var(--pg-font-weight-semibold); color: var(--pg-text); }
.pg-contact__notice { border-radius: 10px; padding: 12px 16px; margin: 16px 0; font-size: 14px; }
.pg-contact__notice--success { background: var(--pg-color-success); color: #fff; }
.pg-contact__notice--error { background: #FEF2F2; border: 1px solid var(--pg-color-error); color: var(--pg-color-error); }
.pg-contact__notice--error p { margin: 2px 0; }
.pg-contact__form { display: flex; flex-direction: column; gap: 14px; }
.pg-contact__label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: var(--pg-font-weight-semibold); color: var(--pg-text); }
.pg-contact__input {
	padding: 10px 14px;
	border: 1px solid var(--pg-border);
	border-radius: 8px;
	font-family: inherit;
	font-size: 14px;
	background: var(--pg-background);
	color: var(--pg-text);
}
.pg-contact__input:focus { outline: none; border-color: var(--pg-color-primary); box-shadow: 0 0 0 3px var(--pg-color-primary-light); }
.pg-contact__textarea { resize: vertical; font-family: inherit; }
.pg-contact__honeypot { position: absolute; left: -9999px; top: -9999px; }
.pg-article__content h3 { scroll-margin-top: 90px; }

/* Sommaire FAQ (page Aide & Support) : sauter directement à un thème. */
.pg-faq-toc { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0 0 24px; padding: 0; }
.pg-faq-toc a {
	display: inline-block;
	padding: 6px 14px;
	border-radius: 999px;
	background: var(--pg-color-primary-light);
	color: var(--pg-color-primary);
	font-size: 13px;
	font-weight: var(--pg-font-weight-semibold);
	text-decoration: none;
	transition: background-color .15s ease, color .15s ease;
}
.pg-faq-toc a:hover { background: var(--pg-color-primary); color: #fff; }

/* Accordéon FAQ natif (<details>/<summary>, pas de JS). */
.pg-article__content details { border-bottom: 1px solid var(--pg-border); padding: 14px 0; scroll-margin-top: 90px; }
.pg-article__content summary { cursor: pointer; font-weight: var(--pg-font-weight-semibold); color: var(--pg-text); }
.pg-article__content summary:hover { color: var(--pg-color-primary); }
.pg-article__content details p { margin: 10px 0 0; color: var(--pg-text-secondary); }

.pg-home-title { font-size: 24px; font-weight: var(--pg-font-weight-extrabold); margin: 20px 0 16px; }

/* --- Hub racine (sélecteur de pays) --- */
.pg-hub { padding: 60px 0; text-align: center; }
.pg-hub__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 16px;
	max-width: 640px;
	margin: 30px auto 0;
}
.pg-hub__country {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: 20px;
	border-radius: 16px;
	background: var(--pg-card-bg);
	box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
	font-weight: var(--pg-font-weight-semibold);
}
.pg-hub__flag { display: flex; }
/* Pays pas encore lancés : même traitement grisé que le badge App Store
   "bientôt disponible" du pied de page, pour rester cohérent. */
.pg-hub__country--soon {
	position: relative;
	opacity: .5;
	filter: grayscale(.5);
	cursor: default;
}
.pg-hub__soon-badge {
	position: absolute;
	top: -8px;
	right: -8px;
	background: var(--pg-text-secondary);
	color: #fff;
	font-size: 10px;
	font-weight: var(--pg-font-weight-bold);
	text-transform: uppercase;
	letter-spacing: .03em;
	border-radius: 999px;
	padding: 3px 8px;
}
.pg-flag { border-radius: 3px; display: inline-block; vertical-align: -3px; box-shadow: 0 0 0 1px rgba(0,0,0,0.08); }

/* --- Footer --- */
.pg-footer {
	background: var(--pg-card-bg);
	border-top: 1px solid var(--pg-border);
	padding: 60px 0;
	margin-top: 48px;
	font-size: 13px;
	color: var(--pg-text-secondary);
}
/* Flex plutôt qu'une grille à 4 colonnes fixes : sur le hub racine, seules
   2 colonnes existent (marque + réseaux sociaux, pas de pages légales ni de
   liste pays, cf. footer.php) — des colonnes de grille vides auraient laissé
   un grand vide à droite au lieu de répartir naturellement l'espace. */
.pg-footer__grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 32px;
}
.pg-footer__brand { flex: 1.4 1 230px; }
/* min-width réduite : avec 5 colonnes (marque + légal + pays + bientôt +
   réseaux sociaux), le total dépassait de peu la largeur du conteneur et
   faisait passer "Suivez-nous" seul à la ligne suivante. */
.pg-footer__col:not(.pg-footer__brand) { flex: 1 1 145px; }
.pg-footer__logo {
	margin: 0 0 6px;
	font-size: 20px;
	font-weight: var(--pg-font-weight-extrabold);
	color: var(--pg-color-primary);
}
.pg-footer__tagline { margin: 0 0 18px; }
.pg-footer__col-title {
	margin: 0 0 14px;
	font-size: 11px;
	font-weight: var(--pg-font-weight-bold);
	text-transform: uppercase;
	letter-spacing: .05em;
	color: var(--pg-text);
}
.pg-footer__pages ul {
	display: flex;
	flex-direction: column;
	gap: 10px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.pg-footer__pages a,
.pg-footer__countries a {
	color: var(--pg-text-secondary);
	text-decoration: none;
	transition: color .15s ease;
}
.pg-footer__pages a:hover,
.pg-footer__countries a:hover { color: var(--pg-color-primary); }
.pg-footer__countries { display: flex; flex-direction: column; gap: 10px; }
.pg-footer__countries a { display: flex; align-items: center; gap: 8px; }
.pg-footer__countries a[aria-current="true"] { color: var(--pg-color-primary); font-weight: var(--pg-font-weight-semibold); }
.pg-footer__country-soon {
	display: flex;
	align-items: center;
	gap: 8px;
	opacity: .5;
	filter: grayscale(.5);
}
.pg-footer__badges { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
/* Ces badges n'ont qu'un attribut height="50" en HTML (pas de width, la
   largeur suit le ratio naturel) — le reset global `img { height: auto }`
   l'écrasait et les affichait à leur taille naturelle au lieu de 50px. */
.pg-footer__badges img { height: 50px; width: auto; }
.pg-footer__social-row { display: flex; flex-direction: column; gap: 10px; }
.pg-footer__social {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	color: var(--pg-text-secondary);
	text-decoration: none;
	font-weight: var(--pg-font-weight-semibold);
	transition: color .15s ease;
}
.pg-footer__social:hover { color: #1877F2; }
.pg-footer__social--whatsapp:hover { color: #25D366; }
.pg-footer__badges a { display: inline-flex; line-height: 0; }
.pg-footer__badge-soon { display: inline-flex; align-items: center; gap: 8px; opacity: .35; filter: grayscale(1); line-height: 0; }
.pg-footer__badge-soon em { font-style: normal; font-size: 11px; font-weight: var(--pg-font-weight-semibold); color: var(--pg-text-secondary); white-space: nowrap; }
@media (max-width: 720px) {
	.pg-footer__grid { flex-direction: column; gap: 28px; }
	/* Les flex-basis en pixels (230px/145px) ciblent la largeur en desktop —
	   une fois la direction passée en colonne, ce sont des HAUTEURS forcées,
	   d'où le grand vide sous chaque colonne plus courte que son contenu.
	   Spécificité alignée sur ".pg-footer__col:not(.pg-footer__brand)"
	   (2 classes) : un simple ".pg-footer__col" (1 classe) perdait face à
	   elle malgré l'ordre dans le fichier — 4 colonnes sur 5 restaient donc
	   encore trop hautes après une 1re tentative de correctif. */
	.pg-footer__brand,
	.pg-footer__col:not(.pg-footer__brand) { flex: none; }
}

/* --- Page Forfaits Pro --- */
.pg-pricing__hero { text-align: center; padding: 44px 0 8px; max-width: 640px; margin: 0 auto; }
.pg-pricing__title { font-size: 30px; font-weight: var(--pg-font-weight-extrabold); margin: 0 0 12px; }
.pg-pricing__subtitle { color: var(--pg-text-secondary); line-height: 1.6; margin: 0 0 20px; }
.pg-pricing__cta { margin: 0 auto; }

.pg-pricing__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	margin: 36px 0;
	align-items: stretch;
}
.pg-pricing__card {
	position: relative;
	background: var(--pg-card-bg);
	border: 1.5px solid var(--pg-border);
	border-radius: 16px;
	padding: 24px 20px;
	display: flex;
	flex-direction: column;
}
.pg-pricing__card--featured { border-color: var(--pg-plan-color); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08); }
.pg-pricing__ribbon {
	position: absolute;
	top: -12px;
	left: 20px;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	background: var(--pg-plan-color);
	color: #fff;
	font-size: 11px;
	font-weight: var(--pg-font-weight-bold);
	border-radius: 999px;
	padding: 4px 10px;
}
.pg-pricing__plan-name { font-size: 17px; font-weight: var(--pg-font-weight-bold); color: var(--pg-plan-color); margin: 6px 0 2px; }
.pg-pricing__listings { font-size: 13px; color: var(--pg-text-secondary); margin: 0 0 14px; }
.pg-pricing__price { font-size: 26px; font-weight: var(--pg-font-weight-extrabold); margin: 0; }
.pg-pricing__price span { font-size: 13px; font-weight: var(--pg-font-weight-semibold); color: var(--pg-text-secondary); }
.pg-pricing__price-alt { font-size: 13.5px; font-weight: var(--pg-font-weight-bold); color: var(--pg-plan-color); margin: 4px 0 16px; }
.pg-pricing__features { list-style: none; margin: 0 0 20px; padding: 0; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.pg-pricing__features li { display: flex; align-items: flex-start; gap: 7px; font-size: 13px; color: var(--pg-text); }
.pg-pricing__features li .pg-icon { color: var(--pg-plan-color); margin-top: 1px; }
.pg-pricing__card-cta { width: 100%; }
.pg-pricing__card--featured .pg-pricing__card-cta { background: var(--pg-plan-color); border-color: var(--pg-plan-color); color: #fff; }

.pg-pricing__table-wrap { overflow-x: auto; margin: 0 0 32px; }
.pg-pricing__table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 480px; }
.pg-pricing__table th, .pg-pricing__table td { padding: 10px 12px; text-align: center; border-bottom: 1px solid var(--pg-border); }
.pg-pricing__table td:first-child, .pg-pricing__table th:first-child { text-align: left; color: var(--pg-text-secondary); }
.pg-pricing__table thead th { font-weight: var(--pg-font-weight-bold); color: var(--pg-text); }

.pg-pricing__how { max-width: 640px; margin: 0 auto 32px; text-align: left; }
.pg-pricing__steps { margin: 0 0 18px; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; color: var(--pg-text); font-size: 14px; }
.pg-pricing__footnote { text-align: center; font-size: 12px; color: var(--pg-text-secondary); max-width: 640px; margin: 0 auto 60px; line-height: 1.6; }
.pg-pricing__footnote a { color: var(--pg-color-primary); font-weight: var(--pg-font-weight-semibold); }

@media (max-width: 860px) {
	.pg-pricing__grid { grid-template-columns: 1fr; }
}

/* --- Page Parrainage --- */
.pg-referral__hero { text-align: center; padding: 44px 0 8px; max-width: 640px; margin: 0 auto; }
.pg-referral__title { font-size: 30px; font-weight: var(--pg-font-weight-extrabold); margin: 0 0 12px; }
.pg-referral__subtitle { color: var(--pg-text-secondary); line-height: 1.6; margin: 0 0 20px; }
.pg-referral__cta { margin: 0 auto; }

.pg-referral__bonus-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 36px 0; }
.pg-referral__bonus-card { background: var(--pg-card-bg); border: 1.5px solid var(--pg-border); border-radius: 16px; padding: 24px 20px; }
.pg-referral__bonus-tag {
	display: inline-block;
	background: var(--pg-plan-color);
	color: #fff;
	font-size: 11px;
	font-weight: var(--pg-font-weight-bold);
	text-transform: uppercase;
	letter-spacing: .04em;
	border-radius: 999px;
	padding: 4px 10px;
	margin-bottom: 12px;
}
.pg-referral__bonus-title { font-size: 16px; font-weight: var(--pg-font-weight-bold); margin: 0 0 8px; }
.pg-referral__bonus-desc { font-size: 13px; color: var(--pg-text-secondary); line-height: 1.6; margin: 0; }

.pg-referral__table-wrap { overflow-x: auto; margin: 0 0 12px; }
.pg-referral__table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 380px; }
.pg-referral__table th, .pg-referral__table td { padding: 10px 12px; border-bottom: 1px solid var(--pg-border); }
.pg-referral__table th { text-align: left; font-weight: var(--pg-font-weight-bold); color: var(--pg-text); }
.pg-referral__table td:last-child, .pg-referral__table th:last-child { text-align: right; font-weight: var(--pg-font-weight-bold); color: var(--pg-color-secondary); }

.pg-referral__payout-note { font-size: 12.5px; color: var(--pg-text-secondary); line-height: 1.6; margin: 0 0 32px; }

.pg-referral__how { max-width: 640px; margin: 0 auto 32px; text-align: left; }
.pg-referral__steps { margin: 0 0 18px; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; color: var(--pg-text); font-size: 14px; }
.pg-referral__footnote { text-align: center; font-size: 12px; color: var(--pg-text-secondary); max-width: 640px; margin: 0 auto 60px; line-height: 1.6; }
.pg-referral__footnote a { color: var(--pg-color-primary); font-weight: var(--pg-font-weight-semibold); }

@media (max-width: 860px) {
	.pg-referral__bonus-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
	.pg-referral__bonus-grid { grid-template-columns: 1fr; }
}

/* --- Mobile : header (logo + nav + CTA + recherche) déborderait sinon sur écran étroit --- */
@media (max-width: 640px) {
	.pg-header__inner { flex-wrap: wrap; }
	.pg-logo { order: 1; margin-right: auto; }
	.pg-header__cta { order: 2; }
	.pg-nav-toggle { display: flex; order: 3; }
	/* Replié par défaut (menu hamburger) : avant, les 7 liens restaient
	   dépliés en permanence sous l'en-tête collant (sticky), sur 3 lignes —
	   trop de place prise à l'écran pendant tout le défilement. Ouvert via
	   assets/js/nav-toggle.js (classe .is-open), en liste verticale plutôt
	   qu'un simple retour à la ligne horizontal. */
	.pg-nav {
		display: none;
		order: 4;
		width: 100%;
		flex-direction: column;
		gap: 2px;
		margin-top: 10px;
		padding: 8px;
		background: var(--pg-card-bg);
		border: 1px solid var(--pg-border);
		border-radius: 12px;
	}
	.pg-nav.is-open { display: flex; }
	.pg-nav a { padding: 10px 12px; border-radius: 8px; }
	.pg-search { order: 5; width: 100%; margin-left: 0; margin-top: 10px; }
	.pg-search input { width: 100%; }
	.pg-listing__gallery { aspect-ratio: 16 / 10; }
}

/* --- Bannière app mobile (sticky, incite au téléchargement) --- */
.pg-app-banner { display: none; }
@media (max-width: 782px) {
	.pg-app-banner.is-visible {
		display: flex;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 60;
		background: var(--pg-card-bg);
		border-top: 1px solid var(--pg-border);
		box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.12);
		padding-bottom: env(safe-area-inset-bottom, 0);
		animation: pg-app-banner-in .3s ease;
	}
}
@keyframes pg-app-banner-in {
	from { transform: translateY(100%); }
	to { transform: translateY(0); }
}
.pg-app-banner__inner {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 14px;
	max-width: 640px;
	margin: 0 auto;
	width: 100%;
}
.pg-app-banner__inner .pg-icon { flex-shrink: 0; color: var(--pg-color-primary); }
.pg-app-banner__text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.pg-app-banner__text strong { font-size: 13.5px; font-weight: var(--pg-font-weight-bold); color: var(--pg-text); }
.pg-app-banner__text span {
	font-size: 11.5px;
	color: var(--pg-text-secondary);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.pg-app-banner__cta {
	flex-shrink: 0;
	background: var(--pg-color-primary);
	color: #fff;
	font-size: 13px;
	font-weight: var(--pg-font-weight-semibold);
	text-decoration: none;
	padding: 8px 14px;
	border-radius: 999px;
	transition: background-color .15s ease;
}
.pg-app-banner__cta:hover { background: var(--pg-color-primary-dark); }
.pg-app-banner__close {
	flex-shrink: 0;
	background: none;
	border: none;
	color: var(--pg-text-secondary);
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	padding: 4px 2px;
}