/* huiledecode — le fil de code : une ligne de code s'échappe de la goutte et écrit chaque section (prototypes 20 à 22) */
@property --cur{syntax:'<color>';inherits:true;initial-value:#f0a04b}
body{--cur:#f0a04b;transition:--cur 1.4s ease}

/* une couleur par service : saphir, jade, améthyste, grenat (l'ambre reste celle de la goutte) */
.chap .in{--svc:#ffc477}
.chap[data-k="1"] .in{--svc:#86a6ff}
.chap[data-k="2"] .in{--svc:#56d4a6}
.chap[data-k="3"] .in{--svc:#b993ff}
.chap[data-k="4"] .in{--svc:#ff8279}
.chap .kick{color:var(--svc)}
.chap .kick::before{content:"";display:inline-block;vertical-align:middle;margin-top:-2px;width:22px;height:1px;margin-right:12px;background:linear-gradient(90deg,var(--amber),var(--svc));box-shadow:0 0 8px var(--svc)}
.chap h1 em,.chap h2 em{color:var(--svc);text-shadow:0 0 30px color-mix(in srgb,var(--svc) 45%,transparent)}
.chap .list li i{color:var(--svc)}
.cartel{border-top-color:var(--cur)}
.cartel small{color:var(--cur)}
.dial i.on{background:var(--cur);box-shadow:0 0 8px var(--cur)}

/* le logo n'a pas de proportion intrinsèque : sans hauteur il fait 150 px et le dégradé de l'en-tête couvre le haut du texte */
.top .brand svg{height:26px}
footer .brand svg{height:20px}

/* calque du fil, au-dessus du texte, sous l'en-tête */
.fl-cv{position:fixed;inset:0;width:100%;height:100%;z-index:40;pointer-events:none}

/* écriture : caché -> caractère de code (couleur du service) -> lettre finale */
.fl-c{position:relative}
html.fl-js .fl-w .fl-c:not(.fl-d){color:transparent!important;text-shadow:none!important;-webkit-text-fill-color:transparent}
html.fl-js .fl-w .fl-c.fl-g::after{content:attr(data-g);position:absolute;left:50%;top:50%;transform:translate(-50%,-52%);
  font:400 .78em/1 var(--mono);color:var(--svc,#ffc477);-webkit-text-fill-color:var(--svc,#ffc477);text-shadow:0 0 10px var(--svc,#ffc477);pointer-events:none}
html.fl-js .fl-w .fl-c.fl-d{transition:color 1s ease,text-shadow 1s ease}
html.fl-js .fl-w .fl-c.fl-f{transition:none;color:var(--svc,#ffc477)!important;-webkit-text-fill-color:var(--svc,#ffc477);text-shadow:0 0 14px var(--svc,#ffc477)!important}
html.fl-js .fl-w .ctas,html.fl-js .fl-w .list{transition:opacity .9s ease,transform .9s cubic-bezier(.2,.7,.1,1)}
html.fl-js .fl-w .ctas{opacity:0;transform:translateY(8px)}
html.fl-js .fl-w.fl-done .ctas{opacity:1;transform:none}
html.fl-js .fl-w .list{border-top-color:transparent}
html.fl-js .fl-w .list li{border-bottom-color:transparent;transition:border-color .8s ease}
html.fl-js .fl-w.fl-done .list,html.fl-js .fl-w.fl-done .list li{border-color:var(--line)}

/* barre de variantes */
.fl-switch{position:fixed;left:var(--gutter);bottom:20px;z-index:90;display:flex;align-items:center;gap:2px;padding:5px;
  background:rgba(5,4,3,.72);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:inset 0 0 0 1px var(--line);
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);font:400 10.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase}
.fl-switch span{color:var(--faint);padding:0 10px 0 8px}
.fl-switch a{color:var(--muted);text-decoration:none;padding:8px 10px;transition:color .3s,background .3s}
.fl-switch a:hover{color:var(--ink)}
.fl-switch a[aria-current]{color:var(--bg);background:var(--amber)}
@media (max-width:860px){.fl-switch{left:8px;right:8px;bottom:8px;overflow-x:auto}.fl-switch span{display:none}.fl-switch a{white-space:nowrap}}

/* ---------- 1 · Filature : menu des services en couleurs ---------- */
.fl-nav{display:flex;gap:30px;font:400 11px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase}
.fl-nav a{--svc:#ffc477;display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--muted);padding:8px 0;position:relative;transition:color .3s}
.fl-nav a::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--svc);box-shadow:0 0 0 0 var(--svc);transition:box-shadow .4s}
.fl-nav a::after{content:"";position:absolute;left:14px;right:0;bottom:0;height:1px;background:linear-gradient(90deg,var(--amber),var(--svc));transform:scaleX(0);transform-origin:left;transition:transform .5s cubic-bezier(.2,.7,.1,1)}
.fl-nav a:hover,.fl-nav a.on{color:var(--ink)}
.fl-nav a.on::before{box-shadow:0 0 10px 1px var(--svc)}
.fl-nav a.on::after{transform:scaleX(1)}
@media (max-width:1100px){.fl-nav{gap:20px}.fl-nav a span{display:none}}

/* ---------- 2 · Harpe : le menu tissé par les fils ---------- */
[data-fil=harpe] .top{grid-template-columns:1fr auto}
[data-fil=harpe] .top>nav{display:none}
.fl-right{display:flex;align-items:center;justify-self:end}
.fl-menu-btn{display:inline-flex;align-items:center;gap:12px;height:38px;padding:0 16px;margin-right:12px;border:0;cursor:pointer;color:var(--ink);background:rgba(240,160,75,.08);
  box-shadow:inset 0 0 0 1px var(--line);font:500 11.5px/1 var(--display);letter-spacing:.2em;text-transform:uppercase;clip-path:var(--chamfer);transition:background .3s}
.fl-menu-btn:hover{background:rgba(240,160,75,.18)}
.fl-menu-btn i{position:relative;width:18px;height:8px}
.fl-menu-btn i::before,.fl-menu-btn i::after{content:"";position:absolute;left:0;right:0;height:1px;background:linear-gradient(90deg,var(--amber),#86a6ff);transition:transform .4s}
.fl-menu-btn i::before{top:0}.fl-menu-btn i::after{bottom:0;left:6px;background:linear-gradient(90deg,#56d4a6,#ff8279)}
.fl-menu-btn[aria-expanded=true] i::before{transform:translateY(3.5px) rotate(12deg)}
.fl-menu-btn[aria-expanded=true] i::after{transform:translate(-6px,-3.5px) rotate(-12deg)}
.fl-menu{position:fixed;inset:0;z-index:35;visibility:hidden;pointer-events:none}
.fl-menu::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,4,3,.97) 0,rgba(5,4,3,.9) 38%,rgba(5,4,3,.35) 62%,rgba(5,4,3,0) 80%);opacity:0;transition:opacity .7s ease}
.fl-menu.open{visibility:visible;pointer-events:auto}
.fl-menu.open::before{opacity:1}
.fl-menu ol{position:absolute;left:clamp(16px,8vw,140px);top:50%;transform:translateY(-50%);list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:clamp(4px,1.2vh,14px)}
.fl-menu li a{--svc:#ffc477;display:grid;grid-template-columns:44px auto;align-items:baseline;text-decoration:none;color:var(--ink);padding:4px 0;transition:transform .5s cubic-bezier(.2,.7,.1,1)}
.fl-menu li a>i{font:400 11px/1 var(--mono);letter-spacing:.14em;color:var(--svc);font-style:normal}
.fl-menu li a>b{font:300 clamp(30px,3.6vw,54px)/1.08 var(--display);letter-spacing:-.005em;transition:color .4s,text-shadow .4s}
.fl-menu li a>span{grid-column:2;font:400 11px/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--svc);height:0;overflow:visible;opacity:.85}
.fl-menu li a:hover,.fl-menu li a:focus-visible{transform:translateX(10px);outline:none}
.fl-menu li a:hover>b,.fl-menu li a:focus-visible>b{color:var(--svc);text-shadow:0 0 26px color-mix(in srgb,var(--svc) 50%,transparent)}
.fl-menu .fl-foot{position:absolute;left:clamp(16px,8vw,140px);bottom:clamp(70px,10vh,110px);display:flex;gap:26px;font:400 11px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;opacity:0;transition:opacity .6s .3s}
.fl-menu.open .fl-foot{opacity:1}
.fl-menu .fl-foot a{color:var(--muted);text-decoration:none}
.fl-menu .fl-foot a:hover{color:var(--amber-hi)}
@media (max-width:860px){.fl-menu ol{top:auto;bottom:130px;transform:none}.fl-menu::before{background:linear-gradient(rgba(5,4,3,0) 0,rgba(5,4,3,.55) 34%,rgba(5,4,3,.96) 55%)}}
body.fl-menu-open .chap .in,body.fl-menu-open .cartel{opacity:0;transition:opacity .5s ease}
.chap .in{transition:opacity .6s ease}

/* ---------- 3 · Circuit : les broches au-dessus de la goutte, dans l'en-tête ---------- */
[data-fil=circuit] .cartel,[data-fil=circuit] .hint{display:none}
html.fl-js [data-fil=circuit] .top>nav{visibility:hidden}
[data-fil=circuit] .fl-cv{z-index:52}
.fl-pins{position:fixed;inset:0;z-index:53;pointer-events:none}
.fl-pin{--svc:#ffc477;position:absolute;left:0;top:0;display:flex;align-items:center;gap:8px;height:26px;padding:0 4px;border:0;background:none;cursor:pointer;pointer-events:auto;
  font:400 10.5px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);white-space:nowrap;transition:color .3s}
.fl-pin b{font-weight:400;color:var(--svc);opacity:.75}
.fl-pin:hover,.fl-pin.on,.fl-pin:focus-visible{color:var(--ink);outline:none}
.fl-pin.on b,.fl-pin:hover b{opacity:1;text-shadow:0 0 10px var(--svc)}
.fl-pins.compact .fl-pin span{display:none}
@media (max-width:860px){.fl-pins{display:none}}
/* téléphone : le texte commence sous la goutte, le flux sort du fond et longe la marge gauche sans traverser le texte */
@media (max-width:860px){[data-fil=circuit] .chap{align-items:flex-start;padding-top:56vh;padding-top:56svh;padding-bottom:40px}[data-fil=circuit] .chap .in{padding-left:28px}}

@media (prefers-reduced-motion:reduce){html:not(.fl-js) body{transition:none}html:not(.fl-js) .fl-cv{display:none}}