/*
================================================================================
content-section.css - Styles pour les conteneurs et sections de contenu
================================================================================
Version 2.0 - Code réorganisé et optimisé avec commentaires détaillés
Auteur : Emile SNYERS
Date : 2025-06-21
/* LICENCE ET CONDITIONS D'UTILISATION
----------------------------------------

Emile SNYERS - Tous droits réservés - 2025

📢Toute utilisation nécessite une autorisation préalable du propriétaire (Emile SNYERS).
🚨Usage non commercial uniquement.

Type d'utilisation autorisée: 
- Utilisation pour des projets éducatifs ou associatifs.
- Ne pas redistribuer sans autorisation.

Critères d'attribution d'une autorisation: 
- Contribution à des projets éducatifs ou associatifs.
- L'entraide et le partage du savoir.
- Contribue à la promotion de l'éducation et de la culture.
----------------------------------------
Description : Styles pour les conteneurs principaux, sections de contenu, tableaux,
grilles dynamiques et éléments interactifs du site éducatif.

BREAKPOINTS UTILISÉS :
- 320px+ : Très petits téléphones
- 375px+ : Téléphones moyens  
- 480px+ : Grands téléphones
- 768px+ : Petites tablettes
- 1024px+ : Tablettes moyennes/ordinateurs portables
- 1200px+ : Ordinateurs de bureau moyens
- 1440px+ : Grands écrans
- 1920px+ : Très grands écrans
================================================================================
*/

/* ====================================================================
   1. CONTENEURS PRINCIPAUX
==================================================================== */

/* 
 * Conteneur principal pour le contenu des pages
 * Utilisé comme wrapper principal pour organiser le contenu
 * Responsive : s'adapte à toutes les tailles d'écran
 */
.main-content {
  background: var(--theme-tertiary);
  border-radius: var(--border-radius-lg);
  padding: var(--spacing-xl);
  margin-bottom: var(--spacing-xl);
  box-shadow: var(--theme-section-shadow);
  /* Largeur maximale pour éviter les lignes trop longues sur grands écrans */
  max-width: 100%;
  /* Centrage automatique */
  margin-left: auto;
  margin-right: auto;
}

/* 
 * Conteneur spécifique pour les pages de cours
 * Prend toute la hauteur de l'écran et gère l'espacement global
 */
.course-container {
  background: var(--theme-background);
  min-height: 100vh;
  padding: var(--spacing-lg);
  /* Largeur maximale pour la lisibilité */
  max-width: 1400px;
  margin: 0 auto;
}

/* ====================================================================
   2. SECTIONS DE CONTENU
==================================================================== */

/* 
 * Section de base pour organiser le contenu
 * Utilisée pour grouper des éléments liés (chapitres, parties de cours, etc.)
 * Inclut des effets de survol pour améliorer l'interactivité
 */
.section {
  background: var(--theme-tertiary);
  border-radius: var(--border-radius-lg);
  padding: var(--spacing-lg);
  margin-bottom: var(--spacing-lg);
  box-shadow: var(--theme-section-shadow);
  transition: all var(--transition-speed) ease;
  /* Amélioration pour grands écrans : largeur maximale */
  max-width: 100%;
  /* Amélioration pour petits écrans : espacement adaptatif */
  min-width: 0;
}

/* 
 * Effet de survol pour les sections
 * Ajoute une légère élévation et améliore l'ombre pour indiquer l'interactivité
 */
.section:hover {
  transform: var(--theme-section-hover-transform, translateY(-3px));
  box-shadow: var(--theme-card-shadow);
}

/* 
 * Sections pliables (collapsibles)
 * Permettent de masquer/afficher le contenu pour une meilleure organisation
 * Particulièrement utile sur mobiles pour économiser l'espace
 */
.section-collapsible {
  border: 1px solid var(--theme-secondary);
  /* Amélioration : suppression des marges internes pour optimiser l'espace */
  padding: 0;
}

/* 
 * En-tête des sections pliables
 * Zone cliquable qui contient le titre et le bouton de toggle
 * Design responsive qui s'adapte aux différentes tailles d'écran
 */
.section-header-collapsible {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-md);
  background: var(--theme-secondary);
  border-radius: var(--border-radius-md) var(--border-radius-md) 0 0;
  cursor: pointer;
  transition: background-color var(--transition-speed) ease;
  /* Amélioration : hauteur minimale pour faciliter le clic */
  min-height: 60px;
  /* Amélioration : éviter la cassure du texte */
  flex-wrap: nowrap;
}

/* 
 * Effet de survol pour l'en-tête des sections pliables
 * Change la couleur de fond et du texte pour indiquer l'interactivité
 */
.section-header-collapsible:hover {
  background: var(--theme-primary);
  color: var(--theme-button-primary-text, white);
}

/* 
 * Titre des sections
 * Taille adaptative selon la taille de l'écran
 */
.section-title {
  font-size: var(--font-size-xl);
  font-weight: 600;
  margin: 0;
  /* Amélioration : éviter les débordements */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}

/* 
 * Bouton de toggle pour les sections pliables
 * Rotation animée pour indiquer l'état ouvert/fermé
 */
.section-toggle {
  background: none;
  border: none;
  font-size: var(--font-size-lg);
  cursor: pointer;
  transition: transform var(--transition-speed) ease;
  color: inherit;
  /* Amélioration : zone de clic plus grande */
  padding: var(--spacing-xs);
  border-radius: var(--border-radius-sm);
  min-width: 40px;
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 
 * État replié de la section
 * Rotation du bouton toggle pour indiquer l'état fermé
 */
.section-collapsible.collapsed .section-toggle {
  transform: rotate(-90deg);
}

/* 
 * Contenu des sections
 * Zone qui contient le contenu principal de la section
 */
.section-content {
  padding: var(--spacing-lg);
  display: block;
  /* Amélioration : transition fluide pour l'ouverture/fermeture */
  transition: all var(--transition-speed) ease;
}

/* 
 * État masqué du contenu des sections pliables
 * Masque complètement le contenu quand la section est repliée
 */
.section-collapsible.collapsed .section-content {
  display: none;
}

/* ====================================================================
   3. CONTENEURS ET ÉLÉMENTS DE CONTENU
==================================================================== */

/* 
 * Conteneurs génériques pour organiser différents types de contenu
 * Utilisés pour grouper du texte, des images, des liens, etc.
 * Design adaptatif qui fonctionne sur tous les écrans
 */
.conteneur {
  background-color: var(--theme-secondary);
  border-radius: var(--border-radius-md);
  padding: var(--spacing-md);
  margin-top: var(--spacing-md);
  transition: all var(--transition-speed) ease;
  /* Amélioration : éviter les débordements */
  overflow: hidden;
  /* Amélioration : largeur relative pour la flexibilité */
  width: 100%;
}

/* 
 * Titres des conteneurs (éléments cliquables)
 * Permettent d'ouvrir/fermer le contenu associé
 * Design accessible avec zone de clic optimisée
 */
.conteneur h3 {
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 0 var(--spacing-sm) 0;
  padding: var(--spacing-sm);
  border-radius: var(--border-radius-sm);
  transition: background-color var(--transition-speed) ease;
  /* Amélioration : hauteur minimale pour faciliter le clic */
  min-height: 48px;
  /* Amélioration : gestion du texte long */
  word-wrap: break-word;
  flex-wrap: wrap;
}

/* 
 * Effet de survol pour les titres des conteneurs
 * Améliore l'accessibilité en indiquant la zone cliquable
 */
.conteneur h3:hover {
  background-color: var(--theme-primary);
  color: var(--theme-button-primary-text, white);
}

/* 
 * Zone de contenu principal des conteneurs
 * Masquée par défaut, révélée au clic sur le titre
 * Responsive et adaptatif à tous les écrans
 */
.contenu {
  display: none;
  padding: var(--spacing-md);
  background-color: var(--theme-background);
  border-radius: var(--border-radius-sm);
  margin-top: var(--spacing-sm);
  /* Amélioration : transition fluide */
  transition: all var(--transition-speed) ease;
  /* Amélioration : gestion du contenu long */
  overflow-wrap: break-word;
  word-wrap: break-word;
}

/* ====================================================================
   4. TABLEAUX RESPONSIFS
==================================================================== */

/* 
 * Tableaux adaptatifs pour l'affichage de données structurées
 * Responsive design avec transformation en cartes sur petits écrans
 * Optimisé pour la lisibilité sur tous les appareils
 */
.conteneur table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--spacing-md) 0;
  font-size: var(--font-size-base);
  background-color: var(--theme-background);
  border-radius: var(--border-radius-md);
  overflow: hidden;
  box-shadow: var(--theme-section-shadow);
  /* Amélioration : gestion du débordement horizontal */
  overflow-x: auto;
  /* Amélioration : largeur minimale pour éviter l'écrasement */
  min-width: 300px;
}

/* 
 * En-têtes de tableaux
 * Design cohérent avec le thème, lisibilité optimisée
 */
.conteneur table th {
  background-color: var(--theme-primary);
  color: var(--theme-button-primary-text, white);
  font-weight: 600;
  padding: var(--spacing-sm) var(--spacing-md);
  text-align: left;
  border-bottom: 2px solid var(--theme-secondary);
  /* Amélioration : éviter les cassures de ligne */
  white-space: nowrap;
  /* Amélioration : tri visuel possible */
  cursor: pointer;
  transition: background-color var(--transition-speed) ease;
}

/* 
 * Effet de survol pour les en-têtes (si tri activé)
 */
.conteneur table th:hover {
  background-color: var(--theme-accent);
}

/* 
 * Cellules de données des tableaux
 * Design adaptatif avec transitions fluides
 */
.conteneur table td {
  padding: var(--spacing-sm) var(--spacing-md);
  border-bottom: 1px solid var(--theme-secondary);
  color: var(--theme-text);
  transition: all var(--transition-speed) ease;
  /* Amélioration : gestion du contenu long */
  word-wrap: break-word;
  vertical-align: top;
}

/* 
 * Alternance des couleurs de lignes (zebra striping)
 * Améliore la lisibilité des données
 */
.conteneur table tr:nth-child(even) {
  background-color: var(--theme-tertiary);
}

.conteneur table tr:nth-child(odd) {
  background-color: var(--theme-background);
}

/* 
 * Effets de survol pour les lignes de tableau
 * Améliore l'expérience utilisateur lors de la lecture
 */
.conteneur table tr:hover {
  background-color: var(--theme-secondary) !important;
  transform: translateX(3px);
  box-shadow: var(--theme-section-shadow);
}

.conteneur table tr:hover td {
  color: var(--theme-text);
  font-weight: 500;
}

/* 
 * Légendes de tableaux
 * Information contextuelle sur le contenu du tableau
 */
.conteneur table caption {
  caption-side: top;
  text-align: left;
  font-style: italic;
  margin-bottom: var(--spacing-sm);
  color: var(--theme-text);
  font-weight: 600;
  padding: var(--spacing-sm) 0;
}

/* 
 * TRANSFORMATION RESPONSIVE DES TABLEAUX
 * Sur petits écrans, les tableaux deviennent des cartes empilées
 * Appliqué automatiquement en dessous de 768px
 */
@media (max-width: 767px) {
  /* Transformation complète en mode carte */
  .conteneur table,
  .conteneur table thead,
  .conteneur table tbody,
  .conteneur table th,
  .conteneur table td,
  .conteneur table tr {
    display: block;
  }

  /* Masquage des en-têtes sur mobile */
  .conteneur table thead tr {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }

  /* Chaque ligne devient une carte */
  .conteneur table tr {
    border: 2px solid var(--theme-primary);
    border-radius: var(--border-radius-lg);
    margin-bottom: var(--spacing-md);
    padding: var(--spacing-md);
    background: var(--theme-tertiary);
    box-shadow: var(--theme-section-shadow);
  }

  /* Transformation des cellules en lignes étiquetées */
  .conteneur table td {
    border: none;
    position: relative;
    padding-left: 35%;
    padding-bottom: var(--spacing-sm);
    border-bottom: 1px solid var(--theme-secondary);
  }

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

  /* Étiquettes générées automatiquement */
  .conteneur table td:before {
    content: attr(data-label) ": ";
    position: absolute;
    left: 6px;
    width: 30%;
    padding-right: var(--spacing-xs);
    white-space: nowrap;
    font-weight: 600;
    color: var(--theme-primary);
    background: var(--theme-secondary);
    padding: var(--spacing-xs);
    border-radius: var(--border-radius-sm);
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
  }
}

/* ====================================================================
   5. GRILLES DYNAMIQUES
==================================================================== */

/* 
 * Système de grilles adaptatives pour l'affichage de cartes
 * Utilise CSS Grid pour un alignement parfait sur tous les écrans
 * Nombre de colonnes automatiquement adapté selon la taille d'écran
 */
.conteneur.dynamique .grid {
  display: grid;
  /* Colonnes adaptatives : minimum 280px, maximum égal selon l'espace */
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--spacing-lg);
  margin-top: var(--spacing-md);
  /* Amélioration : alignement des éléments */
  align-items: start;
  /* Amélioration : largeur maximale pour très grands écrans */
  max-width: 100%;
}

/* 
 * Cartes individuelles dans la grille
 * Design cohérent avec effets de survol interactifs
 * Optimisées pour le contenu éducatif
 */
.conteneur.dynamique .card {
  background-color: var(--theme-tertiary);
  border: 2px solid var(--theme-primary);
  border-radius: var(--border-radius-lg);
  padding: var(--spacing-lg);
  box-shadow: var(--theme-section-shadow);
  transition: all var(--transition-speed) ease;
  /* Amélioration : hauteur cohérente */
  min-height: 200px;
  /* Amélioration : disposition flex pour le contenu */
  display: flex;
  flex-direction: column;
  /* Amélioration : éviter les débordements */
  overflow: hidden;
}

/* 
 * Effet de survol pour les cartes
 * Animation subtile qui améliore l'interactivité
 */
.conteneur.dynamique .card:hover {
  transform: var(--theme-section-hover-transform, translateY(-5px));
  box-shadow: var(--theme-card-shadow);
  border-color: var(--theme-accent);
  /* Amélioration : transition de couleur de fond */
  background-color: var(--theme-secondary);
}

/* 
 * Titres des cartes
 * Design cohérent avec hiérarchie visuelle claire
 */
.conteneur.dynamique .card h4 {
  margin: 0 0 var(--spacing-sm) 0;
  font-size: var(--font-size-lg);
  color: var(--theme-primary);
  border-bottom: 2px solid var(--theme-primary);
  padding-bottom: var(--spacing-xs);
  /* Amélioration : éviter les débordements de titre */
  word-wrap: break-word;
  /* Amélioration : transition de couleur */
  transition: color var(--transition-speed) ease;
}

/* 
 * Changement de couleur du titre au survol de la carte
 */
.conteneur.dynamique .card:hover h4 {
  color: var(--theme-accent);
}

/* 
 * Contenu textuel des cartes
 * Lisibilité optimisée avec espacement approprié
 */
.conteneur.dynamique .card p {
  margin: var(--spacing-xs) 0;
  line-height: 1.6;
  color: var(--theme-text);
  font-size: var(--font-size-base);
  /* Amélioration : flex-grow pour remplir l'espace */
  flex-grow: 1;
  /* Amélioration : gestion du texte long */
  overflow-wrap: break-word;
}

/* 
 * États d'affichage pour les grilles
 * Système de toggle pour montrer/cacher le contenu
 */
.conteneur.dynamique .grid.contenu {
  display: none;
  /* Amélioration : transition fluide */
  opacity: 0;
  transition: opacity var(--transition-speed) ease;
}

/* 
 * État actif des grilles
 * Grille visible avec animation d'apparition
 */
.conteneur.dynamique .grid.contenu.active {
  display: grid;
  opacity: 1;
  /* Amélioration : animation d'entrée */
  animation: fadeInGrid 0.6s ease-out;
}

/* 
 * Animation d'apparition des grilles
 */
@keyframes fadeInGrid {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ====================================================================
   6. CONTENEURS SPÉCIALISÉS
==================================================================== */

/* 
 * CONTENEUR PDF
 * Affichage optimisé pour les documents PDF intégrés
 * Hauteur adaptative selon la taille d'écran
 */
.conteneur.pdf .contenu {
  display: none;
  width: 100%;
  height: 700px;
  margin-top: var(--spacing-md);
  border-radius: var(--border-radius-md);
  overflow: hidden;
  /* Amélioration : transition fluide */
  transition: height var(--transition-speed) ease;
  /* Amélioration : ombre pour délimiter la zone */
  box-shadow: var(--theme-section-shadow);
}

/* 
 * iframe pour l'affichage PDF
 * Intégration transparente dans le design
 */
.conteneur.pdf iframe {
  width: 100%;
  height: 100%;
  border: none;
  border-radius: var(--border-radius-md);
  /* Amélioration : fond de chargement */
  background-color: var(--theme-background);
}

/* 
 * CONTENEUR AUDIO
 * Optimisé pour l'affichage de contenu audio éducatif
 */
.conteneur.audio .contenu {
  display: none;
  padding: var(--spacing-md);
  /* Amélioration : fond distinctif pour l'audio */
  background: linear-gradient(135deg, var(--theme-background), var(--theme-tertiary));
  border-radius: var(--border-radius-md);
}

/* 
 * Lecteur audio intégré
 * Style cohérent avec le thème du site
 */
.conteneur.audio audio {
  width: 100%;
  margin: var(--spacing-sm) 0;
  /* Amélioration : hauteur standardisée */
  height: 60px;
  /* Amélioration : style cohérent */
  border-radius: var(--border-radius-sm);
  background-color: var(--theme-secondary);
}

/* 
 * CONTENEUR TEXTE
 * Optimisé pour l'affichage de contenu textuel long
 */
.conteneur.texte .contenu {
  line-height: 1.6;
  font-size: var(--font-size-base);
  /* Amélioration : largeur optimale pour la lecture */
  max-width: 100%;
  /* Amélioration : espacement des paragraphes */
  text-align: justify;
}

/* 
 * Paragraphes dans les conteneurs texte
 */
.conteneur.texte .contenu p {
  margin-bottom: var(--spacing-md);
}

/* 
 * CONTENEUR LIEN
 * Affichage optimisé pour les liens externes et internes
 */
.conteneur.lien h3 {
  margin: 0;
  /* Amélioration : indicateur visuel de lien */
  position: relative;
}

/* 
 * Icône de lien externe (ajoutée automatiquement)
 */
.conteneur.lien h3::after {
  content: " 🔗";
  font-size: 0.8em;
  opacity: 0.7;
}

/* 
 * Liens dans les conteneurs de type lien
 * Style cohérent avec navigation claire
 */
.conteneur.lien a {
  color: var(--theme-primary);
  text-decoration: none;
  font-weight: 600;
  transition: all var(--transition-speed) ease;
  /* Amélioration : zone de clic élargie */
  display: inline-block;
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--border-radius-sm);
}

/* 
 * Effet de survol pour les liens
 */
.conteneur.lien a:hover {
  color: var(--theme-accent);
  background-color: var(--theme-secondary);
  text-decoration: underline;
  transform: translateX(5px);
}

/* ====================================================================
   7. BOUTONS ET ÉLÉMENTS INTERACTIFS
==================================================================== */

/* === Boutons généraux === */
.conteneur button,
.section button {
  background-color: var(--theme-primary);
  color: var(--theme-button-primary-text, white);
  border: none;
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--border-radius-md);
  cursor: pointer;
  transition: all var(--transition-speed) ease;
  font-size: var(--font-size-base);
  font-weight: 500;
}

.conteneur button:hover,
.section button:hover {
  background-color: var(--theme-accent);
  transform: translateY(-2px);
  box-shadow: var(--theme-section-shadow);
}

/* === Groupes de boutons === */
.button-group {
  display: flex;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-md);
  flex-wrap: wrap;
}

.full-width-buttons {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  margin: var(--spacing-md) 0;
}

.full-width-buttons button {
  width: 100%;
  text-align: left;
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

/* ====================================================================
   8. RESPONSIVE DESIGN COMPLET - TOUS TYPES D'ÉCRANS
==================================================================== */

/* 
 * TRÈS PETITS TÉLÉPHONES (320px - 374px)
 * iPhone SE (1ère génération), petits Android
 * Optimisation maximale de l'espace, éléments empilés
 */
@media (max-width: 374px) {
  /* Conteneurs principaux */
  .main-content,
  .course-container {
    padding: var(--spacing-sm);
    margin: var(--spacing-xs);
  }

  .section {
    padding: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
    border-radius: var(--border-radius-sm);
  }

  /* Titres plus petits pour économiser l'espace */
  .section-title {
    font-size: var(--font-size-lg);
    white-space: normal;
    line-height: 1.3;
  }

  /* Conteneurs optimisés */
  .conteneur {
    padding: var(--spacing-sm);
    margin-top: var(--spacing-sm);
  }

  .conteneur h3 {
    padding: var(--spacing-xs);
    min-height: 44px;
    font-size: var(--font-size-base);
  }

  /* Grilles : une seule colonne */
  .conteneur.dynamique .grid {
    grid-template-columns: 1fr;
    gap: var(--spacing-sm);
  }

  .conteneur.dynamique .card {
    padding: var(--spacing-sm);
  }

  /* Tableaux : mode carte obligatoire */
  .conteneur table {
    font-size: var(--font-size-xs);
  }

  /* PDF plus petit */
  .conteneur.pdf .contenu {
    height: 300px;
  }

  /* Boutons pleine largeur */
  .button-group {
    flex-direction: column;
    gap: var(--spacing-xs);
  }

  .button-group button {
    padding: var(--spacing-sm);
    font-size: var(--font-size-sm);
  }
}

/* 
 * TÉLÉPHONES MOYENS (375px - 479px)
 * iPhone standard, Galaxy S, la plupart des smartphones
 * Équilibre entre espace et lisibilité
 */
@media (min-width: 375px) and (max-width: 479px) {
  .main-content,
  .course-container {
    padding: var(--spacing-md);
  }

  .section {
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-md);
  }

  .section-title {
    font-size: var(--font-size-xl);
  }

  /* Grilles : une colonne avec plus d'espace */
  .conteneur.dynamique .grid {
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
  }

  .conteneur.dynamique .card {
    padding: var(--spacing-md);
  }

  /* PDF taille moyenne */
  .conteneur.pdf .contenu {
    height: 400px;
  }

  /* Tableaux responsive améliorés */
  .conteneur table th,
  .conteneur table td {
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: var(--font-size-sm);
  }
}

/* 
 * GRANDS TÉLÉPHONES (480px - 767px)
 * iPhone Plus, Galaxy Note, téléphones larges
 * Possibilité d'afficher 2 colonnes pour certains éléments
 */
@media (min-width: 480px) and (max-width: 767px) {
  .main-content {
    padding: var(--spacing-lg);
  }

  /* Grilles : 2 colonnes possibles pour les cartes */
  .conteneur.dynamique .grid {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--spacing-md);
  }

  /* PDF taille normale */
  .conteneur.pdf .contenu {
    height: 500px;
  }

  /* Boutons : possibilité de 2 par ligne */
  .button-group {
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
  }

  .button-group button {
    flex: 1 1 calc(50% - var(--spacing-sm)/2);
    min-width: 120px;
  }

  /* Tableaux : encore en mode responsive mais plus spacieux */
  .conteneur table th,
  .conteneur table td {
    padding: var(--spacing-sm);
    font-size: var(--font-size-base);
  }
}

/* 
 * PETITES TABLETTES (768px - 1023px)
 * iPad standard, tablettes Android moyennes
 * Mise en page hybride, plus d'éléments côte à côte
 */
@media (min-width: 768px) and (max-width: 1023px) {
  .main-content {
    padding: var(--spacing-xl);
    max-width: 90%;
  }

  .course-container {
    max-width: 95%;
    padding: var(--spacing-lg);
  }

  /* Grilles : 2-3 colonnes selon la place */
  .conteneur.dynamique .grid {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--spacing-lg);
  }

  /* PDF grande taille */
  .conteneur.pdf .contenu {
    height: 600px;
  }

  /* Retour aux tableaux normaux */
  .conteneur table {
    display: table;
  }

  .conteneur table th,
  .conteneur table td {
    padding: var(--spacing-sm) var(--spacing-md);
  }

  /* Boutons : retour à la mise en page normale */
  .button-group {
    flex-direction: row;
    gap: var(--spacing-md);
  }

  .button-group button {
    flex: none;
    min-width: 150px;
  }
}

/* 
 * TABLETTES MOYENNES / ORDINATEURS PORTABLES (1024px - 1199px)
 * iPad Pro, ordinateurs portables standard
 * Mise en page desktop avec optimisations pour écrans moyens
 */
@media (min-width: 1024px) and (max-width: 1199px) {
  .main-content {
    max-width: 85%;
    padding: var(--spacing-xl);
  }

  .course-container {
    max-width: 90%;
  }

  /* Grilles : 3-4 colonnes */
  .conteneur.dynamique .grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--spacing-lg);
  }

  /* PDF pleine taille */
  .conteneur.pdf .contenu {
    height: 700px;
  }

  /* Sections : possibilité de layout plus complexe */
  .section {
    padding: var(--spacing-xl);
  }

  /* Tableaux : espacement généreux */
  .conteneur table th,
  .conteneur table td {
    padding: var(--spacing-md);
  }
}

/* 
 * ORDINATEURS DE BUREAU MOYENS (1200px - 1439px)
 * Écrans desktop standard, la plupart des ordinateurs de bureau
 * Mise en page desktop complète avec largeurs optimisées
 */
@media (min-width: 1200px) and (max-width: 1439px) {
  .main-content {
    max-width: 80%;
    padding: var(--spacing-xl);
  }

  .course-container {
    max-width: 85%;
  }

  /* Grilles : 4-5 colonnes possibles */
  .conteneur.dynamique .grid {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--spacing-xl);
  }

  /* Optimisation pour la lecture : largeur de texte limitée */
  .contenu {
    max-width: 100%;
    line-height: 1.7;
  }

  /* Tableaux : espacement desktop */
  .conteneur table th,
  .conteneur table td {
    padding: var(--spacing-md) var(--spacing-lg);
  }

  /* Boutons : plus d'espace */
  .button-group {
    gap: var(--spacing-lg);
  }
}

/* 
 * GRANDS ÉCRANS (1440px - 1919px)
 * Écrans 24", 27", écrans gaming
 * Optimisation pour grands espaces avec limitations de largeur pour la lisibilité
 */
@media (min-width: 1440px) and (max-width: 1919px) {
  .main-content {
    max-width: 75%;
    padding: var(--spacing-xl);
  }

  .course-container {
    max-width: 80%;
  }

  /* Grilles : jusqu'à 5-6 colonnes */
  .conteneur.dynamique .grid {
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--spacing-xl);
  }

  /* Conteneurs : largeur maximale pour éviter les lignes trop longues */
  .conteneur {
    max-width: 100%;
  }

  .contenu {
    max-width: 100%;
    line-height: 1.8;
    font-size: calc(var(--font-size-base) * 1.1);
  }

  /* Sections : plus d'espace vertical */
  .section {
    padding: var(--spacing-xl) var(--spacing-2xl);
    margin-bottom: var(--spacing-xl);
  }
}

/* 
 * TRÈS GRANDS ÉCRANS (1920px+)
 * Écrans 32"+, écrans ultra-wide, configurations multi-écrans
 * Mise en page optimisée pour afficher plus de contenu sans augmenter les espacements
 */
@media (min-width: 1920px) {
    .main-content {
        max-width: 85%;
        /* Maintien des espacements cohérents avec les autres tailles d'écran */
        padding: var(--spacing-xl);
        margin-left: auto;
        margin-right: auto;
    }

    .course-container {
        max-width: 90%;
        padding: var(--spacing-lg);
    }

    /* Grilles : plus d'éléments par ligne (colonnes plus étroites) */
    .conteneur.dynamique .grid {
        /* Réduction de la taille minimum pour permettre plus de colonnes */
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
        gap: var(--spacing-lg);
        max-width: 100%;
    }

    /* Maintien de la taille de typographie cohérente */
    .contenu {
        font-size: var(--font-size-base);
        line-height: 1.7;
        max-width: 100%;
    }

    .section-title {
        font-size: var(--font-size-xl);
    }

    /* Espacement cohérent avec les autres breakpoints */
    .section {
        padding: var(--spacing-xl);
        margin-bottom: var(--spacing-lg);
    }

    /* Tableaux : espacements cohérents avec plus de contenu visible */
    .conteneur table th,
    .conteneur table td {
        padding: var(--spacing-md);
        font-size: var(--font-size-base);
    }

    /* PDF : taille standard */
    .conteneur.pdf .contenu {
        height: 700px;
        max-width: 100%;
    }
}

/* 
 * OPTIMISATIONS SPÉCIALES POUR ÉCRANS TRÈS LARGES
 * Gestion des écrans ultra-wide (21:9, 32:9)
 */
@media (min-width: 2560px) {
  .main-content,
  .course-container {
    max-width: 60%;
  }

  /* Limitation de la largeur des grilles pour éviter la dispersion */
  .conteneur.dynamique .grid {
    max-width: 80%;
    margin: 0 auto;
  }

  /* Centrage du contenu textuel */
  .contenu {
    max-width: 90%;
    margin: 0 auto;
  }
}

/* 
 * OPTIMISATIONS POUR ÉCRANS EN MODE PORTRAIT
 * Tablettes retournées, écrans pivotés
 */
@media (orientation: portrait) and (min-width: 768px) {
  /* Ajustement des grilles pour le mode portrait */
  .conteneur.dynamique .grid {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  }

  /* PDF adapté au mode portrait */
  .conteneur.pdf .contenu {
    height: 60vh;
  }
}

/* 
 * OPTIMISATIONS POUR ÉCRANS HAUTE DENSITÉ
 * Retina, 4K, écrans haute résolution
 */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  /* Amélioration des bordures et ombres pour haute résolution */
  .section,
  .conteneur,
  .conteneur.dynamique .card {
    box-shadow: var(--theme-section-shadow);
  }

  /* Texte légèrement plus grand pour compenser la haute densité */
  .contenu {
    font-size: calc(var(--font-size-base) * 1.05);
  }
}

/* ====================================================================
   9. ÉTATS ET ANIMATIONS
==================================================================== */

/* === États d'affichage === */
.contenu.active {
  display: block;
}

.conteneur.expanded h3 span {
  transform: rotate(180deg);
}

/* === Animations d'entrée === */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.conteneur.animate-in {
  animation: fadeInUp 0.6s ease-out;
}

/* === Réduction d'animations pour accessibilité === */
@media (prefers-reduced-motion: reduce) {
  .section,
  .conteneur,
  .conteneur.dynamique .card {
    transition: none;
  }

  .section:hover,
  .conteneur.dynamique .card:hover {
    transform: none;
  }
}

/* ====================================================================
   10. UTILITIES ET HELPERS
==================================================================== */

/* === Classes utilitaires === */
.text-center {
  text-align: center;
}

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

.hidden {
  display: none !important;
}

.visible {
  display: block !important;
}

.no-margin {
  margin: 0 !important;
}

.no-padding {
  padding: 0 !important;
}

/* === Espacement responsive === */
.spacing-xs { margin: var(--spacing-xs); }
.spacing-sm { margin: var(--spacing-sm); }
.spacing-md { margin: var(--spacing-md); }
.spacing-lg { margin: var(--spacing-lg); }
.spacing-xl { margin: var(--spacing-xl); }

/* === Fin du fichier === */