/* ===== Page Méthode ===== */

/* Hero méthode */
.method-hero { background: var(--bg-2); border-bottom: 1px solid var(--line-soft); }
.method-hero .wrap-narrow { text-align: center; }
.method-hero .kicker { justify-content: center; margin-bottom: 22px; }
.method-hero .h-display { margin-bottom: 24px; }
.method-hero .lead { margin-inline: auto; max-width: 60ch; }

/* Origine / référence Pivotal */
.origin-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(36px, 5vw, 72px); align-items: center; }
.origin-ph { aspect-ratio: 4/3; width: 100%; }
.origin-copy .kicker { margin-bottom: 20px; }
.origin-copy .h2 { margin-bottom: 20px; }
.origin-copy p { color: var(--ink-soft); }
.origin-copy .lead { color: var(--ink-soft); }
@media (max-width: 900px) { .origin-grid { grid-template-columns: 1fr; } }

/* Principes */
.principles { margin-top: 8px; }
.principle { padding-top: 24px; border-top: 1px solid var(--line); }
.principle .pn { font-family: var(--mono); font-size: 12.5px; color: var(--blue); letter-spacing: 0.08em; margin-bottom: 14px; }
.principle h3 { margin-bottom: 12px; }
.principle p { font-size: 15.5px; color: var(--ink-soft); margin: 0; }

/* Phases détaillées (timeline verticale) */
.phases { margin-top: 8px; display: flex; flex-direction: column; gap: 0; }
.phase {
  display: grid; grid-template-columns: 220px 1fr; gap: clamp(24px, 4vw, 64px);
  padding-block: clamp(34px, 4vw, 52px);
  border-top: 1px solid var(--line-dark);
}
.phase:last-child { border-bottom: 1px solid var(--line-dark); }
.phase-side .ph-no { font-family: var(--mono); font-size: 13px; letter-spacing: 0.1em; color: var(--blue-bright); text-transform: uppercase; }
.phase-side .ph-dur { display: block; margin-top: 10px; font-size: 14px; color: oklch(0.70 0.02 255); }
.phase-body h3 { margin-bottom: 16px; font-size: clamp(22px, 2.4vw, 30px); }
.phase-body > p { color: oklch(0.80 0.015 255); max-width: 64ch; }
.phase-deliv { list-style: none; padding: 0; margin: 22px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 28px; }
.phase-deliv li { font-size: 14.5px; color: oklch(0.84 0.015 255); padding-left: 24px; position: relative; }
.phase-deliv li::before { content: "→"; position: absolute; left: 0; color: var(--blue-bright); }
@media (max-width: 760px) { .phase { grid-template-columns: 1fr; gap: 16px; } .phase-deliv { grid-template-columns: 1fr; } }

/* Garanties */
.guarantees { margin-top: 8px; }
.guarantee .g-ic { width: 40px; height: 40px; border-radius: 8px; background: var(--blue-tint); display: grid; place-items: center; color: var(--blue-deep); font-family: var(--serif); font-size: 20px; font-weight: 600; margin-bottom: 18px; }
.guarantee h3 { margin-bottom: 10px; }
.guarantee p { font-size: 15px; color: var(--ink-soft); margin: 0; }

/* FAQ */
.faq { max-width: 820px; margin-inline: auto; margin-top: 8px; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary { cursor: pointer; list-style: none; padding: 24px 40px 24px 0; font-family: var(--serif); font-size: clamp(19px, 2vw, 23px); font-weight: 500; color: var(--ink); position: relative; transition: color .15s; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; position: absolute; right: 0; top: 22px; font-family: var(--mono); font-size: 24px; color: var(--blue); transition: transform .2s; font-weight: 400; }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item summary:hover { color: var(--blue-deep); }
.faq-answer { padding: 0 40px 26px 0; color: var(--ink-soft); font-size: 16px; line-height: 1.6; }
.faq-answer p { margin: 0; }