/* Thème IlepsCRM — repris de l'identité ILEPS360 (primaire #223461, accent cyan, police Inter). */
/*
 * Police Inter hébergée par l'application (RGPD, écart E7 : aucune requête vers Google Fonts, l'adresse IP des
 * visiteurs n'est plus transmise à un tiers). Fichiers officiels Inter 4.1 (github.com/rsms/inter, non modifiés),
 * licence SIL Open Font License 1.1 : assets/fonts/inter/LICENSE.txt. AssetMapper versionne les URL ci-dessous.
 */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/inter/Inter-Regular-ofDvCin.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/inter/Inter-Medium-A6fsSHA.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/inter/Inter-SemiBold-GyZPrHn.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/inter/Inter-Bold-ZKGpacb.woff2") format("woff2"); }
/*
 * Accessibilité (RGAA / WCAG 2.1 AA) : les couleurs d'état de Tabler sont assombries pour atteindre
 * un contraste d'au moins 4,5:1 (texte blanc sur bouton, texte coloré sur fond blanc ou teinté).
 * Valeurs mesurées : #2a69b3 / blanc 5,57 · #2b7a39 / blanc 5,32 · #c92a2a / blanc 5,46 · #636363 / #f1f1f1 5,32.
 */
:root {
    --tblr-font-sans-serif: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --tblr-blue: #223461;
    --tblr-blue-rgb: 34, 52, 97;
    --tblr-blue-darken: #1b294b;
    --tblr-blue-lt: #dfebf8;
    --tblr-primary: var(--tblr-blue);
    --tblr-primary-rgb: var(--tblr-blue-rgb);
    --tblr-primary-darken: var(--tblr-blue-darken);
    --tblr-primary-lt: var(--tblr-blue-lt);
    --tblr-azure: #2a69b3;
    --tblr-azure-rgb: 42, 105, 179;
    --tblr-info: var(--tblr-azure);
    --tblr-info-rgb: var(--tblr-azure-rgb);
    --tblr-green: #2b7a39;
    --tblr-green-rgb: 43, 122, 57;
    --tblr-success: var(--tblr-green);
    --tblr-success-rgb: var(--tblr-green-rgb);
    --tblr-red: #c92a2a;
    --tblr-red-rgb: 201, 42, 42;
    --tblr-danger: var(--tblr-red);
    --tblr-danger-rgb: var(--tblr-red-rgb);
    --tblr-secondary: #636363;
    --tblr-secondary-rgb: 99, 99, 99;
    --tblr-muted: #636363;
    --tblr-warning: #ec9509;
    --tblr-cyan: #77c9db;
    --tblr-link-color: #2a69b3;
    --tblr-link-color-rgb: 42, 105, 179;
    --tblr-link-hover-color: #223461;
    --ileps-cyan: #77c9db;
    --ileps-focus: #223461;
}

/* ---------- Badges, avatars et textes colorés : variante foncée du texte (contraste ≥ 4,5:1 sur fond teinté) ---------- */
.bg-azure-lt, .bg-info-lt { color: color-mix(in srgb, var(--tblr-azure) 85%, #000) !important; }
.bg-green-lt, .bg-success-lt { color: color-mix(in srgb, var(--tblr-green) 85%, #000) !important; }
.bg-red-lt, .bg-danger-lt { color: color-mix(in srgb, var(--tblr-red) 85%, #000) !important; }
.bg-secondary-lt, .bg-muted-lt, .bg-gray-lt { color: #505050 !important; }
.bg-teal-lt { color: color-mix(in srgb, var(--tblr-teal) 55%, #000) !important; }
.bg-cyan-lt { color: color-mix(in srgb, #3c8d9f 75%, #000) !important; }
.bg-orange-lt { color: color-mix(in srgb, var(--tblr-orange) 55%, #000) !important; }
.bg-yellow-lt, .bg-warning-lt { color: color-mix(in srgb, var(--tblr-yellow) 50%, #000) !important; }
.bg-lime-lt { color: color-mix(in srgb, var(--tblr-lime) 50%, #000) !important; }
.bg-purple-lt { color: color-mix(in srgb, var(--tblr-purple) 75%, #000) !important; }
.bg-pink-lt { color: color-mix(in srgb, var(--tblr-pink) 75%, #000) !important; }
.bg-indigo-lt { color: color-mix(in srgb, var(--tblr-indigo) 80%, #000) !important; }
.text-orange { color: color-mix(in srgb, var(--tblr-orange) 60%, #000) !important; }
.text-yellow, .text-warning { color: color-mix(in srgb, var(--tblr-yellow) 55%, #000) !important; }
.text-teal { color: color-mix(in srgb, var(--tblr-teal) 60%, #000) !important; }
.text-cyan { color: #2f6f7d !important; }
.text-lime { color: color-mix(in srgb, var(--tblr-lime) 55%, #000) !important; }
.btn-warning { --tblr-btn-color: #1f2937; --tblr-btn-hover-color: #1f2937; --tblr-btn-active-color: #1f2937; }
.text-bg-warning { color: #1f2937 !important; }
/* alertes « avertissement » : texte orangé foncé sur fond orangé clair (2,22:1 avant, 7,0:1 après) */
.alert-warning { --tblr-alert-color: #7a4a00; color: #7a4a00; }

/* étapes d'un assistant (import, progression) : étapes à venir lisibles */
.steps .step-item, .steps .step-item.active ~ .step-item { color: var(--tblr-secondary); }
.page-item.disabled .page-link { color: var(--tblr-secondary); }

/* liens dans un paragraphe : soulignés pour être distingués du texte sans la couleur seule */
.page-body p a:not(.btn), .alert a:not(.btn), .page-pretitle a, .form-hint a, .empty-state a:not(.btn), .footer a { text-decoration: underline; }

/* ---------- Focus visible et lien d'évitement ---------- */
:focus-visible {
    outline: 2px solid var(--ileps-focus);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px var(--ileps-cyan);
}
.navbar-dark :focus-visible, .bg-primary :focus-visible { outline-color: #fff; }
.form-control:focus-visible, .form-select:focus-visible, .form-check-input:focus-visible { outline-offset: 0; }
main:focus, main:focus-visible { outline: none; box-shadow: none; }

.skip-link {
    position: absolute;
    left: 1rem;
    top: -10rem;
    z-index: 2000;
    padding: .75rem 1rem;
    background: #fff;
    color: var(--tblr-primary);
    font-weight: 600;
    border: 2px solid var(--tblr-primary);
    border-radius: var(--tblr-border-radius);
}
.skip-link:focus { top: .5rem; }

/* ---------- En-tête et navigation ---------- */
.navbar-brand-image { height: 2.2rem; width: auto; }
.navbar.bg-primary { background: var(--tblr-primary) !important; }
/* lien de retour dans le surtitre : souligné pour être repérable autrement que par la couleur (WCAG 1.4.1) */
.page-pretitle a { text-decoration: underline; }
.avatar-user { background: var(--ileps-cyan); color: var(--tblr-primary); font-weight: 600; }
.user-roles { color: #dfe7f2; }
.breadcrumb { font-size: .8125rem; flex-wrap: wrap; }

/* barre de progression Turbo (chargements) aux couleurs ILEPS, plus visible */
.turbo-progress-bar { height: 4px; background-color: var(--ileps-cyan); }

/* actions de page : passent à la ligne sur les petits écrans */
.page-title-actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.page-title-actions > form { display: inline-flex; }
@media (min-width: 768px) { .page-title-actions { justify-content: flex-end; } }
.page-title { overflow-wrap: anywhere; }

.flash-container { z-index: 1080; }

.btn-sidebar {
    width: 100%;
    text-transform: uppercase;
    justify-content: space-between;
    margin-bottom: .5rem;
}

.table-sort-link { color: inherit; text-decoration: none; white-space: nowrap; }
.table-sort-link .icon { width: 1rem; height: 1rem; }
.table td.actions { white-space: nowrap; text-align: right; }

turbo-frame[busy] { opacity: .5; transition: opacity .15s; }

.timeline-item { border-left: 2px solid var(--tblr-border-color); padding: 0 0 1rem 1rem; position: relative; }
.timeline-item::before {
    content: ''; position: absolute; left: -6px; top: .3rem; width: 10px; height: 10px;
    border-radius: 50%; background: var(--tblr-primary);
}
.timeline-item.kind-system::before { background: var(--tblr-secondary); }

.kpi-value { font-size: 1.75rem; font-weight: 700; line-height: 1.2; }

/* ---------- États vides ---------- */
.empty-state { padding: 2.5rem 1rem; text-align: center; color: var(--tblr-secondary); }
.empty-state img { max-width: 160px; margin-bottom: 1rem; opacity: .8; }
.empty-state .empty-state-title { color: var(--tblr-body-color); font-weight: 600; font-size: 1rem; margin-bottom: .25rem; }

/* pied de carte (compteur, actions groupées, pagination) : passe à la ligne au lieu de déborder */
.card-footer.d-flex { flex-wrap: wrap; gap: .5rem; }
.card-footer .pagination { flex-wrap: wrap; }

/* ---------- Poste de pointage (optimisé tablette) ---------- */
.checkin-flash { font-size: 1.5rem; font-weight: 600; }
.checkin-flash .checkin-name { font-size: 2rem; line-height: 1.2; }
.checkin-input { font-size: 1.75rem; min-height: 4rem; text-align: center; letter-spacing: .05em; }
.checkin-submit { font-size: 1.25rem; min-height: 3.5rem; }

/* ---------- Petits écrans ---------- */
@media (max-width: 767.98px) {
    .table-responsive-stack thead { display: none; }
    .table-responsive-stack tr { display: block; border-bottom: 1px solid var(--tblr-border-color); padding: .5rem 0; }
    .table-responsive-stack td { display: block; border: 0; padding: .15rem .75rem; }
    .table-responsive-stack td.actions { text-align: left; white-space: normal; }
    .table-responsive-stack td[data-label]::before { content: attr(data-label) " : "; color: var(--tblr-secondary); font-size: .8125rem; }
    .card-footer.d-flex > * { margin-left: 0 !important; }
    .card-footer .pagination { margin-left: 0 !important; }
}

/* tom-select (thème bootstrap5) lit les variables --bs-* de Bootstrap ; Tabler définit les mêmes sous --tblr-* :
   sans ce relais, le fond de la liste déroulante est transparent et les champs situés dessous la traversent. */
.ts-wrapper, .ts-dropdown {
    --bs-body-bg: var(--tblr-bg-forms, var(--tblr-bg-surface, #fff));
    --bs-body-color: var(--tblr-body-color);
    --bs-border-color: var(--tblr-border-color);
    --bs-border-color-translucent: var(--tblr-border-color-translucent, var(--tblr-border-color));
    --bs-border-radius: var(--tblr-border-radius);
    --bs-border-radius-sm: var(--tblr-border-radius-sm, var(--tblr-border-radius));
    --bs-border-radius-lg: var(--tblr-border-radius-lg, var(--tblr-border-radius));
    --bs-border-width: var(--tblr-border-width, 1px);
    --bs-box-shadow-inset: var(--tblr-box-shadow-inset, none);
    --bs-form-invalid-color: var(--tblr-form-invalid-color, var(--tblr-danger));
    --bs-form-valid-color: var(--tblr-form-valid-color, var(--tblr-success));
    --bs-secondary-bg: var(--tblr-secondary-bg, var(--tblr-bg-surface-secondary));
    --bs-secondary-color: var(--tblr-secondary-color, var(--tblr-secondary));
    --bs-tertiary-bg: var(--tblr-tertiary-bg, var(--tblr-bg-surface-tertiary));
}
.ts-dropdown { box-shadow: var(--tblr-box-shadow-dropdown, 0 .5rem 1rem rgba(0, 0, 0, .15)); }

/* tom-select à choix unique : la valeur choisie reste sur une ligne (points de suspension). Sans cela,
   un libellé long passe sur deux lignes tant que le champ a le focus : au clic sur le bouton situé
   dessous, le champ perd le focus, rétrécit, le bouton remonte et le clic est perdu. */
.ts-wrapper.single .ts-control { flex-wrap: nowrap; }
.ts-wrapper.single .ts-control > .item { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* filtres repliables : toujours visibles à partir de la tablette */
@media (min-width: 768px) {
    /* les champs repliables reprennent leur place dans la grille du formulaire */
    .filters-collapse, .filters-collapse.collapse:not(.show), .filters-collapse > .row { display: contents; }
    .filters-toggle { display: none; }
}
.card > .form-errors { padding: 1rem 1rem 0; }

/* logo ILEPS University (connexion, double authentification, formulaire public) : hauteur fixe, largeur proportionnelle */
.brand-logo { height: 4rem; width: auto; }
.brand-logo-sm { height: 3.5rem; }

/* préproduction : bandeau permanent pour ne jamais confondre avec la production */
.preprod-banner { background: #b35900; color: #fff; text-align: center; font-weight: 600; font-size: .8125rem; padding: .25rem 1rem; letter-spacing: .02em; }

/* classes à la place des attributs style= : CSP sans style-src 'unsafe-inline' (risque R9) */
.text-pre-line { white-space: pre-line; }
.text-pre-wrap { white-space: pre-wrap; }
.honeypot { position: absolute; left: -10000px; }
.min-w-14rem { min-width: 14rem; }
.min-w-260 { min-width: 260px; }
.max-w-260 { max-width: 260px; }
.max-w-320 { max-width: 320px; }
.max-h-28rem { max-height: 28rem; }
.chart-h-180 { height: 180px; }
.chart-h-200 { height: 200px; }
.chart-h-220 { height: 220px; }
.chart-h-240 { height: 240px; }
.chart-h-260 { height: 260px; }
.email-preview-frame { height: 32rem; }