/* ============================================================
   Styles des widgets CARTI Immo — direction « Parchemin ».
   S'appuie sur les variables de tokens.css.
   ============================================================ */

/* ---------- Badges de statut ---------- */
.carti-badge {
	display:inline-block; padding:6px 13px; border-radius:var(--pi-radius-pill);
	font-family:var(--pi-font-body); font-size:11px; font-weight:600;
	letter-spacing:.06em; font-style:normal;
}
.carti-badge.is-dispo   { background:var(--pi-status-dispo-bg);   color:var(--pi-status-dispo); }
.carti-badge.is-reserve { background:var(--pi-status-reserve-bg); color:var(--pi-status-reserve); }
.carti-badge.is-vendu   { background:var(--pi-status-vendu-bg);   color:var(--pi-status-vendu); }

/* ============================================================
   TABLEAU DES LOTS + PLAN SVG
   ============================================================ */
.carti-lots { font-family:var(--pi-font-body); color:var(--pi-text-1); }

.carti-lots__plan { margin-bottom:var(--sp-5); }
.carti-lots__plan svg { width:100%; height:auto; display:block; }
.carti-lots__plan [data-lot] { transition:fill-opacity .15s, stroke-width .15s; stroke:var(--pi-bg-card); stroke-width:1.5; }
.carti-lots__plan [data-lot].is-hover { fill-opacity:1 !important; stroke:var(--pi-primary); stroke-width:2.5; }

.carti-lots__filters { display:flex; gap:var(--sp-4); margin-bottom:var(--sp-3); flex-wrap:wrap; }
.carti-lots__filters label { display:flex; flex-direction:column; gap:6px; font-size:11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--pi-text-3); }
.carti-lots__filters select { font-family:var(--pi-font-body); font-size:15px; padding:9px 12px; border:var(--pi-border); border-radius:var(--pi-radius-1); background:var(--pi-bg-card); color:var(--pi-text-1); }

.carti-lots__table { border:var(--pi-border); border-radius:var(--pi-radius-1); background:var(--pi-bg-card); box-shadow:var(--pi-shadow-1); overflow:hidden; }

.carti-lots__head, .carti-lots__row {
	display:grid;
	grid-template-columns:100px 120px 90px 110px 110px 1fr 140px 120px;
	align-items:center; gap:var(--sp-3); padding:16px 24px;
}
.carti-lots__head {
	background:var(--pi-bg-2); border-bottom:var(--pi-border);
	font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--pi-text-3);
}
.carti-lots__row { border-bottom:1px solid #EFE9DD; font-size:15px; font-weight:300; transition:background .12s; }
.carti-lots__row:last-child { border-bottom:0; }
.carti-lots__row.is-hover { background:var(--pi-bg-2); }
.carti-lots__row.is-vendu { color:var(--pi-text-3); }
.carti-lots__id   { font-family:var(--pi-font-head); font-size:18px; font-weight:400; }
.carti-lots__prix { font-family:var(--pi-font-head); font-size:19px; font-weight:400; }
.carti-lots .muted { color:var(--pi-text-3); }
.carti-lots .ta-r { text-align:right; }
.carti-lots__row a { font-family:var(--pi-font-body); font-size:13px; font-weight:500; color:var(--pi-accent); }

/* Responsive : ≤ 767px → cartes empilées, plan masqué */
@media (max-width:767px) {
	.carti-lots__plan { display:none; }
	.carti-lots__head { display:none; }
	.carti-lots__row {
		grid-template-columns:1fr 1fr; gap:8px 16px;
		border:var(--pi-border); border-radius:var(--pi-radius-1);
		margin-bottom:var(--sp-3); padding:16px 18px;
	}
	.carti-lots__row .ta-r { text-align:left; }
}

/* ============================================================
   SIMULATEUR DE FINANCEMENT
   ============================================================ */
/* 2 colonnes : panneau « Vos données » (clair) à gauche, verdict + cartes de
   résultats + jauge (sur fond sombre de la section) à droite. */
.carti-sim { font-family:var(--pi-font-body); color:var(--pi-text-1);
	display:grid; grid-template-columns:minmax(300px,380px) 1fr; gap:var(--sp-5); align-items:start; }
@media (max-width:900px){ .carti-sim { grid-template-columns:1fr; } }

/* ---- Panneau gauche : Vos données ---- */
.carti-sim__panel { background:var(--pi-bg-card); border:var(--pi-border); border-radius:var(--pi-radius-1);
	box-shadow:var(--pi-shadow-1); padding:var(--sp-6); display:flex; flex-direction:column; gap:var(--sp-5); }
.carti-sim__eyebrow { font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--pi-text-3); }
.carti-sim__inputs { display:flex; flex-direction:column; gap:var(--sp-5); }
.carti-sim__field { display:grid; grid-template-columns:1fr auto; align-items:baseline; gap:6px 12px; }
.carti-sim__flabel { font-size:15px; color:var(--pi-text-1); }
.carti-sim__value { font-family:var(--pi-font-head); font-size:21px; font-weight:400; text-align:right; white-space:nowrap; }
.carti-sim__field input[type="range"] { grid-column:1 / -1; width:100%; height:22px; accent-color:var(--pi-accent); cursor:pointer; margin:2px 0 0; }
.carti-sim__scale { grid-column:1 / -1; display:flex; justify-content:space-between; gap:12px; font-size:11px; font-weight:300; color:var(--pi-text-3); }
.carti-sim__legal { margin:0; font-size:12px; line-height:1.55; color:var(--pi-text-3); }

/* ---- Colonne droite : sur le fond sombre de la section ---- */
.carti-sim__out { display:flex; flex-direction:column; gap:var(--sp-4); }

.carti-sim__verdict { display:flex; align-items:flex-start; gap:14px; padding:var(--sp-4) var(--sp-5);
	border-radius:var(--pi-radius-1); background:rgba(247,244,238,.08); }
.carti-sim__vdot { flex:0 0 auto; width:10px; height:10px; border-radius:999px; background:var(--pi-text-4); margin-top:7px; }
.carti-sim__vtitle { display:block; font-family:var(--pi-font-head); font-size:21px; font-weight:400; color:var(--pi-bg-1); }
.carti-sim__verdict p { margin:5px 0 0; font-size:14px; line-height:1.5; font-weight:300; color:rgba(247,244,238,.62); }
.carti-sim__verdict[data-level="vert"]   { background:var(--pi-status-dispo-bg); }
.carti-sim__verdict[data-level="vert"]   .carti-sim__vdot   { background:var(--pi-status-dispo); }
.carti-sim__verdict[data-level="vert"]   .carti-sim__vtitle { color:var(--pi-status-dispo); }
.carti-sim__verdict[data-level="orange"] { background:var(--pi-status-reserve-bg); }
.carti-sim__verdict[data-level="orange"] .carti-sim__vdot   { background:var(--pi-status-reserve); }
.carti-sim__verdict[data-level="orange"] .carti-sim__vtitle { color:var(--pi-status-reserve); }
.carti-sim__verdict[data-level="rouge"]  { background:#F6E3DE; }
.carti-sim__verdict[data-level="rouge"]  .carti-sim__vdot   { background:#A4402E; }
.carti-sim__verdict[data-level="rouge"]  .carti-sim__vtitle { color:#A4402E; }
.carti-sim__verdict[data-level="vert"]   p,
.carti-sim__verdict[data-level="orange"] p,
.carti-sim__verdict[data-level="rouge"]  p { color:rgba(30,36,31,.66); }

.carti-sim__cards { display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-3); }
@media (max-width:560px){ .carti-sim__cards { grid-template-columns:1fr; } }
.carti-sim__card { background:rgba(247,244,238,.04); border:1px solid rgba(247,244,238,.10);
	border-radius:var(--pi-radius-1); padding:var(--sp-4) var(--sp-5); display:flex; flex-direction:column; gap:6px; }
.carti-sim__ctitle { font-size:11px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:#D2A362; }
.carti-sim__card b { font-family:var(--pi-font-head); font-size:27px; font-weight:400; color:var(--pi-bg-1); line-height:1.1; }
.carti-sim__card small { font-size:12px; line-height:1.45; font-weight:300; color:rgba(247,244,238,.5); }

/* ---- Jauge « charge sur revenu brut » ---- */
.carti-sim__gauge { background:rgba(247,244,238,.04); border:1px solid rgba(247,244,238,.10);
	border-radius:var(--pi-radius-1); padding:var(--sp-4) var(--sp-5); display:flex; flex-direction:column; gap:12px; }
.carti-sim__gauge-head { display:flex; justify-content:space-between; align-items:baseline; font-size:15px; color:var(--pi-bg-1); }
.carti-sim__gauge-head span:last-child { font-family:var(--pi-font-head); font-size:18px; }
.carti-sim__gauge-track { position:relative; height:8px; border-radius:999px; background:rgba(247,244,238,.12); }
.carti-sim__gauge-fill { position:absolute; left:0; top:0; bottom:0; width:0; border-radius:999px; background:var(--pi-status-dispo); transition:width .2s ease; }
.carti-sim__gauge-fill[data-level="orange"] { background:var(--pi-status-reserve); }
.carti-sim__gauge-fill[data-level="rouge"]  { background:#C4553E; }
.carti-sim__gauge-mark { position:absolute; top:-3px; bottom:-3px; left:88%; width:2px; background:var(--pi-bg-1); border-radius:2px; }
.carti-sim__gauge-scale { display:flex; justify-content:space-between; font-size:11px; font-weight:300; color:rgba(247,244,238,.5); }

/* ============================================================
   CARTE
   ============================================================ */
.carti-map { position:relative; border:var(--pi-border); border-radius:var(--pi-radius-1); overflow:hidden; background:var(--pi-bg-2); }
.carti-map__consent { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--sp-3); text-align:center; padding:var(--sp-5); background:var(--pi-bg-2); z-index:2; }
.carti-map__consent p { margin:0; max-width:420px; font-family:var(--pi-font-body); font-size:15px; font-weight:300; color:var(--pi-text-2); }
/* !important : le thème/kit impose une couleur de bouton (#CC3366) via variable. */
.carti-map__load { font-family:var(--pi-font-body); font-size:14px; font-weight:600; letter-spacing:.02em; padding:12px 22px; border-radius:var(--pi-radius-pill); cursor:pointer;
	border:1px solid var(--pi-primary) !important; background:var(--pi-primary) !important; color:var(--pi-bg-1) !important; }
.carti-map__load:hover { background:var(--pi-accent) !important; border-color:var(--pi-accent) !important; color:var(--pi-bg-1) !important; }

/* Panneau « À proximité » (repeater ACF, shortcode [carti_proximite]). */
.carti-poi { width:360px; flex-shrink:0; align-self:flex-start; background:var(--pi-bg-card); border:var(--pi-border); border-radius:var(--pi-radius-1); overflow:hidden; }
@media (max-width:1024px){ .carti-poi { width:100%; } }
.carti-poi__title { display:block; font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--pi-text-3); padding:20px 24px 6px; }
.carti-poi__row { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:15px 24px; border-top:1px solid #EEE7DA; }
.carti-poi__lieu { font-size:15px; color:var(--pi-text-1); }
.carti-poi__dist { font-size:13px; font-weight:300; color:var(--pi-text-3); white-space:nowrap; }

/* Plan SVG du lot (shortcode [carti_plan_svg]) — responsive + hauteur plafonnée
   (le plan d'architecte est en portrait, on évite qu'il s'affiche trop haut). */
.carti-plan-svg { width:100%; display:flex; justify-content:center; }
.carti-plan-svg svg { max-width:100%; max-height:500px; width:auto; height:auto; display:block; margin:0 auto; }
.carti-plan-note { margin:0; text-align:center; color:var(--pi-text-2); font-size:14px; line-height:1.6; font-weight:300; }

/* Caractéristiques du hero lot : chaque « fact » en largeur de contenu (sinon
   les 3 facts s'empilent au lieu d'être en ligne). */
.carti-fact { flex:0 0 auto !important; width:auto !important; }

/* Image du hero lot : bannière à hauteur fixe (sinon elle s'étire à la hauteur
   de la colonne d'infos et devient beaucoup trop haute). */
.carti-lot-hero-img { height:500px !important; align-self:flex-start !important; }
@media (max-width:1024px){ .carti-lot-hero-img { height:320px !important; } }
.carti-map__canvas { position:absolute; inset:0; }
/* Fond swisstopo gris teinté « Parchemin » (chaud, doux). */
.carti-map__canvas .leaflet-tile-pane { filter:sepia(.14) saturate(.9) brightness(1.03) contrast(.97); }
.carti-map .leaflet-popup-content-wrapper { border-radius:var(--pi-radius-1); }
.carti-map .leaflet-popup-content { font-family:var(--pi-font-body); font-size:14px; line-height:1.5; color:var(--pi-primary); }
.carti-map .leaflet-popup-content strong { font-family:var(--pi-font-head); font-weight:400; font-size:16px; }
.carti-map .leaflet-popup-content a { color:var(--pi-accent); font-weight:500; }

/* ============================================================
   EN-TÊTE : collant partout ; transparent/superposé sur l'accueil,
   solide dès qu'on défile (body.hdr-solid via header.js).
   ============================================================ */
.elementor-location-header { position:sticky; top:0; z-index:100; }
/* Logo « Pumba Immo » toujours sur une seule ligne. */
.elementor-location-header .elementor-heading-title { white-space:nowrap; }
body.home .elementor-location-header { position:fixed; top:0; left:0; right:0; transition:background-color .25s ease; }
body.home:not(.hdr-solid) .elementor-location-header .e-con { background-color:transparent !important; border-color:transparent !important; }
body.home:not(.hdr-solid) .elementor-location-header :is(a, h1, h2, h3, h4, h5, h6, p, span, .elementor-heading-title, .elementor-item) { color:#F7F4EE !important; }
body.home:not(.hdr-solid) .elementor-location-header .elementor-menu-toggle { color:#F7F4EE !important; }
body.home:not(.hdr-solid) .elementor-location-header .elementor-button {
	background-color:transparent !important; color:#F7F4EE !important; border:1px solid rgba(247,244,238,.55) !important;
}
body.home.hdr-solid .elementor-location-header { box-shadow:0 1px 0 rgba(30,36,31,.08); }
/* Exception : le menu déroulant mobile a un fond clair -> items en encre (lisibles) même sur l'accueil transparent. */
body.home:not(.hdr-solid) .elementor-location-header .elementor-nav-menu--dropdown .elementor-item,
body.home:not(.hdr-solid) .elementor-location-header .elementor-nav-menu--dropdown a { color:#1E241F !important; }

/* En-tête mobile : masquer le CTA + garder logo (gauche) et burger (droite) sur une ligne. */
@media (max-width:1024px) {
	.elementor-location-header .elementor-widget-button { display:none !important; }
	/* Conteneur nav en absolu à droite : logo seul dans le flux (pas de wrap),
	   le widget garde sa largeur native -> le menu déroulant fonctionne. */
	.elementor-location-header .e-con.e-con-boxed { position:relative !important; }
	.carti-hdr-nav { position:absolute !important; top:0; bottom:0; right:0; width:auto !important;
		display:flex !important; align-items:center !important; }
	.carti-hdr-nav .elementor-menu-toggle { margin-left:auto; }
}

/* ============================================================
   COLONNES FLEX — seule rustine assumée.
   Le "Grow" natif d'Elementor = flex:1 0 auto (shrink 0, basis auto) qui
   s'empile avec une gouttière ; le natif n'expose pas flex-basis:0.
   carti-grow = l'idiome flexbox propre pour des colonnes qui se partagent
   l'espace (et s'empilent en mobile).
   ============================================================ */
.carti-grow { flex:1 1 0 !important; min-width:0 !important; width:auto !important; }
@media (max-width:1024px) {
	.carti-grow { flex-basis:100% !important; }
}

/* ============================================================
   GRILLE DE PROMOTIONS (Loop Grid + Carte de promotion)
   La carte NE DOIT PAS avoir de hauteur en % : dans un item de grille
   étiré (align-items:stretch), height:% crée une dépendance cyclique de
   hauteur -> croissance infinie (cartes « très hautes », image décalée),
   surtout en 1 colonne sur mobile. On force donc :
   - l'item de grille en hauteur de contenu (pas d'étirement) ;
   - la carte en hauteur automatique (neutralise tout height:% résiduel).
   ============================================================ */
.elementor-widget-loop-grid .e-loop-item { align-self:start; }
.elementor-widget-loop-grid .e-loop-item > .e-con {
	height:auto !important; position:relative;
	transition:box-shadow .2s ease, transform .2s ease;
}
/* Elementor met position:relative par défaut sur chaque .e-con : on remet les
   conteneurs INTERNES de la carte en static pour que le lien étiré (::after
   inset:0) se cale sur la CARTE entière et pas sur le seul pied de carte. */
.elementor-widget-loop-grid .e-loop-item > .e-con .e-con { position:static; }
.elementor-widget-loop-grid .e-loop-item > .e-con:hover {
	box-shadow:0 14px 34px rgba(30,36,31,.13); transform:translateY(-2px);
}
/* Carte entièrement cliquable : le CTA « Découvrir » (vrai lien post-url) est
   étiré sur toute la carte via ::after. Le lien de conteneur ne se rendant pas
   dans une Loop Grid, c'est la méthode « stretched link » fiable. */
.carti-card-cta .elementor-heading-title { white-space:nowrap; }
/* Elementor met .elementor-widget{position:relative} : on remet le widget CTA
   en static pour que l'ancre du lien étiré se réfère à la CARTE (seule relative). */
.carti-card-cta.elementor-widget { position:static !important; }
.carti-card-cta a { position:static; }
.carti-card-cta a::after { content:""; position:absolute; inset:0; z-index:2; }

/* ============================================================
   FORMULAIRES — sur mobile, chaque champ en pleine largeur
   (les champs à 50% restaient à mi-largeur, ragged, sous 767px).
   ============================================================ */
@media (max-width:767px) {
	.elementor-form .elementor-field-group { width:100% !important; flex-basis:100% !important; max-width:100% !important; }
}