/* « À propos » v2 — ce que la page ajoute au vocabulaire de la landing.
   ---------------------------------------------------------------------------
   Chargée APRÈS landing.v2.css et landing.next.css, et scopée sous
   .landing-about : rien ici ne peut atteindre la landing ni les pages
   /features. Tout ce qui existe déjà là-bas — cartes, hero, .lv-grid-3,
   .lv-stats, .lv-sec-eyebrow, .lv-pillar, le pied — n'est pas redéfini : deux
   pages qui se ressemblent doivent partager leurs règles, pas les recopier.

   Trois choses seulement manquaient : une grille à deux cartes, les fiches de
   l'équipe, et la feuille de route. */

/* Grille à deux cartes — vision/approche, puis l'équipe. La landing n'en a pas :
   ses grilles font trois ou quatre colonnes, et .lv-roles porte des flèches et
   des couleurs de segment qui n'ont rien à faire ici. */
.landing-about .about-grid-2{
  display:grid;gap:20px;grid-template-columns:repeat(2,minmax(0,1fr));
}
@media (max-width:900px){
  .landing-about .about-grid-2{grid-template-columns:1fr}
}

/* Titre et corps de carte, à l'échelle des piliers de la landing (.lv-pillar-t /
   .lv-pillar li) pour que les deux pages sonnent pareil. */
.landing-about .about-card-t{
  font-family:'Poppins',"Trebuchet MS",sans-serif;font-weight:800;
  font-size:19px;line-height:1.25;color:var(--easyidp-white);margin-bottom:12px;
}
.landing-about .about-card-b{
  margin:0;font-size:15px;line-height:1.65;color:rgba(236,243,255,.86);
}

/* Le récit : la seule colonne de texte longue de la page. Bornée à 68 caractères,
   sinon la ligne traverse toute la carte et devient illisible sur un grand écran. */
.landing-about .about-story{
  margin:0;max-width:68ch;font-size:16px;line-height:1.75;color:rgba(236,243,255,.88);
}

/* Équipe --------------------------------------------------------------------
   Photo à gauche, texte à droite. Le rôle est une pastille cyan, comme les
   étiquettes des cartes de la landing (.lv-tag) — pas la pastille verte des
   en-têtes de l'ancienne page, qui criait plus fort que le nom. */
.landing-about .about-person{display:flex;gap:18px;align-items:flex-start}
.landing-about .about-person-photo{
  flex:0 0 auto;width:76px;height:76px;border-radius:999px;object-fit:cover;
  border:1px solid var(--glass-b);background:rgba(255,255,255,.06);
}
.landing-about .about-person-n{
  font-family:'Poppins',"Trebuchet MS",sans-serif;font-weight:800;
  font-size:17px;color:var(--easyidp-white);
}
.landing-about .about-person-r{
  display:inline-block;margin:8px 0 10px;padding:5px 11px;border-radius:999px;
  border:1px solid rgba(97,199,211,.28);background:rgba(97,199,211,.10);
  color:var(--easyidp-cyan);font-size:12px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;line-height:1;
}
@media (max-width:520px){
  .landing-about .about-person{flex-direction:column}
}

/* Feuille de route ----------------------------------------------------------
   La signature de la page : c'est la seule chose qu'« À propos » raconte et que
   la landing ne raconte pas. Un rail unique, cyan en haut (le passé) vers lime
   en bas (ce qui vient), et trois états qui portent chacun une information :

     .is-done  ce qui est fait — présent, en retrait, il ne réclame rien ;
     .is-now   l'étape courante — la seule carte pleine, cerclée de lime ;
     .is-next  ce qui vient — contour pointillé, rien n'est encore livré.

   L'état est calculé depuis la date du jalon (la vue), jamais écrit à la main :
   c'est ce qui laissait « février 2026 » marqué en cours au mois d'août. */
.landing-about .about-tl{
  position:relative;list-style:none;margin:0;padding:0 0 0 clamp(52px,6vw,72px);
  display:grid;gap:14px;
}
.landing-about .about-tl::before{
  content:"";position:absolute;left:clamp(19px,2.4vw,27px);top:10px;bottom:10px;width:2px;
  background:linear-gradient(180deg,rgba(97,199,211,.55),rgba(154,245,87,.55));
}
.landing-about .about-step{position:relative}
/* Le millésime sur le rail : neuf jalons sur trois ans, l'année est le repère
   que le lecteur cherche. La date complète reste dans le titre de l'étape. */
.landing-about .about-step-y{
  position:absolute;left:calc(clamp(52px,6vw,72px) * -1);top:14px;
  width:clamp(40px,4.8vw,56px);text-align:center;
  font-family:'Poppins',"Trebuchet MS",sans-serif;font-weight:800;font-size:13px;
  color:var(--muted);
}
.landing-about .about-step-y::after{
  content:"";position:absolute;top:5px;right:-6px;width:9px;height:9px;border-radius:999px;
  background:var(--easyidp-navy);border:2px solid rgba(97,199,211,.55);
}
/* Le jalon en deux colonnes dès qu'il y a la place : la date à gauche, ce qui
   s'est passé à droite. Empilés, une phrase de dix mots s'étalait sur toute la
   largeur de la section et laissait une ligne perdue au milieu du vide. */
/* Le fond marine est plus soutenu que celui des cartes de section (--glass, 14 %) :
   les vagues du fond de page passent derrière la feuille de route sur toute sa
   hauteur, et une ligne grise sur la vague lime ne se lit plus. Assez opaque pour
   tenir le texte, assez transparent pour rester une carte de la maison. */
.landing-about .about-step-c{
  border-radius:16px;border:1px solid var(--glass-b);background:rgba(7,19,61,.46);
  padding:14px 18px;
}
@media (min-width:900px){
  .landing-about .about-step-c{
    display:grid;grid-template-columns:210px minmax(0,1fr);gap:24px;align-items:baseline;
  }
  .landing-about .about-step-d{margin-bottom:0}
}
.landing-about .about-step-d{
  font-family:'Poppins',"Trebuchet MS",sans-serif;font-weight:800;font-size:15px;
  color:var(--easyidp-white);margin-bottom:6px;
}

.landing-about .about-step.is-done .about-step-c{background:rgba(7,19,61,.34);border-color:rgba(255,255,255,.08)}
.landing-about .about-step.is-done .about-card-b{color:rgba(236,243,255,.68)}

/* L'étape courante doit se voir d'un coup d'œil depuis le haut de la section :
   sur ce fond marine, un fond lime à 7 % ne se distinguait pas d'une carte
   ordinaire. Le liseré vertical fait le travail que la teinte seule ne faisait
   pas, sans allumer un bloc vert au milieu de la page. */
.landing-about .about-step.is-now .about-step-c{
  border-color:rgba(154,245,87,.55);
  background:linear-gradient(rgba(154,245,87,.10),rgba(154,245,87,.10)),rgba(7,19,61,.52);
  border-left:3px solid var(--easyidp-lime);padding-left:16px;
  box-shadow:0 0 0 1px rgba(154,245,87,.12),0 18px 40px rgba(4,10,31,.28);
}
.landing-about .about-step.is-now .about-step-y{color:var(--easyidp-lime)}
.landing-about .about-step.is-now .about-step-y::after{
  border-color:var(--easyidp-lime);background:var(--easyidp-lime);
  box-shadow:0 0 0 5px rgba(154,245,87,.16);
}

.landing-about .about-step.is-next .about-step-c{
  background:rgba(7,19,61,.28);border-style:dashed;border-color:rgba(255,255,255,.14);
}
.landing-about .about-step.is-next .about-step-d,
.landing-about .about-step.is-next .about-card-b{color:rgba(236,243,255,.60)}
.landing-about .about-step.is-next .about-step-y::after{
  border-color:rgba(255,255,255,.22);
}