/* =========================================================
   1. BASE & RESET
   ========================================================= */

* {
  box-sizing: border-box;
}

body {
  font-family: Arial, Helvetica, sans-serif;
  background: #f4f6f8;
  margin: 20px;
  color: #222;
}

h1 {
  margin-bottom: 15px;
  font-size: 1.6em;
}

/* Masquage radios onglets */
input[type="radio"][name="tabs"] {
  position: absolute;
  left: -9999px;
}

/* =========================================================
   2. LAYOUT – INFO-GRID
   ========================================================= */

.info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
}

.info-box {
  padding: 8px 12px;
  background: #eef3f8;
  border-left: 5px solid #1976d2;
  border-radius: 6px;
  color: #263238;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

/* =========================================================
   3. ONGLETS & PANELS
   ========================================================= */

.tabs {
  display: flex;
  border-bottom: 2px solid #c0c0c0;
  margin-bottom: 0;
}

.tabs label {
  padding: 12px 22px;
  margin-right: 6px;
  background: #cfd8dc;
  cursor: pointer;
  font-weight: bold;
  border-radius: 6px 6px 0 0;
}

.tabs label:hover {
  background: #b0bec5;
}

/* États actifs des onglets */
#tab1:checked ~ .tabs label[for=tab1],
#tab2:checked ~ .tabs label[for=tab2],
#tab3:checked ~ .tabs label[for=tab3],
#tab4:checked ~ .tabs label[for=tab4],
#tab5:checked ~ .tabs label[for=tab5] {
  background: #37474f;
  color: #ffffff;
}

/* CRITICAL : Tous les panels cachés par défaut */
.panel {
  display: none !important;
  background: #ffffff;
  padding: 28px;
  border-radius: 0 8px 8px 8px;
  margin-bottom: 20px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.06);
}

/* Column-count pour les onglets 1, 2, 3 */
#content1,
#content2,
#content3 {
  column-count: 2;
  column-gap: 48px;
}

/* AFFICHAGE EXCLUSIF : Un seul panel visible à la fois */
#tab1:checked ~ #content1 {
  display: block !important;
}

#tab2:checked ~ #content2 {
  display: block !important;
}

#tab3:checked ~ #content3 {
  display: block !important;
}

#tab4:checked ~ #content4 {
  display: block !important;
}

#tab5:checked ~ #content5 {
  display: grid !important;
}

/* =========================================================
   4. SECTIONS
   ========================================================= */

.section {
  break-inside: avoid;
  margin-bottom: 26px;
  display: grid;
  grid-template-columns: 220px 1fr;
  column-gap: 16px;
}

.section h3 {
  grid-column: 1 / -1;
  margin: 0 0 12px 0;
  padding: 10px 14px;
  font-size: 1em;
  font-weight: 700;
  color: #263238;
  background: #e9edf3;
  border-left: 6px solid #607d8b;
  border-radius: 4px;
}

/* Alignement labels / champs */
.section > label {
  grid-column: 1;
  align-self: center;
  margin-top: 6px;
}

.section > input,
.section > textarea,
.section > select {
  grid-column: 2;
}

.section > .option,
.section > label.option {
  grid-column: 2;
}

.section > input[style*="display:none"] {
  grid-column: 2;
}

/* =========================================================
   5. FORMULAIRES
   ========================================================= */

/* Labels généraux */
label {
  display: block;
  margin-top: 8px;
  font-weight: 600;
  font-size: 0.9em;
}

/* Labels des options (non gras) */
label.option,
.option label {
  font-weight: 400;
}

label.option {
  display: flex;
  flex-wrap: wrap;      /* ⬅️ C'est LA solution ! */
  gap: 10px 20px;       /* Espacement vertical et horizontal */
  align-items: center;
}

/* Champs de saisie */
textarea,
input[type=text],
input[type=email],
input[type=number],
input[type=date] {
  width: 100%;
  margin-top: 4px;
  padding: 6px 8px;
  min-height: 32px;
  line-height: 1.4;
  border-radius: 4px;
  border: 1px solid #b0bec5;
  font-size: 0.9em;
}

textarea:focus,
input:focus {
  outline: none;
  border-color: #1976d2;
  box-shadow: 0 0 0 2px rgba(25,118,210,0.12);
}

/* Options (checkbox / radio) */
.option {
  display: inline-flex;
  align-items: center;
  margin-right: 18px;
  margin-top: 6px;
  white-space: nowrap;
}

.option input {
  margin-right: 6px;
}

/* =========================================================
   6. BOUTONS & ACTIONS
   ========================================================= */

.actions {
  margin-top: 30px;
  text-align: center;
}

button {
  padding: 8px 18px;
  font-size: 0.85em;
  font-weight: 600;
  color: #ffffff;
  background: linear-gradient(#4caf50, #2e7d32);
  border: none;
  border-radius: 6px;
  cursor: pointer;
}

button:hover {
  background: linear-gradient(#43a047, #1b5e20);
}

.print-btn {
  background: linear-gradient(#90a4ae, #607d8b);
}

/* Bouton Radar */
#toggleRadarBtn {
  position: fixed;
  top: 12px;
  right: 12px;
  z-index: 10001;
  padding: 6px 12px;
  font-size: 0.8em;
  font-weight: 600;
  background: #37474f;
  color: #ffffff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0,0,0,0.25);
}

#toggleRadarBtn:hover {
  background: #263238;
}

/* =========================================================
   7. INFO-BULLES
   ========================================================= */

/* Icônes compactes */
.info-title.compact {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  font-size: 0.9em;
  cursor: help;
  background: #37474f;
  color: #ffffff;
  border-radius: 6px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.25);
}

.info-title.compact:hover,
.info-title.compact:focus {
  background: #263238;
  outline: none;
}

/* Contenu infobulle */
.info-title.compact::after {
  content: attr(data-title) "\A\A" attr(data-tooltip);
  position: absolute;
  left: 0;
  top: 130%;
  min-width: 320px;
  max-width: 480px;
  padding: 12px 14px;
  background: #ffffff;
  color: #263238;
  border: 1px solid #cfd8dc;
  border-left: 5px solid #1976d2;
  border-radius: 6px;
  font-size: 0.75em;
  line-height: 1.4;
  box-shadow: 0 6px 18px rgba(0,0,0,0.18);
  white-space: pre-line;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-6px);
  transition: opacity 0.15s ease, transform 0.15s ease;
  z-index: 10000;
}

.info-title.compact:hover::after,
.info-title.compact:focus::after {
  opacity: 1;
  transform: translateY(0);
}

/* Cluster infobulles Radar */
#infoRadarCluster {
  position: fixed;
  top: 56px;
  right: 12px;
  display: flex;
  gap: 8px;
  z-index: 10000;
}

/* Projection à gauche pour le cluster Radar */
#infoRadarCluster .info-title.compact::after {
  left: auto;
  right: 0;
  transform-origin: top right;
  pointer-events: none;
  z-index: 10000;
}

#infoRadarCluster .info-title.compact:hover::after,
#infoRadarCluster .info-title.compact:focus::after {
  transform: translateY(0);
}

/* =========================================================
   8. RADAR FLOTTANT
   ========================================================= */

#floatingRadar {
  display: none;
  position: fixed;
  top: 120px;
  right: 20px;
  width: 30%;
  max-width: 320px;
  min-width: 260px;
  opacity: 0.9;
  background: #ffffff;
  border: 1px solid #cfd8dc;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
  z-index: 20000;
  cursor: move;
  isolation: isolate;
}

#floatingRadar canvas {
  width: 100%;
  height: auto;
  margin: 0 auto;
  display: block;
  padding: 0;
}

.radar-header {
  padding: 8px 12px;
  background: #37474f;
  color: #ffffff;
  font-size: 0.85em;
  font-weight: 600;
  border-radius: 8px 8px 0 0;
  cursor: grab;
}

/* =========================================================
   9. SYNTHÈSE RFE (ONGLET 4)
   ========================================================= */

#content4 {
  column-count: 2;
  column-gap: 40px;
}

#content4 .section {
  break-inside: avoid;
  margin-bottom: 28px;
}

#content4 h3 {
  background: #eef2f6;
  border-left: 6px solid #607d8b;
  padding: 10px 14px;
  font-size: 1em;
  font-weight: 700;
  margin-bottom: 12px;
}

#content4 ul,
#content4 ol {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

#content4 li {
  margin-bottom: 10px;
  line-height: 1.4;
}

/* =========================================================
   10. SYNTHÈSE CLIENT (ONGLET 5) - GRID 2 COLONNES
   ========================================================= */

#content5 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  column-count: 1;
}

/* 🔑 SOLUTION : Le paragraphe debug prend toute la largeur OU est masqué */
#content5 #debugSynthese {
  grid-column: 1 / -1;  /* Prend toute la largeur */
  margin-bottom: 0;
}

/* Alternative : le masquer complètement */
#content5 #debugSynthese:empty {
  display: none;
}

/* RESET complet des sections */
#content5 .section {
  display: block !important;
  grid-template-columns: none !important;
  column-gap: 0;
  width: 100%;
  margin-bottom: 0;
}

/* Titres de section */
#content5 .section h3 {
  background: #eef2f6;
  border-left: 6px solid #607d8b;
  padding: 10px 14px;
  font-size: 1em;
  font-weight: 700;
  margin-bottom: 12px;
}

#content5 ul,
#content5 ol {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

#content5 li {
  margin-bottom: 10px;
  line-height: 1.4;
}

#content5 p:not(#debugSynthese),
#content5 div {
  width: 100%;
}

/* Vue globale par axe */
#axeSummary li {
  display: grid;
  grid-template-columns: 18px auto 1fr;
  column-gap: 10px;
  align-items: start;
  margin-bottom: 6px;
  font-weight: 600;
}

#axeSummary li::before {
  content: attr(data-icon);
}

#axeSummary strong {
  white-space: nowrap;
}

/* Critiques & alertes */
#critiqueList li,
#alerteList li {
  padding-left: 4px;
}

#critiqueList strong {
  color: #c62828;
}

#alerteList strong {
  color: #ef6c00;
}

#critiqueList p,
#alerteList p {
  margin: 4px 0 0 22px;
  font-size: 0.85em;
  color: #444;
}

/* Priorités de cadrage */
#priorityList li {
  padding: 6px 10px;
  border-left: 4px solid #37474f;
  background: #f6f8fa;
  border-radius: 4px;
  font-weight: 600;
}

/* Conclusion */
#conclusionText {
  font-weight: 600;
  padding: 10px 14px;
  background: #f2f4f7;
  border-left: 6px solid #1976d2;
  border-radius: 4px;
}

/* Vue globale par axe */
#axeSummary li {
  display: grid;
  grid-template-columns: 18px auto 1fr;
  column-gap: 10px;
  align-items: start;
  margin-bottom: 6px;
  font-weight: 600;
}

#axeSummary li::before {
  content: attr(data-icon);
}

#axeSummary strong {
  white-space: nowrap;
}

/* Critiques & alertes */
#critiqueList li,
#alerteList li {
  padding-left: 4px;
}

#critiqueList strong {
  color: #c62828;
}

#alerteList strong {
  color: #ef6c00;
}

#critiqueList p,
#alerteList p {
  margin: 4px 0 0 22px;
  font-size: 0.85em;
  color: #444;
}

/* Priorités de cadrage */
#priorityList li {
  padding: 6px 10px;
  border-left: 4px solid #37474f;
  background: #f6f8fa;
  border-radius: 4px;
  font-weight: 600;
}

/* Conclusion */
#conclusionText {
  font-weight: 600;
  padding: 10px 14px;
  background: #f2f4f7;
  border-left: 6px solid #1976d2;
  border-radius: 4px;
}

/* Vue globale par axe */
#axeSummary li {
  display: grid;
  grid-template-columns: 18px auto 1fr;
  column-gap: 10px;
  align-items: start;
  margin-bottom: 6px;
  font-weight: 600;
}

#axeSummary li::before {
  content: attr(data-icon);
}

#axeSummary strong {
  white-space: nowrap;
}

/* Critiques & alertes */
#critiqueList li,
#alerteList li {
  padding-left: 4px;
}

#critiqueList strong {
  color: #c62828;
}

#alerteList strong {
  color: #ef6c00;
}

#critiqueList p,
#alerteList p {
  margin: 4px 0 0 22px;
  font-size: 0.85em;
  color: #444;
}

/* Priorités de cadrage */
#priorityList li {
  padding: 6px 10px;
  border-left: 4px solid #37474f;
  background: #f6f8fa;
  border-radius: 4px;
  font-weight: 600;
}

/* Conclusion */
#conclusionText {
  font-weight: 600;
  padding: 10px 14px;
  background: #f2f4f7;
  border-left: 6px solid #1976d2;
  border-radius: 4px;
}

/* =========================================================
   11. COUVERTURE PDF
   ========================================================= */

.pdf-cover {
  display: none;
}

/* =========================================================
   12. RESPONSIVE
   ========================================================= */

@media (max-width: 900px) {
  .info-grid {
    grid-template-columns: 1fr;
  }

  .section {
    grid-template-columns: 1fr;
  }

  .section > label,
  .section > input,
  .section > textarea,
  .section > select,
  .section > .option {
    grid-column: 1;
  }

  #content5 {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   13. IMPRESSION
   ========================================================= */

@media print {
  .tabs,
  .actions,
  #toggleRadarBtn,
  #infoRadarCluster,
  #floatingRadar {
    display: none !important;
  }

  .panel {
    display: block !important;
    column-count: 1;
    padding: 0;
    box-shadow: none;
  }

  .section {
    grid-template-columns: 180px 1fr;
  }

  .pdf-cover {
    display: block;
    page-break-after: always;
  }

  .pdf-cover h2 {
    font-size: 1.4em;
    margin-bottom: 20px;
  }

  .pdf-cover p {
    font-size: 0.95em;
    margin-bottom: 12px;
  }
}