/*
 * 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; }
/* flex-shrink:0 indispensable : sans lui, l'image se réduit à 0px de large.
   .pg-logo est flex item de .pg-header__inner (display:flex) ; combiné au
   reset global `img { max-width: 100% }`, le calcul de taille minimale
   automatique de flexbox résout le pourcentage contre une largeur indéfinie
   et l'image s'effondre à 0 malgré height/width:auto (confirmé en
   navigateur réel, cf. Playwright). */
.pg-logo { display: inline-flex; flex-shrink: 0; text-decoration: none; }
.pg-logo img { height: 27px; width: auto; }
.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); }

/* Déroulant « Gagner » (Jeu PostiPhone + Parrainage) — <details> natif, cf. header.php.
   Desktop : clic sur l'étiquette → sous-menu en carte flottante. Mobile : voir la
   media query ≤640px (sous-menu en liste indentée dans le menu hamburger). */
.pg-nav__group { position: relative; }
.pg-nav__group-label {
	display: inline-flex; align-items: center; gap: 4px;
	padding: 8px 14px; border-radius: 999px; cursor: pointer; list-style: none;
	color: var(--pg-text-secondary);
	transition: color .15s ease, background-color .15s ease;
}
.pg-nav__group-label::-webkit-details-marker { display: none; }
.pg-nav__group-label:hover,
.pg-nav__group-label.is-active,
.pg-nav__group[open] > .pg-nav__group-label { color: var(--pg-color-primary); background: var(--pg-color-primary-light); }
.pg-nav__group-label .pg-icon { transition: transform .15s ease; transform: rotate(90deg); }
.pg-nav__group[open] > .pg-nav__group-label .pg-icon { transform: rotate(-90deg); }
.pg-nav__submenu {
	position: absolute; top: calc(100% + 6px); left: 0; z-index: 50;
	min-width: 190px; display: flex; flex-direction: column; gap: 2px; padding: 6px;
	background: var(--pg-card-bg); border: 1px solid var(--pg-border); border-radius: 12px;
	box-shadow: 0 10px 28px rgba(17, 24, 39, .12);
}
.pg-nav__submenu a { white-space: nowrap; }

/* Accueil pays : recherche du header masquée (cf. pg-hero), le nav reprend
   le rôle de margin-left:auto pour rester collé à droite sans rien entre
   lui et le logo. */
.pg-no-header-search .pg-nav { margin-left: auto; }
/* 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 transparent;
	border-radius: 10px;
	padding: 9px 14px 9px 34px;
	font-family: inherit;
	font-size: 13.5px;
	width: 240px;
	background: var(--pg-border);
	color: var(--pg-text);
	transition: border-color .15s ease, box-shadow .15s ease, background-color .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: 16px;
	margin: 18px 0 6px;
}
.pg-promo-banner {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: 20px;
	border-radius: 18px;
	color: #FFFFFF;
	text-decoration: none;
	min-height: 166px;
	overflow: hidden;
	transition: transform .18s ease, box-shadow .18s ease;
	box-shadow: 0 8px 22px rgba(0, 0, 0, .14), inset 0 1px 0 rgba(255, 255, 255, .22);
}
/* Reflet + cercle doux, 100% CSS (aucune image) — peint sous le texte.
   Texture pointillée retirée à la demande : on garde le dégradé + les reflets. */
.pg-promo-banner::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		radial-gradient(130% 80% at 88% 6%, rgba(255, 255, 255, .26), transparent 56%),
		radial-gradient(130px 130px at 94% 112%, rgba(255, 255, 255, .14), transparent 70%);
}
.pg-promo-banner > * { position: relative; }
.pg-promo-banner:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(0, 0, 0, .22), inset 0 1px 0 rgba(255, 255, 255, .22); }
/* En-tête : icône + tag (label) sur une ligne ; le titre passe en pleine largeur
   dessous (moins coupé) ; le bouton (margin-top:auto) reste ancré en bas. */
.pg-promo-banner__head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.pg-promo-banner__ic {
	width: 46px;
	height: 46px;
	flex-shrink: 0;
	border-radius: 13px;
	display: grid;
	place-items: center;
	background: rgba(255, 255, 255, .18);
	border: 1px solid rgba(255, 255, 255, .34);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25);
}
.pg-promo-banner__ic svg { width: 25px; height: 25px; color: #fff; }
.pg-promo-banner__tag {
	font-size: 11.5px;
	font-weight: var(--pg-font-weight-bold);
	text-transform: uppercase;
	letter-spacing: .06em;
	opacity: .9;
}
.pg-promo-banner__title {
	font-size: 15.5px;
	font-weight: var(--pg-font-weight-extrabold);
	line-height: 1.3;
	margin: 0;
}
.pg-promo-banner__btn {
	margin-top: auto;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 9px 16px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .2);
	border: 1px solid rgba(255, 255, 255, .3);
	font-size: 12.5px;
	font-weight: var(--pg-font-weight-bold);
	transition: background .18s ease;
}
.pg-promo-banner__btn::after { content: "\2192"; font-weight: 700; }
.pg-promo-banner:hover .pg-promo-banner__btn { background: rgba(255, 255, 255, .32); }
@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; }
}

/* Grande barre de recherche de la page résultats (search.php) — remplace la
   petite barre du header, masquée sur cette page. Centrée pour s'aligner avec
   la carte de filtres juste en dessous, et pré-remplie avec la requête. */
.pg-search-results {
	display: flex;
	align-items: center;
	gap: 8px;
	max-width: 480px;
	margin: 0 auto 14px;
	padding: 6px 6px 6px 16px;
	background: var(--pg-card-bg);
	border: 1px solid var(--pg-border);
	border-radius: 999px;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.pg-search-results:focus-within {
	border-color: var(--pg-color-primary);
	box-shadow: 0 0 0 3px var(--pg-color-primary-light);
}
.pg-search-results .pg-icon { color: var(--pg-text-secondary); flex-shrink: 0; }
.pg-search-results input {
	flex: 1;
	min-width: 0;
	border: none;
	outline: none;
	background: none;
	font-family: inherit;
	font-size: 14px;
	color: var(--pg-text);
}
.pg-search-results button {
	flex-shrink: 0;
	border: none;
	background: var(--pg-color-primary);
	color: #FFFFFF;
	font-family: inherit;
	font-size: 13px;
	font-weight: var(--pg-font-weight-bold);
	padding: 9px 18px;
	border-radius: 999px;
	cursor: pointer;
	transition: background-color .15s ease;
}
.pg-search-results button:hover { background: var(--pg-color-primary-dark); }

/* --- Grille d'archive --- */
.pg-archive__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); /* repli navigateurs sans min() */
	/* min(160px, 50% - 7px) : 2 colonnes garanties même sous 334 px de grille
	   (téléphones de 360 px : 328 px utiles après les marges de .pg-container).
	   Avant, une seule carte de 328 px par ligne, photo découpée en bande, contre
	   2 cartes dans l'app. Dès 334 px de grille, min() vaut 160px : rendu
	   identique à avant sur tous les autres écrans (vérifié 390/430/1280). */
	grid-template-columns: repeat(auto-fill, minmax(min(160px, calc(50% - 7px)), 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 principal (primary) de la fiche annonce — actuellement
   "Contacter par message" — pour attirer l'œil vers l'action, sans clignoter en
   continu (bien plus lent qu'un spinner de chargement).
   Scopée à .pg-listing__actions : ne doit pas s'appliquer aux autres boutons .pg-btn-primary
   du site (pricing, etc.). */
.pg-listing__actions .pg-btn-primary { 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-listing__actions .pg-btn-primary { 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); }
/* « Prix sur demande » : petit encadré, comme l'app (listing-card.tsx priceOnRequestPill) — après .pg-card__price pour l'emporter */
.pg-card__price--request { font-size: 13px; font-weight: var(--pg-font-weight-bold); line-height: 18px; padding: 0 6px; margin: -1px 0; border: 1px solid rgba(255, 107, 43, .33); background: rgba(255, 107, 43, .05); border-radius: 6px; white-space: nowrap; }
.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;
}

/* --- Carte sponsorisée (reproduit components/sponsored-card.tsx) ---
   Blocs invisibles = même hauteur qu'une carte annonce voisine ; l'image remplit la carte.
   Hors de 140-215 px de large, le recadrage rognerait plus de 10 % d'un côté et entamerait
   le cadre de sécurité annoncé aux annonceurs : image entière, avec la même image floutée
   en fond. Navigateurs sans requêtes de conteneur : image recadrée, comme entre 140 et 215. */
.pg-card--sponsored { position: relative; container-type: inline-size; background: var(--pg-border); }
.pg-sponsored__spacer { visibility: hidden; }
.pg-sponsored__img,
.pg-sponsored__backdrop { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pg-sponsored__backdrop { display: none; filter: blur(20px); transform: scale(1.15); }
.pg-badge--sponsored { top: 8px; left: 8px; background: rgba(17, 24, 39, 0.72); }
/* Carte « aucun lien » (<div>) : pas d'effet de survol, rien ne se passe au clic. */
div.pg-card--sponsored:hover { transform: none; }
@container (width < 140px) or (width > 215px) {
	.pg-sponsored__img { object-fit: contain; }
	.pg-sponsored__backdrop { display: block; }
}

/* Fenêtre de l'affiche maison sur ordinateur (card-sponsored.php, ouverte par sponsored.js) :
   les cartes se réservent dans l'app, qu'on n'installe pas depuis un ordinateur → QR code.
   Le QR garde un fond blanc en mode sombre, sinon les lecteurs ne le décodent pas. */
.pg-house-dialog {
	width: min(92vw, 380px);
	padding: 28px 24px 24px;
	border: 0;
	border-radius: 20px;
	background: var(--pg-card-bg);
	color: var(--pg-text);
	text-align: center;
	box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
}
.pg-house-dialog::backdrop { background: rgba(17, 24, 39, 0.55); }
.pg-house-dialog__close {
	position: absolute;
	top: 8px;
	right: 10px;
	width: 36px;
	height: 36px;
	border: 0;
	border-radius: 50%;
	background: none;
	color: var(--pg-text-secondary);
	font-size: 28px;
	line-height: 1;
	cursor: pointer;
}
.pg-house-dialog__close:hover { background: var(--pg-border); color: var(--pg-text); }
.pg-house-dialog__title { margin: 0 0 8px; font-size: 20px; font-weight: var(--pg-font-weight-extrabold); }
.pg-house-dialog__text { margin: 0 0 16px; font-size: 14px; line-height: 1.5; color: var(--pg-text-secondary); }
.pg-house-dialog__qr {
	display: block;
	width: 180px;
	height: 180px;
	margin: 0 auto 16px;
	padding: 10px;
	border: 1px solid var(--pg-border);
	border-radius: 12px;
	background: #fff;
	box-sizing: content-box;
}
.pg-house-dialog__badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 14px; }
.pg-house-dialog__badges img { display: block; width: auto; height: 44px; }
.pg-house-dialog__steps { margin: 0; font-size: 14px; line-height: 1.5; color: var(--pg-text-secondary); }
.pg-house-dialog__steps strong { color: var(--pg-text); white-space: nowrap; }

/* --- Fiche annonce --- */
/* padding-bottom seul : le raccourci « padding: 0 0 60px » écrasait les 16 px latéraux de
   .pg-container (même spécificité, déclaré plus tard) → fiche collée aux bords sur téléphone et
   décalée de 16 px par rapport au logo sur ordinateur (corrigé le 2026-09-28). */
.pg-listing { padding-bottom: 60px; }
.pg-request-detail { max-width: 480px; }
.pg-listing__card {
	background: var(--pg-card-bg);
	border-radius: 16px;
	padding: 20px;
	margin-bottom: 24px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 6px 16px rgba(0, 0, 0, .05);
}
.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; }
/* Écart photos → titre porté par le bloc lui-même : 20 px comme le padding de la carte,
   quel que soit le nombre de photos ou l'écran (10 à 16 px avant, titre collé à la photo). */
.pg-listing__photos { margin-bottom: 20px; }
.pg-listing__photos > :last-child { margin-bottom: 0; }
.pg-listing__thumb-wrap { position: relative; }
.pg-listing__thumbs img { border-radius: 8px; height: 90px; width: 100%; object-fit: cover; cursor: zoom-in; display: block; }
.pg-listing__more-photos {
	display: none;
	position: absolute; inset: 0;
	align-items: center; justify-content: center; gap: 6px;
	background: rgba(0, 0, 0, 0.55);
	border: 0; border-radius: 8px;
	color: #fff; font-size: 13px; font-weight: var(--pg-font-weight-semibold);
	cursor: zoom-in;
}
/* Grille façon Leboncoin (photo principale + 2 vignettes empilées) : la
   version mobile pleine largeur + bande de vignettes défilante reste
   inchangée, ce réagencement est purement visuel via un parent en
   display:grid — .pg-listing__thumbs passe en display:contents pour que
   ses <img> deviennent des items directs de la grille, sans dupliquer le
   HTML/les images pour chaque mise en page (cf. plan § Thème : adapter le
   mobile, pas le porter tel quel). */
@media (min-width: 783px) {
	/* Une seule photo : pas de vignettes à caser, la grande garde toute la
	   largeur au lieu d'être réduite à 2fr avec une colonne vide à côté. */
	.pg-listing__photos:not(:has(.pg-listing__thumbs)) .pg-listing__gallery { height: 420px; aspect-ratio: auto; }
	.pg-listing__photos:has(.pg-listing__thumbs) {
		display: grid;
		grid-template-columns: 2fr 1fr;
		grid-template-rows: 1fr 1fr;
		gap: 8px;
		height: 420px;
	}
	.pg-listing__gallery { grid-column: 1; grid-row: 1 / 3; height: 100%; min-height: 0; margin-bottom: 0; aspect-ratio: auto; }
	.pg-listing__thumbs { display: contents; }
	.pg-listing__thumb-wrap:nth-child(1) { grid-column: 2; grid-row: 1; min-height: 0; }
	.pg-listing__thumb-wrap:nth-child(2) { grid-column: 2; grid-row: 2; min-height: 0; }
	/* Deux photos : la seconde prend toute la colonne de droite au lieu de laisser une case vide dessous. */
	.pg-listing__thumb-wrap:only-child { grid-row: 1 / 3; }
	.pg-listing__thumb-wrap:nth-child(n+3) { display: none; }
	.pg-listing__thumb-wrap img { height: 100%; }
	.pg-listing__thumbs img { height: 100%; }
	.pg-listing__more-photos { display: flex; }
}
.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: 23px; font-weight: var(--pg-font-weight-bold); letter-spacing: -.01em; line-height: 1.3; 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: 30px; font-weight: var(--pg-font-weight-extrabold); letter-spacing: -.02em; color: var(--pg-color-primary); }
/* « Prix sur demande » : encadré au lieu du gros montant, comme l'app (app/listing/[id].tsx priceOnRequestBox) */
.pg-price-request { display: inline-flex; flex-direction: column; gap: 2px; padding: 8px 12px; border: 1.5px solid rgba(255, 107, 43, .33); background: rgba(255, 107, 43, .05); border-radius: 12px; }
.pg-price-request__label { display: inline-flex; align-items: center; gap: 6px; font-size: 20px; font-weight: var(--pg-font-weight-bold); color: var(--pg-color-primary); }
.pg-price-request__hint { font-size: 13px; color: var(--pg-text-secondary); }
.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__category-line { color: var(--pg-color-primary); font-size: 13px; font-weight: var(--pg-font-weight-semibold); margin: 0 0 10px; }
.pg-listing__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.pg-listing__chip {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	background: var(--pg-background);
	border-radius: 20px;
	padding: 6px 12px;
	font-size: 12px;
	color: var(--pg-text-secondary);
}
.pg-listing__description { line-height: 1.6; margin-bottom: 16px; }
.pg-listing__map { border-radius: 10px; overflow: hidden; }
.pg-listing__map iframe { display: block; }
.pg-listing__map-footer { display: flex; align-items: center; gap: 6px; margin: 10px 0 0; font-size: 13px; font-weight: var(--pg-font-weight-semibold); color: var(--pg-color-primary); }
.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__actions--stacked { flex-direction: column; align-items: stretch; }
.pg-listing__actions--stacked .pg-btn { width: 100%; }
/* Fiche annonce : prix (ou encadré « Prix sur demande ») et boutons de contact sur une même ligne
   quand la largeur le permet ; les boutons passent sous le prix sinon (téléphone). Après les règles
   de base de .pg-listing__price-row / .pg-listing__actions dont elle neutralise les marges. */
.pg-listing__headline { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin: 0 0 14px; }
.pg-listing__headline .pg-listing__price-row { margin: 0; }
.pg-listing__headline .pg-listing__actions { margin-top: 0; }
@media (max-width: 782px) {
	/* Téléphone : boutons étirés sur leur ligne (seuls → pleine largeur, à deux → partagée),
	   au lieu de largeurs inégales empilées — comme les boutons de contact pleine largeur de l'app. */
	.pg-listing__headline .pg-listing__actions { width: 100%; }
	.pg-listing__headline .pg-listing__actions .pg-btn { flex: 1 1 auto; }
}
.pg-listing__safety { background: var(--pg-card-bg); border: 1px solid var(--pg-border); border-left: 3px solid var(--pg-color-warning); border-radius: 10px; padding: 14px 16px; margin-top: 16px; }
.pg-listing__safety-title { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: var(--pg-font-weight-bold); color: var(--pg-text); margin: 0 0 8px; }
.pg-listing__safety-title .pg-icon { color: var(--pg-color-warning); flex-shrink: 0; }
.pg-listing__safety-list { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--pg-text-secondary); line-height: 1.5; }
.pg-listing__share { display: flex; align-items: center; gap: 12px; margin-top: 16px; }
.pg-listing__share--centered { flex-direction: column; gap: 10px; }
.pg-listing__share-links { display: flex; gap: 12px; }
.pg-listing__share-label { font-size: 13px; font-weight: var(--pg-font-weight-bold); color: var(--pg-text); }
.pg-listing__report-link {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	width: 100%;
	margin-top: 16px;
	padding: 0;
	background: none;
	border: 0;
	font-size: 12px;
	color: var(--pg-text-secondary);
	cursor: pointer;
	text-decoration: underline;
}
.pg-listing__report-link:hover { color: var(--pg-text); }
.pg-listing__buyer-label { display: block; font-size: 12px; color: var(--pg-text-secondary); }
.pg-listing__share-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	color: #fff;
	transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.pg-listing__share-link:hover { transform: translateY(-2px); }
.pg-listing__share-link--whatsapp { background: #25D366; box-shadow: 0 3px 8px rgba(37, 211, 102, .35); }
.pg-listing__share-link--whatsapp:hover { filter: brightness(1.08); box-shadow: 0 5px 12px rgba(37, 211, 102, .42); }
.pg-listing__share-link--facebook { background: #1877F2; box-shadow: 0 3px 8px rgba(24, 119, 242, .35); }
.pg-listing__share-link--facebook:hover { filter: brightness(1.08); box-shadow: 0 5px 12px rgba(24, 119, 242, .42); }
.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--buyer {
	margin: 0 0 28px;
	background: var(--pg-background);
	border-radius: 12px;
	padding: 10px 12px;
}
.pg-listing__seller--buyer:hover { background: var(--pg-background); }
.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;
	position: relative;
	overflow: hidden;
}
/* Photo de profil par-dessus l'initiale : si elle ne charge pas (onerror la retire), l'initiale reste. */
.pg-listing__seller-avatar img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 50%;
}
.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;
}
.pg-lightbox__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.15);
	border: none;
	color: #fff;
	font-size: 28px;
	line-height: 1;
	cursor: pointer;
}
.pg-lightbox__nav:hover { background: rgba(255, 255, 255, 0.3); }
.pg-lightbox__nav--prev { left: 16px; }
.pg-lightbox__nav--next { right: 16px; }
.pg-lightbox__counter {
	position: absolute;
	bottom: 20px;
	left: 50%;
	transform: translateX(-50%);
	margin: 0;
	padding: 4px 12px;
	border-radius: 12px;
	background: rgba(0, 0, 0, 0.5);
	color: #fff;
	font-size: 13px;
}

/* --- 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);
	transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.pg-btn:hover { transform: translateY(-1px); }
.pg-btn:active { transform: translateY(0); }
.pg-btn-primary { background: var(--pg-color-primary); color: #fff; box-shadow: 0 4px 12px rgba(255, 107, 43, .28); }
.pg-btn-primary:hover { filter: brightness(1.05); box-shadow: 0 6px 16px rgba(255, 107, 43, .34); }
.pg-btn-outline { background: transparent; border: 1px solid var(--pg-border); color: var(--pg-text); }
.pg-btn-outline:hover { border-color: var(--pg-color-primary); color: var(--pg-color-primary); }
.pg-btn-outline-strong { background: var(--pg-card-bg); border: 1.5px solid var(--pg-color-primary); color: var(--pg-color-primary); }
.pg-btn-outline-strong:hover { background: var(--pg-color-primary-light); }
.pg-btn-whatsapp { background: #25D366; color: #fff; box-shadow: 0 4px 12px rgba(37, 211, 102, .3); }
.pg-btn-whatsapp:hover { filter: brightness(1.05); box-shadow: 0 6px 16px rgba(37, 211, 102, .36); }
.pg-btn-tel { background: var(--pg-text); color: #fff; box-shadow: 0 4px 12px rgba(0, 0, 0, .18); }
.pg-btn-tel:hover { filter: brightness(1.15); }
.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;
}
/* Teaser accueil (front-page.php) : 4 cartes par ligne plutôt que 3, pour des
   cartes/images plus compactes que sur l'archive /blog/ complète. */
.pg-blog__grid--home { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
/* Titre centré au-dessus de la section "Derniers articles" de l'accueil — en
   h2 (pas h1, la page a déjà le sien sur pg-home-title). Le soulignement est
   sur un <span> interne (pas le h2 en entier) pour qu'il n'épouse que la
   largeur du texte plutôt que toute la largeur du conteneur. */
.pg-section-eyebrow { text-align: center; font-size: 22px; font-weight: var(--pg-font-weight-bold); color: var(--pg-text); margin: 32px 0 4px; }
.pg-section-eyebrow__text { border-bottom: 2px solid var(--pg-color-primary); padding-bottom: 6px; }
.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 16px 60px; }
/* Page Contact : largeur élargie pour la mise en page 2 colonnes (moyens de
   contact + formulaire — cf. .pg-contact__layout plus bas). Avant : colonne
   unique étroite (560px), rendu trop plat. */
.pg-article.pg-contact { max-width: 960px; }
.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; }

/* Navigation article précédent/suivant, en bas de single.php — précédent à
   gauche, suivant à droite (sens de lecture). */
.pg-article__nav { display: flex; justify-content: space-between; gap: 16px; margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--pg-border); }
.pg-article__nav-item { flex: 1; max-width: 48%; }
.pg-article__nav-item--next { text-align: right; margin-left: auto; }
.pg-article__nav-item a { display: block; text-decoration: none; }
.pg-article__nav-label {
	display: block;
	font-size: 12px;
	font-weight: var(--pg-font-weight-semibold);
	color: var(--pg-text-secondary);
	text-transform: uppercase;
	letter-spacing: .04em;
	margin-bottom: 4px;
}
.pg-article__nav-title {
	display: block;
	font-size: 14px;
	font-weight: var(--pg-font-weight-semibold);
	color: var(--pg-color-primary);
	line-height: 1.4;
}
.pg-article__nav-item a:hover .pg-article__nav-title { text-decoration: underline; }

/* --- Page Contact --- */
.pg-contact__title { text-align: center; }
.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__card-title { text-transform: none; letter-spacing: normal; font-size: 16px; color: var(--pg-text); }
.pg-contact__intro { margin: 4px 0 0; font-size: 14px; color: var(--pg-text-secondary); }
.pg-contact__char-count { margin: 6px 0 0; font-size: 12.5px; color: var(--pg-text-secondary); text-align: right; }
.pg-contact__required-note { margin: 16px 0 14px; font-size: 12.5px; color: var(--pg-text-secondary); }
.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; }
/* --- Page Contact : mise en page 2 colonnes (aside moyens de contact + formulaire) --- */
.pg-contact__subtitle { text-align: center; margin: 8px 0 0; color: var(--pg-text-secondary); font-size: 16px; }
.pg-contact__layout {
	display: grid;
	grid-template-columns: 340px minmax(0, 520px);
	justify-content: center;
	gap: 24px;
	align-items: start;
	margin-top: 44px;
}
/* Placement explicite : aside à gauche, formulaire à droite — alors que le
   formulaire est 1er dans le DOM (pour passer en haut sur mobile une fois empilé). */
.pg-contact__aside { grid-column: 1; grid-row: 1; }
.pg-contact__form-card { grid-column: 2; grid-row: 1; }
.pg-contact__aside-title {
	margin: 2px 2px 14px; font-size: 13px; font-weight: var(--pg-font-weight-bold);
	text-transform: uppercase; letter-spacing: .06em; color: var(--pg-text-secondary);
}
.pg-contact__method {
	background: var(--pg-card-bg); border: 1px solid var(--pg-border); border-radius: 16px;
	padding: 18px; margin-bottom: 14px; box-shadow: 0 8px 22px rgba(21, 32, 58, .05);
}
.pg-contact__method-head { display: flex; align-items: center; gap: 13px; }
.pg-contact__method-ic {
	width: 50px; height: 50px; border-radius: 13px; flex-shrink: 0;
	display: flex; align-items: center; justify-content: center;
}
.pg-contact__method-ic svg { width: 27px; height: 27px; }
.pg-contact__method-ic--wa { background: #E7F9EE; }
.pg-contact__method-ic--fb { background: #E8F0FE; }
.pg-contact__method-name { margin: 0; font-size: 17px; font-weight: var(--pg-font-weight-bold); color: var(--pg-text); }
.pg-contact__method-sub { margin: 2px 0 0; font-size: 13.5px; color: var(--pg-text-secondary); }
.pg-contact__method-big { margin: 12px 0 0; font-size: 19px; font-weight: var(--pg-font-weight-extrabold); color: var(--pg-text); }
.pg-contact__method-btn {
	display: flex; align-items: center; justify-content: center; gap: 9px;
	margin-top: 13px; padding: 12px; border-radius: 11px;
	font-weight: var(--pg-font-weight-bold); font-size: 14.5px; color: #fff; text-decoration: none;
}
.pg-contact__method-btn svg { width: 19px; height: 19px; }
.pg-contact__method-btn--wa { background: #25D366; }
.pg-contact__method-btn--fb { background: #1877F2; }
.pg-contact__faqnote {
	background: var(--pg-color-primary-light); border: 1px solid #FBD9C6; border-radius: 14px;
	padding: 15px 17px; font-size: 14px; line-height: 1.5; color: #9A3412;
}
.pg-contact__faqnote strong { color: #7C2D12; }
.pg-contact__faqnote a { color: var(--pg-color-primary-dark); font-weight: var(--pg-font-weight-bold); }
/* La carte Horaires réutilise .pg-contact__hours, mais dans l'aside : marge et alignement adaptés. */
.pg-contact__aside .pg-contact__hours { margin: 0 0 14px; align-items: center; }
@media (max-width: 860px) {
	.pg-contact__layout { grid-template-columns: 1fr; }
	/* Mobile : le formulaire (1er dans le DOM) passe en haut, les moyens de contact dessous. */
	.pg-contact__aside, .pg-contact__form-card { grid-column: 1; grid-row: auto; }
}
.pg-bientot__phone-row { display: flex; align-items: center; gap: 10px; padding: 0 14px; border: 1px solid var(--pg-border); border-radius: 8px; background: var(--pg-background); }
.pg-bientot__phone-row:focus-within { border-color: var(--pg-color-primary); box-shadow: 0 0 0 3px var(--pg-color-primary-light); }
.pg-bientot__dial-code { font-size: 14px; font-weight: var(--pg-font-weight-semibold); color: var(--pg-text); white-space: nowrap; }
.pg-bientot__phone-row .pg-contact__input { flex: 1; border: none; padding: 10px 0; background: transparent; }
.pg-bientot__phone-row .pg-contact__input:focus { box-shadow: none; }
.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); }

/* --- Page Aide & Support : accordéon FAQ en cartes (wrapper .pg-faq, cf. postigo-build-support-html du seed) --- */
.pg-faq .pg-faq-toc {
	background: var(--pg-card-bg); border: 1px solid var(--pg-border); border-radius: 16px;
	padding: 16px; margin: 22px 0 10px; gap: 10px; box-shadow: 0 8px 22px rgba(21, 32, 58, .05);
}
.pg-faq .pg-faq-toc a { padding: 8px 16px; border: 1px solid #FBD9C6; font-weight: var(--pg-font-weight-bold); font-size: 14px; }
.pg-faq h3 { display: flex; align-items: center; gap: 11px; font-size: 16px; margin: 34px 0 14px; scroll-margin-top: 90px; }
.pg-faq h3::before { content: ""; width: 6px; height: 24px; border-radius: 3px; background: var(--pg-color-primary); flex-shrink: 0; }
.pg-faq details {
	background: var(--pg-card-bg); border: 1px solid var(--pg-border); border-radius: 14px;
	margin-bottom: 12px; padding: 0; box-shadow: 0 6px 16px rgba(21, 32, 58, .04);
	transition: border-color .15s ease, box-shadow .15s ease; scroll-margin-top: 90px;
}
.pg-faq details[open] { border-color: #FBC9AE; box-shadow: 0 10px 26px rgba(255, 107, 43, .10); }
.pg-faq summary {
	list-style: none; cursor: pointer; display: flex; align-items: center; gap: 14px;
	padding: 13px 16px; font-size: 14px; font-weight: var(--pg-font-weight-bold); color: var(--pg-text);
}
.pg-faq summary::-webkit-details-marker { display: none; }
.pg-faq summary:hover { color: var(--pg-color-primary); }
.pg-faq summary::after {
	content: ""; margin-left: auto; flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%;
	background: var(--pg-color-primary-light) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23FF6B2B'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E") center / 16px no-repeat;
	transition: transform .2s ease;
}
.pg-faq details[open] summary::after { transform: rotate(180deg); }
.pg-faq details p {
	margin: 0; padding: 13px 16px 16px; border-top: 1px solid var(--pg-border);
	color: var(--pg-text-secondary); font-size: 13px; line-height: 1.6;
}
.pg-faq-cta {
	margin-top: 40px; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
	background: linear-gradient(135deg, var(--pg-color-primary) 0%, var(--pg-color-primary-dark) 100%);
	border-radius: 18px; padding: 28px 30px; color: #fff; box-shadow: 0 14px 30px rgba(255, 107, 43, .28);
}
.pg-faq-cta__title { margin: 0; font-size: 20px; font-weight: var(--pg-font-weight-extrabold); color: #fff; }
.pg-faq-cta__sub { margin: 4px 0 0; font-size: 15px; opacity: .92; }
.pg-faq-cta__btn {
	flex-shrink: 0; background: #fff; color: var(--pg-color-primary-dark);
	font-weight: var(--pg-font-weight-bold); font-size: 15px; padding: 14px 24px; border-radius: 999px; text-decoration: none;
}

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

/* --- Hero FAQ (page-support.php) ---
   Variante douce du héros : fond orange CLAIR + texte orange foncé (pas le
   dégradé plein/texte blanc de .pg-hero). Couleurs figées en dur pour rester
   lisibles en thème sombre (où --pg-text passerait en clair sur ce fond pâle). */
.pg-faq-hero {
	margin: 16px 0 24px;
	padding: 40px 24px;
	border-radius: 18px;
	text-align: center;
	background: linear-gradient(135deg, #FFF3EE, #FFE3D6);
	border: 1px solid #FFD9C7;
}
.pg-faq-hero__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--pg-color-primary-dark);
	margin-bottom: 10px;
}
.pg-faq-hero__title {
	margin: 0;
	font-size: 30px;
	font-weight: var(--pg-font-weight-extrabold);
	color: var(--pg-color-primary-dark);
}
.pg-faq-hero__sub {
	max-width: 560px;
	margin: 10px auto 0;
	font-size: 14.5px;
	line-height: 1.5;
	color: #8A5A44;
}
@media (max-width: 600px) {
	.pg-faq-hero { padding: 32px 18px; }
	.pg-faq-hero__title { font-size: 24px; }
}

/* --- Hero accueil (remplace pg-home-title, gardé ci-dessus au cas où) ---
   Même dégradé que .pg-promo-banner "Application" (var(--pg-color-primary)
   -> var(--pg-color-primary-dark)) : pas une nouvelle couleur, texte blanc
   déjà éprouvé sur ce fond ailleurs sur la même page. */
.pg-hero {
	position: relative;
	overflow: hidden;
	margin: 16px 0 20px;
	padding: 34px 24px;
	border-radius: 18px;
	background: linear-gradient(135deg, var(--pg-color-primary), var(--pg-color-primary-dark));
	text-align: center;
	color: #fff;
}
/* Même matière que les cartes promo (reflet + cercle doux) pour harmoniser le
   héros avec les blocs promo, qui partagent le même orange. Texture pointillée
   retirée à la demande : dégradé + reflets seulement. */
.pg-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		radial-gradient(90% 80% at 85% 0%, rgba(255, 255, 255, .22), transparent 52%),
		radial-gradient(360px 360px at 96% 116%, rgba(255, 255, 255, .10), transparent 70%);
}
.pg-hero > * { position: relative; }
.pg-hero__title { font-size: 27px; font-weight: var(--pg-font-weight-extrabold); margin: 0 0 20px; }
.pg-hero__title-sub { display: block; font-size: 14.5px; font-weight: var(--pg-font-weight-regular); margin-top: 8px; opacity: .92; }
.pg-hero__intro { max-width: 640px; margin: 0 auto 20px; font-size: 14.5px; line-height: 1.5; opacity: .92; }
.pg-hero__search {
	display: flex;
	align-items: center;
	gap: 8px;
	background: #fff;
	border-radius: 999px;
	padding: 6px 6px 6px 16px;
	max-width: 460px;
	margin: 0 auto;
	box-shadow: 0 6px 18px rgba(0, 0, 0, .16);
}
.pg-hero__search .pg-icon { color: var(--pg-text-secondary); }
.pg-hero__search input {
	flex: 1;
	min-width: 0;
	border: none;
	outline: none;
	font-family: inherit;
	font-size: 13.5px;
	color: var(--pg-text);
	background: none;
}
.pg-hero__search button {
	flex-shrink: 0;
	border: none;
	background: var(--pg-text);
	color: #fff;
	font-family: inherit;
	font-size: 13px;
	font-weight: var(--pg-font-weight-bold);
	padding: 10px 18px;
	border-radius: 999px;
	cursor: pointer;
	transition: background-color .15s ease;
}
.pg-hero__search button:hover { background: var(--pg-color-primary-dark); }
.pg-hero__city { position: relative; flex-shrink: 0; }
.pg-hero__city summary {
	display: flex;
	align-items: center;
	gap: 4px;
	list-style: none;
	cursor: pointer;
	color: var(--pg-text);
	font-size: 13px;
	font-weight: var(--pg-font-weight-semibold);
	padding: 10px 10px 10px 14px;
	border-left: 1px solid var(--pg-border);
	white-space: nowrap;
}
.pg-hero__city summary::-webkit-details-marker { display: none; }
.pg-hero__city summary .pg-icon:last-child { transform: rotate(90deg); transition: transform .15s ease; }
.pg-hero__city[open] summary .pg-icon:last-child { transform: rotate(-90deg); }
.pg-hero__city-panel {
	position: absolute;
	top: calc(100% + 10px);
	right: 0;
	background: #fff;
	border-radius: 14px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
	padding: 8px;
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 210px;
	max-height: 280px;
	overflow-y: auto;
	text-align: left;
	z-index: 20;
}
.pg-hero__city-panel a {
	color: var(--pg-text);
	text-decoration: none;
	font-size: 13px;
	padding: 8px 12px;
	border-radius: 8px;
	white-space: nowrap;
}
.pg-hero__city-panel a:hover { background: var(--pg-color-primary-light); color: var(--pg-color-primary); }
.pg-hero__city-panel a.is-active { font-weight: var(--pg-font-weight-bold); color: var(--pg-color-primary); }
.pg-hero__chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 16px; }
.pg-hero__chips a {
	font-size: 12px;
	font-weight: var(--pg-font-weight-semibold);
	color: #fff;
	text-decoration: none;
	padding: 6px 13px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .16);
	border: 1px solid rgba(255, 255, 255, .34);
	transition: background-color .15s ease;
}
.pg-hero__chips a:hover { background: rgba(255, 255, 255, .3); }
@media (max-width: 560px) {
	.pg-hero { padding: 26px 18px; }
	.pg-hero__title { font-size: 22px; }
	.pg-hero__search { padding-left: 14px; }
}

/* --- 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. Cliquable
   (page-bientot.php) depuis l'ajout du formulaire d'inscription au lancement
   — plus de cursor: default, .pg-hub__country gère déjà le style <a>. */
.pg-hub__country--soon {
	position: relative;
	opacity: .5;
	filter: grayscale(.5);
}
.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; }
/* Hub racine (2 colonnes seulement) : si "Suivez-nous" grandit comme les
   autres colonnes, sa boîte devient très large et son contenu (court) reste
   aligné à gauche dedans — visuellement loin du bord droit, contrairement
   aux sites pays où elle est une colonne étroite parmi 5. Ici on la garde à
   sa largeur naturelle et on laisse la marque absorber tout l'espace
   restant, pour qu'elle colle au bord droit comme sur les sites pays. */
.pg-footer__grid--hub .pg-footer__col--social { flex: 0 0 auto; }
.pg-footer__logo {
	display: block;
	margin: 0 0 8px;
	height: 27px;
	width: auto;
}
.pg-footer__tagline { margin: 0 0 40px; }
.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; flex-direction: column; align-items: flex-start; gap: 16px; }
/* 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; }
@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; }
/* Même classe réutilisée dans .pg-pricing__how (carte "Qu'est-ce qu'un crédit ?") : sans
   font-size propre, elle hérite du 16px par défaut du navigateur au lieu des 14px de
   .pg-pricing__steps juste en dessous — visible à l'œil, corrigé ici sans toucher au
   sous-titre du hero (plus grand intentionnellement). */
.pg-pricing__how .pg-pricing__subtitle { font-size: 14px; }
.pg-pricing__cta { margin: 0 auto; }
.pg-pricing__why { margin: 10px auto 4px; }

/* Bascule Mensuel / 6 mois (JS dans page-forfaits-pro.php). */
.pg-pricing__billing { display: flex; justify-content: center; margin: 28px 0 8px; }
.pg-pricing__toggle {
	display: inline-flex;
	gap: 4px;
	padding: 4px;
	background: var(--pg-background);
	border: 1px solid var(--pg-border);
	border-radius: 999px;
}
.pg-pricing__toggle-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 18px;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: var(--pg-text-secondary);
	font: inherit;
	font-size: 14px;
	font-weight: var(--pg-font-weight-bold);
	cursor: pointer;
	transition: background .15s ease, color .15s ease;
}
.pg-pricing__toggle-btn.is-active { background: var(--pg-card-bg); color: var(--pg-text); box-shadow: 0 1px 4px rgba(17, 24, 39, .12); }
.pg-pricing__save {
	padding: 2px 8px;
	border-radius: 999px;
	background: rgba(34, 197, 94, .16);
	color: #15803D;
	font-size: 11px;
	font-weight: var(--pg-font-weight-extrabold);
}

.pg-pricing__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	margin: 20px 0 36px;
	align-items: stretch;
}
.pg-pricing__card {
	position: relative;
	background: var(--pg-card-bg);
	border: 1.5px solid var(--pg-border);
	border-top: 4px solid var(--pg-plan-color);
	border-radius: 16px;
	padding: 24px 20px;
	display: flex;
	flex-direction: column;
	transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.pg-pricing__card:hover { border-color: var(--pg-plan-color); box-shadow: 0 8px 24px rgba(17, 24, 39, .1); transform: translateY(-2px); }
.pg-pricing__card--featured { border-color: var(--pg-plan-color); box-shadow: 0 10px 30px rgba(17, 24, 39, .14); }
@media (min-width: 861px) {
	.pg-pricing__card--featured { transform: scale(1.04); }
	.pg-pricing__card--featured:hover { transform: scale(1.04) translateY(-2px); }
}
.pg-pricing__ribbon {
	position: absolute;
	top: -12px;
	left: 50%;
	transform: translateX(-50%);
	white-space: nowrap;
	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 12px;
}
.pg-pricing__plan-name { font-size: 15px; font-weight: var(--pg-font-weight-extrabold); letter-spacing: .3px; text-transform: uppercase; color: var(--pg-plan-color); margin: 4px 0 10px; }
.pg-pricing__amount { font-size: 30px; font-weight: var(--pg-font-weight-extrabold); line-height: 1; margin: 0; color: var(--pg-text); }
.pg-pricing__amount-cur { font-size: 17px; font-weight: var(--pg-font-weight-bold); }
.pg-pricing__per { font-size: 13px; font-weight: var(--pg-font-weight-semibold); color: var(--pg-text-secondary); }
.pg-pricing__credits { font-size: 13px; color: var(--pg-text-secondary); margin: 6px 0 0; }
.pg-pricing__save-hint { margin: 6px 0 0; font-size: 12.5px; font-weight: var(--pg-font-weight-bold); color: #15803D; }
.pg-pricing__save-hint:empty { display: none; }
.pg-pricing__features { list-style: none; margin: 16px 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; flex-shrink: 0; }
.pg-pricing__feat-strong { font-weight: var(--pg-font-weight-bold); }
.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__table thead th.pg-pricing__th-plan { color: var(--pg-plan-color); }
.pg-pricing__table tbody tr:nth-child(odd) td { background: rgba(127, 127, 127, .045); }

.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 Acheter des crédits (page-acheter-des-credits.php) ---
   Hero réutilise .pg-invite__* ; le reste est scopé .pg-credits-* :
   stepper 3 étapes, cartes opérateurs, callout motif, mini-cartes crédits. */
.pg-credits-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 0 0 8px; }
.pg-credits-step {
	position: relative;
	background: var(--pg-card-bg);
	border: 1px solid var(--pg-border);
	border-radius: 16px;
	padding: 24px 18px 20px;
	text-align: center;
}
.pg-credits-step__num {
	position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
	width: 26px; height: 26px; border-radius: 50%;
	background: var(--pg-color-primary); color: #fff;
	font-size: 13px; font-weight: var(--pg-font-weight-extrabold);
	display: grid; place-items: center;
}
.pg-credits-step__icon {
	width: 48px; height: 48px; margin: 6px auto 12px; border-radius: 14px;
	background: var(--pg-color-primary-light); color: var(--pg-color-primary);
	display: grid; place-items: center;
}
.pg-credits-step__icon svg { width: 24px; height: 24px; }
.pg-credits-step__title { margin: 0 0 6px; font-size: 15px; font-weight: var(--pg-font-weight-extrabold); }
.pg-credits-step__desc { margin: 0; font-size: 13px; color: var(--pg-text-secondary); line-height: 1.5; }

.pg-credits-ops { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; max-width: 640px; margin: 0 auto; }
.pg-credits-op {
	border: 1px solid var(--pg-border);
	border-top: 4px solid var(--pg-op-color, var(--pg-color-primary));
	border-radius: 16px; padding: 18px; background: var(--pg-card-bg); text-align: center;
}
.pg-credits-op__name { margin: 0; font-size: 12.5px; font-weight: var(--pg-font-weight-extrabold); text-transform: uppercase; letter-spacing: .4px; color: var(--pg-op-color, var(--pg-color-primary)); }
.pg-credits-op__num { font-size: 21px; font-weight: var(--pg-font-weight-extrabold); margin: 8px 0 6px; letter-spacing: .5px; }
.pg-credits-op__holder { margin: 0 0 12px; font-size: 12.5px; color: var(--pg-text-secondary); }
.pg-credits-op__holder strong { font-weight: var(--pg-font-weight-bold); color: var(--pg-op-color, var(--pg-color-primary)); }
.pg-credits-op__copy {
	min-height: 36px; padding: 0 16px; border-radius: 10px;
	border: 1.5px solid var(--pg-op-color, var(--pg-color-primary));
	background: var(--pg-card-bg); color: var(--pg-op-color, var(--pg-color-primary));
	font: inherit; font-size: 13px; font-weight: var(--pg-font-weight-bold); cursor: pointer;
}

.pg-credits-motif {
	display: flex; gap: 10px; align-items: flex-start;
	max-width: 640px; margin: 16px auto 0; padding: 14px 16px;
	border-radius: 14px; background: rgba(255, 107, 43, .1);
	border: 1px solid rgba(255, 107, 43, .35);
	color: var(--pg-text); font-size: 14px; line-height: 1.5; text-align: left;
}
.pg-credits-motif svg { color: #DC2626; flex-shrink: 0; margin-top: 1px; }

.pg-credits-units { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; max-width: 520px; margin: 0 auto; }
.pg-credits-unit { border: 1px solid var(--pg-border); border-radius: 14px; padding: 16px 12px; text-align: center; background: var(--pg-card-bg); }
.pg-credits-unit__cr { font-size: 14px; font-weight: var(--pg-font-weight-bold); color: var(--pg-text-secondary); }
.pg-credits-unit__price { font-size: 18px; font-weight: var(--pg-font-weight-extrabold); color: var(--pg-color-primary-dark); margin-top: 4px; }

@media (max-width: 720px) {
	.pg-credits-steps { grid-template-columns: 1fr; }
	.pg-credits-ops { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
	.pg-credits-units { grid-template-columns: 1fr; }
}

/* --- Page Parrainage --- */
/* Hero : bande pleine largeur en dégradé orange de marque. Les textes/boutons posés
   dessus sont en blanc (valeurs fixes, pas de token), donc identiques en clair/sombre. */
.pg-referral__hero {
	position: relative;
	overflow: hidden;
	background:
		radial-gradient(120% 90% at 85% -10%, rgba(255, 255, 255, .22), transparent 55%),
		radial-gradient(90% 120% at 0% 120%, rgba(0, 0, 0, .14), transparent 50%),
		linear-gradient(135deg, var(--pg-color-primary), var(--pg-color-primary-dark));
	padding: 48px 0;
	margin-bottom: 8px;
	color: #fff;
}
.pg-referral__hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: radial-gradient(rgba(255, 255, 255, .14) 1px, transparent 1.4px);
	background-size: 22px 22px;
	opacity: .35;
	pointer-events: none;
}
.pg-referral__hero-inner {
	position: relative;
	display: grid;
	grid-template-columns: 1.05fr .95fr;
	gap: 40px;
	align-items: center;
	max-width: 960px;
}
.pg-referral__hero-text { min-width: 0; }
.pg-referral__hero-badge {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	background: rgba(255, 255, 255, .16);
	border: 1px solid rgba(255, 255, 255, .28);
	color: #fff;
	font-size: 12.5px;
	font-weight: var(--pg-font-weight-bold);
	border-radius: 999px;
	padding: 6px 14px;
	margin-bottom: 18px;
}
.pg-referral__hero-eyebrow {
	font-size: 13px;
	font-weight: var(--pg-font-weight-bold);
	letter-spacing: .14em;
	text-transform: uppercase;
	opacity: .85;
	margin: 0 0 8px;
}
.pg-referral__title {
	font-size: 40px;
	line-height: 1.08;
	font-weight: var(--pg-font-weight-extrabold);
	margin: 0 0 14px;
	color: #fff;
	letter-spacing: -0.02em;
	text-wrap: balance;
}
.pg-referral__title-amount { white-space: nowrap; }
.pg-referral__subtitle {
	color: rgba(255, 255, 255, .94);
	line-height: 1.55;
	margin: 0 0 24px;
	font-size: 15.5px;
	max-width: 420px;
}
.pg-referral__hero-actions {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
}
.pg-referral__cta {
	margin: 0;
	background: #fff;
	color: var(--pg-color-primary);
	border: none;
	font-weight: var(--pg-font-weight-extrabold);
	box-shadow: 0 10px 28px rgba(0, 0, 0, .22);
}
.pg-referral__cta:hover { background: #fff; color: var(--pg-color-primary-dark); transform: translateY(-1px); }
.pg-referral__hero-trust {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	color: rgba(255, 255, 255, .92);
	font-size: 12.5px;
	margin: 0;
}

/* Visuel du hero : maquette de l'écran « Inviter mes amis » (toujours en thème clair,
   c'est une capture d'app posée sur le fond orange). */
.pg-referral__hero-visual { display: flex; justify-content: center; }
.pg-referral__phone {
	width: 230px;
	border-radius: 32px;
	padding: 10px;
	background: rgba(12, 10, 9, .5);
	border: 1px solid rgba(255, 255, 255, .18);
	box-shadow: 0 26px 60px rgba(0, 0, 0, .35);
	transform: rotate(2.5deg);
}
.pg-referral__phone-screen {
	background: #fff;
	border-radius: 24px;
	overflow: hidden;
	color: #1A1D23;
}
.pg-referral__phone-top {
	background: linear-gradient(135deg, var(--pg-color-primary), var(--pg-color-primary-dark));
	color: #fff;
	padding: 16px 16px 22px;
}
.pg-referral__phone-eyebrow { margin: 0; font-size: 11px; opacity: .9; font-weight: var(--pg-font-weight-semibold); }
.pg-referral__phone-heading { margin: 2px 0 0; font-size: 15px; font-weight: var(--pg-font-weight-extrabold); }
.pg-referral__phone-card {
	margin: -12px 12px 0;
	background: #fff;
	border-radius: 14px;
	padding: 13px;
	box-shadow: 0 10px 24px rgba(0, 0, 0, .12);
	border: 1px solid #F0F1F3;
}
.pg-referral__phone-card-icon {
	display: inline-grid;
	place-items: center;
	width: 36px;
	height: 36px;
	border-radius: 10px;
	background: var(--pg-color-primary-light);
	color: var(--pg-color-primary);
}
.pg-referral__phone-amount { margin: 9px 0 0; font-size: 22px; font-weight: var(--pg-font-weight-extrabold); color: var(--pg-color-success); letter-spacing: -0.02em; }
.pg-referral__phone-caption { margin: 1px 0 0; font-size: 11px; color: #6B7280; }
.pg-referral__phone-list { list-style: none; margin: 0; padding: 12px; display: grid; gap: 9px; }
.pg-referral__phone-row { display: flex; align-items: center; gap: 9px; font-size: 11.5px; color: #374151; }
.pg-referral__phone-dot {
	display: inline-grid;
	place-items: center;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	color: #fff;
	flex: none;
}

/* Hero sur tablette/mobile : les deux colonnes s'empilent, le texte se centre, le téléphone se redresse. */
@media (max-width: 820px) {
	.pg-referral__hero-inner { grid-template-columns: 1fr; gap: 28px; text-align: center; }
	.pg-referral__subtitle { margin-left: auto; margin-right: auto; }
	.pg-referral__hero-actions { justify-content: center; }
	.pg-referral__phone { transform: none; }
}

.pg-referral__section { margin: 48px 0; }
.pg-referral__section-title { font-size: 22px; font-weight: var(--pg-font-weight-extrabold); margin: 0 0 6px; text-align: center; }
.pg-referral__section-sub { text-align: center; color: var(--pg-text-secondary); font-size: 14px; line-height: 1.6; margin: 0 auto 24px; max-width: 560px; }

/* Comment ça marche : frise 3 étapes avec pastilles numérotées + trait de liaison. */
.pg-referral__how { max-width: 820px; margin-left: auto; margin-right: auto; }
.pg-referral__steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.pg-referral__step { position: relative; text-align: center; padding: 0 10px; }
.pg-referral__step:not(:first-child)::before {
	content: "";
	position: absolute;
	top: 20px;
	right: 50%;
	width: 100%;
	height: 2px;
	background: var(--pg-border);
	z-index: 0;
}
.pg-referral__step-num {
	position: relative;
	z-index: 1;
	width: 40px;
	height: 40px;
	border-radius: 999px;
	background: var(--pg-color-primary);
	color: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-weight: var(--pg-font-weight-extrabold);
	font-size: 16px;
	margin-bottom: 14px;
	box-shadow: 0 0 0 5px var(--pg-background);
}
.pg-referral__step-title { font-size: 15px; font-weight: var(--pg-font-weight-bold); margin: 0 0 4px; }
.pg-referral__step-text { font-size: 13px; color: var(--pg-text-secondary); line-height: 1.6; margin: 0; }

/* Cartes bonus : badge d'icône plein + libellé coloré, couleur portée par --pg-plan-color. */
.pg-referral__bonus-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.pg-referral__bonus-card {
	background: var(--pg-card-bg);
	border: 1.5px solid var(--pg-border);
	border-radius: 16px;
	padding: 24px 20px;
	transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.pg-referral__bonus-card:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(0, 0, 0, .08); border-color: var(--pg-plan-color); }
.pg-referral__bonus-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 12px;
	background: var(--pg-plan-color);
	color: #fff;
	margin-bottom: 14px;
}
.pg-referral__bonus-tag {
	display: block;
	color: var(--pg-plan-color);
	font-size: 11px;
	font-weight: var(--pg-font-weight-extrabold);
	text-transform: uppercase;
	letter-spacing: .05em;
	margin-bottom: 6px;
}
.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; }

/* Commissions : deux blocs de durée côte à côte, lignes avec pastille de couleur du plan. */
.pg-referral__plan-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; max-width: 760px; margin: 0 auto; }
.pg-referral__plan-block { background: var(--pg-card-bg); border: 1.5px solid var(--pg-border); border-radius: 16px; padding: 18px; }
.pg-referral__plan-duration { font-size: 11px; font-weight: var(--pg-font-weight-bold); text-transform: uppercase; letter-spacing: .05em; color: var(--pg-text-secondary); margin: 0 0 12px; }
.pg-referral__plan-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.pg-referral__plan-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: 10px; background: var(--pg-background); }
.pg-referral__plan-name { display: flex; align-items: center; gap: 9px; font-size: 14px; font-weight: var(--pg-font-weight-semibold); color: var(--pg-text); }
.pg-referral__plan-dot { width: 9px; height: 9px; border-radius: 999px; background: var(--pg-plan-color); flex: none; }
.pg-referral__plan-amount { font-size: 14px; font-weight: var(--pg-font-weight-extrabold); color: var(--pg-plan-color); white-space: nowrap; }

/* Conditions de retrait : chips avec icône. */
.pg-referral__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.pg-referral__chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--pg-card-bg);
	border: 1px solid var(--pg-border);
	border-radius: 999px;
	padding: 8px 14px;
	font-size: 12.5px;
	color: var(--pg-text-secondary);
}
.pg-referral__chip .pg-icon { color: var(--pg-color-primary); flex: none; }

.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__title { font-size: 28px; }
	.pg-referral__bonus-grid { grid-template-columns: 1fr; }
	.pg-referral__steps { grid-template-columns: 1fr; gap: 20px; }
	.pg-referral__step:not(:first-child)::before { display: none; }
	.pg-referral__plan-grid { grid-template-columns: 1fr; }
	.pg-referral__chips { justify-content: flex-start; }
}

/* --- Mobile : header (logo + nav + 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-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; }
	/* Déroulant « Gagner » en mobile : pleine largeur, sous-menu en liste
	   indentée (position statique, pas de carte flottante). */
	.pg-nav__group { width: 100%; }
	.pg-nav__group-label { padding: 10px 12px; border-radius: 8px; justify-content: space-between; }
	.pg-nav__submenu {
		position: static; min-width: 0; padding: 2px 0 2px 12px;
		background: transparent; border: none; box-shadow: none;
	}
	.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;
}

/* ── Page de bienvenue des invités (page-invitation.php) ─────────────────────
   Fonds semi-transparents plutôt que --pg-color-primary-light (fixe, clair) :
   --pg-text passe en clair en mode sombre, un fond clair fixe le rendrait
   illisible (piège déjà rencontré sur ce thème). */
.pg-invite__hero { text-align: center; padding: 40px 16px 8px; max-width: 640px; margin: 0 auto; }
.pg-invite__title { font-size: 30px; line-height: 1.2; font-weight: var(--pg-font-weight-extrabold); margin: 0 0 12px; }
.pg-invite__subtitle { color: var(--pg-text-secondary); line-height: 1.6; margin: 0 0 20px; }
.pg-invite__cta { margin: 0 auto; min-height: 50px; padding: 0 26px; font-size: 16px; gap: 8px; }
.pg-postiphone__poster { display: block; width: 100%; height: auto; max-width: 560px; margin: 0 auto 20px; border-radius: 16px; box-shadow: 0 10px 28px rgba(17,24,39,.12); }
.pg-invite__body { max-width: 880px; padding-bottom: 40px; }
.pg-invite__code {
	max-width: 520px;
	margin: 24px auto 0;
	padding: 16px;
	text-align: center;
	background: rgba(255, 107, 43, 0.1);
	border: 1.5px dashed rgba(255, 107, 43, 0.55);
	border-radius: 16px;
}
.pg-invite__code-label { margin: 0 0 6px; font-size: 13px; color: var(--pg-text-secondary); }
.pg-invite__code-row { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; }
.pg-invite__code-value { font-size: 26px; font-weight: var(--pg-font-weight-extrabold); letter-spacing: 1px; color: var(--pg-text); user-select: all; }
.pg-invite__copy {
	min-height: 38px;
	padding: 0 14px;
	border-radius: 10px;
	border: 1.5px solid rgba(255, 107, 43, 0.5);
	background: var(--pg-card-bg);
	color: var(--pg-color-primary-dark);
	font: inherit;
	font-size: 13px;
	font-weight: var(--pg-font-weight-bold);
	cursor: pointer;
}
.pg-invite__code-hint { margin: 8px 0 0; font-size: 13px; line-height: 1.45; color: var(--pg-text); }
/* Rouge foncé : contraste ≥ 3:1 sur le cadre en mode clair comme sombre ; « ! » blanc à 4,8:1. */
.pg-invite__warn { color: #DC2626; }
.pg-invite__warn .pg-icon { vertical-align: -3px; }
.pg-invite__benefits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 24px 0 8px; }
.pg-invite__benefit {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px;
	background: var(--pg-card-bg);
	border: 1.5px solid var(--pg-border);
	border-radius: 14px;
}
.pg-invite__benefit-icon { width: 40px; height: 40px; flex-shrink: 0; border-radius: 12px; display: flex; align-items: center; justify-content: center; }
.pg-invite__benefit-icon--primary { background: rgba(255, 107, 43, 0.14); color: var(--pg-color-primary-dark); }
.pg-invite__benefit-icon--secondary { background: rgba(20, 184, 166, 0.16); color: #0F766E; }
.pg-invite__benefit-icon--success { background: rgba(34, 197, 94, 0.16); color: #15803D; }
.pg-invite__benefit-title { margin: 0; font-size: 14px; font-weight: var(--pg-font-weight-bold); }
.pg-invite__benefit-desc { margin: 2px 0 0; font-size: 12px; color: var(--pg-text-secondary); }
.pg-invite__all {
	display: flex;
	min-height: 44px;
	border: 1.5px solid var(--pg-border);
	border-radius: 12px;
	background: var(--pg-card-bg);
	color: var(--pg-text);
	font-weight: var(--pg-font-weight-bold);
}
@media (max-width: 720px) {
	.pg-invite__title { font-size: 26px; }
	.pg-invite__benefits { grid-template-columns: 1fr; }
}

/* ── Vitrine du jeu PostiPhone (page-jeu-postiphone.php) : données live ──────────
   Bande de statut (hero), lots à gagner, gagnants, historique des éditions.
   Accent doré = var(--pg-color-warning) (ambre déjà défini, lisible clair/sombre). */
.pg-postiphone__status {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin: 0 0 20px;
}
.pg-postiphone__status-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 14px;
	border-radius: 999px;
	background: var(--pg-card-bg);
	border: 1px solid var(--pg-border);
	font-size: 13.5px;
	font-weight: var(--pg-font-weight-semibold);
	color: var(--pg-text);
}
.pg-postiphone__status-badge .pg-icon { color: var(--pg-color-warning); }

.pg-postiphone__prizes {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
	margin: 0 0 8px;
}
.pg-postiphone__prize {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px;
	border: 1px solid var(--pg-border);
	border-radius: 16px;
	background: var(--pg-card-bg);
}
.pg-postiphone__prize-media {
	width: 64px;
	height: 64px;
	flex-shrink: 0;
	border-radius: 12px;
	overflow: hidden;
	background: rgba(245, 158, 11, 0.12);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--pg-color-warning);
}
.pg-postiphone__prize-media img { width: 100%; height: 100%; object-fit: cover; }
.pg-postiphone__prize-body { min-width: 0; }
.pg-postiphone__prize-label { margin: 0; font-size: 15px; font-weight: var(--pg-font-weight-bold); }
.pg-postiphone__prize-qty {
	display: inline-block;
	margin-top: 6px;
	padding: 3px 10px;
	border-radius: 999px;
	background: rgba(34, 197, 94, 0.16);
	color: #15803D;
	font-size: 12px;
	font-weight: var(--pg-font-weight-bold);
}

.pg-postiphone__winners-hint { margin: 0 0 12px; font-size: 13px; color: var(--pg-text-secondary); }
.pg-postiphone__winners { display: flex; flex-direction: column; gap: 8px; }
.pg-postiphone__winner {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	border: 1px solid var(--pg-border);
	border-radius: 12px;
	background: var(--pg-card-bg);
}
.pg-postiphone__winner-icon { display: inline-flex; color: var(--pg-color-warning); flex-shrink: 0; }
.pg-postiphone__winner-prize { flex: 1 1 auto; min-width: 0; font-size: 14.5px; font-weight: var(--pg-font-weight-semibold); }
.pg-postiphone__ticket {
	flex-shrink: 0;
	min-width: 54px;
	padding: 4px 10px;
	border-radius: 8px;
	background: var(--pg-background);
	border: 1px solid var(--pg-border);
	font-size: 14px;
	font-weight: var(--pg-font-weight-extrabold);
	letter-spacing: .5px;
	text-align: center;
}

.pg-postiphone__edition {
	margin: 0 0 14px;
	border: 1px solid var(--pg-border);
	border-radius: 16px;
	overflow: hidden;
	background: var(--pg-card-bg);
}
.pg-postiphone__edition-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 4px 12px;
	padding: 12px 14px;
	background: rgba(245, 158, 11, 0.12);
	border-bottom: 1px solid var(--pg-border);
}
.pg-postiphone__edition-name { font-size: 15px; font-weight: var(--pg-font-weight-extrabold); }
.pg-postiphone__edition-meta { font-size: 12.5px; color: var(--pg-text-secondary); }
.pg-postiphone__edition .pg-postiphone__winners { padding: 12px 14px; }
.pg-postiphone__edition .pg-postiphone__winner { border-color: var(--pg-border); }

.pg-postiphone__legal { margin: 24px 0 0; text-align: center; font-size: 13.5px; }
.pg-postiphone__legal a { color: var(--pg-text-secondary); text-decoration: underline; }
.pg-postiphone__legal a:hover { color: var(--pg-color-primary); }

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

/* ── Jeux-concours PRO : landing (page-jeux-concours-pro.php) + annuaire /jeux/
   (archive-pg_game.php). Réutilise .pg-invite__* / .pg-btn* / .pg-section-header ;
   n'ajoute ici que la grille de cartes, l'état vide et les encarts CTA. ──────── */

/* Landing : badge « inclus PRO » + rangée de CTA sous le hero. */
.pg-invite__badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0 0 14px;
	padding: 6px 14px;
	border-radius: 999px;
	background: rgba(255, 107, 43, 0.12);
	color: var(--pg-color-primary-dark);
	font-size: 13px;
	font-weight: var(--pg-font-weight-bold);
}
.pg-invite__badge .pg-icon { color: var(--pg-color-primary); }
.pg-invite__cta-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.pg-invite__cta-row .pg-invite__cta { margin: 0; }

/* Encart « Inclus dans l'abonnement PRO » (landing) + « Vous êtes vendeur PRO ? »
   (annuaire) : même boîte horizontale, texte à gauche, bouton à droite. */
.pg-games-included,
.pg-games-cta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 16px;
	margin: 32px 0 0;
	padding: 20px 22px;
	border: 1.5px solid var(--pg-border);
	border-radius: 16px;
	background: var(--pg-card-bg);
}
.pg-games-included { background: rgba(255, 107, 43, 0.07); border-color: rgba(255, 107, 43, 0.35); }
.pg-games-included__title,
.pg-games-cta__title { margin: 0 0 4px; font-size: 16px; font-weight: var(--pg-font-weight-extrabold); }
.pg-games-included__desc,
.pg-games-cta__desc { margin: 0; font-size: 13.5px; color: var(--pg-text-secondary); line-height: 1.5; }
.pg-games-included__text,
.pg-games-cta__text { flex: 1 1 260px; min-width: 0; }
.pg-games-included .pg-btn,
.pg-games-cta .pg-btn { flex-shrink: 0; min-height: 44px; }

/* Annuaire /jeux/ : intro, grille de cartes, état vide. */
.pg-games__intro { max-width: 640px; margin: 0 0 20px; color: var(--pg-text-secondary); line-height: 1.6; }
.pg-games-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 16px;
}
.pg-game-card {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--pg-border);
	border-radius: 16px;
	overflow: hidden;
	background: var(--pg-card-bg);
	color: inherit;
	text-decoration: none;
	transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.pg-game-card:hover {
	border-color: var(--pg-color-primary);
	box-shadow: 0 8px 22px rgba(17, 24, 39, .1);
	transform: translateY(-2px);
}
.pg-game-card__media {
	position: relative;
	aspect-ratio: 16 / 10;
	background: var(--pg-color-primary-light);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--pg-color-primary);
}
.pg-game-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pg-game-card__chip {
	position: absolute;
	top: 10px;
	left: 10px;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 4px 10px;
	border-radius: 999px;
	background: rgba(17, 24, 39, .72);
	color: #fff;
	font-size: 12px;
	font-weight: var(--pg-font-weight-bold);
}
.pg-game-card__chip .pg-icon { color: var(--pg-color-warning); }
.pg-game-card__body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 6px; }
.pg-game-card__title { margin: 0; font-size: 16px; font-weight: var(--pg-font-weight-bold); line-height: 1.3; }
.pg-game-card__prize,
.pg-game-card__org,
.pg-game-card__ends {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	font-size: 13.5px;
	color: var(--pg-text-secondary);
}
.pg-game-card__prize { color: var(--pg-text); font-weight: var(--pg-font-weight-semibold); }
.pg-game-card__prize .pg-icon { color: var(--pg-color-primary); }
.pg-game-card__org b { color: var(--pg-text); font-weight: var(--pg-font-weight-semibold); }
.pg-game-card__verified { display: inline-flex; color: var(--pg-color-success); }
.pg-game-card__ends .pg-icon { color: var(--pg-color-warning); }

.pg-games-empty {
	text-align: center;
	max-width: 480px;
	margin: 8px auto 0;
	padding: 40px 20px;
	border: 1.5px dashed var(--pg-border);
	border-radius: 16px;
	background: var(--pg-card-bg);
}
.pg-games-empty__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 72px;
	height: 72px;
	margin: 0 0 12px;
	border-radius: 50%;
	background: var(--pg-color-primary-light);
	color: var(--pg-color-primary);
}
.pg-games-empty__title { margin: 0 0 6px; font-size: 17px; font-weight: var(--pg-font-weight-extrabold); }
.pg-games-empty__desc { margin: 0 0 20px; font-size: 14px; color: var(--pg-text-secondary); line-height: 1.5; }

@media (max-width: 720px) {
	.pg-games-included,
	.pg-games-cta { flex-direction: column; align-items: flex-start; }
	.pg-games-included .pg-btn,
	.pg-games-cta .pg-btn { width: 100%; }
}

/* ── Vendeur en "messagerie uniquement" (single-pg_listing.php, reveal-phone.js) ──
   Remplace "Voir le numéro". Fond rgba : lisible aussi en mode sombre. */
.pg-message-only-notice {
	display: inline-flex;
	align-items: center;
	margin: 0;
	padding: 10px 14px;
	border-radius: 12px;
	background: rgba(255, 107, 43, 0.1);
	border: 1px solid rgba(255, 107, 43, 0.3);
	color: var(--pg-color-primary-dark);
	font-size: 14px;
	font-weight: var(--pg-font-weight-semibold);
}