/* Comptabilité BâtiPermis : styles communs à tous les écrans (lot WP3, PLAN.md 5.2 et 5.3), après /css/style.css.
   Un écran ajoute sa propre feuille ecrans/<ecran>.css (chargée par son module). Règles : aucune largeur fixe
   au delà de 300 px, rien qui fasse défiler la page en largeur à 375 px, tableaux en cartes empilées sous 820 px,
   cibles tactiles de 44 px, champs en 16 px sur téléphone, états jamais montrés par la seule couleur. */

body.compta { --cpt-menu-l: 240px; }
/* barre du haut collante : ce qu'on amène à l'écran n'est pas caché dessous (deux rangées sur téléphone) */
html { scroll-padding-top: 80px; }
@media (max-width: 640px) { html { scroll-padding-top: 128px; } }
/* texte pour les lecteurs d'écran seulement ; !important : un champ caché (adresse pour le gestionnaire de mots de passe)
   ne reprend pas la largeur 100 % des champs de style.css (défilement en largeur sur téléphone sinon) */
.sr { position: absolute !important; width: 1px !important; height: 1px !important; min-width: 0 !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important; border: 0 !important; }

/* ---------- lien d'évitement ---------- */
.evitement { position: absolute; left: 8px; top: -60px; z-index: 200; min-height: 44px; background: #fff; color: var(--blue-700); border: 2px solid var(--blue-600); border-radius: 8px; padding: 10px 14px; font-weight: 700; cursor: pointer; }
.evitement:focus { top: 8px; }

/* ---------- barre du haut ---------- */
.cpt-barre { flex-wrap: wrap; gap: 8px 16px; padding: 8px 16px; }
.cpt-barre-l1 { display: flex; align-items: center; gap: 12px; flex: 1 1 auto; min-width: 0; }
.cpt-barre-l2 { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; }
.cpt-barre-l2:empty { display: none; }
.cpt-barre .brand { min-width: 0; min-height: 44px; }
.cpt-badge { background: var(--green-500); color: #fff; font-size: .66rem; font-weight: 800; padding: 3px 9px; border-radius: 999px; letter-spacing: .08em; white-space: nowrap; }
.cpt-menu-btn { background: rgba(255,255,255,.12); color: #fff; border: 1px solid rgba(255,255,255,.35); padding: 8px 14px; }
.cpt-menu-btn:hover { background: rgba(255,255,255,.2); }
.cpt-barre-moi { margin-left: auto; }

/* bascule entre les deux livres : couleurs différentes ET texte */
.bascule { display: flex; gap: 6px; flex-wrap: wrap; }
.bl { display: inline-flex; align-items: center; min-height: 44px; padding: 6px 14px; border-radius: 999px; border: 1.5px solid rgba(255,255,255,.4); color: #e3ecf9; text-decoration: none; font-weight: 700; font-size: .88rem; white-space: nowrap; }
.bl:hover { background: rgba(255,255,255,.12); color: #fff; }
.bl-essai.on { background: #f3b53f; border-color: #f3b53f; color: #3d2600; }
.bl-reel.on { background: #fff; border-color: #fff; color: var(--blue-900); }
.bl.on::before { content: "\2713"; margin-right: 6px; font-weight: 900; }
.ex-choix { display: flex; align-items: center; gap: 8px; }
.ex-choix label { color: #cfe0f7; font-size: .82rem; font-weight: 700; }
.ex-choix select { width: auto; min-height: 44px; padding: 6px 10px; font-size: 16px; }

/* personne connectée (grand écran) */
.moi { position: relative; }
.moi summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 4px 12px; border-radius: 10px; color: #fff; border: 1px solid rgba(255,255,255,.3); }
.moi summary::-webkit-details-marker { display: none; }
.moi summary:hover { background: rgba(255,255,255,.12); }
.moi-nom { font-weight: 700; font-size: .9rem; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.moi-role { font-size: .74rem; background: rgba(255,255,255,.18); padding: 2px 8px; border-radius: 999px; }
.moi-menu { position: absolute; right: 0; top: calc(100% + 6px); background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); padding: 8px; display: flex; flex-direction: column; min-width: 200px; z-index: 90; }
.moi-menu a { display: flex; align-items: center; min-height: 44px; padding: 8px 12px; border-radius: 8px; color: var(--blue-700); text-decoration: none; font-weight: 700; }
.moi-menu a:hover { background: var(--blue-050); }
.moi-menu .btn { justify-content: flex-start; }

/* ---------- bandeaux ---------- */
.bandeau { border-radius: 10px; padding: 11px 14px; font-size: .9rem; line-height: 1.5; margin-bottom: 14px; border: 1px solid transparent; overflow-wrap: anywhere; }
.bandeau a { color: inherit; font-weight: 700; }
.bandeau-info { background: var(--blue-050); border-color: #c7d9f3; color: var(--blue-800); }
.bandeau-succes { background: var(--green-050); border-color: #bfe3c6; color: #1f6b2b; }
.bandeau-alerte { background: var(--amber-050); border-color: #e8c98a; color: #6b4500; }
.bandeau-erreur { background: var(--red-050); border-color: #efc3bd; color: #8a1f14; }
.bandeau-essai { background: #fff1cf; border-color: #e8b54a; color: #4d3200; }
.bandeau-reel { background: #e7edf6; border-color: #b9c6dc; color: var(--blue-900); }
.bandeau-dev { background: #eef1f6; border-color: #c3ccd9; border-style: dashed; color: var(--ink-soft); }
.cpt-bandeaux .bandeau, #bandeau-erreur .bandeau { border-radius: 0; margin: 0; border-width: 0 0 1px; padding: 9px 16px; text-align: center; }
.cpt-bandeaux .bandeau-essai { border-bottom-width: 3px; }

/* ---------- corps : menu et contenu ---------- */
.cpt-corps { display: flex; flex: 1; width: 100%; max-width: 1320px; margin: 0 auto; align-items: flex-start; }
.cpt-corps main { flex: 1 1 auto; min-width: 0; max-width: 1060px; margin: 0 auto; padding: 24px 20px 60px; }
main:focus { outline: none; }
/* titre de l'écran : focus donné par le programme seulement (lecteurs d'écran) ; Safari sur iPhone le montrait
   comme un champ encadré de bleu après chaque navigation */
.cpt-titre:focus, .cpt-titre:focus-visible { outline: none; }

.cpt-menu { width: var(--cpt-menu-l); flex-shrink: 0; position: sticky; top: 0; max-height: 100vh; overflow-y: auto; padding: 16px 10px 24px; background: #fff; border-right: 1px solid var(--line); align-self: stretch; }
.cpt-menu ul { list-style: none; }
.cpt-menu a { display: flex; align-items: center; min-height: 44px; padding: 8px 12px; border-radius: 8px; color: var(--ink); text-decoration: none; font-size: .92rem; font-weight: 600; }
.cpt-menu a:hover { background: var(--blue-050); color: var(--blue-700); }
.cpt-menu a[aria-current="page"] { background: var(--blue-050); color: var(--blue-700); font-weight: 800; box-shadow: inset 3px 0 0 var(--blue-600); }
.menu-groupe { margin-bottom: 10px; }
.menu-titre { font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); padding: 8px 12px 4px; }
.menu-prep { margin: 10px 0; border-top: 1px solid var(--line); padding-top: 8px; }
.menu-prep summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; padding: 0 12px; font-size: .82rem; font-weight: 700; color: var(--ink-soft); }
.menu-prep a { color: var(--ink-soft); font-weight: 500; }
.menu-tete { display: none; }
.menu-pied { border-top: 1px solid var(--line); margin-top: 12px; padding: 12px; }
.menu-moi { font-weight: 700; font-size: .9rem; margin-bottom: 10px; overflow-wrap: anywhere; }
.menu-moi span { font-weight: 500; color: var(--ink-soft); font-size: .82rem; }
.cpt-voile { display: none; }

body.sans-menu .cpt-menu, body.sans-menu .cpt-voile, body.sans-menu .cpt-menu-btn { display: none; }
@media (min-width: 1024px) {
  .cpt-menu-btn { display: none; }
  .menu-pied { display: none; }
}
@media (max-width: 1023px) {
  .cpt-barre-moi { display: none; }
  .cpt-menu { position: fixed; top: 0; left: 0; bottom: 0; width: min(300px, 86vw); max-height: none; z-index: 120; transform: translateX(-105%); transition: transform .2s ease; box-shadow: 0 0 40px rgba(6,18,37,.3); visibility: hidden; }
  body.menu-ouvert .cpt-menu { transform: none; visibility: visible; }
  body.menu-ouvert .cpt-voile { display: block; position: fixed; inset: 0; background: rgba(6,18,37,.45); z-index: 110; }
  .menu-tete { display: flex; align-items: center; justify-content: space-between; padding: 0 4px 10px 12px; font-weight: 800; }
}

/* ---------- pages simples (connexion, invitation) ---------- */
.cpt-simple { max-width: 520px; margin: 8px auto 0; }
.cpt-simple .card { padding: 24px; }
.chargement, .vide { color: var(--ink-soft); padding: 18px 0; }
.cpt-noscript { padding: 16px; text-align: center; }

/* ---------- boutons et formulaires ---------- */
body.compta .btn { min-height: 44px; }
.btn-danger-plein { background: var(--red-600); color: #fff; }
.btn-danger-plein:hover { filter: brightness(1.08); }
.btn[aria-busy="true"] { cursor: progress; }
.btn-large { width: 100%; }
.mdp-ligne { display: flex; gap: 8px; align-items: stretch; }
.mdp-ligne input { flex: 1 1 auto; min-width: 0; }
.mdp-voir { flex-shrink: 0; }
.champ-erreur { color: var(--red-600); font-size: .85rem; font-weight: 600; margin-top: 6px; }
input[aria-invalid="true"], select[aria-invalid="true"] { border-color: var(--red-600); }
.form-erreur { background: var(--red-050); border: 1px solid #efc3bd; color: #8a1f14; border-radius: 10px; padding: 10px 14px; font-size: .9rem; font-weight: 600; margin: 4px 0 12px; }
.form-erreur:focus { outline: 2px solid var(--red-600); outline-offset: 2px; }
.case { display: flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 600; cursor: pointer; }
.case input[type=checkbox] { width: 22px; height: 22px; flex-shrink: 0; accent-color: var(--blue-700); }
.code-saisie { font-size: 1.4rem; letter-spacing: .25em; font-variant-numeric: tabular-nums; }
.lien-btn { background: none; border: none; color: var(--blue-700); font-weight: 700; text-decoration: underline; cursor: pointer; min-height: 44px; padding: 0 4px; font-size: .92rem; }
.regles { list-style: none; margin: 4px 0 12px; display: flex; flex-direction: column; gap: 4px; font-size: .86rem; }
.regles li::before { content: "\2022"; display: inline-block; width: 1.4em; color: var(--ink-soft); font-weight: 800; }
.regles li.ok { color: var(--green-600); }
.regles li.ok::before { content: "\2713"; color: var(--green-600); }
@media (max-width: 640px), (pointer: coarse) {
  input[type=text], input[type=email], input[type=password], input[type=number], input[type=date], input[type=search], input[type=tel], select, textarea { font-size: 16px; }
}
/* champs de date dans Safari sur iPhone : la largeur minimale du contrôle d'iOS débordait de la carte, et un champ vide
   était plus haut que les autres ; même boîte que les champs de texte */
@supports (-webkit-touch-callout: none) {
  input[type=date] { -webkit-appearance: none; appearance: none; display: block; width: 100%; min-width: 0; max-width: 100%; min-height: 44px; text-align: left; }
  input[type=date]::-webkit-date-and-time-value { text-align: left; }
}

/* ---------- bulles « ? » ---------- */
/* dans un libellé de case à cocher : touchable sur 44 px (le clic ne coche pas la case : app.js) */
.case .tip::before { content: ""; position: absolute; left: -14px; right: -14px; top: -14px; bottom: -14px; }
/* près d'un bord de l'écran, la bulle s'aligne sur ce bord au lieu de se centrer (classes posées par app.js) */
.tip.tip-gauche::after { left: -8px; transform: none; }
.tip.tip-droite::after { left: auto; right: -8px; transform: none; }

/* ---------- sections dépliables : flèche visible (display: flex retire le marqueur du navigateur) ---------- */
.co-details > summary, .sa-historique > summary, .menu-prep > summary, .cx-aide > summary { list-style: none; }
.co-details > summary::-webkit-details-marker, .sa-historique > summary::-webkit-details-marker,
.menu-prep > summary::-webkit-details-marker, .cx-aide > summary::-webkit-details-marker { display: none; }
.co-details > summary::before, .sa-historique > summary::before, .menu-prep > summary::before, .cx-aide > summary::before {
  content: "\25B8"; display: inline-block; flex-shrink: 0; width: 1em; margin-right: 6px; transition: transform .15s;
}
.co-details[open] > summary::before, .sa-historique[open] > summary::before, .menu-prep[open] > summary::before,
.cx-aide[open] > summary::before { transform: rotate(90deg); }

/* ---------- montants ---------- */
.montant, .num { font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }

/* ---------- tableaux (cartes empilées sous 820 px) ---------- */
.ct-cadre { width: 100%; }
.ct { width: 100%; border-collapse: collapse; font-size: .9rem; }
.ct caption { text-align: left; font-weight: 700; padding: 0 0 8px; }
/* break-word (et non anywhere) : les colonnes gardent la largeur de leurs mots ; les très longues valeurs passent
   quand même à la ligne */
.ct th, .ct td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--line); vertical-align: top; overflow-wrap: break-word; }
.ct th { color: var(--ink-soft); font-size: .76rem; text-transform: uppercase; letter-spacing: .04em; }
.ct th.num, .ct td.num { text-align: right; overflow-wrap: normal; }
.ct td.actions .btn-row { margin-top: 0; }
.ct-v { display: block; min-width: 0; }
@media (max-width: 819px) {
  .ct thead { display: block; position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .ct, .ct tbody, .ct tr, .ct td { display: block; width: 100%; }
  .ct tr { border: 1px solid var(--line); border-radius: 12px; background: #fff; padding: 6px 14px; margin-bottom: 10px; }
  .ct td { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; border-bottom: 1px solid #eef1f6; padding: 8px 0; text-align: right; overflow-wrap: anywhere; }
  .ct td:last-child { border-bottom: none; }
  .ct caption:not(.sr) { display: block; }
  .ct td::before { content: attr(data-label); flex: 0 0 auto; max-width: 45%; text-align: left; font-size: .78rem; font-weight: 700; color: var(--ink-soft); }
  .ct td > .ct-v { flex: 1 1 auto; text-align: right; }
  .ct td.actions > .ct-v { text-align: left; }
  .ct td.num { justify-content: space-between; }
  .ct td.actions { display: block; text-align: left; }
  .ct td.actions::before { display: block; max-width: none; margin-bottom: 6px; }
}

/* ---------- fenêtres ---------- */
/* margin: auto : la règle « * { margin: 0 } » de /css/style.css collait chaque fenêtre en haut à gauche sur ordinateur */
dialog.dlg { border: none; border-radius: 16px; padding: 0; margin: auto; width: calc(100% - 32px); max-width: 560px; max-height: calc(100% - 32px); box-shadow: 0 20px 60px rgba(6,18,37,.35); color: var(--ink); overflow-y: auto; }
dialog.dlg::backdrop { background: rgba(6,18,37,.55); }
/* fenêtres larges (formulaires de l'équipe, du plan comptable, des tiers, des modèles, de la société) : règle commune */
dialog.dlg.dlg-large { max-width: 880px; }
.dlg-corps { padding: 22px; }
.dlg-titre { font-size: 1.15rem; margin-bottom: 12px; padding-right: 8px; }
.dlg-contenu p { margin-bottom: 10px; line-height: 1.5; }
.dlg-boutons { justify-content: flex-end; }
.dlg-form .field:last-of-type { margin-bottom: 8px; }
.rapport { margin: 8px 0 14px 20px; line-height: 1.55; }
.rapport li { margin-bottom: 4px; }
.lien-copie { display: flex; gap: 8px; flex-wrap: wrap; }
.lien-copie input { flex: 1 1 200px; min-width: 0; font-family: ui-monospace, Menlo, monospace; font-size: .85rem; }
/* résultat d'une copie, écrit à côté du bouton (ui.copier) */
.copie-etat { display: inline-block; margin-left: 8px; font-size: .86rem; font-weight: 700; color: var(--green-600); }
.copie-etat:empty { display: none; }
.lien-copie .copie-etat, .btn-row .copie-etat { flex-basis: 100%; margin-left: 0; }
@media (max-width: 640px) {
  dialog.dlg { width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; border-radius: 0; }
  .dlg-corps { padding: 18px 16px 28px; }
  .dlg-boutons { flex-direction: column-reverse; }
  .dlg-boutons .btn { width: 100%; }
}

/* ---------- second facteur : QR code et codes de secours ---------- */
.qr-bloc { display: flex; gap: 18px; flex-wrap: wrap; align-items: flex-start; margin: 6px 0 12px; }
.qr { width: 220px; height: 220px; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 8px; flex-shrink: 0; }
.qr-texte { flex: 1 1 220px; min-width: 0; font-size: .92rem; line-height: 1.5; }
.qr-texte p { margin-bottom: 8px; }
/* clé à recopier à la main : retour à la ligne entre les groupes de 4 caractères seulement (jamais au milieu d'un groupe) */
.cle-manuelle code { display: inline-block; font-size: 1.02rem; letter-spacing: .06em; padding: 6px 10px; background: var(--blue-050); border-radius: 8px; overflow-wrap: normal; word-break: normal; white-space: normal; color: var(--blue-900); }
.codes-secours { border: 1.5px dashed var(--blue-400); border-radius: 12px; padding: 14px 16px; background: #fff; margin: 10px 0; }
.cs-titre { font-weight: 800; margin-bottom: 8px; }
.cs-liste { list-style: decimal inside; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px 18px; margin-bottom: 10px; }
.cs-liste code { font-family: ui-monospace, Menlo, monospace; font-size: 1rem; letter-spacing: .04em; color: var(--blue-900); }
.cs-actions { margin-top: 6px; margin-bottom: 8px; }
.etapes { list-style: none; display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 18px; counter-reset: etape; }
.etapes li { counter-increment: etape; font-size: .78rem; font-weight: 700; padding: 6px 12px; border-radius: 999px; background: #e8edf5; color: var(--ink-soft); }
.etapes li::before { content: counter(etape) ". "; }
.etapes li.on { background: var(--blue-600); color: #fff; }
.etapes li.fait { background: var(--green-050); color: var(--green-600); }
.etapes li.fait::after { content: " \2713"; }

/* ---------- pages internes ---------- */
.prep-titre { font-size: 1.02rem; margin-bottom: 6px; }
.kv { display: grid; grid-template-columns: minmax(120px, max-content) 1fr; gap: 6px 16px; font-size: .92rem; }
.kv dt { color: var(--ink-soft); font-weight: 700; }
.kv dd { overflow-wrap: anywhere; }
@media (max-width: 480px) { .kv { grid-template-columns: 1fr; gap: 2px; } .kv dd { margin-bottom: 8px; } }

/* ---------- petits écrans ---------- */
@media (max-width: 640px) {
  .cpt-barre { padding: 8px 12px; }
  .cpt-barre-l1 { width: 100%; gap: 8px; }
  .cpt-barre .brand-icon { height: 30px; width: 30px; }
  .cpt-barre .brand-name { font-size: 1.05rem; }
  .cpt-corps main { padding: 16px 16px 48px; }
  .cpt-simple .card { padding: 18px 16px; }
  .cpt-bandeaux .bandeau { text-align: left; }
  .qr { width: 200px; height: 200px; }
}

/* ---------- impression des codes de secours ---------- */
@media print {
  body.impression-codes * { visibility: hidden; }
  body.impression-codes .a-imprimer, body.impression-codes .a-imprimer * { visibility: visible; }
  body.impression-codes .a-imprimer { position: absolute; left: 0; top: 0; width: 100%; border: 1px solid #000; }
}

@media (prefers-reduced-motion: reduce) {
  .cpt-menu { transition: none; }
  .co-details > summary::before, .sa-historique > summary::before, .menu-prep > summary::before, .cx-aide > summary::before { transition: none; }
}