/* =====================================================================
   StreetHome Prospection
   Tokens repris a l'identique de streethome.fr/assets/style.css
   (navy / gold, Playfair Display + Inter, theme sombre data-theme="sombre")
   ===================================================================== */

:root {
    --navy: #1A2B3C;
    --navy-deep: #041627;
    --navy-soft: #38485a;
    --gold: #C5A059;
    --gold-dark: #a9863f;
    --gold-pale: #fed488;
    --bg: #f9f9ff;
    --surface: #ffffff;
    --surface-low: #f0f3ff;
    --surface-mid: #e7eeff;
    --text: #111c2c;
    --muted: #44474c;
    --outline: #c4c6cd;
    --error: #ba1a1a;
    --ok: #1a7a3c;
    --warn: #8a6100;
    --radius: 8px;
    --radius-lg: 16px;
    --shadow: 0 4px 12px rgba(4, 22, 39, 0.04);
    --shadow-hover: 0 6px 18px rgba(4, 22, 39, 0.08);
    --ink: var(--navy);
    --ink-soft: var(--navy-soft);
}

html[data-theme="sombre"] {
    --bg: #0f1620;
    --surface: #1a2432;
    --surface-low: #212c3c;
    --surface-mid: #2a3646;
    --text: #e7ecf3;
    --muted: #9aa7ba;
    --outline: #3a4a5c;
    --ink: #f2f5f9;
    --ink-soft: #c3ccd9;
    --shadow: 0 4px 12px rgba(0, 0, 0, 0.24);
    --shadow-hover: 0 6px 18px rgba(0, 0, 0, 0.32);
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 15px;
    line-height: 1.55;
    color: var(--text);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
    font-family: 'Playfair Display', Georgia, serif;
    color: var(--ink);
    font-weight: 700;
    margin: 0;
}
h1 { font-size: 1.55rem; letter-spacing: -.01em; }
h2 { font-size: 1.15rem; margin-bottom: 1rem; }
h3 { font-size: .95rem; font-family: 'Inter', sans-serif; font-weight: 600; }

a { color: var(--gold-dark); }

/* ---------- Structure ---------- */
.app { display: flex; min-height: 100vh; }

.barre {
    width: 234px;
    flex-shrink: 0;
    background: var(--navy-deep);
    padding: 1.5rem 0;
    display: flex;
    flex-direction: column;
}

.contenu { flex: 1; padding: 1.75rem 2rem 3rem; min-width: 0; }

.entete {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}

/* ---------- Marque ---------- */
.marque { padding: 0 1.4rem 1.6rem; display: flex; flex-direction: column; }
.marque-centree { align-items: center; padding: 0 0 1.75rem; }
.marque-nom {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1.2rem; font-weight: 700; color: #fff; letter-spacing: -.01em;
}
.marque-sous {
    font-size: .68rem; text-transform: uppercase; letter-spacing: .16em;
    color: var(--gold); font-weight: 600;
}
.page-connexion .marque-nom { color: var(--ink); }
.page-connexion .marque-sous { color: var(--gold-dark); }

/* ---------- Navigation ---------- */
.nav { display: flex; flex-direction: column; gap: 1px; }

.nav-lien {
    display: flex; align-items: center; gap: .7rem;
    padding: .58rem 1.4rem;
    color: #a8b5c6; text-decoration: none; font-size: .89rem;
    border-left: 3px solid transparent;
}
.nav-lien:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.nav-lien.est-actif {
    background: rgba(197, 160, 89, .12); color: #fff; border-left-color: var(--gold);
}
.nav-lien.est-inactif { opacity: .38; cursor: default; }
.nav-lien.est-inactif:hover { background: transparent; color: #a8b5c6; }
.nav-icone { width: 1.1rem; text-align: center; font-size: .82rem; }

.badge-bientot {
    margin-left: auto; font-size: .6rem; text-transform: uppercase;
    letter-spacing: .06em; background: rgba(255, 255, 255, .08);
    color: #8194ab; padding: .1rem .38rem; border-radius: 4px;
}

/* ---------- Utilisateur ---------- */
.utilisateur { display: flex; align-items: center; gap: .85rem; }
.utilisateur-infos { display: flex; flex-direction: column; line-height: 1.25; text-align: right; }
.utilisateur-nom { font-weight: 600; font-size: .87rem; }
.utilisateur-role { font-size: .72rem; color: var(--muted); }

/* ---------- Cartes ---------- */
.bloc, .data-card {
    background: var(--surface);
    border: 1px solid var(--outline);
    border-radius: var(--radius-lg);
    padding: 1.35rem 1.5rem;
    box-shadow: var(--shadow);
    margin-bottom: 1.25rem;
}

.grille-indicateurs {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(178px, 1fr));
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.stat-card {
    background: var(--surface);
    border: 1px solid var(--outline);
    border-radius: var(--radius-lg);
    padding: 1rem 1.15rem;
    box-shadow: var(--shadow);
    display: flex; flex-direction: column; gap: .1rem;
}
.stat-card:hover { box-shadow: var(--shadow-hover); }
.indicateur-libelle {
    font-size: .74rem; color: var(--muted); text-transform: uppercase; letter-spacing: .06em;
}
.indicateur-valeur {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1.95rem; font-weight: 700; line-height: 1.15; color: var(--ink);
}
.indicateur-phase { font-size: .71rem; color: var(--muted); font-style: italic; }
.stat-card.accent .indicateur-valeur { color: var(--gold-dark); }

/* ---------- Tableaux ---------- */
.table-enveloppe { overflow-x: auto; border-radius: var(--radius); }
.tableau { width: 100%; border-collapse: collapse; font-size: .88rem; }
.tableau th, .tableau td {
    text-align: left; padding: .62rem .6rem;
    border-bottom: 1px solid var(--outline); vertical-align: top;
}
.tableau thead th {
    color: var(--muted); font-weight: 600; font-size: .74rem;
    text-transform: uppercase; letter-spacing: .05em;
    background: var(--surface-low); white-space: nowrap;
}
.tableau tbody tr:hover { background: var(--surface-low); }
.tableau tr:last-child td { border-bottom: 0; }
.tableau-fiche th { color: var(--muted); font-weight: 500; width: 220px; }

/* ---------- Puces ---------- */
.puce {
    display: inline-block; font-size: .7rem; font-weight: 600;
    padding: .14rem .55rem; border-radius: 20px; white-space: nowrap;
}
.puce-ok { background: rgba(26, 122, 60, .12); color: var(--ok); }
.puce-stop { background: rgba(186, 26, 26, .1); color: var(--error); }
.puce-neutre { background: var(--surface-mid); color: var(--muted); }
.puce-attente { background: rgba(197, 160, 89, .16); color: var(--gold-dark); }
.puce-or { background: var(--navy); color: var(--gold-pale); }

/* ---------- Score ---------- */
.score { display: flex; align-items: center; gap: .5rem; }
.score-valeur { font-weight: 700; font-size: .9rem; min-width: 1.7rem; }
.score-barre { flex: 1; height: 5px; background: var(--surface-mid); border-radius: 3px; min-width: 46px; }
.score-jauge { height: 100%; border-radius: 3px; background: var(--gold); }

/* ---------- Alertes ---------- */
.alerte {
    padding: .8rem 1rem; border-radius: var(--radius);
    margin: 0 0 1.25rem; font-size: .88rem; border: 1px solid transparent;
}
.alerte-info { background: var(--surface-mid); border-color: var(--outline); color: var(--text); }
.alerte-erreur { background: rgba(186, 26, 26, .08); border-color: rgba(186, 26, 26, .25); color: var(--error); }

/* ---------- Formulaires ---------- */
.formulaire { display: flex; flex-direction: column; gap: 1rem; }
.champ { display: flex; flex-direction: column; gap: .32rem; }
.champ-label { font-size: .78rem; font-weight: 600; color: var(--muted); }

.champ input, .champ select, .filtres input, .filtres select {
    padding: .55rem .7rem; border: 1px solid var(--outline); border-radius: var(--radius);
    font-size: .9rem; font-family: inherit; background: var(--surface); color: var(--text);
}
.champ input:focus, .champ select:focus, .filtres input:focus, .filtres select:focus {
    outline: 2px solid var(--gold); outline-offset: -1px; border-color: var(--gold);
}

.filtres { display: flex; flex-wrap: wrap; gap: .65rem; align-items: flex-end; margin-bottom: 1.1rem; }
.filtres .champ { gap: .25rem; }

/* ---------- Boutons ---------- */
.bouton {
    display: inline-block; padding: .52rem 1rem; border-radius: var(--radius);
    border: 1px solid transparent; font-size: .86rem; font-family: inherit;
    font-weight: 600; cursor: pointer; text-decoration: none; text-align: center;
}
.bouton-principal { background: var(--navy); color: #fff; }
.bouton-principal:hover { background: var(--navy-deep); }
.bouton-or { background: var(--gold); color: var(--navy-deep); }
.bouton-or:hover { background: var(--gold-dark); color: #fff; }
.bouton-discret, .btn-secondary {
    background: var(--surface); border-color: var(--outline); color: var(--muted);
}
.bouton-discret:hover { background: var(--surface-low); color: var(--text); }
.bouton-large { width: 100%; padding: .68rem 1rem; }
.bouton-petit { padding: .3rem .6rem; font-size: .78rem; }

.barre-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.1rem; }

/* ---------- Pagination ---------- */
.pagination { display: flex; gap: .3rem; align-items: center; margin-top: 1.1rem; flex-wrap: wrap; }
.pagination a, .pagination span {
    padding: .34rem .62rem; border-radius: var(--radius); font-size: .84rem;
    text-decoration: none; border: 1px solid var(--outline); color: var(--muted);
}
.pagination .est-actif { background: var(--navy); color: #fff; border-color: var(--navy); }
.pagination .compteur { border: 0; margin-left: auto; color: var(--muted); }

/* ---------- Page de connexion ---------- */
.page-connexion {
    display: flex; align-items: center; justify-content: center;
    min-height: 100vh; padding: 1.5rem; background: var(--bg);
}
.carte-connexion {
    width: 100%; max-width: 384px; background: var(--surface);
    border: 1px solid var(--outline); border-radius: var(--radius-lg);
    padding: 2rem 1.85rem; box-shadow: var(--shadow-hover);
}
.note-securite {
    margin: 1.5rem 0 0; font-size: .74rem; color: var(--muted);
    text-align: center; line-height: 1.45;
}

/* ---------- Divers ---------- */
.vide { text-align: center; padding: 2.5rem 1rem; color: var(--muted); }
.sous-titre { color: var(--muted); font-size: .84rem; margin: .2rem 0 0; }
.grille-deux { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .82rem; }
.rien { color: var(--muted); font-style: italic; }

/* ---------- Responsive ---------- */
@media (max-width: 980px) { .grille-deux { grid-template-columns: 1fr; } }

@media (max-width: 860px) {
    .app { flex-direction: column; }
    .barre { width: 100%; padding: 1rem 0; }
    .marque { padding: 0 1.1rem 1rem; }
    .nav { flex-direction: row; overflow-x: auto; gap: 0; }
    .nav-lien {
        white-space: nowrap; border-left: 0;
        border-bottom: 3px solid transparent; padding: .55rem 1rem;
    }
    .nav-lien.est-actif { border-left: 0; border-bottom-color: var(--gold); }
    .nav-lien.est-inactif, .badge-bientot { display: none; }
    .contenu { padding: 1.25rem 1.1rem 2.5rem; }
    .tableau-fiche th { width: auto; }
}