/* GEO Tracker — rapport éditorial de données
   Papier chaud, encre profonde, chiffres Fraunces, accent terracotta. */

/* === Print : capture PDF mensuelle === */
@media print {
  body {
    background: #fff !important;
    background-image: none !important;
    font-size: 13px;
  }
  .wrap { padding: 0 18px !important; max-width: 100% !important; }
  /* Cache les éléments interactifs qui n'ont pas de sens sur un PDF */
  .hero-trend-actions,
  .run-pill,
  .masthead .runmeta > p:first-child,
  .hero-tip { display: none !important; }
  /* Compact le hero pour qu'il rentre proprement */
  .hero-trend { page-break-inside: avoid; }
  section { page-break-inside: avoid; }
  .kpis { page-break-inside: avoid; }
  /* Évite les sauts de page malheureux dans la matrice */
  table.matrix tr { page-break-inside: avoid; }
  .colophon { color: #666; font-size: 10.5px; padding-top: 14px; }
}

:root {
  --paper: #faf6ef;
  --card: #fffdf8;
  --ink: #1c1b17;
  --muted: #55504a;
  --line: #e4dcce;
  --line-soft: #efe9dd;
  --accent: #c2502b;
  --green: #0e5a45;
  --display: "Space Grotesk", "IBM Plex Sans", sans-serif;
  --sans: "Outfit", -apple-system, sans-serif;
  --mono: "IBM Plex Mono", monospace;
}

* { box-sizing: border-box; margin: 0; }

body {
  background: var(--paper);
  background-image: radial-gradient(circle at 1px 1px, rgba(28,27,23,.04) 1px, transparent 0);
  background-size: 26px 26px;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16.5px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: 1080px; margin: 0 auto; padding: 48px 28px 90px; }

/* ---------- entête ---------- */
.masthead {
  display: flex; justify-content: space-between; align-items: flex-end;
  border-bottom: 3px solid var(--ink); padding-bottom: 18px; margin-bottom: 8px;
}
.masthead .kicker {
  font-family: var(--sans); font-weight: 600; font-size: 15px; font-weight: 500; letter-spacing: .06em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 12px;
}
.masthead h1 {
  font-family: var(--display); font-weight: 700; font-size: 48px;
  line-height: 1.05; letter-spacing: -.025em;
}
.masthead .domain { color: var(--muted); font-size: 16px; margin-top: 6px; }
.masthead .runmeta { text-align: right; color: var(--muted); font-size: 15px; }
.masthead .runmeta strong { display: block; color: var(--ink); font-size: 17px; }

.providers-legend { display: flex; gap: 18px; padding: 14px 0 0; flex-wrap: wrap; }
.providers-legend span { font-size: 14.5px; color: var(--muted); display: flex; align-items: center; gap: 7px; }
.providers-legend.is-picker { gap: 8px; align-items: center; }
.providers-legend .picker-label { font-size: 13px; margin-right: 4px; }
.ia-chip { display: inline-flex; align-items: center; gap: 7px; font-size: 14px;
  padding: 5px 12px; border: 1px solid var(--line); border-radius: 20px;
  color: var(--ink); text-decoration: none; background: var(--card); }
.ia-chip.off { color: var(--muted); background: transparent; border-style: dashed; }
.ia-chip.off .dot { opacity: .25; }
.ia-chip.off { text-decoration: line-through; }
.ia-chip:hover { border-color: var(--accent); }
.ia-link { font-size: 13px; color: var(--accent); margin-left: 8px; }
.ia-note { font-size: 13px; color: var(--muted); margin: 10px 0 0; }
.dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }

/* ---------- cartes KPI ---------- */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin: 30px 0; }
.kpi {
  background: var(--card); border: 1px solid var(--line); border-radius: 3px;
  padding: 20px 22px 18px; position: relative; overflow: hidden;
  display: flex; flex-direction: column;
}
.kpi::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--accent);
}
.kpi.alt::before { background: var(--green); }
/* min-height = ~2 lignes : réserve la place même quand le titre tient sur 1.
   Garantit l'alignement vertical des valeurs entre toutes les cartes. */
.kpi .label { font-family: var(--sans); font-weight: 600; font-size: 14px; font-weight: 500; letter-spacing: .07em; text-transform: uppercase; color: var(--ink); min-height: 2.6em; }
.kpi .value { font-family: var(--display); font-size: 50px; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; margin-top: 6px; font-variant-numeric: lining-nums; }
.kpi .value small { font-size: 25px; color: var(--muted); font-weight: 400; }
.kpi .detail { font-size: 14.5px; color: var(--muted); margin-top: 4px; }

/* ---------- sections ---------- */
section { margin-top: 44px; }
section h2 {
  font-family: var(--display); font-size: 27px; font-weight: 600;
  padding-bottom: 10px; border-bottom: 1px solid var(--ink); margin-bottom: 18px;
}
section h2 .num { color: var(--accent); font-family: var(--sans); font-weight: 600; font-size: 14.5px; vertical-align: super; margin-right: 8px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; column-gap: 34px; row-gap: 18px; }
/* Les deux titres occupent la meme rangee de grille : ils sont etires a la meme
   hauteur, donc leur trait de soulignement reste aligne quelle que soit la
   longueur du titre ou du libelle de periode. */
.grid2 > h2 {
  margin-bottom: 0;
  /* Titre sur sa propre ligne, periode en dessous : les deux colonnes ont la
     meme structure, donc titres ET traits restent alignes. justify-content
     cale le bloc sur le trait si un titre venait a passer sur deux lignes. */
  display: flex; flex-direction: column; align-items: flex-start;
  justify-content: flex-end; gap: 9px;
}
.grid2 > h2 .h2-text { display: block; max-width: 100%; }
.grid2 > h2 .scope-pill { margin-left: 0; white-space: nowrap; }
/* 920px : en dessous, une colonne de la grille devient trop etroite pour
   "Sources consultees par les IA" (408px sur une ligne) et le titre
   passerait sur deux lignes. On empile donc les deux blocs avant. */
@media (max-width: 920px) {
  .grid2 { grid-template-columns: 1fr; }
  /* En colonne unique, on retablit l'ordre titre -> contenu -> titre -> contenu. */
  .grid2 > :nth-child(1) { order: 1; }
  .grid2 > :nth-child(3) { order: 2; }
  .grid2 > :nth-child(2) { order: 3; margin-top: 26px; }
  .grid2 > :nth-child(4) { order: 4; }
}

/* ---------- barres ---------- */
.bars { display: flex; flex-direction: column; gap: 9px; }
.bar-row { display: grid; grid-template-columns: 190px 1fr 48px; align-items: center; gap: 12px; font-size: 15.5px; }
.bar-row .name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar-row .track { background: var(--line-soft); border-radius: 2px; height: 14px; }
.bar-row .fill { height: 100%; border-radius: 2px; background: var(--ink); min-width: 2px; }
.bar-row .val { font-family: var(--sans); font-weight: 600; font-size: 14px; text-align: right; color: var(--muted); }
.bar-row.self .fill { background: var(--accent); }
.bar-row.self .name { color: var(--accent); font-weight: 600; }

/* ---------- tableau providers ---------- */
table.providers { width: 100%; border-collapse: collapse; font-size: 15.5px; }
table.providers th {
  text-align: right; font-family: var(--sans); font-weight: 600; font-size: 13px;
  letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
  font-weight: 500; padding: 8px 10px; border-bottom: 1px solid var(--line);
}
table.providers th:first-child { text-align: left; }
table.providers td { padding: 11px 10px; border-bottom: 1px solid var(--line-soft); text-align: right; font-variant-numeric: tabular-nums; }
table.providers td:first-child { text-align: left; font-weight: 600; }
table.providers .big { font-family: var(--display); font-size: 22px; }

/* ---------- matrice prompts ---------- */
table.matrix { width: 100%; border-collapse: collapse; font-size: 15px; }
table.matrix th { font-family: var(--sans); font-weight: 600; font-size: 12px; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); font-weight: 500; padding: 6px 8px; border-bottom: 1px solid var(--line); }
table.matrix td { padding: 9px 8px; border-bottom: 1px solid var(--line-soft); }
table.matrix td.c { text-align: center; }
.pip { display: inline-block; width: 13px; height: 13px; border-radius: 50%; border: 1.5px solid var(--line); }
.pip.on { border: none; }
.pip.src { box-shadow: 0 0 0 2.5px rgba(194, 80, 43, .35); }

/* ---------- graphe ---------- */
.chart-box { background: var(--card); border: 1px solid var(--line); border-radius: 3px; padding: 20px; }
.chart-note { font-size: 14px; color: var(--muted); margin-top: 10px; }

/* ---------- admin ---------- */
.btn {
  display: inline-block; background: var(--ink); color: var(--paper);
  border: none; padding: 9px 16px; font-family: var(--sans); font-weight: 600; font-size: 12px;
  letter-spacing: .06em; text-transform: uppercase; cursor: pointer;
  border-radius: 2px; text-decoration: none;
}
.btn:hover { background: var(--accent); }
.btn.ghost { background: transparent; color: var(--ink); border: 1px solid var(--ink); }
.btn.ghost:hover { color: var(--accent); border-color: var(--accent); background: transparent; }
.btn.small { padding: 5px 10px; font-size: 10.5px; }

table.admin { width: 100%; border-collapse: collapse; font-size: 15.5px; background: var(--card); border: 1px solid var(--line); }
table.admin th { font-family: var(--sans); font-weight: 600; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); font-weight: 500; text-align: left; padding: 10px 14px; border-bottom: 2px solid var(--ink); }
table.admin td { padding: 12px 14px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
table.admin td.num { font-variant-numeric: tabular-nums; }
table.admin .actions { display: flex; gap: 8px; }

form.brand label { display: block; font-family: var(--sans); font-weight: 600; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 22px 0 6px; }
form.brand input[type="text"], form.brand textarea {
  width: 100%; background: var(--card); border: 1px solid var(--line);
  border-radius: 2px; padding: 10px 12px; font-family: var(--sans); font-size: 14px; color: var(--ink);
}
form.brand textarea { min-height: 120px; font-family: var(--sans); font-weight: 400; font-size: 15px; line-height: 1.7; }
form.brand input:focus, form.brand textarea:focus { outline: 2px solid var(--accent); border-color: transparent; }
form.brand .hint { font-size: 14px; color: var(--muted); margin-top: 4px; }
.checks { display: flex; gap: 18px; flex-wrap: wrap; }
.checks label { display: flex; align-items: center; gap: 7px; margin: 0; font-family: var(--sans); font-size: 14px; text-transform: none; letter-spacing: 0; color: var(--ink); }

pre.log {
  background: var(--ink); color: #e8e3d8; font-family: var(--mono); font-size: 12px;
  padding: 16px 18px; border-radius: 3px; overflow-x: auto; line-height: 1.6;
}
.empty { padding: 60px 0; text-align: center; color: var(--muted); font-style: italic; font-family: var(--display); font-size: 18px; }

footer.colophon {
  margin-top: 70px; padding-top: 16px; border-top: 1px solid var(--line);
  display: flex; justify-content: space-between;
  font-family: var(--sans); font-weight: 600; font-size: 12.5px; color: var(--muted); letter-spacing: .06em;
}

.kpi .explain { font-size: 14px; color: var(--muted); margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--line); line-height: 1.45; }

/* ---------- graphe évolution v2 ---------- */
.chart-box svg text { font-family: var(--sans); font-weight: 600; }
.chart-legend { display: flex; gap: 22px; font-size: 14.5px; margin-top: 12px; }
.chart-legend span { display: flex; align-items: center; gap: 8px; color: var(--muted); }
.chart-legend i { width: 22px; height: 0; border-top: 3px solid; display: inline-block; }

/* ---------- accueil admin : cartes marques ---------- */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 18px; margin-top: 34px; }
.bcard {
  position: relative; background: var(--card); border: 1px solid var(--line);
  border-radius: 6px; padding: 22px 22px 18px; display: flex; flex-direction: column;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.bcard:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(28,27,23,.10); border-color: var(--accent); }
.bcard-link { position: absolute; inset: 0; z-index: 1; }
.bcard-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.bcard-name { font-family: var(--display); font-weight: 700; font-size: 21px; letter-spacing: -.015em; line-height: 1.15; }
.bcard-domain { color: var(--muted); font-size: 14px; margin-top: 3px; }
.bcard-provs { display: flex; gap: 5px; padding-top: 7px; flex-shrink: 0; }
.bcard-kpis { display: flex; align-items: baseline; gap: 26px; margin: 18px 0 4px; }
.bcard-kpis .n { font-family: var(--display); font-weight: 700; font-size: 32px; letter-spacing: -.02em; color: var(--accent); }
.bcard-kpis .n.alt { color: var(--green); }
.bcard-kpis .n small { font-size: 17px; font-weight: 500; }
.bcard-kpis .l { display: block; font-size: 13px; color: var(--muted); margin-top: -2px; }
.bcard-trend { margin-left: auto; font-size: 14px; font-weight: 600; }
.bcard-trend.up { color: var(--green); }
.bcard-trend.down { color: var(--accent); }
.bcard-spark { width: 100%; height: 44px; margin-top: 6px; display: block; }
.bcard-meta { color: var(--muted); font-size: 13.5px; margin-top: 8px; }
.bcard-empty { color: var(--muted); font-style: italic; margin: 22px 0; font-size: 15px; }
.bcard-actions { display: flex; gap: 8px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line-soft); position: relative; z-index: 2; }

/* ---------- formulaire : lignes provider + modèle ---------- */
.prov-rows { display: flex; flex-direction: column; gap: 10px; }
.prov-row { display: grid; grid-template-columns: 150px 1fr; align-items: center; gap: 14px; }
.prov-row .prov-check { display: flex; align-items: center; gap: 8px; margin: 0;
  font-family: var(--sans); font-weight: 500; font-size: 16px; text-transform: none; letter-spacing: 0; color: var(--ink); }
.prov-row .model-input { max-width: 360px; background: var(--card); border: 1px solid var(--line);
  border-radius: 3px; padding: 8px 12px; font-size: 14.5px; color: var(--ink); }
.prov-row .model-input:focus { outline: 2px solid var(--accent); border-color: transparent; }

/* ---------- abonnements (admin) ---------- */
.revbar {
  display: flex; flex-wrap: wrap; gap: 34px;
  background: var(--card); border: 1px solid var(--line); border-radius: 3px;
  padding: 16px 22px; margin: 18px 0 22px;
}
.revbar > div { display: flex; flex-direction: column; }
.revbar-n {
  font-family: var(--display); font-weight: 700; font-size: 27px;
  line-height: 1.1; letter-spacing: -.02em; font-variant-numeric: lining-nums;
}
.revbar-n.warn { color: var(--accent); }
.revbar-l {
  font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); margin-top: 3px;
}

.subline { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 2px; }
.subtag {
  font-family: var(--mono); font-size: 11.5px; line-height: 1;
  padding: 4px 7px; border-radius: 2px;
  border: 1px solid var(--line); color: var(--muted); background: transparent;
}
.subtag.pay { border-color: var(--green); color: var(--green); font-weight: 500; }
.subtag.free { border-style: dashed; }
.subtag.off,
.subtag.warn { border-color: var(--accent); color: var(--accent); font-weight: 500; }

/* grille du bloc abonnement dans la fiche marque */
.sub-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px 18px; margin-bottom: 6px;
}
.sub-grid label { margin-top: 0; }
.sub-grid select, .sub-grid input { width: 100%; }

/* ---------- bandeaux d'alerte (fiche marque + page abonnement échu) ---------- */
.flash {
  display: flex; align-items: flex-start; gap: 10px; margin: 14px 0 24px;
  padding: 12px 18px; border-radius: 6px; font-size: .95rem;
  border: 1px solid; animation: flashIn .25s ease-out;
}
.flash-icon { font-size: 1.15rem; line-height: 1.35; flex: 0 0 auto; }
.flash-ok { background: #e8f5e4; border-color: #bcd9b4; color: #2d6a2d; }
.flash-err { background: #fbe9eb; border-color: #f0c0c5; color: #842029; }
@keyframes flashIn {
  from { opacity: 0; transform: translateY(-4px) }
  to   { opacity: 1; transform: translateY(0) }
}

/* corps de la page « abonnement échu » */
.blocked-body { margin-top: 28px; max-width: 62ch; line-height: 1.65; }
.blocked-body p + p { margin-top: 16px; }