/* ============================================================
   DOCUMENT D'OFFRE SNAPSHOT — format lettre universel.
   Rendu partagé : Studio (aperçu), portail client, impression/PDF.
   Le document est une feuille A4 fixe ; l'overlay le présente à
   l'écran, l'impression n'imprime QUE la feuille.
   ============================================================ */

.odoc-scope{
  --p-ink:#17181B;
  --p-ink2:#54575D;
  --p-ink3:#9B9EA4;
  --p-line:#E4E1DC;
  --p-acc:#ED5847;
  --p-pos:#1B7A4B;
}

/* ---- overlay (écran) ---- */
.offredoc-overlay{position:fixed;inset:0;z-index:1000;background:#E9E6E1;overflow:auto;display:flex;flex-direction:column;align-items:center}
.odoc-bar{position:sticky;top:0;z-index:2;align-self:stretch;display:flex;align-items:center;gap:12px;padding:10px 18px;background:#141619;box-shadow:0 2px 14px rgba(0,0,0,.3)}
.odoc-bar b{font-family:'Switzer',sans-serif;font-size:13px;color:#F4F2EF}
.odoc-bar .sp{flex:1}
.odoc-bar .odoc-etat{font-size:11.5px;font-weight:600;color:#C9C6C0;border:1px solid rgba(255,255,255,.2);border-radius:99px;padding:3px 10px;white-space:nowrap}
.odoc-bar .btn{appearance:none;border:1px solid rgba(255,255,255,.25);background:transparent;color:#F4F2EF;font-family:'Satoshi',sans-serif;font-size:12.5px;font-weight:650;padding:7px 14px;border-radius:9px;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.odoc-bar .btn:hover{border-color:#fff}
/* le client décide : accepter en vert, refuser en rouge (Kevin, 14 sept. 2026) */
.odoc-bar .btn.cta{background:#1B7A4B;border-color:#1B7A4B;color:#fff}
.odoc-bar .btn.cta:hover{background:#15643D;border-color:#15643D}
.odoc-bar .btn.refuser{background:#B82D1C;border-color:#B82D1C;color:#fff}
.odoc-bar .btn.refuser:hover{background:#9E2517;border-color:#9E2517}
.odoc-pages{padding:40px 0 60px;display:flex;flex-direction:column;align-items:center}

/* ---- la feuille A4 ---- */
.feuille{width:210mm;min-height:296mm;background:#fff;box-shadow:0 10px 44px rgba(20,22,25,.16);box-sizing:border-box;padding:14mm 20mm 16mm;font-family:'Satoshi',sans-serif;font-size:10pt;line-height:1.6;color:var(--p-ink)}

/* en-tête lettre */
.feuille .entete{display:flex;justify-content:space-between;align-items:flex-start}
.feuille .wm{font-family:'Switzer',sans-serif;font-weight:700;font-size:26pt;letter-spacing:-.02em;line-height:1;color:var(--p-ink)}
.feuille .wm::after{content:'';display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--p-acc);margin-left:4px}
/* le logo déposé (Réglages › Image de marque) prend la place du mot-marque, sans le dépasser */
.feuille .wm-logo{display:block;max-height:18mm;max-width:80mm;width:auto;height:auto;object-fit:contain;object-position:left center}
.feuille .accept a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.feuille .exp{font-size:8.5pt;line-height:1.55;color:var(--p-ink2);margin-top:4mm}
.feuille .meta-doc{text-align:right;font-family:'IBM Plex Mono',monospace;font-size:7.5pt;letter-spacing:.1em;text-transform:uppercase;color:var(--p-ink3);line-height:2}
.feuille .meta-doc .num{color:var(--p-acc);font-weight:600}

/* destinataire (zone fenêtre C5). Le haut de la lettre respire (Kevin, 14 sept. 2026, sur le modèle des offres
   Bexio) : destinataire vers 60 mm, date vers 105 mm, titre vers 125 mm — le texte commence au milieu de la page. */
.feuille .dest{margin:20mm 0 0 auto;width:75mm;font-size:10pt;line-height:1.6}
.feuille .dest .nom{font-weight:650}
.feuille .lieu-date{margin-top:24mm;font-size:10pt;color:var(--p-ink2)}

/* objet */
.feuille .objet{margin-top:12mm}
.feuille .objet .k{font-family:'IBM Plex Mono',monospace;font-size:7pt;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--p-acc)}
.feuille .objet h1{font-family:'Switzer',sans-serif;font-size:16.5pt;font-weight:700;letter-spacing:-.015em;line-height:1.2;margin:1.6mm 0 0}
.feuille .objet h1 .dot{color:var(--p-acc)}

/* corps (texte de l'offre) */
.feuille .corps{margin-top:9mm;color:var(--p-ink2)}
.feuille .corps p{margin:0 0 3.2mm}
.feuille .corps strong,.feuille .corps b{color:var(--p-ink);font-weight:650}
.feuille .corps ul,.feuille .corps ol{margin:0 0 3.2mm;padding-left:5mm}
.feuille .corps li{margin-bottom:1.2mm}
.feuille .corps:empty{display:none}

/* positions */
.feuille .positions{margin-top:8mm}
.feuille .ptable{width:100%;border-collapse:collapse}
.feuille .ptable thead th{font-family:'IBM Plex Mono',monospace;font-size:7pt;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--p-ink3);text-align:left;padding:0 0 2.2mm;border-bottom:1.5px solid var(--p-ink)}
.feuille .ptable thead th.r{text-align:right;white-space:nowrap;padding-left:6mm}
/* la page hôte peut avoir sa propre `.pos` (le Studio : sa liste de positions, en flex) — une ligne du
   tableau reste une ligne de tableau, sinon ses cellules se rangent l'une derrière l'autre */
.feuille .ptable tr.pos{display:table-row;padding:0;gap:0;border:0;animation:none}
.feuille .ptable .grp th{font-family:'IBM Plex Mono',monospace;font-size:7.5pt;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--p-acc);text-align:left;padding:4.5mm 0 1.5mm}
.feuille .ptable tbody tr{break-inside:avoid}
.feuille .ptable .pos td{padding:2.8mm 0;border-bottom:1px solid var(--p-line);vertical-align:top}
.feuille .ptable .pos .pl{font-family:'Switzer',sans-serif;font-size:10.5pt;font-weight:650;letter-spacing:-.005em}
.feuille .ptable .pos .pd{font-size:8.6pt;line-height:1.55;color:var(--p-ink2);margin-top:1.2mm;max-width:118mm}
.feuille .ptable .pos td.c{white-space:nowrap;text-align:right;font-variant-numeric:tabular-nums;font-size:9.5pt;color:var(--p-ink2);padding-left:5mm}
.feuille .ptable .pos td.m{white-space:nowrap;text-align:right;font-family:'Switzer',sans-serif;font-size:10.5pt;font-weight:700;font-variant-numeric:tabular-nums;padding-left:5mm}
.feuille .ptable .pos td.m.offert{font-family:'IBM Plex Mono',monospace;font-size:7.5pt;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--p-pos)}
.feuille .ptable .stot td{padding:2mm 0 1mm;text-align:right;font-size:8.6pt;color:var(--p-ink3)}
.feuille .ptable .stot b{color:var(--p-ink);font-family:'Switzer',sans-serif;font-size:9.5pt;margin-left:3mm}
/* rabais et arrondi : le rabais d'une ligne se lit sous elle (en retrait, sans filet entre les deux) ;
   celui de l'offre sous le sous-total de ce qui est au-dessus ; l'arrondi dit son écart */
.feuille .ptable .pos.a-rabais td{border-bottom:0;padding-bottom:1mm}
.feuille .ptable .prab td{padding:0 0 2.8mm;border-bottom:1px solid var(--p-line);vertical-align:top}
.feuille .ptable .prab .pl{font-size:9.5pt;font-weight:500;color:var(--p-ink2)}
.feuille .ptable .prab:not(.pglob) .pl{padding-left:5mm}
.feuille .ptable .prab td.m{white-space:nowrap;text-align:right;font-family:'Switzer',sans-serif;font-size:10pt;font-weight:600;font-variant-numeric:tabular-nums;color:var(--p-ink2);padding-left:5mm}
.feuille .ptable .prab.pglob td{padding-top:2.2mm}
.feuille .ptable .stot.psous td{padding-top:2.8mm}

/* total */
.feuille .total{display:flex;justify-content:space-between;align-items:baseline;border-top:1.5px solid var(--p-ink);margin-top:-1px;padding-top:3.5mm;break-inside:avoid}
.feuille .total .tl{font-family:'Switzer',sans-serif;font-size:12pt;font-weight:700}
.feuille .total .tl small{display:block;font-family:'Satoshi',sans-serif;font-size:8.2pt;font-weight:500;color:var(--p-ink3);margin-top:1mm}
.feuille .total b{font-family:'Switzer',sans-serif;font-size:16.5pt;font-weight:700;letter-spacing:-.015em;color:var(--p-acc);font-variant-numeric:tabular-nums}
.feuille .paiement{margin-top:3.5mm;font-size:8.8pt;line-height:1.6;color:var(--p-ink2)}
.feuille .paiement b{color:var(--p-ink);font-weight:650}

/* acceptation : une phrase sous le paiement, sans encadré */
.feuille .accept{margin-top:3mm;font-size:8.8pt;line-height:1.6;color:var(--p-ink2);break-inside:avoid}
.feuille .accept b{color:var(--p-ink);font-weight:650}

/* salutations : nettement séparées du paiement ; la signature en retrait, à droite */
.feuille .salut{margin-top:15mm;break-inside:avoid}
.feuille .salut p{margin:0 0 2.5mm;color:var(--p-ink2)}
.feuille .salut .signe{margin:8mm 0 0 95mm}
.feuille .salut .qui{font-family:'Switzer',sans-serif;font-size:11pt;font-weight:700}
.feuille .salut .role{font-size:8.8pt;color:var(--p-ink2);margin-top:.8mm}

/* pied */
.feuille .pied{margin-top:10mm;padding-top:3.5mm;border-top:1px solid var(--p-line);display:flex;justify-content:space-between;font-family:'IBM Plex Mono',monospace;font-size:7pt;letter-spacing:.1em;text-transform:uppercase;color:var(--p-ink3)}

/* ---- écran étroit : REFLOW au lieu de réduction ----
   La feuille est un A4 (210mm, polices en pt). La réduire au zoom sur un
   téléphone rendait le texte à ~6px : illisible, or c'est le document que le
   client valide juridiquement. Sous 760px on reflowe donc en colonne lisible.
   Tout est sous @media SCREEN : l'impression et le PDF restent strictement A4. */
@media screen and (max-width:760px){
  .odoc-bar{flex-wrap:wrap;gap:8px 10px;padding:10px 14px}
  .odoc-bar b{flex:1 1 100%;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  /* la cale pousse les boutons à droite sur une ligne ; repliés, elle creusait un vide avant « Refuser » */
  .odoc-bar .sp{display:none}
  .odoc-bar .btn{min-height:42px;font-size:13.5px;flex:1 1 auto;justify-content:center}
  .odoc-pages{padding:14px 0 40px}

  .feuille.reflow{width:auto;max-width:100%;min-height:0;padding:22px 18px 30px;font-size:15px;line-height:1.62}
  .feuille.reflow .entete{flex-direction:column;gap:10px}
  .feuille.reflow .wm{font-size:21px}
  .feuille.reflow .exp{font-size:12.5px;margin-top:5px}
  .feuille.reflow .meta-doc{text-align:left;font-size:11px;line-height:1.9}
  .feuille.reflow .dest{margin:20px 0 0;width:auto;font-size:15px}
  .feuille.reflow .lieu-date{margin-top:16px;font-size:14px}
  .feuille.reflow .objet{margin-top:20px}
  .feuille.reflow .objet .k{font-size:10px}
  .feuille.reflow .objet h1{font-size:21px;margin-top:5px}
  .feuille.reflow .corps{margin-top:15px}
  .feuille.reflow .corps p{margin:0 0 11px}
  .feuille.reflow .corps ul,.feuille.reflow .corps ol{margin:0 0 11px;padding-left:20px}

  /* le tableau des positions s'empile : libellé sur sa ligne, quantité et montant dessous */
  .feuille.reflow .positions{margin-top:20px}
  .feuille.reflow .ptable,.feuille.reflow .ptable tbody,.feuille.reflow .ptable tr,.feuille.reflow .ptable td,.feuille.reflow .ptable th{display:block;width:auto}
  .feuille.reflow .ptable thead{display:none}
  .feuille.reflow .ptable .grp th{font-size:11px;padding:16px 0 4px}
  .feuille.reflow .ptable .pos{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;padding:12px 0;border-bottom:1px solid var(--p-line)}
  .feuille.reflow .ptable .pos td{padding:0;border:0}
  .feuille.reflow .ptable .pos td:first-child{flex:1 1 100%}
  .feuille.reflow .ptable .pos .pl{font-size:15.5px}
  .feuille.reflow .ptable .pos .pd{font-size:13.5px;margin-top:4px;max-width:none}
  .feuille.reflow .ptable .pos td.c{flex:1 1 auto;text-align:left;padding-left:0;font-size:13.5px}
  .feuille.reflow .ptable .pos td.m{flex:0 0 auto;margin-left:auto;padding-left:0;font-size:16px}
  .feuille.reflow .ptable .pos td.m.offert{font-size:11px}
  .feuille.reflow .ptable .stot td{padding:8px 0 2px;font-size:13px}
  .feuille.reflow .ptable .stot b{font-size:14px;margin-left:8px}
  .feuille.reflow .ptable .pos.a-rabais{border-bottom:0;padding-bottom:4px}
  .feuille.reflow .ptable .prab{display:flex;align-items:baseline;gap:2px 10px;padding:0 0 12px;border-bottom:1px solid var(--p-line)}
  .feuille.reflow .ptable .prab td{padding:0;border:0}
  .feuille.reflow .ptable .prab td:first-child{flex:1 1 auto;min-width:0}
  .feuille.reflow .ptable .prab td.c{display:none}
  .feuille.reflow .ptable .prab .pl{font-size:14px}
  .feuille.reflow .ptable .prab:not(.pglob) .pl{padding-left:14px}
  .feuille.reflow .ptable .prab td.m{flex:0 0 auto;margin-left:auto;padding-left:0;font-size:14.5px}
  .feuille.reflow .ptable .prab.pglob{padding-top:8px}

  .feuille.reflow .total{flex-wrap:wrap;gap:4px 12px;padding-top:14px}
  .feuille.reflow .total .tl{font-size:16px}
  .feuille.reflow .total .tl small{font-size:12.5px;margin-top:3px}
  .feuille.reflow .total b{font-size:22px}
  .feuille.reflow .paiement{margin-top:14px;font-size:13.5px}
  .feuille.reflow .accept{margin-top:10px;font-size:13.5px}
  .feuille.reflow .salut{margin-top:32px}
  .feuille.reflow .salut .signe{margin:22px 0 0 40%}
  .feuille.reflow .salut p{margin:0 0 9px}
  .feuille.reflow .salut .qui{font-size:16px}
  .feuille.reflow .salut .role{font-size:13px;margin-top:3px}
  .feuille.reflow .pied{flex-direction:column;gap:5px;margin-top:26px;padding-top:14px;font-size:10.5px}
}

/* ---- impression : n'imprimer QUE la feuille (uniquement si l'overlay est ouvert,
   sinon une impression normale de la page resterait blanche) ---- */
@media print{
  body:has(.offredoc-overlay){background:#fff !important}
  body:has(.offredoc-overlay) > *:not(.offredoc-overlay){display:none !important}
  .offredoc-overlay{position:static !important;overflow:visible !important;background:#fff !important;display:block !important}
  .offredoc-overlay .odoc-bar{display:none !important}
  .offredoc-overlay .odoc-pages{padding:0 !important;display:block !important}
  /* annuler le zoom d'adaptation écran ET la hauteur plein-A4 : sinon PDF minuscule
     (mobile) + 2e page blanche parasite à chaque impression */
  .offredoc-overlay .feuille{box-shadow:none !important;margin:0 auto !important;width:210mm !important;min-height:0 !important;zoom:1 !important;padding:12mm 20mm 14mm !important}
  /* AUCUNE marge du navigateur : les 12 mm laissés ici donnaient à Chrome la
     place de dessiner ses en-têtes et pieds — titre, date, numéro de page, et
     surtout l'URL du document. Sur une offre ouverte depuis le portail, cette
     URL est le LIEN PERSONNEL du client : le PDF qu'il transfère à son associé
     ou à sa fiduciaire emportait l'accès à son espace, à « J'accepte » et à
     ses factures. La feuille porte déjà ses marges typographiques juste
     au-dessus (padding 12mm 20mm 14mm) ; @page n'a pas besoin des siennes.
     Même règle, même raison que offre-struct.css. */
  @page{size:A4;margin:0}
}