/* =====================================================================
   Climat et Résilience · v6 — complément de style
   Chargé en plus de /css/style.css, uniquement sur la page v6.
   ===================================================================== */

:root {
  --v6-vert: oklch(0.48 0.14 143);
  --v6-vert-vif: oklch(0.7351 0.2216 142.98);
}

/* Hero compact : H1, sous-titre et bouton visibles sans scroller sur 375px */
.hero--compact .hero__inner { padding-block: clamp(18px, 6vh, 48px); }
.hero--compact .h1 { font-size: clamp(2rem, 8.4vw, 3.6rem); line-height: 1.05; }
.hero--compact .hero__sous {
  font-family: "Poppins", system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(1.3rem, 5.4vw, 2.1rem);
  margin: 0.2em 0 0.6em;
  color: var(--blanc);
}
.hero--compact .hero__intro { font-size: clamp(0.98rem, 3.5vw, 1.15rem); }
.hero--compact .cta-micro { font-size: 0.82rem; }

@media (max-width: 480px) {
  .hero--compact { min-height: 100svh; }
  .hero--compact .hero__logo { width: 62px; height: 62px; }
  .hero--compact .hero__action .btn { width: 100%; }
}

/* Offre en clair */
.offre-liste { list-style: none; margin: 0 auto; padding: 0; max-width: 820px; display: grid; gap: 14px; }
.offre-liste li {
  display: grid; grid-template-columns: 40px 1fr; gap: 14px; align-items: start;
  background: var(--blanc); border: 1px solid var(--trait);
  border-radius: 14px; padding: 16px 18px;
}
.offre-liste__n {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  background: var(--bleu); color: var(--blanc); font-weight: 800;
}
.offre-liste p { margin: 0; }

/* Aujourd'hui / Avec nous */
.compare { display: grid; gap: 18px; max-width: 900px; margin-inline: auto; }
@media (min-width: 760px) { .compare { grid-template-columns: 1fr 1fr; } }
.compare__col { border-radius: 16px; padding: 20px 22px; border: 1px solid var(--trait); background: var(--blanc); }
.compare__col h3 { margin-top: 0; }
.compare__col ul { margin: 0; padding-left: 1.1em; display: grid; gap: 8px; }
.compare__col--avant { opacity: .92; }
.compare__col--apres { border-color: var(--accent, #36CA37); box-shadow: 0 10px 30px rgba(54, 202, 55, .12); }
.compare__pied { text-align: center; font-weight: 700; margin-top: 22px; }

/* Ce qui est compris */
.liste-compris { list-style: none; margin: 0 auto; padding: 0; max-width: 760px; display: grid; gap: 10px; }
.liste-compris li {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  border-bottom: 1px dashed rgba(27, 44, 75, .2); padding-bottom: 10px;
}
.liste-compris em { font-style: normal; font-weight: 800; color: var(--v6-vert); white-space: nowrap; }

/* Copy v2 */
.hero--compact .hero__intro {
  width: min(100%, 54ch);
  margin: 0 auto 0.6em;
  color: var(--blanc);
  text-align: center;
}
.hero--compact .hero__bullets {
  list-style: none;
  margin: 0 auto 1.1em;
  padding: 0;
  width: min(100%, 54ch);
  color: var(--blanc);
  text-align: center;
  font-size: clamp(.95rem, 2.4vw, 1.05rem);
  line-height: 1.45;
}
.hero--compact .hero__bullets li {
  position: relative;
  padding-left: 0;
  margin-bottom: 0.45em;
}
.hero--compact .hero__bullets li::before {
  content: "✓";
  display: inline-block;
  margin-right: 0.55em;
  color: var(--or, #f5cd7a);
  font-weight: 800;
}
.hero--compact .hero__action { margin-top: 0.2em; }

.v6-reassurance { background: var(--bleu); color: var(--blanc); padding-block: 14px; }
.v6-reassurance ul { display: grid; grid-template-columns: repeat(4, auto); justify-content: center; gap: 10px 34px; margin: 0; padding: 0; list-style: none; font-weight: 700; text-align: center; }
.v6-reassurance li::before { content: "✓"; margin-right: 7px; color: var(--v6-vert-vif); }

.v6-copy { max-width: 720px; margin-inline: auto; text-align: left; }
.v6-copy p + p { margin-top: 16px; }

.v6-engagements { display: grid; gap: 14px; max-width: 900px; margin-inline: auto; }
.v6-engagements li { display: grid; grid-template-columns: 42px 1fr; gap: 16px; padding: 20px; background: var(--blanc); border: 1px solid var(--trait); border-radius: 8px; }
.v6-engagements > li > span { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--v6-vert); color: var(--blanc); font-weight: 800; }
.v6-engagements h3 { margin: 0 0 6px; color: var(--bleu); font-size: 1.08rem; }
.v6-engagements p { margin: 0; }

.v6-realisations { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.v6-realisations figure { margin: 0; overflow: hidden; border-radius: 8px; background: var(--brume); box-shadow: var(--ombre-2); }
.v6-realisations img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.v6-realisations figcaption { padding: 14px 16px; color: var(--bleu); font-weight: 700; text-align: center; }

.v6-final-copy { max-width: 720px; margin-inline: auto; color: var(--blanc); text-align: center; }
.v6-final-copy p + p { margin-top: 12px; }
.v6-final-copy strong { color: var(--blanc); }

/* Les accents restent lisibles sur les fonds très clairs de cette page. */
.sect .eyebrow,
.etapes-photo .etapes-num__n {
  color: var(--v6-vert);
}

.liste-check li::before {
  background: var(--v6-vert-vif);
}

.v6-realisations figure {
  border-bottom: 3px solid var(--v6-vert-vif);
}

/* Alignement éditorial : titres centrés, contenu de lecture aligné à gauche. */
.v6-engagements h3,
.v6-engagements p,
.etapes-photo h3,
.etapes-photo p,
.faq summary,
.faq details p {
  text-align: left;
}

#eligibilite .liste-check {
  width: min(100%, 720px);
  margin-inline: auto;
}

#eligibilite .v6-copy {
  margin-top: var(--e3);
}

#final .sect__tete {
  align-items: center;
  text-align: center;
}

#final .sect__tete .h2 {
  max-width: 820px;
  margin-inline: auto;
}

@media (max-width: 700px) {
  /* Titres mobiles : largeur utile maximale et trois lignes au plus. */
  .conteneur,
  .ecran__inner {
    padding-inline: 14px;
  }

  .hero--compact .hero__inner {
    padding-inline: 10px;
  }

  .hero--compact .h1 {
    max-width: 19ch;
    margin-inline: auto;
    font-size: clamp(2rem, 8.7vw, 2.35rem);
    line-height: 1.06;
  }

  .sect__tete .h2,
  .sect__tete--centre .h2 {
    width: 100%;
    max-width: 28ch;
    font-size: 1.625rem;
    line-height: 1.14;
  }

  #final .sect__tete .h2 {
    max-width: 31ch;
    font-size: 1.5rem;
  }

  .v6-reassurance ul { grid-template-columns: 1fr 1fr; gap: 8px 10px; font-size: .83rem; }
  .v6-realisations { grid-template-columns: 1fr; }
  .v6-engagements li { grid-template-columns: 34px 1fr; gap: 12px; padding: 16px; }
  .v6-engagements > li > span { width: 32px; height: 32px; }

  .hero--compact .hero__intro,
  .hero--compact .hero__bullets {
    width: 100%;
    text-align: center;
  }

  .sect__tete,
  .sect__tete--centre {
    align-items: center;
    text-align: center;
  }

  .sect__tete .sous,
  .sect__tete--centre .sous {
    max-width: 34ch;
    margin-inline: auto;
    text-align: center;
  }

  .v6-copy,
  .liste-check,
  .liste-compris {
    text-align: left;
  }

  .liste-compris li {
    align-items: flex-start;
  }

  .form-carte__accroche,
  .lf-q,
  .lf-sub,
  .lf-rassure,
  .lf-foot {
    text-align: center;
  }
}