/* ATELIER : base partagee entre l'accueil et les six modules */
:root{
  --bg:#0B1628;--bg2:#12213A;--bg3:#182B48;
  --line:rgba(255,255,255,.08);--text:#EEF1F5;--muted:#9AA6B5;
  --accent:#E8A33D;--warm:#DC5730;--ink:#1A1206;
  --r:22px;--ri:calc(22px - 8px);--ease:cubic-bezier(.16,1,.3,1);--ease2:cubic-bezier(.32,.72,0,1);
  --card:linear-gradient(113deg,color-mix(in srgb,var(--accent) 12%,var(--bg2)) 0%,var(--bg2) 46%,color-mix(in srgb,var(--warm) 14%,var(--bg2)) 100%);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:Manrope,system-ui,sans-serif;font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden;position:relative}
/* aura de fond, meme principe que BEATGROVE : deux radiaux aux coins, masque vers le bas */
body::before{content:"";position:absolute;left:0;right:0;top:0;height:900px;pointer-events:none;z-index:0;
  background:radial-gradient(120% 180% at 14% 0%,var(--accent),transparent 58%),radial-gradient(90% 140% at 86% 6%,var(--warm),transparent 62%);
  opacity:.17;-webkit-mask-image:linear-gradient(to bottom,#000 0%,rgba(0,0,0,.55) 46%,transparent 100%);mask-image:linear-gradient(to bottom,#000 0%,rgba(0,0,0,.55) 46%,transparent 100%)}
body>*{position:relative;z-index:1}
h1,h2,h3{font-family:"Bricolage Grotesque",sans-serif;letter-spacing:-.025em;line-height:.98;margin:0;font-weight:700;text-wrap:balance}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
p{margin:0}
.wrap{max-width:1380px;margin:0 auto;padding:0 clamp(20px,4vw,56px)}
section{padding:clamp(72px,9vw,128px) 0}
/* ===== BOUTONS : LA MATIERE DE BEATGROVE =====
   Reprise de beatgrove/app/globals.css (.bouton) : un voile de blanc qui recoit la lumiere
   du haut, un filet clair d'un pixel sur l'arete haute, une assise d'un pixel. Ni bordure,
   ni halo, ni reflet, ni agrandissement. Au survol le fond s'eclaircit et rien ne bouge
   (90 ms). A l'appui la lumiere passe dedans : le bouton s'enfonce. L'action principale
   porte le degrade de marque, ambre vers corail. */
:root{
  --socle-voile:linear-gradient(180deg,rgba(255,255,255,.13),rgba(255,255,255,.075));
  --socle-voile-survol:linear-gradient(180deg,rgba(255,255,255,.20),rgba(255,255,255,.135));
  --socle-relief:inset 0 1px 0 rgba(255,255,255,.10),0 1px 2px rgba(0,0,0,.35);
  --socle-appui:inset 0 1px 3px rgba(0,0,0,.45);
  --degrade:linear-gradient(140deg,#F7BA52,#F08A3E);
  --t-cmd:90ms cubic-bezier(.4,0,.2,1)}
/* navigation flottante */
.nav{position:fixed;top:18px;left:50%;transform:translateX(-50%);z-index:40;display:flex;align-items:center;gap:2px;width:max-content;padding:6px 6px 6px 18px;border-radius:16px;color:var(--text);
  background:rgba(11,22,40,.80);backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 10px 30px rgba(0,0,0,.28);white-space:nowrap}
.nav .brand{font-family:"Bricolage Grotesque";font-weight:700;margin-right:10px;font-size:16px}
.nav a.l{padding:9px 14px;border-radius:10px;color:var(--muted);font-size:14.5px;font-weight:500;transition:background var(--t-cmd),color var(--t-cmd)}
.nav a.l:hover,.nav a.l.on{background:rgba(255,255,255,.08);color:var(--text)}
.nav .btn{height:40px;padding:0 14px 0 16px;font-size:14.5px;margin-left:6px;border-radius:10px}
.nav .btn .court{display:none}
/* action principale : degrade de marque */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 16px 0 18px;border:0;border-radius:11px;cursor:pointer;
  font:600 15px/1 Manrope,system-ui,sans-serif;letter-spacing:-.01em;white-space:nowrap;text-decoration:none;color:var(--ink);
  background:var(--degrade);box-shadow:inset 0 1px 0 rgba(255,255,255,.30),0 1px 2px rgba(0,0,0,.35);
  transition:background var(--t-cmd),box-shadow var(--t-cmd),color var(--t-cmd),transform var(--t-cmd);-webkit-tap-highlight-color:transparent}
.btn:hover{background:linear-gradient(rgba(255,255,255,.12),rgba(255,255,255,.12)),var(--degrade)}
.btn:active{background:linear-gradient(rgba(0,0,0,.10),rgba(0,0,0,.10)),var(--degrade);box-shadow:var(--socle-appui);transform:scale(.97)}
.btn:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.btn .i{display:grid;place-items:center;width:16px;height:16px}
.btn .i svg{width:15px;height:15px}
/* action secondaire : le voile */
.btn.ghost{color:var(--text);background:var(--socle-voile);box-shadow:var(--socle-relief)}
.btn.ghost:hover{background:var(--socle-voile-survol)}
.btn.ghost:active{background:rgba(255,255,255,.07);box-shadow:var(--socle-appui);transform:scale(.97)}
/* bouton rond, meme matiere ; .plein pour la lecture, comme .pro-lire de BEATGROVE */
.carre{display:grid;place-items:center;border-radius:10px;color:var(--text);background:var(--socle-voile);box-shadow:var(--socle-relief);transition:background var(--t-cmd),box-shadow var(--t-cmd),color var(--t-cmd),transform var(--t-cmd)}
.carre:hover{background:var(--socle-voile-survol)}
.carre:active{background:rgba(255,255,255,.07);box-shadow:var(--socle-appui);transform:scale(.97)}
.rond{display:grid;place-items:center;border-radius:999px;color:var(--text);background:var(--socle-voile);box-shadow:var(--socle-relief);transition:background var(--t-cmd),box-shadow var(--t-cmd),color var(--t-cmd),transform .15s ease-out}
.rond:hover{background:var(--socle-voile-survol)}
.rond:active{background:rgba(255,255,255,.07);box-shadow:var(--socle-appui)}
.rond.plein{color:#fff;background:var(--degrade);box-shadow:0 10px 24px rgba(0,0,0,.4)}
.rond.plein:hover{transform:scale(1.04)}
.rond.plein:active{transform:scale(.97)}
@media (prefers-reduced-motion:reduce){.btn,.rond,.nav a.l{transition:none}}
/* revelation */
.rv{opacity:0;transform:translateY(26px);filter:blur(6px);transition:opacity .9s var(--ease),transform .9s var(--ease),filter .9s var(--ease)}
.rv.in{opacity:1;transform:none;filter:none}
/* cartes en double bord, degrade de marque */
.card{position:relative;border-radius:var(--r);padding:8px;background:rgba(255,255,255,.035);border:1px solid var(--line);isolation:isolate}
.card>.core{position:relative;border-radius:var(--ri);background:var(--card);box-shadow:inset 0 1px 1px rgba(255,255,255,.10);overflow:hidden;height:100%}
.card>.core::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 93% 0%,rgba(255,255,255,.10),transparent 30%)}
/* titres de section */
h2.t{font-size:clamp(34px,4.8vw,66px);max-width:18ch;margin-bottom:clamp(26px,4vw,50px)}
.kick{color:var(--accent);font-weight:700;font-size:14px;letter-spacing:.06em;text-transform:uppercase;margin-bottom:14px;display:block}
/* bande d'outils qui defile, posee dans un cadre en double bord (reprise de C) ;
   le fondu des bords vit sur la piste pour laisser le fond du cadre entier */
.marq>.core{padding:18px 0}
.marq .piste{overflow:hidden;white-space:nowrap;-webkit-mask-image:linear-gradient(to right,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(to right,transparent,#000 10%,#000 90%,transparent)}
.marq .in{display:inline-flex;align-items:center;gap:0;animation:marq 38s linear infinite;will-change:transform}
.marq:hover .in{animation-play-state:paused}
.marq span{font-family:"Bricolage Grotesque";font-weight:700;font-size:clamp(18px,1.9vw,26px);letter-spacing:-.02em;color:var(--text);padding:0 30px;display:inline-flex;align-items:center;gap:30px;transition:color var(--t-cmd)}
.marq span:hover{color:var(--accent)}
.marq span::after{content:"";width:8px;height:8px;border-radius:999px;background:var(--warm);flex:none}
@keyframes marq{to{transform:translateX(-50%)}}
/* champ de points du haut de page (repris de C) : le curseur devient un noeud du reseau */
body>canvas.champ{position:absolute;left:0;top:0;width:100%;height:100dvh;z-index:0;pointer-events:none;
  -webkit-mask-image:linear-gradient(to bottom,#000 78%,transparent);mask-image:linear-gradient(to bottom,#000 78%,transparent)}
/* hero commun */
.hero{min-height:100dvh;display:grid;grid-template-columns:1.1fr .9fr;align-items:center;gap:clamp(24px,4vw,64px);padding:112px 0 56px}
.hero h1{font-size:clamp(50px,7.6vw,116px);font-weight:800}
.hero h1 em{font-style:normal;color:var(--accent)}
.hero p{max-width:50ch;color:var(--muted);font-size:clamp(17px,1.35vw,20px);margin:26px 0 34px}
.hero .cta{display:flex;gap:12px;flex-wrap:wrap}
/* espace n8n : barre d'en-tete, canevas sombre a points, noeuds, aretes, badges */
.flow{position:relative;width:100%;transform-style:preserve-3d;perspective:1200px}
.flow .core{display:flex;flex-direction:column;background:#1B1D2B;container-type:inline-size}
.flow .bar{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid rgba(255,255,255,.08);background:#20222F;font-size:13px;color:#C9CDD6;white-space:nowrap}
.flow .bar .meta{overflow:hidden;text-overflow:ellipsis;min-width:0}
@container (max-width:560px){.flow .bar .meta{display:none}.flow .bar{font-size:12px;gap:10px}}
.flow .bar b{font-weight:700;color:#fff;font-size:14px}
.flow .bar .tog{width:34px;height:18px;border-radius:999px;background:#2ECC71;position:relative;margin-left:auto;flex:none;transition:background .2s}
.flow .bar .tog::after{content:"";position:absolute;right:2px;top:2px;width:14px;height:14px;border-radius:999px;background:#fff;transition:right .2s var(--ease)}
.flow .bar .tog[role="switch"]{cursor:pointer}
.flow .bar .tog[role="switch"]:hover{filter:brightness(1.08)}
.flow .bar .tog:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.flow .bar .tog.off{background:#4A4E5C}
.flow .bar .tog.off::after{right:18px}
.flow .bar .st.off{background:rgba(255,255,255,.06);color:#8A8F9A}
.flow svg{transition:opacity .35s}
.flow.arrete svg{opacity:.5}
.flow .bar .st{padding:4px 10px;border-radius:999px;font-size:12px;font-weight:600;background:rgba(255,255,255,.08);white-space:nowrap;flex:none}
.flow .bar .st.run{background:rgba(232,163,61,.18);color:#F6D9A6}
.flow .bar .st.ok{background:rgba(46,204,113,.16);color:#8CE8B4}
.flow svg{width:100%;display:block;aspect-ratio:620/560}
.flow .grid{fill:url(#dots)}
/* etats d'execution de n8n : corail qui tourne pendant le calcul, vert une fois valide */
.flow .node .box{fill:#2B2E42;stroke:rgba(255,255,255,.16);stroke-width:1.2}
.flow .node.running .box{stroke:url(#wf-run);stroke-width:2.5}
.flow .node.ok .box{stroke:#2BA84A;stroke-width:2}
.flow .node .chk{fill:none;stroke:#2BA84A;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;opacity:0}
.flow .node.ok .chk{opacity:1}
.flow .node .eclair{fill:#E8650F}
.flow .node .g{fill:#fff;font:800 15px "Bricolage Grotesque",sans-serif}
.flow .node .lab{fill:#C9CDD6;font:600 12px Manrope,sans-serif}
.flow .node .hin,.flow .node .hout{fill:#1B1D2B;stroke:#8A8F9A;stroke-width:1.6}
/* noeud AI Agent de n8n : large, nom dedans, prises en losange dessous ; sous-noeuds ronds */
.flow .node .nom{fill:#fff;font:600 15px Manrope,sans-serif}
.flow .node .dia{fill:#1B1D2B;stroke:#8A8F9A;stroke-width:1.4}
.flow .node .slot{fill:#9AA0AE;font:500 10.5px Manrope,sans-serif;paint-order:stroke;stroke:#1B1D2B;stroke-width:4px;stroke-linejoin:round}
.flow .node .slot .req{fill:#FF6D6D}
.flow .node .fil{stroke:#6B7080;stroke-width:1.6}
.flow .node .plus rect{fill:#2B2E42;stroke:rgba(255,255,255,.16)}
.flow .node .plus path{fill:none;stroke:#C9CDD6;stroke-width:1.6;stroke-linecap:round}
.flow .node .gly path{fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.flow .bar>img,.wf-bar>img{flex:none;display:block}
@keyframes spin{to{transform:rotate(360deg)}}
.flow .edge{fill:none;stroke:#5E6372;stroke-width:2}
.flow .edge.ok{stroke:#2BA84A}
.flow .edge.sub{stroke-dasharray:5 5;stroke:#8A8F9A;stroke-width:1.6}
.flow .elab{opacity:0;fill:#9A9FAB;font:500 11px Manrope,sans-serif;transition:opacity .25s;paint-order:stroke;stroke:#1B1D2B;stroke-width:4px;stroke-linejoin:round}
/* chiffres */
.nums{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.num .core{padding:26px 24px 22px;min-height:190px;display:flex;flex-direction:column;justify-content:space-between}
.num b{display:block;font-family:"Bricolage Grotesque";font-size:clamp(42px,5.2vw,78px);font-weight:800;line-height:1;letter-spacing:-.03em}
.num.acc b{color:var(--accent)}
.num span{color:var(--muted);font-size:15px}
/* certifications : une puce par certificat, logo de l'editeur, nom en clair puis le programme */
.certs{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}
.certs .puce{display:inline-flex;align-items:center;gap:8px;padding:8px 13px 8px 10px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.04);font-size:13.5px;line-height:1.2}
.certs .puce img{flex:none}
.certs .puce b{font-weight:700;color:var(--text);white-space:nowrap}
.certs .puce span{color:var(--muted)}
section.cta .acts{display:flex;gap:10px;flex-wrap:wrap}
section.cta .acts img{width:16px;height:16px}
/* contact */
.contact{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:end;border-top:1px solid var(--line)}
.contact h2{font-size:clamp(44px,7vw,108px);font-weight:800}
.contact .mail{font-family:"Bricolage Grotesque";font-size:clamp(22px,2.6vw,36px);font-weight:700;display:inline-block;margin:0 0 18px;border-bottom:2px solid var(--accent)}
.contact .links{display:flex;gap:18px;color:var(--muted);margin-top:22px}
.contact .links a:hover{color:var(--text)}
/* portrait : cadre rond en double bord comme les cartes ; l'anneau de marque se referme
   a mesure que le curseur approche, la photo est aimantee et glisse dans son cadre */
.moi{display:flex;align-items:center;gap:28px;margin:0 0 40px 9px}
.moi .qui>b{display:block;font-family:"Bricolage Grotesque";font-size:clamp(22px,2vw,28px);font-weight:700;letter-spacing:-.02em;line-height:1.1}
.moi .qui>span{display:block;color:var(--muted);font-size:15px;margin-top:6px}
.moi .qui .certs{margin-top:16px}
.moi .reseaux{display:flex;gap:8px;margin-top:12px}
.moi .reseaux .btn{height:40px;font-size:14px;padding:0 14px 0 12px;border-radius:10px}
.moi .reseaux svg,.moi .reseaux img{width:16px;height:16px;flex:none}
.portrait{position:relative;display:block;flex:none;width:clamp(148px,13vw,188px);aspect-ratio:1;border-radius:50%;-webkit-tap-highlight-color:transparent}
.portrait .cadre{position:absolute;inset:0;border-radius:50%;padding:7px;background:rgba(255,255,255,.035);border:1px solid var(--line)}
.portrait .cadre>span{display:block;width:100%;height:100%;border-radius:50%;overflow:hidden;background:var(--bg2);box-shadow:inset 0 1px 1px rgba(255,255,255,.10)}
.portrait img{width:100%;height:100%;object-fit:cover;transform:scale(1.04)}
.portrait .anneau{position:absolute;left:-9px;top:-9px;width:calc(100% + 18px);height:calc(100% + 18px);overflow:visible;pointer-events:none;animation:spin 18s linear infinite}
.portrait .anneau circle{fill:none;stroke-width:.9;stroke-linecap:round}
.portrait .anneau .fond{stroke:rgba(255,255,255,.07)}
.portrait .anneau .trait{stroke:url(#g-anneau);stroke-dasharray:14 100}
.portrait.plein .anneau .trait{stroke-dasharray:100 0}
.portrait:focus-visible{outline:2px solid var(--accent);outline-offset:14px}
/* signature du haut de l'accueil : la photo et le nom des le premier ecran, dans le meme cadre
   double que le portrait du contact, a l'echelle d'une ligne */
.signe{display:flex;align-items:center;gap:16px;margin:0 0 28px}
.signe .av{flex:none;width:76px;height:76px;border-radius:50%;padding:4px;background:rgba(255,255,255,.035);border:1px solid var(--line)}
.signe .av>span{display:block;width:100%;height:100%;border-radius:50%;overflow:hidden;background:var(--bg2);box-shadow:inset 0 1px 1px rgba(255,255,255,.10)}
.signe .av img{display:block;width:100%;height:100%;object-fit:cover;transform:scale(1.32);transform-origin:48% 36%}
.signe b{display:block;font-family:"Bricolage Grotesque";font-size:22px;font-weight:700;letter-spacing:-.02em;line-height:1.1}
.signe small{display:block;color:var(--muted);font-size:15px;margin-top:5px}
@media (max-width:900px){.signe{gap:12px;margin-bottom:22px}.signe .av{width:56px;height:56px;padding:3px}.signe b{font-size:18px}.signe small{font-size:14px;margin-top:3px}}
footer{padding:26px 0 40px;color:var(--muted);font-size:14px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
footer nav{display:flex;gap:16px;flex-wrap:wrap}
/* pages module : en-tete, listes, etapes */
.mhero{min-height:78dvh;display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,64px);align-items:center;padding:120px 0 40px}
.mhero h1{font-size:clamp(44px,6.4vw,96px);font-weight:800}
.mhero p{max-width:48ch;color:var(--muted);font-size:clamp(17px,1.3vw,20px);margin:22px 0 30px}
.deliv{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.deliv .core{padding:26px}
.deliv h3{font-size:clamp(20px,1.8vw,26px);margin-bottom:8px}
.deliv p{color:var(--muted);font-size:15.5px}
.steps{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.steps::before{content:"";position:absolute;left:0;right:0;top:22px;height:1px;background:var(--line)}
.step{position:relative;padding-top:52px}
.step::before{content:"";position:absolute;left:0;top:14px;width:16px;height:16px;border-radius:999px;background:var(--bg);border:2px solid var(--accent);box-shadow:0 0 0 6px var(--bg)}
.step h3{font-size:20px;margin-bottom:8px}
.step p{color:var(--muted);font-size:15.5px}
.cases{display:grid;grid-template-columns:1.2fr .8fr;gap:14px}
.case .core{display:grid;grid-template-rows:auto 1fr}
.case img{width:100%;aspect-ratio:16/10;object-fit:cover}
.case .b{padding:22px 24px 26px}
.case h3{font-size:clamp(20px,2vw,28px);margin-bottom:8px}
.case p{color:var(--muted);font-size:15.5px}
.case .k{font-family:"Bricolage Grotesque";font-weight:800;color:var(--accent);font-size:clamp(24px,2.6vw,38px);margin-top:14px}
section.cta{border-top:1px solid var(--line);display:grid;grid-template-columns:1fr auto;gap:30px;align-items:center}
section.cta h2{font-size:clamp(30px,4.4vw,60px)}
@media (max-width:900px){
  .hero,.mhero,.contact,.cases,.deliv,section.cta{grid-template-columns:1fr}
  .hero{padding-top:100px}.mhero{padding-top:100px;min-height:auto}
  .flow{max-height:none}
  .nums{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:1fr;gap:26px}.steps::before{display:none}.step{padding-top:0;padding-left:30px}.step::before{top:6px}
  /* telephone : seul Parcours reste dans la barre, le bouton se raccourcit */
  .nav{padding-left:16px}.nav .brand{margin-right:4px}
  .nav a.l{padding:9px 12px}.nav a.l:not([href$="parcours.html"]){display:none}
  .nav .btn .long{display:none}.nav .btn .court{display:inline}
  /* le champ de points suit le curseur : sans souris il ne reste que des points isoles */
  body>canvas.champ{display:none}
  .moi{gap:20px}
}
@media (hover:none){body>canvas.champ{display:none}}

@media (max-width:520px){.moi{flex-direction:column;align-items:flex-start}}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;filter:none;transition:none}
  .marq .in{animation:none}
  .portrait .anneau{animation:none}
  *{transition-duration:.01ms!important}
}
/* ===== WORKFLOWS : les vrais fichiers n8n redessines (canevas.js) =====
   Meme langage que l'espace n8n du haut de page : fond #1B1D2B a points, noeuds #2B2E42,
   aretes grises, anneau ambre pendant l'execution, coche verte a la fin. */
.wf-onglets{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin:0 0 14px;padding:2px}
.wf-onglets::-webkit-scrollbar{display:none}
.wf-onglet{flex:none;display:inline-flex;align-items:center;gap:9px;height:44px;padding:0 16px;border:0;border-radius:11px;cursor:pointer;
  font:600 15px/1 Manrope,system-ui,sans-serif;color:var(--muted);background:transparent;transition:background var(--t-cmd),color var(--t-cmd);-webkit-tap-highlight-color:transparent}
.wf-onglet:hover{background:rgba(255,255,255,.06);color:var(--text)}
.wf-onglet[aria-selected="true"]{color:var(--text);background:var(--socle-voile);box-shadow:var(--socle-relief)}
.wf-onglet:focus-visible,.wf-mode button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.wf-onglet .pt{width:7px;height:7px;border-radius:50%;background:#2ECC71;flex:none}
.wf-onglet .pt.test{background:var(--accent)}
.wf-carte>.core{background:#1B1D2B;display:flex;flex-direction:column}
.wf-bar{display:flex;align-items:center;gap:12px;padding:12px 14px 12px 18px;border-bottom:1px solid rgba(255,255,255,.08);background:#20222F;font-size:13px;color:#C9CDD6;white-space:nowrap;min-height:58px}
.wf-bar b{font-weight:700;color:#fff;font-size:14.5px;overflow:hidden;text-overflow:ellipsis}
.wf-bar .wf-meta{color:#8A8F9A}
.wf-statut{padding:4px 10px;border-radius:999px;font-size:12px;font-weight:600;background:rgba(46,204,113,.16);color:#8CE8B4;flex:none}
.wf-statut.test{background:rgba(232,163,61,.18);color:#F6D9A6}
.wf-mode{margin-left:auto;display:flex;gap:2px;padding:3px;border-radius:10px;background:rgba(0,0,0,.25)}
.wf-mode[hidden]{display:none}
.wf-mode button{height:32px;padding:0 12px;border:0;border-radius:8px;cursor:pointer;font:600 13px/1 Manrope,system-ui,sans-serif;color:#8A8F9A;background:transparent;transition:background var(--t-cmd),color var(--t-cmd)}
.wf-mode button i{font-style:normal;color:#6B7080;margin-left:4px}
.wf-mode button[aria-pressed="true"]{color:#fff;background:var(--socle-voile);box-shadow:var(--socle-relief)}
.wf-scene{position:relative;height:560px;overflow:hidden;background:#1B1D2B}
.wf-scene svg.cv{position:absolute;inset:0;width:100%;height:100%;cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.wf-scene svg.cv.tire{cursor:grabbing}
.wf-video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000;display:none}
[data-mode="video"] .wf-video{display:block}
[data-mode="video"] .cv,[data-mode="video"] .wf-ctrl,[data-mode="video"] .wf-astuce{visibility:hidden}
.wf-ctrl{position:absolute;left:14px;bottom:14px;display:flex;gap:6px;z-index:2}
.wf-ctrl .carre{width:40px;height:40px;border:0;cursor:pointer}
.wf-ctrl .carre svg{width:16px;height:16px}
.wf-ctrl .btn{height:40px;font-size:14px;padding:0 14px 0 12px;border-radius:10px;margin-left:4px}
.wf-astuce{position:absolute;right:14px;bottom:14px;z-index:1;font-size:13px;color:#8A8F9A;background:rgba(27,29,43,.86);padding:7px 11px;border-radius:9px;pointer-events:none}
/* noeuds et aretes */
.cv .nd{cursor:pointer;outline:none}
.cv .nd .bx{fill:#2B2E42;stroke:rgba(255,255,255,.16);stroke-width:1.5;transition:stroke .2s}
.cv .nd:hover .bx,.cv .nd:focus-visible .bx{stroke:rgba(255,255,255,.45)}
.cv .nd.sel .bx{stroke:var(--accent);stroke-width:3}
.cv .nd.off{opacity:.45}
.cv .nd.off .bx{stroke-dasharray:6 5}
.cv .nd .lb{fill:#C9CDD6;font:600 14px Manrope,sans-serif}
.cv .nd .port{fill:#8A8F9A;font:600 11px Manrope,sans-serif}
.cv .nd .pin,.cv .nd .pout{fill:#1B1D2B;stroke:#8A8F9A;stroke-width:2}
.cv .nd .eclair{fill:#E8650F}
/* etats d'execution de n8n : corail qui tourne pendant le calcul, bordure et coche vertes une fois valide */
.cv .nd.run .bx{stroke:url(#cv-run);stroke-width:3.5}
.cv .nd.ok .bx{stroke:#2BA84A;stroke-width:2.5}
.cv .nd .chk{fill:none;stroke:#2BA84A;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;opacity:0}
.cv .nd.ok .chk{opacity:1}
.cv .ed{fill:none;stroke:#5E6372;stroke-width:2}
.cv .ed.run{stroke:#2BA84A;opacity:0;transition:opacity .2s}
.cv .ed.run.on{opacity:1}
.wf-note{box-sizing:border-box;width:100%;height:100%;overflow:hidden;padding:16px 18px;font:14px/1.5 Manrope,system-ui,sans-serif;color:rgba(255,255,255,.84)}
.wf-note h4{margin:0 0 8px;font:700 18px/1.2 Manrope,system-ui,sans-serif;color:#fff;letter-spacing:0}
.wf-note p{margin:0 0 8px}
.wf-note ol{margin:0;padding-left:20px}
.wf-note strong{color:#fff}
.wf-note code{font:12.5px ui-monospace,SFMono-Regular,Menlo,monospace;background:rgba(0,0,0,.28);padding:1px 5px;border-radius:4px}
/* panneau des reglages d'un noeud */
.wf-panneau{position:absolute;top:0;right:0;bottom:0;width:min(420px,100%);z-index:3;background:#20222F;border-left:1px solid rgba(255,255,255,.08);
  transform:translateX(102%);transition:transform .45s var(--ease);display:flex;flex-direction:column;box-shadow:-18px 0 40px rgba(0,0,0,.28)}
.wf-panneau.ouvert{transform:none}
.wf-panneau .tete{display:flex;align-items:center;gap:12px;padding:14px 14px 14px 18px;border-bottom:1px solid rgba(255,255,255,.08)}
.wf-panneau .ic{width:42px;height:42px;border-radius:11px;background:#2B2E42;display:grid;place-items:center;flex:none}
.wf-panneau .tete>div>b{display:block;color:#fff;font-size:15px;line-height:1.3}
.wf-panneau .tete>div>span{display:block;font-size:12.5px;color:#8A8F9A;margin-top:2px}
.wf-panneau .ferme{margin-left:auto;width:36px;height:36px;border:0;cursor:pointer;flex:none}
.wf-panneau .ferme svg{width:14px;height:14px}
.wf-panneau .corps{overflow:auto;padding:14px 18px 24px;font-size:14px;color:#C9CDD6;overscroll-behavior:contain}
.wf-panneau h5{margin:18px 0 8px;font:700 11.5px/1 Manrope,system-ui,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:#8A8F9A}
.wf-panneau pre{margin:0;padding:12px 14px;border-radius:10px;background:#15161F;color:#DDE1E8;font:12.5px/1.55 ui-monospace,SFMono-Regular,Menlo,monospace;white-space:pre-wrap;word-break:break-word;max-height:420px;overflow:auto}
.wf-panneau pre.code{white-space:pre;word-break:normal;max-height:none}
.wf-panneau dl{margin:4px 0 0;display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr);gap:7px 14px}
.wf-panneau dt{color:#8A8F9A}
.wf-panneau dd{margin:0;color:#EEF1F5;word-break:break-word;font-size:13.5px}
.wf-champs{margin:0;padding:0;list-style:none;display:grid;gap:6px}
.wf-champs li{display:flex;justify-content:space-between;gap:10px;padding:8px 11px;border-radius:8px;background:rgba(255,255,255,.04)}
.wf-champs em{font-style:normal;font-size:12px;color:#8A8F9A}
.wf-puces{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}
.wf-puces span{font-size:12px;padding:5px 10px;border-radius:999px;background:rgba(255,255,255,.06);color:#C9CDD6}
/* fiche sous le canevas */
.wf-fiche{display:grid;grid-template-columns:1.35fr .8fr auto;gap:28px;align-items:end;padding:24px 26px 26px;border-top:1px solid rgba(255,255,255,.08);background:var(--card)}
.wf-fiche h3{font-size:clamp(20px,1.8vw,26px);margin-bottom:8px}
.wf-fiche .wf-desc{color:var(--muted);font-size:15.5px;max-width:58ch}
.wf-outils{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.wf-outils span{display:inline-flex;align-items:center;gap:7px;font-size:13px;padding:6px 11px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.04)}
.wf-res b{display:block;font-family:"Bricolage Grotesque";font-size:clamp(34px,3.6vw,54px);font-weight:800;line-height:1;letter-spacing:-.03em;color:var(--accent)}
.wf-res span{display:block;color:var(--muted);font-size:14.5px;margin-top:8px;max-width:30ch}
.wf-act{display:flex;flex-direction:column;gap:8px}
.wf-act .btn[hidden]{display:none}
@media (max-width:900px){
  .wf-scene{height:440px}
  .wf-bar .wf-meta{display:none}
  .wf-bar{flex-wrap:wrap;white-space:normal;row-gap:8px}
  .wf-mode{margin-left:0}
  .wf-onglets{-webkit-mask-image:linear-gradient(to right,#000 82%,transparent);mask-image:linear-gradient(to right,#000 82%,transparent);padding-right:40px}
  .wf-astuce{display:none}
  .wf-fiche{grid-template-columns:1fr;gap:20px;padding:22px 20px}
  .wf-act{flex-direction:row;flex-wrap:wrap}
}
@media (max-width:560px){.wf-bar b{font-size:13.5px}.wf-mode button{padding:0 10px}.wf-ctrl .btn span.t{display:none}}
/* au doigt : chaque commande offre au moins 40 px de prise ; a la souris, rien ne change */
@media (pointer:coarse){
  .nav .brand{padding:8px 0}
  footer nav{gap:0 18px}footer a{display:inline-block;padding:10px 0}
  .contact .links a{padding:8px 0}
  .wf-mode button{height:40px}
  .flow .bar .tog[role="switch"]::before{content:"";position:absolute;inset:-11px -6px}
}