/* ==========================================================================
   OrnaSystem.Catalogue - thème clair, aéré, arrondi (même charte graphique
   qu'Ornagora : verts du logo Orna + blanc/gris/bleu OrnaStyle ; thème sombre
   automatique selon le navigateur). Bootstrap 5 reste chargé (grille, formulaires,
   administration) ; ses variables sont alignées sur ce thème en bas de fichier.
   ========================================================================== */

:root {
  /* Verts du logo */
  --vert-900: #2f4d24;
  --vert-700: #487537;
  --vert-600: #5a8f45;
  --vert-500: #73bc42;
  --vert-100: #e4f0da;
  --vert-50:  #f3f8ee;

  /* Bleu OrnaStyle (accent secondaire : focus) */
  --bleu-600: #1883d7;
  --bleu-500: #009de0;
  --bleu-50:  #eaf4fc;

  /* Neutres */
  --encre:    #1f2522;
  --texte:    #394039;
  --discret:  #68706b;
  --bordure:  #e2e5e0;
  --bordure-forte: #d0d2d6;
  --fond:     #f8f9f6;
  --carte:    #ffffff;
  --survol:   #f1f4ee;

  --r-s: 8px;
  --r-m: 14px;
  --r-l: 22px;
  --ombre-s: 0 1px 2px rgba(31, 37, 34, .05);
  --ombre-m: 0 1px 2px rgba(31, 37, 34, .04), 0 8px 24px rgba(31, 37, 34, .07);
  --police-ui: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --encre: #eef2ec;  --texte: #cfd6cd;  --discret: #98a29a;
    --bordure: #2b332d;  --bordure-forte: #3a443d;
    --fond: #141815;  --carte: #1b211d;  --survol: #232b25;
    --vert-700: #8fd05f;  --vert-600: #7cc24d;  --vert-100: #243a1c;  --vert-50: #1c2a17;
    --bleu-600: #52b0f0;  --bleu-50: #16283a;
    --ombre-m: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.35);
  }
}

html { font-size: 15px; position: relative; min-height: 100%; }
@media (min-width: 768px) { html { font-size: 16px; } }
body { margin-bottom: 60px; background: var(--fond); color: var(--texte); font-family: var(--police-ui); }
h1, h2, h3, h4, h5, h6 { color: var(--encre); letter-spacing: -.02em; }

/* ==========================================================================
   Compatibilité Bootstrap
   ========================================================================== */
:root {
  --bs-body-bg: var(--fond);
  --bs-body-color: var(--texte);
  --bs-body-font-family: var(--police-ui);
  --bs-border-color: var(--bordure-forte);
  --bs-link-color: var(--vert-700);
  --bs-link-hover-color: var(--vert-900);
  --bs-primary: var(--vert-700);
  --bs-primary-rgb: 72, 117, 55;
  --bs-border-radius: 12px;
  --bs-border-radius-lg: 18px;
}
@media (prefers-color-scheme: dark) { :root { --bs-link-hover-color: #a3e07a; } }
.text-muted { color: var(--discret) !important; }
.text-danger { color: #c0392b !important; }

.form-control, .form-select {
  border-radius: 12px; border-color: var(--bordure-forte); background-color: var(--carte); color: var(--encre);
  padding: .6rem 1rem; transition: border-color .15s, box-shadow .15s;
}
.form-control:focus, .form-select:focus, .form-check-input:focus {
  border-color: var(--bleu-600); box-shadow: 0 0 0 4px color-mix(in srgb, var(--bleu-600) 16%, transparent);
  background-color: var(--carte); color: var(--encre);
}
.btn { border-radius: 999px; font-weight: 600; padding: .55rem 1.3rem; }
.btn-sm { padding: .3rem .85rem; font-size: .875rem; }
.btn-primary { --bs-btn-bg: var(--vert-700); --bs-btn-border-color: var(--vert-700); --bs-btn-hover-bg: var(--vert-900); --bs-btn-hover-border-color: var(--vert-900); --bs-btn-active-bg: var(--vert-900); --bs-btn-active-border-color: var(--vert-900); --bs-btn-disabled-bg: var(--vert-700); --bs-btn-disabled-border-color: var(--vert-700); }
.btn-outline-primary { --bs-btn-color: var(--vert-700); --bs-btn-border-color: var(--vert-700); --bs-btn-hover-bg: var(--vert-700); --bs-btn-hover-border-color: var(--vert-700); --bs-btn-active-bg: var(--vert-700); }
.btn-outline-secondary { --bs-btn-color: var(--texte); --bs-btn-border-color: var(--bordure-forte); --bs-btn-hover-bg: var(--survol); --bs-btn-hover-color: var(--encre); --bs-btn-hover-border-color: var(--bordure-forte); }
.btn:focus-visible, .btn:active:focus { box-shadow: 0 0 0 4px color-mix(in srgb, var(--bleu-600) 28%, transparent); }
@media (prefers-color-scheme: dark) { .btn-primary { --bs-btn-color: #102008; --bs-btn-hover-color: #102008; --bs-btn-hover-bg: #a3e07a; --bs-btn-hover-border-color: #a3e07a; } }

.alert { border-radius: var(--r-m); }
.card { border-radius: var(--r-m); border-color: var(--bordure); background: var(--carte); box-shadow: var(--ombre-s); transition: box-shadow .15s, transform .15s; }
a.card:hover { box-shadow: var(--ombre-m); transform: translateY(-1px); }
.table { --bs-table-bg: transparent; --bs-table-color: var(--texte); --bs-table-border-color: var(--bordure); }
.table > thead th { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--discret); font-weight: 600; }
.badge { border-radius: 999px; }
hr { border-color: var(--bordure); opacity: 1; }
.nav-tabs { --bs-nav-tabs-link-active-bg: var(--carte); --bs-nav-tabs-border-color: var(--bordure); --bs-nav-tabs-link-active-border-color: var(--bordure) var(--bordure) var(--carte); --bs-nav-link-color: var(--texte); --bs-nav-link-hover-color: var(--vert-700); }

/* Barre de navigation */
.navbar-orna { background: var(--carte); border-bottom: 1px solid var(--bordure); }
.navbar-orna .navbar-brand { font-weight: 700; color: var(--encre); letter-spacing: -.02em; }
.navbar-orna .nav-link { color: var(--texte); font-weight: 500; border-radius: 999px; padding: .45rem 1rem; }
.navbar-orna .nav-link:hover { background: var(--survol); }
.navbar-orna .btn-link { text-decoration: none; }

.footer { position: absolute; bottom: 0; width: 100%; white-space: nowrap; line-height: 60px; border-top: 1px solid var(--bordure); }