/* =========================================================================
   Vertuose - Réalisations
   Les couleurs et polices sont HÉRITÉES de la charte Elementor via ses
   variables globales (--e-global-*), avec une valeur de repli. On ne
   redéfinit donc aucune couleur de marque en dur.
   ========================================================================= */

.vreal {
	--vr-green:      var(--e-global-color-secondary, #00513C);
	--vr-green-dark: var(--e-global-color-c155036, #003628);
	--vr-accent:     var(--e-global-color-accent, #ED8E00);
	--vr-cream:      var(--e-global-color-primary, #F5F0E3);
	--vr-text:       var(--e-global-color-text, #7A7A7A);
	--vr-white:      #ffffff;
	--vr-title:      var(--e-global-typography-primary-font-family, "Poppins"), sans-serif;
	--vr-body:       var(--e-global-typography-text-font-family, "Roboto"), sans-serif;
	--vr-radius:     12px;
	--vr-shadow:     0 6px 20px rgba(0, 0, 0, .08);

	max-width: 1200px;
	margin: 0 auto;
	padding: 32px 18px 56px;
	font-family: var(--vr-body);
	color: var(--vr-text);
	box-sizing: border-box;
}
.vreal *,
.vreal *::before,
.vreal *::after { box-sizing: border-box; }

.vreal h1, .vreal h2, .vreal h3 { font-family: var(--vr-title); color: var(--vr-green); }
.vreal a { color: var(--vr-green); }

/* ---------- Fil d'Ariane ---------- */
.vreal-fil {
	font-size: 14px;
	margin-bottom: 18px;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	align-items: center;
}
.vreal-fil a { text-decoration: none; }
.vreal-fil a:hover { text-decoration: underline; }
.vreal-fil__actuel { color: var(--vr-text); }

/* ---------- En-tête single ---------- */
.vreal-titre { font-size: 30px; line-height: 1.15; font-weight: 700; margin: 0 0 10px; }
.vreal-soustitre { font-size: 18px; color: var(--vr-green-dark); margin: 0 0 16px; }
.vreal-puces {
	list-style: none; padding: 0; margin: 0 0 26px;
	display: flex; flex-wrap: wrap; gap: 10px 22px;
	font-weight: 600; color: var(--vr-green);
}
.vreal-puces li { position: relative; padding-left: 16px; }
.vreal-puces li::before { content: "•"; position: absolute; left: 0; color: var(--vr-accent); }

/* ---------- Avant / Après ---------- */
.vreal-avant-apres {
	display: grid;
	grid-template-columns: 1fr;
	gap: 14px;
	margin: 0 0 32px;
}
.vreal-aa { position: relative; margin: 0; }
.vreal-aa img { width: 100%; height: auto; display: block; border-radius: var(--vr-radius); }
.vreal-aa figcaption {
	position: absolute; top: 12px; left: 12px;
	background: var(--vr-green); color: var(--vr-white);
	font-family: var(--vr-title); font-weight: 600; font-size: 13px;
	text-transform: uppercase; letter-spacing: .04em;
	padding: 5px 12px; border-radius: 999px;
}
.vreal-aa--apres figcaption { background: var(--vr-accent); }

/* ---------- Corps : contenu + aside ---------- */
.vreal-colonnes { display: grid; grid-template-columns: 1fr; gap: 32px; }

.vreal-section { margin: 0 0 26px; }
.vreal-section h2 { font-size: 22px; margin: 0 0 10px; }
.vreal-texte { line-height: 1.7; }
.vreal-texte p { margin: 0 0 14px; }

/* Encadré fiche + maillage + CTA */
.vreal-fiche, .vreal-maillage, .vreal-cta {
	background: var(--vr-cream);
	border-radius: var(--vr-radius);
	padding: 20px 22px;
	margin-bottom: 18px;
}
.vreal-fiche__titre { font-size: 18px; margin: 0 0 12px; }
.vreal-fiche dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; }
.vreal-fiche dt { font-weight: 600; color: var(--vr-green-dark); }
.vreal-fiche dd { margin: 0; }
.vreal-maillage ul { margin: 0; padding-left: 18px; }
.vreal-maillage li { margin-bottom: 6px; }

.vreal-cta { text-align: center; }
.vreal-cta__txt { font-family: var(--vr-title); font-weight: 600; color: var(--vr-green); margin: 0 0 12px; }
.vreal-btn {
	display: block; text-align: center; text-decoration: none;
	font-family: var(--vr-title); font-weight: 600; font-size: 16px;
	padding: 12px 18px; border-radius: 999px; margin-bottom: 10px;
	transition: filter .15s ease;
}
/* Spécificité + !important : certains thèmes forcent la couleur des liens <a>
   (ici le vert de marque), ce qui rendait le texte du bouton tél invisible
   (vert sur vert). On impose donc les couleurs, toujours via les variables. */
.vreal-cta a.vreal-btn--devis { background: var(--vr-accent); color: var(--vr-green-dark) !important; }
.vreal-cta a.vreal-btn--tel   { background: var(--vr-green);  color: var(--vr-white) !important; }
.vreal-btn:hover, .vreal-btn:focus { filter: brightness(1.08); }
.vreal-btn:focus-visible { outline: 3px solid var(--vr-green); outline-offset: 2px; }

.vreal-retour { margin-top: 26px; }
.vreal-retour a { font-weight: 600; text-decoration: none; }
.vreal-retour a:hover { text-decoration: underline; }

/* ---------- Archive ---------- */
.vreal-archive__entete { text-align: center; margin-bottom: 26px; }
.vreal-archive__entete h1 { font-size: 32px; margin: 0 0 8px; }
.vreal-archive__intro { max-width: 720px; margin: 0 auto; }

.vreal-filtres { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 30px; }
.vreal-filtre {
	text-decoration: none; font-weight: 600; font-size: 14px;
	padding: 8px 18px; border-radius: 999px;
	border: 1px solid rgba(0, 81, 60, .25); color: var(--vr-green);
	background: var(--vr-white); transition: background .15s, color .15s;
}
.vreal-filtre:hover, .vreal-filtre.est-actif { background: var(--vr-green); color: var(--vr-white); border-color: var(--vr-green); }

/* ---------- Grille de cartes ---------- */
.vreal-grille { display: grid; grid-template-columns: 1fr; gap: 24px; }

.vreal-carte {
	background: var(--vr-white);
	border: 1px solid rgba(0, 81, 60, .12);
	border-radius: var(--vr-radius);
	overflow: hidden;
	box-shadow: var(--vr-shadow);
	transition: transform .2s ease, box-shadow .2s ease;
}
.vreal-carte:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(0, 0, 0, .12); }
.vreal-carte__lien { text-decoration: none; color: inherit; display: block; }
/* Format portrait 3:4 : les photos verticales (768x1024) s'affichent en entier
   sans être rognées façon « bandeau de ciel ». object-fit: cover gère aussi les
   photos paysage (léger recadrage) sans déformation. */
.vreal-carte__media { aspect-ratio: 3 / 4; overflow: hidden; background: var(--vr-cream); }
.vreal-carte__media img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.vreal-carte__corps { padding: 16px 18px 20px; }
.vreal-badge {
	display: inline-block; font-family: var(--vr-title); font-size: 12px; font-weight: 600;
	text-transform: uppercase; letter-spacing: .03em;
	color: var(--vr-white); background: var(--vr-accent);
	padding: 4px 12px; border-radius: 999px; margin-bottom: 10px;
}
.vreal-carte__titre { font-size: 18px; line-height: 1.25; margin: 0 0 6px; }
.vreal-carte__lieu { margin: 0; font-size: 14px; }

.vreal-vide { text-align: center; padding: 40px 0; }
.vreal-pagination { margin-top: 34px; text-align: center; }
.vreal-pagination a, .vreal-pagination .current {
	display: inline-block; padding: 8px 14px; margin: 0 3px; border-radius: 8px; text-decoration: none;
}
.vreal-pagination .current { background: var(--vr-green); color: var(--vr-white); }

/* ---------- Écrans moyens ---------- */
@media (min-width: 700px) {
	.vreal-avant-apres { grid-template-columns: 1fr 1fr; }
	.vreal-grille { grid-template-columns: 1fr 1fr; }
	.vreal-titre { font-size: 38px; }
}

/* ---------- Écrans larges ---------- */
@media (min-width: 1000px) {
	.vreal-colonnes { grid-template-columns: 1fr 320px; align-items: start; }
	.vreal-aside { position: sticky; top: 24px; }
	.vreal-grille { grid-template-columns: repeat(3, 1fr); }

	/* Disposition « vedette » : 1re carte en grand sur 2 colonnes/2 rangées. */
	/* Vedette : les 3 cartes restent sur UNE seule ligne ; la 1re est plus large
	   pour « sortir du lot ». Hauteur d'image uniforme => ligne bien alignée. */
	.vreal-grille--vedette { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 24px; align-items: start; }
	.vreal-grille--vedette .vreal-carte--grande { grid-column: auto; grid-row: auto; }
	.vreal-grille--vedette .vreal-carte__media { aspect-ratio: auto; height: 400px; }
	.vreal-grille--vedette .vreal-carte--grande .vreal-carte__titre { font-size: 22px; }
}

/* ---------- Accessibilité : mouvements réduits ---------- */
@media (prefers-reduced-motion: reduce) {
	.vreal-carte, .vreal-btn, .vreal-filtre { transition: none; }
	.vreal-carte:hover { transform: none; }
}