/* Copyright RSSI-Navigator, tous droits réservés */
/* Feuille de style de l'espace client — complète exemple-style.css (variables, nav, boutons)
   avec les composants propres à la zone authentifiée (onglets, cartes, formulaires, badges). */

body.client-area{background:var(--bg2)}
body.client-area .wrap{max-width:900px}

/* .brand réserve 460px dans exemple-style.css (dimensionné pour le logo du
   site vitrine public) — beaucoup trop large pour ce header avec plusieurs
   onglets, qui n'a alors plus assez de place et finit par passer à la
   ligne. Le logo (1536x1024, donc ~285px de large une fois affiché à
   190px de haut) doit rester entièrement contenu dans cette largeur — sinon
   il déborde sur le badge "espace client" juste à côté (position:absolute
   dans exemple-style.css, left:-24px) : 270px laisse une petite marge tout
   en libérant le reste de la place pour les onglets. */
body.client-area .brand{width:270px}

.tag-client{font-family:'Barlow',sans-serif;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--accent);border:1px solid var(--accent-soft);background:var(--accent-soft);border-radius:999px;padding:.2rem .6rem;margin-left:.4rem;white-space:nowrap}

.nav-tabs{display:flex;gap:.3rem;flex:1;flex-wrap:wrap;justify-content:center}
.nav-tabs a{font-family:'Barlow',sans-serif;font-size:.88rem;font-weight:600;text-decoration:none;color:var(--ink2);padding:.55rem 1rem;border-radius:8px;transition:all .15s;white-space:nowrap}
.nav-tabs a:hover{color:var(--accent);background:var(--bg2)}
.nav-tabs a.active{color:#fff;background:var(--accent)}

.nav-user{display:flex;align-items:center;gap:.8rem;font-size:.88rem;color:var(--ink2);white-space:nowrap}
.nav-user a.logout{color:var(--ink3);text-decoration:none;font-size:1.15rem;line-height:1}
.nav-user a.logout:hover{color:#c0392b}

.page-head{margin-bottom:2rem}
.page-head h1{font-size:1.9rem}
.page-head p{color:var(--ink2);font-size:.92rem;margin-top:.3rem}

.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-card);padding:1.6rem;margin-bottom:1.4rem;box-shadow:0 4px 24px rgba(11,95,255,.05)}

.badge{font-family:'Barlow',sans-serif;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.03em;padding:.22rem .6rem;border-radius:999px;display:inline-block;white-space:nowrap}
.badge-active{background:#e5f6ec;color:#1d8a4e}
.badge-revoquee,.badge-expiree{background:#fbe9e9;color:#b93a3a}

.field{margin-bottom:1.2rem}
.field label{display:block;font-family:'Barlow',sans-serif;font-size:.82rem;font-weight:600;color:var(--ink2);margin-bottom:.4rem}
.field input[type=text],.field input[type=email],.field input[type=password],.field textarea,.field select{width:100%;background:#fff;border:1px solid var(--line);border-radius:8px;padding:.65rem .85rem;font-family:'Barlow',sans-serif;font-size:.92rem;color:var(--ink)}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--accent)}

.alert{border-radius:8px;padding:.9rem 1.2rem;margin-bottom:1.4rem;font-size:.88rem}
.alert-error{background:#fbe9e9;border:1px solid #f2c6c6;color:#a43333}
.alert-success{background:#e5f6ec;border:1px solid #bfe6cf;color:#1d7a45}
.alert-info{background:var(--accent-soft);border:1px solid #c3daf3;color:#1f4d80}

.btn-danger{border-color:#f2c6c6;color:#a43333;background:#fff}
.btn-danger:hover{background:#fbe9e9}

@media(max-width:700px){
  .nav-tabs{display:none}
}