body{ font-family: Arial, sans-serif; margin:30px; }
body[data-survey="AMI"] #practiceSection { display:none !important; }
.page { max-width: 1200px; margin: 0 auto; }
.canvas-wrapper{ width:100%; max-width:1000px; margin:30px auto; position:relative; border:1px solid #ddd; border-radius:10px; background:#fff; padding:16px; }
h1, h2, .canvas-wrapper h3 { text-align:center; }

#filters {
  display: flex;
  flex-direction: column;   /* ← colonne */
  gap: 16px;                /* espace entre les blocs */
  align-items: stretch;     /* chaque champ prend 100% */
  max-width: 420px;         /* largeur max, centré */
  margin: 0 auto;
}

#filters > div { display: flex; flex-direction: column;  width: 100%;}
#filters label { font-weight: 700;  margin-bottom: 6px;}
#filters select { width: 100% !important;}
.select2-container {  width: 100% !important;   /* Select2 full width */}

/* multiselect : même hauteur visuelle (min), puces serrées */
.select2-container--default .select2-selection--multiple{ min-height: 40px; padding-top: 4px; padding-bottom: 4px;}
.select2-container--default .select2-selection--multiple .select2-selection__rendered{  display: flex; gap: 4px; flex-wrap: wrap;}

/* rangée du bouton sous toute la grille */
.apply-row{grid-column: 1 / -1;        /* s'étend sur les 4 colonnes */  display:flex; justify-content:center; align-items:center; gap:10px; margin-top:8px;}

/* (optionnel) en-dessous de 900px: passe à 2 colonnes, puis 1 */
@media (max-width: 900px){#filters.filters-grid{ grid-template-columns: repeat(2, minmax(220px, 1fr)); }}
@media (max-width: 520px){#filters.filters-grid{ grid-template-columns: 1fr; }}

.apply-btn{ padding:8px 14px; border:0; border-radius:8px; background:#007acc; color:#fff; font-weight:600; cursor:pointer; }
#selectionContainer{ display:block; width:34%; min-width:320px; margin:16px auto; border:1px solid #ccc; padding:10px; border-radius:6px; text-align:center; }
#gaugeWrap{ display:flex; flex-direction:column; align-items:center; justify-content:center; margin:0 auto; text-align:center; }
#gaugeWrap canvas{ display:block; margin:0 auto; }
#gaugeWrap .gauge-caption{ width:100%; color:#333; font-size:16px; }
.btn-row{ display:flex; justify-content:center; align-items:center; gap:12px; flex-wrap:wrap; margin:12px auto 0; width:100%; }
.dl-btn{ appearance:none; display:inline-flex; align-items:center; justify-content:center; padding:10px 14px; border:0; border-radius:8px; background:#007acc; color:#fff; font-weight:600; font-size:14px; white-space:nowrap; box-shadow:0 1px 2px rgba(0,0,0,.08); cursor:pointer; }
.dl-btn:hover{ filter:brightness(1.05); }
#domainsArea{ display:grid; grid-template-columns: repeat(auto-fit, minmax(520px, 1fr)); gap:24px; align-items:start; margin-bottom:48px; }
.chart-box{ height:440px; display:flex; }
.radar-canvas{ width:100% !important; height:100% !important; display:block; }
.radar-toolbar{ display:flex; align-items:center; justify-content:center; gap:12px; margin:10px auto 0; font-size:.95rem; }
.bar-card canvas{ display:block; width:100%; height:420px !important; }
.topic-canvas, .topic-radial-canvas{ display:block; width:100%; height:640px; }
.toggle-row{ display:flex; justify-content:center; align-items:center; gap:16px; margin-bottom:10px; }

/* 1) Generic legend layout (keep your centering) */
.heat-legend{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  justify-content:center;
  align-items:center;
  margin-top:18px;
}
#radialLegend{ width:100%; margin:12px 0 18px !important; } /*  display:block;  */
#topicWrap .btn-row{ margin-top:0 !important; } /* l’espace vient de la légende */
/* Légende radiale centrée, avec respiration */
#topicRadialWrap #radialLegend{
  display:flex !important;
  justify-content:center !important;
  align-items:center !important;
  flex-wrap:wrap !important;
  gap:12px !important;
  width:100% !important;
  margin:12px auto 18px !important;   /* espace au-dessus/au-dessous */
  text-align:center !important;
}

/* Petites pastilles “chip” : alignement propre quand on passe à la ligne */
#topicRadialWrap #radialLegend .chip{ margin:2px 0; }

/* Boutons sous la légende, centrés (déjà le cas, on verrouille) */
#topicWrap .btn-row{
  justify-content:center !important;
  margin-top:0 !important;             /* l'espace vient de la légende */
}



.chip{ display:inline-flex; align-items:center; gap:6px; padding:2px 8px; border-radius:999px; border:1px solid #ddd; font-size:12px; }
.chip .dot{ width:10px; height:10px; border-radius:50%; background:#000; }
.gradbar{ width:320px; height:12px; border-radius:8px; border:1px solid #999; }
.need-squad{ max-width:760px; margin:20px auto; border:2px dashed #aaa; padding:18px; border-radius:12px; background: #fafafa; font-size:1.05rem; text-align:center; }

/* IA */
.ia-block { max-width: 1000px; margin: 18px auto 0; text-align: center; }
.ia-toolbar { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:8px; }
.ia-button { appearance:none; padding:10px 14px; border:0; border-radius:8px; background:#6a39ff; color:#fff; font-weight:600; cursor:pointer; box-shadow:0 1px 2px rgba(0,0,0,.08); }
.ia-button:hover { filter: brightness(1.05); }
.ia-result { white-space:pre-wrap; text-align:left; margin:10px auto 0; padding:12px 14px; border:1px dashed #bbb; border-radius:8px; background:#fafafa; max-width:1000px; }
.ia-loader { display:none; margin-left:10px; }
.ia-loader::after { content:'⏳'; animation: ia-blink 1s linear infinite; }
@keyframes ia-blink { 50% { opacity: 0.35; } }

/* User chart = compact, height gérée en JS */
.user-avg-card{
  max-width: 1000px;
  height: 220px;          /* hauteur fixe */
  overflow-y: auto;       /* scroll si nécessaire */
}
.user-avg-card canvas{
  width: 100% !important;
  height: 220px !important;  /* idem canvas */
}

#methodoBtn{
  position: fixed;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  padding: 10px 12px;
  border: 0;
  border-radius: 10px 0 0 10px;
  background: #6a39ff;
  color: #fff;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
  z-index: 9999;
}
#methodoBtn:hover{ filter: brightness(1.05); }

/* Chip Méthodo */
.methodo-chip{
  position:absolute; top:10px; right:10px;
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 12px; border-radius:12px;
  background:linear-gradient(135deg,#6a39ff,#9b59ff);
  color:#fff; font-weight:700; font-size:14px;
  box-shadow:0 6px 16px rgba(106,57,255,.35);
  cursor:pointer; user-select:none;
  z-index:10;
}
.methodo-chip .chip-icon{ font-size:16px; line-height:1; }
.methodo-chip:focus{ outline:2px solid #fff; outline-offset:2px; }
.methodo-chip:hover{ filter:brightness(1.05); }

/* halo pulsant pour attirer l’attention */
.methodo-chip::after{
  content:""; position:absolute; inset:-6px;
  border-radius:16px; pointer-events:none;
  box-shadow:0 0 0 0 rgba(106,57,255,.50);
  animation:chipPulse 2.2s ease-out infinite;
}
@keyframes chipPulse{
  0%   { box-shadow:0 0 0 0 rgba(106,57,255,.50); }
  70%  { box-shadow:0 0 0 12px rgba(106,57,255,0); }
  100% { box-shadow:0 0 0 0 rgba(106,57,255,0); }
}
/* réduit l’animation si l’utilisateur préfère */
@media (prefers-reduced-motion: reduce){
  .methodo-chip::after{ animation:none; }
}
.ami-card{background:#fff;border-radius:12px;padding:14px;box-shadow:0 12px 24px rgba(0,0,0,.08);margin:12px 0;}
.ami-sub{margin:.25rem 0 0.75rem;color:#555}
.ami-info{margin-top:8px;padding:10px 12px;border-radius:10px;background:#f5f7fb;color:#333}
#.ami-legend{display:flex;gap:14px;align-items:center;margin-top:10px;flex-wrap:wrap}
.ami-note{text-align:center; margin-top:6px}
.ami-legend{text-align:center; margin-top:6px}
.dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:6px;transform:translateY(1px)}
.dot-red{background:#e53935}
.dot-green{background:#2e7d32}
.dot-blue{background:#1e88e5}

.bar--red{background-color:#e53935 !important}
.bar--green{background-color:#2e7d32 !important}
.bar--blue{background-color:#1e88e5 !important}

.disp-grid{
  display:grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap:12px; align-items:end;
}
.disp-grid label{ display:block; font-weight:700; margin-bottom:6px; }
.disp-grid .apply-holder{ display:flex; align-items:end; }
.disp-table{ width:100%; border-collapse: collapse; }
.disp-table th, .disp-table td{ padding:8px 10px; border-bottom:1px solid #eee; }
.disp-table th{ text-align:left; background:#fafafa; }
.delta-badge{
  display:inline-block; min-width:28px; text-align:center; padding:2px 8px; border-radius:999px; color:#fff; font-weight:700;
}
.delta-3{ background:#e53935; }
.delta-2{ background:#fb8c00; }
.delta-1{ background:#f6c700; color:#111; }
.delta-0{ background:#c7c7c7; color:#111; }

.is-hidden{ display:none !important; }

/* 1) La boîte Select2 garde la largeur du conteneur */
#rwp + .select2 { width:100% !important; }

/* 2) Le menu déroulant ne dépasse pas : même largeur que la boîte */
#rwp + .select2 .select2-dropdown{
  width:auto !important;
  min-width:100% !important;
  max-width:100% !important;
  box-sizing:border-box;
}

/* 3) Assure un contexte de positionnement propre */
.filters-grid .field{ position:relative; }

/* (optionnel) hauteur et scroll confortables */
.select2-results__options{ max-height:260px; overflow:auto; }

#devops-practice .chart-card{margin:14px 0;padding:12px;border:1px solid #eee;border-radius:10px;box-shadow:0 1px 3px rgba(0,0,0,.04)}
#devops-practice .chart-toolbar{display:flex;gap:14px;align-items:center;margin:6px 0 10px}
#devops-practice h3{margin:0 0 8px;font-size:1.05rem}

.tri-chart-section .chart-card{
  margin:14px 0;padding:12px;border:1px solid #eee;border-radius:10px;
  box-shadow:0 1px 3px rgba(0,0,0,.04)
}
.tri-chart-section .chart-switch{display:flex;gap:14px;align-items:center;margin:6px 0 10px}
.tri-chart-section h2.chart-title{margin:14px 0 12px;text-align:center}

.ami-legend .chip {
  padding: 3px 10px 3px 0; border-radius: 4px; background: transparent; font-size: 14px;
}
.ami-legend .dot {
  box-shadow: 0 0 1px #222;
}