/* ============================================================
   À propos — « le trait »
   ============================================================ */
.hero-apropos{padding-bottom:110px}
.apropos-grille{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:64px;align-items:center}
.hero-apropos .titre-geant{font-size:clamp(48px,7.4vw,118px)}

/* le portrait : il se dévoile, puis suit le défilement d'un rien */
.portrait{margin:0;position:relative}
.portrait-cadre{position:relative;aspect-ratio:3/4;border-radius:16px;overflow:hidden;border:1px solid rgba(242,237,227,.12);
  box-shadow:0 60px 120px -30px rgba(0,0,0,.85)}
.portrait-cadre img{width:100%;height:112%;object-fit:cover;object-position:50% 20%;will-change:transform}
.portrait-cadre::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(23,18,16,.55));pointer-events:none}
.portrait::before{content:"";position:absolute;inset:-14px auto auto -14px;width:46px;height:46px;border-left:1.5px solid var(--or);border-top:1.5px solid var(--or);z-index:2}
.portrait::after{content:"";position:absolute;inset:auto -14px 34px auto;width:46px;height:46px;border-right:1.5px solid var(--or);border-bottom:1.5px solid var(--or);z-index:2}
.portrait figcaption{display:flex;align-items:center;gap:12px;margin-top:18px;font-size:13.5px;color:var(--discret);letter-spacing:.04em}
.portrait figcaption .repere{color:var(--or);width:28px}
.js .portrait-cadre{clip-path:inset(100% 0 0 0);transition:clip-path 1.4s var(--sortie) .3s}
.js .portrait.vu .portrait-cadre{clip-path:inset(0 0 0 0)}

/* ---------------- le parcours : un trait qui se dessine */
.trait-zone{position:relative;padding-left:90px}
.trait{position:absolute;left:28px;top:0;bottom:0;width:1px;background:var(--filet)}
.trait i{position:absolute;left:0;top:0;width:1px;height:100%;background:linear-gradient(var(--or),var(--or));transform-origin:top;transform:scaleY(var(--p,0))}
.trait i::after{content:"";position:absolute;left:-2px;bottom:-2px;width:5px;height:5px;background:var(--or)}
.jalons{list-style:none;margin:0;padding:0;display:grid;gap:70px}
.jalon{position:relative;max-width:640px;transform:translateX(18px);transition:transform .8s var(--sortie)}
.jalon:not(.atteint) h3,.jalon:not(.atteint) p,.jalon:not(.atteint) .j-etiquette{color:var(--discret);transition:color .8s}
.jalon::before{content:"";position:absolute;left:-68px;top:6px;width:13px;height:13px;border-radius:50%;border:1px solid var(--filet);background:var(--nuit);transition:all .6s var(--sortie)}
.jalon.atteint{transform:none}
.jalon.atteint::before{background:var(--or);border-color:var(--or);box-shadow:0 0 0 6px rgba(200,165,108,.15),0 0 24px rgba(200,165,108,.5)}
.j-etiquette{font:600 12px var(--ui);letter-spacing:.14em;text-transform:uppercase;color:var(--or);margin-bottom:10px}
.jalon h3{font-size:clamp(26px,2.6vw,36px);letter-spacing:-.03em;margin-bottom:12px}
.jalon a{color:var(--ivoire);text-decoration-color:var(--or);text-underline-offset:3px}
.jalon-final h3{font-size:clamp(34px,3.6vw,54px)}

/* ---------------- « Tryde » qui s'écrit */
.nom-grille{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.mot-tryde{width:100%;height:auto;overflow:visible}
.mot-tryde text{font:700 190px var(--titres);letter-spacing:-10px;fill:transparent;stroke:var(--or);stroke-width:1.2;
  stroke-dasharray:1400;stroke-dashoffset:1400}
.mot-tryde.vu text{animation:ecrire 2.6s var(--sortie) forwards,remplir 1.2s 2s forwards}
@keyframes ecrire{to{stroke-dashoffset:0}}
@keyframes remplir{to{fill:var(--ivoire);stroke:transparent}}

/* ---------------- le Havre, de nuit */
.havre{position:relative;min-height:80vh;display:flex;align-items:center;overflow:hidden;border-block:1px solid var(--filet)}
.havre-plan{position:absolute;inset:0}
.havre-plan img{width:100%;height:100%;object-fit:cover;object-position:50% 50%;opacity:.85}
.havre-plan::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--nuit) 0%,rgba(23,18,16,.75) 38%,rgba(23,18,16,0) 70%)}
.havre-point{position:absolute;left:50%;top:50%;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:var(--or);box-shadow:0 0 30px var(--or)}
.havre-point i{position:absolute;inset:0;border-radius:50%;border:1px solid var(--or);animation:onde 2.4s var(--sortie) infinite}
@keyframes onde{to{transform:scale(6);opacity:0}}
.havre-texte{position:relative;z-index:2}
.havre-texte .titre-section{margin-bottom:22px}
.havre-texte p{max-width:36ch}
.havre-credit{font-size:12.5px;color:var(--discret);margin-top:30px}
.havre-credit a{color:var(--discret)}

@media (max-width:1020px){
  .apropos-grille{grid-template-columns:1fr;gap:44px}
  .portrait{max-width:420px}
  .nom-grille{grid-template-columns:1fr;gap:20px}
  .mot-tryde{max-width:520px}
  .havre-plan::after{background:linear-gradient(0deg,var(--nuit) 0%,rgba(23,18,16,.8) 45%,rgba(23,18,16,.2))}
  .havre{align-items:flex-end;padding:260px 0 70px}
}
@media (max-width:640px){
  .trait-zone{padding-left:48px}
  .trait{left:12px}
  .jalon::before{left:-42px}
  .jalons{gap:52px}
}
@media (prefers-reduced-motion:reduce){
  .js .portrait-cadre{clip-path:none}
  .jalon{opacity:1;transform:none}
  .mot-tryde text{stroke-dashoffset:0;fill:var(--ivoire);stroke:transparent}
  .havre-point i{display:none}
}