/* ============================================================ Orbit — Thème Saturne pour LibreBooking / LPL Sombre par défaut — bascule via classe .light-mode sur ============================================================ */ :root { --saturn-gold: #e8b84b; --saturn-gold-dark: #c89830; --saturn-gold-pale: #fdf0c8; --cosmos-deep: #0d0d1a; --cosmos-mid: #1a1a2e; --cosmos-surface: #48489f; /*#12122a;*/ --cosmos-border: #a7adf9; /*#2a2d50;*/ --stardust: #a0a8c0; --nebula-blue: #4a9fc8; --bg-body: var(--cosmos-deep); --bg-nav: var(--cosmos-mid); --bg-panel: var(--cosmos-mid); --bg-panel-head: var(--cosmos-surface); --bg-surface: var(--cosmos-surface); --bg-input: var(--cosmos-surface); --border-color: var(--cosmos-border); --text-main: var(--stardust); --text-heading: var(--saturn-gold); --text-link: var(--saturn-gold); --text-link-hover: var(--saturn-gold-pale); --btn-bg: var(--saturn-gold); --btn-text: var(--cosmos-deep); --slot-free-bg: var(--cosmos-surface); --slot-mine-bg: rgba(232, 184, 75, 0.75); --slot-mine-border: var(--saturn-gold); --slot-mine-text: #5b430e; /*var(--saturn-gold);*/ --slot-other-bg: rgba(74, 159, 200, 0.75); --slot-other-border: var(--nebula-blue); --slot-other-text: #176286; /*var(--nebula-blue);*/ --dropdown-bg: var(--cosmos-mid); --modal-bg: var(--cosmos-mid); --scrollbar-thumb: var(--cosmos-border); } /* --- Thème clair --- */ html.light-mode { --bg-body: #f5f3ee; --bg-nav: #ffffff; --bg-panel: #ffffff; --bg-panel-head: #fdf5e0; --bg-surface: #fafaf7; --bg-input: #ffffff; --border-color: #e0d8c0; --text-main: #3a3520; --text-heading: #a07010; --text-link: #a07010; --text-link-hover: #c89830; --btn-bg: #c89830; --btn-text: #ffffff; --slot-free-bg: #fafaf7; --slot-mine-bg: rgba(200, 152, 48, 0.12); --slot-mine-border: #c89830; --slot-mine-text: #8a6010; --slot-other-bg: rgba(74, 130, 180, 0.1); --slot-other-border: #4a82b4; --slot-other-text: #2a5a8a; --dropdown-bg: #ffffff; --modal-bg: #ffffff; --scrollbar-thumb: #d0c8a8; } /* --- Corps de page --- */ body { background-color: var(--bg-body) !important; color: var(--text-main) !important; font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif !important; } /* --- Navbar --- */ .navbar, .navbar-default, nav.navbar { background-color: var(--bg-nav) !important; border-bottom: 2px solid var(--saturn-gold) !important; box-shadow: none !important; } .navbar-default .navbar-brand, .navbar-brand { color: var(--saturn-gold) !important; font-weight: 600 !important; letter-spacing: 1px !important; font-size: 20px !important; } .navbar-default .navbar-nav > li > a, .navbar-nav > li > a { color: var(--text-main) !important; } .navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > .active > a { color: var(--saturn-gold) !important; background-color: transparent !important; border-bottom: 2px solid var(--saturn-gold) !important; } /* --- Panels --- */ .panel, .panel-default { background-color: var(--bg-panel) !important; border: 1px solid var(--border-color) !important; box-shadow: none !important; } .panel-heading, .panel-default > .panel-heading { background-color: var(--bg-panel-head) !important; border-bottom: 1px solid var(--border-color) !important; color: var(--text-heading) !important; } /* --- Boutons --- */ .btn-primary, .btn-success { background-color: var(--btn-bg) !important; border-color: var(--saturn-gold-dark) !important; color: var(--btn-text) !important; font-weight: 600 !important; } .btn-primary:hover, .btn-success:hover { background-color: var(--saturn-gold-dark) !important; color: var(--btn-text) !important; } .btn-default { background-color: transparent !important; border-color: var(--border-color) !important; color: var(--text-main) !important; } .btn-default:hover { border-color: var(--saturn-gold) !important; color: var(--saturn-gold) !important; } /* --- Formulaires --- */ .form-control, input[type="text"], input[type="email"], input[type="password"], select, textarea { background-color: var(--bg-input) !important; border: 1px solid var(--border-color) !important; color: var(--text-main) !important; border-radius: 4px !important; } .form-control:focus, input:focus, select:focus, textarea:focus { border-color: var(--saturn-gold) !important; box-shadow: 0 0 0 2px rgba(232, 184, 75, 0.15) !important; outline: none !important; } label, .control-label { color: var(--text-main) !important; } /* --- Planning / créneaux --- */ .reservable { background-color: var(--slot-free-bg) !important; border-color: var(--border-color) !important; } .reservable:hover { background-color: rgba(232, 184, 75, 0.08) !important; border-color: var(--saturn-gold) !important; cursor: pointer !important; } .my-reservation, .reserved.mine { background-color: var(--slot-mine-bg) !important; border-left: 3px solid var(--slot-mine-border) !important; color: var(--slot-mine-text) !important; font-size: 1.2em; font-weight: bold; } .reserved { background-color: var(--slot-other-bg) !important; border-left: 3px solid var(--slot-other-border) !important; color: var(--slot-other-text) !important; font-size: 1.2em; font-weight: bold; } /* --- Tableaux --- */ table, .table { color: var(--text-main) !important; } .table > thead > tr > th { background-color: var(--bg-surface) !important; border-color: var(--border-color) !important; color: var(--text-heading) !important; font-weight: 500 !important; } .table > tbody > tr > td { border-color: var(--border-color) !important; color: var(--text-main) !important; } .table-striped > tbody > tr:nth-of-type(odd) { background-color: rgba(128, 128, 0, 0.03) !important; } /* --- Alertes --- */ .alert-success { background-color: rgba(232, 184, 75, 0.1) !important; border-color: var(--saturn-gold) !important; color: var(--text-heading) !important; } .alert-danger, .alert-error { background-color: rgba(200, 60, 60, 0.1) !important; border-color: #c83c3c !important; color: #a03030 !important; } .alert-info { background-color: rgba(74, 159, 200, 0.08) !important; border-color: var(--nebula-blue) !important; color: #2a6080 !important; } /* --- Liens --- */ a { color: var(--text-link) !important; } a:hover { color: var(--text-link-hover) !important; text-decoration: none !important; } /* --- Titres --- */ h1, h2, h3, h4 { color: var(--text-heading) !important; } /* --- Badges --- */ .label-primary, .badge { background-color: var(--btn-bg) !important; color: var(--btn-text) !important; } /* --- Pagination --- */ .pagination > li > a, .pagination > li > span { background-color: var(--bg-surface) !important; border-color: var(--border-color) !important; color: var(--text-main) !important; } .pagination > .active > a { background-color: var(--saturn-gold) !important; border-color: var(--saturn-gold) !important; color: var(--cosmos-deep) !important; } /* --- Modal --- */ .modal-content { background-color: var(--modal-bg) !important; border: 1px solid var(--border-color) !important; } .modal-header { background-color: var(--bg-surface) !important; border-bottom: 1px solid var(--saturn-gold) !important; } .modal-title { color: var(--text-heading) !important; } .modal-footer { border-top: 1px solid var(--border-color) !important; } /* --- Dropdown --- */ .dropdown-menu { background-color: var(--dropdown-bg) !important; border: 1px solid var(--border-color) !important; } .dropdown-menu > li > a { color: var(--text-main) !important; } .dropdown-menu > li > a:hover { background-color: rgba(232, 184, 75, 0.08) !important; color: var(--saturn-gold) !important; } /* --- Bouton bascule thème --- */ #orbit-theme-toggle { opacity: 0.8; transition: opacity 0.2s; } #orbit-theme-toggle:hover { opacity: 1 !important; background-color: transparent !important; border-bottom: none !important; } /* --- Scrollbar --- */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: var(--bg-body); } ::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: var(--saturn-gold-dark); } /* ============================================================ Simplification formulaire de réservation — Orbit ============================================================ */ /* Colonne principale prend toute la largeur */ #reservationDetails { width: 100% !important; max-width: 800px !important; /* limite la largeur pour rester lisible */ margin: 0 auto !important; /* centré */ } /* Masquer les champs inutiles */ #repeatDiv { display: none !important; } .reservationTitle { display: none !important; } .reservationDescription { display: none !important; } #reservationParticipation { display: none !important; } .reservationAttachments { display: none !important; } #reminderOptionsEnd { display: none !important; } /* Attributs personnalisés — pleine largeur centrée, empilés */ #custom-attributes-placeholder { max-width: 800px !important; margin: 0 auto !important; } /* Chaque attribut sur une ligne entière */ #custom-attributes-placeholder .form-group { width: 100% !important; } /* Rappels — même largeur centrée */ .reservationReminders { max-width: 800px !important; margin: 0 auto !important; } /* Boutons Annuler/Créer — recentrer */ .reservationButtons { max-width: 350px !important; margin: 0 auto !important; float: none !important; }