/* ═══════════════════════════════════════════════════════════════
   CONNEXION Y — « LE FIL » · DA encre sur papier · 7AGENCY
   ═══════════════════════════════════════════════════════════════ */

:root{
  --paper:      #F6F1E7;
  --paper-warm: #F2E9D8;
  --ink:        #1E1B4B;   /* encre indigo dérivée du logo */
  --ink-soft:   rgba(30,27,75,.62);
  --ink-faint:  rgba(30,27,75,.14);
  --navy:       #232064;
  --royal:      #2E3192;
  --azure:      #189CD8;
  --teal:       #00A99D;
  --lavande:    #8C8FC7;
  --gold:       #D9A441;

  --serif: "Fraunces", Georgia, serif;
  --sans:  "Outfit", "Helvetica Neue", sans-serif;
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:auto; }
body{
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 300;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
::selection{ background: var(--teal); color:#fff; }

/* ── monde ─────────────────────────────────────── */
#world{ position:fixed; inset:0; width:100vw; height:100vh; z-index:1; display:block; }
.grain{
  position:fixed; inset:-2%; z-index:9; pointer-events:none; opacity:.5; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .42 0 0 0 0 .38 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:240px;
}
.debug-overlay{
  position:fixed; left:14px; bottom:14px; z-index:200; padding:7px 10px;
  background:rgba(30,27,75,.86); color:#fff; border-radius:5px;
  font:500 10px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing:.02em; pointer-events:none;
}

/* ── nav top ───────────────────────────────────── */
.topnav{
  position:fixed; top:0; left:0; right:0; z-index:40;
  display:flex; align-items:center; justify-content:space-between;
  padding: 22px 34px;
}
.brand img{ height:34px; display:block; mix-blend-mode:multiply; }
.topnav-right{ display:flex; align-items:center; gap:22px; }
.top-meta{ font-size:11px; letter-spacing:.22em; color:var(--ink-soft); font-weight:400; }

.btn{
  font-family:var(--sans); font-size:12.5px; font-weight:500; letter-spacing:.14em;
  text-transform:uppercase; cursor:pointer; border-radius:999px;
  padding:13px 26px; transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s, background .35s;
  pointer-events:auto;
}
.btn-ink{
  background:var(--ink); color:var(--paper); border:1px solid var(--ink);
  box-shadow: 0 10px 28px -12px rgba(30,27,75,.55);
}
.btn-ink:hover{ transform:translateY(-2px); box-shadow:0 16px 34px -12px rgba(30,27,75,.6); background:var(--navy); }

/* ── HUD ───────────────────────────────────────── */
.hud{ position:fixed; inset:0; z-index:30; pointer-events:none; }

.scene-counter{
  position:absolute; top:96px; left:36px; display:flex; flex-direction:column; gap:4px;
}
.sc-index{ font-size:11px; letter-spacing:.3em; color:var(--ink-soft); font-variant-numeric:tabular-nums; }
.sc-name{ font-size:12px; letter-spacing:.34em; font-weight:500; color:var(--ink); transition:opacity .4s; }

/* médaillon respiration */
.breath-medal{
  position:absolute; left:36px; bottom:34px; width:72px; height:72px;
  display:flex; align-items:center; justify-content:center;
}
.bm-ring{
  position:absolute; inset:0; border-radius:50%;
  border:1px solid var(--ink-faint);
}
.bm-core{
  width:34px; height:34px; border-radius:50%;
  background: radial-gradient(circle at 35% 30%, var(--azure), var(--royal));
  opacity:.85; will-change:transform;
}
.bm-label{
  position:absolute; left:86px; white-space:nowrap;
  font-size:10px; letter-spacing:.3em; color:var(--ink-soft);
}

/* rail couture */
.rail{
  position:absolute; right:30px; top:50%; transform:translateY(-50%);
  display:flex; flex-direction:column; gap:22px; pointer-events:auto;
}
.rail-thread{
  position:absolute; left:50%; top:6px; bottom:6px; width:0;
  border-left:1px dashed var(--ink-faint); z-index:-1;
}
.rail-fill{
  position:absolute; left:-1.5px; top:0; width:2px; height:0%;
  background:linear-gradient(var(--teal), var(--azure) 55%, var(--royal));
  border-radius:2px; transition:height .2s linear;
}
.rail-dot{
  width:12px; height:12px; border-radius:50%; border:1.5px solid var(--ink-soft);
  background:var(--paper); cursor:pointer; position:relative; transition: all .35s;
}
.rail-dot:hover{ transform:scale(1.25); }
.rail-dot.active{ background:var(--ink); border-color:var(--ink); box-shadow:0 0 0 5px rgba(30,27,75,.1); }
.rail-dot .rd-tip{
  position:absolute; right:24px; top:50%; transform:translateY(-50%) translateX(6px);
  font-size:10px; letter-spacing:.24em; white-space:nowrap; color:var(--ink);
  opacity:0; transition:all .3s; pointer-events:none; font-weight:500;
}
.rail-dot:hover .rd-tip{ opacity:1; transform:translateY(-50%) translateX(0); }

/* ── panneaux ──────────────────────────────────── */
.panels{ position:fixed; inset:0; z-index:20; pointer-events:none; }
.panel{
  position:absolute; inset:0; display:flex; flex-direction:column;
  justify-content:center; opacity:0; visibility:hidden;
  padding: 0 8vw;
  transition: opacity .5s ease, visibility .5s;
}
.panel.active{ opacity:1; visibility:visible; }
.panel.active .btn, .panel.active a, .panel.active input, .panel.active button{ pointer-events:auto; }

.kicker{
  font-size:11px; letter-spacing:.32em; color:var(--ink-soft); font-weight:500;
  margin-bottom:26px; text-transform:uppercase;
}
.panel-title{
  font-family:var(--serif); font-weight:340; font-size:clamp(34px, 4.6vw, 62px);
  line-height:1.06; letter-spacing:-0.015em; margin-bottom:26px; max-width:13em;
}
.panel-title em{ font-style:italic; font-weight:460; color:var(--royal); }
.panel-body{ max-width:520px; font-size:16.5px; line-height:1.75; color:var(--ink-soft); font-weight:300; }

/* reveal typo par panneau */
.panel .kicker, .panel .panel-title, .panel .panel-body,
.panel .stats li, .panel .btn, .panel .cps-live, .panel .cps-count,
.panel .atelier-filters, .panel .ateliers, .panel .ateliers-more,
.panel .weave-stats li, .panel .tissu-quote, .panel .y-choices, .panel .tension-out{
  opacity:0; transform:translateY(26px);
  transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1);
}
.panel.active .kicker{ transition-delay:.05s }
.panel.active .panel-title{ transition-delay:.15s }
.panel.active .panel-body{ transition-delay:.28s }
.panel.active :is(.kicker,.panel-title,.panel-body,.stats li,.btn,.cps-live,.cps-count,.atelier-filters,.ateliers,.ateliers-more,.weave-stats li,.tissu-quote,.y-choices,.tension-out){
  opacity:1; transform:translateY(0);
}
.panel.active .stats li:nth-child(1){ transition-delay:.25s }
.panel.active .stats li:nth-child(2){ transition-delay:.4s }
.panel.active .stats li:nth-child(3){ transition-delay:.55s }
.panel.active .tension-out{ transition-delay:.8s }

/* 1 · hero */
.panel-hero{ align-items:flex-start; }
.panel-hero::before{
  content:""; position:absolute; left:3vw; top:52%; width:57vw; height:19vh;
  transform:translateY(-12%); pointer-events:none;
  background:linear-gradient(90deg,
    rgba(246,241,231,.96) 0%, rgba(246,241,231,.92) 58%,
    rgba(246,241,231,.54) 77%, rgba(246,241,231,0) 100%);
  border-radius:50%; filter:blur(14px); opacity:.96;
}
.panel-hero > *{ position:relative; z-index:1; }
.hero-title{
  font-family:var(--serif); font-weight:340;
  font-size:clamp(46px, 7.2vw, 104px); line-height:1.02; letter-spacing:-0.02em;
}
.ht-line{ display:block; overflow:hidden; }
.ht-line em{ font-style:italic; font-weight:460;
  background:linear-gradient(100deg, var(--royal), var(--azure) 55%, var(--teal));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.hero-sub{ margin-top:30px; font-size:17px; line-height:1.75; color:var(--ink-soft); max-width:560px; }
.hero-sub b{ color:var(--ink); font-weight:500; }
/* halo papier : le texte du hero reste lisible au-dessus de la rivière
   (pas sur le titre : text-shadow casse le dégradé -webkit-text-fill transparent) */
.hero-sub, .breath-hint{
  text-shadow: 0 0 22px rgba(246,241,231,.95), 0 0 8px rgba(246,241,231,.85), 0 1px 2px rgba(246,241,231,.7);
}
.breath-hint{ margin-top:40px; font-size:11px; letter-spacing:.3em; color:var(--ink-soft); }
.breath-hint .bh-in{ color:var(--teal); font-weight:500; }
.breath-hint .bh-out{ color:var(--royal); font-weight:500; }
.bh-sep{ margin:0 14px; opacity:.4; }
.scroll-hint{
  position:absolute; bottom:40px; left:50%; transform:translateX(-50%);
  font-size:11px; letter-spacing:.28em; color:var(--ink-soft);
}
.sh-arrow{ display:inline-block; animation:bob 2.4s ease-in-out infinite; margin-left:8px; }
@keyframes bob{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(6px)} }

/* hero reveal — masques ligne par ligne, comme un fil qui remonte */
.ht-line{ clip-path: inset(-8% -2% -14% -2%); }
.ht-inner{
  display:inline-block;
  transform: translateY(114%) rotate(1.6deg);
  transform-origin: 0 100%;
  transition: transform 1.15s cubic-bezier(.16,.84,.22,1);
}
.ht-inner em{ display:inline-block; }
.panel-hero.active .ht-line:nth-child(1) .ht-inner{ transform:none; transition-delay:.55s }
.panel-hero.active .ht-line:nth-child(2) .ht-inner{ transform:none; transition-delay:.72s }
.panel-hero .kicker{
  letter-spacing:.55em; opacity:0;
  transition: letter-spacing 1.4s cubic-bezier(.16,.84,.22,1), opacity 1.2s ease;
}
.panel-hero.active .kicker{ letter-spacing:.32em; opacity:1; transition-delay:.35s }
.panel-hero .hero-sub, .panel-hero .breath-hint{
  opacity:0; transform:translateY(26px);
  transition: opacity 1s cubic-bezier(.2,.7,.2,1), transform 1s cubic-bezier(.2,.7,.2,1);
}
.panel-hero.active .hero-sub{ opacity:1; transform:none; transition-delay:1.15s }
.panel-hero.active .breath-hint{ opacity:1; transform:none; transition-delay:1.45s }

/* 2 · tension */
.panel-tension{ align-items:flex-start; }
.stats{ list-style:none; display:flex; flex-direction:column; gap:20px; margin-top:8px; }
.stat{ display:grid; grid-template-columns:200px 1fr; gap:2px 26px; align-items:baseline; max-width:640px;
  border-left:2px solid var(--ink-faint); padding-left:22px; }
.stat-num{
  font-family:var(--serif); font-weight:460; font-size:clamp(34px,3.6vw,52px);
  font-variant-numeric:tabular-nums; color:var(--navy); grid-row:span 2;
}
.stat-txt{ font-size:15px; color:var(--ink); font-weight:400; }
.stat-src{ font-size:11px; letter-spacing:.12em; color:var(--ink-soft); text-transform:uppercase; }
.stat-src:hover, .stat-src:focus-visible{ color:var(--royal); text-decoration:underline; }
.tension-out{ margin-top:38px; font-family:var(--serif); font-size:21px; font-weight:340; color:var(--ink-soft); }
.tension-out em{ color:var(--royal); }

/* 3 · méthode */
.panel-methode{ align-items:flex-start; }
.cps-live{
  margin-top:30px; display:flex; align-items:baseline; gap:18px;
  border-top:1px solid var(--ink-faint); border-bottom:1px solid var(--ink-faint);
  padding:18px 4px; min-width:min(560px, 80vw);
}
.cps-live:focus-visible, .person:focus-visible{
  outline:2px solid var(--royal); outline-offset:7px; border-radius:4px;
}
.cps-idx{ font-size:12px; letter-spacing:.3em; color:var(--azure); font-weight:600; font-variant-numeric:tabular-nums; }
.cps-label{ font-family:var(--serif); font-style:italic; font-size:clamp(22px,2.4vw,32px); font-weight:340; }
.cps-count{ margin-top:20px; font-size:12px; letter-spacing:.24em; color:var(--ink-soft); text-transform:uppercase; }
.cps-count b{ color:var(--ink); font-weight:600; }

/* 4 · brins */
.panel-brins{ align-items:flex-start; justify-content:flex-end; padding-bottom:12vh; }
.brin-card{ max-width:560px; transition:opacity .3s; }
.brin-num{ font-size:12px; letter-spacing:.34em; color:var(--brin-c, var(--teal)); font-weight:600; }
.brin-name{
  font-family:var(--serif); font-weight:460; font-size:clamp(40px,5vw,72px);
  letter-spacing:-.01em; margin:10px 0 14px; color:var(--brin-c, var(--teal));
}
.brin-desc{ font-size:17px; line-height:1.7; color:var(--ink); font-weight:300; max-width:460px; }
.brin-ateliers{ margin-top:14px; font-size:13px; line-height:1.8; color:var(--ink-soft); font-style:italic; }
.brin-dots{ display:flex; gap:10px; margin-top:30px; }
.brin-dots i{ width:26px; height:3px; border-radius:2px; background:var(--ink-faint); transition:all .4s; }
.brin-dots i.on{ background:var(--brin-c, var(--teal)); width:44px; }

/* 5 · tisser */
.panel-tisser{ align-items:flex-start; }
.panel-tisser .panel-title{ margin-bottom:14px; }
.atelier-filters{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:22px; }
.chip{
  font-family:var(--sans); font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; font-weight:500;
  padding:9px 18px; border-radius:999px; border:1px solid var(--ink-faint);
  background:rgba(246,241,231,.6); color:var(--ink-soft); cursor:pointer; backdrop-filter:blur(8px);
  transition:all .3s; pointer-events:auto;
}
.chip:hover{ border-color:var(--ink-soft); color:var(--ink); }
.chip.active{ background:var(--ink); border-color:var(--ink); color:var(--paper); }
.chip.c-serein.active{ background:var(--teal); border-color:var(--teal); }
.chip.c-efficient.active{ background:var(--azure); border-color:var(--azure); }
.chip.c-lien.active{ background:var(--lavande); border-color:var(--lavande); }
.chip.c-perso.active{ background:var(--royal); border-color:var(--royal); }

.ateliers{
  list-style:none; display:grid; grid-template-columns:repeat(2, minmax(0,1fr));
  gap:6px 34px; max-width:860px;
}
.atelier{
  display:flex; align-items:baseline; gap:14px; padding:11px 2px;
  border-bottom:1px solid var(--ink-faint);
  opacity:1; transition:opacity .35s, transform .35s;
}
.atelier.hide{ opacity:.12; }
.atelier-dot{ width:9px; height:9px; border-radius:50%; flex:none; transform:translateY(-1px); }
.atelier-name{ font-size:14.5px; font-weight:400; color:var(--ink); }
.atelier-meta{ margin-left:auto; font-size:10.5px; letter-spacing:.14em; color:var(--ink-soft); white-space:nowrap; }
.ateliers-more{ margin-top:18px; font-size:13px; font-style:italic; color:var(--ink-soft); }

/* 6 · mains */
.panel-mains{ align-items:center; justify-content:flex-end; padding-bottom:9vh; text-align:center; }
.person-name{ font-family:var(--serif); font-weight:460; font-size:clamp(30px,3.6vw,50px); letter-spacing:-.01em; }
.person-role{ margin-top:8px; font-size:14px; color:var(--ink-soft); max-width:520px; line-height:1.6; }
.person{ transition:opacity .25s; }
.person-hint{ margin-top:26px; font-size:10.5px; letter-spacing:.28em; color:var(--ink-soft); text-transform:uppercase; }

/* 7 · soin */
.panel-soin{ align-items:flex-start; }
.panel-soin .panel-body{ margin-bottom:30px; }

/* 8 · tissu */
.panel-tissu{ align-items:flex-start; }
.weave-stats{ list-style:none; display:flex; gap:60px; margin:16px 0 30px; }
.weave-stats b{
  display:block; font-family:var(--serif); font-weight:460; font-size:clamp(44px,5vw,74px);
  color:var(--navy); font-variant-numeric:tabular-nums; line-height:1;
}
.weave-stats span{ display:block; margin-top:8px; font-size:12px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-soft); line-height:1.7; }
.tissu-quote{ font-family:var(--serif); font-size:clamp(19px,2vw,25px); font-weight:340;
  color:var(--ink-soft); max-width:620px; line-height:1.5; }

/* 9 · le Y */
.panel-y{ align-items:flex-start; }
.y-choices{ display:flex; gap:44px; align-items:stretch; flex-wrap:wrap; margin-top:6px; }
.y-form, .y-human{
  background:rgba(246,241,231,.65); backdrop-filter:blur(14px);
  border:1px solid var(--ink-faint); border-radius:20px; padding:30px 32px;
}
.y-form{ width:min(400px, 86vw); }
.y-form h3, .y-human h3{ font-family:var(--serif); font-weight:460; font-size:21px; margin-bottom:18px; }
.yf-row{ position:relative; margin-bottom:14px; }
.yf-row input{
  width:100%; background:transparent; border:none; border-bottom:1px solid var(--ink-faint);
  padding:16px 2px 8px; font-family:var(--sans); font-size:15px; color:var(--ink); outline:none;
  transition:border-color .3s;
}
.yf-row input:focus{ border-color:var(--royal); }
.yf-row label{
  position:absolute; left:2px; top:14px; font-size:14px; color:var(--ink-soft);
  transition:all .25s; pointer-events:none;
}
.yf-row input:focus + label, .yf-row input:not(:placeholder-shown) + label{
  top:-4px; font-size:10.5px; letter-spacing:.14em; color:var(--royal); text-transform:uppercase;
}
.y-form .btn{ margin-top:8px; width:100%; }
.yf-hp{ position:absolute !important; left:-9999px !important; width:1px; height:1px; overflow:hidden; }
.yf-consent{ display:flex; align-items:flex-start; gap:10px; margin:10px 0 4px; font-size:11.5px; line-height:1.45; color:var(--ink-soft); cursor:pointer; }
.yf-consent input{ width:18px; height:18px; flex:none; accent-color:var(--royal); }
.yf-status{ min-height:1.5em; margin-top:12px; font-size:12.5px; line-height:1.45; color:var(--ink-soft); }
.yf-status.ok{ color:var(--teal); font-weight:500; }
.yf-status.error{ color:#9d3043; font-weight:500; }
.y-form.sent .btn{ opacity:.35; pointer-events:none; }
.y-human{ display:flex; flex-direction:column; justify-content:center; min-width:280px; }
.y-tel{ font-family:var(--serif); font-size:30px; font-weight:460; color:var(--ink); text-decoration:none; margin-bottom:6px; }
.y-tel:hover{ color:var(--royal); }
.y-mail{ font-size:15px; color:var(--royal); text-decoration:none; margin-bottom:16px; }
.y-mail:hover{ text-decoration:underline; }
.y-place{ font-size:12.5px; color:var(--ink-soft); line-height:1.7; }

/* ── scroll space & footer ─────────────────────── */
.scroll-space{ height:1500vh; position:relative; z-index:2; pointer-events:none; }
.footer{
  position:relative; z-index:25; background:var(--ink); color:rgba(246,241,231,.85);
  padding:54px 8vw 46px; text-align:center;
}
.f-rond{ height:52px; margin-bottom:16px; }
.f-brand{ font-family:var(--serif); font-size:19px; font-weight:340; margin-bottom:14px; color:#fff; }
.f-meta{ font-size:11.5px; letter-spacing:.1em; line-height:2; opacity:.65; }

/* ── responsive ────────────────────────────────── */
@media (max-width:860px){
  .panel{ padding:0 7vw; justify-content:flex-end; padding-bottom:11vh; }
  .top-meta{ display:none; }
  .brand img{ height:26px; }
  .topnav{ padding:18px 20px; }
  .topnav .btn{ padding:10px 15px; font-size:10px; }
  .rail{ display:none; }
  .breath-medal{ left:20px; bottom:20px; transform:scale(.8); transform-origin:bottom left; }
  .scene-counter{ left:22px; top:84px; }
  .panel-hero{ padding-bottom:9vh; }
  .panel-hero::before{ left:1vw; top:auto; bottom:5vh; width:96vw; height:42vh; }
  .hero-title{ font-size:clamp(39px,11vw,58px); line-height:1.01; }
  .hero-sub{ margin-top:18px; font-size:14px; line-height:1.55; max-width:92%; }
  .breath-hint{ margin-top:18px; font-size:9px; }
  .scroll-hint{ bottom:20px; }
  .panel-title{ font-size:clamp(32px,9vw,46px); }
  .panel-body{ font-size:14px; line-height:1.58; }
  .kicker{ margin-bottom:15px; font-size:9px; line-height:1.5; }
  .ateliers{ grid-template-columns:1fr; max-height:38vh; overflow-y:auto; }
  .atelier{ padding:8px 2px; }
  .atelier-name{ font-size:13px; }
  .atelier-filters{ flex-wrap:nowrap; overflow-x:auto; max-width:92vw; padding-bottom:6px; }
  .chip{ flex:none; min-height:44px; }
  .atelier-meta{ display:none; }
  .weave-stats{ gap:30px; flex-wrap:wrap; }
  .stat{ grid-template-columns:120px 1fr; }
  .y-choices{ gap:12px; flex-direction:column; width:100%; max-height:62vh; overflow-y:auto; overflow-x:hidden; scrollbar-width:none; }
  .y-choices::-webkit-scrollbar{ display:none; }
  .y-form, .y-human{ padding:18px; min-width:0; width:100%; }
  .panel-mains{ padding-bottom:16vh; }
  .person-name{ font-size:clamp(34px,10vw,48px); }
  .debug-overlay{ max-width:calc(100vw - 28px); white-space:normal; }
}

/* ── reduced motion / no-webgl ─────────────────── */
@media (prefers-reduced-motion: reduce){
  .sh-arrow{ animation:none; }
  .panel, .panel *{ transition-duration:.01s !important; }
}
body.dragging{ cursor:grabbing; }
body.dragging *{ cursor:grabbing !important; }
#world{ touch-action:pan-y; }
body.qa .panel, body.qa .panel *{ transition:none !important; }
body.no-webgl #world{ display:none; }
body.no-webgl .panel{ position:relative; opacity:1; visibility:visible; min-height:100vh; }
body.no-webgl .panels{ position:relative; }
body.no-webgl .scroll-space{ display:none; }
body.no-webgl .panel-hero{
  background:url('../assets/fallback-y.png') right 5vw center / min(43vw,560px) auto no-repeat;
}
@media (max-width:860px){
  body.no-webgl .panel-hero{
    background-position:center 8vh; background-size:min(70vw,360px) auto;
  }
}