/* ===== À propos page-specific ===== */
  /* manifesto */
  .manifesto{display:grid;grid-template-columns:1fr;gap:var(--space-8);align-items:start}
  .manifesto__quote{font-family:var(--font-display);font-weight:400;font-size:clamp(26px,3.4vw,var(--text-4xl));line-height:1.18;color:var(--navy);letter-spacing:-.01em}
  .manifesto__quote em{font-style:italic;color:var(--blue-500)}
  .manifesto__quote .mark{font-size:1.4em;color:var(--orange);line-height:0;vertical-align:-.15em;margin-right:.1em}
  .manifesto__aside{border-left:2px solid var(--orange);padding-left:var(--space-5)}
  .manifesto__aside p{font-size:var(--text-sm);line-height:var(--leading-relaxed);color:var(--neutral-600)}
  .manifesto__aside .sig{margin-top:var(--space-4);font-family:var(--font-display);font-style:italic;font-size:var(--text-lg);color:var(--navy)}
  .manifesto__aside .role{font-family:var(--font-data);font-size:var(--text-xs);letter-spacing:.06em;text-transform:uppercase;color:var(--neutral-500);margin-top:2px}

  /* milestones */
  /* auto-fill (et non 4 colonnes figees) : le nombre de jalons est pilote par
     le back-office. auto-fill, contrairement a auto-fit, n'etire pas l'unique
     jalon reel sur toute la largeur — il garde la largeur d'une piste. */
  .milestones{margin-top:var(--space-12);display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr));gap:var(--space-6);position:relative}
  .ms{position:relative}
  /* Le filet est desormais dimensionne sur le contenu reel : c'est un segment
     porte par chaque jalon SAUF le dernier, et non un rail absolu de ~1145 px
     pose sur le conteneur. Avec un seul jalon, aucun segment n'est peint —
     l'ancien rail traversait la page sans plus rien relier. */
  .ms:not(:last-child)::before{content:"";position:absolute;top:11px;left:20px;width:calc(100% + var(--space-6) - 20px);height:2px;background:linear-gradient(90deg,var(--cyan-300),var(--orange));display:none}
  .ms .yr{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-data);font-weight:700;font-size:var(--text-sm);color:var(--navy);background:var(--white);padding-right:10px;position:relative;z-index:2;margin-bottom:var(--space-4)}
  .ms .yr::before{content:"";width:14px;height:14px;border-radius:50%;background:var(--cyan-400);border:3px solid #fff;box-shadow:0 0 0 1px var(--cyan-200)}
  /* :not(:first-child) — la couleur de fin de parcours n'a de sens que s'il y a
     un parcours. Un jalon unique reste cyan. */
  .ms:last-child:not(:first-child) .yr::before{background:var(--orange);box-shadow:0 0 0 1px var(--orange-200)}
  .ms h3{font-family:var(--font-display);font-size:var(--text-lg);color:var(--navy);margin-bottom:var(--space-2)}
  .ms p{font-size:var(--text-sm);line-height:var(--leading-relaxed);color:var(--neutral-600)}

  /* valeurs */
  /* auto-fit reste sûr ici : les 4 valeurs sont codées en dur dans
     template-about.php (aucune saisie back-office), leur nombre ne peut donc
     jamais retomber à 1 — pas le même risque que .team ci-dessous. */
  .values{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:var(--space-6);margin-top:var(--space-12)}
  .val{background:#fff;border:1px solid var(--border);border-radius:var(--radius-md);padding:var(--space-6);display:flex;flex-direction:column;gap:var(--space-3);transition:box-shadow var(--dur-base),transform var(--dur-base),border-color var(--dur-base)}
  .val:hover{box-shadow:var(--shadow-md);transform:translateY(-3px);border-color:transparent}
  .val .vk{font-family:var(--font-display);font-style:italic;font-size:var(--text-2xl);color:var(--orange)}
  .val h3{font-family:var(--font-display);font-size:var(--text-lg);color:var(--navy)}
  .val p{font-size:var(--text-sm);line-height:var(--leading-relaxed);color:var(--neutral-600)}

  /* équipe */
  /* Flex centré (et non grille auto-fill) : le nombre de membres est piloté par
     le back-office (CPT balimana_team) et vaut aujourd'hui 2. Une grille
     auto-fill laissait les cartes calées à GAUCHE avec ~55 % de vide à droite
     dès qu'il y en avait peu ; auto-fit, lui, aurait étiré une carte unique sur
     toute la largeur (.member__photo aurait gonflé démesurément). Le flex
     `justify-content:center` centre TOUJOURS le rang, quel que soit le nombre
     de membres — y compris un dernier rang incomplet — et `flex:0 1 <base>`
     interdit l'étirement au-delà de la largeur de carte : jamais de vide
     latéral, jamais de photo géante. */
  .team{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-6);margin-top:var(--space-12)}
  /* flex-grow:0 → la carte ne dépasse jamais sa base (260 px) : sur mobile une
     carte seule reste centrée à taille lisible au lieu d'occuper tout l'écran. */
  .member{flex:0 1 260px;display:flex;flex-direction:column;background:#fff;border:1px solid var(--border);border-radius:var(--radius-md);padding:var(--space-5);transition:box-shadow var(--dur-base),transform var(--dur-base),border-color var(--dur-base)}
  .member:hover{box-shadow:var(--shadow-md);transform:translateY(-3px);border-color:transparent}
  /* 4/5 (et non 3/4) : portrait resserré, ~-8 % de hauteur — allège le rendu
     mobile sans casser le cadrage des photos d'identité. */
  .member__photo{width:100%;aspect-ratio:4/5;border-radius:var(--radius-sm);overflow:hidden;background:var(--neutral-100);position:relative;box-shadow:inset 0 0 0 1px var(--border)}
  .member__ph{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:linear-gradient(160deg,var(--neutral-100),var(--neutral-200));font-family:var(--font-display);font-size:var(--text-3xl);letter-spacing:.04em;color:var(--blue-600);opacity:.55;user-select:none}
  .member__name{font-family:var(--font-display);font-size:var(--text-lg);color:var(--navy);margin-top:var(--space-4)}
  .member__role{font-family:var(--font-data);font-size:var(--text-xs);letter-spacing:.05em;text-transform:uppercase;color:var(--blue-600);margin-top:4px}
  .member__bio{font-size:var(--text-sm);line-height:var(--leading-relaxed);color:var(--neutral-600);margin-top:var(--space-3)}
  /* margin-top:auto → les liens sont plaqués en pied : deux cartes s'alignent
     même quand l'une n'a aucun lien (hauteurs égalisées). Le conteneur porte
     l'espacement ; les liens (LinkedIn, Portfolio) s'y répartissent en ligne. */
  .member__links{margin-top:auto;padding-top:var(--space-4);display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-5)}
  .member__link{font-size:var(--text-sm);font-weight:600;color:var(--blue-500);text-decoration:none;display:inline-flex;align-items:center;gap:6px}
  .member__link:hover{color:var(--blue-700)}

  /* ancrage */
  .anchor{display:grid;grid-template-columns:1fr;gap:var(--space-10);align-items:center}
  .anchor__media{position:relative;max-width:520px}
  .anchor-panel{position:relative;background:var(--navy-800);border-radius:var(--radius-lg);overflow:hidden;aspect-ratio:4/3;box-shadow:var(--shadow-lg)}
  .anchor-panel svg{position:absolute;inset:0;width:100%;height:100%}
  .anchor-panel .pin{position:absolute;font-family:var(--font-data);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--cyan-200)}
  .anchor__list{list-style:none;padding:0;margin:var(--space-6) 0 0;display:grid;gap:var(--space-4)}
  .anchor__list li{display:flex;gap:var(--space-3);align-items:flex-start;font-size:var(--text-base);color:var(--text);line-height:1.5}
  .anchor__list .ck{flex:none;width:22px;height:22px;border-radius:50%;background:var(--cyan-50);color:var(--cyan-600);display:grid;place-items:center;margin-top:1px}
  .anchor__list .ck svg{width:12px;height:12px;stroke-width:3}

  /* ---- Paliers (mobile-first) ---- */
  @media(min-width:640px){
    /* Deux pistes au moins : les segments de frise relient enfin des jalons. */
    .ms:not(:last-child)::before{display:block}
  }
  /* Quatrieme palier — 1000 px, hors de la serie 640/900/1200.
     Il existe parce que le seuil de bascule a deux colonnes de ce theme est
     historiquement a ~980 px (les blocs @media(max-width:980px) d'avant la
     refonte mobile-first) : la composition a deux colonnes etait donc active
     des 981 px. Le forcer a 1200 pour respecter la serie a trois paliers
     laissait toute la bande 981-1199 px — celle des portables — empilee sur
     une seule colonne, au prix de +54 % de hauteur sur /contact/ a 1024 px.
     La regle des trois paliers a cede, pas le rendu. */
  @media(min-width:1000px){
    .manifesto{grid-template-columns:1.4fr .6fr;gap:var(--space-16);align-items:end}
    .anchor{grid-template-columns:1fr 1fr;gap:var(--space-16)}
    .anchor__media{max-width:none}
  }