/* ═══════════════════════════════════════════════════════════════
   Variables de thème — seul ce bloc :root est à modifier
   pour changer les couleurs de toute l'interface.

   Technique RGB brut : on stocke les composantes R,G,B séparées
   par des virgules dans une variable, puis on les injecte dans
   rgba() → permet des dégradés d'opacité sans dupliquer les valeurs.
   ═══════════════════════════════════════════════════════════════ */
:root {
  /* Couleur principale Espace Médical (bleu-vert) */
  --mc: 60,139,158;

  /* Dérivées opacité */
  --mc-full:   rgba(var(--mc), 1);
  --mc-dark:   rgba(var(--mc), .85);
  --mc-mid:    rgba(var(--mc), .50);
  --mc-light:  rgba(var(--mc), .15);
  --mc-xlight: rgba(var(--mc), .06);

  /* Image de fond */
  --bg-image: url('images/femme-medecin-vetements-medicaux-stethoscope-fond-blanc-medical-vue-cote-banniere-soins-sante.webp');

  /* Topbar */
  --topbar-h:   60px;
  --topbar-bg:  linear-gradient(135deg, #1a6070 0%, #3c8b9e 55%, #5bbcce 100%);
  --topbar-fg:  #fff;
  --topbar-shadow: 0 2px 10px rgba(0,0,0,.28);

  /* Logo blanc sur fond dégradé */
  --logo-filter: brightness(0) invert(1);

  /* Carte formulaire */
  --card-bg:     rgba(255,255,255,.90);
  --card-border: var(--mc-mid);
  --card-shadow: 0 6px 32px rgba(0,0,0,.14);
  --card-radius: .6rem;
  --card-w:      400px;

  /* Inputs */
  --input-border-color: rgba(var(--mc), .45);
  --input-focus-shadow: 0 0 0 .22rem rgba(var(--mc), .28);

  /* Bouton principal */
  --btn-bg:         var(--mc-dark);
  --btn-fg:         #fff;
  --btn-hover-bg:   var(--mc-full);
  --btn-border:     var(--mc-full);

  /* Tableau résultats */
  --thead-bg:    var(--mc-full);
  --thead-fg:    #fff;
  --row-odd-bg:  #ffffff;
  --row-even-bg: #edf6f8;
  --row-hover:   var(--mc-light);
  --table-border: rgba(var(--mc), .18);

  /* Icône PDF */
  --pdf-icon-color: #c0392b;
  --pdf-icon-size:  1.6rem;

  /* Footer */
  --footer-h:      38px;
  --footer-bg:     rgba(var(--mc), .20);
  --footer-border: rgba(var(--mc), .18);
  --footer-fg:     rgba(var(--mc), 1);

  /* Erreur */
  --error-color: #dc3545;
}

/* ── Fond de page ── */
body {
  min-height: 100vh;
  background-image: var(--bg-image);
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  display: flex;
  flex-direction: column;
}

/* ── Topbar ── */
.navbar-mc {
  background: var(--topbar-bg);
  box-shadow: var(--topbar-shadow);
  min-height: var(--topbar-h);
  padding: .4rem 1.25rem;
}
.navbar-mc .navbar-brand img {
  height: 44px;
  filter: var(--logo-filter);
  transition: filter .2s;
}
.navbar-mc .navbar-brand:hover img {
  filter: brightness(0) invert(1) opacity(.8);
}
.navbar-title {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  font-size: .9rem;
  font-weight: 600;
  letter-spacing: .03em;
  opacity: .9;
  white-space: nowrap;
  pointer-events: none;
}

/* ── Zone principale ── */
.main-bg {
  flex: 1;
  padding: 2.5rem 1rem;
}

/* ── Carte formulaire ── */
.search-card {
  width: min(var(--card-w), 100%);
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  backdrop-filter: blur(4px);
}
.search-card .card-title {
  color: var(--mc-full);
  font-size: .9rem;
  font-weight: 600;
  border-bottom: 1px solid var(--mc-light);
  padding-bottom: .5rem;
}

/* ── Inputs ── */
.form-control:focus {
  border-color: var(--input-border-color);
  box-shadow:   var(--input-focus-shadow);
}
.form-control {
  border-color: var(--input-border-color);
}

/* ── Bouton principal — surcharge variables Bootstrap internes ── */
.btn-mc {
  --bs-btn-color:              var(--btn-fg);
  --bs-btn-bg:                 var(--btn-bg);
  --bs-btn-border-color:       var(--btn-border);
  --bs-btn-hover-color:        var(--btn-fg);
  --bs-btn-hover-bg:           var(--btn-hover-bg);
  --bs-btn-hover-border-color: var(--btn-hover-bg);
  --bs-btn-active-bg:          var(--mc-full);
  --bs-btn-active-border-color:var(--mc-full);
  --bs-btn-focus-shadow-rgb:   var(--mc);
}

/* ── Tableau résultats ── */
.results-wrap { width: min(860px, 100%); }

.result-meta {
  font-size: .78rem;
  color: rgba(255,255,255,.85);
  text-align: right;
}

.result-table {
  font-size: .86rem;
  --bs-table-border-color: var(--table-border);
}
.result-table thead th {
  background: var(--thead-bg);
  color:       var(--thead-fg);
  font-weight: 500;
  border-color: transparent;
}
/* Fond zébré via la variable Bootstrap --bs-table-bg lue par les <td> */
.result-table tbody tr:nth-child(odd)  { --bs-table-bg: var(--row-odd-bg);  }
.result-table tbody tr:nth-child(even) { --bs-table-bg: var(--row-even-bg); }
.result-table tbody tr:hover           { filter: brightness(.96); }

/* ── Liens PDF ── */
.pdf-link {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  text-decoration: none;
  color: rgba(var(--mc), .9);
  font-style: italic;
  transition: color .15s;
}
.pdf-link:hover { color: var(--mc-full); text-decoration: underline; }
.pdf-icon {
  color:     var(--pdf-icon-color);
  font-size: var(--pdf-icon-size);
  line-height: 1;
}

/* ── Footer ── */
.footer-mc {
  position:    relative;
  min-height:  var(--footer-h);
  background:  var(--footer-bg);
  border-top:  1px solid var(--footer-border);
  color:       var(--footer-fg);
  font-size:   .78rem;
  flex-shrink: 0;
  display:     flex;
  justify-content: center;
  align-items: center;
}
.footer-theme {
  position: absolute;
  right: .9rem;
  display: flex;
  align-items: center;
  gap: .35rem;
  font-size: .72rem;
  color: var(--footer-fg);
}
.footer-webmaster {
  color: var(--footer-fg);
  opacity: .7;
  text-decoration: none;
}
.footer-webmaster:hover { opacity: 1; text-decoration: underline; color: var(--footer-fg); }
.footer-theme label { cursor: pointer; opacity: .75; }
.footer-theme input[type=color] {
  width: 22px;
  height: 16px;
  border: 1px solid rgba(0,0,0,.15);
  border-radius: .2rem;
  padding: 1px;
  cursor: pointer;
  background: transparent;
}
.footer-theme button {
  background: none;
  border: none;
  color: var(--footer-fg);
  cursor: pointer;
  font-size: .85rem;
  opacity: .55;
  padding: 0;
  line-height: 1;
}
.footer-theme button:hover { opacity: 1; }

/* ── Responsive ── */
@media (max-width: 576px) {
  :root { --card-w: 100%; }
  .search-card  { border-radius: .3rem; }
  .result-table { font-size: .78rem; }
}

/* ── Palette de thème ── */