/* ============================================================================
design.css — Design System Rénoboost IA · FICHIER UNIQUE (source de vérité)
----------------------------------------------------------------------------
Import en premier sur chaque page, avant les autres CSS :
(ou dashboard.css…)
Identité : bleu #0ea5e9 (IA) → vert #10b981 (énergie) · Space Grotesk + Inter.
Règle d'or : aucune valeur en dur dans les CSS applicatifs → toujours un token.
Migration sans casse : les alias (§ rétro-compat) gardent l'existant fonctionnel.
============================================================================ */
/* ── TOKENS ──────────────────────────────────────────────────────────────── */
:root {
/* Primitives — palette brute (passer par les tokens sémantiques en dessous) */
--sky-100:#e0f2fe; --sky-400:#38bdf8; --sky-500:#0ea5e9; --sky-600:#0284c7; --sky-700:#0369a1;
--emerald-100:#d1fae5; --emerald-500:#10b981; --emerald-600:#059669; --emerald-700:#047857;
--slate-50:#f8fafc; --slate-100:#f1f5f9; --slate-200:#e2e8f0; --slate-300:#cbd5e1;
--slate-400:#94a3b8; --slate-500:#64748b; --slate-700:#334155; --slate-800:#1e293b; --slate-900:#0f172a;
--amber-500:#f59e0b; --amber-600:#d97706; --violet-500:#8b5cf6; --violet-600:#7c3aed;
--red-500:#ef4444; --red-600:#dc2626; --white:#fff;
/* Sémantiques — à utiliser dans les composants (basculent en mode sombre) */
/* Valeurs alignées sur le look actuel « REFONTE 2026 » (source de vérité). */
--color-primary:var(--sky-600); --color-primary-hover:var(--sky-700); --color-primary-soft:var(--sky-100); --color-primary-contrast:var(--white);
--color-accent:var(--emerald-600); --color-accent-hover:var(--emerald-700); --color-accent-soft:var(--emerald-100);
--color-bg:#f6f8fb; --color-bg-app:var(--slate-100); --color-surface:var(--white); --color-surface-2:var(--slate-50);
--color-overlay:rgba(15,23,42,.55);
--color-text:#0f1f33; --color-text-muted:#5b6776; --color-text-subtle:var(--slate-400);
--color-text-invert:var(--white); --color-text-link:var(--sky-600);
--color-border:#e8edf3; --color-border-strong:#d4dde7; --color-focus-ring:var(--sky-400);
--color-success:var(--emerald-500); --color-success-soft:var(--emerald-100);
--color-warning:var(--amber-500); --color-warning-soft:#fef3c7;
--color-danger:var(--red-500); --color-danger-soft:#fee2e2;
--color-info:var(--violet-500); --color-info-soft:#ede9fe;
--gradient-brand:linear-gradient(135deg,var(--sky-600) 0%,var(--emerald-600) 100%);
--gradient-brand-dark:linear-gradient(135deg,var(--sky-600) 0%,var(--emerald-600) 100%);
--gradient-hero:linear-gradient(160deg,#0f172a 0%,#1e293b 40%,#0c2340 100%);
/* Typographie */
--font-display:'Space Grotesk',system-ui,sans-serif;
--font-body:'Inter',system-ui,-apple-system,sans-serif;
--font-mono:'JetBrains Mono','SF Mono',ui-monospace,monospace;
--text-xs:.75rem; --text-sm:.875rem; --text-base:1rem; --text-lg:1.125rem;
--text-xl:clamp(1.25rem,1.1rem + .6vw,1.5rem);
--text-2xl:clamp(1.6rem,1.3rem + 1.2vw,2.25rem);
--text-3xl:clamp(2.2rem,1.6rem + 2.6vw,3.5rem);
--font-regular:400; --font-medium:500; --font-semibold:600; --font-bold:700; --font-black:800;
--leading-tight:1.15; --leading-snug:1.35; --leading-normal:1.6;
/* Espacement (base 4px) · rayons · ombres */
--space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem; --space-5:1.5rem;
--space-6:2rem; --space-8:3rem; --space-10:4rem; --space-12:6rem;
--radius-xs:6px; --radius-sm:10px; --radius-md:14px; --radius-lg:16px; --radius-xl:24px; --radius-full:9999px;
--shadow-sm:0 1px 3px rgba(0,0,0,.08); --shadow:0 4px 16px rgba(0,0,0,.10); --shadow-lg:0 20px 60px rgba(0,0,0,.15);
--shadow-primary:0 4px 20px rgba(14,165,233,.35); --shadow-accent:0 4px 20px rgba(16,185,129,.30);
/* Mouvement · profondeur · layout */
--transition-fast:.15s ease; --transition:.25s ease; --transition-slow:.4s ease; --ease-out:cubic-bezier(.16,1,.3,1);
--z-dropdown:100; --z-sticky:200; --z-overlay:900; --z-modal:1000; --z-toast:1100;
--sidebar-w:240px; --container-max:1200px;
/* Breakpoints (à recopier dans @media) : sm 640 · md 768 · lg 1024 · xl 1280 */
/* Rétro-compat — anciens noms (style.css/dashboard.css), à retirer après migration */
--primary:var(--color-primary); --primary-dark:var(--sky-600); --primary-light:var(--sky-100);
--accent:var(--color-accent); --accent-dark:var(--emerald-600); --accent-light:var(--emerald-100);
--orange:var(--amber-500); --purple:var(--violet-500);
--dark:var(--slate-900); --dark-2:var(--slate-800); --dark-3:var(--slate-700);
--gray:var(--slate-500); --gray-light:var(--slate-400);
--border:var(--color-border); --bg:var(--color-bg);
--gradient:var(--gradient-brand); --gradient-dark:var(--gradient-brand-dark); --radius:var(--radius-lg);
}
@media (prefers-reduced-motion:reduce){ :root{ --transition-fast:0s; --transition:0s; --transition-slow:0s; } }
/* ── COMPOSANTS (préfixe rb-, sans conflit avec l'existant) ──────────────── */
.rb-scope,.rb-scope *{ box-sizing:border-box; }
.rb-scope{ font-family:var(--font-body); font-size:var(--text-base); line-height:var(--leading-normal); color:var(--color-text); }
.rb-h1,.rb-h2,.rb-h3{ font-family:var(--font-display); line-height:var(--leading-tight); color:var(--color-text); margin:0; }
.rb-h1{ font-size:var(--text-3xl); font-weight:var(--font-black); }
.rb-h2{ font-size:var(--text-2xl); font-weight:var(--font-bold); }
.rb-h3{ font-size:var(--text-xl); font-weight:var(--font-semibold); }
.rb-muted{ color:var(--color-text-muted); } .rb-subtle{ color:var(--color-text-subtle); }
.rb-gradient-text{ background:var(--gradient-brand); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; }
/* Boutons */
.rb-btn{ display:inline-flex; align-items:center; justify-content:center; gap:var(--space-2);
font-family:var(--font-body); font-size:var(--text-sm); font-weight:var(--font-semibold); line-height:1;
padding:var(--space-3) var(--space-5); border:1px solid transparent; border-radius:var(--radius-sm);
cursor:pointer; text-decoration:none; white-space:nowrap;
transition:transform var(--transition-fast),box-shadow var(--transition),background-color var(--transition),color var(--transition); }
.rb-btn:active{ transform:translateY(1px); }
.rb-btn:focus-visible{ outline:3px solid var(--color-focus-ring); outline-offset:2px; }
.rb-btn[disabled],.rb-btn.is-loading{ opacity:.6; cursor:not-allowed; pointer-events:none; }
.rb-btn--primary{ background:var(--gradient-brand); color:var(--color-primary-contrast); box-shadow:var(--shadow-primary); }
.rb-btn--primary:hover{ transform:translateY(-2px); box-shadow:0 8px 30px rgba(14,165,233,.45); }
.rb-btn--accent{ background:var(--color-accent); color:var(--color-text-invert); box-shadow:var(--shadow-accent); }
.rb-btn--accent:hover{ transform:translateY(-2px); background:var(--color-accent-hover); }
.rb-btn--outline{ background:transparent; color:var(--color-primary); border-color:var(--color-border-strong); }
.rb-btn--outline:hover{ border-color:var(--color-primary); background:var(--color-primary-soft); }
.rb-btn--ghost{ background:transparent; color:var(--color-text-muted); }
.rb-btn--ghost:hover{ background:var(--color-surface-2); color:var(--color-text); }
.rb-btn--danger{ background:var(--color-danger); color:var(--color-text-invert); }
.rb-btn--danger:hover{ background:var(--red-600); }
.rb-btn--sm{ padding:var(--space-2) var(--space-4); font-size:var(--text-xs); }
.rb-btn--lg{ padding:var(--space-4) var(--space-6); font-size:var(--text-base); }
.rb-btn--block{ display:flex; width:100%; } .rb-btn--icon{ padding:var(--space-3); aspect-ratio:1; }
/* Champs */
.rb-field{ display:flex; flex-direction:column; gap:var(--space-2); margin-bottom:var(--space-4); }
.rb-label{ font-size:var(--text-sm); font-weight:var(--font-medium); color:var(--color-text); }
.rb-hint{ font-size:var(--text-xs); color:var(--color-text-muted); }
.rb-input,.rb-select,.rb-textarea{ width:100%; font-family:var(--font-body); font-size:var(--text-sm); color:var(--color-text);
background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-sm); padding:var(--space-3) var(--space-4);
transition:border-color var(--transition),box-shadow var(--transition); }
.rb-input::placeholder,.rb-textarea::placeholder{ color:var(--color-text-subtle); }
.rb-input:focus,.rb-select:focus,.rb-textarea:focus{ outline:none; border-color:var(--color-primary); box-shadow:0 0 0 3px var(--color-primary-soft); }
.rb-textarea{ min-height:96px; resize:vertical; }
.rb-field.is-error .rb-input,.rb-field.is-error .rb-select,.rb-field.is-error .rb-textarea{ border-color:var(--color-danger); }
.rb-field.is-error .rb-hint{ color:var(--color-danger); }
.rb-check{ display:flex; gap:var(--space-3); align-items:flex-start; font-size:var(--text-sm); color:var(--color-text-muted); cursor:pointer; }
.rb-check input{ margin-top:3px; accent-color:var(--color-primary); width:18px; height:18px; }
/* Cartes · badges */
.rb-card{ background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); padding:var(--space-5); }
.rb-card--hover{ transition:transform var(--transition),box-shadow var(--transition); }
.rb-card--hover:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lg); }
.rb-card__title{ font-family:var(--font-display); font-size:var(--text-lg); font-weight:var(--font-semibold); margin:0 0 var(--space-2); }
.rb-card__body{ color:var(--color-text-muted); font-size:var(--text-sm); }
.rb-badge{ display:inline-flex; align-items:center; gap:var(--space-1); font-size:var(--text-xs); font-weight:var(--font-semibold);
padding:var(--space-1) var(--space-3); border-radius:var(--radius-full); background:var(--color-surface-2); color:var(--color-text-muted); }
.rb-badge--success{ background:var(--color-success-soft); color:var(--emerald-700); }
.rb-badge--warning{ background:var(--color-warning-soft); color:var(--amber-600); }
.rb-badge--danger{ background:var(--color-danger-soft); color:var(--red-600); }
.rb-badge--info{ background:var(--color-info-soft); color:var(--violet-600); }
.rb-badge--primary{ background:var(--color-primary-soft); color:var(--sky-700); }
/* Tableaux */
.rb-table{ width:100%; border-collapse:collapse; font-size:var(--text-sm); }
.rb-table th{ text-align:left; font-weight:var(--font-semibold); color:var(--color-text-muted); background:var(--color-surface-2);
padding:var(--space-3) var(--space-4); border-bottom:1px solid var(--color-border); position:sticky; top:0; }
.rb-table td{ padding:var(--space-3) var(--space-4); border-bottom:1px solid var(--color-border); color:var(--color-text); }
.rb-table tbody tr:hover{ background:var(--color-surface-2); }
/* Toast · modale · skeleton · vide */
.rb-toast-zone{ position:fixed; bottom:var(--space-5); right:var(--space-5); display:flex; flex-direction:column; gap:var(--space-3); z-index:var(--z-toast); }
.rb-toast{ display:flex; align-items:center; gap:var(--space-3); min-width:260px; max-width:380px; background:var(--color-surface);
border:1px solid var(--color-border); border-left:4px solid var(--color-primary); border-radius:var(--radius-sm); box-shadow:var(--shadow-lg);
padding:var(--space-4); font-size:var(--text-sm); color:var(--color-text); animation:rb-in var(--transition) var(--ease-out); }
.rb-toast--success{ border-left-color:var(--color-success); } .rb-toast--warning{ border-left-color:var(--color-warning); } .rb-toast--danger{ border-left-color:var(--color-danger); }
.rb-modal-overlay{ position:fixed; inset:0; background:var(--color-overlay); display:flex; align-items:center; justify-content:center; padding:var(--space-4); z-index:var(--z-modal); }
.rb-modal{ width:100%; max-width:480px; background:var(--color-surface); border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); padding:var(--space-6); animation:rb-in var(--transition) var(--ease-out); }
@keyframes rb-in{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:translateY(0); } }
.rb-skeleton{ background:linear-gradient(90deg,var(--slate-200) 25%,var(--slate-100) 37%,var(--slate-200) 63%); background-size:400% 100%; border-radius:var(--radius-xs); animation:rb-shimmer 1.4s ease infinite; height:1em; }
@keyframes rb-shimmer{ from{ background-position:100% 0; } to{ background-position:0 0; } }
.rb-empty{ text-align:center; padding:var(--space-8) var(--space-4); color:var(--color-text-muted); }
.rb-empty__icon{ font-size:2.5rem; margin-bottom:var(--space-3); opacity:.5; }
/* Utilitaires (minimum vital) */
.rb-stack{ display:flex; flex-direction:column; gap:var(--space-4); }
.rb-row{ display:flex; align-items:center; gap:var(--space-3); } .rb-row--between{ justify-content:space-between; } .rb-wrap{ flex-wrap:wrap; }
.rb-grid{ display:grid; gap:var(--space-5); }
.rb-container{ max-width:var(--container-max); margin-inline:auto; padding-inline:var(--space-5); }
.rb-divider{ height:1px; background:var(--color-border); border:0; margin:var(--space-5) 0; }
.rb-sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@media (min-width:768px){ .rb-grid--2{ grid-template-columns:repeat(2,1fr); } .rb-grid--3{ grid-template-columns:repeat(3,1fr); } .rb-grid--4{ grid-template-columns:repeat(4,1fr); } }