/* ------------------------------------------------------------------------
   La face interne de Soclyra.

   Elle se pose sur portail.css et n'en change aucun jeton. Ce qui la distingue
   n'est pas la couleur mais la FORME : une barre horizontale sombre au lieu du
   rail latéral clair. Un opérateur qui ouvre deux onglets doit savoir lequel est
   lequel sans lire — la couleur seule ne suffirait pas, elle change d'une agence
   à l'autre.
   ------------------------------------------------------------------------ */

:root{ --soc:#5a45c2; --soc-soft:#f0edfb; --soc-bar:#191d29; }
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){
  --soc:#a394f5; --soc-soft:#20233a; --soc-bar:#0d1017; } }
:root[data-theme="dark"]{ --soc:#a394f5; --soc-soft:#20233a; --soc-bar:#0d1017; }

.top{
  background:var(--soc-bar); color:#e9ebf2; display:flex; align-items:center;
  gap:22px; padding:0 22px; height:50px; position:sticky; top:0; z-index:10;
}
.top .logo{font-weight:600; letter-spacing:-.01em; display:flex; align-items:center; gap:9px}
.top .logo i{width:9px;height:9px;border-radius:2px;background:var(--soc);display:block;font-style:normal}
.top nav{display:flex;gap:3px;margin-left:8px}
.top nav a{
  text-decoration:none; color:#9aa1b5; font-size:13.5px; padding:6px 11px;
  border-radius:var(--r-sm);
}
.top nav a:hover{color:#e9ebf2;background:rgba(255,255,255,.06)}
.top nav a[aria-current="page"]{color:#fff;background:rgba(255,255,255,.12);font-weight:500}
.top .qui{margin-left:auto;font-size:12.5px;color:#9aa1b5;display:flex;align-items:center;gap:12px}
.top .qui form{margin:0}
.top .qui button{
  background:none;border:1px solid rgba(255,255,255,.2);color:#c6cbd9;
  padding:4px 10px;border-radius:var(--r-sm);font-size:12px;cursor:pointer;
}
.top .qui button:hover{border-color:rgba(255,255,255,.45);color:#fff}
@media(max-width:700px){ .top{height:auto;flex-wrap:wrap;padding:10px 14px;gap:10px}
  .top .qui{margin-left:0;width:100%} }

.wrap{max-width:1140px;padding:26px 30px 80px;margin:0 auto}
@media(max-width:700px){.wrap{padding:18px 16px 50px}}

.deux{display:grid;gap:26px;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);align-items:start}
@media(max-width:900px){.deux{grid-template-columns:1fr}}

.panneau{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);overflow:hidden}
.panneau>header{
  padding:11px 15px;border-bottom:1px solid var(--line-soft);font-size:12px;
  letter-spacing:.05em;text-transform:uppercase;color:var(--text-3);font-weight:600;
  display:flex;align-items:baseline;gap:10px;
}
.panneau>header .droite{margin-left:auto;text-transform:none;letter-spacing:0;font-weight:400;font-size:12px}
.panneau .corps{padding:15px}

/* ---------- formulaires ---------- */
.champs{display:grid;gap:13px;grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.champ{display:flex;flex-direction:column;gap:4px;min-width:0}
.champ.large{grid-column:1/-1}
.champ label{font-size:12px;color:var(--text-2)}
.champ .aide{font-size:11.5px;color:var(--text-3)}
.champ input,.champ select,.champ textarea{
  width:100%;padding:8px 10px;border:1px solid var(--line-strong);border-radius:var(--r-sm);
  background:var(--ground);color:var(--text);font:inherit;font-size:13.5px;
}
.champ input[type=color]{padding:3px;height:34px;cursor:pointer}
.champ textarea{min-height:64px;resize:vertical}
.champ .mauvais{border-color:var(--critique)}
.champ .msg-err{font-size:12px;color:var(--critique)}

.actions{display:flex;gap:9px;flex-wrap:wrap;align-items:center;margin-top:15px}
.btn{
  border:1px solid var(--line-strong);background:var(--surface);color:var(--text);
  padding:8px 14px;border-radius:var(--r-sm);font-size:13.5px;cursor:pointer;
  text-decoration:none;display:inline-block;
}
.btn:hover{border-color:var(--text-3)}
.btn.primaire{background:var(--soc);border-color:var(--soc);color:#fff;font-weight:500}
.btn.primaire:hover{filter:brightness(1.08)}
.btn.danger{color:var(--critique);border-color:var(--critique-line)}
.btn.danger:hover{background:var(--critique-bg)}
.btn.petit{padding:4px 9px;font-size:12px}
.btn[disabled]{opacity:.45;cursor:not-allowed}

/* ---------- messages ---------- */
.msg{
  border:1px solid var(--line);border-left:3px solid var(--soc);background:var(--surface);
  border-radius:var(--r);padding:11px 14px;font-size:13.5px;margin-bottom:18px;
}
.msg.err{border-left-color:var(--critique);color:var(--critique);background:var(--critique-bg)}

/* Le mot de passe affiché une seule fois. Encadré large et monospace : il est
   destiné à être recopié, pas lu en diagonale. */
.secret{
  border:1px solid var(--attention-line);background:var(--attention-bg);border-radius:var(--r);
  padding:14px 16px;margin-bottom:18px;
}
.secret .t{font-weight:500;margin-bottom:8px}
.secret code{
  font-family:var(--mono);font-size:15px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-sm);padding:5px 9px;display:inline-block;user-select:all;
}
.secret p{margin:9px 0 0;font-size:12.5px;color:var(--attention)}

/* ---------- listes d'onboarding ---------- */
.etapes{list-style:none;margin:0;padding:0;font-size:13.5px}
.etapes li{display:flex;gap:9px;padding:6px 0;align-items:baseline;color:var(--text-2)}
.etapes li .b{
  width:14px;height:14px;border-radius:3px;border:1.5px solid var(--line-strong);flex:none;
  position:relative;top:2px;
}
.etapes li.ok{color:var(--text)}
.etapes li.ok .b{background:var(--soc);border-color:var(--soc)}
.etapes li.ok .b::after{
  content:"";position:absolute;left:4px;top:1px;width:3px;height:7px;
  border:solid #fff;border-width:0 1.6px 1.6px 0;transform:rotate(42deg);
}

/* ---------- machine à états de la couverture ---------- */
.etat{
  display:inline-flex;align-items:center;gap:6px;font-size:12px;padding:3px 9px;
  border:1px solid var(--line-strong);border-radius:100px;color:var(--text-2);
}
.etat.encours{border-style:dashed}
.etat.couvert{border-color:var(--soc);color:var(--soc);background:var(--soc-soft)}
.etat.refus{border-color:var(--critique-line);color:var(--critique);background:var(--critique-bg)}
.etat.sortie{border-color:var(--attention-line);color:var(--attention);background:var(--attention-bg)}

.transitions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}

.mini{font-size:12.5px;color:var(--text-3)}
.mono{font-family:var(--mono);font-size:12.5px}
.rien{color:var(--text-3);font-size:13.5px;padding:20px 0;text-align:center}
.pile{display:flex;flex-direction:column;gap:18px}