/*
 * Feuille de style principale — Plateforme Diaspora Santé Guinée
 * Ministère de la Santé et de l'Hygiène Publique de Guinée
 *
 * Palette santé :
 *   Vert  : confiance, santé, validation
 *   Bleu  : institution, numérique, professionnalisme
 *   Jaune : accent, attention, mise en évidence
 */

/* ── Variables CSS ──────────────────────────────────────────────────────────── */
:root {
  --color-health-green: #0C9488;
  --color-health-green-dark: #0A7A70;
  --color-health-green-light: #D1FAE5;
  --color-health-blue: #1D4ED8;
  --color-health-blue-dark: #1E40AF;
  --color-health-blue-light: #DBEAFE;
  --color-health-yellow: #FACC15;
  --color-health-yellow-dark: #EAB308;
  --color-health-yellow-light: #FEF9C3;
  --color-bg-light: #F9FAFB;
  --color-surface: #FFFFFF;
  --color-border: #E5E7EB;
  --color-text-dark: #111827;
  --color-text-muted: #6B7280;
  --bleu-mshp: var(--color-health-blue);
  --bleu-mshp-clair: var(--color-health-blue-dark);
  --vert-mshp: var(--color-health-green);
  --or-mshp: var(--color-health-yellow);
  --rouge-guinee: #ce1126;
  --jaune-guinee: var(--color-health-yellow);
  --vert-guinee: var(--color-health-green);
  --gris-clair: var(--color-bg-light);
  --gris-bordure: var(--color-border);
  --texte-principal: var(--color-text-dark);
  --bs-primary: var(--color-health-green);
  --bs-primary-rgb: 12, 148, 136;
  --bs-secondary: var(--color-health-blue);
  --bs-secondary-rgb: 29, 78, 216;
  --bs-success: var(--color-health-green);
  --bs-success-rgb: 12, 148, 136;
  --bs-warning: var(--color-health-yellow);
  --bs-warning-rgb: 250, 204, 21;
}

/* ── Typographie ────────────────────────────────────────────────────────────── */
body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  color: var(--texte-principal);
  background-color: var(--color-bg-light);
}

h1, h2, h3, .display-heading {
  font-family: 'Playfair Display', Georgia, serif;
}

/* ── Bandeau officiel ───────────────────────────────────────────────────────── */
.site-sticky-header {
  position: sticky;
  top: 0;
  z-index: 1050;
  background-color: var(--color-surface);
  box-shadow: 0 0.75rem 1.5rem rgba(17, 24, 39, 0.12);
}

.bandeau-officiel {
  background: linear-gradient(90deg, var(--color-health-green-dark) 0%, var(--color-health-green) 68%, var(--color-health-blue-dark) 100%);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  border-bottom: 2px solid var(--or-mshp);
}

/* ── En-tête du site ────────────────────────────────────────────────────────── */
.site-header {
  background-color: var(--color-surface);
  border-bottom: 1px solid var(--gris-bordure);
  box-shadow: 0 2px 8px rgba(31, 95, 174, 0.08);
}

.site-logo-link {
  max-width: min(100%, 24.2rem);
}

.site-logo-img {
  display: block;
  width: min(100%, 24.2rem);
  height: auto;
  max-height: 3.25rem;
  object-fit: contain;
}

.site-header .btn-sm {
  padding: 0.1rem 0.35rem;
  font-size: 0.65rem;
  line-height: 1.15;
}

.site-header .small {
  font-size: 0.65rem;
}

.site-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-health-blue-dark);
  line-height: 1.2;
}

.site-subtitle {
  font-size: 0.72rem;
  color: var(--color-health-green);
  font-weight: 500;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

/* ── Drapeau de Guinée (mini) ───────────────────────────────────────────────── */
.drapeau-guinee {
  display: flex;
  width: 36px;
  height: 36px;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0,0,0,0.2);
  flex-shrink: 0;
}

.drapeau-guinee .bande {
  flex: 1;
}

.drapeau-guinee .rouge  { background-color: var(--rouge-guinee); }
.drapeau-guinee .jaune  { background-color: var(--jaune-guinee); }
.drapeau-guinee .verte  { background-color: var(--vert-guinee); }

/* ── Navigation principale ──────────────────────────────────────────────────── */
.nav-principal {
  background: linear-gradient(135deg, var(--color-health-green-dark) 0%, var(--color-health-green) 68%, var(--color-health-blue) 100%);
  border-bottom: 3px solid var(--color-health-yellow);
}

.nav-principal .nav-link {
  color: rgba(255, 255, 255, 0.88) !important;
  font-weight: 500;
  font-size: 0.9rem;
  padding: 0.6rem 1rem;
  transition: color 0.2s ease, background-color 0.2s ease;
  border-radius: 4px;
}

.nav-principal .nav-link:hover,
.nav-principal .nav-link.active {
  color: #ffffff !important;
  background-color: rgba(255, 255, 255, 0.16);
}

.nav-principal .dropdown-menu {
  border: none;
  box-shadow: 0 8px 24px rgba(31, 95, 174, 0.15);
  border-radius: 8px;
  border-top: 3px solid var(--color-health-yellow);
}

.nav-principal .dropdown-item:hover {
  background-color: var(--color-health-blue-light);
  color: var(--color-health-blue-dark);
}

/* ── Boutons ────────────────────────────────────────────────────────────────── */
.btn-primary {
  background-color: var(--color-health-green);
  border-color: var(--color-health-green);
}

.btn-primary:hover, .btn-primary:focus {
  background-color: var(--color-health-green-dark);
  border-color: var(--color-health-green-dark);
}

.btn-secondary {
  background-color: var(--color-health-blue);
  border-color: var(--color-health-blue);
}

.btn-secondary:hover,
.btn-secondary:focus {
  background-color: var(--color-health-blue-dark);
  border-color: var(--color-health-blue-dark);
}

.btn-success {
  background-color: var(--color-health-green);
  border-color: var(--color-health-green);
}

.btn-success:hover,
.btn-success:focus {
  background-color: var(--color-health-green-dark);
  border-color: var(--color-health-green-dark);
}

.btn-warning {
  background-color: var(--color-health-yellow);
  border-color: var(--color-health-yellow);
  color: var(--color-text-dark);
}

.btn-warning:hover,
.btn-warning:focus {
  background-color: var(--color-health-yellow-dark);
  border-color: var(--color-health-yellow-dark);
  color: var(--color-text-dark);
}

.btn-outline-primary {
  color: var(--color-health-green-dark);
  border-color: var(--color-health-green);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
  background-color: var(--color-health-green);
  border-color: var(--color-health-green);
  color: #fff;
}

.btn-outline-secondary {
  color: var(--color-health-blue);
  border-color: var(--color-health-blue);
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus {
  background-color: var(--color-health-blue);
  border-color: var(--color-health-blue);
  color: #fff;
}

.btn-link,
a {
  color: var(--color-health-blue);
}

a:hover {
  color: var(--color-health-blue-dark);
}

/* ── Pied de page ───────────────────────────────────────────────────────────── */
.site-footer {
  background:
    linear-gradient(135deg, rgba(10, 122, 112, 0.98) 0%, rgba(12, 148, 136, 0.95) 68%, rgba(30, 64, 175, 0.98) 100%);
  color: rgba(255, 255, 255, 0.78);
  border-top: 4px solid var(--color-health-yellow);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.site-footer h5,
.site-footer h6 {
  color: #fff !important;
}

.site-footer h6 {
  position: relative;
  padding-bottom: 0.6rem;
}

.site-footer h6::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 2rem;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--color-health-yellow), var(--color-health-green-light));
}

.site-footer p,
.site-footer .text-white-50 {
  color: rgba(255, 255, 255, 0.76) !important;
}

.site-footer i {
  color: var(--color-health-yellow);
}

.site-footer hr {
  border-color: rgba(250, 204, 21, 0.45) !important;
  opacity: 1;
}

.footer-links {
  margin: 0;
  padding: 0;
}

.footer-links li {
  margin-bottom: 0.4rem;
}

.footer-links a {
  color: rgba(255, 255, 255, 0.86);
  text-decoration: none;
  font-size: 0.875rem;
  transition: color 0.2s ease, padding-left 0.2s ease;
}

.footer-links a:hover {
  color: var(--color-health-yellow);
  padding-left: 0.25rem;
}

/* ── Cartes institutionnelles ───────────────────────────────────────────────── */
.card-institutionnel {
  border: 1px solid var(--gris-bordure);
  background-color: var(--color-surface);
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(31, 95, 174, 0.08);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.card-institutionnel:hover {
  box-shadow: 0 8px 24px rgba(31, 95, 174, 0.14);
  transform: translateY(-2px);
}

.card-institutionnel .card-header {
  background: linear-gradient(135deg, var(--color-health-green-dark) 0%, var(--color-health-green) 68%, var(--color-health-blue) 100%);
  color: white;
  border-radius: 11px 11px 0 0;
  border-bottom: 2px solid var(--color-health-yellow);
  font-weight: 600;
}

/* ── Progression d'inscription ──────────────────────────────────────────────── */
.progress-inscription {
  height: 8px;
  border-radius: 4px;
  background-color: var(--gris-bordure);
}

.progress-inscription .progress-bar {
  background: linear-gradient(90deg, var(--color-health-green-dark) 0%, var(--color-health-green) 72%, var(--color-health-blue) 100%);
  border-radius: 4px;
}

.etape-indicateur {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-size: 0.85rem;
  font-weight: 600;
  border: 2px solid var(--gris-bordure);
  background: white;
  color: #6c757d;
}

.etape-indicateur.active {
  background: var(--color-health-blue);
  border-color: var(--color-health-blue);
  color: white;
}

.etape-indicateur.complete {
  background: var(--color-health-green);
  border-color: var(--color-health-green);
  color: white;
}

/* ── Badges de statut de dossier ────────────────────────────────────────────── */
.badge-brouillon      { background-color: #64748b; color: white; }
.badge-soumis         { background-color: var(--color-health-blue); color: white; }
.badge-en-examen      { background-color: var(--color-health-yellow); color: var(--color-text-dark); }
.badge-complement     { background-color: var(--color-health-yellow-light); color: #6f4f00; border: 1px solid var(--color-health-yellow); }
.badge-verifie        { background-color: var(--color-health-green); color: white; }
.badge-approuve       { background-color: var(--color-health-green); color: white; }
.badge-rejete         { background-color: #dc3545; color: white; }

/* ── Section héro ───────────────────────────────────────────────────────────── */
.hero-section {
  background: linear-gradient(135deg, var(--color-health-green-dark) 0%, var(--color-health-green) 68%, var(--color-health-blue) 100%);
  color: white;
  padding: 5rem 0;
  position: relative;
  overflow: hidden;
}

.hero-section::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -20%;
  width: 600px;
  height: 600px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 50%;
}

.hero-section::after {
  content: '';
  position: absolute;
  bottom: -30%;
  left: -10%;
  width: 400px;
  height: 400px;
  background: rgba(242, 194, 48, 0.12);
  border-radius: 50%;
}

.hero-media-card {
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.08);
  box-shadow: 0 1.5rem 3rem rgba(17, 24, 39, 0.18);
}

.hero-media-img {
  display: block;
  width: 33.333%;
  height: auto;
  margin: 0 auto;
  object-fit: cover;
  object-position: center top;
}

.hero-media-caption {
  padding: 1rem 1.25rem;
  background: linear-gradient(135deg, rgba(10, 122, 112, 0.9), rgba(12, 148, 136, 0.84) 68%, rgba(30, 64, 175, 0.82));
  color: rgba(255, 255, 255, 0.68);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

/* ── Alertes et messages ────────────────────────────────────────────────────── */
.alert-success {
  border-left: 4px solid var(--color-health-green);
}

.alert-danger {
  border-left: 4px solid #dc3545;
}

.alert-warning {
  border-left: 4px solid var(--color-health-yellow);
}

.alert-info {
  border-left: 4px solid var(--color-health-blue);
}

/* ── Formulaires ────────────────────────────────────────────────────────────── */
.form-control:focus,
.form-select:focus {
  border-color: var(--color-health-green);
  box-shadow: 0 0 0 0.2rem rgba(12, 148, 136, 0.16);
}

/* ── Utilitaires ────────────────────────────────────────────────────────────── */
.text-mshp       { color: var(--color-health-blue-dark) !important; }
.text-mshp-vert  { color: var(--color-health-green) !important; }
.text-or-mshp    { color: var(--color-health-yellow-dark) !important; }
.bg-mshp         { background-color: var(--color-health-blue-dark) !important; }
.bg-mshp-clair   { background-color: var(--gris-clair) !important; }
.border-mshp     { border-color: var(--color-health-blue-dark) !important; }

/* ── Bootstrap palette harmonisée ──────────────────────────────────────────── */
.text-primary { color: var(--color-health-green) !important; }
.text-secondary { color: var(--color-health-blue) !important; }
.text-success { color: var(--color-health-green) !important; }
.text-warning { color: var(--color-health-yellow-dark) !important; }
.bg-primary { background-color: var(--color-health-green) !important; }
.bg-secondary { background-color: var(--color-health-blue) !important; }
.bg-success { background-color: var(--color-health-green) !important; }
.bg-warning { background-color: var(--color-health-yellow) !important; color: var(--color-text-dark) !important; }
.border-primary { border-color: var(--color-health-green) !important; }
.border-secondary { border-color: var(--color-health-blue) !important; }
.border-success { border-color: var(--color-health-green) !important; }
.border-warning { border-color: var(--color-health-yellow) !important; }

.badge.bg-primary,
.badge.text-primary {
  background-color: var(--color-health-green-light) !important;
  color: var(--color-health-green-dark) !important;
  border-color: rgba(12, 148, 136, 0.35) !important;
}

.badge.bg-success {
  background-color: var(--color-health-green) !important;
  color: #fff !important;
}

.table-light {
  --bs-table-bg: var(--color-bg-light);
  --bs-table-color: var(--color-text-dark);
  --bs-table-border-color: var(--color-border);
}

.table-hover tbody tr:hover {
  --bs-table-accent-bg: var(--color-health-green-light);
}

.page-link {
  color: var(--color-health-green);
}

.active > .page-link,
.page-link.active {
  background-color: var(--color-health-green);
  border-color: var(--color-health-green);
}

.dropdown-item:active,
.dropdown-item.active {
  background-color: var(--color-health-green);
}