/* Elevora CRM — releves.css
   Les relevés de commissions des agents (25/09/2026, js/58-releves-agents.js) : la fiche d'un
   agent (Administration → Agents commerciaux → son nom), « Mes relevés » dans l'espace d'un agent,
   et les pastilles d'état. Aucune couleur nouvelle : uniquement les jetons de css/elevora.css,
   déjà vérifiés à 4,5:1 dans les deux thèmes. Chaque pastille porte son texte : l'état ne passe
   jamais par la couleur seule. Tout tient dans 320 px : les tableaux défilent dans leur cadre
   (.adm-table-wrap), jamais la page — sauf les lignes d'un relevé et la liste des relevés, qui
   passent en fiches sous 640 px (table.rel-fiches-mobile, 30/09/2026). */

/* « Mes relevés » (espace de l'agent) est FERMÉ depuis le 29/09/2026 : le brief exclut tout suivi de
   commission consultable par l'agent, qui reçoit son relevé par e-mail et en copie dans ses
   documents. À soumettre à Célian — réversible : retirer cette règle ET passer
   RELEVES_VISIBLES_PAR_AGENT à true (inc/releves-agents.php). L'équipe, elle, n'a jamais eu cette entrée. */
#nav-releves{display:none!important}

/* ── Pastilles d'état : figé → validé → envoyé → payé ; émis et facture reçue (relevés d'avant),
      clos sans envoi, annulé ─────────────────────────────────────────────────────────────── */
.rel-pastille{display:inline-block;font-size:11.5px;font-weight:600;padding:1px 8px;border-radius:10px;white-space:nowrap;line-height:1.6}
.rel-fige{background:var(--violet-bg);color:var(--violet)}
.rel-valide{background:var(--blue-bg);color:var(--blue)}
.rel-reporte{background:var(--bg4);color:var(--text2)}
.rel-emis{background:var(--bg4);color:var(--text2)}
.rel-envoye{background:var(--blue-bg);color:var(--blue)}
.rel-facture_recue{background:var(--amber-bg);color:var(--amber)}
.rel-paye{background:var(--green-bg);color:var(--green)}
.rel-annule{background:var(--red-bg);color:var(--red)}
.rel-etats{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}
/* Une ligne annulée reste lisible, en retrait ; la pastille « Annulé » dit ce qu'elle est. */
tr.rel-ligne-annulee td,tr.rel-ligne-annulee th{color:var(--text3)}

/* ── La fiche de l'agent ──────────────────────────────────────────────────────────────── */
.rel-ariane ol{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin:0 0 10px;padding:0;font-size:12.5px;color:var(--text3)}
.rel-ariane li+li::before{content:'›';margin-right:8px;color:var(--text3)}
.rel-ariane .pr-lien{margin-top:0;font-size:12.5px}
.rel-ariane [aria-current]{color:var(--text2);font-weight:600}
#agt-fiche-titre:focus{outline:none}
#agt-fiche-titre:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:var(--rs)}

/* ── [P2] 02/10/2026 (brief v9, point 4) : la fiche s'ouvre sur l'essentiel ──────────────────────
   Quatre chiffres : taux en vigueur, commission du mois, à verser, prospects apportés ([LJ] 03/10/2026 :
   au style B des bandeaux, plus « posés dans la page, séparés d'un filet »). Puis des sections à titres unifiés (un seul style pour
   .cdc-t, un seul pour .ea-h4, d'un bout à l'autre de la fiche) ; le secondaire se replie
   (.agf-pli, sans animation). */
.agf .agf-sous{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:2px 4px;font-size:13px;color:var(--text2)}
.agf-essentiel{margin:6px 0 26px}
/* [LJ] 03/10/2026 — choix délégué par Célian (plan de reprise §7, point 14) : les quatre chiffres prennent
   le style B des bandeaux (.chiffres / .chiffre / .chiffre-l / .chiffre-v / .chiffre-s, css/elevora.css) :
   plateau teinté, cases au fond de carte, bordées. Ici seulement : quatre cases par rangée au bureau, deux
   sur un téléphone, une sous 330 px ; un montant long passe à la ligne plutôt que de déborder. */
.agf-chiffres.chiffres{grid-template-columns:repeat(4,minmax(0,1fr))}
.agf-chiffre .agf-v{white-space:normal;overflow-wrap:anywhere}
/* Les titres : h3 pour une section, h4 pour une partie de section — la même hiérarchie partout. */
.agf .rel-bloc{margin:0 0 34px}
.agf .cdc-t{margin:0 0 12px;font:600 16.5px/1.3 var(--font-display);color:var(--text)}
.agf .ea-h4{margin:24px 0 10px;font:600 14px/1.35 var(--font);color:var(--text)}
.agf-titre{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:4px;margin:0 0 10px}
.agf .agf-titre .cdc-t{margin:0}
/* Les plis : un chevron et le nombre d'éléments ; ouverts ou fermés sans mouvement. */
.agf .agf-pli{margin:14px 0 0}
.agf .agf-pli>summary{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;min-height:36px;padding:2px 0;cursor:pointer;list-style:none;font:600 13.5px var(--font);color:var(--text)}
.agf .agf-pli>summary::-webkit-details-marker{display:none}
.agf .agf-pli>summary::before{content:'';flex:0 0 auto;width:7px;height:7px;margin:0 2px 2px 2px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg)}
.agf .agf-pli[open]>summary::before{transform:rotate(45deg);margin-bottom:5px}
.agf .agf-pli>summary:hover{color:var(--accent)}
.agf .agf-pli>summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--rs)}
.agf .agf-pli>summary :is(h3,h4){margin:0}
.agf .agf-pli>summary .ea-h4{font:600 14px/1.35 var(--font)}
.agf .agf-pli>summary h3{font:600 16.5px/1.3 var(--font-display)}
.agf .agf-pli-n{font-weight:400;font-size:12.5px;color:var(--text3)}
.agf .agf-pli[open]>summary{margin-bottom:10px}
.agf .agf-pli-docs{margin-top:22px}
@media (max-width:760px){
  .agf-chiffres.chiffres{grid-template-columns:repeat(2,minmax(0,1fr))}   /* [LJ] 03/10/2026 : style B */
}
.rel-resume{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px 18px;margin:0 0 16px;padding:12px 14px;background:var(--bg2);border:1px solid var(--border);border-radius:var(--r)}
.rel-resume div{min-width:0}
.rel-resume dt{font-size:11px;font-weight:600;color:var(--text3);text-transform:uppercase;letter-spacing:.05em}
.rel-resume dd{margin:2px 0 0;font-size:13px;color:var(--text);overflow-wrap:anywhere}
.rel-bloc{margin:0 0 22px}
.rel-periode{border:1px solid var(--border);border-radius:var(--r);padding:10px 14px 14px;margin:0 0 4px;min-width:0}
.rel-periode legend{font:600 12.5px var(--font);color:var(--text);padding:0 4px}
.rel-types{display:flex;flex-wrap:wrap;gap:0 18px;margin-bottom:10px}
.rel-types .pr-case{margin-top:6px;min-height:24px}
#rel-periode-champs .ag-champ{max-width:340px}
.rel-dates{display:flex;flex-wrap:wrap;gap:10px 14px}
.rel-dates .ag-champ{flex:1 1 150px;max-width:240px}
.rel-apercu{margin-top:12px;padding:12px 14px;border:1px dashed var(--border2);border-radius:var(--r)}
.rel-apercu .pr-chiffres{margin:10px 0 4px}
#rel-apercu-h:focus{outline:none}
#rel-apercu-h:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:var(--rs)}
.rel-table td.rel-n,.rel-table th.rel-n{text-align:right;white-space:nowrap}
.rel-table tfoot th,.rel-table tfoot td{font-weight:700}
.agt-liste.rel-table tfoot th,.agt-liste.rel-table tfoot td{padding:12px 14px;border-top:1px solid var(--border);color:var(--text);text-align:left}
.agt-liste.rel-table tfoot .rel-n{text-align:right}

/* ── Le détail d'un relevé (fenêtre) ─────────────────────────────────────────────────── */
.rel-detail-tete{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:0 0 6px;font-size:13.5px;color:var(--text)}
.rel-detail-tete:focus{outline:none}
.rel-detail-tete:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:var(--rs)}
.rel-detail .cdc-st:first-of-type{margin-top:14px}
.rel-histoire{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:6px;font-size:12.5px;color:var(--text2)}
.rel-histoire b{color:var(--text)}

/* ── « Mes relevés » : une carte par relevé, lisible au téléphone ───────────────────────── */
.rel-cartes{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr));gap:14px}
.rel-carte{background:var(--bg2);border:1px solid var(--border);border-radius:var(--rl);padding:14px 16px;min-width:0}
.rel-carte.rel-ligne-annulee{border-style:dashed}
.rel-carte article{display:flex;flex-direction:column;gap:8px}
.rel-carte-tete{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 10px}
.rel-carte-tete h3{font:600 15px var(--font-display);color:var(--text);margin:0}
.rel-carte-periode{margin:0;font-size:13px;color:var(--text)}
.rel-montants{display:flex;flex-wrap:wrap;gap:8px 18px;margin:0}
.rel-montants dt{font-size:11px;font-weight:600;color:var(--text3);text-transform:uppercase;letter-spacing:.05em}
.rel-montants dd{margin:2px 0 0;font-size:14px;color:var(--text)}
.rel-carte-facture{margin:0;font-size:12.5px;color:var(--text2);overflow-wrap:anywhere}
.rel-carte-facture .pr-lien{margin-top:0;font-size:12.5px;text-align:left}
.rel-actions{display:flex;flex-wrap:wrap;gap:6px}
.rel-actions .btn+.btn{margin-left:0}

/* Une légende ou un intitulé réservés aux lecteurs d'écran (.sr-only, en position absolue) dans un
   tableau qui défile dans son cadre : sans ancrage, ils se posent à leur place « naturelle », au
   bout du tableau, hors du cadre — et font défiler toute la page à 320 px (mesuré le 25/09/2026 :
   898 px de large pour la liste des agents). Ancrés en haut à gauche, ils ne débordent plus ; ni
   une légende ni un en-tête ne prennent le focus, rien ne saute à l'écran. */
.adm-table-wrap caption.sr-only,.adm-table-wrap th .sr-only{left:0;top:0}

/* Le lien « Mot de passe oublié ? » de l'écran de connexion (js/50) : un peu plus grand que les
   liens secondaires, c'est le seul de l'écran. */
#admin-loubli{font-size:12.5px;margin-top:2px}

/* ── Le relevé mensuel (29/09/2026) : taux, brouillon, lignes, totaux, alertes ────────────── */
.rel-taux-actuel{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin:0 0 6px}
.rel-taux-v{font:700 22px/1.2 var(--font-display);color:var(--text)}
.rel-lignes td:first-child{min-width:220px}
.rel-nature{display:block;font-size:11px;font-weight:600;color:var(--text3);text-transform:uppercase;letter-spacing:.05em}
.rel-detail-ligne{display:block;font-size:12.5px;color:var(--text2);margin-top:2px;overflow-wrap:anywhere}
.rel-lignes .pr-lien.rel-lien-client{margin-top:0;font-size:13.5px;font-weight:600;text-align:left}
.rel-lignes .btn{margin-top:6px}
/* Une correction retirée reste lisible, en retrait ; « retirée » est écrit, le montant est barré. */
tr.rel-ligne-retiree td{color:var(--text3)}
.rel-totaux{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px 22px;margin:6px 0 12px}
.rel-totaux dt{font-size:11px;font-weight:600;color:var(--text3);text-transform:uppercase;letter-spacing:.05em;text-align:right}
.rel-totaux dd{margin:2px 0 0;font-size:14px;color:var(--text);text-align:right}
/* Les alertes : un cadre fin sur tout le tour (jamais un trait épais sur un côté) ; « Bloquant » écrit. */
.rel-alertes{margin:0 0 12px;padding:10px 14px;border:1px solid var(--border2);border-radius:var(--r);background:var(--bg2)}
.rel-alertes-bloq{border-color:var(--red)}
.rel-alertes-t{margin:0 0 6px;font-weight:600;font-size:13px;color:var(--text)}
.rel-alertes ul{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--text2)}
.rel-alerte-niv{font-weight:700;color:var(--text)}
.rel-alerte-niv-bloq{color:var(--red)}
.rel-plis{margin:8px 0 0;font-size:13px}
.rel-plis summary{cursor:pointer;font-weight:600;color:var(--text2);min-height:24px;padding:2px 0}
.rel-liste-simple{margin:8px 0 0;padding-left:18px;display:flex;flex-direction:column;gap:6px;color:var(--text)}
.rel-virements{border:1px solid var(--border);border-radius:var(--r);padding:8px 12px 10px;margin:0;min-width:0;display:flex;flex-direction:column;gap:2px}
.rel-virements legend{font:600 12.5px var(--font);color:var(--text);padding:0 4px}
.rel-virements .pr-case{min-height:24px;overflow-wrap:anywhere}

/* Sous 640 px, une ligne de tableau devient une fiche : la première cellule en titre, les autres
   « intitulé … valeur » (l'intitulé vient de l'en-tête, posé par _relCartes dans js/58). L'en-tête
   reste lisible par un lecteur d'écran ; une cellule vide (« — ») ne s'affiche pas. */
@media (max-width:640px){
  table.rel-fiches-mobile,table.rel-fiches-mobile tbody,table.rel-fiches-mobile tfoot,table.rel-fiches-mobile tr{display:block;width:100%}
  table.rel-fiches-mobile thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
  table.rel-fiches-mobile tr{padding:10px 12px;border-bottom:1px solid var(--border)}
  table.rel-fiches-mobile tbody tr:last-child{border-bottom:0}
  table.rel-fiches-mobile tbody th,table.rel-fiches-mobile tbody td,table.rel-fiches-mobile tfoot th,table.rel-fiches-mobile tfoot td{display:block;min-width:0;padding:3px 0;border:0;text-align:right;white-space:normal;overflow-wrap:anywhere}
  table.rel-fiches-mobile tr>:first-child{text-align:left;padding-bottom:6px;min-width:0}
  table.rel-fiches-mobile [data-vide]{display:none}
  table.rel-fiches-mobile [data-l]:not([data-l=""])::before{content:attr(data-l);float:left;margin-right:12px;font-size:11px;font-weight:600;line-height:20px;letter-spacing:.05em;text-transform:uppercase;color:var(--text3)}
  table.rel-fiches-mobile tr>:first-child::before{content:none}
  table.rel-fiches-mobile .btn{margin-top:4px}
}

@media (max-width:480px){
  .rel-resume{grid-template-columns:1fr}
  .rel-totaux{justify-content:flex-start}
  .rel-totaux dt,.rel-totaux dd{text-align:left}
  .rel-dates .ag-champ{max-width:none}
  .rel-actions .btn{flex:1 1 auto;justify-content:center}
}