/* ============================================================
   HERO MOTION : style de l'animation de la première section (publié). Un seul accent, trois durées, une courbe (--ease).
   ============================================================ */
:root{--hb-soft:#8b8b93;--t1:.22s;--t2:.56s;--t3:.78s;--hb-sh:0 0 0 1px rgba(0,0,0,.08),0 18px 40px -16px rgba(20,24,60,.35)}

/* ---------- ce qu'il y a dans le haut de page au début ---------- */
.hb{display:grid;grid-template-rows:1fr;width:100%;transition:grid-template-rows var(--t2) var(--ease),opacity var(--t2),filter var(--t2)}
.hb>div{overflow:hidden;min-height:0;padding-bottom:14px}
.hb.gone{grid-template-rows:0fr;opacity:0;filter:blur(6px)}
.hb-nav{display:flex;justify-content:center;gap:16px;flex-wrap:wrap;font-size:13px;color:var(--mute);font-weight:500}

.hb-nav span{display:inline-block;max-width:140px;overflow:hidden;white-space:nowrap;vertical-align:bottom;transition:max-width var(--t2) var(--ease),opacity var(--t2),margin var(--t2) var(--ease)}
.hb-nav span.n-gone{max-width:0;opacity:0;margin:0 -8px}
.hb-gr{font-size:13px;font-weight:600;color:var(--mute)}
.hb-pa{font-size:14px;color:var(--mute);max-width:44ch;margin:0 auto}

.hb-fluff{display:inline-block;max-width:40ch;overflow:hidden;white-space:nowrap;vertical-align:bottom;transition:max-width var(--t2) var(--ease),opacity var(--t2)}
.hb-fluff.gone{max-width:0;opacity:0}
/* le bouton principal : au début il pèse autant que les autres, il prend son rang plus tard */
.hero .pill.big{transition:height var(--t2) var(--ease),padding var(--t2) var(--ease),font-size var(--t2) var(--ease),background var(--t2),color var(--t2),box-shadow var(--t2),transform var(--t1)}
.hero .pill.big.hb-eq{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink);height:46px;padding:0 20px;font-size:14.5px}
/* l'île naît sans son bouton Contact */
.isl .isl-cta{max-width:220px;overflow:hidden;white-space:nowrap;transition:opacity var(--t2),transform var(--t2) var(--ease),max-width var(--t2) var(--ease),padding var(--t2),margin var(--t2),background .2s}
.isl.isl-stage .isl-cta{opacity:0;transform:scale(.5);max-width:0;padding:0;margin:0}

/* ---------- le texte d'accueil : un bloc plat (étape 0), puis deux niveaux (étape 1) ---------- */
.hb-split{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(24px,5vw,72px);align-items:center;width:100%;max-width:1060px;margin:0 auto clamp(24px,3vw,40px);text-align:left}
.hb-photo{aspect-ratio:4/5;max-width:100%;width:335px;justify-self:end;border-radius:32px;overflow:hidden;box-shadow:0 30px 70px -34px rgba(20,24,60,.45);transition:width var(--t3) var(--ease),max-width var(--t3) var(--ease),aspect-ratio var(--t3) var(--ease),border-radius var(--t3) var(--ease),box-shadow var(--t3)}
.hb-photo img{width:100%;height:100%;object-fit:cover;object-position:45% 22%}
@media (max-width:860px){.hb-split{grid-template-columns:1fr;text-align:center}.hb-photo{order:-1;justify-self:center;max-width:240px}}
.hb-p{margin:0}
/* tous les textes changent de taille sur la même durée : la hiérarchie arrive d'un seul coup */
.hb-l1,.hb-l2,.hb-l4{display:block}
/* hiérarchie (de haut en bas) : l'identité en petit, le titre en très grand, le sous-titre, puis la disponibilité */
.hb-split:not(.flat) .hb-txt{display:flex;flex-direction:column;align-items:flex-start}
.hb-split:not(.flat) .hb-p{display:contents}
.hb-split:not(.flat) .hb-l4{order:1}.hb-split:not(.flat) .hb-l2{order:2}.hb-split:not(.flat) .hb-txt .sub{order:3}.hb-split:not(.flat) .hb-l1{order:4}
/* les petits mots de l'identité se replient */
.hb-iw{display:inline-block;overflow:hidden;white-space:nowrap;vertical-align:bottom;max-width:14ch;transition:max-width var(--t2) var(--ease),opacity var(--t2),margin var(--t2) var(--ease)}
.hb-iw.gone{max-width:0;opacity:0}
/* étape 0 : aucune hiérarchie, tout pèse pareil, la tête est petite */
.hb-split.flat .hb-l2,.hb-split.flat .hb-l4{display:block;margin:0}
.hero.eq .hb-nav,.hero.eq .hb-gr,.hero.eq .hb-pa,.hero.eq .sub,
.hero.eq .hb-split.flat .hb-l1,.hero.eq .hb-split.flat .hb-l2,.hero.eq .hb-split.flat .hb-l4{font-size:16px;font-weight:400;line-height:1.5;letter-spacing:0;color:var(--ink)}
.hero.eq .hb-split.flat{grid-template-columns:1fr auto;max-width:700px;gap:20px;align-items:start}
.hb-split.pk{grid-template-columns:1fr auto;gap:20px;align-items:start}
.hero.eq .hb-split.flat .hb-photo,.hb-split.pk .hb-photo{width:110px;max-width:110px;aspect-ratio:1;border-radius:14px;box-shadow:none;justify-self:end}
.hb-freeze,.hb-freeze *{transition:none!important}

.hb-g{position:fixed;z-index:95;margin:0;pointer-events:none;transition:left var(--t2) var(--ease),top var(--t2) var(--ease),width var(--t2) var(--ease),height var(--t2) var(--ease),font-size var(--t2) var(--ease),border-radius var(--t2) var(--ease),opacity var(--t1),color var(--t2),font-weight var(--t2)}
.hb-g-ph{object-fit:cover;object-position:45% 22%;z-index:97}

/* ---------- sections qui naissent plus tard ---------- */
section.trust{transition:opacity var(--t3) var(--ease),transform var(--t3) var(--ease)}
section.trust.hb-off{opacity:0;transform:translateY(18px);pointer-events:none}
section.trust .marquee-track>*{transition:opacity var(--t3) var(--ease) calc(var(--i,0) * 80ms),transform var(--t3) var(--ease) calc(var(--i,0) * 80ms)}
section.trust.hb-off .marquee-track>*{opacity:0;transform:translateY(16px)}

/* ---------- démo Contact : l'étiquette vole vers sa carte ---------- */
.hb-g-pill{background-color:#fff;box-shadow:var(--hb-sh);display:flex;align-items:center;justify-content:center;text-align:center;font:600 14px/1.2 "Jakarta",system-ui,sans-serif;color:var(--ink);white-space:normal;z-index:120;transition:left 1.1s var(--ease),top 1.1s var(--ease),width 1.1s var(--ease),height 1.1s var(--ease),border-radius 1.1s var(--ease),background-color 1.1s,font-size 1.1s var(--ease),opacity .5s}

/* le vrai titre reste dans la page, invisible à l'œil, tant que sa ligne est dans le texte */
.hb-sr{position:absolute!important;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* le sous-titre, une fois sous la phrase grise */
@media (max-width:860px){.hb-split:not(.flat) .hb-txt{align-items:center}}
/* le bouton principal : dans la colonne du texte, aligné à gauche, sous la disponibilité */
.hb-split:not(.flat) .hb-txt .pill.big{order:5}


/* ---------- la barre du bas au départ : mêmes mesures que l'île, pour qu'elle ne se réespace pas au moment d'y passer ---------- */
.hb-pbar{position:fixed;right:0;margin-inline:auto;width:fit-content;max-width:calc(100% - 24px);height:56px;display:flex;align-items:center;padding:0 8px 0 18px;z-index:20;border-radius:26px;background:rgba(255,255,255,.8);-webkit-backdrop-filter:blur(30px);backdrop-filter:blur(30px);box-shadow:0 0 0 1px rgba(0,0,0,.08);transition:opacity var(--t1)}
.hb-pbar .hb-nav{position:relative;z-index:1;margin:0;gap:0;flex-wrap:nowrap;justify-content:flex-start;align-items:center;height:42px;color:var(--ink);font-size:14.5px;font-weight:600}
.hb-pbar .hb-nav span{box-sizing:border-box;display:inline-block;padding:0 14px;line-height:42px;max-width:200px;text-align:center;transition:max-width var(--t2) var(--ease),opacity var(--t2),margin var(--t2) var(--ease),padding var(--t2) var(--ease),width var(--t2) var(--ease),color var(--t1)}
.hb-pbar .hb-nav span.n-gone{max-width:0;opacity:0;margin:0;padding:0}
.hb-pbar .hb-nav .pb-lg{display:inline-flex;justify-content:center;align-items:center;width:44px;height:44px;padding:0}
.hb-pbar .hb-nav [data-n="proj"]{margin-left:28px}
.hb-pbar .hb-nav [data-n="par"]{margin-left:18px}
.hb-pbar .hb-nav [data-n="cv"]{margin-left:25px}
.hb-pbar .hb-nav span.pb-slot{width:44px;padding:0;color:transparent}
.hb-pbar .hb-nav span.pb-fin{padding:0 26px}
.hb-pbar .hb-nav span.pb-finc{padding:0 28px}
.hb-pbar .hb-nav span.hb-pb-on{color:#fff}
/* le fond noir qui entoure CV / LinkedIn / Téléphone : derrière le texte, dans la barre ; il devient le bouton « Contact » */
.hb-pb-box{position:absolute;z-index:0;border-radius:99px;background:var(--ink);transition:left var(--t2) var(--ease),top var(--t2) var(--ease),width var(--t2) var(--ease),height var(--t2) var(--ease),opacity var(--t1)}

/* ---------- poids visuel : le titre domine, le reste s'efface par rang (titre > bouton > disponibilité > sous-titre > identité) ---------- */
.hb-l4{margin-top:0;font-size:clamp(13px,1.15vw,15px);line-height:1.3;font-weight:500;color:var(--hb-soft)}
.hb-l2{text-wrap:balance;max-width:10.5em;margin-top:.55em;font-size:clamp(44px,5.6vw,72px);line-height:1.02;letter-spacing:-.045em;font-weight:700;color:var(--ink)}
.hb-txt .sub{margin:1.1em 0 0;max-width:none;text-align:inherit;font-size:clamp(14px,1.3vw,16px);line-height:1.45;font-weight:400;color:var(--hb-soft)}
.hb-l1{margin-top:1.8em;font-size:clamp(16px,1.5vw,18px);line-height:1.35;letter-spacing:-.01em;font-weight:500;color:var(--mute)}
.hb-split:not(.pk) [data-g="mandats"],.hb-split:not(.pk) [data-g="stage"]{display:block}
.hb-split:not(.pk) [data-g="stage"]::first-letter{text-transform:uppercase}
.hb-split:not(.pk) [data-g="et"],.hb-split:not(.pk) [data-g="end"]{display:none}
/* le bouton principal : plus large, plus haut, plus d'air au-dessus */
.hero .pill.big:not(.hb-eq){height:56px;padding:0 38px;font-size:16px}
.hb-txt .pill.big{margin:32px 0 0;align-self:flex-start}
.hero.eq .hb-br{display:none}

/* état intermédiaire : le texte est aligné à gauche en colonne, mais encore petit et uniforme (la hiérarchie n'est pas arrivée) */
.hero.eq .hb-split:not(.flat) .hb-l4,.hero.eq .hb-split:not(.flat) .hb-l2,.hero.eq .hb-split:not(.flat) .hb-l1,.hero.eq .hb-split:not(.flat) .hb-txt .sub{font-size:16px;font-weight:400;line-height:1.5;letter-spacing:0;color:var(--ink)}
.hero.eq .hb-split:not(.flat) .hb-l2,.hero.eq .hb-split:not(.flat) .hb-l1,.hero.eq .hb-split:not(.flat) .hb-txt .sub{margin-top:.7em}

/* marge sur les côtés (le texte et la photo touchaient les bords) ; aucun enfant du haut de page ne se fait écraser quand sa hauteur est fixée */
.hero{padding-inline:var(--pad)}
.hero>*{flex-shrink:0}

/* ce qui va partir : gris très léger (plus de lasso) */
.hb.hb-tgt,.hb-fluff.hb-tgt,.hb-iw.hb-tgt{opacity:.25}
/* les groupes de la barre : un simple fond gris clair */
.hb-pb-box.soft{background:rgba(0,0,0,.06)}
/* la colonne : tout est aligné à gauche */
.hb-txt .hb{order:0}
.hb-txt [data-k="para"]{order:3}
.hb-txt .hb-pa{margin:0;max-width:44ch;text-align:left}
.hb-txt .hb>div{padding-bottom:0}
.hb-txt [data-k="para"]>div>p{margin-top:.7em}

/* au départ, la disponibilité est une phrase sous le reste, au même poids */
.hero.eq>.hb-l1{margin:10px 0 0;font-size:16px;font-weight:400;line-height:1.5;letter-spacing:0;color:var(--ink)}

/* pendant l'alignement, les lignes gardent exactement les mêmes coupures qu'au centre */
.hb-ln{display:block}
.hb-st{display:inline-block}
.hero.eq .hb-split:not(.flat) .hb-txt .sub{max-width:46ch}
.hero.eq .hb-split:not(.flat) .hb-l2{margin-top:0}
.hero.eq .hb-l2{max-width:none}
/* à la fin : deux lignes, chacune avec son point */
.hb-split:not(.pk) [data-g="mandats"]::after,.hb-split:not(.pk) [data-g="stage"]::after{content:"."}

/* la copie du petit texte qui s'efface pendant le zoom */
.hb-ghost{white-space:nowrap;transform-origin:0 0;transition:none;z-index:96;font-family:"Jakarta",system-ui,sans-serif}
/* la photo prend ses bords arrondis et son ombre finale avant de grandir (geste « mark ») */
.hb-split.pk.edges .hb-photo{border-radius:32px;box-shadow:0 30px 70px -34px rgba(20,24,60,.45)}
/* alignement optique à gauche (état final) : on aligne la PREMIÈRE LETTRE VISIBLE de chaque ligne, pas son cadre.
   Chaque lettre a un petit espace interne à gauche (mesuré dans la police : J et c ≈ 0,031 em, S ≈ 0,047 em, R / M / P ≈ 0,078 em) ; on le retire en marge négative, en em pour que ça suive la taille du texte.
   Le bouton arrondi paraît reculé (seul le milieu de sa courbe touche le bord) : on l'avance de ≈ 0,2 × son rayon. */
.hb-split:not(.pk) .hb-l4{margin-left:-.078em}
.hb-split:not(.pk) .hb-l2{margin-left:-.031em}
.hb-split:not(.pk) .hb-txt .sub{margin-left:-.047em}
.hb-split:not(.pk) .hb-l1{margin-left:-.078em}
.hb-split:not(.pk) .hb-txt .pill.big{margin-left:-5px}
/* téléphone : la photo est plus petite pour que le bouton arrive plus vite dans le premier écran */
@media (max-width:860px){.hb-split:not(.pk) .hb-photo{max-width:200px}}
@media (max-width:520px){.hb-split:not(.pk) .hb-photo{max-width:150px}}
/* hauteur minimale du haut de page : celle de l'état le plus haut (mesurée à plusieurs largeurs), pour que rien dessous ne bouge pendant l'animation */
.hero{min-height:610px}
@media (max-width:860px){.hero{min-height:800px}}
@media (max-width:520px){.hero{min-height:710px}}
@media (max-width:400px){.hero{min-height:780px}}
/* téléphone / tablette : le texte est centré, le bouton aussi (sans le décalage optique de la version alignée à gauche) */
@media (max-width:860px){.hb-split:not(.pk) .hb-txt .pill.big,.hb-txt .pill.big{align-self:center;margin-left:0;margin-right:0}}

/* ---------- téléphone ---------- */
.hb-pbar{max-width:none;transform-origin:50% 100%;transition:opacity var(--t1),transform var(--t2) var(--ease)}
@media (max-width:520px){
  .hb-pbar{max-width:none;padding:0 8px 0 12px}
  /* mesures finales = celles de l'île sur téléphone (logo, Projets, À propos, Contact) */
  .hb-pbar .hb-nav [data-n="proj"]{margin-left:4px}
  .hb-pbar .hb-nav [data-n="par"]{margin-left:0}
  .hb-pbar .hb-nav [data-n="cv"]{margin-left:7px}
  .hb-pbar .hb-nav span.pb-fin{padding:0 8px}
  .hb-pbar .hb-nav span.pb-finc{padding:0 16px}
}
@media (max-width:860px){.hb-l2{font-size:clamp(30px,10.2vw,56px)}}

/* ---------- téléphone, état final : la photo en haut, le texte plus petit posé en bas, aligné à gauche, avec de l'air ---------- */
@media (max-width:560px){
  .hb-split:not(.flat):not(.pk){text-align:left;gap:0;min-height:calc(100svh - 250px);align-content:space-between;justify-items:start}
  .hb-split:not(.flat):not(.pk) .hb-photo{order:-1;justify-self:start;width:56%;max-width:230px;border-radius:26px}
  .hb-split:not(.flat):not(.pk) .hb-txt{align-items:flex-start;padding-top:36px}
  .hb-split:not(.flat):not(.pk) .hb-l4{font-size:12px}
  .hb-split:not(.flat):not(.pk) .hb-l2{font-size:clamp(26px,8.2vw,34px);margin-top:.4em}
  .hb-split:not(.flat):not(.pk) .hb-txt .sub{font-size:13px;margin-top:.9em}
  .hb-split:not(.flat):not(.pk) .hb-l1{font-size:14px;margin-top:1.3em}
  .hb-split:not(.flat):not(.pk) .hb-txt .pill.big{align-self:flex-start;height:48px;padding:0 26px;font-size:15px;margin:24px 0 0}
}