/*
 * processus-outils.css : habillage des 24 mini-outils Processus (méthode BOSS).
 * Palette du site (SPEC_COMMUN.md § 8) : #085292, #0B6BB8, #06467E. Police système, style sobre.
 * Contraintes : utilisable à 360 px de large, contrastes AA, impression A4 (@media print),
 * aucun appel réseau (aucune police distante, aucune image distante).
 * Toutes les classes sont préfixées « po- » pour ne jamais heurter le style du site.
 */

.po-outil {
  --po-bleu: #085292;
  --po-bleu-clair: #0b6bb8;
  --po-bleu-fonce: #06467e;
  --po-encre: #16222e;
  --po-gris: #5a6672;
  --po-trait: #d4dbe3;
  --po-fond: #f6f8fb;
  --po-ok: #1c6b3c;
  --po-ok-fond: #e8f4ec;
  --po-alerte: #8a5300;
  --po-alerte-fond: #fdf3e2;
  --po-danger: #9c2222;
  --po-danger-fond: #fbeced;

  box-sizing: border-box;
  margin: 0 0 1.75rem;
  padding: 1.25rem;
  border: 1px solid var(--po-trait);
  border-top: 3px solid var(--po-bleu);
  border-radius: 10px;
  background: #fff;
  color: var(--po-encre);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.55;
}
.po-outil *, .po-outil *::before, .po-outil *::after { box-sizing: inherit; }

/* ---------------------------------------------------------------- en-tête */
.po-tete { margin: 0 0 1rem; }
.po-tete h2, .po-tete h3, .po-tete .po-titre {
  margin: 0 0 .3rem;
  color: var(--po-bleu-fonce);
  font-size: 1.2rem;
  line-height: 1.3;
}
.po-intro { margin: 0 0 .75rem; color: var(--po-gris); }
.po-sous { margin: 0 0 .5rem; color: var(--po-gris); font-size: .95rem; }
.po-petit { font-size: .875rem; color: var(--po-gris); }
.po-pilier {
  display: inline-block;
  margin: 0 0 .5rem;
  padding: .1rem .55rem;
  border-radius: 999px;
  background: var(--po-fond);
  border: 1px solid var(--po-trait);
  color: var(--po-bleu-fonce);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .02em;
}
/* libellé lisible par les lecteurs d'écran seulement */
.po-sr {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------------------------------------------------------------- formulaire */
.po-form { margin: 0 0 1rem; }
.po-form fieldset { margin: 0 0 1rem; padding: 0; border: 0; }
.po-form legend {
  margin: 0 0 .5rem;
  padding: 0;
  color: var(--po-bleu-fonce);
  font-size: 1rem;
  font-weight: 600;
}
.po-grille { display: grid; grid-template-columns: 1fr; gap: .85rem; }
.po-grille-l { display: grid; grid-template-columns: 1fr; gap: .85rem; }
@media (min-width: 620px) {
  .po-grille { grid-template-columns: 1fr 1fr; }
  .po-grille-l { grid-template-columns: 1fr 1fr 1fr; }
}
.po-champ { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
.po-champ > label, .po-champ .po-f {
  font-size: .9rem;
  font-weight: 600;
  color: var(--po-encre);
}
.po-champ .po-aide { font-size: .85rem; font-weight: 400; color: var(--po-gris); }
.po-champ-titre { grid-column: 1 / -1; }
.po-champ-titre .po-f { color: var(--po-bleu-fonce); font-size: 1rem; }
.po-champ-tableau, .po-champ-grille, .po-champ-cases, .po-champ-bouton { grid-column: 1 / -1; }

.po-outil input[type="text"],
.po-outil input[type="number"],
.po-outil input[type="date"],
.po-outil input[type="time"],
.po-outil select,
.po-outil textarea {
  width: 100%;
  min-height: 2.6rem;
  padding: .45rem .6rem;
  border: 1px solid #9aa7b4;
  border-radius: 6px;
  background: #fff;
  color: var(--po-encre);
  font: inherit;
  font-size: 1rem;      /* >= 16 px : évite le zoom automatique sur iOS */
}
.po-outil textarea { min-height: 5rem; resize: vertical; }
.po-outil input:focus-visible,
.po-outil select:focus-visible,
.po-outil textarea:focus-visible,
.po-outil button:focus-visible {
  outline: 3px solid var(--po-bleu-clair);
  outline-offset: 1px;
}
.po-unite { font-size: .85rem; color: var(--po-gris); }

/* cases à cocher */
.po-cases { display: grid; grid-template-columns: 1fr; gap: .5rem; }
.po-ligne-case {
  display: flex;
  align-items: flex-start;
  gap: .55rem;
  padding: .5rem .6rem;
  border: 1px solid var(--po-trait);
  border-radius: 6px;
  background: var(--po-fond);
  font-size: .95rem;
}
.po-ligne-case input[type="checkbox"],
.po-ligne-case input[type="radio"] {
  width: 1.15rem; height: 1.15rem;
  margin: .15rem 0 0;
  flex: 0 0 auto;
  accent-color: var(--po-bleu);
}
.po-ligne-case label { font-weight: 400; }
.po-tag {
  display: inline-block;
  margin-left: .35rem;
  padding: 0 .4rem;
  border-radius: 4px;
  background: #e7edf4;
  color: var(--po-bleu-fonce);
  font-size: .78rem;
  font-weight: 600;
  white-space: nowrap;
}
.po-tag-danger { background: var(--po-danger-fond); color: var(--po-danger); }

/* ---------------------------------------------------------------- tableaux */
.po-table-boite {
  overflow-x: auto;
  min-width: 0;
  max-width: 100%;
  margin: 0 0 1rem;
  -webkit-overflow-scrolling: touch;
}
.po-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.po-table caption { padding: 0 0 .4rem; color: var(--po-gris); font-size: .875rem; text-align: left; }
.po-table th, .po-table td {
  padding: .45rem .55rem;
  border: 1px solid var(--po-trait);
  text-align: left;
  vertical-align: top;
}
.po-table thead th { background: var(--po-fond); color: var(--po-bleu-fonce); font-weight: 600; }
.po-table tbody tr:nth-child(even) td { background: #fbfcfe; }
.po-table .po-total td { font-weight: 700; background: #eef3f8; }
.po-table .po-l-rouge td { background: var(--po-danger-fond); }
.po-table .po-l-orange td { background: var(--po-alerte-fond); }
.po-table .po-l-vert td { background: var(--po-ok-fond); }
.po-table-saisie td { padding: .3rem; }
.po-table-saisie input, .po-table-saisie select { min-height: 2.3rem; }
.po-suppr {
  min-width: 2.1rem; min-height: 2.1rem;
  border: 1px solid var(--po-trait);
  border-radius: 6px;
  background: #fff;
  color: var(--po-danger);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}
.po-suppr:hover { background: var(--po-danger-fond); }

/* ---------------------------------------------------------------- résultats */
.po-resultat { margin: 0; }
.po-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin: 0 0 1rem; }
@media (min-width: 620px) { .po-kpis { grid-template-columns: repeat(4, 1fr); } }
.po-kpi {
  display: flex; flex-direction: column; gap: .15rem;
  padding: .6rem .7rem;
  border: 1px solid var(--po-trait);
  border-left: 3px solid var(--po-bleu-clair);
  border-radius: 6px;
  background: var(--po-fond);
  min-width: 0;
}
.po-kpi-l { font-size: .8rem; color: var(--po-gris); }
.po-kpi-v { font-size: 1.2rem; font-weight: 700; color: var(--po-bleu-fonce); overflow-wrap: anywhere; }
.po-kpi-ok { border-left-color: var(--po-ok); background: var(--po-ok-fond); }
.po-kpi-ok .po-kpi-v { color: var(--po-ok); }
.po-kpi-alerte { border-left-color: var(--po-alerte); background: var(--po-alerte-fond); }
.po-kpi-alerte .po-kpi-v { color: var(--po-alerte); }
.po-kpi-danger { border-left-color: var(--po-danger); background: var(--po-danger-fond); }
.po-kpi-danger .po-kpi-v { color: var(--po-danger); }

.po-verdict {
  margin: 0 0 1rem;
  padding: .7rem .85rem;
  border-left: 4px solid var(--po-bleu);
  border-radius: 0 6px 6px 0;
  background: var(--po-fond);
  font-weight: 600;
}
.po-v-ok { border-left-color: var(--po-ok); background: var(--po-ok-fond); color: var(--po-ok); }
.po-v-alerte { border-left-color: var(--po-alerte); background: var(--po-alerte-fond); color: var(--po-alerte); }
.po-v-danger { border-left-color: var(--po-danger); background: var(--po-danger-fond); color: var(--po-danger); }

.po-barre {
  position: relative;
  height: .7rem;
  margin: 0 0 1rem;
  border-radius: 999px;
  background: #e7edf4;
  overflow: hidden;
}
.po-barre > span { display: block; height: 100%; background: var(--po-bleu-clair); }
.po-barre-ok > span { background: var(--po-ok); }
.po-barre-alerte > span { background: var(--po-alerte); }
.po-barre-danger > span { background: var(--po-danger); }

.po-liste { margin: 0 0 1rem; padding-left: 1.2rem; }
.po-liste li { margin: 0 0 .3rem; }
.po-formule {
  margin: 0 0 1rem;
  padding: .6rem .75rem;
  border: 1px dashed var(--po-trait);
  border-radius: 6px;
  background: #fbfcfe;
  font-size: .9rem;
  color: var(--po-gris);
  overflow-wrap: anywhere;
}
.po-note-ex, .po-ex { font-size: .875rem; color: var(--po-gris); }
.po-fiche {
  margin: 0 0 1rem;
  padding: .75rem .85rem;
  border: 1px solid var(--po-trait);
  border-radius: 8px;
  background: #fff;
}
/* Arborescence de dossiers : c'est un <pre>, et l'alignement porte le sens. On ne coupe donc pas
   les chemins (ce qui casserait l'arbre) : la boîte défile horizontalement toute seule, et l'outil
   ne déborde plus de son cadre à 360 px (constaté le 2026-11-14). */
.po-arbre {
  margin: 0 0 1rem;
  padding: .5rem .6rem .5rem 1.1rem;
  border-left: 2px solid var(--po-trait);
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .85rem;
  line-height: 1.45;
  white-space: pre;
  tab-size: 2;
}
.po-chaine { margin: 0 0 1rem; }
.po-chaine li { margin: 0 0 .4rem; }
.po-pastille {
  display: inline-block;
  min-width: 1.6rem;
  margin-right: .4rem;
  padding: 0 .35rem;
  border-radius: 999px;
  background: var(--po-bleu);
  color: #fff;
  font-size: .8rem;
  font-weight: 700;
  text-align: center;
}
.po-signature { margin: 1rem 0 0; font-size: .85rem; color: var(--po-gris); }
/* Cadre d'un tableau de saisie (champ de type « tableau »). Il DOIT rester un bloc étroitable :
   en display:flex, le tableau interne imposait sa largeur et l'outil débordait de son cadre à
   360 px (constaté sur 5 outils le 2026-11-14). min-width:0 autorise le rétrécissement dans une
   grille, et le défilement se fait dans .po-table-boite, pas sur la page. */
.po-tab {
  display: block;
  min-width: 0;
  max-width: 100%;
  margin: 0 0 1rem;
  padding: 0;
  border: 0;
}
.po-tab > .po-table-boite { max-width: 100%; }

/* ---------------------------------------------------------------- boutons */
.po-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0 0; }
.po-btn {
  min-height: 2.75rem;
  padding: .5rem 1rem;
  border: 1px solid var(--po-bleu);
  border-radius: 6px;
  background: var(--po-bleu);
  color: #fff;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.po-btn:hover { background: var(--po-bleu-fonce); border-color: var(--po-bleu-fonce); }
.po-btn-2 { background: #fff; color: var(--po-bleu-fonce); }
.po-btn-2:hover { background: var(--po-fond); }
.po-btn-3 {
  background: #fff;
  border-style: dashed;
  color: var(--po-bleu-fonce);
  font-weight: 500;
}
.po-btn-stop {
  background: var(--po-danger);
  border-color: var(--po-danger);
  color: #fff;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.po-btn-stop:hover { background: #7d1b1b; border-color: #7d1b1b; }
.po-btn.po-actif { background: var(--po-bleu-fonce); border-color: var(--po-bleu-fonce); color: #fff; }
.po-lien { color: var(--po-bleu-fonce); text-decoration: underline; }

/* ---------------------------------------------------------------- passerelle payante */
.po-passerelle {
  margin: 1.25rem 0 0;
  padding: .85rem 1rem;
  border: 1px solid #bcd2e6;
  border-radius: 8px;
  background: linear-gradient(180deg, #f2f7fc 0%, #e9f1f9 100%);
}
.po-passerelle-t {
  display: block;
  margin: 0 0 .3rem;
  color: var(--po-bleu-fonce);
  font-weight: 700;
}
.po-passerelle p { margin: 0 0 .5rem; font-size: .92rem; }
.po-passerelle a { color: var(--po-bleu-fonce); font-weight: 600; }

.po-mention {
  margin: 1rem 0 0;
  padding-top: .75rem;
  border-top: 1px solid var(--po-trait);
  font-size: .8rem;
  line-height: 1.45;
  color: var(--po-gris);
}

/* ---------------------------------------------------------------- impression A4 */
@media print {
  .po-outil {
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    font-size: 10.5pt;
    color: #000;
    background: #fff;
  }
  .po-form, .po-actions, .po-passerelle, .po-btn, .po-suppr, .po-btn-3, .po-tab { display: none !important; }
  .po-table-boite { overflow: visible; }
  .po-table { font-size: 9.5pt; page-break-inside: auto; }
  .po-table thead { display: table-header-group; }
  .po-table tr, .po-kpi, .po-verdict, .po-fiche { page-break-inside: avoid; }
  .po-kpis { grid-template-columns: repeat(4, 1fr); gap: .3rem; }
  .po-kpi, .po-verdict, .po-ligne-case, .po-formule, .po-passerelle { background: #fff !important; }
  .po-kpi { border-left-width: 2px; }
  .po-mention { font-size: 8.5pt; }
  .po-tete h2, .po-tete h3, .po-tete .po-titre { font-size: 13pt; }
  a[href]::after { content: ""; }      /* pas d'URL imprimée : les liens sont internes */
}

/* ---------------------------------------------------------------- confort */
@media (prefers-reduced-motion: reduce) {
  .po-outil * { transition: none !important; animation: none !important; }
}
@media (prefers-contrast: more) {
  .po-outil { --po-gris: #3b4653; --po-trait: #9aa7b4; }
}