/* ==========================================================================
   BE IA — pages des 8 processus (le socle est dans commun.css, les démos dans demos.css)
   Autonome : recopie ce qu'il faut des replis de démo et des étiquettes de l'accueil.
   Animations : seulement sous html.js, déclenchées par fonctions.js (IntersectionObserver),
   jamais animation-timeline. prefers-reduced-motion : tout est statique et complet.
   ========================================================================== */

/* ---------- fil d'Ariane ---------- */
.fn-ariane ol{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:0;margin:0;padding:0;font:500 12.5px/1.3 var(--f-mono);letter-spacing:.05em;text-transform:uppercase}
.fn-ariane li{display:flex;align-items:center}
.fn-ariane li+li::before{content:"";flex:none;width:6px;height:6px;border-top:1.5px solid currentColor;border-right:1.5px solid currentColor;transform:rotate(45deg);margin:0 14px 0 10px;opacity:.55;color:var(--sur-nuit-doux)}
.fn-ariane a{color:var(--sur-nuit-doux);text-decoration:none;display:inline-block;padding:11px 0}
.fn-ariane a:hover{color:var(--signal);text-decoration:underline;text-underline-offset:4px}
.fn-ariane [aria-current="page"]{color:#fff}

/* ---------- 1. bandeau ---------- */
.fn-hero{overflow:hidden}
.fn-hero-in{padding-block:clamp(10px,1.6vw,18px) clamp(44px,5.5vw,76px)}
.fn-head{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:end;margin-top:clamp(18px,2.6vw,34px)}
.fn-hero h1{font-size:clamp(2.5rem,5.3vw,4.8rem);line-height:.95}
.fn-h1 .w{display:inline-block}
.fn-h1 .w>span{display:inline-block}
.fn-texte .lead{max-width:540px;margin-bottom:28px}
.cta-row{display:flex;flex-wrap:wrap;gap:16px 18px;align-items:center}
.cta-row .btn svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:square;stroke-linejoin:miter}
.fn-demo{margin-top:clamp(30px,4.2vw,52px)}
.fn-demo>.cote{margin-bottom:14px}
@media (max-width:900px){
  .fn-head{grid-template-columns:minmax(0,1fr);align-items:start}
  .fn-texte .lead{max-width:none}
}

/* ---------- replis statiques des démos (visibles sans JS, remplacés par demos.js) ---------- */
.bi-demo{min-width:0}
.dark .bi-demo{color:var(--sur-nuit)}
.repli{display:grid;gap:12px;padding:clamp(16px,2.6vw,28px);border:1px solid var(--trait);background:var(--blanc);color:var(--texte);border-radius:6px;font-size:15.5px;line-height:1.5}
.dark .repli{border-color:var(--trait-nuit);background:rgba(20,48,95,.55);color:var(--sur-nuit)}
.repli-q,.repli-r{max-width:92%;padding:11px 15px;border-radius:10px;margin:0}
.repli-q{justify-self:end;background:var(--nuit);color:#fff;border-radius:10px 10px 2px 10px}
.dark .repli-q{background:var(--nuit-3)}
.repli-r{justify-self:start;background:var(--papier);color:var(--texte);border:1px solid var(--trait);border-radius:2px 10px 10px 10px}
.dark .repli-r{background:var(--blanc);border-color:var(--blanc)}
.repli-etiq{font:500 11px/1 var(--f-mono);letter-spacing:.07em;text-transform:uppercase;color:var(--texte-doux)}
.dark .repli-etiq{color:var(--sur-nuit-doux)}
.repli-liste{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.repli-liste li{font:500 12.5px/1 var(--f-mono);padding:7px 10px;background:var(--papier);color:var(--texte);border:1px solid var(--trait);border-radius:2px}
.dark .repli-liste li{background:rgba(253,254,255,.08);border-color:var(--trait-nuit);color:var(--sur-nuit)}
.repli-carte{padding:12px 15px;background:var(--papier);color:var(--texte);border-left:4px solid var(--encre);border-radius:2px;margin:0}
.dark .repli-carte{background:var(--blanc);border-left-color:var(--signal)}
.repli-carte b{display:block;font-weight:600}
.repli-barre{text-decoration:line-through;color:var(--texte-doux)}
.repli-mail{max-width:100%;padding:14px 17px;background:var(--blanc);color:var(--texte);border:1px solid var(--trait);border-radius:2px;display:grid;gap:8px}
.repli-btn{display:inline-block;font:600 13px/1 var(--f-texte);padding:11px 18px;background:var(--encre);color:#fff;border-radius:3px}
.dark .repli-btn{background:var(--signal);color:var(--nuit)}

/* ---------- têtes de section ---------- */
.fn-sec-head{max-width:760px;margin-bottom:clamp(34px,5vw,56px)}
.fn-sec-head .kicker{margin-bottom:20px}
.fn-sec-head .cote{margin-top:22px;max-width:340px}

/* ---------- 2. Aujourd'hui : étiquettes crantées ---------- */
.fn-tags{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.4vw,32px)}
.fn-tag{--notch:92px;position:relative;display:flex;flex-direction:column;background:var(--blanc);border-radius:2px;color:var(--texte);
  -webkit-mask:radial-gradient(circle 11px at 0 var(--notch),#0000 97%,#000) left/51% 100% no-repeat,radial-gradient(circle 11px at 100% var(--notch),#0000 97%,#000) right/51% 100% no-repeat;
  mask:radial-gradient(circle 11px at 0 var(--notch),#0000 97%,#000) left/51% 100% no-repeat,radial-gradient(circle 11px at 100% var(--notch),#0000 97%,#000) right/51% 100% no-repeat}
.fn-tag-top{height:var(--notch);display:flex;align-items:center;justify-content:space-between;padding:0 26px;border-bottom:2px dashed var(--trait-2);position:relative}
.fn-tag-top::before{content:"";position:absolute;top:13px;left:50%;width:15px;height:15px;margin-left:-7px;border-radius:50%;background:var(--pierre);box-shadow:inset 0 2px 3px rgba(12,29,61,.35)}
.fn-tag-top svg{width:62px;height:62px;stroke:var(--texte);fill:none;stroke-width:2;stroke-linecap:square;stroke-linejoin:miter;overflow:visible}
.fn-tag-top svg .y{fill:var(--encre-douce)}
.fn-tag-top .cote{width:90px;--cote:#5d6d86}
.fn-tag-body{padding:24px 26px 20px;flex:1 0 auto}
.fn-tag h3{font-size:2.05rem;margin-bottom:10px;font-weight:800}
.fn-tag p{color:var(--texte-doux);font-size:16px}
.fn-tag-code{height:20px;margin:auto 26px 22px;flex:none;background:repeating-linear-gradient(90deg,var(--texte) 0 2px,transparent 2px 4px,var(--texte) 4px 5px,transparent 5px 9px,var(--texte) 9px 12px,transparent 12px 14px);transform-origin:0 50%}
@media (max-width:900px){.fn-tags{grid-template-columns:1fr;max-width:520px}}

/* ---------- 3. Avec BE IA : étapes reliées par une ligne de cote ---------- */
.fn-steps-w{position:relative}
.fn-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 clamp(20px,3vw,44px);position:relative}
.fn-step{position:relative;padding:0 0 6px}
.fn-n{display:grid;place-items:center;width:58px;height:58px;background:var(--encre);color:#fff;border:2px solid var(--texte);font:800 2.3rem/1 var(--f-titre);margin-bottom:22px;position:relative;z-index:1;transition:background .4s ease,color .4s ease,border-color .4s ease,transform .5s cubic-bezier(.2,.9,.3,1.3)}
.fn-step h3{font-size:1.9rem;margin-bottom:8px;font-weight:800}
.fn-step p{font-size:16.5px;color:var(--texte-doux);max-width:36ch;transition:opacity .5s ease}
.fn-trace{position:absolute;left:0;right:0;top:29px;height:2px;margin-top:-1px;background:var(--texte);transform-origin:0 50%;transform:scaleX(var(--p,1));pointer-events:none}
.fn-trace::after{content:"";position:absolute;right:0;top:-9px;width:2px;height:20px;background:var(--texte)}
.fn-trace::before{content:"";position:absolute;left:0;top:-9px;width:2px;height:20px;background:var(--texte)}
.fn-steps-w.live .fn-step:not(.on) .fn-n{background:var(--papier);color:#8a97aa;border-color:var(--trait-2);transform:scale(.9)}
.fn-steps-w.live .fn-step:not(.on) p{opacity:.45}
@media (max-width:760px){
  .fn-steps{grid-template-columns:1fr;gap:0;max-width:560px}
  .fn-step{padding:0 0 30px 84px;min-height:88px}
  .fn-step:last-child{padding-bottom:0}
  .fn-n{position:absolute;left:0;top:0;margin:0}
  .fn-trace{left:28px;right:auto;top:29px;bottom:var(--fin,96px);width:2px;height:auto;margin:0;transform-origin:50% 0;transform:scaleY(var(--p,1))}
  .fn-trace::before{display:none}
  .fn-trace::after{right:auto;left:-9px;top:auto;bottom:0;width:20px;height:2px}
}

/* ---------- 4. Ce qui reste entre vos mains : bande encre, halo qui respire ---------- */
.fn-mains{position:relative;overflow:hidden;background-color:var(--encre);color:var(--sur-nuit);padding-block:clamp(54px,7.5vw,96px);isolation:isolate}
.fn-mains::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:linear-gradient(rgba(143,176,245,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(143,176,245,.07) 1px,transparent 1px);background-size:24px 24px}
.fn-mains-in{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(24px,5vw,72px);align-items:center}
.fn-sceau{position:relative;width:clamp(116px,15vw,176px);aspect-ratio:1;display:grid;place-items:center}
.fn-halo{position:absolute;inset:-34%;border-radius:50%;background:radial-gradient(circle,rgba(143,176,245,.55) 0,rgba(143,176,245,.2) 38%,transparent 68%);pointer-events:none}
.fn-sceau-cercle{position:relative;width:100%;height:100%;border-radius:50%;border:2px solid var(--signal);background:var(--encre-2);display:grid;place-items:center;box-shadow:0 0 0 7px rgba(143,176,245,.14)}
.fn-sceau svg{width:52%;height:52%;stroke:#fff;fill:none;stroke-width:1.7;stroke-linecap:square;stroke-linejoin:miter;overflow:visible}
.fn-mains h2{font-size:clamp(1.15rem,1.7vw,1.4rem);line-height:1.1;letter-spacing:.06em;color:var(--signal);margin-bottom:16px;font-family:var(--f-mono);font-weight:500;text-transform:uppercase}
.fn-phrase{font:800 clamp(1.7rem,3.7vw,3.05rem)/1.06 var(--f-titre);text-transform:uppercase;letter-spacing:.005em;color:#fff;text-wrap:balance;max-width:24em}
@media (max-width:700px){
  .fn-mains-in{grid-template-columns:1fr;justify-items:start}
  .fn-sceau{width:112px}
}

/* ---------- 5. Les autres fonctions ---------- */
.fn-cards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,1.8vw,22px)}
.fn-card{display:flex;flex-direction:column;gap:6px;height:100%;padding:22px 20px 20px;background:var(--blanc);border:1px solid var(--trait);border-top:4px solid var(--encre);border-radius:2px;color:var(--texte);text-decoration:none;position:relative;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.fn-card:hover{transform:translateY(-4px);box-shadow:6px 6px 0 rgba(23,51,122,.14);border-color:var(--encre)}
.fn-card:hover .fn-fl{transform:translateX(5px)}
.fn-card .fn-ic{width:34px;height:34px;stroke:var(--encre);fill:none;stroke-width:1.7;stroke-linecap:square;stroke-linejoin:miter;margin-bottom:10px;overflow:visible}
.fn-card h3{font-size:1.5rem;font-weight:800}
.fn-card span{font-size:15.5px;line-height:1.45;color:var(--texte-doux)}
.fn-fl{margin-top:auto;padding-top:12px;width:28px;height:18px;display:block;transition:transform .25s ease}
.fn-fl svg{width:100%;height:100%;stroke:var(--encre);fill:none;stroke-width:1.8;stroke-linecap:square}
.fn-card--tout{background:transparent;border:2px dashed var(--trait-2);border-top:2px dashed var(--trait-2);justify-content:center;align-items:flex-start}
.fn-card--tout h3{font-size:1.5rem}
.fn-card--tout:hover{border-style:solid;border-color:var(--encre);background:var(--blanc)}
@media (max-width:1100px){.fn-cards{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:760px){.fn-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){
  .fn-cards{grid-template-columns:1fr}
  .fn-card{display:grid;grid-template-columns:34px minmax(0,1fr);column-gap:16px;row-gap:2px;padding:18px 18px 18px}
  .fn-card .fn-ic{grid-row:1/3;margin:2px 0 0}
  .fn-fl{display:none}
  .fn-card--tout{display:flex;flex-direction:column;gap:6px}
}

/* ---------- 6. appel final (comme l'accueil) ---------- */
.final{text-align:center;overflow:hidden}
.final .container{display:flex;flex-direction:column;align-items:center}
.final h2{font-size:clamp(2.5rem,7vw,5.6rem);max-width:12em;font-weight:800;margin-bottom:22px}
.final .lead{max-width:520px;margin-bottom:34px}
.final .mail{margin-top:26px;font:500 15px/1 var(--f-mono);letter-spacing:.02em}
.final .mail a{display:inline-block;padding:12px 6px;color:var(--sur-nuit);text-underline-offset:4px}
.final .mail a:hover{color:var(--signal)}
.queue{display:flex;align-items:flex-end;justify-content:center;gap:clamp(6px,1.4vw,16px);margin-bottom:46px;max-width:100%}
.queue svg{width:clamp(28px,5.4vw,56px);height:auto;fill:none;stroke-width:2;stroke-linecap:square;flex:none;stroke:#6f86ad}
.queue svg.me{stroke:var(--signal);stroke-width:2.4}
.queue svg.me circle,.queue svg.me path{stroke-dasharray:5 4}
@media (max-width:480px){.queue svg:nth-child(-n+2){display:none}}

/* ==========================================================================
   ANIMATIONS (seulement sous html.js ; le contenu reste visible sans JS)
   ========================================================================== */
@media (prefers-reduced-motion:no-preference){

  /* bandeau : titre mot par mot, texte, boutons, cote qui se trace */
  @keyframes fnMot{from{opacity:0;transform:translateY(.5em)}to{opacity:1;transform:none}}
  @keyframes fnMonte{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
  @keyframes fnTrace{from{clip-path:inset(-14px 100% -14px 0)}to{clip-path:inset(-14px 0 -14px 0)}}
  html.js .fn-h1 .w>span{animation:fnMot .75s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i,0)*.075s + .1s)}
  html.js .fn-monte{animation:fnMonte .7s cubic-bezier(.2,.7,.2,1) both;animation-delay:var(--d,0s)}
  html.js .fn-cote-h{animation:fnTrace 1.2s cubic-bezier(.6,0,.2,1) .35s both}

  /* apparitions en cascade (conteneur .fn-an reçoit .in quand il entre à l'écran) */
  .fn-r{transition:opacity .65s ease,transform .7s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i,0)*.08s)}
  html.js .fn-an:not(.in) .fn-r{opacity:0;transform:translateY(24px)}
  .fn-an.no-tr .fn-r{transition:none}

  /* lignes de cote qui se tracent */
  .fn-cote-s{transition:clip-path 1.2s cubic-bezier(.6,0,.2,1) .15s}
  html.js .fn-an:not(.in) .fn-cote-s{clip-path:inset(-14px 100% -14px 0)}
  html.js .fn-an.in .fn-cote-s{clip-path:inset(-14px 0 -14px 0)}

  /* étiquettes : elles sortent en cascade, légèrement penchées, puis se posent */
  .fn-tag{transition:opacity .6s ease,transform .85s cubic-bezier(.2,.9,.25,1.12);transition-delay:calc(var(--i,0)*.16s)}
  html.js .fn-tags:not(.in) .fn-tag{opacity:0;transform:translateY(54px) rotate(var(--r,-2.5deg))}
  .fn-tag-code{transition:transform .8s cubic-bezier(.6,0,.2,1);transition-delay:calc(var(--i,0)*.16s + .55s)}
  html.js .fn-tags:not(.in) .fn-tag-code{transform:scaleX(0)}

  /* icônes qui se tracent (pathLength=1 posé sur chaque forme) */
  html.js .fn-draw :is(path,circle,rect,ellipse,line,polyline,polygon){stroke-dasharray:1 2;stroke-dashoffset:0;transition:stroke-dashoffset 1s cubic-bezier(.5,0,.2,1);transition-delay:calc(var(--i,0)*.16s + .25s)}
  html.js .fn-an:not(.in) .fn-draw :is(path,circle,rect,ellipse,line,polyline,polygon){stroke-dashoffset:1.03}
  html.js .fn-draw .y{transition:stroke-dashoffset 1s cubic-bezier(.5,0,.2,1),fill-opacity .6s ease;transition-delay:calc(var(--i,0)*.16s + .25s),calc(var(--i,0)*.16s + .9s)}
  html.js .fn-an:not(.in) .fn-draw .y{fill-opacity:0}

  /* étapes : la ligne de cote suit le défilement (--p posé par fonctions.js) */
  .fn-steps-w.live .fn-trace{transition:transform .25s linear}

  /* bande « entre vos mains » : le halo respire */
  @keyframes fnRespire{0%,100%{transform:scale(.82);opacity:.55}50%{transform:scale(1.12);opacity:1}}
  @keyframes fnAnneau{0%,100%{box-shadow:0 0 0 7px rgba(143,176,245,.14)}50%{box-shadow:0 0 0 15px rgba(143,176,245,.05)}}
  .fn-halo{animation:fnRespire 5.2s ease-in-out infinite}
  .fn-sceau-cercle{animation:fnAnneau 5.2s ease-in-out infinite}
  html.js .fn-mains .fn-an:not(.in) .fn-sceau{transform:scale(.7);opacity:0}
  .fn-sceau{transition:transform .8s cubic-bezier(.2,.9,.3,1.2),opacity .5s ease}
  .fn-phrase{transition:opacity .8s ease .2s,transform .8s cubic-bezier(.2,.7,.2,1) .2s}
  html.js .fn-mains .fn-an:not(.in) .fn-phrase{opacity:0;transform:translateY(20px)}
}

/* mouvement réduit : tout est posé, rien ne bouge */
@media (prefers-reduced-motion:reduce){
  .fn-halo{opacity:.7}
  .fn-r,.fn-tag,.fn-tag-code,.fn-n,.fn-card,.fn-fl{transition:none}
}