/* La mission : la déclaration en grand, les trois versions (la prochaine en pointillés : elle n'existe pas encore),
   le panneau de chantier, la feuille de route, le cahier des charges, l'engagement signé d'Aël.
   Page : src/pages/mission.js. Textes : t.mission. */

.mission { padding-top: var(--s-5); }

/* ---------- En-tête : la déclaration de mission, puis les trois versions ---------- */
.mission__head { display: grid; gap: var(--s-4); }
.mission__title { font-family: var(--f-sign); font-stretch: 78%; font-weight: 700; font-size: 0.8rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-2); }
.mission__statement { display: grid; font-family: var(--f-inscription); font-weight: 500; font-size: clamp(2.1rem, 1.2rem + 3.2vw, 3.9rem); line-height: 1.06; letter-spacing: -0.012em; text-wrap: balance; }
.mission__statement span:last-child { font-style: italic; }
.mission__versions { list-style: none; margin: var(--s-3) 0 0; padding: 0; display: grid; gap: var(--s-4); }
.mission__version { position: relative; display: grid; gap: 0.2rem; padding: 0.8rem 1rem 0.9rem; border: 1.5px solid var(--ink); background: var(--paper); }
.mission__version--next { background: transparent; border-style: dashed; }
.mission__version-name { font-family: var(--f-sign); font-stretch: 78%; font-weight: 700; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2); }
.mission__version-text { font-family: var(--f-inscription); font-size: var(--step-1); line-height: 1.2; }
.mission__version--next .mission__version-text { font-style: italic; }
/* Entre deux versions : la mise à jour */
.mission__version + .mission__version::before {
  content: '↓' / ''; position: absolute; left: 50%; top: calc(-1 * var(--s-4)); width: 2rem; margin-left: -1rem;
  height: var(--s-4); display: grid; place-items: center;
  font-family: var(--f-sign); font-weight: 800; color: var(--ink-2);
}
@media (min-width: 760px) {
  .mission__versions { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); }
  .mission__version + .mission__version::before { content: '→' / ''; left: calc(-1 * var(--s-5)); top: 50%; width: var(--s-5); height: 2rem; margin: -1rem 0 0; }
}

/* ---------- Texte et panneau de chantier ---------- */
.mission__intro { margin-top: var(--s-6); display: grid; gap: var(--s-5); align-items: start; }
.mission__text { display: grid; gap: 1em; max-width: 40rem; }
.mission__text p { font-family: var(--f-inscription); font-size: clamp(1.14rem, 1.04rem + 0.45vw, 1.38rem); line-height: 1.55; text-wrap: pretty; }

/* Le panneau réglementaire des chantiers : blanc, encre noire, bande de signalisation */
.site-board { background: var(--paper); border: 2px solid var(--ink); box-shadow: 0 16px 28px -22px rgba(27, 26, 24, 0.7); }
.site-board::before { content: ''; display: block; height: 10px; background: repeating-linear-gradient(135deg, var(--ink) 0 10px, var(--hazard) 10px 20px); }
.site-board__title { padding: 0.6rem 1rem 0.55rem; background: var(--ink); color: var(--paper); font-family: var(--f-sign); font-stretch: 78%; font-weight: 800; font-size: 1rem; letter-spacing: 0.1em; text-transform: uppercase; }
.site-board__list { margin: 0; padding: 0.3rem 1rem 0.8rem; }
.site-board__row { display: grid; gap: 0.1rem; padding: 0.55rem 0; border-bottom: 1px solid var(--rule); }
.site-board__row:last-child { border-bottom: 0; }
.site-board dt { font-family: var(--f-sign); font-stretch: 78%; font-weight: 600; font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); }
.site-board dd { margin: 0; font-family: var(--f-sign); font-weight: 700; font-size: 1rem; line-height: 1.3; }
@media (min-width: 900px) {
  .mission__intro { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--s-6); }
  .site-board__row { grid-template-columns: 11rem minmax(0, 1fr); align-items: baseline; gap: 0.8rem; }
}

/* ---------- Sections ---------- */
.mission__section { margin-top: var(--s-7); }
.mission__h2 { font-family: var(--f-sign); font-stretch: 78%; font-weight: 800; font-size: var(--step-2); line-height: 1.02; letter-spacing: 0.04em; text-transform: uppercase; padding-top: var(--s-3); border-top: 1.5px solid var(--ink); }
.mission__section-head { display: grid; }
.mission__section-intro { margin-top: 0.35rem; font-family: var(--f-admin); font-size: 0.8rem; color: var(--ink-2); }

/* Feuille de route : quatre étapes, la première installée */
.steps { list-style: none; margin: var(--s-4) 0 0; padding: 0; display: grid; gap: var(--s-3); }
.steps__item { position: relative; display: grid; gap: 0.35rem; align-content: start; padding: var(--s-3); border: 1px solid var(--rule); background: color-mix(in srgb, var(--paper) 60%, transparent); }
.steps__item--done { background: var(--paper); border-color: var(--ink); }
.steps__n { font-family: var(--f-admin); font-size: 0.8rem; color: var(--ink-2); }
.steps__name { font-family: var(--f-inscription); font-weight: 500; font-size: var(--step-1); line-height: 1.15; }
.steps__text { font-size: 0.95rem; line-height: 1.5; color: var(--ink-2); }
.steps__status {
  justify-self: start; margin-top: 0.4rem; padding: 0.2rem 0.5rem 0.15rem;
  font-family: var(--f-sign); font-stretch: 78%; font-weight: 800; font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--stamp); border: 1.5px solid currentColor; border-radius: var(--radius); transform: rotate(-2deg);
}
.steps__item--done .steps__status { color: var(--ink); }
@media (min-width: 760px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Cahier des charges : une ligne par œuvre, dans l'ordre de la visite */
.specs { width: 100%; margin-top: var(--s-4); border-collapse: collapse; }
.specs th, .specs td { padding: 0.75rem 0.9rem 0.8rem 0; border-bottom: 1px solid var(--rule); text-align: left; vertical-align: top; }
.specs thead th { font-family: var(--f-sign); font-stretch: 78%; font-weight: 700; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2); border-bottom: 1.5px solid var(--ink); }
.specs__inv { width: 8.5rem; font-family: var(--f-admin); font-size: 0.82rem; color: var(--ink-2); white-space: nowrap; }
.specs__work { width: 30%; font-weight: 400; }
.specs__work a { font-family: var(--f-inscription); font-style: italic; font-size: 1.1rem; line-height: 1.3; text-decoration-color: var(--rule); text-underline-offset: 0.2em; }
.specs__work a:hover { text-decoration-color: currentColor; }
.specs__next { font-family: var(--f-inscription); font-size: 1.1rem; line-height: 1.35; }
.specs__status { width: 8rem; text-align: right; }
.specs__stamp {
  display: inline-block; padding: 0.15rem 0.45rem 0.1rem; white-space: nowrap;
  font-family: var(--f-sign); font-stretch: 78%; font-weight: 800; font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--stamp); border: 1.5px solid currentColor; border-radius: var(--radius); transform: rotate(-2deg);
}
.specs tbody tr:target { background: color-mix(in srgb, var(--hazard) 18%, transparent); }
.specs tr { scroll-margin-top: var(--s-6); }

/* L'engagement : le financement, exact, puis la parole d'Aël, signée (hors fiction, comme sa page) */
.mission__fund { margin-top: var(--s-4); max-width: 44rem; font-size: 1.05rem; line-height: 1.6; }
.pledge { margin: var(--s-5) 0 0; max-width: 46rem; padding: var(--s-4) var(--s-5); background: var(--paper); border-left: 3px solid var(--ink); }
.pledge__text { margin: 0; }
.pledge__text p { font-family: var(--f-inscription); font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2.1rem); line-height: 1.3; text-wrap: pretty; }
.pledge__signature { margin-top: var(--s-3); font-family: var(--f-inscription); font-style: italic; font-size: var(--step-3); line-height: 1; }
.mission__follow { margin-top: var(--s-4); font-family: var(--f-admin); font-size: 0.82rem; color: var(--ink-2); }
.mission__actions { margin-top: var(--s-4); display: flex; flex-wrap: wrap; gap: var(--s-2); }

/* ---------- Téléphone : le cahier des charges en fiches ---------- */
@media (max-width: 599px) {
  .mission { padding-top: var(--s-4); }
  .specs thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .specs tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--s-3); row-gap: 0.25rem; padding: 0.85rem 0; border-bottom: 1px solid var(--rule); }
  .specs th, .specs td { display: block; width: auto; padding: 0; border: 0; }
  .specs__inv { grid-column: 1; grid-row: 1; font-size: 0.75rem; }
  .specs__work { grid-column: 1; grid-row: 2; }
  .specs__status { grid-column: 2; grid-row: 1 / span 2; align-self: center; text-align: right; }
  .specs__next { grid-column: 1 / -1; grid-row: 3; font-size: 1.02rem; }
  .pledge { padding: var(--s-3) var(--s-4); }
  .mission__actions .btn { width: 100%; }
}