/* ========================================================================== 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: 1320px; padding-left: 28px; padding-right: 28px; } } @media (min-width: 1600px) { .container, .container-xxl { max-width: 1420px; } } /* 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; } /* Sur telephone, les entrees LATERALES sont remplacees par une entree verticale. Un bloc decale de 38 px vers la gauche depasse du viewport tant qu'il n'est pas revele : la page gagne une barre de defilement horizontale et se decale au doigt, sans qu'on voie ce qui la provoque. Le mouvement vertical produit le meme effet sans jamais elargir la page. */ @media (max-width: 767.98px) { [data-hl-reveal="left"], [data-hl-reveal="right"] { transform: translateY(26px); } } [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