/* assets/styles/design-system.css — tokens + socle typo (Phase 0). Importée après styles.css. */
:root {
  --pp-canvas: #f6f8fa;
  --pp-surface: #ffffff;
  --pp-border: #d0d7de;
  --pp-border-muted: #eaeef2;
  --pp-text: #1f2328;
  --pp-text-secondary: #656d76;
  --pp-text-muted: #8c959f;

  --pp-brand: #7298bf;           /* couleur logo — identité */
  --pp-accent: #3a6ea5;          /* action accessible AA 5.31:1 */
  --pp-accent-hover: #34618f;    /* hover 6.46:1 */
  --pp-success: #1a7f37;
  --pp-warning: #9a6700;
  --pp-danger: #cf222e;
  --pp-info: #3a6ea5;
  --pp-success-bg: #dafbe1;
  --pp-warning-bg: #fff8c5;
  --pp-danger-bg: #ffebe9;
  --pp-info-bg: #ddf4ff;

  --pp-sp-1: 4px;
  --pp-sp-2: 8px;
  --pp-sp-3: 12px;
  --pp-sp-4: 16px;
  --pp-sp-5: 24px;
  --pp-sp-6: 32px;
  --pp-radius-sm: 4px;
  --pp-radius: 6px;
  --pp-radius-lg: 8px;

  --pp-shadow-sm: 0 1px 0 rgba(27, 31, 36, .04);
  --pp-shadow: 0 1px 3px rgba(27, 31, 36, .08), 0 1px 2px rgba(27, 31, 36, .06);
  --pp-shadow-md: 0 3px 6px rgba(27, 31, 36, .10);
  --pp-shadow-overlay: 0 8px 24px rgba(27, 31, 36, .18);

  --pp-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif;
  --pp-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Échelle de tailles rééquilibrée sur une base de 15px */
  --pp-fz-xs: 12px;
  --pp-fz-sm: 13.5px;
  --pp-fz-base: 15px;
  --pp-fz-md: 16px;
  --pp-fz-lg: 18px;

  /* Hauteurs de ligne relatives */
  --pp-lh-tight: 1.25;
  --pp-lh-base: 1.5;

  --pp-transition: 140ms ease;
  --pp-transition-fast: 100ms ease;
  --pp-focus-ring: 0 0 0 3px rgba(58, 110, 165, .35);
}

/* Socle typo — réaligné sur 15px */
body {
  font-family: var(--pp-font-sans);
  font-size: var(--pp-fz-base);
  line-height: var(--pp-lh-base);
  color: var(--pp-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Optimisation pour l'alignement des chiffres dans les tableaux */
table, .table {
  font-variant-numeric: tabular-nums;
}

/* ===== Phase 1 — Tables ===== */
.table {
  font-size: var(--pp-fz-base);
  color: var(--pp-text);
  border-color: var(--pp-border-muted);
}

.table > thead > tr > th {
  padding: var(--pp-sp-1) var(--pp-sp-2);
  font-weight: 600;
  color: var(--pp-text-secondary);
  background-color: var(--pp-canvas);
  border-bottom: 1px solid var(--pp-border);
  vertical-align: middle;
}

.table > tbody > tr > td,
.table > tbody > tr > th {
  padding: var(--pp-sp-1) var(--pp-sp-2);
  border-top: 1px solid var(--pp-border-muted);
  vertical-align: middle;
}

.table-condensed > thead > tr > th,
.table-condensed > tbody > tr > td,
.table-condensed > tbody > tr > th {
  padding: var(--pp-sp-1) var(--pp-sp-2);
}

.table-hover > tbody > tr:hover > td,
.table-hover > tbody > tr:hover > th {
  background-color: rgba(114, 152, 191, .07);
  transition: background-color var(--pp-transition-fast);
}

.table-striped > tbody > tr:nth-of-type(odd) > td,
.table-striped > tbody > tr:nth-of-type(odd) > th {
  background-color: #fafbfc;
}

.table-bordered,
.table-bordered > thead > tr > th,
.table-bordered > thead > tr > td,
.table-bordered > tbody > tr > th,
.table-bordered > tbody > tr > td {
  border-color: var(--pp-border-muted);
}

.table a { color: var(--pp-accent); }
.table a:hover { color: var(--pp-accent-hover); }

/* ===== Phase 2 — Boutons & formulaires ===== */
.btn {
  border-radius: var(--pp-radius);
  border: 1px solid transparent;
  font-size: var(--pp-fz-base);
  font-weight: 500;
  box-shadow: none;
  text-shadow: none;
  transition: background-color var(--pp-transition-fast), border-color var(--pp-transition-fast), color var(--pp-transition-fast);
}
.btn:focus, .btn.focus { outline: none; box-shadow: var(--pp-focus-ring); }

/* --- btn-default --- */
.btn-default {
  background-color: var(--pp-surface);
  border-color: var(--pp-border);
  color: var(--pp-text);
}
.btn-default:hover,
.btn-default:focus,
.btn-default.focus {
  background-color: var(--pp-canvas);
  border-color: var(--pp-text-muted);
  color: var(--pp-text);
}
.btn-default:active,
.btn-default.active,
.open > .btn-default.dropdown-toggle {
  background-color: var(--pp-canvas);
  border-color: var(--pp-text-muted);
  color: var(--pp-text);
}
.btn-default:active:hover, .btn-default:active:focus, .btn-default:active.focus,
.btn-default.active:hover, .btn-default.active:focus, .btn-default.active.focus,
.open > .btn-default.dropdown-toggle:hover, .open > .btn-default.dropdown-toggle:focus, .open > .btn-default.dropdown-toggle.focus {
  background-color: var(--pp-canvas);
  border-color: var(--pp-border);
  color: var(--pp-text);
}

/* --- btn-primary --- */
.btn-primary {
  background-color: var(--pp-accent);
  border-color: var(--pp-accent);
  color: #fff;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary.focus {
  background-color: var(--pp-accent-hover);
  border-color: var(--pp-accent-hover);
  color: #fff;
}
.btn-primary:active,
.btn-primary.active,
.open > .btn-primary.dropdown-toggle {
  background-color: var(--pp-accent-hover);
  border-color: var(--pp-accent-hover);
  color: #fff;
}
.btn-primary:active:hover, .btn-primary:active:focus, .btn-primary:active.focus,
.btn-primary.active:hover, .btn-primary.active:focus, .btn-primary.active.focus,
.open > .btn-primary.dropdown-toggle:hover, .open > .btn-primary.dropdown-toggle:focus, .open > .btn-primary.dropdown-toggle.focus {
  background-color: var(--pp-accent-hover);
  border-color: var(--pp-accent-hover);
  color: #fff;
}

/* --- Boutons colorés --- */
.btn-success { background-color: var(--pp-success); border-color: var(--pp-success); color: #fff; }
.btn-danger  { background-color: var(--pp-danger);  border-color: var(--pp-danger);  color: #fff; }
.btn-warning { background-color: var(--pp-warning); border-color: var(--pp-warning); color: #fff; }
.btn-info    { background-color: var(--pp-info);    border-color: var(--pp-info);    color: #fff; }

.btn-success:hover, .btn-success:focus, .btn-success.focus,
.btn-success:active, .btn-success.active, .open > .btn-success.dropdown-toggle,
.btn-danger:hover,  .btn-danger:focus,  .btn-danger.focus,
.btn-danger:active,  .btn-danger.active,
.btn-warning:hover, .btn-warning:focus, .btn-warning.focus,
.btn-warning:active, .btn-warning.active,
.btn-info:hover,    .btn-info:focus,    .btn-info.focus,
.btn-info:active,   .btn-info.active {
  filter: brightness(.93);
  color: #fff;
}

.btn-success:active:hover, .btn-success:active:focus, .btn-success.active:hover, .btn-success.active:focus,
.open > .btn-success.dropdown-toggle:hover, .open > .btn-success.dropdown-toggle:focus,
.btn-danger:active:hover,  .btn-danger:active:focus,  .btn-danger.active:hover,  .btn-danger.active:focus,
.btn-warning:active:hover, .btn-warning:active:focus, .btn-warning.active:hover, .btn-warning.active:focus,
.btn-info:active:hover,    .btn-info:active:focus,    .btn-info.active:hover,    .btn-info.active:focus {
  filter: brightness(.88);
  color: #fff;
}

.btn-link { color: var(--pp-accent); }
.btn-link:hover { color: var(--pp-accent-hover); }

/* --- Champs de formulaire --- */
.form-control {
  border: 1px solid var(--pp-border);
  border-radius: var(--pp-radius);
  box-shadow: none;
  color: var(--pp-text);
  font-size: var(--pp-fz-base);
  transition: border-color var(--pp-transition-fast), box-shadow var(--pp-transition-fast);
}
.form-control:focus {
  border-color: var(--pp-accent);
  box-shadow: var(--pp-focus-ring);
  outline: none;
}
.form-control::placeholder { color: var(--pp-text-muted); }

label, .control-label { color: var(--pp-text); font-weight: 600; }
.help-block { color: var(--pp-text-muted); font-size: var(--pp-fz-sm); }

.input-group-addon {
  background-color: var(--pp-canvas);
  border-color: var(--pp-border);
  color: var(--pp-text-secondary);
  border-radius: var(--pp-radius);
}

/* --- États de validation --- */
.has-error .form-control { border-color: var(--pp-danger); }
.has-error .form-control:focus { border-color: var(--pp-danger); box-shadow: 0 0 0 3px rgba(207, 34, 46, .25); }
.has-error .control-label, .has-error .help-block { color: var(--pp-danger); }
.has-success .form-control { border-color: var(--pp-success); }
.has-success .form-control:focus { border-color: var(--pp-success); box-shadow: 0 0 0 3px rgba(26, 127, 55, .25); }
.has-success .control-label { color: var(--pp-success); }

/* --- select2 --- */
.select2-container--bootstrap .select2-selection {
  border-color: var(--pp-border);
  border-radius: var(--pp-radius);
  box-shadow: none;
  color: var(--pp-text);
  font-size: var(--pp-fz-base);
}
.select2-container--bootstrap.select2-container--focus .select2-selection,
.select2-container--bootstrap.select2-container--open .select2-selection {
  border-color: var(--pp-accent);
  box-shadow: var(--pp-focus-ring);
}

/* --- tom-select --- */
.ts-wrapper .ts-control {
  border-color: var(--pp-border);
  border-radius: var(--pp-radius);
  font-size: var(--pp-fz-base);
}
.ts-wrapper.focus .ts-control {
  border-color: var(--pp-accent);
  box-shadow: var(--pp-focus-ring);
}

/* ===== Phase 3 — Panels → cards ===== */
.panel {
  background-color: var(--pp-surface);
  border: 1px solid var(--pp-border);
  border-radius: var(--pp-radius-lg);
  box-shadow: var(--pp-shadow);
}

.panel > .panel-heading {
  background-color: var(--pp-canvas);
  border-bottom: 1px solid var(--pp-border-muted);
  color: var(--pp-text);
  border-top-left-radius: calc(var(--pp-radius-lg) - 1px);
  border-top-right-radius: calc(var(--pp-radius-lg) - 1px);
}

.panel-title { color: var(--pp-text); font-size: var(--pp-fz-lg); font-weight: 600; }
.panel-title > a { color: inherit; }

.panel > .panel-footer {
  background-color: var(--pp-canvas);
  border-top: 1px solid var(--pp-border-muted);
  color: var(--pp-text-secondary);
  border-bottom-left-radius: calc(var(--pp-radius-lg) - 1px);
  border-bottom-right-radius: calc(var(--pp-radius-lg) - 1px);
}

.panel-default, .panel-primary, .panel-info, .panel-success, .panel-warning, .panel-danger {
  border-color: var(--pp-border);
}

.panel-default > .panel-heading,
.panel-primary > .panel-heading {
  background-color: var(--pp-canvas);
  color: var(--pp-text);
  border-color: var(--pp-border-muted);
}

.panel-info    > .panel-heading { background-color: var(--pp-info-bg);    color: var(--pp-text);    border-color: var(--pp-border-muted); }
.panel-success > .panel-heading { background-color: var(--pp-success-bg); color: var(--pp-success); border-color: var(--pp-border-muted); }
.panel-warning > .panel-heading { background-color: var(--pp-warning-bg); color: var(--pp-warning); border-color: var(--pp-border-muted); }
.panel-danger  > .panel-heading { background-color: var(--pp-danger-bg);  color: var(--pp-danger);  border-color: var(--pp-border-muted); }

.well {
  background-color: var(--pp-canvas);
  border: 1px solid var(--pp-border-muted);
  border-radius: var(--pp-radius);
  box-shadow: none;
}

.bs-callout {
  border: 1px solid var(--pp-border-muted);
  border-left-width: 4px;
  border-radius: var(--pp-radius);
  background-color: var(--pp-surface);
}
.bs-callout-info    { border-left-color: var(--pp-info); }
.bs-callout-success { border-left-color: var(--pp-success); }
.bs-callout-warning { border-left-color: var(--pp-warning); }
.bs-callout-danger  { border-left-color: var(--pp-danger); }

/* REMARQUE : La règle .table { font-size: 14px; } a été retirée d'ici pour utiliser var(--pp-fz-base) */

/* ===== Phase 4 — Onglets ===== */
.nav-tabs { border-bottom: 1px solid var(--pp-border); }

.nav-tabs > li > a {
  margin-right: var(--pp-sp-1);
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  color: var(--pp-text-secondary);
  background-color: transparent;
  transition: color var(--pp-transition-fast), border-color var(--pp-transition-fast);
}

.nav-tabs > li > a:hover,
.nav-tabs > li > a:focus {
  border-color: transparent;
  border-bottom-color: var(--pp-border);
  background-color: transparent;
  color: var(--pp-text);
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
  border: 0;
  border-bottom: 2px solid var(--pp-accent);
  background-color: transparent;
  color: var(--pp-text);
  cursor: default;
}

.nav-pills > li > a { border-radius: var(--pp-radius); color: var(--pp-text-secondary); }
.nav-pills > li > a:hover { color: var(--pp-text); background-color: var(--pp-canvas); }
.nav-pills > li.active > a,
.nav-pills > li.active > a:hover,
.nav-pills > li.active > a:focus { background-color: var(--pp-accent); color: #fff; }

/* ===== Phase 5 — Navbar + alerts + modals ===== */
.dropdown-menu {
  border-color: var(--pp-border);
  border-radius: var(--pp-radius);
  box-shadow: var(--pp-shadow-md);
  font-size: var(--pp-fz-base);
}
.dropdown-menu > li > a { color: var(--pp-text); }
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus { background-color: var(--pp-canvas); color: var(--pp-text); }
.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus { background-color: var(--pp-accent); color: #fff; }

.alert { border-radius: var(--pp-radius); border: 1px solid transparent; font-size: var(--pp-fz-base); }
.alert-success { background-color: var(--pp-success-bg); border-color: var(--pp-success); color: var(--pp-success); }
.alert-info    { background-color: var(--pp-info-bg);    border-color: var(--pp-info);    color: var(--pp-info); }
.alert-warning { background-color: var(--pp-warning-bg); border-color: var(--pp-warning); color: var(--pp-warning); }
.alert-danger  { background-color: var(--pp-danger-bg);  border-color: var(--pp-danger);  color: var(--pp-danger); }
.alert a, .alert .alert-link { color: inherit; font-weight: 600; }

.modal-content {
  border: 1px solid var(--pp-border);
  border-radius: var(--pp-radius-lg);
  box-shadow: var(--pp-shadow-overlay);
}
.modal-header { border-bottom: 1px solid var(--pp-border-muted); }
.modal-footer { border-top: 1px solid var(--pp-border-muted); }
.modal-title { color: var(--pp-text); font-weight: 600; font-size: var(--pp-fz-lg); }
.modal-backdrop.in { opacity: .4; }

.navbar-inverse {
  background-color: var(--pp-text);
  background-image: none;
  border: 0;
  box-shadow: var(--pp-shadow-sm);
  border-radius: 0;
}
.navbar-inverse .navbar-brand { color: #fff; }
.navbar-inverse .navbar-nav > li > a {
  color: rgba(255, 255, 255, .75);
  font-size: var(--pp-fz-base);
  transition: color var(--pp-transition-fast), background-color var(--pp-transition-fast);
}
.navbar-inverse .navbar-nav > li > a:hover,
.navbar-inverse .navbar-nav > li > a:focus {
  color: #fff;
  background-color: rgba(255, 255, 255, .08);
}
.navbar-inverse .navbar-nav > li.active > a,
.navbar-inverse .navbar-nav > li.active > a:hover,
.navbar-inverse .navbar-nav > li.active > a:focus {
  color: #fff;
  background-color: rgba(255, 255, 255, .10);
  box-shadow: inset 0 -2px 0 var(--pp-brand);
}
.navbar-inverse .navbar-toggle { border-color: rgba(255, 255, 255, .25); }
.navbar-inverse .navbar-toggle:hover,
.navbar-inverse .navbar-toggle:focus { background-color: rgba(255, 255, 255, .08); }
.navbar-inverse .navbar-toggle .icon-bar { background-color: #fff; }

/* ===== Phase 6 — Finitions ===== */
#content[role="main"] {
  background-color: var(--pp-canvas);
}

.label { font-weight: 600; border-radius: var(--pp-radius-sm); font-size: var(--pp-fz-xs); }
.label-pill { border-radius: 10rem; }
.label-default { background-color: var(--pp-text-secondary); }
.label-primary { background-color: var(--pp-accent); }
.label-success { background-color: var(--pp-success); }
.label-info    { background-color: var(--pp-info); }
.label-warning { background-color: var(--pp-warning); }
.label-danger  { background-color: var(--pp-danger); }

.badge { background-color: var(--pp-text-secondary); font-size: var(--pp-fz-xs); }

.pagination > li > a,
.pagination > li > span { color: var(--pp-accent); border-color: var(--pp-border); font-size: var(--pp-fz-base); }
.pagination > li > a:hover,
.pagination > li > span:hover { background-color: var(--pp-canvas); border-color: var(--pp-border); color: var(--pp-accent-hover); }
.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover,
.pagination > .active > a:focus,
.pagination > .active > span:focus { background-color: var(--pp-accent); border-color: var(--pp-accent); color: #fff; }
.pagination > li:first-child > a,
.pagination > li:first-child > span { border-top-left-radius: var(--pp-radius); border-bottom-left-radius: var(--pp-radius); }
.pagination > li:last-child > a,
.pagination > li:last-child > span { border-top-right-radius: var(--pp-radius); border-bottom-right-radius: var(--pp-radius); }
.pagination > .disabled > span,
.pagination > .disabled > a { color: var(--pp-text-muted); }

.breadcrumb { background-color: var(--pp-canvas); border-radius: var(--pp-radius); font-size: var(--pp-fz-sm); }
.breadcrumb > .active { color: var(--pp-text-secondary); }
.breadcrumb a { color: var(--pp-accent); }
.breadcrumb > li + li:before { color: var(--pp-text-muted); }

a:focus-visible,
[tabindex]:focus-visible {
  outline: none;
  box-shadow: var(--pp-focus-ring);
  border-radius: var(--pp-radius-sm);
}
.navbar-inverse .navbar-nav > li > a:focus-visible {
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .6);
}

/* ===== Page connexion ===== */
#form-signin input[type=text] {
  margin-bottom: var(--pp-sp-3);
  border-bottom-right-radius: var(--pp-radius);
  border-bottom-left-radius: var(--pp-radius);
}
#form-signin input[type=password] {
  border-top-left-radius: var(--pp-radius);
  border-top-right-radius: var(--pp-radius);
}

#form-signin {
  border-color: var(--pp-border);
  box-shadow: var(--pp-shadow-overlay);
}

.addTabToSelection {
  margin-top: var(--pp-sp-3);
  margin-bottom: var(--pp-sp-3);
}

/* ===== Autocomplétion adresse (BAN / Géoplateforme) ===== */
.form-group:has(> .address-autocomplete-suggestions) {
  position: relative;
}
.form-group .address-autocomplete-suggestions {
  position: absolute;
  z-index: 1000;
  width: 100%;
  max-height: 240px;
  margin-top: 2px;
  padding: 0;
  overflow-y: auto;
  list-style: none;
  background-color: var(--pp-surface);
  border: 1px solid var(--pp-border);
  border-radius: var(--pp-radius);
  box-shadow: var(--pp-shadow-md);
  font-size: var(--pp-fz-base);
}
.form-group .address-autocomplete-suggestion {
  padding: var(--pp-sp-2) var(--pp-sp-3);
  cursor: pointer;
  color: var(--pp-text);
}
.form-group .address-autocomplete-suggestion:hover,
.form-group .address-autocomplete-suggestion.is-active {
  background-color: var(--pp-canvas);
  color: var(--pp-text);
}
.form-group .address-autocomplete-suggestion.is-disabled {
  color: var(--pp-text-muted);
  cursor: default;
}