/* Numera — styles du module documents. Propriétaire : Camille (pôle Design).
   Utiliser les jetons de css/base.css (--accent, --card, --line...) ; préfixer les classes du module pour éviter les collisions.
   Mobile d'abord : une colonne ; à partir de 900 px, formulaire + aperçu côte à côte. */

#documents-root{ --doc-r:12px; --doc-txt:var(--accent); }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) #documents-root{ --doc-txt:#86cfa9; } }
:root[data-theme="dark"] #documents-root{ --doc-txt:#86cfa9; }
#documents-root [hidden]{ display:none !important; }
.doc-login{ margin:0 0 14px; }

/* Onglets */
.doc-onglets{ display:flex; gap:4px; padding:4px; background:var(--accent-soft); border-radius:12px; margin:0 0 16px; }
.doc-onglets button{ flex:1; min-height:44px; border:none; background:transparent; color:var(--sub); font:inherit; font-weight:600; font-size:.92rem; border-radius:9px; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:6px; transition:background .15s, color .15s; }
.doc-onglets button.active{ background:var(--card); color:var(--doc-txt); box-shadow:0 1px 3px color-mix(in srgb, var(--ink) 12%, transparent); }
.doc-onglets button:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.doc-pastille{ min-width:20px; height:20px; padding:0 6px; border-radius:10px; background:var(--bad); color:#fff; font-size:.72rem; display:inline-flex; align-items:center; justify-content:center; }

/* Mise en page */
.doc-layout{ display:grid; grid-template-columns:minmax(0,1fr); gap:16px; }
.doc-col-form.card{ padding:18px 16px; min-width:0; }
.doc-col-apercu{ display:flex; flex-direction:column; gap:16px; min-width:0; }
@media (min-width:900px){
  .doc-layout{ grid-template-columns:minmax(0,1fr) 300px; align-items:start; }
  .doc-layout.doc-sans-apercu{ grid-template-columns:minmax(0,1fr); }
  .doc-col-apercu{ position:sticky; top:84px; }
  .doc-col-form.card{ padding:24px; }
}

/* Blocs numérotés */
.doc-panneau{ min-width:0; }
.doc-edition:empty{ display:none; }
.doc-edition{ margin:0 0 12px; padding:8px 12px; border-radius:8px; background:var(--accent-soft); font-size:.86rem; }
.doc-bloc{ padding:0 0 18px; margin:0 0 18px; border-bottom:1px solid var(--line); }
.doc-bloc-titre{ display:flex; align-items:center; gap:10px; font-family:var(--serif); font-weight:600; font-size:1.12rem; margin:0 0 14px; }
.doc-num{ width:26px; height:26px; border-radius:50%; background:var(--accent); color:var(--accent-ink); font-family:var(--sans); font-size:.8rem; font-weight:700; display:inline-flex; align-items:center; justify-content:center; flex:none; }
.doc-h3{ font-family:var(--serif); font-weight:600; font-size:1.02rem; margin:0; }
.doc-grid{ display:grid; grid-template-columns:minmax(0,1fr); gap:0 14px; }
@media (min-width:560px){ .doc-grid{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); } .doc-span2{ grid-column:1 / -1; } }
.doc-req{ color:var(--sub); font-weight:400; }
#documents-root .field{ margin-bottom:12px; min-width:0; }
#documents-root .field label{ font-weight:500; }
.doc-input, #documents-root select.doc-input, #documents-root textarea.doc-input{ width:100%; min-height:44px; padding:10px 12px; border-radius:9px; border:1px solid var(--line); background:var(--bg); color:var(--ink); font:inherit; font-size:1rem; transition:border-color .15s, box-shadow .15s; }
#documents-root textarea.doc-input{ min-height:64px; resize:vertical; line-height:1.45; }
.doc-input:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent); }
.doc-input.invalid, .doc-input[aria-invalid="true"]{ border-color:var(--bad); }
.doc-check{ display:flex; align-items:flex-start; gap:10px; font-size:.9rem; margin:6px 0 4px; cursor:pointer; line-height:1.4; min-height:44px; }
.doc-check input{ width:20px; height:20px; margin:1px 0 0; accent-color:var(--accent); flex:none; cursor:pointer; }
.doc-check small{ display:block; color:var(--sub); font-size:.8rem; }
.doc-info{ font-size:.88rem; color:var(--sub); margin:0 0 8px; line-height:1.5; }
.doc-tva{ max-width:280px; margin-top:8px; }

/* Lignes */
.doc-lignes{ display:flex; flex-direction:column; gap:10px; }
.doc-ligne{ border:1px solid var(--line); border-radius:var(--doc-r); padding:12px; background:color-mix(in srgb, var(--bg) 55%, var(--card)); }
.doc-ligne-tete{ display:flex; justify-content:space-between; align-items:center; margin:-2px 0 6px; }
.doc-ligne-n{ font-size:.74rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--sub); }
.doc-rm{ display:inline-flex; align-items:center; gap:6px; min-height:36px; padding:4px 10px; border:1px solid transparent; border-radius:8px; background:none; color:var(--bad); font:inherit; font-size:.8rem; cursor:pointer; }
.doc-rm:hover{ border-color:var(--line); }
.doc-ligne-grille{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.3fr); gap:0 10px; align-items:end; }
.doc-l-desc{ grid-column:1 / -1; }
.doc-l-tot{ grid-column:1 / -1; display:flex; justify-content:space-between; align-items:baseline; padding:2px 2px 8px; }
.doc-l-tot-lib{ font-size:.8rem; color:var(--sub); }
.doc-l-tot .ltot{ font-weight:700; font-variant-numeric:tabular-nums; }
@media (min-width:640px){
  .doc-ligne-grille{ grid-template-columns:110px minmax(0,1fr) minmax(110px,auto); }
  .doc-l-tot{ grid-column:auto; flex-direction:column; align-items:flex-end; justify-content:flex-end; min-height:44px; padding:0 2px 12px; gap:2px; }
  .doc-l-tot-lib{ font-size:.72rem; }
}
.doc-l-plus summary{ cursor:pointer; font-size:.84rem; color:var(--doc-txt); font-weight:600; min-height:32px; display:flex; align-items:center; }
.doc-l-plus textarea{ margin-top:6px; }
.doc-ajout{ width:100%; min-height:48px; margin-top:10px; border:1.5px dashed color-mix(in srgb, var(--accent) 45%, var(--line)); border-radius:var(--doc-r); background:transparent; color:var(--doc-txt); font:inherit; font-weight:600; cursor:pointer; transition:background .15s; }
.doc-ajout:hover{ background:var(--accent-soft); }
.doc-ia-btn{ display:inline-flex; align-items:center; gap:6px; margin-top:8px; min-height:36px; padding:6px 12px; border-radius:18px; border:1px solid color-mix(in srgb, var(--accent) 35%, var(--line)); background:var(--accent-soft); color:var(--doc-txt); font:inherit; font-size:.82rem; font-weight:600; cursor:pointer; }
.doc-ia-btn:disabled{ opacity:.6; cursor:progress; }
.doc-ia-etat{ display:block; font-size:.8rem; color:var(--sub); margin-top:4px; }
.doc-ia-etat:empty{ display:none; }
.doc-ia-note{ font-size:.78rem; color:var(--sub); margin:10px 0 0; line-height:1.45; }

/* Totaux + barre d'action (collée en bas de l'écran sur mobile) */
.doc-totaux{ margin:0 0 4px; }
.doc-tot-ligne{ display:flex; justify-content:space-between; font-size:.9rem; color:var(--sub); padding:3px 2px; font-variant-numeric:tabular-nums; }
.doc-barre{ position:sticky; bottom:0; z-index:5; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px 10px; align-items:center; margin:8px -16px 0; padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px)); background:color-mix(in srgb, var(--card) 94%, transparent); backdrop-filter:blur(8px); border-top:1px solid var(--line); }
.doc-barre-total{ display:flex; flex-direction:column; min-width:0; }
.doc-barre-total span{ font-size:.76rem; color:var(--sub); text-transform:uppercase; letter-spacing:.05em; font-weight:600; }
.doc-barre-total strong{ font-family:var(--serif); font-size:1.45rem; font-weight:700; color:var(--doc-txt); font-variant-numeric:tabular-nums; overflow-wrap:anywhere; line-height:1.15; }
#documents-root .doc-barre .btn{ width:auto; margin:0; min-height:46px; }
.doc-barre .doc-go{ grid-column:1 / -1; }
@media (min-width:480px){ .doc-barre{ grid-template-columns:minmax(0,1fr) auto auto; } .doc-barre .doc-go{ grid-column:auto; } }
@media (min-width:900px){ .doc-barre{ position:static; margin:12px 0 0; padding:14px 0 0; background:none; backdrop-filter:none; } .doc-voir{ display:none; } .doc-barre{ grid-template-columns:minmax(0,1fr) auto; } }
.doc-actions2{ display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
#documents-root .doc-actions2 .btn{ width:auto; flex:1 1 180px; margin:0; min-height:44px; }
#documents-root .err{ margin:10px 0 0; }
.doc-pied{ margin-top:16px; }

/* Aperçu */
.doc-apercu.card{ padding:14px; }
.doc-apercu-tete{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:10px; }
.doc-apercu-pages{ font-size:.78rem; color:var(--sub); }
.doc-apercu-zone{ display:block; width:100%; padding:0; border:1px solid var(--line); border-radius:6px; background:#fff; cursor:zoom-in; overflow:hidden; box-shadow:0 6px 18px color-mix(in srgb, var(--ink) 10%, transparent); transition:transform .2s; }
.doc-apercu-zone:hover{ transform:translateY(-2px); }
.doc-apercu-zone canvas{ display:block; width:100%; height:auto; }
.doc-apercu-nav{ display:flex; justify-content:center; gap:8px; margin-top:10px; }
#documents-root .doc-apercu-nav .btn{ width:44px; min-height:40px; margin:0; padding:0; font-size:1.2rem; }
@media (max-width:899px){ .doc-apercu-zone{ max-width:340px; margin:0 auto; } }

/* Apparence */
.doc-apparence.card{ padding:0; }
.doc-apparence summary{ display:flex; justify-content:space-between; align-items:center; gap:8px; padding:16px; cursor:pointer; min-height:52px; list-style:none; }
.doc-apparence summary::-webkit-details-marker{ display:none; }
.doc-apparence summary::after{ content:'▾'; color:var(--sub); transition:transform .2s; }
.doc-apparence[open] summary::after{ transform:rotate(180deg); }
.doc-apparence-resume{ margin-left:auto; font-size:.8rem; color:var(--sub); }
.doc-apparence > :not(summary){ margin-left:16px; margin-right:16px; }
.doc-apparence > :last-child{ margin-bottom:16px; }
.doc-fs{ border:none; padding:0; margin:0 0 14px; min-width:0; }
.doc-fs legend, .doc-legende{ font-size:.8rem; color:var(--sub); font-weight:500; margin-bottom:8px; padding:0; display:block; }
.doc-modeles{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:8px; }
.doc-modele{ position:relative; display:flex; flex-direction:column; align-items:center; gap:6px; padding:8px 4px; border:1.5px solid var(--line); border-radius:10px; cursor:pointer; font-size:.8rem; text-align:center; }
.doc-modele input{ position:absolute; opacity:0; inset:0; margin:0; cursor:pointer; z-index:2; }
.doc-modele:has(input:checked){ border-color:var(--accent); background:var(--accent-soft); }
.doc-modele:has(input:focus-visible){ outline:2px solid var(--accent); outline-offset:2px; }
.doc-modele b{ font-weight:600; }
.doc-modele-ill{ width:46px; height:60px; border-radius:3px; background:#fff; border:1px solid var(--line); position:relative; overflow:hidden; --c:var(--doc-ap, var(--accent)); }
.doc-modele-ill i{ position:absolute; left:6px; right:6px; display:block; border-radius:1px; }
.doc-ill-classique i:nth-child(1){ top:7px; left:24px; height:5px; background:var(--c); }
.doc-ill-classique i:nth-child(2){ top:22px; height:5px; background:var(--c); }
.doc-ill-classique i:nth-child(3){ top:44px; left:22px; height:7px; background:var(--c); }
.doc-ill-moderne i:nth-child(1){ top:0; left:0; right:0; height:15px; background:var(--c); border-radius:0; }
.doc-ill-moderne i:nth-child(2){ top:21px; height:6px; background:color-mix(in srgb, var(--c) 25%, #fff); }
.doc-ill-moderne i:nth-child(3){ top:44px; left:22px; height:7px; background:var(--c); border-radius:2px; }
.doc-ill-minimal i:nth-child(1){ top:8px; width:18px; height:5px; background:#333; }
.doc-ill-minimal i:nth-child(2){ top:17px; height:1px; background:var(--c); }
.doc-ill-minimal i:nth-child(3){ top:46px; left:28px; height:4px; background:var(--c); }
#docApercuCarte{ --doc-ap:var(--accent); }
.doc-couleurs{ display:flex; flex-wrap:wrap; gap:8px; }
.doc-couleur{ position:relative; width:44px; height:44px; display:inline-flex; align-items:center; justify-content:center; border-radius:50%; cursor:pointer; }
.doc-couleur input[type=radio]{ position:absolute; opacity:0; inset:0; margin:0; cursor:pointer; z-index:2; }
.doc-couleur span{ width:32px; height:32px; border-radius:50%; box-shadow:inset 0 0 0 1px rgba(0,0,0,.15); }
.doc-couleur:has(input:checked), .doc-couleur-libre.on{ box-shadow:0 0 0 2px var(--card), 0 0 0 4px var(--ink); }
.doc-couleur:has(input:focus-visible){ outline:2px solid var(--accent); outline-offset:3px; }
.doc-couleur-libre input[type=color]{ width:34px; height:34px; padding:0; border:1px solid var(--line); border-radius:50%; background:none; cursor:pointer; }
.doc-couleur-libre input[type=color]::-webkit-color-swatch-wrapper{ padding:2px; }
.doc-couleur-libre input[type=color]::-webkit-color-swatch{ border:none; border-radius:50%; }
.doc-logo{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.doc-logo img{ max-width:120px; max-height:44px; object-fit:contain; background:#fff; border:1px solid var(--line); border-radius:6px; padding:4px; }
#documents-root .doc-logo .btn{ width:auto; margin:0; min-height:44px; display:inline-flex; align-items:center; }
.doc-logo-btn{ cursor:pointer; }
.doc-logo:has(input:focus-visible) .doc-logo-btn{ outline:2px solid var(--accent); outline-offset:2px; }

/* Dialogue d'aperçu */
.doc-dialog{ width:min(880px, calc(100vw - 16px)); max-height:calc(100vh - 16px); padding:0; border:none; border-radius:14px; background:var(--bg); color:var(--ink); }
.doc-dialog::backdrop{ background:color-mix(in srgb, #000 55%, transparent); }
.doc-dialog-tete{ position:sticky; top:0; display:flex; justify-content:space-between; align-items:center; padding:12px 16px; background:var(--card); border-bottom:1px solid var(--line); z-index:1; }
#documents-root .doc-dialog-tete .btn{ width:auto; margin:0; min-height:44px; }
.doc-dialog-pages{ display:flex; flex-direction:column; align-items:center; gap:16px; padding:16px; }
.doc-dialog-pages canvas{ max-width:100%; height:auto; box-shadow:0 4px 18px rgba(0,0,0,.18); border-radius:2px; }

/* Suivi */
.doc-stats{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:8px; margin-bottom:14px; }
.doc-stat{ padding:10px; border-radius:10px; background:var(--accent-soft); min-width:0; }
.doc-stat span{ display:block; font-size:.74rem; color:var(--sub); font-weight:600; }
.doc-stat b{ display:block; font-family:var(--serif); font-size:1.05rem; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; margin-top:2px; }
.doc-stat small{ font-size:.72rem; color:var(--sub); }
.doc-stat-alerte{ background:color-mix(in srgb, var(--bad) 12%, transparent); }
.doc-stat-alerte b{ color:var(--bad); }
.doc-filtres{ display:flex; gap:6px; overflow-x:auto; padding-bottom:4px; margin-bottom:10px; scrollbar-width:thin; }
.doc-filtres button{ flex:none; min-height:38px; padding:6px 14px; border-radius:19px; border:1px solid var(--line); background:var(--card); color:var(--ink); font:inherit; font-size:.84rem; cursor:pointer; }
.doc-filtres button[aria-pressed="true"]{ background:var(--accent); border-color:var(--accent); color:var(--accent-ink); }
.doc-liste{ list-style:none; margin:0 0 14px; padding:0; display:flex; flex-direction:column; gap:8px; }
.doc-item{ border:1px solid var(--line); border-radius:var(--doc-r); padding:12px; background:var(--card); }
.doc-item-en_retard{ border-left:4px solid var(--bad); }
.doc-item-l1{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; }
.doc-item-l1 b{ font-variant-numeric:tabular-nums; }
.doc-item-mt{ margin-left:auto; font-weight:700; font-variant-numeric:tabular-nums; }
.doc-item-l2{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:2px 10px; font-size:.84rem; color:var(--sub); margin-top:4px; }
.doc-item-l2 span:first-child{ overflow-wrap:anywhere; }
.doc-item-act{ display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
#documents-root .doc-item-act .btn{ width:auto; margin:0; min-height:40px; padding:6px 12px; font-size:.82rem; }
.doc-statut{ font-size:.72rem; font-weight:700; padding:3px 9px; border-radius:12px; letter-spacing:.02em; }
.doc-st-brouillon{ background:color-mix(in srgb, var(--sub) 18%, transparent); color:var(--ink); }
.doc-st-envoyee, .doc-st-envoye{ background:color-mix(in srgb, var(--accent2) 16%, transparent); color:var(--ink); }
.doc-st-payee, .doc-st-accepte{ background:var(--accent-soft); color:var(--good); }
.doc-st-en_retard, .doc-st-refuse{ background:color-mix(in srgb, var(--bad) 15%, transparent); color:var(--bad); }
.doc-vide{ padding:18px; text-align:center; color:var(--sub); font-size:.9rem; border:1px dashed var(--line); border-radius:var(--doc-r); }
.doc-details summary{ cursor:pointer; font-weight:600; min-height:44px; display:flex; align-items:center; gap:6px; }

/* Thème sombre : le bleu/rouge d'état garde un contraste suffisant */
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .doc-st-en_retard, :root:not([data-theme="light"]) .doc-stat-alerte b{ color:#f08a6c; } }
:root[data-theme="dark"] .doc-st-en_retard, :root[data-theme="dark"] .doc-stat-alerte b{ color:#f08a6c; }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .doc-st-payee, :root:not([data-theme="light"]) .doc-st-accepte{ color:#7fc8a4; } }
:root[data-theme="dark"] .doc-st-payee, :root[data-theme="dark"] .doc-st-accepte{ color:#7fc8a4; }

@media (prefers-reduced-motion: reduce){ #documents-root *{ transition:none !important; } }

/* Acompte, solde et avoir (décision CEO, 01/11/2026) : la cible tactile des cases et boutons radio est leur libellé (44 px) */
.doc-genre{ border:none; padding:0; margin:0 0 12px; }
.doc-genre legend{ padding:0; }
.doc-avoir{ border:1px solid var(--accent); border-radius:10px; padding:10px 12px; margin:0 0 12px; background:var(--card, transparent); }
.doc-avoir p{ margin:0 0 6px; }
.doc-deductions{ margin:8px 0; }
.doc-deductions .doc-bloc-titre{ font-size:.95rem; margin:0 0 4px; }