/* Prévention (DUERP) — habillage métier par-dessus la charte du socle.
   Copyright (C) 2026 Franck Petit — GNU GPL v3 (voir LICENSE)
   Aucune couleur en dur : tout vient des jetons du socle, pour que le thème
   sombre et la couleur d'entité suivent sans retouche. */

.pv-layout { display: flex; flex-direction: column; gap: var(--pas); }
.pv-contenu { min-width: 0; }

/* --- Navigation métier ------------------------------------------------- */
.onglets {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px;
  background: var(--surface); border: 1px solid var(--ligne); border-radius: var(--r);
  padding: 6px; box-shadow: var(--ombre);
}
.onglets a {
  padding: 8px 12px; border-radius: var(--r-s); color: var(--encre-douce);
  font-size: .9rem; font-weight: 500; white-space: nowrap;
}
.onglets a:hover { background: var(--marque-clair); color: var(--marque-texte); }
.onglets a.actif { background: var(--marque); color: var(--marque-contraste); }
.onglets .role {
  margin-left: auto; font-size: .8rem; color: var(--encre-douce);
  border: 1px dashed var(--ligne); border-radius: var(--r-pilule); padding: 4px 12px;
}
.choix-entite { display: flex; gap: 6px; align-items: center; margin-left: auto; }

/* --- Blocs et cartes ---------------------------------------------------- */
.bloc {
  background: var(--surface); border: 1px solid var(--ligne); border-radius: var(--r);
  padding: var(--pas); box-shadow: var(--ombre); margin-bottom: var(--pas);
}
.bloc h2 { margin-top: 0; font-size: 1.05rem; }
.bloc h3 { font-size: .95rem; margin-bottom: 6px; }
.colonnes { display: grid; gap: var(--pas); grid-template-columns: 1fr; }
@media (min-width: 900px) { .colonnes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.vide { text-align: center; color: var(--encre-douce); }

.cartes {
  display: grid; gap: 12px; margin-bottom: var(--pas);
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.carte {
  background: var(--surface); border: 1px solid var(--ligne); border-radius: var(--r);
  padding: 14px; display: flex; flex-direction: column; gap: 2px; box-shadow: var(--ombre);
}
/* Tuile-lien : elle se comporte comme une carte, pas comme un lien de texte. */
a.carte { color: inherit; text-decoration: none; transition: box-shadow .12s, border-color .12s; }
a.carte:hover { box-shadow: var(--ombre-h); border-color: var(--marque); }
a.carte:focus-visible { outline: 2px solid var(--marque); outline-offset: 2px; }
.carte .chiffre { font-size: 1.7rem; font-weight: 650; color: var(--marque-texte); line-height: 1.1; }
.carte span:last-child { font-size: .82rem; color: var(--encre-douce); }
.carte.alerte { border-color: var(--erreur); background: var(--erreur-fond); }
.carte.alerte .chiffre { color: var(--erreur); }
.carte.attention { border-color: var(--alerte); background: var(--alerte-fond); }
.carte.attention .chiffre { color: var(--alerte); }

.chapeau { color: var(--encre-douce); max-width: 78ch; }
.muted { color: var(--encre-douce); font-size: .85rem; }
td .muted, dd .muted, li .muted { display: block; }

/* --- Tableaux ----------------------------------------------------------- */
table { width: 100%; border-collapse: collapse; font-size: .9rem; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--ligne); vertical-align: top; }
th { font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; color: var(--encre-douce); }
tbody tr:hover { background: var(--surface-2); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
tr.retard td { background: color-mix(in srgb, var(--erreur-fond) 60%, transparent); }
tr.inactif td { opacity: .55; }
/* Un tableau large défile dans son bloc, jamais la page entière. */
.bloc > table, .duerp-table { display: block; overflow-x: auto; white-space: normal; }

/* --- Messages ----------------------------------------------------------- */
.msg { padding: 10px 14px; border-radius: var(--r-s); margin-bottom: 12px; font-size: .9rem; }
.msg.ok { background: var(--ok-fond); color: var(--ok); }
.msg.erreur { background: var(--erreur-fond); color: var(--erreur); }
.msg.info { background: var(--info-fond); color: var(--info); }
.msg.alerte { background: var(--alerte-fond); color: var(--alerte); }

/* --- Badges ------------------------------------------------------------- */
.badge {
  display: inline-block; padding: 2px 9px; border-radius: var(--r-pilule);
  font-size: .74rem; font-weight: 600; background: var(--surface-2);
  color: var(--encre-douce); border: 1px solid var(--ligne); white-space: nowrap;
}
.badge.prio-critique  { background: var(--erreur-fond); color: var(--erreur); border-color: transparent; }
.badge.prio-important { background: var(--alerte-fond); color: var(--alerte); border-color: transparent; }
.badge.prio-modere    { background: var(--info-fond); color: var(--info); border-color: transparent; }
.badge.prio-faible    { background: var(--ok-fond); color: var(--ok); border-color: transparent; }
.badge.etat-valide, .badge.act-faite, .badge.ok, .badge.revue-complete,
.badge.baisse { background: var(--ok-fond); color: var(--ok); border-color: transparent; }
.badge.etat-propose, .badge.act-en_cours, .badge.revue-en_cours,
.badge.camp-ouverte { background: var(--info-fond); color: var(--info); border-color: transparent; }
.badge.etat-brouillon, .badge.revue-a_faire { background: var(--alerte-fond); color: var(--alerte); border-color: transparent; }
.badge.alerte, .badge.hausse { background: var(--erreur-fond); color: var(--erreur); border-color: transparent; }
.badge.conf { background: var(--marque); color: var(--marque-contraste); border-color: transparent; }
.badge.prio-aucune, .badge.etat-ecarte, .badge.act-abandonnee { opacity: .8; }

/* --- Formulaires -------------------------------------------------------- */
.grille { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .grille { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.grille .large, .grille fieldset, .grille .actions-form { grid-column: 1 / -1; }
.grille.bordee {
  border: 1px solid var(--ligne); border-radius: var(--r); padding: 12px; margin-bottom: 12px;
}
label { display: flex; flex-direction: column; gap: 4px; font-size: .85rem; color: var(--encre-douce); }
label.case { flex-direction: row; align-items: center; gap: 8px; }
input, select, textarea {
  font: inherit; font-size: .92rem; color: var(--encre); background: var(--surface);
  border: 1px solid var(--ligne); border-radius: var(--r-s); padding: 8px 10px; width: 100%;
}
label.case input { width: auto; }
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--marque); outline-offset: 1px; border-color: var(--marque);
}
textarea { resize: vertical; }
fieldset { border: 1px solid var(--ligne); border-radius: var(--r); padding: 12px; }
fieldset legend { font-size: .8rem; color: var(--encre-douce); padding: 0 6px; }
.cotation { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .cotation { grid-template-columns: repeat(3, 1fr); } .cotation p { grid-column: 1 / -1; } }
.apercu-criticite { grid-column: 1 / -1; font-size: .85rem; color: var(--encre-douce); margin: 0; }
.obligatoire { font-size: .7rem; text-transform: uppercase; color: var(--erreur); letter-spacing: .04em; }
.actions-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.enligne { display: inline-flex; gap: 6px; align-items: center; }

/* `display` sur les boutons bat la règle par défaut de [hidden] : sans ceci, un
   bouton de repli masqué par le JS resterait visible. */
[hidden] { display: none !important; }

button, .btn {
  font: inherit; font-size: .88rem; font-weight: 600; cursor: pointer;
  padding: 8px 14px; border-radius: var(--r-s); border: 1px solid transparent;
  background: var(--marque); color: var(--marque-contraste); text-decoration: none;
  display: inline-block;
}
button:hover, .btn:hover { background: var(--marque-fonce); }
button.sec, .btn.sec {
  background: var(--surface); color: var(--encre); border-color: var(--ligne);
}
button.sec:hover, .btn.sec:hover { background: var(--surface-2); }

.filtres {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: var(--pas);
}
.filtres input, .filtres select { width: auto; min-width: 150px; }
/* Une case à cocher n'a que faire d'une largeur minimale de champ texte. */
.filtres input[type="checkbox"] { min-width: 0; }
.filtres label.case { gap: 6px; }
/* Un état tronqué en « En cou… » oblige à ouvrir la liste pour se relire. */
td select { min-width: 9rem; }

/* --- Fiches ------------------------------------------------------------- */
dl.fiche { display: grid; grid-template-columns: 1fr; gap: 2px 16px; margin: 0; }
@media (min-width: 620px) { dl.fiche { grid-template-columns: minmax(120px, 200px) 1fr; } }
dl.fiche dt { font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; color: var(--encre-douce); padding-top: 6px; }
dl.fiche dd { margin: 0; padding: 6px 0; border-bottom: 1px solid var(--ligne); }
ul.pieces, ul.compact { margin: 0; padding-left: 18px; }
ul.compact li { margin-bottom: 4px; }
.empreinte code { font-size: .78rem; }
.pagination { display: flex; gap: 16px; }
.connexion { max-width: 380px; margin: 8vh auto; }
.aide h2 { margin-top: 22px; }
.aide p, .aide li { max-width: 78ch; }

/* --- Risque chimique (SEIRICH) ------------------------------------------ */
details.seirich { border: 1px solid var(--ligne); border-radius: var(--r); padding: 10px 12px; }
details.seirich summary { cursor: pointer; font-size: .85rem; font-weight: 600; color: var(--encre-douce); }
details.seirich[open] summary { margin-bottom: 10px; }
details.seirich p { margin-bottom: 0; }
.badge.seirich, .badge.op-maj { background: var(--info-fond); color: var(--info); border-color: transparent; }
.badge.op-creer { background: var(--ok-fond); color: var(--ok); border-color: transparent; }
.badge.op-erreur { background: var(--erreur-fond); color: var(--erreur); border-color: transparent; }
.badge.op-ignore, .badge.op-doublon { opacity: .8; }
.defile { overflow-x: auto; }
.apercu-brut { font-size: .8rem; }
.apercu-brut td { max-width: 16rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.apercu-brut th { width: 1%; }
.apercu-brut tr.entete td { font-weight: 650; background: var(--marque-clair); color: var(--encre); }
.apercu-brut tr.avant td { opacity: .5; }
table.niveaux select { min-width: 8rem; }
button[disabled] { opacity: .5; cursor: not-allowed; }

/* --- Document unique ---------------------------------------------------- */
.duerp { background: var(--surface); border: 1px solid var(--ligne); border-radius: var(--r); padding: 24px; }
.duerp-entete h1 { font-size: 1.4rem; margin-bottom: 4px; }
.duerp-entite { font-size: 1.05rem; font-weight: 600; color: var(--marque-texte); margin: 0 0 6px; }
.duerp-meta, .duerp-cadre { font-size: .82rem; color: var(--encre-douce); }
.duerp-cadre { border-left: 3px solid var(--marque); padding-left: 12px; }
.duerp-imprimer { display: flex; gap: 8px; margin: 14px 0 24px; }
.duerp-bareme ul { margin: 0; padding-left: 18px; font-size: .85rem; }
@media (min-width: 900px) { .duerp-bareme .colonnes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.duerp-confidentiel {
  font-size: .85rem; background: var(--alerte-fond); color: var(--alerte);
  padding: 8px 12px; border-radius: var(--r-s);
}
.duerp-unite { margin-top: 26px; page-break-inside: auto; }
.duerp-unite h2 {
  font-size: 1.05rem; border-bottom: 2px solid var(--marque); padding-bottom: 4px;
}
.duerp-table { font-size: .82rem; }
.duerp-table td { vertical-align: top; }
.duerp-pied { margin-top: 30px; font-size: .8rem; color: var(--encre-douce); }

@media print {
  .sc-entete, .onglets, .duerp-imprimer, .sc-pied { display: none !important; }
  body { background: #fff; }
  .duerp { border: none; box-shadow: none; padding: 0; }
  .duerp-unite { page-break-inside: avoid; }
  table { font-size: 9pt; }
  a { color: inherit; text-decoration: none; }
}

/* --- Autocomplétion sur l'annuaire (écran des accès) -------------------- */
.ac-box {
  position: absolute; z-index: 20; left: 0; right: 0; top: 100%; margin-top: 4px;
  background: var(--surface); border: 1px solid var(--ligne); border-radius: var(--r);
  box-shadow: var(--ombre-h); max-height: 280px; overflow-y: auto; padding: 4px;
}
/* Sélecteurs plus forts que la règle générale des boutons : une suggestion est
   un <button>, mais elle ne doit pas ressembler à un bouton d'action. */
.ac-box .ac-item {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
  width: 100%; text-align: left; border: 0; background: none; padding: 8px 12px;
  border-radius: var(--r-s); cursor: pointer; font: inherit; color: var(--encre);
}
.ac-box .ac-item:hover, .ac-box .ac-item:focus, .ac-box .ac-item.actif {
  background: var(--marque-clair); color: var(--encre); outline: none;
}
.ac-box .ac-item:hover .ac-id, .ac-box .ac-item:focus .ac-id,
.ac-box .ac-item.actif .ac-id { color: var(--encre-douce); }
.ac-nom { font-weight: 600; font-size: .9rem; }
.ac-id { font-size: .78rem; color: var(--encre-douce); }
.ac-avert { font-size: .78rem; color: var(--alerte); margin-top: 2px; }
.ac-empty { padding: 10px 12px; color: var(--encre-douce); font-size: .85rem; }
.sujet-retenu {
  margin: 0; font-size: .85rem; font-weight: 600; color: var(--marque-texte);
  background: var(--marque-clair); border-radius: var(--r-s); padding: 6px 10px;
}