/* Page Facturation, gabarit des pages modules : ciel du hero avec une facture qui se compose, fil du devis
   à l'encaissement (étapes aux tons des modules), onglets régie et forfait, bloc jaune facture électronique,
   bento « encaisser », FAQ. Mini-écrans partagés dans /assets/site.css. Contenu lisible sans script. */

/* ---------- en-tête : la facture sort des nuages ---------- */
.f-sky .sky-in{padding-bottom:0}
.f-sky h1{max-width:11em;font-size:4.6rem}
.inv-stage{position:relative;width:min(38rem,100%);margin-top:3.6rem;text-align:left;color:var(--ink)}
.paper{position:relative;z-index:1;padding:2rem 2.2rem 1.6rem;border-radius:1rem;background:#fff;font-size:.85rem;box-shadow:0 0 0 1px rgba(17,17,17,.05),0 2px 4px rgba(17,17,17,.04),0 50px 90px -40px rgba(10,40,90,.55)}
.pp-top{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem}
.pp-from{display:flex;align-items:center;gap:.6rem}
.pp-from img{width:2rem;height:2rem}
.pp-from b,.pp-no b{display:block;font-size:.95rem;font-weight:600}
.pp-from small,.pp-no small{display:block;margin-top:.1rem;font-size:.75rem;color:var(--muted2)}
.pp-no{text-align:right}
.pp-to{margin-top:1.4rem;display:flex;flex-direction:column;gap:.1rem}
.pp-to small{font-size:.7rem;color:var(--muted2);text-transform:uppercase;letter-spacing:.06em}
.pp-to b{font-size:.95rem;font-weight:600}
.pp-to span{font-size:.78rem;color:var(--muted)}
.pp-t{width:100%;margin-top:1.3rem;border-collapse:collapse;font-variant-numeric:tabular-nums}
.pp-t th{padding:.5rem 0;font-size:.7rem;font-weight:500;color:var(--muted2);text-align:right;border-bottom:1px solid var(--line)}
.pp-t th:first-child,.pp-t td:first-child{text-align:left}
.pp-t td{padding:.8rem 0;text-align:right;vertical-align:top;border-bottom:1px solid var(--line);white-space:nowrap}
.pp-t td:first-child{white-space:normal}
.pp-t td b{display:block;font-weight:600}
.pp-t td small{display:block;margin-top:.1rem;font-size:.74rem;color:var(--muted2)}
.pp-t td+td{padding-left:1rem}
.pp-sum{margin:1rem 0 0 auto;width:min(15rem,100%);font-variant-numeric:tabular-nums}
.pp-sum div{display:flex;justify-content:space-between;padding:.28rem 0;color:var(--muted)}
.pp-sum dd{margin:0}
.pp-sum .pp-ttc{margin-top:.35rem;padding-top:.6rem;border-top:1px solid var(--ink);color:var(--ink);font-size:1.05rem;font-weight:600}
.pp-foot{margin-top:1.3rem;font-size:.7rem;color:var(--muted2)}
.f-cra{top:7.2rem;left:-12.6rem;rotate:-4deg}
.f-fx{z-index:2;bottom:5.2rem;right:-15rem;rotate:3deg}
.f-fx .ph-fill{font-size:1.7rem;color:#a36a14}

/* calendrier du CRA : jours travaillés, week-end, absence */
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:.3rem;margin-top:.9rem;text-align:center;font-size:.72rem;font-variant-numeric:tabular-nums}
.cal span{padding-bottom:.15rem;font-size:.65rem;font-weight:600;color:var(--muted2)}
.cal b,.cal em,.cal u,.cal i{display:grid;place-items:center;height:1.75rem;border-radius:.45rem;font-style:normal;text-decoration:none}
.cal b{font-weight:600;background:#fbe6fb;color:#7a2251}
.cal em{color:var(--muted2)}
.cal u{background:repeating-linear-gradient(-45deg,var(--sand) 0 4px,#fff 4px 8px);color:var(--muted2)}

/* ---------- régie ou forfait ---------- */
.modes{padding:5rem 0 6rem}
.seg{display:flex;width:max-content;margin:2.4rem auto 0;padding:.3rem;border-radius:999px;background:var(--sand)}
.seg-b{height:2.5rem;padding:0 1.5rem;border-radius:999px;font-size:.92rem;font-weight:500;color:var(--muted);transition:background-color .35s var(--ease),color .35s var(--ease),box-shadow .35s var(--ease)}
.seg-b[aria-selected="true"]{background:#fff;color:var(--ink);box-shadow:0 1px 2px rgba(17,17,17,.08),0 6px 14px -8px rgba(17,17,17,.3)}
.seg-b:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.mode{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:3.4rem;align-items:center;max-width:62rem;margin:2.6rem auto 0}
.mode[hidden]{display:none}
.ticks{list-style:none;margin:0;padding:0;display:grid;gap:1rem}
.ticks li{display:grid;grid-template-columns:auto 1fr;gap:.8rem;font-size:1.05rem;line-height:1.4}
.ticks .ph{width:1.6rem;height:1.6rem;border-radius:50%;display:grid;place-items:center;font-size:.8rem;background:#fff1c4;color:#86560c}
.mode-ui{padding:1.2rem 1.3rem}
.m-t{width:100%;margin-top:.4rem;border-collapse:collapse;font-size:.86rem;font-variant-numeric:tabular-nums}
.m-t td{padding:.7rem 0;border-bottom:1px solid var(--line);text-align:right;white-space:nowrap}
.m-t td:first-child{text-align:left;font-weight:600}
.m-t td:nth-child(2),.m-t td:nth-child(3){color:var(--muted2)}
.m-t td+td{padding-left:.8rem}
.m-t .m-sum td{border-bottom:0;padding-top:.9rem;font-weight:600;font-size:1rem;color:var(--ink)}
.m-t .m-sum td:first-child{text-align:left}
.jal{list-style:none;margin:.5rem 0 0;padding:0}
.jal li{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto 7.4rem;align-items:center;gap:.8rem;padding:.75rem 0 .75rem 1.5rem;border-bottom:1px solid var(--line)}
.jal li::before{content:"";position:absolute;left:.2rem;top:50%;width:.6rem;height:.6rem;translate:0 -50%;border-radius:50%;box-shadow:0 0 0 2px var(--line2);background:#fff}
.jal li.done::before{background:#86e389;box-shadow:0 0 0 2px #86e389}
.jal li.now::before{background:#f8c457;box-shadow:0 0 0 2px #f8c457,0 0 0 6px rgba(248,196,87,.25)}
.jal b{display:block;font-weight:600;font-size:.88rem}
.jal small{display:block;font-size:.74rem;color:var(--muted2)}
.jal em{font-style:normal;font-weight:600;font-size:.86rem;font-variant-numeric:tabular-nums}
.jal .w-st{justify-self:end}

/* ---------- facture électronique : bloc jaune ---------- */
.einv{background:linear-gradient(150deg,var(--c) 0%,color-mix(in srgb,var(--c) 45%,#fff) 80%);padding:5.4rem 0}
.einv-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:4rem;align-items:center}
.einv-txt h2{margin-top:.8rem;max-width:11em}
.einv-txt .lead{margin-top:1.2rem;color:var(--ink2);max-width:30rem}
.einv-txt .tlink{margin-top:1.8rem}
.einv-ui{position:relative;padding-bottom:3rem}
.dates{list-style:none;margin:0;padding:0;display:grid;gap:.8rem}
.dates li{display:grid;grid-template-columns:7.6rem minmax(0,1fr) auto;align-items:center;gap:1rem;padding:1.2rem 1.3rem;border-radius:1.2rem;background:#fff;box-shadow:0 0 0 1px rgba(17,17,17,.05),0 24px 44px -30px rgba(17,17,17,.35)}
.dates time{font-size:1.05rem;font-weight:600;letter-spacing:-.02em;white-space:nowrap}
.dates b{display:block;font-weight:600}
.dates b a{text-decoration:underline;text-decoration-color:rgba(17,17,17,.25);text-underline-offset:.18em}
.dates b a:hover{text-decoration-color:currentColor}
abbr[title]{text-decoration:none}
.dates small{display:block;margin-top:.1rem;font-size:.8rem;color:var(--muted2)}
.dates .ph{width:2rem;height:2rem;border-radius:50%;display:grid;place-items:center;background:var(--sand);color:var(--muted)}
.dates .past .ph{background:#eefacb;color:#3e5c05}
.f-recv{right:-1rem;bottom:0;rotate:-2deg}

/* ---------- encaisser : bento (grille et carte dans site.css) ---------- */
.cash{padding:6rem 0 3rem}
.cash .lw-seg .on{border-color:#f2c14e}

/* ---------- responsive ---------- */
/* écran étroit : le CRA se pose sur le bord haut de la feuille, au-dessus du papier */
@media (max-width:1180px){
  .f-cra{top:-1.9rem;left:1.2rem}
  .f-fx{right:1.2rem;bottom:-1.7rem}
  .paper{padding-top:3rem;padding-bottom:3.4rem}
}
@media (max-width:991px){
  .f-sky h1{font-size:3.6rem}
  .einv-grid{grid-template-columns:minmax(0,1fr);gap:2.6rem}
}
@media (max-width:767px){
  .f-sky .sky-in{padding-top:3.4rem;padding-bottom:0}
  .f-sky h1{font-size:2.5rem}
  .a-ctas{flex-direction:column;align-items:stretch;width:100%}
  .inv-stage{margin-top:2.4rem}
  .paper{padding:3rem 1.1rem 3.6rem;font-size:.8rem}
  .pp-t th:nth-child(3),.pp-t td:nth-child(3){display:none}
  .f-fx{right:.6rem}
  .win{padding:.9rem}
  .modes{padding:3.2rem 0 3.6rem}
  .mode{grid-template-columns:minmax(0,1fr);gap:1.8rem;margin-top:2rem}
  .ticks li{font-size:1rem}
  .jal li{grid-template-columns:minmax(0,1fr) auto;padding-left:1.4rem}
  .jal .w-st{grid-column:1/-1;justify-self:start}
  .einv{padding:3.4rem 0}
  .dates li{grid-template-columns:minmax(0,1fr) auto;gap:.3rem .8rem;padding:1rem}
  .dates time{grid-column:1/-1;font-size:.95rem}
  .dates .ph{grid-row:2/4;grid-column:2}
  .f-recv{right:-.2rem}
  .cash{padding:3.6rem 0 2rem}
}
@media (max-width:374px){
  .f-sky h1{font-size:2.15rem}
  .a-ctas .btn{padding:0 1rem;font-size:.86rem}
  .pp-top{flex-direction:column}
  .pp-no{text-align:left}
  .w-list li{gap:.55rem}
  .seg-b{padding:0 1.1rem}
}