/* =========================================================
   À PROPOS — page éditoriale (ton manifeste).
   Charte de la home (Newsreader / Source Sans 3, terracotta/espresso/beige).
   Réutilise tokens.css / base.css / components.css. Pas de style « légal ».
   ========================================================= */

/* ---- En-tête : titre + portrait ---- */
.about-head { padding-block: clamp(3rem, 6vw, 5.5rem) clamp(2rem, 4vw, 3.5rem); }
.about-head-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
/* Titre plus long qu'avant (phrase complète) → taille de titre (niveau H2/display
   réduit) pour tenir proprement dans la colonne texte du hero à 2 colonnes. */
.about-head h1 { font-size: clamp(2rem, 3.3vw, 2.9rem); line-height: 1.12; letter-spacing: -0.015em; margin-bottom: 1.1rem; }
.about-head .eyebrow { margin-bottom: 1rem; }
.about-hero-lead { font-size: var(--fs-lead); color: var(--espresso-soft); line-height: 1.55; }
.about-subtitle { font-family: var(--font-title); font-style: italic; font-size: clamp(1.2rem, 2.2vw, 1.65rem); color: var(--terracotta-deep); }

/* Portrait (placeholder à remplacer) — s'appuie sur .photo-slot de base.css */
.about-portrait { margin: 0; }
/* Vaut pour le placeholder (.photo-slot) ET la vraie photo (.portrait-img) :
   même largeur max, même centrage, même ombre portée. */
.about-portrait .photo-slot,
.about-portrait .portrait-img { max-width: 400px; margin-inline: auto; box-shadow: 0 24px 48px -28px rgba(61, 43, 31, 0.4); }

/* ---- Corps narratif : colonne de lecture resserrée ---- */
.about-prose { max-width: 40rem; margin-inline: auto; }
.about-prose p { font-size: var(--fs-lead); color: var(--espresso-soft); margin-bottom: 1.5rem; }
.about-prose p:last-child { margin-bottom: 0; }

/* Passages "manifeste" : une phrase par ligne, respiration légère entre les lignes */
.about-prose .about-verse .vl { display: block; }
.about-prose .about-verse .vl + .vl { margin-top: .45rem; }

/* Mots-clés en écho au vocabulaire NouvElle : terracotta + gras (700) pour
   bien ressortir. Pas d'italique — réservé au pull quote final. 4 à 6 occurrences. */
.about-prose .kw { color: var(--terracotta-deep); font-weight: 700; }

/* ---- Pull quote : respiration éditoriale (italique terracotta, cf. hero) ---- */
.about-pullquote {
  margin: clamp(2.75rem, 5vw, 4rem) auto;
  max-width: 24ch;
  font-family: var(--font-title); font-style: italic;
  font-size: clamp(1.8rem, 3.4vw, 2.7rem); line-height: 1.18;
  letter-spacing: -0.01em; color: var(--terracotta-deep);
  text-align: center; text-wrap: balance;
}

/* =========================================================
   REFONTE 2026 — 4 sections (hero / mon parcours / pourquoi / repères).
   ========================================================= */

/* Surtitre eyebrow dans la colonne narrative : réaffirme le style (sinon
   .about-prose p écraserait taille + couleur). */
.about-prose .eyebrow { font-size: .78rem; color: var(--terracotta-deep); margin: 0 0 1.1rem; }

/* Titres de section dans la colonne de lecture (Newsreader, un cran sous --fs-h2
   pour rester équilibrés dans la colonne étroite sur des phrases longues). */
.about-h2 {
  font-size: clamp(1.55rem, 2.6vw, 2.2rem); line-height: 1.2;
  margin-bottom: 1.4rem; text-wrap: balance;
}

/* Exergue mid-texte : Newsreader italique centrée, plus grande que le corps. */
.about-exergue {
  max-width: 30ch; margin: clamp(1.75rem, 3.5vw, 2.5rem) auto;
  font-family: var(--font-title); font-style: italic;
  font-size: clamp(1.4rem, 2.5vw, 1.95rem); line-height: 1.3;
  letter-spacing: -0.01em; color: var(--espresso);
  text-align: center; text-wrap: balance;
}

/* Pull-quote de clôture : calibrée sur 34ch → 2 lignes équilibrées
   (une phrase par ligne), cf. .acc-pullquote de la page accompagnement. */
.about-quote {
  max-width: 34ch; margin: clamp(2.5rem, 5vw, 3.75rem) auto 0;
  font-family: var(--font-title); font-style: italic;
  font-size: clamp(1.6rem, 2.8vw, 2.25rem); line-height: 1.25;
  letter-spacing: -0.01em; color: var(--espresso);
  text-align: center; text-wrap: balance;
}
.about-exergue .hl, .about-quote .hl { color: var(--terracotta-deep); }

/* ---- Section 4 « Quelques repères » : grille 2 colonnes égales ---- */
.about-reperes-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 4vw, 3.5rem); align-items: stretch;
}
/* Colonne gauche : carte crème, liste ✓ centrée verticalement (hauteurs proches) */
.about-reperes-card {
  background: var(--cream); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: clamp(1.75rem, 3vw, 2.5rem);
  box-shadow: 0 18px 40px -30px rgba(61, 43, 31, 0.35);
  display: flex; flex-direction: column; justify-content: center;
}
.about-check-list { display: grid; gap: .95rem; margin: 0; padding: 0; list-style: none; }
.about-check-list li {
  position: relative; padding-left: 1.9rem;
  color: var(--espresso-soft); font-size: var(--fs-lead); line-height: 1.5;
}
.about-check-list li::before {
  content: "✓"; position: absolute; left: 0; top: 0;
  color: var(--terracotta-deep); font-weight: 700; line-height: inherit;
}
.about-check-list strong { color: var(--espresso); font-weight: 700; }

/* Colonne droite : texte + 3 lignes méthode (nom d'étape Newsreader terracotta) */
.about-reperes-text { align-self: center; }
.about-reperes-text > p { font-size: var(--fs-lead); color: var(--espresso-soft); line-height: 1.6; margin: 0; }
.about-method-lines { margin-top: 1.5rem; display: grid; gap: 1rem; }
.about-method-lines p { font-size: var(--fs-lead); color: var(--espresso-soft); line-height: 1.55; margin: 0; }
/* Intitulés méthode (Nouvelle conscience/décision/trajectoire) : Newsreader (serif)
   suivis d'un texte Source Sans 3 (sans serif). À taille égale le Newsreader paraît
   optiquement plus petit → léger +1.08em (~+1.6px) pour rééquilibrer, SANS toucher
   la graisse (finesse voulue) ni le texte explicatif. */
.ml-name { font-family: var(--font-title); font-weight: 500; color: var(--terracotta-deep); font-size: 1.08em; }

/* Conclusion + boutons */
.about-reperes-outro {
  max-width: 62ch; margin: clamp(2rem, 4vw, 3rem) auto 0; text-align: center;
  font-size: var(--fs-lead); color: var(--espresso-soft); line-height: 1.6;
}
.about-reperes-cta { margin-top: clamp(1.75rem, 3.5vw, 2.5rem); display: flex; justify-content: center; gap: 1.25rem; flex-wrap: wrap; }
/* Bouton secondaire : contour terracotta (distinct du primaire plein) */
.about-reperes-cta .btn-outline { border-color: var(--terracotta-deep); color: var(--terracotta-deep); }
.about-reperes-cta .btn-outline:hover { border-color: var(--terracotta-darker); color: var(--terracotta-darker); background: transparent; }
/* Lien texte discret vers la FAQ (maillage interne) — style de lien inline du site */
.about-reperes-faqlink { margin-top: 1rem; text-align: center; font-size: var(--fs-small); color: var(--espresso-soft); }
.about-reperes-faqlink a { color: var(--terracotta-deep); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; transition: color .2s ease; }
.about-reperes-faqlink a:hover { color: var(--terracotta-darker); }

@media (max-width: 760px) {
  .about-reperes-grid { grid-template-columns: 1fr; }
  .about-reperes-card { justify-content: flex-start; }
}

/* ---- Carte « Mon parcours » ---- */
.about-parcours .parcours-card {
  background: var(--cream); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: clamp(1.75rem, 4vw, 3rem); max-width: 46rem; margin-inline: auto;
}
.parcours-card h2 { font-size: var(--fs-h3); margin-bottom: 1.5rem; }
.parcours-list { display: grid; gap: 1.05rem; }
.parcours-list li {
  position: relative; padding-left: 2rem;
  color: var(--espresso-soft); font-size: var(--fs-lead); line-height: 1.55;
}
.parcours-list li::before {
  content: ""; position: absolute; left: 0; top: calc(.825em - 5px);
  width: 10px; height: 10px; border-radius: 50%; background: var(--terracotta);
}

/* ---- CTA final : styles repris À L'IDENTIQUE de la home (.cta-band dans
   home.css) pour un rendu rigoureusement identique. Le bandeau utilise son
   propre conteneur large (.cta-inner, 88ch), indépendant de la colonne
   narrative resserrée au-dessus. ---- */
.cta-band { background: var(--terracotta-deep); color: var(--cream); }
.cta-band .cta-inner { max-width: 88ch; margin-inline: auto; text-align: center; }
/* Espacements internes augmentés (~+50 %) pour faire respirer le bandeau. */
.cta-band h2 { color: var(--cream); margin-bottom: 1.875rem; }
.cta-band .lead { color: color-mix(in srgb, var(--cream) 86%, var(--terracotta-deep)); margin-bottom: 3.375rem; }
.cta-band .cta-actions { display: flex; justify-content: center; gap: 1.5rem; flex-wrap: wrap; }

/* ---- Responsive ---- */
@media (max-width: 860px) {
  .about-head-grid { grid-template-columns: 1fr; }
  .about-portrait { max-width: 360px; margin-inline: auto; }
}