/* CONTENUS-M1-R1 — Lisibilité mobile de la méthode E.C.A. */
#screen-methode_eca,
#screen-note_direction {
  background: var(--nf-beige);
}

/* Le responsive des trois phases dépend de la largeur réelle de la page,
   et non de la largeur globale du navigateur. Cela évite trois colonnes
   étroites lorsque l'application reste dans une coque smartphone sur desktop. */
.eca-method-page {
  container-type: inline-size;
  container-name: eca-method-page;
}

.eca-content-page {
  min-height: 100dvh;
  box-sizing: border-box;
  background:
    radial-gradient(circle at 92% 3%, rgba(196,103,66,.12), transparent 22rem),
    var(--nf-beige);
  color: var(--nf-ink);
  padding: max(14px, env(safe-area-inset-top)) 18px calc(96px + env(safe-area-inset-bottom));
}

.eca-content-header {
  display: grid;
  grid-template-columns: 42px minmax(0,1fr) 42px;
  align-items: center;
  gap: 10px;
  max-width: 720px;
  margin: 0 auto 22px;
}

.eca-content-back {
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 999px;
  background: rgba(255,255,255,.88);
  color: var(--nf-ink);
  font-size: 18px;
  cursor: pointer;
  box-shadow: 0 3px 12px rgba(42,37,32,.11);
}

.eca-content-kicker,
.eca-content-eyebrow,
.eca-method-phase {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .16em;
}

.eca-content-kicker {
  min-width: 0;
  text-align: center;
  font-size: .58rem;
  color: var(--nf-ink-mid);
}

.eca-content-header-spacer { width: 42px; }

.eca-content-hero,
.eca-note-article,
.eca-method-steps,
.eca-method-conclusion {
  width: min(100%, 680px);
  margin-inline: auto;
}

.eca-content-hero {
  padding: 4px 4px 28px;
}

.eca-content-eyebrow {
  color: var(--nf-copper);
  font-size: .58rem;
  line-height: 1.5;
  margin-bottom: 10px;
}

.eca-content-hero h1,
.eca-content-section h2,
.eca-method-card h2 {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--nf-ink);
}

.eca-method-hero h1 {
  font-size: clamp(2.7rem, 11vw, 4.5rem);
  line-height: .96;
  letter-spacing: -.035em;
  margin: 0 0 20px;
}

.eca-note-hero h1 {
  font-size: clamp(2rem, 8.3vw, 3.5rem);
  line-height: 1.08;
  letter-spacing: -.025em;
  margin: 0;
  text-wrap: balance;
}

.eca-content-lead {
  max-width: 580px;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--nf-ink-mid);
  margin: 0;
}

.eca-method-steps {
  display: grid;
  gap: 14px;
}

.eca-method-card,
.eca-content-section {
  border: 1px solid rgba(42,37,32,.09);
  border-radius: 22px;
  background: rgba(255,255,255,.68);
  box-shadow: 0 7px 26px rgba(42,37,32,.055);
}

.eca-method-card {
  display: grid;
  grid-template-columns: 52px minmax(0,1fr);
  gap: 16px;
  padding: 20px;
}

.eca-method-letter {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #FDF9EE;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.35rem;
}

.eca-method-card-evidence .eca-method-letter { background: #4A7B5C; }
.eca-method-card-conscious .eca-method-letter { background: var(--nf-copper); }
.eca-method-card-applied .eca-method-letter { background: #8B7355; }

.eca-method-phase {
  color: var(--nf-copper);
  font-size: .56rem;
  margin: 2px 0 5px;
}

.eca-method-card h2 {
  font-size: 1.3rem;
  line-height: 1.16;
  margin: 0 0 8px;
}

.eca-method-card p,
.eca-content-section p,
.eca-content-section li {
  font-size: .94rem;
  line-height: 1.72;
}

.eca-method-card p {
  color: var(--nf-ink-mid);
  margin: 0;
}

.eca-method-card > div:last-child {
  min-width: 0;
}

.eca-method-card h2,
.eca-method-card p {
  overflow-wrap: break-word;
  word-break: normal;
}

.eca-method-conclusion {
  margin-top: 18px;
}

.eca-content-section {
  padding: 22px 20px;
  margin-bottom: 16px;
}

.eca-content-section h2 {
  font-size: clamp(1.55rem, 6vw, 2rem);
  line-height: 1.15;
  margin: 0 0 18px;
}

.eca-content-section p {
  margin: 0 0 14px;
  color: var(--nf-ink);
}

.eca-content-section p:last-child { margin-bottom: 0; }

.eca-content-highlight-list {
  padding: 15px 16px;
  margin: 4px 0 17px;
  border-left: 3px solid var(--nf-copper);
  border-radius: 0 15px 15px 0;
  background: rgba(196,103,66,.075);
}

.eca-content-highlight-list p {
  position: relative;
  margin: 0 0 8px;
  padding-left: 15px;
}

.eca-content-highlight-list p:last-child { margin-bottom: 0; }
.eca-content-highlight-list p::before {
  content: "";
  position: absolute;
  left: 0;
  top: .72em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--nf-copper);
}

.eca-content-list {
  margin: 4px 0 18px;
  padding: 0;
  list-style: none;
}

.eca-content-list li {
  position: relative;
  padding: 8px 0 8px 22px;
  border-bottom: 1px solid rgba(42,37,32,.07);
}

.eca-content-list li:last-child { border-bottom: 0; }
.eca-content-list li::before {
  content: "•";
  position: absolute;
  left: 4px;
  color: var(--nf-copper);
}

.eca-content-emphasis,
.eca-content-question {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.2rem !important;
  line-height: 1.5 !important;
}

.eca-content-emphasis { color: var(--nf-copper) !important; }
.eca-content-question {
  padding: 12px 15px;
  border-radius: 14px;
  background: var(--nf-beige-light);
}

.eca-breath-section blockquote {
  margin: 20px 0;
  padding: 22px 18px;
  text-align: center;
  border: 0;
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(196,103,66,.17), rgba(255,255,255,.76));
  color: var(--nf-copper);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 2rem;
}

.eca-content-mantra {
  display: grid;
  gap: 7px;
  margin: 18px 0;
  padding: 17px;
  border-radius: 17px;
  background: rgba(74,123,92,.09);
  color: var(--nf-ink);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.03rem;
  line-height: 1.45;
}

.eca-note-closing {
  text-align: center;
  background: linear-gradient(160deg, rgba(255,255,255,.76), rgba(196,103,66,.10));
}

.eca-content-welcome {
  margin-top: 24px !important;
  color: var(--nf-copper) !important;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.7rem !important;
}

.eca-content-signature {
  color: var(--nf-ink-mid) !important;
  font-size: .92rem !important;
}

@media (min-width: 720px) {
  .eca-content-page { padding-inline: 28px; }
}

/* Les cartes restent empilées tant que la page elle-même n'offre pas
   assez d'espace. Sur un véritable grand écran, elles peuvent retrouver
   une présentation en trois colonnes confortables. */
@container eca-method-page (min-width: 960px) {
  .eca-method-steps {
    width: min(100%, 1040px);
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .eca-method-card {
    grid-template-columns: 1fr;
    align-content: start;
  }
}

@media (max-width: 370px) {
  .eca-content-page { padding-inline: 13px; }
  .eca-method-card,
  .eca-content-section { padding: 18px 16px; }
  .eca-method-card { grid-template-columns: 46px minmax(0,1fr); gap: 12px; }
  .eca-method-letter { width: 44px; height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .eca-content-page * { scroll-behavior: auto !important; }
}