@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap");

/* ==========================================================================
   Charte graphique PAC-CI (v1.0)
   Référence : graphique/charte-graphique.html
   Chargée juste après bootstrap.min.css : style.css et custom.css
   s'appuient sur ces tokens.
   ========================================================================== */
:root {
  /* Fonctionnelles : plein / foncé (texte sur fond clair, survol) / clair (fonds) */
  --ds-blue: #2B6CB5;
  --ds-blue-dark: #1F4E85;
  --ds-blue-light: #EAF1FA;
  --ds-green: #4B9B4B;
  --ds-green-dark: #2E7A31;
  --ds-green-light: #E9F5EA;
  --ds-orange: #E8821E;
  --ds-orange-dark: #B3671A;
  --ds-orange-light: #FDEEDC;
  --ds-red: #E53228;
  --ds-red-dark: #C0473F;
  --ds-red-light: #FCE8E7;

  /* Neutres */
  --ds-nav: #171B20;
  --ds-text: #1B2126;
  --ds-text-2: #3C444C;
  --ds-label: #6B7480;
  --ds-subtle: #8992A3;
  --ds-placeholder: #9AA2AD;
  --ds-border-field: #D3D8DC;
  --ds-border: #E4E7EB;
  --ds-divider: #F4F5F6;
  --ds-bg: #F6F7F8;
  --ds-surface: #FFFFFF;
  --ds-neutral-badge: #EEF1F3;
  --ds-neutral-badge-text: #5C6470;

  /* Typographie */
  --ds-font: "IBM Plex Sans", Helvetica, Arial, sans-serif;
  --ds-mono: "IBM Plex Mono", ui-monospace, monospace;

  /* Rayons */
  --ds-r-sm: 6px;
  --ds-r-field: 7px;
  --ds-r: 8px;
  --ds-r-icon: 9px;
  --ds-r-card: 10px;
  --ds-r-modal: 12px;
  --ds-r-pill: 20px;

  /* Ombres et focus */
  --ds-shadow-flat: 0 1px 2px rgba(23, 27, 32, .04);
  --ds-shadow-pop: 0 8px 24px rgba(23, 27, 32, .10);
  --ds-shadow-modal: 0 24px 60px rgba(0, 0, 0, .18);
  --ds-focus: 0 0 0 3px rgba(43, 108, 181, .18);
  --ds-focus-danger: 0 0 0 3px rgba(229, 50, 40, .15);

  /* Bootstrap 4 */
  --primary: var(--ds-blue);
  --success: var(--ds-green);
  --info: var(--ds-blue);
  --warning: var(--ds-orange);
  --danger: var(--ds-red);
  --dark: var(--ds-nav);
  --font-family-sans-serif: var(--ds-font);
  --font-family-monospace: var(--ds-mono);
}

/* ==============
  Base
===================*/
body {
  font-family: var(--ds-font);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ds-text);
  background: var(--ds-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--ds-font);
  font-weight: 700;
  color: var(--ds-text);
}

h1, .h1 { font-size: 34px; line-height: 1.2; }
h2, .h2 { font-size: 26px; }
h3, .h3 { font-size: 22px; }
h4, .h4 { font-size: 18px; }
h5, .h5 { font-size: 15.5px; }
h6, .h6 { font-size: 13.5px; }

a { color: var(--ds-blue); }
a:hover { color: var(--ds-blue-dark); }

code, kbd, pre, samp { font-family: var(--ds-mono); }
code {
  font-size: 12px;
  color: var(--ds-text-2);
  background: var(--ds-neutral-badge);
  padding: 1px 6px;
  border-radius: 4px;
}

::selection { background: var(--ds-blue-light); color: var(--ds-blue-dark); }

hr { border-top-color: var(--ds-border); }

.small, small { font-size: 12.5px; }

.font-mono { font-family: var(--ds-mono); }

.overline {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--ds-label);
  text-transform: uppercase;
  letter-spacing: .03em;
}

/* ==============
  Logo : nom centré sous le symbole, corps de 30 % de la largeur
  du symbole, écarté de 16 %. Sur fond bleu, pastille blanche obligatoire.
===================*/
.lockup {
  --s: 40px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--s) * .16);
  text-decoration: none;
}

.lockup:hover { text-decoration: none; }

.logo-pad {
  display: inline-flex;
  background: var(--ds-surface);
  border-radius: 10px;
  padding: 4px;
}

.logo-symbol {
  display: block;
  width: var(--s);
  height: var(--s);
}

.wordmark {
  font-family: var(--ds-font);
  font-weight: 700;
  font-size: calc(var(--s) * .3);
  line-height: 1;
  letter-spacing: .02em;
  color: var(--ds-text);
  white-space: nowrap;
}

.wordmark-light { color: #fff; }

/* Barre d'application : symbole sur pastille, nom de la structure,
   séparateur puis nom de l'application, alignés sur une ligne */
.appbar-brand {
  --s: 32px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}

.appbar-brand:hover { text-decoration: none; }

.appbar-brand .logo-pad { padding: 4px; }

.appbar-brand-name {
  font-family: var(--ds-font);
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .02em;
  color: #fff;
  white-space: nowrap;
}

.appbar-brand-app {
  display: inline-flex;
  align-items: center;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1;
  color: rgba(255, 255, 255, .85);
  white-space: nowrap;
}

.appbar-brand-app::before {
  content: "";
  width: 1px;
  height: 14px;
  margin-right: 12px;
  background: rgba(255, 255, 255, .35);
}

.appbar-brand:hover .appbar-brand-app { color: #fff; }

@media (max-width: 420px) {
  .appbar-brand-app { display: none; }
}

/* ==============
  Boutons
===================*/
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: var(--ds-font);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.4;
  padding: 9px 16px;
  border-radius: var(--ds-r);
  border: 1px solid transparent;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.btn-block { display: flex; }

.btn:focus,
.btn.focus { outline: 0; box-shadow: var(--ds-focus) !important; }

.btn-sm { font-size: 12.5px; padding: 6px 12px; border-radius: var(--ds-r-sm); }
.btn-lg { font-size: 14px; font-weight: 700; padding: 11px 18px; border-radius: var(--ds-r); }

.btn.disabled, .btn:disabled { opacity: .55; cursor: not-allowed; }

.btn-rounded { border-radius: var(--ds-r-pill); }

/* ==============
  Badges
===================*/
.badge {
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.35;
  padding: 4px 10px;
  border-radius: var(--ds-r-pill);
}

/* ==============
  Alertes
===================*/
.alert {
  border-radius: var(--ds-r);
  font-size: 13px;
  padding: 11px 14px;
  border: 1px solid transparent;
}

.alert-primary,
.alert-info { background: var(--ds-blue-light); border-color: #C5D8EF; color: var(--ds-blue-dark); }
.alert-success { background: var(--ds-green-light); border-color: #BFDDC1; color: var(--ds-green-dark); }
.alert-warning { background: var(--ds-orange-light); border-color: #F3D2A6; color: #8A5311; }
.alert-danger { background: var(--ds-red-light); border-color: #F3B7B2; color: #B3261E; }
.alert-secondary,
.alert-light,
.alert-dark { background: var(--ds-bg); border-color: var(--ds-border); color: var(--ds-text-2); }
.alert strong { font-weight: 700; }
.alert .close { color: inherit; text-shadow: none; opacity: .6; }

/* ==============
  Formulaires
===================*/
label {
  font-size: 12px;
  font-weight: 600;
  color: var(--ds-text-2);
  margin-bottom: 6px;
}

.form-control,
.custom-select {
  height: 40px;
  padding: 8px 12px;
  font-family: var(--ds-font);
  font-size: 13.5px;
  color: var(--ds-text);
  background-color: var(--ds-surface);
  border: 1px solid var(--ds-border-field);
  border-radius: var(--ds-r-field);
  transition: border-color .15s ease, box-shadow .15s ease;
}

textarea.form-control { height: auto; min-height: 84px; padding: 10px 12px; }

.form-control::placeholder { color: var(--ds-placeholder); opacity: 1; }

.form-control:focus,
.custom-select:focus {
  outline: 0;
  color: var(--ds-text);
  border-color: var(--ds-blue);
  box-shadow: var(--ds-focus);
}

.form-control:disabled,
.form-control[readonly] { background-color: var(--ds-bg); color: var(--ds-text-2); }

.form-control.is-invalid { border-color: var(--ds-red); }
.form-control.is-invalid:focus { box-shadow: var(--ds-focus-danger); }
.form-control.is-valid { border-color: var(--ds-green); }

.form-control-sm { height: 32px; padding: 4px 10px; font-size: 12.5px; border-radius: var(--ds-r-sm); }
.form-control-lg { height: 46px; padding: 4px 10px; font-size: 14px; border-radius: var(--ds-r-field); }

.invalid-feedback { font-size: 11.5px; color: var(--ds-red-dark); }
.valid-feedback { font-size: 11.5px; color: var(--ds-green-dark); }
.form-text { font-size: 12px; color: var(--ds-label); }

.input-group-text {
  background: var(--ds-bg);
  border-color: var(--ds-border-field);
  color: var(--ds-label);
  border-radius: var(--ds-r-field);
}

input[type="checkbox"],
input[type="radio"] { accent-color: var(--ds-blue); }

.custom-control-input:checked ~ .custom-control-label::before {
  border-color: var(--ds-blue);
  background-color: var(--ds-blue);
}

.custom-control-input:focus ~ .custom-control-label::before { box-shadow: var(--ds-focus); }

/* ==============
  Cartes
===================*/
.card {
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-r-card);
  box-shadow: none;
}

.card-header,
.card-footer {
  padding: 14px 22px;
  background: var(--ds-surface);
  border-color: var(--ds-border);
}

.card-header:first-child { border-radius: var(--ds-r-card) var(--ds-r-card) 0 0; }
.card-footer:last-child { border-radius: 0 0 var(--ds-r-card) var(--ds-r-card); }

.card-body { padding: 20px 22px; }

.card-title { font-size: 15.5px; font-weight: 700; }

/* ==============
  Tableaux
===================*/
.table { font-size: 13.5px; color: var(--ds-text); }

.table th,
.table td {
  padding: 11px 16px;
  vertical-align: middle;
  border-top: 1px solid var(--ds-divider);
}

.table thead th {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--ds-label);
  text-transform: uppercase;
  letter-spacing: .03em;
  border-top: 0;
  border-bottom: 1px solid var(--ds-border);
}

.table-hover tbody tr:hover { background: var(--ds-bg); }
.table-striped tbody tr:nth-of-type(odd) { background: var(--ds-bg); }

/* ==============
  Navigation : onglets, pilules, pagination
===================*/
.nav-tabs { border-bottom: 1px solid var(--ds-border); }

.nav-tabs .nav-link {
  border: 0;
  border-bottom: 2px solid transparent;
  font-weight: 600;
  color: var(--ds-label);
}

.nav-tabs .nav-link:hover { color: var(--ds-text); }

.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
  color: var(--ds-blue);
  background: transparent;
  border-bottom-color: var(--ds-blue);
}

.nav-pills .nav-link {
  border-radius: var(--ds-r-sm);
  font-weight: 600;
  color: var(--ds-text-2);
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  background: var(--ds-blue);
  color: #fff;
}

.page-link {
  padding: 7px 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ds-text-2);
  border-color: var(--ds-border);
}

.page-link:hover { color: var(--ds-blue); background: var(--ds-blue-light); border-color: var(--ds-border); }
.page-link:focus { box-shadow: var(--ds-focus); }

.page-item:first-child .page-link { border-radius: var(--ds-r) 0 0 var(--ds-r); }
.page-item:last-child .page-link { border-radius: 0 var(--ds-r) var(--ds-r) 0; }

.page-item.active .page-link { background: var(--ds-blue); border-color: var(--ds-blue); color: #fff; }
.page-item.disabled .page-link { color: var(--ds-placeholder); }

/* ==============
  Menus, modales, info-bulles, progression
===================*/
.dropdown-menu {
  font-size: 13.5px;
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-r-card);
  box-shadow: var(--ds-shadow-pop);
  padding: 6px 0;
}

.dropdown-item { padding: 8px 16px; color: var(--ds-text-2); }

.dropdown-item:hover,
.dropdown-item:focus { background: var(--ds-bg); color: var(--ds-text); }

.dropdown-item.active,
.dropdown-item:active { background: var(--ds-blue-light); color: var(--ds-blue-dark); }

.dropdown-item.text-danger { color: var(--ds-red-dark) !important; }

.dropdown-divider { border-top-color: var(--ds-border); margin: 6px 0; }

.modal-content {
  border: 0;
  border-radius: var(--ds-r-modal);
  box-shadow: var(--ds-shadow-modal);
}

.modal-header,
.modal-footer { padding: 16px 22px; border-color: var(--ds-border); }

.modal-body { padding: 20px 22px; color: var(--ds-text-2); }

.modal-title { font-size: 15.5px; font-weight: 700; }

.modal-backdrop.show { background: var(--ds-nav); opacity: .4; }

.tooltip-inner {
  background: var(--ds-nav);
  font-size: 12px;
  padding: 6px 10px;
  border-radius: var(--ds-r-sm);
}

.progress { height: 8px; background: var(--ds-border); border-radius: var(--ds-r-pill); }
.progress-bar { background: var(--ds-blue); border-radius: var(--ds-r-pill); }

.list-group-item { border-color: var(--ds-border); color: var(--ds-text-2); }
.list-group-item.active { background: var(--ds-blue); border-color: var(--ds-blue); }

/* ==============
  Pastilles d'icône
===================*/
.icon-tile {
  width: 40px;
  height: 40px;
  border-radius: var(--ds-r-icon);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.icon-primary { background: var(--ds-blue-light); color: var(--ds-blue); }
.icon-success { background: var(--ds-green-light); color: #3F8F42; }
.icon-warning { background: var(--ds-orange-light); color: var(--ds-orange-dark); }
.icon-danger { background: var(--ds-red-light); color: var(--ds-red-dark); }