/* ==========================================================
   RESULTS-THEME — Design tokens + base typography/colors
   Phase 4: independent from WordPress (ported from Elementor Kit)
   (NO layout/grid here)
   ========================================================== */

:root{
  /* Brand (from Elementor Kit 11) */
  --brand-primary: #8C6A3F;  /* --e-global-color-primary */
  --brand-black:   #111111;  /* --e-global-color-3ff14f0 */
  --brand-text:    #7A7A7A;  /* --e-global-color-text */
  --brand-muted:   rgba(17,17,17,.70);

  /* Surfaces / borders */
  --surface: #ffffff;
  --surface-2: #fafafa;
  --border-subtle: rgba(0,0,0,.08);

  /* Typography */
  --font-body: "Poppins", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --font-head: "Montserrat", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

  /* Radius (soft, WP-ish) */
  --radius: 10px;
}

/* Base skin */
body.results-app{
  font-family: var(--font-body);
  color: var(--brand-black);
  background: var(--surface);
}

/* Headings */
body.results-app h1,
body.results-app h2,
body.results-app h3,
body.results-app h4{
  font-family: var(--font-head);
  color: var(--brand-black);
}

/* Links */
body.results-app a{
  color: var(--brand-primary);
  text-decoration: none;
}
body.results-app a:hover{
  text-decoration: underline;
}

/* Header/Footer visual skin (NO sizing here) */
.site-header{
  background: var(--surface);
  border-bottom: 1px solid var(--border-subtle);
}
.site-footer{
  background: var(--surface);
  border-top: 1px solid var(--border-subtle);
  padding: 40px 22px; /* footer taller */
}

/* Small helpers */
.muted{ color: var(--brand-muted); }

/* Make images behave */
img{ max-width: 100%; height: auto; }
/* Optional: subtle card baseline without affecting grid */
.blk{
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
}

/* Accordion body must NOT look like a second card */
.acc__body{
  background: var(--surface);
  border: 0;
  border-radius: 0;
  box-sizing: border-box;
  margin: 0;
}

/* ==========================================================
   PHASE 4 — BLOCK 6 MAP TOKENS (NO layout)
   Goal: remove hardcoded colors/styles from block_6_a_map.html
   ========================================================== */

:root{
  /* Map surfaces */
  --map-surface: #f2f2f2;

  /* Map text */
  --map-text-muted: #666666;
  --map-text-strong: #111111;

  /* Map borders */
  --map-border-dashed: #d7d7d7;

  /* Pins */
  --pin-subject: #8b6b3f; /* aligns with brand primary family */
  --pin-sold:    #1f5fbf;
  --pin-sale:    #d94a3a;

  /* Pin outline */
  --pin-outline: #ffffff;
}

/* Block 6 map container skin (includes height for Leaflet render) */
.map-b6{
  background: var(--map-surface);
  border-radius: 16px;
  overflow: hidden;
  height: 520px;
  margin: 0 16px 16px 16px;
}

/* “Card” dashed variant used in block 6 */
.b6-card--dashed{
  border: 1px dashed var(--map-border-dashed);
}

/* Map fallback/empty message */
.map-b6__empty{
  padding: 16px;
  color: var(--map-text-muted);
  font-size: 13px;
}

/* Pins colors */
.pin-dot--subject{ background: var(--pin-subject); }
.pin-dot--sold{    background: var(--pin-sold); }
.pin-dot--sale{    background: var(--pin-sale); }

/* Pin dot (legend) */
.pin-dot{
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: inline-block;
  border: 2px solid var(--pin-outline);
}

/* Popup content */
.b6p-title{ font-weight:700; font-size:14px; margin:0 0 8px 0; }
.b6p-line{ display:flex; justify-content:space-between; gap:10px; font-size:13px; margin:4px 0; }
.b6p-link{ margin-top:8px; font-size:13px; }
.b6p-link a{ text-decoration:underline; }
/* Popup key/value */
.b6p-k{ color: var(--map-text-muted); white-space: nowrap; }
.b6p-v{ color: var(--map-text-strong); text-align: right; }



/* ==========================================================
   PHASE 4 — BLOCK 6 HEADER/LEGEND CLASSES (NO layout)
   Goal: replace inline styles in B6A/B6B header + legend + small spacing
   ========================================================== */

.b6-map-head{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  padding: 14px 16px 0 16px;
}

.b6-map-title{
  margin: 0 0 6px 0;
}

.b6-map-sub{
  font-size: 13px;
  line-height: 1.35;
}

.b6-map-legend{
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.b6-legend-item{
  display: flex;
  align-items: center;
  gap: 8px;
}

.b6-legend-label{
  font-size: 13px;
}

.b6-spacer{
  height: 12px;
}

.b6-muted-pad{
  padding: 18px;
}

/* ==========================================================
   PHASE 4 — CANON BLOCK TITLES
   Goal: unify all block titles (B5/B6/B7/...) with same look
   ========================================================== */

.blk__title{
  font-weight: 600;
  font-size: 18px;
  line-height: 1.2;
  margin: 0 0 12px 0;
  letter-spacing: -0.2px;
  color: #8C6A3F;
}


/* ==========================================================
   PHASE 4 — LEFT COLUMN ACCORDIONS (Blocks 1/2/3)
   Goal: make accordion headers look like canon titles (#8C6A3F)
   ========================================================== */

.blk-accordion .acc{
  border: 1px solid #e6e6e6;
  border-radius: 16px;
  background: #fff;
  overflow: hidden;
}

.acc__summary{
  list-style: none;
  cursor: pointer;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.acc__summary::-webkit-details-marker{ display:none; }

.acc__title{
  font-weight: 600;
  font-size: 16px;
  line-height: 1.2;
  color: #8C6A3F;
  letter-spacing: -0.2px;
}

.acc__meta{
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.acc__chev{
  color: #8C6A3F;
  transition: transform .18s ease;
}

details[open] .acc__chev{ transform: rotate(180deg); }

.acc__body{
  padding: 0 16px 16px 16px;
  border-top: 1px solid #f0f0f0;
}

/* ==========================================================
   PHASE 4 — IVEE HOME (Block 4) title tone
   ========================================================== */

.ivee-home__brand{
  font-weight: 600;
  color: #8C6A3F;
  letter-spacing: -0.2px;
}


/* ==========================================================
   PHASE 4 — TYPOGRAPHY SYSTEM (CANON)
   ========================================================== */

/* Base text */
.results-app,
.results-app body {
  font-family: 'Poppins', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  color: #7A7A7A;
  font-weight: 400;
}

/* Generic text elements */
.results-app p,
.results-app li,
.results-app td,
.results-app th,
.results-app .muted,
.results-app .acc__body {
  color: #7A7A7A;
  font-weight: 400;
}

/* Secondary / structural text */
.blk__title,
.acc__title,
.result-hero__address,
.result-hero__conf-label {
  font-family: 'Poppins', sans-serif;
  color: #8C6A3F;
  font-weight: 600;
}

/* Emphasis / values */
.result-hero__conf-val,
.result-hero__nego-val,
strong {
  color: #111;
  font-weight: 600;
}


/* ==========================================================
   PHASE 4 — LEFT ACCORDIONS: subtitles bold (B1/B2/B3)
   B1: .kv__k
   B2: .market-stat__label
   B3: .diag-verdict__k
   ========================================================== */
.kv__k,
.market-stat__label,
.diag-verdict__k{
  font-weight: 600;
}

/* ==========================================================
   PHASE 4 — B3a: diagnostics history subtitle (bold)
   ========================================================== */
.diag-history__title{
  font-weight: 600;
}

/* ==========================================================
   PHASE 4 — BLOC 2 (DVF): modal + table + gauge normalization
   ========================================================== */

/* Modal title = like accordion section titles (Poppins / #7A7A7A / bold) */
.modal__title{
  font-family: 'Poppins', sans-serif;
  color: #7A7A7A;
  font-weight: 600;
  font-size: 16px;
  line-height: 1.2;
}

/* Modal layout: avoid “bordélique” overflow, keep it readable */
.modal__panel{
  width: min(980px, calc(100vw - 32px));
}
.modal__body{
  max-height: calc(100vh - 140px);
  overflow: auto;
}

/* Table normalization */
.tbl{
  width: 100%;
  border-collapse: collapse;
  font-family: 'Poppins', sans-serif;
  color: #7A7A7A;
  font-size: 13px;
  line-height: 1.35;
}
.tbl th{
  text-align: left;
  font-weight: 600;
  color: #7A7A7A;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(0,0,0,0.08);
  white-space: nowrap;
}
.tbl td{
  padding: 10px 12px;
  border-bottom: 1px solid rgba(0,0,0,0.06);
  vertical-align: top;
}
.tbl a{
  color: #8C6A3F;
  font-weight: 500;
  text-decoration: none;
}
.tbl a:hover{
  text-decoration: underline;
}

/* Gauge: lower it a bit and make it thicker (x2) + pin more visible */
.gauge{
  margin-top: 10px; /* “baisser un peu” sous le sous-titre */
}
.gauge__bar{
  height: 16px;     /* x2 thickness (was ~8px visually) */
  border-radius: 999px;
}
.gauge__seg{
  height: 100%;
}
.gauge__pin{
  top: -10px;       /* keep pin readable above thicker bar */
}
.gauge__pin-dot{
  width: 12px;
  height: 12px;
  border: 2px solid #ffffff;
  box-shadow: 0 1px 4px rgba(0,0,0,0.25);
}

/* ==========================================================
   PHASE 4 — GAUGE: make the "bien" pin always visible
   ========================================================== */
.gauge__bar{
  position: relative;   /* anchor for absolute pin */
  overflow: visible;    /* allow pin to sit above bar */
}

.gauge__seg{
  position: relative;
  z-index: 1;           /* segments under pin */
}

.gauge__pin{
  position: absolute;
  z-index: 5;           /* pin above everything */
  top: -12px;           /* sit clearly above thicker bar */
  transform: translateX(-50%); /* center on left:% */
  pointer-events: none;
}

.gauge__pin-dot{
  background: #111;     /* visible on orange/red/yellow */
  border: 2px solid #fff;
  width: 12px;
  height: 12px;
  border-radius: 999px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
}

/* ==========================================================
   PHASE 4 — GAUGE: add headroom above bar + move bar down
   ========================================================== */
.gauge{
  margin-top: 10px; /* push the whole gauge block down */
}

.gauge__bar{
  margin-top: 12px; /* extra space between subtitle and bar */
  padding-top: 16px; /* reserve vertical space for the pin ABOVE the bar */
}

.gauge__pin{
  top: 2px; /* place pin inside reserved padding area (clearly visible) */
}

/* ==========================================================
   PHASE 4 — B2 CANON (Positionnement sur le marché)
   Target: old screenshot look (pill gauge + centered button + brown labels)
   ========================================================== */

#blk-2-market .market-top{
  display: block;
  margin: 0 0 12px 0;
}

#blk-2-market .market-stat__label{
  font-weight: 600;
}

#blk-2-market .market-actions{
  display: flex;
  justify-content: center;
  margin: 10px 0 6px 0;
}

#blk-2-market .market-actions .btn{
  padding: 10px 18px;
  border-radius: 12px;
  font-family: 'Poppins', sans-serif;
  border: 2px solid #8C6A3F;
  color: #8C6A3F;
  background: transparent;
}

#blk-2-market .market-gauge__row{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-top: 10px;
}

#blk-2-market .market-gauge__k{
  font-weight: 600;
}

#blk-2-market .market-gauge__v{
  font-weight: 600;
}

#blk-2-market .market-gauge__sub{
  margin-top: 6px;
  margin-bottom: 10px;
}

/* Gauge: thick pill with 4 colored segments */
#blk-2-market .gauge{
  margin-top: 8px;
}

#blk-2-market .gauge__bar{
  position: relative;
  display: flex;
  gap: 12px;
  height: 14px;           /* thick like screenshot */
  margin: 0 0 14px 0;     /* space for pin above */
}

#blk-2-market .gauge__seg{
  flex: 1 1 0;
  border-radius: 999px;
}

/* Segment colors (as in screenshot) */
#blk-2-market .gauge__seg--s1{ background: #1E8E3E; }
#blk-2-market .gauge__seg--s2{ background: #E1C44A; }
#blk-2-market .gauge__seg--s3{ background: #E48A1A; }
#blk-2-market .gauge__seg--s4{ background: #D24A43; }

/* Pin: brown dot above the bar */
#blk-2-market .gauge__pin{
  position: absolute;
  top: -12px;            /* dot above bar */
  transform: translateX(-50%);
  z-index: 5;
}

#blk-2-market .gauge__pin-dot{
  width: 16px;
  height: 26px !important;
  border-radius: 50%;
  background: #8C6A3F;
  border: 5px solid #fff !important; /* crisp like screenshot */
  box-shadow: 0 1px 0 rgba(0,0,0,.12);
  display: block;
}

/* Labels: brown, aligned left/center/right */
#blk-2-market .gauge__labels{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
}

#blk-2-market .gauge__lab-k{
  font-family: 'Poppins', sans-serif;
  color: #8C6A3F;
  font-weight: 600;
}

#blk-2-market .gauge__lab-v{
  margin-top: 2px;
}

#blk-2-market .gauge__lab--center{ text-align: center; }
#blk-2-market .gauge__lab--right{ text-align: right; }


/* ==========================================================
   BLOC 2 — Gauge geometry FIX (visual match old screenshots)
   - Lower the gauge
   - Increase thickness
   - Lift the pin above the bar
   ========================================================== */

/* Push gauge down to create space above */
#blk-2-market .gauge {
  margin-top: 14px;
}

/* Thicker bar */
#blk-2-market .gauge__bar {
  height: 14px;
  border-radius: 7px;
  position: relative;
}

/* Segments must fill the bar height */
#blk-2-market .gauge__seg {
  height: 100%;
  border-radius: 7px;
}

/* Pin clearly above the bar */
#blk-2-market .gauge__pin {
  top: -10px;
}

/* Bigger pin dot for visibility */
#blk-2-market .gauge__pin-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #8C6A3F;
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,0.25);
}

/* ==========================================================
   PHASE 4 — BLOC 2 (Market) — GAUGE CANON OVERRIDE
   Goal: restore the old screenshot look (4 colored segments + visible pin)
   Why: results-theme.css had conflicting flex/gap rules hiding segments
   ========================================================== */

#blk-2-market .gauge{
  margin-top: 14px; /* more air above pin like your screenshot */
}

#blk-2-market .gauge__bar{
  position: relative;
  height: 14px;                 /* x2 thickness vs old 10px */
  border-radius: 999px;
  overflow: hidden;
  background: #eee;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;                       /* NO gaps between segments */
  margin: 0 0 14px 0;           /* room for labels */
}

/* segments must be visible and fill their cell */
#blk-2-market .gauge__seg{
  display: block;
  height: 100%;
  border-radius: 0;             /* avoid "pills" per segment -> continuous bar */
}

/* colors */
#blk-2-market .gauge__seg--s1{ background: #1E8E3E; }
#blk-2-market .gauge__seg--s2{ background: #E1C44A; }
#blk-2-market .gauge__seg--s3{ background: #E48A1A; }
#blk-2-market .gauge__seg--s4{ background: #D24A43; }

/* pin clearly above bar */
#blk-2-market .gauge__pin{
  position: absolute;
  top: -12px;
  transform: translateX(-50%);
  z-index: 5;
}

#blk-2-market .gauge__pin-dot{
  display: block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #8C6A3F;
  border: 3px solid #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,0.18);
}

/* ==========================================================
   PHASE 4 — B2 GAUGE FORCE (pills + visible pin)
   - Fix: pin was clipped by overflow:hidden
   - Fix: segments sometimes look grey -> force colors
   Visual target: old screenshot (4 rounded pills + gap + dot above)
   ========================================================== */

#blk-2-market .gauge{
  margin-top: 14px;
}

/* bar = flex container, NO clipping */
#blk-2-market .gauge__bar{
  position: relative !important;
  display: flex !important;
  gap: 12px !important;
  height: 14px !important;          /* x2 thickness */
  background: transparent !important;
  overflow: visible !important;      /* IMPORTANT: allow dot above */
  border-radius: 0 !important;       /* pills are per segment */
}

/* each segment = pill */
#blk-2-market .gauge__seg{
  flex: 1 1 0 !important;
  height: 14px !important;
  border-radius: 999px !important;
  display: block !important;
}

/* force colors (in case another rule zeroes them) */
#blk-2-market .gauge__seg--s1{ background: #1E8E3E !important; }
#blk-2-market .gauge__seg--s2{ background: #E1C44A !important; }
#blk-2-market .gauge__seg--s3{ background: #E48A1A !important; }
#blk-2-market .gauge__seg--s4{ background: #D24A43 !important; }

/* pin dot clearly above */
#blk-2-market .gauge__pin{
  position: absolute !important;
  top: -16px !important;             /* more air above */
  transform: translateX(-50%) !important;
  z-index: 10 !important;
  pointer-events: none;
}

#blk-2-market .gauge__pin-dot{
  width: 16px !important;
  height: 16px !important;
  border-radius: 50% !important;
  background: #8C6A3F !important;
  border: 3px solid #fff !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.18) !important;
  display: block !important;
}

/* ==========================================================
   PHASE 4 — B2 SPACING + BUTTON HOVER (inverse)
   ========================================================== */

/* AERATION inside the accordion body */
#blk-2-market .market-top{
  margin-bottom: 14px;
}

#blk-2-market .market-stat__label{
  margin-bottom: 6px;
}

#blk-2-market .market-stat__value{
  margin-bottom: 6px;
}

#blk-2-market .market-actions{
  margin-top: 10px;
}

/* More breathing space around the gauge block */
#blk-2-market .market-gauge{
  margin-top: 14px;
}

#blk-2-market .market-gauge__row{
  margin-bottom: 10px;
}

#blk-2-market .market-gauge__sub{
  margin: 6px 0 14px 0;
}

/* Button hover: invert colors (brown fill, white text) */
#blk-2-market .btn.btn-outline{
  border-color: #8C6A3F;
  color: #8C6A3F;
  background: transparent;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

#blk-2-market .btn.btn-outline:hover{
  background: #8C6A3F;
  color: #fff;
  border-color: #8C6A3F;
}

/* ==========================================================
   PHASE 4 — BLOC 2 (Market) — SPACING TUNE
   Goal:
   - more air at top of inner card
   - more air around the button
   - more gap between "Prix au m² sur le secteur" and the pin
   - more air at bottom of inner card
   ========================================================== */

/* inner accordion panel padding */
#blk-2-market .acc__body{
  padding-top: 14px;
  padding-bottom: 24px !important;
}

/* keep the first stat away from the top border */
#blk-2-market .market-top{
  margin-top: 6px;
}

/* center + give breathing room to the button */
#blk-2-market .market-actions{
  margin: 12px 0 18px 0;
  display: flex;
  justify-content: center;
}

/* space around the gauge section */
#blk-2-market .market-gauge{
  margin-top: 14px;
}

/* IMPORTANT: add space between the subtitle and the pin/dot */
#blk-2-market .market-gauge__sub{
  margin: 8px 0 20px 0;
}

/* ==========================================================
   PHASE 4 — BLOC 2 (Market) — FINE PIN SPACING
   - More space under subtitle
   - Pin closer to the gauge
   ========================================================== */

/* more air under "Prix au m² sur le secteur" */
#blk-2-market .market-gauge__sub{
  margin-bottom: 26px; /* was too tight */
}

/* pull the pin DOWN closer to the gauge */
#blk-2-market .gauge__pin{
  top: -6px; /* closer to the bar */
}


/* ==========================================================
   BLOC 2 — SPACING + PIN (CLEAN)
   - NO extra space at top of accordion body
   - More space above/below the button
   - More space between subtitle and pin
   - Pin closer to gauge + perfectly round + bigger
   ========================================================== */

/* Do NOT create empty space above the first line */
#blk-2-market .acc__body{ padding-top: 0 !important; }

/* Button breathing room (above + below) */
#blk-2-market .market-actions{
  margin: 18px 0 22px 0 !important;
  display: flex;
  justify-content: center;
}

/* Space between "Prix au m² sur le secteur" and the pin area */
#blk-2-market .market-gauge__sub{
  margin: 8px 0 22px 0 !important;
}

/* Keep the gauge a bit lower so there is air above, but not crazy */
#blk-2-market .gauge{
  margin-top: 10px !important;
}

/* Pin: closer to the bar */
#blk-2-market .gauge__pin{
  top: -8px !important;
  transform: translateX(-50%) !important;
}

/* Pin dot: FORCE perfect circle (fix "galette") + bigger */
#blk-2-market .gauge__pin-dot{
  width: 20px !important;
  height: 20px !important;
  aspect-ratio: 1 / 1 !important;
  border-radius: 999px !important;
  display: block !important;
  line-height: 0 !important;
  transform: none !important;
}

/* ==========================================================
   PHASE 4 — GLOBAL LAYOUT: vertical spacing between blocks
   Goal: add breathing room between blocks in LEFT & RIGHT columns
   Safe: does NOT change internal block content
   ========================================================== */

/* Generic spacing for result blocks (cards/accordions) */
.results-app .blk,
.results-app .acc{
  margin-bottom: 18px;
}

/* Slightly larger gap after accordions */
.results-app .acc{
  margin-bottom: 22px;
}

/* ==========================================================
   PHASE 4 — ACCORDION: hide body when closed (prevents subframe spill)
   ========================================================== */
details.acc > .acc__body{
  display: none !important;
}
details.acc[open] > .acc__body{
  display: block !important;
}

/* ==========================================================
   PHASE 4 — ACCORDIONS: remove double-card (blk + acc)
   Reason: section.blk.blk-accordion was drawing an extra “subframe”
   Card should be the <details class="acc"> only.
   ========================================================== */
.results-app .blk.blk-accordion{
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
}

/* ==========================================================
   PHASE 4 — BLOC 1 (Le bien) — AERATION ONLY
   Goal: more vertical spacing between KV rows (no style changes)
   Scope: #blk-1-listing only
   ========================================================== */

#blk-1-listing .kv{
  padding-top: 6px;
}

#blk-1-listing .kv__row{
  padding: 10px 0;            /* more breathing room per row */
  border-bottom: 1px solid rgba(0,0,0,0.06);
}

#blk-1-listing .kv__row:last-child{
  border-bottom: 0;
}

#blk-1-listing .kv__k{
  margin-bottom: 4px;         /* air between label and value */
  line-height: 1.25;
}

#blk-1-listing .kv__v{
  line-height: 1.35;
}

/* ==========================================================
   PHASE 4 — BLOC 3 (Energy / Diagnostics) — energy3 skin
   Scope: ONLY #blk-3-energy (no side effects)
   Goal: match the “card” look from reference (airy + clean)
   ========================================================== */

#blk-3-energy .acc__body{
  padding-top: 14px;
}

#blk-3-energy .energy3{
  display: block;
}

/* Verdict area */
#blk-3-energy .energy3__verdict{
  padding: 2px 0 12px 0;
  border-bottom: 1px solid rgba(0,0,0,0.06);
  margin-bottom: 12px;
}

#blk-3-energy .energy3__row{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

#blk-3-energy .energy3__k{
  font-weight: 600;
}

#blk-3-energy .energy3__v{
  white-space: nowrap;
  font-weight: 600;
}

/* Reason line */
#blk-3-energy .energy3__reason{
  margin-top: 6px;
  font-size: 12.5px;
}

/* History */
#blk-3-energy .energy3__history{
  padding-top: 8px;
}

#blk-3-energy .energy3__title{
  font-weight: 600;
  margin: 0 0 10px 0;
}

/* Table in B3 */
#blk-3-energy .energy3__tbl{
  margin-top: 6px;
}

/* Make the compact table feel less tight on mobile */
#blk-3-energy .tbl--compact th,
#blk-3-energy .tbl--compact td{
  padding: 9px 10px;
}

/* Empty state (if no history) */
#blk-3-energy .energy3__empty{
  padding: 12px 0 2px 0;
}

/* ==========================================================
   PHASE 4 — BLOC 3 (Energy) — status icons
   Green check = OK / Red exclamation = KO
   Scope: ONLY #blk-3-energy
   ========================================================== */

#blk-3-energy .diag-status-word{
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* OK */
#blk-3-energy .diag-status-word--ok::before{
  content: "✓";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #2e7d32; /* green */
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}

/* KO */
#blk-3-energy .diag-status-word--ko::before{
  content: "!";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #c62828; /* red */
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
}

/* ==========================================================
   PHASE 4 — BLOC 3 (Energy) — remove title status badge
   Reason: status is shown inside content (energy3)
   ========================================================== */

#blk-3-energy .acc__summary .diag-badge{
  display: none !important;
}

/* ==========================================================
   PHASE 4 — BLOC 4 (IVEE HOME) — centered card + airy spacing
   Goal: match previous centered look, title in brand brown, DVF-like button
   Scope: ONLY #blk-4-ivee-home
   ========================================================== */
#blk-4-ivee-home .card.ivee-home{
  text-align: center;
  padding: 22px 18px;
}

#blk-4-ivee-home .ivee-home__title{
  color: #8C6A3F;
  font-weight: 600;
  font-size: 14px;
  line-height: 1.35;
  margin: 2px 0 10px 0;
}

#blk-4-ivee-home .ivee-home__brand{
  margin: 0 0 10px 0;
}

#blk-4-ivee-home .ivee-home__count{
  font-style: italic;
  font-size: 18px;
  line-height: 1.2;
  margin: 0 0 16px 0;
}

#blk-4-ivee-home .ivee-home__cta{
  display: flex;
  justify-content: center;
  margin-top: 2px;
}

/* Keep DVF button style (btn btn-outline), only disable behavior */
#blk-4-ivee-home .ivee-home__btn[disabled],
#blk-4-ivee-home .ivee-home__btn[aria-disabled="true"]{
  cursor: not-allowed;
  opacity: 0.55;
}

/* ==========================================================
   PHASE 4 — BLOC 5 (Result hero) — layout/centering
   Scope: ONLY #blk-5-result
   ========================================================== */

/* More inner air */
#blk-5-result .card{
  padding: 22px 24px;
}

/* Center the whole block like the reference */
#blk-5-result .card{
  text-align: center;
}

/* Title: use same tone as other titles (brown) */
#blk-5-result .blk__title{
  color: #8C6A3F;
  font-weight: 700;
  letter-spacing: -0.2px;
  line-height: 1.15;
  margin: 0 0 10px 0;
}

/* Address line */
#blk-5-result .result-hero__address{
  color: #8C6A3F;
  font-weight: 600;
  margin: 0 0 12px 0;
}

/* Put confidence centered on its own line */
#blk-5-result .result-hero__row{
  display: block;
}

#blk-5-result .result-hero__confidence{
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  justify-content: center;
  margin: 6px 0 14px 0;
}

/* Stack buttons vertically and center them */
#blk-5-result .result-hero__cta{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin: 0 0 14px 0;
}

/* Make buttons wider & consistent */
#blk-5-result .result-hero__btn{
  width: min(520px, 100%);
  justify-content: center;
  padding: 12px 16px;
}

/* Nego line spacing */
#blk-5-result .result-hero__nego{
  margin-top: 10px;
}

/* ==========================================================
   PHASE 4 — BLOC 5B (no address yet) — spacing + strong color
   Scope: ONLY #blk-5-result
   ========================================================== */

#blk-5-result .result-hero__note{
  margin: 10px 0;
  line-height: 1.45;
}

/* The bold paragraph must be #7A7A7A (same as global text tone) */
#blk-5-result .result-hero__note--strong strong{
  color: #7A7A7A;
  font-weight: 600;
}

/* ==========================================================
   PHASE 4 — BLOC 5A (address found) — finishing touches
   Scope: ONLY #blk-5-result
   ========================================================== */

/* Confidence line */
#blk-5-result .result-hero__conf-label{
  color: #7A7A7A;
  font-weight: 500;
}

#blk-5-result .result-hero__conf-val{
  color: #8C6A3F;
  font-weight: 700;
}

/* Buttons: keep DVF "btn btn-outline" system, just make them feel like hero CTAs */
#blk-5-result .result-hero__btn{
  font-size: 14px;
  line-height: 1.15;
  border-radius: 12px;
}

/* Icon spacing */
#blk-5-result .result-hero__btn-ic{
  margin-right: 10px;
  display: inline-flex;
  align-items: center;
}

/* Nego sentence */
#blk-5-result .result-hero__nego{
  margin-top: 12px;
  color: #7A7A7A;
  line-height: 1.35;
}

/* Nego value highlight */
#blk-5-result .result-hero__nego-val{
  color: #8C6A3F;
  font-weight: 700;
  white-space: nowrap;
}

/* ==========================================================
   PHASE 4 — BLOC 5 (Result hero) — micro-tuning to match reference
   Scope: ONLY #blk-5-result
   ========================================================== */

/* Address should feel like the hero line */
#blk-5-result .result-hero__address{
  font-size: 18px;
  line-height: 1.2;
  margin: 0 0 14px 0;
}

/* Confidence: a bit more separation and calmer label */
#blk-5-result .result-hero__confidence{
  margin: 2px 0 16px 0;
}
#blk-5-result .result-hero__conf-label{
  font-size: 13px;
}

/* Buttons: more “CTA” presence + consistent inner spacing */
#blk-5-result .result-hero__btn{
  min-height: 44px;
  gap: 10px;
  font-size: 14px;
  line-height: 1.2;
}
#blk-5-result .result-hero__cta{
  margin: 2px 0 16px 0;
}

/* Nego: keep it readable and centered */
#blk-5-result .result-hero__nego{
  font-size: 14px;
  margin-top: 6px;
}

/* ==========================================================
   PHASE 4 — BLOC 5B (no address yet) — tune like other blocks
   Scope: ONLY #blk-5-result
   ========================================================== */

/* In B5B, notes should breathe more */
#blk-5-result .result-hero__note{
  margin: 12px 0;
  line-height: 1.5;
}

/* Strong paragraph tone (requested) */
#blk-5-result .result-hero__note--strong strong{
  color: #7A7A7A !important;
  font-weight: 600;
}

/* ==========================================================
   PHASE 4 — BLOC 5 (Result hero) — buttons like BLOC 2
   Scope: ONLY #blk-5-result
   Goal: make the 2 links look like the DVF button (brown outline)
   ========================================================== */

#blk-5-result .market-actions{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 10px 0 6px 0;
}

#blk-5-result .market-actions .btn{
  padding: 10px 18px;
  border-radius: 12px;
  font-family: 'Poppins', sans-serif;
  border: 2px solid #8C6A3F;
  color: #8C6A3F;
  background: transparent;
}

/* ==========================================================
   PHASE 4 — BLOC 7 (Simulation Finance) — layout + mobile stack
   Scope: ONLY #blk-7-finance
   Goal:
   - Desktop: 2 columns (inputs / outputs)
   - Mobile: outputs under inputs (stack)
   - Toggle pills consistent with theme
   ========================================================== */

#blk-7-finance .b7-toggle{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 10px;
}

#blk-7-finance .b7-toggle .btn{
  padding: 10px 14px;
  border-radius: 12px;
  border: 2px solid #8C6A3F;
  background: transparent;
  color: #8C6A3F;
  font-family: 'Poppins', sans-serif;
  line-height: 1.1;
}

#blk-7-finance .b7-toggle .btn[aria-pressed="true"]{
  background: #8C6A3F;
  color: #fff;
}

#blk-7-finance .b7-grid{
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 16px;
  margin-top: 16px;
}

#blk-7-finance .b7-box{
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 16px;
  padding: 16px;
}

#blk-7-finance .b7-actions{
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: stretch;
  margin-top: 14px;
}

#blk-7-finance .b7-actions .btn{
  width: 100%;
  justify-content: center;
  text-align: center;
}

/* Mobile: stack (outputs below inputs) */
@media (max-width: 860px){
  #blk-7-finance .b7-grid{
    grid-template-columns: 1fr;
  }
}

/* ==========================================================
   PHASE 4 — BLOC 7 (Simulation Finance)
   Visual refine:
   - Buttons EXACTLY like BLOC 2
   - Lighter boxes
   - Better inner spacing & hierarchy
   ========================================================== */

/* ---------- Boxes: lighter, more air ---------- */
#blk-7-finance .b7-box{
  padding: 20px;
  border-radius: 18px;
  background: #fff;
}

/* Titles inside boxes */
#blk-7-finance .b7-box .h4{
  margin-bottom: 14px;
}

/* ---------- Buttons: SAME AS BLOC 2 ---------- */
#blk-7-finance .b7-actions .btn{
  padding: 10px 18px;
  border-radius: 12px;
  font-family: 'Poppins', sans-serif;
  border: 2px solid #8C6A3F;
  color: #8C6A3F;
  background: transparent;
}

/* Disabled finance CTA */
#blk-7-finance .b7-actions .btn.btn-disabled{
  opacity: 0.55;
  cursor: not-allowed;
}

/* ---------- Results emphasis ---------- */
#blk-7-finance .b7-box--outputs span[id^="b7-"]{
  font-weight: 600;
}

/* Monthly payment stronger */
#blk-7-finance #b7-monthly{
  font-size: 20px;
  font-weight: 700;
  color: #8C6A3F;
}

/* Investment figures */
#blk-7-finance #b7-yield,
#blk-7-finance #b7-cashflow{
  color: #8C6A3F;
  font-weight: 700;
}

/* ---------- Inner spacing ---------- */
#blk-7-finance .b7-box--inputs > * + *{
  margin-top: 14px;
}

#blk-7-finance .b7-box--outputs > * + *{
  margin-top: 10px;
}


/* ==========================================================
   PHASE 4 — BLOC 7 (Simulation Finance) — padding canon
   Goal:
   - Add same "inner margin" as other blocks (card padding)
   - Keep b7-box with comfortable padding
   Scope: ONLY #blk-7-finance
   ========================================================== */

#blk-7-finance .card{
  padding: 22px;
}

#blk-7-finance .b7-head{
  margin-bottom: 6px;
}

#blk-7-finance .b7-subtitle{
  font-size: 13px;
  line-height: 1.35;
  max-width: 760px;
}

#blk-7-finance .b7-box{
  padding: 20px;
  border-radius: 18px;
}

#blk-7-finance .b7-h4{
  margin: 0 0 14px 0;
}

/* a bit more air between grid & toggle */
#blk-7-finance .b7-toggle{
  margin-top: 12px;
}

/* Mobile: keep same inner padding (don’t shrink) */
@media (max-width: 860px){
  #blk-7-finance .card{
    padding: 18px;
  }
  #blk-7-finance .b7-box{
    padding: 18px;
  }
}

/* ==========================================================
   PHASE 4 — BLOC 7 (Simulation Finance) — VISUAL V3 (polish)
   Scope: ONLY #blk-7-finance
   Goal:
   - More premium/airy like "matrice initiale"
   - Better hierarchy: separators, monthly highlight
   - Toggle pills + button polish
   ========================================================== */

#blk-7-finance .card{
  padding: 26px; /* a bit more premium */
}

/* Head */
#blk-7-finance .blk__title{
  letter-spacing: -0.2px;
}
#blk-7-finance .b7-subtitle{
  opacity: .95;
}

/* Grid / Boxes */
#blk-7-finance .b7-grid{
  margin-top: 18px;
  gap: 18px;
}

#blk-7-finance .b7-box{
  background: #fff;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 18px;
  padding: 22px;
  box-shadow: 0 10px 24px rgba(0,0,0,.04);
}

#blk-7-finance .b7-box--outputs{
  /* slight warm tint to break "terne" */
  background: linear-gradient(180deg, rgba(140,106,63,.045), rgba(140,106,63,0));
}

#blk-7-finance .b7-h4{
  margin: 0 0 16px 0;
  font-size: 16px;
  font-weight: 700;
}

/* Labels / inputs */
#blk-7-finance .b7-label,
#blk-7-finance .b7-label-inline{
  font-size: 12px;
  margin-bottom: 6px;
  display: inline-block;
}

#blk-7-finance .b7-price-row{
  display: grid;
  grid-template-columns: 1fr 220px;
  gap: 14px;
  align-items: end;
}

#blk-7-finance .b7-notary-row{
  display: flex;
  gap: 8px;
  align-items: center;
}

#blk-7-finance .b7-input{
  width: 100%;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.14);
  background: #fff;
  transition: border-color .15s ease, box-shadow .15s ease;
}
#blk-7-finance .b7-input:focus{
  outline: none;
  border-color: rgba(140,106,63,.55);
  box-shadow: 0 0 0 4px rgba(140,106,63,.12);
}
#blk-7-finance .b7-input--sm{
  width: 92px;
}

#blk-7-finance .b7-sliders{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 14px;
}
#blk-7-finance .b7-row-between{
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}

#blk-7-finance .b7-range{
  width: 100%;
}

/* Toggle pills (premium) */
#blk-7-finance .b7-toggle{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
}

#blk-7-finance .b7-toggle .btn{
  border-radius: 999px;
  padding: 10px 16px;
  border: 2px solid #8C6A3F;
  background: #fff;
  color: #8C6A3F;
  font-family: 'Poppins', sans-serif;
  font-size: 13px;
  line-height: 1.1;
  transition: transform .08s ease, background .15s ease, color .15s ease, box-shadow .15s ease;
}
#blk-7-finance .b7-toggle .btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 18px rgba(0,0,0,.06);
}
#blk-7-finance .b7-toggle .btn[aria-pressed="true"]{
  background: #8C6A3F;
  color: #fff;
}

/* Outputs: structure + separators */
#blk-7-finance .b7-out{
  display: grid;
  gap: 10px;
}

#blk-7-finance .b7-out-row{
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: baseline;
  padding: 8px 0;
  border-bottom: 1px solid rgba(0,0,0,.05);
}
#blk-7-finance .b7-out-row:last-child{
  border-bottom: none;
}

#blk-7-finance .b7-out-val{
  font-weight: 700;
}

#blk-7-finance .b7-out-monthly{
  font-weight: 800;
  font-size: 20px;
  color: #8C6A3F;
  letter-spacing: -0.2px;
}

#blk-7-finance .b7-invest-results{
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(0,0,0,.06);
}
#blk-7-finance .b7-out-row--mt{
  margin-top: 6px;
}

#blk-7-finance .b7-cashflow-note{
  font-size: 12px;
  line-height: 1.35;
  margin-top: 8px;
}

/* Actions: like other blocks, but clean */
#blk-7-finance .b7-actions{
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 16px;
}

#blk-7-finance .b7-actions .b7-action{
  width: 100%;
  justify-content: center;
  text-align: center;
  border-radius: 12px;
  padding: 12px 18px; /* better than tiny */
}

/* Disabled button: more "real" disabled */
#blk-7-finance .btn-disabled{
  opacity: .55;
  cursor: not-allowed !important;
  filter: grayscale(20%);
}

/* Mobile: stack + simplify grids */
@media (max-width: 860px){
  #blk-7-finance .b7-grid{
    grid-template-columns: 1fr;
  }
  #blk-7-finance .b7-price-row{
    grid-template-columns: 1fr;
  }
  #blk-7-finance .b7-sliders{
    grid-template-columns: 1fr;
  }
  #blk-7-finance .card{
    padding: 18px;
  }
  #blk-7-finance .b7-box{
    padding: 18px;
  }
}


/* ==========================================================
   PHASE 4 — BLOC 7 (Simulation Finance) — COLOR REFINE
   Goal:
   - Titles & neutral values in #7A7A7A
   - Keep highlights (monthly, gold accents) untouched
   Scope: ONLY #blk-7-finance
   ========================================================== */

/* Box titles */
#blk-7-finance .b7-h4{
  color: #7A7A7A;
  font-weight: 700;
}

/* Section subtitle already muted — keep as is */
#blk-7-finance .b7-subtitle{
  color: #7A7A7A;
}

/* Output labels */
#blk-7-finance .b7-out-row span.muted{
  color: #7A7A7A;
}

/* Neutral output values (NOT monthly highlight) */
#blk-7-finance .b7-out-val{
  color: #7A7A7A;
}

/* Cashflow label + note */
#blk-7-finance .b7-cashflow-note{
  color: #7A7A7A;
}

/* Investment section title */
#blk-7-finance .b7-invest-box .b7-h4{
  color: #7A7A7A;
}


/* ==========================================================
   RESULTS_SHARE_CSS_V1
   Scope: results share button above Block 1 (left column)
   ========================================================== */

.results-share{
  margin: 0 0 14px 0;
  display: flex;
  justify-content: flex-start;
}

.results-share__btn{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  border-radius: 16px;
}

.results-share__icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Dropdown */
.results-share{
  position: relative;
}

.results-share__menu{
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  min-width: 220px;
  padding: 8px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
  z-index: 50;
}

.results-share__item{
  display: block;
  padding: 10px 12px;
  border-radius: 10px;
  color: #111;
  text-decoration: none;
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
}

.results-share__item:hover{
  background: rgba(140,106,63,.10);
}

/* Mobile: full width */
@media (max-width: 860px){
  .results-share{ margin-bottom: 12px; }
  .results-share__btn{ width: 100%; justify-content: center; }
  .results-share__menu{ width: 100%; min-width: 0; }
}

/* /RESULTS_SHARE_CSS_V1 */

/* ==========================================================
   RESULTS_SHARE_CSS_V2
   Goal: button looks like Block 2 (premium outline), centered
   Scope: ONLY .results-share
   ========================================================== */

.results-share{
  display: flex;
  justify-content: center;
  margin: 6px 0 14px;
}

.results-share__btn{
  /* center + comfortable width */
  width: min(360px, 100%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  /* SAME spirit as Block 2 */
  padding: 12px 18px;
  border-radius: 14px;
  border: 2px solid #8C6A3F;
  background: transparent;
  color: #8C6A3F;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  line-height: 1.1;

  /* subtle premium feel */
  box-shadow: 0 1px 0 rgba(0,0,0,.04);
}

.results-share__btn:hover{
  background: #8C6A3F;
  color: #fff;
}

.results-share__btn:active{
  transform: translateY(1px);
}

.results-share__icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Keep menu aligned with centered button */
.results-share__menu{
  width: min(360px, 100%);
}

/* /RESULTS_SHARE_CSS_V2 */

/* RESULTS_SHARE_TYPO_V1 */
.results-share__label{
  font-size: 16px;
  letter-spacing: 0.3px;
}

.results-share__icon svg{
  width: 24px;
  height: 24px;
}
/* /RESULTS_SHARE_TYPO_V1 */

/* RESULTS_HEADER_STICKY_ZFIX_V1 */
/* Goal:
   - Ensure RESULTS header is the ONLY sticky header
   - Keep Leaflet map under the header (no overlap)
   Scope: results pages only
*/

/* On results pages, neutralize global sticky header if present */
body.results-app .site-header{
  position: static !important;
  z-index: auto !important;
  top: auto !important;
}

/* Make results header sticky and above Leaflet panes/controls */
body.results-app .rh-header{
  position: sticky;
  top: 0;
  z-index: 2000;
}

/* Defensive: keep map container below header stacking context */
body.results-app #map-b6,
body.results-app .map-b6{
  position: relative;
  z-index: 1;
}
/* /RESULTS_HEADER_STICKY_ZFIX_V1 */

/* ==========================================================
   RESULTS_HEADER_B_CSS_V1
   Scope: ONLY header (base_results.html .rh-header)
   Goal:
   - Layout like spec: left (logo + talksbar), center (menu + tagline)
   - No login area on results pages
   - Responsive: menu wraps, burger hidden for now (JS later)
   ========================================================== */

.rh-header{
  background: #fff;
  border-bottom: 1px solid rgba(0,0,0,.06);
}

.rh-header__inner{
  display: grid;
  grid-template-columns: minmax(260px, 560px) 1fr;
  gap: 18px;
  align-items: center;
  padding-top: 14px;
  padding-bottom: 14px;
}

/* Left block */
.rh-left{
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 260px;
}

.rh-talksbar{
  display: block;
  border: 2px solid #8C6A3F;
  border-radius: 12px;
  padding: 10px 14px;
  font-family: 'Poppins', sans-serif;
  color: #8C6A3F;
  text-decoration: none;
  line-height: 1.15;
  font-size: 14px;
  max-width: none;
}

/* Center block */
.rh-center{
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
  justify-content: center;
  min-width: 0;
}

/* Nav + menu */
.rh-nav{
  width: 100%;
  display: flex;
  justify-content: center;
}
  .rh-nav{ align-self:flex-start; margin-top:2px; }

.rh-burger{ display:none; }

.rh-menu{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: center;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  color: #8C6A3F;
  letter-spacing: .2px;
}

.rh-link{
  color: #8C6A3F;
  text-decoration: none;
  font-size: 15px;
}

.rh-sep{
  color: rgba(140,106,63,.55);
  font-weight: 500;
}

/* Tagline */
.rh-tagline{
  font-family: 'Poppins', sans-serif;
  font-size: 13px;
  color: #111;
  text-align: center;
  max-width: 780px;
}

/* Responsive: stack center under left if needed */
@media (max-width: 980px){
  /* MOBILE_CENTER_V1 */
  .rh-footer__inner{
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
  }
  .rh-footer__left{
    width: 100%;
    justify-content: center;
  }
  .rh-footer__center{
    width: 100%;
  }
  .rh-footer__right{
    width: 100%;
    justify-content: center;
  }
}

/* /RESULTS_HEADER_B_CSS_V1 */

/* ==========================================================
   RESULTS_HEADER_B_CSS_V2 — mobile align fix (logo+talks left, burger right)
   Scope: ONLY .rh-header
   ========================================================== */
@media (max-width: 720px){
  .rh-header__inner{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap: 12px;
  }

  .rh-left{
    flex: 1 1 auto;
    min-width: 0;
    align-items: flex-start;
  }

  /* talks input fills available width and stays left */
  .rh-talks{
    width: 100%;
    display:block;
  }
  .rh-talksbar{
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
  }

  /* burger pinned right */
  .rh-burger{
    flex: 0 0 auto;
    margin-left: 0;
    align-self: flex-start;
  }
}
/* /RESULTS_HEADER_B_CSS_V2 */

/* ==========================================================
   RESULTS_HEADER_B_CSS_V3 — mobile burger panel (premium)
   Scope: ONLY header (.rh-*)
   ========================================================== */
@media (max-width: 720px){
  /* On mobile, we don't show the inline menu nor tagline */
  .rh-tagline{ display:none !important; }

  /* Hide inline menu by default (still in DOM; JS will open it as a panel) */
  .rh-menu{
    display:none;
  }

  /* Burger always visible */
  .rh-burger{
    display:inline-flex;
  }

  /* When open: show menu as an off-canvas-like panel */
  .rh-menu.is-open{
    display:flex;
    position:fixed;
    z-index: 9999;
    top: 86px;              /* below header; tweak later if needed */
    right: 12px;
    width: min(340px, calc(100vw - 24px));
    flex-direction: column;
    gap: 10px;

    padding: 14px 14px;
    border: 1px solid rgba(0,0,0,.10);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 18px 40px rgba(0,0,0,.12);

    transform-origin: top right;
    animation: rhMenuIn .12s ease-out;
  }

  /* Links inside panel */
  .rh-menu.is-open .rh-link{
    display:flex;
    justify-content: center;
    align-items: center;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(140,106,63,.35);
    text-decoration: none;
  }

  /* no separators in panel */
  .rh-menu .rh-sep{ display:none; }
}

@keyframes rhMenuIn{
  from { opacity:0; transform: translateY(-6px) scale(.98); }
  to   { opacity:1; transform: translateY(0) scale(1); }
}
/* /RESULTS_HEADER_B_CSS_V3 */

/* ==========================================================
   RESULTS_HEADER_B_CSS_V4 - mobile menu (top-right, white, brown outline)
   Scope: ONLY header (.rh-*)
   ========================================================== */
@media (max-width: 720px){

  /* Keep header clean on mobile */
  .rh-tagline{ display:none; }
  .rh-center{ display:block; }

  /* Header inner: logo+talks left, burger right */
  .rh-header__inner{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap: 10px;
    align-items:flex-start;
  }

  .rh-left{ flex:1 1 auto; min-width:0; }
  .rh-brand__img{ max-width: 210px; height:auto; }

  /* Talksbar width = Share button width (min(360px,100%)) */
  .rh-talks{ width: min(360px, 100%); }
  .rh-talks input{
    width: 100%;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
  }

  /* Burger: just 3 brown lines (no box, no Menu text) */
  .rh-nav{ display:flex; justify-content:flex-end; }
  .rh-burger{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:44px;
    margin-top:2px;
    height:36px;
    border: 0;
    background: transparent;
    padding: 0;
  }
  .rh-burger__lines{
    display:block;
    width: 28px;
    height: 3px;
    background: #8C6A3F;
    border-radius: 2px;
    position: relative;
  }
  .rh-burger__lines:before,
  .rh-burger__lines:after{
    content:"";
    position:absolute;
    left:0;
    width: 28px;
    height: 3px;
    background: #8C6A3F;
    border-radius: 2px;
  }
  .rh-burger__lines:before{ top: -8px; }
  .rh-burger__lines:after { top:  8px; }

  /* Force sr-only to actually be hidden (prevents visible 'Menu' text showing) */
  .rh-header .sr-only{
    position:absolute !important;
    width:1px !important;
    height:1px !important;
    padding:0 !important;
    margin:-1px !important;
    overflow:hidden !important;
    clip: rect(0,0,0,0) !important;
    white-space:nowrap !important;
    border:0 !important;
  }

  /* Overlay (light) */
  .rh-overlay{
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.18);
    z-index: 9998;
  }

  /* Menu panel: top-right, size = content */
  .rh-menu{
    position: fixed;
    top: 12px;
    right: 12px;
    left: auto;

    width: auto;
    height: auto;
    max-width: min(260px, calc(100vw - 24px));

    background: #fff;
    color: #8C6A3F;
    z-index: 9999;

    padding: 12px 12px;
    border: 2px solid #8C6A3F;
    border-radius: 16px;
    box-shadow: 0 16px 44px rgba(0,0,0,.16);

    /* hidden by default */
    display: none;
    flex-direction: column;
    gap: 10px;
    align-items: flex-end;
  }
  .rh-menu.is-open{ display:flex; }

  /* Remove separators */
  .rh-menu .rh-sep{ display:none; }

  /* Links: no boxes, premium text */
  .rh-menu .rh-link{
    display:block;
    padding:6px 0;
    border:0 !important;
    background:transparent !important;
    border-radius:0 !important;

    color: #8C6A3F;
    text-decoration: none;
    font-family: "Poppins", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.15;
    letter-spacing: .2px;
    text-align: right;
    width: 100%;
  }
  .rh-menu .rh-link:active{ opacity:.75; }
  .rh-menu .rh-link:hover{ text-decoration: underline; }
}
/* /RESULTS_HEADER_B_CSS_V4 */


/* ==========================================================
   RESULTS_FOOTER_CSS_CLEAN_V1 — single source of truth
   Scope: ONLY footer (.rh-footer + children)
   ========================================================== */

/* Footer skin */
.rh-footer{
  background:#0b0b0b !important;
  border-top: 0 !important;
  padding: 40px 22px; /* taller */
  color:#d7d7d7;
}

/* Top thin line */
.rh-footer::before{
  content:"";
  display:block;
  height: 1px;
  background: rgba(255,255,255,.22);
  max-width: 1600px;
  margin: 0 auto 22px auto;
}

/* Layout */
.rh-footer__inner{
  max-width: 1600px;
  margin: 0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 28px;
}



/* Center column: real centering (text + menu) */
.rh-footer__center{
  flex: 1 1 auto;
  min-width: 0;
  text-align: center;
}
.rh-footer__nav{
  margin-top: 6px;
  text-align: center;
}

/* Left column: never clip */
.rh-footer__left{
  flex: 0 0 auto;
  width: auto;
  max-width: none;
  overflow: visible;
  display:flex;
  align-items:center;
}

/* Logo sizing (adjust ONLY HERE) */
.rh-footer .site-footer__logo,
.rh-footer__logo{
  height: 72px;          /* <= taille du logo (à réduire/augmenter) */
  width: auto;
  max-width: none;
  display:block;
  object-fit: contain;
  object-position: left center;
}

/* Center text */
.rh-footer__title{
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  color: #7A7A7A;
  font-size: 14px;
  line-height: 1.25;
}

/* Links */
.rh-footer__nav{ margin-top: 6px; }
.rh-footer__link{
  color: #b08a52; /* ton doré actuel */
  text-decoration: none;
  font-size: 14px;
}
.rh-footer__link:hover{ text-decoration: underline; }
.rh-footer__sep{ color: rgba(255,255,255,.25); margin: 0 8px; }

/* Social */
.rh-footer__right{
  display:flex;
  align-items:center;
  gap: 10px;
  color: #b08a52;
}
.rh-footer__social{
  color: inherit;
  text-decoration: none;
  display:inline-flex;
  padding: 12px;
  border-radius: 10px;
}

/* Responsive: stack */
@media (max-width: 980px){
  .rh-footer__inner{
    flex-direction: column;
    align-items: flex-start;
  }
  .rh-footer__right{
    width: 100%;
    justify-content: flex-end;
  }
}




/* ==========================================================
   RESULTS_FOOTER_LOGO_WIDTH_V1 — fix “cropping” illusion
   Force left column wide enough + reduce logo size a bit
   ========================================================== */
.rh-footer__left{
  min-width: 240px !important;     /* ensures we never “lose” the I */
  overflow: visible !important;
}

.rh-footer .site-footer__logo,
.rh-footer__logo{
  height: 77px !important;         /* smaller than current 72px */
  width: auto !important;
  max-width: none !important;
  display: block !important;
  object-fit: contain !important;
  object-position: left center !important;
}
/* /RESULTS_FOOTER_LOGO_WIDTH_V1 */

/* RESULTS_FOOTER_SOCIAL_X2_FORCE */
/* Force social icons size regardless of inline SVG attributes */
.rh-footer .rh-footer__social{
  padding: 12px !important; /* bigger click area */
  border-radius: 12px !important;
}

.rh-footer .rh-footer__social svg{
  width: 36px !important;
  height: 36px !important;
}
/* /RESULTS_FOOTER_SOCIAL_X2_FORCE */



/* RESULTS_FOOTER_MOBILE_CENTER_V2 */
@media (max-width: 980px){
  /* Center EVERYTHING in footer on mobile */
  .rh-footer .rh-footer__inner{
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
  }
  .rh-footer .rh-footer__left{
    width: 100% !important;
    justify-content: center !important;
  }
  .rh-footer .rh-footer__center{
    width: 100% !important;
  }
  .rh-footer .rh-footer__right{
    width: 100% !important;
    justify-content: center !important;
  }

  /* Make sure nav aligns centered too */
  .rh-footer .rh-footer__nav{
    text-align: center !important;
  }
}
/* /RESULTS_FOOTER_MOBILE_CENTER_V2 */

/* ============================================================
 * ROBINHOME — Header Ivee Talks full width (Chrome fix)
 * Symptom: talks bar appears narrower on Chrome.
 * Fix: ensure the form/input can stretch inside header grid/flex
 *      and prevent flex min-width auto shrink.
 * Scope: RobinHome results pages only.
 * ============================================================ */
body.results-app #rh-talks-form.rh-talks{
  width: 100% !important;
  max-width: min(360px, 100%) !important;
}

body.results-app #rh-talks-form.rh-talks .rh-talksbar{
  width: 100% !important;
  max-width: min(360px, 100%) !important;
  display: block !important;
  box-sizing: border-box !important;
  min-width: 0 !important;
}

/* Allow the left header area to expand (grid/flex min-width trap) */
body.results-app .rh-header__inner,
body.results-app .rh-left{
  min-width: 0 !important;
}