/* UrgiLink — feuille de style du site vitrine (charte : DESIGN.md) */

:root {
  --brand-700: #08447F;
  --brand-600: #0B5CAD;
  --brand-500: #1273D4;
  --brand-400: #4193E4;
  --brand-300: #7FB9F0;
  --brand-200: #BAD9F7;
  --brand-100: #E4F0FC;

  --bg: #FFFFFF;
  --surface: #F4F8FC;
  --surface2: #E9F1F9;
  --border: #D9E4EE;
  --text: #17293A;
  --text2: #4A6172;
  --link: #0B5CAD;
  --header-bg: #0B5CAD;
  --header-text: #FFFFFF;
  --hero-from: #0B5CAD;
  --hero-to: #1A82E8;
  --hero-text: #FFFFFF;
  --hero-text2: #DCECFD;
  --success: #177A43;
  --success-bg: #E7F6EE;
  --danger: #B3261E;
  --danger-bg: #FDF0EF;
  --shadow: 0 1px 3px rgba(23, 41, 58, 0.08);
}

[data-theme="dark"] {
  --bg: #0C1621;
  --surface: #14222F;
  --surface2: #1B2C3C;
  --border: #2A3E51;
  --text: #E8F0F7;
  --text2: #A9BDCC;
  --link: #6FB3F2;
  --header-bg: #0A3158;
  --header-text: #F2F8FE;
  --hero-from: #0A3158;
  --hero-to: #0E4E85;
  --hero-text: #F2F8FE;
  --hero-text2: #BAD9F7;
  --success: #57CE94;
  --success-bg: #123120;
  --danger: #F2837C;
  --danger-bg: #361412;
  --shadow: none;
}

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

html { color-scheme: light; }
html[data-theme="dark"] { color-scheme: dark; }

body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
}

a { color: var(--link); }
.wrap { max-width: 960px; margin: 0 auto; padding: 0 1.2rem; }
.wrap-narrow { max-width: 700px; margin: 0 auto; padding: 0 1.2rem; }

/* En-tête */
header.site {
  background: var(--header-bg);
  color: var(--header-text);
  padding: 0.9rem 0;
}
header.site .wrap {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 0.6rem;
}
.logo { font-size: 1.4rem; font-weight: 800; letter-spacing: 0.02em; }
.logo a { color: inherit; text-decoration: none; }
.logo span { color: var(--brand-300); }
.nav { display: flex; align-items: center; gap: 1.1rem; }
.nav a {
  color: var(--header-text); text-decoration: none; font-size: 0.95rem;
  opacity: 0.92;
}
.nav a:hover { opacity: 1; text-decoration: underline; }
.theme-toggle {
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: var(--header-text);
  border-radius: 999px;
  width: 2.1rem; height: 2.1rem;
  font-size: 1rem; line-height: 1;
  cursor: pointer;
}
.theme-toggle:hover { background: rgba(255, 255, 255, 0.25); }

/* Héros (accueil) */
.hero {
  background: linear-gradient(160deg, var(--hero-from) 0%, var(--hero-to) 100%);
  color: var(--hero-text);
  padding: 4rem 0 4.5rem;
}
.hero h1 { font-size: 2.1rem; line-height: 1.25; max-width: 640px; }
.hero p { margin-top: 1rem; font-size: 1.15rem; max-width: 620px; color: var(--hero-text2); }
.badge {
  display: inline-block;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  padding: 0.25rem 0.9rem;
  font-size: 0.85rem;
  margin-bottom: 1.2rem;
}

/* Sections et cartes */
section { padding: 3rem 0; }
section.alt { background: var(--surface); }
h2 { font-size: 1.5rem; margin-bottom: 1.4rem; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.2rem; }
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1.4rem;
  box-shadow: var(--shadow);
}
section.alt .card { background: var(--bg); }
.card h3 { font-size: 1.05rem; margin-bottom: 0.6rem; color: var(--link); }
.card p, .card li { font-size: 0.95rem; color: var(--text2); }
.card ul { list-style: none; }
.card li { padding: 0.15rem 0; }
.card li strong { color: var(--text); }

/* Étapes numérotées */
.steps { counter-reset: step; }
.step { display: flex; gap: 1rem; margin-bottom: 1.1rem; align-items: baseline; }
.step::before {
  counter-increment: step; content: counter(step);
  flex: none; width: 2rem; height: 2rem; border-radius: 50%;
  background: var(--brand-600); color: #fff; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
[data-theme="dark"] .step::before { background: var(--brand-500); }

/* Pages internes (consignes, mentions) */
main.page { padding: 2.2rem 0 3rem; }
main.page h1 { font-size: 1.6rem; margin-bottom: 0.4rem; }
main.page .sub { color: var(--text2); margin-bottom: 1.8rem; }
main.page h2 { font-size: 1.15rem; margin: 1.6rem 0 0.5rem; color: var(--link); }
main.page p { margin-bottom: 0.6rem; }

.rule {
  display: flex; gap: 1rem; align-items: flex-start;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1.1rem 1.2rem;
  margin-bottom: 1rem;
  box-shadow: var(--shadow);
}
.rule .ico { font-size: 1.8rem; flex: none; }
.rule h2 { font-size: 1.1rem; margin: 0 0 0.2rem; color: var(--text); }
.rule p { font-size: 0.98rem; color: var(--text2); margin: 0; }
.rule.warn { background: var(--danger-bg); border-color: var(--danger); }
.rule.warn h2 { color: var(--danger); }

.check { color: var(--success); font-weight: 700; }

/* Pied de page — clair sur fond clair, sombre sur fond sombre */
footer.site {
  background: var(--surface);
  border-top: 1px solid var(--border);
  color: var(--text2);
  padding: 2rem 0;
  font-size: 0.9rem;
}
footer.site a { color: var(--link); }

/* Bandeau chiffres (hero) */
.stats { margin-top: 1.1rem; font-size: 0.95rem; opacity: 0.92; }
/* Encadré anti-hameçonnage (bloc SMS patients) */
.hint-warn {
  background: var(--panel-warn-bg, #FCF3E3);
  border: 1px solid var(--panel-warn-border, #E9CE93);
  border-radius: 10px;
  padding: 0.7rem 1rem;
  font-size: 0.95rem;
}