/* =====================================================================
   theme.css — Identité visuelle du CSE
   ---------------------------------------------------------------------
   Surcharge de Bootstrap 5.3 par ses variables CSS natives : aucune
   compilation Sass, aucun processus de build. Le fichier est chargé APRÈS
   bootstrap.min.css et se contente de redéfinir des custom properties.

   Bootstrap 5.3 expose ses couleurs de composant sous forme de variables
   locales (--bs-btn-bg, --bs-nav-link-color…). Redéfinir --bs-primary ne
   suffit donc pas : chaque composant est réaccordé explicitement ci-dessous.

   Organisation
     1. Polices
     2. Jetons de marque
     3. Mode clair  — mappage vers les variables Bootstrap
     4. Mode sombre — [data-bs-theme="dark"]
     5. Base typographique
     6. Composants Bootstrap réaccordés
     7. Composants réutilisables du projet (.irp-*)
     8. Utilitaires et accessibilité
   ===================================================================== */

/* =====================================================================
   1. POLICES — Inter, hébergée localement (aucun appel à Google Fonts)
   ===================================================================== */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/inter-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/inter-latin-500-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/inter-latin-600-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/inter-latin-700-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}

/* Latin étendu : caractères rares, chargés uniquement s'ils sont utilisés. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/inter-latin-ext-400-normal.woff2') format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF,
    U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/inter-latin-ext-500-normal.woff2') format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF,
    U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/inter-latin-ext-600-normal.woff2') format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF,
    U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/inter-latin-ext-700-normal.woff2') format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF,
    U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Nunito — hébergée localement elle aussi, et pour la même raison : un
   appel à Google à chaque page enverrait l'adresse IP de chaque salarié
   chez eux. Plus ronde qu'Inter, retenue par le CSE pour tout le site. */

@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/nunito-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/nunito-latin-ext-400-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/nunito-latin-500-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/nunito-latin-ext-500-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/nunito-latin-600-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/nunito-latin-ext-600-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/nunito-latin-700-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/nunito-latin-ext-700-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* =====================================================================
   2. JETONS DE MARQUE — indépendants du mode clair/sombre
   ===================================================================== */

:root {
  /* --- Bleu cyan de marque ------------------------------------------ */
  --irp-cyan-50:  #eaf6fc;
  --irp-cyan-100: #d2ecf8;
  --irp-cyan-200: #a6d9f1;
  --irp-cyan-300: #6fc3e8;
  --irp-cyan-400: #3fade0;
  --irp-cyan:     #1b9dd9;
  --irp-cyan-600: #1580b3;
  --irp-cyan-700: #10658c;
  --irp-cyan-800: #0c4c69;
  --irp-cyan-900: #083447;

  /* --- Bleu ardoise foncé ------------------------------------------- */
  --irp-slate-50:  #f2f4f7;
  --irp-slate-100: #e4e8ee;
  --irp-slate-200: #c8d0dc;
  --irp-slate-300: #9fadc1;
  --irp-slate-400: #6c7f99;
  --irp-slate-500: #45597a;
  --irp-slate-600: #2c4568;
  --irp-slate:     #1c3350;
  --irp-slate-800: #16283f;
  --irp-slate-900: #0f1c2d;
  --irp-slate-950: #0a1420;

  /* --- États métier : validé / en attente / rejeté / en retard ------- */
  --irp-valide:     #0f7a58;
  --irp-attente:    #a86a08;
  --irp-rejete:     #bf332e;
  --irp-retard:     #b8500f;

  /* --- Rayons : arrondis modérés ------------------------------------ */
  --irp-radius-sm: 6px;
  --irp-radius:    10px;
  --irp-radius-lg: 14px;
  --irp-radius-pill: 999px;

  /* --- Ombres douces, teintées d'ardoise plutôt que de noir --------- */
  --irp-shadow-xs: 0 1px 2px rgba(28, 51, 80, .06);
  --irp-shadow-sm: 0 1px 3px rgba(28, 51, 80, .07), 0 1px 2px rgba(28, 51, 80, .04);
  --irp-shadow:    0 4px 12px rgba(28, 51, 80, .07), 0 1px 3px rgba(28, 51, 80, .05);
  --irp-shadow-lg: 0 12px 28px rgba(28, 51, 80, .10), 0 4px 10px rgba(28, 51, 80, .05);

  /* --- Transitions : présentes mais discrètes ----------------------- */
  --irp-transition: 160ms cubic-bezier(.4, 0, .2, 1);

  /* --- Densité : rythme vertical resserré --------------------------- */
  --irp-header-height: 58px;
  --irp-sidebar-width: 260px;
  --irp-sidebar-width-collapsed: 72px;
  --irp-content-max: 1280px;

  --irp-font-sans: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI',
    Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* =====================================================================
   3. MODE CLAIR — mappage vers les variables Bootstrap
   ===================================================================== */

:root,
[data-bs-theme='light'] {
  /* --- Palette Bootstrap -------------------------------------------- */
  --bs-primary: var(--irp-cyan);
  --bs-primary-rgb: 27, 157, 217;
  --bs-primary-text-emphasis: var(--irp-cyan-700);
  --bs-primary-bg-subtle: var(--irp-cyan-50);
  --bs-primary-border-subtle: var(--irp-cyan-200);

  --bs-secondary: var(--irp-slate-500);
  --bs-secondary-rgb: 69, 89, 122;
  --bs-secondary-color: var(--irp-slate-400);
  --bs-secondary-bg: var(--irp-slate-100);

  --bs-success: var(--irp-valide);
  --bs-success-rgb: 15, 122, 88;
  --bs-warning: var(--irp-attente);
  --bs-warning-rgb: 168, 106, 8;
  --bs-danger: var(--irp-rejete);
  --bs-danger-rgb: 191, 51, 46;
  --bs-info: var(--irp-cyan-600);
  --bs-info-rgb: 21, 128, 179;
  --bs-dark: var(--irp-slate);
  --bs-dark-rgb: 28, 51, 80;
  --bs-light: var(--irp-slate-50);
  --bs-light-rgb: 242, 244, 247;

  /* --- Surfaces ------------------------------------------------------ */

  /* Le fond de page a SA couleur, et non `slate-50` comme les autres
     surfaces claires. Avec elle, l'écart entre le fond et les cartes
     blanches valait 1,10:1 — en dessous du seuil de perception : la page
     d'accueil se lisait comme une grande feuille blanche où rien ne
     séparait les cartes. 1,19:1 les détache sans griser la page.

     La teinte est posée ici plutôt que dans la palette : `slate-50` sert
     aussi à `--irp-surface-2` et à `bg-light`, des fonds POSÉS SUR les
     cartes, qui doivent rester plus clairs que ce qui les porte. */
  --irp-page-bg: #e8ecf2;

  --bs-body-bg: var(--irp-page-bg);
  --bs-body-bg-rgb: 232, 236, 242;
  --bs-body-color: var(--irp-slate-600);
  --bs-body-color-rgb: 44, 69, 104;
  --bs-emphasis-color: var(--irp-slate);
  --bs-heading-color: var(--irp-slate);
  --bs-tertiary-bg: #ffffff;

  --bs-border-color: var(--irp-slate-200);
  --bs-border-color-translucent: rgba(28, 51, 80, .12);

  --bs-link-color: var(--irp-cyan-600);
  --bs-link-color-rgb: 21, 128, 179;
  --bs-link-hover-color: var(--irp-cyan-700);
  --bs-link-hover-color-rgb: 16, 101, 140;

  --bs-code-color: var(--irp-cyan-700);

  /* --- Surfaces propres au projet ----------------------------------- */
  --irp-surface: #ffffff;
  --irp-surface-2: var(--irp-slate-50);
  --irp-surface-3: var(--irp-slate-100);
  --irp-border: var(--irp-slate-200);
  --irp-border-soft: var(--irp-slate-100);
  --irp-text: var(--irp-slate);
  --irp-text-muted: var(--irp-slate-400);
  --irp-heading: var(--irp-slate);
  --irp-nav-bg: rgba(255, 255, 255, .88);

  /* --- Fonds subtils des états -------------------------------------- */
  --irp-valide-bg:  #e6f4ef;
  --irp-attente-bg: #fbf1e0;
  --irp-rejete-bg:  #fbe9e8;
  --irp-retard-bg:  #fbeee6;
  --irp-valide-text:  #0b5c42;
  --irp-attente-text: #7d4e06;
  --irp-rejete-text:  #8f2622;
  --irp-retard-text:  #8a3b0b;

  /* --- Typographie et formes ---------------------------------------- */
  --bs-body-font-family: var(--irp-font-sans);
  --bs-body-font-size: .9375rem;   /* 15px : densité maîtrisée */
  --bs-body-line-height: 1.55;
  --bs-body-font-weight: 400;

  --bs-border-radius: var(--irp-radius);
  --bs-border-radius-sm: var(--irp-radius-sm);
  --bs-border-radius-lg: var(--irp-radius-lg);
  --bs-border-radius-xl: 18px;
  --bs-border-radius-pill: var(--irp-radius-pill);

  --bs-box-shadow-sm: var(--irp-shadow-sm);
  --bs-box-shadow: var(--irp-shadow);
  --bs-box-shadow-lg: var(--irp-shadow-lg);

  color-scheme: light;
}

/* =====================================================================
   4. MODE SOMBRE — natif Bootstrap, bascule mémorisée en localStorage
   ===================================================================== */

[data-bs-theme='dark'] {
  --bs-primary: var(--irp-cyan-400);
  --bs-primary-rgb: 63, 173, 224;
  --bs-primary-text-emphasis: var(--irp-cyan-300);
  --bs-primary-bg-subtle: rgba(27, 157, 217, .14);
  --bs-primary-border-subtle: rgba(27, 157, 217, .32);

  --bs-secondary: var(--irp-slate-300);
  --bs-secondary-rgb: 159, 173, 193;
  --bs-secondary-color: var(--irp-slate-300);
  --bs-secondary-bg: var(--irp-slate-800);

  --bs-success: #34b98c;
  --bs-success-rgb: 52, 185, 140;
  --bs-warning: #e0a33c;
  --bs-warning-rgb: 224, 163, 60;
  --bs-danger: #e8706a;
  --bs-danger-rgb: 232, 112, 106;
  --bs-info: var(--irp-cyan-300);
  --bs-info-rgb: 111, 195, 232;

  --bs-body-bg: var(--irp-slate-950);
  --bs-body-bg-rgb: 10, 20, 32;
  --bs-body-color: #b8c4d4;
  --bs-body-color-rgb: 184, 196, 212;
  --bs-emphasis-color: #eef2f7;
  --bs-heading-color: #eef2f7;
  --bs-tertiary-bg: var(--irp-slate-900);

  --bs-border-color: rgba(159, 173, 193, .18);
  --bs-border-color-translucent: rgba(159, 173, 193, .14);

  --bs-link-color: var(--irp-cyan-300);
  --bs-link-color-rgb: 111, 195, 232;
  --bs-link-hover-color: var(--irp-cyan-200);
  --bs-link-hover-color-rgb: 166, 217, 241;

  --bs-code-color: var(--irp-cyan-300);

  --irp-surface: #12213a;
  --irp-surface-2: var(--irp-slate-900);
  --irp-surface-3: #1a2c48;
  --irp-border: rgba(159, 173, 193, .18);
  --irp-border-soft: rgba(159, 173, 193, .10);
  --irp-text: #eef2f7;
  --irp-text-muted: #8ea0b8;
  --irp-heading: #eef2f7;
  --irp-nav-bg: rgba(18, 33, 58, .88);

  --irp-valide-bg:  rgba(52, 185, 140, .14);
  --irp-attente-bg: rgba(224, 163, 60, .14);
  --irp-rejete-bg:  rgba(232, 112, 106, .14);
  --irp-retard-bg:  rgba(234, 133, 74, .14);
  --irp-valide-text:  #5fd3ab;
  --irp-attente-text: #f0be6b;
  --irp-rejete-text:  #f39894;
  --irp-retard-text:  #f0a678;

  /* Les ombres portées sont inopérantes sur fond sombre : on s'appuie
     sur les bordures et les écarts de luminosité entre surfaces. */
  --irp-shadow-xs: none;
  --irp-shadow-sm: 0 1px 2px rgba(0, 0, 0, .35);
  --irp-shadow:    0 4px 14px rgba(0, 0, 0, .38);
  --irp-shadow-lg: 0 16px 34px rgba(0, 0, 0, .45);

  color-scheme: dark;
}

/* =====================================================================
   5. BASE TYPOGRAPHIQUE
   ===================================================================== */

body {
  font-family: var(--irp-font-sans);
  font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: var(--bs-body-bg);
  color: var(--bs-body-color);
  letter-spacing: -0.005em;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  color: var(--irp-heading);
  font-weight: 600;
  letter-spacing: -0.021em;
  line-height: 1.25;
}

h1, .h1 { font-size: clamp(1.5rem, 1.2rem + 1.1vw, 1.9rem); font-weight: 700; }
h2, .h2 { font-size: clamp(1.25rem, 1.1rem + .6vw, 1.5rem); }
h3, .h3 { font-size: 1.15rem; }
h4, .h4 { font-size: 1.02rem; }
h5, .h5 { font-size: .94rem; }
h6, .h6 { font-size: .86rem; }

a { text-underline-offset: .2em; transition: color var(--irp-transition); }

hr {
  border-color: var(--irp-border);
  opacity: 1;
}

::selection {
  background: var(--irp-cyan-200);
  color: var(--irp-slate);
}
[data-bs-theme='dark'] ::selection {
  background: var(--irp-cyan-800);
  color: #fff;
}

/* Anneau de focus unique pour tout le site : visible, aux couleurs de marque. */
:focus-visible {
  outline: 2px solid var(--irp-cyan);
  outline-offset: 2px;
  border-radius: var(--irp-radius-sm);
}

/* =====================================================================
   6. COMPOSANTS BOOTSTRAP RÉACCORDÉS
   ===================================================================== */

/* --- Boutons -------------------------------------------------------- */
.btn {
  --bs-btn-font-weight: 500;
  --bs-btn-padding-y: .45rem;
  --bs-btn-padding-x: .95rem;
  --bs-btn-font-size: .9rem;
  --bs-btn-border-radius: var(--irp-radius-sm);
  transition: background-color var(--irp-transition), border-color var(--irp-transition),
              color var(--irp-transition), box-shadow var(--irp-transition), transform var(--irp-transition);
}

.btn:active { transform: translateY(1px); }

.btn-lg { --bs-btn-padding-y: .62rem; --bs-btn-padding-x: 1.35rem; --bs-btn-font-size: .98rem; }
.btn-sm { --bs-btn-padding-y: .28rem; --bs-btn-padding-x: .7rem; --bs-btn-font-size: .82rem; }

.btn-primary {
  --bs-btn-bg: var(--irp-cyan);
  --bs-btn-border-color: var(--irp-cyan);
  --bs-btn-color: #fff;
  --bs-btn-hover-bg: var(--irp-cyan-600);
  --bs-btn-hover-border-color: var(--irp-cyan-600);
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--irp-cyan-700);
  --bs-btn-active-border-color: var(--irp-cyan-700);
  --bs-btn-disabled-bg: var(--irp-cyan-200);
  --bs-btn-disabled-border-color: var(--irp-cyan-200);
  --bs-btn-disabled-color: #fff;
  box-shadow: 0 1px 2px rgba(21, 128, 179, .28);
}
.btn-primary:hover { box-shadow: 0 3px 10px rgba(21, 128, 179, .30); }

.btn-outline-primary {
  --bs-btn-color: var(--irp-cyan-600);
  --bs-btn-border-color: var(--irp-cyan-200);
  --bs-btn-hover-bg: var(--irp-cyan-50);
  --bs-btn-hover-border-color: var(--irp-cyan);
  --bs-btn-hover-color: var(--irp-cyan-700);
  --bs-btn-active-bg: var(--irp-cyan-100);
  --bs-btn-active-border-color: var(--irp-cyan);
  --bs-btn-active-color: var(--irp-cyan-700);
}
[data-bs-theme='dark'] .btn-outline-primary {
  --bs-btn-color: var(--irp-cyan-300);
  --bs-btn-border-color: rgba(27, 157, 217, .38);
  --bs-btn-hover-bg: rgba(27, 157, 217, .14);
  --bs-btn-hover-color: var(--irp-cyan-200);
  --bs-btn-active-bg: rgba(27, 157, 217, .22);
}

.btn-dark {
  --bs-btn-bg: var(--irp-slate);
  --bs-btn-border-color: var(--irp-slate);
  --bs-btn-hover-bg: var(--irp-slate-600);
  --bs-btn-hover-border-color: var(--irp-slate-600);
  --bs-btn-active-bg: var(--irp-slate-900);
}

.btn-light {
  --bs-btn-bg: var(--irp-surface);
  --bs-btn-border-color: var(--irp-border);
  --bs-btn-color: var(--irp-text);
  --bs-btn-hover-bg: var(--irp-surface-2);
  --bs-btn-hover-border-color: var(--irp-slate-300);
  --bs-btn-hover-color: var(--irp-text);
  --bs-btn-active-bg: var(--irp-surface-3);
  --bs-btn-active-color: var(--irp-text);
}

.btn-outline-secondary {
  --bs-btn-color: var(--irp-slate-500);
  --bs-btn-border-color: var(--irp-border);
  --bs-btn-hover-bg: var(--irp-surface-2);
  --bs-btn-hover-border-color: var(--irp-slate-300);
  --bs-btn-hover-color: var(--irp-text);
  --bs-btn-active-bg: var(--irp-surface-3);
  --bs-btn-active-color: var(--irp-text);
}
[data-bs-theme='dark'] .btn-outline-secondary {
  --bs-btn-color: var(--irp-text-muted);
  --bs-btn-hover-color: var(--irp-text);
}

.btn-link {
  --bs-btn-color: var(--bs-link-color);
  --bs-btn-hover-color: var(--bs-link-hover-color);
  --bs-btn-font-weight: 500;
  text-decoration: none;
}
.btn-link:hover { text-decoration: underline; }

/* Bouton d'icône carré, très utilisé dans les barres d'action. */
.btn-icon {
  --bs-btn-padding-x: .5rem;
  --bs-btn-padding-y: .5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  aspect-ratio: 1;
}
.btn-icon.btn-sm { --bs-btn-padding-x: .35rem; --bs-btn-padding-y: .35rem; }

/* --- Cartes --------------------------------------------------------- */
.card {
  --bs-card-bg: var(--irp-surface);
  --bs-card-border-color: var(--irp-border-soft);
  --bs-card-border-radius: var(--irp-radius);
  --bs-card-inner-border-radius: calc(var(--irp-radius) - 1px);
  --bs-card-spacer-y: 1.1rem;
  --bs-card-spacer-x: 1.1rem;
  --bs-card-cap-bg: transparent;
  --bs-card-cap-padding-y: .85rem;
  box-shadow: var(--irp-shadow-sm);
  transition: box-shadow var(--irp-transition), transform var(--irp-transition),
              border-color var(--irp-transition);
}

.card-header {
  border-bottom-color: var(--irp-border-soft);
  font-weight: 600;
  color: var(--irp-heading);
}

.card-footer {
  background: transparent;
  border-top-color: var(--irp-border-soft);
}

/* --- Formulaires ---------------------------------------------------- */
.form-control,
.form-select {
  --bs-border-radius: var(--irp-radius-sm);
  background-color: var(--irp-surface);
  border-color: var(--irp-border);
  color: var(--irp-text);
  padding: .45rem .7rem;
  font-size: .9rem;
  transition: border-color var(--irp-transition), box-shadow var(--irp-transition);
}

/* Place du chevron : le padding commun ci-dessus écrase celui que Bootstrap
   réserve à droite de la liste. Sans lui, une liste en largeur automatique
   (w-auto) prend la largeur de son texte et le chevron le recouvre. */
.form-select {
  padding-right: 2.25rem;
  background-position: right .7rem center;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--irp-cyan-400);
  box-shadow: 0 0 0 3px rgba(27, 157, 217, .16);
  background-color: var(--irp-surface);
  color: var(--irp-text);
}

.form-control::placeholder { color: var(--irp-text-muted); opacity: 1; }

.form-control-lg { padding: .62rem .9rem; font-size: .98rem; }
.form-control-sm { padding: .3rem .55rem; font-size: .82rem; }

.form-label {
  font-size: .82rem;
  font-weight: 600;
  color: var(--irp-heading);
  margin-bottom: .3rem;
  letter-spacing: -0.005em;
}

.form-text { font-size: .78rem; color: var(--irp-text-muted); }

.input-group-text {
  background-color: var(--irp-surface-2);
  border-color: var(--irp-border);
  color: var(--irp-text-muted);
  font-size: .86rem;
}

.form-check-input {
  border-color: var(--irp-slate-300);
  width: 1.05em;
  height: 1.05em;
  margin-top: .2em;
}
.form-check-input:checked {
  background-color: var(--irp-cyan);
  border-color: var(--irp-cyan);
}
.form-check-input:focus {
  border-color: var(--irp-cyan-400);
  box-shadow: 0 0 0 3px rgba(27, 157, 217, .16);
}
.form-check-label { font-size: .89rem; }

.form-switch .form-check-input:checked {
  background-color: var(--irp-cyan);
  border-color: var(--irp-cyan);
}

.was-validated .form-control:invalid,
.form-control.is-invalid {
  border-color: var(--bs-danger);
  box-shadow: none;
}
.invalid-feedback { font-size: .78rem; }

/* --- Badges --------------------------------------------------------- */
.badge {
  --bs-badge-font-weight: 600;
  --bs-badge-font-size: .72rem;
  --bs-badge-padding-x: .55rem;
  --bs-badge-padding-y: .3rem;
  --bs-badge-border-radius: var(--irp-radius-sm);
  letter-spacing: .005em;
}

.badge.text-bg-primary {
  background-color: var(--irp-cyan) !important;
  color: #fff !important;
}

/* --- Alertes -------------------------------------------------------- */
.alert {
  --bs-alert-border-radius: var(--irp-radius);
  --bs-alert-padding-y: .7rem;
  --bs-alert-padding-x: .9rem;
  border-width: 1px;
  font-size: .89rem;
  display: flex;
  align-items: flex-start;
  gap: .6rem;
}

.alert > .bi { font-size: 1rem; line-height: 1.35; flex-shrink: 0; }
.alert .alert-heading { font-size: .92rem; font-weight: 600; margin-bottom: .15rem; }

.alert-success {
  --bs-alert-bg: var(--irp-valide-bg);
  --bs-alert-border-color: transparent;
  --bs-alert-color: var(--irp-valide-text);
}
.alert-warning {
  --bs-alert-bg: var(--irp-attente-bg);
  --bs-alert-border-color: transparent;
  --bs-alert-color: var(--irp-attente-text);
}
.alert-danger {
  --bs-alert-bg: var(--irp-rejete-bg);
  --bs-alert-border-color: transparent;
  --bs-alert-color: var(--irp-rejete-text);
}
.alert-info {
  --bs-alert-bg: var(--irp-cyan-50);
  --bs-alert-border-color: transparent;
  --bs-alert-color: var(--irp-cyan-700);
}
[data-bs-theme='dark'] .alert-info {
  --bs-alert-bg: rgba(27, 157, 217, .14);
  --bs-alert-color: var(--irp-cyan-200);
}

/* --- Tableaux ------------------------------------------------------- */
.table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--irp-text);
  --bs-table-border-color: var(--irp-border-soft);
  --bs-table-hover-bg: var(--irp-surface-2);
  --bs-table-striped-bg: var(--irp-surface-2);
  font-size: .88rem;
  margin-bottom: 0;
}

.table > thead th {
  font-size: .74rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--irp-text-muted);
  background: var(--irp-surface-2);
  border-bottom: 1px solid var(--irp-border);
  padding: .6rem .8rem;
  white-space: nowrap;
}

.table > tbody td {
  padding: .7rem .8rem;
  vertical-align: middle;
  border-bottom-color: var(--irp-border-soft);
}

.table > tbody tr:last-child td { border-bottom: 0; }

/* --- Pagination ----------------------------------------------------- */
.pagination {
  --bs-pagination-color: var(--irp-slate-500);
  --bs-pagination-bg: var(--irp-surface);
  --bs-pagination-border-color: var(--irp-border);
  --bs-pagination-border-radius: var(--irp-radius-sm);
  --bs-pagination-hover-color: var(--irp-cyan-700);
  --bs-pagination-hover-bg: var(--irp-cyan-50);
  --bs-pagination-hover-border-color: var(--irp-cyan-200);
  --bs-pagination-focus-bg: var(--irp-cyan-50);
  --bs-pagination-focus-box-shadow: 0 0 0 3px rgba(27, 157, 217, .16);
  --bs-pagination-active-bg: var(--irp-cyan);
  --bs-pagination-active-border-color: var(--irp-cyan);
  --bs-pagination-active-color: #fff;
  --bs-pagination-disabled-color: var(--irp-slate-300);
  --bs-pagination-disabled-bg: var(--irp-surface);
  --bs-pagination-disabled-border-color: var(--irp-border-soft);
  --bs-pagination-padding-x: .7rem;
  --bs-pagination-padding-y: .35rem;
  --bs-pagination-font-size: .86rem;
  gap: .25rem;
}

.pagination .page-link {
  border-radius: var(--irp-radius-sm);
  font-weight: 500;
  transition: background-color var(--irp-transition), color var(--irp-transition),
              border-color var(--irp-transition);
}
[data-bs-theme='dark'] .pagination {
  --bs-pagination-hover-bg: rgba(27, 157, 217, .14);
  --bs-pagination-focus-bg: rgba(27, 157, 217, .14);
  --bs-pagination-color: var(--irp-text-muted);
}

/* --- Modals --------------------------------------------------------- */
.modal-content {
  --bs-modal-bg: var(--irp-surface);
  --bs-modal-border-color: transparent;
  --bs-modal-border-radius: var(--irp-radius-lg);
  --bs-modal-header-border-color: var(--irp-border-soft);
  --bs-modal-footer-border-color: var(--irp-border-soft);
  --bs-modal-padding: 1.25rem;
  box-shadow: var(--irp-shadow-lg);
}

.modal-title { font-size: 1.05rem; font-weight: 600; }
.modal-backdrop { --bs-backdrop-bg: var(--irp-slate-900); --bs-backdrop-opacity: .55; }

/* --- Offcanvas (menu latéral coulissant) ---------------------------- */
.offcanvas {
  --bs-offcanvas-bg: var(--irp-surface);
  --bs-offcanvas-border-color: var(--irp-border-soft);
  --bs-offcanvas-width: 300px;
  --bs-offcanvas-padding-x: 1rem;
  --bs-offcanvas-padding-y: 1rem;
}

/* --- Dropdowns ------------------------------------------------------ */
.dropdown-menu {
  --bs-dropdown-bg: var(--irp-surface);
  --bs-dropdown-border-color: var(--irp-border-soft);
  --bs-dropdown-border-radius: var(--irp-radius);
  --bs-dropdown-link-color: var(--irp-text);
  --bs-dropdown-link-hover-bg: var(--irp-surface-2);
  --bs-dropdown-link-hover-color: var(--irp-text);
  --bs-dropdown-link-active-bg: var(--irp-cyan-50);
  --bs-dropdown-link-active-color: var(--irp-cyan-700);
  --bs-dropdown-padding-y: .35rem;
  --bs-dropdown-item-padding-y: .42rem;
  --bs-dropdown-item-padding-x: .75rem;
  --bs-dropdown-font-size: .88rem;
  box-shadow: var(--irp-shadow-lg);
}
[data-bs-theme='dark'] .dropdown-menu {
  --bs-dropdown-link-active-bg: rgba(27, 157, 217, .16);
  --bs-dropdown-link-active-color: var(--irp-cyan-200);
}

.dropdown-item { border-radius: var(--irp-radius-sm); }
.dropdown-menu > li { padding-inline: .35rem; }
.dropdown-header {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-weight: 600;
  color: var(--irp-text-muted);
}
.dropdown-divider { border-color: var(--irp-border-soft); }

/* --- Onglets et pilules --------------------------------------------- */
.nav-pills {
  --bs-nav-pills-border-radius: var(--irp-radius-sm);
  --bs-nav-link-color: var(--irp-slate-500);
  --bs-nav-pills-link-active-bg: var(--irp-cyan);
  --bs-nav-pills-link-active-color: #fff;
  --bs-nav-link-font-size: .88rem;
  --bs-nav-link-padding-y: .35rem;
  --bs-nav-link-padding-x: .8rem;
  gap: .25rem;
}

.nav-tabs {
  --bs-nav-tabs-border-color: var(--irp-border);
  --bs-nav-link-color: var(--irp-text-muted);
  --bs-nav-tabs-link-active-color: var(--irp-cyan-700);
  --bs-nav-tabs-link-active-bg: transparent;
  --bs-nav-tabs-link-active-border-color: transparent transparent var(--irp-cyan);
  --bs-nav-link-font-size: .9rem;
  --bs-nav-link-font-weight: 500;
  border-bottom-width: 1px;
  gap: .1rem;
}
.nav-tabs .nav-link { border-width: 0 0 2px; margin-bottom: -1px; }
.nav-tabs .nav-link:hover { border-bottom-color: var(--irp-border); }
[data-bs-theme='dark'] .nav-tabs { --bs-nav-tabs-link-active-color: var(--irp-cyan-300); }

/* --- Divers --------------------------------------------------------- */
.progress {
  --bs-progress-bg: var(--irp-surface-3);
  --bs-progress-bar-bg: var(--irp-cyan);
  --bs-progress-border-radius: var(--irp-radius-pill);
  --bs-progress-height: .5rem;
}

.list-group {
  --bs-list-group-bg: var(--irp-surface);
  --bs-list-group-border-color: var(--irp-border-soft);
  --bs-list-group-border-radius: var(--irp-radius);
  --bs-list-group-color: var(--irp-text);
  --bs-list-group-action-hover-bg: var(--irp-surface-2);
  --bs-list-group-action-hover-color: var(--irp-text);
  --bs-list-group-active-bg: var(--irp-cyan);
  --bs-list-group-active-border-color: var(--irp-cyan);
}

.tooltip { --bs-tooltip-bg: var(--irp-slate); --bs-tooltip-border-radius: var(--irp-radius-sm); }
.tooltip-inner { font-size: .78rem; padding: .35rem .6rem; }

/* =====================================================================
   Notification éphémère (App.toast)

   En NÉGATIF, sur l'ardoise de la marque, dans les deux thèmes. Un fond
   pâle se confondait avec le gris de la page et le blanc des cartes ; un
   bloc sombre se repère du premier coup d'œil, à l'endroit où le regard se
   trouve — en bas à droite, du côté des boutons.

   Le fond étant toujours le même, les tons du message n'ont qu'un seul
   contraste à tenir. Ils sont repris de la palette du thème sombre et
   vérifiés sur ce fond : vert 5,1:1, ambre 5,7:1, bleu 6,4:1, rouge 5,2:1,
   texte courant 12,8:1.
   ===================================================================== */
.toast {
  --bs-toast-bg: var(--irp-slate);
  --bs-toast-color: #ffffff;
  --bs-toast-border-color: transparent;
  --bs-toast-border-radius: var(--irp-radius);
  box-shadow: var(--irp-shadow-lg);

  --bs-success-rgb: 52, 185, 140;
  --bs-warning-rgb: 224, 163, 60;
  --bs-info-rgb: 111, 195, 232;
  /* Rouge éclairci : celui du thème sombre tombait à 4,2:1 sur l'ardoise. */
  --bs-danger-rgb: 239, 138, 132;
}

/* La croix de fermeture est noire par défaut : illisible sur ce fond. */
.toast .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
}

/* Appelée sans niveau, App.toast() pose « text-body » : la couleur du texte
   de la PAGE, donc foncée en thème clair, et invisible ici. */
.toast .text-body {
  color: var(--bs-toast-color) !important;
}

/* Sur une page déjà sombre, l'ardoise ne se détacherait plus : un filet
   cyan suffit à détourer la notification sans l'éclaircir. */
[data-bs-theme='dark'] .toast {
  --bs-toast-border-color: var(--irp-cyan-700);
}

.accordion {
  --bs-accordion-bg: var(--irp-surface);
  --bs-accordion-border-color: var(--irp-border-soft);
  --bs-accordion-border-radius: var(--irp-radius);
  --bs-accordion-btn-focus-box-shadow: 0 0 0 3px rgba(27, 157, 217, .16);
  --bs-accordion-active-bg: var(--irp-cyan-50);
  --bs-accordion-active-color: var(--irp-cyan-700);
  --bs-accordion-btn-padding-y: .8rem;
}
[data-bs-theme='dark'] .accordion {
  --bs-accordion-active-bg: rgba(27, 157, 217, .12);
  --bs-accordion-active-color: var(--irp-cyan-200);
}

.breadcrumb {
  --bs-breadcrumb-font-size: .8rem;
  --bs-breadcrumb-divider-color: var(--irp-slate-300);
  --bs-breadcrumb-item-active-color: var(--irp-text-muted);
  --bs-breadcrumb-item-padding-x: .45rem;
  --bs-breadcrumb-margin-bottom: 0;
}

.spinner-border, .spinner-grow { color: var(--irp-cyan); }

/* =====================================================================
   7. COMPOSANTS RÉUTILISABLES DU PROJET
   Définis dès maintenant pour que tous les modules métier s'appuient
   dessus au lieu de réinventer leurs propres styles.
   ===================================================================== */

/* --- 7.1 Carte de contenu ------------------------------------------- */
.irp-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--irp-surface);
  border: 1px solid var(--irp-border-soft);
  border-radius: var(--irp-radius);
  box-shadow: var(--irp-shadow-sm);
  overflow: hidden;
  transition: box-shadow var(--irp-transition), transform var(--irp-transition),
              border-color var(--irp-transition);
}

.irp-card__media {
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, var(--irp-cyan-100), var(--irp-slate-100));
  object-fit: cover;
  width: 100%;
  display: block;
}
[data-bs-theme='dark'] .irp-card__media {
  background: linear-gradient(135deg, var(--irp-cyan-800), var(--irp-slate-800));
}

.irp-card__body { padding: 1rem 1.05rem; display: flex; flex-direction: column; gap: .4rem; flex: 1 1 auto; }
.irp-card__eyebrow {
  font-size: .72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--irp-cyan-600);
}
[data-bs-theme='dark'] .irp-card__eyebrow { color: var(--irp-cyan-300); }

.irp-card__title {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--irp-heading);
  margin: 0;
}
.irp-card__text { font-size: .87rem; color: var(--irp-text-muted); margin: 0; }
.irp-card__footer {
  padding: .7rem 1.05rem;
  border-top: 1px solid var(--irp-border-soft);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  font-size: .8rem;
  color: var(--irp-text-muted);
}

/* Survol subtil : léger soulèvement, bordure qui s'affirme. */
.irp-card--hover:hover,
.irp-card--hover:focus-within {
  transform: translateY(-2px);
  box-shadow: var(--irp-shadow);
  border-color: var(--irp-cyan-200);
}
[data-bs-theme='dark'] .irp-card--hover:hover,
[data-bs-theme='dark'] .irp-card--hover:focus-within {
  border-color: rgba(27, 157, 217, .35);
}

/* Toute la carte cliquable sans imbriquer de lien dans un lien. */
.irp-card__link::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* --- 7.2 Badges de statut ------------------------------------------- */
.irp-badge {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .22rem .55rem;
  border-radius: var(--irp-radius-sm);
  font-size: .74rem;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
  border: 1px solid transparent;
}

.irp-badge .bi { font-size: .8em; }

/* Les quatre statuts métier. L'icône double l'information portée par la
   couleur : le statut reste lisible en cas de daltonisme ou d'impression. */
.irp-badge--valide {
  background: var(--irp-valide-bg);
  color: var(--irp-valide-text);
  border-color: color-mix(in srgb, var(--irp-valide) 22%, transparent);
}
.irp-badge--en-attente {
  background: var(--irp-attente-bg);
  color: var(--irp-attente-text);
  border-color: color-mix(in srgb, var(--irp-attente) 22%, transparent);
}
.irp-badge--rejete {
  background: var(--irp-rejete-bg);
  color: var(--irp-rejete-text);
  border-color: color-mix(in srgb, var(--irp-rejete) 22%, transparent);
}
.irp-badge--en-retard {
  background: var(--irp-retard-bg);
  color: var(--irp-retard-text);
  border-color: color-mix(in srgb, var(--irp-retard) 22%, transparent);
}
.irp-badge--neutre {
  background: var(--irp-surface-3);
  color: var(--irp-text-muted);
  border-color: var(--irp-border-soft);
}
.irp-badge--accent {
  background: var(--irp-cyan-50);
  color: var(--irp-cyan-700);
  border-color: var(--irp-cyan-200);
}
[data-bs-theme='dark'] .irp-badge--accent {
  background: rgba(27, 157, 217, .16);
  color: var(--irp-cyan-200);
  border-color: rgba(27, 157, 217, .32);
}

/* Pastille de statut seule, pour les listes denses. */
.irp-dot {
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}
.irp-dot--valide     { background: var(--irp-valide); }
.irp-dot--en-attente { background: var(--irp-attente); }
.irp-dot--rejete     { background: var(--irp-rejete); }
.irp-dot--en-retard  { background: var(--irp-retard); }

/* --- 7.3 Tableau responsive : lignes empilées en cartes sur mobile --- */
/* Chaque <td> porte un data-label repris comme intitulé en vue mobile.
   Aucun JavaScript n'est nécessaire : la bascule est purement CSS. */
.irp-table-wrap {
  background: var(--irp-surface);
  border: 1px solid var(--irp-border-soft);
  border-radius: var(--irp-radius);
  box-shadow: var(--irp-shadow-sm);
  overflow: hidden;
}

.irp-table { width: 100%; margin: 0; }

@media (max-width: 767.98px) {
  .irp-table-wrap {
    background: transparent;
    border: 0;
    box-shadow: none;
    overflow: visible;
  }

  .irp-table thead { display: none; }

  .irp-table,
  .irp-table tbody,
  .irp-table tr,
  .irp-table td {
    display: block;
    width: 100%;
  }

  .irp-table tr {
    background: var(--irp-surface);
    border: 1px solid var(--irp-border-soft);
    border-radius: var(--irp-radius);
    box-shadow: var(--irp-shadow-sm);
    padding: .35rem .85rem;
    margin-bottom: .6rem;
  }

  .irp-table td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .42rem 0;
    border: 0;
    border-bottom: 1px solid var(--irp-border-soft);
    text-align: right;
  }

  .irp-table tr td:last-child { border-bottom: 0; }

  .irp-table td::before {
    content: attr(data-label);
    font-size: .74rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--irp-text-muted);
    text-align: left;
    flex-shrink: 0;
  }

  /* Une cellule marquée .irp-table__primary sert de titre à la carte. */
  .irp-table td.irp-table__primary {
    display: block;
    text-align: left;
    font-weight: 600;
    font-size: .95rem;
    color: var(--irp-heading);
    padding-top: .6rem;
  }
  .irp-table td.irp-table__primary::before { display: none; }

  /* La cellule d'actions occupe toute la largeur, alignée à droite. */
  .irp-table td.irp-table__actions {
    justify-content: flex-end;
    padding-top: .6rem;
  }
  .irp-table td.irp-table__actions::before { display: none; }
}

/* --- 7.4 Indicateur chiffré (tuiles de tableau de bord) ------------- */
.irp-stat {
  display: flex;
  align-items: flex-start;
  gap: .85rem;
  padding: 1rem 1.05rem;
  background: var(--irp-surface);
  border: 1px solid var(--irp-border-soft);
  border-radius: var(--irp-radius);
  box-shadow: var(--irp-shadow-sm);
  height: 100%;
}

.irp-stat__icon {
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  flex-shrink: 0;
  border-radius: var(--irp-radius-sm);
  background: var(--irp-cyan-50);
  color: var(--irp-cyan-600);
  font-size: 1.05rem;
}
[data-bs-theme='dark'] .irp-stat__icon {
  background: rgba(27, 157, 217, .14);
  color: var(--irp-cyan-300);
}

.irp-stat__icon--valide  { background: var(--irp-valide-bg);  color: var(--irp-valide-text); }
.irp-stat__icon--attente { background: var(--irp-attente-bg); color: var(--irp-attente-text); }
.irp-stat__icon--retard  { background: var(--irp-retard-bg);  color: var(--irp-retard-text); }

.irp-stat__body { min-width: 0; }
.irp-stat__value {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--irp-heading);
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.irp-stat__label {
  font-size: .78rem;
  color: var(--irp-text-muted);
  margin-top: .1rem;
}
.irp-stat__trend {
  display: inline-flex;
  align-items: center;
  gap: .15rem;
  font-size: .74rem;
  font-weight: 600;
  margin-top: .3rem;
}
.irp-stat__trend--up   { color: var(--irp-valide-text); }
.irp-stat__trend--down { color: var(--irp-rejete-text); }

/* --- 7.5 En-tête de page -------------------------------------------- */
.irp-page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: 1.1rem;
}

.irp-page-header__title { margin: 0; }
.irp-page-header__subtitle {
  font-size: .85rem;
  color: var(--irp-text-muted);
  margin: .15rem 0 0;
}
.irp-page-header__actions { display: flex; flex-wrap: wrap; gap: .45rem; }

/* --- 7.5 bis Liste de définitions -----------------------------------
   Intitulé / valeur, comme sur la fiche d'une demande ou du registre
   RGPD. Deux colonnes dès qu'il y a la place, empilées sur téléphone :
   un intitulé et sa valeur côte à côte sur 320 px se coupent tous les
   deux, et deux colonnes étroites se lisent plus mal qu'une large.
   La feuille est chargée par le site ET par l'administration. */
.irp-dl { margin: 0; }

.irp-dl > div {
  display: grid;
  gap: .1rem .9rem;
  padding: .4rem 0;
  border-bottom: 1px solid var(--irp-border-soft);
}

.irp-dl > div:last-child { border-bottom: 0; }

.irp-dl dt {
  font-size: .78rem;
  font-weight: 600;
  color: var(--irp-text-muted);
}

.irp-dl dd { margin: 0; }

@media (min-width: 576px) {
  .irp-dl > div { grid-template-columns: 11rem 1fr; }
  .irp-dl dt { padding-top: .05rem; }
}

/* --- 7.6 Section de contenu ----------------------------------------- */
.irp-section { margin-bottom: 1.6rem; }

/* Section suivie d'un filet : une démarcation légère entre deux blocs qui
   n'ont rien à voir l'un avec l'autre. Sur l'accueil, les raccourcis et
   les actualités se touchaient sans rien pour les séparer — le titre
   « Dernières actualités » ouvre bien le second bloc, mais le premier n'a
   pas de titre pour fermer le sien. */
.irp-section--filet {
  padding-bottom: 1.4rem;
  border-bottom: 1px solid var(--irp-border-soft);
}
.irp-section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: .7rem;
}
/* Un filet bleu et une graisse franche : les blocs de l'accueil (« En ce
   moment », « Dernières actualités », « À venir ») avaient le même poids que
   le texte des cartes, et l'œil ne savait pas par où entrer dans la page. */
.irp-section__title {
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.2;
  margin: 0;
  padding-left: .6rem;
  border-left: 3px solid var(--irp-cyan);
  color: var(--irp-heading);
}
.irp-section__link { font-size: .82rem; font-weight: 500; white-space: nowrap; }

/* --- 7.7 État vide --------------------------------------------------- */
.irp-empty {
  text-align: center;
  padding: 2.5rem 1.25rem;
  background: var(--irp-surface);
  border: 1px dashed var(--irp-border);
  border-radius: var(--irp-radius);
  color: var(--irp-text-muted);
}
.irp-empty__icon { font-size: 1.9rem; color: var(--irp-slate-300); display: block; margin-bottom: .5rem; }
.irp-empty__title { font-size: .95rem; font-weight: 600; color: var(--irp-heading); margin-bottom: .2rem; }
.irp-empty__text { font-size: .85rem; margin: 0 auto; max-width: 34rem; }

/* --- 7.8 Logo de marque ---------------------------------------------- */
/* Le logo porte deja le nom « IRP CELAD » et la signature « Instances
   representatives du personnel » : aucun texte n'est ajoute a cote.
   La bulle etant pleine, il tient sur fond clair comme sur fond sombre,
   sans variante ni filtre. Partage par le front et l'admin. */
.irp-brand__logo {
  display: block;
  height: 2.15rem;
  width: auto;
  flex-shrink: 0;
}

/* --- 7.9 Bouton d'icone d'en-tete ------------------------------------- */
/* Utilise par l'en-tete du front ET par la barre superieure de l'admin :
   il doit donc vivre dans theme.css, charge par les deux applications. */
.irp-header__btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.15rem;
  height: 2.15rem;
  border: 0;
  border-radius: var(--irp-radius-sm);
  background: transparent;
  color: var(--irp-slate-500);
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color var(--irp-transition), color var(--irp-transition);
}
.irp-header__btn:hover {
  background: var(--irp-surface-3);
  color: var(--irp-slate);
}
[data-bs-theme='dark'] .irp-header__btn { color: var(--irp-text-muted); }
[data-bs-theme='dark'] .irp-header__btn:hover { color: var(--irp-text); }

/* Pastille de comptage posee sur un bouton d'icone (notifications). */
.irp-header__badge {
  position: absolute;
  top: .28rem;
  right: .3rem;
  min-width: .95rem;
  height: .95rem;
  padding: 0 .2rem;
  border-radius: var(--irp-radius-pill);
  background: var(--irp-rejete);
  color: #fff;
  font-size: .6rem;
  font-weight: 700;
  line-height: .95rem;
  text-align: center;
}

/* --- 7.10 Bascule de theme -------------------------------------------- */
/* Une seule icone est visible a la fois, selon le theme actif. */
.irp-theme-toggle .bi-moon-stars { display: inline; }
.irp-theme-toggle .bi-sun { display: none; }
[data-bs-theme='dark'] .irp-theme-toggle .bi-moon-stars { display: none; }
[data-bs-theme='dark'] .irp-theme-toggle .bi-sun { display: inline; }

/* --- 7.11 Messages flash ---------------------------------------------- */
.irp-flash { margin-bottom: 1rem; }
.irp-flash .alert { margin-bottom: .5rem; box-shadow: var(--irp-shadow-xs); }
.irp-flash .alert:last-child { margin-bottom: 0; }

/* --- 7.12 Fiche de detail --------------------------------------------- */
/* Paires libelle / valeur, utilisees dans les modales et les fiches, cote
   front comme cote admin. */
.irp-detail {
  display: grid;
  grid-template-columns: minmax(6rem, auto) 1fr;
  gap: .45rem .9rem;
  font-size: .86rem;
}
.irp-detail__label { color: var(--irp-text-muted); font-weight: 500; }
.irp-detail__value { color: var(--irp-text); }

/* --- 7.13 Avatar ----------------------------------------------------- */
.irp-avatar {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--irp-cyan-100);
  color: var(--irp-cyan-700);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .01em;
  text-transform: uppercase;
  overflow: hidden;
}
.irp-avatar img { width: 100%; height: 100%; object-fit: cover; }
.irp-avatar--sm { width: 1.6rem; height: 1.6rem; font-size: .64rem; }
.irp-avatar--lg { width: 2.6rem; height: 2.6rem; font-size: .9rem; }
[data-bs-theme='dark'] .irp-avatar {
  background: rgba(27, 157, 217, .18);
  color: var(--irp-cyan-200);
}

/* --- 7.14 Barre de recherche ---------------------------------------- */
.irp-search {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  max-width: 26rem;
}
.irp-search__icon {
  position: absolute;
  left: .65rem;
  color: var(--irp-text-muted);
  font-size: .9rem;
  pointer-events: none;
}
.irp-search__input {
  width: 100%;
  padding-left: 2.05rem;
  background: var(--irp-surface-2);
  border-color: transparent;
}
.irp-search__input:focus { background: var(--irp-surface); }

/* --- 7.15 Séparateur avec intitulé ---------------------------------- */
.irp-divider {
  display: flex;
  align-items: center;
  gap: .7rem;
  font-size: .74rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--irp-text-muted);
  margin: 1.1rem 0 .6rem;
}
.irp-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--irp-border-soft);
}

/* --- 7.16 Fil d’activité --------------------------------------------- */
.irp-timeline { list-style: none; margin: 0; padding: 0; }
.irp-timeline__item {
  position: relative;
  padding: 0 0 .95rem 1.25rem;
  border-left: 1px solid var(--irp-border);
  font-size: .85rem;
}
.irp-timeline__item:last-child { padding-bottom: 0; border-left-color: transparent; }
.irp-timeline__item::before {
  content: '';
  position: absolute;
  left: -4px;
  top: .35rem;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--irp-cyan);
  box-shadow: 0 0 0 3px var(--irp-surface);
}
.irp-timeline__time { font-size: .74rem; color: var(--irp-text-muted); display: block; }

/* =====================================================================
   8. UTILITAIRES ET ACCESSIBILITÉ
   ===================================================================== */

.irp-text-muted { color: var(--irp-text-muted) !important; }
.irp-text-brand { color: var(--irp-cyan-600) !important; }
[data-bs-theme='dark'] .irp-text-brand { color: var(--irp-cyan-300) !important; }

.irp-surface { background: var(--irp-surface) !important; }
.irp-surface-2 { background: var(--irp-surface-2) !important; }

.irp-num { font-variant-numeric: tabular-nums; }

/* Tronque proprement sur n lignes. */
.irp-clamp-2,
.irp-clamp-3 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.irp-clamp-2 { -webkit-line-clamp: 2; line-clamp: 2; }
.irp-clamp-3 { -webkit-line-clamp: 3; line-clamp: 3; }

/* Lien d'évitement, révélé au premier Tab. */
.irp-skip-link {
  position: absolute;
  left: .75rem;
  top: -3rem;
  z-index: 2000;
  padding: .5rem .9rem;
  background: var(--irp-cyan);
  color: #fff;
  border-radius: var(--irp-radius-sm);
  font-size: .85rem;
  font-weight: 600;
  text-decoration: none;
  transition: top var(--irp-transition);
}
.irp-skip-link:focus { top: .75rem; color: #fff; }

/* Respect de la préférence système de réduction des animations. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .irp-card--hover:hover { transform: none; }
}

/* Impression : on retire les ombres et les zones de navigation. */
@media print {
  .irp-header,
  .irp-sidebar,
  .irp-footer,
  .irp-page-header__actions,
  .pagination { display: none !important; }

  .irp-card,
  .card,
  .irp-table-wrap { box-shadow: none !important; border-color: #ccc !important; }

  body { background: #fff !important; }
}

/* =====================================================================
   9. UTILITAIRES DE TAILLE DE TEXTE
   Le projet interdit tout CSS écrit dans les templates : ces classes
   remplacent les attributs style ponctuels sur les textes secondaires.
   ===================================================================== */

.irp-fs-xs { font-size: .74rem; }
.irp-fs-sm { font-size: .8rem; }
.irp-fs-md { font-size: .86rem; }
.irp-fs-lg { font-size: .95rem; }

/* Chevrons et icônes décoratives de petite taille. */
.irp-icon-xs { font-size: .65rem; }
.irp-icon-sm { font-size: .8rem; }

/* Largeur de lecture confortable pour un paragraphe isolé. */
.irp-measure { max-width: 32rem; }
.irp-measure-sm { max-width: 24rem; }

/* Icône d'indicateur réduite, réutilisée dans les listes. */
.irp-stat__icon--sm { width: 2.1rem; height: 2.1rem; font-size: .85rem; }