/* Composition propre à Mission ; palette dans theme.css et polices locales dans fonts.css. */
.mission-page { --ink: #f7f4fb; --canvas: #1d1729; background: var(--canvas); color: var(--ink); }
.mission-page h1, .mission-page h2, .mission-page h3 { font-weight: 500; }
.mission-page h1, .mission-page h2, .mission-page h3, .mission-page p { overflow-wrap: break-word; }
.mission-page p { font-size: 18px; line-height: 1.65; }
.mission-page .mission-kicker { margin: 0 0 24px; font-size: 12px; font-weight: 500; letter-spacing: .18em; }
.mission-page em { font-style: normal; }
/* Bandeau violet et motifs historiques : espace libre autour du texte. */
.mission-hero { position: relative; overflow: hidden; color: #f7f4fb; background: #1d1729; isolation: isolate; }
.mission-hero::before { content: ''; position: absolute; z-index: -1; inset: 0; opacity: var(--interior-waves-opacity); background: url("../images/mission/vagues-o0SVuHo.png") center / cover no-repeat; }
.mission-hero__layout { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 40px; align-items: center; padding-block: clamp(48px, 6vw, 80px); }
.mission-hero .mission-kicker { color: #f2916d; }
.mission-hero h1 { font-size: clamp(42px, 5.6vw, 76px); line-height: 1.03; letter-spacing: -.025em; margin: 0 0 28px; max-width: none; }
.mission-hero h1 em { color: #f2916d; }
.mission-hero__copy > p:not(.mission-kicker) { max-width: 560px; color: #c3b9d1; }
.mission-hero__copy .mission-lead { font-size: clamp(21px, 2.1vw, 26px); color: #fff; line-height: 1.4; }
.mission-discover { display: inline-flex; align-items: center; gap: 24px; margin-top: 16px; min-height: 44px; color: #fff; text-decoration: none; border-bottom: 1px solid #f2916d; font-weight: 500; }
.mission-discover span { color: #f2916d; font-size: 24px; }
.mission-art { position: relative; height: 420px; width: 100%; max-width: 430px; justify-self: end; }
.mission-art__axis { position: absolute; top: 35px; left: 50%; height: 335px; border-left: 1px solid #f2916d80; transform: rotate(32deg); }
.mission-art__sun { position: absolute; width: 54%; height: auto; top: 0; left: 0; }
.mission-art__mountains { position: absolute; width: 88%; height: auto; bottom: 35px; right: 0; }
.mission-art__caption { position: absolute; right: 5%; top: 12px; font-size: 11px; line-height: 1.9; letter-spacing: .12em; color: #c3b9d1; }
/* Un fil de lecture continu, dans la même colonne du constat à la conclusion. */
.mission-reading { max-width: 720px; scroll-margin-top: 24px; }
.mission-passage { padding-top: clamp(36px, 5.5vw, 68px); }
.mission-passage h2, .mission-ending h2 { font-size: clamp(27px, 3.1vw, 38px); line-height: 1.15; margin: 0 0 18px; letter-spacing: -.02em; }
.mission-passage p { color: var(--muted); margin: 0; }
.mission-passage p + p { margin-top: 14px; }
.mission-passage .mission-statement { margin-top: 24px; color: var(--accent); font-size: clamp(23px, 3vw, 34px); line-height: 1.25; }
.mission-statement strong { font-weight: 500; }
.mission-ending { padding-block: clamp(36px, 5.5vw, 68px); }
.mission-cta { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; color: var(--text); text-decoration-color: var(--accent); text-underline-offset: 5px; font-weight: 500; }
.mission-cta span, .mission-cta:hover { color: var(--accent); }
.mission-page a:focus-visible { outline: 3px solid currentColor; outline-offset: 5px; }
/* La composition et la taille des motifs suivent la largeur disponible. */
@media (max-width: 900px) {
    .mission-hero__layout { grid-template-columns: minmax(0, 1fr) minmax(0, .7fr); gap: 20px; }
    .mission-art { height: 340px; }
    .mission-art__axis { height: 270px; }
    .mission-art__caption { top: 110px; right: 0; }
}
@media (max-width: 650px) {
    .mission-hero__layout { grid-template-columns: minmax(0, 1fr); gap: 32px; }
    .mission-hero h1 { font-size: clamp(36px, 8.7vw, 56px); }
    .mission-art { height: 230px; max-width: 300px; justify-self: center; }
    .mission-art__sun { width: 42%; }
    .mission-art__mountains { width: 70%; bottom: 0; }
    .mission-art__axis { top: 20px; height: 190px; }
    .mission-art__caption { top: 0; right: 0; font-size: 10px; }
}

/* Les deux liens restent lisibles lorsque la largeur impose un retour à la ligne. */
.mission-related { display: flex; flex-wrap: wrap; gap: 0 24px; margin-top: 12px; }