:root{
      --brand:#22c55e; --ink:#0f172a; --bg:#f7f9fb; --card:#ffffff; --muted:#64748b;
      --bd:rgba(2,6,23,.10); --bd-2:rgba(2,6,23,.16);
      --shadow:0 10px 30px rgba(2,6,23,.06);
      --radius:14px; --radius-lg:18px;
      --ok:#22c55e; --info:#0ea5e9; --warn:#f59e0b; --danger:#ef4444;
    }
    html[data-app-theme="med"]{ --brand:#22c55e; --bg:#f6fbf7; --card:#fff; --ink:#0b1220; --muted:#6b7280; }
    html[data-app-theme="light"]{ --brand:#0ea5e9; --bg:#f8fafc; --card:#fff; --ink:#0b1220; --muted:#6b7280; }
    html[data-app-theme="dark"]{ --brand:#22c55e; --bg:#0b1220; --card:#0f172a; --ink:#e5e7eb; --muted:#94a3b8; --bd:rgba(148,163,184,.22); --bd-2:rgba(148,163,184,.30); --shadow:0 8px 30px rgba(0,0,0,.35); }

    html, body { height: 100%; }
    body{ background:var(--bg); color:var(--ink); -webkit-font-smoothing:antialiased; }

    .navbar-soft{ backdrop-filter: blur(8px); border-bottom:1px solid var(--bd); background: color-mix(in srgb, var(--card) 70%, transparent) }
    .brand-dot{ width:34px;height:34px; display:grid; place-items:center; border-radius:10px;
      background:linear-gradient(135deg,var(--brand),color-mix(in srgb,var(--brand) 30%, #000 70%)); color:#fff }

    .surface{ background:var(--card); border:1px solid var(--bd); border-radius:var(--radius-lg); box-shadow:var(--shadow) }
    .card-soft{ background:var(--card); border:1px solid var(--bd); border-radius:var(--radius); transition:.15s }
    .card-soft:hover{ border-color:var(--bd-2); transform: translateY(-1px) }

    .sidebar{ position:sticky; top:1rem }
    .list-flush .list-group-item{ background:transparent; border-color:var(--bd) }
    .btn-brand{
      --bs-btn-bg:var(--brand); --bs-btn-border-color:var(--brand);
      --bs-btn-hover-bg:color-mix(in srgb,var(--brand) 80%, #000 20%);
      --bs-btn-hover-border-color:color-mix(in srgb,var(--brand) 80%, #000 20%);
    }
    .btn-ghost{ background:transparent; border:1px solid var(--bd) }
    .text-muted{ color:var(--muted)!important }

    /* ===== BOTTOM DOCK (progress + quicknav) — FIXED sans recouvrement ===== */
    .bottom-dock{
      position: fixed; left: 0; right: 0; bottom: 0; z-index: 1020;
      background: color-mix(in srgb, var(--card) 92%, transparent);
      border-top: 1px solid var(--bd);
      box-shadow: 0 -8px 24px rgba(2,6,23,.06);
    }
    .bottom-dock .dock-inner{ max-width: 1020px; margin: 0 auto; padding: .5rem .75rem; }
    .bottom-progress .progress{ height: 10px; border-radius: 9999px; overflow: hidden; }
    .quicknav .btn{ border-color: var(--bd); }

    /* Quicknav visible surtout en mobile */
    @media (max-width: 991.98px){ .quicknav { display:block; } }
    @media (min-width: 992px){ .quicknav { display:flex; justify-content:flex-end; } .quicknav .btn{ margin-left:.5rem; } }

    /* On supprime l’ancienne sticky mobile progress dans l’en-tête */
    @media (max-width: 991.98px){ .surface .progress { display:none !important; } }

    /* Réserve l’espace en bas pour ne jamais recouvrir le contenu */
    body.has-bottom-dock{ padding-bottom: 98px; } /* ≈ hauteur dock; ajustée via JS au chargement */
	
	/* Effet hover pour les boutons fantômes */
	.btn-ghost:hover{
	  background:color-mix(in srgb,var(--card) 80%, var(--brand) 20%);
	  border-color:var(--bd-2);
	}

	/* Offcanvas (menu latéral mobile) en thème applicatif */
	.offcanvas-soft{
	  background:var(--card);
	  color:var(--ink);
	}


	/* Largeur max du container serré */
	/*
	@media (min-width: 992px){
	  .container-tight{ max-width:1020px; }
	}
	*/

	/* Cartes mobiles + bascule tableau / cartes */
	.card-mobile{
	  border:1px solid var(--bd);
	  border-radius:var(--radius);
	  background:var(--card);
	}
	
	/*
	@media (min-width: 992px){
	  .only-lg-table{ display:block; }
	  .only-sm-cards{ display:none; }
	}
	@media (max-width: 991.98px){
	  .only-lg-table{ display:none; }
	  .only-sm-cards{ display:block; }
	}
	*/
	
	
	
	
	
	
	/* Empêcher tout débordement horizontal en mobile */
	/* Empêcher tout débordement horizontal en mobile */
	/* Empêcher tout débordement horizontal en mobile */
	html, body {
	  max-width: 100%;
	  overflow-x: hidden;
	}

	/* S'assurer que rien au bas ne dépasse */
	.bottom-dock,
	.bottom-dock .dock-inner,
	.container-tight {
	  width: 100%;
	  box-sizing: border-box;
	}

	/* S'assurer que le contenu principal + dock ne dépassent jamais la largeur */
	/*
	.container-tight,
	.row,
	.col-lg-3,
	.col-lg-9,
	.bottom-dock,
	.bottom-dock .dock-inner {
	  max-width: 100%;
	  box-sizing: border-box;
	}
	*/

	/* Sécuriser les SVG des visualisations pour qu'ils restent dans l'écran */
	svg {
	  max-width: 100%;
	  height: auto;
	  display: block;
	}

	/* Empêcher tout débordement horizontal en mobile */
	/* Empêcher tout débordement horizontal en mobile */
	/* Empêcher tout débordement horizontal en mobile */


	#sec-sortie {
	  margin-bottom: 2rem;
	}
	



	  .card-mobile{
		border:1px solid rgba(2,6,23,.12);
		border-radius:12px;
	  }

	  /* Par défaut : rien, JS va mettre .view-table ou .view-cards sur <body> */


	/*
	  #sec-liste .only-lg-table,
	  #sec-liste .only-sm-cards{
		display:none;
	  }

	  body.view-table #sec-liste .only-lg-table{
		display:block;
	  }

	  body.view-cards #sec-liste .only-sm-cards{
		display:block;
	  }
	  */