/* Centris Sync : éléments de page.
 * Tout passe par les variables globales Divi 5 quand elles existent (couleurs --gcid-…, nombres --gvid-…,
 * polices --et_global_…) ; les valeurs après la virgule ne servent que sur un site qui ne les définit pas. */
.cs-cartes, .cs-mosaic, .cs-faits, .cs-checks, .cs-depenses, .cs-map, .cs-calc, .cs-btn {
	--cs-primary: var(--gcid-couleur-primaire, #1f3f77);
	--cs-primary-hover: var(--gcid-couleur-primaire-survol, #172f59);
	--cs-soft: var(--gcid-couleur-primaire-doux, #e9ecf1);
	--cs-surface: var(--gcid-surface-douce, #eef0f4);
	--cs-card: var(--gcid-surface-carte, #fff);
	--cs-text: var(--gcid-texte-principal, #181c27);
	--cs-muted: var(--gcid-texte-secondaire, #5c6071);
	--cs-on-primary: var(--gcid-texte-sur-primaire, #fff);
	--cs-border: var(--gcid-bordure-defaut, #cbced9);
	--cs-field-border: var(--gcid-bordure-champ, #8a8fa0);
	--cs-titres: var(--et_global_heading_font, Georgia), Georgia, serif;
	--cs-corps: var(--et_global_body_font, system-ui), system-ui, sans-serif;
	--cs-h2: var(--gvid-taille-h2, 44px);
	--cs-h3: var(--gvid-taille-h3, 30px);
	--cs-h4: var(--gvid-taille-h4, 24px);
	--cs-corps-taille: var(--gvid-taille-corps, 18px);
	--cs-bouton: var(--gvid-taille-bouton, 17px);
	--cs-petit: var(--gvid-taille-petit, 15px);
	--cs-xs: var(--gvid-espace-xs, 8px);
	--cs-s: var(--gvid-espace-s, 12px);
	--cs-m: var(--gvid-espace-m, 16px);
	--cs-l: var(--gvid-espace-l, 28px);
	--cs-xl: var(--gvid-espace-xl, 40px);
	--cs-2xl: var(--gvid-espace-2xl, 64px);
	--cs-rayon: var(--gvid-rayon-s, 2px);
	--cs-rayon-m: var(--gvid-rayon-m, 4px);
	--cs-rayon-bouton: var(--gvid-rayon-bouton, 4px);
	font-family: var(--cs-corps);
	color: var(--cs-text);
}
/* Étiquette : petites capitales espacées, comme le preset « Étiquette » du site. */
.cs-card__type, .cs-faits span { font: 600 var(--cs-petit)/1.4 var(--cs-corps); letter-spacing: .06em; text-transform: uppercase; }

/* Boutons */
.cs-btn { display: inline-flex; align-items: center; justify-content: center; padding: var(--cs-s) var(--cs-l); border: 2px solid var(--cs-primary); border-radius: var(--cs-rayon-bouton); background: var(--cs-primary); color: var(--cs-on-primary) !important; font: 600 var(--cs-bouton)/1.5 var(--cs-corps); text-decoration: none; cursor: pointer; transition: background .2s, border-color .2s, color .2s; }
.cs-btn:hover { background: var(--cs-primary-hover); border-color: var(--cs-primary-hover); }
.cs-btn--ghost { background: transparent; color: var(--cs-primary) !important; }
.cs-btn--ghost:hover { background: var(--cs-primary); color: var(--cs-on-primary) !important; }
.cs-btn:focus-visible, .cs-tabs button:focus-visible, .cs-card:focus-visible, .cs-mosaic a:focus-visible { outline: 2px solid var(--gcid-couleur-focus, var(--cs-primary)); outline-offset: 2px; }

/* Onglets : « À acheter / À louer » en titres, l'actif en texte principal */
.cs-leads { margin-bottom: var(--cs-m); }
.cs-lead[hidden], .cs-panel[hidden] { display: none; }
.cs-lead { max-width: 640px; margin: 0 auto; text-align: center; color: var(--cs-muted); font-size: var(--cs-corps-taille); line-height: 1.6; }
.cs-tabs { display: flex; justify-content: center; align-items: baseline; gap: var(--cs-m); margin: 0 auto var(--gvid-espace-3xl, 80px); }
.cs-tabs button { padding: 0; border: 0; background: none; color: var(--cs-muted); font: 600 var(--cs-h3)/1.25 var(--cs-titres); letter-spacing: -.5px; cursor: pointer; }
.cs-tabs button + button::before { content: "/" / ""; margin-right: var(--cs-m); color: var(--cs-muted); }
.cs-tabs button.is-active { color: var(--cs-text); }

/* Cartes : photo à plat, prix et type sur une ligne, numéro dessous */
.cs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--cs-2xl); }
.cs-card { display: flex; flex-direction: column; gap: var(--cs-s); color: inherit; text-decoration: none; }
.cs-card__img { display: block; height: 300px; overflow: hidden; border-radius: var(--cs-rayon); background: var(--cs-surface); }
.cs-card__img img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
a.cs-card:hover .cs-card__img img { transform: scale(1.03); }
.cs-card__legend { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--cs-s); }
.cs-card__price { font: 600 var(--cs-h3)/1.25 var(--cs-titres); letter-spacing: -.5px; color: var(--cs-text); }
.cs-card__price small { margin-left: 4px; font: 400 var(--cs-petit) var(--cs-corps); color: var(--cs-muted); letter-spacing: 0; }
.cs-card__type { color: var(--cs-primary); text-align: right; }
.cs-card__note { font-size: var(--cs-petit); line-height: 1.5; color: var(--cs-muted); }
.cs-card--appel { justify-content: center; gap: var(--cs-m); padding: var(--cs-xl); border-radius: var(--cs-rayon); background: var(--cs-soft); }
.cs-card--appel h3 { margin: 0; padding: 0; font: 600 var(--cs-h4)/1.3 var(--cs-titres) !important; letter-spacing: 0 !important; color: var(--cs-text) !important; }
.cs-card--appel p { margin: 0; padding: 0; color: var(--cs-text); font-size: var(--cs-corps-taille); line-height: 1.6; }
.cs-card--appel .cs-btn { align-self: flex-start; }
.cs-empty { text-align: center; color: var(--cs-muted); }

/* Galerie : grille de 2 × 2, clic = diaporama */
.cs-mosaic { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: var(--cs-l); }
.cs-mosaic--single { grid-template-columns: 1fr; }
.cs-mosaic__side { display: contents; }
.cs-mosaic__item { display: block; height: 360px; overflow: hidden; border-radius: var(--cs-rayon); background: var(--cs-surface); }
.cs-mosaic img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cs-mosaic__hidden { display: none; }
.cs-mosaic__more { position: absolute; right: var(--cs-m); bottom: var(--cs-m); padding: 6px 14px; border-radius: var(--cs-rayon-bouton); background: var(--cs-card); color: var(--cs-text); font: 600 var(--cs-petit) var(--cs-corps); pointer-events: none; }
.cs-lightbox { position: fixed; inset: 0; z-index: 999999; display: flex; align-items: center; justify-content: center; background: rgba(24, 28, 39, .94); }
.cs-lightbox img { max-width: 92vw; max-height: 88vh; border-radius: var(--gvid-rayon-s, 2px); }
.cs-lightbox button { position: absolute; width: 48px; height: 48px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .15); color: #fff; font-size: 28px; cursor: pointer; }
.cs-lightbox .cs-lb-prev { left: 24px; } .cs-lightbox .cs-lb-next { right: 24px; } .cs-lightbox .cs-lb-close { top: 24px; right: 24px; }

/* Faits clés : grand chiffre, étiquette dessous, en colonnes égales, entre deux traits (rien du tout si aucun fait) */
.cs-faits { display: flex; gap: var(--cs-l); border-top: 1px solid var(--cs-border); border-bottom: 1px solid var(--cs-border); }
.cs-faits li { display: flex; flex: 1 1 0; flex-direction: column; gap: var(--cs-xs); }
.cs-faits strong { font: 700 var(--cs-h2)/1.15 var(--cs-titres); letter-spacing: -1px; color: var(--cs-text); white-space: nowrap; }
.cs-faits span { color: var(--cs-muted); }

/* Caractéristiques : une colonne, coche à gauche */
.cs-checks { display: flex; flex-direction: column; gap: var(--cs-s); }
.cs-checks li { position: relative; padding-left: 36px; font-size: var(--cs-corps-taille); line-height: 1.6; color: var(--cs-text); }
.cs-checks li::before { content: ""; position: absolute; left: 0; top: 2px; width: 24px; height: 24px; background: var(--cs-primary); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat; }

/* Dépenses */
.cs-depenses { display: flex; flex-wrap: wrap; gap: var(--cs-s); }
.cs-depense { display: flex; flex: 1 1 180px; flex-direction: column; gap: 4px; padding: var(--cs-m); border-radius: var(--cs-rayon-m); background: var(--cs-surface); }
.cs-depense strong { font: 600 var(--cs-h4)/1.3 var(--cs-titres); color: var(--cs-text); }
.cs-depense small { font: inherit; }
.cs-depense span { font-size: var(--cs-petit); line-height: 1.5; color: var(--cs-muted); }

/* Description et addenda */
.cs-description p { margin: 0 0 var(--cs-m); font-size: var(--cs-corps-taille); line-height: 1.6; color: var(--cs-muted); }

/* Carte routière */
.cs-map iframe { display: block; width: 100%; border: 0; border-radius: var(--cs-rayon); background: var(--cs-surface); }
.cs-map__consent { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--cs-m); padding: var(--cs-l); border-radius: var(--cs-rayon); background: var(--cs-surface); text-align: center; color: var(--cs-muted); font-size: var(--cs-petit); }
.cs-map__consent p { margin: 0; padding: 0; }
.cs-map a { display: inline-block; margin-top: var(--cs-m); font-size: var(--cs-petit); color: var(--cs-muted); }

/* Calculatrice */
.cs-calc { display: flex; flex-direction: column; gap: var(--cs-m); padding: var(--cs-l); border: 1px solid var(--cs-border); border-radius: var(--cs-rayon); background: var(--cs-card); }
.cs-calc h3 { margin: 0; padding: 0; font: 600 var(--cs-h4)/1.3 var(--cs-titres) !important; letter-spacing: 0 !important; color: var(--cs-text) !important; }
.cs-field { display: flex; flex-direction: column; gap: var(--cs-xs); font-size: var(--cs-petit); line-height: 1.5; color: var(--cs-text); }
.cs-field input { height: 48px; padding: var(--cs-s) var(--cs-m); border: 1px solid var(--cs-field-border); border-radius: var(--cs-rayon); background: var(--cs-card); color: var(--cs-text); font: 400 var(--cs-corps-taille) var(--cs-corps); }
.cs-calc .cs-btn { width: 100%; }
.cs-calc__res { display: flex; flex-direction: column; gap: var(--cs-xs); margin: 0; }
.cs-calc__res div { display: flex; justify-content: space-between; gap: var(--cs-m); font-size: var(--cs-petit); line-height: 1.5; color: var(--cs-muted); }
.cs-calc__res dt { font-weight: 400; }
.cs-calc__res dd { margin: 0; font: 600 var(--cs-bouton)/1.5 var(--cs-corps); color: var(--cs-text); }

@media (max-width: 980px) {
	.cs-grid { grid-template-columns: repeat(2, 1fr); gap: var(--cs-l); }
	.cs-faits { flex-wrap: wrap; }
	.cs-faits li { flex: 1 1 40%; }
}
@media (max-width: 640px) {
	.cs-grid, .cs-mosaic { grid-template-columns: 1fr; }
	.cs-card__img { height: 240px; }
	.cs-mosaic__item { height: 240px; }
	.cs-tabs button { font-size: var(--cs-h4); }
}

/* Divi ajoute puces, marges et styles de lien dans ses modules Texte (et ses presets de titres l'emportent sur les h3
 * internes, d'où les !important ci-dessus) : on les neutralise ici seulement. */
.cs-faits, .cs-checks { list-style: none !important; margin: 0 !important; padding: 0 !important; }
.cs-faits li, .cs-checks li { margin: 0; list-style: none !important; }
.cs-faits li::marker, .cs-checks li::marker { content: none; }
.cs-faits { margin-top: var(--gvid-espace-3xl, 80px) !important; padding: var(--cs-xl) 0 !important; }
.cs-faits li { padding: 0 !important; }
.cs-checks li { padding: 0 0 0 36px !important; }
.et_pb_module a.cs-btn, a.cs-btn { display: inline-flex; text-decoration: none; }
.et_pb_module a.cs-card, a.cs-card { color: inherit; text-decoration: none; }