/*
Theme Name:		    WLC Directory
Theme URI:		    https://we-love-camping.com
Description:	    Fork du thème Directory (AyeCode) pour We Love Camping. Enfant de Blockstrap. Charte graphique WLC déclarée dans theme.json. Ne pas mettre à jour vers le thème Directory d'origine : les personnalisations vivent dans ce dossier.
Tags:               full-site-editing, blog, food-and-drink, two-columns, editor-style, block-styles
Author:			    AyeCode Ltd
Author URI:		    https://ayecode.io
Template:		    blockstrap
Version:		    3.0.10
Text Domain:	    directory
Requires at least:  6.1
Requires PHP:       7.2
Tested up to:       6.8

License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

/* ── Défilement : surcharge du parent ─────────────────────────────────────────
 * Blockstrap (style.css parent) pose html{scroll-behavior:smooth}. Les
 * défilements programmatiques « smooth » ne s'exécutent pas dans un onglet
 * non focalisé (audits, outils de vérification) : scrollTo() y reste sans
 * effet. On neutralise — les sauts d'ancre deviennent instantanés, les
 * contrôles window.scrollTo(0,N) redeviennent déterministes partout.
 * (Le body{overflow-x:hidden} du même fichier parent est laissé : html étant
 * en overflow visible, il se propage à la fenêtre et le body ne devient
 * jamais la zone de défilement.)
 */
:root {
	/* :root (et non html) : spécificité supérieure à la règle du parent,
	   la surcharge gagne quel que soit l'ordre de chargement des feuilles. */
	scroll-behavior: auto;
}

/* ── Typographie : polices de repli métriques (anti-CLS) ─────────────────────
 * Les familles Playfair Display et Raleway (auto-hébergées, déclarées dans
 * theme.json → settings.typography.fontFamilies) s'affichent en font-display:
 * swap. Ces replis calent Georgia/Arial sur leurs métriques (size-adjust,
 * ascent/descent) pour que la substitution ne décale pas la mise en page.
 * theme.json ne sait pas déclarer de src:local(), d'où ces deux règles ici.
 */
/* size-adjust calibré en mesurant les largeurs réelles dans le navigateur
   (canvas measureText : Playfair/Georgia = 0,992 ; Raleway/Arial = 1,03). */
@font-face {
	font-family: "Playfair Fallback";
	src: local("Georgia");
	size-adjust: 99%;
	ascent-override: 109%;
	descent-override: 25%;
	line-gap-override: 0%;
}

@font-face {
	font-family: "Raleway Fallback";
	src: local("Arial");
	size-adjust: 103%;
	ascent-override: 91%;
	descent-override: 23%;
	line-gap-override: 0%;
}

/* Raleway : chiffres « old-style » par défaut — on force les chiffres alignés
 * partout où des nombres se comparent (compteurs, prix, tableaux). */
table,
.wlc-sel-count,
.gd-cpttag-count,
.geodir-post-meta,
.badge {
	font-variant-numeric: lining-nums;
}

/* ── Logo header/footer ──────────────────────────────────────────────────────
 * Deux <img> dans le header (rouge + blanche, shortcode [wlc_logo]) ; une seule
 * visible selon la classe du navbar, que le JS BlockStrap bascule déjà au scroll
 * et à l'ouverture du menu mobile : navbar-dark (transparent sur photo) → logo
 * blanc, navbar-light (fond blanc) → logo rouge. Hauteur fixée ici pour réserver
 * la place (aucun décalage de mise en page). */
.navbar .wlc-logo-wrap {
	display: contents; /* repli si l'utilitaire AUI d-contents manquait */
}

.navbar-brand.wlc-brand img.wlc-logo {
	height: 40px;
	width: auto;
}

@media (max-width: 991.98px) {
	.navbar-brand.wlc-brand img.wlc-logo {
		height: 34px;
	}
}

.navbar .wlc-logo--blanc {
	display: none;
}

.navbar.navbar-dark .wlc-logo--blanc {
	display: inline-block;
}

.navbar.navbar-dark .wlc-logo--rouge {
	display: none;
}

.wlc-logo-footer img.wlc-logo {
	height: 56px;
	width: auto;
}

/* ── Page « Gérer mon camping » ──────────────────────────────────────────────
 * Bloc wlc/manage-listings (includes/wlc-manage-listings.php) : connexion
 * UsersWP (visiteurs) ou cartes des fiches de l'utilisateur. Couleurs par la
 * palette, boutons Bootstrap/AUI du site. */
.wlc-manage {
	max-width: 1140px;
	margin: 0 auto;
}

.wlc-manage__login {
	max-width: 480px;
	margin: 0 auto;
}

.wlc-manage__forgot {
	text-align: center;
	margin: 0.75rem 0 0;
}

.wlc-manage__join {
	max-width: 640px;
	margin: 2.5rem auto 0;
	padding: 1.5rem;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--gray) 55%, var(--wp--preset--color--white));
	border-radius: 0.75rem;
	text-align: center;
}

.wlc-manage__join-title {
	font-size: 1.15rem;
	font-weight: 600;
	color: var(--wp--preset--color--wlc-primary-dark);
	margin: 0 0 1rem;
}

.wlc-manage__hello {
	font-size: 1.25rem;
	font-weight: 600;
	color: var(--wp--preset--color--wlc-primary-dark);
}

.wlc-manage__subtitle {
	font-size: 1.15rem;
	margin: 1.5rem 0 1rem;
}

.wlc-manage__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.25rem;
}

@media (max-width: 991.98px) {
	.wlc-manage__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 599.98px) {
	.wlc-manage__grid {
		grid-template-columns: 1fr;
	}
}

.wlc-manage__card {
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--gray) 55%, var(--wp--preset--color--white));
	border-radius: 0.75rem;
	overflow: hidden;
	background: var(--wp--preset--color--white);
}

.wlc-manage__img {
	aspect-ratio: 16 / 10;
	background: color-mix(in srgb, var(--wp--preset--color--gray) 30%, var(--wp--preset--color--white));
}

.wlc-manage__img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.wlc-manage__body {
	padding: 1rem 1.1rem 1.2rem;
}

.wlc-manage__status {
	display: inline-block;
	font-size: 0.75rem;
	font-weight: 600;
	padding: 0.2em 0.8em;
	border-radius: 999px;
	margin-bottom: 0.5rem;
}

.wlc-manage__status.is-publish {
	background: var(--wp--preset--color--wlc-light);
	color: var(--wp--preset--color--wlc-primary-dark);
}

.wlc-manage__status.is-pending {
	background: var(--wp--preset--color--wlc-accent);
	color: var(--wp--preset--color--white);
}

.wlc-manage__status.is-draft,
.wlc-manage__status.is-private {
	background: var(--wp--preset--color--gray);
	color: var(--wp--preset--color--wlc-ink);
}

.wlc-manage__title {
	font-size: 1.05rem;
	margin: 0 0 0.25rem;
}

.wlc-manage__city {
	color: var(--wp--preset--color--gray-dark);
	margin: 0 0 0.9rem;
}

.wlc-manage__actions {
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
}

/* Drapeaux d'édition par langue (formulaire front GD dans la langue). */
.wlc-manage__flags {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
}

.wlc-manage__flags-label {
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--wp--preset--color--wlc-primary-dark);
}

.wlc-manage__flag {
	display: inline-flex;
	padding: 0.35rem 0.45rem;
	border: 1.5px solid var(--wp--preset--color--wlc-primary);
	border-radius: 0.45rem;
	line-height: 0;
	transition: background 0.2s;
}

.wlc-manage__flag:hover,
.wlc-manage__flag:focus-visible {
	background: var(--wp--preset--color--wlc-light);
}

.wlc-manage__flag img {
	display: block;
}

.wlc-manage__links {
	margin-top: 2.5rem;
	color: var(--wp--preset--color--gray-dark);
}

.wlc-manage__empty {
	font-weight: 600;
}

/* ── Pied de page ────────────────────────────────────────────────────────────
 * --wlc-footer-bg : couleur du footer (primaire foncé #266674 de la palette),
 * utilisée par les deux blocs du modèle de footer (attribut bg_color en
 * var()), par le <footer> lui-même — la réserve laissée sous le copyright
 * pour la barre de recherche fixe (padding posé par le plugin wlc-search-bar,
 * uniquement quand la barre est présente : footer:has(.wlc-search-bar),
 * hauteur dans --wlc-search-bar-space) prend ainsi la même couleur, plus de
 * bande blanche — et par <html> pour la zone de sur-défilement élastique
 * (macOS/iOS) en bas de page ; le body garde son fond blanc (theme.json),
 * rien ne change dans la zone normale. */
:root {
	--wlc-footer-bg: var(--wp--preset--color--wlc-primary-dark);
}

/* PAS de fond sur <html> : sur les pages où le body est transparent, il
 * teintait tout l'arrière-plan (constaté le 2026-11-09). Le sur-défilement
 * élastique restera blanc — assumé. */

footer.wp-block-template-part {
	background-color: var(--wlc-footer-bg);
}

/* ── Étoiles de classement des campings ──────────────────────────────────────
 * Rangée SVG injectée à droite du nom (includes/wlc-stars.php). Taille en em
 * (suit le texte du titre voisin), couleur via --wlc-star-color (défaut :
 * primaire de la palette — jamais d'hexadécimal en dur). inline-flex : la
 * rangée reste insécable et passe à la ligne d'un bloc si le nom est long. */
.wlc-stars {
	display: inline-flex;
	align-items: center;
	gap: 0.12em;
	margin-left: 0.35em;
	vertical-align: baseline;
	white-space: nowrap;
	color: var(--wlc-star-color, var(--wp--preset--color--wlc-primary));
}

.wlc-stars svg {
	display: block;
	width: 0.85em;
	height: 0.85em;
	fill: currentColor;
}

/* ── Vignette « part d'emplacements nus » (fiches campings) ──────────────────
 * Pastille près du titre (shortcode [wlc_pitch_badge],
 * includes/wlc-pitch-badge.php). Couleurs par variables posées sur l'élément
 * depuis les SLUGS de palette choisis en réglages (jamais d'hex en dur).
 * Seul le chiffre du palier est visible ; le détail est en title + texte
 * lecteur d'écran. Variante compacte --sm prête pour les cartes-vignettes
 * (non utilisée pour l'instant). */
.wlc-pitch-badge {
	display: inline-flex;
	vertical-align: middle;
	flex: none;
	width: 48px;
	height: 48px;
	margin-right: 0.6rem;
	border-radius: 50%;
	background: var(--wlc-pitch-bg);
	color: var(--wlc-pitch-fg);
	font-family: var(--wp--preset--font-family--raleway);
}

.wlc-pitch-badge__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	width: 100%;
	height: 100%;
}

.wlc-pitch-badge__num {
	font-size: 17px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.01em;
}

.wlc-pitch-badge__num small {
	font-size: 11px;
	font-weight: 600;
	margin-left: 1px;
}

@media (max-width: 599.98px) {
	.wlc-pitch-badge {
		width: 38px;
		height: 38px;
	}

	.wlc-pitch-badge__num {
		font-size: 13px;
	}

	.wlc-pitch-badge__num small {
		font-size: 9px;
	}
}

/* Variante large (section « Emplacements nus » de l'accueil). */
.wlc-pitch-badge--lg {
	width: 76px;
	height: 76px;
}

.wlc-pitch-badge--lg .wlc-pitch-badge__num {
	font-size: 24px;
}

.wlc-pitch-badge--lg .wlc-pitch-badge__num small {
	font-size: 14px;
}

/* ── Section « Emplacements nus » de l'accueil ───────────────────────────────
 * Bloc wlc/pitch-ratio (includes/wlc-pitch-ratio.php) : trois colonnes égales
 * entièrement cliquables, fond blanc, filets verticaux gris très clair entre
 * les colonnes (hauteur du contenu, pas de bordure extérieure — mélange de la
 * palette, jamais d'hexadécimal). < 768 px : colonnes empilées, filet
 * horizontal. */
.wlc-pitch-ratio {
	background: var(--wp--preset--color--white);
	padding: 1.25rem 0 2.75rem;
}

.wlc-pitch-ratio__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	max-width: 1140px;
	margin: 0 auto;
}

.wlc-pitch-ratio__col {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.1rem;
	padding: 0.75rem 2rem;
	text-align: center;
	border-left: 1px solid color-mix(in srgb, var(--wp--preset--color--gray) 55%, var(--wp--preset--color--white));
}

.wlc-pitch-ratio__col:first-child {
	border-left: 0;
}

/* Le lien englobe la colonne : il garde la couleur de TEXTE de la charte
 * (primaire foncé), pas la couleur de lien du thème — spécificité renforcée. */
.wlc-pitch-ratio a.wlc-pitch-ratio__col,
.wlc-pitch-ratio a.wlc-pitch-ratio__col:hover,
.wlc-pitch-ratio a.wlc-pitch-ratio__col:focus,
.wlc-pitch-ratio a.wlc-pitch-ratio__col:focus-visible {
	color: var(--wp--preset--color--wlc-primary-dark);
	text-decoration: none;
}

.wlc-pitch-ratio__col:focus-visible {
	outline: 2px solid var(--wp--preset--color--wlc-primary);
	outline-offset: 4px;
	border-radius: 0.5rem;
}

.wlc-pitch-ratio__col .wlc-pitch-badge {
	margin: 0;
	transition: transform 0.2s;
}

.wlc-pitch-ratio__col:hover .wlc-pitch-badge,
.wlc-pitch-ratio__col:focus-visible .wlc-pitch-badge {
	transform: translateY(-3px);
}

@media (prefers-reduced-motion: reduce) {
	.wlc-pitch-ratio__col .wlc-pitch-badge {
		transition: none;
	}

	.wlc-pitch-ratio__col:hover .wlc-pitch-badge,
	.wlc-pitch-ratio__col:focus-visible .wlc-pitch-badge {
		transform: none;
	}
}

.wlc-pitch-ratio__text {
	font-family: var(--wp--preset--font-family--raleway);
	font-size: 1rem;
	line-height: 1.55;
	max-width: 34ch;
	margin: 0;
}

.wlc-pitch-ratio__count {
	font-family: var(--wp--preset--font-family--raleway);
	font-size: 0.85rem;
	color: var(--wp--preset--color--gray-dark);
	/* Capsule : léger filet de la couleur de la vignette du palier. */
	border: 1px solid var(--wlc-pr-capsule, currentColor);
	border-radius: 999px;
	padding: 0.3em 1em;
	line-height: 1.4;
	/* Ancrée en bas de la colonne : quand un texte fait une ligne de moins,
	 * les trois capsules restent alignées (les colonnes de la grille sont
	 * étirées à hauteur égale par défaut). Sans espace libre (colonnes
	 * empilées < 768 px), cette marge auto vaut 0 : rendu inchangé. */
	margin-top: auto;
}

/* Titres de section de l'accueil : centrés, dans la police du hero
 * (Playfair Display, comme le H1 « De vrais campings… »). Conservé pour le
 * h2 d'introduction « Des campings authentiques… », laissé tel quel. */
.home h2.wp-block-blockstrap-blockstrap-widget-heading {
	font-family: var(--wp--preset--font-family--playfair);
	text-align: center;
}

/* ── Titres de section harmonisés ────────────────────────────────────────────
 * Classe commune du style de référence « Expériences à vivre » / « Dernières
 * actualités » (.wlc-exp__title, qui la partage ici sans changer d'un pixel) :
 * Playfair, 2rem, graisse 500, primaire foncé, centré. Posée sur les blocs
 * titre « Vos campings préférés », « Idées de campings… » et « Ce que vous en
 * dites » de l'accueil (attribut css_class des blocs, éditable). */
.wlc-section-title,
.wlc-exp__title {
	font-family: var(--wp--preset--font-family--playfair);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 500;
	line-height: 1.25;
	color: var(--wp--preset--color--wlc-primary-dark);
	text-align: center;
	margin: 0 0 1rem;
}

@media (max-width: 767.98px) {
	.wlc-pitch-ratio {
		padding: 2.25rem 1rem 2rem;
	}

	.wlc-pitch-ratio__grid {
		grid-template-columns: 1fr;
	}

	.wlc-pitch-ratio__col {
		border-left: 0;
		border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--gray) 55%, var(--wp--preset--color--white));
		padding: 1.5rem 0.5rem;
	}

	.wlc-pitch-ratio__col:first-child {
		border-top: 0;
	}
}

/* Variante compacte (cartes-vignettes, à activer plus tard). */
.wlc-pitch-badge--sm {
	width: 28px;
	height: 28px;
}

.wlc-pitch-badge--sm .wlc-pitch-badge__num {
	font-size: 10px;
}

.wlc-pitch-badge--sm .wlc-pitch-badge__num small {
	font-size: 7px;
}

/* ── Bouton « Visiter le site » (fiches campings) ────────────────────────────
 * Lien contour à droite du nom du camping (shortcode [wlc_site_button],
 * includes/wlc-site-button.php). Couleurs par la palette du thème
 * (primaire #4A919E), Raleway déjà chargée par theme.json. */
.wlc-site-btn {
	display: inline-flex;
	vertical-align: middle;
	align-items: center;
	gap: 0.55em;
	padding: 0.85em 1.6em;
	font-family: var(--wp--preset--font-family--raleway);
	font-weight: 500;
	font-size: 1rem;
	letter-spacing: 0.01em;
	line-height: 1;
	background: transparent;
	border: 1.5px solid var(--wp--preset--color--wlc-primary);
	color: var(--wp--preset--color--wlc-primary);
	border-radius: 999px;
	text-decoration: none;
	transition: background 0.2s, color 0.2s, transform 0.2s, box-shadow 0.2s;
}

.wlc-site-btn__icon {
	flex: none;
	transition: transform 0.2s;
}

.wlc-site-btn:hover,
.wlc-site-btn:focus-visible {
	background: var(--wp--preset--color--wlc-primary);
	color: var(--wp--preset--color--white);
	transform: translateY(-2px);
	box-shadow: 0 8px 18px color-mix(in srgb, var(--wp--preset--color--wlc-primary) 25%, transparent);
	text-decoration: none;
}

.wlc-site-btn:hover .wlc-site-btn__icon,
.wlc-site-btn:focus-visible .wlc-site-btn__icon {
	transform: translate(2px, -2px);
}

@media (prefers-reduced-motion: reduce) {
	.wlc-site-btn,
	.wlc-site-btn__icon {
		transition: none;
	}

	.wlc-site-btn:hover,
	.wlc-site-btn:focus-visible,
	.wlc-site-btn:hover .wlc-site-btn__icon,
	.wlc-site-btn:focus-visible .wlc-site-btn__icon {
		transform: none;
	}
}

/* Mobile : le bouton passe sous le nom, pleine largeur, texte centré ; la
 * pastille emplacements nus l'accompagne. La colonne BlockStrap qui les
 * contient (vignette + bouton dans un même <p> wpautop) est forcée sur sa
 * propre rangée. */
@media (max-width: 599.98px) {
	.col:has(.wlc-site-btn),
	.col:has(.wlc-pitch-badge) {
		flex: 0 0 100%;
		max-width: 100%;
	}

	.wlc-site-btn {
		width: 100%;
		justify-content: center;
		margin-top: 0.5rem;
	}
}