/* ==========================================================================
   FORÊTS PAGE — Feuille de style v1.1 (anti-collision)
   Blocs HTML insérés via widget Elementor sur la page /forets/
   Convention identique à art/gfv/immo-fractionne/crypto :
   - Préfixe  for-  sur toutes les classes (aucune collision constatée)
   - Variables --for-* dans :root (préfixe unique, absent des autres CSS)
   - Reset scopé exclusivement sous .for-block *
   - Les sélecteurs .e-con:has(.for-block) sont scopés via :has() — même
     pattern que art, crypto, immo-fractionne : validé par le prestataire.
   ========================================================================== */

:root {
  --for-navy:        #07124a;
  --for-orange:      #f18815;
  --for-green:       #2d7d46;
  --for-green-light: rgba(45,125,70,0.12);
  --for-green-mid:   rgba(45,125,70,0.22);
  --for-gold:        #c9a227;
  --for-gold-light:  rgba(201,162,39,0.12);
  --for-grey-text:   #4a5568;
  --for-grey-light:  #64748b;
  --for-border:      #dde1ea;
  --for-bg-icon:     #eef1f9;
  --for-bg-page:     #f8f9fb;
  --for-bg-or-b:     rgba(241,136,21,0.10);
  --for-font:        'Plus Jakarta Sans', 'Poppins', sans-serif;
  --for-r:           18px;
  --for-r-sm:        12px;
  --for-t:           0.22s ease;
}

/* ── Reset scopé — identique au pattern art/crypto/immo validé par le prestataire ── */
.for-block {
  font-family: var(--for-font) !important;
  width: 100%; box-sizing: border-box;
}
.for-block *, .for-block *::before, .for-block *::after {
  box-sizing: border-box;
  font-family: var(--for-font) !important;
  border: none; outline: none;
}
.for-block h2, .for-block h3, .for-block h4,
.for-block p, .for-block span, .for-block strong, .for-block a, .for-block div {
  font-family: var(--for-font) !important;
  text-decoration: none; border: none;
}
.for-block a { color: inherit; }

/* ==========================================================================
   LAYOUT
   ========================================================================== */
.for-inner {
  max-width: 1100px;
  margin-left: auto !important; margin-right: auto !important;
  width: 100%; padding-left: 32px; padding-right: 32px;
  box-sizing: border-box;
}
.for-bloc { padding: 72px 0; }
.for-bloc--white  { background: #ffffff; }
.for-bloc--page   { background: var(--for-bg-page); }
.for-bloc--navy   { background: var(--for-navy); overflow: hidden; position: relative; }
.for-bloc--green  { background: #0f3320; overflow: hidden; position: relative; }
.for-bloc--dark   { background: #0b1530; overflow: hidden; position: relative; }

/* Breakout pleine largeur — même pattern que art/crypto/immo (validé prestataire) */
.for-bloc--navy, .for-bloc--white, .for-bloc--page, .for-bloc--dark, .for-bloc--green {
  position: relative; left: 50%;
  width: 100vw !important;
  margin-left: -50vw !important; margin-right: -50vw !important;
}
hr.for-sep { position: relative; left: 50%; width: 100vw !important; margin-left: -50vw !important; }
.for-sep { border: none !important; border-top: 1.5px solid var(--for-border) !important; margin: 0; }

/* Neutralise overflow Elementor — scopé via :has(.for-block), même pattern que art/immo */
.e-con-boxed:has(.for-block), .e-con-boxed:has(.for-block) > .e-con-inner,
.e-con:has(.for-block), .e-con:has(.for-block) > .e-con-inner,
.elementor-widget-html:has(.for-block), .elementor-widget-container:has(.for-block) {
  overflow: visible !important; max-width: none !important;
}

.for-grid-1-2 { display: grid; grid-template-columns: 1fr 2fr; gap: 64px; align-items: start; width: 100%; }
.for-grid-1-1 { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
.for-grid-3   { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.for-grid-2   { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

/* ==========================================================================
   TYPOGRAPHIE
   ========================================================================== */
.for-pill {
  display: inline-block; font-size: 11px; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--for-green); border: 1.5px solid var(--for-green) !important;
  border-radius: 30px !important; padding: 5px 16px; margin-bottom: 16px;
}
.for-pill--orange { color: var(--for-orange); border-color: var(--for-orange) !important; }
.for-pill--navy   { color: var(--for-navy);   border-color: var(--for-navy) !important; }
.for-pill--white  { color: rgba(255,255,255,0.85); border-color: rgba(255,255,255,0.4) !important; }
.for-pill--gold   { color: var(--for-gold);   border-color: var(--for-gold) !important; }

.for-h2 { font-size: 32px; font-weight: 800; color: var(--for-navy); line-height: 1.22; margin: 0; }
.for-h2--white { color: #ffffff; }
.for-h3 { font-size: 17px; font-weight: 700; color: var(--for-navy); line-height: 1.3; margin: 0 0 8px; }
.for-h3--white { color: #ffffff; }
.for-h4 { font-size: 15px; font-weight: 700; color: var(--for-navy); line-height: 1.4; margin: 0 0 6px; }
.for-p  { font-size: 15.5px; color: var(--for-grey-text); line-height: 1.8; margin: 0 0 14px; }
.for-p--sm    { font-size: 14.5px; color: var(--for-grey-light); line-height: 1.7; margin: 0; }
.for-p--muted { font-size: 14px; color: #c9d4e8; line-height: 1.7; margin: 0; }
.for-p--mention { font-size: 11px; color: rgba(255,255,255,0.30); text-align: center; margin-top: 20px; line-height: 1.65; }

/* ==========================================================================
   SCROLL REVEAL
   ========================================================================== */
.for-reveal { opacity: 0; transform: translateY(24px); transition: opacity .55s ease, transform .55s ease; }
.for-reveal.for-revealed { opacity: 1; transform: translateY(0); }

/* ==========================================================================
   SECTION 1 — POURQUOI INVESTIR
   ========================================================================== */
.for-avantages { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.for-avantage-card {
  background: #ffffff; border: 1.5px solid var(--for-border) !important;
  border-radius: var(--for-r) !important; padding: 22px 24px;
  display: flex; gap: 18px; align-items: flex-start;
  transition: box-shadow var(--for-t), opacity .5s ease, transform .5s ease;
  opacity: 0; transform: translateY(20px);
}
.for-avantage-card.for-appear { opacity: 1; transform: translateY(0); }
.for-avantage-card:hover { box-shadow: 0 8px 28px rgba(7,18,74,0.09); }
.for-avantage-card__icon {
  width: 48px; height: 48px; min-width: 48px;
  border-radius: 14px !important; background: var(--for-bg-icon);
  display: flex; align-items: center; justify-content: center;
}
.for-avantage-card__icon svg {
  width: 24px; height: 24px; stroke: var(--for-navy); fill: none;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.for-avantage-card__icon--green { background: var(--for-green-light); }
.for-avantage-card__icon--green svg { stroke: var(--for-green); }
.for-avantage-card__icon--gold  { background: var(--for-gold-light); }
.for-avantage-card__icon--gold svg  { stroke: var(--for-gold); }
.for-avantage-card__icon--orange { background: var(--for-bg-or-b); }
.for-avantage-card__icon--orange svg { stroke: var(--for-orange); }

/* Sticky encart gauche */
.for-sticky {
  background: var(--for-navy); border-radius: var(--for-r) !important;
  padding: 32px 28px; position: sticky; top: 100px; overflow: hidden;
}
.for-sticky__label {
  font-size: 10px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--for-green); margin-bottom: 10px;
  display: flex; align-items: center; gap: 8px;
}
.for-sticky__label::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--for-green); display: inline-block; flex-shrink: 0;
  animation: forBlink 1.8s ease-in-out infinite;
}
@keyframes forBlink { 0%,100% { opacity:1; } 50% { opacity:.3; } }
.for-sticky__title { font-size: 21px; font-weight: 800; color: #ffffff; line-height: 1.3; margin: 0 0 14px; }
.for-sticky__text  { font-size: 14px; color: #c9d4e8; line-height: 1.75; margin: 0 0 22px; }
.for-sticky__cta {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--for-orange); color: #ffffff !important;
  font-size: 14px; font-weight: 700; padding: 12px 22px;
  border-radius: 50px !important; text-decoration: none !important;
  transition: background var(--for-t), transform var(--for-t);
}
.for-sticky__cta:hover { background: #d97612; transform: translateY(-2px); }
.for-sticky__cta svg { width: 16px; height: 16px; stroke: #ffffff; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* Star cards */
.for-star-cards { display: flex; flex-direction: column; gap: 12px; margin-bottom: 24px; }
.for-star-card {
  background: #ffffff; border: 1.5px solid var(--for-border) !important;
  border-radius: var(--for-r-sm) !important; padding: 16px 20px;
  display: flex; align-items: flex-start; gap: 12px;
  transition: box-shadow var(--for-t);
}
.for-star-card:hover { box-shadow: 0 4px 16px rgba(7,18,74,0.07); }
.for-star-card__star { color: #e6a817; font-size: 18px; flex-shrink: 0; margin-top: 1px; }
.for-star-card__text { font-size: 14.5px; color: var(--for-grey-text); line-height: 1.65; margin: 0; }
.for-star-card__text strong { color: var(--for-navy); }

/* Encart 150-0 B ter */
.for-encart {
  background: var(--for-navy); border-radius: var(--for-r) !important;
  padding: 28px 32px; margin-top: 24px; overflow: hidden;
}
.for-encart__label {
  font-size: 11px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--for-orange); margin-bottom: 12px;
  display: flex; align-items: center; gap: 8px;
}
.for-encart__label::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%;
  background: var(--for-orange); display: inline-block; flex-shrink: 0;
}
.for-encart__text { font-size: 15px; color: #c9d4e8; line-height: 1.8; margin: 0 0 20px; }
.for-encart__text strong { color: var(--for-orange); }
.for-encart__steps { display: flex; flex-direction: column; gap: 10px; }
.for-encart__step {
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.10) !important;
  border-radius: var(--for-r-sm) !important;
  padding: 12px 16px; display: flex; gap: 12px; align-items: flex-start;
}
.for-encart__step-num {
  background: var(--for-orange); color: #ffffff; font-size: 11px; font-weight: 800;
  border-radius: 6px !important; padding: 2px 8px; flex-shrink: 0; margin-top: 2px;
}
.for-encart__step-text { font-size: 14px; color: #c9d4e8; line-height: 1.65; margin: 0; }
.for-encart__step-text strong { color: #ffffff; }
.for-benefit-box {
  background: rgba(241,136,21,0.15);
  border: 1.5px solid rgba(241,136,21,0.35) !important;
  border-radius: var(--for-r-sm) !important;
  padding: 16px 20px; margin-top: 14px;
  display: flex; gap: 10px; align-items: flex-start;
}
.for-benefit-box__icon { font-size: 20px; flex-shrink: 0; }
.for-benefit-box__text { font-size: 14px; color: #c9d4e8; line-height: 1.7; margin: 0; }
.for-benefit-box__text strong { color: var(--for-orange); }

/* ==========================================================================
   SECTION 2 — GRAPHIQUE MARCHÉ
   ========================================================================== */
.for-chart-wrap {
  background: #ffffff; border: 1.5px solid var(--for-border) !important;
  border-radius: var(--for-r) !important; padding: 32px 36px;
  box-shadow: 0 4px 24px rgba(7,18,74,0.06);
}
.for-chart-wrap h3 { font-size: 16px; font-weight: 700; color: var(--for-navy); margin: 0 0 4px; }
.for-chart-canvas-wrap { width: 100%; overflow: hidden; }
.for-chart-legend {
  display: flex; gap: 24px; flex-wrap: wrap;
  margin-top: 20px; padding-top: 16px;
  border-top: 1px solid var(--for-border) !important;
}
.for-chart-legend-item {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--for-grey-light); font-weight: 500;
}
.for-chart-legend-dot { width: 10px; height: 10px; border-radius: 50% !important; flex-shrink: 0; }
.for-source { font-size: 11px; color: var(--for-grey-light); margin-top: 10px; font-style: italic; }

.for-kpi-strip {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 14px; margin-top: 28px;
}
.for-kpi {
  background: var(--for-green-light);
  border: 1px solid var(--for-green-mid) !important;
  border-radius: var(--for-r-sm) !important;
  padding: 20px 16px; text-align: center;
  transition: background var(--for-t);
}
.for-kpi:hover { background: rgba(45,125,70,0.18); }
.for-kpi__val   { font-size: 26px; font-weight: 800; color: var(--for-green); line-height: 1; margin-bottom: 8px; }
.for-kpi__label { font-size: 12px; color: var(--for-grey-light); font-weight: 500; line-height: 1.4; }

/* ==========================================================================
   SECTION 3 — CAS PRATIQUE TRANSMISSION
   ========================================================================== */
.for-focus-intro {
  display: flex; gap: 14px; align-items: flex-start;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12) !important;
  border-radius: var(--for-r-sm) !important;
  padding: 20px 24px; margin-bottom: 32px;
}
.for-focus-intro__icon { font-size: 22px; flex-shrink: 0; }
.for-focus-intro__text { font-size: 14.5px; color: #c9d4e8; line-height: 1.75; margin: 0; }
.for-focus-intro__text strong { color: #ffffff; }

.for-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.for-compare-col {
  border-radius: var(--for-r) !important; padding: 28px 28px;
  border: 2px solid transparent !important;
}
.for-compare-col--bad  { background: rgba(200,30,30,0.08);  border-color: rgba(200,30,30,0.25) !important; }
.for-compare-col--good { background: rgba(45,125,70,0.12);  border-color: rgba(45,125,70,0.40) !important; }
.for-compare-col__header { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.for-compare-col__badge {
  font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  padding: 4px 12px; border-radius: 30px !important;
}
.for-compare-col__badge--bad  { background: rgba(200,30,30,0.18); color: #ff6b6b; }
.for-compare-col__badge--good { background: rgba(45,125,70,0.25);  color: #6dd68e; }
.for-compare-col__title { font-size: 16px; font-weight: 700; color: #ffffff; margin: 0; }

.for-calc-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
}
.for-calc-row:last-of-type { border-bottom: none !important; }
.for-calc-row__label { font-size: 13.5px; color: #9ab0cb; line-height: 1.4; }
.for-calc-row__value { font-size: 14px; font-weight: 600; color: #ffffff; text-align: right; }
.for-calc-row__value--red   { color: #ff6b6b; }
.for-calc-row__value--green { color: #6dd68e; }
.for-calc-total {
  margin-top: 16px; padding: 16px 20px;
  border-radius: var(--for-r-sm) !important;
  display: flex; justify-content: space-between; align-items: center;
}
.for-calc-total--bad  { background: rgba(200,30,30,0.20); }
.for-calc-total--good { background: rgba(45,125,70,0.30); }
.for-calc-total__label { font-size: 14px; font-weight: 700; color: #ffffff; }
.for-calc-total__value { font-size: 22px; font-weight: 800; line-height: 1; }
.for-calc-total__value--red   { color: #ff6b6b; }
.for-calc-total__value--green { color: #6dd68e; }

.for-savings-banner {
  background: var(--for-orange); border-radius: var(--for-r) !important;
  padding: 22px 28px; margin-top: 20px;
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
}
.for-savings-banner__label { font-size: 15px; color: #ffffff; font-weight: 600; line-height: 1.4; }
.for-savings-banner__label strong { font-size: 17px; display: block; }
.for-savings-banner__val { font-size: 38px; font-weight: 900; color: #ffffff; line-height: 1; white-space: nowrap; }
.for-savings-banner__sub { font-size: 12px; color: rgba(255,255,255,0.7); margin-top: 4px; }
.for-legal {
  font-size: 11px; color: rgba(255,255,255,0.30); line-height: 1.7;
  margin-top: 24px; padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,0.10) !important;
}

/* ==========================================================================
   SECTION 4 — INVESTISSEMENT À IMPACT
   ========================================================================== */
.for-impact-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 24px; }
.for-impact-card {
  background: #ffffff; border: 1.5px solid var(--for-border) !important;
  border-radius: var(--for-r) !important; padding: 24px 22px;
  transition: box-shadow var(--for-t), transform var(--for-t);
  opacity: 0; transform: translateY(20px);
}
.for-impact-card.for-appear { opacity: 1; transform: translateY(0); }
.for-impact-card:hover { box-shadow: 0 8px 28px rgba(7,18,74,0.08); transform: translateY(-3px); }
.for-impact-card__icon {
  width: 48px; height: 48px;
  border-radius: 14px !important; background: var(--for-green-light);
  display: flex; align-items: center; justify-content: center; margin-bottom: 16px;
}
.for-impact-card__icon svg {
  width: 24px; height: 24px; stroke: var(--for-green); fill: none;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.for-impact-card h4 { font-size: 15px; font-weight: 700; color: var(--for-navy); margin: 0 0 8px; }
.for-impact-card p  { font-size: 14px; color: var(--for-grey-light); line-height: 1.65; margin: 0; }

.for-sfdr-badge {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--for-green-light);
  border: 1.5px solid var(--for-green-mid) !important;
  border-radius: var(--for-r-sm) !important;
  padding: 14px 20px; margin-top: 24px;
}
.for-sfdr-badge__icon { font-size: 20px; }
.for-sfdr-badge__text { font-size: 14px; color: var(--for-grey-text); line-height: 1.6; margin: 0; }
.for-sfdr-badge__text strong { color: var(--for-green); }

/* ==========================================================================
   SECTION 5 — POURQUOI INVEST-ENLIGNE
   ========================================================================== */
.for-why-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.for-why-card {
  display: flex; gap: 18px; align-items: flex-start;
  background: var(--for-bg-page); border: 1.5px solid var(--for-border) !important;
  border-radius: var(--for-r) !important; padding: 24px 22px;
  transition: box-shadow var(--for-t);
}
.for-why-card:hover { box-shadow: 0 6px 22px rgba(7,18,74,0.07); }
.for-why-card__icon {
  width: 48px; height: 48px; min-width: 48px;
  border-radius: 14px !important; background: var(--for-navy);
  display: flex; align-items: center; justify-content: center;
}
.for-why-card__icon svg {
  width: 22px; height: 22px; stroke: var(--for-orange); fill: none;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.for-why-card h4 { font-size: 15px; font-weight: 700; color: var(--for-navy); margin: 0 0 6px; }
.for-why-card p  { font-size: 14px; color: var(--for-grey-light); line-height: 1.65; margin: 0; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 900px) {
  .for-grid-1-2, .for-grid-1-1 { grid-template-columns: 1fr; gap: 36px; }
  .for-avantages { grid-template-columns: 1fr; }
  .for-kpi-strip  { grid-template-columns: repeat(2, 1fr); }
  .for-sticky     { position: static; }
  .for-compare    { grid-template-columns: 1fr; }
  .for-impact-cards { grid-template-columns: 1fr; }
  .for-why-grid   { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .for-bloc  { padding: 48px 0; }
  .for-inner { padding: 0 20px; }
  .for-h2    { font-size: 26px; }
  .for-kpi-strip { grid-template-columns: repeat(2, 1fr); }
  .for-chart-wrap { padding: 20px 16px; }
  .for-savings-banner { flex-direction: column; gap: 12px; }
  .for-savings-banner__val { font-size: 30px; }
}