/* =====================================================
   CONSEIL SNDGK — Section fondateur, page À propos

   Fichier AUTONOME, chargé uniquement par a-propos.html et a-propos-en.html :
   ne modifie ni premium.css, ni premium-themes.css, ni composants.css.

   CE QU'IL FAIT — il fait passer la section fondateur de 2400 px à environ
   un écran, sans rien retirer du récit.

   LE DIAGNOSTIC, MESURÉ. La chronologie vivait dans la colonne droite d'un
   .split : 505 px de large pour 1834 px de haut, pendant que la colonne
   gauche (photo, nom, diplômes) s'arrêtait à 425 px. Soit 1409 px de vide à
   gauche, et des paragraphes de 45 mots repliés en murs de texte à droite.
   Le rembourrage de .step (41,6 px de chaque côté, cinq fois) n'était que le
   second facteur.

   LA CORRECTION. On abandonne le .split : la carte d'identité devient un
   bandeau horizontal pleine largeur, et la chronologie prend toute la
   largeur en deux colonnes. Plus de vide, des lignes de texte deux fois plus
   longues, donc deux fois moins hautes.

   POURQUOI UNE CLASSE SUR LE BODY. Une règle de même spécificité placée plus
   bas suffirait, mais elle ne tiendrait que par l'ordre de chargement des
   <link> : déplacer une ligne dans l'en-tête casserait tout en silence.
===================================================== */

/* ---------- La carte d'identité, en bandeau ---------- */

body.page-apropos .fondateur-carte {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(1.4rem, 3vw, 2.6rem);
  align-items: center;
  padding-bottom: clamp(2rem, 4vh, 3rem);
  border-bottom: 1px solid var(--line);
  margin-bottom: clamp(2rem, 4vh, 3rem);
}

body.page-apropos .fondateur-carte img {
  width: clamp(96px, 12vw, 132px);
  height: clamp(96px, 12vw, 132px);
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--line);
}

/* Les diplômes et la phrase de perspective se placent côte à côte dès qu'il
   y a la place : empilés, ils rallongeaient le bandeau sans nécessité. */
@media (min-width: 861px) {
  body.page-apropos .fondateur-meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(1rem, 2.5vw, 2rem);
    align-items: start;
    margin-top: 0.8rem;
  }
}

/* Sous 560 px, la photo passe au-dessus : 96 px de photo plus le texte à
   côté ne laisseraient pas une mesure lisible. */
@media (max-width: 559px) {
  body.page-apropos .fondateur-carte { grid-template-columns: 1fr; }
}

/* ---------- La chronologie ----------

   Trois entrées seulement (2025, 2 ans, 5 ans) : on reste sur UNE colonne.
   Deux colonnes donneraient 2 + 1, une rangée bancale, et feraient perdre le
   filet vertical qui fait justement lire la suite comme un parcours.
   Seul le rembourrage est resserré. */

body.page-apropos .chronologie .step {
  padding: clamp(1.2rem, 2.4vw, 1.8rem) 0;
}

/* La dernière entrée ferme la liste : son filet inférieur doublerait la
   bordure du bloc « pourquoi » qui suit. */
body.page-apropos .chronologie .step:last-child { border-bottom: none; }


/* ---------- Le bloc « pourquoi » ----------

   Il ne fait pas partie du parcours professionnel : il l'explique. D'où un
   traitement distinct de .step — pas de numéro, pas de filet horizontal,
   mais un encadré qui se lit comme une note personnelle en fin de section.
   Le mettre en .step l'aurait aligné sur les dates et lui aurait fait dire
   « quatrième étape de carrière », ce qu'il n'est pas. */

body.page-apropos .fondateur-pourquoi {
  margin-top: clamp(2.5rem, 5vh, 4rem);
  padding: clamp(1.6rem, 3vw, 2.4rem);
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-left: 3px solid var(--red);
  border-radius: var(--radius-lg);
}

@media (min-width: 861px) {
  body.page-apropos .fondateur-pourquoi {
    display: grid;
    grid-template-columns: 0.8fr 1.6fr;
    gap: clamp(1.5rem, 4vw, 3rem);
    align-items: start;
  }
}

body.page-apropos .fondateur-pourquoi h3 {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 500;
  font-size: clamp(1.3rem, 2.4vw, 1.75rem);
  letter-spacing: -0.01em;
  line-height: 1.25;
  margin-top: 0.6rem;
}

body.page-apropos .fondateur-pourquoi p { color: var(--muted); }
body.page-apropos .fondateur-pourquoi p + p { margin-top: 1rem; }