/* ============================================================
OsezLouer — PONT DE THEMES (design tokens)
------------------------------------------------------------
Ce fichier relie les classes REELLES de l'application aux
variables de theme (--ozl-*). Il doit etre charge APRES
style.css / style_responsive_grid.css / ozl.features.responsive.css
et AVANT (ou avec) ozl.themes.css :
Le theme actif est selectionne par l'attribut sur :
document.documentElement.dataset.ozlTheme = 'airbnb';
(gere par ozl.theme.manager.pas). Les valeurs :root ci-dessous
ne sont qu'un repli neutre si aucun theme n'est applique.
============================================================ */
:root {
--ozl-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
--ozl-bg: #f5f1ea;
--ozl-surface: #ffffff;
--ozl-surface-2: #f2e3b8;
--ozl-ink: #2b2b2b;
--ozl-muted: #6b7280;
--ozl-line: #e5e5e5;
--ozl-primary: #10b981;
--ozl-primary-600: #0d9668;
--ozl-primary-ink: #ffffff;
--ozl-ok: #1f9d55;
--ozl-warn: #d9822b;
--ozl-danger: #e02424;
--ozl-radius: 14px;
--ozl-radius-sm: 8px;
--ozl-shadow: 4px 4px 12px rgba(0, 0, 0, 0.10);
--ozl-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
--ozl-nav-bg: #f5f1ea;
--ozl-nav-ink: #2b2b2b;
--ozl-nav-active-bg: #10b981;
--ozl-nav-active-ink:#ffffff;
}
/* Police globale optionnelle (n'ecrase pas les tailles existantes) */
body { font-family: var(--ozl-font); }
/* ---- Fonds principaux ---------------------------------------- */
.mainbck { background-color: var(--ozl-bg); }
.whitepanel_bck { background-color: var(--ozl-surface); }
.mainpanel_bck { background-color: var(--ozl-surface-2); }
.mainpanel {
background-color: var(--ozl-surface-2);
border-color: var(--ozl-primary);
border-radius: var(--ozl-radius);
box-shadow: var(--ozl-shadow);
}
/* ---- Modales ------------------------------------------------- */
.modal-content { border-radius: var(--ozl-radius); }
.modal-header { border-bottom: 1px solid var(--ozl-line); }
/* ---- Barre d'onglets principale (big-tabs) ------------------- */
/* style.css utilise !important sur ces regles : on le reprend ici */
ul[id*="big-tabs"] {
background-color: var(--ozl-nav-bg) !important;
border-color: var(--ozl-nav-bg) !important;
border-radius: var(--ozl-radius) !important;
}
ul[id*="big-tabs"] > li > a.nav-link {
color: var(--ozl-nav-ink) !important;
}
ul[id*="big-tabs"] > li.active > a.nav-link,
ul[id*="big-tabs"] > li > a.nav-link.active {
background-color: var(--ozl-nav-active-bg) !important;
color: var(--ozl-nav-active-ink) !important;
border-radius: var(--ozl-radius-sm) !important;
}
/* ---- Cartes de la grille responsive (annonces) --------------- */
.respgrid { background-color: var(--ozl-bg); }
.respitem {
background-color: var(--ozl-surface);
border-radius: var(--ozl-radius-sm);
box-shadow: var(--ozl-shadow-sm);
}
.respitem h3 { color: var(--ozl-ink); }
.respitem .content { color: var(--ozl-ink); }
/* ---- Nouvelles UIs (ozl.features.responsive.css) ------------- */
.ozl-card {
background: var(--ozl-surface);
border-color: var(--ozl-line);
border-radius: var(--ozl-radius-sm);
box-shadow: var(--ozl-shadow-sm);
}
.ozl-paie-row {
background: var(--ozl-surface);
border-color: var(--ozl-line);
border-radius: var(--ozl-radius-sm);
}
.ozl-badge.recu { color: var(--ozl-ok); }
.ozl-badge.partiel,
.ozl-badge.retard { color: var(--ozl-warn); }
.ozl-badge.impaye { color: var(--ozl-danger); }
.ozl-edl-piece { border-color: var(--ozl-line); border-radius: var(--ozl-radius-sm); }
.ozl-edl-piece > h4{ background: var(--ozl-bg); color: var(--ozl-ink); border-color: var(--ozl-line); }
.ozl-score-ring { background: conic-gradient(var(--ozl-primary) calc(var(--val) * 1%), #e8edf3 0); }
.ozl-score-bar .fill { background: var(--ozl-primary); }
/* ---- Boutons d'action « primaires » (opt-in via classe) ------ */
.ozl-btn-primary {
background: var(--ozl-primary);
color: var(--ozl-primary-ink);
border: none;
border-radius: var(--ozl-radius-sm);
padding: 10px 18px;
font-weight: 600;
cursor: pointer;
transition: background .15s ease;
}
.ozl-btn-primary:hover { background: var(--ozl-primary-600); }
/* Transition douce lors du changement de theme */
.mainbck, .mainpanel, .respitem, .ozl-card, ul[id*="big-tabs"] {
transition: background-color .25s ease, border-color .25s ease, box-shadow .25s ease;
}