/* ==========================================================================
   HÔPITAL LAQUINTINIE DE DOUALA — Template sur mesure
   Feuille de style principale
   Palette : bleu ciel / noir clair / blanc  —  Mode clair & sombre
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. VARIABLES DE THÈME
   -------------------------------------------------------------------------- */
:root {
  /* Couleurs de marque */
  --hl-sky: #0ea5e9;
  --hl-sky-dark: #0284c7;
  --hl-sky-light: #38bdf8;
  --hl-sky-soft: #e0f2fe;
  --hl-ink: #1e293b;          /* noir clair */
  --hl-ink-soft: #334155;
  --hl-green: #10b981;
  --hl-amber: #f59e0b;
  --hl-red: #ef4444;
  --hl-violet: #8b5cf6;

  /* Surfaces (mode clair) */
  --bg-body: #f5f8fb;
  --bg-surface: #ffffff;
  --bg-surface-2: #f1f5f9;
  --bg-topbar: #0f172a;
  --text-main: #1e293b;
  --text-muted: #64748b;
  --border-color: #e2e8f0;
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, .06);
  --shadow-md: 0 6px 18px rgba(15, 23, 42, .08);
  --shadow-lg: 0 18px 45px rgba(15, 23, 42, .12);

  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 24px;

  --font-title: "Poppins", "Segoe UI", system-ui, sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, sans-serif;
}

[data-theme="dark"] {
  --bg-body: #0b1220;
  --bg-surface: #131c2e;
  --bg-surface-2: #1b2740;
  --bg-topbar: #060b16;
  --text-main: #e2e8f0;
  --text-muted: #94a3b8;
  --border-color: #24334d;
  --hl-sky-soft: #12283c;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-md: 0 6px 18px rgba(0, 0, 0, .45);
  --shadow-lg: 0 18px 45px rgba(0, 0, 0, .55);
}

/* --------------------------------------------------------------------------
   2. BASE
   -------------------------------------------------------------------------- */
* { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  background-color: var(--bg-body);
  color: var(--text-main);
  font-size: 15px;
  line-height: 1.65;
  transition: background-color .3s ease, color .3s ease;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5 {
  font-family: var(--font-title);
  font-weight: 700;
  color: var(--text-main);
  letter-spacing: -.02em;
}

a { text-decoration: none; color: var(--hl-sky-dark); }
a:hover { color: var(--hl-sky); }
p { color: var(--text-muted); }

.text-sky { color: var(--hl-sky) !important; }
.text-ink { color: var(--text-main) !important; }
.text-soft { color: var(--text-muted) !important; }
.bg-sky { background-color: var(--hl-sky) !important; }
.bg-sky-soft { background-color: var(--hl-sky-soft) !important; }
.bg-surface { background-color: var(--bg-surface) !important; }
.bg-surface-2 { background-color: var(--bg-surface-2) !important; }
.fw-800 { font-weight: 800 !important; }
.fs-13 { font-size: 13px !important; }
.fs-14 { font-size: 14px !important; }
.rounded-hl { border-radius: var(--radius) !important; }

/* --------------------------------------------------------------------------
   3. PRELOADER
   -------------------------------------------------------------------------- */
#hl-preloader {
  position: fixed;
  inset: 0;
  z-index: 20000;
  background: var(--bg-body);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  transition: opacity .5s ease, visibility .5s ease;
}
#hl-preloader.is-hidden { opacity: 0; visibility: hidden; }
.hl-spinner {
  width: 62px; height: 62px;
  border-radius: 50%;
  border: 5px solid var(--hl-sky-soft);
  border-top-color: var(--hl-sky);
  animation: hl-spin .8s linear infinite;
}
.hl-preloader-brand {
  font-family: var(--font-title);
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-size: 12px;
  color: var(--text-muted);
}
@keyframes hl-spin { to { transform: rotate(360deg); } }

/* --------------------------------------------------------------------------
   4. TOPBAR + NAVBAR
   -------------------------------------------------------------------------- */
.hl-topbar {
  background: var(--bg-topbar);
  color: #cbd5e1;
  font-size: 13px;
  padding: 8px 0;
}
.hl-topbar a { color: #cbd5e1; }
.hl-topbar a:hover { color: var(--hl-sky-light); }
.hl-topbar .hl-sep { color: #334155; }
.hl-flag {
  width: 22px; height: 15px; border-radius: 3px; object-fit: cover;
  display: inline-block; vertical-align: -2px;
}
.hl-flag-btn {
  background: none; border: 0; padding: 2px 5px; border-radius: 4px;
  line-height: 1; opacity: .6; transition: opacity .2s;
}
.hl-flag-btn.active, .hl-flag-btn:hover { opacity: 1; }

.hl-navbar {
  background: var(--bg-surface);
  box-shadow: var(--shadow-sm);
  padding: 10px 0;
  position: sticky; top: 0; z-index: 1030;
  border-bottom: 1px solid var(--border-color);
}
.hl-logo { display: flex; align-items: center; gap: 12px; }
.hl-logo-mark {
  width: 46px; height: 46px; border-radius: 14px;
  background: linear-gradient(135deg, var(--hl-sky), var(--hl-sky-dark));
  color: #fff; display: grid; place-items: center;
  font-size: 22px; box-shadow: 0 6px 14px rgba(14, 165, 233, .35);
}
.hl-logo-text { line-height: 1.15; }
.hl-logo-text strong {
  display: block; font-family: var(--font-title); font-weight: 800;
  font-size: 17px; color: var(--text-main);
}
.hl-logo-text span { font-size: 11.5px; color: var(--text-muted); letter-spacing: .04em; }

.hl-navbar .nav-link {
  color: var(--text-main); font-weight: 600; font-size: 14.5px;
  padding: 8px 14px !important; border-radius: 9px; transition: all .2s;
}
.hl-navbar .nav-link:hover, .hl-navbar .nav-link.active {
  color: var(--hl-sky-dark); background: var(--hl-sky-soft);
}
.hl-navbar .dropdown-menu {
  border: 1px solid var(--border-color); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md); background: var(--bg-surface); padding: 8px;
}
.hl-navbar .dropdown-item {
  color: var(--text-main); border-radius: 8px; font-size: 14px; padding: 8px 12px;
}
.hl-navbar .dropdown-item:hover { background: var(--hl-sky-soft); color: var(--hl-sky-dark); }

.hl-theme-toggle {
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--border-color); background: var(--bg-surface-2);
  color: var(--text-main); display: grid; place-items: center; transition: all .25s;
}
.hl-theme-toggle:hover { background: var(--hl-sky); color: #fff; border-color: var(--hl-sky); }
[data-theme="dark"] .hl-icon-sun { display: inline-block; }
[data-theme="dark"] .hl-icon-moon { display: none; }
.hl-icon-sun { display: none; }

/* --------------------------------------------------------------------------
   5. BOUTONS
   -------------------------------------------------------------------------- */
.btn { font-weight: 600; border-radius: 10px; padding: 10px 20px; font-size: 14.5px; }
.btn-sky {
  background: linear-gradient(135deg, var(--hl-sky), var(--hl-sky-dark));
  color: #fff; border: 0; box-shadow: 0 6px 16px rgba(14, 165, 233, .3);
}
.btn-sky:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 10px 22px rgba(14, 165, 233, .4); }
.btn-outline-sky { border: 1.5px solid var(--hl-sky); color: var(--hl-sky-dark); background: transparent; }
.btn-outline-sky:hover { background: var(--hl-sky); color: #fff; }
.btn-ink { background: var(--hl-ink); color: #fff; border: 0; }
.btn-ink:hover { background: #0f172a; color: #fff; }
.btn-soft { background: var(--bg-surface-2); color: var(--text-main); border: 1px solid var(--border-color); }
.btn-soft:hover { background: var(--hl-sky-soft); color: var(--hl-sky-dark); }
.btn-sm { padding: 6px 13px; font-size: 13px; border-radius: 8px; }
.btn-lg { padding: 13px 28px; font-size: 16px; border-radius: 12px; }

/* --------------------------------------------------------------------------
   6. CARTES & SECTIONS
   -------------------------------------------------------------------------- */
.hl-section { padding: 74px 0; }
.hl-section-sm { padding: 46px 0; }
.hl-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--hl-sky-soft); color: var(--hl-sky-dark);
  font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  padding: 6px 14px; border-radius: 100px; margin-bottom: 14px;
}
.hl-title { font-size: clamp(26px, 3.4vw, 38px); margin-bottom: 12px; }
.hl-subtitle { color: var(--text-muted); max-width: 640px; }

.hl-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: transform .25s ease, box-shadow .25s ease;
}
.hl-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.hl-card-body { padding: 24px; }
.hl-card-static:hover { transform: none; box-shadow: var(--shadow-sm); }

.hl-icon-box {
  width: 54px; height: 54px; border-radius: 15px;
  display: grid; place-items: center; font-size: 24px;
  background: var(--hl-sky-soft); color: var(--hl-sky-dark); margin-bottom: 16px;
}
.hl-icon-box.green { background: rgba(16,185,129,.12); color: var(--hl-green); }
.hl-icon-box.amber { background: rgba(245,158,11,.12); color: var(--hl-amber); }
.hl-icon-box.violet { background: rgba(139,92,246,.12); color: var(--hl-violet); }
.hl-icon-box.red { background: rgba(239,68,68,.12); color: var(--hl-red); }

/* --------------------------------------------------------------------------
   7. HERO / BANNIÈRE
   -------------------------------------------------------------------------- */
.hl-hero {
  position: relative; overflow: hidden;
  background: linear-gradient(120deg, #0c4a6e 0%, #0284c7 45%, #38bdf8 100%);
  color: #fff; padding: 84px 0 96px;
}
.hl-hero::before, .hl-hero::after {
  content: ""; position: absolute; border-radius: 50%;
  background: rgba(255, 255, 255, .09);
}
.hl-hero::before { width: 420px; height: 420px; top: -140px; right: -90px; }
.hl-hero::after { width: 260px; height: 260px; bottom: -110px; left: -70px; }
.hl-hero .container { position: relative; z-index: 2; }
.hl-hero h1 { color: #fff; font-size: clamp(30px, 4.6vw, 50px); line-height: 1.14; }
.hl-hero p { color: rgba(255, 255, 255, .88); font-size: 17px; }
.hl-hero-badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.28);
  color: #fff; padding: 7px 16px; border-radius: 100px; font-size: 13px; font-weight: 600;
}
.hl-hero-stat { border-left: 3px solid rgba(255,255,255,.4); padding-left: 16px; }
.hl-hero-stat strong { display: block; font-size: 27px; font-family: var(--font-title); }
.hl-hero-stat span { font-size: 13px; color: rgba(255,255,255,.82); }

.hl-pagehead {
  background: linear-gradient(120deg, #0c4a6e, #0284c7);
  color: #fff; padding: 46px 0; position: relative; overflow: hidden;
}
.hl-pagehead::after {
  content: ""; position: absolute; width: 300px; height: 300px; border-radius: 50%;
  background: rgba(255,255,255,.08); top: -120px; right: -60px;
}
.hl-pagehead h1 { color: #fff; font-size: clamp(24px, 3.2vw, 34px); margin-bottom: 6px; }
.hl-pagehead .breadcrumb { margin: 0; }
.hl-pagehead .breadcrumb-item, .hl-pagehead .breadcrumb-item a { color: rgba(255,255,255,.8); font-size: 13.5px; }
.hl-pagehead .breadcrumb-item + .breadcrumb-item::before { color: rgba(255,255,255,.5); }

/* --------------------------------------------------------------------------
   8. FORMULAIRES
   -------------------------------------------------------------------------- */
.form-label { font-weight: 600; font-size: 13.5px; color: var(--text-main); margin-bottom: 6px; }
.form-control, .form-select {
  background: var(--bg-surface); border: 1.5px solid var(--border-color);
  color: var(--text-main); border-radius: 10px; padding: 11px 14px; font-size: 14.5px;
}
.form-control:focus, .form-select:focus {
  background: var(--bg-surface); color: var(--text-main);
  border-color: var(--hl-sky); box-shadow: 0 0 0 .2rem rgba(14, 165, 233, .16);
}
.form-control::placeholder { color: var(--text-muted); opacity: .75; }
.input-group-text {
  background: var(--bg-surface-2); border: 1.5px solid var(--border-color);
  color: var(--text-muted); border-radius: 10px;
}
.form-check-input { border-color: var(--border-color); background-color: var(--bg-surface); }
.form-check-input:checked { background-color: var(--hl-sky); border-color: var(--hl-sky); }
.form-check-label { font-size: 14.5px; color: var(--text-main); }

/* Choix en tuiles (créneaux, spécialités, notes d'enquête) */
.hl-choice { position: relative; }
.hl-choice input { position: absolute; opacity: 0; width: 0; height: 0; }
.hl-choice-tile {
  display: block; text-align: center; cursor: pointer;
  border: 1.5px solid var(--border-color); background: var(--bg-surface);
  border-radius: 12px; padding: 12px 8px; font-size: 14px; font-weight: 600;
  color: var(--text-main); transition: all .2s;
}
.hl-choice-tile:hover { border-color: var(--hl-sky-light); background: var(--hl-sky-soft); }
.hl-choice input:checked + .hl-choice-tile {
  border-color: var(--hl-sky); background: var(--hl-sky); color: #fff;
  box-shadow: 0 6px 14px rgba(14,165,233,.3);
}
.hl-choice input:disabled + .hl-choice-tile {
  opacity: .45; cursor: not-allowed; text-decoration: line-through;
}

/* Étapes (stepper) */
.hl-stepper { display: flex; gap: 8px; flex-wrap: wrap; }
.hl-step {
  flex: 1 1 160px; display: flex; align-items: center; gap: 11px;
  background: var(--bg-surface); border: 1.5px solid var(--border-color);
  border-radius: 12px; padding: 12px 14px;
}
.hl-step.is-active { border-color: var(--hl-sky); background: var(--hl-sky-soft); }
.hl-step.is-done { border-color: var(--hl-green); }
.hl-step-num {
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  background: var(--bg-surface-2); color: var(--text-muted); font-weight: 700; font-size: 13px; flex-shrink: 0;
}
.hl-step.is-active .hl-step-num { background: var(--hl-sky); color: #fff; }
.hl-step.is-done .hl-step-num { background: var(--hl-green); color: #fff; }
.hl-step small { display: block; color: var(--text-muted); font-size: 11.5px; }
.hl-step strong { font-size: 13.5px; color: var(--text-main); }

/* --------------------------------------------------------------------------
   9. BADGES & STATUTS
   -------------------------------------------------------------------------- */
.hl-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 11px; border-radius: 100px; font-size: 12px; font-weight: 700;
}
.hl-badge i { font-size: 9px; }
.hl-badge-green { background: rgba(16,185,129,.12); color: #059669; }
.hl-badge-amber { background: rgba(245,158,11,.14); color: #b45309; }
.hl-badge-red { background: rgba(239,68,68,.12); color: #dc2626; }
.hl-badge-sky { background: var(--hl-sky-soft); color: var(--hl-sky-dark); }
.hl-badge-grey { background: var(--bg-surface-2); color: var(--text-muted); }
.hl-badge-violet { background: rgba(139,92,246,.12); color: #7c3aed; }
[data-theme="dark"] .hl-badge-amber { color: #fbbf24; }
[data-theme="dark"] .hl-badge-green { color: #34d399; }
[data-theme="dark"] .hl-badge-red { color: #f87171; }

/* --------------------------------------------------------------------------
   10. TABLEAUX
   -------------------------------------------------------------------------- */
.hl-table { width: 100%; margin: 0; border-collapse: separate; border-spacing: 0; }
.hl-table thead th {
  background: var(--bg-surface-2); color: var(--text-muted);
  font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  padding: 13px 16px; border-bottom: 1px solid var(--border-color); white-space: nowrap;
}
.hl-table tbody td {
  padding: 15px 16px; border-bottom: 1px solid var(--border-color);
  font-size: 14px; color: var(--text-main); vertical-align: middle;
}
.hl-table tbody tr:last-child td { border-bottom: 0; }
.hl-table tbody tr:hover { background: var(--bg-surface-2); }
.hl-table-wrap { overflow-x: auto; border-radius: var(--radius); }

.hl-avatar {
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: var(--hl-sky-soft); color: var(--hl-sky-dark);
  font-weight: 700; font-size: 14px; flex-shrink: 0;
}
.hl-avatar-lg { width: 68px; height: 68px; font-size: 22px; }
.hl-avatar-sm { width: 32px; height: 32px; font-size: 12px; }

/* --------------------------------------------------------------------------
   11. ESPACES CONNECTÉS (dashboard)
   -------------------------------------------------------------------------- */
.hl-app { display: flex; min-height: calc(100vh - 68px); }
.hl-sidebar {
  width: 264px; flex-shrink: 0; background: var(--bg-surface);
  border-right: 1px solid var(--border-color); padding: 22px 16px;
  position: sticky; top: 68px; height: calc(100vh - 68px); overflow-y: auto;
}
.hl-sidebar-user {
  display: flex; align-items: center; gap: 12px; padding: 14px;
  background: var(--bg-surface-2); border-radius: var(--radius-sm); margin-bottom: 20px;
}
.hl-sidebar-user strong { display: block; font-size: 14px; }
.hl-sidebar-user span { font-size: 12px; color: var(--text-muted); }
.hl-sidebar-label {
  font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-muted); padding: 0 12px; margin: 18px 0 8px;
}
.hl-sidebar-link {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px;
  border-radius: 10px; color: var(--text-main); font-weight: 600; font-size: 14px;
  margin-bottom: 3px; transition: all .2s;
}
.hl-sidebar-link i { font-size: 17px; color: var(--text-muted); }
.hl-sidebar-link:hover { background: var(--bg-surface-2); color: var(--text-main); }
.hl-sidebar-link.active { background: var(--hl-sky); color: #fff; box-shadow: 0 6px 14px rgba(14,165,233,.3); }
.hl-sidebar-link.active i { color: #fff; }
.hl-sidebar-link .badge { margin-left: auto; }

.hl-main { flex: 1; padding: 28px; min-width: 0; }
.hl-main-head { margin-bottom: 24px; }
.hl-main-head h1 { font-size: 24px; margin-bottom: 4px; }
.hl-main-head p { margin: 0; font-size: 14px; }

.hl-stat {
  background: var(--bg-surface); border: 1px solid var(--border-color);
  border-radius: var(--radius); padding: 20px; height: 100%;
}
.hl-stat-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.hl-stat-icon { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; font-size: 19px; }
.hl-stat strong { display: block; font-family: var(--font-title); font-size: 28px; line-height: 1.1; }
.hl-stat span { font-size: 13px; color: var(--text-muted); }

@media (max-width: 991.98px) {
  .hl-app { flex-direction: column; }
  .hl-sidebar {
    width: 100%; position: static; height: auto; border-right: 0;
    border-bottom: 1px solid var(--border-color);
  }
  .hl-main { padding: 20px 16px; }
}

/* --------------------------------------------------------------------------
   12. PLANNING HEBDOMADAIRE (espace médecin)
   -------------------------------------------------------------------------- */
.hl-planning { min-width: 900px; border: 1px solid var(--border-color); border-radius: var(--radius); overflow: hidden; }
.hl-planning-row { display: grid; grid-template-columns: 92px repeat(6, 1fr); }
.hl-planning-row + .hl-planning-row { border-top: 1px solid var(--border-color); }
.hl-planning-head > div {
  background: var(--bg-surface-2); padding: 12px 8px; text-align: center;
  font-weight: 700; font-size: 13px;
}
.hl-planning-head > div small { display: block; font-weight: 500; font-size: 11px; color: var(--text-muted); }
.hl-planning-hour {
  background: var(--bg-surface-2); display: grid; place-items: center;
  font-size: 12px; font-weight: 700; color: var(--text-muted);
  border-right: 1px solid var(--border-color);
}
.hl-slot {
  border-right: 1px solid var(--border-color); padding: 7px; min-height: 78px;
  background: var(--bg-surface);
}
.hl-slot:last-child { border-right: 0; }
.hl-slot-item {
  border-radius: 9px; padding: 7px 9px; font-size: 11.5px; font-weight: 600; height: 100%;
  border-left: 3px solid;
}
.hl-slot-item small { display: block; font-weight: 500; opacity: .85; font-size: 10.5px; }
.hl-slot-consult { background: rgba(14,165,233,.12); border-color: var(--hl-sky); color: var(--hl-sky-dark); }
.hl-slot-bloc { background: rgba(139,92,246,.12); border-color: var(--hl-violet); color: #7c3aed; }
.hl-slot-visite { background: rgba(16,185,129,.12); border-color: var(--hl-green); color: #047857; }
.hl-slot-garde { background: rgba(245,158,11,.14); border-color: var(--hl-amber); color: #b45309; }
.hl-slot-off { background: var(--bg-surface-2); border-color: var(--border-color); color: var(--text-muted); }
[data-theme="dark"] .hl-slot-consult { color: var(--hl-sky-light); }
[data-theme="dark"] .hl-slot-bloc { color: #a78bfa; }
[data-theme="dark"] .hl-slot-visite { color: #34d399; }
[data-theme="dark"] .hl-slot-garde { color: #fbbf24; }
.hl-legend { display: flex; flex-wrap: wrap; gap: 16px; font-size: 12.5px; color: var(--text-muted); }
.hl-legend i { font-size: 10px; margin-right: 5px; }

/* --------------------------------------------------------------------------
   13. ENQUÊTE DE SATISFACTION
   -------------------------------------------------------------------------- */
.hl-quiz-card { border-left: 4px solid var(--hl-sky); }
.hl-quiz-card.done { border-left-color: var(--hl-green); }
.hl-quiz-card.closed { border-left-color: var(--text-muted); }
.hl-question {
  background: var(--bg-surface); border: 1px solid var(--border-color);
  border-radius: var(--radius); padding: 22px; margin-bottom: 16px;
}
.hl-question-num {
  display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 8px;
  background: var(--hl-sky-soft); color: var(--hl-sky-dark); font-size: 12.5px; font-weight: 800;
  margin-right: 10px;
}
.hl-scale { display: flex; gap: 8px; flex-wrap: wrap; }
.hl-scale .hl-choice { flex: 1 1 90px; }
.hl-rating { display: inline-flex; flex-direction: row-reverse; gap: 4px; }
.hl-rating input { position: absolute; opacity: 0; }
.hl-rating label { font-size: 26px; color: var(--border-color); cursor: pointer; transition: color .15s; }
.hl-rating input:checked ~ label,
.hl-rating label:hover, .hl-rating label:hover ~ label { color: var(--hl-amber); }
.hl-progress-thin { height: 7px; border-radius: 100px; background: var(--bg-surface-2); }
.hl-progress-thin .progress-bar { background: linear-gradient(90deg, var(--hl-sky), var(--hl-sky-dark)); border-radius: 100px; }

/* --------------------------------------------------------------------------
   14. TIMELINE
   -------------------------------------------------------------------------- */
.hl-timeline { position: relative; padding-left: 30px; }
.hl-timeline::before {
  content: ""; position: absolute; left: 9px; top: 6px; bottom: 6px;
  width: 2px; background: var(--border-color);
}
.hl-timeline-item { position: relative; padding-bottom: 22px; }
.hl-timeline-item::before {
  content: ""; position: absolute; left: -26px; top: 4px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--hl-sky); border: 3px solid var(--bg-surface);
  box-shadow: 0 0 0 2px var(--hl-sky);
}
.hl-timeline-item.done::before { background: var(--hl-green); box-shadow: 0 0 0 2px var(--hl-green); }
.hl-timeline-item.pending::before { background: var(--bg-surface-2); box-shadow: 0 0 0 2px var(--border-color); }
.hl-timeline-item h6 { margin-bottom: 2px; font-size: 14.5px; }
.hl-timeline-item small { color: var(--text-muted); }

/* --------------------------------------------------------------------------
   15. MÉDECINS
   -------------------------------------------------------------------------- */
.hl-doctor { text-align: center; padding: 26px 20px; }
.hl-doctor .hl-avatar { margin: 0 auto 14px; }
.hl-doctor h5 { font-size: 16px; margin-bottom: 2px; }
.hl-doctor .spec { color: var(--hl-sky-dark); font-size: 13px; font-weight: 600; }
.hl-dispo-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.hl-dispo-dot.on { background: var(--hl-green); box-shadow: 0 0 0 3px rgba(16,185,129,.2); }
.hl-dispo-dot.off { background: var(--text-muted); }

/* --------------------------------------------------------------------------
   16. FOOTER
   -------------------------------------------------------------------------- */
.hl-footer { background: var(--bg-topbar); color: #cbd5e1; padding: 56px 0 0; }
.hl-footer h6 {
  color: #fff; font-size: 14px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; margin-bottom: 18px;
}
.hl-footer a { color: #94a3b8; font-size: 14px; display: inline-block; padding: 4px 0; }
.hl-footer a:hover { color: var(--hl-sky-light); }
.hl-footer p { color: #94a3b8; font-size: 14px; }
.hl-footer-bottom {
  border-top: 1px solid #1e293b; margin-top: 40px; padding: 18px 0;
  font-size: 13px; color: #64748b;
}
.hl-social {
  width: 38px; height: 38px; border-radius: 10px; background: #1e293b;
  display: inline-grid; place-items: center; color: #cbd5e1; margin-right: 6px;
}
.hl-social:hover { background: var(--hl-sky); color: #fff; }

/* --------------------------------------------------------------------------
   17. DIVERS
   -------------------------------------------------------------------------- */
.hl-alert {
  border: 0; border-left: 4px solid; border-radius: var(--radius-sm);
  padding: 14px 18px; font-size: 14px;
}
.hl-alert-sky { background: var(--hl-sky-soft); border-color: var(--hl-sky); color: var(--text-main); }
.hl-alert-green { background: rgba(16,185,129,.1); border-color: var(--hl-green); color: var(--text-main); }
.hl-alert-amber { background: rgba(245,158,11,.1); border-color: var(--hl-amber); color: var(--text-main); }

.nav-tabs { border-bottom: 1px solid var(--border-color); gap: 4px; }
.nav-tabs .nav-link {
  border: 0; border-bottom: 2.5px solid transparent; color: var(--text-muted);
  font-weight: 600; font-size: 14.5px; padding: 10px 16px; border-radius: 0;
}
.nav-tabs .nav-link:hover { color: var(--hl-sky-dark); border-bottom-color: var(--hl-sky-light); }
.nav-tabs .nav-link.active {
  background: transparent; color: var(--hl-sky-dark); border-bottom-color: var(--hl-sky);
}

.modal-content {
  background: var(--bg-surface); color: var(--text-main);
  border: 1px solid var(--border-color); border-radius: var(--radius);
}
.modal-header, .modal-footer { border-color: var(--border-color); }
.btn-close { filter: var(--bs-btn-close-filter, none); }
[data-theme="dark"] .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }

.hl-back-top {
  position: fixed; right: 22px; bottom: 22px; z-index: 999;
  width: 46px; height: 46px; border-radius: 50%; border: 0;
  background: var(--hl-sky); color: #fff; box-shadow: var(--shadow-md);
  display: grid; place-items: center; opacity: 0; visibility: hidden; transition: all .3s;
}
.hl-back-top.show { opacity: 1; visibility: visible; }

::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: var(--bg-surface-2); }
::-webkit-scrollbar-thumb { background: #94a3b8; border-radius: 100px; }
::-webkit-scrollbar-thumb:hover { background: var(--hl-sky); }

@media print {
  .hl-topbar, .hl-navbar, .hl-sidebar, .hl-footer, .hl-back-top, .no-print { display: none !important; }
  .hl-main { padding: 0; }
}

/* ==========================================================================
   18. EN-TÊTE ÉTENDU (topbar e-commerce, navbar majuscules, mini-pub)
   ========================================================================== */
.hl-topbar { padding: 7px 0; }
.hl-topbar-info { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; }
.hl-topbar-tools { display: flex; align-items: center; gap: 10px; }

.hl-top-btn {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid #26354d; background: #16233a; color: #cbd5e1;
  border-radius: 8px; padding: 5px 11px; font-size: 12.5px; font-weight: 600;
  transition: all .2s; white-space: nowrap;
}
.hl-top-btn:hover { background: var(--hl-sky); border-color: var(--hl-sky); color: #fff; }
.hl-top-btn.is-primary { background: var(--hl-sky); border-color: var(--hl-sky); color: #fff; }
.hl-top-btn.is-primary:hover { background: var(--hl-sky-dark); border-color: var(--hl-sky-dark); }

.hl-icon-link {
  position: relative; display: inline-grid; place-items: center;
  width: 34px; height: 34px; border-radius: 9px;
  background: #16233a; border: 1px solid #26354d; color: #cbd5e1;
  font-size: 15px; transition: all .2s;
}
.hl-icon-link:hover { background: var(--hl-sky); border-color: var(--hl-sky); color: #fff; }
.hl-count {
  position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px;
  padding: 0 4px; border-radius: 100px; background: var(--hl-red); color: #fff;
  font-size: 10.5px; font-weight: 800; display: grid; place-items: center;
  border: 2px solid var(--bg-topbar);
}
.hl-count.is-sky { background: var(--hl-sky); }

.hl-lang-toggle {
  display: inline-flex; align-items: center; gap: 7px;
  background: #16233a; border: 1px solid #26354d; color: #cbd5e1;
  border-radius: 8px; padding: 5px 10px; font-size: 12.5px; font-weight: 600;
}
.hl-lang-toggle:hover, .hl-lang-toggle:focus { background: #1d2c46; color: #fff; }
.hl-lang-menu { min-width: 190px; }
.hl-lang-menu .dropdown-item { display: flex; align-items: center; gap: 10px; }
.hl-lang-menu .hl-flag { width: 22px; height: 15px; }

/* Navbar principale */
.hl-navbar .navbar-nav .nav-link {
  text-transform: uppercase; font-size: 13px; letter-spacing: .04em; font-weight: 700;
}
.hl-navbar .dropdown-menu .dropdown-item { text-transform: uppercase; font-size: 12.5px; font-weight: 600; letter-spacing: .03em; }
.hl-search {
  display: flex; align-items: stretch; background: var(--bg-surface-2);
  border: 1.5px solid var(--border-color); border-radius: 100px; overflow: hidden;
  min-width: 260px;
}
.hl-search select {
  border: 0; background: transparent; color: var(--text-muted);
  font-size: 12.5px; font-weight: 600; padding: 0 6px 0 14px; outline: none; max-width: 130px;
}
.hl-search input {
  border: 0; background: transparent; color: var(--text-main);
  font-size: 13.5px; padding: 9px 8px; flex: 1; min-width: 0; outline: none;
}
.hl-search input::placeholder { color: var(--text-muted); }
.hl-search button {
  border: 0; background: var(--hl-sky); color: #fff; padding: 0 18px; font-size: 15px;
}
.hl-search button:hover { background: var(--hl-sky-dark); }

/* Mini-pub */
.hl-minipub {
  background: linear-gradient(90deg, var(--hl-sky-dark), var(--hl-sky));
  color: #fff; font-size: 13px; font-weight: 600; overflow: hidden;
}
.hl-minipub-track {
  display: flex; align-items: center; gap: 42px; padding: 9px 0;
  white-space: nowrap; overflow-x: auto; scrollbar-width: none;
}
.hl-minipub-track::-webkit-scrollbar { display: none; }
.hl-minipub-track span { display: inline-flex; align-items: center; gap: 8px; }
.hl-minipub-track i { opacity: .85; }

/* ==========================================================================
   19. SLIDER DE BANNIÈRE
   ========================================================================== */
.hl-slider { position: relative; }
.hl-slide {
  position: relative; min-height: 560px; display: flex; align-items: center;
  background-size: cover; background-position: center; overflow: hidden;
}
.hl-slide::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(105deg, rgba(7,45,74,.94) 0%, rgba(2,132,199,.78) 52%, rgba(56,189,248,.42) 100%);
}
.hl-slide-shape {
  position: absolute; border-radius: 50%; background: rgba(255,255,255,.10);
  pointer-events: none;
}
.hl-slide-shape.s1 { width: 460px; height: 460px; top: -160px; right: -110px; }
.hl-slide-shape.s2 { width: 250px; height: 250px; bottom: -90px; left: 8%; background: rgba(255,255,255,.07); }
.hl-slide-shape.s3 {
  width: 190px; height: 190px; top: 18%; right: 22%; border-radius: 34%;
  background: rgba(255,255,255,.06); transform: rotate(24deg);
}
.hl-slide .container { position: relative; z-index: 2; }
.hl-slide-content { max-width: 640px; color: #fff; padding: 74px 0; }
.hl-slide-content h2 {
  color: #fff; font-size: clamp(28px, 4.4vw, 50px); line-height: 1.12; margin-bottom: 16px;
}
.hl-slide-content p { color: rgba(255,255,255,.9); font-size: 17px; margin-bottom: 26px; }
.hl-slide-badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,.17); border: 1px solid rgba(255,255,255,.3);
  padding: 7px 16px; border-radius: 100px; font-size: 12.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em; margin-bottom: 16px;
}
.carousel-control-prev, .carousel-control-next { width: 6%; opacity: .8; }
.carousel-indicators [data-bs-target] {
  width: 34px; height: 4px; border-radius: 100px; background: rgba(255,255,255,.5);
  border: 0; opacity: 1;
}
.carousel-indicators .active { background: #fff; }

/* Bandeau d'accès rapide sous le slider */
.hl-quickbar {
  background: var(--bg-surface); border-bottom: 1px solid var(--border-color);
  box-shadow: var(--shadow-sm); position: relative; z-index: 3;
}
.hl-quick {
  display: flex; align-items: center; gap: 14px; padding: 20px 18px;
  border-right: 1px solid var(--border-color); height: 100%;
}
.hl-quick:last-child { border-right: 0; }
.hl-quick i { font-size: 26px; color: var(--hl-sky); }
.hl-quick strong { display: block; font-size: 14.5px; }
.hl-quick span { font-size: 12.5px; color: var(--text-muted); }

/* ==========================================================================
   20. SECTIONS D'ACCUEIL
   ========================================================================== */
.hl-feature-img {
  border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md);
  aspect-ratio: 4 / 3; width: 100%; object-fit: cover; display: block;
}
.hl-cat-tile {
  position: relative; display: block; border-radius: var(--radius);
  overflow: hidden; height: 210px; color: #fff;
}
.hl-cat-tile img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s; }
.hl-cat-tile:hover img { transform: scale(1.07); }
.hl-cat-tile-body {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end;
  padding: 18px; background: linear-gradient(to top, rgba(7,25,45,.86), rgba(7,25,45,.06) 65%);
}
.hl-cat-tile h5 { color: #fff; font-size: 17px; margin-bottom: 2px; }
.hl-cat-tile span { font-size: 12.5px; color: rgba(255,255,255,.85); }

.hl-chip {
  display: flex; align-items: center; gap: 10px; padding: 12px 14px;
  background: var(--bg-surface); border: 1px solid var(--border-color);
  border-radius: 12px; color: var(--text-main); font-weight: 600; font-size: 13.5px;
  transition: all .2s; height: 100%;
}
.hl-chip:hover { border-color: var(--hl-sky); background: var(--hl-sky-soft); color: var(--hl-sky-dark); }
.hl-chip i { font-size: 17px; color: var(--hl-sky); }

/* Carte de prestation (grille 4 colonnes) */
.hl-prestation { position: relative; height: 100%; overflow: hidden; }
.hl-prestation-media { position: relative; height: 160px; overflow: hidden; }
.hl-prestation-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s; }
.hl-prestation:hover .hl-prestation-media img { transform: scale(1.06); }
.hl-prestation-tag {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  background: var(--hl-green); color: #fff; font-size: 11px; font-weight: 800;
  padding: 4px 10px; border-radius: 100px; text-transform: uppercase; letter-spacing: .05em;
}
.hl-prestation-tag.is-red { background: var(--hl-red); }
.hl-prestation-fav {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  width: 34px; height: 34px; border-radius: 50%; border: 0;
  background: rgba(255,255,255,.92); color: var(--hl-ink);
  display: grid; place-items: center; font-size: 15px; transition: all .2s;
}
.hl-prestation-fav:hover { background: var(--hl-red); color: #fff; }
.hl-prestation-body { padding: 16px; }
.hl-prestation-body h6 { font-size: 15px; margin-bottom: 4px; }
.hl-prestation-meta { font-size: 12.5px; color: var(--text-muted); margin-bottom: 10px; }
.hl-price { font-family: var(--font-title); font-weight: 800; font-size: 18px; color: var(--hl-sky-dark); }
.hl-price-old { font-size: 13px; color: var(--text-muted); text-decoration: line-through; margin-left: 6px; }

/* Témoignages */
.hl-quote { font-size: 15px; color: var(--text-main); font-style: italic; }
.hl-stars { color: var(--hl-amber); font-size: 14px; }

/* Partenaires */
.hl-partner {
  display: grid; place-items: center; height: 92px; border-radius: var(--radius-sm);
  background: var(--bg-surface); border: 1px solid var(--border-color);
  color: var(--text-muted); font-weight: 800; letter-spacing: .06em; font-size: 14px;
  text-align: center; padding: 10px;
}

/* Bandeau CTA */
.hl-cta {
  position: relative; border-radius: var(--radius-lg); overflow: hidden;
  background-size: cover; background-position: center; color: #fff;
}
.hl-cta::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(7,45,74,.93), rgba(2,132,199,.72));
}
.hl-cta > * { position: relative; z-index: 2; }
.hl-cta h2 { color: #fff; }
.hl-cta p { color: rgba(255,255,255,.9); }

/* Actualités */
.hl-post-media { height: 190px; overflow: hidden; }
.hl-post-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.hl-card:hover .hl-post-media img { transform: scale(1.06); }
.hl-post-date {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; color: var(--text-muted); font-weight: 600;
}

@media (max-width: 991.98px) {
  .hl-slide { min-height: 460px; }
  .hl-slide-content { padding: 56px 0; }
  .hl-quick { border-right: 0; border-bottom: 1px solid var(--border-color); padding: 16px; }
  .hl-search { min-width: 100%; margin: 10px 0; }
}
@media (max-width: 575.98px) {
  .hl-topbar { font-size: 12px; }
  .hl-slide { min-height: 420px; }
}

/* --------------------------------------------------------------------------
   21. AJUSTEMENTS FINS (barre de navigation large, cartes de même hauteur)
   -------------------------------------------------------------------------- */
.hl-navbar .navbar-collapse { flex-wrap: wrap; row-gap: 10px; }
.hl-navbar .navbar-nav .nav-link { padding: 8px 10px !important; }
@media (min-width: 1400px) {
  .hl-navbar .navbar-nav .nav-link { padding: 8px 13px !important; }
}
.hl-search { flex: 1 1 220px; max-width: 340px; }

/* Les cartes de prestation gardent leurs boutons alignés en bas */
.hl-prestation { display: flex; flex-direction: column; }
.hl-prestation .hl-prestation-body { display: flex; flex-direction: column; flex: 1; }
.hl-prestation .hl-prestation-body > .d-flex:last-child { margin-top: auto; }
.hl-doctor { display: flex; flex-direction: column; }
.hl-doctor .btn, .hl-doctor .d-flex.gap-2 { margin-top: auto; }
.hl-logo-text strong { white-space: nowrap; }
@media (max-width: 767.98px) {
  .carousel-control-prev, .carousel-control-next { display: none; }
  .hl-slide-content { padding: 44px 0; }
}

/* ==========================================================================
   GRAPHIQUES EN BARRES (tableaux de bord)
   Ajout a la feuille d'origine. Les barres utilisent les memes variables de
   theme que le reste du site : elles suivent donc automatiquement le mode
   clair et le mode sombre, sans regle dupliquee.
   ========================================================================== */

.hl-bar-track {
  height: 8px;
  border-radius: 999px;
  background: var(--bg-surface-2);
  overflow: hidden;
}

.hl-bar-fill {
  height: 100%;
  /* Extremite arrondie cote donnee, ancrage plat cote axe : la barre reste
     visuellement accrochee a sa ligne de base. */
  border-radius: 0 999px 999px 0;
  transition: width .4s ease;
  min-width: 4px;
}

/* Barres verticales pour les series temporelles (rendez-vous par mois). */
.hl-columns {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 160px;
  padding-top: 8px;
}

.hl-column {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

.hl-column-fill {
  width: 100%;
  max-width: 34px;
  border-radius: 6px 6px 0 0;
  background: var(--hl-sky);
  min-height: 3px;
  transition: height .4s ease;
}

.hl-column-label {
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.hl-column-value {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-main);
}

/* Tuile cliquable des parcours (specialite, action rapide). */
.hl-choice-tile {
  display: block;
  padding: 18px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  background: var(--bg-surface);
  color: var(--text-main);
  text-align: center;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.hl-choice-tile:hover {
  border-color: var(--hl-sky);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
  color: var(--text-main);
}

.hl-choice-tile .hl-icon-box { margin-left: auto; margin-right: auto; }

/* Contenu riche issu de l'editeur (CKEditor) : on borne les images et on
   aere les paragraphes, sinon un collage depuis Word deborde de la colonne. */
.hl-rich { color: var(--text-muted); line-height: 1.8; }
.hl-rich p { margin-bottom: 1rem; }
.hl-rich img { max-width: 100%; height: auto; border-radius: var(--radius-sm); }
.hl-rich table { width: 100%; display: block; overflow-x: auto; }
.hl-rich h2, .hl-rich h3, .hl-rich h4 { margin-top: 1.6rem; margin-bottom: .7rem; }
.hl-rich ul, .hl-rich ol { padding-left: 1.4rem; margin-bottom: 1rem; }

/* Bordure d'accent pour la carte du jour dans les calendriers. */
.border-sky { border-color: var(--hl-sky) !important; }

@media print {
  .hl-bar-fill, .hl-column-fill { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}

/* ==========================================================================
   ==========================================================================
   REFONTE VISUELLE — VERSION 2
   --------------------------------------------------------------------------
   Tout ce qui suit s'ajoute a la feuille d'origine sans la reecrire : les
   regles sont plus specifiques ou plus basses dans le fichier, elles prennent
   donc le dessus. On peut revenir en arriere en supprimant ce seul bloc.
   ==========================================================================
   ========================================================================== */

/* --------------------------------------------------------------------------
   V2.1 — PALETTE ETENDUE : DEGRADES
   Un seul endroit definit les degrades, pour que toutes les sections se
   ressemblent au lieu d'inventer chacune sa nuance de bleu.
   -------------------------------------------------------------------------- */
:root {
  --hl-grad:        linear-gradient(135deg, #0284c7 0%, #0ea5e9 48%, #38bdf8 100%);
  --hl-grad-deep:   linear-gradient(135deg, #06304f 0%, #0b5f96 45%, #0ea5e9 100%);
  --hl-grad-soft:   linear-gradient(135deg, #e0f2fe 0%, #f0f9ff 100%);
  --hl-grad-care:   linear-gradient(135deg, #0ea5e9 0%, #22d3ee 100%);
  --hl-grad-life:   linear-gradient(135deg, #0ea5e9 0%, #10b981 100%);
  --hl-ring:        0 0 0 1px rgba(14,165,233,.16);
  --hl-glow:        0 18px 40px -18px rgba(14,165,233,.55);
  --hl-ease:        cubic-bezier(.22, 1, .36, 1);
}
[data-theme="dark"] {
  --hl-grad-soft: linear-gradient(135deg, #10243a 0%, #0d1a2b 100%);
  --hl-ring: 0 0 0 1px rgba(56,189,248,.20);
}

.hl-gradient-text {
  background: var(--hl-grad);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* --------------------------------------------------------------------------
   V2.2 — LARGEUR DU CONTENEUR
   Premier reglage : on avait elargi jusqu'a la quasi-totalite de l'ecran, et
   le contenu se retrouvait colle aux bords sur un grand moniteur. On revient
   a une largeur de lecture confortable — plus large que les 1320 px de
   Bootstrap, mais avec une vraie marge de chaque cote.

   Repere : au-dela d'environ 90 caracteres par ligne, l'oeil perd le debut de
   la ligne suivante. Les 1360 px retenus, gouttiere comprise, restent en
   dessous de cette limite sur les blocs de texte.
   -------------------------------------------------------------------------- */
@media (min-width: 1200px) {
  .container, .container-sm, .container-md, .container-lg, .container-xl, .container-xxl {
    max-width: calc(100vw - 64px);
    padding-left: 28px;
    padding-right: 28px;
  }
}
@media (min-width: 1700px) {
  .container, .container-xxl { max-width: 1520px; }
}
/* Pleine largeur reelle, pour les bandeaux qui doivent toucher les bords. */
.hl-bleed { width: 100%; max-width: 100% !important; padding-left: 24px; padding-right: 24px; }

/* --------------------------------------------------------------------------
   V2.3 — SUPERPOSITION : LE MENU DE LANGUE PASSE DEVANT
   La barre du haut n'avait pas de contexte d'empilement : son menu deroulant
   se retrouvait DERRIERE la navigation collante (z-index 1030). On donne a la
   barre du haut un rang superieur ; ses menus suivent.
   -------------------------------------------------------------------------- */
.hl-topbar { position: relative; z-index: 1085; overflow: visible; }
.hl-topbar .dropdown { position: relative; }
.hl-topbar .dropdown-menu { z-index: 1090; }
.hl-navbar { z-index: 1040; }
.hl-lang-menu, .hl-topbar .dropdown-menu {
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-lg);
  border-radius: 14px;
  padding: 6px;
  animation: hl-pop .18s var(--hl-ease);
}
.hl-topbar .dropdown-menu .dropdown-item { border-radius: 9px; padding: 8px 10px; }
.hl-lang-menu .dropdown-item.active,
.hl-lang-menu .dropdown-item:active { background: var(--hl-sky-soft); color: var(--hl-sky-dark); }
.hl-flag { border-radius: 3px; box-shadow: 0 0 0 1px rgba(0,0,0,.12); object-fit: cover; }

@keyframes hl-pop {
  from { opacity: 0; transform: translateY(-6px) scale(.98); }
  to   { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   V2.4 — ANIMATIONS D'APPARITION AU DEFILEMENT
   Pilotees par IntersectionObserver (main.js). Sans JavaScript, la classe
   .is-visible n'arrive jamais : la regle de repli plus bas garantit alors que
   le contenu reste visible — on n'affiche jamais une page blanche.
   -------------------------------------------------------------------------- */
[data-hl-reveal] {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .75s var(--hl-ease), transform .75s var(--hl-ease);
  will-change: opacity, transform;
}
[data-hl-reveal="left"]  { transform: translateX(-38px); }
[data-hl-reveal="right"] { transform: translateX(38px); }
[data-hl-reveal="zoom"]  { transform: scale(.93); }
[data-hl-reveal="fade"]  { transform: none; }
[data-hl-reveal="flip"]  { transform: perspective(900px) rotateX(12deg) translateY(24px); }
[data-hl-reveal].is-visible { opacity: 1; transform: none; }

[data-hl-delay="1"] { transition-delay: .08s; }
[data-hl-delay="2"] { transition-delay: .16s; }
[data-hl-delay="3"] { transition-delay: .24s; }
[data-hl-delay="4"] { transition-delay: .32s; }
[data-hl-delay="5"] { transition-delay: .40s; }
[data-hl-delay="6"] { transition-delay: .48s; }
[data-hl-delay="7"] { transition-delay: .56s; }
[data-hl-delay="8"] { transition-delay: .64s; }

/* Repli : si le JS ne tourne pas, tout reste lisible. */
.no-js [data-hl-reveal] { opacity: 1 !important; transform: none !important; }

@media (prefers-reduced-motion: reduce) {
  [data-hl-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
  .hl-float, .hl-pulse-ring, .hl-minipub-track.is-marquee { animation: none !important; }
}

/* Animations d'ambiance */
@keyframes hl-float     { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes hl-pulse     { 0% { box-shadow: 0 0 0 0 rgba(14,165,233,.45); } 70% { box-shadow: 0 0 0 18px rgba(14,165,233,0); } 100% { box-shadow: 0 0 0 0 rgba(14,165,233,0); } }
@keyframes hl-marquee   { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes hl-shine     { from { background-position: -220% 0; } to { background-position: 220% 0; } }
@keyframes hl-heartbeat { 0%,100% { transform: scale(1); } 14% { transform: scale(1.16); } 28% { transform: scale(1); } 42% { transform: scale(1.12); } 56% { transform: scale(1); } }

.hl-float      { animation: hl-float 6s ease-in-out infinite; }
.hl-pulse-ring { animation: hl-pulse 2.4s ease-out infinite; }
.hl-heartbeat  { animation: hl-heartbeat 2.6s ease-in-out infinite; display: inline-block; }

/* Survol generique : un seul comportement pour toutes les cartes. */
.hl-lift { transition: transform .38s var(--hl-ease), box-shadow .38s var(--hl-ease); }
.hl-lift:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); }

/* --------------------------------------------------------------------------
   V2.5 — TITRES DE SECTION
   -------------------------------------------------------------------------- */
.hl-eyebrow {
  background: var(--hl-grad-soft);
  color: var(--hl-sky-dark);
  border: 1px solid rgba(14,165,233,.22);
  border-radius: 100px;
  padding: 5px 14px;
  font-weight: 700;
  letter-spacing: .06em;
}
.hl-title { position: relative; }
.hl-title-underline::after {
  content: ""; display: block; width: 76px; height: 4px; margin-top: 14px;
  border-radius: 100px; background: var(--hl-grad);
}
.text-center .hl-title-underline::after, .hl-title-underline.text-center::after { margin-left: auto; margin-right: auto; }

.hl-section, .hl-section-sm { position: relative; }
/* Motif medical discret derriere certaines sections. */
.hl-section-pattern::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    radial-gradient(circle at 12% 18%, rgba(14,165,233,.09), transparent 42%),
    radial-gradient(circle at 88% 74%, rgba(16,185,129,.08), transparent 46%);
}
.hl-section-pattern > .container { position: relative; z-index: 1; }
.hl-section-tint { background: var(--hl-grad-soft); }

/* --------------------------------------------------------------------------
   V2.6 — BARRE DE MINI-PUBLICITES (sous la navigation)
   -------------------------------------------------------------------------- */
.hl-minipub { position: relative; z-index: 5; }
.hl-minipub-viewport { overflow: hidden; }
.hl-minipub-track.is-marquee {
  animation: hl-marquee 38s linear infinite;
  width: max-content;
  overflow: visible;
}
.hl-minipub:hover .hl-minipub-track.is-marquee { animation-play-state: paused; }
.hl-minipub-track a { color: #fff; }
.hl-minipub-track a:hover { color: #e0f2fe; text-decoration: underline; }
.hl-minipub-sep { opacity: .45; }

/* --------------------------------------------------------------------------
   V2.7 — BANNIERE : DEGRADE + FORMES
   -------------------------------------------------------------------------- */
.hl-slide::before {
  /* Voile en degrade pose sur la photo de la banniere.
     Il est dense a gauche, la ou se trouve le texte, et s'efface vers la
     droite : le titre reste lisible sans masquer l'image chargee depuis
     l'administration. */
  background:
    linear-gradient(102deg, rgba(4,32,56,.88) 0%, rgba(2,110,170,.62) 48%, rgba(34,211,238,.26) 100%);
}
.hl-slide::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse at 78% 20%, rgba(255,255,255,.16), transparent 55%),
    linear-gradient(0deg, rgba(2,18,32,.38) 0%, transparent 38%);
}
.hl-slide-shape {
  background: rgba(255,255,255,.09);
  backdrop-filter: blur(1px);
  animation: hl-float 9s ease-in-out infinite;
}
.hl-slide-shape.s2 { animation-duration: 11s; animation-delay: -3s; }
.hl-slide-shape.s3 { animation-duration: 13s; animation-delay: -6s; }
/* Une forme supplementaire, en croix medicale stylisee. */
.hl-slide-cross {
  position: absolute; right: 7%; bottom: 14%; width: 130px; height: 130px;
  opacity: .13; pointer-events: none; animation: hl-float 10s ease-in-out infinite;
}
.hl-slide-cross::before, .hl-slide-cross::after {
  content: ""; position: absolute; background: #fff; border-radius: 12px;
}
.hl-slide-cross::before { left: 40%; top: 0; width: 20%; height: 100%; }
.hl-slide-cross::after  { top: 40%; left: 0; height: 20%; width: 100%; }

.carousel-item.active .hl-slide-content > * { animation: hl-slide-in .85s var(--hl-ease) both; }
.carousel-item.active .hl-slide-content > *:nth-child(2) { animation-delay: .12s; }
.carousel-item.active .hl-slide-content > *:nth-child(3) { animation-delay: .22s; }
.carousel-item.active .hl-slide-content > *:nth-child(4) { animation-delay: .32s; }
@keyframes hl-slide-in { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }

.hl-slide-content h2 { text-shadow: 0 6px 30px rgba(0,0,0,.35); }

/* --------------------------------------------------------------------------
   V2.8 — BANDEAU « ESTIMATION / RENDEZ-VOUS GRATUIT »
   Equivalent du bloc « devis gratuit » du site de reference.
   -------------------------------------------------------------------------- */
.hl-estimate {
  position: relative; overflow: hidden;
  background: var(--hl-grad-deep);
  border-radius: var(--radius-lg);
  color: #fff;
  padding: 34px 32px;
  box-shadow: var(--hl-glow);
}
.hl-estimate::before {
  content: ""; position: absolute; width: 420px; height: 420px; right: -120px; top: -180px;
  border-radius: 50%; background: rgba(255,255,255,.08);
}
.hl-estimate::after {
  content: ""; position: absolute; width: 240px; height: 240px; left: -80px; bottom: -140px;
  border-radius: 50%; background: rgba(255,255,255,.06);
}
.hl-estimate > * { position: relative; z-index: 2; }
.hl-estimate h3 { color: #fff; margin-bottom: 6px; }
.hl-estimate p { color: rgba(255,255,255,.86); margin-bottom: 0; }
.hl-estimate .hl-estimate-pill {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.22);
  border-radius: 100px; padding: 6px 14px; font-size: 12.5px; font-weight: 700;
  margin-bottom: 12px;
}

/* --------------------------------------------------------------------------
   V2.9 — CARTE PRATICIEN (photo de profil mise en avant)
   Remplace l'ancienne pastille d'initiales : le patient choisit d'abord un
   visage. Le bloc affiche, dans l'ordre : photo, nom, specialite, courte
   presentation, annees d'etudes / d'experience.
   -------------------------------------------------------------------------- */
.hl-doc {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform .4s var(--hl-ease), box-shadow .4s var(--hl-ease), border-color .4s;
}
.hl-doc:hover {
  transform: translateY(-10px);
  box-shadow: var(--shadow-lg);
  border-color: rgba(14,165,233,.4);
}
.hl-doc-media {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--hl-grad-soft);
}
.hl-doc-media img {
  width: 100%; height: 100%; object-fit: cover; object-position: top center;
  transition: transform .7s var(--hl-ease), filter .5s;
}
.hl-doc:hover .hl-doc-media img { transform: scale(1.08); }
.hl-doc-media .hl-doc-initials {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-family: var(--font-title); font-weight: 800; font-size: 46px;
  color: var(--hl-sky-dark); background: var(--hl-grad-soft);
}
.hl-doc-media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(3,28,48,.78) 100%);
  opacity: .85; transition: opacity .4s;
}
.hl-doc:hover .hl-doc-media::after { opacity: 1; }

.hl-doc-flags { position: absolute; z-index: 3; top: 12px; left: 12px; display: flex; flex-direction: column; gap: 6px; }
.hl-doc-spec {
  position: absolute; z-index: 3; left: 14px; right: 14px; bottom: 12px;
  color: #fff; font-size: 12.5px; font-weight: 700; letter-spacing: .03em;
  text-transform: uppercase; text-shadow: 0 2px 10px rgba(0,0,0,.5);
}
/* Barre d'actions qui remonte au survol (elle reste accessible au clavier). */
.hl-doc-hover {
  position: absolute; z-index: 4; left: 0; right: 0; bottom: 0;
  display: flex; gap: 8px; padding: 12px;
  background: linear-gradient(0deg, rgba(3,28,48,.92), rgba(3,28,48,0));
  transform: translateY(110%); opacity: 0;
  transition: transform .42s var(--hl-ease), opacity .3s;
}
.hl-doc:hover .hl-doc-hover,
.hl-doc:focus-within .hl-doc-hover { transform: none; opacity: 1; }
.hl-doc:hover .hl-doc-spec, .hl-doc:focus-within .hl-doc-spec { opacity: 0; }

.hl-doc-body { padding: 16px 18px 6px; flex: 1; }
.hl-doc-body h5 { font-size: 16px; margin-bottom: 3px; }
.hl-doc-body h5 a { color: var(--text-main); }
.hl-doc-body h5 a:hover { color: var(--hl-sky-dark); }
.hl-doc-role { font-size: 12.5px; font-weight: 700; color: var(--hl-sky-dark); display: block; margin-bottom: 8px; }
.hl-doc-bio {
  font-size: 13px; color: var(--text-muted); margin-bottom: 12px;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.hl-doc-meta {
  display: flex; flex-wrap: wrap; gap: 8px 14px;
  border-top: 1px dashed var(--border-color); padding-top: 10px;
  font-size: 12.5px; color: var(--text-muted);
}
.hl-doc-meta strong { color: var(--text-main); font-weight: 700; }
.hl-doc-meta i { color: var(--hl-sky); margin-right: 5px; }
.hl-doc-foot { padding: 12px 18px 18px; display: flex; gap: 8px; }
.hl-doc-foot .btn { flex: 1; }

/* Variante horizontale, pour l'annuaire en mode liste. */
.hl-doc.is-row { flex-direction: row; }
.hl-doc.is-row .hl-doc-media { width: 190px; flex: 0 0 190px; aspect-ratio: auto; }
.hl-doc.is-row .hl-doc-foot { padding-top: 0; }
@media (max-width: 767.98px) {
  .hl-doc.is-row { flex-direction: column; }
  .hl-doc.is-row .hl-doc-media { width: 100%; flex: none; aspect-ratio: 16 / 10; }
}

/* --------------------------------------------------------------------------
   V2.10 — CHIFFRES CLES ANIMES
   -------------------------------------------------------------------------- */
.hl-figures { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.hl-figure {
  position: relative; overflow: hidden;
  padding: 30px 22px 26px;
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  text-align: center;
  transition: transform .42s var(--hl-ease), box-shadow .42s var(--hl-ease), color .42s;
}
.hl-figure::before {
  content: ""; position: absolute; inset: 0; opacity: 0;
  background: var(--hl-grad); transition: opacity .42s var(--hl-ease);
}
.hl-figure > * { position: relative; z-index: 2; }
.hl-figure:hover { transform: translateY(-10px); box-shadow: var(--hl-glow); }
.hl-figure:hover::before { opacity: 1; }
.hl-figure:hover .hl-figure-value,
.hl-figure:hover .hl-figure-label,
.hl-figure:hover .hl-figure-icon { color: #fff; }
.hl-figure:hover .hl-figure-icon { background: rgba(255,255,255,.18); box-shadow: none; }

.hl-figure-icon {
  width: 62px; height: 62px; margin: 0 auto 14px;
  display: grid; place-items: center;
  border-radius: 20px;
  background: var(--hl-grad-soft);
  color: var(--hl-sky-dark);
  font-size: 26px;
  box-shadow: var(--hl-ring);
  transition: background .42s, color .42s, transform .42s var(--hl-ease);
}
.hl-figure:hover .hl-figure-icon { transform: rotate(-8deg) scale(1.06); }
.hl-figure-value {
  font-family: var(--font-title); font-weight: 800;
  font-size: clamp(30px, 3.4vw, 44px); line-height: 1.05;
  color: var(--text-main); transition: color .42s;
  font-variant-numeric: tabular-nums;
}
.hl-figure-value .hl-figure-suffix { font-size: .55em; margin-left: 2px; }
.hl-figure-label {
  display: block; margin-top: 8px; font-size: 13.5px; font-weight: 600;
  color: var(--text-muted); transition: color .42s;
}
.hl-figure-spark {
  height: 4px; width: 54px; margin: 14px auto 0; border-radius: 100px;
  background: var(--hl-grad); opacity: .7;
}
.hl-figure:hover .hl-figure-spark { background: #fff; opacity: .9; }

/* --------------------------------------------------------------------------
   V2.11 — TEMOIGNAGES EN CARROUSEL
   -------------------------------------------------------------------------- */
.hl-carousel { position: relative; }
.hl-carousel-viewport { overflow: hidden; }
.hl-carousel-track {
  display: flex; gap: 20px;
  transition: transform .6s var(--hl-ease);
  will-change: transform;
}
.hl-carousel-slide { flex: 0 0 auto; width: 100%; }
@media (min-width: 768px)  { .hl-carousel-slide { width: calc((100% - 20px) / 2); } }
@media (min-width: 1200px) { .hl-carousel-slide { width: calc((100% - 40px) / 3); } }

.hl-carousel-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--bg-surface); color: var(--hl-sky-dark);
  border: 1px solid var(--border-color); box-shadow: var(--shadow-md);
  z-index: 4; transition: all .25s;
}
.hl-carousel-nav:hover { background: var(--hl-grad); color: #fff; border-color: transparent; }
.hl-carousel-nav[disabled] { opacity: .35; cursor: not-allowed; }
.hl-carousel-nav.is-prev { left: -10px; }
.hl-carousel-nav.is-next { right: -10px; }
@media (max-width: 991.98px) { .hl-carousel-nav { display: none; } }

.hl-carousel-dots { display: flex; justify-content: center; gap: 8px; margin-top: 22px; }
.hl-carousel-dot {
  width: 9px; height: 9px; border-radius: 100px; border: 0;
  background: var(--border-color); transition: all .3s;
}
.hl-carousel-dot.is-active { width: 28px; background: var(--hl-grad); }

/* La carte de temoignage : au survol, fond en degrade bleu, texte en blanc. */
.hl-testi {
  position: relative; overflow: hidden; height: 100%;
  display: flex; flex-direction: column;
  padding: 28px 26px;
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  transition: transform .42s var(--hl-ease), box-shadow .42s var(--hl-ease), border-color .42s;
}
.hl-testi::before {
  content: ""; position: absolute; inset: 0; opacity: 0;
  background: var(--hl-grad); transition: opacity .42s var(--hl-ease);
}
.hl-testi > * { position: relative; z-index: 2; }
.hl-testi:hover {
  transform: translateY(-8px); box-shadow: var(--hl-glow); border-color: transparent;
}
.hl-testi:hover::before { opacity: 1; }
.hl-testi:hover, .hl-testi:hover p, .hl-testi:hover strong,
.hl-testi:hover span, .hl-testi:hover .hl-testi-quote { color: #fff; }
.hl-testi:hover .hl-testi-avatar { background: rgba(255,255,255,.2); color: #fff; }
.hl-testi:hover .hl-stars i { color: #fff; }

.hl-testi-quote { font-size: 30px; line-height: 1; color: var(--hl-sky); opacity: .55; transition: color .42s; }
.hl-testi-text {
  font-size: 14.5px; line-height: 1.75; color: var(--text-muted);
  flex: 1; margin: 12px 0 18px; transition: color .42s;
}
.hl-testi-who { display: flex; align-items: center; gap: 12px; }
.hl-testi-avatar {
  width: 46px; height: 46px; border-radius: 50%; flex: none;
  display: grid; place-items: center; object-fit: cover;
  background: var(--hl-grad-soft); color: var(--hl-sky-dark);
  font-weight: 800; font-size: 15px; transition: all .42s;
}
.hl-testi-who strong { display: block; font-size: 14.5px; color: var(--text-main); transition: color .42s; }
.hl-testi-who span { font-size: 12.5px; color: var(--text-muted); transition: color .42s; }

/* --------------------------------------------------------------------------
   V2.12 — SELECT RECHERCHABLE + RECHERCHE INSTANTANEE
   Le <select> natif reste dans le HTML (et fonctionne sans JavaScript) ; le
   script le masque et affiche ce composant a la place. Indispensable quand la
   liste depasse la centaine d'entrees, comme pour les services.
   -------------------------------------------------------------------------- */
.hl-select { position: relative; }
.hl-select-native { position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0; }
.hl-select-btn {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 10px 14px;
  background: var(--bg-surface);
  border: 1.5px solid var(--border-color);
  border-radius: 12px;
  color: var(--text-main); font-size: 14px; font-weight: 600;
  text-align: left; transition: border-color .2s, box-shadow .2s;
}
.hl-select-btn:hover { border-color: var(--hl-sky-light); }
.hl-select.is-open .hl-select-btn,
.hl-select-btn:focus-visible {
  border-color: var(--hl-sky); box-shadow: 0 0 0 4px rgba(14,165,233,.14); outline: none;
}
.hl-select-btn .hl-select-value { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hl-select-btn .hl-select-value.is-placeholder { color: var(--text-muted); font-weight: 500; }
.hl-select-btn .hl-select-caret { color: var(--text-muted); font-size: 12px; transition: transform .25s; }
.hl-select.is-open .hl-select-caret { transform: rotate(180deg); }

.hl-select-panel {
  position: absolute; z-index: 1200; top: calc(100% + 6px); left: 0; right: 0;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  box-shadow: var(--shadow-lg);
  padding: 8px;
  display: none;
  animation: hl-pop .16s var(--hl-ease);
}
.hl-select.is-open .hl-select-panel { display: block; }
.hl-select.is-up .hl-select-panel { top: auto; bottom: calc(100% + 6px); }

.hl-select-search {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; margin-bottom: 6px;
  background: var(--bg-surface-2);
  border: 1px solid var(--border-color);
  border-radius: 10px;
}
.hl-select-search i { color: var(--text-muted); font-size: 14px; }
.hl-select-search input {
  flex: 1; border: 0; background: transparent; outline: none;
  color: var(--text-main); font-size: 13.5px;
}
.hl-select-list { max-height: 268px; overflow-y: auto; overscroll-behavior: contain; }
.hl-select-list::-webkit-scrollbar { width: 8px; }
.hl-select-list::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 100px; }
.hl-select-opt {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 11px; border-radius: 10px;
  font-size: 13.5px; color: var(--text-main); cursor: pointer;
}
.hl-select-opt:hover, .hl-select-opt.is-active { background: var(--hl-sky-soft); color: var(--hl-sky-dark); }
.hl-select-opt.is-selected { font-weight: 700; color: var(--hl-sky-dark); }
.hl-select-opt.is-selected::after { content: "\F26E"; font-family: "bootstrap-icons"; margin-left: auto; }
.hl-select-group {
  padding: 10px 11px 4px; font-size: 11px; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted);
}
.hl-select-empty { padding: 16px 11px; text-align: center; font-size: 13px; color: var(--text-muted); }

/* Champ de recherche instantanee */
.hl-livesearch { position: relative; }
.hl-livesearch input { padding-right: 76px; }
.hl-livesearch-clear {
  position: absolute; right: 44px; top: 50%; transform: translateY(-50%);
  border: 0; background: transparent; color: var(--text-muted); font-size: 15px;
  display: none;
}
.hl-livesearch.has-value .hl-livesearch-clear { display: block; }
.hl-livesearch-spin {
  position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid var(--hl-sky-soft); border-top-color: var(--hl-sky);
  animation: hl-spin .7s linear infinite; display: none;
}
.hl-livesearch.is-busy .hl-livesearch-spin { display: block; }

/* Resultat du filtrage cote client */
[data-hl-filterable].is-filtered-out { display: none !important; }
.hl-filter-empty { display: none; }
.hl-filter-empty.is-shown { display: block; }
.hl-filter-count { font-size: 13px; color: var(--text-muted); }

/* Barre de filtres */
.hl-filterbar {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 18px;
  box-shadow: var(--shadow-sm);
}

/* --------------------------------------------------------------------------
   V2.13 — ENQUETE DE SATISFACTION : REPONSES VISIBLEMENT SELECTIONNEES
   Le reproche d'origine : rien ne signalait qu'une reponse etait cochee. On
   agit sur quatre signaux a la fois — bordure, fond, pastille, et une marque
   de validation — pour que ce soit lisible meme en lumiere forte.
   -------------------------------------------------------------------------- */
.hl-opt { position: relative; display: block; margin-bottom: 10px; }
.hl-opt input {
  position: absolute; opacity: 0; width: 0; height: 0;
}
.hl-opt-tile {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px;
  background: var(--bg-surface);
  border: 2px solid var(--border-color);
  border-radius: 14px;
  cursor: pointer;
  transition: border-color .22s, background .22s, box-shadow .22s, transform .22s var(--hl-ease);
}
.hl-opt-tile:hover { border-color: var(--hl-sky-light); background: var(--bg-surface-2); transform: translateX(3px); }

.hl-opt-mark {
  flex: none; width: 26px; height: 26px;
  border: 2px solid var(--border-color);
  display: grid; place-items: center;
  color: transparent; font-size: 14px;
  transition: all .22s var(--hl-ease);
}
.hl-opt input[type="radio"] + .hl-opt-tile .hl-opt-mark { border-radius: 50%; }
.hl-opt input[type="checkbox"] + .hl-opt-tile .hl-opt-mark { border-radius: 8px; }
.hl-opt-text { flex: 1; font-size: 14.5px; font-weight: 600; color: var(--text-main); }
.hl-opt-hint { display: block; font-size: 12.5px; font-weight: 500; color: var(--text-muted); margin-top: 2px; }

.hl-opt input:checked + .hl-opt-tile {
  border-color: var(--hl-sky);
  background: var(--hl-sky-soft);
  box-shadow: 0 0 0 4px rgba(14,165,233,.13);
}
.hl-opt input:checked + .hl-opt-tile .hl-opt-mark {
  background: var(--hl-grad); border-color: transparent; color: #fff;
  transform: scale(1.06);
}
.hl-opt input:checked + .hl-opt-tile .hl-opt-text { color: var(--hl-sky-dark); }
.hl-opt input:focus-visible + .hl-opt-tile {
  outline: 3px solid rgba(14,165,233,.45); outline-offset: 2px;
}
.hl-opt input:disabled + .hl-opt-tile { opacity: .55; cursor: not-allowed; }

/* Echelle (Likert) : boutons alignes, avec la valeur choisie bien marquee. */
.hl-scale-row { display: flex; flex-wrap: wrap; gap: 10px; }
.hl-scale-item { position: relative; flex: 1 1 84px; }
.hl-scale-item input { position: absolute; opacity: 0; width: 0; height: 0; }
.hl-scale-tile {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 14px 8px; border-radius: 14px;
  border: 2px solid var(--border-color); background: var(--bg-surface);
  cursor: pointer; text-align: center;
  transition: all .22s var(--hl-ease);
}
.hl-scale-tile strong { font-family: var(--font-title); font-size: 20px; color: var(--text-main); transition: color .22s; }
.hl-scale-tile span { font-size: 11.5px; color: var(--text-muted); line-height: 1.25; }
.hl-scale-item input:checked + .hl-scale-tile {
  border-color: transparent; background: var(--hl-grad);
  box-shadow: 0 10px 26px -12px rgba(14,165,233,.85); transform: translateY(-4px);
}
.hl-scale-item input:checked + .hl-scale-tile strong,
.hl-scale-item input:checked + .hl-scale-tile span { color: #fff; }
.hl-scale-item input:focus-visible + .hl-scale-tile { outline: 3px solid rgba(14,165,233,.45); outline-offset: 2px; }

/* Etoiles */
.hl-rating { display: inline-flex; flex-direction: row-reverse; gap: 6px; }
.hl-rating label { font-size: 32px; color: var(--border-color); cursor: pointer; transition: transform .18s, color .18s; }
.hl-rating input:checked ~ label,
.hl-rating label:hover, .hl-rating label:hover ~ label { color: #f59e0b; }
.hl-rating label:hover { transform: scale(1.16); }
.hl-rating-value { font-weight: 800; color: var(--hl-sky-dark); margin-left: 12px; }

/* NPS 0 a 10 */
.hl-nps { display: flex; flex-wrap: wrap; gap: 7px; }
.hl-nps-item { position: relative; }
.hl-nps-item input { position: absolute; opacity: 0; width: 0; height: 0; }
.hl-nps-tile {
  width: 46px; height: 46px; display: grid; place-items: center;
  border-radius: 12px; border: 2px solid var(--border-color);
  background: var(--bg-surface); font-weight: 800; cursor: pointer;
  transition: all .2s var(--hl-ease);
}
.hl-nps-item input:checked + .hl-nps-tile {
  color: #fff; border-color: transparent; transform: translateY(-4px) scale(1.06);
  box-shadow: var(--shadow-md);
}
/* Les couleurs suivent la convention NPS : detracteur / passif / promoteur. */
.hl-nps-item.is-detractor input:checked + .hl-nps-tile { background: var(--hl-red); }
.hl-nps-item.is-passive   input:checked + .hl-nps-tile { background: var(--hl-amber); }
.hl-nps-item.is-promoter  input:checked + .hl-nps-tile { background: var(--hl-green); }
.hl-nps-legend { display: flex; justify-content: space-between; font-size: 12px; color: var(--text-muted); margin-top: 8px; }

/* Grille de questions */
.hl-grid-table { width: 100%; border-collapse: separate; border-spacing: 0; }
.hl-grid-table th { font-size: 12.5px; font-weight: 700; color: var(--text-muted); padding: 10px; text-align: center; }
.hl-grid-table td { padding: 10px; text-align: center; border-top: 1px solid var(--border-color); }
.hl-grid-table td:first-child, .hl-grid-table th:first-child { text-align: left; }
.hl-grid-radio { width: 24px; height: 24px; accent-color: var(--hl-sky); }

/* Carte d'une enquete dans la liste */
.hl-survey-card {
  position: relative; height: 100%; display: flex; flex-direction: column;
  background: var(--bg-surface); border: 1px solid var(--border-color);
  border-radius: var(--radius-lg); overflow: hidden;
  transition: transform .4s var(--hl-ease), box-shadow .4s var(--hl-ease), border-color .3s;
}
.hl-survey-card:hover { transform: translateY(-8px); box-shadow: var(--hl-glow); border-color: rgba(14,165,233,.4); }
.hl-survey-cover { height: 132px; background: var(--hl-grad); position: relative; overflow: hidden; }
.hl-survey-cover img { width: 100%; height: 100%; object-fit: cover; }
.hl-survey-cover::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(2,132,199,.75), rgba(56,189,248,.35));
}
.hl-survey-cover i {
  position: absolute; z-index: 2; right: 18px; bottom: 12px;
  font-size: 46px; color: rgba(255,255,255,.32);
}
.hl-survey-body { padding: 20px; flex: 1; }
.hl-survey-foot { padding: 0 20px 20px; }
.hl-survey-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12.5px; color: var(--text-muted); margin: 10px 0 14px; }
.hl-survey-meta i { color: var(--hl-sky); margin-right: 4px; }

/* Progression de l'enquete */
.hl-survey-progress {
  position: sticky; top: 74px; z-index: 20;
  background: var(--bg-surface); border: 1px solid var(--border-color);
  border-radius: 100px; padding: 10px 16px; box-shadow: var(--shadow-md);
  display: flex; align-items: center; gap: 14px; margin-bottom: 26px;
}
.hl-survey-progress .progress { flex: 1; height: 8px; background: var(--bg-surface-2); border-radius: 100px; }
.hl-survey-progress .progress-bar { background: var(--hl-grad); border-radius: 100px; }
.hl-survey-progress strong { font-size: 13px; white-space: nowrap; }

/* Bloc d'une question */
.hl-question {
  background: var(--bg-surface); border: 1px solid var(--border-color);
  border-radius: var(--radius-lg); padding: 26px; margin-bottom: 20px;
  transition: border-color .3s, box-shadow .3s;
}
.hl-question.is-answered { border-color: rgba(16,185,129,.45); }
.hl-question.is-answered .hl-question-num { background: var(--hl-grad-life); }
.hl-question:focus-within { box-shadow: var(--shadow-md); }
.hl-question-num {
  width: 34px; height: 34px; border-radius: 11px; flex: none;
  display: grid; place-items: center;
  background: var(--hl-grad); color: #fff; font-weight: 800; font-size: 14px;
}
.hl-question-required { color: var(--hl-red); margin-left: 4px; }

/* --------------------------------------------------------------------------
   V2.14 — ORGANIGRAMME DE L'EQUIPE
   La hierarchie demandee : 1 direction generale, 1.x sous-directions,
   1.x.y departements, 1.x.y.z services (+ major). Les services sans
   departement se placent au meme rang que les chefs de departement.
   -------------------------------------------------------------------------- */
.hl-org { position: relative; }
.hl-org-level { position: relative; }
.hl-org-level + .hl-org-level { margin-top: 26px; }

.hl-org-node {
  position: relative;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  padding: 16px 18px;
  display: flex; gap: 14px; align-items: flex-start;
  transition: transform .35s var(--hl-ease), box-shadow .35s var(--hl-ease), border-color .3s;
}
.hl-org-node:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: rgba(14,165,233,.4); }

.hl-org-code {
  flex: none; min-width: 46px; height: 30px; padding: 0 10px;
  display: grid; place-items: center; border-radius: 9px;
  background: var(--hl-grad-soft); color: var(--hl-sky-dark);
  font-weight: 800; font-size: 12.5px; letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
}
.hl-org-photo {
  width: 56px; height: 56px; border-radius: 14px; flex: none; object-fit: cover;
  background: var(--hl-grad-soft); color: var(--hl-sky-dark);
  display: grid; place-items: center; font-weight: 800;
}
.hl-org-name { font-family: var(--font-title); font-weight: 700; font-size: 15px; color: var(--text-main); margin: 0; }
.hl-org-job { font-size: 12.5px; color: var(--hl-sky-dark); font-weight: 700; }
.hl-org-unit { font-size: 12.5px; color: var(--text-muted); }
.hl-org-extra { font-size: 12.5px; color: var(--text-muted); margin-top: 6px; }
.hl-org-extra strong { color: var(--text-main); }

/* Niveau 1 : la direction generale, mise en avant. */
.hl-org-root {
  background: var(--hl-grad-deep); color: #fff; border: 0;
  box-shadow: var(--hl-glow);
  padding: 26px 28px;
}
.hl-org-root .hl-org-name, .hl-org-root .hl-org-job, .hl-org-root .hl-org-unit, .hl-org-root .hl-org-extra { color: #fff; }
.hl-org-root .hl-org-job { color: #bae6fd; }
.hl-org-root .hl-org-code { background: rgba(255,255,255,.18); color: #fff; }
.hl-org-root .hl-org-photo { width: 84px; height: 84px; border: 3px solid rgba(255,255,255,.35); }

/* Traits de liaison : une bordure gauche + un trait horizontal par noeud. */
.hl-org-branch { position: relative; margin-left: 26px; padding-left: 30px; }
.hl-org-branch::before {
  content: ""; position: absolute; left: 0; top: -14px; bottom: 28px;
  width: 2px; background: linear-gradient(180deg, var(--hl-sky-light), var(--border-color));
  border-radius: 2px;
}
.hl-org-branch > .hl-org-item { position: relative; margin-top: 14px; }
.hl-org-branch > .hl-org-item::before {
  content: ""; position: absolute; left: -30px; top: 30px;
  width: 30px; height: 2px; background: var(--border-color); border-radius: 2px;
}
@media (max-width: 767.98px) {
  .hl-org-branch { margin-left: 8px; padding-left: 16px; }
  .hl-org-branch > .hl-org-item::before { left: -16px; width: 16px; }
}

.hl-org-sub {
  display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px;
  padding-top: 10px; border-top: 1px dashed var(--border-color);
}
.hl-org-pill {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 11px; border-radius: 100px;
  background: var(--bg-surface-2); border: 1px solid var(--border-color);
  font-size: 12px; font-weight: 600; color: var(--text-muted);
}
.hl-org-pill i { color: var(--hl-sky); }
.hl-org-pill.is-major { background: rgba(16,185,129,.10); border-color: rgba(16,185,129,.3); color: #047857; }
.hl-org-pill.is-deputy { background: rgba(139,92,246,.10); border-color: rgba(139,92,246,.3); color: #6d28d9; }

/* Repere de niveau, a gauche des groupes */
.hl-org-tag {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-muted); margin-bottom: 10px;
}
.hl-org-tag::before { content: ""; width: 22px; height: 2px; background: var(--hl-grad); border-radius: 2px; }

/* --------------------------------------------------------------------------
   V2.15 — PAGE « A PROPOS » REVUE
   -------------------------------------------------------------------------- */
.hl-about-hero {
  position: relative; overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--hl-grad-deep);
  color: #fff; padding: 46px 40px;
}
.hl-about-hero::before {
  content: ""; position: absolute; width: 520px; height: 520px; right: -160px; top: -220px;
  border-radius: 50%; background: rgba(255,255,255,.07);
}
.hl-about-hero > * { position: relative; z-index: 2; }
.hl-about-hero h1, .hl-about-hero h2 { color: #fff; }
.hl-about-hero p { color: rgba(255,255,255,.88); }

.hl-about-media { position: relative; }
.hl-about-media img {
  width: 100%; border-radius: var(--radius-lg); object-fit: cover;
  box-shadow: var(--shadow-lg);
}
/* Vignette decalee, pour casser la monotonie des blocs texte/image. */
.hl-about-media .hl-about-media-2 {
  position: absolute; right: -18px; bottom: -28px; width: 46%;
  border: 6px solid var(--bg-surface); border-radius: var(--radius);
}
.hl-about-badge {
  position: absolute; left: -18px; top: 26px;
  background: var(--bg-surface); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); padding: 14px 18px;
  display: flex; align-items: center; gap: 12px;
}
.hl-about-badge i { font-size: 26px; color: var(--hl-sky); }
.hl-about-badge strong { display: block; font-family: var(--font-title); font-size: 20px; }
.hl-about-badge span { font-size: 12px; color: var(--text-muted); }
@media (max-width: 991.98px) {
  .hl-about-media .hl-about-media-2, .hl-about-badge { position: static; width: 100%; margin-top: 14px; border-width: 0; }
}

.hl-value-card {
  height: 100%; padding: 26px 24px;
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  position: relative; overflow: hidden;
  transition: transform .4s var(--hl-ease), box-shadow .4s var(--hl-ease);
}
.hl-value-card::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: var(--hl-grad); transform: scaleX(0); transform-origin: left;
  transition: transform .45s var(--hl-ease);
}
.hl-value-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); }
.hl-value-card:hover::after { transform: scaleX(1); }
.hl-value-card .hl-icon-box { transition: transform .4s var(--hl-ease); }
.hl-value-card:hover .hl-icon-box { transform: rotate(-8deg) scale(1.08); }

/* Mot du directeur */
.hl-director {
  position: relative; overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-md);
}
.hl-director-media { position: relative; min-height: 100%; background: var(--hl-grad-soft); }
.hl-director-media img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.hl-director-body { padding: 34px; }
.hl-director-quote {
  font-family: var(--font-title); font-size: clamp(17px, 1.6vw, 21px);
  line-height: 1.55; color: var(--text-main); font-weight: 600;
  border-left: 4px solid var(--hl-sky); padding-left: 18px; margin-bottom: 18px;
}
.hl-director-sign { display: flex; align-items: center; gap: 14px; margin-top: 20px; }
.hl-director-sign img { max-height: 54px; width: auto; }

/* --------------------------------------------------------------------------
   V2.16 — PRESTATIONS SANS PRIX
   Sur le site public, on ne montre plus de tarif : le montant est annonce au
   recapitulatif du rendez-vous, une fois le motif et le praticien connus.
   -------------------------------------------------------------------------- */
.hl-public-scope .hl-price,
.hl-public-scope .hl-price-old { display: none !important; }

.hl-prestation { transition: transform .4s var(--hl-ease), box-shadow .4s var(--hl-ease), border-color .3s; }
.hl-prestation:hover { transform: translateY(-8px); box-shadow: var(--hl-glow); border-color: rgba(14,165,233,.35); }
.hl-prestation-media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(3,28,48,.55) 100%);
  opacity: 0; transition: opacity .4s;
}
.hl-prestation:hover .hl-prestation-media::after { opacity: 1; }
.hl-prestation-icon {
  position: absolute; z-index: 3; right: 14px; bottom: -20px;
  width: 44px; height: 44px; border-radius: 14px;
  display: grid; place-items: center;
  background: var(--hl-grad); color: #fff; font-size: 19px;
  box-shadow: var(--hl-glow); transition: transform .4s var(--hl-ease);
}
.hl-prestation:hover .hl-prestation-icon { transform: rotate(-10deg) scale(1.1); }

/* --------------------------------------------------------------------------
   V2.17 — DIVERS
   -------------------------------------------------------------------------- */
.hl-partner { transition: transform .35s var(--hl-ease), box-shadow .35s var(--hl-ease), filter .35s; filter: grayscale(1); opacity: .72; }
.hl-partner:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); filter: none; opacity: 1; }

.hl-quick { transition: background .35s var(--hl-ease), color .35s; position: relative; overflow: hidden; }
.hl-quick::before {
  content: ""; position: absolute; inset: 0; background: var(--hl-grad);
  transform: translateY(100%); transition: transform .4s var(--hl-ease); z-index: 0;
}
.hl-quick:hover::before { transform: none; }
.hl-quick > * { position: relative; z-index: 2; }
.hl-quick:hover, .hl-quick:hover strong, .hl-quick:hover span, .hl-quick:hover i { color: #fff !important; }

.hl-card { transition: transform .4s var(--hl-ease), box-shadow .4s var(--hl-ease), border-color .3s; }
.hl-card:hover { border-color: rgba(14,165,233,.32); }

.btn { transition: all .28s var(--hl-ease); }
.btn-sky { background: var(--hl-grad); border: 0; box-shadow: 0 10px 24px -14px rgba(14,165,233,.9); }
.btn-sky:hover { transform: translateY(-2px); box-shadow: var(--hl-glow); }
.btn-outline-sky:hover { transform: translateY(-2px); }

/* Bandeau d'appel a l'action */
.hl-cta { background-size: cover; background-position: center; border-radius: var(--radius-lg); }
.hl-cta::before { background: linear-gradient(102deg, rgba(4,32,56,.94), rgba(2,132,199,.78)); }

/* Fil d'actualite / en-tete de page */
.hl-pagehead { position: relative; overflow: hidden; }
.hl-pagehead::before {
  content: ""; position: absolute; width: 420px; height: 420px; right: -130px; top: -200px;
  border-radius: 50%; background: rgba(255,255,255,.07);
}

/* Squelette de chargement, pour les listes filtrees cote serveur */
.hl-skeleton {
  background: linear-gradient(90deg, var(--bg-surface-2) 25%, var(--border-color) 37%, var(--bg-surface-2) 63%);
  background-size: 400% 100%;
  animation: hl-shine 1.4s ease infinite;
  border-radius: var(--radius);
}

/* Navigation compactee au defilement */
.hl-navbar { transition: padding .3s var(--hl-ease), box-shadow .3s var(--hl-ease), background .3s; }
.hl-navbar.is-stuck { box-shadow: 0 10px 30px -18px rgba(15,23,42,.45); backdrop-filter: saturate(1.4) blur(6px); }
.hl-navbar.is-stuck .hl-logo img { height: 38px !important; }

/* Etat « occupe » d'un formulaire de filtres envoye automatiquement */
form.is-busy { opacity: .65; pointer-events: none; transition: opacity .2s; }

/* En-tete de page avec photo de fond : un voile bleu est pose PAR-DESSUS
   l'image (ombre interieure a tres large etalement), sinon le titre blanc
   devient illisible des que la photo est claire. Le contenu reste au-dessus
   du voile grace au z-index du conteneur. */
.hl-pagehead > .container { position: relative; z-index: 3; }
.hl-pagehead[style*="background-image"] {
  background-color: #0c4a6e;
  box-shadow: inset 0 0 0 100vmax rgba(8, 47, 76, .82);
}

/* ==========================================================================
   ==========================================================================
   AJUSTEMENTS — VERSION 3
   Bandeau de bannieres, prestations, poles : mise en forme revue.
   ==========================================================================
   ========================================================================== */

/* --------------------------------------------------------------------------
   V3.1 — CARROUSEL DE BANNIERES
   Les fleches et les pastilles de Bootstrap sont a peine visibles sur une
   photo : on les redessine en surfaces pleines, avec un contraste suffisant
   quelle que soit l'image chargee derriere.
   -------------------------------------------------------------------------- */
.hl-slider .carousel-control-prev,
.hl-slider .carousel-control-next {
  width: 62px;
  opacity: 1;
  z-index: 5;
}
.hl-slider .carousel-control-prev-icon,
.hl-slider .carousel-control-next-icon {
  width: 50px; height: 50px;
  background-image: none;
  background: rgba(255, 255, 255, .14);
  border: 1.5px solid rgba(255, 255, 255, .38);
  border-radius: 50%;
  backdrop-filter: blur(6px);
  display: grid; place-items: center;
  transition: background .25s var(--hl-ease), border-color .25s, transform .25s var(--hl-ease);
}
.hl-slider .carousel-control-prev-icon::before,
.hl-slider .carousel-control-next-icon::before {
  font-family: "bootstrap-icons";
  font-size: 22px;
  color: #fff;
  line-height: 1;
}
.hl-slider .carousel-control-prev-icon::before { content: "\F284"; margin-right: 3px; }
.hl-slider .carousel-control-next-icon::before { content: "\F285"; margin-left: 3px; }
.hl-slider .carousel-control-prev:hover .carousel-control-prev-icon,
.hl-slider .carousel-control-next:hover .carousel-control-next-icon {
  background: var(--hl-sky);
  border-color: var(--hl-sky);
  transform: scale(1.08);
}

.hl-slider .carousel-indicators {
  margin-bottom: 26px;
  gap: 9px;
}
.hl-slider .carousel-indicators [data-bs-target] {
  width: 10px; height: 10px;
  border-radius: 100px;
  border: 0;
  background: rgba(255, 255, 255, .45);
  opacity: 1;
  transition: width .35s var(--hl-ease), background .35s;
}
.hl-slider .carousel-indicators .active {
  width: 34px;
  background: #fff;
}

/* Numero du slide courant : repere utile quand les photos se ressemblent. */
.hl-slide-count {
  position: absolute; z-index: 4; right: 34px; bottom: 30px;
  display: flex; align-items: baseline; gap: 4px;
  color: rgba(255, 255, 255, .75);
  font-family: var(--font-title);
  font-size: 13px; font-weight: 600; letter-spacing: .08em;
}
.hl-slide-count strong { font-size: 26px; color: #fff; }
@media (max-width: 991.98px) { .hl-slide-count { display: none; } }

/* Le titre de la banniere reste la premiere chose lue : on lui donne une
   taille franche et une ombre portee, sinon il se noie dans la photo. */
.hl-slide-content h2 {
  font-size: clamp(28px, 4.2vw, 52px);
  line-height: 1.1;
  letter-spacing: -.025em;
  margin-bottom: 14px;
}
.hl-slide-content p {
  font-size: clamp(15px, 1.3vw, 18px);
  line-height: 1.65;
  max-width: 620px;
  color: rgba(255, 255, 255, .9);
  margin-bottom: 26px;
}

/* --------------------------------------------------------------------------
   V3.2 — PRESTATIONS
   Refonte de la vignette : l'ancienne empilait une photo, un nom et deux
   boutons de meme poids, sans hierarchie. On distingue desormais quatre
   niveaux de lecture — rattachement, intitule, description, action — et on
   ajoute une pastille d'icone a cheval sur la photo pour ancrer l'oeil.
   -------------------------------------------------------------------------- */
.hl-service {
  position: relative;
  display: flex; flex-direction: column;
  height: 100%;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform .42s var(--hl-ease), box-shadow .42s var(--hl-ease), border-color .3s;
}
.hl-service::before {
  content: ""; position: absolute; z-index: 5; top: 0; left: 0; right: 0; height: 3px;
  background: var(--hl-grad);
  transform: scaleX(0); transform-origin: left;
  transition: transform .45s var(--hl-ease);
}
.hl-service:hover {
  transform: translateY(-8px);
  box-shadow: var(--hl-glow);
  border-color: rgba(14, 165, 233, .35);
}
.hl-service:hover::before { transform: scaleX(1); }

.hl-service-media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--hl-grad-soft);
}
.hl-service-media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .8s var(--hl-ease);
}
.hl-service:hover .hl-service-media img { transform: scale(1.07); }
.hl-service-media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(3, 28, 48, 0) 40%, rgba(3, 28, 48, .62) 100%);
}

.hl-service-tag {
  position: absolute; z-index: 3; top: 12px; left: 12px;
  background: rgba(255, 255, 255, .92);
  color: var(--hl-sky-dark);
  border-radius: 100px;
  padding: 5px 12px;
  font-size: 11px; font-weight: 800;
  letter-spacing: .07em; text-transform: uppercase;
}
.hl-service-icon {
  position: absolute; z-index: 4; right: 16px; bottom: -22px;
  width: 48px; height: 48px;
  display: grid; place-items: center;
  border-radius: 15px;
  background: var(--hl-grad);
  color: #fff; font-size: 21px;
  box-shadow: 0 12px 26px -12px rgba(14, 165, 233, .95);
  transition: transform .45s var(--hl-ease);
}
.hl-service:hover .hl-service-icon { transform: rotate(-10deg) scale(1.1); }

.hl-service-body {
  flex: 1;
  padding: 18px 20px 6px;
}
/* Rattachement : discret, en capitales espacees, au-dessus de l'intitule. */
.hl-service-unit {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 800;
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--hl-sky-dark);
  margin-bottom: 8px;
}
.hl-service-unit i { font-size: 12px; }
.hl-service-body h5 {
  font-size: 17px;
  line-height: 1.32;
  margin-bottom: 8px;
}
.hl-service-body h5 a { color: var(--text-main); transition: color .25s; }
.hl-service:hover .hl-service-body h5 a { color: var(--hl-sky-dark); }
.hl-service-text {
  font-size: 13.5px;
  line-height: 1.68;
  color: var(--text-muted);
  margin-bottom: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

.hl-service-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 14px 20px 18px;
  margin-top: 12px;
  border-top: 1px dashed var(--border-color);
}
.hl-service-link {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13.5px; font-weight: 700;
  color: var(--hl-sky-dark);
}
.hl-service-link i { transition: transform .3s var(--hl-ease); }
.hl-service-link:hover i, .hl-service:hover .hl-service-link i { transform: translateX(4px); }
.hl-service-more {
  width: 36px; height: 36px; flex: none;
  display: grid; place-items: center;
  border-radius: 11px;
  background: var(--bg-surface-2);
  border: 1px solid var(--border-color);
  color: var(--text-muted);
  transition: all .28s var(--hl-ease);
}
.hl-service-more:hover {
  background: var(--hl-grad); border-color: transparent; color: #fff;
  transform: translateY(-2px);
}

/* --------------------------------------------------------------------------
   V3.3 — POLES
   Format revu : un numero en filigrane, un intitule franc, le nombre de
   praticiens, puis les specialites. Au survol, la carte entiere bascule en
   degrade et tout le texte passe en blanc — le survol n'etait jusque-la
   qu'un leger deplacement, ce qui ne se remarquait pas.
   -------------------------------------------------------------------------- */
.hl-pole {
  position: relative;
  height: 100%;
  display: flex; flex-direction: column;
  padding: 28px 24px 24px;
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  overflow: hidden;
  transition: transform .45s var(--hl-ease), box-shadow .45s var(--hl-ease), border-color .3s;
}
.hl-pole::before {
  content: ""; position: absolute; inset: 0; opacity: 0;
  background: var(--hl-grad);
  transition: opacity .45s var(--hl-ease);
}
.hl-pole > * { position: relative; z-index: 2; }
.hl-pole:hover {
  transform: translateY(-10px);
  box-shadow: var(--hl-glow);
  border-color: transparent;
}
.hl-pole:hover::before { opacity: 1; }

/* Numero en filigrane : repere de lecture, jamais un element a cliquer. */
.hl-pole-index {
  position: absolute; z-index: 1; top: 6px; right: 14px;
  font-family: var(--font-title);
  font-size: 76px; font-weight: 800; line-height: 1;
  color: var(--hl-sky);
  opacity: .07;
  pointer-events: none;
  transition: color .45s, opacity .45s;
}
.hl-pole:hover .hl-pole-index { color: #fff; opacity: .22; }

.hl-pole-icon {
  width: 56px; height: 56px;
  display: grid; place-items: center;
  border-radius: 18px;
  background: var(--hl-grad-soft);
  color: var(--hl-sky-dark);
  font-size: 24px;
  margin-bottom: 16px;
  box-shadow: var(--hl-ring);
  transition: background .45s, color .45s, transform .45s var(--hl-ease), box-shadow .45s;
}
.hl-pole:hover .hl-pole-icon {
  background: rgba(255, 255, 255, .18);
  color: #fff;
  box-shadow: none;
  transform: rotate(-8deg) scale(1.06);
}

.hl-pole-title {
  font-family: var(--font-title);
  font-size: 18px; font-weight: 700;
  line-height: 1.3; letter-spacing: -.015em;
  color: var(--text-main);
  margin-bottom: 6px;
  transition: color .45s;
}
.hl-pole-count {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 700;
  color: var(--hl-sky-dark);
  background: var(--hl-sky-soft);
  border-radius: 100px;
  padding: 4px 11px;
  margin-bottom: 16px;
  transition: background .45s, color .45s;
}
.hl-pole:hover .hl-pole-title { color: #fff; }
.hl-pole:hover .hl-pole-count { background: rgba(255, 255, 255, .2); color: #fff; }

.hl-pole-list { list-style: none; padding: 0; margin: 0 0 4px; flex: 1; }
.hl-pole-list li + li { margin-top: 2px; }
.hl-pole-list a {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 0;
  font-size: 13.5px; font-weight: 600;
  color: var(--text-muted);
  border-bottom: 1px solid transparent;
  transition: color .3s, padding-left .3s var(--hl-ease);
}
.hl-pole-list a i { font-size: 11px; color: var(--hl-sky); transition: color .45s, transform .3s var(--hl-ease); }
.hl-pole-list a:hover { padding-left: 5px; color: var(--hl-sky-dark); }
.hl-pole-list a:hover i { transform: translateX(3px); }
.hl-pole:hover .hl-pole-list a { color: rgba(255, 255, 255, .92); }
.hl-pole:hover .hl-pole-list a i { color: rgba(255, 255, 255, .75); }
.hl-pole:hover .hl-pole-list a:hover { color: #fff; }

.hl-pole-more {
  display: inline-flex; align-items: center; gap: 7px;
  margin-top: 14px; padding-top: 14px;
  border-top: 1px dashed var(--border-color);
  font-size: 13px; font-weight: 700;
  color: var(--hl-sky-dark);
  transition: color .45s, border-color .45s;
}
.hl-pole-more i { transition: transform .3s var(--hl-ease); }
.hl-pole:hover .hl-pole-more { color: #fff; border-color: rgba(255, 255, 255, .28); }
.hl-pole:hover .hl-pole-more i { transform: translateX(4px); }

/* --------------------------------------------------------------------------
   V3.4 — TITRES DE SECTION : HIERARCHIE PLUS NETTE
   -------------------------------------------------------------------------- */
.hl-title {
  font-size: clamp(23px, 2.5vw, 34px);
  line-height: 1.2;
  letter-spacing: -.025em;
}
.hl-subtitle {
  font-size: 15px;
  line-height: 1.7;
  color: var(--text-muted);
  max-width: 680px;
}
.hl-eyebrow {
  font-size: 11.5px;
  text-transform: uppercase;
}

/* Pastilles de specialite : plus lisibles, avec un survol en degrade. */
.hl-chip {
  font-size: 13px; font-weight: 600;
  transition: all .28s var(--hl-ease);
}
.hl-chip:hover {
  background: var(--hl-grad);
  border-color: transparent;
  color: #fff;
  transform: translateY(-3px);
  box-shadow: 0 10px 20px -12px rgba(14, 165, 233, .9);
}
.hl-chip:hover i, .hl-chip:hover .hl-badge { color: #fff; }
.hl-chip:hover .hl-badge { background: rgba(255, 255, 255, .22); }

/* La pastille d'icone chevauche le bas de la photo. Le rognage necessaire au
   zoom de l'image est donc confie a un calque interieur : le conteneur, lui,
   laisse la pastille depasser au lieu de la couper en deux. */
.hl-service-media { overflow: visible; }
.hl-service-clip {
  position: absolute; inset: 0;
  overflow: hidden;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.hl-service-clip img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--hl-ease); }
.hl-service:hover .hl-service-clip img { transform: scale(1.07); }
.hl-service-media::after { border-radius: var(--radius-lg) var(--radius-lg) 0 0; }

/* La carte est une colonne flex : sans cette ligne, la pastille du nombre de
   praticiens s'etire sur toute la largeur au lieu d'epouser son texte. */
.hl-pole-count { align-self: flex-start; }

/* Le nombre de bannieres n'est plus plafonne : les pastilles de position
   doivent donc pouvoir passer a la ligne plutot que de deborder de l'ecran
   quand une dizaine de bannieres sont publiees. */
.hl-slider .carousel-indicators { flex-wrap: wrap; padding-inline: 70px; }

/* ==========================================================================
   V3.5 — LE PANNEAU D'UN SELECT DOIT PASSER DEVANT LES RESULTATS
   --------------------------------------------------------------------------
   Symptome : en ouvrant « Spécialité », la liste s'affichait DERRIERE les
   cartes de praticiens et se retrouvait coupee net.

   Cause : `z-index` ne compare que des elements du MEME contexte
   d'empilement. Le panneau porte bien z-index 1200, mais son ancetre — le
   formulaire de filtres — n'en cree aucun : le panneau concourt donc au
   niveau de la section. Or chaque carte animee porte
   `will-change: opacity, transform`, et cette seule propriete suffit a creer
   un contexte d'empilement. Les cartes, situees plus bas dans le document,
   passaient donc devant.

   Trois corrections, chacune utile seule, ensemble sures :
   ========================================================================== */

/* 1. `will-change` n'a d'interet que PENDANT l'animation. Une fois la carte
      apparue, on le libere : plus de contexte d'empilement parasite, et le
      navigateur cesse de reserver une couche graphique pour rien. */
[data-hl-reveal].is-visible { will-change: auto; }

/* 2. La barre de filtres devient elle-meme un contexte d'empilement, place
      au-dessus des resultats. Tout ce qu'elle contient suit. */
.hl-filterbar { position: relative; z-index: 60; }

/* 3. Le select ouvert prend le dessus sur ses voisins immediats — le champ de
      recherche et les autres listes de la meme rangee. */
.hl-select { z-index: 1; }
.hl-select.is-open { z-index: 1200; }

/* 4. Filet de securite : n'importe quel conteneur abritant un select ouvert
      est eleve, meme hors de la barre de filtres (encarts, cartes, sections).
      `:has()` n'est pas connu des navigateurs les plus anciens — d'ou les
      trois regles precedentes, qui couvrent deja le cas courant. */
form:has(.hl-select.is-open),
.hl-card:has(.hl-select.is-open),
.hl-card-body:has(.hl-select.is-open),
section:has(.hl-select.is-open) {
  position: relative;
  z-index: 1200;
}