/* ═══════════════════════════════════════════════════════════════════════════
   admin.avyqa.fr — charte AVYQA
   Encre #0B0F14 · vermillon #F94027 · le vermillon ne porte jamais de texte.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --encre:#0B0F14; --vermillon:#F94027; --texte:#333941; --discret:#6B7280;
  --filet:#E3E6EA; --fond:#F7F8FA; --blanc:#fff;
  --vert:#0F7B4F; --ambre:#B45309;
}
* { margin:0; padding:0; box-sizing:border-box; }
body {
  font-family:"Poppins","Avenir Next",-apple-system,BlinkMacSystemFont,sans-serif;
  font-size:15px; line-height:1.55; color:var(--texte); background:var(--fond);
}
a { color:var(--encre); }

/* ── barre supérieure ───────────────────────────────────────────────────── */
.barre {
  background:var(--encre); color:#fff; padding:14px 26px;
  display:flex; align-items:center; gap:26px;
  border-bottom:3px solid var(--vermillon);
}
.barre .marque { font-weight:700; letter-spacing:.22em; font-size:17px; }
.barre nav { display:flex; gap:20px; margin-left:auto; align-items:center; }
.barre nav a { color:rgba(255,255,255,.82); text-decoration:none; font-size:14px; }
.barre nav a:hover, .barre nav a.actif { color:#fff; }
.barre .qui { font-size:12.5px; color:rgba(255,255,255,.5); }

.page { max-width:1080px; margin:0 auto; padding:28px 26px 60px; }
.etroit { max-width:760px; }

h1 { font-size:25px; color:var(--encre); margin-bottom:4px; line-height:1.2; }
h2 { font-size:16px; color:var(--encre); margin:26px 0 12px;
     padding-top:10px; border-top:2px solid var(--vermillon); display:inline-block; }
.sous { color:var(--discret); font-size:14px; margin-bottom:20px; }

/* ── cartes et tableaux ─────────────────────────────────────────────────── */
.carte { background:var(--blanc); border:1px solid var(--filet); border-radius:6px;
         padding:22px; margin-bottom:18px; }
table { width:100%; border-collapse:collapse; background:var(--blanc);
        border:1px solid var(--filet); border-radius:6px; overflow:hidden; }
th,td { text-align:left; padding:11px 14px; border-bottom:1px solid var(--filet);
        font-size:14px; vertical-align:top; }
thead th { background:#F1F3F5; color:var(--encre); font-weight:600; font-size:13px;
           text-transform:uppercase; letter-spacing:.05em; }
tbody tr:last-child td { border-bottom:0; }
tbody tr:hover { background:#FAFBFC; }

/* ── formulaires ────────────────────────────────────────────────────────── */
.grille { display:grid; grid-template-columns:repeat(2,1fr); gap:14px 18px; }
.grille .large { grid-column:1 / -1; }
label { display:block; font-size:12.5px; font-weight:600; color:var(--encre);
        margin-bottom:4px; }
input[type=text],input[type=email],input[type=password],input[type=date],
input[type=number],select,textarea {
  width:100%; padding:9px 11px; border:1px solid #CBD2D9; border-radius:5px;
  font:inherit; font-size:14px; background:var(--blanc); color:var(--texte);
}
input:focus,select:focus,textarea:focus {
  outline:none; border-color:var(--encre); box-shadow:0 0 0 3px rgba(11,15,20,.07);
}
textarea { min-height:82px; resize:vertical; }
.aide { font-size:12px; color:var(--discret); margin-top:3px; }

.bouton {
  display:inline-block; background:var(--encre); color:#fff; border:1px solid var(--encre);
  padding:10px 20px; border-radius:5px; font:inherit; font-size:14px; font-weight:600;
  cursor:pointer; text-decoration:none;
}
.bouton:hover { background:#1B2430; }
.bouton--ligne { background:transparent; color:var(--encre); }
.bouton--ligne:hover { background:#EDEFF2; }
.bouton--danger { background:#B42318; border-color:#B42318; }
.actions { display:flex; gap:10px; align-items:center; margin-top:22px; flex-wrap:wrap; }

/* ── messages ───────────────────────────────────────────────────────────── */
.msg { padding:12px 16px; border-radius:5px; margin-bottom:18px; font-size:14px;
       border-left:4px solid; }
.msg--ok    { background:#ECFDF3; border-color:var(--vert);      color:#05603A; }
.msg--err   { background:#FEF3F2; border-color:#B42318;          color:#912018; }
.msg--avert { background:#FFFAEB; border-color:var(--ambre);     color:#93370D; }

/* ── étiquettes de statut ───────────────────────────────────────────────── */
.et { display:inline-block; padding:2px 9px; border-radius:11px; font-size:12px;
      font-weight:600; white-space:nowrap; }
.et--prospect      { background:#EEF2F6; color:#42526E; }
.et--en_discussion { background:#EFF4FF; color:#1E40AF; }
.et--devis_envoye  { background:#FFFAEB; color:#93370D; }
.et--client        { background:#ECFDF3; color:#05603A; }
.et--archive       { background:#F4F4F5; color:#71717A; }
.et--brouillon     { background:#F4F4F5; color:#52525B; }
.et--envoye        { background:#FFFAEB; color:#93370D; }
.et--signe         { background:#ECFDF3; color:#05603A; }
.et--refuse,.et--annule { background:#FEF3F2; color:#912018; }

/* ── page de connexion ──────────────────────────────────────────────────── */
.connexion { max-width:390px; margin:9vh auto; }
.connexion .marque { text-align:center; font-size:30px; font-weight:700;
                     letter-spacing:.26em; color:var(--encre); margin-bottom:6px; }
.connexion .filet { width:56px; height:5px; background:var(--vermillon);
                    margin:0 auto 26px; }

/* ── journal de preuve ──────────────────────────────────────────────────── */
.journal { font-size:13px; }
.journal td { padding:7px 12px; }
.journal .quand { color:var(--discret); white-space:nowrap; font-variant-numeric:tabular-nums; }
.journal .quoi { font-weight:600; color:var(--encre); }
code { background:#F1F3F5; padding:1px 6px; border-radius:3px; font-size:12.5px;
       font-family:ui-monospace,SFMono-Regular,Menlo,monospace; }

.vide-liste { text-align:center; padding:46px 20px; color:var(--discret); }

/* ── blocs de code : commande à recopier, aperçu du brief ───────────────── */
.bloc-code {
  background:var(--encre); color:#E8EAED; padding:12px 16px; border-radius:5px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12.5px;
  line-height:1.6; overflow-x:auto; white-space:pre;
}
/* L'aperçu du brief est long : il défile dans son cadre plutôt que de
   repousser les boutons hors de l'écran. */
.bloc-code--long {
  max-height:60vh; overflow-y:auto; white-space:pre-wrap; word-break:break-word;
  background:#F7F8FA; color:var(--texte); border:1px solid var(--filet);
}

@media (max-width:720px) {
  .grille { grid-template-columns:1fr; }
  .barre { flex-wrap:wrap; gap:12px; padding:12px 16px; }
  .barre nav { margin-left:0; gap:14px; flex-wrap:wrap; }
  .page { padding:20px 16px 50px; }
  table { display:block; overflow-x:auto; }
}