/* =====================================================================
   AutoCrypto — feuille de style unique
   Back-office sobre : barre laterale sombre, contenu clair, densite elevee.
   ===================================================================== */

:root {
    /* Surfaces */
    --fond:           #f4f6f9;
    --surface:        #ffffff;
    --surface-douce:  #fafbfc;
    --bordure:        #e4e8ee;
    --bordure-forte:  #d3d9e2;

    /* Texte */
    --texte:          #16202e;
    --texte-doux:     #66748a;
    --texte-tres-doux:#93a0b3;

    /* Barre laterale */
    --nav-fond:       #131a26;
    --nav-fond-actif: #1e2a3d;
    --nav-texte:      #98a5b8;
    --nav-texte-actif:#ffffff;

    /* Couleurs fonctionnelles */
    --primaire:       #2563eb;
    --primaire-fonce: #1d4ed8;
    --primaire-douce: #eaf1fe;
    --succes:         #0f9d58;
    --succes-douce:   #e7f6ed;
    --danger:         #d92d20;
    --danger-douce:   #fdecea;
    --alerte:         #b54708;
    --alerte-douce:   #fef4e6;

    /* Geometrie */
    --rayon:          10px;
    --rayon-petit:    7px;
    --ombre:          0 1px 2px rgba(16, 24, 40, .05), 0 1px 3px rgba(16, 24, 40, .06);
    --ombre-forte:    0 4px 12px rgba(16, 24, 40, .1);
    --largeur-nav:    242px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 14px;
    line-height: 1.55;
    color: var(--texte);
    background: var(--fond);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0; font-weight: 600; line-height: 1.3; letter-spacing: -.01em; }
p { margin: 0 0 .75rem; }
a { color: var(--primaire); text-decoration: none; }
a:hover { text-decoration: underline; }

.icone { width: 19px; height: 19px; flex: 0 0 19px; }

/* =====================================================================
   Ossature
   ===================================================================== */

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

.zone-principale {
    flex: 1;
    min-width: 0;
    margin-left: var(--largeur-nav);
    display: flex;
    flex-direction: column;
}

/* --- Barre laterale -------------------------------------------------- */

.sidebar {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: var(--largeur-nav);
    background: var(--nav-fond);
    display: flex;
    flex-direction: column;
    padding: 1.15rem .75rem;
    z-index: 40;
}

.sidebar-marque {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .25rem .5rem 1.35rem;
}

.marque-logo {
    width: 32px; height: 32px;
    display: grid; place-items: center;
    border-radius: 9px;
    background: linear-gradient(135deg, #2563eb, #4f46e5);
    color: #fff;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: .02em;
}

.marque-texte { color: #fff; font-weight: 600; font-size: 15.5px; letter-spacing: -.01em; }

.sidebar-nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }

.nav-lien {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .55rem .65rem;
    border-radius: var(--rayon-petit);
    color: var(--nav-texte);
    font-weight: 500;
    font-size: 13.5px;
    transition: background .13s, color .13s;
}

.nav-lien:hover { background: rgba(255, 255, 255, .06); color: #fff; text-decoration: none; }
.nav-lien.est-actif { background: var(--nav-fond-actif); color: var(--nav-texte-actif); }
.nav-lien .icone { opacity: .85; }
.nav-lien.est-actif .icone { opacity: 1; color: #6d9dff; }

.sidebar-pied { border-top: 1px solid rgba(255, 255, 255, .08); padding-top: .75rem; }
.nav-lien-discret { font-size: 13px; }

.utilisateur { display: flex; align-items: center; gap: .6rem; padding: .35rem .65rem .6rem; }

.utilisateur-avatar {
    width: 30px; height: 30px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, .1);
    color: #fff;
    font-weight: 600;
    font-size: 12.5px;
}

.utilisateur-infos { min-width: 0; }
.utilisateur-nom {
    color: #e8edf4; font-size: 13px; font-weight: 500;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.utilisateur-role { color: var(--texte-tres-doux); font-size: 11.5px; text-transform: capitalize; }

/* --- Barre superieure ------------------------------------------------ */

.topbar {
    position: sticky;
    top: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.75rem;
    background: rgba(255, 255, 255, .88);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--bordure);
}

.topbar-titres { flex: 1; min-width: 0; }
.topbar h1 { font-size: 19px; }
.topbar-soustitre { margin: .1rem 0 0; color: var(--texte-doux); font-size: 13px; }
.topbar-actions { display: flex; align-items: center; gap: .5rem; }

.bouton-menu {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    width: 36px; height: 36px;
    padding: 0 8px;
    background: none;
    border: 1px solid var(--bordure);
    border-radius: var(--rayon-petit);
    cursor: pointer;
}
.bouton-menu span { display: block; height: 2px; background: var(--texte); border-radius: 2px; }

.contenu { padding: 1.5rem 1.75rem 3rem; max-width: 1500px; width: 100%; }

/* =====================================================================
   Composants
   ===================================================================== */

/* --- Cartes ---------------------------------------------------------- */

.card {
    background: var(--surface);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
    box-shadow: var(--ombre);
    margin-bottom: 1.25rem;
    overflow: hidden;
}

.card-entete {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .95rem 1.15rem;
    border-bottom: 1px solid var(--bordure);
    background: var(--surface-douce);
}

.card-titre { font-size: 14.5px; font-weight: 600; }
.card-soustitre { color: var(--texte-doux); font-size: 12.5px; margin: .1rem 0 0; }
.card-corps { padding: 1.15rem; }
.card-corps > :last-child { margin-bottom: 0; }

/* --- Grilles --------------------------------------------------------- */

.grille { display: grid; gap: 1.25rem; }
.grille-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grille-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grille-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* --- Tuiles de statistique ------------------------------------------- */

.tuile {
    background: var(--surface);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
    box-shadow: var(--ombre);
    padding: 1.1rem 1.15rem;
}

.tuile-libelle {
    color: var(--texte-doux);
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .045em;
    margin-bottom: .45rem;
}

.tuile-valeur {
    font-size: 25px;
    font-weight: 600;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
    line-height: 1.15;
}

.tuile-detail { color: var(--texte-doux); font-size: 12.5px; margin-top: .3rem; }

/* --- Tableaux -------------------------------------------------------- */

.table-conteneur { overflow-x: auto; }

.table { width: 100%; border-collapse: collapse; font-size: 13.5px; }

.table th {
    text-align: left;
    font-weight: 600;
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: .045em;
    color: var(--texte-doux);
    padding: .6rem 1.15rem;
    background: var(--surface-douce);
    border-bottom: 1px solid var(--bordure);
    white-space: nowrap;
}

.table td {
    padding: .68rem 1.15rem;
    border-bottom: 1px solid var(--bordure);
    vertical-align: middle;
}

.table tbody tr:last-child td { border-bottom: none; }
.table tbody tr:hover { background: var(--surface-douce); }

.table .num, .num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.table-vide { padding: 2.5rem 1.15rem; text-align: center; color: var(--texte-doux); }

.mono { font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; font-size: 12.5px; }

/* --- Badges ---------------------------------------------------------- */

.badge {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .18rem .5rem;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
}

.badge-ok      { background: var(--succes-douce); color: var(--succes); }
.badge-err     { background: var(--danger-douce); color: var(--danger); }
.badge-attente { background: var(--alerte-douce); color: var(--alerte); }
.badge-neutre  { background: #eef1f5; color: var(--texte-doux); }
.badge-info    { background: var(--primaire-douce); color: var(--primaire-fonce); }

.pastille { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }

.hausse { color: var(--succes); font-variant-numeric: tabular-nums; }
.baisse { color: var(--danger); font-variant-numeric: tabular-nums; }
.neutre { color: var(--texte-doux); }

/* --- Boutons --------------------------------------------------------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    padding: .5rem .9rem;
    border: 1px solid transparent;
    border-radius: var(--rayon-petit);
    font: inherit;
    font-size: 13.5px;
    font-weight: 500;
    cursor: pointer;
    transition: background .13s, border-color .13s, color .13s;
    white-space: nowrap;
}

.btn:hover { text-decoration: none; }
.btn:disabled { opacity: .55; cursor: not-allowed; }

.btn-primaire { background: var(--primaire); color: #fff; }
.btn-primaire:hover:not(:disabled) { background: var(--primaire-fonce); }

.btn-neutre { background: var(--surface); border-color: var(--bordure-forte); color: var(--texte); }
.btn-neutre:hover:not(:disabled) { background: var(--surface-douce); border-color: var(--texte-tres-doux); }

.btn-danger { background: var(--danger); color: #fff; }
.btn-danger:hover:not(:disabled) { background: #b42318; }

.btn-petit { padding: .3rem .6rem; font-size: 12.5px; }
.btn-bloc { width: 100%; }

/* --- Formulaires ----------------------------------------------------- */

.champ { margin-bottom: 1rem; }

.champ label {
    display: block;
    margin-bottom: .3rem;
    font-size: 13px;
    font-weight: 500;
    color: var(--texte);
}

.champ-aide { color: var(--texte-doux); font-size: 12.5px; margin: .25rem 0 0; }

input[type="text"], input[type="email"], input[type="password"],
input[type="number"], select, textarea {
    width: 100%;
    padding: .5rem .65rem;
    font: inherit;
    font-size: 13.5px;
    color: var(--texte);
    background: var(--surface);
    border: 1px solid var(--bordure-forte);
    border-radius: var(--rayon-petit);
    transition: border-color .13s, box-shadow .13s;
}

input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--primaire);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .13);
}

/* Etats de l'auto-save par champ (guide §5) */
.est-modifie  { background: var(--danger-douce) !important; }
.est-en-cours { background: var(--alerte-douce) !important; }
.est-enregistre { background: var(--succes-douce) !important; transition: background .5s; }

/* --- Alertes --------------------------------------------------------- */

.alert {
    padding: .7rem .95rem;
    border-radius: var(--rayon-petit);
    border: 1px solid transparent;
    margin-bottom: 1.15rem;
    font-size: 13.5px;
}

.alert-success { background: var(--succes-douce); border-color: #bfe5cd; color: #08703c; }
.alert-danger  { background: var(--danger-douce); border-color: #f6c9c4; color: #a91d14; }
.alert-warning { background: var(--alerte-douce); border-color: #f5d9b0; color: #93380a; }
.alert-info    { background: var(--primaire-douce); border-color: #c5d9fc; color: var(--primaire-fonce); }

/* --- Divers ---------------------------------------------------------- */

.texte-doux { color: var(--texte-doux); }
.texte-petit { font-size: 12.5px; }
.sans-marge { margin: 0; }
.pile { display: flex; align-items: center; gap: .5rem; }
.pile-entre { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }

.etat-vide { padding: 2.5rem 1rem; text-align: center; color: var(--texte-doux); }

/* =====================================================================
   Page de connexion
   ===================================================================== */

.corps-login {
    display: grid;
    place-items: center;
    min-height: 100vh;
    padding: 1.5rem;
    background: linear-gradient(160deg, #131a26 0%, #1e2a3d 55%, #24344c 100%);
}

.login-enveloppe { width: 100%; max-width: 390px; }

.login-carte {
    background: var(--surface);
    border-radius: 14px;
    box-shadow: 0 20px 45px rgba(8, 13, 22, .35);
    padding: 2rem 1.85rem 1.85rem;
}

.login-marque { display: flex; align-items: center; gap: .6rem; justify-content: center; }
.login-marque .marque-texte { color: var(--texte); font-size: 18px; }

.login-accroche {
    text-align: center;
    color: var(--texte-doux);
    font-size: 13px;
    margin: .5rem 0 1.6rem;
}

.login-pied {
    text-align: center;
    color: rgba(255, 255, 255, .45);
    font-size: 12px;
    margin: 1.15rem 0 0;
}

/* =====================================================================
   Page d'installation
   ===================================================================== */

.corps-install {
    background: var(--fond);
    padding: 2.5rem 1.5rem 4rem;
}

.install-enveloppe { max-width: 620px; margin: 0 auto; }

.install-entete { text-align: center; margin-bottom: 1.75rem; }
.install-entete .marque-logo { margin: 0 auto .75rem; width: 40px; height: 40px; font-size: 15px; }
.install-entete h1 { font-size: 21px; }
.install-entete p { color: var(--texte-doux); margin-top: .3rem; }

.section-titre {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--texte-doux);
    padding-bottom: .5rem;
    margin: 1.6rem 0 1rem;
    border-bottom: 1px solid var(--bordure);
}
.section-titre:first-child { margin-top: 0; }

.liste-verif { list-style: none; margin: 0; padding: 0; }
.liste-verif li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .5rem 0;
    border-bottom: 1px solid var(--bordure);
    font-size: 13.5px;
}
.liste-verif li:last-child { border-bottom: none; }

/* =====================================================================
   Responsive
   ===================================================================== */

@media (max-width: 1100px) {
    .grille-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
    .sidebar { transform: translateX(-100%); transition: transform .2s ease; }
    .sidebar.est-ouverte { transform: translateX(0); box-shadow: var(--ombre-forte); }
    .zone-principale { margin-left: 0; }
    .bouton-menu { display: flex; }
    .grille-2, .grille-3 { grid-template-columns: minmax(0, 1fr); }
    .contenu { padding: 1.15rem 1rem 3rem; }
    .topbar { padding: .85rem 1rem; }
}

@media (max-width: 600px) {
    .grille-4 { grid-template-columns: minmax(0, 1fr); }
}

/* =====================================================================
   Interrupteurs (auto-save)
   ===================================================================== */

.bascule { display: inline-flex; align-items: center; cursor: pointer; }
.bascule input { position: absolute; opacity: 0; width: 0; height: 0; }

.bascule-piste {
    position: relative;
    display: block;
    width: 38px; height: 21px;
    background: var(--bordure-forte);
    border-radius: 999px;
    transition: background .15s;
}

.bascule-piste::after {
    content: "";
    position: absolute;
    top: 2px; left: 2px;
    width: 17px; height: 17px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .2);
    transition: transform .15s;
}

.bascule input:checked + .bascule-piste { background: var(--succes); }
.bascule input:checked + .bascule-piste::after { transform: translateX(17px); }
.bascule input:focus-visible + .bascule-piste { box-shadow: 0 0 0 3px rgba(37, 99, 235, .25); }

/* Un interrupteur d'arret est actif quand il BLOQUE : rouge, pas vert */
.bascule input:checked + .bascule-piste.bascule-danger { background: var(--danger); }

/* --- Etats d'auto-save sur un conteneur de champ --------------------- */
[data-champ].est-modifie,
[data-champ].est-en-cours,
[data-champ].est-enregistre { border-radius: var(--rayon-petit); transition: background .3s; }

[data-champ].est-modifie   { background: var(--danger-douce); }
[data-champ].est-en-cours  { background: var(--alerte-douce); }
[data-champ].est-enregistre { background: var(--succes-douce); }

/* =====================================================================
   Saisies discretes dans les tableaux
   ===================================================================== */

.saisie-discrete {
    border-color: transparent;
    background: transparent;
    padding: .3rem .45rem;
}
.saisie-discrete:hover { border-color: var(--bordure); background: var(--surface); }
.saisie-discrete:focus { border-color: var(--primaire); background: var(--surface); }

.saisie-compacte { width: 90px; text-align: right; }

.ligne-archivee { opacity: .55; }
.ligne-archivee:hover { opacity: 1; }

/* =====================================================================
   Graphique des cours
   ===================================================================== */

.graphique { width: 100%; }
.graphique svg { display: block; }
#zone-survol { cursor: crosshair; }
.graphique-info { min-height: 1.2em; margin-top: .5rem; font-variant-numeric: tabular-nums; }

/* =====================================================================
   Arret d'urgence du trading
   ===================================================================== */

.carte-arret { border-width: 2px; }
.carte-arret-actif   { border-color: var(--succes); }
.carte-arret-partiel { border-color: var(--alerte); }
.carte-arret-arrete  { border-color: var(--danger); background: var(--danger-douce); }

.arret-titre { margin-bottom: .4rem; }
.arret-titre .badge { font-size: 13px; padding: .3rem .7rem; }
.arret-texte { color: var(--texte-doux); font-size: 13.5px; }

/* Le bouton de coupure doit se voir de loin et ne ressembler a aucun autre */
.btn-arret-urgence {
    background: var(--danger);
    color: #fff;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: .04em;
    padding: .85rem 1.6rem;
    box-shadow: 0 2px 8px rgba(217, 45, 32, .35);
}
.btn-arret-urgence:hover:not(:disabled) { background: #b42318; }

/* Indicateur permanent de la barre du haut : present sur toutes les pages */
.badge-trading {
    font-size: 12.5px;
    padding: .3rem .65rem;
    text-decoration: none;
}
.badge-trading:hover { text-decoration: none; filter: brightness(.95); }