/* =========================================================================
   BIOPOINT AI CORE - SYSTEME DE DESIGN (biopoint.css)
   =========================================================================
   Feuille de style AUTONOME. L'application ne depend d'aucun CDN.

   POURQUOI PAS BOOTSTRAP
   ----------------------
   Les reseaux d'entreprise du commerce et de la grande distribution filtrent
   frequemment les CDN publics. Une interface qui s'effondre parce que
   cdn.jsdelivr.net est injoignable est inexploitable sur site. Par ailleurs un
   CDN voit passer l'adresse IP de chaque salarie qui ouvre son planning : c'est
   une donnee personnelle transmise a un tiers sans necessite.

   Cette feuille couvre exactement ce dont l'application se sert, en 1/8 du poids
   de Bootstrap, et garantit un rendu identique partout, y compris hors ligne.

   ORGANISATION
   ------------
     1. Jetons de conception       5. Composants
     2. Reinitialisation           6. Mise en page applicative
     3. Typographie                7. Accessibilite et preferences
     4. Grille et utilitaires

   MOBILE D'ABORD : les regles de base visent le telephone ; les points de rupture
   n'ajoutent que ce qu'un ecran plus large permet. Un salarie consulte son
   planning sur son telephone, jamais sur un poste fixe.
   ========================================================================= */

/* =========================================================================
   1. JETONS DE CONCEPTION
   ========================================================================= */
:root {
    /* --- Fonds, du plus profond au plus clair --- */
    --bp-bg:            #09090b;
    --bp-surface:       #121215;
    --bp-surface-2:     #18181c;
    --bp-glass:         rgba(18, 18, 21, 0.78);
    --bp-overlay:       rgba(4, 4, 6, 0.72);

    /* --- Bordures --- */
    --bp-border:        #27272a;
    --bp-border-strong: #3f3f46;

    /* --- Texte. Contraste verifie sur --bp-bg :
           primaire 17.8:1, secondaire 9.4:1, discret 5.1:1 (AA a partir de 4.5:1). --- */
    --bp-text:          #f8fafc;
    --bp-text-2:        #c7cad1;
    --bp-text-3:        #9ca3af;

    /* --- Couleurs de sens --- */
    --bp-primary:       #6366f1;
    --bp-primary-soft:  #818cf8;
    --bp-primary-glow:  rgba(99, 102, 241, 0.16);
    --bp-info:          #38bdf8;
    --bp-success:       #10b981;
    --bp-success-soft:  #34d399;
    --bp-warning:       #f59e0b;
    --bp-danger:        #ef4444;
    --bp-danger-soft:   #f87171;

    /* --- Rayons --- */
    --bp-r-sm:   8px;
    --bp-r:      12px;
    --bp-r-lg:   16px;
    --bp-r-xl:   20px;
    --bp-r-pill: 999px;

    /* --- Ombres --- */
    --bp-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
    --bp-shadow:    0 4px 16px rgba(0, 0, 0, 0.45);
    --bp-shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.55);

    /* --- Typographie. Pile systeme : aucun appel reseau, rendu natif sur
           chaque plateforme, et pas de saut de mise en page au chargement. --- */
    --bp-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", "Noto Sans", Arial, sans-serif;
    --bp-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
                    "DejaVu Sans Mono", monospace;

    /* --- Rythme vertical, base 4px --- */
    --bp-1: 0.25rem;  --bp-2: 0.5rem;   --bp-3: 1rem;
    --bp-4: 1.5rem;   --bp-5: 3rem;

    /* --- Squelette applicatif --- */
    --bp-sidebar-w: 280px;
    --bp-topbar-h:  64px;
    --bp-tabbar-h:  58px;

    /* --- Cible tactile minimale (recommandation WCAG 2.5.5) --- */
    --bp-tap: 44px;

    color-scheme: dark;
}

/* =========================================================================
   2. REINITIALISATION
   ========================================================================= */
*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;   /* pas de zoom auto du texte en paysage iOS */
    -moz-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    min-height: 100vh;
    font-family: var(--bp-font);
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--bp-text);
    background-color: var(--bp-bg);
    /* Halos diffus : profondeur sans image, donc sans requete supplementaire. */
    background-image:
        radial-gradient(ellipse at 0% 0%,     rgba(99, 102, 241, 0.10), transparent 45%),
        radial-gradient(ellipse at 100% 100%, rgba(16, 185, 129, 0.07), transparent 45%);
    background-attachment: fixed;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 { margin: 0 0 var(--bp-2); font-weight: 700; line-height: 1.25; }
p  { margin: 0 0 var(--bp-3); }
ul, ol { margin: 0 0 var(--bp-3); padding-left: 1.35rem; }
hr { border: 0; border-top: 1px solid var(--bp-border); margin: var(--bp-4) 0; }

a { color: var(--bp-primary-soft); text-decoration: none; }
a:hover { color: var(--bp-text); }

img, svg, video { max-width: 100%; height: auto; vertical-align: middle; }

button { font: inherit; color: inherit; }

table { border-collapse: collapse; width: 100%; }

/* Barres de defilement discretes, sans masquer l'affordance. */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.16);
    border-radius: var(--bp-r-pill);
}
::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.3); }
* { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.18) transparent; }

/* Anneau de focus visible partout : la navigation au clavier ne doit jamais
   se perdre. `:focus-visible` evite de l'afficher au clic a la souris. */
:focus-visible {
    outline: 2px solid var(--bp-primary-soft);
    outline-offset: 2px;
    border-radius: var(--bp-r-sm);
}

/* =========================================================================
   3. TYPOGRAPHIE ET COULEURS DE TEXTE
   ========================================================================= */
.small          { font-size: 0.82rem; }
.fs-1 { font-size: 2.25rem; } .fs-2 { font-size: 1.85rem; }
.fs-3 { font-size: 1.5rem; }  .fs-4 { font-size: 1.25rem; }
.fs-5 { font-size: 1.1rem; }  .fs-6 { font-size: 0.95rem; }

.fw-normal    { font-weight: 400; }
.fw-medium    { font-weight: 500; }
.fw-semibold  { font-weight: 600; }
.fw-bold      { font-weight: 700; }
.fw-extrabold { font-weight: 800; }

.font-monospace { font-family: var(--bp-font-mono); font-variant-numeric: tabular-nums; }
.text-uppercase { text-transform: uppercase; letter-spacing: 0.04em; }
.text-lowercase { text-transform: lowercase; }
.text-center { text-align: center; }
.text-start  { text-align: left; }
.text-end    { text-align: right; }
.text-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.text-nowrap   { white-space: nowrap; }
.tracking-tight { letter-spacing: -0.015em; }
.lh-1 { line-height: 1.1; }

.text-white     { color: var(--bp-text) !important; }
.text-body      { color: var(--bp-text); }
.text-secondary { color: var(--bp-text-2) !important; }
.text-muted     { color: var(--bp-text-3) !important; }
.text-primary   { color: var(--bp-primary-soft) !important; }
.text-info      { color: var(--bp-info) !important; }
.text-success   { color: var(--bp-success-soft) !important; }
.text-warning   { color: var(--bp-warning) !important; }
.text-danger    { color: var(--bp-danger-soft) !important; }
.text-dark      { color: #0b0b0d !important; }
.text-decoration-none { text-decoration: none !important; }

/* =========================================================================
   4. GRILLE ET UTILITAIRES
   ========================================================================= */

/* --- Conteneurs --- */
.container, .container-fluid {
    width: 100%;
    margin-inline: auto;
    padding-inline: var(--bp-3);
}
@media (min-width: 1400px) { .container { max-width: 1360px; } }

/* --- Grille 12 colonnes.
       `flex-wrap` plutot que CSS Grid : le comportement de repli des colonnes
       Bootstrap (une colonne sans largeur occupe l'espace restant) se reproduit
       exactement, et les gabarits existants n'ont pas a etre reecrits. --- */
.row {
    display: flex;
    flex-wrap: wrap;
    margin-inline: calc(var(--bp-gx, 0.75rem) * -1);
}
.row > * {
    width: 100%;
    max-width: 100%;
    padding-inline: var(--bp-gx, 0.75rem);
    margin-top: var(--bp-gy, 0);
}
.g-0  { --bp-gx: 0;      --bp-gy: 0; }
.g-1  { --bp-gx: 0.25rem; --bp-gy: 0.5rem; }
.g-2  { --bp-gx: 0.5rem;  --bp-gy: 1rem; }
.g-3  { --bp-gx: 0.75rem; --bp-gy: 1.5rem; }
.g-4  { --bp-gx: 1rem;    --bp-gy: 2rem; }
.g-1, .g-2, .g-3, .g-4 { margin-top: calc(var(--bp-gy) * -1); }

.col { flex: 1 0 0%; }
.col-auto { flex: 0 0 auto; width: auto; }
.col-1  { flex: 0 0 auto; width: 8.3333%; }
.col-2  { flex: 0 0 auto; width: 16.6667%; }
.col-3  { flex: 0 0 auto; width: 25%; }
.col-4  { flex: 0 0 auto; width: 33.3333%; }
.col-5  { flex: 0 0 auto; width: 41.6667%; }
.col-6  { flex: 0 0 auto; width: 50%; }
.col-7  { flex: 0 0 auto; width: 58.3333%; }
.col-8  { flex: 0 0 auto; width: 66.6667%; }
.col-9  { flex: 0 0 auto; width: 75%; }
.col-10 { flex: 0 0 auto; width: 83.3333%; }
.col-11 { flex: 0 0 auto; width: 91.6667%; }
.col-12 { flex: 0 0 auto; width: 100%; }

@media (min-width: 576px) {
    .col-sm-2  { flex: 0 0 auto; width: 16.6667%; }
    .col-sm-3  { flex: 0 0 auto; width: 25%; }
    .col-sm-4  { flex: 0 0 auto; width: 33.3333%; }
    .col-sm-5  { flex: 0 0 auto; width: 41.6667%; }
    .col-sm-6  { flex: 0 0 auto; width: 50%; }
    .col-sm-12 { flex: 0 0 auto; width: 100%; }
    .d-sm-block { display: block !important; }
    .d-sm-flex  { display: flex !important; }
    .d-sm-none  { display: none !important; }
}
@media (min-width: 768px) {
    .col-md-2  { flex: 0 0 auto; width: 16.6667%; }
    .col-md-3  { flex: 0 0 auto; width: 25%; }
    .col-md-4  { flex: 0 0 auto; width: 33.3333%; }
    .col-md-5  { flex: 0 0 auto; width: 41.6667%; }
    .col-md-6  { flex: 0 0 auto; width: 50%; }
    .col-md-7  { flex: 0 0 auto; width: 58.3333%; }
    .col-md-8  { flex: 0 0 auto; width: 66.6667%; }
    .col-md-12 { flex: 0 0 auto; width: 100%; }
    .d-md-block  { display: block !important; }
    .d-md-flex   { display: flex !important; }
    .d-md-inline { display: inline !important; }
    .d-md-none   { display: none !important; }
}
@media (min-width: 992px) {
    .col-lg-1  { flex: 0 0 auto; width: 8.3333%; }
    .col-lg-2  { flex: 0 0 auto; width: 16.6667%; }
    .col-lg-3  { flex: 0 0 auto; width: 25%; }
    .col-lg-4  { flex: 0 0 auto; width: 33.3333%; }
    .col-lg-5  { flex: 0 0 auto; width: 41.6667%; }
    .col-lg-6  { flex: 0 0 auto; width: 50%; }
    .col-lg-7  { flex: 0 0 auto; width: 58.3333%; }
    .col-lg-8  { flex: 0 0 auto; width: 66.6667%; }
    .col-lg-9  { flex: 0 0 auto; width: 75%; }
    .col-lg-12 { flex: 0 0 auto; width: 100%; }
    .d-lg-block { display: block !important; }
    .d-lg-flex  { display: flex !important; }
    .d-lg-none  { display: none !important; }
}
@media (min-width: 1200px) {
    .col-xl-3  { flex: 0 0 auto; width: 25%; }
    .col-xl-4  { flex: 0 0 auto; width: 33.3333%; }
    .col-xl-5  { flex: 0 0 auto; width: 41.6667%; }
    .col-xl-6  { flex: 0 0 auto; width: 50%; }
    .col-xl-7  { flex: 0 0 auto; width: 58.3333%; }
    .col-xl-8  { flex: 0 0 auto; width: 66.6667%; }
    .d-xl-block { display: block !important; }
    .d-xl-flex  { display: flex !important; }
    .d-xl-none  { display: none !important; }
}

/* --- Affichage et flux --- */
.d-none         { display: none !important; }
.d-block        { display: block !important; }
.d-inline       { display: inline !important; }
.d-inline-block { display: inline-block !important; }
.d-flex         { display: flex !important; }
.d-inline-flex  { display: inline-flex !important; }
.d-grid         { display: grid !important; }

.flex-row      { flex-direction: row !important; }
.flex-column   { flex-direction: column !important; }
.flex-wrap     { flex-wrap: wrap !important; }
.flex-nowrap   { flex-wrap: nowrap !important; }
.flex-grow-1   { flex-grow: 1 !important; }
.flex-shrink-0 { flex-shrink: 0 !important; }

.justify-content-start   { justify-content: flex-start !important; }
.justify-content-center  { justify-content: center !important; }
.justify-content-end     { justify-content: flex-end !important; }
.justify-content-between { justify-content: space-between !important; }
.justify-content-around  { justify-content: space-around !important; }

.align-items-start    { align-items: flex-start !important; }
.align-items-center   { align-items: center !important; }
.align-items-end      { align-items: flex-end !important; }
.align-items-baseline { align-items: baseline !important; }
.align-items-stretch  { align-items: stretch !important; }
.align-self-center    { align-self: center !important; }

.gap-1 { gap: 0.25rem !important; } .gap-2 { gap: 0.5rem !important; }
.gap-3 { gap: 1rem !important; }    .gap-4 { gap: 1.5rem !important; }

/* --- Espacements --- */
.m-0 { margin: 0 !important; }        .m-auto { margin: auto !important; }
.mt-0 { margin-top: 0 !important; }   .mb-0 { margin-bottom: 0 !important; }
.mt-1 { margin-top: .25rem !important; }  .mb-1 { margin-bottom: .25rem !important; }
.mt-2 { margin-top: .5rem !important; }   .mb-2 { margin-bottom: .5rem !important; }
.mt-3 { margin-top: 1rem !important; }    .mb-3 { margin-bottom: 1rem !important; }
.mt-4 { margin-top: 1.5rem !important; }  .mb-4 { margin-bottom: 1.5rem !important; }
.mt-5 { margin-top: 3rem !important; }    .mb-5 { margin-bottom: 3rem !important; }
.ms-1 { margin-left: .25rem !important; } .me-1 { margin-right: .25rem !important; }
.ms-2 { margin-left: .5rem !important; }  .me-2 { margin-right: .5rem !important; }
.ms-3 { margin-left: 1rem !important; }   .me-3 { margin-right: 1rem !important; }
.ms-auto { margin-left: auto !important; } .me-auto { margin-right: auto !important; }
.mx-auto { margin-inline: auto !important; }
.mx-1 { margin-inline: .25rem !important; }
.mx-2 { margin-inline: .5rem !important; }
.mx-3 { margin-inline: 1rem !important; }
.my-1 { margin-block: .25rem !important; }
.py-1 { padding-block: .25rem !important; }
.px-1 { padding-inline: .25rem !important; }
.pt-1 { padding-top: .25rem !important; }
.pb-1 { padding-bottom: .25rem !important; }
.ms-4 { margin-left: 1.5rem !important; }
.me-4 { margin-right: 1.5rem !important; }
.mt-auto { margin-top: auto !important; }
.gap-0 { gap: 0 !important; }
.flex-fill { flex: 1 1 auto !important; }
.align-middle { vertical-align: middle !important; }
.user-select-none { user-select: none !important; }
.my-2 { margin-block: .5rem !important; }  .my-3 { margin-block: 1rem !important; }
.my-4 { margin-block: 1.5rem !important; }
.mt-auto { margin-top: auto !important; }

.p-0 { padding: 0 !important; }
.p-1 { padding: .25rem !important; }  .p-2 { padding: .5rem !important; }
.p-3 { padding: 1rem !important; }    .p-4 { padding: 1.5rem !important; }
.p-5 { padding: 2.5rem !important; }
.pt-2 { padding-top: .5rem !important; }  .pb-2 { padding-bottom: .5rem !important; }
.pt-3 { padding-top: 1rem !important; }   .pb-3 { padding-bottom: 1rem !important; }
.pt-4 { padding-top: 1.5rem !important; } .pb-4 { padding-bottom: 1.5rem !important; }
.px-2 { padding-inline: .5rem !important; }  .py-2 { padding-block: .5rem !important; }
.px-3 { padding-inline: 1rem !important; }   .py-3 { padding-block: 1rem !important; }
.px-4 { padding-inline: 1.5rem !important; } .py-4 { padding-block: 1.5rem !important; }

/* --- Dimensions --- */
.w-100 { width: 100% !important; }   .w-auto { width: auto !important; }
.h-100 { height: 100% !important; }
.mw-100 { max-width: 100% !important; }
.overflow-auto   { overflow: auto !important; }
.overflow-hidden { overflow: hidden !important; }
.overflow-x-auto { overflow-x: auto !important; }

/* --- Fonds. `--bp-o` porte l'opacite, ce qui reproduit `bg-opacity-*`. --- */
.bg-dark    { background-color: rgba(18, 18, 21, var(--bp-o, 1)) !important; }
.bg-black   { background-color: rgba(0, 0, 0, var(--bp-o, 1)) !important; }
.bg-body    { background-color: var(--bp-surface) !important; }
.bg-primary { background-color: rgba(99, 102, 241, var(--bp-o, 1)) !important; }
.bg-info    { background-color: rgba(56, 189, 248, var(--bp-o, 1)) !important; }
.bg-success { background-color: rgba(16, 185, 129, var(--bp-o, 1)) !important; }
.bg-warning { background-color: rgba(245, 158, 11, var(--bp-o, 1)) !important; }
.bg-danger  { background-color: rgba(239, 68, 68, var(--bp-o, 1)) !important; }
.bg-secondary { background-color: rgba(113, 113, 122, var(--bp-o, 1)) !important; }
.bg-transparent { background-color: transparent !important; }
.bg-opacity-10 { --bp-o: 0.10; } .bg-opacity-25 { --bp-o: 0.25; }
.bg-opacity-50 { --bp-o: 0.50; } .bg-opacity-75 { --bp-o: 0.75; }

/* --- Bordures --- */
.border         { border: 1px solid var(--bp-border) !important; }
.border-0       { border: 0 !important; }
.border-top     { border-top: 1px solid var(--bp-border) !important; }
.border-bottom  { border-bottom: 1px solid var(--bp-border) !important; }
.border-start   { border-left: 1px solid var(--bp-border) !important; }
.border-secondary { border-color: var(--bp-border-strong) !important; }
.border-primary { border-color: rgba(99, 102, 241, var(--bp-bo, 1)) !important; }
.border-success { border-color: rgba(16, 185, 129, var(--bp-bo, 1)) !important; }
.border-warning { border-color: rgba(245, 158, 11, var(--bp-bo, 1)) !important; }
.border-danger  { border-color: rgba(239, 68, 68, var(--bp-bo, 1)) !important; }
.border-info    { border-color: rgba(56, 189, 248, var(--bp-bo, 1)) !important; }
.border-opacity-25 { --bp-bo: 0.25; } .border-opacity-50 { --bp-bo: 0.5; }

.rounded        { border-radius: var(--bp-r) !important; }
.rounded-0      { border-radius: 0 !important; }
.rounded-sm     { border-radius: var(--bp-r-sm) !important; }
.rounded-lg     { border-radius: var(--bp-r-lg) !important; }
.rounded-xl     { border-radius: var(--bp-r-xl) !important; }
.rounded-pill   { border-radius: var(--bp-r-pill) !important; }
.rounded-circle { border-radius: 50% !important; }

.shadow-sm { box-shadow: var(--bp-shadow-sm) !important; }
.shadow    { box-shadow: var(--bp-shadow) !important; }
.shadow-lg { box-shadow: var(--bp-shadow-lg) !important; }
.shadow-none { box-shadow: none !important; }

.position-relative { position: relative !important; }
.position-absolute { position: absolute !important; }
.position-fixed    { position: fixed !important; }
.position-sticky   { position: sticky !important; }
.top-0 { top: 0 !important; } .end-0 { right: 0 !important; }
.start-0 { left: 0 !important; } .bottom-0 { bottom: 0 !important; }

.opacity-50 { opacity: 0.5 !important; } .opacity-75 { opacity: 0.75 !important; }
.visually-hidden {
    position: absolute !important; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* =========================================================================
   5. COMPOSANTS
   ========================================================================= */

/* --- Panneau de verre : la surface de base de toute l'interface --- */
.glass-panel {
    background: var(--bp-glass);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    border: 1px solid var(--bp-border);
    border-radius: var(--bp-r-xl);
    box-shadow: var(--bp-shadow);
}
/* Sur telephone, le flou coute cher en rendu et la transparence nuit a la
   lisibilite en plein soleil : surface opaque et coins plus sobres. */
@media (max-width: 767.98px) {
    .glass-panel {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        background: var(--bp-surface);
        border-radius: var(--bp-r-lg);
    }
}

/* --- Boutons --- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    min-height: var(--bp-tap);
    padding: 0.6rem 1.1rem;
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    border: 1px solid transparent;
    border-radius: var(--bp-r-sm);
    cursor: pointer;
    transition: background-color .18s ease, border-color .18s ease,
                transform .12s ease, box-shadow .18s ease;
    -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn.disabled {
    opacity: 0.45;
    cursor: not-allowed;
    transform: none;
}
.btn-sm { padding: 0.4rem 0.75rem; font-size: 0.8rem; min-height: 36px; }
.btn-lg { padding: 0.85rem 1.5rem; font-size: 1rem; min-height: 52px; }

/* Sur les petits ecrans, les boutons compacts reprennent une hauteur tactile.
   Le critere est la LARGEUR, pas `pointer: coarse` : un portable a ecran tactile
   se declare `fine`, certains navigateurs Android se trompent, et le resultat
   etait un bouton de 36 px qu'on rate une fois sur trois au doigt. La largeur,
   elle, ne ment pas. */
@media (max-width: 991.98px) {
    .btn-sm, .form-control-sm, .form-select-sm {
        min-height: var(--bp-tap);
        padding-block: 0.55rem;
    }
    /* Les liens d'un tableau ou d'une liste gagnent la meme zone de contact. */
    .table td a:not(.btn), .bp-lien-tactile {
        display: inline-flex;
        align-items: center;
        min-height: 38px;
        padding-block: 0.35rem;
    }
}

.btn-primary   { background: var(--bp-primary); color: #fff; }
.btn-primary:hover   { background: #4f46e5; color: #fff; }
.btn-success   { background: var(--bp-success); color: #04150e; }
.btn-success:hover   { background: #059669; color: #04150e; }
.btn-danger    { background: var(--bp-danger); color: #fff; }
.btn-danger:hover    { background: #dc2626; color: #fff; }
.btn-warning   { background: var(--bp-warning); color: #241703; }
.btn-warning:hover   { background: #d97706; color: #241703; }
.btn-info      { background: var(--bp-info); color: #04212e; }
.btn-info:hover      { background: #0ea5e9; color: #04212e; }
.btn-secondary { background: #3f3f46; color: var(--bp-text); }
.btn-secondary:hover { background: #52525b; color: var(--bp-text); }
.btn-dark      { background: var(--bp-surface-2); color: var(--bp-text);
                 border-color: var(--bp-border); }
.btn-dark:hover      { background: #27272a; color: var(--bp-text); }
.btn-light      { background: #e4e4e7; color: #18181b; }
.btn-light:hover      { background: #fff; color: #18181b; }

.btn-outline-primary   { border-color: var(--bp-primary); color: var(--bp-primary-soft); background: transparent; }
.btn-outline-primary:hover   { background: var(--bp-primary); color: #fff; }
.btn-outline-secondary { border-color: var(--bp-border-strong); color: var(--bp-text-2); background: transparent; }
.btn-outline-secondary:hover { background: #27272a; color: var(--bp-text); }
.btn-outline-success   { border-color: var(--bp-success); color: var(--bp-success-soft); background: transparent; }
.btn-outline-success:hover   { background: var(--bp-success); color: #04150e; }
.btn-outline-danger    { border-color: var(--bp-danger); color: var(--bp-danger-soft); background: transparent; }
.btn-outline-danger:hover    { background: var(--bp-danger); color: #fff; }
.btn-outline-warning   { border-color: var(--bp-warning); color: var(--bp-warning); background: transparent; }
.btn-outline-warning:hover   { background: var(--bp-warning); color: #241703; }
.btn-outline-info      { border-color: var(--bp-info); color: var(--bp-info); background: transparent; }
.btn-outline-info:hover      { background: var(--bp-info); color: #04212e; }
.btn-outline-light     { border-color: var(--bp-border-strong); color: var(--bp-text); background: transparent; }
.btn-outline-light:hover     { background: rgba(255,255,255,0.1); color: var(--bp-text); }

/* --- Etiquettes --- */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.32em 0.62em;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.2;
    border-radius: var(--bp-r-sm);
    vertical-align: middle;
    /* `white-space: nowrap` sur une etiquette longue (« Discipline a surveiller »)
       poussait la ligne hors de l'ecran sur telephone. Le repli est autorise, et
       la largeur bornee a celle du conteneur. */
    max-width: 100%;
    text-align: center;
}
@media (min-width: 576px) { .badge { white-space: nowrap; } }
.badge.bg-dark      { color: var(--bp-text-2); }
.badge.bg-secondary { color: var(--bp-text); }
.badge.bg-primary, .badge.bg-danger { color: #fff; }
.badge.bg-success { color: #04150e; }
.badge.bg-warning, .badge.bg-info { color: #241703; }

/* --- Formulaires --- */
.form-label {
    display: block;
    margin-bottom: 0.35rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--bp-text-2);
}
.form-control, .form-select, input[type="text"], input[type="password"],
input[type="email"], input[type="number"], input[type="date"], input[type="time"],
input[type="search"], input[type="tel"], select, textarea {
    display: block;
    width: 100%;
    /* 16px minimum : en dessous, iOS zoome automatiquement a la prise de focus
       et l'utilisateur se retrouve avec une page decalee a recadrer a la main. */
    font-size: 16px;
    font-family: inherit;
    line-height: 1.4;
    min-height: var(--bp-tap);
    padding: 0.6rem 0.85rem;
    color: var(--bp-text);
    background-color: rgba(0, 0, 0, 0.45);
    border: 1px solid var(--bp-border-strong);
    border-radius: var(--bp-r-sm);
    transition: border-color .18s ease, box-shadow .18s ease;
    appearance: none;
    -webkit-appearance: none;
}
@media (min-width: 768px) {
    .form-control, .form-select, input, select, textarea { font-size: 0.9rem; }
}
.form-control:focus, .form-select:focus, input:focus, select:focus, textarea:focus {
    outline: none;
    background-color: rgba(0, 0, 0, 0.7);
    border-color: var(--bp-primary);
    box-shadow: 0 0 0 3px var(--bp-primary-glow);
}
.form-control::placeholder, textarea::placeholder { color: var(--bp-text-3); opacity: 1; }
.form-control-sm, .form-select-sm { padding: 0.4rem 0.65rem; min-height: 38px; }
@media (min-width: 768px) { .form-control-sm, .form-select-sm { font-size: 0.82rem; } }
textarea, textarea.form-control { min-height: 90px; resize: vertical; }

/* L'attribut hidden doit gagner sur TOUTE regle de display, y compris celle
   qui met `.form-control` en `display: block`. Sans cette ligne, un champ de
   formulaire marque `hidden` reste visible : le masquage par attribut ne
   fonctionnait nulle part dans l'application. */
[hidden]        { display: none !important; }

/* Chevron dessine en CSS : pas d'image de fond a telecharger. */
.form-select, select {
    background-image:
        linear-gradient(45deg, transparent 50%, var(--bp-text-2) 50%),
        linear-gradient(135deg, var(--bp-text-2) 50%, transparent 50%);
    background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    padding-right: 2.2rem;
}
option { background-color: var(--bp-surface); color: var(--bp-text); }

.form-check { display: flex; align-items: center; gap: 0.55rem; margin-bottom: 0.5rem; }
.form-check-input {
    width: 20px; height: 20px; min-height: 0;
    margin: 0; padding: 0; flex-shrink: 0;
    accent-color: var(--bp-primary);
    cursor: pointer;
}

/* --- Interrupteur. Les gabarits utilisent `form-switch`, qui n'etait pas style :
       l'utilisateur voyait une case a cocher la ou on lui annonce un interrupteur.
       La difference n'est pas decorative - un interrupteur dit « ceci change un
       etat maintenant », une case dit « ceci sera pris en compte a la validation ».
       Ici c'est bien une case (le choix est pris a l'envoi), d'ou un rendu
       d'interrupteur SANS animation d'etat immediat. --- */
.form-switch { display: flex; align-items: center; gap: .6rem; }
.form-switch .form-check-input {
    appearance: none;
    -webkit-appearance: none;
    width: 40px;
    height: 22px;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.25);
    border: 1px solid var(--bp-border);
    position: relative;
    transition: background .18s ease, border-color .18s ease;
}
.form-switch .form-check-input::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #e2e8f0;
    transition: transform .18s ease;
}
.form-switch .form-check-input:checked {
    background: var(--bp-primary);
    border-color: var(--bp-primary);
}
.form-switch .form-check-input:checked::after { transform: translateX(18px); }
.form-switch .form-check-input:focus-visible {
    outline: 2px solid var(--bp-primary-soft);
    outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
    .form-switch .form-check-input,
    .form-switch .form-check-input::after { transition: none; }
}
.input-group { display: flex; align-items: stretch; gap: 0; }
.input-group > .form-control { border-radius: var(--bp-r-sm) 0 0 var(--bp-r-sm); }
.input-group > .btn { border-radius: 0 var(--bp-r-sm) var(--bp-r-sm) 0; }

/* --- Tableaux. Toujours dans `.table-wrap` : sur telephone, un tableau large
       doit defiler dans son cadre, jamais faire deborder la page entiere. --- */
.table-wrap {
    width: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--bp-r);
}
.table { width: 100%; font-size: 0.88rem; }
.table th {
    padding: 0.7rem 0.6rem;
    text-align: left;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--bp-text-3);
    border-bottom: 1px solid var(--bp-border);
    white-space: nowrap;
}
.table td {
    padding: 0.7rem 0.6rem;
    border-bottom: 1px solid rgba(39, 39, 42, 0.55);
    vertical-align: middle;
}
.table tbody tr:last-child td { border-bottom: 0; }
.table-hover tbody tr:hover { background: rgba(99, 102, 241, 0.07); }
.table-clickable tbody tr { cursor: pointer; }

/* --- Alertes --- */
.alert {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    padding: 0.85rem 1rem;
    margin-bottom: var(--bp-3);
    border: 1px solid transparent;
    border-left-width: 3px;
    border-radius: var(--bp-r);
    font-size: 0.88rem;
}
.alert-success { background: rgba(16, 185, 129, 0.10); border-color: rgba(16,185,129,.3); border-left-color: var(--bp-success); color: #6ee7b7; }
.alert-danger  { background: rgba(239, 68, 68, 0.10);  border-color: rgba(239,68,68,.3);  border-left-color: var(--bp-danger);  color: #fca5a5; }
.alert-warning { background: rgba(245, 158, 11, 0.10); border-color: rgba(245,158,11,.3); border-left-color: var(--bp-warning); color: #fcd34d; }
.alert-info    { background: rgba(56, 189, 248, 0.10); border-color: rgba(56,189,248,.3); border-left-color: var(--bp-info);    color: #7dd3fc; }
.alert .btn-close { margin-left: auto; }

.btn-close {
    flex-shrink: 0;
    width: 32px; height: 32px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    border-radius: var(--bp-r-sm);
    color: currentColor;
    opacity: 0.65;
    cursor: pointer;
    font-size: 1.1rem;
    line-height: 1;
}
.btn-close::before { content: "\00d7"; }
.btn-close:hover { opacity: 1; background: rgba(255,255,255,0.08); }

/* --- Modales --- */
.modal {
    position: fixed;
    inset: 0;
    z-index: 1080;
    display: none;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--bp-overlay);
    /* Le flou est pose ICI, sur la couche d'arriere-plan de la modale, et jamais
       sur un ancetre du dialogue : `backdrop-filter` cree un bloc conteneur qui
       piege `position: fixed`, ce qui rendait naguere les modales inatteignables. */
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    padding: var(--bp-3);
}
.modal.show { display: block; }
.modal-dialog {
    position: relative;
    width: 100%;
    max-width: 560px;
    margin-inline: auto;
    margin-block: max(var(--bp-3), 4vh);
    animation: bp-modal-in .22s cubic-bezier(.2, .8, .3, 1);
}
.modal-lg  { max-width: 820px; }
.modal-xl  { max-width: 1100px; }
.modal-sm  { max-width: 420px; }
@keyframes bp-modal-in {
    from { opacity: 0; transform: translateY(14px) scale(.985); }
    to   { opacity: 1; transform: none; }
}
.modal-content {
    display: flex;
    flex-direction: column;
    background: var(--bp-surface);
    border: 1px solid var(--bp-border);
    border-radius: var(--bp-r-xl);
    box-shadow: var(--bp-shadow-lg);
    overflow: hidden;
}
.modal-header {
    display: flex;
    align-items: center;
    gap: var(--bp-2);
    padding: var(--bp-3) var(--bp-4);
    border-bottom: 1px solid var(--bp-border);
}
.modal-header .btn-close { margin-left: auto; }
.modal-title { margin: 0; font-size: 1.05rem; font-weight: 700; }
.modal-body   { padding: var(--bp-4); overflow-y: auto; }
.modal-footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--bp-2);
    padding: var(--bp-3) var(--bp-4);
    border-top: 1px solid var(--bp-border);
}
/* Sur telephone la modale se comporte comme une feuille : elle monte du bas,
   occupe la largeur et laisse le pouce atteindre les actions. */
@media (max-width: 575.98px) {
    .modal { padding: 0; }
    .modal-dialog {
        margin: 0;
        min-height: 100%;
        display: flex;
        align-items: flex-end;
        max-width: none;
    }
    .modal-content {
        width: 100%;
        border-radius: var(--bp-r-xl) var(--bp-r-xl) 0 0;
        max-height: 92vh;
    }
    .modal-header, .modal-body, .modal-footer { padding-inline: var(--bp-3); }
    .modal-footer > .btn { flex: 1 1 auto; }
    @keyframes bp-modal-in {
        from { opacity: 0; transform: translateY(100%); }
        to   { opacity: 1; transform: none; }
    }
}

/* --- Repli : sans JavaScript, une modale ciblee par l'ancre s'ouvre quand meme. --- */
.modal:target { display: block; }

/* --- Sections repliables --- */
.collapse { display: none; }
.collapse.show { display: block; }

/* --- Accordeon --- */
.accordion-item { margin-bottom: 0.5rem; }
.accordion-header { margin: 0; }
.accordion-button {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    width: 100%;
    /* Hauteur tactile garantie : ces en-tetes sont le seul moyen d'ouvrir le
       detail d'une journee, les rater au doigt rend la page inutilisable. */
    min-height: var(--bp-tap);
    padding: 0.8rem 1rem;
    font-size: 0.9rem;
    text-align: left;
    color: var(--bp-text);
    background: var(--bp-surface);
    border: 1px solid var(--bp-border);
    border-radius: var(--bp-r);
    cursor: pointer;
    transition: background-color .18s ease;
}
.accordion-button:hover { background: var(--bp-surface-2); }
.accordion-button::after {
    content: "";
    width: 0.62em; height: 0.62em;
    margin-left: auto;
    flex-shrink: 0;
    border-right: 2px solid var(--bp-text-3);
    border-bottom: 2px solid var(--bp-text-3);
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform .22s ease;
}
.accordion-button[aria-expanded="true"]::after {
    transform: rotate(-135deg) translate(-2px, -2px);
}
.accordion-body {
    padding: 1rem;
    border: 1px solid var(--bp-border);
    border-top: 0;
    border-radius: 0 0 var(--bp-r) var(--bp-r);
}
.table-responsive { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-sm td, .table-sm th { padding: 0.45rem 0.5rem; }
.table-dark { color: var(--bp-text); }

/* --- Infobulles --- */
.bp-tooltip {
    position: fixed;
    z-index: 1090;
    max-width: 260px;
    padding: 0.45rem 0.65rem;
    font-size: 0.78rem;
    line-height: 1.4;
    color: var(--bp-text);
    background: #27272a;
    border: 1px solid var(--bp-border-strong);
    border-radius: var(--bp-r-sm);
    box-shadow: var(--bp-shadow);
    pointer-events: none;
    opacity: 0;
    transition: opacity .14s ease;
}
.bp-tooltip.show { opacity: 1; }

/* --- Pastille d'activite --- */
.pulse-live {
    display: inline-block;
    width: 9px; height: 9px;
    border-radius: 50%;
    background-color: var(--bp-success);
    box-shadow: 0 0 10px var(--bp-success);
    animation: bp-pulse 2s ease-in-out infinite;
}
@keyframes bp-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

.section-title {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--bp-text-3);
    font-weight: 700;
}

/* --- Barres de progression --- */
.progress {
    height: 8px;
    overflow: hidden;
    background: rgba(148, 163, 184, 0.18);
    border-radius: var(--bp-r-pill);
}
.progress-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    font-size: 0.68rem;
    color: #fff;
    background: var(--bp-primary);
    border-radius: var(--bp-r-pill);
    transition: width .5s cubic-bezier(.4, 0, .2, 1);
}
.progress-bar-striped {
    background-image: linear-gradient(45deg,
        rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%,
        rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%,
        transparent 75%, transparent);
    background-size: 1rem 1rem;
}
.progress-bar-animated { animation: bp-stripes 1s linear infinite; }
@keyframes bp-stripes { from { background-position: 1rem 0; } to { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) { .progress-bar-animated { animation: none; } }

/* --- Indicateurs de chargement --- */
.spinner-border, .spinner-grow {
    display: inline-block;
    width: 1.6rem; height: 1.6rem;
    vertical-align: -0.125em;
}
.spinner-border {
    border: 3px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: fa-spin .75s linear infinite;
}
.spinner-grow {
    background-color: currentColor;
    border-radius: 50%;
    opacity: 0;
    animation: bp-grow .9s ease-in-out infinite;
}
@keyframes bp-grow {
    0%   { transform: scale(0); opacity: 0; }
    50%  { transform: none;     opacity: 1; }
    100% { transform: scale(0); opacity: 0; }
}
.spinner-border-sm, .spinner-grow-sm { width: 1rem; height: 1rem; border-width: 2px; }

/* --- Listes --- */
.list-group { display: flex; flex-direction: column; border-radius: var(--bp-r); }
.list-group-item {
    padding: 0.7rem 0.9rem;
    color: var(--bp-text);
    background: var(--bp-surface);
    border: 1px solid var(--bp-border);
    border-bottom-width: 0;
}
.list-group-item:first-child { border-radius: var(--bp-r) var(--bp-r) 0 0; }
.list-group-item:last-child  { border-radius: 0 0 var(--bp-r) var(--bp-r); border-bottom-width: 1px; }
.list-group-flush .list-group-item {
    border-inline: 0;
    border-radius: 0;
    background: transparent;
}

/* --- Complements de formulaire --- */
.input-group-text {
    display: flex;
    align-items: center;
    padding: 0.6rem 0.85rem;
    color: var(--bp-text-2);
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid var(--bp-border-strong);
    border-radius: var(--bp-r-sm) 0 0 var(--bp-r-sm);
}
.input-group > .input-group-text + .form-control { border-radius: 0 var(--bp-r-sm) var(--bp-r-sm) 0; }
.form-text { display: block; margin-top: 0.3rem; font-size: 0.78rem; color: var(--bp-text-3); }
.form-check-label { cursor: pointer; font-size: 0.88rem; }

/* --- Divers --- */
.display-3 { font-size: 2.6rem; font-weight: 800; line-height: 1.1; }
.display-4 { font-size: 2.1rem; font-weight: 800; line-height: 1.15; }
@media (min-width: 768px) {
    .display-3 { font-size: 3.4rem; }
    .display-4 { font-size: 2.8rem; }
}
.fs-7 { font-size: 0.8rem; }
.img-fluid { max-width: 100%; height: auto; }
.table-borderless td, .table-borderless th { border: 0; }
.rounded-3 { border-radius: var(--bp-r) !important; }
.border-3 { border-width: 3px !important; }
.border-dark { border-color: var(--bp-border) !important; }
.border-end { border-right: 1px solid var(--bp-border) !important; }
.border-start-0 { border-left: 0 !important; }
.opacity-25 { opacity: 0.25 !important; }
.px-0 { padding-inline: 0 !important; }
.py-1 { padding-block: .25rem !important; }
.py-5 { padding-block: 3rem !important; }
.pe-5 { padding-right: 3rem !important; }
.g-5 { --bp-gx: 1.25rem; --bp-gy: 2.5rem; margin-top: calc(var(--bp-gy) * -1); }
.fade { transition: opacity .2s ease; }
.transition { transition: all .2s ease; }

/* Centrage vertical d'une modale : sur telephone la feuille reste ancree en bas,
   ou le pouce l'atteint. */
.modal-dialog-centered { display: flex; align-items: center; min-height: calc(100% - 8vh); }
@media (max-width: 575.98px) { .modal-dialog-centered { align-items: flex-end; min-height: 100%; } }

@media (min-width: 768px) {
    .p-md-5 { padding: 2.5rem !important; }
    .px-md-5 { padding-inline: 2.5rem !important; }
    .flex-md-row { flex-direction: row !important; }
    .align-items-md-center { align-items: center !important; }
    .fs-md-4 { font-size: 1.25rem !important; }
}
@media (min-width: 992px) { .p-lg-4 { padding: 1.5rem !important; } }

/* =========================================================================
   6. MISE EN PAGE APPLICATIVE
   ========================================================================= */

/* --- Barre laterale. Tiroir sur telephone, colonne fixe sur grand ecran. --- */
.sidebar {
    position: fixed;
    inset-block: 0;
    left: 0;
    z-index: 1060;
    display: flex;
    flex-direction: column;
    /* 78vw et non 86 : il faut laisser une bande touchable a droite du tiroir.
       A 86vw il ne restait que 55 px sur un ecran de 390 px, trop etroit pour
       refermer d'un appui - le geste attendu par tout utilisateur de telephone. */
    width: min(78vw, var(--bp-sidebar-w));
    height: 100vh;
    padding: var(--bp-4) var(--bp-3);
    background: var(--bp-surface);
    border-right: 1px solid var(--bp-border);
    /* Indispensable : sans defilement interne, les dernieres entrees de menu et
       le bouton de deconnexion deviennent inatteignables sur un ecran court. */
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    transform: translateX(-100%);
    transition: transform .28s cubic-bezier(.4, 0, .2, 1);
}
/* 100dvh suit la hauteur reelle sur mobile, ou la barre d'adresse se retracte. */
@supports (height: 100dvh) { .sidebar { height: 100dvh; } }

.sidebar.mobile-open { transform: translateX(0); box-shadow: var(--bp-shadow-lg); }

.sidebar-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1055;
    background: rgba(0, 0, 0, 0.6);
    opacity: 0;
    visibility: hidden;
    transition: opacity .28s ease, visibility .28s ease;
}
.sidebar-backdrop.show { opacity: 1; visibility: visible; }

.main-content {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-width: 0;              /* autorise les enfants a retrecir au lieu de deborder */
    padding-inline: var(--bp-3);
    padding-bottom: var(--bp-5);
}

@media (min-width: 992px) {
    .sidebar {
        transform: none;
        backdrop-filter: blur(22px);
        -webkit-backdrop-filter: blur(22px);
        background: var(--bp-glass);
    }
    .sidebar-backdrop { display: none; }
    .main-content { margin-left: var(--bp-sidebar-w); padding-inline: var(--bp-4); }
}

/* --- Ecriture de droite a gauche ---------------------------------------------
   L'espace salarie s'affiche dans la langue choisie par le salarie, arabe compris.
   Trois proprietes seulement sont physiquement orientees dans cette feuille : le
   bord lateral du tiroir, sa position, et la marge du contenu. Le reste utilise
   deja des proprietes logiques et suit l'attribut `dir` sans rien faire. */
[dir="rtl"] .sidebar {
    left: auto;
    right: 0;
    border-right: 0;
    border-left: 1px solid var(--bp-border);
    transform: translateX(100%);
}
[dir="rtl"] .sidebar.mobile-open { transform: translateX(0); }
@media (min-width: 992px) {
    /* Sans cette remise a zero, la regle de droite a gauche - plus specifique que
       celle du grand ecran - laissait le menu hors cadre en permanence : le
       salarie arabophone perdait toute la barre laterale sur ordinateur. */
    [dir="rtl"] .sidebar { transform: none; }
    [dir="rtl"] .main-content { margin-left: 0; margin-right: var(--bp-sidebar-w); }
}
/* Les nombres, les heures et les montants restent lus de gauche a droite : une
   heure inversee serait une information fausse, pas une preference d'affichage. */
[dir="rtl"] .font-monospace,
[dir="rtl"] time { direction: ltr; unicode-bidi: embed; }

/* --- Navigation --- */
.nav-link-custom {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: var(--bp-tap);
    padding: 0.7rem 0.9rem;
    margin-bottom: 0.2rem;
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--bp-text-2);
    border-radius: var(--bp-r-sm);
    text-decoration: none;
    transition: background-color .2s ease, color .2s ease;
    -webkit-tap-highlight-color: transparent;
}
.nav-link-custom:hover { color: var(--bp-text); background: rgba(63, 63, 70, 0.5); }
.nav-link-custom.active {
    color: var(--bp-primary-soft);
    background: var(--bp-primary-glow);
    box-shadow: inset 3px 0 0 var(--bp-primary);
    font-weight: 600;
}
/* La translation au survol n'a de sens qu'avec un pointeur fin ; au doigt elle
   produit un decalage parasite pendant le defilement. */
@media (hover: hover) and (pointer: fine) {
    .nav-link-custom:hover { transform: translateX(3px); }
}

/* --- Barre superieure --- */
.bp-topbar {
    position: sticky;
    top: 0;
    z-index: 1040;
    display: flex;
    align-items: center;
    gap: var(--bp-2);
    min-height: var(--bp-topbar-h);
    margin-inline: calc(var(--bp-3) * -1);
    padding: var(--bp-2) var(--bp-3);
    background: rgba(9, 9, 11, 0.88);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--bp-border);
}
@media (min-width: 992px) {
    .bp-topbar { margin-inline: calc(var(--bp-4) * -1); padding-inline: var(--bp-4); }
}
.bp-topbar-title { min-width: 0; }
.bp-topbar-title h1 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: -0.015em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.bp-topbar-title p {
    margin: 0;
    font-size: 0.76rem;
    color: var(--bp-text-3);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
@media (min-width: 768px) {
    .bp-topbar-title h1 { font-size: 1.3rem; }
    .bp-topbar-title p  { font-size: 0.84rem; }
}

.mobile-toggle-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--bp-tap);
    height: var(--bp-tap);
    flex-shrink: 0;
    background: transparent;
    border: 1px solid var(--bp-border-strong);
    border-radius: var(--bp-r-sm);
    color: var(--bp-text);
    font-size: 1.15rem;
    cursor: pointer;
}
@media (min-width: 992px) { .mobile-toggle-btn { display: none; } }

/* --- Zone de contenu --- */
.bp-page { padding-top: var(--bp-4); }

/* Tableau de bord : tuiles d'indicateurs */
.kpi-title {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--bp-text-3);
    font-weight: 700;
}

/* --- Barre d'onglets de l'espace salarie ---------------------------------
   Un salarie ouvre son planning au telephone, souvent debout, d'une main. Une
   barre d'onglets en bas place les quatre destinations sous le pouce ; un tiroir
   imposerait deux gestes (ouvrir, viser) pour chaque changement d'ecran.
   Au-dela de 992px elle disparait au profit de la barre laterale. */
.bp-tabbar {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 1045;
    display: flex;
    background: rgba(9, 9, 11, 0.96);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-top: 1px solid var(--bp-border);
    /* Laisse passer la barre de geste de l'iPhone, sinon le dernier onglet est
       a moitie recouvert et devient difficile a atteindre. */
    padding-bottom: env(safe-area-inset-bottom, 0);
}
.bp-tabbar a {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-height: var(--bp-tabbar-h);
    padding: 6px 2px;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.15;
    text-align: center;
    color: var(--bp-text-3);
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    transition: color .18s ease;
}
.bp-tabbar a i { font-size: 1.22rem; }
.bp-tabbar a.active { color: var(--bp-primary-soft); }
.bp-tabbar a.active i { filter: drop-shadow(0 0 8px var(--bp-primary-glow)); }
.bp-tabbar a:active { background: rgba(255, 255, 255, 0.05); }

/* Cinq onglets sur un ecran de 360 px laissent 72 px chacun : le libelle doit
   tenir sur UNE ligne, sinon la barre grandit et masque le contenu qu'on vient
   justement de degager. */
.bp-tabbar a span {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
@media (max-width: 380px) {
    .bp-tabbar a { font-size: 0.66rem; padding-inline: 1px; }
    .bp-tabbar a i { font-size: 1.12rem; }
}

/* Le contenu doit pouvoir defiler entierement au-dessus de la barre, faute de
   quoi le dernier bouton d'une page reste inaccessible. */
body.has-tabbar .main-content {
    /* Hauteur de la barre, plus une respiration : sans cette marge le dernier
       bouton d'une page se retrouve sous les onglets, donc inaccessible. */
    padding-bottom: calc(var(--bp-tabbar-h) + 1.5rem + env(safe-area-inset-bottom, 0px));
}
@media (min-width: 992px) {
    .bp-tabbar { display: none; }
    body.has-tabbar .main-content { padding-bottom: var(--bp-5); }
}

/* =========================================================================
   7. ACCESSIBILITE ET PREFERENCES
   ========================================================================= */

/* Respecte le reglage systeme « reduire les animations » : pour une personne
   sujette au mal des transports, une transition de tiroir peut provoquer un
   malaise reel. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Mode contraste eleve : bordures franches, plus de transparence. */
@media (prefers-contrast: more) {
    :root { --bp-border: #52525b; --bp-text-2: #e4e4e7; --bp-text-3: #c7cad1; }
    .glass-panel { background: var(--bp-surface); backdrop-filter: none; }
}

/* Impression : l'inspection du travail et les representants du personnel
   demandent des documents papier. La barre laterale et les actions n'ont aucun
   sens imprimees ; le fond sombre viderait une cartouche pour rien. */
@media print {
    body { background: #fff !important; color: #000 !important; }
    .sidebar, .sidebar-backdrop, .bp-topbar, .mobile-toggle-btn,
    .btn, .modal, form[method="post"] { display: none !important; }
    .main-content { margin-left: 0 !important; padding: 0 !important; }
    .glass-panel {
        background: #fff !important;
        border: 1px solid #999 !important;
        box-shadow: none !important;
        break-inside: avoid;
    }
    .text-white, .text-secondary, .text-muted,
    h1, h2, h3, h4, h5, h6, td, th { color: #000 !important; }
    .table-wrap { overflow: visible !important; }
    a[href]::after { content: ""; }
}