/*
 * -*- coding: utf-8 -*-
 * Copyright (c) 2026 Ivan LUCAS.
 * Previthys, application de gestion du DUERP (Document Unique d’Évaluation des Risques Professionnels).
 * Distribué sous licence GNU GPL.
 */

body { background: #f4f6f9; }
/* Bootstrap 5 colore les cellules d'un tableau avec --bs-table-bg : on redéfinit cette variable pour les niveaux de risque */
/* Contrastes conformes au RGAA (critère 3.2, 4,5:1 minimum) : vert foncé sous texte blanc (5,1:1), texte sombre sur
   jaune vif, le même que les badges « Moyen » (9,5:1), rouge sous texte blanc (4,5:1). */
.niveau-faible { --bs-table-bg: #1e7e34; --bs-table-color: #fff; background-color: #1e7e34; color: #fff; font-weight: 600; }
.niveau-moyen { --bs-table-bg: #ffc107; --bs-table-color: #212529; background-color: #ffc107; color: #212529; font-weight: 600; }
.niveau-critique { --bs-table-bg: #dc3545; --bs-table-color: #fff; background-color: #dc3545; color: #fff; font-weight: 600; }
table.matrice td { border: 2px solid #fff; }
table.dataTable thead th { text-align: center; }
table.dataTable th[data-name="id"] { width: 25px; }
table.dataTable th[data-name="actions"] { width: 200px; }
table.dataTable td { vertical-align: middle; }
.dt-buttons-haut { margin-top: 10px; align-items: center; }
/* Champ de recherche à la hauteur des boutons voisins (Imprimer, Excel…) : taille normale au lieu de « sm » */
.dataTables_filter label { margin: 0; }
.dataTables_filter input.form-control { width: 170px !important; margin: 0 10px 0 0; padding: .375rem .75rem .375rem 2.1rem; font-size: 1rem; line-height: 1.5;
  border-radius: var(--bs-border-radius);
  /* Loupe décorative dans le champ (image de fond : rien à restituer aux lecteurs d'écran, le champ a déjà son libellé) */
  background: var(--bs-body-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%236c757d' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='6.8' cy='6.8' r='4.8'/%3E%3Cpath d='M10.4 10.4 14 14'/%3E%3C/svg%3E") no-repeat .7rem center / 1rem 1rem; }
.dataTables_info { color: #5c636a; font-size: 12px; margin-left: 10px; }
@media print {
  body { background: #fff; }
  .navbar, .d-print-none, .btn { display: none !important; }
  .niveau-faible, .niveau-moyen, .niveau-critique, .badge { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
/* Sur petit écran, seul le tableau défile horizontalement (pas toute la page) */
.dataTables_wrapper .row > .col-sm-12 { overflow-x: auto; }
.dataTables_wrapper .pagination { flex-wrap: wrap; }

/* Document unique : mêmes largeurs de colonnes sur toutes les unités, pour un alignement visuel d'un tableau à l'autre. */
table.table-document { table-layout: fixed; width: 100%; }
table.table-document th, table.table-document td { overflow-wrap: break-word; }
table.table-document th:nth-child(1), table.table-document td:nth-child(1) { width: 31%; }
table.table-document th:nth-child(2), table.table-document td:nth-child(2) { width: 12%; }
table.table-document th:nth-child(3), table.table-document td:nth-child(3) { width: 8%; }
table.table-document th:nth-child(4), table.table-document td:nth-child(4) { width: 49%; }
/* Écran (prévisualisation) : colonne de cotation plus étroite, la page étant plus large qu'une feuille A4 */
@media screen {
  table.table-document th:nth-child(3), table.table-document td:nth-child(3) { width: 6rem; font-size: .9rem; }   /* juste « 10 × 10 × 10 » */
  table.table-document th:nth-child(4), table.table-document td:nth-child(4) { width: auto; }
}
/* Nom de l'unité de travail : bandeau foncé pleine largeur, collé au tableau, avec de l'espace au-dessus pour bien
   séparer les unités. À l'impression, le fond est forcé (sinon texte blanc sur blanc) et le bandeau ne reste jamais
   seul en bas de page. */
.document-unique .titre-unite { margin: 3rem 0 0; padding: .45rem .75rem; background: #212529; color: #fff; font-size: 1.15rem;
  font-weight: 600; -webkit-print-color-adjust: exact; print-color-adjust: exact; break-after: avoid; page-break-after: avoid; }
.document-unique .titre-unite .effectif-unite { font-size: .8em; font-weight: 400; color: #ced4da; }
.document-unique .description-unite { margin: .5rem 0; break-after: avoid; page-break-after: avoid; }
/* Colonne « Actions de prévention » : une action par ligne, précédée de son macaron de statut */
.action-document + .action-document { margin-top: .3rem; padding-top: .3rem; border-top: 1px dashed var(--bs-border-color); }

/* Vignette des pièces jointes de type image, dans le formulaire de modification d'un risque. */
.piece-jointe-vignette { width: 56px; height: 56px; object-fit: cover; border-radius: 4px; border: 1px solid var(--bs-border-color); cursor: zoom-in; }
#pj-apercu .modal-body img { max-height: 75vh; }

/* Photos jointes à un risque, affichées et imprimées dans le document unique, à une taille raisonnable. */
.photo-risque-impression { width: 140px; height: 105px; object-fit: cover; border-radius: 4px; border: 1px solid var(--bs-border-color); }

/* Liste des risques : actions de prévention associées, une par ligne. */
.liste-actions li { font-size: .875rem; white-space: normal; }
.liste-actions li + li { margin-top: 2px; }

/* Portée des actions de prévention : générale (toute la structure) ou commune à plusieurs unités. */
.portee-generale { background: #e7f1ff; color: #0a58ca; border: 1px solid #b6d4fe; }
.portee-commune { background: #f3e8ff; color: #6f42c1; border: 1px solid #d9c2fb; }
.encart-commune { border-left: 4px solid #6f42c1; background: #faf7ff; }
/* Choix des risques d'une action : cases à cocher regroupées par unité */
.liste-risques { max-height: 360px; overflow: auto; border: 1px solid var(--bs-border-color); border-radius: .375rem; background: #fff; }
.liste-risques .unite { background: #f8f9fa; font-weight: 600; padding: .35rem .75rem; border-top: 1px solid var(--bs-border-color); position: sticky; top: 0; z-index: 1; }
.liste-risques .groupe:first-child .unite { border-top: 0; }
.liste-risques label { display: flex; gap: .5rem; align-items: center; padding: .2rem .75rem .2rem 1.75rem; margin: 0; cursor: pointer; }
.liste-risques label:hover { background: #f8f9fa; }
details.unites-action summary { display: inline; cursor: pointer; font-size: .875rem; color: var(--bs-link-color); }
.categorie-action { background: #f1f3f5; color: #495057; border: 1px solid #ced4da; font-weight: 500; }

/* Tableau de bord : matrice gravité × fréquence, barres de statut, mini-indicateurs */
table.matrice-risques th { font-size: .8rem; vertical-align: middle; padding: .3rem; }
table.matrice-risques td.case { text-align: center; vertical-align: middle; height: 52px; width: 22%; border: 2px solid #fff; padding: .2rem; }
table.matrice-risques td.case a { color: inherit; text-decoration: none; font-size: 1.05rem; font-weight: 700; display: block; }
table.matrice-risques td.vide { background: #f1f3f5; }
.pastille { display: inline-block; min-width: 22px; padding: 0 4px; margin: 0 1px; border-radius: 3px; color: #fff; font-size: .7rem; font-weight: 700; text-align: center; }
.pastille-critique { background: #dc3545; } .pastille-moyen { background: #ffc107; color: #212529; } .pastille-faible { background: #1e7e34; }
td.case .pastille { border: 1px solid rgba(255,255,255,.7); }
.pile-statuts { display: flex; height: 20px; border-radius: 4px; overflow: hidden; background: #e9ecef; font-size: .72rem; color: #fff; font-weight: 600; }
.pile-statuts > div { display: flex; align-items: center; justify-content: center; white-space: nowrap; }
.kpi-mini { border: 1px solid var(--bs-border-color); border-radius: .5rem; padding: .6rem .8rem; }
a.kpi-mini:hover { background: #f8f9fa; }
.kpi-mini .valeur { font-size: 1.5rem; font-weight: 700; line-height: 1; }
.compte-a-rebours { font-size: 2rem; font-weight: 700; line-height: 1; text-align: center; min-width: 60px; }
.compte-a-rebours small { font-size: .7rem; font-weight: 400; }

/* Document unique : page de garde et introduction */
.page-garde { text-align: center; padding: 3rem 1rem 4rem; margin-bottom: 2rem; border: 1px solid var(--bs-border-color); border-radius: .5rem; background: #fff; }
.page-garde .logo-garde { max-height: 110px; max-width: 280px; margin-bottom: 2rem; }
.page-garde .surtitre { text-transform: uppercase; letter-spacing: .12em; color: #6c757d; margin-bottom: .5rem; }
.page-garde h1 { font-size: 2rem; font-weight: 600; margin-bottom: 1.5rem; }
.page-garde .organisation { font-size: 1.5rem; font-weight: 500; margin-bottom: 2rem; }
.page-garde .edition { color: #495057; margin-bottom: 0; }
.introduction-document { background: #fff; border: 1px solid var(--bs-border-color); border-radius: .5rem; padding: 1.25rem 1.5rem; margin-bottom: 2rem; }
.introduction-texte ul { margin-bottom: .75rem; }
.baremes th { background: #f8f9fa; }
.categories-risques thead th { background: #f8f9fa; }
.liste-unites { columns: 2; }
.logo-introduction { max-height: 80px; max-width: 240px; }
@media print {
  .saut-page { break-before: page; }
  .page-garde { border: 0; padding-top: 30vh; min-height: 90vh; }
  .introduction-document { border: 0; padding: 0; }
  .liste-unites a { color: inherit; text-decoration: none; }
}

/* Impression du document unique : taille de base réduite (12 px au lieu de 16). Les titres, tableaux et marges de
   Bootstrap étant exprimés en rem, tout le document diminue en proportion. Les autres pages ne sont pas concernées. */
@media print {
  html:has(.document-unique) { font-size: 12px; }
  .document-unique .table > :not(caption) > * > * { padding: .2rem .3rem; }
  .document-unique .photo-risque-impression { width: 90px; height: 70px; }
}

/* Aide contextuelle : bouton « ? » à côté du titre des pages, qui ouvre la rubrique d'aide correspondante. */
.lien-aide { display: inline-flex; align-items: center; justify-content: center; width: 1.4rem; height: 1.4rem; margin-left: .25rem;
  border: 1px solid var(--bs-border-color); border-radius: 50%; font-size: .8rem; font-weight: 600; line-height: 1;
  color: var(--bs-secondary-color); text-decoration: none; vertical-align: middle; background: var(--bs-body-bg); }
.lien-aide:hover, .lien-aide:focus { color: #fff; background: var(--bs-primary); border-color: var(--bs-primary); }

/* Page « Aide » : sommaire fixe à gauche, contenu à droite. */
.sommaire-aide { position: sticky; top: 1rem; max-height: calc(100vh - 2rem); overflow-y: auto; padding: 1rem;
  background: var(--bs-body-bg); border: 1px solid var(--bs-border-color); border-radius: .5rem; font-size: .9rem; margin-bottom: 1rem; }
.sommaire-aide .titre-partie { margin: .75rem 0 .25rem; font-size: .75rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--bs-secondary-color); }
.sommaire-aide .titre-partie:first-child { margin-top: 0; }
.sommaire-aide ol { margin-bottom: 0; }
.sommaire-aide a { display: block; padding: .15rem .5rem; border-radius: .25rem; color: var(--bs-body-color); text-decoration: none; }
.sommaire-aide a:hover { background: var(--bs-tertiary-bg); color: var(--bs-primary); }
.contenu-aide { max-width: 60rem; background: var(--bs-body-bg); border: 1px solid var(--bs-border-color); border-radius: .5rem; padding: 1.25rem 1.75rem; }
.contenu-aide section { scroll-margin-top: 1rem; }
.contenu-aide section:target > h3 { color: var(--bs-primary); }
.contenu-aide .partie-aide { margin: 2.5rem 0 0; padding: .45rem .75rem; background: #212529; color: #fff; font-size: 1.15rem; font-weight: 600; }
.contenu-aide h3 { margin-top: 2rem; padding-bottom: .25rem; border-bottom: 1px solid var(--bs-border-color); font-size: 1.15rem; }
.contenu-aide h4 { margin-top: 1.25rem; font-size: 1rem; font-weight: 600; }
.contenu-aide .chemin { display: inline-block; padding: .1rem .5rem; border-radius: .25rem; background: var(--bs-tertiary-bg); font-size: .85rem; color: var(--bs-secondary-color); }
.contenu-aide .bloc-code { padding: .75rem 1rem; border-radius: .25rem; background: var(--bs-tertiary-bg); font-size: .85rem; }
.contenu-aide dl.row dt { font-weight: 600; }
@media print {
  .aide > .col-lg-9 { width: 100%; }
  .contenu-aide { max-width: none; border: 0; padding: 0; }
  .contenu-aide .partie-aide { -webkit-print-color-adjust: exact; print-color-adjust: exact; break-after: avoid; }
  .contenu-aide h3, .contenu-aide h4 { break-after: avoid; }
  .contenu-aide table { break-inside: avoid; }
}

/* Pages de connexion et de verrouillage : carte centrée sur une matrice de cotation des risques en filigrane. */
.page-auth { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 1.5rem 1rem; background: #eef1f5; }
.auth-matrice { position: fixed; inset: 0; z-index: 0; display: grid; grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(5, 1fr); gap: .75rem; padding: .75rem; pointer-events: none; }
.auth-matrice i { border-radius: .5rem; opacity: .16; animation: auth-scintillement 20s ease-in-out infinite; animation-delay: calc(var(--a, 0) * -3s); }
/* Scintillement lent : chaque case s'éclaire brièvement une fois par cycle, à un moment qui lui est propre.
   Simple variation d'opacité, sans déplacement : conservé même si le système demande de réduire les animations. */
@keyframes auth-scintillement { 0%, 85%, 100% { opacity: .16; } 92% { opacity: .45; } }
.auth-matrice .f, .auth-bandeau .f { background: #28a745; }
.auth-matrice .m, .auth-bandeau .m { background: #ffc107; }
.auth-matrice .c, .auth-bandeau .c { background: #dc3545; }
.auth-carte { position: relative; z-index: 1; width: 100%; max-width: 380px; background: #fff; border: 1px solid var(--bs-border-color); border-radius: .75rem; overflow: hidden; box-shadow: 0 .5rem 1.5rem rgba(33, 37, 41, .08); }
.auth-bandeau { display: flex; height: 6px; }
.auth-bandeau span { flex: 1; }
.auth-corps { padding: 1.75rem 1.75rem 2rem; }
.auth-entete { display: flex; align-items: center; gap: .75rem; margin-bottom: 1.5rem; }
.auth-logo { flex-shrink: 0; color: #212529; }
.auth-nom { font-size: 1.25rem; font-weight: 600; line-height: 1.2; color: #212529; }
.auth-organisation { font-size: .85rem; color: var(--bs-secondary-color); }
.auth-corps .form-label { font-size: .9rem; color: #495057; margin-bottom: .3rem; }
.auth-corps .btn { padding-top: .55rem; padding-bottom: .55rem; }
.auth-pied { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: .35rem; margin: 1rem 0 0; font-size: .8rem; color: #495057; text-align: center; }
.auth-pied p { margin: 0; padding: .15rem .6rem; border-radius: 1rem; background: rgba(238, 241, 245, .92); }
.auth-pied a { color: #343a40; }
@media (max-width: 575.98px) {
  .auth-matrice { gap: .4rem; padding: .4rem; }
  .auth-corps { padding: 1.5rem 1.25rem 1.75rem; }
}

/* ---------------------------------------------------------------------------------------------
   Accessibilité (RGAA 4.1)
   --------------------------------------------------------------------------------------------- */

/* Liens d'évitement (12.7) : hors écran, visibles dès qu'ils reçoivent le focus clavier. */
.liens-evitement ul { list-style: none; margin: 0; padding: 0; }
.liens-evitement a { position: absolute; left: -10000px; top: .5rem; z-index: 2000; padding: .5rem 1rem; background: #fff; color: #212529;
  font-weight: 600; border: 2px solid #212529; border-radius: .375rem; }
.liens-evitement a:focus { left: .5rem; }

/* Focus clavier toujours bien visible (10.7), y compris sur fond sombre. */
:focus-visible { outline: 3px solid #0b5ed7; outline-offset: 2px; }
.navbar :focus-visible, .titre-unite :focus-visible { outline-color: #fff; }
.btn:focus-visible, .form-control:focus-visible, .form-select:focus-visible, .form-check-input:focus-visible, .nav-link:focus-visible {
  outline: 3px solid #0b5ed7; outline-offset: 2px; }
.navbar .nav-link:focus-visible, .navbar .navbar-brand:focus-visible, .navbar .btn:focus-visible { outline-color: #fff; }
#contenu:focus, #menu-principal:focus, .recapitulatif-erreurs:focus { outline: none; }

/* Nom de la structure dans la barre de menu : contraste suffisant sur fond sombre (7,4:1). */
.organisation-menu { color: #adb5bd; }
/* Page en cours dans le menu (12.1) : repérable autrement que par la couleur. */
.navbar .nav-link[aria-current="page"], .navbar .nav-link.active { color: #fff; text-decoration: underline; text-underline-offset: .35em; }
.dropdown-item[aria-current="page"] { font-weight: 600; }
.dropdown-item[aria-current="page"]::before { content: "› "; }

/* Champs obligatoires et erreurs de saisie (11.10). */
.obligatoire { color: #b02a37; font-weight: 700; }
.texte-erreur { color: #b02a37; margin-top: .25rem; }
.form-control[aria-invalid="true"], .form-select[aria-invalid="true"] { border-color: #b02a37; border-width: 2px; }
.recapitulatif-erreurs ul { padding-left: 1.25rem; }
.recapitulatif-erreurs a { color: inherit; font-weight: 600; }

/* Groupes de cases à cocher (fieldset / legend) sans le style par défaut des navigateurs. */
.liste-risques fieldset { margin: 0; padding: 0 0 .25rem; border: 0; min-width: 0; }
.liste-risques legend.unite { float: none; width: 100%; margin: 0; font-size: 1rem; }

/* Mesures et actions d'un risque dans le document unique : liste sans puces. */
.liste-mesures { list-style: none; margin: 0; padding: 0; }

/* Pied de page avec le lien vers la déclaration d'accessibilité (obligatoire sur chaque page). */
.pied-page { padding: .75rem 1rem 1.25rem; font-size: .85rem; color: #495057; }
.pied-page ul { display: flex; flex-wrap: wrap; justify-content: center; gap: .25rem 1.25rem; list-style: none; margin: 0; padding: 0; }
.pied-page a { color: #343a40; }

/* Zone défilante de l'aide atteignable au clavier. */
.contenu-aide pre:focus-visible { outline: 3px solid #0b5ed7; }

/* Contrastes suffisants aussi sur le fond gris clair des pages et des en-têtes de cartes (3.2) : liens et boutons
   « contour » un ton plus foncés que les couleurs par défaut de Bootstrap. */
:root { --bs-link-color: #0a58ca; --bs-link-color-rgb: 10, 88, 202; }
.btn-outline-primary { --bs-btn-color: #0a58ca; --bs-btn-border-color: #0a58ca; }
.btn-outline-secondary { --bs-btn-color: #565e64; --bs-btn-border-color: #565e64; }
.btn-outline-success { --bs-btn-color: #146c43; --bs-btn-border-color: #146c43; }
.btn-outline-danger { --bs-btn-color: #b02a37; --bs-btn-border-color: #b02a37; }

/* Actions de la liste des risques : deux lignes au plus, coupées selon la largeur réelle de la colonne. Quand le texte
   est coupé (classe ajoutée par core/app.js), soulignement pointillé discret et infobulle au survol. */
.liste-actions .ligne-action { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.liste-actions .ligne-action.est-coupe { cursor: help; }
.liste-actions .ligne-action.est-coupe .texte-action { text-decoration: underline dotted rgba(33, 37, 41, .45); text-underline-offset: .2em; }
.situation-risque { font-size: .8rem; color: var(--bs-secondary-color); margin-top: 2px; white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.situation-risque.est-coupe { cursor: help; text-decoration: underline dotted rgba(33, 37, 41, .45); text-underline-offset: .2em; }
.tooltip-inner { max-width: 360px; text-align: left; }

/* Texte « jaune » (chiffres à surveiller du tableau de bord) : le jaune vif n'est lisible qu'en fond, pas en texte
   sur blanc (1,6:1). Ambre foncé de la même famille, contraste 6,3:1. */
.text-warning { color: #7a5c00 !important; }