/* ============================================================
   HOME v2 — réplique UI/UX de la référence :
   hero wordmark géant + portrait, sidebar fixe, timeline courbe,
   slider projets, révélation mot à mot, bande wordmark, FAQ.
   ============================================================ */

body.home{--side-w:236px;--side-gap:18px}

/* ================= HERO ================= */
.hero2{
  min-height:100svh;position:relative;overflow:hidden;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding-bottom:clamp(16px,3vh,40px);
}
.hero2-word{
  /* centrage sans transform : le scrub mobile écrit dans transform,
     un translateX(-50%) de centrage serait écrasé au premier défilement */
  position:absolute;top:clamp(8px,3vh,36px);left:0;transform:none;
  width:100%;text-align:center;
  font-family:var(--font-display);font-weight:900;line-height:.8;
  /* Le (R) est sorti du flux : les lettres seules dictent la largeur,
     donc le mot peut monter d'un cran et toucher les deux bords. */
  font-size:min(24.3vw,46vh);letter-spacing:-.045em;color:var(--ornament);
  user-select:none;pointer-events:none;white-space:nowrap;
}
.hero2-word sup{position:absolute;top:.09em;right:.4vw;font-size:.11em;letter-spacing:0;line-height:1}
.hero2-figure{
  position:absolute;bottom:0;left:50%;transform:translateX(-50%);
  width:min(560px,72vw);height:min(78vh,640px);
  display:flex;align-items:flex-end;justify-content:center;
  pointer-events:none;
}
.hero2-figure svg{width:100%;height:100%;filter:drop-shadow(0 30px 60px rgba(var(--ink-rgb),.25))}
.hero2-figure .photo-chip{
  position:absolute;top:26%;left:50%;transform:translateX(-50%);
  pointer-events:auto;
  font-family:var(--font-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  background:rgba(var(--ink-rgb),.55);color:var(--cream-on-dark);border:1px solid rgba(var(--cream-rgb),.3);
  border-radius:999px;padding:7px 13px;backdrop-filter:blur(8px);white-space:nowrap;
}
.hero2-nav{
  position:relative;z-index:3;
  display:flex;justify-content:space-between;gap:20px;
  width:min(1500px,100%);margin:0 auto;padding:0 var(--gutter);
  /* Le wordmark est en position absolue : cette marge haute garantit que la nav
     ne vient jamais s'asseoir sur les lettres, quelle que soit la hauteur d'ecran. */
  margin-top:calc(min(24.3vw,46vh) * 0.86);
  margin-bottom:clamp(18px,4vh,44px);
}
.hero2-nav .grp{display:flex;align-items:center}
.hero2-nav a{
  font-family:var(--font-body);font-size:clamp(13px,1.1vw,16px);font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  padding:4px clamp(10px,1.2vw,17px);transition:opacity .3s var(--ease);
}
.hero2-nav .grp a:first-child{padding-left:0}
.hero2-nav .grp a:last-child{padding-right:0}
.hero2-nav a+a{border-left:1.5px solid rgba(var(--ink-rgb),.3)}
@media(hover:hover) and (pointer:fine){.hero2-nav a:hover{opacity:.55}}
.hero2-center{
  position:relative;z-index:3;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:22px;
  padding:0 var(--gutter);
}
.hero2-center h1{
  font-family:var(--font-title);font-weight:400;font-synthesis:none;letter-spacing:-.01em;line-height:.96;
  font-size:clamp(34px,4.6vw,64px);max-width:14ch;
  text-shadow:0 2px 24px rgba(var(--canvas-rgb),.9),0 0 60px rgba(var(--canvas-rgb),.85);
}
.hero2-ctas{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.btn.solid-yellow{background:var(--action-surface);color:var(--on-action);border-color:var(--action-surface)}
.btn.solid-yellow::before{background:var(--panel-2)}
.btn.on-cream{background:var(--panel-2);color:var(--ink);border-color:var(--ink)}
.btn.on-cream::before{background:var(--action-surface)}

.hero2-cards-l,.hero2-cards-r{
  position:absolute;z-index:2;display:flex;flex-direction:column;gap:12px;
}
.hero2-cards-l{left:clamp(16px,6vw,110px);bottom:20vh}
.hero2-cards-r{right:clamp(16px,6vw,110px);bottom:18vh}
/* Verre CLAIR, mesure sur la reference : rgba(194,184,172,.3), rayon 8px.
   Sur la photo sombre il lit gris, sur le fond creme il disparait — c'est voulu. */
.glass{
  background:rgba(var(--canvas-rgb),.42);border:1px solid rgba(var(--ink-rgb),.06);border-radius:8px;
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);padding:14px 18px;
  color:var(--ink);
}
.glass-stat{display:flex;align-items:center;gap:14px}
.glass-stat .n{font-family:var(--font-display);font-weight:900;font-size:38px;line-height:1;color:var(--ornament)}
.glass-stat .n em{font-style:normal;color:var(--ornament)}
.glass-stat .t{font-family:var(--font-body);font-weight:700;font-size:13px;letter-spacing:.01em;color:var(--ink);line-height:1.32}
.glass-list{display:flex;flex-direction:column;gap:11px;padding:16px 20px}
.glass-list span{display:flex;align-items:center;gap:11px;font-family:var(--font-body);font-size:14.5px;letter-spacing:.01em;font-weight:700;color:var(--ink)}
.glass-list span::before{content:"✦";color:var(--ornament);font-size:13px}
.hero2-foot{
  position:relative;z-index:3;
  display:flex;justify-content:space-between;align-items:flex-end;gap:30px;
  width:min(1500px,100%);margin:clamp(20px,4vh,44px) auto 0;padding:0 var(--gutter);
  font-size:14.5px;color:var(--ink-soft);
}
.hero2-foot .fl{max-width:22ch;font-weight:500}
.hero2-foot .fr{max-width:40ch;text-align:right}
@media(max-width:1000px){
  .hero2-cards-l,.hero2-cards-r{display:none}
  .hero2-nav .grp.right{display:none}
  .hero2-foot .fr{display:none}
  .hero2-word{font-size:min(23.5vw,34vh)}
  .hero2-figure .photo-chip{top:6%}
}

/* ================= SIDEBAR ================= */
.side{
  position:fixed;z-index:9000;left:var(--side-gap);top:var(--side-gap);bottom:var(--side-gap);
  width:var(--side-w);display:flex;flex-direction:column;gap:10px;
  opacity:0;transform:translateX(-24px);pointer-events:none;
  transition:opacity .5s var(--ease),transform .5s var(--ease);
}
.side.show{opacity:1;transform:none;pointer-events:auto}
.side-panel{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:14px}
.side-brand{display:flex;align-items:center;justify-content:space-between}
.side-brand .mark{
  background:var(--ornament);border:1.5px solid var(--ink);border-radius:8px;
  font-family:var(--font-display);font-weight:900;font-size:13px;padding:4px 9px;letter-spacing:0;
}
.side-desc{margin-top:10px;font-size:11.5px;line-height:1.55;color:var(--muted)}
.side-stats{display:grid;grid-template-columns:1fr 1fr;gap:0;padding:0}
.side-stats>div{padding:12px 14px;text-align:center}
.side-stats>div:first-child{border-right:1px solid var(--line)}
/* 3e stat (Pays) : pleine largeur sous les deux premières, filet au-dessus */
.side-stats>div:nth-child(3){grid-column:1/-1;border-top:1px solid var(--line)}
.side-stats .n{font-family:var(--font-display);font-weight:900;font-size:19px}
.side-stats .n em{font-style:normal;color:var(--ornament)}
.side-stats .t{font-family:var(--font-mono);font-size:8.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-top:2px;line-height:1.5}
.side-menu{display:flex;flex-direction:column;gap:4px;padding:10px;flex:1;overflow:auto}
.side-menu a{
  display:flex;align-items:center;gap:10px;
  font-family:var(--font-mono);font-size:10.5px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;
  padding:8px 11px;border-radius:999px;color:var(--ink-soft);
  transition:background .3s var(--ease),color .3s var(--ease);
}
.side-menu a .ic{font-size:11px;width:14px;text-align:center;color:var(--ink)}
@media(hover:hover) and (pointer:fine){.side-menu a:hover{background:rgba(var(--ink-rgb),.06);color:var(--ink)}}
.side-menu a.active{background:var(--action-surface);color:var(--on-action);border:1px solid var(--action-surface);padding:7px 10px}
.side-marquee{overflow:hidden;padding:9px 0;border-radius:14px}
.side-marquee .mtrack{display:flex;width:max-content;animation:marquee 25s linear infinite}
.side-marquee .mtrack span{
  font-family:var(--font-mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-soft);padding:0 12px;white-space:nowrap;
}
.side-mail{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;color:var(--ink-soft);
  padding:10px 14px;
}
.side-cta{
  display:flex;align-items:center;justify-content:center;
  background:var(--action-surface);color:var(--on-action);border:1.5px solid var(--action-surface);border-radius:12px;
  font-family:var(--font-mono);font-size:11.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  padding:13px;transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
@media(hover:hover) and (pointer:fine){.side-cta:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(var(--ink-rgb),.15)}}
@media(max-width:1180px){.side{display:none}}

/* main shifted right of sidebar */
@media(min-width:1181px){
  body.home .shifted{padding-left:calc(var(--side-w) + var(--side-gap) * 2)}
}

/* ================= JOURNEY (timeline courbe) ================= */
.journey{position:relative}
.j-head{max-width:640px}
.j-head .d-1 .acc-word{color:var(--ornament);-webkit-text-stroke:1.5px var(--ink)}
.j-track{position:relative;margin-top:clamp(30px,4vw,60px)}
.j-line{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
/* pathLength=1000 normalise la longueur : le tiret est déclarable en dur,
   et sans JS (aucune animation) la ligne est simplement visible en entier. */
.j-line path{stroke:var(--ink);stroke-width:1.6;fill:none;stroke-dasharray:1000}
.j-item{
  position:relative;width:min(480px,92%);
  background:var(--panel-2);border:1px solid var(--line-strong);border-radius:16px;
  padding:var(--s-32);
  margin:clamp(24px,4vw,56px) 0;
  box-shadow:0 14px 40px rgba(var(--ink-rgb),.06);
}
.j-item:nth-child(even){margin-left:auto}
.j-item .j-year{font-family:var(--font-title);font-weight:400;font-synthesis:none;font-size:clamp(40px,3.6vw,54px);line-height:1;color:var(--ornament)}
/* millésime-rouleau : fenêtre d'un chiffre, colonne 0-9 qui glisse */
.j-item .j-year{display:flex;align-items:flex-start}
.jy-win{display:inline-block;overflow:hidden;height:1em;line-height:1}
.jy-track{display:flex;flex-direction:column;will-change:transform}
.jy-d{display:block;height:1em;line-height:1}
.j-item h3{font-family:var(--font-display);font-weight:800;text-transform:uppercase;font-size:clamp(17px,1.5vw,22px);letter-spacing:-.01em;margin-top:8px}
.j-item p{color:var(--muted);font-size:14.5px;margin-top:8px}
.j-item .j-meta{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.j-item .j-tag{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
.j-item .j-ic{
  width:26px;height:26px;border-radius:50%;background:var(--ornament);border:1.5px solid var(--ink);
  display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--ink);
}
.j-item .j-ic svg{width:13px;height:13px;display:block}
.j-more{
  font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  border:1px solid var(--line-strong);border-radius:999px;padding:7px 13px;
  transition:background .3s var(--ease);white-space:nowrap;
}
@media(hover:hover) and (pointer:fine){.j-more:hover{background:var(--action-surface);color:var(--on-action)}}

/* ================= SLIDER PROJETS ================= */
.slider-wrap{position:relative}
.slider{
  display:flex;gap:var(--s-16);overflow-x:auto;scroll-snap-type:x mandatory;
  padding:6px 6px 22px;cursor:grab;scrollbar-width:none;
}
.slider::-webkit-scrollbar{display:none}
.slider.dragging{cursor:grabbing;scroll-snap-type:none}
.s-card{
  flex:0 0 min(420px,84vw);scroll-snap-align:start;
  border-radius:16px;overflow:hidden;border:1px solid var(--line-strong);
  background:var(--dark);color:var(--cream-on-dark);
  display:flex;flex-direction:column;min-height:480px;position:relative;
}
.s-card .s-visual{
  flex:1;position:relative;min-height:300px;
  background:
    radial-gradient(120% 100% at 20% 0%,rgba(var(--accent-rgb),.32),transparent 55%),
    radial-gradient(130% 120% at 90% 100%,rgba(var(--proj-glow-rgb),.6),transparent 60%),
    linear-gradient(160deg,var(--proj-1a),var(--dark));
}
.s-card:nth-child(2) .s-visual{background:radial-gradient(120% 100% at 80% 0%,rgba(var(--accent-rgb),.26),transparent 50%),linear-gradient(200deg,var(--proj-2a),var(--dark))}
.s-card:nth-child(3) .s-visual{background:radial-gradient(100% 100% at 50% 100%,rgba(var(--accent-rgb),.22),transparent 55%),linear-gradient(180deg,var(--proj-3a),var(--proj-3b))}
.s-card:nth-child(4) .s-visual{background:radial-gradient(140% 90% at 10% 90%,rgba(var(--accent-rgb),.3),transparent 55%),linear-gradient(150deg,var(--proj-4a),var(--proj-4b))}
.s-card:nth-child(5) .s-visual{background:radial-gradient(120% 110% at 90% 20%,rgba(var(--accent-rgb),.24),transparent 50%),linear-gradient(210deg,var(--proj-5a),var(--proj-5b))}
.s-card .s-visual::after{
  content:"";position:absolute;inset:0;opacity:.16;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* photos réelles dans les cartes : plein jus, sans voile ni désaturation.
   La lisibilité des chips est portée par leur propre fond translucide. */
.s-card .s-photo{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
}
.s-card .s-veil{display:none}
.s-card .has-photo .s-num,
.s-card .has-photo .s-tags span{
  background:rgba(12,32,51,.48);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.s-card .s-top{position:absolute;top:14px;left:14px;right:14px;display:flex;justify-content:space-between;gap:10px;z-index:2}
.s-card .s-num{
  width:34px;height:34px;border-radius:50%;border:1px solid rgba(var(--cream-rgb),.4);
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--font-mono);font-size:11px;background:rgba(var(--ink-rgb),.4);backdrop-filter:blur(6px);
}
.s-card .s-tags{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.s-card .s-tags span{
  font-family:var(--font-mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;
  border:1px solid rgba(var(--cream-rgb),.35);border-radius:999px;padding:5px 11px;
  background:rgba(var(--ink-rgb),.4);backdrop-filter:blur(6px);
}
.s-card .s-body{padding:18px 20px 20px;display:flex;align-items:flex-end;gap:14px;justify-content:space-between}
.s-card h3{font-family:var(--font-title);font-weight:400;font-synthesis:none;text-transform:none;letter-spacing:-.01em;font-size:clamp(19px,1.8vw,25px);line-height:1.1}
.s-card .s-body p{color:rgba(var(--cream-rgb),.6);font-size:13.5px;margin-top:6px;max-width:40ch}
.s-card .s-go{
  flex-shrink:0;width:40px;height:40px;border-radius:50%;
  background:var(--action-surface);color:var(--on-action);border:1.5px solid var(--action-surface);
  display:inline-flex;align-items:center;justify-content:center;font-size:15px;
  transition:transform .3s var(--ease);
}
@media(hover:hover) and (pointer:fine){.s-card:hover .s-go{transform:translate(3px,-3px)}}
.slider-hint{
  margin-top:4px;display:flex;align-items:center;gap:10px;
  font-family:var(--font-mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);
}
.slider-hint::after{content:"";flex:0 0 60px;height:1px;background:var(--ink);animation:hintslide 2.4s var(--ease) infinite}
@keyframes hintslide{0%{transform:translateX(0)}50%{transform:translateX(18px)}100%{transform:translateX(0)}}

/* ================= WORD REVEAL ================= */
.wyg{text-align:center}
.wyg .giant{
  font-family:var(--font-display);font-weight:900;text-transform:uppercase;letter-spacing:-.03em;
  font-size:clamp(46px,8.4vw,120px);line-height:.94;
}
.wyg .chip.fill{margin:26px auto 0}
.reveal-par{
  margin:clamp(24px,3vw,44px) auto 0;max-width:20ch;
  font-family:var(--font-display);font-weight:800;letter-spacing:-.02em;line-height:1.18;
  font-size:clamp(24px,3.4vw,46px);text-wrap:balance;
}
.reveal-par .rw{opacity:.16;transition:opacity .35s var(--ease)}
.reveal-par .rw.on{opacity:1}
.cap-rows{margin-top:clamp(40px,5vw,70px);text-align:left}

/* ================= FAQ 2 colonnes ================= */
.faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-16)}
@media(max-width:860px){.faq-grid{grid-template-columns:1fr}}
.faq-item{background:var(--panel);border:1px solid var(--line);border-radius:12px;overflow:hidden;height:fit-content}
.faq-item button{
  width:100%;display:flex;justify-content:space-between;align-items:center;gap:14px;
  padding:18px 20px;text-align:left;font-weight:600;font-size:14.5px;
}
.faq-item .fx{
  flex-shrink:0;width:28px;height:28px;border-radius:50%;border:1px solid var(--line-strong);
  display:inline-flex;align-items:center;justify-content:center;position:relative;
  transition:background .3s var(--ease),transform .4s var(--ease);
}
.faq-item .fx::before,.faq-item .fx::after{content:"";position:absolute;background:var(--ink)}
.faq-item .fx::before{width:11px;height:1.6px}
.faq-item .fx::after{width:1.6px;height:11px;transition:transform .3s var(--ease)}
.faq-item.open .fx{background:var(--accent);transform:rotate(180deg)}
.faq-item.open .fx::after{transform:scaleY(0)}
.faq-item .fbody{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s var(--ease)}
.faq-item.open .fbody{grid-template-rows:1fr}
.faq-item .fbody>div{overflow:hidden}
.faq-item .fbody p{padding:0 20px 18px;color:var(--muted);font-size:14px}

/* ================= BANDE WORDMARK ================= */
.wordmark-band{padding:var(--s-112) 0;overflow:hidden}
.wordmark-band .wm{
  font-family:var(--font-display);font-weight:900;line-height:.8;text-align:center;
  font-size:min(19.5vw,282px);letter-spacing:-.02em;color:var(--ornament);
  white-space:nowrap;user-select:none;
  text-shadow:0 20px 60px rgba(var(--accent-deep-rgb),.25);
}
.wordmark-band .wm sup{font-size:.12em;vertical-align:2.4em}

/* titres dans les entêtes 2 colonnes : plafonnés pour rester dans leur colonne */
body.home .two-col .d-1{font-size:clamp(24px,2.9vw,42px)}

/* ================= divers ================= */
.sec-pad{padding-block:var(--s-128)}
.home-container{width:min(1240px,100%);margin-inline:auto;padding-inline:var(--gutter)}

/* ============================================================
   PASSE DE PRÉCISION — alignée sur les mesures du site de référence
   (titres 66px/500 casse normale, contenu à ~302px, pastilles jaunes
   r12, sidebar en verre dépoli, section projets sombre pleine largeur)
   ============================================================ */

/* ---- Typographie : casse normale, graisse medium ---- */
body.home .j-item h3,body.home .card h3,body.home .s-card h3,
body.home .reveal-par,body.home .quote-block blockquote{
  font-family:var(--font-body);
  font-weight:600;
  text-transform:none;
  letter-spacing:-.022em;
}
body.home .d-1,body.home .d-2,body.home .d-3,body.home .giant{
  font-family:var(--font-title);
  font-weight:400;
  font-synthesis:none;
  text-transform:none;
  letter-spacing:-.01em;
}
body.home .d-1{font-size:clamp(34px,4.6vw,66px);line-height:1.04}
body.home .d-2{font-size:clamp(26px,3.4vw,48px);line-height:1.08}
body.home .two-col .d-1,
body.home .ct-grid-home .d-1{font-size:clamp(26px,3.2vw,46px)}
body.home .giant{font-size:clamp(48px,7.6vw,108px);line-height:.98}
body.home .reveal-par{font-weight:600;font-size:clamp(22px,3vw,40px);line-height:1.22;max-width:24ch}
body.home .j-item h3{font-size:clamp(18px,1.7vw,24px)}
body.home .card h3{font-size:clamp(17px,1.5vw,22px)}
body.home .s-card h3{font-size:clamp(18px,1.8vw,26px)}
body.home .row-item h3{font-family:var(--font-body);font-weight:600;text-transform:none;letter-spacing:-.015em}
body.home .j-item .j-claim{
  font-weight:600;color:var(--ink);font-size:15px;letter-spacing:-.01em;
  margin:2px 0 4px;
}
body.home .kicker{color:var(--ink-soft)}

/* ---- Pastilles kicker : contour noir, fond transparent ---- */
body.home .chip.fill{
  background:transparent;border:1.5px solid var(--ink);color:var(--ink);
  font-weight:500;letter-spacing:.1em;
}
body.home .band-dark .chip.fill,body.home .on-dark .chip.fill{
  border-color:rgba(var(--cream-rgb),.8);color:var(--cream-on-dark);
}

/* ---- Boutons : casse normale, radius 12, comme la référence ---- */
body.home .btn{
  font-family:var(--font-body);text-transform:none;letter-spacing:0;
  font-weight:600;font-size:15px;border-radius:12px;padding:12px 22px;
}
body.home .hero2-ctas .btn{
  background:var(--action-surface);color:var(--on-action);border:none;padding:11px 20px;
}
/* Une seule action rust par vue : le second bouton passe en secondaire. */
body.home .hero2-ctas .btn.on-cream{
  /* Le hero se pose sur la photo : un fond transparent rendrait le libellé
     illisible sur le blazer. Rempli en crème, il reste lisible partout. */
  background:var(--cream-on-dark);color:var(--ink);border:none;
}
body.home .hero2-ctas .btn.on-cream::before{background:var(--ink)}
@media(hover:hover) and (pointer:fine){body.home .hero2-ctas .btn.on-cream:hover{color:var(--cream-on-dark)}}
body.home .hero2-ctas .btn::before{background:var(--panel-2)}

/* ---- Hero : titre crème aligné à gauche, à ~36% ---- */
.hero2-center{align-items:flex-start;text-align:left;padding:0;margin-left:35.5%;margin-right:auto;max-width:560px}
.hero2-center h1{
  /* Tenue claire : le blanc s'y noyait. Navy + halo creme, lisible sur
     le vetement comme sur le fond — toutes tailles d'ecran. */
  color:var(--ink);font-weight:400;letter-spacing:-.01em;
  font-size:clamp(40px,5.3vw,76px);line-height:1.03;
  text-shadow:0 2px 24px rgba(var(--canvas-rgb),.95),0 0 60px rgba(var(--canvas-rgb),.9);
}
.hero2-ctas{justify-content:flex-start}
.hero2-figure{width:min(660px,86vw);height:min(88vh,790px)}
@media(max-width:1000px){
  .hero2-center{align-items:center;text-align:center;margin-inline:auto;padding:0 var(--gutter)}
  .hero2-ctas{justify-content:center}
}

/* ---- Sidebar : verre dépoli, menu en pilules ---- */
.side-panel{
  background:rgba(var(--cream-rgb),.55);
  border-color:rgba(var(--ink-rgb),.08);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
}
.side-brand .mark{font-size:16px;padding:7px 13px;border-radius:10px}
.side-brand .socials a{
  width:26px;height:26px;border-radius:8px;border:none;
  background:var(--dark);color:var(--cream-on-dark);font-size:11px;
}
@media(hover:hover) and (pointer:fine){.side-brand .socials a:hover{background:var(--accent);color:var(--ink)}}
.side-menu{gap:7px;padding:12px}
.side-menu a{
  font-family:var(--font-body);font-weight:600;font-size:13px;letter-spacing:.02em;
  background:rgba(var(--panel-2-rgb),.8);border-radius:10px;padding:9px 12px;color:var(--ink);
}
.side-menu a .ic{
  /* Comme la reference : pictogramme plein pose directement sur la pilule, sans pastille. */
  width:20px;height:20px;color:var(--ink);
  display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
}
.side-menu a .ic svg{width:16px;height:16px;display:block}
.side-menu a.active .ic{color:var(--on-action)}
@media(hover:hover) and (pointer:fine){.side-menu a:hover{background:var(--panel-2)}}
.side-menu a.active{background:var(--action-surface);color:var(--on-action);border:none;padding:9px 12px}
.side-mail{background:rgba(var(--panel-2-rgb),.75)}
.side-cta{
  font-family:var(--font-body);font-weight:600;font-size:15px;letter-spacing:.01em;
  text-transform:none;border-radius:12px;padding:15px;
}

/* ---- Timeline : cartes en verre, années jaune pur, points sur la courbe ---- */
.j-item{
  background:rgba(var(--panel-2-rgb),.72);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-color:rgba(var(--ink-rgb),.1);
}
.j-item .j-year{color:var(--ornament);-webkit-text-stroke:0;text-shadow:0 1px 0 rgba(var(--ink-rgb),.18)}
.j-item::after{
  content:"";position:absolute;top:50%;width:11px;height:11px;border-radius:50%;
  background:var(--ornament);border:1.5px solid var(--ink);
}
.j-item:nth-child(odd)::after{right:-38px}
.j-item:nth-child(even)::after{left:-38px}
@media(max-width:760px){.j-item::after{display:none}}
.j-more{
  font-family:var(--font-body);font-weight:500;font-size:13px;letter-spacing:0;text-transform:none;
  background:var(--panel-2);border-color:rgba(var(--ink-rgb),.14);border-radius:9px;padding:8px 14px;
}
.j-item .j-tag{font-weight:500}

/* ---- Projets : section sombre pleine largeur sous la sidebar ---- */
.band-dark{background:var(--band-dark);color:var(--cream-on-dark);padding-block:var(--s-128)}
.band-dark .body-copy{color:rgba(var(--cream-rgb),.65)}
.band-dark .d-1{color:var(--panel-2)}
/* body.home .kicker est plus specifique que .on-dark .kicker :
   sans ces deux regles, les kickers des bandes sombres retombaient en encre. */
body.home .band-dark .kicker,
body.home .on-dark .kicker{color:rgba(var(--cream-rgb),.75)}
.band-dark .slider-hint{color:rgba(var(--cream-rgb),.55)}
.band-dark .slider-hint::after{background:var(--cream-on-dark)}
.band-dark .s-card{border-color:rgba(var(--cream-rgb),.14)}
@media(min-width:1181px){
  body.home .band-dark{
    margin-left:calc(-1 * (var(--side-w) + var(--side-gap) * 2));
    padding-left:calc(var(--side-w) + var(--side-gap) * 2);
  }
}

/* ---- Hero : portrait détouré réel (remplace la silhouette) ----
   La figure occupe toute la largeur : en `width:auto` avec `left:50%`,
   le navigateur la bride à 50% de l'écran, ce qui écrasait la photo sur mobile. */
.hero2-figure{
  left:0;right:0;bottom:0;width:auto;transform:none;
  height:min(92vh,860px);align-items:flex-end;justify-content:center;
}
.hero2-figure img{
  height:100%;width:auto;max-width:none;
  object-fit:contain;object-position:bottom center;
}
@media(max-width:1000px){
  .hero2-figure{height:min(78vh,660px)}
}

/* titre hero sur 2 lignes : dégage le visage, rythme court/long de la référence */
.hero2-center h1{max-width:none;font-size:clamp(32px,4vw,58px)}
@media(max-width:900px){.hero2-center h1{max-width:14ch}}

/* ---- Hero mobile : la photo remonte pour dégager le visage, nav masquée (burger) ---- */
@media(max-width:900px){
  .hero2-nav{display:none}
  .hero2-figure{height:min(88vh,740px)}
  .hero2-center{gap:16px;margin-bottom:6px}
  .hero2-center h1{font-size:clamp(30px,8.4vw,42px);max-width:11ch}
  .hero2-ctas .btn{font-size:14px;padding:11px 16px}
  .hero2-foot{margin-top:14px;font-size:12px}
  .hero2-foot .fl{max-width:none}
}

/* Sur mobile la photo occupe toute la largeur : le texte de bas de hero passe
   sur le blazer sombre. Voile dégradé + texte crème pour garder un contraste réel. */
@media(max-width:900px){
  .hero2::after{
    content:"";position:absolute;left:0;right:0;bottom:0;height:34vh;z-index:1;
    pointer-events:none;
    background:linear-gradient(to top,rgba(var(--ink-rgb),.72),rgba(var(--ink-rgb),.32) 45%,rgba(var(--ink-rgb),0));
  }
  .hero2-foot{color:var(--cream-on-dark);text-shadow:0 1px 3px rgba(var(--ink-rgb),.9)}
  .hero2-foot strong{color:var(--white)}
  /* Tenue claire : le titre garde le navy + halo creme du desktop.
     (L'override blanc datait du blazer sombre de l'ancienne photo.) */
}

/* ================= CARROUSEL : pagination + curseur ================= */
.slider-nav{
  display:inline-flex;align-items:center;gap:7px;
  padding:10px;border-radius:8px;
  border:1px solid rgba(var(--cream-rgb),.22);
  margin-bottom:var(--s-24);
}
.slider-nav button{
  width:10px;height:10px;padding:0;border:none;border-radius:999px;
  background:rgba(var(--cream-rgb),.3);cursor:pointer;
  transition:width .45s var(--ease),background .3s var(--ease);
}
.slider-nav button.is-active{width:36px;background:var(--ornament)}
.slider-nav button:focus-visible{outline:2px solid var(--ornament);outline-offset:3px}

/* Curseur de glissement : remplace le pointeur au-dessus du rail. */
.drag-wrap{
  position:fixed;top:0;left:0;z-index:9500;pointer-events:none;
  display:flex;align-items:center;gap:10px;
  opacity:0;transition:opacity .25s var(--ease);will-change:transform;
}
body.drag-on .drag-wrap{opacity:1}
body.drag-on .cursor{opacity:0}
.drag-circle{
  width:72px;height:72px;border-radius:50%;
  background:var(--ornament);color:var(--navy);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  transition:transform .3s var(--ease);
}
body.drag-press .drag-circle{transform:scale(.88)}
.drag-wrap .chev{color:var(--cream-on-dark);font-size:13px}
@media(hover:hover) and (pointer:fine){.slider{cursor:none}}
@media(prefers-reduced-motion:reduce){.drag-wrap{display:none}.slider{cursor:grab}}

/* ============================================================
   HERO — COMPOSITION ÉDITORIALE EN COUCHES (desktop ≥ 1001px)
   Remplace le flux flex par un empilement absolu maîtrisé.
   Couches : 1 mot · 2 nav · 3 photo · 4 cartes · 5 titre+CTA · 6 coins
   Le mobile (≤1000px) garde sa mise en page en flux, plus bas.
   ============================================================ */
@media(min-width:1001px){

  body.home .hero2{
    min-height:100svh;height:100svh;padding:0;
    display:block;               /* plus de flux : tout est positionné */
  }

  /* --- couche 1 : le grand mot --- */
  body.home .hero2-word{
    top:1.5vh;z-index:1;
    font-size:min(24.9vw,48vh);letter-spacing:-.07em;line-height:.74;
  }

  /* --- couche 2 : la nav scindée, à mi-hauteur de la composition --- */
  /* Au niveau du cou (~46%), la silhouette ne fait que ~13vw de large :
     les deux groupes de liens ont toute la place, rien ne passe derrière l'épaule. */
  body.home .hero2-nav{
    position:absolute;left:0;right:0;top:46%;transform:translateY(-50%);
    /* pleine largeur : sans ça, le plafond de 1500px + margin:0 épinglait
       le conteneur à gauche sur grand écran et poussait les liens sur la silhouette */
    width:100%;margin:0;z-index:2;
  }
  body.home .hero2-nav a{font-size:clamp(12.5px,.95vw,14px);padding:4px clamp(9px,1vw,14px)}

  /* --- couche 3 : la photo, tête vers ~12% de la section --- */
  body.home .hero2-figure{
    height:88svh;width:auto;left:0;right:0;bottom:0;z-index:3;
    pointer-events:none;         /* transparente aux clics : la nav reste cliquable dessous */
  }
  body.home .hero2-figure img{height:100%;width:auto;max-width:none;object-fit:contain;object-position:center bottom}

  /* --- couche 4 : cartes latérales, sous la nav --- */
  body.home .hero2-cards-l{left:var(--gutter);right:auto;top:47%;bottom:auto;z-index:4;max-width:300px}
  body.home .hero2-cards-r{right:var(--gutter);left:auto;top:56%;bottom:auto;z-index:4;max-width:320px}

  /* --- couche 5 : titre + boutons, devant le buste --- */
  body.home .hero2-center{
    position:absolute;left:36%;top:59%;z-index:5;
    margin:0;padding:0;max-width:none;
    align-items:flex-start;text-align:left;gap:26px;
  }
  body.home .hero2-center h1{
    font-size:clamp(3rem,5vw,6.5rem);line-height:.98;font-weight:400;
    letter-spacing:-.01em;
  }
  body.home .hero2-ctas{justify-content:flex-start;gap:14px}
  body.home .hero2-ctas .btn{font-size:16px;padding:13px 26px}

  /* --- couche 6 : textes des angles inférieurs --- */
  body.home .hero2-foot{
    position:absolute;left:0;right:0;bottom:3.5vh;width:100%;margin:0;z-index:6;
  }
  /* Bornés à la zone libre à côté de la photo : jamais de texte sur le blazer. */
  body.home .hero2-foot .fl{max-width:23ch}
  body.home .hero2-foot .fr{max-width:24ch}
}

/* Trois cartes : compaction sous 820px de haut pour ne toucher ni nav ni pied. */
@media(min-width:1001px) and (max-height:820px){
  body.home .hero2-cards-l .glass{padding:10px 14px}
  body.home .hero2-cards-l{gap:8px}
  body.home .glass-stat .n{font-size:30px}
  body.home .glass-stat .t{font-size:12px}
}

/* Écrans desktop peu hauts : la composition se resserre au lieu de se chevaucher. */
@media(min-width:1001px) and (max-height:760px){
  body.home .hero2-word{font-size:min(24.9vw,42vh)}
  body.home .hero2-nav{top:44%}
  body.home .hero2-center{top:57%}
  body.home .hero2-cards-l,body.home .hero2-cards-r{top:45%}
}

/* ============================================================
   HERO — trois corrections ciblées
   1. colonne droite : un seul parent positionné, flux vertical dedans
   2. verre dépoli réel sur les trois cartes
   3. nav placée par rapport au wordmark, plus par rapport au viewport
   ============================================================ */

/* ---- 2. VERRE DÉPOLI (toutes tailles) ---- */
.glass.glass-card{
  background:linear-gradient(135deg,
    rgba(var(--panel-2-rgb),.55),
    rgba(var(--canvas-rgb),.30));
  -webkit-backdrop-filter:blur(18px) saturate(135%);
  backdrop-filter:blur(18px) saturate(135%);
  border:1px solid rgba(var(--ink-rgb),.12);
  border-radius:10px;
  box-shadow:0 12px 32px rgba(var(--ink-rgb),.07),
             inset 0 1px 0 rgba(255,255,255,.28);
  isolation:isolate;
  transition:transform 250ms ease,box-shadow 250ms ease;
}
@media(hover:hover) and (pointer:fine){
  .glass.glass-card:hover{
    transform:translateY(-3px);
    box-shadow:0 16px 38px rgba(var(--ink-rgb),.10),
               inset 0 1px 0 rgba(255,255,255,.32);
  }
}

@media(min-width:1001px){

  /* ---- 3. Zone de marque : la nav se positionne SOUS le mot, pas dans le vide ---- */
  body.home .hero-brand-area{
    position:absolute;top:clamp(1.5rem,3vh,3rem);left:0;right:0;z-index:1;
  }
  body.home .hero2-word{
    position:relative;top:auto;left:auto;transform:none;width:100%;
  }
  body.home .hero2-nav{
    position:relative;top:auto;left:auto;right:auto;transform:none;
    width:100%;padding:0 var(--gutter);z-index:5;
    /* line-height .74 place le bas de la boîte ~10-14px SOUS la limite visuelle
       des lettres (mesuré au scan de pixels). Ces valeurs donnent 21-27px
       d'écart visuel réel de 1366 à 1920, dans la fourchette 20-35px voulue. */
    margin:clamp(11px,1.2vh,20px) 0 0;
    display:grid;grid-template-columns:1fr minmax(300px,42vw) 1fr;align-items:center;
  }
  body.home .hero2-nav .grp.left{grid-column:1;justify-self:start}
  body.home .hero2-nav .grp.right{grid-column:3;justify-self:end}

  /* ---- 1. Colonne droite : un seul parent positionné ---- */
  body.home .hero-right-content{
    position:absolute;right:clamp(2rem,4vw,5rem);
    /* ancre par le BAS : le paragraphe se termine toujours au-dessus du pli,
       quelle que soit la hauteur d'ecran (56% du haut debordait entre 850 et 950px) */
    top:auto;bottom:clamp(2.5rem,5vh,4.5rem);
    width:clamp(290px,24vw,390px);
    display:flex;flex-direction:column;align-items:stretch;
    gap:clamp(1.5rem,3vh,3rem);
    z-index:5;
  }
  body.home .hero-right-card,
  body.home .hero-right-description{
    position:static;inset:auto;transform:none;width:100%;margin:0;max-width:none;
  }
  body.home .hero2-cards-r{display:none}   /* ancien conteneur, remplacé */
}

/* ---- Desktop peu haut : on resserre au lieu de laisser chevaucher ---- */
@media(min-width:1024px) and (max-height:850px){
  body.home .hero-right-content{gap:1.5rem}           /* 24px : le plancher demandé */
  body.home .hero-right-card .glass{padding:1.25rem}
  body.home .hero-right-description{font-size:.95rem;line-height:1.5}
}

/* ---- Sous 1001px : la colonne droite rejoint le flux, aucun absolu ---- */
@media(max-width:1000px){
  .hero-right-content{display:none}
}

/* ============================================================
   HERO — SÉQUENCE AU DÉFILEMENT (architecture de la référence)
   .hero2 court sur 300vh ; .hero2-sticky s'épingle à 100svh pendant
   200vh de défilement ; la photo, absolue dans l'épinglé, ne bouge
   donc plus de l'écran ; puis <main> remonte de 130vh et passe
   par-dessus. Les couches de texte sortent en scrub via data-tl-*.

   Trois verrous : JS actif, desktop, mouvement non réduit.
   Hors de ces trois cas, le hero reste la composition 100svh existante.
   ============================================================ */

/* Sans la séquence, le conteneur n'existe pas pour la mise en page :
   le flux mobile et la composition absolue desktop restent intacts. */
.hero2-sticky{display:contents}

/* L'état `from` du hero EST son état au repos : rien à masquer en attendant
   le moteur, contrairement aux sections qui entrent depuis l'invisible. */
.js .hero2 [data-tl-from]{visibility:visible}

@media(min-width:1001px) and (prefers-reduced-motion:no-preference){

  html.js body.home .hero2{
    height:auto;min-height:300vh;padding:0;
    /* sticky ne s'épingle pas sous un ancêtre en overflow:hidden */
    overflow:visible;position:relative;z-index:1;
  }
  html.js body.home .hero2-sticky{
    display:block;position:sticky;top:0;
    height:100svh;overflow:hidden;   /* reprend le rognage du mot géant */
  }

  /* Le mot se rétracte vers le haut, la photo grandit depuis le sol. */
  html.js body.home .hero2-word{transform-origin:50% 0;will-change:transform,opacity}
  html.js body.home .hero2-figure{transform-origin:50% 100%;will-change:transform}
  html.js body.home .hero2-nav,
  html.js body.home .hero2-center,
  html.js body.home .hero2-cards-l,
  html.js body.home .hero-right-content,
  html.js body.home .hero2-foot{will-change:transform,opacity}

  /* La suite du site remonte et recouvre le hero épinglé.
     Fond opaque obligatoire : sans lui la photo transparaît au travers. */
  html.js body.home #main{
    margin-top:-130vh;position:relative;z-index:2;background:var(--canvas);
  }
}

/* ---- Contact : la disposition exacte de la page Contact ----
   portrait détouré collant à gauche, bloc texte puis formulaire à droite. */
body.home .ct-grid-home{
  display:grid;grid-template-columns:minmax(240px,4fr) minmax(0,8fr);
  gap:clamp(28px,4vw,72px);align-items:start;
}
body.home .ct-figure-home{
  /* ancree au bas de la section : le pied de la photo touche la bande navy */
  align-self:end;
  margin:0 0 calc(-1 * var(--s-128));
  display:flex;justify-content:center;align-items:flex-end;
}
body.home .ct-figure-home img{
  display:block;width:100%;height:auto;
  max-height:min(86svh,820px);
  object-fit:contain;object-position:bottom center;
}
body.home .ct-right-home{display:flex;flex-direction:column;gap:clamp(30px,4vw,54px)}
@media(max-width:900px){
  body.home .ct-grid-home{grid-template-columns:1fr;gap:22px}
  body.home .ct-figure-home{max-width:min(340px,70%);margin-inline:auto;margin-bottom:calc(-1 * var(--s-128))}
  body.home .ct-figure-home img{max-height:46svh}
}