/* ═══════════════════════════════════════════════════════════════════════════
   OUVERTURE.CSS — Ouverture de compte client (bloc 1)
   ───────────────────────────────────────────────────────────────────────────
   Réutilise les variables de base.css, les boutons de base.css et les
   .mini-modal de kanban.css. Rien n'est redéfini ici : une seconde définition
   de bouton finirait par dériver de la première.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Filtres ─────────────────────────────────────────────────────────── */
.ouv-filtres { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px; }
.ouv-filtre {
  font:inherit; font-size:13px; font-weight:600; padding:7px 14px; border-radius:20px;
  border:1px solid var(--border); background:var(--white); color:var(--text-muted);
  cursor:pointer; transition:background .12s, color .12s, border-color .12s;
}
.ouv-filtre:hover { background:var(--wood-pale); }
.ouv-filtre.actif { background:var(--accent); border-color:var(--accent); color:var(--white); }

/* ─── Carte d'une demande ─────────────────────────────────────────────── */
.ouv-c {
  background:var(--white); border:1px solid var(--border); border-left:4px solid var(--border);
  border-radius:12px; padding:14px 16px; margin-bottom:10px;
}
/* Une demande reçue attend une action humaine : elle doit se voir d'un coup
   d'œil dans une liste, sans lire les libellés. */
.ouv-c.att  { border-left-color:var(--orange); background:#FFFCF6; }
.ouv-c.mort { opacity:.55; }

.ouv-c-h { display:flex; align-items:flex-start; gap:12px; justify-content:space-between; }
.ouv-c-t { font-size:15px; font-weight:700; color:var(--text); min-width:0; }
.ouv-c-m { font-size:12px; color:var(--text-muted); margin-top:3px; }
.ouv-c-v { font-size:12px; color:var(--text-muted); margin-top:6px; }
.ouv-c-b {
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  margin-top:12px; padding-top:11px; border-top:1px solid var(--border);
}
.ouv-c-par { font-size:12px; color:var(--text-muted); flex:1; min-width:140px; }

/* ─── Pastilles d'état ────────────────────────────────────────────────── */
.ouv-p {
  font-size:11px; font-weight:800; padding:3px 10px; border-radius:20px;
  white-space:nowrap; flex:0 0 auto;
}
.ouv-p-att   { background:var(--orange-soft); color:var(--orange-text); }
.ouv-p-ok    { background:var(--green-soft); color:var(--green); }
.ouv-p-ko    { background:var(--red-soft); color:var(--red); }
.ouv-p-cours { background:var(--accent-soft); color:var(--accent); }
.ouv-p-gris  { background:var(--wood-pale); color:var(--text-muted); }

/* ─── État vide ───────────────────────────────────────────────────────── */
.ouv-vide {
  background:var(--white); border:1px solid var(--border); border-radius:12px;
  padding:26px 28px; max-width:640px;
}
.ouv-vide-t { font-size:15px; font-weight:700; margin-bottom:8px; }
.ouv-vide p { font-size:13.5px; color:var(--text-muted); line-height:1.6; margin-bottom:10px; }
.ouv-vide p:last-child { margin-bottom:0; }
.ouv-vide code {
  background:var(--wood-pale); border:1px solid var(--border); border-radius:6px;
  padding:1px 6px; font:12.5px ui-monospace,Menlo,Consolas,monospace;
}

/* ─── Le lien, dans sa fenêtre ────────────────────────────────────────── */
/* Coupable n'importe où (break-all) : un token de 48 caractères déborderait
   sinon de la fenêtre sur mobile, et deviendrait illisible à recopier. */
.ouv-lien {
  margin-top:12px; padding:12px 14px; background:var(--wood-pale);
  border:1px solid var(--border); border-radius:8px;
  font:12.5px/1.6 ui-monospace,Menlo,Consolas,monospace; color:var(--text);
  word-break:break-all; cursor:text; user-select:all;
}

/* ─── Ligne d'alerte dans une carte ───────────────────────────────────── */
/* « Jamais envoyé » et « envoi en échec » doivent se distinguer d'un simple
   état au premier coup d'œil : ce sont les deux cas où quelqu'un attend une
   réponse à un e-mail qui n'est jamais parti. */
.ouv-c-v.ouv-ko { color:var(--orange-text); font-weight:600; }

/* ═══════════════════════════════════════════════════════════════════════════
   BLOC 3 — écran de relecture
   ═══════════════════════════════════════════════════════════════════════════ */
.ouv-c.clic { cursor:pointer; transition:box-shadow .12s, transform .12s; }
.ouv-c.clic:hover { box-shadow:0 4px 16px rgba(23,62,84,.10); transform:translateY(-1px); }

/* Deux colonnes de largeur ÉGALE : la déclaration du client n'est pas un
   brouillon qu'on relègue, elle a le même poids visuel que la fiche. */
.ouv-2col { display:grid; grid-template-columns:1fr 1fr; gap:20px; align-items:start; }
.ouv-col {
  background:var(--white); border:1px solid var(--border); border-radius:12px; padding:18px 20px;
}
.ouv-col-t {
  font-size:12px; text-transform:uppercase; letter-spacing:.8px; color:var(--text-muted);
  font-weight:700; margin-bottom:6px;
}
.ouv-note { font-size:12px; color:var(--text-muted); line-height:1.55; margin-bottom:14px; }
.ouv-sub  { font-size:12px; color:var(--text-muted); line-height:1.5; }

.ouv-bloc { border-top:1px solid var(--border); padding-top:12px; margin-top:12px; }
.ouv-bloc:first-of-type { border-top:none; padding-top:0; margin-top:0; }

.ouv-l { display:flex; gap:12px; align-items:baseline; padding:3px 0; }
.ouv-l-k { font-size:12px; color:var(--text-muted); flex:0 0 132px; }
.ouv-l-v { font-size:13.5px; color:var(--text); word-break:break-word; min-width:0; }
.ouv-l.fort .ouv-l-v { font-weight:700; }

.ouv-f { display:flex; flex-direction:column; gap:5px; margin-bottom:11px; }
.ouv-f label { font-size:12px; font-weight:600; }
.ouv-f input, .ouv-f select, .ouv-f textarea {
  font:inherit; font-size:13.5px; padding:9px 11px; border:1px solid var(--accent-line);
  border-radius:8px; background:var(--white); color:var(--text); width:100%;
}
.ouv-f input:focus, .ouv-f select:focus, .ouv-f textarea:focus {
  outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(35,88,115,.12);
}

/* Le bloc de décision se détache : ce n'est pas de la saisie, c'est un
   engagement de l'entreprise. */
.ouv-decision { background:#FBFAF8; border:1px solid var(--border); border-radius:12px; padding:15px 16px; }

.ouv-actions { display:flex; align-items:center; gap:10px; margin-top:16px; }

/* Les écarts avec la fiche existante : on ne montre QUE ce qui change. */
.ouv-diff { background:#FFFCF6; border:1px solid var(--orange-line); border-radius:12px; padding:12px 14px; margin-bottom:14px; }
.ouv-diff-t { font-size:12px; font-weight:700; color:var(--orange-text); margin-bottom:8px; }
.ouv-diff-l { display:flex; gap:8px; align-items:baseline; font-size:12px; padding:2px 0; flex-wrap:wrap; }
.ouv-diff-k { flex:0 0 92px; color:var(--text-muted); font-size:12px; }
.ouv-diff-a { color:var(--text-muted); text-decoration:line-through; }
.ouv-diff-f { color:var(--orange-text); font-weight:700; }
.ouv-diff-b { font-weight:600; color:var(--text); }

/* Pièces jointes : servies par l'action gardée, jamais par un lien de dossier. */
.ouv-pj {
  display:flex; justify-content:space-between; align-items:center; gap:12px;
  padding:11px 13px; border:1px solid var(--border); border-radius:8px;
  margin-bottom:8px; text-decoration:none; color:inherit; background:#FCFBFA;
}
.ouv-pj:hover { background:var(--accent-soft); border-color:var(--accent); }
.ouv-pj-n { font-size:13.5px; font-weight:600; }
.ouv-pj-d { font-size:12px; color:var(--text-muted); text-align:right; }

@media (max-width: 1000px) { .ouv-2col { grid-template-columns:1fr; } }

/* ─── Champ obligatoire et action destructrice ────────────────────────── */
.ouv-req { color:var(--red); }
/* Le champ signalé APRÈS un refus de validation : on le montre, on ne se
   contente pas d'un message en haut d'un écran long. */
.ouv-f input.ouv-ko-f, .ouv-f select.ouv-ko-f { border-color:var(--red); background:#FEF7F6; }   /* 05/10/2026 : + select (référent) */

/* Supprimer est irréversible : le bouton ne doit pas ressembler aux autres,
   sans pour autant crier — il reste discret jusqu'au survol. */
.ouv-btn-sup { color:var(--red); border-color:var(--red-line); }
.ouv-btn-sup:hover { background:var(--red-soft); border-color:var(--red); }


/* ═══════════════════════════════════════════════════════════════════════
   SAISIE INTERNE (07/09/2026)
   Un dossier saisi par nous n'est pas un dossier reçu du client. Il ne doit
   donc pas lui ressembler : l'ambre le distingue du vert des demandes
   traitées et du bleu des liens en attente, partout où il apparaît.
   ═══════════════════════════════════════════════════════════════════════ */

/* Ligne de la carte, dans la liste */
.ouv-c-v.ouv-interne {
  color:var(--orange-text); font-weight:600;
  background:#FDF6EA; border:1px solid var(--orange-line); border-radius:8px;
  padding:7px 10px; margin-top:8px;
}

/* Bandeau de l'écran de validation — celui-ci a une portée juridique :
   il dit que rien n'a été signé. Il ne doit jamais passer inaperçu. */
.ouv-note.ouv-note-interne {
  color:var(--orange-text); background:#FDF6EA; border:1px solid var(--orange-line);
  border-left:3px solid var(--orange); border-radius:8px;
  padding:11px 13px; font-size:12px; line-height:1.6;
}
.ouv-note.ouv-note-interne b { color:#5E4517; }