/* ============================================================
   À PROPOS — même direction éditoriale que la homepage.
   Réutilise les variables, polices et composants de style.css
   (.eyebrow, .btn, .link-arrow, .wrap, .photo-placeholder).
   N'affecte que a-propos.html — aucune autre page ne charge ce fichier.

   Principe : les photographies sont des rectangles éditoriaux
   contenus (aspect-ratio + max-width + justify-self:center),
   jamais étirées en pleine hauteur de section — c'est le contenu
   qui occupe la majorité de la largeur, pas l'image.
   ============================================================ */

main { display: block; overflow-x: hidden; }

/* ----------------------------------------------------------
   01 — HERO
   ---------------------------------------------------------- */
.apx-hero {
  display: grid;
  grid-template-columns: minmax(0, 38fr) minmax(0, 62fr);
  align-items: stretch;
  background: var(--cream);
}
.apx-hero-visual {
  position: relative;
  overflow: hidden;
  background: var(--cream);
}
.apx-hero-visual img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: 50% 50%; display: block; filter: grayscale(100%); }
.apx-hero-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 24px;
  padding: 80px 6%;
}
.apx-hero-text .eyebrow { color: #812E40; }
.apx-hero-text h1 {
  font-size: var(--text-h1);
  line-height: var(--lh-tight);
  color: #49372F;
  max-width: 700px;
}
.apx-hero-lead { font-size: var(--text-body-lg); color: #49372F; line-height: var(--lh-body); }
.apx-hero-text p { font-size: var(--text-body-lg); color: #49372F; opacity: 0.92; line-height: var(--lh-body); max-width: 640px; }

/* ----------------------------------------------------------
   02 — MON HISTOIRE
   ---------------------------------------------------------- */
.apx-histoire { background: var(--cream); padding: 130px 0 0; }
.apx-histoire-top {
  display: grid;
  grid-template-columns: minmax(0, 63fr) minmax(0, 37fr);
  gap: 64px;
  align-items: center;
  margin-bottom: 90px;
}
.apx-histoire-text .eyebrow { color: #812E40; display: block; margin-bottom: 20px; }
.apx-histoire-text h2 { font-size: var(--text-h2); line-height: var(--lh-heading); margin-bottom: 28px; color: #49372F; max-width: 680px; }
.apx-histoire-text p { font-size: var(--text-body-lg); color: #49372F; opacity: 0.92; line-height: var(--lh-body); margin-bottom: 20px; max-width: 640px; }
.apx-histoire-visual { position: relative; aspect-ratio: 4 / 5; max-width: 380px; justify-self: center; overflow: hidden; background: var(--card); }
.apx-histoire-visual img { width: 100%; height: 100%; object-fit: cover; display: block; }

.apx-pullquote {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: clamp(1.8rem, 3.2vw, 2.6rem);
  line-height: 1.35;
  color: #49372F;
  max-width: 980px;
  padding: 0 0 110px;
}

/* ----------------------------------------------------------
   03 — EN PARALLÈLE DU CABINET
   ---------------------------------------------------------- */
.apx-parallele { background: #F5F2EE; }
.apx-parallele-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
}
.apx-parallele-visual {
  position: relative;
  overflow: hidden;
  background: var(--card);
}
.apx-parallele-visual img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; display: block; }
.apx-parallele-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 88px 6% 88px 8%;
}
.apx-parallele-text .eyebrow { color: #812E40; display: block; margin-bottom: 20px; }
.apx-parallele-text h2 { font-size: var(--text-h2); line-height: var(--lh-heading); margin-bottom: 24px; color: #49372F; max-width: 680px; }
.apx-parallele-text p { font-size: var(--text-body-lg); color: #49372F; opacity: 0.92; line-height: var(--lh-body); margin-bottom: 18px; max-width: 640px; }

/* ----------------------------------------------------------
   04 — FORMATION
   ---------------------------------------------------------- */
.apx-formation { background: var(--cream); padding: 130px 0; }
.apx-formation-head { max-width: 700px; margin-bottom: 56px; }
.apx-formation-head .eyebrow { color: #812E40; display: block; margin-bottom: 20px; }
.apx-formation-head h2 { font-size: var(--text-h2); line-height: var(--lh-heading); color: #49372F; }

.apx-formation-index { list-style: none; border-top: 1px solid #E4D9CD; max-width: 920px; }
.apx-formation-index li {
  display: flex;
  align-items: flex-start;
  gap: 36px;
  padding: 26px 0;
  border-bottom: 1px solid #E4D9CD;
}
.apx-formation-year {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 400;
  font-size: 2.3rem;
  line-height: 1;
  color: #A89584;
  flex: 0 0 100px;
}
.apx-formation-body { display: flex; flex-direction: column; gap: 6px; padding-top: 6px; }
.apx-formation-title { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1.5rem; line-height: 1.2; color: #49372F; }
.apx-formation-sub { font-family: 'Jost', sans-serif; font-size: 0.94rem; color: #8A7A6E; }

.apx-formation-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 36px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: 'Jost', sans-serif;
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #812E40;
}
.apx-formation-toggle-icon {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.3rem;
  line-height: 1;
  transition: transform 0.25s ease;
}
.apx-formation-toggle.apx-formation-toggle-open .apx-formation-toggle-icon { transform: rotate(45deg); }
.apx-formation-full { margin-top: 8px; max-width: 920px; }
.apx-formation-full .apx-formation-index { border-top: none; margin-top: 20px; }

/* ----------------------------------------------------------
   05 — AUJOURD'HUI / CTA
   ---------------------------------------------------------- */
.apx-cta { background: var(--card); padding: 150px 0; }
.apx-cta-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 40px;
  display: grid;
  grid-template-columns: minmax(0, 33fr) minmax(0, 67fr);
  gap: 64px;
  align-items: center;
}
.apx-cta-visual {
  position: relative;
  overflow: hidden;
  aspect-ratio: 3 / 4;
  max-width: 340px;
  justify-self: center;
  background: var(--cream);
}
.apx-cta-visual img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; display: block; }
.apx-cta-text { display: flex; flex-direction: column; gap: 22px; }
.apx-cta-text .eyebrow { color: #812E40; }
.apx-cta-text h2 { font-size: clamp(2.6rem, 4.2vw, 3.6rem); line-height: var(--lh-tight); color: #49372F; max-width: 680px; }
.apx-cta-text p { font-size: var(--text-body-lg); color: #49372F; opacity: 0.92; line-height: var(--lh-body); max-width: 640px; }
.apx-languages {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  font-family: 'Jost', sans-serif;
  font-size: 0.95rem;
  color: #49372F;
}
.apx-languages-label {
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #A89584;
}
.apx-cta-text .hero-actions { margin-top: 8px; }

/* ----------------------------------------------------------
   RESPONSIVE
   ---------------------------------------------------------- */
@media (max-width: 900px) {
  .apx-hero { grid-template-columns: 1fr; padding: 0; }
  .apx-hero-visual { aspect-ratio: 4 / 3; max-width: none; }
  .apx-hero-text { padding: 56px 40px; }

  .apx-histoire { padding: 88px 0 0; }
  .apx-histoire-top { grid-template-columns: 1fr; gap: 40px; margin-bottom: 64px; }
  .apx-histoire-visual { aspect-ratio: 4 / 3; max-width: none; }
  .apx-pullquote { padding-bottom: 72px; }

  .apx-parallele { padding: 0; }
  .apx-parallele-inner { grid-template-columns: 1fr; }
  .apx-parallele-visual { aspect-ratio: 4 / 3; max-width: none; }
  .apx-parallele-text { padding: 56px 40px; }

  .apx-formation { padding: 88px 0; }
  .apx-formation-index li { gap: 20px; }
  .apx-formation-year { flex: 0 0 64px; font-size: 1.8rem; }

  .apx-cta { padding: 96px 0; }
  .apx-cta-inner { grid-template-columns: 1fr; gap: 40px; padding: 0 40px; }
  .apx-cta-visual { max-width: 260px; margin: 0 auto; }
}

@media (max-width: 760px) {
  .apx-hero-text { padding: 48px 24px; gap: 18px; }
  .apx-hero-text p { max-width: none; }

  .apx-histoire-text p { max-width: none; }
  .apx-pullquote { font-size: 1.6rem; }

  .apx-parallele-text { padding: 48px 24px; }
  .apx-parallele-text p { max-width: none; }

  .apx-formation-index li { flex-wrap: wrap; }

  .apx-cta-inner { padding: 0 24px; }
  .apx-cta-text p { max-width: none; }

  .wrap { padding: 0 24px; }
}