/* =============================================================
   Notre engagement — styles spécifiques.
   ----------------------------------------------------------------
   Le pattern .intro (eyebrow + phrase d'amorce) est partagé dans
   site.css §6.1b. Ce fichier ne contient plus que .engagement-block,
   propre à la séquence de thématiques repliables de cette page.
   ============================================================= */

/* =========================================================
   ENGAGEMENT — séquence de thématiques repliables
   ----------------------------------------------------------
   Chaque thématique est un <details> natif. Pas de JS requis
   pour l'ouverture/fermeture ; un petit script au bas de la
   page ouvre automatiquement le bloc correspondant à l'ancre
   (#enfance / #insertion / #ecologie) si on arrive par un lien
   externe.

   Markup :
     <section class="engagement">
       <div class="container">
         <details class="engagement-block" id="enfance">
           <summary>
             <div class="summary-text">
               <span class="num">01 — Cœur historique</span>
               <h2>Enfance &amp; Jeunesse</h2>
             </div>
             <span class="toggle" aria-hidden="true"></span>
           </summary>
           <div class="content">
             <div class="body">
               <p>… <a href="…">lien éditorial</a> …</p>
             </div>
             <h3>Domaines d'intervention</h3>
             <ul class="bullets"><li>…</li></ul>
           </div>
         </details>
         …
       </div>
     </section>
   ========================================================= */
.engagement { padding: 0 0 var(--section-y); }

.engagement-block {
  border-top: 1px solid var(--rule);
}
.engagement-block:first-child { border-top: 0; }

/* ----- Summary (entête cliquable) ----- */
.engagement-block > summary {
  list-style: none; cursor: pointer;
  padding: clamp(28px, 4vw, 48px) 0;
  display: flex; align-items: center; justify-content: space-between;
  gap: clamp(24px, 3vw, 48px);
  transition: color var(--t-fast) var(--ease-out);
}
.engagement-block > summary::-webkit-details-marker { display: none; }
.engagement-block > summary::marker { content: ""; }

.engagement-block > summary .summary-text {
  display: flex; flex-direction: column; gap: 12px;
}

/* Marqueur "01 — Cœur historique" — mono ocre-deep */
.engagement-block .num {
  display: inline-block;
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.16em; color: var(--ocher-deep);
  text-transform: uppercase;
  transition: color var(--t-fast) var(--ease-out);
}

/* Titre de la thématique — un cran sous le h2 standard */
.engagement-block h2 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(28px, 3vw, 40px); line-height: 1.14;
  color: var(--marine); letter-spacing: -0.014em;
  max-width: 22ch;
  margin: 0;
  transition: color var(--t-fast) var(--ease-out);
}

.engagement-block > summary:hover h2 { color: var(--ocher-deep); }
.engagement-block > summary:hover .num { color: var(--ocher); }
.engagement-block > summary:focus-visible {
  outline: 2px solid var(--ocher); outline-offset: 4px; border-radius: var(--r-1);
}

/* ----- Toggle + / − (CSS pur, animé) ----- */
.engagement-block > summary .toggle {
  flex: none; position: relative;
  width: 32px; height: 32px;
  color: var(--ocher);
}
.engagement-block > summary .toggle::before,
.engagement-block > summary .toggle::after {
  content: ""; position: absolute;
  top: 50%; left: 50%;
  background: currentColor;
  transition: transform var(--t-base) var(--ease-out);
}
.engagement-block > summary .toggle::before {
  width: 20px; height: 1.5px;
  transform: translate(-50%, -50%);
}
.engagement-block > summary .toggle::after {
  width: 1.5px; height: 20px;
  transform: translate(-50%, -50%);
}
/* État ouvert : la barre verticale disparaît → reste un "−" */
.engagement-block[open] > summary .toggle::after {
  transform: translate(-50%, -50%) scaleY(0);
}

/* ----- Content (partie dépliée) ----- */
.engagement-block .content {
  padding-bottom: clamp(40px, 6vw, 80px);
}

/* Corps éditorial */
.engagement-block .body {
  display: flex; flex-direction: column; gap: 20px;
  max-width: 64ch;
}
.engagement-block .body p {
  font-size: clamp(17px, 1.5vw, 19px); line-height: 1.7;
  color: var(--stone-700);
  text-wrap: pretty;
}
.engagement-block .body em {
  font-style: italic; color: var(--ocher); font-weight: 500;
}

/* Liens inline dans le corps — souligné ocre discret */
.engagement-block .body a {
  color: var(--ocher-deep);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--ocher) 50%, transparent);
  text-underline-offset: 3px;
  transition: color var(--t-fast) var(--ease-out),
              text-decoration-color var(--t-fast) var(--ease-out);
}
.engagement-block .body a:hover {
  color: var(--ocher);
  text-decoration-color: var(--ocher);
}

/* Sous-titre « Domaines d'intervention » — petit label avec tick ocre */
.engagement-block h3 {
  font-family: var(--sans); font-weight: 600;
  font-size: 12px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--marine);
  margin: 44px 0 22px;
  display: inline-flex; align-items: center; gap: 10px;
}
.engagement-block h3::before {
  content: ""; width: 24px; height: 1px; background: var(--ocher);
}

/* Liste des domaines — bullets ocre, sobres */
.engagement-block .bullets {
  display: flex; flex-direction: column; gap: 12px;
  max-width: 64ch;
}
.engagement-block .bullets li {
  display: flex; gap: 14px; align-items: flex-start;
  font-size: 15px; line-height: 1.55; color: var(--ink);
}
.engagement-block .bullets li::before {
  content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%;
  background: var(--ocher); margin-top: 7px;
}