/* Admin Kerianim. Couleurs : palette categorielle validee (CVD) + or de la marque Kerianim.
   Regle : la couleur porte l'IDENTITE (rubrique, serie) ; les chiffres restent en encre de texte. */
:root {
  color-scheme: light;
  --fond: #f6f3ec;
  --surface-1: #fffdf9;
  --trait: #e6e0d3;
  --grille: #eee9de;
  --text-primary: #110f0e;
  --text-secondary: #4f4a42;
  --text-muted: #7b756a;
  --marque-encre: #110f0e;
  --marque-or: #d49329;
  --marque-creme: #f7edd8;
  --series-1: #2a78d6;  /* bleu    : ventes      */
  --series-2: #eb6834;  /* orange  : clients     */
  --series-3: #1baf7a;  /* aqua    : production  */
  --series-4: #eda100;  /* jaune                 */
  --series-7: #4a3aa7;  /* violet  : couts IA    */
  --pale-1: #e6effb; --pale-2: #fdebe3; --pale-3: #ddf4ec; --pale-7: #ebe8f7; --pale-or: #f8edd9;
  --critique: #c62828; --critique-pale: #fde8e8;
  --attention: #a86b00; --attention-pale: #fff3d6;
  --bon: #1b7f3b; --bon-pale: #e3f4e8;
}
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) {
    color-scheme: dark;
    --fond: #121110; --surface-1: #1b1a18; --trait: #312e29; --grille: #282622;
    --text-primary: #ffffff; --text-secondary: #cfc8b8; --text-muted: #948d80;
    --series-1: #3987e5; --series-2: #d95926; --series-3: #199e70; --series-4: #c98500; --series-7: #9085e9;
    --pale-1: #172536; --pale-2: #33201a; --pale-3: #132a22; --pale-7: #221f36; --pale-or: #2e2412;
    --critique: #ef6b6b; --critique-pale: #3a1a1a;
    --attention: #e6b04a; --attention-pale: #3a2f10;
    --bon: #5fcf86; --bon-pale: #15301e;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --fond: #121110; --surface-1: #1b1a18; --trait: #312e29; --grille: #282622;
  --text-primary: #ffffff; --text-secondary: #cfc8b8; --text-muted: #948d80;
  --series-1: #3987e5; --series-2: #d95926; --series-3: #199e70; --series-4: #c98500; --series-7: #9085e9;
  --pale-1: #172536; --pale-2: #33201a; --pale-3: #132a22; --pale-7: #221f36; --pale-or: #2e2412;
  --critique: #ef6b6b; --critique-pale: #3a1a1a; --attention: #e6b04a; --attention-pale: #3a2f10;
  --bon: #5fcf86; --bon-pale: #15301e;
}

/* Couleur de rubrique : chaque onglet / panneau / bloc porte la sienne */
.r-ensemble, .t-ensemble   { --rubrique: var(--marque-or); --rubrique-pale: var(--pale-or); }
.r-ventes, .t-ventes       { --rubrique: var(--series-1); --rubrique-pale: var(--pale-1); }
.r-clients, .t-clients     { --rubrique: var(--series-2); --rubrique-pale: var(--pale-2); }
.r-production, .t-production { --rubrique: var(--series-3); --rubrique-pale: var(--pale-3); }
.r-ia, .t-ia               { --rubrique: var(--series-7); --rubrique-pale: var(--pale-7); }
.r-messagerie, .t-messagerie { --rubrique: var(--text-muted); --rubrique-pale: var(--grille); }
.r-codes, .t-codes         { --rubrique: var(--series-4); --rubrique-pale: var(--pale-or); }

* { box-sizing: border-box; }
html, body { overflow-x: hidden; }
body { margin: 0; background: var(--fond); color: var(--text-primary);
  font: 15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }

.barre { display: flex; align-items: center; gap: 10px; padding: 10px 16px; background: var(--surface-1);
  border-bottom: 3px solid var(--marque-or); position: sticky; top: 0; z-index: 3; }
.logo img { height: 30px; width: auto; display: block; }
.pastille-admin { background: var(--marque-or); color: var(--marque-encre); font-size: 11px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; }
.espace { flex: 1; }

.onglets { display: flex; gap: 4px; overflow-x: auto; padding: 0 12px; background: var(--surface-1);
  border-bottom: 1px solid var(--trait); position: sticky; top: 53px; z-index: 2; scrollbar-width: none; }
.onglets button { border: none; border-radius: 0; background: none; padding: 12px 14px 10px; white-space: nowrap;
  color: var(--text-secondary); font-weight: 600; border-bottom: 3px solid transparent; }
.onglets button::before { content: ""; display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  background: var(--rubrique); margin-right: 7px; vertical-align: 1px; }
.onglets button[aria-selected=true] { color: var(--text-primary); border-bottom-color: var(--rubrique);
  background: var(--rubrique-pale); }

main { max-width: 1100px; margin: 0 auto; padding: 16px; }
h1 { font-size: 20px; margin: 0 0 12px; }
h3 { font-size: 14px; font-weight: 650; margin: 0 0 8px; color: var(--text-primary); }
h3::before { content: ""; display: inline-block; width: 4px; height: 14px; background: var(--rubrique);
  border-radius: 2px; margin-right: 8px; vertical-align: -2px; }
.muet { color: var(--text-muted); font-weight: normal; }
.petit { font-size: 12px; }
.note { margin-top: 28px; }
.carte { background: var(--surface-1); border: 1px solid var(--trait); border-radius: 12px; padding: 14px 16px; margin: 12px 0; }
.connexion { max-width: 380px; margin: 10vh auto; display: grid; gap: 12px; border-top: 4px solid var(--marque-or); }
.connexion h1 { text-align: center; }
.connexion h3::before, .connexion h1::before { display: none; }
.logo-connexion { display: block; text-align: center; }
.logo-connexion img { height: 40px; width: auto; }
label { display: grid; gap: 4px; font-size: 13px; color: var(--text-secondary); }
input { font: inherit; padding: 9px 10px; border: 1px solid var(--trait); border-radius: 8px; background: var(--fond); color: var(--text-primary); }
button { font: inherit; padding: 7px 14px; border-radius: 8px; border: 1px solid var(--trait); background: var(--surface-1);
  color: var(--text-primary); cursor: pointer; }
button[type=submit] { background: var(--marque-or); border-color: var(--marque-or); color: var(--marque-encre); font-weight: 650; }
button.lien { border: none; background: none; color: var(--text-secondary); text-decoration: underline; padding: 4px; }
.erreur { color: var(--critique); min-height: 1.2em; margin: 0; }

.filtres { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 4px; }
.filtres button[aria-pressed=true] { background: var(--marque-or); border-color: var(--marque-or); color: var(--marque-encre); font-weight: 650; }

.bandeau { border-radius: 10px; padding: 10px 14px; margin: 10px 0; border-left: 5px solid; }
.bandeau.attention { background: var(--attention-pale); border-color: var(--attention); }
.bandeau.critique { background: var(--critique-pale); border-color: var(--critique); }
.bandeau.bon { background: var(--bon-pale); border-color: var(--bon); }

.tuiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: 10px; margin-top: 10px; }
.tuile { background: var(--surface-1); border: 1px solid var(--trait); border-left: 5px solid var(--rubrique);
  border-radius: 10px; padding: 12px 14px; }
.tuile .valeur { font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.2; }
.tuile .libelle { font-size: 13px; color: var(--text-secondary); font-weight: 600; }
.tuile .detail { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.tuile.critique { border-left-color: var(--critique); background: var(--critique-pale); }
.tuile.critique .libelle::before { content: "⚠ "; color: var(--critique); }
.tuile.attenue .valeur { color: var(--text-muted); }

.grille-ensemble { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; margin-top: 10px; }
.bloc { background: var(--rubrique-pale); border: 1px solid var(--trait); border-top: 5px solid var(--rubrique);
  border-radius: 12px; padding: 14px; cursor: pointer; text-align: left; display: flex; flex-direction: column;
  justify-content: flex-start; width: 100%; color: var(--text-primary); }
.bloc:hover { border-color: var(--rubrique); }
.bloc h4 { margin: 0 0 8px; font-size: 15px; display: flex; justify-content: space-between; }
.bloc h4 span { font-size: 12px; color: var(--text-muted); font-weight: normal; }
.bloc .chiffre { font-size: 30px; font-weight: 750; font-variant-numeric: tabular-nums; }
.bloc .sous { font-size: 13px; color: var(--text-secondary); }
.bloc ul { margin: 8px 0 0; padding: 0; list-style: none; font-size: 13px; color: var(--text-secondary); }
.bloc li { display: flex; justify-content: space-between; border-top: 1px solid var(--trait); padding: 4px 0; }
.bloc li b { color: var(--text-primary); font-variant-numeric: tabular-nums; }

svg { display: block; width: 100%; height: auto; overflow: visible; }
svg .axe { fill: var(--text-muted); font-size: 11px; }
svg .grille { stroke: var(--grille); stroke-width: 1; }
svg rect.barre-donnee:hover { opacity: .78; }
.legende { display: flex; flex-wrap: wrap; gap: 14px; font-size: 12px; color: var(--text-secondary); margin-top: 6px; }
.legende i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }
details { margin-top: 6px; font-size: 13px; }
summary { cursor: pointer; color: var(--text-secondary); }
details table { border-collapse: collapse; margin-top: 6px; font-variant-numeric: tabular-nums; }
details td, details th { padding: 2px 12px 2px 0; text-align: right; border-bottom: 1px solid var(--grille); }
details th:first-child, details td:first-child { text-align: left; }
.vide { color: var(--text-muted); font-size: 13px; padding: 10px 0; }
.vide-grand p { color: var(--text-secondary); }
#info-bulle { position: fixed; pointer-events: none; z-index: 10; background: var(--text-primary); color: var(--surface-1);
  font-size: 12px; padding: 6px 9px; border-radius: 6px; white-space: pre; max-width: 280px; }
@media (max-width: 560px) {
  .barre #releve { display: none; }
  .tuile .valeur { font-size: 22px; }
  .onglets { top: 51px; }
}

/* Messagerie */
.sous-onglets { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 4px; }
.sous-onglets button[aria-pressed=true] { background: var(--text-primary); color: var(--surface-1); border-color: var(--text-primary); }
.badge { display: inline-block; min-width: 20px; padding: 0 6px; border-radius: 999px; background: var(--critique); color: #fff;
  font-size: 12px; font-weight: 700; text-align: center; }
.messagerie { display: grid; grid-template-columns: minmax(240px, 1fr) 2fr; gap: 12px; align-items: start; }
@media (max-width: 760px) { .messagerie { grid-template-columns: 1fr; } }
.liste-conv { padding: 6px; max-height: 70vh; overflow-y: auto; }
.ligne-conv { display: block; width: 100%; text-align: left; border: none; border-radius: 8px; padding: 10px; margin: 2px 0;
  background: none; border-left: 4px solid transparent; }
.ligne-conv:hover { background: var(--grille); }
.ligne-conv.active { background: var(--rubrique-pale); border-left-color: var(--rubrique); }
.ligne-conv .haut { display: flex; justify-content: space-between; gap: 8px; font-weight: 650; }
.ligne-conv .haut span { font-weight: normal; font-size: 12px; color: var(--text-muted); white-space: nowrap; }
.ligne-conv .sujet { font-size: 13px; color: var(--text-secondary); }
.ligne-conv .extrait { font-size: 12px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.statut { font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 999px; text-transform: uppercase; letter-spacing: .03em; }
.statut.nouveau { background: var(--critique-pale); color: var(--critique); }
.statut.repondu { background: var(--bon-pale); color: var(--bon); }
.statut.clos { background: var(--grille); color: var(--text-muted); }
.conv .entete-conv { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; border-bottom: 1px solid var(--trait); padding-bottom: 10px; }
.bulle { max-width: 85%; margin: 10px 0; padding: 10px 12px; border-radius: 12px; white-space: pre-wrap; }
.bulle.client { background: var(--grille); }
.bulle.kerianim { background: var(--rubrique-pale); margin-left: auto; border: 1px solid var(--trait); }
.bulle .qui { font-size: 12px; color: var(--text-muted); margin-bottom: 4px; white-space: normal; }
textarea { font: inherit; width: 100%; min-height: 120px; padding: 10px; border: 1px solid var(--trait); border-radius: 8px;
  background: var(--fond); color: var(--text-primary); resize: vertical; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; }
.btn-principal { background: var(--marque-or); border-color: var(--marque-or); color: var(--marque-encre); font-weight: 650; }
.ligne-alerte { display: grid; grid-template-columns: 130px 1fr auto; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--grille); font-size: 13px; }
.ligne-alerte .quand { color: var(--text-muted); }
.ok { color: var(--bon); font-weight: 650; } .ko { color: var(--critique); font-weight: 650; }

/* Alerte « nouveau message » : pastille clignotante sur l'onglet Messagerie */
.badge.clignote { margin-left: 6px; animation: clignote 1.1s ease-in-out infinite; box-shadow: 0 0 0 0 var(--critique); }
@keyframes clignote {
  0%, 100% { opacity: 1; transform: scale(1); box-shadow: 0 0 0 0 rgba(198, 40, 40, .55); }
  50% { opacity: .35; transform: scale(1.15); box-shadow: 0 0 0 6px rgba(198, 40, 40, 0); }
}
@media (prefers-reduced-motion: reduce) { .badge.clignote { animation: none; } }
.bandeau.messages { background: var(--critique-pale); border-color: var(--critique); cursor: pointer; font-weight: 600; }

/* Codes promo (2026-10-05) */
.form-code h3 { margin-top: 0; }
.champs-code label { align-content: end; }
.champs-code { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; margin-bottom: 12px; }
.remise { display: flex; gap: 6px; }
.remise input { flex: 1; min-width: 0; }
select { font: inherit; padding: 9px 8px; border: 1px solid var(--trait); border-radius: 8px; background: var(--fond); color: var(--text-primary); }
label.case { display: flex; align-items: center; gap: 8px; align-self: end; padding-bottom: 10px; }
#code-retour { margin: 10px 0 0; min-height: 1.2em; }
#code-retour.ok { color: var(--bon); font-weight: 600; }
#code-retour.ko { color: var(--critique); font-weight: 600; }
.table-codes { width: 100%; border-collapse: collapse; font-size: 14px; }
.table-codes th { text-align: left; font-weight: 600; color: var(--text-secondary); font-size: 12px; padding: 6px 8px; border-bottom: 1px solid var(--trait); }
.table-codes td { padding: 9px 8px; border-bottom: 1px solid var(--grille); vertical-align: middle; }
.table-codes .nom-code { font-family: ui-monospace, Consolas, monospace; font-weight: 700; letter-spacing: .03em; }
.etat-code { font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.etat-code.actif { background: var(--bon-pale); color: var(--bon); }
.etat-code.inactif { background: var(--grille); color: var(--text-muted); }
.etat-code.fini { background: var(--attention-pale); color: var(--attention); }
.defile-codes { overflow-x: auto; }
.filtres[hidden] { display: none; }