/* ─── Variables ──────────────────────────────────────────────────────────── */
:root {
  /* Palette Adosis */
  --geo-primary:    #1a1a1a;   /* dark header/footer */
  --geo-accent:     #9a0275;   /* magenta Adosis */
  --geo-lime:       #cfcd00;   /* chartreuse Adosis */
  --geo-success:    #059669;
  --geo-warning:    #d97706;
  --geo-danger:     #dc2626;
  --geo-bg:         #f5f3f6;
  --geo-surface:    #ffffff;
  --geo-border:     #e8dde8;
  --geo-text:       #1a1a1a;
  --geo-muted:      #6b5f70;

  /* Bootstrap overrides */
  --bs-primary:     #9a0275;
  --bs-primary-rgb: 154, 2, 117;
  --bs-link-color:  #9a0275;
}

/* ─── Reset helpers ──────────────────────────────────────────────────────── */
body {
  font-family: 'Outfit', 'DM Sans', system-ui, sans-serif;
  color: var(--geo-text);
}

h1, h2, h3, h4, h5, h6, .geo-logo-text, .geo-score-num {
  font-family: 'Poppins', system-ui, sans-serif;
}

.x-small { font-size: 0.72rem; }

/* ─── Header ─────────────────────────────────────────────────────────────── */
.geo-header {
  background: var(--geo-primary);
  padding: 0.85rem 0;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 1px 6px rgba(0,0,0,.18);
}

.geo-logo-img {
  height: 50px;
  width: auto;
  display: block;
  /*filter: brightness(0) invert(1);  */
  transition: opacity .2s;
}

.geo-logo-img:hover { opacity: .85; }

.geo-footer-logo {
  height: 28px;
  width: auto;
  display: block;
  margin-inline: auto;
  opacity: .8;
}

.geo-footer-logo:hover { opacity: 1; }

/* ─── Hero ───────────────────────────────────────────────────────────────── */
.geo-hero {
  background: linear-gradient(140deg, #1a1a1a 0%, #2e0025 60%, #1a1a1a 100%);
  padding: 4rem 0 5rem;
  position: relative;
  overflow: hidden;
}

.geo-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 70% 50%, rgba(207,205,0,.08) 0%, transparent 60%);
  pointer-events: none;
}

.text-white-75 { color: rgba(255,255,255,.78); }

/* ─── Hero visuel tronqué (pages rapport) ────────────────────────────────── */
.geo-hero-banner {
  height: 300px;
  background: url('/pexels-bertellifotografia-16094061.jpg') center 70% / cover no-repeat;
  background-color: #1a1a1a; /* fallback pendant le chargement */
}

.text-highlight {
  color: #cfcd00;
}

.bg-primary-soft   { background: rgba(154,2,117,.1); }
.bg-success-soft   { background: rgba(5,150,105,.1); }
.bg-warning-soft   { background: rgba(217,119,6,.12); }
.bg-danger-soft    { background: rgba(220,38,38,.1); }
.bg-info-soft      { background: rgba(6,182,212,.1); }

/* ─── Section prise de position GEO/SEO (index) ─────────────────────────── */
.geo-position-card {
  border-left: 4px solid var(--geo-accent);
}
.geo-stat-box {
  background-color: rgba(13, 110, 253, 0.04);
}
.geo-cta-box {
  background: linear-gradient(120deg, #1A1A1A 0%, #9A0275 160%);
}
.text-primary   { color: var(--geo-accent) !important; }
.text-lime      { color: var(--geo-lime) !important; }
.text-success   { color: var(--geo-success) !important; }
.text-warning   { color: var(--geo-warning) !important; }
.text-info      { color: #0891b2 !important; }

/* ─── Formulaire hero ────────────────────────────────────────────────────── */
.geo-form-card {
  background: rgba(255,255,255,.12);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 16px;
  padding: 1.5rem;
  max-width: 640px;
}

.geo-url-input {
  padding-left: 2.75rem;
  border-radius: 10px !important;
  border: none;
  background: #fff;
  font-size: 1rem;
  height: 50px;
}

.geo-url-input:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(154,2,117,.35);
}

.geo-input-icon {
  position: absolute;
  left: 0.85rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--geo-muted);
  pointer-events: none;
  font-size: 1rem;
  z-index: 5;
}

.geo-submit-btn {
  background: var(--geo-accent);
  border: none;
  border-radius: 10px;
  padding: 0 1.5rem;
  height: 50px;
  font-weight: 700;
  white-space: nowrap;
  letter-spacing: 0.02em;
  transition: background .2s, transform .15s;
}

.geo-submit-btn:hover {
  background: #780160;
  transform: translateY(-1px);
}

/* ─── Feature cards ──────────────────────────────────────────────────────── */
.geo-feature-card {
  transition: transform .2s, box-shadow .2s;
}

.geo-feature-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,.1) !important;
}

.geo-feature-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 12px;
}

/* ─── Cartes critères mis en avant (index) ───────────────────────────────── */
.geo-highlight-card {
  transition: transform .2s ease, box-shadow .2s ease;
  border-top: 3px solid transparent;
}
.geo-highlight-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,.1) !important;
}
.geo-highlight-card .geo-cat-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  flex-shrink: 0;
}

/* ─── Badges crawlers (index) ────────────────────────────────────────────── */
.geo-crawler-badge {
  display: inline-flex;
  align-items: center;
  background: #fff;
  border: 1px solid var(--geo-border);
  border-radius: 999px;
  padding: 0.35rem 0.9rem;
  font-size: 0.82rem;
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
}

/* ─── Score circle (SVG) ─────────────────────────────────────────────────── */
.geo-score-circle {
  width: 100%;
  height: auto;
  display: block;
}

/* ─── Stat cards ─────────────────────────────────────────────────────────── */
.geo-stat-card {
  text-align: center;
  padding: 0.75rem;
  background: var(--geo-bg);
  border-radius: 10px;
}

.geo-stat-value {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--geo-text);
}

.geo-stat-value small {
  font-size: 0.7rem;
  font-weight: 400;
  color: var(--geo-muted);
}

.geo-stat-label {
  font-size: 0.7rem;
  color: var(--geo-muted);
  margin-top: 2px;
}

.geo-stat-danger .geo-stat-value { color: var(--geo-danger); }

/* ─── Catégorie icon ─────────────────────────────────────────────────────── */
.geo-cat-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  flex-shrink: 0;
}

/* ─── Details toggle ─────────────────────────────────────────────────────── */
.geo-details-toggle {
  color: var(--geo-muted) !important;
  text-decoration: none;
}

.geo-details-toggle:hover {
  color: var(--geo-accent) !important;
}

/* Adosis chartreuse bar accent */
.progress-bar.bg-adosis-lime { background: var(--geo-lime) !important; }

/* ─── Badge preview ──────────────────────────────────────────────────────── */
.geo-badge-preview {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.geo-badge-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  border-radius: 12px;
  color: #fff;
  font-weight: 700;
}

.geo-badge-score {
  font-size: 1.4rem;
  line-height: 1;
}

.geo-badge-score small {
  font-size: 0.65rem;
  font-weight: 400;
  opacity: .85;
}

.geo-badge-label {
  font-size: 0.65rem;
  opacity: .9;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.geo-badge-domain {
  font-size: 0.7rem;
  color: var(--geo-muted);
  max-width: 90px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ─── Footer ─────────────────────────────────────────────────────────────── */
.geo-footer {
  background: var(--geo-primary);
  color: rgba(255,255,255,.6);
  margin-top: auto;
}

.geo-footer a {
  color: rgba(255,255,255,.7);
}

.geo-footer a:hover {
  color: #fff;
}

/* Crédit photo (discret) */
.geo-credit {
  font-size: 0.68rem;
  color: rgba(255,255,255,.35) !important;
  margin-top: 2px;
}

/* ─── Progress bar slim ──────────────────────────────────────────────────── */
.progress { border-radius: 999px; }
.progress-bar { border-radius: 999px; transition: width .6s ease; }

/* ─── Infobulle recommandations ("Pourquoi c'est important") ─────────────── */
.rec-why {
  cursor: help;
  font-size: 0.95rem;
  line-height: 1;
  margin-top: 2px;
  transition: color .15s ease;
}
.rec-why:hover,
.rec-why:focus-visible {
  color: var(--geo-accent) !important;
}

/* ─── Card "Comment faire concrètement ?" ────────────────────────────────── */
.rec-how {
  background: #f8f5fa;
  border: 1px solid var(--geo-border);
  border-left: 3px solid var(--geo-accent);
  border-radius: 6px;
  padding: 0.65rem 0.85rem;
  margin-top: 0.5rem;
}
.rec-how-title {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--geo-accent);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0.35rem;
}
.rec-how-steps {
  font-size: 0.82rem;
  color: #4a4250;
  line-height: 1.55;
  margin-bottom: 0.4rem;
}
.rec-how-steps code {
  font-size: 0.75rem;
  background: #efe9f2;
  padding: 0.1rem 0.3rem;
  border-radius: 3px;
  word-break: break-word;
}
.rec-how-link {
  font-size: 0.78rem;
  font-weight: 600;
  text-decoration: none;
}
.rec-how-link:hover { text-decoration: underline; }

/* ─── Suivi d'implémentation (rapport premium) ───────────────────────────── */
.rec-progress {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.85rem;
  border-left: 1px solid var(--geo-border);
  padding-left: 0.85rem;
  white-space: nowrap;
}
.rec-progress .form-check {
  margin-right: 0;
  margin-bottom: 0;
  min-height: 0;
  padding-left: 1.4em;
  display: inline-flex;
  align-items: center;
}
.rec-progress .form-check-label {
  font-size: 0.7rem;
  color: var(--geo-muted);
  cursor: pointer;
}
.rec-progress .form-check-input {
  margin-left: -1.4em;
  margin-top: 0;
  cursor: pointer;
}
.rec-progress .form-check-input:checked + .form-check-label {
  font-weight: 600;
  color: var(--geo-text);
}
.rec-progress input[value="done"]:checked + .form-check-label { color: var(--geo-success); }
.rec-progress-status { font-size: 0.8rem; line-height: 1; min-height: 0.9em; }
.rec-done-date {
  font-size: 0.62rem;
  font-weight: 400;
  color: var(--geo-success);
  opacity: .85;
  min-height: 0.75em;
}

/* ─── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 576px) {
  .geo-hero { padding: 2.5rem 0 3rem; }
  .geo-form-card { padding: 1rem; }
  .geo-url-input { font-size: 0.9rem; }
  .geo-stat-value { font-size: 1.2rem; }
}