/* ═══════════════════════════════════════════════════════════════════════════
   Thème Baresto · Pulse  —  Bootstrap 5.3 + charte graphique Baresto 2025,
   nuancée par la maquette dclic-prototype-v2 et le handoff logo PULSE (août 2026).

   Chargement (dans cet ordre) : bootstrap.min.css → theme-baresto.css → styles.css

   Couleurs de la charte (Brandbook 2025 · Nikita) :
     Bordeaux   #70150F  couleur identitaire (logo, titres, actifs, primaire)
     Lie de vin #973756  adoucit l'identité (secondaire, informatif)
     Rouge      #E50040  pep's · actions (boutons d'action, urgences)
     Sauge      #959D64  communication (succès, IA)
     Rose clair #F39B9B  communication (avertissements doux)
     Noir       #000000 · Blanc #FFFFFF
   Typographie : MD Primer (titres en capitales MD Primer Black) · substitution web : Arial.
   Logo PULSE : mot en MD Primer 900 + battement SVG, bordeaux sur fond clair, blanc sur bordeaux.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Police MD Primer · fichiers à déposer dans static/pulse/fonts/ (sinon Arial, substitution charte) ── */
@font-face { font-family: "MD Primer"; font-weight: 300; font-style: normal; font-display: swap; src: url("fonts/MDPrimer-Light.woff2") format("woff2"); }
@font-face { font-family: "MD Primer"; font-weight: 400; font-style: normal; font-display: swap; src: url("fonts/MDPrimer-Regular.woff2") format("woff2"); }
@font-face { font-family: "MD Primer"; font-weight: 400; font-style: italic; font-display: swap; src: url("fonts/MDPrimer-Italic.woff2") format("woff2"); }
@font-face { font-family: "MD Primer"; font-weight: 500; font-style: normal; font-display: swap; src: url("fonts/MDPrimer-Medium.woff2") format("woff2"); }
@font-face { font-family: "MD Primer"; font-weight: 700; font-style: normal; font-display: swap; src: url("fonts/MDPrimer-Bold.woff2") format("woff2"); }
@font-face { font-family: "MD Primer"; font-weight: 900; font-style: normal; font-display: swap; src: url("fonts/MDPrimer-Black.woff2") format("woff2"); }

:root {
  /* ── Palette charte ── */
  --br-bordeaux: #70150F;  --br-bordeaux-dark: #56100B;  --br-bordeaux-rgb: 112, 21, 15;
  --br-lie-de-vin: #973756; --br-lie-de-vin-dark: #7C2C46; --br-lie-de-vin-rgb: 151, 55, 86;
  --br-rouge: #E50040;      --br-rouge-dark: #BF0036;     --br-rouge-rgb: 229, 0, 64;
  --br-sauge: #959D64;      --br-sauge-dark: #6E7645;     --br-sauge-rgb: 149, 157, 100;
  --br-rose: #F39B9B;       --br-rose-dark: #A8434A;      --br-rose-rgb: 243, 155, 155;
  --br-noir: #1A1A1A;       --br-blanc: #FFFFFF;
  /* teintes (fonds de tuiles, chips, surlignages) */
  --br-bordeaux-tint: #F5EDEC; --br-lie-de-vin-tint: #F6E9EE; --br-rouge-tint: #FDE6EC;
  --br-sauge-tint: #F0F2E6;    --br-rose-tint: #FDEDED;       --br-gris-tint: #F3F0EE;

  /* ── Tokens Pulse (noms historiques conservés : toute la coquille les utilise) ── */
  --bg-app: #F8F5F3;
  --bg-card: #FFFFFF;
  --bg-side: #FFFFFF;
  --bg-side-hover: #F3EEEC;
  --bg-side-active: var(--br-bordeaux-tint);
  --bg-table-head: #F6F2F0;
  --bg-tile-info: var(--br-lie-de-vin-tint);
  --bg-tile-warning: var(--br-rose-tint);
  --bg-tile-success: var(--br-sauge-tint);
  --bg-tile-purple: var(--br-lie-de-vin-tint);
  --bg-tile-teal: var(--br-sauge-tint);
  --bg-tile-coral: var(--br-rouge-tint);
  --bg-tile-gray: var(--br-gris-tint);
  --bg-tile: #F6F2F0;
  --bg-soft: #F8F5F3;
  --text-primary: #1F1A1A;
  --text-secondary: #4A4342;
  --text-tertiary: #6F6664;
  --text-muted: #9C9391;
  --text-info: var(--br-lie-de-vin);
  --text-warning: var(--br-rose-dark);
  --text-success: var(--br-sauge-dark);
  --text-purple: var(--br-lie-de-vin);
  --text-teal: var(--br-sauge-dark);
  --text-coral: var(--br-rouge);
  --text-alert: var(--br-rouge-dark);
  --text-bordeaux: var(--br-bordeaux);
  --navy: var(--br-bordeaux);
  --border: rgba(31, 26, 26, 0.10);
  --border-strong: rgba(31, 26, 26, 0.20);
  --font-sans: "MD Primer", Arial, "Helvetica Neue", Helvetica, sans-serif;
  --font-display: "MD Primer", "Arial Black", Arial, sans-serif;

  /* ── Bootstrap 5.3 : le thème ── */
  --bs-font-sans-serif: var(--font-sans);
  --bs-body-font-family: var(--font-sans);
  --bs-body-font-size: 0.8125rem;            /* 13 px · densité de la maquette */
  --bs-body-line-height: 1.45;
  --bs-body-color: var(--text-primary);       --bs-body-color-rgb: 31, 26, 26;
  --bs-body-bg: var(--bg-app);                --bs-body-bg-rgb: 248, 245, 243;
  --bs-secondary-color: var(--text-tertiary);
  --bs-tertiary-color: var(--text-muted);
  --bs-emphasis-color: var(--br-noir);
  --bs-heading-color: inherit;
  --bs-border-color: var(--border);
  --bs-border-color-translucent: var(--border);
  --bs-border-radius: 0.375rem; --bs-border-radius-sm: 0.3rem; --bs-border-radius-lg: 0.5rem; --bs-border-radius-pill: 50rem;
  --bs-link-color: var(--br-bordeaux);        --bs-link-color-rgb: var(--br-bordeaux-rgb);
  --bs-link-hover-color: var(--br-rouge);     --bs-link-hover-color-rgb: var(--br-rouge-rgb);
  --bs-link-decoration: none;
  --bs-focus-ring-color: rgba(112, 21, 15, 0.25);

  --bs-primary: var(--br-bordeaux);     --bs-primary-rgb: var(--br-bordeaux-rgb);
  --bs-secondary: var(--br-lie-de-vin); --bs-secondary-rgb: var(--br-lie-de-vin-rgb);
  --bs-success: var(--br-sauge-dark);   --bs-success-rgb: 110, 118, 69;
  --bs-info: var(--br-lie-de-vin);      --bs-info-rgb: var(--br-lie-de-vin-rgb);
  --bs-warning: var(--br-rose);         --bs-warning-rgb: var(--br-rose-rgb);
  --bs-danger: var(--br-rouge);         --bs-danger-rgb: var(--br-rouge-rgb);
  --bs-light: #F8F5F3;                  --bs-light-rgb: 248, 245, 243;
  --bs-dark: var(--br-noir);            --bs-dark-rgb: 26, 26, 26;

  --bs-primary-text-emphasis: var(--br-bordeaux-dark);   --bs-primary-bg-subtle: var(--br-bordeaux-tint);   --bs-primary-border-subtle: #E3C9C6;
  --bs-secondary-text-emphasis: var(--br-lie-de-vin-dark); --bs-secondary-bg-subtle: var(--br-lie-de-vin-tint); --bs-secondary-border-subtle: #E7CBD6;
  --bs-success-text-emphasis: var(--br-sauge-dark);      --bs-success-bg-subtle: var(--br-sauge-tint);      --bs-success-border-subtle: #D6DBBE;
  --bs-info-text-emphasis: var(--br-lie-de-vin-dark);    --bs-info-bg-subtle: var(--br-lie-de-vin-tint);    --bs-info-border-subtle: #E7CBD6;
  --bs-warning-text-emphasis: var(--br-rose-dark);       --bs-warning-bg-subtle: var(--br-rose-tint);       --bs-warning-border-subtle: #F6CFCF;
  --bs-danger-text-emphasis: var(--br-rouge-dark);       --bs-danger-bg-subtle: var(--br-rouge-tint);       --bs-danger-border-subtle: #F7BFCF;
  --bs-light-text-emphasis: var(--text-secondary);       --bs-light-bg-subtle: #FCFAF9;                     --bs-light-border-subtle: #EDE7E4;
  --bs-dark-text-emphasis: var(--br-noir);               --bs-dark-bg-subtle: #E6E2E0;                      --bs-dark-border-subtle: #CFC9C6;
}

/* ── Composants Bootstrap : la charte partout (Pulse comme pages legacy) ── */
.btn { --bs-btn-focus-shadow-rgb: var(--br-bordeaux-rgb); --bs-btn-font-family: var(--font-sans); }
.btn-primary { --bs-btn-bg: var(--br-rouge); --bs-btn-border-color: var(--br-rouge); --bs-btn-hover-bg: var(--br-rouge-dark); --bs-btn-hover-border-color: var(--br-rouge-dark);
               --bs-btn-active-bg: var(--br-rouge-dark); --bs-btn-active-border-color: var(--br-rouge-dark); --bs-btn-disabled-bg: var(--br-rouge); --bs-btn-disabled-border-color: var(--br-rouge);
               --bs-btn-focus-shadow-rgb: var(--br-rouge-rgb); }          /* l'action = rouge (bouton « S'identifier » d'Clic) */
.btn-secondary { --bs-btn-bg: var(--br-lie-de-vin); --bs-btn-border-color: var(--br-lie-de-vin); --bs-btn-hover-bg: var(--br-lie-de-vin-dark); --bs-btn-hover-border-color: var(--br-lie-de-vin-dark); --bs-btn-active-bg: var(--br-lie-de-vin-dark); --bs-btn-active-border-color: var(--br-lie-de-vin-dark); }
.btn-success { --bs-btn-bg: var(--br-sauge-dark); --bs-btn-border-color: var(--br-sauge-dark); --bs-btn-hover-bg: #5A6138; --bs-btn-hover-border-color: #5A6138; --bs-btn-active-bg: #5A6138; --bs-btn-active-border-color: #5A6138; }
.btn-danger { --bs-btn-bg: var(--br-rouge-dark); --bs-btn-border-color: var(--br-rouge-dark); --bs-btn-hover-bg: #99002B; --bs-btn-hover-border-color: #99002B; }
.btn-info { --bs-btn-bg: var(--br-lie-de-vin); --bs-btn-border-color: var(--br-lie-de-vin); --bs-btn-color: #fff; --bs-btn-hover-bg: var(--br-lie-de-vin-dark); --bs-btn-hover-border-color: var(--br-lie-de-vin-dark); --bs-btn-hover-color: #fff; --bs-btn-active-color: #fff; }
.btn-warning { --bs-btn-bg: var(--br-rose); --bs-btn-border-color: var(--br-rose); --bs-btn-color: var(--br-bordeaux-dark); --bs-btn-hover-bg: #EE8383; --bs-btn-hover-border-color: #EE8383; --bs-btn-hover-color: var(--br-bordeaux-dark); }
.btn-dark { --bs-btn-bg: var(--br-bordeaux); --bs-btn-border-color: var(--br-bordeaux); --bs-btn-hover-bg: var(--br-bordeaux-dark); --bs-btn-hover-border-color: var(--br-bordeaux-dark); }
.btn-outline-primary { --bs-btn-color: var(--br-bordeaux); --bs-btn-border-color: var(--br-bordeaux); --bs-btn-hover-bg: var(--br-bordeaux); --bs-btn-hover-border-color: var(--br-bordeaux); --bs-btn-active-bg: var(--br-bordeaux); --bs-btn-active-border-color: var(--br-bordeaux); }
.btn-outline-secondary { --bs-btn-color: var(--text-secondary); --bs-btn-border-color: var(--border-strong); --bs-btn-hover-bg: var(--bg-side-hover); --bs-btn-hover-color: var(--text-primary); --bs-btn-hover-border-color: var(--border-strong); --bs-btn-active-bg: var(--bg-side-hover); --bs-btn-active-color: var(--text-primary); }
.btn-outline-danger { --bs-btn-color: var(--br-rouge-dark); --bs-btn-border-color: var(--br-rouge); --bs-btn-hover-bg: var(--br-rouge); --bs-btn-hover-border-color: var(--br-rouge); }
.btn-outline-success { --bs-btn-color: var(--br-sauge-dark); --bs-btn-border-color: var(--br-sauge); --bs-btn-hover-bg: var(--br-sauge-dark); --bs-btn-hover-border-color: var(--br-sauge-dark); }
.btn-link { --bs-btn-color: var(--br-bordeaux); --bs-btn-hover-color: var(--br-rouge); }

.form-control, .form-select { font-size: 0.8125rem; border-color: var(--border-strong); }
.form-control:focus, .form-select:focus { border-color: var(--br-bordeaux); box-shadow: 0 0 0 0.2rem rgba(112, 21, 15, 0.15); }
.form-check-input:checked { background-color: var(--br-bordeaux); border-color: var(--br-bordeaux); }
.form-check-input:focus { border-color: var(--br-bordeaux); box-shadow: 0 0 0 0.2rem rgba(112, 21, 15, 0.15); }
.form-range::-webkit-slider-thumb { background: var(--br-bordeaux); }
.nav-tabs { --bs-nav-tabs-link-active-color: var(--br-bordeaux); --bs-nav-link-color: var(--text-tertiary); --bs-nav-link-hover-color: var(--text-secondary); --bs-nav-tabs-border-color: var(--border); --bs-nav-tabs-link-active-border-color: var(--border) var(--border) #fff; }
.nav-pills { --bs-nav-pills-link-active-bg: var(--br-bordeaux); --bs-nav-link-color: var(--text-secondary); }
.nav-link { color: var(--text-secondary); }
.nav-link:hover { color: var(--br-bordeaux); }
.pagination { --bs-pagination-color: var(--br-bordeaux); --bs-pagination-active-bg: var(--br-bordeaux); --bs-pagination-active-border-color: var(--br-bordeaux); --bs-pagination-hover-color: var(--br-rouge); --bs-pagination-focus-color: var(--br-rouge); --bs-pagination-focus-box-shadow: 0 0 0 0.2rem rgba(112, 21, 15, 0.15); }
.progress { --bs-progress-bar-bg: var(--br-bordeaux); --bs-progress-bg: var(--bg-tile-gray); }
.list-group { --bs-list-group-active-bg: var(--br-bordeaux); --bs-list-group-active-border-color: var(--br-bordeaux); }
.dropdown-menu { --bs-dropdown-link-active-bg: var(--br-bordeaux); --bs-dropdown-link-hover-bg: var(--bg-side-hover); --bs-dropdown-border-color: var(--border-strong); font-size: 0.8125rem; }
.table { --bs-table-color: var(--text-primary); --bs-table-striped-bg: var(--bg-soft); --bs-table-hover-bg: var(--bg-side-hover); --bs-table-border-color: var(--border); font-size: 0.8125rem; }
.table > thead th, .table > :not(caption) > * > th { font-size: 11px; color: var(--text-tertiary); font-weight: 500; text-transform: uppercase; letter-spacing: .3px; background: var(--bg-table-head); }
.table-primary { --bs-table-bg: var(--br-bordeaux-tint); }
.table-success { --bs-table-bg: var(--br-sauge-tint); }
.table-danger { --bs-table-bg: var(--br-rouge-tint); }
.table-warning { --bs-table-bg: var(--br-rose-tint); }
.table-info { --bs-table-bg: var(--br-lie-de-vin-tint); }
.card { --bs-card-border-color: var(--border); --bs-card-cap-bg: var(--bg-table-head); --bs-card-border-radius: 6px; --bs-card-inner-border-radius: 5px; }
.card-header { font-weight: 500; }
.alert { font-size: 0.8125rem; }
.badge { font-weight: 500; }
.text-bg-primary { background-color: var(--br-bordeaux) !important; }
.text-bg-danger { background-color: var(--br-rouge) !important; }
.text-bg-success { background-color: var(--br-sauge-dark) !important; }
.text-bg-warning { background-color: var(--br-rose) !important; color: var(--br-bordeaux-dark) !important; }
.text-bg-info { background-color: var(--br-lie-de-vin) !important; color: #fff !important; }
.bg-primary { background-color: var(--br-bordeaux) !important; }
.bg-danger { background-color: var(--br-rouge) !important; }
.bg-success { background-color: var(--br-sauge-dark) !important; }
.bg-info { background-color: var(--br-lie-de-vin) !important; }
.bg-warning { background-color: var(--br-rose) !important; }
.text-primary { color: var(--br-bordeaux) !important; }
.text-danger { color: var(--br-rouge) !important; }
.text-success { color: var(--br-sauge-dark) !important; }
.text-info { color: var(--br-lie-de-vin) !important; }
.text-warning { color: var(--br-rose-dark) !important; }
.border-primary { border-color: var(--br-bordeaux) !important; }
.modal-header, .modal-footer { border-color: var(--border); }
.modal-content { border-color: var(--border-strong); border-radius: 8px; }
.tooltip { --bs-tooltip-bg: var(--br-noir); font-size: 12px; }
.popover { --bs-popover-border-color: var(--border-strong); font-size: 12px; }
.spinner-border { color: var(--br-bordeaux); }
.accordion { --bs-accordion-active-bg: var(--br-bordeaux-tint); --bs-accordion-active-color: var(--br-bordeaux); --bs-accordion-btn-focus-box-shadow: 0 0 0 0.2rem rgba(112, 21, 15, 0.15); }
.navbar-baresto, .bg-baresto { background-color: var(--br-bordeaux) !important; }
.text-bordeaux { color: var(--br-bordeaux) !important; }
.text-rouge { color: var(--br-rouge) !important; }
.bg-bordeaux-tint { background-color: var(--br-bordeaux-tint) !important; }

/* ── Typographie de la charte ── */
body { -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-family: var(--font-sans); font-weight: 700; line-height: 1.2; }
h1.page-title, .hero-id h1, .page-head h1, .legacy h1, .legacy .h1 { font-family: var(--font-display); font-weight: 900; color: var(--br-bordeaux); letter-spacing: -0.01em; text-transform: uppercase; }
a { text-decoration: none; }
a:hover { text-decoration: underline; }
.btn:hover, .tab:hover, .kcard:hover, .step-card:hover, .sub-list-item:hover, .sidebar a:hover, .bottom-nav a:hover, .cand-step:hover, .kpi-tile:hover, .card-link:hover, .topbar a:hover { text-decoration: none; }
strong, b { font-weight: 700; }
::selection { background: var(--br-rose); color: var(--br-bordeaux-dark); }

/* ── Logo PULSE (handoff « Le logo Pulse en production ») ──
   Une seule valeur pilote tout le logotype : la font-size du conteneur.
   Deux couleurs, pas une de plus : bordeaux sur fond clair, blanc sur fond bordeaux (.pulse-logo--inverse).
   Pas de déformation, pas d'animation d'entrée. Sous 14 px de mot, on passe à l'icône seule. */
.pulse-logo { display: inline-flex; flex-direction: column; align-items: flex-start; font-size: 22px; gap: .11em; color: var(--br-bordeaux); line-height: 1; text-decoration: none; }
.pulse-logo:hover { text-decoration: none; color: var(--br-bordeaux); }
.pulse-logo__word { font-family: var(--font-display); font-weight: 900; font-size: 1em; letter-spacing: -.01em; line-height: 1; text-transform: uppercase; color: inherit; }
.pulse-logo__beat { width: 3.64em; height: auto; display: block; color: inherit; }
.pulse-logo--inverse { color: #fff; }
.pulse-logo--inverse:hover { color: #fff; }
.pulse-icone { display: inline-block; width: 1em; height: 1em; background: var(--br-bordeaux); color: #fff; vertical-align: middle; }   /* pastille carrée, angles vifs */
.pulse-icone--pastille { border-radius: 50%; background: var(--br-lie-de-vin); }

/* ── Loader « battement » (charte) ──
   Tous les indicateurs d'attente (Bootstrap .spinner-border / .spinner-grow, Pulse .spinner-sm, .pulse-loader)
   deviennent le trait du battement PULSE qui bat : masque CSS du SVG (aucune image, aucun JS, ~600 octets) +
   animation de rythme cardiaque. Couleur = currentColor (bordeaux par défaut, blanc sur bouton plein).
   Handoff logo : « un battement animé du trait est à faire valider avant tout usage » → composant à valider avec le
   comité stratégique ; si refus, supprimer ce bloc rend leurs spinners d'origine à Bootstrap et Pulse.
   prefers-reduced-motion : le trait reste fixe (pas d'animation). */
:root { --pulse-beat-svg: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none'><path d='M5.6 23.2H16.4L21.8 11.5L28.3 30.6L32.6 23.2H42.4' stroke='black' stroke-width='5.9' stroke-linecap='round' stroke-linejoin='round'/></svg>"); }
@keyframes pulse-beat { 0%, 100% { transform: scale(1); opacity: .55; } 14% { transform: scale(1.18); opacity: 1; } 28% { transform: scale(.98); opacity: .7; } 42% { transform: scale(1.12); opacity: 1; } 70% { transform: scale(1); opacity: .55; } }
.spinner-border, .spinner-grow, .spinner-sm, .pulse-loader {
  display: inline-block; width: 1.5rem; height: 1.5rem; vertical-align: -.25em; border: 0 !important; border-radius: 0; background-color: currentColor; color: var(--br-bordeaux);
  -webkit-mask: var(--pulse-beat-svg) center / contain no-repeat; mask: var(--pulse-beat-svg) center / contain no-repeat;
  animation: pulse-beat 1.15s ease-in-out infinite; transform-origin: center; }
.spinner-border-sm, .spinner-grow-sm, .spinner-sm, .pulse-loader--sm { width: 1rem; height: 1rem; vertical-align: -.2em; }
.pulse-loader--lg { width: 3rem; height: 3rem; }
.btn .spinner-border, .btn .spinner-grow, .btn .spinner-sm { color: inherit; }
.btn-primary .spinner-border, .btn-primary .spinner-sm, .btn-bordeaux .spinner-sm, .btn-secondary .spinner-border { color: #fff; }
.diag-overlay .spinner-sm { border: 0; border-radius: 0; animation: pulse-beat 1.15s ease-in-out infinite; width: 18px; height: 18px; margin-right: 6px; }
.pulse-loader-block { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 24px; color: var(--text-tertiary); font-size: 12px; }
@media (prefers-reduced-motion: reduce) { .spinner-border, .spinner-grow, .spinner-sm, .pulse-loader, .diag-overlay .spinner-sm { animation: none; opacity: .8; } }