/* ================================================
   dashboard.css — Reporting SEO Jonathan Cappe
   reporting.jonathan-cappe.fr/_template/dashboard.css
   Modifiez ici pour tous vos clients en même temps.
================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:#ffffff; --bg2:#f5f4f0; --bg3:#eeedea;
  --text:#1a1a18; --text2:#6b6a65; --text3:#9c9a94;
  --border:rgba(0,0,0,0.10); --border2:rgba(0,0,0,0.18);
  --radius:8px; --radius-lg:12px;
  --blue:#378ADD; --blue-bg:#E6F1FB; --blue-text:#0C447C;
  --green:#639922; --green-bg:#EAF3DE; --green-text:#27500A;
  --red:#E24B4A; --red-bg:#FCEBEB; --red-text:#A32D2D;
  --amber:#EF9F27; --amber-bg:#FAEEDA; --amber-text:#633806;
  --teal:#1D9E75; --purple:#7F77DD; --purple-bg:#EEEDFE; --purple-text:#3C3489;
  --gray:#888780;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:#1c1c1a; --bg2:#252523; --bg3:#2e2e2b;
    --text:#e8e6df; --text2:#9c9a92; --text3:#6b6a65;
    --border:rgba(255,255,255,0.10); --border2:rgba(255,255,255,0.18);
    --blue-bg:#0c2a4a; --blue-text:#85b7eb;
    --green-bg:#1a2e0a; --green-text:#97c459;
    --red-bg:#3a1414; --red-text:#f09595;
    --amber-bg:#3a2008; --amber-text:#fac775;
    --purple-bg:#1e1c3a; --purple-text:#afa9ec;
  }
}

/* Force mode jour */
html[data-theme="light"] {
  --bg:#ffffff; --bg2:#f5f4f0; --bg3:#eeedea;
  --text:#1a1a18; --text2:#6b6a65; --text3:#9c9a94;
  --border:rgba(0,0,0,0.10); --border2:rgba(0,0,0,0.18);
  --blue-bg:#E6F1FB; --blue-text:#0C447C;
  --green-bg:#EAF3DE; --green-text:#27500A;
  --red-bg:#FCEBEB; --red-text:#A32D2D;
  --amber-bg:#FAEEDA; --amber-text:#633806;
  --purple-bg:#EEEDFE; --purple-text:#3C3489;
}

/* Force mode nuit */
html[data-theme="dark"] {
  --bg:#1c1c1a; --bg2:#252523; --bg3:#2e2e2b;
  --text:#e8e6df; --text2:#9c9a92; --text3:#6b6a65;
  --border:rgba(255,255,255,0.10); --border2:rgba(255,255,255,0.18);
  --blue-bg:#0c2a4a; --blue-text:#85b7eb;
  --green-bg:#1a2e0a; --green-text:#97c459;
  --red-bg:#3a1414; --red-text:#f09595;
  --amber-bg:#3a2008; --amber-text:#fac775;
  --purple-bg:#1e1c3a; --purple-text:#afa9ec;
}

body { font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif; background:var(--bg2); color:var(--text); font-size:14px; line-height:1.5; }

/* Tooltip */
.tip { display:inline-flex; align-items:center; justify-content:center; width:14px; height:14px; border-radius:50%; background:var(--bg3); border:0.5px solid var(--border2); font-size:9px; font-weight:700; color:var(--text2); cursor:help; flex-shrink:0; vertical-align:middle; margin-left:3px; user-select:none; }
.tip::after,.tip::before { display:none; }
.ftip { position:fixed; background:#1a1a18; color:#f5f4f0; font-size:12px; font-weight:400; line-height:1.6; padding:16px 18px; border-radius:12px; max-width:420px; width:420px; white-space:normal; pointer-events:none; opacity:0; transition:opacity 0.15s; z-index:9999; box-shadow:0 10px 40px rgba(0,0,0,0.5); max-height:60vh; overflow-y:auto; }
/* LLM keywords table — lignes cliquables avec hover */
tr.llm-kw-row[onclick]:hover { background:var(--bg2); }
tr.llm-kw-row[onclick]:hover td { background:var(--bg2); }
tr.llm-kw-expand td { padding:0 !important; }
tr.llm-kw-expand { background:transparent; }
.ftip strong { display:block; font-size:14px; font-weight:600; margin-bottom:2px; color:#fff; }
.ftip .ftip-sub { font-size:11px; opacity:0.65; margin-bottom:10px; }
.ftip .ftip-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:5px; }
.ftip .ftip-box { padding:8px 10px; border-radius:8px; font-size:10px; line-height:1.3; color:#fff; }
.ftip .ftip-box b { display:block; font-size:12px; font-weight:700; margin-bottom:2px; color:#fff; }
.ftip hr { border:none; border-top:0.5px solid rgba(255,255,255,0.15); margin:8px 0; }
.sort-btn { display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:500; cursor:pointer; padding:5px 11px; border:0.5px solid var(--border2); border-radius:7px; background:transparent; font-family:inherit; transition:all 0.15s; color:var(--text2); }
.sort-btn::before { content:''; width:8px; height:8px; border-radius:50%; display:inline-block; background:var(--text3); }
.sort-btn:hover { background:var(--bg2); }
.sort-btn-impr::before { background:#378ADD; }
.sort-btn-clicks::before { background:#1D9E75; }
.sort-btn-pos::before { background:#EF9F27; }
.sort-btn-impr.active { background:var(--blue-bg); color:var(--blue-text); border-color:transparent; }
.sort-btn-clicks.active { background:var(--green-bg); color:var(--green-text); border-color:transparent; }
.sort-btn-pos.active { background:var(--amber-bg); color:var(--amber-text); border-color:transparent; }

/* Topbar */
.topbar { background:var(--bg); border-bottom:0.5px solid var(--border); padding:12px 24px; display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; z-index:10; }
.topbar-left { display:flex; align-items:center; gap:12px; }
.logo-mark { width:32px; height:32px; border-radius:7px; background:#185FA5; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.brand-name { font-size:14px; font-weight:600; color:var(--text); }
.brand-sub { font-size:11px; color:var(--text2); margin-top:1px; }
.topbar-right { display:flex; align-items:center; gap:8px; }
.sync-dot { width:7px; height:7px; border-radius:50%; background:var(--green); display:inline-block; margin-right:4px; }
.sync-label { font-size:11px; color:var(--text2); margin-right:8px; }
.period-group { display:flex; gap:4px; }
.period-btn { padding:5px 12px; font-size:12px; border:0.5px solid var(--border2); border-radius:20px; cursor:pointer; background:transparent; color:var(--text2); transition:all 0.15s; }
.period-btn:hover { background:var(--bg2); }
.period-btn.active { background:var(--blue-bg); color:var(--blue-text); border-color:transparent; font-weight:500; }

.main { max-width:1200px; margin:0 auto; padding:20px 24px; }

/* Alert */
.alert { display:flex; align-items:center; gap:10px; background:var(--amber-bg); border-radius:var(--radius); padding:10px 14px; margin-bottom:16px; font-size:12px; color:var(--amber-text); }
.alert-icon { width:18px; height:18px; border-radius:50%; background:#BA7517; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.alert-icon svg { width:10px; height:10px; }

/* KPI */
.kpi-grid { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:8px; margin-bottom:16px; }
@media(max-width:900px){.kpi-grid{grid-template-columns:repeat(3,1fr);}}
@media(max-width:540px){.kpi-grid{grid-template-columns:repeat(2,1fr);}}
.kpi-card { background:var(--bg); border-radius:var(--radius); padding:12px 14px; border:0.5px solid var(--border); }
.kpi-label { font-size:11px; color:var(--text2); margin-bottom:6px; display:flex; align-items:center; gap:4px; flex-wrap:nowrap; white-space:nowrap; }
.kpi-val { font-size:22px; font-weight:600; color:var(--text); margin-bottom:4px; letter-spacing:-0.5px; }
.kpi-outof { font-size:10px; font-weight:400; color:var(--text3); margin-left:4px; letter-spacing:0; }
.kpi-delta { font-size:11px; display:flex; align-items:center; gap:4px; }
.delta-up { color:var(--green-text); } .delta-dn { color:var(--red-text); }
.dot { width:6px; height:6px; border-radius:50%; flex-shrink:0; }
.dot-up { background:var(--green); } .dot-dn { background:var(--red); }

/* Tags */
.tag { display:inline-block; padding:1px 6px; border-radius:99px; font-size:10px; font-weight:500; }
.tag-ga4 { background:var(--green-bg); color:var(--green-text); }
.tag-gsc { background:var(--blue-bg); color:var(--blue-text); }
.tag-psi { background:var(--purple-bg); color:var(--purple-text); }
.tag-google { background:var(--green-bg); color:var(--green-text); }
.tag-dfs { background:var(--amber-bg); color:var(--amber-text); }

/* Sep */
.sep { font-size:10px; font-weight:600; color:var(--text2); letter-spacing:.06em; text-transform:uppercase; margin:18px 0 10px; padding-bottom:7px; border-bottom:0.5px solid var(--border); display:flex; align-items:center; gap:8px; }

/* Cards */
.card { background:var(--bg); border:0.5px solid var(--border); border-radius:var(--radius-lg); padding:14px 16px; }
.card-title { font-size:13px; font-weight:600; color:var(--text); margin-bottom:2px; display:flex; align-items:center; gap:5px; }
.card-sub { font-size:11px; color:var(--text2); margin-bottom:12px; display:flex; align-items:center; gap:5px; flex-wrap:wrap; }

/* Grids */
.grid-2-1 { display:grid; grid-template-columns:minmax(0,2fr) minmax(0,1fr); gap:10px; margin-bottom:10px; }
.grid-1-1 { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:10px; margin-bottom:10px; }
@media(max-width:700px){.grid-2-1,.grid-1-1{grid-template-columns:1fr;}}

/* Legend */
.legend { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:8px; font-size:11px; color:var(--text2); }
.legend span { display:flex; align-items:center; gap:4px; }
.leg-dot { width:9px; height:9px; border-radius:2px; flex-shrink:0; }
.leg-line { width:18px; height:2px; border-radius:1px; flex-shrink:0; }

/* CWV */
.cwv-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-bottom:10px; }
@media(max-width:600px){.cwv-grid{grid-template-columns:1fr;}}
.cwv-card { background:var(--bg); border:0.5px solid var(--border); border-radius:var(--radius); padding:12px 14px; }
.cwv-label { font-size:11px; color:var(--text2); margin-bottom:5px; display:flex; align-items:center; gap:4px; }
.cwv-val { font-size:20px; font-weight:600; margin-bottom:4px; letter-spacing:-0.5px; }
.cwv-sub { font-size:10px; font-weight:400; }
.cwv-track { height:4px; border-radius:2px; background:var(--bg3); margin-bottom:5px; overflow:hidden; }
.cwv-fill { height:100%; border-radius:2px; }
.cwv-footer { display:flex; align-items:center; justify-content:space-between; }
.cwv-status { font-size:10px; font-weight:500; }

/* Badge */
.badge { display:inline-block; padding:2px 7px; border-radius:99px; font-size:10px; font-weight:500; }
.badge-red { background:var(--red-bg); color:var(--red-text); }
.badge-amb { background:var(--amber-bg); color:var(--amber-text); }
.badge-grn { background:var(--green-bg); color:var(--green-text); }
.badge-blu { background:var(--blue-bg); color:var(--blue-text); }

/* Sources */
.src-highlight { background:var(--bg2); border-radius:var(--radius); padding:10px 12px; margin-bottom:12px; display:flex; align-items:center; justify-content:space-between; }
.src-big-val { font-size:24px; font-weight:600; color:var(--blue); letter-spacing:-0.5px; }
.src-delta { font-size:11px; color:var(--green-text); margin-top:2px; }
.src-right { text-align:right; }
.src-right .sl { font-size:11px; color:var(--text2); margin-bottom:2px; }
.src-right .sv { font-size:18px; font-weight:600; color:var(--text); }
.src-row { display:flex; align-items:center; gap:8px; margin-bottom:7px; }
.src-name { width:88px; font-size:11px; color:var(--text2); flex-shrink:0; }
.src-track { flex:1; height:7px; border-radius:4px; background:var(--bg2); overflow:hidden; }
.src-fill { height:100%; border-radius:4px; }
.src-pct { width:32px; text-align:right; font-size:11px; font-weight:500; color:var(--text); }

/* Quick wins */
.qw-item { display:flex; align-items:center; gap:10px; margin-bottom:9px; }
.qw-pos { width:30px; height:30px; border-radius:var(--radius); background:var(--bg2); font-size:12px; font-weight:600; color:var(--text); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.qw-info { flex:1; overflow:hidden; }
.qw-kw { font-size:12px; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.qw-meta { font-size:10px; color:var(--text2); }

/* Tables */
.table-wrap { overflow-x:auto; }
table { width:100%; border-collapse:collapse; font-size:12px; table-layout:fixed; }
th { text-align:left; font-size:10px; font-weight:600; color:var(--text2); padding:0 0 7px; border-bottom:0.5px solid var(--border); text-transform:uppercase; letter-spacing:.04em; }
td { padding:7px 0; border-bottom:0.5px solid var(--border); color:var(--text); vertical-align:middle; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
tr:last-child td { border-bottom:none; }
.pup { color:var(--green-text); font-weight:500; font-size:11px; }
.pdn { color:var(--red-text); font-weight:500; font-size:11px; }

/* Accordéon années */
.vtl-year-group { margin-bottom:6px; }
.vtl-year-header { display:flex; align-items:center; justify-content:space-between; padding:10px 14px; background:var(--bg); border:0.5px solid var(--border); border-radius:var(--radius-lg); cursor:pointer; transition:all 0.15s; user-select:none; }
.vtl-year-header:hover { background:var(--bg2); }
.vtl-year-header.open { border-bottom-left-radius:0; border-bottom-right-radius:0; border-bottom-color:transparent; }
.vtl-year-title { font-size:14px; font-weight:600; color:var(--text); }
.vtl-chevron { font-size:10px; color:var(--text2); flex-shrink:0; }
.vtl-year-body { display:none; background:var(--bg); border:0.5px solid var(--border); border-top:none; border-bottom-left-radius:var(--radius-lg); border-bottom-right-radius:var(--radius-lg); padding:0 14px 12px; }
.vtl-year-body.open { display:block; }

/* Timeline verticale */
.vtl { position:relative; padding-left:22px; }
.vtl::before { content:''; position:absolute; left:7px; top:0; bottom:0; width:1px; background:var(--border); }
.vtl-item { position:relative; margin-bottom:10px; }
.vtl-dot { position:absolute; left:-19px; top:10px; width:12px; height:12px; border-radius:50%; border:2px solid var(--bg2); }
.vtl-card { background:var(--bg2); border:0.5px solid var(--border); border-radius:var(--radius); padding:10px 13px; cursor:pointer; transition:all 0.15s; }
.vtl-card:hover { border-color:var(--border2); background:var(--bg3); }
.vtl-top { display:flex; align-items:flex-start; justify-content:space-between; gap:8px; margin-bottom:4px; }
.vtl-name { font-size:12px; font-weight:500; color:var(--text); line-height:1.4; }
.vtl-badge { display:inline-block; padding:2px 7px; border-radius:99px; font-size:10px; font-weight:500; flex-shrink:0; }
.vtl-meta { display:flex; gap:10px; font-size:11px; color:var(--text2); }
.vtl-detail { display:none; margin-top:8px; font-size:11px; color:var(--text2); line-height:1.6; border-top:0.5px solid var(--border); padding-top:8px; }
.vtl-detail.open { display:block; }
.vtl-detail-row { margin-bottom:5px; }
.vtl-loading { font-size:12px; color:var(--text2); padding:20px 0; text-align:center; }

/* Filtres timeline */
.tl-filters { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:14px; }
.tl-filter { padding:4px 11px; font-size:11px; border:0.5px solid var(--border2); border-radius:99px; cursor:pointer; background:transparent; color:var(--text2); }
.tl-filter:hover { background:var(--bg2); }
.tl-filter.on { font-weight:500; }
.f-all.on  { background:var(--blue-bg);   color:var(--blue-text);   border-color:transparent; }
.f-core.on { background:var(--purple-bg); color:var(--purple-text); border-color:transparent; }
.f-spam.on { background:var(--amber-bg);  color:var(--amber-text);  border-color:transparent; }
.f-iss.on  { background:var(--red-bg);    color:var(--red-text);    border-color:transparent; }

/* Timeline horizontale */
.htl-scroll { overflow-x:auto; padding-bottom:8px; }
.htl-scroll::-webkit-scrollbar { height:4px; }
.htl-scroll::-webkit-scrollbar-track { background:var(--bg2); border-radius:2px; }
.htl-scroll::-webkit-scrollbar-thumb { background:var(--border2); border-radius:2px; }
.scroll-hint { font-size:10px; color:var(--text2); margin-bottom:8px; display:flex; align-items:center; gap:4px; }

/* Floating tooltip */
/* ftip.show géré via opacity dans la première définition */

/* Footer */
.footer { text-align:center; font-size:11px; color:var(--text3); padding:24px 0 32px; margin-top:8px; border-top:0.5px solid var(--border); }
.footer a { color:var(--text3); text-decoration:none; }

/* Chart toggles */
.chart-tog{display:inline-flex;align-items:center;font-size:11px;font-weight:500;cursor:pointer;padding:4px 10px;border:0.5px solid var(--border2);border-radius:6px;background:transparent;font-family:inherit;transition:all 0.15s;color:var(--text2);}
.chart-tog.active-blue{background:var(--blue-bg);color:var(--blue-text);border-color:transparent;}
.chart-tog.active-green{background:var(--green-bg);color:var(--green-text);border-color:transparent;}
.chart-tog.active-comp{background:var(--purple-bg);color:var(--purple-text);border-color:transparent;}
.type-btn{padding:4px 9px;font-size:11px;font-weight:500;border:none;background:transparent;color:var(--text2);cursor:pointer;font-family:inherit;transition:all 0.15s;}
.type-btn.active{background:var(--bg2);color:var(--text);}
.legend-item{display:inline-flex;align-items:center;gap:4px;font-size:11px;color:var(--text2);margin-right:10px;}

/* Tab navigation */
.tab-nav{background:var(--card);border-bottom:0.5px solid var(--border);padding:0 24px;display:flex;gap:0;}
.tab-btn{padding:12px 18px;font-size:13px;font-weight:500;border:none;background:transparent;color:var(--text2);cursor:pointer;font-family:inherit;border-bottom:2px solid transparent;transition:all 0.15s;margin-bottom:-0.5px;}
.tab-btn:hover{color:var(--text);}
.tab-btn.active{color:var(--accent);border-bottom-color:var(--accent);}

/* Sidebar layout */
body{margin:0;padding:0;overflow-x:hidden;}
.app-layout{display:flex;min-height:100vh;}
.sidebar{width:72px;background:var(--accent,#185FA5);display:flex;flex-direction:column;align-items:center;padding:12px 0;gap:2px;flex-shrink:0;position:fixed;top:0;left:0;height:100vh;z-index:50;overflow-y:auto;}
.sidebar-logo{margin-bottom:12px;padding:8px 0;}
.sidebar-sep{width:32px;height:0.5px;background:rgba(255,255,255,0.2);margin:6px 0;}
.nav-item{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 6px;border-radius:8px;cursor:pointer;width:60px;transition:all 0.15s;}
.nav-item:hover{background:rgba(255,255,255,0.15);}
.nav-item.active{background:rgba(255,255,255,0.22);}
.nav-icon{width:20px;height:20px;display:flex;align-items:center;justify-content:center;}
.nav-label{font-size:9px;color:rgba(255,255,255,0.8);text-align:center;font-weight:500;line-height:1.2;}
.nav-item.active .nav-label{color:white;}
.app-main{flex:1;margin-left:72px;display:flex;flex-direction:column;min-height:100vh;}
.app-main .topbar{position:sticky;top:0;z-index:40;}
#panel-overview, #panel-keywords, #panel-traffic, #panel-positions, #panel-countries { width:100%; }

/* ── Backlinks module ── */
.bl-table{width:100%;border-collapse:collapse;font-size:13px;}
.bl-table thead th{text-align:left;font-size:11px;font-weight:600;color:var(--text2);padding:8px 10px;border-bottom:1px solid var(--border);text-transform:uppercase;letter-spacing:0.03em;}
.bl-table tbody td{padding:8px 10px;border-bottom:0.5px solid var(--border);vertical-align:middle;}
.bl-table tbody tr:hover{background:var(--bg);}
.bl-anchor-cell{max-width:320px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500;}
.bl-bar-bg{height:8px;background:var(--bg);border-radius:4px;overflow:hidden;}
.bl-bar{height:100%;background:var(--accent,#185FA5);border-radius:4px;transition:width 0.3s;}
.bl-badge-new{display:inline-block;background:var(--green-bg);color:var(--green-text);font-size:10px;font-weight:600;padding:1px 6px;border-radius:4px;margin-left:6px;vertical-align:middle;}
.bl-badge-hp{display:inline-block;background:var(--blue-bg);color:var(--blue-text);font-size:9px;font-weight:600;padding:1px 5px;border-radius:3px;margin-left:5px;vertical-align:middle;}
.bl-badge-article{display:inline-block;background:var(--amber-bg);color:var(--amber-text);font-size:9px;font-weight:600;padding:1px 5px;border-radius:3px;margin-left:5px;vertical-align:middle;}
.bl-row-new td{background:rgba(46,171,106,0.04);}
.bl-accordion td{padding:0 !important;border-bottom:0.5px solid var(--border);}
.bl-accordion-inner{padding:10px 14px 10px 24px;background:var(--bg);border-radius:0 0 6px 6px;}
.bl-link-row{padding:4px 0;font-size:12px;display:flex;gap:8px;align-items:baseline;}
.bl-link-anchor{font-weight:500;color:var(--text);white-space:nowrap;}
.bl-link-url{color:var(--accent,#185FA5);text-decoration:none;word-break:break-all;font-size:11px;}
.bl-link-url:hover{text-decoration:underline;}
.bl-load-more-btn{background:var(--bg);border:0.5px solid var(--border2);color:var(--text2);padding:8px 20px;border-radius:8px;font-size:12px;font-weight:500;cursor:pointer;font-family:inherit;transition:all 0.15s;}
.bl-load-more-btn:hover{background:var(--accent,#185FA5);color:white;border-color:transparent;}
.kpi-src{margin-top:4px;}
.kpi-src .tag{font-size:9px;padding:1px 5px;border-radius:3px;}
/* ── LLM FAQ recommendations ── */
.llm-faq-page{margin-bottom:18px;padding-bottom:14px;border-bottom:0.5px solid var(--border);}
.llm-faq-page:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0;}
.llm-faq-page-url{display:flex;align-items:center;gap:6px;margin-bottom:10px;color:var(--text2);}
.llm-faq-item{display:flex;gap:10px;padding:8px 0;align-items:flex-start;}
.llm-faq-num{width:22px;height:22px;border-radius:50%;background:var(--accent,#185FA5);color:#fff;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px;}
.llm-faq-content{flex:1;min-width:0;}
.llm-faq-question{font-size:13px;font-weight:600;color:var(--text);line-height:1.4;margin-bottom:3px;}
.llm-faq-meta{font-size:11px;color:var(--text3);display:flex;gap:6px;flex-wrap:wrap;}
.llm-faq-refs{font-size:11px;color:var(--text3);margin-top:2px;}

/* ── Period dropdown ── */
.period-menu{position:absolute;top:calc(100% + 4px);right:0;background:var(--card,#fff);border:0.5px solid var(--border);border-radius:8px;box-shadow:0 4px 12px rgba(0,0,0,0.08);z-index:100;min-width:210px;padding:4px 0;backdrop-filter:none;}
.period-opt{padding:8px 14px;font-size:12px;color:var(--text);cursor:pointer;transition:background 0.1s;}
.period-opt:hover{background:var(--bg);}
.period-opt.active{color:var(--accent,#185FA5);font-weight:600;}

@media(max-width:768px){
  #bl-kpis{grid-template-columns:repeat(3,minmax(0,1fr)) !important;}
}

/* ===== MODULE TECHNIQUE (audit hebdomadaire) ===== */
.tech-wrap { padding: 20px 24px; }
.tech-loading { padding: 40px; text-align: center; color: var(--text2); }
.tech-empty { padding: 60px 40px; text-align: center; color: var(--text2); }
.tech-empty-small { padding: 18px 20px; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; color: var(--text2); font-size: 13px; margin-bottom: 16px; }

.tech-subhead { margin-bottom: 14px; }
.tech-subhead-info { display: flex; gap: 14px; align-items: center; font-size: 12px; color: var(--text2); }
.tech-subhead-domain { font-weight: 600; color: var(--text); font-size: 13px; }
.tech-subhead-meta { color: var(--text3); font-size: 11px; }
.tech-subhead-meta::before { content: '\2022'; margin-right: 8px; color: var(--text3); }

.tech-subtabs { display: flex; gap: 4px; margin-bottom: 18px; flex-wrap: wrap; }
.tech-subtab { padding: 6px 14px; font-size: 12px; font-weight: 600; border-radius: 20px; background: none; border: none; cursor: pointer; color: var(--text3); font-family: inherit; text-transform: uppercase; letter-spacing: 0.04em; transition: all 0.12s; }
.tech-subtab:hover { color: var(--text); background: var(--bg); }
.tech-subtab.active { background: #F4DDB1; color: #6B5520; }
html[data-theme="dark"] .tech-subtab.active { background: #4A3A1C; color: #FAD79E; }

.tech-score-card { background: var(--bg); border: 1px solid var(--border); border-radius: 12px; padding: 24px; display: flex; align-items: center; gap: 32px; margin-bottom: 18px; }
.tech-score-ring { position: relative; width: 140px; height: 140px; flex-shrink: 0; }
.tech-score-num { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.tech-score-num .big { font-size: 48px; font-weight: 700; line-height: 1; letter-spacing: -1px; color: var(--text); }
.tech-score-num .out { font-size: 11px; color: var(--text3); margin-top: 2px; }
.tech-score-info { flex: 1; }
.tech-score-info .title { font-size: 14px; font-weight: 600; margin-bottom: 4px; color: var(--text); }
.tech-score-info .desc { font-size: 12px; color: var(--text2); margin-bottom: 14px; line-height: 1.5; }

.tech-axes { display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; margin-bottom: 18px; }
.tech-axis-card { background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 14px 12px; text-align: center; }
.tech-axis-name { font-size: 10px; color: var(--text3); text-transform: uppercase; letter-spacing: 0.3px; font-weight: 600; margin-bottom: 8px; }
.tech-axis-num { font-size: 26px; font-weight: 700; line-height: 1; }
.tech-axis-num.ok { color: var(--green-text, #2E7D32); }
.tech-axis-num.warn { color: #B45309; }
.tech-axis-num.danger { color: var(--red-text, #B71C1C); }
.tech-axis-delta { font-size: 10px; color: var(--text2); margin-top: 6px; }

.tech-section-h { display: flex; align-items: center; gap: 12px; margin: 22px 0 12px; }
.tech-section-h .lbl { font-size: 11px; font-weight: 600; color: var(--text3); text-transform: uppercase; letter-spacing: 0.06em; }
.tech-section-h .ln { flex: 1; height: 1px; background: var(--border); }
.tech-section-h .meta { font-size: 11px; color: var(--text3); }

.tech-section-card { background: var(--bg); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; margin-bottom: 14px; }
.tech-section-card .hd { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--border); }
.tech-section-card .hd .t { font-size: 13px; font-weight: 600; color: var(--text); }
.tech-section-card .hd .m { font-size: 11px; color: var(--text3); }

.tech-kpi-row { display: grid; gap: 12px; margin-bottom: 14px; }
.tech-kpi-row.kpi-3 { grid-template-columns: repeat(3, 1fr); }
.tech-kpi-row.kpi-4 { grid-template-columns: repeat(4, 1fr); }
.tech-kpi-card { background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 14px 18px; }
.tech-kpi-card .lbl { font-size: 11px; font-weight: 600; color: var(--text3); text-transform: uppercase; letter-spacing: 0.3px; margin-bottom: 8px; }
.tech-kpi-card .val { font-size: 26px; font-weight: 700; line-height: 1; color: var(--text); letter-spacing: -0.5px; }
.tech-kpi-card .val.ok { color: var(--green-text, #2E7D32); }
.tech-kpi-card .val.warn { color: #B45309; }
.tech-kpi-card .val.danger { color: var(--red-text, #B71C1C); }
.tech-kpi-card .d { font-size: 11px; color: var(--text2); margin-top: 8px; }

.tech-alerts-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 18px; }
.tech-alert-card { background: var(--bg); border: 1px solid var(--border); border-top: 3px solid var(--border2); border-radius: 8px; padding: 16px 18px; }
.tech-alert-card.reg { border-top-color: #B71C1C; }
.tech-alert-card.imp { border-top-color: #2E7D32; }
.tech-alert-card.neutral { border-top-color: #1E3A8A; }
.tech-alert-card .title { font-size: 13px; font-weight: 600; margin-bottom: 12px; color: var(--text); }
.tech-alert-card .row { padding: 8px 0 8px 12px; border-left: 2px solid var(--border); margin-bottom: 8px; font-size: 12px; }
.tech-alert-card .row:last-child { margin-bottom: 0; }
.tech-alert-card .row .t { color: var(--text); }
.tech-alert-card .row .m { font-size: 11px; color: var(--text2); margin-top: 2px; }

.tech-trend-card { background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 16px 18px; margin-bottom: 14px; }

.tech-stat-pills { display: flex; gap: 8px; padding: 14px 18px; flex-wrap: wrap; }
.tech-stat-pill { display: flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 6px; font-size: 12px; font-weight: 600; }
.tech-stat-pill .code { font-family: 'SF Mono', Monaco, monospace; font-size: 11px; padding: 2px 7px; border-radius: 4px; background: rgba(0,0,0,0.05); }
.tech-stat-pill.ok { background: #E8F5E9; color: #2E7D32; }
.tech-stat-pill.warn { background: #FEF3C7; color: #B45309; }
.tech-stat-pill.danger { background: #FFEBEE; color: #B71C1C; }
.tech-stat-pill.purple { background: #F3E5F5; color: #6A1B9A; }
.tech-stat-pill.neutral { background: var(--bg2); color: var(--text2); }

.tech-robots { font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace; font-size: 11px; background: #1c2230; color: #A8FF78; padding: 18px 22px; margin: 0; line-height: 1.8; overflow-x: auto; white-space: pre-wrap; }

.tech-check { display: flex; align-items: center; gap: 12px; padding: 11px 20px; border-bottom: 1px solid var(--border); font-size: 13px; }
.tech-check:last-child { border-bottom: 0; }
.tech-check-icon { font-weight: 700; font-family: 'SF Mono', Monaco, monospace; font-size: 11px; padding: 3px 8px; border-radius: 4px; flex-shrink: 0; }
.tech-check.ok .tech-check-icon { background: #E8F5E9; color: #2E7D32; }
.tech-check.ko .tech-check-icon { background: #FFEBEE; color: #B71C1C; }
.tech-check-detail { margin-left: auto; color: var(--text2); font-size: 12px; }
.tech-check.ko .tech-check-detail { color: #B71C1C; }

.tech-tbl { width: 100%; border-collapse: collapse; font-size: 12px; }
.tech-tbl th { text-align: left; padding: 10px 18px; font-size: 11px; font-weight: 600; color: var(--text2); background: var(--bg); border-bottom: 1px solid var(--border); text-transform: uppercase; letter-spacing: 0.04em; }
.tech-tbl td { padding: 10px 18px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.tech-tbl tr:last-child td { border-bottom: 0; }
.tech-tbl tr:hover td { background: var(--bg); }
.tech-tbl td.url { font-family: 'SF Mono', Monaco, monospace; font-size: 11px; color: var(--blue-text, #185FA5); max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.tech-pill { display: inline-block; font-size: 11px; font-weight: 600; padding: 2px 10px; border-radius: 12px; font-family: 'SF Mono', Monaco, monospace; }
.tech-pill.ok { background: #E8F5E9; color: #2E7D32; }
.tech-pill.warn { background: #FEF3C7; color: #B45309; }
.tech-pill.danger { background: #FFEBEE; color: #B71C1C; }

.tech-delta { font-size: 11px; font-weight: 600; font-family: 'SF Mono', Monaco, monospace; }
.tech-delta.up { color: #2E7D32; }
.tech-delta.down { color: #B71C1C; }
.tech-delta.flat { color: var(--text3); }

@media (max-width: 768px) {
  .tech-axes { grid-template-columns: repeat(2, 1fr); }
  .tech-kpi-row.kpi-3, .tech-kpi-row.kpi-4 { grid-template-columns: 1fr 1fr; }
  .tech-alerts-grid { grid-template-columns: 1fr; }
  .tech-score-card { flex-direction: column; text-align: center; gap: 18px; }
}

/* ── Onglet IA Overview (clients MonitoRank) ─────────────────────────────
   Trois emplacements mesures dans chaque reponse generee par Google, nommes
   comme dans MonitoRank : panneau de sources, sources de citations, citations. */
.aio-intro { display:grid; grid-template-columns:1fr 1.05fr; gap:22px; align-items:center; }
@media(max-width:900px){ .aio-intro { grid-template-columns:1fr; } }
.aio-intro h3 { font-size:18px; font-weight:650; letter-spacing:-0.3px; margin-bottom:8px; text-wrap:balance; }
.aio-intro p { font-size:13.5px; color:var(--text2); margin-bottom:10px; max-width:62ch; }
.aio-intro strong { color:var(--text); font-weight:600; }
.aio-chiffres { display:flex; gap:26px; margin-top:14px; padding-top:14px; border-top:0.5px solid var(--border); flex-wrap:wrap; }
.aio-chiffres b { display:block; font-size:24px; font-weight:650; letter-spacing:-0.6px; font-variant-numeric:tabular-nums; }
.aio-chiffres span:not(.tip) { font-size:11.5px; color:var(--text2); }
.aio-serp { width:100%; height:auto; display:block; }

.aio-places { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:16px; }
@media(max-width:900px){ .aio-places { grid-template-columns:1fr; } }
.aio-place { background:var(--bg); border:0.5px solid var(--border); border-radius:var(--radius-lg); padding:14px 16px 16px; display:flex; flex-direction:column; gap:8px; }
.aio-place-hd { display:flex; align-items:center; gap:7px; }
.aio-place-hd h4 { font-size:13px; font-weight:600; }
.aio-dot { width:9px; height:9px; border-radius:3px; flex:none; }
.aio-val { font-size:30px; font-weight:650; letter-spacing:-0.8px; font-variant-numeric:tabular-nums; display:flex; align-items:baseline; gap:6px; }
.aio-val .u { font-size:12px; font-weight:400; color:var(--text2); letter-spacing:0; }
.aio-d { font-size:11.5px; font-weight:600; align-self:flex-start; padding:2px 8px; border-radius:20px; }
.aio-d-up { background:var(--green-bg); color:var(--green-text); }
.aio-d-dn { background:var(--red-bg); color:var(--red-text); }
.aio-d-flat { background:var(--bg3); color:var(--text2); }
.aio-meta { display:flex; gap:20px; padding:9px 0; border-top:0.5px solid var(--border); border-bottom:0.5px solid var(--border); }
.aio-meta span:not(.tip) { display:block; font-size:10.5px; color:var(--text3); }
.aio-meta b { font-size:15px; font-weight:600; font-variant-numeric:tabular-nums; }
.aio-def { font-size:12px; color:var(--text2); }
.aio-clair { font-size:12px; color:var(--text); background:var(--bg2); border-radius:7px; padding:8px 10px; }

.aio-legend { display:flex; gap:16px; flex-wrap:wrap; font-size:11.5px; color:var(--text2); margin-top:8px; }
.aio-legend b { color:var(--text); font-variant-numeric:tabular-nums; }
.aio-legend i { width:10px; height:3px; border-radius:2px; display:inline-block; margin-right:6px; vertical-align:middle; }

.aio-scroll { overflow-x:auto; }
.aio-path { color:var(--text2); font-size:11px; max-width:215px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.aio-pos { display:inline-block; min-width:26px; padding:1px 7px; border-radius:11px; font-size:11px; font-weight:600; background:var(--bg3); color:var(--text2); text-align:center; }
.aio-tag { display:inline-block; padding:2px 8px; border-radius:5px; font-size:10.5px; font-weight:600; margin-right:4px; white-space:nowrap; }
.aio-tag b { font-weight:700; font-variant-numeric:tabular-nums; }
.aio-t-panel { background:var(--blue-bg); color:var(--blue-text); }
.aio-t-source { background:var(--green-bg); color:var(--green-text); }
.aio-t-citation { background:var(--amber-bg); color:var(--amber-text); }
.aio-t-none { background:var(--red-bg); color:var(--red-text); }
.aio-alerte { border-left:3px solid var(--red); }
.aio-foot { font-size:11.5px; color:var(--text3); margin-top:10px; }
.aio-note h4 { font-size:12px; font-weight:600; margin:14px 0 5px; }
.aio-note ul { padding-left:18px; font-size:12.5px; color:var(--text2); }
.aio-note li { margin-bottom:4px; max-width:82ch; }
.aio-synthese { display:flex; align-items:flex-start; gap:10px; background:var(--bg); border:0.5px solid var(--border); border-radius:var(--radius-lg); padding:13px 16px; margin-bottom:16px; }
.aio-synthese p { font-size:14.5px; line-height:1.45; }
.aio-synthese strong { font-weight:600; }
.aio-s-dot { width:9px; height:9px; border-radius:50%; flex:none; margin-top:6px; }
.aio-s-hausse { border-left:3px solid var(--green); }
.aio-s-hausse .aio-s-dot { background:var(--green); }
.aio-s-baisse { border-left:3px solid var(--red); }
.aio-s-baisse .aio-s-dot { background:var(--red); }
.aio-s-neutre { border-left:3px solid var(--text3); }
.aio-s-neutre .aio-s-dot { background:var(--text3); }
.aio-repere { width:16px; height:16px; border-radius:50%; flex:none; color:#fff; font-size:10px; font-weight:700; display:inline-flex; align-items:center; justify-content:center; }