/* =========================================================
   a-propos-style.css — particularités de la page À propos
   Dépend de global.css (variables, header, footer, etc.)
   ========================================================= */

.simple-section p{
  max-width: 62ch;
  margin: 0 0 1.2rem;
  color: var(--ink);
}
.simple-section p:last-child{ margin-bottom: 0; }

/* "Le parcours" — section sombre, première du main */
.parcours-dark{
  background: var(--ink-strong);
  border-top: none;
}
.parcours-dark .eyebrow{ color: var(--ink-strong-soft); }
.parcours-dark .section-title{ color: var(--ink-strong-text); }
.parcours-dark p{ color: var(--ink-strong-soft); }
.parcours-dark .pull-quote p{ color: var(--ink-strong-soft); }

/* "La démarche" — texte + visuel à droite, aligné en haut plutôt que centré
   (le bloc de texte est bien plus haut que l'image) */
.demarche-grid{ align-items: start; }
.demarche-grid .frame{ position: sticky; top: 6rem; }

.about-grid-a { 
	text-decoration:underline;
	background-image: url(../images/external-link.svg);
	background-position: center right;
    background-repeat: no-repeat;
    background-size: 0.9em;
    padding-right: 1em;
}

.theAproposTop{grid-area: 1 / 2}

@media (max-width: 980px){
  .demarche-grid .frame{ position: static; }
  .theAproposTop{grid-area: 1 / 1}
  .simple-section p {max-width: none;}
}



.pull-quote{
  margin: 2rem 0;
  padding-left: 1.4rem;
  border-left: 2px solid var(--ink);
}
.pull-quote p{
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--ink);
  margin: 0 0 0.5rem;
  max-width: 46ch;
}
.pull-quote cite{
  display: block;
  font-style: normal;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
}