:root{
  --bg:#0b0f14;
  --muted:#9ca3af;
  --text:#e5e7eb;
  --accent:#ef4444;
  --ok:#22c55e;
  --border:rgba(255,255,255,.10);
  --shadow: 0 10px 30px rgba(0,0,0,.35);
  --radius: 18px;
}

*{box-sizing:border-box}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  background: radial-gradient(1200px 600px at 20% 0%, rgba(239,68,68,.20), transparent 55%),
              radial-gradient(900px 450px at 90% 10%, rgba(34,197,94,.10), transparent 55%),
              var(--bg);
  color:var(--text);
  padding-bottom: 420px;
}

@media (min-width: 900px) {
  body { padding-bottom: 600px; }
}
.wrap{max-width:1100px;margin:28px auto;padding:0 16px 40px;}
header{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:18px;}
h1{margin:0;font-size:clamp(20px,2.6vw,32px);letter-spacing:.2px}
.sub{color:var(--muted);margin-top:6px;max-width:75ch;line-height:1.4;font-size:14px;}

.card{
  background: linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.05));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow:hidden;
}
.card .hd{
  padding:14px 16px;
  border-bottom:1px solid var(--border);
  display:flex;justify-content:space-between;align-items:center;gap:10px;
  background: rgba(255,255,255,.02);
}
.card .bd{padding:16px;}

.badge{
  font-size:12px;color:#fff;padding:6px 10px;border-radius:999px;
  background: rgba(239,68,68,.18);
  border:1px solid rgba(239,68,68,.28);
  white-space:nowrap;
}

label{display:block;font-size:12px;color:var(--muted);margin-bottom:8px;}
.row label{
  min-height:40px;
  max-height:40px;
  overflow:hidden;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
}

input[type="text"],
input[type="password"],
input[type="number"],
input[type="email"],
input[type="date"],
select,
textarea{
  width:100%;
  display:block;
  min-width:0;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(11,15,20,.55);
  color:var(--text);
  outline:none;
  box-sizing:border-box;
}
.field input,
.field select,
.field textarea{
  width:100%;
  display:block;
  min-width:0;
  box-sizing:border-box;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:10px 14px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color:var(--text);
  font-weight:700;
  cursor:pointer;
  text-decoration:none;
}
.btn:hover{background: rgba(255,255,255,.12);}
.btn-primary{
  background: linear-gradient(135deg, #ef4444, #b91c1c);
  border-color: rgba(239,68,68,.35);
  box-shadow: 0 10px 25px rgba(239,68,68,.22);
  color:#fff;
}
.btn-primary:hover{opacity:.95;}
.btn-ghost{background: transparent;}

.note{color:var(--muted);font-size:12px;line-height:1.35;}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
@media (max-width:900px){.grid2{grid-template-columns:1fr;}}

.tools-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
@media (max-width:900px){.tools-grid{grid-template-columns:1fr;}}
.tool{
  border:1px solid rgba(255,255,255,.10);
  border-radius:16px;
  background: rgba(255,255,255,.07);
  padding:14px;
}
.tool a{color:inherit;text-decoration:none;display:block;}
.tool h3{margin:0 0 6px 0;font-size:15px;}
.tool p{margin:0;color:var(--muted);font-size:13px;line-height:1.3;}
.tool:hover{background: rgba(255,255,255,.06);}

.logout-btn{
  margin-top: 18px;
  display: inline-block;
  color: #fca5a5;
  border-color: rgba(239,68,68,.35);
}
.logout-btn:hover{
  background: rgba(239,68,68,.12);
}

.login-card{
  max-width: 480px;
  margin-top: 20px;
}
body.login{
  min-height: 100vh;
  display: flex;
  align-items: center;
}

/* ===== Simulateurs : layout commun ===== */
.grid{display:grid;grid-template-columns:360px 1fr;gap:16px;align-items:start;}
@media (max-width:980px){.grid{grid-template-columns:1fr;}}
.row{display:flex;gap:10px;}
.row>*{flex:1}
.field{margin-bottom:14px;}
input[type="range"]{width:100%;accent-color:var(--accent);}
.rangeLine{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:8px;color:var(--muted);font-size:12px;}
.pill{padding:4px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.12);background: rgba(0,0,0,.15);color:var(--text);font-variant-numeric:tabular-nums;}
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
@media (max-width:520px){.kpis{grid-template-columns:1fr;}}
.kpi{background: rgba(255,255,255,.07);border: 1px solid rgba(255,255,255,.10);border-radius:16px;padding:12px;}
.kpi .t{color:var(--muted);font-size:12px;margin-bottom:6px;}
.kpi .v{font-size: clamp(16px, 2.4vw, 20px);font-weight: 800;letter-spacing: .2px;font-variant-numeric: tabular-nums;white-space: nowrap;}
.kpi{overflow: hidden;}
.kpi .s{margin-top:6px;color:var(--muted);font-size:12px;line-height:1.35;}
.kpi .big{
  font-size: clamp(26px, 3vw, 34px);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Capacité : valeurs longues (évite le € coupé) */
#kpiCapital, #kpiBudget{
  font-weight:600 !important;
  font-size: clamp(22px, 2.6vw, 30px) !important;
}
.two{display:grid;grid-template-columns:1fr;gap:16px;}
canvas{max-height:360px;}
.compare{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
@media (max-width:860px){.compare{grid-template-columns:1fr;}}
.box{background: rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.10);border-radius:16px;padding:12px;}
.box .top{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;gap:10px;}
.box .ttl{font-weight:800;font-size:14px;}
.box .mini{color:var(--muted);font-size:12px;}
.bigRed{color:#fff;background: rgba(239,68,68,.18);border: 1px solid rgba(239,68,68,.28);border-radius:14px;padding:10px 12px;font-weight:900;font-size:16px;text-align:center;font-variant-numeric:tabular-nums;}
.btnRow{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px;}
.btnRow button{border:1px solid rgba(255,255,255,.14);background: rgba(255,255,255,.06);color:var(--text);padding:10px 12px;border-radius:12px;cursor:pointer;font-weight:700;}
.btnRow button:hover{background: rgba(255,255,255,.10)}
.btnRow .ok{border-color: rgba(34,197,94,.30); background: rgba(34,197,94,.10);}
.btnRow .ok:hover{background: rgba(34,197,94,.16)}
.btnRow .danger{border-color: rgba(239,68,68,.35); background: rgba(239,68,68,.12);}
.btnRow .danger:hover{background: rgba(239,68,68,.18)}

/* ===== Bouton amortissement ===== */
.amort-btn-wrap{margin-top:18px;}
.amort-btn, .back-btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:12px 18px;border-radius:999px;text-decoration:none;
  font-weight:800;font-size:14px;color:#fff;
  background: linear-gradient(135deg, #ef4444, #b91c1c);
  box-shadow: 0 10px 25px rgba(239,68,68,.35);
  transition: transform .15s ease, box-shadow .15s ease, opacity .15s;
  border: 1px solid rgba(239,68,68,.35);
}
.amort-btn:hover, .back-btn:hover{transform: translateY(-1px);box-shadow: 0 14px 32px rgba(239,68,68,.45);opacity:.95;}

/* ===== Amortissement : tableau dark ===== */
.table-card{margin-top:16px;}
.table{width:100%;border-collapse:collapse;font-size:13px;}
.table th,.table td{padding:10px 12px;border-bottom:1px solid rgba(255,255,255,.10);text-align:right;font-variant-numeric:tabular-nums;}
.table th{background: rgba(255,255,255,.07);color:var(--text);}
.table th:first-child,.table td:first-child{text-align:center;}
.table tr:hover td{background: rgba(255,255,255,.07);}
.summary{
  margin:16px 0;
  padding:12px 14px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:16px;
  background: rgba(255,255,255,.07);
  color: var(--text);
}
.summary strong{color:#fff;}
/* Espace sous le message de bienvenue */
.welcome{
  margin-bottom: 22px;
}
.tool h3{
  display: flex;
  align-items: center;
  gap: 8px;
}
/* === Grille 2 colonnes pour les champs === */
.form-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 16px; /* vertical / horizontal */
}

/* Mobile */
@media (max-width: 640px) {
  .form-grid-2 {
    grid-template-columns: 1fr;
  }
}

.note a.logout{
  font-size:13px;
  color:#fca5a5 !important;
  opacity:0.85;
  text-decoration:none !important;
}
.note a.logout:hover{
  opacity:1;
  text-decoration:underline !important;
}
/* Alignement propre des champs sur 2 colonnes (labels de hauteur fixe) */
.form-grid .field{
  display: flex;
  flex-direction: column;
}

.form-grid .field label{
  display: block;
  min-height: 48px;   /* ajuste à 44/52 si besoin */
  line-height: 1.2;
  margin-bottom: 8px;
}

/* Garder les flèches natives et les adapter au thème sombre */
input[type="number"]{
  color-scheme: dark;
}
html { color-scheme: dark; }
select { color-scheme: dark; }
select option { color: #111827; }
.withDot {
  display: flex;
  align-items: center;
  gap: 10px;
}

.section,
.card {
  pointer-events: auto;
}

.section::before,
.section::after {
  pointer-events: none;
}

.topRow {
  position: relative;
  z-index: 100;
}


/* ===== CSS extrait de amortissement.php (scopé .simu-amortissement) ===== */
.simu-amortissement .export-pdf-btn {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 9999;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(11,15,20,0.85);
    color: #fff;
    cursor: pointer;
    font-weight: 700;
    box-shadow: 0 12px 30px rgba(0,0,0,.35);
    backdrop-filter: blur(10px);
  }
  .simu-amortissement .export-pdf-btn:hover { transform: translateY(-1px); }



/* ===== CSS extrait de simulateur_deficit_foncier.php (scopé .simu-deficit-foncier) ===== */
.simu-deficit-foncier /* On s’aligne sur le thème dark de styles.css */
    .container {max-width:1200px;margin:0 auto;padding:24px}
    .simu-deficit-foncier .section {
      background:rgba(255,255,255,.07);
      border:1px solid rgba(255,255,255,0.10);
      border-radius:18px;
      padding:20px;
      margin:18px 0;
      position:relative;
      clear:both;
      box-shadow:0 2px 12px rgba(0,0,0,.25);
    }
    .simu-deficit-foncier .topRow {display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
    .simu-deficit-foncier .topActions {display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}
    @media (max-width: 720px){.simu-deficit-foncier .topRow {flex-direction:column}.simu-deficit-foncier .topActions {width:100%;justify-content:flex-start}}

    .simu-deficit-foncier .pill2 {display:inline-flex;gap:8px;align-items:center;padding:6px 10px;border-radius:999px;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.10);font-size:12px}
    .simu-deficit-foncier .muted2 {opacity:.78;font-size:.95em}

    .simu-deficit-foncier .grid3 {display:grid;grid-template-columns:360px 1fr 1fr;gap:16px;align-items:start}
    @media (max-width: 980px){.simu-deficit-foncier .grid3 {grid-template-columns:1fr}}
    .simu-deficit-foncier .grid2 {display:grid;grid-template-columns:1fr 1fr;gap:12px}
    @media (max-width: 980px){.simu-deficit-foncier .grid2 {grid-template-columns:1fr}}
    .simu-deficit-foncier .box {
      background:rgba(255,255,255,0.04);
      border:1px solid rgba(255,255,255,0.10);
      border-radius:16px;
      padding:14px;
    }
    .simu-deficit-foncier .box .t {font-weight:800;margin-bottom:8px}
    .simu-deficit-foncier .help {
      /* NOTE: valeurs rgba corrigées (alpha entre 0 et 1) */
      background:rgba(11,15,20,0.35);
      border:1px solid rgba(255,255,255,.10);
      border-radius:16px;
      padding:12px 14px;
      color:rgba(255,255,255,.9);
      font-size:13px;
      line-height:1.35;
    }
    .simu-deficit-foncier .help b {color:#fff}
    .simu-deficit-foncier .help .k {color:rgba(255,255,255,.65);font-size:12px;margin-bottom:6px}
    .simu-deficit-foncier .checkline {display:flex;align-items:center;gap:10px;margin-top:10px;color:rgba(255,255,255,.85);font-size:13px}

    .simu-deficit-foncier table {width:100%;border-collapse:collapse;font-size:13px}
    .simu-deficit-foncier th, .simu-deficit-foncier td {padding:10px 12px;border-bottom:1px solid rgba(255,255,255,0.10);text-align:left}
    .simu-deficit-foncier th {color:rgba(255,255,255,.75);font-size:11px;text-transform:uppercase;letter-spacing:.06em}
    .simu-deficit-foncier td.right, .simu-deficit-foncier th.right {text-align:right;font-variant-numeric:tabular-nums}
    .simu-deficit-foncier tr:hover td {background:rgba(255,255,255,0.03)}
    .simu-deficit-foncier .neg {color:#fb7185;font-weight:800}
    .simu-deficit-foncier .pos {color:#34d399;font-weight:800}

    .simu-deficit-foncier .summarygrid {display:grid;grid-template-columns:360px 1fr;gap:16px;align-items:start}
    @media (max-width:980px){.simu-deficit-foncier .summarygrid {grid-template-columns:1fr}}
    .simu-deficit-foncier .big {font-size: clamp(26px, 3vw, 34px);font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
    .simu-deficit-foncier .note {color:var(--muted);font-size:12px;line-height:1.35}
  
    .simu-deficit-foncier .hint {margin-top:6px;color:rgba(255,255,255,.65);font-size:12px;line-height:1.25}
    .simu-deficit-foncier .sep {height:1px;background:rgba(255,255,255,.10)}

    .simu-deficit-foncier /* Input inline (table) */
    .worksInput {
      width:110px;
      padding:6px 8px;
      border-radius:10px;
      border:1px solid rgba(255,255,255,0.14);
      background:rgba(255,255,255,0.05);
      color:rgba(255,255,255,0.92);
      font-variant-numeric:tabular-nums;
      text-align:right;
    }

    .simu-deficit-foncier .interestInput {
      width: 120px;
      text-align:right;
      padding:8px 10px;
      border-radius:10px;
      border:1px solid rgba(255,255,255,.12);
      background: rgba(255,255,255,.06);
      color:#e5e7eb;
      outline:none;
    }



/* ===== CSS extrait de simulateur_cashflow.php (scopé .simu-cashflow) ===== */
.simu-cashflow .container {max-width:1200px;margin:0 auto;padding:24px}
    .simu-cashflow .topRow {
      display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
      margin-bottom:18px
    }
    .simu-cashflow h1 {margin:0;font-size:30px;letter-spacing:.2px}
    .simu-cashflow .subtitle {margin-top:6px;color:var(--muted);font-size:14.5px;line-height:1.35}
    .simu-cashflow .cfbtnRow {display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}
    .simu-cashflow .cfbtn {
      border:1px solid var(--stroke);
      background: rgba(255,255,255,.06);
      color:var(--text);
      padding:10px 12px;
      border-radius:14px;
      cursor:pointer;
      box-shadow: var(--inner);
      font-weight:650;
      font-size:13px;
      display:inline-flex;align-items:center;gap:8px;
      user-select:none;
    }
    .simu-cashflow .cfbtn:hover {background: rgba(255,255,255,.09)}
    .simu-cashflow .cfbtn:active {transform: translateY(1px)}
    .simu-cashflow .cfbtnAccent {
      border-color: rgba(245,158,11,.35);
      background: rgba(245,158,11,.12);
    }

    .simu-cashflow .card {
      border:1px solid var(--stroke);
      background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.04));
      border-radius: var(--radius);
      box-shadow: var(--shadow), var(--inner);
      overflow:hidden;
    }

    .simu-cashflow .grid2 {display:grid;grid-template-columns:1.2fr .8fr;gap:18px}
    @media(max-width:980px){.simu-cashflow .grid2 {grid-template-columns:1fr}}

    .simu-cashflow .sectionTitle {
      padding:18px 18px 10px;
      font-weight:800;
      font-size:18px;
      letter-spacing:.2px;
    }

    .simu-cashflow .formGrid {
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap:14px 14px;
      padding: 0 18px 18px;
    }
    @media(max-width:740px){.simu-cashflow .formGrid {grid-template-columns:1fr}}

    .simu-cashflow .field label {
      display:block;
      color:var(--muted);
      font-size:12.8px;
      margin:0 0 7px;
    }
    .simu-cashflow .field input, .simu-cashflow .field select {
      width:100%;
      padding:12px 14px;
      border-radius:16px;
      border:1px solid var(--stroke);
      background: rgba(0,0,0,.18);
      color:var(--text);
      outline:none;
      box-shadow: var(--inner);
      font-size:14.5px;
    }
    .simu-cashflow .field input:focus, .simu-cashflow .field select:focus {
      border-color: rgba(245,158,11,.35);
      box-shadow: 0 0 0 4px rgba(245,158,11,.08), var(--inner);
    }
    .simu-cashflow .field select { color-scheme: dark; }
    .simu-cashflow .inline2 {display:flex;gap:10px}
    .simu-cashflow .inline2 > * {flex:1}

    .simu-cashflow .note {
      padding:0 18px 16px;
      color: rgba(232,237,246,.66);
      font-size:12.8px;
      line-height:1.35;
    }

    .simu-cashflow .summaryWrap {padding:18px}
    .simu-cashflow .kpiGrid {
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap:12px;
    }
    @media(max-width:980px){.simu-cashflow .kpiGrid {grid-template-columns:1fr 1fr}}
    @media(max-width:520px){.simu-cashflow .kpiGrid {grid-template-columns:1fr}}

    .simu-cashflow .kpi {
      border:1px solid var(--stroke);
      background: rgba(255,255,255,.07);
      border-radius:18px;
      padding:14px 14px 12px;
      box-shadow: var(--inner);
    }
    .simu-cashflow .kpi .label {color:var(--muted);font-size:12.5px;margin-bottom:6px}
    .simu-cashflow .kpi .value {font-size:22px;font-weight:900;letter-spacing:.2px}
    .simu-cashflow .kpi .sub {margin-top:6px;color:rgba(232,237,246,.62);font-size:12.5px}

    .simu-cashflow .value.good {color:var(--good)}
    .simu-cashflow .value.bad {color:var(--bad)}
    .simu-cashflow .value.accent {color:var(--accent)}

    .simu-cashflow .chartBox {
      margin-top:14px;
      border:1px solid var(--stroke);
      background: rgba(255,255,255,.07);
      border-radius:18px;
      padding:14px;
      box-shadow: var(--inner);
    }
    .simu-cashflow .bar {
      height:18px;
      border-radius:999px;
      overflow:hidden;
      border:1px solid rgba(255,255,255,.08);
      background: rgba(0,0,0,.25);
      display:flex;
    }
    .simu-cashflow .seg {height:100%}
    .simu-cashflow .seg.loan {background: rgba(59,130,246,.55)}
    .simu-cashflow .seg.chg {background: rgba(255,255,255,.18)}
    .simu-cashflow .seg.tax {background: rgba(245,158,11,.60)}
    .simu-cashflow .seg.cf {background: rgba(34,197,94,.55)}
    .simu-cashflow .seg.neg {background: rgba(239,68,68,.55)}

    .simu-cashflow .legend {
      display:flex;gap:12px;flex-wrap:wrap;margin-top:10px;color:rgba(232,237,246,.72);font-size:12.5px
    }
    .simu-cashflow .dot {width:10px;height:10px;border-radius:999px;display:inline-block;margin-right:7px;vertical-align:middle}
    .simu-cashflow .dot.loan {background: rgba(59,130,246,.7)}
    .simu-cashflow .dot.chg {background: rgba(255,255,255,.25)}
    .simu-cashflow .dot.tax {background: rgba(245,158,11,.75)}
    .simu-cashflow .dot.cf {background: rgba(34,197,94,.7)}
    .simu-cashflow .dot.neg {background: rgba(239,68,68,.7)}

    .simu-cashflow .hr {height:1px;background: rgba(255,255,255,.07);margin:14px 0}

    .simu-cashflow .smallRow {
      display:flex;gap:12px;flex-wrap:wrap;justify-content:space-between;
      color:rgba(232,237,246,.72);font-size:12.8px
    }
    .simu-cashflow .pill {
      border:1px solid rgba(255,255,255,.10);
      background: rgba(255,255,255,.07);
      border-radius:999px;
      padding:8px 10px;
      box-shadow: var(--inner);
    }



/* ===== CSS extrait de simulateur_pret.php (scopé .simu-pret) ===== */
.simu-pret .export-pdf-btn {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 9999;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(11,15,20,0.85);
    color: #fff;
    cursor: pointer;
    font-weight: 700;
    box-shadow: 0 12px 30px rgba(0,0,0,.35);
    backdrop-filter: blur(10px);
  }
  .simu-pret .export-pdf-btn:hover { transform: translateY(-1px); }



/* ===== CSS extrait de simulateur_fiscalite.php (scopé .simu-fiscalite) ===== */
.simu-fiscalite .container {max-width:1200px;margin:0 auto;padding:24px}
    .simu-fiscalite .section {background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,0.10);border-radius:18px;padding:20px;margin:18px 0;box-shadow:0 2px 12px rgba(0,0,0,.25)}
    .simu-fiscalite .section h2 {margin:0 0 12px}
    .simu-fiscalite .grid2 {display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
    .simu-fiscalite .field {display:flex;flex-direction:column}
    .simu-fiscalite .field label {display:block;min-height:44px;margin-bottom:6px;opacity:.9}
    .simu-fiscalite .muted {opacity:.75;font-size:.95em}
    .simu-fiscalite .total {font-size:1.35em;font-weight:700}
    .simu-fiscalite .row3 {display:grid;grid-template-columns:2fr 1fr auto;gap:10px;margin-bottom:10px}
    .simu-fiscalite .hidden {display:none}
    .simu-fiscalite .btn {background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.12);color:#fff;border-radius:10px;padding:8px 12px;cursor:pointer}
    .simu-fiscalite .btn.small {padding:6px 10px;border-radius:9px}
    .simu-fiscalite .exportRow {margin-top:14px;display:flex;justify-content:flex-end}
    .simu-fiscalite table {width:100%;border-collapse:collapse}
    .simu-fiscalite th, .simu-fiscalite td {padding:10px;border-bottom:1px solid rgba(255,255,255,0.08);text-align:left}
    .simu-fiscalite input[type="number"], .simu-fiscalite select {width:100%}
    .simu-fiscalite .pill {display:inline-flex;gap:10px;align-items:center;padding:6px 10px;border-radius:999px;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.10)}
  
    

    .simu-fiscalite /* --- Visualisation (donut) --- */
    
    .donut {
      pointer-events: auto;
      --accent-ir: rgba(239,68,68,.90);
      --accent-ps: rgba(245,158,11,.90);
      --accent-net: rgba(255,255,255,.10);
      width:320px;height:320px;border-radius:50%;
      background: conic-gradient(
        var(--accent-ir) 0 calc(var(--pIR)*1%),
        var(--accent-ps) calc(var(--pIR)*1%) calc((var(--pIR) + var(--pPS))*1%),
        var(--accent-net) 0
      );
      position:relative; margin: 0 auto;
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
    }
    
    .simu-fiscalite .donut.focus-ir { --accent-ir: rgba(239,68,68,1); --accent-ps: rgba(245,158,11,.20); --accent-net: rgba(255,255,255,.05); }
    .simu-fiscalite .donut.focus-ps { --accent-ir: rgba(239,68,68,.20); --accent-ps: rgba(245,158,11,1); --accent-net: rgba(255,255,255,.05); }
    .simu-fiscalite .donut.focus-net { --accent-ir: rgba(239,68,68,.20); --accent-ps: rgba(245,158,11,.20); --accent-net: rgba(255,255,255,.16); }
.simu-fiscalite .donut:before {
      content:""; position:absolute; inset:38%;
      background: rgba(11,15,20,.92);
      border-radius:50%;
      box-shadow: 0 0 0 1px rgba(255,255,255,.08);
    }
    .simu-fiscalite .donutCenter {
      position:absolute; inset:0; display:flex; flex-direction:column;
      align-items:center; justify-content:center; text-align:center;
      pointer-events:none;
    }
    .simu-fiscalite .donutCenter .big {font-size:42px;font-weight:800;line-height:1}
    .simu-fiscalite .donutCenter .small {font-size:13px;opacity:.75;margin-top:8px}
    .simu-fiscalite .legendRow {display:grid;grid-template-columns: 1fr 1fr; gap:12px; margin-top:12px}
    .simu-fiscalite .legendItem {padding:12px 14px;border-radius:14px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.08)}
    .simu-fiscalite .legendItem .k {opacity:.75;font-size:12px}
    .simu-fiscalite .legendItem .v {font-size:18px;font-weight:800;margin-top:4px}
    .simu-fiscalite .legendItem.isHoverable {cursor:pointer}
    .simu-fiscalite .legendItem.isHoverable:hover {border-color:rgba(255,255,255,.18);background:rgba(255,255,255,.06)}


  .simu-fiscalite /* --- Top actions --- */
  .topRow {display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
  .simu-fiscalite .topActions {display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}
  @media (max-width: 720px){.simu-fiscalite .topRow {flex-direction:column}.simu-fiscalite .topActions {width:100%;justify-content:flex-start}}

  .simu-fiscalite /* --- Centrage visuels --- */
  .vizGrid {display:grid;grid-template-columns: 340px minmax(0, 760px);gap:22px;align-items:center;justify-content:center;justify-items:center}
  .simu-fiscalite .vizGrid > div:nth-child(2) {width:100%;max-width:760px}
  @media (max-width: 860px){.simu-fiscalite .vizGrid {grid-template-columns:1fr}}

    .simu-fiscalite /* --- Visualisation TMI --- */
  .tmiWrap {display:grid;grid-template-columns: 320px 1fr;gap:24px;align-items:center;justify-content:center}
  @media (max-width: 980px){.simu-fiscalite .tmiWrap {grid-template-columns:1fr}}
  .simu-fiscalite .tmiBar {
    height:460px;width:300px;border-radius:18px;overflow:hidden;
    border:1px solid rgba(255,255,255,0.10);
    background:rgba(255,255,255,0.03);
    position:relative;margin:0 auto;
    display:flex;flex-direction:column-reverse; /* TOP=0%  -> BOTTOM=haut taux */
  }
  .simu-fiscalite .tmiSeg {
    position:relative;
    width:100%;
    border-bottom:1px dashed rgba(255,255,255,0.12);
    display:flex;align-items:center;justify-content:center;
    font-weight:800;letter-spacing:.2px;
  }
  .simu-fiscalite .tmiSeg[data-rate="45"] { background: var(--tmi-45) !important; }
  .simu-fiscalite .tmiSeg[data-rate="41"] { background: var(--tmi-41) !important; }
  .simu-fiscalite .tmiSeg[data-rate="30"] { background: var(--tmi-30) !important; }
  .simu-fiscalite .tmiSeg[data-rate="11"] { background: var(--tmi-11) !important; }
  .simu-fiscalite .tmiSeg[data-rate="0"] { background: var(--tmi-0)  !important; }
  .simu-fiscalite .tmiSeg:nth-child(odd) { filter: brightness(1.03); }
  .simu-fiscalite .tmiRate {position:absolute;right:12px;bottom:12px;font-size:18px;opacity:.9}
  .simu-fiscalite .tmiBounds {position:absolute;left:12px;bottom:12px;font-size:18px;opacity:.75}
  .simu-fiscalite .tmiTranche {position:absolute;left:92px;bottom:12px;font-size:13px;opacity:.65}

  .simu-fiscalite .tmiMarker {
    position:absolute;left:0;right:0;height:3px;
    background:rgba(245,158,11,0.95);
    box-shadow:0 0 0 1px rgba(0,0,0,0.35);
  }
.simu-fiscalite .tmiMarkerLabel {
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  background:none;
  box-shadow:none;
  padding:0;
  pointer-events:none;
}

  .simu-fiscalite .tmiMarkerSub {
    display:block;
    font-weight:800;
    margin-top:6px;
    background:rgba(0,0,0,0.18);
    padding:6px 10px;border-radius:10px;
    color:#0b0f18;
  }
  .simu-fiscalite .tmiKpis {display:grid;grid-template-columns:1fr 1fr;gap:12px;max-width:520px}
  @media (max-width: 980px){.simu-fiscalite .tmiKpis {grid-template-columns:1fr}}
  .simu-fiscalite .kpiBox {background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.10);border-radius:16px;padding:14px}
  .simu-fiscalite .kpiBox .lab {color:rgba(255,255,255,0.70);font-size:12px}
  .simu-fiscalite .kpiBox .val {font-size:22px;font-weight:800;margin-top:6px}
  .simu-fiscalite .tmi-qf-badge {
  width: 70%;
  max-width: 220px;
  margin: 0 auto;
  left: 50%;
  transform: translateX(-50%);
}


.simu-fiscalite /* Tooltip camembert (Pression fiscale) */
.donutTip {
  position: fixed;
  z-index: 2147483647;
  pointer-events: none;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(8,10,15,.92);
  backdrop-filter: blur(10px);
  box-shadow: 0 18px 40px rgba(0,0,0,.55);
  color: rgba(255,255,255,.92);
  font-size: 13px;
  line-height: 1.25;
  max-width: 260px;
  opacity: 0;
  visibility: hidden;
  transform: translate3d(0,0,0);
  transition: opacity .08s ease;
}

.simu-fiscalite .donutTip b {display:block;color:#fff;margin-bottom:4px}
.simu-fiscalite .donutTip .mut {color: rgba(255,255,255,.70)}

.simu-fiscalite .dot {
  width: 14px;
  height: 14px;
  border-radius: 4px;
  display: inline-block;
  opacity: 0.95;
  cursor: pointer;
  pointer-events: auto;
}

.simu-fiscalite /* Couleurs alignées avec le camembert */
.dot-ir {
  background: #ef4444; /* rouge IR */
}

.simu-fiscalite .dot-ps {
  background: #facc15; /* jaune PS */
}
.simu-fiscalite .dot-net {
  background: #474d54ff; /* gris foncé = part "reste à vivre" */
}

.simu-fiscalite /* Fix espacement cartes (évite chevauchement / collage) */
.card {
  background:rgba(11,15,20,0.75);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:18px;
  padding:20px;
  margin:18px 0;
  display:block;
  position:relative;
  clear:both;
}
.simu-fiscalite #vizCard {margin-top:18px;}
.simu-fiscalite #tmiCard {margin-top:18px;}
.simu-fiscalite #resumeBlock {padding-bottom:6px;}



/* ===== CSS extrait de simulateur_epargne.php (scopé .simu-epargne) ===== */
.simu-epargne .export-pdf-btn {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 2147483647;
    pointer-events: auto;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(11,15,20,0.85);
    color: #fff;
    cursor: pointer;
    font-weight: 700;
    box-shadow: 0 12px 30px rgba(0,0,0,.35);
    backdrop-filter: blur(10px);
  }
  .simu-epargne .export-pdf-btn:hover { transform: translateY(-1px); }



/* ===== CSS extrait de capacite.php (scopé .simu-capacite) ===== */
.simu-capacite /* Petits compléments spécifiques à cette page (le gros du thème reste dans styles.css) */
    .kpis {display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:0 0 14px;}
    @media (max-width: 1100px){.simu-capacite .kpis {grid-template-columns:1fr;}}
    .simu-capacite .kpi .big {font-size:34px;font-weight:800;letter-spacing:.2px;margin-top:6px}
    .simu-capacite .kpi .small {color:var(--muted);margin-top:6px;line-height:1.35}
    .simu-capacite .help {color:var(--muted);font-size:14px;margin-top:10px;line-height:1.45}
    .simu-capacite .grid2 {display:grid;grid-template-columns: 440px 1fr;gap:18px;align-items:start}
    @media (max-width: 1100px){.simu-capacite .grid2 {grid-template-columns:1fr;}}
    .simu-capacite .card {background:rgba(255,255,255,.05);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow)}
    .simu-capacite .cardHead {display:flex;align-items:center;justify-content:space-between;padding:18px 18px 12px}
    .simu-capacite .cardHead h2 {margin:0;font-size:20px}
    .simu-capacite .pill {display:inline-flex;align-items:center;gap:8px;border:1px solid rgba(239,68,68,.35);background:rgba(239,68,68,.10);color:#ffd7d7;padding:7px 12px;border-radius:999px;font-size:13px}
    .simu-capacite .pad {padding:0 18px 18px}
    .simu-capacite .formGrid {display:grid;grid-template-columns:1fr 1fr;gap:14px}
    @media (max-width: 520px){.simu-capacite .formGrid {grid-template-columns:1fr;}}
    .simu-capacite label {display:block;color:var(--muted);font-size:13px;margin:0 0 6px}
    .simu-capacite input[type="number"], .simu-capacite input[type="text"] {
      width:100%;
      background:rgba(11,15,20,0.55);
      border:1px solid rgba(255,255,255,.10);
      color:var(--text);
      border-radius:14px;
      padding:14px 14px;
      outline:none;
      font-size:18px;
    }
    .simu-capacite input[type="number"]:focus, .simu-capacite input[type="text"]:focus {
      border-color: rgba(239,68,68,.45);
      box-shadow: 0 0 0 4px rgba(239,68,68,.12);
    }
    .simu-capacite .rangeRow {display:flex;align-items:center;gap:12px}
    .simu-capacite input[type="range"] {width:100%}
    .simu-capacite .rangeBadge {min-width:74px;text-align:center;border:1px solid rgba(255,255,255,.12);background:rgba(0,0,0,.20);padding:8px 10px;border-radius:999px}
    .simu-capacite .btnRow {display:flex;gap:12px;margin-top:14px;flex-wrap:wrap}
    .simu-capacite .btn {display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:14px;padding:12px 14px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06);color:var(--text);text-decoration:none;cursor:pointer}
    .simu-capacite .btn:hover {background:rgba(255,255,255,.09)}
    .simu-capacite .btnOk {border-color:rgba(34,197,94,.35);background:rgba(34,197,94,.10)}
    .simu-capacite .btnOk:hover {background:rgba(34,197,94,.16)}
    .simu-capacite .btnDanger {border-color:rgba(239,68,68,.35);background:rgba(239,68,68,.10)}
    .simu-capacite .btnDanger:hover {background:rgba(239,68,68,.16)}
    .simu-capacite .chartWrap {height:260px}
    .simu-capacite canvas {width:100%!important;height:100%!important}
    .simu-capacite .subtitle {color:var(--muted);margin-top:6px;line-height:1.45}
    .simu-capacite .footerNote {margin-top:14px;color:var(--muted);font-size:13px}



/* ===== CSS extrait de simulateur_donation.php (scopé .simu-donation) ===== */
.simu-donation .export-pdf-btn {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 9999;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(11,15,20,0.85);
    color: #fff;
    cursor: pointer;
    font-weight: 700;
    box-shadow: 0 12px 30px rgba(0,0,0,.35);
    backdrop-filter: blur(10px);
  }
  .simu-donation .export-pdf-btn:hover { transform: translateY(-1px); }



/* ===== CSS extrait de simulateur_plusvalue_immo.php (scopé .simu-plusvalue) ===== */
.simu-plusvalue .container {max-width:1200px;margin:0 auto;padding:24px}
    .simu-plusvalue .topRow {
      display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
      margin-bottom:18px
    }
    .simu-plusvalue h1 {margin:0;font-size:30px;letter-spacing:.2px}
    .simu-plusvalue .subtitle {margin-top:6px;color:var(--muted);font-size:14.5px;line-height:1.35}
    .simu-plusvalue .cfbtnRow {display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}
    .simu-plusvalue .cfbtn {
      border:1px solid var(--stroke);
      background: rgba(255,255,255,.06);
      color:var(--text);
      padding:10px 12px;
      border-radius:14px;
      cursor:pointer;
      box-shadow: var(--inner);
      font-weight:650;
      font-size:13px;
      display:inline-flex;align-items:center;gap:8px;
      user-select:none;
    }
    .simu-plusvalue .cfbtn:hover {background: rgba(255,255,255,.09)}
    .simu-plusvalue .cfbtn:active {transform: translateY(1px)}
    .simu-plusvalue .cfbtnAccent {
      border-color: rgba(245,158,11,.35);
      background: rgba(245,158,11,.12);
    }

    .simu-plusvalue .card {
      border:1px solid var(--stroke);
      background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.04));
      border-radius: var(--radius);
      box-shadow: var(--shadow), var(--inner);
      overflow:hidden;
    }

    .simu-plusvalue .grid2 {display:grid;grid-template-columns:1.2fr .8fr;gap:18px}
    @media(max-width:980px){.simu-plusvalue .grid2 {grid-template-columns:1fr}}

    .simu-plusvalue .sectionTitle {
      padding:18px 18px 10px;
      font-weight:800;
      font-size:18px;
      letter-spacing:.2px;
    }

    .simu-plusvalue .formGrid {
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap:14px 14px;
      padding: 0 18px 18px;
    }
    @media(max-width:740px){.simu-plusvalue .formGrid {grid-template-columns:1fr}}

    .simu-plusvalue .field label {
      display:block;
      color:var(--muted);
      font-size:12.8px;
      margin:0 0 7px;
    }
    .simu-plusvalue .field input, .simu-plusvalue .field select {
      width:100%;
      padding:12px 14px;
      border-radius:16px;
      border:1px solid var(--stroke);
      background: rgba(0,0,0,.18);
      color:var(--text);
      outline:none;
      box-shadow: var(--inner);
      font-size:14.5px;
    }
    .simu-plusvalue .field input:focus, .simu-plusvalue .field select:focus {
      border-color: rgba(245,158,11,.35);
      box-shadow: 0 0 0 4px rgba(245,158,11,.08), var(--inner);
    }
    .simu-plusvalue .field select { color-scheme: dark; }
    .simu-plusvalue .inline2 {display:flex;gap:10px}
    .simu-plusvalue .inline2 > * {flex:1}

    .simu-plusvalue .note {
      padding:0 18px 16px;
      color: rgba(232,237,246,.66);
      font-size:12.8px;
      line-height:1.35;
    }

    .simu-plusvalue .summaryWrap {padding:18px}
    .simu-plusvalue .kpiGrid {
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap:12px;
    }
    @media(max-width:980px){.simu-plusvalue .kpiGrid {grid-template-columns:1fr 1fr}}
    @media(max-width:520px){.simu-plusvalue .kpiGrid {grid-template-columns:1fr}}

    
    .simu-plusvalue .kpis {
      display:grid;
      grid-template-columns: repeat(4, 1fr);
      gap:12px;
    }
    @media(max-width:1100px){.simu-plusvalue .kpis {grid-template-columns:1fr 1fr}}
    @media(max-width:520px){.simu-plusvalue .kpis {grid-template-columns:1fr}}
.simu-plusvalue .kpi {
      border:1px solid var(--stroke);
      background: rgba(255,255,255,.07);
      border-radius:18px;
      padding:14px 14px 12px;
      box-shadow: var(--inner);
    }
    .simu-plusvalue .kpi .label {color:var(--muted);font-size:12.5px;margin-bottom:6px}
    .simu-plusvalue .kpi .value {font-size:22px;font-weight:900;letter-spacing:.2px}
    .simu-plusvalue .kpi .sub {margin-top:6px;color:rgba(232,237,246,.62);font-size:12.5px}

    .simu-plusvalue .value.good {color:var(--good)}
    .simu-plusvalue .value.bad {color:var(--bad)}
    .simu-plusvalue .value.accent {color:var(--accent)}

    .simu-plusvalue .chartBox {
      margin-top:14px;
      border:1px solid var(--stroke);
      background: rgba(255,255,255,.07);
      border-radius:18px;
      padding:14px;
      box-shadow: var(--inner);
    }
    .simu-plusvalue .bar {
      height:18px;
      border-radius:999px;
      overflow:hidden;
      border:1px solid rgba(255,255,255,.08);
      background: rgba(0,0,0,.25);
      display:flex;
    }
    .simu-plusvalue .seg {height:100%}
    .simu-plusvalue .seg.loan {background: rgba(59,130,246,.55)}
    .simu-plusvalue .seg.chg {background: rgba(255,255,255,.18)}
    .simu-plusvalue .seg.tax {background: rgba(245,158,11,.60)}
    .simu-plusvalue .seg.cf {background: rgba(34,197,94,.55)}
    .simu-plusvalue .seg.neg {background: rgba(239,68,68,.55)}

    .simu-plusvalue .legend {
      display:flex;gap:12px;flex-wrap:wrap;margin-top:10px;color:rgba(232,237,246,.72);font-size:12.5px
    }
    .simu-plusvalue .dot {width:10px;height:10px;border-radius:999px;display:inline-block;margin-right:7px;vertical-align:middle}
    .simu-plusvalue .dot.loan {background: rgba(59,130,246,.7)}
    .simu-plusvalue .dot.chg {background: rgba(255,255,255,.25)}
    .simu-plusvalue .dot.tax {background: rgba(245,158,11,.75)}
    .simu-plusvalue .dot.cf {background: rgba(34,197,94,.7)}
    .simu-plusvalue .dot.neg {background: rgba(239,68,68,.7)}

    .simu-plusvalue .hr {height:1px;background: rgba(255,255,255,.07);margin:14px 0}

    .simu-plusvalue .smallRow {
      display:flex;gap:12px;flex-wrap:wrap;justify-content:space-between;
      color:rgba(232,237,246,.72);font-size:12.8px
    }
    .simu-plusvalue .pill {
      border:1px solid rgba(255,255,255,.10);
      background: rgba(255,255,255,.07);
      border-radius:999px;
      padding:8px 10px;
      box-shadow: var(--inner);
    }
    
  
.simu-plusvalue /* ====== Plus-value immo additions ====== */
.badge {
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 12px; border-radius:999px;
  border:1px solid var(--stroke);
  background: rgba(255,255,255,.07);
  color: var(--muted);
  font-size:13px;
}
.simu-plusvalue .badge strong { color: var(--text); font-weight:800; }
.simu-plusvalue details.expert {
  border:1px solid var(--stroke);
  border-radius: var(--radius);
  background: rgba(255,255,255,.07);
  padding: 12px 14px;
}
.simu-plusvalue details.expert summary {
  cursor:pointer;
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  font-weight:800;
  color: var(--text);
}
.simu-plusvalue details.expert summary::-webkit-details-marker { display:none; }
.simu-plusvalue details.expert .hint { color: var(--muted); font-weight:600; font-size:13px; }
.simu-plusvalue .noteLaw {
  margin-top:10px;
  border-left:3px solid rgba(245,158,11,.8);
  padding:10px 12px;
  background: rgba(245,158,11,.08);
  border-radius:14px;
  color: rgba(232,237,246,.82);
  font-size:13px;
  line-height:1.35;
}
.simu-plusvalue .noteLaw a { color: rgba(251,191,36,.98); text-decoration:none; font-weight:800; }
.simu-plusvalue .noteLaw a:hover { text-decoration:underline; }
.simu-plusvalue .small { font-size:12px; color: var(--muted); }
.simu-plusvalue .table th { white-space:nowrap; }
  
    .simu-plusvalue .details summary {
      cursor:pointer;
      font-weight:700;
      color: var(--text);
      padding:10px 12px;
      border:1px solid rgba(255,255,255,.14);
      border-radius:12px;
      background: rgba(255,255,255,.07);
      list-style:none;
    }
    .simu-plusvalue .details[open] summary {background: rgba(255,255,255,.08);}
    .simu-plusvalue .details summary::-webkit-details-marker {display:none;}
    .simu-plusvalue .tbl {
      width:100%;
      border-collapse:collapse;
      font-size:13px;
    }
    .simu-plusvalue .tbl th, .simu-plusvalue .tbl td {
      padding:10px 10px;
      border-bottom:1px solid rgba(255,255,255,.12);
      text-align:left;
      white-space:nowrap;
    }
    .simu-plusvalue .tbl thead th {
      position:sticky;
      top:0;
      background: rgba(0,0,0,.18);
      backdrop-filter: blur(6px);
      font-weight:800;
    }
  .simu-plusvalue /* --- Fix chevauchement header (pills vs boutons) --- */
.hero {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
}
.simu-plusvalue .hero > div:first-child {
  flex:1 1 420px;
  min-width:280px;
}
.simu-plusvalue .hero-actions {
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
  align-items:center;
}
.simu-plusvalue .pillrow {
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:10px;
}
.simu-plusvalue /* Evite que les pills collent au bloc suivant */
.pillrow {
  margin-bottom: 14px;
}


/* ============================================================
   TOPBAR — styles communs (dark par défaut)
   ============================================================ */
.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:14px;
  padding:10px 14px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:14px;
  background: rgba(255,255,255,.07);
  flex-wrap:wrap;
}
.topbar-left{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}
.topbar-right{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.topbar .user{font-size:12px;color:#9ca3af;font-weight:700;}
.topbar .logout{font-size:12px;color:#fca5a5;text-decoration:none;font-weight:800;}
.topbar .logout:hover{text-decoration:underline;}
.client-wrap{display:flex;align-items:center;gap:6px;}
.client-wrap label{margin:0;font-size:12px;color:#9ca3af;white-space:nowrap;}
.client-wrap input{width:120px;padding:6px 8px;font-size:12px;}

/* ── Bouton toggle thème ── */
.btn-theme-toggle{
  padding:7px 12px !important;
  font-size:12px !important;
  font-weight:700 !important;
  border-radius:10px !important;
  white-space:nowrap;
  background: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  color: var(--text) !important;
  cursor:pointer;
  transition: background .15s ease, border-color .15s ease;
}
.btn-theme-toggle:hover{
  background: rgba(255,255,255,.15) !important;
  border-color: rgba(255,255,255,.28) !important;
}

/* ── Bouton déconnexion topbar ── */
.btn-logout {
  font-size: 12px !important;
  font-weight: 800 !important;
  padding: 7px 12px !important;
  border-radius: 10px !important;
  color: #fca5a5 !important;
  border: 1px solid rgba(239,68,68,.30) !important;
  background: rgba(239,68,68,.08) !important;
  text-decoration: none;
  white-space: nowrap;
}
.btn-logout:hover {
  background: rgba(239,68,68,.18) !important;
  border-color: rgba(239,68,68,.50) !important;
  color: #fca5a5 !important;
}
.resume-dispositif {
    margin-top: 16px;
    padding: 14px 16px;
    border-radius: 12px;
    background: var(--card-bg, rgba(255,255,255,0.04));
    color: var(--text-color, #fff);
    border: 1px solid var(--border-color, rgba(255,255,255,0.08));
    line-height: 1.55;
    font-size: 14px;
}

.resume-dispositif strong {
    color: var(--text-color, #fff);
    display: block;
    margin-bottom: 4px;
}
.field.full{
  grid-column: 1 / -1;
}