/* Suivi Pos. DR & TF : popup de cadrage, widget d'import, cartes (project.html) et tableau (suivi.html). */

.ca-label { display: block; font-size: .8125rem; font-weight: 500; color: #374151; margin-bottom: .375rem; }
.dark .ca-label { color: #d1d5db; }
.ca-input {
  width: 100%; padding: .5rem .875rem; border-radius: .5rem; border: 1px solid #e5e7eb;
  background: #fff; color: #111827; font-size: .875rem; outline: none; transition: border-color .15s, box-shadow .15s;
}
.dark .ca-input { background: #1f2937; border-color: #374151; color: #f9fafb; }
.ca-input:focus { border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99, 102, 241, .2); }

.ca-seg { display: inline-flex; padding: 3px; border-radius: .625rem; background: #f3f4f6; gap: 2px; }
.dark .ca-seg { background: #1f2937; }
.ca-seg button { display: inline-flex; align-items: center; gap: .375rem; padding: .375rem .875rem; border-radius: .5rem; font-size: .8125rem; color: #6b7280; }
.ca-seg button.active { background: #fff; color: #4f46e5; box-shadow: 0 1px 2px rgba(0, 0, 0, .08); font-weight: 500; }
.dark .ca-seg button.active { background: #312e81; color: #e0e7ff; }

.si-tabs { display: flex; gap: .25rem; border-bottom: 1px solid #e5e7eb; margin-bottom: .75rem; }
.dark .si-tabs { border-color: #374151; }
.si-tab { padding: .5rem .875rem; font-size: .8125rem; color: #6b7280; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.si-tab.active { color: #4f46e5; border-color: #4f46e5; font-weight: 500; }
.dark .si-tab.active { color: #a5b4fc; border-color: #818cf8; }
.si-textarea { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .8125rem; resize: vertical; tab-size: 4; }
.si-drop {
  display: flex; align-items: center; justify-content: center; gap: .5rem; padding: 1.25rem; cursor: pointer;
  border: 1.5px dashed #c7d2fe; border-radius: .75rem; color: #4f46e5; font-size: .875rem; background: #eef2ff66;
}
.dark .si-drop { border-color: #3730a3; color: #a5b4fc; background: #1e1b4b55; }
.si-hint { font-size: .75rem; color: #6b7280; margin-top: .375rem; }
.si-muted { font-size: .8125rem; color: #6b7280; }
.si-error { font-size: .8125rem; color: #b91c1c; background: #fef2f2; border-radius: .5rem; padding: .5rem .75rem; }
.dark .si-error { color: #fca5a5; background: #450a0a66; }
.si-preview { margin-top: .75rem; display: grid; gap: .5rem; }
.si-preview:empty { display: none; }
.si-stats { display: flex; flex-wrap: wrap; gap: .375rem .875rem; font-size: .8125rem; color: #374151; padding: .625rem .75rem; border-radius: .5rem; background: #f9fafb; }
.dark .si-stats { color: #e5e7eb; background: #111827; }
.si-stats strong { font-weight: 600; font-variant-numeric: tabular-nums; }
.si-estimate { font-size: .75rem; color: #4b5563; }
.dark .si-estimate { color: #9ca3af; }
.si-details { font-size: .75rem; color: #92400e; }
.dark .si-details { color: #fcd34d; }
.si-details summary { cursor: pointer; }
.si-details ul { margin: .375rem 0 0 1rem; list-style: disc; max-height: 8rem; overflow: auto; color: #6b7280; word-break: break-all; }

.ca-card { display: block; padding: 1.125rem; border-radius: 1rem; transition: transform .15s, border-color .15s; }
.ca-card:hover { transform: translateY(-2px); border-color: rgba(99, 102, 241, .5); }
.ca-card-icon { width: 2.5rem; height: 2.5rem; flex: none; border-radius: .75rem; display: flex; align-items: center; justify-content: center; color: #6366f1; background: linear-gradient(135deg, rgba(99, 102, 241, .18), rgba(249, 115, 22, .08)); }
.ca-card-title { font-weight: 600; color: #111827; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dark .ca-card-title { color: #fff; }
.ca-card-domain { font-size: .8125rem; color: #6b7280; }
.ca-card-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin-top: 1rem; }
.ca-card-facts dt { font-size: .6875rem; text-transform: uppercase; letter-spacing: .04em; color: #9ca3af; }
.ca-card-facts dd { font-size: .875rem; font-weight: 500; color: #1f2937; font-variant-numeric: tabular-nums; }
.dark .ca-card-facts dd { color: #e5e7eb; }
.ca-card-meta { margin-top: .75rem; font-size: .75rem; color: #9ca3af; }
.ca-badge { flex: none; font-size: .6875rem; font-weight: 500; padding: .1875rem .5rem; border-radius: 999px; white-space: nowrap; }
.ca-badge-ok { background: #dcfce7; color: #166534; }
.ca-badge-run { background: #e0e7ff; color: #3730a3; }
.ca-badge-pause { background: #f3f4f6; color: #4b5563; }
.ca-badge-partial { background: #fef3c7; color: #92400e; }
.ca-badge-fail { background: #fee2e2; color: #991b1b; }

.suivi-btn { display: inline-flex; align-items: center; gap: .5rem; padding: .5rem .875rem; border-radius: .5rem; font-size: .875rem; color: #4b5563; border: 1px solid #d1d5db; background: transparent; transition: background .15s; }
.suivi-btn:hover { background: #f9fafb; }
.dark .suivi-btn { color: #d1d5db; border-color: #4b5563; }
.dark .suivi-btn:hover { background: #1f2937; }
.suivi-btn-icon { padding: .5rem; }
/* Sous 1680 px, les actions secondaires passent en icônes (infobulle et aria-label) pour laisser
   au titre et au sous-titre toute leur longueur. */
@media (max-width: 1679px) { .suivi-btn-lbl { display: none; } .suivi-actions .suivi-btn { padding: .5rem; } }
.suivi-btn:disabled, .btn-primary:disabled { opacity: .5; cursor: not-allowed; }
.suivi-menu { position: absolute; right: 0; top: calc(100% + .375rem); z-index: 30; min-width: 15rem; padding: .375rem; border-radius: .75rem; background: #fff; border: 1px solid #e5e7eb; box-shadow: 0 10px 30px rgba(0, 0, 0, .12); }
.dark .suivi-menu { background: #12121a; border-color: #374151; }
.suivi-menu button { display: block; width: 100%; text-align: left; padding: .5rem .75rem; border-radius: .5rem; font-size: .875rem; }
.suivi-menu button:hover { background: #f3f4f6; }
.dark .suivi-menu button:hover { background: #1f2937; }

.suivi-status { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.25rem; font-size: .8125rem; color: #4b5563; margin-bottom: 1rem; }
.dark .suivi-status { color: #9ca3af; }
.suivi-status .st-run { display: inline-flex; align-items: center; gap: .5rem; color: #3730a3; font-weight: 500; }
.dark .suivi-status .st-run { color: #a5b4fc; }
.st-dot { width: .5rem; height: .5rem; border-radius: 999px; background: #6366f1; animation: st-pulse 1.4s ease-in-out infinite; }
@keyframes st-pulse { 50% { opacity: .3; } }
@media (prefers-reduced-motion: reduce) { .st-dot { animation: none; } }
.suivi-status .st-warn { color: #92400e; }
.suivi-status .st-warn button { margin-left: .5rem; text-decoration: underline; font-weight: 500; }

/* Titre du tableau : visible seulement en mode capture. */
.suivi-caption { display: none; }

/* ── Tableau du suivi ────────────────────────────────────────────────────────
   Une seule palette pour l'écran et l'export : chaque jeton --sv-* a son double,
   même valeur hexadécimale, dans PALETTE (assets/js/suivi-export.js).
   Échelle des rangs en indigo (plus c'est foncé, mieux c'est classé) ; le vert et le
   rouge pleins sont réservés aux variations (l'erreur n'a qu'un contour rouge pointillé),
   l'orange à la meilleure position, le jaune aux lignes d'une même URL. */
:root {
  --sv-ink: #1e1b4b;          /* en-tête : URL, mot-clé, volume, relevés, meilleure position */
  --sv-ink-var: #312e81;      /* en-tête du bloc Variation */
  --sv-head-text: #ffffff;    /* texte des en-têtes foncés */
  --sv-sub-bg: #e0e7ff;       /* sous-en-tête Pos. / DR / TF */
  --sv-sub-text: #312e81;     /* texte du sous-en-tête */
  --sv-surface: #ffffff;      /* fond des lignes */
  --sv-block-tint: #f2f4fd;   /* un relevé sur deux, pour séparer les blocs sans bordure lourde */
  --sv-line: #e2e8f0;         /* filets entre les lignes */
  --sv-block-line: #c7d2fe;   /* filet vertical en tête de bloc */
  --sv-text: #1e293b;         /* valeurs */
  --sv-text-soft: #475569;    /* mot-clé, rangs 21 à 100 */
  --sv-muted: #5b6b80;        /* > 100, n.d., non mesuré, domaine atténué */
  --sv-link: #3730a3;         /* chemin de l'URL */
  --sv-rank1-bg: #4f46e5;     /* rang 1 à 3 */
  --sv-rank1-text: #ffffff;
  --sv-rank2-bg: #c7d2fe;     /* rang 4 à 10 */
  --sv-rank2-text: #312e81;
  --sv-rank3-bg: #eef2ff;     /* rang 11 à 20 */
  --sv-rank3-text: #4338ca;
  --sv-rank3-ring: #c7d2fe;
  --sv-up-bg: #dcfce7;        /* variation favorable, entrée dans le top 100 */
  --sv-up-text: #166534;
  --sv-flat-bg: #f1f5f9;      /* variation nulle */
  --sv-flat-text: #475569;
  --sv-down-bg: #fee2e2;      /* variation défavorable, sortie du top 100 */
  --sv-down-text: #991b1b;
  --sv-err-text: #b91c1c;     /* erreur d'appel */
  --sv-err-ring: #fca5a5;
  --sv-best-bg: #fff7ed;      /* colonne Meilleure position */
  --sv-best-text: #9a3412;
  --sv-best-mark: #f97316;    /* filet orange sous l'en-tête Meilleure position */
  --sv-dup-bg: #fef9c3;       /* URL présente sur plusieurs lignes */
  --sv-dup-bar: #ca8a04;
  --sv-pending: #4f46e5;      /* relevé en cours */
}
.dark {
  --sv-ink: #1e1b4b;
  --sv-ink-var: #2b2770;
  --sv-sub-bg: #1c1a3d;
  --sv-sub-text: #c7d2fe;
  --sv-surface: #12121a;
  --sv-block-tint: #171728;
  --sv-line: #23233a;
  --sv-block-line: #34307a;
  --sv-text: #e5e7eb;
  --sv-text-soft: #cbd5e1;
  --sv-muted: #94a3b8;
  --sv-link: #a5b4fc;
  --sv-rank2-bg: #312e81;
  --sv-rank2-text: #e0e7ff;
  --sv-rank3-bg: #1e1b4b;
  --sv-rank3-text: #c7d2fe;
  --sv-rank3-ring: #3730a3;
  --sv-up-bg: #0f2e1d;
  --sv-up-text: #86efac;
  --sv-flat-bg: #1e293b;
  --sv-flat-text: #cbd5e1;
  --sv-down-bg: #3b1212;
  --sv-down-text: #fca5a5;
  --sv-err-text: #fca5a5;
  --sv-err-ring: #7f1d1d;
  --sv-best-bg: #1f1510;
  --sv-best-text: #fdba74;
  --sv-dup-bg: #29230c;
  --sv-dup-bar: #ca8a04;
  --sv-pending: #a5b4fc;
}

/* Le tableau défile dans sa propre zone, ses deux rangées d'en-tête collées en haut ; sa hauteur
   maximale (fitTable, suivi-page.js) le fait finir au bas de l'écran. Légende et analyse sont
   dessous : la page défile pour les atteindre. */
.suivi-table-wrap { overflow: auto; border-radius: .875rem; border: 1px solid var(--sv-line); background: var(--sv-surface); box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 24px -12px rgba(30, 27, 75, .18); }
.suivi-table { border-collapse: separate; border-spacing: 0; min-width: 100%; font-size: .8125rem; color: var(--sv-text); }
.suivi-table th, .suivi-table td { padding: 0 .625rem; white-space: nowrap; }
/* Chiffres tabulaires sur les seules colonnes chiffrées (dans Inter, ils élargissent aussi le trait d'union des URL). */
.suivi-table td.m, .suivi-table td.c-vol, .suivi-table td.c-best, .suivi-legend { font-variant-numeric: tabular-nums; }

/* En-tête : deux rangées collantes, la seconde à hauteur fixe sous la première. */
.suivi-table thead th { position: sticky; z-index: 2; font-weight: 600; }
.suivi-table thead tr:first-child th { top: 0; height: 2.5rem; background: var(--sv-ink); color: var(--sv-head-text); font-size: .75rem; letter-spacing: .01em; }
.suivi-table thead tr:nth-child(2) th { top: 2.5rem; height: 1.875rem; background: var(--sv-sub-bg); color: var(--sv-sub-text); font-size: .6875rem; font-weight: 600; text-align: center; border-bottom: 1px solid var(--sv-block-line); }
.suivi-table thead th[rowspan] { top: 0; border-bottom: 1px solid var(--sv-ink); }
.suivi-table thead th.g-rel, .suivi-table thead th.g-var { text-align: center; }
.suivi-table thead th.g-var { background: var(--sv-ink-var); }
.suivi-table thead th.c-best { text-align: center; white-space: normal; line-height: 1.25; box-shadow: inset 0 -3px 0 var(--sv-best-mark); }
.th-sub { display: block; font-size: .625rem; font-weight: 500; opacity: .8; line-height: 1.1; }
.suivi-table th.c-url, .suivi-table th.c-kw { text-align: left; }
.suivi-table th.c-vol { text-align: right; }
.suivi-table thead tr:first-child th:first-child { border-top-left-radius: .8125rem; }
.suivi-table thead tr:first-child th:last-child { border-top-right-radius: .8125rem; }
.th-date { font-size: .8125rem; font-weight: 700; letter-spacing: .02em; }

/* Corps */
.suivi-table tbody td { height: 2.5rem; background: var(--sv-surface); border-bottom: 1px solid var(--sv-line); }
.suivi-table tbody tr:last-child td { border-bottom: 0; }
.suivi-table tbody tr:hover td { background-image: linear-gradient(rgba(99, 102, 241, .06), rgba(99, 102, 241, .06)); }
.suivi-table .alt { background-color: var(--sv-block-tint) !important; }
.suivi-table .blk { border-left: 1px solid var(--sv-block-line); }
.suivi-table thead tr:first-child th.blk { border-left-color: rgba(255, 255, 255, .16); }
.suivi-table td.m { text-align: center; }
.suivi-table td.c-vol { text-align: right; color: var(--sv-text-soft); }
.suivi-table td.c-kw { color: var(--sv-text-soft); max-width: 13rem; overflow: hidden; text-overflow: ellipsis; }
.suivi-table .c-url { position: sticky; left: 0; z-index: 1; max-width: 20rem; overflow: hidden; text-overflow: ellipsis; }
.suivi-table thead .c-url { z-index: 3; }
.suivi-table td.c-url, .suivi-table th.c-url { padding-left: 1rem; }
.suivi-table a { color: var(--sv-link); text-decoration: none; }
.suivi-table a:hover { text-decoration: underline; }
.suivi-table a:focus-visible { outline: 2px solid var(--sv-rank1-bg); outline-offset: 2px; border-radius: 2px; }
.u-host { color: var(--sv-muted); }
.u-home { font-style: italic; }

/* Lignes d'une même URL : fond jaune et liseré continus sur la cellule URL
   (même repère que le format conditionnel de l'export). */
.suivi-table tr.dup td.c-url { background: var(--sv-dup-bg); box-shadow: inset 3px 0 0 var(--sv-dup-bar); }
.suivi-table tr.dup:not(.dup-last) td.c-url { border-bottom-color: transparent; }
.suivi-table tr.dup-next td.c-url a { color: var(--sv-muted); }

/* Rangs : même échelle que l'export, la valeur toujours affichée. */
.pos { display: inline-block; min-width: 2rem; padding: .1875rem .375rem; border-radius: .375rem; font-weight: 600; line-height: 1.2; }
.p-top3 { background: var(--sv-rank1-bg); color: var(--sv-rank1-text); }
.p-top10 { background: var(--sv-rank2-bg); color: var(--sv-rank2-text); }
.p-top20 { background: var(--sv-rank3-bg); color: var(--sv-rank3-text); box-shadow: inset 0 0 0 1px var(--sv-rank3-ring); }
.p-far { color: var(--sv-text-soft); font-weight: 500; }
.muted { color: var(--sv-muted); }
/* Autre page du domaine classée à la place de l'URL suivie (information, pas une position de l'URL). */
.pos-alt { display: inline-block; margin-left: .3rem; padding: 0 .3rem; border-radius: .3rem; font-size: .6875rem; font-weight: 600; color: var(--sv-link); background: var(--sv-block-tint, rgba(99, 102, 241, .08)); white-space: nowrap; }
.nm { color: var(--sv-muted); }
.nd { color: var(--sv-muted); font-style: italic; }
.pending { color: var(--sv-pending); font-weight: 600; letter-spacing: .1em; }
.err { display: inline-block; padding: .0625rem .375rem; border-radius: .375rem; border: 1px dashed var(--sv-err-ring); color: var(--sv-err-text); font-weight: 600; font-size: .75rem; }

/* Variations : pastilles douces, flèche + valeur (la couleur ne porte jamais seule le sens). */
.var { display: inline-flex; align-items: center; justify-content: center; gap: .25rem; min-width: 2.75rem; padding: .1875rem .5rem; border-radius: 999px; font-weight: 600; font-size: .75rem; line-height: 1.2; }
.var i { font-style: normal; font-size: .625rem; }
.var-up { background: var(--sv-up-bg); color: var(--sv-up-text); }
.var-flat { background: var(--sv-flat-bg); color: var(--sv-flat-text); }
.var-down { background: var(--sv-down-bg); color: var(--sv-down-text); }

/* Meilleure position : la seule note orange du tableau. */
.suivi-table td.c-best { text-align: center; background: var(--sv-best-bg); }
.best { font-weight: 700; font-size: .875rem; color: var(--sv-best-text); }

.th-del { margin-left: .375rem; opacity: .55; vertical-align: -2px; }
.th-del:hover, .th-del:focus-visible { opacity: 1; }
.th-kind { margin-left: .375rem; font-size: .625rem; font-weight: 600; padding: .0625rem .375rem; border-radius: 999px; background: rgba(255, 255, 255, .16); vertical-align: 1px; }

/* Légende sous le tableau */
.suivi-legend { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin-top: .875rem; font-size: .75rem; color: var(--sv-text-soft); }
.suivi-legend[hidden] { display: none; }
.suivi-legend span.lg { display: inline-flex; align-items: center; gap: .375rem; }
.suivi-legend .pos, .suivi-legend .var { min-width: 0; font-size: .6875rem; }
.lg-dup { display: inline-block; width: .875rem; height: .875rem; border-radius: .1875rem; background: var(--sv-dup-bg); box-shadow: inset 3px 0 0 var(--sv-dup-bar); }

.suivi-lines-list { max-height: 16rem; overflow: auto; border: 1px solid #e5e7eb; border-radius: .5rem; font-size: .8125rem; }
.dark .suivi-lines-list { border-color: #374151; }
.suivi-lines-list label { display: flex; gap: .625rem; align-items: center; padding: .375rem .75rem; border-bottom: 1px solid #f3f4f6; }
.dark .suivi-lines-list label { border-color: #1f2937; }
.suivi-lines-list .lk { color: #6b7280; }

/* Mode capture : rien que le tableau, son titre et sa légende, fond clair, pleine largeur. */
body.suivi-capture #sidebar-container, body.suivi-capture .suivi-actions, body.suivi-capture #suivi-status, body.suivi-capture .th-del { display: none !important; }
body.suivi-capture .mesh-gradient { display: none; }
body.suivi-capture .suivi-header { display: none; }
body.suivi-capture .suivi-main { padding: 2rem; background: #fff; }
body.suivi-capture .suivi-table-wrap { box-shadow: none; }
/* Bouton de sortie du mode capture, en haut à droite (Échap fait de même). */
.suivi-capture-exit { display: none; }
body.suivi-capture .suivi-capture-exit { display: inline-flex; position: fixed; top: 1rem; right: 1.25rem; z-index: 40; background: #fff; box-shadow: 0 4px 14px rgba(15, 23, 42, .12); }
@media print { body.suivi-capture .suivi-capture-exit { display: none; } }
body.suivi-capture .suivi-table tbody tr:hover td { background-image: none; }
body.suivi-capture .suivi-caption { display: block; margin-bottom: 1.125rem; }
.suivi-caption strong { display: block; font-size: 1.5rem; line-height: 1.2; font-weight: 700; letter-spacing: -.01em; color: var(--sv-ink); }
.suivi-caption span { display: block; margin-top: .25rem; font-size: .8125rem; color: var(--sv-text-soft); }

/* Analyse sous le tableau et sa légende : trois cartes, le chiffre au dernier relevé en grand, gains, pertes et ratio dessous. */
.suivi-analyse { margin-top: 1.5rem; }
.suivi-analyse[hidden] { display: none; }
.an-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .75rem; margin-bottom: .625rem; }
.an-head strong { font-size: .9375rem; font-weight: 700; color: var(--sv-ink); }
.dark .an-head strong { color: var(--sv-text); }
.an-head span { font-size: .75rem; color: var(--sv-text-soft); }
.an-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; }
@media (max-width: 1023px) { .an-grid { grid-template-columns: 1fr; } }
.an-card { padding: .875rem 1.125rem; border-radius: .875rem; border: 1px solid var(--sv-line); background: var(--sv-surface); box-shadow: 0 1px 2px rgba(15, 23, 42, .04); }
.an-title { font-size: .6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--sv-text-soft); }
.an-solde { margin-top: .25rem; font-size: 1.75rem; line-height: 1.1; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.an-unit { margin-left: .5rem; font-size: .75rem; font-weight: 500; letter-spacing: 0; color: var(--sv-text-soft); }
.an-up { color: var(--sv-up-text); }
.an-down { color: var(--sv-down-text); }
.an-flat { color: var(--sv-text); }
.an-facts { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: .25rem 1.75rem; margin-top: .625rem; }
.an-facts dt { font-size: .6875rem; color: var(--sv-muted); }
.an-facts dd { font-size: .9375rem; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--sv-text); }
.an-foot { margin-top: .5rem; font-size: .6875rem; color: var(--sv-muted); }