/* Portail conformité sous-traitants
   Palette : béton, papier, encre, bleu de travail, et trois couleurs de signalisation. */

:root {
  --beton: #E7E9E6;
  --papier: #FFFFFF;
  --encre: #1B2433;
  --encre-douce: #556070;
  --trait: #CDD2D6;
  --bleu: #24439A;
  --bleu-fonce: #1A3277;
  --vert: #1D7A46;
  --vert-fond: #E2F1E7;
  --ambre: #8A5300;
  --ambre-fond: #FBEED6;
  --ambre-trait: #D79A2B;
  --rouge: #A3221B;
  --rouge-fond: #FBE3E1;
  --gris-fond: #E5E8EE;
  --signal: #F2B705;

  --titre: "Bahnschrift SemiCondensed", "Bahnschrift", "Avenir Next Condensed", "Roboto Condensed", "Arial Narrow", sans-serif-condensed, system-ui, sans-serif;
  --texte: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; background: var(--beton); }

body {
  margin: 0;
  background: var(--beton);
  color: var(--encre);
  font: 17px/1.5 var(--texte);
}

h1, h2, h3 {
  font-family: var(--titre);
  font-stretch: semi-condensed;
  font-weight: 600;
  line-height: 1.15;
  margin: 0;
  letter-spacing: 0.005em;
}
h1 { font-size: 1.85rem; }
h2 { font-size: 1.45rem; }
h3 { font-size: 1.2rem; }

a { color: var(--bleu); text-underline-offset: 0.18em; }
a:hover { color: var(--bleu-fonce); }

:focus-visible {
  outline: 3px solid var(--signal);
  outline-offset: 2px;
}

/* --- En-tête ------------------------------------------------------------ */
.entete { background: var(--bleu); color: #fff; }
.entete-int {
  max-width: 46rem;
  margin: 0 auto;
  padding: 0.85rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.marque { color: #fff; text-decoration: none; display: flex; flex-direction: column; }
.marque:hover { color: #fff; }
.marque-nom { font-family: var(--titre); font-stretch: semi-condensed; font-weight: 700; font-size: 1.3rem; line-height: 1.1; }
.marque-sous { font-size: 0.85rem; opacity: 0.85; }
.entete-actions { display: flex; align-items: center; gap: 0.5rem 1.25rem; flex-wrap: wrap; justify-content: flex-end; flex-shrink: 0; }
.entete-actions a { color: #fff; font-weight: 600; font-size: 0.95rem; white-space: nowrap; text-underline-offset: 0.18em; }
.deconnexion { margin: 0; flex-shrink: 0; }
.deconnexion .lien { color: #fff; white-space: nowrap; }
.marque { min-width: 0; }

/* --- Contenu ------------------------------------------------------------ */
.contenu {
  max-width: 46rem;
  margin: 0 auto;
  padding: 1.25rem 1rem 2rem;
}

.retour { margin: 0 0 0.75rem; font-size: 0.95rem; }

.avis {
  padding: 0.85rem 1rem;
  margin: 0 0 1.25rem;
  border-left: 5px solid;
  background: var(--papier);
}
.avis-ok { border-color: var(--vert); }
.avis-erreur { border-color: var(--rouge); background: var(--rouge-fond); }
.avis-info { border-color: var(--bleu); }

/* --- Panneau de chantier : l'identité du dossier ------------------------ */
.panneau {
  background: var(--papier);
  border: 5px solid var(--bleu);
  margin-bottom: 1.75rem;
}
.panneau-tete {
  background: var(--bleu);
  color: #fff;
  padding: 0.35rem 1rem 0.5rem;
  font-family: var(--titre);
  font-stretch: semi-condensed;
  font-size: 1.05rem;
  font-weight: 600;
}
.panneau-lignes { margin: 0; padding: 0 1rem; }
.panneau-lignes > div {
  display: grid;
  grid-template-columns: 9.5rem 1fr;
  gap: 0.75rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--trait);
  align-items: baseline;
}
.panneau-lignes > div:last-child { border-bottom: 0; }
.panneau-lignes dt { color: var(--encre-douce); font-size: 0.9rem; }
.panneau-lignes dd { margin: 0; font-variant-numeric: tabular-nums; }
.panneau-nom {
  font-family: var(--titre);
  font-stretch: semi-condensed;
  font-weight: 700;
  font-size: 1.9rem;
  line-height: 1.05;
}
.panneau-etat {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.9rem 1rem 1rem;
  border-top: 5px solid;
}
.panneau-etat-titre {
  font-family: var(--titre);
  font-stretch: semi-condensed;
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 1.1;
}
.panneau-ok { background: var(--vert-fond); border-color: var(--vert); color: #124D2C; }
.panneau-alerte { background: var(--ambre-fond); border-color: var(--ambre-trait); color: #5E3900; }
.panneau-ko { background: var(--rouge-fond); border-color: var(--rouge); color: #7A1913; }
.panneau-ko .panneau-etat-titre::before { content: "✕ "; }
.panneau-ok .panneau-etat-titre::before { content: "✓ "; }
.panneau-alerte .panneau-etat-titre::before { content: "! "; }

/* --- Blocs et listes ---------------------------------------------------- */
.bloc { margin-bottom: 2rem; }
.bloc > h2, .bloc-tete { margin-bottom: 0.65rem; }
.bloc-tete {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
}
.liste {
  list-style: none;
  margin: 0;
  padding: 0;
  background: var(--papier);
  border: 1px solid var(--trait);
}
.doc {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "nom action" "etat action" "motifs motifs";
  gap: 0.3rem 1rem;
  padding: 0.8rem 1rem;
  border-bottom: 1px solid var(--trait);
  align-items: center;
}
.doc:last-child { border-bottom: 0; }
.doc-nom { grid-area: nom; font-weight: 600; }
.doc-etat { grid-area: etat; display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.6rem; }
.doc-detail { color: var(--encre-douce); font-size: 0.92rem; }
.doc-action { grid-area: action; }
.doc-motifs { grid-area: motifs; }
.motifs { margin: 0.35rem 0 0; padding-left: 1.2rem; color: #7A1913; font-size: 0.95rem; }
.motifs li + li { margin-top: 0.2rem; }

.vide {
  background: var(--papier);
  border: 1px dashed var(--trait);
  padding: 1rem;
  margin: 0;
  color: var(--encre-douce);
}

/* Étiquettes d'état : forme + texte + couleur */
.etat {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  font-size: 0.85rem;
  font-weight: 600;
  padding: 0.12rem 0.5rem;
  border-radius: 3px;
  white-space: nowrap;
}
.etat::before { font-weight: 700; }
.etat-ok { background: var(--vert-fond); color: #145C33; }
.etat-ok::before { content: "✓"; }
.etat-alerte { background: var(--ambre-fond); color: var(--ambre); }
.etat-alerte::before { content: "!"; }
.etat-ko { background: var(--rouge-fond); color: var(--rouge); }
.etat-ko::before { content: "✕"; }
.etat-manque { background: transparent; color: var(--rouge); box-shadow: inset 0 0 0 1.5px var(--rouge); }
.etat-manque::before { content: "○"; }
.etat-attente { background: var(--gris-fond); color: #3A4352; }
.etat-attente::before { content: "…"; }
.etat-neutre { background: transparent; color: var(--encre-douce); box-shadow: inset 0 0 0 1px var(--trait); }
.etat-neutre::before { content: "–"; }

/* --- Salariés ----------------------------------------------------------- */
.salarie {
  background: var(--papier);
  border: 1px solid var(--trait);
  border-left: 5px solid var(--bleu);
  margin-bottom: 1rem;
}
.salarie-tete {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.85rem 1rem 0.6rem;
}
.salarie-poste { margin: 0.1rem 0 0; color: var(--encre-douce); font-size: 0.92rem; }
.salarie .liste { border-left: 0; border-right: 0; }
.salarie .vide { border: 0; border-top: 1px solid var(--trait); }
.salarie-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1.25rem;
  padding: 0.75rem 1rem;
}

/* --- Boutons ------------------------------------------------------------ */
.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  padding: 0.6rem 1.25rem;
  background: var(--bleu);
  color: #fff;
  border: 0;
  border-radius: 4px;
  font: 600 1rem/1.2 var(--texte);
  text-decoration: none;
  cursor: pointer;
}
.bouton:hover { background: var(--bleu-fonce); color: #fff; }
.bouton[disabled] { opacity: 0.7; cursor: progress; }
.bouton-petit { min-height: 2.5rem; padding: 0.4rem 0.9rem; font-size: 0.95rem; }
.bouton-danger { background: var(--rouge); }
.bouton-danger:hover { background: #7A1913; }
.bouton-discret, .lien {
  background: none;
  border: 0;
  padding: 0;
  color: var(--bleu);
  font: 600 0.95rem/1.3 var(--texte);
  text-decoration: underline;
  text-underline-offset: 0.18em;
  cursor: pointer;
}

/* --- Formulaires -------------------------------------------------------- */
.porte {
  background: var(--papier);
  border-top: 5px solid var(--bleu);
  padding: 1.5rem 1.25rem 1.75rem;
  max-width: 34rem;
  margin: 1rem auto 0;
}
.porte h1 { margin-bottom: 0.75rem; }
.chapo { font-size: 1.05rem; margin: 0 0 1.25rem; }
.formulaire-bloc { background: var(--papier); border: 1px solid var(--trait); padding: 1.25rem; }
.formulaire-bloc h1 { margin-bottom: 1rem; }
.formulaire { display: flex; flex-direction: column; }
.formulaire label, .formulaire legend { display: block; font-weight: 600; margin: 1rem 0 0.35rem; }
.formulaire > input[type="hidden"] + label, .formulaire > input[type="hidden"] + .duo label { margin-top: 0; }
.facultatif { font-weight: 400; color: var(--encre-douce); }
input[type="email"], input[type="text"], input[type="password"], input:not([type]), input[type="date"], select, textarea {
  width: 100%;
  font: inherit;
  padding: 0.65rem 0.75rem;
  border: 1.5px solid #9AA3AD;
  border-radius: 4px;
  background: #fff;
  color: var(--encre);
  min-height: 3rem;
}
textarea { min-height: 5rem; resize: vertical; }
input[readonly] { background: #F3F4F3; color: var(--encre-douce); }
.mdp { position: relative; }
.mdp input { padding-right: 6.5rem; }
.mdp-voir {
  position: absolute; right: 0.35rem; top: 50%; transform: translateY(-50%);
  min-height: 2.4rem; padding: 0 0.7rem;
  background: #fff; border: 1.5px solid var(--trait); border-radius: 4px;
  color: var(--bleu); font: 600 0.9rem/1 var(--texte); cursor: pointer;
}
input.masque {
  position: absolute !important; width: 1px !important; height: 1px !important; min-height: 0 !important;
  margin: -1px; padding: 0 !important; border: 0 !important; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.porte-suite { margin: 1.25rem 0 0; }
.etapes { padding-left: 1.3rem; margin: 0.5rem 0 0.5rem; }
.etapes li + li { margin-top: 0.6rem; }
.formulaire .choix { font-weight: 400; align-items: flex-start; margin-top: 1.25rem !important; }
.formulaire .choix input { margin-top: 0.2rem; flex-shrink: 0; }
input[type="tel"] { width: 100%; font: inherit; padding: 0.65rem 0.75rem; border: 1.5px solid #9AA3AD; border-radius: 4px; background: #fff; color: var(--encre); min-height: 3rem; }
.sous-titre { font-size: 1.25rem; margin: 1.75rem 0 0.25rem; }
.infos { margin: 0 0 0.5rem; }
.infos > div { display: grid; grid-template-columns: 11rem 1fr; gap: 0.75rem; padding: 0.45rem 0; border-bottom: 1px solid var(--trait); }
.infos dt { color: var(--encre-douce); }
.infos dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.texte-long { background: var(--papier); border: 1px solid var(--trait); padding: 1.25rem 1.25rem 0.5rem; }
.texte-long h2 { font-size: 1.2rem; margin: 1.5rem 0 0.4rem; }
.texte-long p, .texte-long li { max-width: 40rem; }
.texte-long ul { padding-left: 1.2rem; }
.texte-long li + li { margin-top: 0.35rem; }
.formulaire .bouton { margin-top: 1.5rem; align-self: flex-start; }
.aide { color: var(--encre-douce); font-size: 0.92rem; margin: 0.45rem 0 0; }
.depot-zone {
  border: 2px dashed #9AA3AD;
  border-radius: 4px;
  padding: 1rem;
  background: #F7F8F7;
}
.depot-zone input[type="file"] { width: 100%; font-size: 1rem; }
.depot-zone input[type="file"]::file-selector-button {
  font: 600 0.95rem/1.2 var(--texte);
  color: var(--bleu);
  background: #fff;
  border: 1.5px solid var(--bleu);
  border-radius: 4px;
  padding: 0.55rem 0.9rem;
  margin-right: 0.75rem;
  cursor: pointer;
}
.depot-zone.choisi { border-style: solid; border-color: var(--bleu); background: #F1F4FB; }
fieldset { border: 0; padding: 0; margin: 0; }
.choix { display: flex; align-items: center; gap: 0.6rem; font-weight: 400 !important; margin: 0.4rem 0 0 !important; min-height: 2.5rem; }
.choix input { width: 1.25rem; height: 1.25rem; }
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
.actions-ligne { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }
.actions-ligne .bouton { margin-top: 0.5rem; }

.bloc-tete-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.25rem; }

/* --- Formulaires en ligne (questionnaires) ------------------------------ */
.questionnaire .question { margin: 1.35rem 0 0; padding: 0; min-width: 0; }
.questionnaire .question > label, .questionnaire .question > legend { margin: 0 0 0.35rem; padding: 0; }
.questionnaire > input[type="hidden"] + .question { margin-top: 0.25rem; }
.questionnaire .choix { min-height: 2.25rem; margin: 0.1rem 0 0 !important; }
.questionnaire .question > .aide { margin: -0.15rem 0 0.45rem; }
.section-form {
  font-size: 1.3rem;
  margin: 2rem 0 0;
  padding-top: 1.1rem;
  border-top: 3px solid var(--beton);
}
.questionnaire > input[type="hidden"] + .section-form { margin-top: 0.25rem; padding-top: 0; border-top: 0; }
.question-erreur { border-left: 4px solid var(--rouge); padding-left: 0.75rem !important; }
.erreur-champ { color: var(--rouge); font-weight: 600; font-size: 0.95rem; margin: 0 0 0.4rem; }
.question-erreur input, .question-erreur textarea, .question-erreur select { border-color: var(--rouge); }
.avec-unite { display: flex; align-items: center; gap: 0.6rem; }
.avec-unite input { max-width: 12rem; }
.unite { color: var(--encre-douce); }
.choix-ligne { display: flex; flex-wrap: wrap; gap: 0 1.75rem; }
.choix-colonnes { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 0 1rem; }
.questionnaire .choix { align-items: flex-start; }
.questionnaire .choix input { margin-top: 0.15rem; flex-shrink: 0; }
.questionnaire input[type="date"] { max-width: 14rem; }

/* --- Bilan des compétences ---------------------------------------------- */
.bilan .chapo { margin-top: 0.25rem; }
/* Sur grand écran, le tableau prend toute la largeur disponible (au-delà de la colonne de lecture). */
@media screen and (min-width: 50rem) {
  .bilan { --large: min(calc(100vw - 3rem), 80rem); width: var(--large); margin-left: calc((100% - var(--large)) / 2); }
}
.defile { position: relative; overflow-x: auto; background: var(--papier); border: 1px solid var(--trait); }
.defile:focus-visible { outline-offset: -3px; }
.matrice { border-collapse: collapse; font-size: 0.9rem; min-width: 100%; }
.matrice th, .matrice td { border: 1px solid var(--trait); padding: 0.4rem 0.5rem; vertical-align: middle; }
.matrice thead th { background: #F3F4F3; font-weight: 600; text-align: center; }
.matrice .col-famille { font-family: var(--titre); font-stretch: semi-condensed; font-size: 0.95rem; }
.matrice .col-type { font-size: 0.8rem; min-width: 5.5rem; max-width: 9rem; line-height: 1.2; }
.matrice .col-nom { text-align: left; min-width: 10rem; position: sticky; left: 0; background: var(--papier); z-index: 1; }
.matrice thead .col-nom { background: #F3F4F3; }
.matrice tbody .col-nom a { font-weight: 600; }
.col-poste { display: block; font-weight: 400; color: var(--encre-douce); font-size: 0.82rem; }
.matrice td { text-align: center; white-space: nowrap; }
.case-date { display: block; font-size: 0.75rem; color: var(--encre-douce); font-variant-numeric: tabular-nums; }
.case {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.5rem; height: 1.5rem; border-radius: 3px; font-weight: 700; font-size: 0.9rem;
}
.case-ok { background: var(--vert-fond); color: #145C33; }
.case-alerte { background: var(--ambre-fond); color: var(--ambre); }
.case-ko { background: var(--rouge-fond); color: var(--rouge); }
.case-manque { color: var(--rouge); box-shadow: inset 0 0 0 1.5px var(--rouge); }
.case-vide { background: #FAFAFA; }
.legende { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.5rem; font-size: 0.88rem; color: var(--encre-douce); margin: 0.6rem 0 0; }
.legende .case { width: 1.3rem; height: 1.3rem; font-size: 0.8rem; margin-left: 0.6rem; }
.legende .case:first-child { margin-left: 0; }
.visuel-masque {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.fiche { background: var(--papier); border: 1px solid var(--trait); padding: 1.25rem; }
.fiche .bloc-tete { margin-bottom: 1rem; }
.fiche .famille { font-size: 1.05rem; margin: 1.1rem 0 0.4rem; color: var(--encre-douce); }
.liste-bilan li {
  display: grid; grid-template-columns: 1.5rem 1fr auto; gap: 0.6rem; align-items: center;
  padding: 0.55rem 0.75rem; border-bottom: 1px solid var(--trait);
}
.liste-bilan li:last-child { border-bottom: 0; }
.bilan-nom { font-weight: 600; }
.bilan-etat { color: var(--encre-douce); font-size: 0.92rem; text-align: right; }
.section-declaration { font-size: 1rem; margin: 0.9rem 0 0.2rem; }
.reponses { margin: 0; }
.reponses > div { display: grid; grid-template-columns: minmax(10rem, 40%) 1fr; gap: 0.75rem; padding: 0.45rem 0; border-bottom: 1px solid var(--trait); }
.reponses dt { color: var(--encre-douce); }
.reponses dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }

/* --- Pied --------------------------------------------------------------- */
.pied {
  max-width: 46rem;
  margin: 0 auto;
  padding: 1rem 1rem 2.5rem;
  color: var(--encre-douce);
  font-size: 0.85rem;
}
.pied p { margin: 0 0 0.5rem; max-width: 40rem; }

/* --- Petits écrans ------------------------------------------------------ */
@media (max-width: 34rem) {
  body { font-size: 16px; }
  h1 { font-size: 1.6rem; }
  .entete-int { padding: 0.7rem 1rem; }
  .marque-nom { font-size: 1.15rem; }
  .marque-sous { font-size: 0.8rem; }
  .panneau-lignes > div { grid-template-columns: 6.5rem 1fr; gap: 0.5rem; }
  .panneau-nom { font-size: 1.45rem; }
  .panneau-etat-titre { font-size: 1.4rem; }
  .doc-prio { grid-template-columns: 1fr; grid-template-areas: "nom" "etat" "action" "motifs"; }
  .doc-prio .doc-action .bouton { margin-top: 0.35rem; }
  .doc-action:empty { display: none; }
  .duo { grid-template-columns: 1fr; }
  .formulaire > input[type="hidden"] + .duo > div + div > label { margin-top: 1rem; }
  .formulaire .bouton { align-self: stretch; }
  .salarie-tete { flex-direction: column; }
  .infos > div { grid-template-columns: 1fr; gap: 0.1rem; }
  .entete-actions { flex-direction: column; align-items: flex-end; gap: 0.35rem; }
  .reponses > div { grid-template-columns: 1fr; gap: 0.1rem; }
  .liste-bilan li { grid-template-columns: 1.5rem 1fr; }
  .bilan-etat { grid-column: 2; text-align: left; }
  .fiche { padding: 1rem; }
  .matrice .col-nom { min-width: 8rem; }
}

/* --- Impression (bilan des compétences) -------------------------------- */
.seulement-impression { display: none; }
@media print {
  .seulement-impression { display: block; margin: 0 0 0.75rem; padding-bottom: 0.4rem; border-bottom: 2px solid var(--bleu); color: var(--bleu); font-weight: 600; font-size: 10pt; }
  @page { margin: 12mm; }
  html, body { background: #fff; font-size: 11pt; }
  .entete, .pied, .sans-impression, .avis, [data-imprimer] { display: none !important; }
  .contenu { max-width: none; padding: 0; }
  .fiche, .defile { border: 0; padding: 0; overflow: visible; }
  .matrice { font-size: 8pt; }
  .matrice th, .matrice td { padding: 2pt 3pt; }
  .matrice .col-type { min-width: 0; }
  .matrice .col-nom { position: static; min-width: 0; }
  .matrice tbody .col-nom a { color: inherit; text-decoration: none; }
  .case, .etat, .matrice thead th, .case-vide { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .liste, .liste-bilan li, .reponses > div { break-inside: avoid; }
  a { color: inherit; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}