/* =====================================================================
   LilBooking — dark mode (button moon / sun in the header).
   Active when <html data-theme="dark">; the choice is remembered in the
   browser (localStorage "lb-theme"), set before the page is painted.
   Brand colours stay: lime buttons, navy banners. Pictures are untouched.
   ===================================================================== */
html[data-theme="dark"] {
    color-scheme: dark;
    --lb-bg:#0b1220; --lb-surface:#131c2e; --lb-surface-2:#1a2540; --lb-raise:#202c4a;
    --lb-ink:#e6ebf5; --lb-muted:#9aa7bd; --lb-line:#27334d; --lb-soft:#111a2c;
    --lb-navy:#8db8ff; --lb-navy-2:#a9c8ff;          /* navy used as text/icons → readable light blue */
    --lb-navy-bg:#1f4c9c;                              /* navy used as a background (buttons, active tabs) */
    --lb-lime-d:#9fd12a;
}
/* gestion (« Mon agence ») has its own variables */
html[data-theme="dark"] .gx { --nv:#8db8ff; --ink:#e6ebf5; --mut:#9aa7bd; --line:#27334d; --soft:#111a2c; }

/* ---------- page, text, links ---------- */
html[data-theme="dark"] body,
html[data-theme="dark"] body.lb-landing,
html[data-theme="dark"] body.lb-auth { background:var(--lb-bg) !important; color:var(--lb-ink); }
html[data-theme="dark"] h1, html[data-theme="dark"] h2, html[data-theme="dark"] h3,
html[data-theme="dark"] h4, html[data-theme="dark"] h5, html[data-theme="dark"] h6,
html[data-theme="dark"] .h1, html[data-theme="dark"] .h2, html[data-theme="dark"] .h3,
html[data-theme="dark"] .h4, html[data-theme="dark"] .h5, html[data-theme="dark"] .h6 { color:var(--lb-ink); }
html[data-theme="dark"] .text-dark, html[data-theme="dark"] .text-body, html[data-theme="dark"] .text-black { color:var(--lb-ink) !important; }
html[data-theme="dark"] .text-muted, html[data-theme="dark"] .text-secondary { color:var(--lb-muted) !important; }
html[data-theme="dark"] .text-primary { color:var(--lb-navy) !important; }
html[data-theme="dark"] p a:not([class*="btn"]), html[data-theme="dark"] .lb-link, html[data-theme="dark"] label a { color:var(--lb-navy) !important; }
html[data-theme="dark"] hr { border-color:var(--lb-line); opacity:1; }
html[data-theme="dark"] ::placeholder { color:#7d8aa3 !important; opacity:1; }
html[data-theme="dark"] #spinner { background:var(--lb-bg) !important; }

/* ---------- generic surfaces (bootstrap + legacy theme) ---------- */
html[data-theme="dark"] .bg-white, html[data-theme="dark"] .bg-light,
html[data-theme="dark"] .card, html[data-theme="dark"] .card-header, html[data-theme="dark"] .card-footer,
html[data-theme="dark"] .modal-content, html[data-theme="dark"] .list-group-item,
html[data-theme="dark"] .accordion-item, html[data-theme="dark"] .accordion-button,
html[data-theme="dark"] .booking, html[data-theme="dark"] .toast,
html[data-theme="dark"] .trip-booking-page .guest-form-card { background-color:var(--lb-surface) !important; color:var(--lb-ink); border-color:var(--lb-line) !important; }
html[data-theme="dark"] .accordion-button:not(.collapsed) { background:var(--lb-surface-2) !important; color:var(--lb-ink); }
html[data-theme="dark"] .accordion-button::after { filter:invert(1) brightness(1.6); }
html[data-theme="dark"] .border, html[data-theme="dark"] .border-top, html[data-theme="dark"] .border-bottom,
html[data-theme="dark"] .border-start, html[data-theme="dark"] .border-end { border-color:var(--lb-line) !important; }
html[data-theme="dark"] .shadow, html[data-theme="dark"] .shadow-sm, html[data-theme="dark"] .shadow-lg { box-shadow:0 8px 24px rgba(0,0,0,.45) !important; }

/* dropdowns */
html[data-theme="dark"] .dropdown-menu { background:var(--lb-surface-2); border-color:var(--lb-line); box-shadow:0 12px 30px rgba(0,0,0,.5); }
html[data-theme="dark"] .dropdown-item { color:var(--lb-ink); }
html[data-theme="dark"] .dropdown-item:hover, html[data-theme="dark"] .dropdown-item:focus { background:var(--lb-raise); color:#fff; }
html[data-theme="dark"] .dropdown-divider { border-color:var(--lb-line); }

/* forms */
html[data-theme="dark"] .form-control, html[data-theme="dark"] .form-select,
html[data-theme="dark"] input[type="text"], html[data-theme="dark"] input[type="email"], html[data-theme="dark"] input[type="tel"],
html[data-theme="dark"] input[type="password"], html[data-theme="dark"] input[type="number"], html[data-theme="dark"] input[type="date"],
html[data-theme="dark"] input[type="search"], html[data-theme="dark"] select, html[data-theme="dark"] textarea {
    background-color:var(--lb-soft); color:var(--lb-ink); border-color:var(--lb-line); }
html[data-theme="dark"] .form-control:focus, html[data-theme="dark"] .form-select:focus { background-color:var(--lb-soft); color:var(--lb-ink); border-color:var(--lb-navy); box-shadow:0 0 0 3px rgba(141,184,255,.18); }
html[data-theme="dark"] .form-control:disabled, html[data-theme="dark"] .form-control[readonly] { background:var(--lb-surface-2); }
html[data-theme="dark"] .input-group-text { background:var(--lb-surface-2); color:var(--lb-muted); border-color:var(--lb-line); }
html[data-theme="dark"] input:-webkit-autofill { -webkit-box-shadow:0 0 0 40px var(--lb-soft) inset !important; -webkit-text-fill-color:var(--lb-ink) !important; }
html[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator { filter:invert(1); }

/* tables */
html[data-theme="dark"] .table { color:var(--lb-ink); border-color:var(--lb-line); --bs-table-bg:transparent; --bs-table-striped-bg:rgba(255,255,255,.03); --bs-table-hover-bg:rgba(255,255,255,.05); --bs-table-striped-color:var(--lb-ink); --bs-table-hover-color:var(--lb-ink); }
html[data-theme="dark"] .table > :not(caption) > * > * { color:var(--lb-ink); border-color:var(--lb-line); }
html[data-theme="dark"] .table > thead > tr > th, html[data-theme="dark"] .table thead th { background:var(--lb-surface-2) !important; color:var(--lb-ink) !important; }

/* buttons that used navy as background */
html[data-theme="dark"] .btn-primary, html[data-theme="dark"] .badge.bg-primary, html[data-theme="dark"] .btn-secondary,
html[data-theme="dark"] .btn-dark, html[data-theme="dark"] .page-item.active .page-link,
html[data-theme="dark"] .nav-pills .nav-link.active, html[data-theme="dark"] .nav-tabs .nav-link.active,
html[data-theme="dark"] .bg-gradient-primary, html[data-theme="dark"] .table-dark, html[data-theme="dark"] thead.table-dark th,
html[data-theme="dark"] .lbh-signup, html[data-theme="dark"] .lb-tab.active, html[data-theme="dark"] .lbv-step.active,
html[data-theme="dark"] .lbv-step.done .n, html[data-theme="dark"] .lbt-step.current .dot, html[data-theme="dark"] .lbc-social a,
html[data-theme="dark"] .lbh-notif-item .ic, html[data-theme="dark"] .gx-nav a.on, html[data-theme="dark"] .gx-org .ini {
    background:var(--lb-navy-bg) !important; border-color:var(--lb-navy-bg) !important; color:#fff !important; }
html[data-theme="dark"] .btn-outline-primary { background:transparent !important; color:var(--lb-navy) !important; border-color:var(--lb-navy) !important; }
html[data-theme="dark"] .btn-outline-primary:hover { background:var(--lb-navy-bg) !important; color:#fff !important; }
html[data-theme="dark"] .btn-light, html[data-theme="dark"] .btn-outline-secondary { background:var(--lb-surface-2); color:var(--lb-ink); border-color:var(--lb-line); }
html[data-theme="dark"] .page-link { background:var(--lb-surface); color:var(--lb-ink); border-color:var(--lb-line); }
html[data-theme="dark"] .nav-tabs { border-color:var(--lb-line); }
html[data-theme="dark"] .nav-tabs .nav-link, html[data-theme="dark"] .nav-pills .nav-link { color:var(--lb-muted); }
html[data-theme="dark"] .btn-close { filter:invert(1) grayscale(1) brightness(2); }
html[data-theme="dark"] .alert { border-color:var(--lb-line); }
html[data-theme="dark"] .alert-info { background:#12284a; color:#cfe0ff; }
html[data-theme="dark"] .alert-success { background:#16301a; color:#c9f0b0; }
html[data-theme="dark"] .alert-warning { background:#3a2c08; color:#ffe2a0; }
html[data-theme="dark"] .alert-danger { background:#3a1416; color:#ffc4c4; }

/* ---------- header ---------- */
html[data-theme="dark"] .lbh { background:var(--lb-surface); box-shadow:0 1px 0 var(--lb-line); }
html[data-theme="dark"] .lbh-chip, html[data-theme="dark"] .lbh-bell, html[data-theme="dark"] .lbh-theme { background:var(--lb-surface-2); border-color:var(--lb-line); color:var(--lb-ink); }
html[data-theme="dark"] .lbh-burger span { background:var(--lb-ink); }
html[data-theme="dark"] .lbh-logo img, html[data-theme="dark"] .lba-top img, html[data-theme="dark"] .lb-logo-dark { filter:brightness(0) invert(1) opacity(.95); }
html[data-theme="dark"] .lbh-avatar { box-shadow:0 0 0 2px var(--lb-surface), 0 0 0 3.5px var(--lb-lime); }
html[data-theme="dark"] .lbh-notif-item, html[data-theme="dark"] .lbh-notif-all, html[data-theme="dark"] .lbh-notif-page { background:transparent; color:var(--lb-ink); border-color:var(--lb-line); }
html[data-theme="dark"] .lbh-notif-item.unread, html[data-theme="dark"] .lbh-notif-item:hover { background:var(--lb-raise); }
html[data-theme="dark"] .lbh-notif-head { border-color:var(--lb-line); }

/* ---------- home page ---------- */
html[data-theme="dark"] .lb-tabs, html[data-theme="dark"] .lb-panel, html[data-theme="dark"] .lb-card,
html[data-theme="dark"] .lb-dest, html[data-theme="dark"] .lb-offer, html[data-theme="dark"] .lb-triptype,
html[data-theme="dark"] .lb-arrow, html[data-theme="dark"] .lb-swap, html[data-theme="dark"] .lb-f,
html[data-theme="dark"] .lb-btn-ghost, html[data-theme="dark"] .lb-stat { background:var(--lb-surface) !important; border-color:var(--lb-line) !important; color:var(--lb-ink); }
html[data-theme="dark"] .lb-tab { background:var(--lb-surface-2); color:var(--lb-ink); }
html[data-theme="dark"] .lb-f input, html[data-theme="dark"] .lb-f select, html[data-theme="dark"] .lb-f textarea { -webkit-text-fill-color:var(--lb-ink); background:transparent !important; }
html[data-theme="dark"] .lb-banner .btn-w { background:#fff; color:#0a2d63 !important; }
html[data-theme="dark"] .lb-banner { background:linear-gradient(135deg, #0f2b5c, #1f4c9c) !important; }
html[data-theme="dark"] .lb-tab.active .lb-soon-dot { background:var(--lb-surface); }

/* ---------- service pages (visa, permis, suivi, eSIM, contact, bientôt) ---------- */
html[data-theme="dark"] .lbv-panel, html[data-theme="dark"] .lbv-steps, html[data-theme="dark"] .lbv-person,
html[data-theme="dark"] .lbv-drop, html[data-theme="dark"] .lbv-accept, html[data-theme="dark"] .lbt-panel,
html[data-theme="dark"] .lbt-ref, html[data-theme="dark"] .lbe-card, html[data-theme="dark"] .lbe-panel,
html[data-theme="dark"] .lbe-status, html[data-theme="dark"] .lbe-steps div, html[data-theme="dark"] .lbe-loc,
html[data-theme="dark"] .lbc-card, html[data-theme="dark"] .lbc-card .ic, html[data-theme="dark"] .lbcs .ic,
html[data-theme="dark"] .lbv-step .n, html[data-theme="dark"] .lbv-person h3 .n,
html[data-theme="dark"] .lb-request-form .form-control, html[data-theme="dark"] .lb-request-form .form-select { background:var(--lb-surface) !important; border-color:var(--lb-line) !important; color:var(--lb-ink); }
html[data-theme="dark"] .lbe-loc img { background:#fff; }

/* ---------- « Mon agence » ---------- */
html[data-theme="dark"] .gx-side, html[data-theme="dark"] .gx-card, html[data-theme="dark"] .gx-kpi,
html[data-theme="dark"] .gx-filters input, html[data-theme="dark"] .gx-filters select, html[data-theme="dark"] .gx-btn.ghost,
html[data-theme="dark"] .gx-docs .n, html[data-theme="dark"] .gl-box, html[data-theme="dark"] .gl-f,
html[data-theme="dark"] .gl-faq details, html[data-theme="dark"] .gl-shot, html[data-theme="dark"] .gl-step { background:var(--lb-surface) !important; border-color:var(--lb-line) !important; color:var(--lb-ink); }
html[data-theme="dark"] .gx-btn.danger { background:transparent !important; }

/* ---------- sign-in / sign-up pages ---------- */
html[data-theme="dark"] .lba-top, html[data-theme="dark"] body.lb-auth .container { background:var(--lb-surface) !important; box-shadow:0 1px 0 var(--lb-line); }
html[data-theme="dark"] body.lb-auth .container { box-shadow:0 20px 50px rgba(0,0,0,.5) !important; border-color:var(--lb-line) !important; }
html[data-theme="dark"] body.lb-auth .google-btn { background:var(--lb-surface-2) !important; border-color:var(--lb-line) !important; }
html[data-theme="dark"] body.lb-auth .google-btn span { color:var(--lb-ink) !important; }
html[data-theme="dark"] body.lb-auth .container .form-box .input-box input { color:var(--lb-ink) !important; -webkit-text-fill-color:var(--lb-ink); background:transparent; }
html[data-theme="dark"] body.lb-auth .lba-pro-btn { background:linear-gradient(135deg, #1f4c9c, #2a62c4) !important; }
html[data-theme="dark"] body.lb-auth .container .form-box .message, html[data-theme="dark"] body.lb-auth p.message { background:var(--lb-surface-2); }

/* ---------- footer, misc ---------- */
html[data-theme="dark"] .footer.bg-dark { background:#070c17 !important; }
html[data-theme="dark"] .lb-slide-dots button { background:rgba(255,255,255,.45); }

/* smooth switch */
html.lb-theme-anim, html.lb-theme-anim * { transition:background-color .3s ease, color .3s ease, border-color .3s ease !important; }

/* ---------- theme button ---------- */
.lbh-theme { width:40px; height:40px; border-radius:50%; border:1px solid var(--lb-line); background:#f7f9fc; color:var(--lb-ink);
    display:inline-grid; place-items:center; cursor:pointer; padding:0; flex:none; transition:transform .2s; }
.lbh-theme:hover { transform:rotate(-15deg); }
.lbh-theme .fa-sun { display:none; color:#ffcf4a; }
html[data-theme="dark"] .lbh-theme .fa-sun { display:inline-block; }
html[data-theme="dark"] .lbh-theme .fa-moon { display:none; }
.lbh-theme .fa-moon { color:var(--lb-navy); }

/* ---------- fixes found page by page ---------- */
html[data-theme="dark"] .lbv-step { background:var(--lb-surface-2) !important; color:var(--lb-muted); }
html[data-theme="dark"] .gx-alert.info { background:#12284a; color:#cfe0ff; }
html[data-theme="dark"] .gx-alert.warn { background:#3a2c08; color:#ffe2a0; }
html[data-theme="dark"] .custom-table, html[data-theme="dark"] .custom-table td, html[data-theme="dark"] .custom-table th,
html[data-theme="dark"] .table-responsive { background-color:var(--lb-surface) !important; color:var(--lb-ink); border-color:var(--lb-line) !important; }
/* profile page (legacy theme colours) */
html[data-theme="dark"] .container-xxl .profile-head h5 { color:var(--lb-ink); }
html[data-theme="dark"] .container-xxl .profile-head h6, html[data-theme="dark"] .container-xxl .profile-tab p { color:var(--lb-navy); }
html[data-theme="dark"] .container-xxl .profile-work p, html[data-theme="dark"] .container-xxl .proile-rating { color:var(--lb-muted); }
html[data-theme="dark"] .container-xxl .profile-work a, html[data-theme="dark"] .container-xxl .proile-rating span,
html[data-theme="dark"] .container-xxl .profile-tab label { color:var(--lb-ink); }
html[data-theme="dark"] .container-xxl .profile-head .nav-tabs .nav-link { color:var(--lb-muted); }
/* hotels (own palette) */
html[data-theme="dark"] .hotel-page {
    --hotel-slate-50:#0b1220; --hotel-slate-100:#131c2e; --hotel-slate-200:#27334d; --hotel-slate-400:#7d8aa3;
    --hotel-slate-600:#a5b1c6; --hotel-slate-800:#e6ebf5; --hotel-primary-light:#12284a; --hotel-primary:#8db8ff; }
html[data-theme="dark"] .hotel-modify-panel, html[data-theme="dark"] .hotel-modify-panel .form-control, html[data-theme="dark"] .hotel-modify-panel .form-select,
html[data-theme="dark"] .hotel-card, html[data-theme="dark"] .hotel-no-results, html[data-theme="dark"] .hotel-info-card,
html[data-theme="dark"] .room-option-card, html[data-theme="dark"] .step-circle, html[data-theme="dark"] .booking-summary-card,
html[data-theme="dark"] .guest-form-card, html[data-theme="dark"] .booking-list-card { background:var(--lb-surface) !important; color:var(--lb-ink); border-color:var(--lb-line) !important; }
html[data-theme="dark"] .lbh-notif-item .tx span { color:#c3cde0; }
html[data-theme="dark"] .gx-ok { color:#9fd65a; }
html[data-theme="dark"] .gx-due { color:#ff7b7b; }
html[data-theme="dark"] .lb-features .plane img { filter:brightness(0) invert(1) opacity(.75); mix-blend-mode:screen; }
html[data-theme="dark"] .lb-tabs-wrap { --lb-tabs-fade:var(--lb-surface); }

/* ---------- dropdown lists (country, nationality…): the open list must stay readable ----------
   Some browsers (Chrome on Windows) draw the open list with a light background while the options
   inherit the light text of the dark theme: give the options their own colours in both themes. */
select option, select optgroup { background-color:#fff; color:#16213b; }
html[data-theme="dark"] select option, html[data-theme="dark"] select optgroup { background-color:#131c2e; color:#e6ebf5; }
html[data-theme="dark"] select option:checked { background-color:#1f4c9c; color:#fff; }
html[data-theme="dark"] select option:disabled { color:#7f8ba3; }

/* ---------- forms inside « booking » cards (profile update, trip passengers, hotel occupants…) ----------
   lb_global.css forces a white background on these fields (light mode): in dark mode use the dark field colours. */
html[data-theme="dark"] .booking .form-control, html[data-theme="dark"] .booking .form-select,
html[data-theme="dark"] .booking .form-control.bg-transparent, html[data-theme="dark"] .booking .form-select.bg-transparent,
html[data-theme="dark"] .booking textarea,
html[data-theme="dark"] .booking input:not([type=checkbox]):not([type=radio]):not([type=submit]) {
    background:var(--lb-soft) !important; color:var(--lb-ink) !important; -webkit-text-fill-color:var(--lb-ink); border-color:var(--lb-line) !important; }
html[data-theme="dark"] .booking .form-control:disabled, html[data-theme="dark"] .booking .form-control[readonly] { background:var(--lb-surface-2) !important; }
html[data-theme="dark"] .booking .form-control::placeholder { color:#7f8ba3 !important; -webkit-text-fill-color:#7f8ba3; }
html[data-theme="dark"] .booking .form-floating > .form-control::placeholder { color:transparent !important; -webkit-text-fill-color:transparent; }
html[data-theme="dark"] .booking .form-floating > label::after { background:transparent !important; }
html[data-theme="dark"] .booking select { color-scheme:dark; }

/* dark mode: names and prices of the offers (visas, international licence…) and the panel titles in clear white, not blue */
html[data-theme="dark"] .lb-offer .nm b,
html[data-theme="dark"] .lb-offer .pr b,
html[data-theme="dark"] .lb-offer .pr b small,
html[data-theme="dark"] .lb-panel .lb-offers-head strong,
html[data-theme="dark"] .lb-panel .lb-row strong { color:#f4f7fc !important; }
html[data-theme="dark"] .lb-offer .nm small, html[data-theme="dark"] .lb-offer .pr small { color:#b4bfd3; }
html[data-theme="dark"] .lb-offer .go { color:#b6e04a !important; }

/* dark mode: titles, labels and prices in clear white (clickable links stay light blue) */
html[data-theme="dark"] .lb-card strong,
html[data-theme="dark"] h1.text-primary, html[data-theme="dark"] h2.text-primary, html[data-theme="dark"] h3.text-primary,
html[data-theme="dark"] h4.text-primary, html[data-theme="dark"] h5.text-primary, html[data-theme="dark"] h6.text-primary,
html[data-theme="dark"] li.text-primary,
html[data-theme="dark"] body.lb-auth .container .form-box h2,
html[data-theme="dark"] body.lb-auth .container .form-box h3,
html[data-theme="dark"] body.lb-auth-wide h3,
html[data-theme="dark"] body.lb-auth .container .form-box .input-box label,
html[data-theme="dark"] body.lb-auth .container .form-box .input-box input:focus ~ label,
html[data-theme="dark"] body.lb-auth .container .form-box .input-box input:valid ~ label { color:#f4f7fc !important; }
html[data-theme="dark"] .lb-tab.active .lb-soon-dot { color:#0B2545 !important; }
html[data-theme="dark"] .lbh-pro { color:#0B2545 !important; }
html[data-theme="dark"] .lbp-logo img { filter:none !important; }
html[data-theme="dark"] body.lb-auth.lb-auth-hero { background:linear-gradient(90deg, rgba(8,16,32,.97) 0 44%, rgba(8,16,32,.7) 100%), var(--lbh-img) center/cover no-repeat, #0b1220 !important; }
html[data-theme="dark"] .lbh { background:transparent !important; }
html[data-theme="dark"] body.lb-auth-hero .container { background:var(--lb-surface) !important; }