/* ============================================================
   BLOC key_statements — phrases-clés mises en avant
   Port fidèle de .problem-keystatement (maquette 2026-06-10, mission.html).
   Bloc autonome sur fond beige : l'écart au-dessus est porté par le
   padding-bottom du bloc précédent (.problem), l'écart en dessous par le
   padding-bottom de ce bloc (= --statement-gap, comme avant le .section-statement).
   Reveal générique .is-in-view (common.js, via data-reveal sur .problem-keystatement).
   ============================================================ */
.key-statements {
  background: var(--c-bg-cream);
  /* Pas de padding-top : l'écart camembert → phrases-clés vient du
     padding-bottom de .problem (clamp 90/11vw/160), comme la marge d'origine. */
  padding: 0 0 var(--statement-gap);
}

.problem-keystatement {
  margin: 0 auto;
  max-width: min(85vw, 980px);
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 4vh, 56px);
  text-align: left;
  /* État initial du reveal (.is-in-view ajouté par common.js via data-reveal) */
  opacity: 0;
  transform: translateY(24px);
}
.problem-keystatement__line {
  position: relative;
  margin: 0;
  padding: clamp(14px, 1.8vw, 26px) clamp(20px, 2.5vw, 36px);
  font-family: var(--ff-display);
  font-size: clamp(1.25rem, 2.2vw, 2rem);
  font-weight: 500;
  line-height: 1.35;
  color: var(--c-blue);
  letter-spacing: -0.005em;
  border-left: 3px solid var(--c-copper);
  background: linear-gradient(90deg,
              rgba(142, 117, 71, 0.08) 0%,
              rgba(142, 117, 71, 0) 60%);
}
.problem-keystatement__line em {
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-weight: 500;
  color: var(--c-copper);
  letter-spacing: -0.01em;
}

@media (prefers-reduced-motion: reduce) {
  .problem-keystatement { opacity: 1; transform: none; }
}