/* Console Fonachat — sombre, verre, lisible longtemps. Tout est dans ce fichier (en plus du système de l'appli). */
body.admin { --fond: #070D0B; --fond-2: #0D1714; --carte: #101C18; --verre: rgba(16, 28, 24, .8); --texte: #E9F3EF; --doux: #93A8A1; --tres-doux: #61766F;
  --bord: rgba(255, 255, 255, .07); --bord-fort: rgba(255, 255, 255, .13); --ombre: 0 1px 2px rgba(0, 0, 0, .4), 0 10px 30px rgba(0, 0, 0, .35); background: var(--fond); color: var(--texte); font-size: 14.5px; }
.boite-connexion { position: relative; max-width: 380px; margin: 12vh auto; padding: 32px 26px; background: var(--carte); border: 1px solid var(--bord); border-radius: 26px; box-shadow: var(--ombre-forte); display: grid; gap: 10px; overflow: hidden; }
.halo-connexion { position: absolute; inset: -40% -40% auto auto; width: 300px; height: 300px; border-radius: 50%; background: radial-gradient(circle, rgba(15, 191, 127, .35), transparent 70%); filter: blur(10px); pointer-events: none; }
#console { display: grid; grid-template-columns: 264px 1fr; min-height: 100vh; }
#menu { background: linear-gradient(180deg, #0A1512, #060B09); border-right: 1px solid var(--bord); padding: 18px 12px; display: flex; flex-direction: column; gap: 12px; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.tete-menu { display: flex; align-items: center; justify-content: space-between; padding: 0 6px; }
.logo-menu { height: 28px; width: auto; }
.direct { display: inline-flex; align-items: center; gap: 6px; font-size: .7rem; font-weight: 800; color: var(--vert); text-transform: uppercase; letter-spacing: .06em; }
.direct i { width: 7px; height: 7px; border-radius: 50%; background: var(--vert); box-shadow: 0 0 0 0 rgba(15, 191, 127, .6); animation: pulseVert 2s infinite; }
.recherche-rapide { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, .05); border: 1px solid var(--bord); color: var(--doux); font-weight: 600; text-align: start; }
.recherche-rapide kbd { font: 700 .68rem system-ui; padding: 2px 6px; border-radius: 6px; background: rgba(255, 255, 255, .08); color: var(--doux); }
#menu nav { display: grid; gap: 2px; }
.groupe-menu { font-size: .66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: var(--tres-doux); margin: 14px 10px 4px; }
#menu a { color: rgba(255, 255, 255, .72); text-decoration: none; padding: 9px 12px; border-radius: 11px; font-weight: 650; display: flex; justify-content: space-between; align-items: center; position: relative; transition: background .2s, color .2s; }
#menu a:hover { background: rgba(255, 255, 255, .05); color: #fff; }
#menu a[aria-current="page"] { background: linear-gradient(90deg, rgba(15, 191, 127, .22), rgba(15, 191, 127, .06)); color: #fff; }
#menu a[aria-current="page"]::before { content: ""; position: absolute; left: -12px; top: 8px; bottom: 8px; width: 3px; border-radius: 3px; background: var(--vert); box-shadow: 0 0 10px var(--vert); }
#menu .pastille { min-width: 22px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--rouge); color: #fff; font-size: .7rem; display: grid; place-items: center; box-shadow: 0 0 12px rgba(240, 68, 90, .5); }
#menu .pastille:empty { display: none; }
.sortir { margin-top: auto; color: rgba(255, 255, 255, .55); padding: 10px; border-radius: 12px; } .sortir:hover { background: rgba(240, 68, 90, .12); color: #fff; }
#vue { padding: 26px 32px 70px; max-width: 1320px; width: 100%; animation: arrive .35s var(--doux-courbe) backwards; }
.tete-vue { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.tete-vue h1 { font-size: 1.7rem; } .tete-vue p { color: var(--doux); margin-top: 4px; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-bottom: 18px; }
.kpi { position: relative; overflow: hidden; background: var(--carte); border-radius: 18px; padding: 16px 18px; border: 1px solid var(--bord); animation: tuileEntre .5s var(--ressort-bulle) backwards; }
.kpi::after { content: ""; position: absolute; right: -30px; top: -30px; width: 90px; height: 90px; border-radius: 50%; background: radial-gradient(circle, var(--teinte, rgba(15, 191, 127, .2)), transparent 70%); }
.kpi .v { font-size: 1.85rem; font-weight: 800; letter-spacing: -.03em; display: block; font-variant-numeric: tabular-nums; }
.kpi .l { color: var(--doux); font-size: .8rem; font-weight: 600; }
.kpi .emo { position: absolute; right: 14px; top: 12px; font-size: 1.2rem; z-index: 1; }
.kpi.alerte { --teinte: rgba(240, 68, 90, .3); } .kpi.alerte .v { color: #ff7d8e; }
.kpi.or { --teinte: rgba(255, 194, 61, .25); } .kpi.bleu { --teinte: rgba(59, 130, 246, .25); }
a.kpi { color: inherit; text-decoration: none; transition: transform .3s var(--ressort), border-color .2s; } a.kpi:hover { transform: translateY(-2px); border-color: var(--bord-fort); }
.grille2 { display: grid; grid-template-columns: 2fr 1fr; gap: 12px; }
.panneau { background: var(--carte); border-radius: 18px; padding: 18px; border: 1px solid var(--bord); margin-bottom: 12px; }
.panneau h2 { margin-bottom: 12px; font-size: 1rem; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
table { width: 100%; border-collapse: collapse; font-size: .88rem; }
th, td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--bord); vertical-align: top; }
th { color: var(--tres-doux); font-size: .7rem; text-transform: uppercase; letter-spacing: .07em; font-weight: 800; }
tbody tr { transition: background .15s; } tbody tr:hover { background: rgba(255, 255, 255, .025); }
.etiquette { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: .72rem; font-weight: 800; background: rgba(255, 255, 255, .06); white-space: nowrap; }
.etiquette.ok { background: rgba(15, 191, 127, .15); color: #3fe0a4; } .etiquette.non { background: rgba(240, 68, 90, .15); color: #ff7d8e; } .etiquette.att { background: rgba(255, 194, 61, .16); color: #ffcf6b; } .etiquette.bleu { background: rgba(59, 130, 246, .16); color: #8db8ff; }
.dossier { display: grid; grid-template-columns: 1fr 1fr 240px; gap: 14px; align-items: start; }
.dossier img { width: 100%; border-radius: 14px; background: var(--fond-2); cursor: zoom-in; }
.score { font-size: 2.2rem; font-weight: 800; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; align-items: center; }
.actions .btn, .btn.mini { width: auto; min-height: 38px; padding: 0 14px; font-size: .85rem; }
.btn.danger { background: var(--rouge); box-shadow: none; }
.entree, textarea.entree, select.entree { background: var(--fond-2); border: 1px solid var(--bord-fort); color: var(--texte); border-radius: 12px; padding: 10px 12px; }
.filtres { display: flex; gap: 6px; flex-wrap: wrap; }
.filtres .puce { background: var(--fond-2); border-color: var(--bord); color: var(--doux); } .filtres .puce[aria-pressed="true"] { background: var(--vert); color: #04120d; }
.graphe { position: relative; height: 200px; }
.graphe svg { width: 100%; height: 100%; overflow: visible; }
.graphe .barre { fill: var(--vert); } .graphe .barre:hover { fill: #3fe0a4; }
.graphe .axe { stroke: var(--bord-fort); } .graphe text { fill: var(--tres-doux); font-size: 10px; }
.bulle-info { position: absolute; pointer-events: none; padding: 6px 10px; border-radius: 10px; background: #fff; color: #06110d; font-size: .8rem; font-weight: 700; transform: translate(-50%, -110%); white-space: nowrap; }
.vide-admin { padding: 34px; text-align: center; color: var(--doux); }
.doux { color: var(--doux); }
/* Réclamations : boîte de réception en deux colonnes */
.boite-recl { display: grid; grid-template-columns: 380px 1fr; gap: 12px; min-height: 70vh; }
.liste-recl { background: var(--carte); border: 1px solid var(--bord); border-radius: 18px; overflow: hidden auto; max-height: 78vh; }
.item-recl { display: grid; gap: 4px; width: 100%; text-align: start; padding: 12px 14px; border-bottom: 1px solid var(--bord); position: relative; transition: background .15s; }
.item-recl:hover { background: rgba(255, 255, 255, .03); } .item-recl[aria-current="true"] { background: rgba(15, 191, 127, .1); }
.item-recl .haut { display: flex; justify-content: space-between; gap: 8px; font-size: .75rem; color: var(--doux); }
.item-recl b { font-size: .92rem; } .item-recl .res { font-size: .8rem; color: var(--doux); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.item-recl.p3::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 3px; background: var(--rouge); box-shadow: 0 0 10px var(--rouge); }
.item-recl.p2::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 3px; background: var(--or); }
.detail-recl { background: var(--carte); border: 1px solid var(--bord); border-radius: 18px; display: flex; flex-direction: column; min-height: 70vh; max-height: 78vh; }
.detail-recl .tete { padding: 16px 18px; border-bottom: 1px solid var(--bord); display: grid; gap: 6px; }
.detail-recl .fil-recl { flex: 1; overflow-y: auto; padding: 16px 18px; display: flex; flex-direction: column; gap: 8px; }
.msg-recl { max-width: 78%; padding: 10px 14px; border-radius: 16px; background: var(--fond-2); white-space: pre-wrap; line-height: 1.45; }
.msg-recl.support { align-self: flex-end; background: linear-gradient(135deg, #12C985, #07936B); color: #fff; }
.msg-recl.agent { align-self: center; max-width: 92%; background: transparent; border: 1px dashed var(--bord-fort); color: var(--doux); font-size: .84rem; }
.msg-recl small { display: block; opacity: .7; font-size: .7rem; margin-top: 4px; }
.ia-recl { margin: 0 18px; padding: 12px 14px; border-radius: 14px; background: linear-gradient(135deg, rgba(139, 123, 255, .14), rgba(59, 130, 246, .08)); border: 1px solid rgba(139, 123, 255, .3); font-size: .85rem; display: grid; gap: 6px; }
.repondre-recl { padding: 14px 18px; border-top: 1px solid var(--bord); display: grid; gap: 8px; }
.repondre-recl textarea { width: 100%; min-height: 90px; resize: vertical; }
/* Fiche utilisateur */
.fiche { display: grid; grid-template-columns: 320px 1fr; gap: 12px; }
.fiche .ident { text-align: center; display: grid; gap: 8px; justify-items: center; }
.ligne-info { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--bord); font-size: .88rem; } .ligne-info span:first-child { color: var(--doux); }
/* Agents */
.agents-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; margin-bottom: 18px; }
.agent { background: var(--carte); border: 1px solid var(--bord); border-radius: 18px; padding: 16px; display: grid; gap: 8px; animation: tuileEntre .5s var(--ressort-bulle) backwards; }
.agent .haut { display: flex; align-items: center; gap: 10px; } .agent .haut b { flex: 1; }
.voyant { width: 10px; height: 10px; border-radius: 50%; background: var(--tres-doux); flex: none; }
.voyant.actif { background: var(--vert); box-shadow: 0 0 0 0 rgba(15, 191, 127, .6); animation: pulseVert 2s infinite; } .voyant.pause { background: var(--or); }
/* Palette de commandes (Ctrl+K) */
.palette-fond { position: fixed; inset: 0; z-index: 300; background: rgba(0, 0, 0, .55); backdrop-filter: blur(6px); display: grid; place-items: start center; padding-top: 12vh; animation: voile .2s; }
.palette-boite { width: min(620px, 92vw); background: var(--carte); border: 1px solid var(--bord-fort); border-radius: 18px; box-shadow: 0 30px 80px rgba(0, 0, 0, .6); overflow: hidden; animation: banniereEntre .35s var(--ressort-bulle); }
.palette-boite input { width: 100%; padding: 18px 20px; font-size: 1.05rem; background: transparent; border: 0; border-bottom: 1px solid var(--bord); color: var(--texte); outline: none; }
#palette-res { max-height: 50vh; overflow-y: auto; padding: 6px; }
#palette-res button { display: flex; width: 100%; gap: 10px; align-items: center; padding: 10px 14px; border-radius: 10px; text-align: start; }
#palette-res button:hover, #palette-res button.sel { background: rgba(15, 191, 127, .14); }
#palette-res small { color: var(--doux); margin-left: auto; }
#toast { background: #fff; color: #06110d; }
@media (max-width: 1000px) { .boite-recl, .fiche { grid-template-columns: 1fr; } }
@media (max-width: 860px) { #console { grid-template-columns: 1fr; } #menu { position: static; height: auto; } #menu nav { grid-template-columns: repeat(2, 1fr); } .groupe-menu { grid-column: 1 / -1; } .grille2, .dossier { grid-template-columns: 1fr; } #vue { padding: 18px 14px; } }

/* Communauté par pays */
.barre-pays { display: grid; grid-template-columns: 150px 1fr 70px; align-items: center; gap: 12px; padding: 7px 0; animation: filEntree .5s var(--doux-courbe) backwards; }
.barre-pays i { height: 10px; border-radius: 6px; background: rgba(255, 255, 255, .06); position: relative; overflow: hidden; }
.barre-pays i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--x); border-radius: inherit; background: linear-gradient(90deg, #19D38A, #FFC23D); animation: jauge-entree 1.1s var(--doux-courbe) both; }
.barre-pays b { text-align: end; }