/* =========================================================================
   OURAYA CLOUD · LES FACTURES DU COFFRE (docs/factures-ouraya.md, § 6)
   -------------------------------------------------------------------------
   Trois parties, sur les jetons de lumiere.css, jour et nuit :
     1. la feuille (public/app/factures/feuille.js) : la grille du PDF
        (src/factures/pdf.js), en points. Le papier ne suit PAS le mode nuit :
        de nuit, la pièce s'éteint, la feuille reste éclairée ;
     2. « Vos factures » (releve.js) : l'année, la frise, la liste, l'aperçu ;
     3. la page d'un document (document.js) : la scène, « Ce document ».

   IMPRESSION (Ctrl+P sur la page d'un document) : la feuille seule, sur une
   page A4 sans marge (page nommée « facture » : le kit des douze mots garde
   la sienne, impression.css), marquée « Copie » avec la référence de
   l'original. Le bouton Imprimer, lui, imprime le PDF original.
   ========================================================================= */

/* LES POLICES DE LA FEUILLE : les mêmes fichiers statiques que le PDF
   (src/factures/polices, copiés dans public/app/factures/polices, SIL OFL 1.1).
   Les polices variables du site donnent à Chrome, imprimant la page (Ctrl+P),
   des polices Type 3 et un fichier trois fois plus lourd. */
@font-face{font-family:FactureSora;src:url(/app/factures/polices/Sora-Light.ttf) format("truetype");font-weight:300;font-display:swap}
@font-face{font-family:FactureSora;src:url(/app/factures/polices/Sora-Regular.ttf) format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:FactureSora;src:url(/app/factures/polices/Sora-SemiBold.ttf) format("truetype");font-weight:500 600;font-display:swap}
@font-face{font-family:FactureTexte;src:url(/app/factures/polices/Bricolage-Regular.ttf) format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:FactureTexte;src:url(/app/factures/polices/Bricolage-SemiBold.ttf) format("truetype");font-weight:500 700;font-display:swap}
@font-face{font-family:FactureLogo;src:url(/app/factures/polices/Bricolage-Logo300.ttf) format("truetype");font-weight:300;font-display:swap}
@font-face{font-family:FactureLogo;src:url(/app/factures/polices/Bricolage-Logo800.ttf) format("truetype");font-weight:800;font-display:swap}
@font-face{font-family:FactureMono;src:url(/app/factures/polices/JetBrainsMono-Regular.ttf) format("truetype");font-weight:400;font-display:swap}

.feuille{
  --p-papier:#FFFFFF;
  --p-encre:#141D2E;
  --p-nuit:#12213A;
  --p-doux:#46526A;
  --p-faible:#616B7D;
  --p-trait:#E3DCCD;
  --p-ambre:#E8A33D;
  --p-accent:#92540A;
  --p-encart:#FBF7EF;
  --p-encart-bord:#EADFC8;
  --p-barre:#1E2A40;

  position:relative;box-sizing:border-box;
  display:flex;flex-direction:column;
  width:595.28pt;min-height:841.89pt;
  padding:40pt 46pt 0;
  background:var(--p-papier);color:var(--p-encre);
  font:400 8.2pt/1.36 FactureTexte,Bricolage,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased;
  print-color-adjust:exact;-webkit-print-color-adjust:exact;
  overflow:hidden;isolation:isolate;
  zoom:var(--k,1);
}
.feuille *{box-sizing:border-box}
.feuille p,.feuille h2,.feuille dl,.feuille dd,.feuille figure{margin:0}
.feuille section{padding-block:0}
.seulement-impression{display:none !important}

/* LA SOURCE : un halo tiède dans le coin, qui s'éteint avant le texte. */
.f-halo{
  position:absolute;z-index:-1;pointer-events:none;
  left:-140pt;top:-150pt;width:400pt;height:400pt;border-radius:50%;
  background:radial-gradient(closest-side,rgba(232,163,61,.10),rgba(232,163,61,.04) 60%,rgba(232,163,61,0) 100%);
}

/* ============================================================== LA TÊTE == */
.f-tete{display:flex;justify-content:space-between;align-items:flex-start;height:41pt}
.f-marque{display:flex;align-items:flex-start;gap:7pt}
.f-symbole{display:block;width:26.4pt;height:30pt}
.f-logo{margin-top:7pt !important;font:800 15.5pt/1 FactureLogo,Bricolage,sans-serif;letter-spacing:-.01em;color:var(--p-nuit);font-variation-settings:"opsz" 96}
.f-logo span{font-weight:300;color:var(--p-ambre);margin-left:.6pt}
.f-service{margin-top:4.5pt !important;font:400 5.2pt/1 FactureMono,JetBrains,ui-monospace,Menlo,monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--p-faible)}
.f-doc{text-align:right}
.f-sur{display:flex;justify-content:flex-end;align-items:center;gap:8pt;font:400 6.4pt/1 FactureMono,JetBrains,ui-monospace,Menlo,monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--p-accent)}
.f-copie{border:.6pt solid var(--p-accent);border-radius:6pt;padding:2pt 5pt;letter-spacing:.12em}
.f-numero{margin-top:7pt !important;font:400 14pt/1 FactureSora,Sora,sans-serif;letter-spacing:-.005em;white-space:nowrap}
.f-no{font-size:8.5pt;color:var(--p-faible);margin-right:3pt}
.f-date{margin-top:5pt !important;color:var(--p-doux);font-size:8pt}

/* LE FILET DE LUMIÈRE : un point, puis un trait qui s'éteint. */
.f-filet{position:relative;height:1px;margin:12.5pt 0 0;background:linear-gradient(90deg,var(--p-ambre),rgba(232,163,61,.2) 38%,var(--p-trait) 40%)}
.f-filet i{position:absolute;left:-1.7pt;top:-1.45pt;width:3.4pt;height:3.4pt;border-radius:50%;background:var(--p-ambre);box-shadow:0 0 0 3pt rgba(232,163,61,.12),0 0 0 6pt rgba(232,163,61,.06)}

/* =============================================================== LA UNE == */
.feuille .f-une{display:grid;grid-template-columns:minmax(0,1fr) 136pt;gap:0 26pt;padding-top:26pt;min-height:186pt}
.f-libelle{font:400 6pt/1 FactureMono,JetBrains,ui-monospace,Menlo,monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--p-accent)}
.f-montant{margin:8pt 0 0 -2.5pt !important;white-space:nowrap;font-family:FactureSora,Sora,sans-serif;font-weight:300;line-height:.86;letter-spacing:-.02em}
.f-entier{font-size:58pt;letter-spacing:-.035em}
.f-cents{font-size:27pt;margin-left:-.15em;letter-spacing:-.015em}
.f-note{margin-top:8pt !important;font-size:8.4pt;color:var(--p-doux)}
.f-phrase{margin-top:14pt !important;max-width:292pt;font-size:10.4pt;line-height:1.37}

.f-sceau{display:flex;flex-direction:column;align-items:center;margin-top:-4pt !important}
.f-sceau-dessin{display:block;width:136pt;height:136pt;overflow:visible}
.s-bord{fill:none;stroke:var(--p-ambre);stroke-width:.5}
.s-bande-a{fill:none;stroke:var(--p-ambre);stroke-width:.24;opacity:.95}
.s-perles{fill:var(--p-ambre)}
.s-bande-b{fill:none;stroke:var(--p-accent);stroke-width:.2;opacity:.9}
.s-oeil{fill:#fff;stroke:var(--p-ambre);stroke-width:.6}
.s-qr{fill:var(--p-nuit)}
.s-legende{font:400 5.7px FactureMono,JetBrains,ui-monospace,Menlo,monospace;fill:var(--p-accent)}
.f-sceau figcaption{display:grid;justify-items:center;gap:3pt;margin-top:12pt}
.f-code-titre{font:400 4.9pt/1 FactureMono,JetBrains,ui-monospace,Menlo,monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--p-faible)}
.f-code{font:400 7.8pt/1 FactureMono,JetBrains,ui-monospace,Menlo,monospace;letter-spacing:.04em}
.f-code-site{font:400 5.4pt/1 FactureMono,JetBrains,ui-monospace,Menlo,monospace;color:var(--p-faible)}

/* ========================================================== LES PARTIES == */
.feuille .f-parties{display:grid;grid-template-columns:152pt 152pt minmax(0,1fr);gap:0 20pt;margin-top:14pt;padding-top:16pt;border-top:.5pt solid var(--p-trait)}
.f-partie h2{margin-bottom:10pt !important;font:400 5.6pt/1 FactureMono,JetBrains,ui-monospace,Menlo,monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--p-accent)}
.f-partie p{font-size:8.2pt;line-height:1.34}
.f-nom{font:500 9.4pt/1.25 FactureSora,Sora,sans-serif !important;margin-bottom:2pt !important}
.f-ids{margin-top:4pt !important;font:400 6.6pt/1.45 FactureMono,JetBrains,ui-monospace,Menlo,monospace !important;color:var(--p-faible)}
.f-courriel{margin-top:2pt !important;font-size:7.4pt !important;color:var(--p-faible)}
.f-refs dl{display:grid;gap:4pt}
.f-refs dl>div{display:grid;grid-template-columns:62pt minmax(0,1fr);align-items:baseline}
.f-refs dt{font-size:7.4pt;color:var(--p-faible)}
.f-refs dd{font-size:8.2pt;line-height:1.3}

/* ========================================================== LE TABLEAU == */
.f-lignes{width:100%;margin-top:22pt;border-collapse:collapse}
.f-lignes th{padding:0 0 5pt;border-bottom:.8pt solid var(--p-encre);font:400 5.5pt/1 FactureMono,JetBrains,ui-monospace,Menlo,monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--p-faible);text-align:left;white-space:nowrap}
.f-lignes th:nth-child(2){width:46pt}
.f-lignes th:nth-child(3){width:86pt}
.f-lignes th:nth-child(4){width:42pt}
.f-lignes th:nth-child(5){width:75pt}
.f-lignes td{padding:9.4pt 0 8.5pt;border-bottom:.4pt solid var(--p-trait);vertical-align:baseline;font-size:8.9pt}
.f-lignes tr{break-inside:avoid}
.f-num{text-align:right !important;white-space:nowrap}
.f-fort{font-weight:600}
.f-des{display:block;font-weight:600;font-size:8.9pt;line-height:1.26}
.f-detail{display:block;margin-top:2pt;font-size:7.3pt;color:var(--p-faible)}

/* ============================================================== LE BILAN == */
.feuille .f-bilan{display:grid;grid-template-columns:252pt minmax(0,1fr);gap:0 34pt;align-items:start;margin-top:16pt;break-inside:avoid}
.f-tva{padding:12pt 12pt 10pt;background:var(--p-encart);border:.6pt solid var(--p-encart-bord);border-radius:4pt}
.f-tva h2{font:400 5.5pt/1 FactureMono,JetBrains,ui-monospace,Menlo,monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--p-accent)}
.f-regime{display:flex;justify-content:space-between;align-items:baseline;gap:8pt;margin-top:9pt !important;font:400 9.2pt/1.2 FactureSora,Sora,sans-serif}
.f-regime-court{font:400 6.1pt/1 FactureMono,JetBrains,ui-monospace,Menlo,monospace;color:var(--p-faible)}
.f-barre{display:flex;gap:1.6pt;height:5.6pt;margin-top:7pt}
.f-barre i{display:block;flex-basis:0;border-radius:3pt}
.f-barre-ht{background:var(--p-barre)}
.f-barre-tva{background:var(--p-ambre)}
.f-legende{display:flex;gap:14pt;margin-top:6pt !important;font:400 6.1pt/1.2 FactureMono,JetBrains,ui-monospace,Menlo,monospace;color:var(--p-doux)}
.f-legende span{display:inline-flex;align-items:center;gap:3.3pt}
.f-puce{display:inline-block;width:4.2pt;height:4.2pt}
.f-puce.ht{background:var(--p-barre)}
.f-puce.tva{background:var(--p-ambre)}
.f-explique{margin-top:7pt !important;font-size:7.7pt;line-height:1.35;color:var(--p-doux)}

.f-totaux{display:grid;padding-top:3pt}
.f-tot{display:flex;justify-content:space-between;align-items:baseline;gap:12pt;padding:4.5pt 0}
.f-tot dt{font-size:8.6pt}
.f-tot dd{font-size:8.6pt;white-space:nowrap}
.f-tot-total{margin-top:3pt;padding-top:9pt;border-top:.8pt solid var(--p-encre)}
.f-tot-total dt{font:600 10.4pt/1 FactureSora,Sora,sans-serif}
.f-tot-total dd{font:400 16pt/1 FactureSora,Sora,sans-serif;letter-spacing:-.01em}
.f-tot-note{margin-top:10pt;border-top:.4pt solid var(--p-trait);padding-top:8pt}
.f-tot-note dt,.f-tot-note dd{font-size:8.2pt;color:var(--p-doux)}
.f-tot-net dt,.f-tot-net dd{font-weight:600;font-size:8.8pt}

/* ============================================================== LE PIED == */
.f-pied{margin-top:auto;padding-top:24pt;break-inside:avoid}
.f-signature{display:flex;align-items:center;gap:4pt;font-size:7.6pt;color:var(--p-doux)}
.f-signature img{display:block;width:auto;height:9.4pt}
.f-frise{display:block;width:100%;height:4.6pt;margin-top:3pt;fill:none;stroke:var(--p-ambre);stroke-width:.3}
.f-legal{margin-top:6pt}
.f-legal p{font-size:6.5pt;line-height:1.29;color:var(--p-doux)}
.f-folio{display:flex;justify-content:space-between;gap:12pt;margin-top:12pt !important;padding:5pt 0 0;border-top:.4pt solid var(--p-trait);font:400 5.4pt/1 FactureMono,JetBrains,ui-monospace,Menlo,monospace;letter-spacing:.06em;color:var(--p-faible)}
.f-folio-copie{margin:4pt 0 0 !important;font:400 5.4pt/1.3 FactureMono,JetBrains,ui-monospace,Menlo,monospace;color:var(--p-accent)}
.f-pied::after{content:"";display:block;height:34pt}

/* ============================================================ IMPRESSION == */
@page facture{size:A4;margin:0}
.facture-impression{display:none}
.cadre-impression{position:fixed;right:0;bottom:0;width:1px;height:1px;border:0;opacity:0;pointer-events:none}
@media print{
  :root[data-impression="facture"] body > *:not(.facture-impression){display:none !important}
  :root[data-impression="facture"] body::after,:root[data-impression="facture"] body::before{display:none !important}
  :root[data-impression="facture"],:root[data-impression="facture"] body{height:auto !important;min-height:0 !important;overflow:visible !important;background:#fff !important}
  :root[data-impression="facture"] .facture-impression{display:block}
  .facture-impression .feuille{page:facture;zoom:1 !important;box-shadow:none !important;border-radius:0 !important;margin:0 !important;min-height:841pt}
  .facture-impression .seulement-impression{display:revert !important}
  .facture-impression .f-sur .seulement-impression{display:inline-block !important}
  /* L'encre : le halo ne s'imprime pas ; l'encart suit le réglage
     « arrière-plans » du navigateur au lieu de le forcer. */
  .f-halo{display:none !important}
  .f-tva{print-color-adjust:economy;-webkit-print-color-adjust:economy}
}

/* ======================================================= ÉTATS ET GESTES == */
:root{
  --etat-succes:#2F6B45; --etat-succes-voile:rgba(47,107,69,.10);
  --etat-info:#3A5A8C;   --etat-info-voile:rgba(58,90,140,.10);
  --etat-alerte:#B23A22; --etat-alerte-voile:rgba(178,58,34,.09);
  --etat-neutre:var(--texte-doux); --etat-neutre-voile:rgba(70,82,106,.09);
  --scene:#EDE6D8;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="clair"]){
    --etat-succes:#86C79A; --etat-succes-voile:rgba(134,199,154,.13);
    --etat-info:#9DB7E2;   --etat-info-voile:rgba(157,183,226,.13);
    --etat-alerte:#F0907A; --etat-alerte-voile:rgba(240,144,122,.12);
    --etat-neutre-voile:rgba(170,180,196,.12);
    --scene:#060A12;
  }
}
:root[data-theme="sombre"]{
  --etat-succes:#86C79A; --etat-succes-voile:rgba(134,199,154,.13);
  --etat-info:#9DB7E2;   --etat-info-voile:rgba(157,183,226,.13);
  --etat-alerte:#F0907A; --etat-alerte-voile:rgba(240,144,122,.12);
  --etat-neutre-voile:rgba(170,180,196,.12);
  --scene:#060A12;
}


/* --------------------------------------------------------- LES BOUTONS -- */
.geste{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:44px;padding:0 18px;border-radius:var(--r-bloc);
  font:500 .95rem/1 var(--f-titre);letter-spacing:-.01em;text-decoration:none;cursor:pointer;
  border:1px solid var(--trait-net);background:var(--surface);color:var(--texte);
  box-shadow:inset 0 1px 0 var(--arete-lumiere),var(--ombre-courte);
  transition:border-color .2s,transform .2s var(--sortie),box-shadow .2s;
}
.geste:hover{border-color:var(--accent-trait);transform:translateY(-1px)}
.geste:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.geste.plein{background:var(--accent-aplat);border-color:transparent;color:var(--sur-accent)}
.geste.plein:hover{box-shadow:0 12px 26px -14px var(--source-halo)}
.geste.petit{min-height:36px;padding:0 13px;font-size:.88rem}
.geste.rond{width:36px;min-height:36px;padding:0;border-radius:50%}
.geste small{font:400 11px/1 var(--f-technique);color:inherit;opacity:.72;letter-spacing:.02em}

/* --------------------------------------------------- PASTILLES D'ÉTAT -- */
.pastille-etat{
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 10px 5px 9px;border-radius:var(--r-pastille);
  font:500 12px/1 var(--f-texte);white-space:nowrap;
  color:var(--etat-neutre);background:var(--etat-neutre-voile);
}
.pastille-etat::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.pastille-etat[data-ton="succes"]{color:var(--etat-succes);background:var(--etat-succes-voile)}
.pastille-etat[data-ton="info"]{color:var(--etat-info);background:var(--etat-info-voile)}
.pastille-etat[data-ton="alerte"]{color:var(--etat-alerte);background:var(--etat-alerte-voile)}


/* ---------------------------------------- LA SCÈNE : la feuille posée -- */
.scene{
  display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:clamp(24px,3vw,40px);align-items:start;
  margin:0;padding:clamp(8px,1.5vw,16px) 0 64px;
}
.scene-feuille{min-width:0}
.cadre-feuille{max-width:794px;margin-inline:auto}
.cadre-feuille .feuille{
  box-shadow:0 1px 0 rgba(63,52,32,.06),0 30px 60px -34px rgba(56,44,22,.42),0 0 0 1px rgba(63,52,32,.06);
  border-radius:2px;
}
/* De nuit, la pièce s'éteint et la feuille reste éclairée, comme sous une lampe. */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="clair"]) .cadre-feuille .feuille{box-shadow:0 0 0 1px rgba(255,255,255,.04),0 40px 90px -30px rgba(0,0,0,.8),0 0 120px -20px rgba(255,214,150,.16)}
}
:root[data-theme="sombre"] .cadre-feuille .feuille{box-shadow:0 0 0 1px rgba(255,255,255,.04),0 40px 90px -30px rgba(0,0,0,.8),0 0 120px -20px rgba(255,214,150,.16)}

.cote{position:sticky;top:88px;display:grid;gap:14px}
.cote-titre{display:flex;align-items:center;gap:12px;margin:0 0 2px;font:400 11px/1 var(--f-technique);letter-spacing:.24em;text-transform:uppercase;color:var(--accent)}
.cote-titre::before{content:"";width:28px;height:1px;background:linear-gradient(90deg,transparent,var(--accent-aplat))}
.bloc{
  padding:18px 18px 16px;border-radius:var(--r-bloc);
  background:var(--surface);border:1px solid var(--trait);
  box-shadow:inset 0 1px 0 var(--arete-lumiere),var(--ombre-courte);
}
.bloc h2{margin:0 0 8px;font:500 1rem/1.3 var(--f-titre);letter-spacing:-.01em}
.bloc p{margin:0;font-size:.92rem;line-height:1.5;color:var(--texte-doux)}
.bloc p+p{margin-top:8px}
.bloc-etat{display:grid;gap:10px}
.bloc-etat .montant{font:300 2rem/1 var(--f-titre);letter-spacing:-.03em;color:var(--texte)}
.gestes{display:grid;gap:10px}
.empreinte{
  display:flex;align-items:center;gap:8px;margin-top:10px !important;padding:8px 10px;border-radius:var(--r-net);
  background:var(--fond-creux);font:400 11px/1.35 var(--f-technique);color:var(--texte-doux);overflow-wrap:anywhere;
}
.empreinte button{flex:none;border:0;background:none;color:var(--texte-faible);cursor:pointer;padding:2px}
.empreinte button:hover{color:var(--accent)}
.voisins{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.voisin{display:grid;gap:5px;padding:12px 14px;border-radius:var(--r-bloc);border:1px solid var(--trait);text-decoration:none;color:var(--texte);background:var(--surface)}
.voisin:hover{border-color:var(--accent-trait)}
.voisin small{font:400 10px/1 var(--f-technique);letter-spacing:.2em;text-transform:uppercase;color:var(--texte-faible)}
.voisin span{font:400 12px/1.3 var(--f-technique)}
.voisin[aria-disabled]{opacity:.45;pointer-events:none}
.voisin:last-child{text-align:right}
.lie{font-family:var(--f-technique);font-size:.86rem}
.lie a{color:var(--accent)}

.gestes-mobile{display:none}

@media (max-width:1180px){
  .scene{grid-template-columns:1fr;padding-bottom:120px}
  .cote{position:static}
}
@media (max-width:640px){
  .scene{padding-inline:0}
  .gestes-mobile{
    display:grid;grid-template-columns:1fr 1.3fr;gap:10px;
    position:fixed;left:0;right:0;bottom:0;z-index:40;
    padding:12px 16px calc(12px + env(safe-area-inset-bottom));
    background:color-mix(in srgb,var(--fond) 92%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
    border-top:1px solid var(--trait);
  }
  .cote .gestes{display:none}
  .gestes-mobile .geste small{display:none}
}


/* ============================================== « VOS FACTURES » (fac-) == */

.fac-carte{
  position:relative;display:flex;flex-direction:column;gap:12px;min-width:0;
  padding:clamp(20px,2.6vw,30px);border-radius:var(--r-bloc);
  background:var(--surface);border:1px solid var(--trait);
  box-shadow:inset 0 1px 0 var(--arete-lumiere),var(--ombre-portee);
}
.fac-etiquette{margin:0;font:400 11.5px/1.3 var(--f-technique);letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}

.compte-page[data-page="factures"]{max-width:1060px}
.compte-page[data-page="facture"]{max-width:1240px}
.fac-composant{display:grid;gap:22px}

/* Le papier de l'aperçu, dans les deux modes. */
:root{
  --fac-ombre-feuille:0 0 0 1px rgba(20,29,46,.07),0 24px 48px -30px rgba(56,44,22,.45);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="clair"]){--fac-ombre-feuille:0 0 0 1px rgba(255,214,160,.12),0 0 48px 4px rgba(255,190,110,.09),0 30px 70px -30px rgba(0,0,0,.95)}
}
:root[data-theme="sombre"]{--fac-ombre-feuille:0 0 0 1px rgba(255,214,160,.12),0 0 48px 4px rgba(255,190,110,.09),0 30px 70px -30px rgba(0,0,0,.95)}


/* ============================================================ L'ANNÉE == */
.fac-annee{position:relative;gap:20px;overflow:hidden;isolation:isolate}
/* La source de la charte, en haut à gauche de la carte. */
.fac-annee::before{
  content:"";position:absolute;z-index:-1;left:-140px;top:-180px;width:520px;height:420px;
  background:radial-gradient(closest-side,var(--halo),transparent);
  pointer-events:none;
}
.fac-annee-tete{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:16px 24px}
.fac-annee-somme-tete{min-width:0}
.fac-total{
  margin:10px 0 0 !important;
  font:200 clamp(2.5rem,5.2vw,3.6rem)/.95 var(--f-titre);letter-spacing:-.055em;
  font-variant-numeric:tabular-nums;color:var(--texte);
}
.fac-total-detail{margin:10px 0 0 !important;color:var(--texte-doux);font-size:.95rem}
.fac-sep{margin:0 .55em;color:var(--texte-faible)}

.fac-segments{
  display:inline-flex;flex:none;padding:3px;
  background:var(--fond-creux);border:1px solid var(--trait);border-radius:var(--r-pastille);
  box-shadow:var(--creux-ombre);
}
.fac-segment{
  padding:8px 15px;border-radius:var(--r-pastille);
  font:400 12.5px/1 var(--f-technique);letter-spacing:.02em;
  color:var(--texte-doux);text-decoration:none;
  transition:background .2s,color .2s;
}
.fac-segment:hover{color:var(--texte)}
.fac-segment[aria-current]{background:var(--surface);color:var(--texte);box-shadow:inset 0 1px 0 var(--arete-lumiere),var(--ombre-courte)}

/* LA FRISE : l'année, un trait ambre par paiement. Ligne d'horizon à 78 px. */
.fac-frise{--horizon:78px;position:relative;height:128px;margin-top:6px}
.fac-frise-mois{position:absolute;inset:0;display:grid;grid-template-columns:repeat(12,minmax(0,1fr))}
.fac-frise-mois span{
  position:relative;display:flex;align-items:flex-end;
  padding-left:6px;
  border-left:1px dashed color-mix(in srgb,var(--trait-net) 55%,transparent);
}
.fac-frise-mois span:first-child{border-left-color:transparent}
.fac-frise-mois b{font:400 11px/1 var(--f-technique);letter-spacing:.04em;color:var(--texte-faible)}
.fac-frise-mois span[data-futur] b{opacity:.45}
.fac-frise-mois .court{display:none}
.fac-frise-ligne{
  position:absolute;left:0;right:0;top:var(--horizon);height:1px;
  background:linear-gradient(90deg,var(--accent-aplat),var(--accent-trait) 45%,var(--trait-net));
}

.fac-repere{
  position:absolute;top:var(--horizon);
  width:20px;height:var(--h);margin-left:-10px;
  transform:translateY(-100%);
  text-decoration:none;color:inherit;
  outline-offset:2px;
}
.fac-repere::before{
  content:"";position:absolute;left:50%;top:5px;bottom:0;width:2px;margin-left:-1px;border-radius:2px;
  background:linear-gradient(to top,var(--accent-trait),var(--accent-aplat));
}
.fac-repere::after{
  content:"";position:absolute;left:50%;top:0;width:10px;height:10px;margin-left:-5px;border-radius:50%;
  background:var(--accent-aplat);
  box-shadow:0 0 0 3px var(--accent-voile),0 0 16px var(--source-halo);
  transition:transform .3s var(--sortie);
}
.fac-repere:hover::after,.fac-repere:focus-visible::after{transform:scale(1.35)}
.fac-repere[data-genre="prorata"]::after{width:8px;height:8px;margin-left:-4px;background:var(--accent-clair)}
/* L'avoir descend sous l'horizon : de l'argent qui revient. */
.fac-repere[data-genre="avoir"]{transform:none}
.fac-repere[data-genre="avoir"]::before{top:0;bottom:5px;background:linear-gradient(to bottom,var(--trait-net),var(--texte-faible))}
.fac-repere[data-genre="avoir"]::after{top:auto;bottom:0;width:8px;height:8px;margin-left:-4px;background:var(--surface);border:1.5px solid var(--texte-doux);box-shadow:none}
/* La prochaine : en pointillé, pas encore émise. */
.fac-repere[data-genre="prochaine"]::before{width:0;margin-left:0;border-left:1.5px dashed var(--accent-trait);background:none}
.fac-repere[data-genre="prochaine"]::after{background:var(--surface);border:1.5px dashed var(--accent);box-shadow:none}

.fac-bulle{
  position:absolute;left:50%;bottom:calc(100% + 10px);
  transform:translate(-50%,4px);
  padding:6px 10px;white-space:nowrap;
  background:var(--surface-haute);border:1px solid var(--trait);border-radius:var(--r-bloc);
  box-shadow:inset 0 1px 0 var(--arete-lumiere),var(--ombre-portee);
  font:400 11.5px/1.2 var(--f-technique);color:var(--texte-doux);
  opacity:0;pointer-events:none;
  transition:opacity .2s,transform .25s var(--sortie);
}
.fac-bulle b{font:500 13px/1 var(--f-titre);color:var(--texte);letter-spacing:-.01em}
.fac-repere[data-genre="avoir"] .fac-bulle{bottom:auto;top:calc(100% + 10px)}
.fac-repere:hover .fac-bulle,.fac-repere:focus-visible .fac-bulle,.fac-repere[data-genre="prochaine"] .fac-bulle{opacity:1;transform:translate(-50%,0)}
.fac-repere[data-genre="prochaine"] .fac-bulle{left:-6px;transform:none;background:transparent;border-style:dashed;box-shadow:none}
.fac-moyen{white-space:nowrap}
.fac-masque{font-family:var(--f-technique);font-size:.8em;letter-spacing:.04em}

.fac-aujourdhui{position:absolute;top:8px;height:calc(var(--horizon) - 8px);border-left:1px solid var(--accent-trait)}
.fac-aujourdhui i{
  position:absolute;right:6px;top:0;
  font:400 10px/1 var(--f-technique);font-style:normal;letter-spacing:.12em;text-transform:uppercase;
  color:var(--accent);white-space:nowrap;
}

/* TOUTES LES ANNÉES : une piste par année. */
.fac-annees-barres{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:4px}
.fac-annee-lien{
  display:grid;grid-template-columns:64px minmax(0,1fr) minmax(150px,auto);align-items:center;gap:16px;
  padding:10px 8px;border-radius:var(--r-bloc);
  color:inherit;text-decoration:none;
}
.fac-annee-lien:hover{background:var(--fond-creux)}
.fac-annee-nom{font:300 1.4rem/1 var(--f-titre);letter-spacing:-.03em}
.fac-annee-piste{height:8px;border-radius:var(--r-pastille);background:var(--trait);overflow:hidden}
.fac-annee-piste i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--accent-aplat),var(--accent-clair))}
.fac-annee-somme{display:flex;flex-direction:column;align-items:flex-end}
.fac-annee-somme b{font:500 1.05rem/1.2 var(--f-titre);font-variant-numeric:tabular-nums}
.fac-annee-somme small{font-size:.8rem;color:var(--texte-faible)}

.fac-annee-pied{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 20px;
  padding-top:16px;border-top:1px solid var(--trait);
}
.fac-prochaine{display:flex;align-items:center;gap:10px;margin:0 !important;color:var(--texte-doux);font-size:.93rem}
.fac-prochaine strong{color:var(--texte);font-weight:600;font-variant-numeric:tabular-nums}
.fac-prochaine-point{flex:none;width:10px;height:10px;border-radius:50%;border:1.5px dashed var(--accent)}
.fac-nb{
  margin-left:2px;padding:3px 7px;border-radius:var(--r-pastille);
  background:var(--fond-creux);border:1px solid var(--trait);
  font:400 11px/1 var(--f-technique);color:var(--texte-faible);
}


/* ============================================================ LA LISTE == */
.fac-liste{gap:6px}
.fac-liste-tete{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 16px;margin-bottom:8px}
.fac-liste-tete h2{margin:0;font-size:1.18rem;font-weight:500;letter-spacing:-.02em}
.fac-filtres{display:flex;flex-wrap:wrap;gap:6px}
.fac-filtre{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 12px;
  border:1px solid var(--trait);border-radius:var(--r-pastille);
  color:var(--texte-doux);font-size:.88rem;line-height:1.2;text-decoration:none;
  transition:border-color .2s,color .2s,background .2s;
}
.fac-filtre:hover{border-color:var(--trait-net);color:var(--texte)}
.fac-filtre b{font:400 11px/1 var(--f-technique);color:var(--texte-faible)}
.fac-filtre[aria-current]{border-color:var(--accent-trait);background:var(--accent-voile);color:var(--accent)}
.fac-filtre[aria-current] b{color:var(--accent)}

.fac-lignes{list-style:none;margin:0;padding:0}
.fac-ligne{
  position:relative;
  display:grid;grid-template-columns:52px minmax(0,1fr) 112px 132px auto;align-items:center;gap:0 18px;
  padding:13px 10px;
  border-top:1px solid var(--trait);
  transition:background .2s;
}
.fac-lignes > .fac-ligne:first-child,.fac-groupe + .fac-ligne{border-top-color:transparent}
.fac-ligne:hover{background:color-mix(in srgb,var(--fond-creux) 75%,transparent)}
.fac-ligne[aria-current]{background:var(--accent-voile)}
.fac-ligne[aria-current]::before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:2px;border-radius:2px;background:var(--accent-aplat)}
.fac-date{display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1}
.fac-jour{font:300 1.6rem/1 var(--f-titre);letter-spacing:-.045em;font-variant-numeric:tabular-nums}
.fac-mois{margin-top:5px;font:400 10.5px/1 var(--f-technique);letter-spacing:.12em;text-transform:uppercase;color:var(--texte-faible)}
.fac-quoi{min-width:0}
.fac-titre{
  display:inline-flex;align-items:center;gap:8px;max-width:100%;
  font:500 1rem/1.3 var(--f-titre);letter-spacing:-.015em;
  color:var(--texte);text-decoration:none;
}
.fac-titre span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fac-titre:hover span{text-decoration:underline;text-decoration-color:var(--accent-trait);text-underline-offset:.22em}
.fac-titre .icone{flex:none;color:var(--texte-faible)}
.fac-meta{margin:4px 0 0 !important;font-size:.86rem;line-height:1.35;color:var(--texte-faible);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fac-numero{font:400 12px/1 var(--f-technique);letter-spacing:.01em;color:var(--texte-doux)}
.fac-statut{justify-self:start}
.fac-montant{display:flex;flex-direction:column;align-items:flex-end;text-align:right}
.fac-montant b{font:500 1.06rem/1.2 var(--f-titre);letter-spacing:-.015em;font-variant-numeric:tabular-nums;white-space:nowrap}
.fac-montant small{margin-top:2px;font-size:.78rem;color:var(--texte-faible);white-space:nowrap}
.fac-ligne[data-genre="avoir"] .fac-montant b,.fac-ligne[data-statut="remboursee"] .fac-montant b{color:var(--texte-doux)}
.fac-gestes{display:flex;gap:2px}
.fac-gestes .bouton-nu{color:var(--texte-faible)}
.fac-gestes .bouton-nu:hover{color:var(--accent)}
.fac-groupe{
  display:flex;justify-content:space-between;align-items:baseline;
  padding:22px 10px 10px;
  border-bottom:1px solid var(--accent-trait);
  font:400 11.5px/1 var(--f-technique);letter-spacing:.16em;text-transform:uppercase;color:var(--accent);
}
.fac-groupe:first-child{padding-top:6px}
.fac-vide{margin:8px 0 !important;color:var(--texte-faible)}


/* ====================================================== COORDONNÉES == */
.fac-coord-grille{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px 28px;margin:4px 0 6px}
.fac-coord-grille dt{margin-bottom:6px;font:400 11.5px/1.3 var(--f-technique);letter-spacing:.14em;text-transform:uppercase;color:var(--texte-faible)}
.fac-coord-grille dd{margin:0;line-height:1.5;overflow-wrap:anywhere}
.fac-coord-grille strong{font-weight:560}
.fac-doux{color:var(--texte-faible);font-size:.88rem}
.fac-legal{max-width:78ch;margin:4px 2px 0 !important}


/* ========================================================== L'APERÇU == */
.fac-panneau{width:min(780px,100vw)}
.fac-panneau .panneau-tete{align-items:flex-start;padding-top:18px}
.fac-apercu-titre{min-width:0}
.fac-numero-titre{font:400 .92em var(--f-technique);letter-spacing:0}
.fac-apercu-sous{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:8px 0 0 !important;font-size:.88rem;color:var(--texte-doux)}
.fac-panneau .panneau-corps{padding:28px clamp(16px,4vw,44px) 36px;background:var(--fond-creux)}
.fac-actions-gauche{margin-right:auto}
.fac-court{display:none}


/* ========================================================= TÉLÉPHONE == */
@media (max-width:719px){
  .fac-annee-tete{flex-direction:column}
  .fac-segments{align-self:stretch}
  .fac-segment{flex:1 1 0;text-align:center}
  .fac-frise{--horizon:72px;height:116px}
  .fac-frise-mois .long{display:none}
  .fac-frise-mois .court{display:inline}
  .fac-frise-mois span{padding-left:3px}
  .fac-repere{width:14px;margin-left:-7px}
  .fac-repere::after{width:8px;height:8px;margin-left:-4px}
  .fac-repere[data-genre="prochaine"] .fac-bulle{display:none}
  .fac-aujourdhui i{display:none}
  .fac-annee-pied .btn{width:100%}
  .fac-annee-lien{grid-template-columns:52px minmax(0,1fr);grid-template-areas:"nom somme" "piste piste";gap:8px 12px}
  .fac-annee-nom{grid-area:nom}
  .fac-annee-piste{grid-area:piste}
  .fac-annee-somme{grid-area:somme}

  .fac-ligne{
    grid-template-columns:40px minmax(0,1fr) auto;
    grid-template-areas:"date quoi montant" "date statut gestes";
    gap:4px 12px;padding:14px 4px 10px;
  }
  .fac-date{grid-area:date;align-self:start;padding-top:2px}
  .fac-jour{font-size:1.4rem}
  .fac-quoi{grid-area:quoi}
  .fac-montant{grid-area:montant;align-self:start}
  .fac-montant small{display:none}
  .fac-statut{grid-area:statut;align-self:center}
  .fac-gestes{grid-area:gestes;justify-self:end;margin-right:-6px}
  .fac-gestes .bouton-nu.seule-icone{width:36px;height:36px}
  .fac-meta{display:flex;flex-direction:column;gap:3px;white-space:normal}
  .fac-meta .fac-sep{display:none}
  .fac-coord-grille{grid-template-columns:1fr}
  .fac-panneau .panneau-corps{padding:18px 14px 24px}
  .fac-actions-gauche{display:none}
  .fac-panneau .fac-long{display:none}
  .fac-panneau .fac-court{display:inline}
  .fac-panneau .panneau-actions .btn{flex:1 1 0}
}



/* ============================================ AJOUTS DE LA VERSION FINALE == */

/* LA BANDE DES FORMULES, sous la frise : ce que chaque mois a payé. */
.fac-bande{position:relative;height:22px;margin-top:-4px;border-radius:var(--r-net);background:var(--fond-creux);overflow:hidden}
.fac-bande span{
  position:absolute;top:0;bottom:0;display:flex;align-items:center;padding:0 8px;
  font:400 11px/1 var(--f-technique);letter-spacing:.04em;color:var(--texte-doux);white-space:nowrap;overflow:hidden;
  background:linear-gradient(90deg,var(--accent-voile),transparent 85%);
  border-left:2px solid var(--accent-aplat);
}
.fac-bande span[data-rang="1"]{background:linear-gradient(90deg,rgba(232,163,61,.26),transparent 85%)}
.fac-bande span[data-rang="2"]{background:linear-gradient(90deg,rgba(232,163,61,.38),transparent 85%)}
.fac-repere[data-genre="soldee"]::after{background:var(--surface);border:1.5px solid var(--accent);box-shadow:none}
.fac-repere[data-genre="soldee"]::before{background:var(--accent-trait)}

/* LES GESTES DE L'ANNÉE : archive et relevé. */
.fac-gestes-annee{display:flex;flex-wrap:wrap;gap:10px}
.fac-gestes-annee .geste{min-height:40px}
.fac-gestes-annee .geste .fac-nb{margin-left:0}

/* LA RECHERCHE de la liste. */
.fac-outils{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.fac-recherche{position:relative;display:flex;align-items:center}
.fac-recherche .icone{position:absolute;left:11px;color:var(--texte-faible);pointer-events:none}
.fac-recherche input{
  width:min(260px,62vw);height:36px;padding:0 12px 0 34px;border-radius:var(--r-pastille);
  border:1px solid var(--trait);background:var(--fond-creux);color:var(--texte);
  font:400 .9rem/1 var(--f-texte);box-shadow:var(--creux-ombre);
}
.fac-recherche input:focus{outline:2px solid var(--accent-trait);outline-offset:1px;background:var(--surface)}
.fac-ligne .pastille-etat{justify-self:start}

/* L'APERÇU : la feuille elle-même (pas un cadre), réduite à la largeur. */
.fac-panneau{width:min(860px,100vw)}
.fac-panneau .panneau-corps{background:var(--scene,var(--fond-creux));display:grid;gap:18px;align-content:start}
.fac-apercu-cadre .feuille{box-shadow:var(--fac-ombre-feuille);border-radius:2px}
.fac-apercu-etat{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;padding:14px 16px;border-radius:var(--r-bloc);background:var(--surface);border:1px solid var(--trait);font-size:.92rem;color:var(--texte-doux)}
.fac-apercu-etat .empreinte{flex:1 1 100%;margin:0 !important}

@media (max-width:719px){
  .fac-outils{width:100%}
  .fac-recherche,.fac-recherche input{width:100%}
  .fac-gestes-annee{width:100%}
  .fac-gestes-annee .geste{flex:1 1 0}
}

/* ===================================================== AJOUTS DU COFFRE == */
.fac-carte-titre{margin:0;font-size:1.18rem;font-weight:500;letter-spacing:-.02em}
.fac-avant-bascule{gap:14px}
.fac-avant-bascule .fac-doux{margin:0;max-width:72ch}
.fac-portail{display:grid;gap:10px}
.fac-apercu-corps{display:grid;gap:18px;align-content:start}
.fac-panneau .panneau-corps{background:var(--scene,var(--fond-creux))}
.fac-apercu-cadre{min-width:0}
.fac-document{display:grid;gap:4px}
.fac-retour{margin:0 !important;font-size:.92rem}
.fac-retour .lien::before{content:"← "}
.cote .geste{width:100%}
.geste[disabled]{opacity:.5;cursor:default;transform:none}