/* =============================================================
   Qui sommes-nous — styles spécifiques à cette page.
   ----------------------------------------------------------------
   Les composants partagés (.page-hero, .editorial, .manifesto,
   .bridge, .factbox) restent disponibles dans site.css §6.
   Cette page utilise une section unique .territory qui absorbe
   le contenu du manifesto sous forme de sous-bloc subtil (.anime)
   et accueille le récit d'origine du fonds (.story).
   ============================================================= */

/* =========================================================
   ANCRAGE TERRITORIAL — section unique de la page
   ----------------------------------------------------------
   Composition :
     - .head    : eyebrow + h2 (en-tête pleine largeur)
     - .grid    : 2 colonnes — body (récit + anime) / factbox
   Markup :
     <section class="territory">
       <div class="container">
         <div class="head">
           <span class="eyebrow">Ancrage</span>
           <h2>… <em>mot ocre</em>.</h2>
         </div>
         <div class="grid">
           <div class="body">
             <p class="story">… <em>mot ocre</em>.</p>
             <p class="story">…</p>
             <div class="anime">
               <p class="anime-q">Ce qui nous anime ?</p>
               <p class="anime-a">Aider les plus <em>vulnérables</em>.</p>
               <p class="anime-note">…</p>
             </div>
           </div>
           <aside class="factbox">…</aside>
         </div>
       </div>
     </section>
   ========================================================= */
.territory {
  padding: clamp(96px, 12vw, 168px) 0 var(--section-y);

}

/* En-tête de section (eyebrow + h2) — pleine largeur, au-dessus de la grille */
.territory .head { margin-bottom: clamp(40px, 5vw, 64px); }
.territory .eyebrow { margin-bottom: 18px; }
.territory h2 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(32px, 3.4vw, 48px); line-height: 1.14;
  color: var(--marine); max-width: 16ch; letter-spacing: -0.014em;
}

/* Grille 2 colonnes : récit / factbox */
.territory .grid {
  display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: clamp(40px, 6vw, 96px); align-items: start;
}

/* Récit d'origine — paragraphes courts, sobres, italiques ocre pour l'emphase */
.territory .body { display: flex; flex-direction: column; gap: 22px; }
.territory .story {
  font-size: clamp(17px, 1.5vw, 19px); line-height: 1.7;
  color: var(--stone-700);
  max-width: 50ch; text-wrap: pretty;
}
.territory .story em {
  font-style: italic; color: var(--ocher); font-weight: 500;
}

/* Lede conservée — alignée visuellement sur .story pour la cohérence du flux */
.territory .lede {
  font-size: clamp(17px, 1.5vw, 19px); line-height: 1.7;
  color: var(--stone-700);
  max-width: 50ch; text-wrap: pretty;
}

/* ANIME — « Ce qui nous anime ? » intégré au flux, en peer du reste de
   la page : titre serif italique substantiel, réponse à l'échelle d'un
   manifesto, filet ocre marqué, plus d'air autour. */
.territory .anime {
  margin-top: 16px; padding-top: 48px;
  border-top: 1px solid color-mix(in srgb, var(--ocher) 55%, transparent);
  max-width: 60ch;
}
.territory .anime-q {
  font-family: var(--serif); font-style: italic; font-weight: 300;
  font-size: clamp(22px, 2vw, 28px);
  color: var(--ocher-deep); letter-spacing: -0.008em;
  margin-bottom: 22px;
}
.territory .anime-a {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.28; letter-spacing: -0.015em;
  color: var(--marine); max-width: 22ch;
  text-wrap: balance;
  margin-bottom: 28px;
}
.territory .anime-a em {
  font-style: italic; color: var(--ocher); font-weight: 400;
}
.territory .anime-note {
  font-size: clamp(16px, 1.4vw, 18px); line-height: 1.65;
  color: var(--stone-700);
  max-width: 56ch; text-wrap: pretty;
}

@media (max-width: 860px) {
  .territory .grid { grid-template-columns: 1fr; }
}