/* SIGFE — soin des formulaires d'opération (operation_form.html)
   Cible les classes op-* déjà présentes. A charger après responsive.css. */

.op-page .op-sec {
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  padding: 1.15rem 1.35rem 1.35rem;
  margin-top: 1rem;
}
.op-page .op-sec:first-of-type { border-top: 1px solid #E2E8F0; padding-top: 1.15rem; margin-top: 0; }
.op-page .op-sec > h2 { font-size: .92rem; letter-spacing: .02em; }
.op-page .op-sec > p  { margin-bottom: .95rem; line-height: 1.45; }

@media (min-width: 1500px) {
  .op-page .op-sec:first-of-type .op-grille { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.op-page .op-grille { gap: .95rem 1.25rem; }

.op-page .op-champ > label { font-weight: 600; font-size: .85rem; margin-bottom: .35rem; }

.op-page form input[type="text"],
.op-page form input[type="number"],
.op-page form input[type="date"],
.op-page form select,
.op-page form textarea {
  width: 100%;
  box-sizing: border-box;
  background: #fff;
  border: 1px solid #CBD5E1;
  border-radius: 8px;
  color: #1B2A36;
  font-size: .92rem;
  padding: .55rem .75rem;
  line-height: 1.35;
  min-height: 2.6rem;
  box-shadow: 0 1px 1px rgba(15, 53, 87, .04);
  transition: border-color .12s, box-shadow .12s;
}
.op-page form textarea { min-height: 5.25rem; resize: vertical; }

.op-page form select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%2364748B'%3E%3Cpath d='M5.5 7.5l4.5 4.5 4.5-4.5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .6rem center;
  background-size: 1.1rem;
  padding-right: 2.1rem;
}

.op-page form input:focus,
.op-page form select:focus,
.op-page form textarea:focus {
  outline: none;
  border-color: #157F6A;
  box-shadow: 0 0 0 3px rgba(21, 127, 106, .16);
}
.op-page form input:disabled,
.op-page form select:disabled { background: #F1F5F9; color: #94A3B8; }

.op-page .op-champ:has(.op-err) input,
.op-page .op-champ:has(.op-err) select,
.op-page .op-champ:has(.op-err) textarea {
  border-color: #B23A3A;
  box-shadow: 0 0 0 3px rgba(178, 58, 58, .12);
}
.op-page .op-err { font-weight: 600; }

.op-page .op-sens button { min-height: 2.6rem; border-radius: 8px; }

.op-page .op-montant input { text-align: right; font-weight: 600; letter-spacing: .01em; }
.op-page .op-montant .u { font-weight: 600; color: #64748B; }

.op-page .op-actions { margin-top: 1.4rem; padding-top: 1.1rem; }

.op-page .op-recap dt { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: #94A3B8; }
.op-page .op-recap dd { font-weight: 600; }
.op-page .op-recap dd.vide { font-weight: 400; font-style: italic; color: #B4BFCC; font-size: 0; }
.op-page .op-recap dd.vide::before { content: "non renseigné"; font-size: .83rem; }
.op-page .op-recap .mnt .vide { font-style: normal; }
.op-page .op-recap .etapes { line-height: 1.6; }

@media (max-width: 640px) {
  .op-page .op-sec { padding: .9rem .85rem 1rem; border-radius: 10px; }
  .op-page form input[type="text"],
  .op-page form input[type="date"],
  .op-page form select { font-size: 1rem; }
}

/* ---- Fil d'etapes du circuit (partial _workflow.html) ------------------ */
.wf h2 { font-size: .78rem; font-weight: 600; letter-spacing: .04em; color: #1D5C86; margin: 1.3rem 0 .85rem; padding-top: 1.1rem; border-top: 1px solid #EEF2F6; }
.wf-liste { list-style: none; margin: 0; padding: 0; }
.wf-liste li { position: relative; padding: 0 0 1rem 1.75rem; font-size: .83rem; }
.wf-liste li::before { content: ""; position: absolute; left: .5rem; top: 1.15rem; bottom: -.05rem; width: 2px; background: #E2E8F0; }
.wf-liste li:last-child::before { display: none; }
.wf-puce { position: absolute; left: 0; top: .1rem; width: 1.05rem; height: 1.05rem; border-radius: 50%; border: 2px solid #CBD5E1; background: #fff; box-sizing: border-box; }
.wf-lib { display: block; font-weight: 600; color: #94A3B8; }
.wf-qui { display: block; font-size: .74rem; color: #94A3B8; margin-top: .1rem; line-height: 1.4; }
.wf-liste li.faite .wf-puce { background: #157F6A; border-color: #157F6A; }
.wf-liste li.faite .wf-puce::after { content: ""; position: absolute; left: .3rem; top: .08rem; width: .26rem; height: .5rem; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.wf-liste li.faite::before { background: #157F6A; }
.wf-liste li.faite .wf-lib { color: #1B2A36; }
.wf-liste li.courante .wf-puce { border-color: #0F3557; box-shadow: 0 0 0 4px rgba(15, 53, 87, .14); }
.wf-liste li.courante .wf-puce::after { content: ""; position: absolute; left: 50%; top: 50%; width: .4rem; height: .4rem; margin: -.2rem 0 0 -.2rem; border-radius: 50%; background: #0F3557; }
.wf-liste li.courante .wf-lib { color: #0F3557; }
.wf-liste li.courante .wf-qui { color: #475569; }
.wf-liste li.sautee { opacity: .45; }
.wf-liste li.sautee .wf-puce { border-style: dashed; }
.wf-liste li.sautee .wf-lib { text-decoration: line-through; }
.wf-note { font-size: .75rem; color: #64748B; margin-top: .15rem; line-height: 1.5; }
.wf-annule { font-size: .83rem; font-weight: 600; color: #B23A3A; background: #FBEDED; border-radius: 8px; padding: .6rem .8rem; }