/* =============================================================
   Notre mode d'intervention — styles spécifiques.
   ----------------------------------------------------------------
   La phrase « partage mutuel » vit maintenant dans le bloc .intro
   (cf. site.css §6.1b), juste sous le titre de page. Le .modality
   est désormais une utilité non-scopée : filet ocre + label mono
   optionnel + texte serif italique, utilisable dans n'importe
   quelle section.

   Sections de cette page :
     - .intervention : factbox des critères
     - .network      : 3 paragraphes éditoriaux (fond paper-warm)
     - .board        : 2 paragraphes éditoriaux
   ============================================================= */

/* =========================================================
   PAGE FRAME — sidebar sticky (sommaire) + colonne contenu
   ----------------------------------------------------------
   Markup :
     <div class="page-frame container">
       <aside class="page-sidenav">
         <nav>
           <a href="#intervention">…</a>
           <a href="#reseau">…</a>
           <a href="#conseil">…</a>
         </nav>
       </aside>
       <div class="page-content">
         <section id="intervention">…</section>
         <section id="reseau">…</section>
         <section id="conseil">…</section>
       </div>
     </div>

   Un scrollspy en bas de la page (inline JS) met à jour .active.
   ========================================================= */
.page-frame {
  display: grid;
  grid-template-columns: minmax(200px, 240px) minmax(0, 1fr);
  gap: clamp(32px, 4vw, 64px);
}

.page-sidenav {
  position: sticky;
  top: clamp(96px, 12vh, 128px);
  align-self: start;
  padding-top: clamp(56px, 7vw, 96px);
}
.page-sidenav nav {
  display: flex; flex-direction: column;
}
.page-sidenav a {
  display: block;
  padding: 12px 0 12px 18px;
  font-family: var(--sans);
  font-size: 14px; font-weight: 500;
  color: var(--stone-700);
  border-left: 2px solid transparent;
  transition: color var(--t-fast) var(--ease-out),
              border-color var(--t-fast) var(--ease-out);
  line-height: 1.4;
}
.page-sidenav a:hover { color: var(--marine); }
.page-sidenav a.active {
  color: var(--marine);
  border-left-color: var(--ocher);
}

/* Réserve d'espace pour ne pas que le header sticky cache le début
   d'une section quand on clique sur un lien du sommaire. */
.intervention,
.network,
.board {
  scroll-margin-top: clamp(88px, 12vh, 120px);
}

/* Empilement des sections dans la colonne contenu.
   .intervention : padding-top réduit (l'intro juste au-dessus
   apporte déjà l'espace). */
.intervention {
  padding: clamp(24px, 3vw, 48px) 0 clamp(56px, 7vw, 96px);
}
.network,
.board {
  padding: clamp(56px, 7vw, 96px) 0;
  border-top: 1px solid var(--rule);
}

/* Mobile : sidenav passe en haut, horizontal, avec filet bas */
@media (max-width: 860px) {
  .page-frame {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .page-sidenav {
    position: relative;
    top: auto;
    padding-top: clamp(32px, 5vw, 48px);
    padding-bottom: clamp(16px, 2vw, 24px);
    margin-bottom: clamp(24px, 4vw, 40px);
    border-bottom: 1px solid var(--rule);
  }
  .page-sidenav nav {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0 24px;
  }
  .page-sidenav a {
    padding: 8px 0;
    border-left: 0;
    border-bottom: 2px solid transparent;
  }
  .page-sidenav a.active {
    border-left: 0;
    border-bottom-color: var(--ocher);
  }
}

/* =========================================================
   MODALITY — bloc réutilisable (filet ocre + texte éditorial)
   ----------------------------------------------------------
   Utilisable dans .intro, dans une section, etc.
   Markup :
     <div class="modality">
       <span class="modality-label">Modalités</span>  <!-- optionnel -->
       <p class="modality-text">… <em>mot ocre</em> …</p>
     </div>
   ========================================================= */
.modality {
  margin-top: clamp(32px, 4vw, 48px);
  padding-top: clamp(20px, 2.5vw, 28px);
  border-top: 1px solid color-mix(in srgb, var(--ocher) 40%, transparent);
  max-width: 60ch;
}
.modality-label {
  display: inline-block;
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ocher-deep);
  margin-bottom: 18px;
}
.modality-text {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: clamp(18px, 1.8vw, 22px);
  line-height: 1.55;
  color: var(--marine);
  max-width: 60ch;
  text-wrap: balance;
}
.modality-text em {
  font-style: italic; color: var(--ocher); font-weight: 400;
}

/* =========================================================
   SECTIONS 2 & 3 — Paragraphes éditoriaux
   ========================================================= */
.network .body,
.board .body {
  display: flex; flex-direction: column; gap: 22px;
  max-width: 60ch;
}
.network .body p,
.board .body p {
  font-size: clamp(17px, 1.5vw, 19px); line-height: 1.7;
  color: var(--stone-700);
  text-wrap: pretty;
}
.network .body em,
.board .body em {
  font-style: italic; color: var(--ocher); font-weight: 500;
}