/* ==========================================================
   static/css/style.css
   ====================
   Identité visuelle "premium" de SEO Directory Explorer :
   fond blanc, bleus "informatique/tech", touches cyan.
   Toutes les couleurs sont centralisées en variables CSS (:root)
   pour être faciles à ajuster en un seul endroit.
   ========================================================== */

:root{
  --bg: #ffffff;
  --bg-soft: #F5F8FC;
  --ink: #0B1626;
  --ink-soft: #5A6B82;
  --blue-900: #0B2A6B;
  --blue-700: #1E4FD8;
  --blue-500: #2F6FEE;
  --blue-100: #E7EEFE;
  --cyan: #12B4C4;
  --green: #12A96B;
  --red: #D8443A;
  --line: #E3E9F2;
  --radius: 12px;
  --shadow: 0 8px 24px rgba(11, 42, 107, 0.08);
  --font-sans: 'Inter', 'Segoe UI', system-ui, sans-serif;
  --font-display: 'Space Grotesk', 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', Consolas, monospace;
}

*{ box-sizing: border-box; }

body{
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  line-height: 1.6;
}

a{ color: var(--blue-700); }

/* --- Barre de navigation --- */
.topbar{
  background: linear-gradient(120deg, var(--blue-900), var(--blue-700));
  color: white;
  padding: 18px 5vw;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.topbar a{
  /* La règle générale "a{ color: var(--blue-700) }" matche directement les
     liens (spécificité element) et gagnerait sur la couleur héritée
     "color: white" du .topbar : on la force explicitement ici. */
  color: white;
}
.topbar .brand{
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: white;
}
.topbar .brand .dot{
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 0 4px rgba(18,180,196,0.25);
}
.topbar a.btn-ghost{
  color: white; text-decoration: none;
  border: 1px solid rgba(255,255,255,.4);
  padding: 8px 16px; border-radius: 100px;
  font-size: 14px; font-weight: 600;
}

main.container{
  max-width: 1080px;
  margin: 0 auto;
  padding: 42px 5vw 80px;
}

/* --- Titres --- */
h1{ font-family: var(--font-display); font-size: 30px; color: var(--blue-900); margin: 0 0 8px;}
h2{ font-family: var(--font-display); font-size: 22px; color: var(--blue-900); }
p.subtitle{ color: var(--ink-soft); margin-top: 0; }

/* --- Boutons --- */
.btn{
  display: inline-block;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 14px;
  padding: 11px 22px;
  border-radius: 100px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: transform .08s ease, box-shadow .15s ease;
}
.btn-primary{
  background: linear-gradient(120deg, var(--blue-700), var(--cyan));
  color: white;
  box-shadow: var(--shadow);
}
.btn-primary:hover{ transform: translateY(-1px); }
.btn-secondary{
  background: var(--blue-100);
  color: var(--blue-900);
}

/* --- Cartes --- */
.card{
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px 24px;
  box-shadow: var(--shadow);
  margin-bottom: 18px;
}
.card + .card{ margin-top: 0; }

/* En-tête de carte : titre/infos à gauche, actions à droite */
.card-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
}
.card-header h2{ margin: 0 0 4px; }
.card-actions{ display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* Petit repère de section en majuscules, au-dessus d'un titre ou d'un bloc */
.eyebrow{
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--blue-500);
  margin: 0 0 6px;
  display: block;
}
.eyebrow-spaced{ margin-top: 16px; }

/* --- Tableau de bord : liste de projets --- */
.project-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-bottom: 12px;
  text-decoration: none;
  color: inherit;
  transition: border-color .15s ease;
}
.project-row:hover{ border-color: var(--blue-500); }
.project-row .name{ font-weight: 700; color: var(--blue-900); }
.project-row .meta{ font-size: 13px; color: var(--ink-soft); }

/* --- Badges de statut --- */
.status{
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: 4px 10px;
  border-radius: 100px;
  display: inline-block;
  margin-bottom: 20px;
}
.status-draft{ background: var(--blue-100); color: var(--blue-700); }
.status-running{ background: #FFF3D6; color: #97650B; }
.status-done{ background: #E7F8EF; color: var(--green); }
.status-error{ background: #FBE8E6; color: var(--red); }

/* --- Formulaires --- */
label{ font-weight: 600; font-size: 14px; display: block; margin: 18px 0 6px; color: var(--ink); }
.input-text, .input-textarea{
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 11px 14px;
  font-family: var(--font-sans);
  font-size: 14px;
  background: var(--bg-soft);
}
.input-text:focus, .input-textarea:focus{
  outline: 2px solid var(--blue-500);
  outline-offset: 1px;
  background: white;
}
.help-text{ font-size: 12.5px; color: var(--ink-soft); margin-top: 4px; }
.field-error{ font-size: 12.5px; color: var(--red); margin-top: 4px; }
.form-actions{ margin-top: 26px; }

/* Regroupement de champs apparentés côte à côte (ex: pays + langue) */
.form-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 16px;
}
.form-grid > div > label{ margin-top: 18px; }

/* Sections d'un formulaire long : titre + séparateur discret */
.form-section-title{
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  color: var(--blue-900);
  margin: 32px 0 4px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.form-section-title:first-child{ margin-top: 0; padding-top: 0; border-top: none; }
.form-section-hint{ font-size: 13px; color: var(--ink-soft); margin: 0 0 4px; }

/* --- Tableau de résultats --- */
.table-scroll{
  overflow-x: auto;
  margin-top: 14px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
}
table.results{
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.table-scroll table.results{ margin-top: 0; border: none; }
table.results th{
  text-align: left;
  background: var(--blue-900);
  color: white;
  padding: 10px 12px;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 12px;
  white-space: nowrap;
}
table.results td{
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
table.results tr:last-child td{ border-bottom: none; }
table.results tr:nth-child(even) td{ background: var(--bg-soft); }
table.results tbody tr:hover td{ background: var(--blue-100); }
.score-pill{
  font-family: var(--font-mono);
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 100px;
  background: var(--blue-100);
  color: var(--blue-700);
}

/* --- Badges (Oui/Non, signaux d'audit technique...) --- */
.badge-row{ display: flex; flex-wrap: wrap; gap: 6px; }
.badge{
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 100px;
  white-space: nowrap;
}
.badge-ok{ background: #E7F8EF; color: var(--green); }
.badge-off{ background: var(--bg-soft); color: var(--ink-soft); }
.badge-warn{ background: #FFF3D6; color: #97650B; }

/* --- Messages système (succès/erreur) --- */
.messages{ list-style: none; padding: 0; margin: 0 0 20px;}
.messages li{
  padding: 12px 16px;
  border-radius: 8px;
  margin-bottom: 8px;
  font-size: 14px;
}
.messages .success{ background: #E7F8EF; color: var(--green); }
.messages .warning{ background: #FFF3D6; color: #97650B; }
.messages .error{ background: #FBE8E6; color: var(--red); }

/* --- Responsive --- */
@media (max-width: 640px){
  .project-row{ flex-direction: column; align-items: flex-start; gap: 8px; }
  .form-grid{ grid-template-columns: 1fr; }
}