/* ============================================================
   Analyseur SEO — Styles principaux
   Design : Inter, cartes arrondies, style Semrush-inspired
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* ── Variables de design ── */
:root {
  /* Couleurs de marque (surchargées par PHP via inline style) */
  --color-primary:        #2762C4;
  --color-primary-dark:   #1A2F7A;
  --color-primary-light:  #E8F0FD;
  --color-primary-accent: #3B8ECC;
  --color-critical:       #D93025;
  --color-critical-bg:    #FEF3F2;
  --color-high:           #E07B39;
  --color-high-bg:        #FFF4ED;
  --color-medium:         #B5850A;
  --color-medium-bg:      #FFFBEB;
  --color-low:            #1A7A4A;
  --color-low-bg:         #F0FDF4;
  --color-text:           #1A1E2E;
  --color-text-muted:     #5A6A7E;
  --color-border:         #D0DAF0;
  --color-bg:             #F5F8FF;
  --color-white:          #FFFFFF;
  --color-surface:        #FFFFFF;

  /* Design tokens */
  --radius-card: 16px;
  --radius-md:   10px;
  --radius-sm:   6px;
  --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.08);
  --shadow-sm:   0 2px 8px rgba(0, 0, 0, 0.06);
}

/* ── Reset minimal ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Page globale ── */
body {
  font-family: 'Inter', system-ui, -apple-system, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-text);
  background: var(--color-bg);
  min-height: 100vh;
}

/* ════════════════════════════════════════════════════════════
   FORMULAIRE D'ACCUEIL
   ════════════════════════════════════════════════════════════ */

.form-wrapper {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
  background: linear-gradient(145deg, var(--color-primary-dark) 0%, var(--color-primary) 60%, var(--color-primary-accent) 100%);
}

.form-card {
  background: var(--color-white);
  border-radius: var(--radius-card);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.22);
  padding: 3rem 2.5rem;
  width: 100%;
  max-width: 620px;
  text-align: center;
}

.form-logo {
  height: 52px;
  margin-bottom: 1.75rem;
}

.form-card h1 {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--color-primary-dark);
  margin-bottom: 0.5rem;
  letter-spacing: -0.02em;
}

.form-card p {
  color: var(--color-text-muted);
  margin-bottom: 2rem;
  font-size: 0.95rem;
}

.form-group {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.form-input {
  flex: 1;
  padding: 0.9rem 1.2rem;
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: 1rem;
  font-family: inherit;
  color: var(--color-text);
  transition: border-color 0.2s, box-shadow 0.2s;
  outline: none;
}
.form-input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(39, 98, 196, 0.12);
}

.btn-primary {
  padding: 0.9rem 1.6rem;
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
  color: var(--color-white);
  border: none;
  border-radius: var(--radius-md);
  font-size: 1rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity 0.2s, transform 0.1s;
  letter-spacing: 0.01em;
}
.btn-primary:hover  { opacity: 0.9; }
.btn-primary:active { transform: scale(0.98); }
.btn-primary:disabled { opacity: 0.55; cursor: not-allowed; }

.form-error {
  background: var(--color-critical-bg);
  color: var(--color-critical);
  border: 1px solid var(--color-critical);
  border-radius: var(--radius-md);
  padding: 0.75rem 1rem;
  font-size: 0.9rem;
  text-align: left;
  margin-bottom: 1rem;
}

.form-notice {
  background: var(--color-primary-light, #E6FBF2);
  color: var(--color-text);
  border: 1px solid var(--color-border, #C8EEE0);
  border-radius: var(--radius-md);
  padding: 0.75rem 1rem;
  font-size: 0.9rem;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.btn-notice {
  display: inline-block;
  padding: 0.45rem 1rem;
  background: var(--color-primary);
  color: #fff;
  border-radius: var(--radius-md);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.btn-notice:hover { opacity: 0.88; }

.form-hint {
  font-size: 0.82rem;
  color: var(--color-text-muted);
  margin-top: 0.5rem;
}

/* Brand selector */
.brand-selector {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--color-border);
  justify-content: center;
}
.brand-selector label {
  font-size: 0.82rem;
  color: var(--color-text-muted);
  white-space: nowrap;
}
.brand-selector select {
  font-size: 0.85rem;
  font-family: inherit;
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-white);
  color: var(--color-text);
  cursor: pointer;
}

/* ── Spinner ── */
.spinner-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(26, 47, 122, 0.88);
  z-index: 9999;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  color: white;
  backdrop-filter: blur(4px);
}
.spinner-overlay.active { display: flex; }

.spinner {
  width: 56px;
  height: 56px;
  border: 5px solid rgba(255, 255, 255, 0.25);
  border-top-color: white;
  border-radius: 50%;
  animation: spin 0.85s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.spinner-text {
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  opacity: 0.9;
}

/* ════════════════════════════════════════════════════════════
   RAPPORT — Wrapper de page
   ════════════════════════════════════════════════════════════ */

.report-page {
  background: var(--color-bg);
  min-height: 100vh;
  padding: 2rem 1rem 4rem;
}
.report-page > .no-print {
  display: flex;
  justify-content: center;
  margin-bottom: 1.5rem;
}

.back-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.6rem 1.2rem;
  background: var(--color-white);
  color: var(--color-primary-dark);
  border-radius: var(--radius-md);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  transition: background 0.15s;
}
.back-btn:hover { background: var(--color-primary-light); }

/* ── Conteneur rapport ── */
.report {
  max-width: 960px;
  margin: 0 auto;
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

/* ════════════════════════════════════════════════════════════
   EN-TÊTE RAPPORT
   ════════════════════════════════════════════════════════════ */

.report-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem 2rem;
  background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 100%);
  color: var(--color-white);
  gap: 1rem;
}

.report-header__brand {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.report-logo {
  height: 40px;
  filter: brightness(0) invert(1);
}

.report-tagline {
  font-size: 0.9rem;
  font-weight: 500;
  opacity: 0.8;
  border-left: 1px solid rgba(255, 255, 255, 0.3);
  padding-left: 1rem;
}

.print-btn {
  background: rgba(255, 255, 255, 0.12);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: var(--radius-sm);
  padding: 0.45rem 1rem;
  font-size: 0.82rem;
  font-family: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
  white-space: nowrap;
}
.print-btn:hover { background: rgba(255, 255, 255, 0.22); }

/* ════════════════════════════════════════════════════════════
   MÉTA-INFORMATIONS
   ════════════════════════════════════════════════════════════ */

.report-meta {
  background: var(--color-white);
  border-bottom: 1px solid var(--color-border);
  padding: 1.25rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.report-meta__url a {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--color-primary);
  text-decoration: none;
  word-break: break-all;
}
.report-meta__url a:hover { text-decoration: underline; }

.meta-redirect {
  font-size: 0.82rem;
  color: var(--color-text-muted);
  margin-top: 0.2rem;
}
.meta-redirect a { color: var(--color-primary-accent); }

.report-meta__row {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: space-between;
}

.report-meta__badges {
  display: flex;
  gap: 0.45rem;
  flex-wrap: wrap;
}

.report-meta__stack {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}

/* ── Badges ── */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
}
.badge--ok      { background: #D1FAE5; color: #065F46; }
.badge--error   { background: var(--color-critical-bg); color: var(--color-critical); }
.badge--warn    { background: var(--color-medium-bg); color: var(--color-medium); }
.badge--neutral { background: var(--color-primary-light); color: var(--color-primary-dark); }
.badge--sm      { font-size: 0.68rem; padding: 0.08rem 0.45rem; }

.stack-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.22rem 0.7rem;
  border-radius: var(--radius-sm);
  font-size: 0.78rem;
  font-weight: 600;
  background: var(--color-primary-light);
  color: var(--color-primary-dark);
}
.stack-badge--ok    { background: #D1FAE5; color: #065F46; }
.stack-badge--error { background: var(--color-critical-bg); color: var(--color-critical); }
.stack-badge--warn  { background: var(--color-medium-bg); color: var(--color-medium); }

/* ════════════════════════════════════════════════════════════
   BARRE D'AUDIT
   ════════════════════════════════════════════════════════════ */

.report-audit-bar {
  background: var(--color-white);
  border-bottom: 1px solid var(--color-border);
}

.audit-bar__inner {
  display: flex;
}

.audit-item {
  flex: 1;
  text-align: center;
  padding: 1rem 0.5rem;
  border-right: 1px solid var(--color-border);
  transition: background 0.15s;
}
.audit-item:last-child { border-right: none; }

.audit-item__icon {
  font-size: 1.1rem;
  display: block;
  margin-bottom: 0.15rem;
}

.audit-item__count {
  font-size: 2rem;
  font-weight: 800;
  display: block;
  line-height: 1;
  letter-spacing: -0.02em;
}

.audit-item__label {
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  display: block;
  margin-top: 0.2rem;
}

.audit-item--critical .audit-item__count { color: var(--color-critical); }
.audit-item--high     .audit-item__count { color: var(--color-high); }
.audit-item--medium   .audit-item__count { color: var(--color-medium); }
.audit-item--low      .audit-item__count { color: var(--color-low); }
.audit-item--total    .audit-item__count { color: var(--color-primary); }
.audit-item--total .audit-item__icon    { opacity: 0.4; }

/* ════════════════════════════════════════════════════════════
   SCORES
   ════════════════════════════════════════════════════════════ */

.report-scores {
  background: var(--color-white);
  border-bottom: 1px solid var(--color-border);
}

/* Hero : donut + verdict */
.scores-hero {
  display: flex;
  align-items: center;
  gap: 2.5rem;
  padding: 2rem 2rem 1.5rem;
}

.overall-score {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

.overall-score__circle {
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background: var(--color-primary-light);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  box-shadow: 0 6px 28px rgba(0, 0, 0, 0.14);
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.overall-score__circle::before {
  content: '';
  position: absolute;
  inset: 18px;
  border-radius: 50%;
  background: white;
}
.overall-score__number {
  position: relative;
  font-size: 2.25rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  z-index: 1;
}
.overall-score__label {
  position: relative;
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--color-text-muted);
  z-index: 1;
}
.overall-score__title {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.scores-verdict {
  flex: 1;
}
.verdict-label {
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.verdict-desc {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  margin-top: 0.5rem;
  line-height: 1.5;
  max-width: 400px;
}

/* Score cards */
.score-cards {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.75rem;
  padding: 0 2rem 2rem;
}

.score-card {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 0.9rem 0.6rem 0.75rem;
  text-align: center;
  transition: box-shadow 0.15s, transform 0.1s;
}
.score-card:hover {
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}

.score-card__top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  margin-bottom: 0.5rem;
}

.score-card__icon {
  font-size: 1.3rem;
  line-height: 1;
}

.score-card__label {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  line-height: 1.2;
}

.score-card__weight {
  font-size: 0.6rem;
  color: var(--color-border);
  font-weight: 500;
}

.progress-bar {
  height: 5px;
  background: var(--color-border);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 0.4rem;
}
.progress-bar__fill {
  height: 100%;
  border-radius: 999px;
  transition: width 0.9s cubic-bezier(0.4, 0, 0.2, 1);
}

.score-card__value {
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
}
.score-card__value span {
  font-size: 0.62rem;
  font-weight: 500;
  color: var(--color-text-muted);
}

/* ════════════════════════════════════════════════════════════
   SECTION HEADERS (partagé par toutes les sections)
   ════════════════════════════════════════════════════════════ */

.section-header {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.9rem 2rem;
  background: var(--color-primary-light);
  border-bottom: 1px solid var(--color-border);
  border-left: 4px solid transparent;
}

.section-header__icon {
  font-size: 1.1rem;
  flex-shrink: 0;
}

.section-header__title {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--color-text);
  flex: 1;
  letter-spacing: 0.01em;
}

.section-header--critical { background: var(--color-critical-bg); border-left-color: var(--color-critical); }
.section-header--high     { background: var(--color-high-bg);     border-left-color: var(--color-high); }
.section-header--medium   { background: var(--color-medium-bg);   border-left-color: var(--color-medium); }
.section-header--low      { background: var(--color-low-bg);      border-left-color: var(--color-low); }
.section-header--good     { background: var(--color-low-bg);      border-left-color: var(--color-low); }
.section-header--neutral  { background: var(--color-primary-light); border-left-color: var(--color-primary); }

.issues-count {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.1rem 0.55rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.08);
  color: var(--color-text);
  white-space: nowrap;
}

/* ════════════════════════════════════════════════════════════
   CAPTURES D'ÉCRAN
   ════════════════════════════════════════════════════════════ */

.report-screenshots {
  background: var(--color-white);
  border-bottom: 1px solid var(--color-border);
}

.screenshots-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 1.25rem;
  padding: 1.25rem 2rem 1.5rem;
}

.screenshot-card {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.screenshot-card__label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  padding: 0.5rem 0.9rem;
  background: var(--color-primary-light);
  border-bottom: 1px solid var(--color-border);
}

.screenshot-card img {
  width: 100%;
  display: block;
  border: none;
}

.screenshot-unavailable {
  padding: 2.5rem 1rem;
  text-align: center;
  color: var(--color-text-muted);
  font-size: 0.82rem;
}

/* ════════════════════════════════════════════════════════════
   APERÇU SERP
   ════════════════════════════════════════════════════════════ */

.report-serp {
  background: var(--color-white);
  border-bottom: 1px solid var(--color-border);
}

.serp-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 1rem 1.35rem;
  max-width: 640px;
  margin: 1.25rem 2rem 1.5rem;
  font-family: arial, sans-serif;
  box-shadow: var(--shadow-sm);
}
.serp-url   { font-size: 0.78rem; color: #188038; margin-bottom: 0.15rem; word-break: break-all; }
.serp-title { font-size: 1.05rem; color: #1a0dab; font-weight: 400; line-height: 1.3; }
.serp-desc  { font-size: 0.82rem; color: #4d5156; line-height: 1.45; margin-top: 0.35rem; }
.serp--missing { color: var(--color-text-muted); font-style: italic; }
.serp-counter {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 0.1rem 0.45rem;
  border-radius: var(--radius-sm);
  margin-top: 0.2rem;
  margin-bottom: 0.3rem;
  font-family: inherit;
}
.serp-counter--ok    { background: var(--color-low-bg);      color: var(--color-low); }
.serp-counter--warn  { background: var(--color-medium-bg);   color: var(--color-medium); }
.serp-counter--error { background: var(--color-critical-bg); color: var(--color-critical); }

/* ════════════════════════════════════════════════════════════
   PROBLÈMES / ISSUES
   ════════════════════════════════════════════════════════════ */

.report-issues {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.issues-group {
  background: var(--color-white);
  border-bottom: 1px solid var(--color-border);
}

.issues-group__body {
  padding: 1.25rem 2rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

/* Issue items */
.issue-item {
  border-radius: var(--radius-md);
  padding: 0.9rem 1.1rem;
  border-left: 4px solid transparent;
}

.issue-item--critical { background: var(--color-critical-bg); border-left-color: var(--color-critical); }
.issue-item--high     { background: var(--color-high-bg);     border-left-color: var(--color-high); }
.issue-item--medium   { background: var(--color-medium-bg);   border-left-color: var(--color-medium); }
.issue-item--low      { background: var(--color-low-bg);      border-left-color: var(--color-low); }

.issue-item__header {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
}

.issue-item__num {
  font-size: 0.7rem;
  font-weight: 800;
  min-width: 22px;
  height: 22px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.1);
  color: var(--color-text);
  flex-shrink: 0;
  margin-top: 0.05rem;
}

.issue-item__body {
  flex: 1;
  min-width: 0;
}

.issue-item__title {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--color-text);
  display: block;
  line-height: 1.35;
}

.issue-item__cat {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--color-text-muted);
  background: rgba(0, 0, 0, 0.06);
  padding: 0.05rem 0.5rem;
  border-radius: var(--radius-sm);
  margin-top: 0.15rem;
}

.issue-item__desc {
  margin-top: 0.45rem;
  font-size: 0.83rem;
  color: var(--color-text-muted);
  line-height: 1.55;
}

/* ════════════════════════════════════════════════════════════
   POINTS POSITIFS
   ════════════════════════════════════════════════════════════ */

.report-good {
  background: var(--color-white);
  border-bottom: 1px solid var(--color-border);
}

.good-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 0.75rem;
  padding: 1.25rem 2rem 1.5rem;
}

.good-card {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  background: var(--color-low-bg);
  border: 1px solid rgba(26, 122, 74, 0.18);
  border-radius: var(--radius-md);
  padding: 0.85rem 1rem;
  transition: box-shadow 0.15s;
}
.good-card:hover { box-shadow: var(--shadow-sm); }

.good-card__icon {
  font-size: 1.3rem;
  flex-shrink: 0;
  line-height: 1;
}

.good-card__content { min-width: 0; }

.good-card__text {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text);
  display: block;
  line-height: 1.3;
}

.good-card__sub {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  margin-top: 0.2rem;
  line-height: 1.4;
}

/* ════════════════════════════════════════════════════════════
   MOTS-CLÉS
   ════════════════════════════════════════════════════════════ */

.report-keywords {
  background: var(--color-white);
  border-bottom: 1px solid var(--color-border);
}

.kw-layout {
  display: grid;
  grid-template-columns: 1fr 200px;
  gap: 1.25rem;
  padding: 1.25rem 2rem 1.5rem;
  align-items: start;
}

.kw-table-wrap { overflow-x: auto; }

.kw-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.84rem;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.kw-table thead th {
  background: var(--color-primary-light);
  color: var(--color-text-muted);
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.55rem 0.8rem;
  text-align: left;
  border-bottom: 1px solid var(--color-border);
}

.kw-table tbody tr { border-bottom: 1px solid var(--color-border); }
.kw-table tbody tr:last-child { border-bottom: none; }
.kw-row-alt { background: var(--color-primary-light); }
.kw-table td { padding: 0.4rem 0.8rem; }

.kw-word { font-weight: 600; }
.kw-c    { text-align: center; color: var(--color-text-muted); }
.kw-occ  { font-weight: 700; color: var(--color-primary); }
.kw-yes  { color: var(--color-low); font-weight: 800; font-size: 1rem; }
.kw-no   { color: var(--color-border); }

.kw-hint {
  font-size: 0.72rem;
  color: var(--color-text-muted);
  font-style: italic;
  margin-top: 0.5rem;
  padding: 0 0.25rem;
}

/* Sidebar */
.kw-sidebar {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.kw-sidebar-block {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 0.9rem 1rem;
}

.kw-sidebar-label {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  margin-bottom: 0.55rem;
  display: block;
}

.kw-social-list { display: flex; flex-wrap: wrap; gap: 0.35rem; }

.kw-social-pill {
  padding: 0.25rem 0.65rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  background: var(--color-primary-light);
  color: var(--color-primary-dark);
  border: 1px solid var(--color-border);
}

.kw-sidebar-none {
  font-size: 0.78rem;
  color: var(--color-text-muted);
  font-style: italic;
}

.kw-ext-count {
  font-size: 2rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  margin-bottom: 0.2rem;
}

/* ════════════════════════════════════════════════════════════
   PLAN D'ACTION
   ════════════════════════════════════════════════════════════ */

.report-action {
  background: var(--color-primary-light);
  border-bottom: 1px solid var(--color-border);
}

.action-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.25rem 2rem 1.5rem;
}

.action-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: var(--color-white);
  border-radius: var(--radius-md);
  padding: 0.7rem 1.1rem;
  font-size: 0.87rem;
  font-weight: 500;
  color: var(--color-text);
  box-shadow: var(--shadow-sm);
  border-left: 3px solid var(--color-border);
  transition: box-shadow 0.15s;
}
.action-item:hover { box-shadow: var(--shadow-card); }
.action-item--critical { border-left-color: var(--color-critical); }

.action-item__num {
  font-size: 0.7rem;
  font-weight: 800;
  min-width: 22px;
  height: 22px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-primary-light);
  color: var(--color-primary-dark);
  flex-shrink: 0;
}

.action-item__icon { flex-shrink: 0; }
.action-item__text { flex: 1; }

/* ════════════════════════════════════════════════════════════
   PIED DE PAGE
   ════════════════════════════════════════════════════════════ */

.report-footer {
  background: var(--color-primary-dark);
  color: rgba(255, 255, 255, 0.65);
  padding: 1rem 2rem;
  font-size: 0.78rem;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* ════════════════════════════════════════════════════════════
   IMPRESSION / PDF
   ════════════════════════════════════════════════════════════ */

@media print {
  @page { margin: 12mm 10mm; size: A4 portrait; }

  html, body {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    background: white;
    font-size: 10.5pt;
  }

  .report-page {
    min-height: 0 !important;
    padding: 0 !important;
    background: white !important;
  }

  .no-print { display: none !important; }

  .report {
    max-width: 100%;
    border-radius: 0;
    box-shadow: none;
  }

  .report-header,
  .report-footer {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    border-radius: 0;
  }

  .report-footer { break-after: avoid; page-break-after: avoid; }

  .report-meta,
  .report-audit-bar,
  .report-scores,
  .report-screenshots,
  .report-serp,
  .issues-group,
  .report-good,
  .report-keywords,
  .report-action { break-inside: avoid; }

  .issue-item {
    break-inside: avoid;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .progress-bar__fill,
  .overall-score__circle,
  .section-header,
  .audit-item__count {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .score-cards { grid-template-columns: repeat(4, 1fr); }
  .screenshots-grid { grid-template-columns: 1fr; }
  .kw-layout { grid-template-columns: 1fr; }
  .good-grid { grid-template-columns: repeat(2, 1fr); }
  .serp-card { max-width: 100%; }

  a { text-decoration: none; color: inherit; }
}

/* ════════════════════════════════════════════════════════════
   RESPONSIVE (mobile)
   ════════════════════════════════════════════════════════════ */

@media (max-width: 700px) {
  .report-header  { flex-direction: column; align-items: flex-start; gap: 0.75rem; }
  .report-tagline { border-left: none; padding-left: 0; }

  .scores-hero    { flex-direction: column; align-items: flex-start; gap: 1.25rem; padding: 1.5rem 1.25rem 1rem; }
  .score-cards    { grid-template-columns: repeat(4, 1fr); gap: 0.5rem; padding: 0 1.25rem 1.5rem; }
  .score-card__label { font-size: 0.58rem; }

  .audit-bar__inner { flex-wrap: wrap; }
  .audit-item       { min-width: 50%; border-bottom: 1px solid var(--color-border); }

  .screenshots-grid { grid-template-columns: 1fr; }
  .good-grid        { grid-template-columns: 1fr; }
  .kw-layout        { grid-template-columns: 1fr; }

  .report-meta,
  .report-scores,
  .issues-group,
  .report-good,
  .report-screenshots,
  .report-serp,
  .report-keywords,
  .report-action,
  .report-footer { padding-left: 1rem; padding-right: 1rem; }

  .section-header,
  .action-list,
  .good-grid,
  .kw-layout,
  .screenshots-grid { padding-left: 1rem; padding-right: 1rem; }

  .serp-card { margin: 1rem 1rem 1.25rem; }

  .form-group { flex-direction: column; }
  .form-card  { padding: 2rem 1.5rem; }
}