/* Les fenêtres de fin d'un document — « Finaliser l'offre », « Émettre la facture » — et celle du portail
   (« Ce que voit le client ») et de la facturation récurrente. Maquette validée par Kevin le 26 sept. 2026
   (artefact « Finaliser, montrer, prévenir ») : à gauche le choix, à droite ce qu'il déclenche.
   Classes préfixées `dif-` : `.fait`, `.attente`, `.note`… sont globales dans SnapDesk. */

/* la boîte du kit s'élargit tant qu'elle porte une de ces fenêtres (la boîte est réutilisée : `:has` se défait seul) */
.modal:has(.dif-volets){max-width:920px}
.modal-body:has(> .dif-volets){padding:0}
.dif-volets{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);min-height:0}
.dif-gauche{padding:18px 22px 20px;display:grid;gap:14px;align-content:start;min-width:0}
.dif-droite{background:var(--surface-2);border-left:1px solid var(--border);padding:18px 20px 20px;min-width:0}
.dif-lab{font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);margin:0}
.dif-note{display:flex;gap:10px;align-items:flex-start;padding:11px 13px;border-radius:var(--r-bloc);background:var(--surface-2);font-size:12.5px;line-height:1.55;color:var(--ink-2)}
.dif-note .ic-svg{margin-top:2px;color:var(--ink-3)}
.dif-note b{color:var(--ink)}
.dif-droite .dif-note{background:var(--surface)}
/* ce qui empêche d'émettre : dit avant le clic, et qui se voit */
.dif-note.dif-bloque{background:var(--neg-soft)}
.dif-note.dif-bloque .ic-svg{color:var(--neg)}
.dif-erreur{padding:28px 22px}

/* les choix : des cartes entières cliquables — le disque du kit (.pick) : coche = indépendant, point = exclusif */
.dif-choix{display:grid;gap:8px}
.dif-carte{display:grid;grid-template-columns:auto minmax(0,1fr);gap:3px 12px;align-items:start;padding:12px 14px;border:1px solid var(--border-strong);border-radius:var(--r-bloc);background:var(--surface);cursor:pointer;transition:border-color .15s,box-shadow .15s}
.dif-carte:hover{border-color:var(--ink-3)}
.dif-carte:has(> .pick:checked){border-color:var(--accent);box-shadow:0 0 0 3px rgba(237,88,71,.14)}
.dif-carte > .pick{margin-top:1px}
.dif-carte > b{font-size:13.5px;font-weight:600;line-height:1.4;color:var(--ink)}
.dif-carte > small{grid-column:2;font-size:12px;line-height:1.5;color:var(--ink-3)}
.dif-carte.dif-off{opacity:.55;cursor:not-allowed}
.dif-carte.dif-off:hover{border-color:var(--border-strong)}
.dif-sous{display:flex;align-items:center;gap:10px;margin:-2px 0 0 44px;font-size:12.5px;color:var(--ink-2)}
.dif-sous[hidden]{display:none}

/* « Ce qui se passe » : chaque geste — fait, en attente, sans objet */
.dif-etapes{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:12px}
.dif-etapes li{display:grid;grid-template-columns:24px minmax(0,1fr);gap:2px 10px;align-items:start}
.dif-etapes .dif-p{width:24px;height:24px;border-radius:var(--r-ctrl);display:grid;place-items:center;background:var(--surface);border:1px solid var(--border);color:var(--ink-3)}
.dif-etapes li.dif-ok .dif-p{background:var(--pos-soft);border-color:transparent;color:var(--pos)}
.dif-etapes li.dif-att .dif-p{background:var(--warn-soft);border-color:transparent;color:var(--warn)}
.dif-etapes li.dif-sans .dif-p::before{content:"";width:9px;height:2px;border-radius:2px;background:var(--border-strong)}
.dif-etapes b{font-size:13px;font-weight:600;line-height:1.4;color:var(--ink)}
.dif-etapes small{grid-column:2;font-size:12px;line-height:1.45;color:var(--ink-3)}
.dif-ensuite{margin-top:16px;padding-top:14px;border-top:1px dashed var(--border-strong)}
.dif-ligne{display:flex;align-items:center;gap:10px;margin-top:8px;padding:10px 12px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-ctrl);font-size:12.5px}
.dif-ico{width:30px;height:30px;border-radius:var(--r-ctrl);background:var(--surface-2);display:grid;place-items:center;color:var(--ink-2);flex:none}
.dif-ligne .dif-l{flex:1;min-width:0;line-height:1.35}
.dif-ligne .dif-l b{display:block;font-weight:600;color:var(--ink)}
.dif-ligne .dif-l span{color:var(--ink-3)}
.dif-geste{font-size:12px;font-weight:600;white-space:nowrap;border:1px solid var(--border-strong);background:var(--surface-2);border-radius:var(--r-ctrl);padding:6px 10px;color:var(--ink)}
.dif-geste.dif-rien{border:0;background:none;font-weight:500;color:var(--ink-3);padding:0}
.dif-resume{display:none;font-size:12.5px;line-height:1.5;color:var(--ink-2);margin:0}
.modal-foot .dif-compte{margin-right:auto;font-size:12px;color:var(--ink-3)}

/* le portail : chaque élément du dossier, son interrupteur ; à droite, ce que voit le client */
.dif-groupe{display:grid;gap:6px}
.dif-el{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--border);border-radius:var(--r-ctrl);background:var(--surface)}
.dif-el .dif-l{flex:1;min-width:0;line-height:1.35}
.dif-el .dif-l b{display:block;font-weight:600;font-size:13px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dif-el .dif-l span{font-size:12px;color:var(--ink-3)}
.dif-el.dif-gris{background:var(--surface-2);border-style:dashed}
.dif-el.dif-gris .dif-l b{color:var(--ink-2)}
.dif-el .dif-lien{font-size:12px;font-weight:600;white-space:nowrap}
.dif-vide-g{font-size:12.5px;color:var(--ink-3);margin:0}
.dif-prevenir{display:grid;grid-template-columns:auto minmax(0,1fr);gap:3px 12px;align-items:center;padding:12px 14px;border-radius:var(--r-bloc);border:1px solid var(--border-strong);cursor:pointer}
.dif-prevenir > b{font-size:13.5px;font-weight:600;line-height:1.4}
.dif-prevenir > small{grid-column:2;font-size:12px;line-height:1.5;color:var(--ink-3)}
.dif-prevenir.dif-off{opacity:.6;cursor:not-allowed}
.difp{background:var(--canvas);border:1px solid var(--border);border-radius:var(--r-bloc);overflow:hidden}
.difp-bandeau{background:#1D2026;color:#fff;padding:12px 14px;display:flex;align-items:center;gap:10px}
.difp-bandeau i{width:22px;height:22px;border-radius:var(--r-ctrl);background:#2B2F37;display:grid;place-items:center;flex:none}
.difp-bandeau i::after{content:"";width:8px;height:8px;border-radius:50%;background:#ED5847}
.difp-bandeau b{font-size:13px;font-weight:650;line-height:1.2;font-family:var(--font-display)}
.difp-bandeau small{display:block;font-size:11px;color:#B9BCC3}
.difp-corps{padding:12px;display:grid;gap:8px}
.difp-carte{background:var(--surface);border-radius:var(--r-ctrl);padding:11px 12px;border:1px solid var(--border)}
.difp-k{font-size:9.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3)}
.difp-v{font-size:13px;font-weight:600;line-height:1.4;margin-top:3px;overflow:hidden;text-overflow:ellipsis}
.difp-d{font-size:11.5px;color:var(--ink-3)}
.difp-cta{margin-top:8px;display:inline-flex;background:var(--accent-strong);color:#fff;border-radius:var(--r-ctrl);padding:7px 12px;font-size:12px;font-weight:600}
.difp-vide{font-size:12px;color:var(--ink-3);text-align:center;padding:18px 8px}

/* la facturation récurrente */
.dif-f{display:grid;gap:6px}
.dif-f > label,.dif-f > .dif-fl{font-size:11.5px;font-weight:600;color:var(--ink-2)}
.dif-trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.dif-trio .field{margin:0}
.dif-prochaines{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:8px}
.dif-prochaines li{display:grid;grid-template-columns:82px minmax(0,1fr) auto;gap:2px 10px;align-items:baseline;padding:10px 12px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-ctrl);font-variant-numeric:tabular-nums}
.dif-prochaines li b{font-family:var(--font-display);font-size:12.5px;font-weight:650}
.dif-prochaines li > span{font-size:12.5px;color:var(--ink-2);min-width:0}
.dif-prochaines li em{font-style:normal;font-weight:700;font-size:12.5px;text-align:right}
.dif-prochaines li small{grid-column:2 / 4;font-size:11px;color:var(--ink-3)}
.dif-prochaines .dif-vide{grid-template-columns:1fr;font-size:12.5px;color:var(--ink-3)}
.dif-badge{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.02em;border-radius:6px;padding:3px 7px}
.dif-badge.dif-semi{background:var(--warn-soft);color:var(--warn)}
.dif-badge.dif-auto{background:var(--pos-soft);color:var(--pos)}
.dif-badge.dif-prete{background:var(--surface-2);color:var(--ink-2);border:1px solid var(--border)}
.dif-total{display:flex;justify-content:space-between;align-items:baseline;margin-top:12px;padding-top:12px;border-top:1px dashed var(--border-strong);font-size:12.5px;color:var(--ink-2)}
.dif-total b{font-family:var(--font-display);font-size:16px;font-weight:650;color:var(--ink);font-variant-numeric:tabular-nums}

/* au téléphone : le choix, une phrase, un bouton pleine largeur (Kevin : « mobile épuré ») */
@media (max-width:720px){
  .dif-volets{grid-template-columns:1fr}
  .dif-gauche{padding:16px 16px 14px}
  .dif-droite{border-left:0;border-top:1px solid var(--border);padding:14px 16px}
  .dif-droite > .dif-lab,.dif-etapes,.dif-ensuite,.dif-cache-tel{display:none}
  .dif-resume{display:block}
  .modal-foot:has(.dif-compte) .dif-compte{display:none}
  /* le titre se lit en entier ; un seul bouton, pleine largeur — la croix de l'en-tête ferme */
  .modal:has(.dif-volets) .mhead-t{white-space:normal;font-size:17px}
  .modal-foot:has(#difOk,#recOk,#rdvOk) .btn-ghost{display:none}
  .modal-foot #difOk,.modal-foot #recOk,.modal-foot #rdvOk{flex:1;justify-content:center;padding:12px 16px}
  .dif-trio{grid-template-columns:1fr}
  .dif-droite .difp{display:none}
}