/* ============================================================
   Portfolio Moussa Diallo · Études de cas SIG
   Direction : dossier de conseil. Blanc, Inter, un seul accent.
   Aucune dépendance, aucun framework, aucun JavaScript.
   ============================================================ */

:root {
  --ink: #1a1a1a;
  --ink-soft: #444444;
  --ink-faint: #6b6b6b;
  --rule: #e2e2e2;
  --accent: #155C3E;
  --accent-bg: #f3f7f5;
  --max: 42rem;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: 'Inter', -apple-system, 'Segoe UI', sans-serif;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--ink);
  background: #ffffff;
  -webkit-font-smoothing: antialiased;
}

main {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 1.25rem 5rem;
}

/* ---------- En-tête et navigation ---------- */

header.site {
  max-width: var(--max);
  margin: 0 auto;
  padding: 1.5rem 1.25rem;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  border-bottom: 1px solid var(--rule);
}

header.site .name {
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  color: var(--ink);
  text-decoration: none;
}

header.site nav a {
  font-size: 0.85rem;
  color: var(--ink-faint);
  text-decoration: none;
  margin-left: 1.25rem;
}

header.site nav a:hover { color: var(--accent); }

/* ---------- Typographie ---------- */

h1 {
  font-size: 1.9rem;
  line-height: 1.25;
  font-weight: 650;
  letter-spacing: -0.015em;
  margin: 3rem 0 0.75rem;
}

h2 {
  font-size: 1.15rem;
  font-weight: 600;
  margin: 3rem 0 0.75rem;
  padding-top: 2rem;
  border-top: 1px solid var(--rule);
}

h3 {
  font-size: 1rem;
  font-weight: 600;
  margin: 1.75rem 0 0.5rem;
}

p { margin: 0 0 1rem; }

.lead {
  font-size: 1.1rem;
  color: var(--ink-soft);
  margin-bottom: 2rem;
}

.kicker {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-faint);
  margin: 3rem 0 -2.25rem;
}

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }

/* ---------- Fiche mission (en-tête de chaque étude de cas) ---------- */

dl.fiche {
  margin: 2rem 0;
  padding: 1.25rem 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  display: grid;
  grid-template-columns: 9rem 1fr;
  row-gap: 0.45rem;
  font-size: 0.92rem;
}

dl.fiche dt {
  color: var(--ink-faint);
  font-weight: 500;
}

dl.fiche dd { margin: 0; }

/* ---------- Encadré résultat ---------- */

.resultat {
  border-left: 3px solid var(--accent);
  background: var(--accent-bg);
  padding: 1rem 1.25rem;
  margin: 1.5rem 0;
}

.resultat p { margin: 0; }
.resultat p + p { margin-top: 0.6rem; }
.resultat strong { color: var(--accent); }

/* ---------- Liste des études de cas (accueil) ---------- */

.cas {
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--rule);
}

.cas h3 { margin: 0 0 0.35rem; }
.cas h3 a { color: var(--ink); text-decoration: none; }
.cas h3 a:hover { color: var(--accent); text-decoration: underline; }

.cas .contexte {
  font-size: 0.85rem;
  color: var(--ink-faint);
  margin-bottom: 0.5rem;
}

.cas p { margin-bottom: 0.5rem; }

.cas .impact {
  font-size: 0.92rem;
  color: var(--accent);
  font-weight: 500;
  margin: 0;
}

/* ---------- Schémas d'architecture SVG ---------- */

figure.schema {
  margin: 1.5rem 0;
  padding: 1.25rem;
  border: 1px solid var(--rule);
  overflow-x: auto;
}

figure.schema svg { display: block; width: 100%; height: auto; }

figure.schema figcaption {
  font-size: 0.82rem;
  color: var(--ink-faint);
  margin-top: 0.75rem;
}

.schema text {
  font-family: 'Inter', sans-serif;
  fill: var(--ink);
}

.schema .boite { fill: #ffffff; stroke: #bbbbbb; stroke-width: 1; }
.schema .boite-accent { fill: var(--accent-bg); stroke: var(--accent); stroke-width: 1; }
.schema .fleche { stroke: #999999; stroke-width: 1.2; fill: none; marker-end: url(#fl); }
.schema .etiquette { fill: var(--ink-faint); font-size: 10px; }

/* ---------- Divers ---------- */

hr {
  border: none;
  border-top: 1px solid var(--rule);
  margin: 3rem 0;
}

footer.site {
  max-width: var(--max);
  margin: 0 auto;
  padding: 2rem 1.25rem 3rem;
  border-top: 1px solid var(--rule);
  font-size: 0.85rem;
  color: var(--ink-faint);
}

footer.site a { color: var(--ink-faint); }

.retour {
  display: inline-block;
  margin-top: 2.5rem;
  font-size: 0.9rem;
}

/* ---------- Impression ---------- */

@media print {
  header.site nav, .retour { display: none; }
  body { font-size: 11pt; }
  a { color: var(--ink); text-decoration: none; }
}

/* ---------- Mobile ---------- */

@media (max-width: 540px) {
  h1 { font-size: 1.5rem; }
  dl.fiche { grid-template-columns: 1fr; row-gap: 0.15rem; }
  dl.fiche dt { margin-top: 0.5rem; }
  header.site { flex-direction: column; gap: 0.25rem; }
  header.site nav a { margin-left: 0; margin-right: 1rem; }
}