/* Page « qui sommes-nous ». Langage propre : la trajectoire se lit comme une
   course solaire, les convictions comme des lignes editoriales, l'equipe comme
   un chiffre assume. Aucune grille de cartes : c'est ce qui rendait la page
   interchangeable avec les trois pages profil. */

/* ── Couverture ───────────────────────────────────────────────────────────── */
.about-hero{position:relative;overflow:hidden;min-height:100svh;display:flex;align-items:flex-end;padding:170px 0 64px;background:var(--evergreen,#0c1d15);color:var(--eggshell,#f5f2e1)}
.about-hero-grid{position:relative;z-index:4;display:grid;gap:34px}
.about-hero .eyebrow{margin:0;color:var(--pollen,#ffce3b);font-size:.74rem;font-weight:850;letter-spacing:.16em;text-transform:uppercase}
/* Meme echelle typographique que les pages profil : couverture en
   clamp(2.5rem,5.5vw,5.4rem), sections en clamp(2.4rem,5vw,5rem),
   sous-titres en clamp(1.5rem,2.4vw,2.35rem). Ne pas inventer de valeur
   ici — la direction artistique se tient dans audience.css. */
.about-name{max-width:19ch;margin:0;font-size:clamp(2.5rem,5.5vw,5.4rem);font-weight:750;line-height:.95;letter-spacing:-.06em;text-wrap:balance}
.about-name em{display:block;margin-top:.18em;font-style:normal;font-weight:760;color:var(--pollen,#ffce3b)}
.about-role{display:flex;flex-wrap:wrap;gap:10px 26px;margin:0;padding-top:26px;border-top:1px solid rgba(245,242,225,.22);color:rgba(245,242,225,.72);font-size:.86rem;font-weight:750;letter-spacing:.02em}
.about-role span{display:inline-flex;align-items:center;gap:10px}
.about-role span::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--pollen,#ffce3b)}
.about-lede{max-width:640px;margin:0;color:rgba(245,242,225,.74);font-size:clamp(1.05rem,1.6vw,1.3rem);line-height:1.55}

/* ── Trajectoire ──────────────────────────────────────────────────────────── */
.arc{padding:120px 0 130px;background:#0a1811;color:var(--eggshell,#f5f2e1)}
.arc-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.85fr);gap:60px;align-items:end;margin-bottom:20px}
.arc-eyebrow{margin:0 0 18px;color:var(--pollen,#ffce3b);font-size:.74rem;font-weight:850;letter-spacing:.16em;text-transform:uppercase}
.arc-head h2{margin:0;font-size:clamp(2.4rem,5vw,5rem);line-height:.98;letter-spacing:-.06em}
.arc-hint{margin:0;color:rgba(245,242,225,.55);font-size:.9rem}
.arc-stage{position:relative;width:100%;margin-top:26px}
.arc-stage svg{display:block;width:100%;height:auto;overflow:visible}
.arc-path{fill:none;stroke:rgba(255,206,59,.28);stroke-width:2;stroke-dasharray:3 9;stroke-linecap:round}
.arc-path-done{fill:none;stroke:var(--pollen,#ffce3b);stroke-width:2.5;stroke-linecap:round;transition:stroke-dashoffset .5s cubic-bezier(.22,.72,.2,1)}
.arc-base{stroke:rgba(245,242,225,.16);stroke-width:1}
.arc-ray{stroke:rgba(255,206,59,.3);stroke-width:1;stroke-dasharray:2 6}
.arc-dot{cursor:pointer;transition:transform .25s cubic-bezier(.22,.72,.2,1)}
.arc-dot circle.halo{fill:rgba(255,206,59,.14);r:0;transition:r .3s cubic-bezier(.22,.72,.2,1)}
.arc-dot circle.core{fill:#0a1811;stroke:var(--pollen,#ffce3b);stroke-width:2.5;r:7;transition:fill .25s ease,r .25s ease}
.arc-dot text{fill:rgba(245,242,225,.5);font-size:13px;font-weight:850;letter-spacing:.08em;transition:fill .25s ease}
.arc-dot:hover circle.core,.arc-dot:focus-visible circle.core{fill:var(--pollen,#ffce3b);r:8}
.arc-dot:hover text,.arc-dot:focus-visible text{fill:var(--eggshell,#f5f2e1)}
/* Le contour par defaut englobe tout le groupe, annee comprise : il dessine un
   rectangle qui descend jusqu'a l'axe. On le remplace par un halo concentrique,
   qui indique le focus au bon endroit. */
.arc-dot:focus,.arc-dot:focus-visible{outline:none}
.arc-dot:focus-visible circle.halo{r:24;fill:rgba(255,206,59,.22)}
.arc-dot:focus-visible circle.core{stroke:var(--eggshell,#f5f2e1);stroke-width:3}
.arc-dot[aria-current="true"] circle.core{fill:var(--pollen,#ffce3b);r:9}
.arc-dot[aria-current="true"] circle.halo{r:26}
.arc-dot[aria-current="true"] text{fill:var(--pollen,#ffce3b)}

.arc-detail{display:grid;grid-template-columns:150px minmax(0,1fr);gap:40px;align-items:start;margin-top:60px;padding-top:34px;border-top:1px solid rgba(245,242,225,.2)}
/* Le statut remplace l'annee : la genese se lit en etapes, pas en dates, parce
   que les dates a venir seraient des promesses. */
.arc-status{margin:0;padding:7px 14px;justify-self:start;border-radius:999px;font-size:.68rem;font-weight:850;letter-spacing:.12em;text-transform:uppercase}
.arc-status[data-etat="fait"]{background:var(--pollen,#ffce3b);color:#0a1811}
.arc-status[data-etat="encours"]{background:rgba(255,206,59,.16);color:var(--pollen,#ffce3b);box-shadow:inset 0 0 0 1px rgba(255,206,59,.5)}
.arc-status[data-etat="avenir"]{background:transparent;color:rgba(245,242,225,.5);box-shadow:inset 0 0 0 1px rgba(245,242,225,.28)}
.arc-step{fill:rgba(245,242,225,.5);font-size:12px;font-weight:850;letter-spacing:.06em}
.arc-dot[data-etat="avenir"] circle.core{stroke:rgba(255,206,59,.45)}

/* Le parcours, en bref, apres la genese. */
.who{padding:110px 0;background:#0a1811;color:var(--eggshell,#f5f2e1);border-top:1px solid rgba(245,242,225,.12)}
.who-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:60px;align-items:start}
.who .eyebrow{margin:0 0 16px;color:var(--pollen,#ffce3b);font-size:.74rem;font-weight:850;letter-spacing:.16em;text-transform:uppercase}
.who h2{margin:0;font-size:clamp(2rem,4vw,3.6rem);line-height:1;letter-spacing:-.05em}
.who-lead{margin:0;font-size:clamp(1.02rem,1.5vw,1.2rem);line-height:1.6}
.who-note{max-width:680px;margin:26px 0 0;padding-top:22px;border-top:1px solid rgba(245,242,225,.2);color:rgba(245,242,225,.66);font-size:.96rem;line-height:1.64}
.arc-detail h3{margin:0 0 12px;font-size:clamp(1.5rem,2.4vw,2.35rem);line-height:1;letter-spacing:-.045em}
.arc-detail p{max-width:660px;margin:0;color:rgba(245,242,225,.72);font-size:1rem;line-height:1.62}
.arc-nav{display:flex;gap:10px;margin-top:26px}
.arc-nav button{min-width:44px;min-height:44px;display:grid;place-items:center;border:1px solid rgba(245,242,225,.28);border-radius:50%;background:transparent;color:var(--eggshell,#f5f2e1);font-size:1rem;cursor:pointer;transition:background .2s ease,border-color .2s ease}
.arc-nav button:hover:not(:disabled){border-color:var(--pollen,#ffce3b);background:rgba(255,206,59,.14)}
.arc-nav button:disabled{opacity:.3;cursor:default}
.arc-nav button:focus-visible{outline:3px solid var(--pollen,#ffce3b);outline-offset:3px}

/* La lecon Arits, en note sous la trajectoire : elle eclaire le parcours sans
   reprendre le devant de la scene, qui appartient au projet. */
.arc-note{max-width:820px;margin:76px 0 0;padding-top:34px;border-top:1px solid rgba(245,242,225,.2)}
.arc-note h3{margin:0 0 14px;font-size:clamp(1.5rem,2.4vw,2.35rem);line-height:1;letter-spacing:-.045em}
.arc-note p{margin:0;color:rgba(245,242,225,.68);font-size:.98rem;line-height:1.66}

/* ── Convictions, en lignes editoriales ───────────────────────────────────── */
.creed{padding:126px 0;background:var(--eggshell,#f5f2e1);color:var(--evergreen,#0c1d15)}
.creed>.shell>h2{max-width:900px;margin:0 0 78px;font-size:clamp(2.4rem,5vw,5rem);line-height:.98;letter-spacing:-.06em}
.creed-line{display:grid;grid-template-columns:120px minmax(0,1fr);gap:34px;align-items:baseline;padding:38px 0;border-top:1px solid rgba(12,29,21,.2)}
.creed-line:last-of-type{border-bottom:1px solid rgba(12,29,21,.2)}
.creed-num{margin:0;font-size:clamp(2.4rem,4vw,3.4rem);font-weight:800;line-height:.8;letter-spacing:-.05em;color:transparent;-webkit-text-stroke:1.5px rgba(12,29,21,.42)}
.creed-line h3{margin:0 0 10px;font-size:clamp(1.5rem,2.4vw,2.35rem);line-height:1;letter-spacing:-.045em}
.creed-line p{max-width:680px;margin:0;color:rgba(12,29,21,.7);font-size:1.02rem;line-height:1.6}
.creed-line--open h3{color:var(--tangerine-ink,#a52f20)}
.creed-line--open .creed-num{-webkit-text-stroke-color:rgba(165,47,32,.5)}

/* ── La lecon, en citation pleine largeur ─────────────────────────────────── */
.lesson{position:relative;overflow:hidden;padding:130px 0;background:var(--evergreen,#0c1d15);color:var(--eggshell,#f5f2e1)}
.lesson::before{content:"";position:absolute;left:-6vw;top:-14vh;width:min(46vw,560px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(255,206,59,.13),transparent 68%);pointer-events:none}
.lesson .shell{position:relative;z-index:1}
.lesson p.eyebrow{margin:0 0 26px;color:var(--pollen,#ffce3b);font-size:.74rem;font-weight:850;letter-spacing:.16em;text-transform:uppercase}
.lesson blockquote{max-width:1000px;margin:0;padding:0}
.lesson blockquote h2{margin:0 0 34px;font-size:clamp(2.4rem,5vw,5rem);line-height:.98;letter-spacing:-.06em;text-wrap:balance}
.lesson blockquote p{max-width:760px;margin:0;color:rgba(245,242,225,.76);font-size:clamp(1rem,1.35vw,1.16rem);line-height:1.68}

/* ── Aujourd'hui : un chiffre assume ──────────────────────────────────────── */
.today{padding:126px 0;background:var(--eggshell,#f5f2e1);color:var(--evergreen,#0c1d15)}
.today-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:70px;align-items:center}
.today-figure{position:relative;display:flex;align-items:baseline;gap:18px}
.today-figure strong{font-size:clamp(9rem,26vw,22rem);font-weight:800;line-height:.7;letter-spacing:-.09em}
.today-figure span{max-width:190px;color:rgba(12,29,21,.66);font-size:.92rem;font-weight:760;line-height:1.4}
.today h2{margin:0 0 22px;font-size:clamp(2rem,4vw,3.6rem);line-height:1;letter-spacing:-.05em}
.today-list{margin:26px 0 0;padding:0;list-style:none}
.today-list li{padding:16px 0;border-top:1px solid rgba(12,29,21,.2)}
.today-list strong{display:block;margin-bottom:4px;font-size:1.02rem}
.today-list span{color:rgba(12,29,21,.68);font-size:.94rem;line-height:1.55}

/* ── Fin ──────────────────────────────────────────────────────────────────── */
.about-cta{padding:118px 0;background:var(--evergreen,#0c1d15);color:var(--eggshell,#f5f2e1)}
.about-cta-grid{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:44px}
.about-cta h2{max-width:780px;margin:0;font-size:clamp(2.5rem,5.5vw,5.4rem);line-height:.95;letter-spacing:-.06em}

@media(max-width:1000px){
  .who-grid{grid-template-columns:1fr;gap:28px}
  .arc-head{grid-template-columns:1fr;gap:22px;align-items:start}
  .today-grid{grid-template-columns:1fr;gap:44px}
}

@media(max-width:760px){
  .about-hero{min-height:auto;padding:140px 0 56px}
  .arc,.creed,.lesson,.today,.about-cta{padding:84px 0}
  .arc-detail{grid-template-columns:1fr;gap:14px}
  .creed>.shell>h2{margin-bottom:50px}
  .creed-line{grid-template-columns:1fr;gap:10px;padding:30px 0}
  .creed-num{font-size:2rem}
  .today-figure strong{font-size:clamp(7rem,34vw,12rem)}
  .about-cta-grid{flex-direction:column;align-items:stretch}
}

@media(prefers-reduced-motion:reduce){
  .arc-dot,.arc-dot circle,.arc-path-done{transition:none}
}