/* ─────────────────────────────────────────────────────────────────────────
   Page « À propos » (template-apropos.php), page « Pourquoi choisir
   MLinguistique ». Chargée uniquement sur ce gabarit (handle
   « ml-page-apropos », voir les lignes d'enfilage à ajouter dans
   functions.php), dépendante de main.css : tous les tokens (--ml-*) sont lus
   depuis son :root, jamais redéclarés ici.

   Mobile first, palier principal à 900px comme le reste du thème.

   AUCUN SCRIPT ÉCRIT POUR CETTE PAGE. Les deux animations propres à ce
   gabarit (le portrait collant, le trait de la frise qui se dessine) sont en
   CSS pur : position: sticky pour le portrait (aucun JavaScript n'est
   nécessaire pour ça), et animation-timeline: view() pour le trait, une
   fonctionnalité native du navigateur qui lie une animation à la position de
   défilement, sans bibliothèque. Deux garde-fous, chacun expliqué à son
   endroit : la fonctionnalité est mise derrière @supports (un navigateur qui
   ne la connaît pas voit simplement un trait déjà tracé, jamais un trait
   caché), et toute la déclaration est en plus mise derrière
   @media not (prefers-reduced-motion: reduce).

   Depuis août 2026 (demande de Marino), le récit (« Qui suis-je ») et la
   frise (« Ce que ça change pour toi ») sont réunis dans UNE SEULE section,
   à côté d'un portrait désormais vertical (9/16). Comme la frise garde son
   tracé en CSS pur, c'est la section entière qui porte data-ml-motion="off"
   (posé dans template-apropos.php) : jamais deux moteurs sur la même section,
   quitte à ce que le récit perde son fondu d'entrée au profit du tracé de la
   frise. Seuls la FAQ et l'appel final restent au moteur JavaScript par
   défaut du thème (assets/js/ml-motion.js, non modifié ici), exactement
   comme la FAQ et l'appel final de la page Formule (fiche-formule.css).
───────────────────────────────────────────────────────────────────────── */

/* ── HAUT DE PAGE : clair, volontairement PAS le bandeau violet plein qui
   ouvre déjà Langue, Formule, Contact, Pays et Ville. C'est tout le sens de
   ce nouveau modèle : ne pas reproduire le bandeau que cette page recyclait
   sans y avoir droit. Le filigrane du globe (.ml-watermark, main.css) est le
   seul écho de marque du haut de page. ── */
/* LE BANDEAU VIOLET, comme les pages Langue, Formule, Contact, Pays et Ville
   (demande de Marino, aout 2026).

   Ce modele avait ete cree avec un haut de page CLAIR, justement pour ne pas
   ressembler aux autres. A l'usage, Marino a tranche dans l'autre sens : la
   page detonnait au lieu de se distinguer. La note du modele dans le CLAUDE.md
   du projet a ete mise a jour, pour que personne ne restaure le fond clair au
   nom d'une regle qui n'a plus cours. */
.ml-apropos-hero {
  background: var(--ml-accent);
  color: #fff;
  padding-block: calc(var(--ml-header-h) + var(--ml-space-lg)) var(--ml-space-xl);
  border-end-end-radius: 140px;
}
/* Le fil d'Ariane vit DANS le bandeau, et non au dessus sur le fond clair, ou
   il flottait tout seul (constat de Marino). Meme traitement que sur la fiche
   pays et la page contact, sans l'ombre portee : le fond est ici un aplat, pas
   une photo. Les proprietes de mise en page du fil generique (main.css :
   largeur maximale centree, padding) sont annulees, .ml-container les porte
   deja. */
.ml-apropos-hero-inner .ml-fil-ariane {
  max-inline-size: none;
  margin: 0 0 var(--ml-space-sm);
  padding: 0;
  color: rgba(255, 255, 255, 0.9);
}
.ml-apropos-hero-inner .ml-fil-ariane a {
  color: rgba(255, 255, 255, 0.9);
}
.ml-apropos-hero-inner .ml-fil-ariane a:hover,
.ml-apropos-hero-inner .ml-fil-ariane a:focus-visible {
  color: #fff;
}
.ml-apropos-hero-inner .ml-fil-ariane a:focus-visible {
  outline-color: #fff;
}
.ml-apropos-hero-inner .ml-fil-ariane li[aria-current="page"] {
  color: #fff;
}
.ml-apropos-hero-inner h1 {
  max-inline-size: 18ch;
  margin-block: 0 var(--ml-space-sm);
  color: #fff;
}
.ml-apropos-hero-inner p {
  max-inline-size: 58ch;
  color: rgba(255, 255, 255, 0.9);
  font-size: var(--ml-fs-lg);
}

/* ── RÉCIT ET FRISE, réunis : portrait vertical (9/16) collant à gauche sur
   bureau, « Qui suis-je » puis « Ce que ça change pour toi » l'un sous
   l'autre dans une même colonne de droite (demande de Marino, août 2026).
   Même procédé que la carte devis de la page Formule (fiche-formule.css,
   .ml-formule-devis) : align-items: start sur la grille, position: sticky
   sur la colonne courte. Sur mobile, aucune des deux règles à 900px ne
   s'applique : le portrait redevient un bloc ordinaire, en tête de section,
   jamais collant (un élément collant sur un écran étroit gêne plus qu'il
   n'aide, la place manque déjà pour le texte), et l'ordre du HTML suffit à
   le poser au dessus du texte, dans son format 9/16 inchangé. ── */
.ml-apropos-histoire {
  background: var(--ml-bg);
}
.ml-apropos-histoire-layout {
  display: grid;
  gap: var(--ml-space-lg);
}
@media (min-width: 900px) {
  .ml-apropos-histoire-layout {
    grid-template-columns: 460px minmax(0, 1fr);
    align-items: start;
    gap: var(--ml-space-xl);
  }
  /* Sans portrait (repli manquant) : une seule colonne enfant occuperait
     sinon la piste de 300px par défaut et laisserait le texte à l'étroit,
     voir l'en-tête de ce fichier pour le repère du même piège ailleurs dans
     le thème. */
  .ml-apropos-histoire-layout--seul {
    grid-template-columns: minmax(0, 1fr);
  }
  .ml-apropos-portrait {
    position: sticky;
    /* Même formule que le sommaire de la page d'information et la carte
       devis de la page Formule : elle tient compte de la barre de menu
       collante. */
    top: calc(var(--ml-header-h) + var(--ml-space-lg));
  }
}
.ml-apropos-portrait {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ml-space-sm);
  text-align: center;
}
/* AUCUN RECADRAGE : la photo garde ses proportions reelles.

   Le cadre etait fixe en 9/16 et la photo recadree en « cover ». Une photo
   verticale mais plus large que ce format y perdait ses bords, et le cadrage
   par defaut, centre, zoomait sur le visage (constat de Marino). Une photo de
   portrait est justement ce qu'il ne faut jamais recadrer a l'aveugle : c'est
   la cliente qui sait ou elle coupe.

   La colonne s'elargit donc, et la hauteur suit la photo. C'est aussi le SEUL
   levier pour la faire monter en hauteur, demande ensuite par Marino : sans
   recadrage, la photo ne peut grandir que dans les deux sens a la fois. */
.ml-apropos-portrait-photo {
  display: block;
  inline-size: 100%;
  max-inline-size: 460px;
  block-size: auto;
  border-radius: var(--ml-radius-lg);
  border: 4px solid var(--ml-bg);
  outline: 1px solid var(--ml-accent-bordure);
  box-shadow: var(--ml-shadow-md);
  margin-inline: auto;
}
.ml-apropos-portrait-legende {
  margin: 0;
  font-family: var(--ml-font-heading);
  font-weight: 700;
  color: var(--ml-primary);
}
/* Le rôle, sous le nom : texte courant, jamais un second titre. */
.ml-apropos-portrait-legende span {
  display: block;
  margin-block-start: 0.2em;
  font-family: var(--ml-font-base);
  font-weight: 400;
  font-size: var(--ml-fs-sm);
  color: var(--ml-text-mid);
}

/* La colonne de droite : « Qui suis-je » puis la frise, empilés à l'écart du
   flux de grille du portrait (display: grid par défaut, une seule piste
   implicite, exactement l'empilement voulu). */
.ml-apropos-histoire-droite {
  display: grid;
  gap: var(--ml-space-xl);
}
/* Sans portrait (image jamais choisie ET fichier de secours manquant) : la
   colonne de droite n'a plus besoin d'être bornée à la largeur de la grille à
   deux colonnes, elle peut respirer sur toute la largeur du conteneur,
   recentrée à une mesure de lecture confortable. */
.ml-apropos-histoire-layout--seul .ml-apropos-histoire-droite {
  max-inline-size: 68ch;
  margin-inline: auto;
}

.ml-apropos-histoire-texte h2 {
  max-inline-size: 26ch;
}
.ml-apropos-histoire-texte p {
  max-inline-size: 68ch;
  color: var(--ml-text-mid);
  font-size: var(--ml-fs-lg);
}

/* ── CE QUE ÇA CHANGE POUR TOI : la frise ──────────────────────────────────
   Une liste numérotée devient une colonne de repères reliés par un trait.
   Deux traits superposés : un trait discret, TOUJOURS visible en entier (la
   trace complète du parcours), et un second trait, plein de la couleur de
   marque, qui se dessine par dessus au défilement. Sans lui (navigateur trop
   ancien, prefers-reduced-motion), le premier trait suffit à lire la frise :
   rien n'est jamais cassé, seul l'effet de tracé progressif est un bonus. ── */
/* Le h2 de la frise n'est plus un enfant direct de .ml-container (il vit
   maintenant dans .ml-apropos-histoire-droite) : la règle générique
   .ml-section > .ml-container > h2 (main.css, 22ch) ne l'atteint plus, elle
   est reprise ici à la main. */
.ml-apropos-atouts-bloc h2 {
  max-inline-size: 22ch;
}
.ml-apropos-frise-liste {
  position: relative;
  list-style: none;
  margin: var(--ml-space-lg) 0 0;
  padding: 0;
  display: grid;
  gap: var(--ml-space-lg);
}
/* Le trait discret, complet dès le rendu serveur : c'est lui qui garantit que
   la frise a l'air terminée même sans JavaScript ni prise en charge de
   l'animation liée au défilement. */
.ml-apropos-frise-liste::before {
  content: '';
  position: absolute;
  inset-inline-start: 22px; /* centré sur la pastille numérotée, 46px de large */
  inset-block: 6px;
  inline-size: 2px;
  background: var(--ml-accent-bordure);
}
/* Le trait qui se dessine : posé par dessus le trait discret, plein de la
   couleur de marque. Par défaut, déjà entièrement tracé (scaleY(1)) : c'est
   l'état pour tout navigateur qui ignore la déclaration ci dessous. */
.ml-apropos-frise-liste::after {
  content: '';
  position: absolute;
  inset-inline-start: 22px;
  inset-block-start: 6px;
  inline-size: 2px;
  block-size: calc(100% - 12px);
  background: var(--ml-accent);
  transform: scaleY(1);
  transform-origin: top;
}
@media not (prefers-reduced-motion: reduce) {
  @supports (animation-timeline: view()) {
    .ml-apropos-frise-liste::after {
      transform: scaleY(0);
      animation: ml-apropos-tracer linear both;
      animation-timeline: view();
      animation-range: cover 10% cover 90%;
    }
  }
}
@keyframes ml-apropos-tracer {
  to {
    transform: scaleY(1);
  }
}

.ml-apropos-frise-item {
  position: relative;
  display: grid;
  grid-template-columns: 46px 1fr;
  align-items: start;
  gap: var(--ml-space-md);
}
.ml-apropos-frise-numero {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  inline-size: 46px;
  block-size: 46px;
  border-radius: 50%;
  background: var(--ml-bg);
  border: 2px solid var(--ml-accent);
  color: var(--ml-accent);
  font-family: var(--ml-font-heading);
  font-weight: 700;
}
.ml-apropos-frise-texte {
  padding-block-start: 0.65em;
  color: var(--ml-text);
  font-size: var(--ml-fs-lg);
}

/* ── FAQ : accordéon natif details/summary, même construction visuelle que
   la FAQ de la page Formule (fiche-formule.css), redéclarée ici sous ses
   propres classes : les deux gabarits ne partagent pas de feuille de
   style. ── */
/* Même remarque que la frise plus haut : ce h2 (titre de la FAQ) est aussi un
   enfant direct de .ml-container, la règle générique de main.css gouverne déjà
   sa largeur, aucune redéclaration ici. */
.ml-apropos-faq-liste {
  display: grid;
  gap: var(--ml-space-sm);
  margin-block-start: var(--ml-space-lg);
}
.ml-apropos-faq-item {
  background: var(--ml-bg-alt);
  border: 1px solid var(--ml-border);
  border-radius: var(--ml-radius);
  padding: var(--ml-space-sm) var(--ml-space-md);
}
.ml-apropos-faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ml-space-sm);
  cursor: pointer;
  list-style: none;
}
.ml-apropos-faq-question::-webkit-details-marker {
  display: none;
}
.ml-apropos-faq-question h3 {
  font-size: var(--ml-fs-base);
  margin: 0;
}
.ml-apropos-faq-question::after {
  content: '+';
  flex: 0 0 auto;
  font-size: 1.4rem;
  color: var(--ml-accent);
  transition: rotate 200ms var(--ml-ease);
}
.ml-apropos-faq-item[open] .ml-apropos-faq-question::after {
  rotate: 45deg;
}
@media (prefers-reduced-motion: reduce) {
  .ml-apropos-faq-question::after {
    transition: none;
  }
}
.ml-apropos-faq-question:focus-visible {
  outline: 2px solid var(--ml-accent);
  outline-offset: 2px;
}
.ml-apropos-faq-reponse {
  padding-block-start: var(--ml-space-sm);
  color: var(--ml-text-mid);
}
.ml-apropos-faq-reponse a {
  color: var(--ml-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ── APPEL FINAL : dégradé de la couleur de marque, même langage que la page
   Formule, les pages Langue et les fiches Pays. ── */
.ml-apropos-cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: linear-gradient(120deg, var(--ml-accent), var(--ml-accent-dark));
  color: #fff;
  text-align: center;
}
.ml-apropos-cta h2 {
  color: #fff;
}
/* Le paragraphe suit directement le h2, tous deux enfants directs du
   conteneur : la règle générale .ml-section > .ml-container > h2 + p
   (main.css) le repeindrait en gris par dessus le blanc voulu. */
.ml-apropos-cta.ml-section > .ml-container > h2 + p {
  color: #fff;
  max-inline-size: 46ch;
  margin-inline: auto;
}
/* Filigrane : le même champ de bulles que les autres appels à l'action du
   site (assets/img/bulles-fond.png). Image de fond CSS, rien à décrire pour
   une synthèse vocale, rien à télécharger tant que la section n'est pas
   peinte. Motif statique : rien à couper pour prefers-reduced-motion. */
.ml-apropos-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: url('../img/bulles-fond.png');
  background-repeat: no-repeat;
  background-position: 58% 0;
  background-size: 190% auto;
  mix-blend-mode: screen;
  opacity: 0.4;
  pointer-events: none;
}
@media (min-width: 900px) {
  .ml-apropos-cta::before {
    background-position: center 0;
    background-size: 100% auto;
  }
}
.ml-apropos-cta-inner {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: var(--ml-space-sm);
}
/* La grille gère déjà l'écart : on annule la marge basse du composant
   humain (main.css), sinon le geste se doublerait avec le gap. */
.ml-apropos-cta-inner .ml-cta-humain {
  margin-block-end: 0;
}
.ml-apropos-cta-bouton {
  margin-block-start: var(--ml-space-sm);
  background: #fff;
  color: var(--ml-accent);
}
.ml-apropos-cta-bouton:hover {
  background: var(--ml-accent-soft);
}