body {
  font-family: 'Inter', sans-serif;
  background-color: var(--agile-bg);
  margin: 0;
  padding: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Si le mode review est actif : on met la loupe (sauf exclusions) */
body.review-mode-on .klx-card:not(.no-zoom),
body.review-mode-on .table-box:not(.no-zoom):not(#epic-table-container),
body.review-mode-on .chart-box:not(.no-zoom) {
  cursor: zoom-in;
}

/* --- Overlay (Fond sombre) --- */
.agile-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  /* Assombrissement léger */
  backdrop-filter: blur(2px);
  /* Effet moderne */
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* --- Conteneur de la Modale --- */
.agile-modal-container {
  background-color: var(--agile-white);
  width: 100%;
  width: 70%;
  /* Largeur demandée */
  height: 80%;
  /* Hauteur demandée */
  max-width: none;
  /* On supprime la limite de 500px */
  border-radius: 12px;
  /* Coins arrondis comme les cartes */
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
  /* Ombre portée douce */
  overflow: hidden;
  animation: slideDown 0.3s ease-out;
  border: 1px solid var(--agile-border);
  display: flex;
  flex-direction: column;
}

@keyframes slideDown {
  from {
    transform: translateY(-20px);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* --- Header --- */
.agile-modal-header {
  background-color: var(--agile-bg);
  padding: 20px 24px;
  border-bottom: 1px solid var(--agile-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
}


.agile-title {
  margin: 0;
  color: var(--agile-blue);
  font-size: 18px;
  font-weight: 600;
}

.big {
  font-size: 30px;
  font-weight: 600;
}

.agile-close-btn {
  background: none;
  border: none;
  font-size: 24px;
  color: var(--agile-text-soft);
  cursor: pointer;
}

/* --- Body --- */
.agile-modal-body {
  padding: 24px;
  flex: 1;
  overflow-y: hidden;
  display: flex;
  flex-direction: column;
  padding: 24px;
  gap: 15px;
}

.agile-form-group {
  margin-bottom: 20px;
}

/* Le DERNIER groupe (celui du textarea) doit prendre tout l'espace restant */
.agile-form-group:last-child {
  margin-bottom: 0;
  flex: 1;
  /* Magie Flexbox : prend tout l'espace vide restant */
  display: flex;
  /* Devient lui aussi un conteneur flex */
  flex-direction: column;
}

.agile-form-group label {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--agile-text-soft);
}

/* --- Inputs Stylisés (Comme les cartes blanches de la maquette) --- */
.agile-input {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--agile-border);
  border-radius: 8px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: var(--agile-text);
  background-color: var(--agile-white);
  box-sizing: border-box;
  /* Important pour le padding */
  transition: border-color 0.2s, box-shadow 0.2s;
}

.agile-input:focus {
  outline: none;
  border-color: var(--agile-blue);
  box-shadow: 0 0 0 3px rgba(30, 105, 190, 0.1);
}

/* Spécifique Select */
.agile-select {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%231E69BE%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-position: right 16px top 50%;
  background-size: 12px auto;
}

/* Conteneur de la table pour le scroll si nécessaire */
.agile-table-container {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  border: 1px solid var(--agile-border);
  border-radius: 8px;
  background-color: var(--agile-white);
}

.agile-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  table-layout: fixed;
}

.agile-table thead {
  /* Pour que l'entête reste visible lors du scroll */
  position: sticky;
  top: 0;
  z-index: 2;
}

.agile-table th {
  /* Entête: Style similaire à sidebar-title */
  background-color: var(--agile-sidebar-cat);
  /* Fond bleu clair */
  color: var(--agile-text-menu);
  font-weight: 600;
  padding: 12px 16px;
  border-bottom: 2px solid var(--agile-border);
  text-align: left;
}

.agile-table td {
  padding: 8px 16px;
  border-bottom: 1px solid #F1F5F9;
  /* Bordure très légère */
  color: var(--agile-text);
  vertical-align: middle;
}

.agile-table tr:last-child td {
  border-bottom: none;
}

.agile-table tbody tr:hover {
  background-color: #fcfcfc;
  /* Effet hover subtil */
}

/* Styles spécifiques pour les inputs dans le tableau */
.agile-table .agile-input {
  /* Réduction de la taille du padding pour les inputs de table */
  padding: 8px 10px;
  font-size: 13px;
}

/* Styles pour le bouton d'ajout dans la table */
.agile-table #btn-add-new-us {
  background: var(--agile-blue);
  color: white;
  padding: 5px 10px;
  border-radius: 6px;
}

.agile-table #btn-add-new-us:hover {
  opacity: 0.9;
}

/* --- STYLES DU NOUVEAU FORMULAIRE D'AJOUT (Correction Définitive) --- */

.add-us-form-area {
  /* Le padding était de 10px. On le maintient. */
  padding: 10px;
  border: 1px solid var(--agile-border);
  border-radius: 8px;
  background-color: var(--agile-bg);
  flex-shrink: 0;
}

.agile-us-input-row {
  display: flex;
  gap: 8px;
  /* Réduction de la marge entre les éléments à 8px */
  align-items: center;
  width: 100%;
}

/* Styles des inputs dans la ligne d'ajout */
.agile-us-input-row .agile-input {
  padding: 6px 8px;
  /* Réduction du padding interne (Très important) */
  font-size: 13px;
  box-sizing: border-box;
  min-height: 36px;
  /* Hauteur minimale pour les inputs */
}

.agile-us-input-row .us-description-input {
  flex-grow: 1;
  /* Prend tout l'espace restant */
  flex-basis: 50%;
  /* Commence avec au moins 50% de la largeur */
  min-width: 100px;
}

.agile-us-input-row .us-points-input {
  width: 50px;
  /* Réduit à 50px pour les points */
  flex-shrink: 0;
  /* Ne se contracte pas, garde 50px */
  text-align: center;
}

.agile-us-input-row .us-jira-input {
  width: 100px;
  /* Réduit à 100px pour le ticket Jira */
  flex-shrink: 0;
  /* Ne se contracte pas, garde 100px */
}

.agile-us-input-row .btn-add-us {
  padding: 6px 10px;
  /* Réduction du padding du bouton */
  display: flex;
  align-items: center;
  gap: 4px;
  /* Réduction de la marge interne du bouton */
  flex-shrink: 0;
  font-size: 13px;
}

/* Spécifique Textarea */
.agile-textarea {
  resize: none;
  /* Empêche le redimensionnement manuel qui casserait le layout */
  flex: 1;
  /* Remplit toute la hauteur du .agile-form-group parent */
  min-height: 100px;
  /* Garde une hauteur minimale de sécurité */
}

/* --- Footer --- */
.agile-modal-footer {
  padding: 16px 24px;
  background-color: var(--agile-bg);
  border-top: 1px solid var(--agile-border);
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

/* --- Boutons --- */
.agile-btn {
  padding: 10px 20px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  border: none;
  font-family: 'Inter', sans-serif;
}

.agile-btn-secondary {
  background-color: transparent;
  color: var(--agile-text-soft);
  border: 1px solid transparent;
}

.agile-btn-secondary:hover {
  background-color: #eef4ff;
  color: var(--agile-blue);
}

.agile-btn-primary {
  background-color: var(--agile-blue);
  color: white;
  box-shadow: 0 2px 4px rgba(30, 105, 190, 0.3);
}

.agile-btn-primary:hover {
  background-color: #16569e;
}

.agile-btn-third {
  font-size: 12px;
  padding: 6px 12px;
  cursor: pointer;
  border-radius: 4px;
  border: 1px solid #ddd;
  background: #f9f9f9;
}

.agile-btn-delete {
  color: rgb(239, 68, 68);
  border-color: rgb(239, 68, 68);
  display: block;
}

.agile-btn-red {
  background-color: var(--agile-red);
  color: var(--agile-white);
  border-color: var(--agile-red);
  /* rgb(239, 68, 68);*/
  box-shadow: 0 2px 4px rgba(190, 30, 51, 0.3);
  display: block;
}





/* --- VARIABLES GLOBALES (Rappel pour cohérence) --- */
:root {
  --agile-blue: #1E69BE;
  /* Fond Header */
  --agile-bg: #F7FAFE;
  /* Fond Page */
  --agile-border: #DBE3ED;
  /* Bordures */
  --agile-sidebar-cat: #E3EDFE;
  /* Fond Titre Catégorie */
  --agile-text-menu: #101642;
  /* Couleur Texte Menu */
  --agile-text: #000000;
  /* Texte Noir */
  --agile-text-grey: #7D8E9B;
  /* Texte Gris (dates, métriques) */
  --agile-white: #FFFFFF;
  --agile-red: rgb(239, 68, 68);

  --agile-MVP: rgb(241, 48, 138);
  --agile-SHOULD: rgb(255, 174, 0);
  --agile-COULD: rgb(255, 251, 0);
  --agile-WOULD: rgba(145, 255, 0, 0.555);
  --agile-NEVER: rgb(255, 255, 255);
}



/* 1. HEADER (Corrige : Fond Bleu, Texte Blanc) */
.app-header {
  height: 60px;
  /* Un peu plus fin selon maquette */
  background-color: var(--agile-bg);
  /* BLEU MAQUETTE */
  border-bottom: 1px solid var(--agile-bg);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 24px;
  flex-shrink: 0;
  color: var(--agile-text-menu);
  /*box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);*/
}

.header-title {
  color: var(--agile-text-menu);
  font-size: 30px;
  font-weight: 600;
  letter-spacing: 0.5px;
}

/* Bouton "Sauvegarder" dans le Header (Style adapté au fond bleu) */
#global-save-btn {
  background-color: rgba(255, 255, 255, 0.2);
  /* Translucide */
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: var(--agile-white);
  font-size: 14px;
  padding: 8px 16px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: background 0.2s;
}

#global-save-btn:hover {
  background-color: rgba(255, 255, 255, 0.3);
}

/* CONTAINER PRINCIPAL */
.app-container {
  display: flex;
  flex: 1;
  overflow: hidden;
}

/* 2. SIDEBAR (GAUCHE) */
.sidebar {
  width: 260px;
  background-color: var(--agile-bg);
  /*border-right: 1px solid var(--agile-border);*/
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  flex-shrink: 0;
}

.sidebar-section {
  margin-bottom: 24px;
}

/* Titres de section (Fond Bleu Clair, Texte Bleu Foncé) */
.sidebar-title {
  background-color: var(--agile-sidebar-cat);
  color: var(--agile-text-menu);
  padding: 8px 24px;
  font-size: 14px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: 0 50px 50px 0;
  /* Arrondi à droite comme sur maquette */
  margin-right: 20px;
  margin-bottom: 8px;
  font-size: 1.2em;
}

.sidebar-title svg {
  stroke-width: 2.5px;
}

/* Icônes un peu plus grasses */

/* Liens Sidebar */
.sidebar-action {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 24px;
  color: var(--agile-text);
  cursor: pointer;
  transition: color 0.2s;
  font-size: 14px;
  font-weight: 500;
}

.sidebar-action:hover {
  color: var(--agile-blue);
}

.sidebar-action svg {
  width: 18px;
  height: 18px;
  color: var(--agile-text-menu);
}

/* Selects dans la sidebar */
.sidebar-select-wrapper {
  padding: 5px 24px 10px 24px;
}

.agile-select-main {
  width: 100%;
  padding: 10px;
  border: 1px solid var(--agile-border);
  border-radius: 8px;
  font-family: 'Inter';
  font-size: 14px;
  color: var(--agile-text);
  background-color: var(--agile-white);
  box-sizing: border-box;
}

/* 3. MAIN CONTENT (DROITE) */
.main-content {
  flex: 1;
  background-color: var(--agile-bg);
  /* Fond très clair #F7FAFE */
  padding: 10px 20px;
  /* Plus d'espace */
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: relative;
}

.sprintInfo-container {
  background: var(--agile-white);
  border: 1px solid var(--agile-border);
  border-radius: 12px;
  padding: 20px 24px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.03);
  /* Couleur par défaut */
  transition: transform 0.2s;
}

.sprint-header-layout {
  display: flex;
  gap: 20px;
  align-items: stretch;
  /* Pour que les deux colonnes aient la même hauteur */

  background: var(--agile-white);
  border: 1px solid var(--agile-border);
  border-radius: 12px;
  padding: 20px 24px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.03);
  /* Couleur par défaut */
  transition: transform 0.2s;
  margin-bottom: 20px;
}

/* Colonne de gauche (Sélecteur + Stats) */
.sprint-col-left {
  display: flex;
  flex-direction: column;
  gap: 15px;
  width: 40%;
  /* Largeur fixe pour la partie gauche */
}

/* Colonne de droite (Objectif) */
.sprint-col-right {
  flex: 1;
  /* Prend tout l'espace restant */
  background: ghostwhite;
  border-radius: 20px;
  width: 100%;
  padding: 10px;
  font-size: 12px;
}

.sprint-goal-card {
  font-weight: bolder;
  font-size: 16px;
}

/* CARTE SPRINT (Infos en haut) */
.sprint-header-card {
  background: transparent;
  /* Pas de fond blanc selon maquette, ou très discret */
  border: none;
  padding: 0 0 10px 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.sprint-selector {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 10px;
  border: 1px solid var(--agile-border);
  border-radius: 8px;
  font-family: 'Inter';
  font-size: 8px;
  color: var(--agile-text);
  background-color: var(--agile-white);
  box-sizing: border-box;
}

/* Selecteur Sprint (Gros texte sans bordure) */
#sprint-select {
  font-size: 24px;
  font-weight: 700;
  color: var(--agile-text);
  border: none;
  padding: 0;
  cursor: pointer;
  outline: none;
  width: auto;
}

.sprint-dates {
  font-size: 14px;
  color: var(--agile-text-grey);
  display: flex;
  gap: 15px;
  font-weight: 500;
}

/* Métriques (Alignées à droite) */
.sprint-metrics {
  font-size: 13px;
  color: var(--agile-text-grey);
  /*text-align: right;*/
  /*line-height: 1.6;*/
}

/* CARTE OBJECTIF */
.objective-card {
  background: var(--agile-white);
  border: 1px solid var(--agile-border);
  border-radius: 12px;
  padding: 20px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.02);
}

.objective-text {
  width: 100%;
  border: none;
  font-size: 18px;
  /* Police 18pts comme maquette */
  font-family: 'Inter';
  outline: none;
  resize: none;
  color: var(--agile-text);
  font-weight: 500;
}

.objective-text::placeholder {
  color: #A0AEC0;
  font-style: italic;
}

/* BOUTON "+" CENTRAL */
.add-event-separator {
  display: flex;
  justify-content: center;
  position: relative;
  padding-bottom: 10px;
}

/* Ligne traversante
        .add-event-separator::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 0;
            right: 0;
            height: 1px;
            background-color: var(--agile-border);
            z-index: 0;
        }
        */

.btn-add-circle {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: var(--agile-border);
  /* Gris clair par défaut */
  border: 2px solid var(--agile-white);
  /* Contour blanc pour détacher de la ligne */
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
  z-index: 10;
}

.btn-add-circle svg {
  color: var(--agile-text-menu);
}

/* Couleur icône */

.btn-add-circle:hover {
  background-color: var(--agile-blue);
  transform: scale(1.1);
  box-shadow: 0 4px 10px rgba(30, 105, 190, 0.3);
}

.btn-add-circle:hover svg {
  color: white;
}

/* LISTE DES EVENTS (TIMELINE) */
.timeline-feed {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-bottom: 50px;
}

.event-card {
  background: var(--agile-white);
  border: 1px solid var(--agile-border);
  border-radius: 12px;
  padding: 20px 24px;
  position: relative;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.03);
  border-left: 6px solid #ccc;
  /* Couleur par défaut */
  transition: transform 0.2s;
}

.event-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

/* Couleurs bordures Event */
.event-card.type-daily {
  border-left-color: #3b82f6;
}

.event-card.type-retro {
  border-left-color: #10b981;
}

.event-card.type-review {
  border-left-color: #ff3b3b;
}

.event-card.type-poker {
  border-left-color: #33bfea;
}

.event-card.type-refinement {
  border-left-color: #fff455;
}

.event-date-badge {
  position: absolute;
  top: 20px;
  right: 20px;
  background: #F1F5F9;
  padding: 5px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--agile-text-grey);
}

.event-title {
  font-weight: 700;
  font-size: 16px;
  margin-bottom: 8px;
  color: var(--agile-text);
}

.event-body {
  color: #334155;
  font-size: 13px;
  /*line-height: 1.6;*/
  white-space: pre-wrap;
}

.tooltip-projet-container {
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  margin-left: 10px;
  z-index: 10;
  display: none;
  height: 34px;
}

.tooltip-projet-libelle {
  background-color: #ef4444;
  color: white;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 20px;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  position: relative;

  width: 200px;
  height: 50px;
  align-items: center;
  align-content: center;
  text-align: center;
}

.tooltip-projet-fleche {
  position: absolute;
  left: -15px;
  top: 50%;
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-right: 8px solid #ef4444;
  transform: translateY(-50%);
}

/* --- US Status Pills --- */
.us-pill {
  /* Styles de base pour la pilule */
  display: inline-block;
  padding: 3px 8px;
  border-radius: 9999px;
  /* Rend la pilule bien arrondie */
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  text-align: center;
  line-height: 1;
  white-space: nowrap;
  /* Empêche le texte de sauter à la ligne */
  border: 1px solid transparent;
}

.us-pill-done {
  /* Vert pour Terminé (1) */
  background-color: #D1FAE5;
  /* Vert très clair */
  color: #059669;
  /* Texte vert foncé */
  border-color: #10B981;
}

.us-pill-todo {
  /* Gris pour À Finaliser (0) */
  background-color: #F1F5F9;
  /* Gris clair */
  color: #64748B;
  /* Texte gris moyen */
  border-color: #CBD5E1;
}

/* S'assurer que le contenu de la cellule est centré */
.agile-table td.us-col-fait {
  text-align: center;
}



/****************************************/


.klx-section {
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 40px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.klx-controls {
  display: flex;
  gap: 20px;
  align-items: center;
  margin-bottom: 20px;
  background: #f9f9f9;
  padding: 15px;
  border-radius: 6px;
}

.klx-controls input[type="file"] {
  padding: 5px;
}

.klx-controls input[type="text"] {
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

#status-message {
  padding: 10px;
  border-radius: 4px;
  font-weight: bold;
  font-size: 0.9em;
}

.status-success {
  background: #d4edda;
  color: #155724;
}

.status-error {
  background: #f8d7da;
  color: #721c24;
}

.status-loading {
  background: #fff3cd;
  color: #856404;
}

#report-container {
  /*
  display: none;
*/
  margin-top: 20px;
}

/* Grille des KPI */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 30px;
}

.klx-card {
  background: white;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  text-align: center;
  border: 1px solid #e5e7eb;
  transition: all 0.2s;
}

.klx-card h3 {
  margin: 0 0 5px;
  font-size: 12px;
  font-weight: 600;
  color: #9ca3af;
  text-transform: uppercase;
}

.klx-card .number {
  font-size: 32px;
  font-weight: 800;
  color: #1f2937;
  margin: 10px 0;
}

.klx-card .description {
  font-size: 11px;
  color: #6b7280;
  font-style: italic;
  border-top: 1px solid #f3f4f6;
  padding-top: 8px;
  margin-top: 8px;
}

/* --- CORRECTION POUR LA CARTE VISION (Alignment + Style) --- */
.klx-card-vision-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Centre le bloc de nombres */
  position: relative;
}

.klx-card-vision-line {
  position: absolute;
  left: 0;
  top: 0;
  width: 4px;
  height: 100%;
  background-color: var(--accent-red);
  border-radius: 2px;
}

/* Le conteneur des nombres/labels doit être centré. */
.klx-card-vision-numbers {
  display: flex;
  flex-direction: column;
  /* Aligner les éléments à gauche dans ce bloc pour que les chiffres soient le plus à gauche */
  align-items: flex-start;
  position: relative;
  /* Ajout d'une marge à gauche pour laisser de la place à la barre rouge */
  padding-left: 15px;
}

.klx-card-vision-row {
  display: flex;
  align-items: center;
  /* Utiliser 'initial' ou 'auto' pour que la taille ne soit pas forcée */
  width: auto;
  /* Ajout de styles pour restaurer le gras et la taille */
  font-size: 28px;
  /* Taille pour les chiffres */
  font-weight: 800;
  /* Gras pour les chiffres */
  color: var(--text-dark);
  line-height: 1.5;
  /* Espacement entre les lignes Objectif/Epic */
}

.klx-card-vision-label {
  font-size: 13px;
  color: #9ca3af;
  margin-left: 10px;
  text-transform: uppercase;
  font-weight: 500;
  /* Le label doit être moins gras */
  /* Empêche le libellé de bouger avec le chiffre */
  white-space: nowrap;
}

/* Carte interactive (V18) */
.card-clickable {
  cursor: pointer;
  position: relative;
}

.card-clickable:hover {
  transform: translateY(-3px);
  border-color: #3b82f6;
  box-shadow: 0 5px 15px rgba(59, 130, 246, 0.1);
}

.card-active {
  border: 2px solid #3b82f6;
  background-color: #f0f7ff;
}

.charts-grid,
.charts-gridx3 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  margin-bottom: 30px;
}

.charts-gridx3 {
  grid-template-columns: 1fr 1fr 1fr;
}

.general-grid {
  display: grid;
  grid-template-columns: 29% 70%;
  gap: 30px;
  margin-bottom: 30px;
}

.chart-box {
  background: white;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  border: 1px solid #e5e7eb;
}

.table-box {
  background: white;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  border: 1px solid #e5e7eb;
  margin-bottom: 30px;
}

#epics-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 15px;
}

#epics-table th {
  text-align: left;
  font-size: 11px;
  text-transform: uppercase;
  border-bottom: 2px solid #eee;
  padding: 10px;
  background: #fafafa;
  color: #666;
}

#epics-table td {
  padding: 10px;
  border-bottom: 1px solid #eee;
  font-size: 13px;
}

.text-green {
  color: #059669;
}

.text-red {
  color: #dc2626;
}

.text-blue {
  color: #2563eb;
}

.progress-bg {
  background: #eee;
  height: 8px;
  border-radius: 4px;
  width: 100px;
  display: inline-block;
}

.progress-fill {
  background: #10b981;
  height: 100%;
  border-radius: 4px;
}

.epic-row:hover {
  background-color: #f8f9fa;
  cursor: pointer;
}

.us-details-row {
  display: none;
  background-color: #fcfcfc;
}




/*********************************************************************************************************/
/* Le conteneur principal type "Carte" */
.agile-analysis-card {
  background: var(--agile-white);
  border: 1px solid var(--agile-border);
  border-radius: 12px;
  padding: 25px;
  margin: 2em auto;
  max-width: 900px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

/* Alignement des dates */
.analysis-dates-row {
  display: flex;
  gap: 20px;
  justify-content: center;
  width: 100%;
}

.date-field {
  display: flex;
  align-items: center;
  gap: 10px;
}

.date-field label {
  font-weight: 600;
  color: var(--agile-text-menu);
  font-size: 14px;
}

.analysis_overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 99%;
  height: 100%;
  background: rgba(243, 244, 246, 0.98);
  z-index: 9999;
  overflow-y: auto;
  padding: 20px;
}

.analysis-header {
  text-align: center;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
}

/* LA LIGNE DES BOUTONS (Celle que vous vouliez) */
.analysis-buttons-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  width: 100%;
}

/* Le texte "ou" au milieu */
.analysis-or {
  font-style: italic;
  color: var(--agile-text-grey);
  font-weight: 500;
  position: relative;
  padding: 0 10px;
}

/* Optionnel : ajoute des petites lignes de séparation à côté du "ou" */
.analysis-or::before,
.analysis-or::after {
  content: "";
  display: inline-block;
  width: 30px;
  height: 1px;
  background: var(--agile-border);
  vertical-align: middle;
  margin: 0 10px;
}

/* L'option en bas */
.analysis-options-row {
  margin-top: 5px;
}

.agile-checkbox-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 13px;
  color: var(--agile-text-grey);
}

.agile-checkbox-wrapper input {
  accent-color: var(--agile-blue);
  width: 16px;
  height: 16px;
}

/* ==========================================================================
   GESTION DE L'IMPRESSION (CTRL+P)
   ========================================================================== */
/* --- Gestion de l'impression --- */
@media print {

  /* 1. ORIENTATION DE LA PAGE */
  /* Force le mode paysage uniquement pour la Storymap */
  body.storymap-open {
    @page { 
      size: landscape; 
      margin: 1cm;
    }
  }

  /* Force le mode portrait (par défaut) pour le Dashboard */
  body.dashboard-open {
    @page { 
      size: portrait; 
      margin: 1cm;
    }
  }

  /* 2. RESET GLOBAL ET ISOLATION */
  html,
  body {
    height: auto !important;
    overflow: visible !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    display: block !important;
    border: none !important;
  }

  .app-container,
  .app-header,
  .klx-dashboard-overlay,
  .klx-carto-overlay,
  .main-content {
    background: transparent !important;
  }

  /* 3. LOGIQUE D'EXCLUSION */
  /* Cache tout sauf l'élément actif */
  body.dashboard-open > *:not(#klx-dashboard-overlay) {
    display: none !important;
  }

  body.storymap-open > *:not(#klx-carto-overlay) {
    display: none !important;
  }

  /* 4. CONFIGURATION DES OVERLAYS (Dashboard ET Carto) */
  body.dashboard-open #klx-dashboard-overlay,
  body.storymap-open #klx-carto-overlay {
    display: block !important;
    position: static !important; /* Sort du mode modal pour l'impression */
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
  }

  /* 5. CONFIGURATION QUAND LES MODALES SONT FERMÉES */
  body:not(.dashboard-open):not(.storymap-open) #klx-dashboard-overlay,
  body:not(.dashboard-open):not(.storymap-open) #klx-carto-overlay {
    display: none !important;
  }

  body:not(.dashboard-open):not(.storymap-open) .main-area {
    display: block !important;
    height: auto !important;
    overflow: visible !important;
    position: static !important;
  }

  /* 6. NETTOYAGE DES ÉLÉMENTS INTERACTIFS */
  .no-print,
  #btn-close-dashboard,
  #btn-close-carto,
  .agile-btn,
  .nav-bar,
  .sidebar,
  #periode-analyse-container,
  #carto-filters { /* Masque les filtres de la cartographie */
    display: none !important;
  }

  /* 7. OPTIMISATION DU CONTENU */
  .chart-box,
  .table-box,
  .klx-section {
    page-break-inside: avoid;
    break-inside: avoid;
    margin-bottom: 20px !important;
  }

  /* Adaptation spécifique pour l'arbre de la Storymap */
  #storymapTreeContainer {
    width: 100% !important;
    overflow: visible !important;
    display: block !important;
  }

  canvas {
    max-width: 100% !important;
    height: auto !important;
  }

  /* Forcer l'impression des couleurs et backgrounds */
  * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
}

#loader, #loader-redacUS {
  font-size: 2em;
  text-align: center;
  margin-top: 2em;
}

.spinner {
  display: inline-block;
  width: 40px;
  height: 40px;
  border: 4px solid #3498db;
  border-top: 4px solid #f3f3f3;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  vertical-align: middle;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.loading-text {
  display: inline-block;
  margin-left: 1em;
  vertical-align: middle;
}



.pills {
  display: inline-block;
  background: greenyellow;
  color: black;
  padding: 1px 4px;
  margin-top: 5px;
  border-radius: 3px;
  font-size: 14px;
  font-weight: bold;
}


.vert {
  background-color: #2ecc71;
  color: black;
}

.rouge {
  background-color: #e74c3c;
  color: white;
}

.bleu {
  background-color: #3498db;
  color: white;
}

.orange {
  background-color: #f39c12;
  color: white;
}

.noir {
  background-color: black;
  color: white;
}


/*********************************************************************************************************************************/
/* Préparation des éléments pour le zoom */
/* --- CONFIGURATION DU ZOOM (FUSIONNÉE) --- */

/* 1. Parents : On s'assure que le zoom ne soit pas coupé par les bordures des colonnes ou sections */
#report-container,
.klx-section,
.general-grid,
.kpi-grid {
  /* On s'assure que ces conteneurs ne bloquent pas le z-index des enfants */
  z-index: auto !important;
  position: relative;
  /* On retire toute transformation qui pourrait créer un nouveau contexte */
  transform: none !important;
  overflow: visible !important;
}

/* 2. Éléments Zoomables : État de base, transitions et curseur */
.klx-card,
.table-box,
.chart-box {
  transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.4s ease;
  backface-visibility: hidden;
  /* Évite le flou */
  will-change: transform;
  cursor: default;
  position: relative;
  /* Indispensable pour la gestion du z-index en JS */
}

.agile-input-date {
  padding: 4px 8px;
  border: 1px solid #ddd;
  border-radius: 5px;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: #333;
  outline: none;
  transition: border-color 0.2s;
}

.agile-input-date:focus {
  border-color: var(--agile-blue, #3498db);
}

/* 3. État Zoomé : Curseur loupe "-" et ombre portée forte */
.agile-zoom-active {
  cursor: zoom-out !important;
  box-shadow: 0 20px 80px rgba(0, 0, 0, 0.6) !important;
  pointer-events: auto;
  position: relative !important;
}

/* 4. Classe pour bloquer le scroll du fond */
.stop-scrolling {
  overflow: hidden !important;
  height: 100vh;
}

/* Classe pour empêcher le zoom */
.no-zoom {
  cursor: default !important;
  /* Retire la loupe */
  transition: none !important;
  /* Retire les effets de transition si nécessaire */
  transform: none !important;
}

/* On s'assure que même au survol, il ne se passe rien */
.no-zoom:hover {
  box-shadow: none !important;
  z-index: 1 !important;
}







/* Badges */
.badge {
  margin-left: 6px;
  padding: 1px 6px;
  font-size: 10px;
  border-radius: 10px;
  background-color: #e5e7eb;
}

.badge.sprint {
  background-color: #2563eb;
  color: white;
}

.badge.etat {
  background-color: #10b981;
  color: white;
}

.badge.count {
  background-color: #f59e0b;
  color: white;
}











/* ===== NIVEAUX DE L’ARBRE ===== */
/* === STRUCTURE GÉNÉRALE === */
.storymap-tree,
.storymap-tree ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* L'indentation est gérée UNIQUEMENT ici pour que les lignes suivent */
.storymap-tree ul {
    margin-left: 24px; 
}

.storymap-tree li {
    position: relative;
    padding: 6px 6px 6px 25px; /* Espace pour les lignes à gauche */
    cursor: pointer;
    user-select: none;
    line-height: 1.4;
}

/* === SYSTÈME DE LIGNES (DESSIN) === */

/* Branche horizontale */
.storymap-tree li::before {
    content: '';
    position: absolute;
    top: 18px; 
    left: 0;
    width: 18px;
    height: 1px;
    background: #d1d5db;
}

/* Ligne verticale (Trone) */
.storymap-tree li::after {
    content: '';
    position: absolute;
    top: -6px;
    left: 0;
    width: 1px;
    height: 100%;
    background: #d1d5db;
}

/* === LOGIQUE DE FIN DE BRANCHE (IMPORTANT) === */

/* On arrête la ligne au dernier enfant de chaque niveau */
.storymap-tree li:last-child::after {
    height: 24px; /* S'arrête pile sur la branche horizontale */
}

/* On retire la ligne qui dépasse en haut du tout premier parent */
.storymap-tree > li:first-child::after {
    top: 18px;
    height: calc(100% - 18px);
}

/* Si l'élément est seul, pas de ligne verticale */
.storymap-tree > li:first-child:last-child::after {
    display: none;
}

/* === STYLES PAR TYPE (SANS MARGINS) === */

/* OBJECTIFS (Niveau 1) */
.storymap-tree .tree-objectif {
    font-size: 1.1rem;
    font-weight: 700;
    color: #111827;
}

/* EPICS (Niveau 2) */
.storymap-tree .tree-epic {
    font-size: 1rem;
    font-weight: 600;
    color: #374151;
}

/* USER STORIES (Niveau 3) */
.storymap-tree .tree-us {
    font-size: 0.95rem;
    font-weight: 400;
    color: #4b5563;
}

/* === ÉTATS === */

.storymap-tree li:hover {
    background-color: #f9fafb;
}

.storymap-tree li.collapsed > ul {
    display: none;
}



.comex-subtitle {
  font-size:small;
}