:root {
  --fond: #f4f5f7; --surface: #ffffff; --texte: #1f2328; --discret: #5b6470; --ligne: #d8dce2;
  --accent: #1d4fd7; --accent-fonce: #1640b0; --accent-pale: #e8eefc; --alerte: #b42318; --alerte-pale: #fdecea;
  --ok: #1a7f4b; --ok-pale: #e5f5ec; --avert-pale: #fff4d6;
  --r: 8px; --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--texte); background: var(--fond); }
[hidden] { display: none !important; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

.connexion { min-height: 100%; display: grid; place-items: center; padding: var(--s4); }
.carte { width: min(380px, 100%); background: var(--surface); border: 1px solid var(--ligne); border-radius: var(--r); padding: var(--s5); display: grid; gap: var(--s3); }
.carte h1 { margin: 0 0 var(--s2); font-size: 1.25rem; }
label { font-weight: 600; font-size: .9rem; }
input[type=password], input[type=text], input[type=date], input[type=time], select, textarea {
  width: 100%; padding: 10px 12px; background: var(--surface); border: 1px solid #aeb5bf; border-radius: var(--r);
}
textarea { min-height: 44px; resize: vertical; }

#app { height: 100%; display: flex; flex-direction: column; }
.barre { display: flex; align-items: center; gap: var(--s4); padding: var(--s3) var(--s4); background: var(--surface); border-bottom: 1px solid var(--ligne); }
.espace { flex: 1; }
.discret { color: var(--discret); font-size: .9rem; }
.pastille-demo { background: var(--avert-pale); border: 1px solid #e6c765; border-radius: 999px; padding: 2px 10px; font-size: .85rem; }
.bandeau { margin: 0; padding: var(--s3) var(--s4); background: var(--avert-pale); border-bottom: 1px solid #e6c765; }

.panes { flex: 1; min-height: 0; display: grid; grid-template-columns: 260px 1fr; }
.panes.avec-script { grid-template-columns: 260px minmax(0, 1fr) 370px; }
.liste { overflow: auto; background: var(--surface); border-right: 1px solid var(--ligne); }
.liste ul { list-style: none; margin: 0; padding: 0; }
.liste li + li { border-top: 1px solid var(--ligne); }
.item { width: 100%; text-align: left; background: none; border: 0; border-left: 4px solid transparent; padding: var(--s3) var(--s4); cursor: pointer; display: grid; gap: 2px; }
.item:hover { background: #f0f3f9; }
.item[aria-current=true] { background: var(--accent-pale); border-left-color: var(--accent); }
.item strong { font-weight: 600; }
.item .meta { color: var(--discret); font-size: .875rem; display: flex; gap: var(--s2); flex-wrap: wrap; align-items: center; }
.puce { display: inline-block; padding: 0 8px; border-radius: 999px; font-size: .75rem; font-weight: 600; background: #eceff3; color: #3b434e; }
.puce.rappel { background: var(--avert-pale); color: #7a5b00; }
.puce.clic { background: var(--ok-pale); color: var(--ok); }
.vide { padding: var(--s5) var(--s4); color: var(--discret); }

.fiche { overflow: auto; padding: var(--s4); }
.fiche:focus { outline: none; }
.fiche-in { max-width: 860px; margin: 0 auto; display: grid; gap: var(--s3); }
.fiche h2 { margin: 0; font-size: 1.5rem; line-height: 1.2; }
.sous-titre { color: var(--discret); margin: var(--s1) 0 0; }
.entete { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s4); flex-wrap: wrap; }
.tel { display: inline-block; font-size: 1.6rem; font-weight: 700; color: var(--accent); text-decoration: none; letter-spacing: .02em; padding: var(--s1) 0; }
.tel:hover { text-decoration: underline; }
.panneau { background: var(--surface); border: 1px solid var(--ligne); border-radius: var(--r); padding: var(--s3) var(--s4); }
.panneau h3 { margin: 0 0 var(--s2); font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--discret); }
.panneau p { margin: 0; }
.faits { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: var(--s2) var(--s3); margin: var(--s2) 0 0; }
.faits dt { font-size: .8rem; color: var(--discret); }
.faits dd { margin: 0; font-weight: 600; }
.rangee { display: flex; gap: var(--s3); flex-wrap: wrap; }
.btn { display: inline-flex; align-items: center; justify-content: center; padding: 10px 16px; border-radius: var(--r); border: 1px solid #aeb5bf; background: var(--surface); text-decoration: none; color: var(--texte); cursor: pointer; font-weight: 600; min-height: 44px; }
.btn:hover { background: #f0f3f9; }
.primaire { background: var(--accent); border-color: var(--accent); color: #fff; padding: 10px 18px; border-radius: var(--r); font-weight: 600; cursor: pointer; min-height: 44px; }
.primaire:hover { background: var(--accent-fonce); }
.primaire:disabled { opacity: .55; cursor: default; }
.primaire.danger { background: var(--alerte); border-color: var(--alerte); }
.lien { background: none; border: 0; color: var(--accent); text-decoration: underline; cursor: pointer; padding: var(--s1); }
.erreur { color: var(--alerte); margin: 0; }

details { border-top: 1px solid var(--ligne); }
details:first-of-type { border-top: 0; }
summary { cursor: pointer; padding: var(--s2) 0; font-weight: 600; }
.corps-script { padding: 0 0 var(--s3); display: grid; gap: var(--s2); }
.corps-script p, .corps-script ul { margin: 0; }
.corps-script ul { padding-left: 1.2em; }
mark { background: var(--accent-pale); color: inherit; padding: 0 3px; border-radius: 3px; }
.groupe-script > h4 { margin: var(--s3) 0 var(--s1); font-size: 1rem; }

fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
legend { font-weight: 700; padding: 0; margin-bottom: var(--s2); font-size: 1.05rem; }
.statuts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s2); margin-top: var(--s2); }
.statut-btn { display: flex; align-items: center; padding: 6px 10px; min-height: 42px; font-size: .92rem; border: 1px solid #aeb5bf; border-radius: var(--r); background: var(--surface); font-weight: 600; cursor: pointer; text-align: left; }
.statut-btn:hover { background: #f0f3f9; }
.statut-btn[aria-pressed=true] { background: var(--accent-pale); border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.statut-btn.danger[aria-pressed=true] { background: var(--alerte-pale); border-color: var(--alerte); box-shadow: inset 0 0 0 1px var(--alerte); }
.choix { margin-top: var(--s3); padding: var(--s3); background: var(--fond); border: 1px solid var(--ligne); border-radius: var(--r); display: grid; gap: var(--s3); }
.etiquette { display: block; margin-bottom: var(--s1); }
.btn.danger { background: var(--alerte); border-color: var(--alerte); color: #fff; }
.champs { display: grid; gap: var(--s3); margin-top: var(--s3); }
.deux { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
.aide { color: var(--discret); font-size: .9rem; margin: 0; }
.alerte-stop { background: var(--alerte-pale); border: 1px solid #f0b4ad; border-radius: var(--r); padding: var(--s3); margin: 0; }

.toast { display: flex; align-items: center; gap: var(--s4); position: fixed; left: 50%; bottom: var(--s5); transform: translateX(-50%); background: #1f2328; color: #fff; padding: 10px 18px; border-radius: var(--r); opacity: 0; pointer-events: none; transition: opacity .15s; max-width: 90vw; }
.toast.visible { opacity: 1; pointer-events: auto; }
.toast-annuler { background: none; border: 1px solid #fff; color: #fff; border-radius: var(--r); padding: 4px 12px; cursor: pointer; font-weight: 600; }
.toast.erreur-toast { background: var(--alerte); }

@media (max-width: 860px) {
  .panes, .panes.avec-script { grid-template-columns: 1fr; grid-template-rows: auto 1fr auto; }
  .statuts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .liste { max-height: 36vh; border-right: 0; border-bottom: 1px solid var(--ligne); }
  .fiche { padding: var(--s4); }
  .deux { grid-template-columns: 1fr; }
  .barre { flex-wrap: wrap; gap: var(--s2) var(--s4); }
}
@media (prefers-reduced-motion: reduce) { .toast { transition: none; } }

.btn.compact { min-height: 36px; padding: 6px 12px; font-size: .9rem; }
.ligne-titre { display: flex; justify-content: space-between; align-items: center; gap: var(--s3); flex-wrap: wrap; margin-bottom: var(--s1); }
.ligne-titre h3 { margin: 0; }
.liens { gap: var(--s2); }
.panneau h3 { margin-bottom: var(--s1); }

.script { overflow: auto; background: var(--surface); border-left: 1px solid var(--ligne); display: flex; flex-direction: column; }
.script-aide { padding: var(--s4); }
.onglets { display: flex; gap: 2px; padding: var(--s2) var(--s3) 0; border-bottom: 1px solid var(--ligne); position: sticky; top: 0; background: var(--surface); z-index: 1; }
.onglet { background: none; border: 0; border-bottom: 3px solid transparent; padding: 10px 12px; font-weight: 600; cursor: pointer; color: var(--discret); min-height: 44px; }
.onglet[aria-selected=true] { color: var(--accent); border-bottom-color: var(--accent); }
.script-corps { padding: var(--s3) var(--s4) var(--s5); display: grid; gap: var(--s3); align-content: start; }
.etape h4 { margin: 0 0 var(--s1); font-size: .95rem; }
.etape + .etape { border-top: 1px solid var(--ligne); padding-top: var(--s3); }
.objections details { border-top: 1px solid var(--ligne); }
.objections details:first-child { border-top: 0; }
.objections summary { font-weight: 600; font-size: .95rem; }
.script .corps-script { font-size: .95rem; }

@media (max-width: 1100px) {
  .panes.avec-script { grid-template-columns: 240px minmax(0, 1fr); grid-template-rows: 1fr auto; }
  .panes.avec-script .script { grid-column: 1 / -1; max-height: 40vh; border-left: 0; border-top: 1px solid var(--ligne); }
}

.pastilles { display: inline-flex; gap: var(--s1); flex-wrap: wrap; }
.puce.rappel { background: var(--avert-pale); color: #7a5b00; }

/* ---- navigation entre les vues, relevé, page de suivi ---- */
.sr-seul { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.vues { display: flex; gap: 2px; }
.vue-btn { background: none; border: 0; border-bottom: 3px solid transparent; padding: 8px 12px; font-weight: 600; cursor: pointer; color: var(--discret); min-height: 44px; }
.vue-btn[aria-current=page] { color: var(--accent); border-bottom-color: var(--accent); }
.remuneration { flex: 1; min-height: 0; overflow: auto; padding: var(--s4); }
.fiche-large { max-width: 980px; }
.puce.ok { background: var(--ok-pale); color: var(--ok); }
.puce.avert { background: var(--avert-pale); color: #7a5b00; }
.primaire-doux { background: var(--ok-pale); border-color: var(--ok); color: var(--ok); }
.primaire-doux:hover { background: #d3eddf; }
.separe { padding-top: var(--s2); border-top: 1px solid var(--ligne); }
.btn-arret { border-color: var(--alerte); color: var(--alerte); }
.btn-arret:hover { background: var(--alerte-pale); }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

.releve { display: grid; gap: var(--s3); }
.synthese { display: grid; gap: var(--s2); }
.chiffres { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s3); margin: 0; }
.chiffres > div { display: grid; gap: 2px; align-content: start; padding-right: var(--s3); border-right: 1px solid var(--ligne); }
.chiffres > div:last-child { border-right: 0; padding-right: 0; }
.chiffres dt { font-size: .8rem; color: var(--discret); text-transform: uppercase; letter-spacing: .05em; }
.chiffres dd { margin: 0; }
.chiffres .gros { font-size: 1.5rem; font-weight: 700; line-height: 1.2; }
.chiffres .detail { font-size: .85rem; color: var(--discret); }
.chiffres .total .gros { color: var(--accent); }
.ligne-stats { margin: 0; font-size: .9rem; }
.bandeau-a-valider { margin: 0; padding: var(--s2) var(--s3); background: var(--avert-pale); border: 1px solid #e6c765; border-radius: var(--r); }
.releve .onglets { position: static; padding: 0; }
.onglet-corps { display: grid; gap: var(--s3); align-content: start; }
.tableau-cadre { background: var(--surface); border: 1px solid var(--ligne); border-radius: var(--r); overflow-x: auto; }
.tableau { width: 100%; border-collapse: collapse; font-size: .95rem; }
.tableau th, .tableau td { padding: 10px var(--s3); text-align: left; vertical-align: middle; border-top: 1px solid var(--ligne); }
.tableau thead th { border-top: 0; background: #f7f8fa; font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; color: var(--discret); }
.tableau tbody th { font-weight: 600; }
.tableau .num { text-align: right; font-variant-numeric: tabular-nums; }
.tableau thead th { white-space: nowrap; }
.tableau thead th.num { text-align: right; }
.tableau .total-ligne th, .tableau .total-ligne td { font-weight: 700; background: #f7f8fa; }
.meta-ligne { display: block; color: var(--discret); font-size: .85rem; font-weight: 400; }
.vide-ligne { color: var(--discret); padding: var(--s5) var(--s4); text-align: center; }
.actions { display: flex; gap: var(--s2); align-items: center; flex-wrap: wrap; }
.champ-heures { width: 90px; padding: 6px 8px; border: 1px solid #aeb5bf; border-radius: var(--r); text-align: right; }
.tableau .champ-date, .ajout .champ-date { width: auto; padding: 6px 8px; border: 1px solid #aeb5bf; border-radius: var(--r); }
input[type=number] { padding: 10px 12px; border: 1px solid #aeb5bf; border-radius: var(--r); background: var(--surface); }
.ajout { align-items: flex-end; padding: var(--s3); background: var(--surface); border: 1px solid var(--ligne); border-radius: var(--r); }
.ajout > div { display: grid; gap: var(--s1); }
.ajout .grand { flex: 1 1 260px; }
.ajout label { font-size: .85rem; }

.admin-entete { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--s4); flex-wrap: wrap; padding: var(--s4); background: var(--surface); border-bottom: 1px solid var(--ligne); }
.admin-entete h1 { margin: 0; font-size: 1.4rem; line-height: 1.2; }
.admin-entete p { margin: var(--s1) 0 0; }
.outils { align-items: center; }
.outils select { width: auto; min-width: 170px; }
.split { flex: 1; min-height: 0; display: grid; grid-template-columns: 300px minmax(0, 1fr); }
.item-setteuse { grid-template-columns: 36px 1fr auto; align-items: center; gap: var(--s3); }
.avatar { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-pale); color: var(--accent); font-weight: 700; }
.corps-item { display: grid; gap: 2px; min-width: 0; }
.corps-item strong { display: flex; gap: var(--s2); align-items: center; }
.montant { font-weight: 700; font-variant-numeric: tabular-nums; }
.retour { display: none; justify-self: start; }
.reglages { background: var(--surface); border: 1px solid var(--ligne); border-radius: var(--r); padding: 0 var(--s4); }
.reglages summary { padding: var(--s3) 0; }
.champs-reglages { display: grid; gap: var(--s3); padding-bottom: var(--s4); }
.lien-danger { color: var(--alerte); justify-self: start; padding-left: 0; }
.formulaire-etroit { max-width: 640px; }
.formulaire-etroit .champs > div { display: grid; gap: var(--s1); }
.acces { border-color: var(--ok); background: var(--ok-pale); }

@media (max-width: 1100px) { .chiffres { grid-template-columns: repeat(2, minmax(0, 1fr)); } .chiffres > div { border-right: 0; } }
@media (max-width: 860px) {
  .split { grid-template-columns: 1fr; }
  .split .fiche { display: none; }
  .split.detail-ouvert .liste { display: none; }
  .split.detail-ouvert .fiche { display: block; }
  .split .liste { max-height: none; border-bottom: 0; }
  .retour { display: inline-block; }
  .vues { order: 5; width: 100%; }
}

.indice-demo { background: var(--avert-pale); border: 1px solid #e6c765; border-radius: var(--r); padding: var(--s2) var(--s3); color: var(--texte); }