/* ═══════════ Facture électronique : motion design ═══════════
   État final par défaut (sans JS, reduced-motion). Boucles en
   transform/opacity uniquement, jouées seulement à l'écran. */

/* ── Héros ── */
.fe-hero__grid{position:relative;display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(28px,4vw,64px);align-items:center}
.fe-title{font-size:clamp(36px,4.3vw,66px);line-height:1.06}
.fe-hero .page-hero__lead strong{color:var(--text);font-weight:600}
.fe-hero__ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(22px,3.5vh,34px)}

/* Le trajet d'une facture */
.fe-flow{margin:0;background:#121212;border:1px solid rgba(255,255,255,0.1);border-radius:18px;padding:clamp(22px,2.6vw,30px);box-shadow:0 30px 70px rgba(0,0,0,0.45)}
.fe-flow__grid{display:grid;grid-template-columns:minmax(0,1fr) 54px minmax(0,1.1fr) 54px minmax(0,1fr);grid-template-areas:"a w1 b w2 c" ". . w3 . ." ". . d . .";align-items:center}
.fe-node{position:relative;padding:14px 12px;border-radius:12px;background:#171717;border:1px solid rgba(255,255,255,0.1);text-align:center}
.fe-node b{display:block;font-family:var(--font-display);font-size:14px;line-height:1.25;letter-spacing:-0.01em;color:var(--text)}
.fe-node span{display:block;margin-top:4px;font-size:11.5px;line-height:1.3;color:var(--muted-2)}
.fe-node::after{content:"";position:absolute;inset:-1px;border-radius:inherit;border:2px solid var(--yellow);opacity:0;pointer-events:none}
.fe-node--a{grid-area:a}
.fe-node--b{grid-area:b;background:rgba(250,181,18,0.09);border-color:rgba(250,181,18,0.55)}
.fe-node--b b{color:var(--yellow)}
.fe-node--c{grid-area:c}
.fe-node--d{grid-area:d}
.fe-wire{position:relative;height:24px;overflow:hidden}
.fe-wire::before{content:"";position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;background:rgba(255,255,255,0.16)}
.fe-wire--1{grid-area:w1}
.fe-wire--2{grid-area:w2}
.fe-wire--3{grid-area:w3;justify-self:center;width:24px;height:44px}
.fe-wire--3::before{left:50%;right:auto;top:0;bottom:0;width:2px;height:auto;margin:0 0 0 -1px}
.fe-wire__run{position:absolute;inset:0;font-style:normal;transform:translateX(-100%)}
.fe-wire__run em{position:absolute;right:0;top:50%;width:28px;height:3px;margin-top:-1.5px;border-radius:2px;background:linear-gradient(90deg,transparent,var(--yellow));font-size:0}
.fe-wire__run em::after{content:"";position:absolute;right:-3px;top:50%;width:8px;height:8px;margin-top:-4px;border-radius:50%;background:var(--yellow)}
.fe-wire--3 .fe-wire__run{transform:translateY(-100%)}
.fe-wire--3 .fe-wire__run em{right:auto;top:auto;bottom:0;left:50%;width:3px;height:28px;margin:0 0 0 -1.5px;background:linear-gradient(180deg,transparent,var(--yellow))}
.fe-wire--3 .fe-wire__run em::after{right:auto;top:auto;bottom:-3px;left:50%;margin:0 0 0 -4px}
.fe-count{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;margin-top:24px;padding-top:20px;border-top:1px solid rgba(255,255,255,0.08)}
.fe-count__n{font-family:var(--font-display);font-weight:700;font-size:clamp(34px,3.4vw,46px);letter-spacing:-0.04em;line-height:1;color:var(--yellow);font-variant-numeric:tabular-nums}
.fe-count__t{flex:1 1 200px;font-size:14px;line-height:1.5;color:var(--muted-2)}

/* ── Calendrier ── */
.fe-cal{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;padding-top:84px}
.fe-cal__track{position:absolute;left:0;right:0;top:46px;height:10px;border-radius:5px;background:rgba(10,10,10,0.1)}
.fe-cal__track::before,.fe-cal__track::after{content:"";position:absolute;top:50%;width:20px;height:20px;margin-top:-10px;border-radius:50%;border:3px solid var(--light-ink,#0a0a0a);background:var(--light-bg,#f4f2ee);z-index:2}
.fe-cal__track::before{left:-2px;background:var(--light-ink,#0a0a0a)}
.fe-cal__track::after{right:-2px}
.fe-cal__fill{position:absolute;top:0;bottom:0;left:0;width:100%;border-radius:5px;background:var(--light-ink,#0a0a0a);transform-origin:0 50%;transform:scaleX(var(--t))}
.fe-cal__zone{position:absolute;top:0;bottom:0;left:calc(var(--t) * 100%);width:max(0%,calc((0.25 - var(--t)) * 100%));background:repeating-linear-gradient(135deg,var(--yellow) 0 6px,#ffd56b 6px 12px);transform-origin:0 50%}
.fe-cal__now{position:absolute;top:0;left:calc(var(--t) * 100%);display:flex;flex-direction:column;align-items:center;transform:translateX(-50%)}
.fe-cal__now span{order:-1;margin-bottom:6px;padding:4px 10px;border-radius:999px;background:var(--light-ink,#0a0a0a);color:var(--yellow);font-size:11.5px;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;white-space:nowrap}
.fe-cal__now i{width:2px;height:22px;background:var(--light-ink,#0a0a0a)}
.fe-cal__ev time{display:block;margin-bottom:8px;font-size:14px;font-weight:700;color:var(--light-accent,#8a6407)}
.fe-cal__ev b{display:block;font-family:var(--font-display);font-size:clamp(17px,1.5vw,20px);line-height:1.3;letter-spacing:-0.02em;color:var(--light-ink,#0a0a0a);margin-bottom:6px}
.fe-cal__ev span{display:block;font-size:14.5px;line-height:1.55;color:var(--light-body,#3a3a3a)}
.fe-cal__ev--zone{padding:14px 16px;border-radius:12px;background:rgba(250,181,18,0.16);border:1px dashed rgba(138,100,7,0.45);align-self:start}
.fe-cal__ev--end{text-align:right}

/* ── Avant / après ── */
.fe-ba{border-top:1px solid var(--border)}
.fe-ba__head,.fe-ba__row{display:grid;grid-template-columns:150px minmax(0,1fr) minmax(0,1.2fr);gap:clamp(14px,2.5vw,36px);align-items:center}
.fe-ba__head{padding:14px 0;font-size:12px;font-weight:600;letter-spacing:0.14em;text-transform:uppercase;color:var(--muted)}
.fe-ba__head span:last-child{color:var(--yellow)}
.fe-ba__row{padding:clamp(18px,2.4vw,26px) 0;border-top:1px solid var(--border)}
.fe-ba__k{font-family:var(--font-mono);font-size:12.5px;letter-spacing:0.12em;text-transform:uppercase;color:var(--muted-2)}
.fe-ba__old{position:relative;justify-self:start;font-size:clamp(15px,1.4vw,17px);color:var(--muted-2)}
.fe-ba__old::after{content:"";position:absolute;left:-2px;right:-2px;top:52%;height:2px;background:rgba(224,122,95,0.85);transform-origin:0 50%}
.fe-ba__new{position:relative;padding-left:18px;font-family:var(--font-display);font-weight:600;font-size:clamp(16px,1.5vw,19px);line-height:1.4;letter-spacing:-0.01em;color:var(--text)}
.fe-ba__new::before{content:"";position:absolute;left:0;top:4px;bottom:4px;width:3px;border-radius:2px;background:var(--yellow)}

/* ── Test de préparation ── */
.fe-test{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(30px,5vw,80px);align-items:start}
.fe-test__intro{position:sticky;top:110px}
.fe-checks{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.fe-check{position:relative;display:flex;gap:16px;align-items:flex-start;padding:20px 22px;border:1px solid var(--border);border-radius:14px;background:var(--surface);cursor:pointer;transition:border-color 0.3s var(--ease),background 0.3s var(--ease)}
.fe-check input{position:absolute;opacity:0;width:1px;height:1px}
.fe-check__box{position:relative;flex:0 0 26px;height:26px;margin-top:1px;border-radius:8px;border:2px solid #3a3a3a;transition:border-color 0.3s var(--ease),background 0.3s var(--ease)}
.fe-check__box::after{content:"";position:absolute;left:7px;top:2px;width:7px;height:13px;border:solid #141414;border-width:0 3px 3px 0;transform:rotate(45deg) scale(0);transition:transform 0.35s cubic-bezier(0.34,1.6,0.5,1)}
.fe-check__t{font-size:14.5px;line-height:1.55;color:var(--muted-2)}
.fe-check__t b{display:block;margin-bottom:3px;font-family:var(--font-display);font-size:17px;letter-spacing:-0.01em;color:var(--text)}
.fe-check:hover{border-color:#3a3a3a}
.fe-check:has(input:checked){border-color:rgba(250,181,18,0.6);background:rgba(250,181,18,0.05)}
.fe-check input:checked+.fe-check__box{border-color:var(--yellow);background:var(--yellow)}
.fe-check input:checked+.fe-check__box::after{transform:rotate(45deg) scale(1)}
.fe-check input:focus-visible+.fe-check__box{outline:2px solid var(--yellow);outline-offset:3px}
.fe-gauge{display:grid;grid-template-columns:120px minmax(0,1fr);grid-template-areas:"g m" "g c";gap:6px 22px;align-items:center;margin-top:30px;padding:22px;border-radius:16px;background:#121212;border:1px solid rgba(255,255,255,0.1)}
.fe-gauge[hidden]{display:none}
.fe-gauge svg{grid-area:g;width:120px;height:120px;transform:rotate(-90deg)}
.fe-gauge circle{fill:none;stroke-width:10}
.fe-gauge__bg{stroke:rgba(255,255,255,0.08)}
.fe-gauge__fg{stroke:var(--yellow);stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:var(--o,1);transition:stroke-dashoffset 0.8s var(--ease)}
.fe-gauge__val{grid-area:g;display:flex;align-items:baseline;justify-content:center;gap:3px}
.fe-gauge__val b{font-family:var(--font-display);font-size:40px;letter-spacing:-0.04em;color:var(--text)}
.fe-gauge__val span{font-size:14px;color:var(--muted-2)}
.fe-gauge__msg{grid-area:m;margin:0;font-size:15px;line-height:1.5;color:var(--text)}
.fe-gauge__cta{grid-area:c;justify-self:start;padding:12px 20px;font-size:15px}

/* ── Odoo ── */
.fe-odoo{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(30px,5vw,80px);align-items:center}
.fe-odoo__more{margin-top:18px;font-size:15px;line-height:1.6;color:var(--muted-2)}
.fe-odoo__more a{color:var(--yellow);font-weight:600}
.fe-vers{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.fe-ver{position:relative;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:6px 16px;padding:18px 20px 18px 46px;border-radius:14px;background:var(--surface);border:1px solid var(--border)}
.fe-ver::before{content:"";position:absolute;left:20px;top:50%;width:12px;height:12px;margin-top:-6px;border-radius:50%}
.fe-ver b{font-family:var(--font-display);font-size:18px;letter-spacing:-0.02em;color:var(--text)}
.fe-ver span{font-size:14px;color:var(--muted-2)}
.fe-ver--ok{border-color:rgba(95,191,125,0.35)}
.fe-ver--ok::before{background:#5fbf7d}
.fe-ver--ok span{color:#8fd6a4}
.fe-ver--mid::before{background:var(--yellow)}
.fe-ver--no::before{background:#e07a5f}

/* ── Étapes ── */
.fe-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(14px,1.8vw,24px);position:relative;counter-reset:fe}
.fe-steps::before,.fe-steps::after{content:"";position:absolute;left:0;right:0;top:19px;height:2px}
.fe-steps::before{background:rgba(255,255,255,0.1)}
.fe-steps::after{background:var(--yellow);transform-origin:0 50%}
.fe-step{position:relative;padding-top:58px;counter-increment:fe}
.fe-step::before{content:counter(fe,decimal-leading-zero);position:absolute;top:0;left:0;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--bg);border:2px solid var(--yellow);font-family:var(--font-mono);font-size:13px;color:var(--yellow);z-index:1}
.fe-step b{display:block;margin-bottom:8px;font-family:var(--font-display);font-size:clamp(17px,1.4vw,19px);line-height:1.3;letter-spacing:-0.02em;color:var(--text)}
.fe-step span{display:block;font-size:14px;line-height:1.6;color:var(--muted-2)}

/* ── Lectures ── */
.fe-reads{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.fe-read{position:relative;display:flex;flex-direction:column;gap:12px;min-height:170px;padding:22px;border-radius:14px;border:1px solid var(--border);background:var(--surface);text-decoration:none;overflow:hidden;transition:border-color 0.3s var(--ease),transform 0.3s var(--ease)}
.fe-read::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--yellow);transform:scaleX(0);transform-origin:0 50%;transition:transform 0.5s var(--ease)}
.fe-read:hover{border-color:#3a3a3a;transform:translateY(-4px)}
.fe-read:hover::after{transform:none}
.fe-read:focus-visible{outline:2px solid var(--yellow);outline-offset:3px}
.fe-read__k{font-size:11.5px;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:var(--yellow)}
.fe-read b{font-family:var(--font-display);font-size:17px;line-height:1.35;letter-spacing:-0.01em;color:var(--text)}
.fe-read i{margin-top:auto;font-style:normal;color:var(--yellow);transition:transform 0.3s var(--ease)}
.fe-read:hover i{transform:translateX(5px)}

/* ── Animations ── */
@media (prefers-reduced-motion:no-preference){
  .fe-in{opacity:0;transform:translateY(16px);animation:feIn 0.7s var(--ease) var(--d,0s) forwards}

  .fe-wire--1 .fe-wire__run{animation:feRunX1 3.4s linear 1.2s infinite}
  .fe-wire--2 .fe-wire__run{animation:feRunX2 3.4s linear 1.2s infinite}
  .fe-wire--3 .fe-wire__run{animation:feRunY2 3.4s linear 1.2s infinite}
  .fe-node--b::after{animation:feHit 3.4s ease-out 1.2s infinite}
  .fe-node--c::after,.fe-node--d::after{animation:feHit2 3.4s ease-out 1.2s infinite}
  .fe-flow.is-paused .fe-wire__run,.fe-flow.is-paused .fe-node::after{animation-play-state:paused}

  .fe-cal .fe-cal__fill{transform:scaleX(0)}
  .fe-cal .fe-cal__zone{transform:scaleX(0)}
  .fe-cal .fe-cal__now{opacity:0}
  .fe-cal.is-visible .fe-cal__fill{transform:scaleX(var(--t));transition:transform 1.2s var(--ease) 0.3s}
  .fe-cal.is-visible .fe-cal__zone{transform:none;transition:transform 0.9s var(--ease) 1.4s}
  .fe-cal.is-visible .fe-cal__now{opacity:1;transition:opacity 0.5s var(--ease) 1.2s}
  .fe-cal.is-visible .fe-cal__now i{animation:feBlink 1.6s ease-in-out 2s infinite}

  .fe-ba__old::after{transform:scaleX(0)}
  .fe-ba__row.is-visible .fe-ba__old::after{transform:none;transition:transform 0.5s var(--ease) 0.45s}
  .fe-ba__new{opacity:0;transform:translateX(24px)}
  .fe-ba__row.is-visible .fe-ba__new{opacity:1;transform:none;transition:opacity 0.6s var(--ease) 0.85s,transform 0.6s var(--ease) 0.85s}

  .fe-steps::after{transform:scaleX(0)}
  .fe-steps.is-visible::after{transform:none;transition:transform 2s var(--ease) 0.2s}
  .fe-steps .fe-step{opacity:0;transform:translateY(14px)}
  .fe-steps.is-visible .fe-step{opacity:1;transform:none;transition:opacity 0.6s var(--ease),transform 0.6s var(--ease)}
  .fe-steps.is-visible .fe-step:nth-child(1){transition-delay:0.3s}
  .fe-steps.is-visible .fe-step:nth-child(2){transition-delay:0.65s}
  .fe-steps.is-visible .fe-step:nth-child(3){transition-delay:1s}
  .fe-steps.is-visible .fe-step:nth-child(4){transition-delay:1.35s}
  .fe-steps.is-visible .fe-step:nth-child(5){transition-delay:1.7s}
  .fe-steps .fe-step::before{transform:scale(0.4)}
  .fe-steps.is-visible .fe-step::before{transform:none;transition:transform 0.5s cubic-bezier(0.34,1.6,0.5,1) 0.3s}

  .fe-ver--ok.is-visible::before{animation:fePing 2.4s ease-out 1s 2}
}
@keyframes feIn{to{opacity:1;transform:none}}
@keyframes feRunX1{0%{transform:translateX(-100%);opacity:1}32%{transform:translateX(0);opacity:1}33%,100%{transform:translateX(0);opacity:0}}
@keyframes feRunX2{0%,36%{transform:translateX(-100%);opacity:1}68%{transform:translateX(0);opacity:1}69%,100%{transform:translateX(0);opacity:0}}
@keyframes feRunY2{0%,36%{transform:translateY(-100%);opacity:1}68%{transform:translateY(0);opacity:1}69%,100%{transform:translateY(0);opacity:0}}
@keyframes feRunY1{0%{transform:translateY(-100%);opacity:1}32%{transform:translateY(0);opacity:1}33%,100%{transform:translateY(0);opacity:0}}
@keyframes feHit{0%,31%{opacity:0;transform:none}34%{opacity:1;transform:scale(1.04)}55%,100%{opacity:0;transform:none}}
@keyframes feHit2{0%,67%{opacity:0}70%{opacity:1}90%,100%{opacity:0}}
@keyframes feBlink{0%,100%{opacity:1}50%{opacity:0.3}}
@keyframes fePing{0%{transform:none;opacity:1}60%{transform:scale(1.8);opacity:0.2}100%{transform:none;opacity:1}}

/* ── Responsive ── */
@media (max-width:1100px){
  .fe-reads{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fe-steps{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:34px}
  .fe-steps::before,.fe-steps::after{display:none}
}
@media (max-width:980px){
  .fe-hero__grid,.fe-test,.fe-odoo{grid-template-columns:1fr}
  .fe-flow{max-width:560px}
  .fe-test__intro{display:contents}
  .fe-checks{order:1}
  .fe-gauge{order:2;margin-top:0;position:sticky;bottom:12px;z-index:5;box-shadow:0 18px 40px rgba(0,0,0,0.5)}
}
@media (max-width:760px){
  .fe-cal{grid-template-columns:1fr;gap:18px;padding-top:96px}
  .fe-cal__ev--end{text-align:left}
  .fe-cal__now{align-items:flex-start;transform:translateX(-1px)}
  .fe-ba__head{display:none}
  .fe-ba__row{grid-template-columns:1fr;gap:8px}
  .fe-steps{grid-template-columns:1fr;gap:22px}
  .fe-steps::before,.fe-steps::after{display:block;left:19px;right:auto;top:0;bottom:0;width:2px;height:auto}
  .fe-steps::after{transform-origin:50% 0}
  .fe-step{padding:0 0 0 58px}
  .fe-reads{grid-template-columns:1fr}
  .fe-read{min-height:0}
}
@media (max-width:760px) and (prefers-reduced-motion:no-preference){
  .fe-steps::after{transform:scaleY(0)}
  .fe-steps.is-visible::after{transform:none}
}
/* Trajet en colonne sur petit écran */
@media (max-width:520px){
  .fe-flow__grid{grid-template-columns:1fr 1fr;grid-template-areas:"a a" "w1 w1" "b b" "w2 w3" "c d";column-gap:10px}
  .fe-wire--1,.fe-wire--2,.fe-wire--3{justify-self:center;width:24px;height:34px}
  .fe-wire--1::before,.fe-wire--2::before{left:50%;right:auto;top:0;bottom:0;width:2px;height:auto;margin:0 0 0 -1px}
  .fe-wire--1 .fe-wire__run,.fe-wire--2 .fe-wire__run{transform:translateY(-100%)}
  .fe-wire--1 .fe-wire__run em,.fe-wire--2 .fe-wire__run em{right:auto;top:auto;bottom:0;left:50%;width:3px;height:28px;margin:0 0 0 -1.5px;background:linear-gradient(180deg,transparent,var(--yellow))}
  .fe-wire--1 .fe-wire__run em::after,.fe-wire--2 .fe-wire__run em::after{right:auto;top:auto;bottom:-3px;left:50%;margin:0 0 0 -4px}
  .fe-gauge{grid-template-columns:96px minmax(0,1fr)}
  .fe-gauge svg{width:96px;height:96px}
  .fe-gauge__val b{font-size:32px}
}
@media (max-width:520px) and (prefers-reduced-motion:no-preference){
  .fe-wire--1 .fe-wire__run{animation-name:feRunY1}
  .fe-wire--2 .fe-wire__run{animation-name:feRunY2}
}
.fe-ver span a{color:inherit;text-decoration:underline;text-underline-offset:3px}
/* Figure « Le trajet d'une facture » */
.fe-fig{max-width:900px;margin:0 auto;content-visibility:auto;contain-intrinsic-size:auto 700px}
.fe-fig-sec .section-head{text-align:center;margin-left:auto;margin-right:auto}
.fe-fig-sec .section-head__lead{margin-left:auto;margin-right:auto}