/* ===== SECTION-DIAGRAMMES.CSS - VERSION AVEC BORDURE ===== */
/* 🎯 Les styles et dimensions des diagrammes sont maintenant dans diagrammes.css */
/* Ce fichier ne contient que les spécificités du mode dictionnaire */

/* ========================================
   📚 SECTION DIAGRAMMES - MODE DICTIONNAIRE
   ======================================== */

.diagrams-section {
  max-width: 80rem;
  margin: clamp(1.5rem, 3vh, 2.5rem) auto;
  padding: 0 clamp(1rem, 2vw, 2rem);
}

/* ========================================
   📦 CONTENEUR DIAGRAMMES AVEC BORDURE
   ======================================== */

.diagrams-container {
  /* 🟢 Bordure olive identique au mode générateur */
  border: var(--bordure-epaisse) solid var(--bordure-principale);
  border-radius: var(--rayon-lg);
  
  /* Dimensions et espacement */
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
  padding: var(--padding-md);
  
  /* Layout */
  display: flex;
  align-items: center;
  justify-content: center;
  
  /* Apparence */
  background: transparent;
  box-sizing: border-box;
  
  /* Transitions */
  transition: min-height 0.4s ease, 
              width 0.4s ease, 
              opacity 0.3s ease;
}

/* Message "aucun diagramme" */
.diagrams-container .no-diagrams {
  color: var(--texte-tertiaire);
  font-style: italic;
  text-align: center;
  padding: 3rem 1rem;
  width: 100%;
  font-size: var(--texte-lg);
}

/* ========================================
   📱 RESPONSIVE - MOBILE
   ======================================== */

@media (max-width: 47.9375rem) {
  .diagrams-section {
    margin: 1.5rem auto;
    padding: 0 1rem;
  }
  
  .diagrams-container {
    max-width: calc(100% - 2rem);
    padding: var(--padding-md);
  }
}

/* ========================================
   💻 RESPONSIVE - TABLETTE
   ======================================== */

@media (min-width: 48rem) and (max-width: 63.9375rem) {
  .diagrams-section {
    margin: 2.5rem auto;
  }
  
  .diagrams-container {
    min-height: 380px;
    padding: var(--padding-lg);
  }
}

/* ========================================
   🖥️ RESPONSIVE - DESKTOP
   ======================================== */



/* ========================================
   🎨 PRÉFÉRENCE MOUVEMENT RÉDUIT
   ======================================== */

@media (prefers-reduced-motion: reduce) {
  .diagrams-container {
    transition: none;
  }
}

/* ========================================
   🖨️ PRINT
   ======================================== */

@media print {
  .diagrams-container {
    border: var(--bordure-fine) solid #ccc;
    padding: var(--padding-sm);
    min-height: auto;
    page-break-inside: avoid;
  }
}