/* Page /facture-electronique/ : hero avec suivi des statuts reconstitué et compte
   à rebours, avant/après, versions d'Odoo, accompagnement en 5 étapes, guides.
   La figure du trajet, le calendrier, le test, les avis et la FAQ restent sur fe.css. */
.fv-hero{position:relative;padding:clamp(48px,8vh,96px) 0 clamp(64px,9vh,104px);overflow:hidden}
.fv-hero::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(50% 60% at 78% 40%,rgba(250,181,18,0.10),transparent 70%),linear-gradient(rgba(255,255,255,0.028) 1px,transparent 1px) 0 0/56px 56px,linear-gradient(90deg,rgba(255,255,255,0.028) 1px,transparent 1px) 0 0/56px 56px;-webkit-mask-image:linear-gradient(#000 70%,transparent);mask-image:linear-gradient(#000 70%,transparent)}
.fv-hero__wrap{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,4.5vw,64px);align-items:center}
.fv-hero .breadcrumb{margin-bottom:28px}
.fv-hero .eyebrow{margin-bottom:18px}
.fv-hero__title{margin:0 0 22px;font:700 clamp(38px,4.4vw,64px)/1.03 var(--font-display);letter-spacing:-0.045em;color:var(--text)}
.fv-hero__title span{color:var(--yellow)}
.fv-hero__sub{max-width:54ch;margin:0 0 30px;font-size:clamp(17px,1.3vw,19px);line-height:1.62;color:#b9b6b0}
.fv-hero__sub strong{color:var(--text)}
.fv-hero__ctas{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:34px}
.fv-count{display:flex;align-items:center;gap:20px;padding-top:20px;border-top:1px solid var(--border)}
.fv-count__n{flex:none;margin:0;font:700 clamp(34px,3.4vw,46px)/1 var(--font-display);letter-spacing:-0.04em;color:var(--yellow);font-variant-numeric:tabular-nums}
.fv-count__t{margin:0;max-width:34ch;font-size:14px;line-height:1.5;color:var(--muted)}

/* Suivi des factures reconstitué */
.fv-app{position:relative;border:1px solid #2a2a2a;border-radius:16px;background:#0f0f0f;box-shadow:0 50px 100px -40px rgba(0,0,0,0.9),0 0 0 1px rgba(255,255,255,0.02) inset}
.fv-app__bar{display:flex;align-items:center;gap:6px;padding:11px 14px;border-bottom:1px solid #222;background:#141414;border-radius:16px 16px 0 0}
.fv-app__bar i{width:9px;height:9px;border-radius:50%;background:#2e2e2e}
.fv-app__bar span{margin-left:10px;font:12px var(--font-mono);color:#7c7a75;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fv-inv{margin:14px;padding:16px;border:1px solid #2c2610;border-radius:12px;background:linear-gradient(180deg,#17140a,#121212)}
.fv-inv__head{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px;margin-bottom:20px}
.fv-inv__head b{font:600 14px var(--font-mono);color:var(--text)}
.fv-inv__head span{font-size:13px;color:#a9a6a0}
.fv-inv__head em{margin-left:auto;padding:3px 8px;border:1px solid #3a3320;border-radius:999px;font:600 11px var(--font-mono);font-style:normal;color:var(--yellow)}
.fv-track{position:relative;display:grid;grid-template-columns:repeat(5,1fr);margin:0;padding:0;list-style:none}
.fv-track::before{content:"";position:absolute;left:10%;right:10%;top:8px;height:2px;background:#2a2a2a}
.fv-track::after{content:"";position:absolute;left:10%;top:8px;height:2px;width:60%;background:var(--yellow);transform-origin:left;}
.fv-track li{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
.fv-track i{width:18px;height:18px;border-radius:50%;border:2px solid #333;background:#121212}
.fv-track .is-done i{border-color:var(--yellow);background:var(--yellow)}
.fv-track .is-now i{border-color:var(--yellow);background:#121212;box-shadow:0 0 0 5px rgba(250,181,18,0.18)}
.fv-track span{font-size:11.5px;line-height:1.25;color:#7c7a75}
.fv-track .is-done span,.fv-track .is-now span{color:#d8d5cf}
.fv-rows{display:flex;flex-direction:column;margin:0 14px;border:1px solid #222;border-radius:10px;overflow:hidden}
.fv-rows div{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;padding:10px 12px;background:#141414;font-size:12.5px}
.fv-rows div+div{border-top:1px solid #1f1f1f}
.fv-rows b{font:600 12px var(--font-mono);color:#a9a6a0}
.fv-rows span{color:#d8d5cf;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fv-rows em{font-style:normal;font-size:11.5px;color:#8d8a84}
.fv-rows em.ok{color:var(--ok)}
.fv-rows em.warn{color:#f08a5d}
.fv-path{display:flex;align-items:center;gap:8px;padding:14px;flex-wrap:wrap}
.fv-path span{padding:6px 10px;border:1px solid #262626;border-radius:8px;font-size:11.5px;color:#a9a6a0;background:#121212}
.fv-path span.is-pa{border-color:#3a3320;color:var(--yellow);background:#17140a}
.fv-path i{flex:1;min-width:10px;height:2px;background:repeating-linear-gradient(90deg,#3a3a3a 0 4px,transparent 4px 8px)}
.fv-app__note{position:absolute;right:12px;bottom:-26px;margin:0;font-size:11px;color:#5f5d59}
@media (prefers-reduced-motion:no-preference){
  .fv-track .is-now i{animation:fvPulse 2s ease-in-out infinite}
  .fv-path i{background:repeating-linear-gradient(90deg,var(--yellow) 0 4px,transparent 4px 8px) 0 0/16px 2px;opacity:.55;animation:fvFlow 1.2s linear infinite}
}
@keyframes fvPulse{50%{box-shadow:0 0 0 9px rgba(250,181,18,0)}}
@keyframes fvFlow{to{background-position:16px 0}}

/* Sections */
.fv-sec{padding:clamp(72px,10vh,120px) 0}
.fv-sec--alt{background:#0d0d0d;border-top:1px solid #161616;border-bottom:1px solid #161616}
.fv-sec .section-head{margin-bottom:40px}
.fv-lead{max-width:60ch;margin:0 0 16px;font-size:17px;line-height:1.65;color:#b9b6b0}
.fv-more{margin:24px 0 0}
.fv-more a,.fv-aid a{color:var(--yellow);text-decoration:none;font-weight:600}
.fv-more a:hover,.fv-aid a:hover{text-decoration:underline}

/* Avant / après */
.fv-ba{display:flex;flex-direction:column;gap:12px}
.fv-ba__row{display:grid;grid-template-columns:140px minmax(0,1fr) 40px minmax(0,1fr);align-items:center;gap:16px;padding:20px 24px;border:1px solid #222;border-radius:14px;background:#111}
.fv-ba__row b{font:700 20px var(--font-display);letter-spacing:-0.02em;color:var(--text)}
.fv-ba__row>span{justify-self:center;font-size:22px;color:var(--yellow)}
.fv-ba__old{margin:0;font-size:15px;line-height:1.5;color:#7c7a75;text-decoration:line-through;text-decoration-color:rgba(240,138,93,0.55)}
.fv-ba__new{margin:0;padding:12px 14px;border:1px solid #3a3320;border-radius:10px;background:#17140a;font-size:15px;line-height:1.5;color:var(--text)}

/* Odoo */
.fv-odoo{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,0.95fr);gap:clamp(32px,5vw,72px);align-items:center}
.fv-odoo .section-head__title{margin-bottom:22px}
.fv-versions{display:flex;flex-direction:column;gap:10px;margin:0;padding:0;list-style:none}
.fv-versions li{display:grid;grid-template-columns:150px minmax(0,1fr);gap:4px 16px;align-items:center;padding:16px 18px 16px 22px;border:1px solid #222;border-radius:12px;background:#111;position:relative}
.fv-versions li::before{content:"";position:absolute;left:0;top:12px;bottom:12px;width:3px;border-radius:0 3px 3px 0;background:#444}
.fv-versions li.is-ok::before{background:var(--ok)}
.fv-versions li.is-warn::before{background:var(--yellow)}
.fv-versions li.is-no::before{background:#f08a5d}
.fv-versions b{font:700 17px var(--font-display);color:var(--text)}
.fv-versions span{font-size:14px;color:#b9b6b0}
.fv-versions a{grid-column:2;font-size:12.5px;color:var(--yellow);text-decoration:none}
.fv-versions a:hover{text-decoration:underline}

/* 5 étapes */
.fv-steps{position:relative;display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin:0;padding:0;list-style:none;counter-reset:none}
.fv-steps li{display:flex;flex-direction:column;gap:10px;padding:22px 20px;border:1px solid #222;border-radius:14px;background:#111}
.fv-steps li>b{font:700 13px var(--font-mono);color:var(--yellow)}
.fv-steps h3{margin:0;font:700 18px/1.25 var(--font-display);letter-spacing:-0.015em;color:var(--text)}
.fv-steps p{margin:0;font-size:14px;line-height:1.55;color:#a9a6a0}
.fv-trio{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:clamp(36px,5vw,56px)}
.fv-trio>div{padding:24px;border:1px solid #222;border-radius:14px;background:#0f0f0f}
.fv-trio>div:nth-child(2){border-color:#3a3320;background:#15130b}
.fv-trio__k{margin:0 0 14px;font:700 17px var(--font-display);color:var(--text)}
.fv-trio ul{display:flex;flex-direction:column;gap:9px;margin:0;padding:0;list-style:none}
.fv-trio li{position:relative;padding-left:20px;font-size:14.5px;line-height:1.5;color:#b9b6b0}
.fv-trio li::before{content:"";position:absolute;left:2px;top:8px;width:8px;height:8px;border-radius:2px;background:var(--yellow)}
.fv-aid{margin:clamp(28px,4vw,40px) 0 0;padding:18px 22px;border-left:3px solid var(--yellow);border-radius:0 12px 12px 0;background:#141414;font-size:15px;line-height:1.6;color:#b9b6b0}
.fv-aid b{color:var(--text)}

/* Guides */
.fv-reads{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.fv-reads a{display:flex;flex-direction:column;gap:12px;min-height:190px;padding:22px;border:1px solid #222;border-radius:14px;background:#111;text-decoration:none;transition:border-color .2s,transform .2s,background .2s}
.fv-reads a:hover{border-color:#3a3320;background:#15130b;transform:translateY(-3px)}
.fv-reads span{align-self:flex-start;padding:4px 9px;border:1px solid #3a3320;border-radius:999px;font:600 11px var(--font-mono);letter-spacing:0.04em;text-transform:uppercase;color:var(--yellow)}
.fv-reads b{font:700 18px/1.3 var(--font-display);letter-spacing:-0.015em;color:var(--text)}
.fv-reads em{margin-top:auto;font-style:normal;font-size:14px;font-weight:600;color:var(--yellow)}

@media (max-width:1080px){
  .fv-steps{grid-template-columns:repeat(3,1fr)}
  .fv-reads{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
  .fv-hero__wrap,.fv-odoo{grid-template-columns:1fr}
  .fv-app{margin-bottom:24px}
  .fv-trio{grid-template-columns:1fr}
  .fv-ba__row{grid-template-columns:1fr;gap:10px}
  .fv-ba__row>span{justify-self:start;transform:rotate(90deg)}
}
@media (max-width:600px){
  .fv-count{flex-direction:column;align-items:flex-start;gap:8px}
  .fv-steps,.fv-reads{grid-template-columns:1fr}
  .fv-reads a{min-height:0}
  .fv-track span{font-size:10px}
  .fv-inv{margin:10px;padding:12px}
  .fv-rows{margin:0 10px}
  .fv-versions li{grid-template-columns:1fr}
  .fv-versions a{grid-column:1}
}