/* Feuille de style du portail partenaire.
   VOLONTAIREMENT SEPAREE de `style.css` : le portail ne doit rien devoir au CRM, ni sa
   logique ni son apparence. Les couleurs sont celles de la maison, recopiees ici plutot
   qu'importees, pour qu'une retouche du CRM ne deplace jamais un pixel chez un tiers. */
:root{
  --navy:#232048; --cyan:#27BBE4; --teal:#00bfb3; --vert:#00705a; --rouge:#b03a32;
  --ambre:#8a5a00; --bg:#eef1f7; --surface:#fff; --surface-2:#f7f9fc; --ligne:#dce2ec;
  --encre:#232048; --encre-douce:#5b6480; --neutre:#E6EBF2;
}
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none !important}
body{font-family:'Roboto',system-ui,Arial,sans-serif;background:var(--bg);color:var(--encre);min-height:100vh}

/* ---------- Connexion ---------- */
.connexion{min-height:100vh;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#232048 0%,#394170 100%);padding:20px}
.carte-connexion{background:var(--surface);border-radius:14px;padding:32px 30px;width:100%;
  max-width:360px;display:flex;flex-direction:column;gap:12px;box-shadow:0 20px 50px rgba(0,0,0,.3)}
.logo-connexion{width:160px;height:auto;align-self:center}
.sous-titre{text-align:center;color:var(--encre-douce);font-size:13px;margin-bottom:6px}
.carte-connexion label{font-size:13px;font-weight:500;color:var(--encre-douce)}
.carte-connexion input{font-family:inherit;font-size:15px;padding:11px 12px;border:1px solid var(--ligne);
  border-radius:8px;color:var(--navy);width:100%}
.carte-connexion input:focus{outline:2px solid var(--cyan);outline-offset:1px;border-color:var(--cyan)}
.erreur{background:rgba(214,84,76,.12);color:var(--rouge);border:1px solid rgba(214,84,76,.3);
  border-radius:8px;padding:9px 12px;font-size:13px}

/* ---------- Ossature ---------- */
#vue-portail{display:flex;min-height:100vh}
.colonne{width:238px;flex:0 0 238px;background:var(--surface);border-right:1px solid var(--ligne);
  display:flex;flex-direction:column;padding:18px 14px}
.marque{display:flex;flex-direction:column;gap:6px;padding:4px 6px 18px}
.marque img{width:140px;height:auto;display:block}
.eyebrow{font-size:11px;color:var(--encre-douce);letter-spacing:.3px;text-transform:uppercase}
.menu{display:flex;flex-direction:column;gap:2px}
.onglet{font-family:inherit;font-size:14px;font-weight:500;text-align:left;padding:12px;
  border:none;background:none;border-radius:8px;color:var(--encre-douce);cursor:pointer;min-height:44px}
.onglet:hover{background:var(--surface-2);color:var(--navy)}
.onglet.actif{background:#eaf7fc;color:var(--navy)}
.onglet:focus-visible,.btn:focus-visible,.lien:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.pied{margin-top:auto;border-top:1px solid var(--ligne);padding:14px 6px 4px;
  display:flex;flex-direction:column;gap:3px;font-size:13px}
.lien{background:none;border:none;font-family:inherit;font-size:12px;color:var(--encre-douce);
  cursor:pointer;text-align:left;padding:6px 0 0}
.lien:hover{color:var(--navy);text-decoration:underline}
.contenu{flex-grow:1;padding:26px 30px;display:flex;flex-direction:column;gap:18px;min-width:0}
.entete{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap}
h1{font-size:24px;font-weight:600}
.discret{color:var(--encre-douce);font-size:13px}

/* ---------- Boutons ---------- */
.btn{font-family:inherit;font-weight:600;font-size:14px;border-radius:6px;padding:13px 18px;
  border:none;cursor:pointer;min-height:44px;transition:.15s}
.btn-primaire{background:linear-gradient(135deg,var(--cyan) 0%,var(--teal) 100%);color:#fff}
.btn-primaire:hover{filter:brightness(1.05)}
.btn-neutre{background:var(--neutre);border:1px solid var(--ligne);color:var(--encre-douce)}
.btn-neutre:hover{color:var(--navy);border-color:var(--cyan)}
.btn-danger{background:var(--surface);border:1px solid rgba(214,84,76,.4);color:var(--rouge)}
.btn-petit{padding:10px 14px;font-size:13px}
.btn:disabled{opacity:.55;cursor:not-allowed}

/* ---------- Blocs ---------- */
.carte{background:var(--surface);border:1px solid var(--ligne);border-radius:12px;overflow:hidden}
.compteurs{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px}
.compteur{background:var(--surface);border:1px solid var(--ligne);border-radius:12px;padding:16px 18px;
  display:flex;flex-direction:column;gap:4px}
.compteur .etiquette{font-size:11.5px;text-transform:uppercase;letter-spacing:.4px;
  color:var(--encre-douce);font-weight:500}
.compteur b{font-size:28px;font-weight:600;font-variant-numeric:tabular-nums}
.compteur.attention{border-color:#f0c98a}
.compteur.attention .etiquette,.compteur.attention b{color:var(--ambre)}

table{width:100%;border-collapse:collapse;font-size:14px}
th{text-align:left;font-size:11.5px;text-transform:uppercase;letter-spacing:.4px;
  color:var(--encre-douce);font-weight:500;padding:12px 14px;background:var(--surface-2);
  border-bottom:1px solid var(--ligne);white-space:nowrap}
td{padding:12px 14px;border-bottom:1px solid var(--ligne);vertical-align:top}
tr:last-child td{border-bottom:none}
.nombre{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.vide{padding:28px 14px;text-align:center;color:var(--encre-douce);font-size:14px}

.etat{display:inline-block;font-size:11px;font-weight:600;padding:3px 9px;border-radius:11px;white-space:nowrap}
.etat-declaree{background:rgba(214,150,0,.14);color:var(--ambre);border:1px solid rgba(214,150,0,.4)}
.etat-acceptee{background:rgba(0,168,130,.12);color:var(--vert);border:1px solid rgba(0,168,130,.35)}
.etat-refusee{background:rgba(214,84,76,.12);color:var(--rouge);border:1px solid rgba(214,84,76,.35)}
.etat-expiree{background:var(--neutre);color:var(--encre-douce);border:1px solid var(--ligne)}

/* ---------- Formulaire ---------- */
.formulaire{padding:22px 24px;display:flex;flex-direction:column;gap:14px}
.formulaire label{font-size:13px;font-weight:500;color:var(--encre-douce);display:block;margin-bottom:6px}
.formulaire input,.formulaire select,.formulaire textarea{font-family:inherit;font-size:15px;padding:12px;
  border:1px solid var(--ligne);border-radius:8px;color:var(--encre);width:100%;background:var(--surface);
  min-height:44px}
.formulaire textarea{resize:vertical;line-height:1.5}
.formulaire input:focus,.formulaire select:focus,.formulaire textarea:focus{
  outline:2px solid var(--cyan);outline-offset:1px;border-color:var(--cyan)}
.duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.pied-formulaire{display:flex;align-items:center;justify-content:space-between;gap:16px;
  border-top:1px solid var(--ligne);padding-top:16px;flex-wrap:wrap}
.actions{display:flex;gap:10px}

/* ---------- Documents ---------- */
.document{background:var(--surface);border:1px solid var(--ligne);border-radius:12px;padding:18px 22px;
  display:flex;flex-direction:column;gap:12px;margin-bottom:14px}
.document-tete{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.type{flex:0 0 auto;width:38px;height:38px;border-radius:8px;background:#fdecea;color:var(--rouge);
  display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600}
.document-nom{flex-grow:1;min-width:0}
.document-nom b{font-size:16px;font-weight:600;display:block}
.lien-suivi{background:var(--surface-2);border:1px solid var(--ligne);border-radius:10px;padding:12px 16px;
  display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.lien-suivi .cible{flex-grow:1;min-width:180px;display:flex;flex-direction:column;gap:4px}
.lien-suivi code{font-size:13px;font-family:ui-monospace,Menlo,Consolas,monospace;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chiffre{display:flex;flex-direction:column;gap:4px;align-items:flex-end}
.chiffre b{font-size:15px;font-weight:600;font-variant-numeric:tabular-nums}

.message{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);background:var(--navy);
  color:#fff;padding:12px 20px;border-radius:8px;font-size:14px;box-shadow:0 8px 24px rgba(35,32,72,.25);z-index:10}

@media (max-width:820px){
  #vue-portail{flex-direction:column}
  .colonne{width:auto;flex:none;border-right:none;border-bottom:1px solid var(--ligne)}
  .menu{flex-direction:row;flex-wrap:wrap}
  .pied{margin-top:12px}
  .contenu{padding:20px 16px}
  .duo,.trio{grid-template-columns:1fr}
}