/* ================================================================
   POLYGONE 67 — Feuille de style principale
   Bootstrap 4 + MDI Icons via CDN, thème personnalisé complet
   ================================================================ */

/* ── 1. Dépendances externes ─────────────────────────────────── */
@import url("https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css");
@import url("https://cdn.jsdelivr.net/npm/@mdi/font@5.9.55/css/materialdesignicons.min.css");

/* ── 2. Variables de design (tokens) ─────────────────────────── */
:root {
  /* Palette principale */
  --p67-primary:        #4a6fa5;
  --p67-primary-dark:   #2a4f85;
  --p67-primary-light:  #f0f5ff;
  --p67-primary-border: #d6e3f7;
  --p67-danger:         #c0392b;
  --p67-danger-soft:    #fff5f5;
  --p67-success:        #2e7d32;
  --p67-success-soft:   #e8f5e9;
  --p67-warning:        #e67e22;
  --p67-info:           #0288d1;

  /* Fonds & textes */
  --p67-bg:             #eef1f6;
  --p67-white:          #ffffff;
  --p67-text:           #2d3748;
  --p67-text-muted:     #718096;
  --p67-border:         #dde3ec;

  /* Sidebar */
  --p67-sidebar-bg:     #1a2332;
  --p67-sidebar-text:   #b8c6d8;
  --p67-sidebar-hover:  rgba(255,255,255,0.07);
  --p67-sidebar-active: rgba(74,111,165,0.22);
  --p67-sidebar-width:  240px;

  /* Navbar */
  --p67-navbar-h:       60px;

  /* Typographie */
  --p67-font:           -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --p67-mono:           "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
}

/* ── 3. Reset & base ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  padding: 0;
  margin: 0;
}

body {
  font-family:      var(--p67-font);
  font-size:        0.875rem;
  font-weight:      400;
  line-height:      1.5;
  color:            var(--p67-text);
  background-color: var(--p67-bg);
  -webkit-font-smoothing: antialiased;
}

a {
  color:           var(--p67-primary);
  text-decoration: none;
  cursor:          pointer;
  transition:      color 0.15s ease;
}
a:hover { color: var(--p67-primary-dark); text-decoration: underline; }

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-weight: 600;
  line-height: 1.2;
  color: var(--p67-text);
  margin-bottom: 0.5rem;
}

p { margin-bottom: 0.5rem; }

hr {
  margin: 1rem 0;
  border: 0;
  border-top: 1px solid var(--p67-border);
}

small, .small {
  font-size: 80%;
  font-weight: 400;
}

code {
  font-family: var(--p67-mono);
  font-size:   0.875em;
  color:       #d63384;
  padding:     2px 5px;
  background:  #f8f0f4;
}

pre {
  background: #f0f3f8;
  padding:    1rem;
  font-size:  0.85rem;
  border-left: 3px solid var(--p67-primary);
  overflow: auto;
}

textarea { resize: vertical; }

/* Focus — suppression des contours */
input:focus, select:focus, textarea:focus, button:focus,
a:focus, .btn:focus {
  outline:    none;
  box-shadow: 0 0 0 2px rgba(74, 111, 165, 0.25);
}

/* ── 4. Mise en page principale ──────────────────────────────── */
.container-scroller {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.container-fluid.page-body-wrapper {
  display:    flex;
  flex:       1;
  padding:    0;
  margin-top: var(--p67-navbar-h);
}

.main-panel {
  flex:      1;
  display:   flex;
  flex-direction: column;
  min-height: calc(100vh - var(--p67-navbar-h));
  margin-left: var(--p67-sidebar-width);
  transition: margin-left 0.25s ease;
}

.content-wrapper {
  flex:    1;
  padding: 1.5rem;
}

/* ── 5. Navbar ───────────────────────────────────────────────── */
.navbar {
  position:   fixed;
  top:        0;
  left:       0;
  right:      0;
  z-index:    1030;
  height:     var(--p67-navbar-h);
  background: var(--p67-white);
  border-bottom: 1px solid var(--p67-border);
  box-shadow: 0 1px 6px rgba(0,0,0,0.06);
  display:    flex;
  align-items: center;
  padding:    0;
}

.navbar-brand-wrapper {
  width:           var(--p67-sidebar-width);
  height:          var(--p67-navbar-h);
  background:      var(--p67-sidebar-bg);
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex-shrink:     0;
  border-right:    1px solid rgba(255,255,255,0.06);
}

.navbar-brand-wrapper .navbar-brand img {
  max-height: 36px;
  width:      auto;
}

.navbar-brand-wrapper .brand-logo-mini { display: none; }

.navbar-menu-wrapper {
  flex:            1;
  display:         flex;
  align-items:     center;
  justify-content: flex-end;
  padding:         0 1.25rem;
  height:          var(--p67-navbar-h);
}

/* Bouton hamburger */
.navbar-toggler {
  background:  transparent;
  border:      none;
  padding:     0.25rem 0.5rem;
  color:       var(--p67-text-muted);
  font-size:   1.4rem;
  cursor:      pointer;
  line-height: 1;
  margin-right: 0.75rem;
}
.navbar-toggler:hover { color: var(--p67-primary); }

/* Barre de recherche */
.nav-item.nav-search .input-group {
  border:        1px solid var(--p67-border);
  background:    var(--p67-bg);
  border-radius: 6px;
  overflow:      hidden;
}

.nav-item.nav-search .input-group-text {
  background:  transparent;
  border:      none;
  color:       var(--p67-text-muted);
  padding:     0 0.5rem 0 0.75rem;
}

.nav-item.nav-search .form-control {
  background:   transparent;
  border:       none;
  font-size:    0.85rem;
  padding-left: 0.25rem;
  min-width:    220px;
  box-shadow:   none;
}

.nav-item.nav-search .form-control:focus { box-shadow: none; }

/* Résultats de recherche */
#searchresult {
  position:   absolute;
  top:        calc(var(--p67-navbar-h) - 4px);
  left:       auto;
  right:      0;
  width:      360px;
  background: var(--p67-white);
  border:     1px solid var(--p67-border);
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
  padding:    0.5rem 0;
  z-index:    1050;
}

#searchresult p {
  padding:       0.4rem 1rem;
  margin:        0;
  font-size:     0.82rem;
  border-bottom: 1px solid var(--p67-border);
}
#searchresult p:last-child  { border-bottom: none; }
#searchresult p a:hover     { background: var(--p67-primary-light); }

/* Profil navbar */
.nav-profile {
  position: relative;
}

.nav-profile img {
  width:         36px;
  height:        36px;
  border-radius: 50%;
  object-fit:    cover;
  border:        2px solid var(--p67-primary-border);
  cursor:        pointer;
}

/* Icônes mobiles dans la navbar */
.icone {
  display:     inline-flex;
  align-items: center;
  padding:     0 0.4rem;
}
.icone a { color: var(--p67-text-muted); font-size: 1.3rem; }
.icone a:hover { color: var(--p67-primary); }

/* ── 6. Sidebar ──────────────────────────────────────────────── */
.sidebar {
  position:   fixed;
  top:        var(--p67-navbar-h);
  left:       0;
  width:      var(--p67-sidebar-width);
  height:     calc(100vh - var(--p67-navbar-h));
  background: var(--p67-sidebar-bg);
  overflow-y: auto;
  overflow-x: hidden;
  z-index:    1020;
  transition: width 0.25s ease, transform 0.25s ease;
  border-right: 1px solid rgba(0,0,0,0.2);
}

/* Scrollbar discrète */
.sidebar::-webkit-scrollbar          { width: 4px; }
.sidebar::-webkit-scrollbar-track    { background: transparent; }
.sidebar::-webkit-scrollbar-thumb    { background: rgba(255,255,255,0.15); border-radius: 2px; }

.sidebar .nav { flex-direction: column; padding: 0.75rem 0; }

.sidebar .nav-item { position: relative; }

.sidebar .nav-link {
  display:       flex;
  align-items:   center;
  gap:           10px;
  padding:       0.6rem 1.1rem;
  color:         var(--p67-sidebar-text);
  font-size:     0.845rem;
  font-weight:   400;
  white-space:   nowrap;
  transition:    background 0.15s, color 0.15s;
  border-left:   3px solid transparent;
}

.sidebar .nav-link:hover {
  background:   var(--p67-sidebar-hover);
  color:        #fff;
  text-decoration: none;
}

.sidebar .nav-item.active > .nav-link,
.sidebar .nav-link.active {
  background:   var(--p67-sidebar-active);
  color:        #fff;
  border-left:  3px solid var(--p67-primary);
  font-weight:  500;
}

.sidebar .menu-icon {
  font-size:   1.15rem;
  flex-shrink: 0;
  width:       20px;
  text-align:  center;
  opacity:     0.75;
}

.sidebar .nav-link:hover .menu-icon,
.sidebar .nav-item.active > .nav-link .menu-icon { opacity: 1; }

.sidebar .menu-arrow {
  font-size:   0.7rem;
  margin-left: auto;
  transition:  transform 0.2s;
}

.sidebar .nav-link[aria-expanded="true"] .menu-arrow { transform: rotate(90deg); }

/* Sous-menu */
.sidebar .sub-menu {
  background: rgba(0,0,0,0.15);
  padding:    0.25rem 0;
}

.sidebar .sub-menu .nav-link {
  padding-left: 2.8rem;
  font-size:    0.82rem;
  border-left:  3px solid transparent;
}

.sidebar .sub-menu .nav-link:hover  { background: rgba(255,255,255,0.05); }
.sidebar .sub-menu .nav-link.active { border-left-color: var(--p67-primary); }

/* ── 7. Cards (pas de border-radius) ────────────────────────── */
.card {
  background:    var(--p67-white);
  border:        1px solid var(--p67-border);
  border-radius: 0;
  box-shadow:    0 1px 4px rgba(0,0,0,0.05);
  margin-bottom: 1.25rem;
}

.card-header {
  background:    #f7f9fc;
  border-bottom: 1px solid var(--p67-border);
  padding:       0.85rem 1.25rem;
  font-weight:   600;
  font-size:     0.875rem;
  color:         var(--p67-text);
}

.card-body {
  padding: 1.25rem;
}

.card-footer {
  background:  #f7f9fc;
  border-top:  1px solid var(--p67-border);
  padding:     0.75rem 1.25rem;
}

.card-title {
  font-size:   1rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.card-subtitle {
  font-size:   0.82rem;
  color:       var(--p67-text-muted);
  margin-top:  -0.25rem;
  margin-bottom: 0.75rem;
}

/* ── 8. Barre d'actions (boutons en haut de page) ────────────── */
.content-wrapper > .row:first-child > div {
  display:      flex;
  flex-wrap:    wrap;
  align-items:  center;
  gap:          8px;
  padding:      10px 14px;
  margin-bottom: 16px;
  background:   var(--p67-white);
  border:       1px solid var(--p67-border);
  border-top:   3px solid var(--p67-primary);
  box-shadow:   0 1px 4px rgba(0,0,0,0.05);
}

.content-wrapper > .row:first-child > div a { text-decoration: none; }

/* ── 9. Boutons ──────────────────────────────────────────────── */
.btn {
  display:       inline-flex;
  align-items:   center;
  gap:           5px;
  padding:       0.38rem 0.9rem;
  font-size:     0.83rem;
  font-weight:   500;
  line-height:   1.5;
  border:        1.5px solid transparent;
  border-radius: 6px;
  cursor:        pointer;
  transition:    background 0.15s, color 0.15s, border-color 0.15s, transform 0.12s, box-shadow 0.12s;
  box-shadow:    0 1px 2px rgba(0,0,0,0.06);
  white-space:   nowrap;
  text-decoration: none;
}

.btn:hover  { transform: translateY(-1px); box-shadow: 0 3px 8px rgba(0,0,0,0.1); }
.btn:active { transform: translateY(0);    box-shadow: 0 1px 2px rgba(0,0,0,0.06); }

.btn .mdi { font-size: 1rem; line-height: 1; }

.btn-sm { padding: 0.25rem 0.65rem; font-size: 0.78rem; }
.btn-lg { padding: 0.55rem 1.2rem;  font-size: 0.95rem; }

/* Primary */
.btn-primary {
  background:   var(--p67-primary);
  border-color: var(--p67-primary);
  color:        #fff;
}
.btn-primary:hover {
  background:   var(--p67-primary-dark);
  border-color: var(--p67-primary-dark);
  color:        #fff;
}

/* Outline primary */
.btn-outline-primary {
  color:        var(--p67-primary);
  border-color: var(--p67-primary-border);
  background:   var(--p67-primary-light);
}
.btn-outline-primary:hover {
  background:   var(--p67-primary);
  border-color: var(--p67-primary);
  color:        #fff;
}

/* Danger (pour Supprimer) — détecté par icône ou 1er bouton de la barre */
.content-wrapper > .row:first-child > div a:first-child .btn,
.btn-outline-danger {
  color:        var(--p67-danger);
  border-color: #f5b8b5;
  background:   var(--p67-danger-soft);
}
.content-wrapper > .row:first-child > div a:first-child .btn:hover,
.btn-outline-danger:hover {
  background:   var(--p67-danger);
  border-color: var(--p67-danger);
  color:        #fff;
}

/* Boutons neutres (2e, 3e...) */
.content-wrapper > .row:first-child > div a:not(:first-child) .btn.btn-outline-primary {
  color:        var(--p67-primary);
  border-color: var(--p67-primary-border);
  background:   var(--p67-primary-light);
}
.content-wrapper > .row:first-child > div a:not(:first-child) .btn.btn-outline-primary:hover {
  background:   var(--p67-primary);
  border-color: var(--p67-primary);
  color:        #fff;
}

/* Success */
.btn-success {
  background: var(--p67-success);
  border-color: var(--p67-success);
  color: #fff;
}
.btn-success:hover { background: #1b5e20; border-color: #1b5e20; color: #fff; }

.btn-outline-success {
  color: var(--p67-success);
  border-color: #a5d6a7;
  background: var(--p67-success-soft);
}
.btn-outline-success:hover { background: var(--p67-success); border-color: var(--p67-success); color: #fff; }

/* Danger solid */
.btn-danger {
  background: var(--p67-danger);
  border-color: var(--p67-danger);
  color: #fff;
}
.btn-danger:hover { background: #a93226; border-color: #a93226; color: #fff; }

/* Secondary */
.btn-secondary {
  background: #6c757d;
  border-color: #6c757d;
  color: #fff;
}
.btn-secondary:hover { background: #545b62; border-color: #545b62; color: #fff; }

.btn-outline-secondary {
  color: #6c757d;
  border-color: #ced4da;
  background: #f8f9fa;
}
.btn-outline-secondary:hover { background: #6c757d; border-color: #6c757d; color: #fff; }

/* Info */
.btn-info {
  background: var(--p67-info);
  border-color: var(--p67-info);
  color: #fff;
}

/* Warning */
.btn-warning {
  background: var(--p67-warning);
  border-color: var(--p67-warning);
  color: #fff;
}

/* Disabled */
.btn:disabled, .btn.disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

/* Bouton enregistrer */
#enregistrer {
  background:   var(--p67-primary);
  border-color: var(--p67-primary);
  color:        #fff;
}
#enregistrer:hover {
  background:   var(--p67-primary-dark);
  border-color: var(--p67-primary-dark);
}

/* ── 10. Cartouche d'informations ────────────────────────────── */
.border-top.grid-margin.stretch-card {
  border-top:    none !important;
  margin-bottom: 16px;
}

.border-top.grid-margin.stretch-card > .d-flex {
  display:      flex !important;
  align-items:  stretch;
  background:   linear-gradient(135deg, #f0f5ff 0%, #fafbff 100%);
  border:       1px solid var(--p67-primary-border);
  border-left:  4px solid var(--p67-primary);
  border-radius: 0;
  overflow:     hidden;
  box-shadow:   0 1px 4px rgba(74,111,165,0.08);
}

.border-top.grid-margin.stretch-card > .d-flex::before {
  content:         "\F2DA";
  font-family:     "Material Design Icons";
  display:         flex;
  align-items:     center;
  justify-content: center;
  min-width:       44px;
  background:      var(--p67-primary);
  color:           #fff;
  font-size:       1.2rem;
  flex-shrink:     0;
}

.border-top.grid-margin.stretch-card > .d-flex .ml-4 {
  padding:  12px 18px !important;
  margin:   0 !important;
  display:  flex;
  flex-wrap: wrap;
  gap:      4px 28px;
  align-items: center;
  font-size: 0.83rem;
  color:    #4a5568;
  line-height: 1.6;
  width:    100%;
}

.border-top.grid-margin.stretch-card .ml-4 a {
  color:       var(--p67-primary);
  font-weight: 600;
}
.border-top.grid-margin.stretch-card .ml-4 a:hover {
  color: var(--p67-primary-dark);
}

.border-top.grid-margin.stretch-card .ml-4 label {
  color:  #4a5568;
  cursor: default;
}

/* ── 11. Formulaires ────────────────────────────────────────── */
.form-control,
.asColorPicker-input,
select.form-control {
  display:          block;
  width:            100%;
  padding:          0.4rem 0.75rem;
  font-size:        0.875rem;
  line-height:      1.5;
  color:            var(--p67-text);
  background-color: var(--p67-white);
  border:           1px solid #ced4da;
  border-radius:    4px;
  transition:       border-color 0.15s ease, box-shadow 0.15s ease;
  appearance:       none;
}

.form-control:focus, select.form-control:focus {
  border-color: var(--p67-primary);
  box-shadow:   0 0 0 3px rgba(74,111,165,0.15);
  outline:      none;
}

.form-control:disabled,
.form-control[readonly] {
  background-color: #f0f3f8;
  color:            var(--p67-text-muted);
  cursor:           not-allowed;
}

.form-control-lg { font-size: 0.9rem;  padding: 0.5rem 1rem; }
.form-control-sm { font-size: 0.8rem;  padding: 0.25rem 0.5rem; }

.form-group       { margin-bottom: 1rem; }
.col-form-label   { padding-top: 0.5rem; font-weight: 500; font-size: 0.875rem; color: #4a5568; }

.input-group-text {
  background:    #f0f3f8;
  border:        1px solid #ced4da;
  border-radius: 4px;
  color:         var(--p67-text-muted);
  font-size:     0.875rem;
  padding:       0.4rem 0.75rem;
}

/* Checkboxes & radios */
.form-check        { padding-left: 1.5rem; margin-bottom: 0.25rem; }
.form-check-label  { cursor: pointer; font-size: 0.875rem; }
.form-check-input  { margin-top: 0.2rem; margin-left: -1.5rem; cursor: pointer; }
.form-inline       { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }

/* Textarea */
textarea.form-control { min-height: 100px; }

/* ── 12. Tables ─────────────────────────────────────────────── */
.table, .jsgrid .jsgrid-table {
  width:         100%;
  margin-bottom: 1rem;
  color:         var(--p67-text);
  font-size:     0.875rem;
}

.table th, .table td,
.jsgrid .jsgrid-table th, .jsgrid .jsgrid-table td {
  padding:        0.6rem 0.9rem;
  vertical-align: middle;
  border-top:     1px solid var(--p67-border);
}

.table thead th, .jsgrid .jsgrid-table thead th {
  vertical-align: bottom;
  border-bottom:  2px solid var(--p67-primary);
  background:     #f7f9fc;
  font-weight:    600;
  font-size:      0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color:          var(--p67-text-muted);
}

.table-striped tbody tr:nth-of-type(odd) { background: #fafbfd; }

.table-hover tbody tr {
  transition: background 0.1s;
}
.table-hover tbody tr:hover { background: var(--p67-primary-light); }

.table-bordered {
  border: 1px solid var(--p67-border);
}
.table-bordered th, .table-bordered td {
  border: 1px solid var(--p67-border);
}

.table-responsive {
  display:                  block;
  width:                    100%;
  overflow-x:               auto;
  -webkit-overflow-scrolling: touch;
}

/* ── 13. Badges ─────────────────────────────────────────────── */
.badge {
  display:       inline-block;
  padding:       0.2em 0.5em;
  font-size:     0.72rem;
  font-weight:   600;
  line-height:   1;
  text-align:    center;
  white-space:   nowrap;
  border-radius: 4px;
}

.badge-primary   { background: var(--p67-primary); color: #fff; }
.badge-success   { background: var(--p67-success);  color: #fff; }
.badge-danger    { background: var(--p67-danger);   color: #fff; }
.badge-warning   { background: var(--p67-warning);  color: #fff; }
.badge-info      { background: var(--p67-info);     color: #fff; }
.badge-secondary { background: #6c757d;             color: #fff; }
.badge-light     { background: #e9ecef;             color: var(--p67-text); }
.badge-dark      { background: #343a40;             color: #fff; }
.badge-pill      { border-radius: 50rem; }

/* Badges outline */
.badge-outline-primary { color: var(--p67-primary); border: 1px solid var(--p67-primary); }
.badge-outline-danger  { color: var(--p67-danger);  border: 1px solid var(--p67-danger);  }
.badge-outline-success { color: var(--p67-success); border: 1px solid var(--p67-success); }

/* ── 14. Alertes ────────────────────────────────────────────── */
.alert {
  padding:       0.85rem 1.1rem;
  margin-bottom: 1rem;
  font-size:     0.875rem;
  border:        1px solid transparent;
  border-left-width: 4px;
  border-radius: 0;
}

.alert i { font-size: 1.1rem; margin-right: 0.75rem; vertical-align: middle; }

.alert-primary   { color: #1a3a5c; background: #e8f0fb; border-color: var(--p67-primary); }
.alert-success   { color: #1b5e20; background: #e8f5e9; border-color: var(--p67-success); }
.alert-danger    { color: #7f0000; background: #ffebee; border-color: var(--p67-danger);  }
.alert-warning   { color: #7c4200; background: #fff3e0; border-color: var(--p67-warning); }
.alert-info      { color: #01579b; background: #e1f5fe; border-color: var(--p67-info);    }

/* ── 15. Dropdowns ──────────────────────────────────────────── */
.dropdown-menu {
  min-width:     160px;
  font-size:     0.85rem;
  background:    var(--p67-white);
  border:        1px solid var(--p67-border);
  border-radius: 4px;
  box-shadow:    0 4px 16px rgba(0,0,0,0.1);
  padding:       0.35rem 0;
  animation:     dropdownAnimation 0.15s ease;
}

@keyframes dropdownAnimation {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.dropdown-item {
  display:    flex;
  align-items: center;
  gap:        8px;
  padding:    0.45rem 1rem;
  color:      var(--p67-text);
  font-size:  0.85rem;
  transition: background 0.1s;
}

.dropdown-item:hover {
  background:  var(--p67-primary-light);
  color:       var(--p67-primary);
  text-decoration: none;
}

.dropdown-item i { font-size: 1rem; }
.dropdown-divider { border-top: 1px solid var(--p67-border); margin: 0.25rem 0; }

/* ── 16. Modales ─────────────────────────────────────────────  */
.modal-content {
  border:        1px solid var(--p67-border);
  border-radius: 0;
  box-shadow:    0 8px 32px rgba(0,0,0,0.15);
}

.modal-header {
  background:    #f7f9fc;
  border-bottom: 1px solid var(--p67-border);
  padding:       1rem 1.25rem;
}

.modal-title { font-size: 1rem; font-weight: 600; }

.modal-body   { padding: 1.25rem; }
.modal-footer {
  background:  #f7f9fc;
  border-top:  1px solid var(--p67-border);
  padding:     0.75rem 1.25rem;
}

/* ── 17. Pagination ──────────────────────────────────────────── */
.pagination { display: flex; list-style: none; padding: 0; margin: 1rem 0 0; gap: 3px; }

.page-link {
  display:        flex;
  align-items:    center;
  justify-content: center;
  min-width:      34px;
  height:         34px;
  padding:        0 0.6rem;
  font-size:      0.85rem;
  color:          var(--p67-primary);
  background:     var(--p67-white);
  border:         1px solid var(--p67-border);
  border-radius:  4px;
  transition:     background 0.15s, color 0.15s;
}

.page-link:hover     { background: var(--p67-primary-light); color: var(--p67-primary); text-decoration: none; }
.page-item.active .page-link { background: var(--p67-primary); border-color: var(--p67-primary); color: #fff; }
.page-item.disabled .page-link { color: #adb5bd; cursor: not-allowed; }

/* ── 18. Progress bars ───────────────────────────────────────── */
.progress {
  height:        8px;
  background:    #e9ecef;
  border-radius: 0;
  overflow:      hidden;
}

.progress-bar {
  background:   var(--p67-primary);
  transition:   width 0.5s ease;
}

.progress-bar-striped {
  background-image: linear-gradient(
    45deg,
    rgba(255,255,255,.12) 25%, transparent 25%,
    transparent 50%, rgba(255,255,255,.12) 50%,
    rgba(255,255,255,.12) 75%, transparent 75%
  );
  background-size: 16px 16px;
}

/* ── 19. Breadcrumb ──────────────────────────────────────────── */
.breadcrumb {
  background:    transparent;
  padding:       0.5rem 0;
  margin-bottom: 1rem;
  font-size:     0.82rem;
}

.breadcrumb-item + .breadcrumb-item::before {
  content: "›";
  color:   var(--p67-text-muted);
}

.breadcrumb-item.active { color: var(--p67-text-muted); }

/* ── 20. Toast (notifications) ───────────────────────────────── */
.jq-toast-wrap { z-index: 9999 !important; }

.jq-toast-single {
  background:    var(--p67-white) !important;
  color:         var(--p67-text) !important;
  border-left:   4px solid var(--p67-primary) !important;
  border-radius: 0 !important;
  box-shadow:    0 4px 16px rgba(0,0,0,0.1) !important;
  font-size:     0.875rem !important;
  padding:       0.75rem 1rem !important;
}

/* ── 21. Footer ─────────────────────────────────────────────── */
.footer {
  padding:     12px 1.5rem;
  background:  var(--p67-white);
  border-top:  1px solid var(--p67-border);
  font-size:   0.78rem;
  color:       var(--p67-text-muted);
}

.footer a { color: var(--p67-primary); font-size: inherit; }

/* ── 22. Utilitaires template ───────────────────────────────── */
.grid-margin { margin-bottom: 1.25rem; }

.stretch-card {
  display:        flex;
  align-items:    stretch;
  justify-content: stretch;
}

.stretch-card > .card {
  width:     100%;
  min-width: 100%;
}

.flex-grow { flex-grow: 1; }

/* Couleurs de texte */
.text-primary   { color: var(--p67-primary) !important; }
.text-success   { color: var(--p67-success) !important; }
.text-danger    { color: var(--p67-danger)  !important; }
.text-warning   { color: var(--p67-warning) !important; }
.text-info      { color: var(--p67-info)    !important; }
.text-muted     { color: var(--p67-text-muted) !important; }
.text-dark      { color: var(--p67-text) !important; }
.text-white     { color: #fff !important; }
.text-gray      { color: #8c8c8c; }
.text-small     { font-size: 0.78rem; }
.tx-10          { font-size: 10px; }
.tx-11          { font-size: 11px; }
.tx-12          { font-size: 12px; }
.tx-13          { font-size: 13px; }

/* Couleurs de fond */
.bg-primary      { background: var(--p67-primary) !important; color: #fff !important; }
.bg-success      { background: var(--p67-success) !important; color: #fff !important; }
.bg-danger       { background: var(--p67-danger)  !important; color: #fff !important; }
.bg-warning      { background: var(--p67-warning) !important; color: #fff !important; }
.bg-info         { background: var(--p67-info)    !important; color: #fff !important; }
.bg-white        { background: #fff !important; }
.bg-light        { background: #f8f9fa !important; }
.bg-dark         { background: #343a40 !important; color: #fff !important; }
.bg-gray-lighter { background: #f0f3f8 !important; }

/* Gradients */
.bg-gradient-primary { background: linear-gradient(135deg, #4a6fa5, #2a4f85); }
.bg-gradient-success { background: linear-gradient(135deg, #43a047, #1b5e20); }
.bg-gradient-danger  { background: linear-gradient(135deg, #e53935, #b71c1c); }
.bg-gradient-info    { background: linear-gradient(135deg, #039be5, #01579b); }
.bg-gradient-warning { background: linear-gradient(135deg, #fb8c00, #e65100); }

/* Divers utilitaires */
.cursor-pointer  { cursor: pointer; }
.font-weight-medium { font-weight: 500; }
.font-weight-black  { font-weight: 900; }
.dashed-divider  { width: 100%; height: 1px; border-top: 1px dashed var(--p67-border); }
.shadow-sm       { box-shadow: 0 1px 4px rgba(0,0,0,.06) !important; }
.shadow          { box-shadow: 0 2px 10px rgba(0,0,0,.1) !important; }

/* Images */
.img-xs  { width: 36px;  height: 36px; }
.img-sm  { width: 43px;  height: 43px; }
.img-mi  { width: 64px;  height: 64px; }
.img-lg  { width: 92px;  height: 92px; }
.img-fluid { max-width: 100%; height: auto; }

/* Blockquote */
.blockquote {
  padding:    1rem 1.25rem;
  border-left: 4px solid var(--p67-primary);
  background: var(--p67-primary-light);
  font-size:  0.95rem;
  margin:     1rem 0;
}

/* ── 23. Icônes mobiles — navbar (petits écrans) ─────────────── */
@media (max-width: 991.98px) {
  .sidebar {
    transform:    translateX(-100%);
    z-index:      1040;
  }

  .sidebar.sidebar-offcanvas-open { transform: translateX(0); }

  .main-panel { margin-left: 0; }
}

/* ── 24. Responsive ─────────────────────────────────────────── */
@media (max-width: 767px) {
  .content-wrapper { padding: 1rem; }

  .content-wrapper > .row:first-child > div {
    flex-direction: column;
    align-items:    flex-start;
  }

  .content-wrapper > .row:first-child > div .btn {
    width:          100%;
    justify-content: center;
  }

  .border-top.grid-margin.stretch-card > .d-flex::before {
    min-width:  36px;
    font-size:  1rem;
  }

  .navbar-brand-wrapper { width: var(--p67-navbar-h); }
}

@media (min-width: 576px) {
  .grid-margin-sm   { margin-bottom: 1.25rem; }
  .grid-margin-sm-0 { margin-bottom: 0; }
}
@media (min-width: 768px) {
  .grid-margin-md   { margin-bottom: 1.25rem; }
  .grid-margin-md-0 { margin-bottom: 0; }
}
@media (min-width: 992px) {
  .grid-margin-lg   { margin-bottom: 1.25rem; }
  .grid-margin-lg-0 { margin-bottom: 0; }
}

/* ── 25. jQuery UI datepicker ───────────────────────────────── */
.ui-datepicker {
  background:    var(--p67-white);
  border:        1px solid var(--p67-border);
  border-radius: 0;
  box-shadow:    0 4px 16px rgba(0,0,0,0.12);
  padding:       0.5rem;
  font-size:     0.85rem;
  font-family:   var(--p67-font);
}

.ui-datepicker-header {
  background: var(--p67-primary);
  color:      #fff;
  padding:    0.5rem;
  font-weight: 600;
}

.ui-datepicker-prev, .ui-datepicker-next {
  cursor:  pointer;
  padding: 0.25rem 0.5rem;
  border:  none;
  background: transparent;
  color:   rgba(255,255,255,0.8);
}

.ui-datepicker-prev:hover, .ui-datepicker-next:hover { color: #fff; }

.ui-datepicker td span, .ui-datepicker td a {
  display:      block;
  padding:      0.3rem;
  text-align:   center;
  border-radius: 3px;
  text-decoration: none;
  color:        var(--p67-text);
}

.ui-datepicker td a:hover { background: var(--p67-primary-light); color: var(--p67-primary); }

.ui-datepicker td.ui-datepicker-today a { background: var(--p67-primary-light); color: var(--p67-primary); font-weight: 600; }
.ui-state-active, .ui-datepicker td.ui-datepicker-current-day a {
  background: var(--p67-primary) !important;
  color: #fff !important;
}

/* ── 26. Autocomplete ────────────────────────────────────────── */
.ui-autocomplete {
  background:  var(--p67-white);
  border:      1px solid var(--p67-border);
  border-radius: 0;
  box-shadow:  0 4px 12px rgba(0,0,0,0.1);
  font-size:   0.85rem;
  padding:     0.25rem 0;
  max-height:  250px;
  overflow-y:  auto;
}

.ui-menu-item { padding: 0; }
.ui-menu-item-wrapper {
  display: block;
  padding: 0.4rem 0.85rem;
  color:   var(--p67-text);
  cursor:  pointer;
}
.ui-menu-item-wrapper.ui-state-active {
  background: var(--p67-primary-light);
  color:      var(--p67-primary);
}

/* ── 27. Impressions ─────────────────────────────────────────── */
@media print {
  .navbar, .sidebar, .footer { display: none !important; }
  .main-panel { margin-left: 0 !important; }
  .content-wrapper { padding: 0 !important; }
  .card { box-shadow: none !important; border: 1px solid #ddd !important; }
  body { background: #fff !important; }
}

/* ── 28. Accordion ───────────────────────────────────────────── */
.accordion .card             { margin-bottom: 0.5rem; box-shadow: none; border: 1px solid var(--p67-border); border-radius: 0; }
.accordion .card-header      { background: #f7f9fc; border: none; padding: 1rem 1.25rem; }
.accordion .card-header a    { color: var(--p67-text); text-decoration: none; display: block; font-size: 0.875rem; font-weight: 500; }
.accordion .card-header a[aria-expanded="true"] { color: var(--p67-primary); }

/* ── 29. Listes preview ──────────────────────────────────────── */
.preview-list .preview-item {
  display:       flex;
  align-items:   flex-start;
  padding:       0.75rem;
  border-bottom: 1px solid var(--p67-border);
  gap:           0.75rem;
}

.preview-list .preview-item:last-child { border-bottom: none; }

.preview-list .preview-item .preview-thumbnail {
  width:        40px;
  height:       40px;
  flex-shrink:  0;
}

.preview-list .preview-item .preview-thumbnail img {
  width:        100%;
  height:       100%;
  object-fit:   cover;
  border-radius: 50%;
}

.preview-list .preview-item .preview-item-content p { margin: 0; font-size: 0.82rem; }
.preview-list .preview-item .preview-item-content .content-category { color: var(--p67-text-muted); }

/* ── 30. resaInfos (icône infos avion) ───────────────────────── */
.resaInfos a { color: var(--p67-text-muted); font-size: 1.25rem; }
.resaInfos a:hover { color: var(--p67-primary); }

/* ── 31. Annulation de box-shadow par défaut du template ─────── */
a, a:active, a:focus, a:hover, a:visited,
button, button:active, button:hover, button:visited,
input, input:active, input:focus, input:hover,
select, select:active, select:focus,
textarea, textarea:active, textarea:focus, textarea:hover,
div {
  -webkit-box-shadow: none;
  -moz-box-shadow:    none;
}