/* --------------------------------------------------------------------
    Titre: Tableaux adaptatifs
   Version: 1.0
   Auteur: Emile SNYERS
   Emile SNYERS - Tous droits réservés - 2025
   Rappel : Tous utilisateur, vous devez respecter les conditions de la licence 
            -  Vous pouvez utiliser ce code pour un usage non commercial.
            -  Vous devez attribuer l'œuvre à l'auteur original (Emile SNYERS).
            -  Vous devres toujour citer le lien vers l'œuvre originale ou son auteur.
            -  Vous devez partager les œuvres dérivées sous la même licence.
   -------------------------------------------------------------------- */


/*
+---------------------------------------------+
|              TABLEAUX ADAPTATIFS            |
+---------------------------------------------+
|                                             |
| Ce fichier définit le style des tableaux    |
| qui s'adaptent automatiquement aux          |
| différentes tailles d'écran:                |
|                                             |
| 1. Desktop: Affichage de tableau classique  |
| 2. Tablette: Format carte avec étiquettes   |
| 3. Mobile: Format compact empilé            |
|                                             |
| Structure générale:                         |
|                                             |
| Desktop:      Tablette/Mobile:              |
| +--------+    +-------------------+         |
| |TH|TH|TH|    | Label: Valeur     |         |
| +--------+    | Label: Valeur     |         |
| |TD|TD|TD| -> +-------------------+         |
| +--------+    +-------------------+         |
| |TD|TD|TD|    | Label: Valeur     |         |
| +--------+    | Label: Valeur     |         |
|               +-------------------+         |
|                                             |
+---------------------------------------------+
*/

/* Tableaux adaptatifs */

/* ====================================================================
    VOTRE CSS AMÉLIORÉ - TABLEAUX RESPONSIVE
    ==================================================================== */

/* Variables nécessaires */
/* Ces variables CSS permettent la personnalisation et la cohérence du design */
:root {
  /* Contrôle la vitesse et le type de transition pour les animations */
  --table-transition: all 0.3s ease;
  
  /* Espace entre les cartes en mode responsive */
  --table-card-gap: 1rem;
  
  /* Rayon des coins des cartes en mode responsive */
  --table-card-radius: var(--border-radius-lg, 12px);
  
  /* Espacement interne des éléments dans les cartes */
  --card-item-padding: var(--spacing-sm, 0.5rem) 0;
  
  /* Marge des séparateurs entre les éléments des cartes */
  --card-separator-margin: var(--spacing-xs, 0.25rem) 0;
  
  /* Style de la ligne séparatrice entre les éléments */
  --card-separator-style: 2px solid var(--theme-secondary);
  
  /* Taille de texte adaptée pour les écrans mobiles */
  --table-mobile-font-size: calc(0.9rem * var(--font-size-multiplier, 1));
}

/* CSS DE BASE - VOTRE STYLE DESKTOP CONSERVÉ */
/* Style principal du tableau pour les écrans larges */
.element-Du-Cours-table {
  /* Occupe toute la largeur disponible */
  width: 100%;
  
  /* Empêche la fusion des bordures entre les cellules */
  border-collapse: separate;
  
  /* Supprime l'espacement par défaut entre les cellules */
  border-spacing: 0;
  
  /* Arrondit les coins du tableau entier */
  border-radius: var(--border-radius-md);
  
  /* Masque tout contenu qui dépasse les bordures */
  overflow: hidden;
  
  /* Ajoute une bordure autour du tableau */
  border: 1px solid var(--theme-primary);
  
  /* Ajoute une ombre portée pour un effet de profondeur */
  box-shadow: var(--theme-section-shadow);
  
  /* Centre le tableau avec une marge verticale */
  margin: 20px auto;
  
  /* Définit la taille de police pour le contenu */
  font-size: var(--font-size-sm);
  
  /* Force le comportement de tableau */
  display: table;
  
  /* Animation douce lors des changements */
  transition: var(--table-transition);
}

/* Style des en-têtes de colonnes (cellules th) */
.element-Du-Cours-table th {
  /* Couleur de fond pour les en-têtes */
  background-color: var(--theme-primary);
  
  /* Couleur de texte contrastante */
  color: var(--theme-button-primary-text, white);
  
  /* Aligne le texte à gauche */
  text-align: left;
  
  /* Espacement interne */
  padding: 12px 15px;
  
  /* Taille de police légèrement plus grande que les cellules */
  font-size: var(--font-size-base);
  
  /* Police de caractère spécifique */
  font-family: var(--theme-font-family, 'Georgia', serif);
  
  /* Texte en semi-gras pour se démarquer */
  font-weight: 600;
}

/* Arrondit le coin supérieur gauche du tableau */
.element-Du-Cours-table tr:first-child th:first-child {
  border-top-left-radius: var(--border-radius-md);
}

/* Arrondit le coin supérieur droit du tableau */
.element-Du-Cours-table tr:first-child th:last-child {
  border-top-right-radius: var(--border-radius-md);
}

/* Style des cellules de données (td) */
.element-Du-Cours-table td {
  /* Espacement interne */
  padding: 10px 15px;
  
  /* Bordure inférieure pour séparer visuellement les lignes */
  border-bottom: 1px solid var(--theme-secondary);
  
  /* Taille de police pour le contenu */
  font-size: var(--font-size-sm);
  
  /* Police de caractère cohérente avec les en-têtes */
  font-family: var(--theme-font-family, 'Georgia', serif);
  
  /* Animation des cellules au survol */
  transition: transform var(--transition-speed) ease, background-color var(--transition-speed) ease;
}

/* Style pour les lignes impaires - effet zébré */
.element-Du-Cours-table tr:nth-child(odd) {
  background-color: var(--theme-background);
}

/* Style pour les lignes paires - effet zébré */
.element-Du-Cours-table tr:nth-child(even) {
  background-color: var(--theme-tertiary);
}

/* Arrondit le coin inférieur gauche du tableau */
.element-Du-Cours-table tr:last-child td:first-child {
  border-bottom-left-radius: var(--border-radius-md);
}

/* Arrondit le coin inférieur droit du tableau */
.element-Du-Cours-table tr:last-child td:last-child {
  border-bottom-right-radius: var(--border-radius-md);
}

/* Effet au survol des lignes complètes */
.element-Du-Cours-table tr:hover {
  background-color: var(--theme-secondary);
}

/* Effet au survol des cellules individuelles */
.element-Du-Cours-table td:hover {
  /* Décale légèrement la cellule à droite */
  transform: translateX(3px);
  
  /* Change la couleur du texte */
  color: var(--theme-primary);
  
  /* Change la couleur de fond */
  background-color: var(--theme-secondary);
}

/* MODE RESPONSIVE - CARTES AVEC BORDURES */
/* Adaptation pour tablettes et appareils mobiles larges */
@media (max-width: 768px) {
  /* 
   * Transformation du tableau:
   * +--------+    +-------------------+
   * |TH|TH|TH|    | Label: Valeur     |
   * +--------+    | Label: Valeur     |
   * |TD|TD|TD| -> +-------------------+
   * +--------+    +-------------------+
   * |TD|TD|TD|    | Label: Valeur     |
   * +--------+    | Label: Valeur     |
   *               +-------------------+
   */
  
  /* Modifie le comportement du tableau */
  .element-Du-Cours-table {
    /* Change l'affichage en bloc plutôt qu'en tableau */
    display: block;
    
    /* Supprime les bordures du tableau principal */
    border: none;
    
    /* Supprime l'ombre du tableau principal */
    box-shadow: none;
    
    /* Supprime les marges */
    margin: 0;
  }
  
  /* Style pour la légende du tableau (si présente) */
  .element-Du-Cours-table caption {
    /* Affiche la légende comme un bloc */
    display: block;
    
    /* Augmente la taille de police */
    font-size: var(--font-size-lg);
    
    /* Texte en semi-gras */
    font-weight: 600;
    
    /* Couleur de texte pour les titres */
    color: var(--theme-text-titre);
    
    /* Marge inférieure */
    margin-bottom: var(--spacing-md);
    
    /* Centre le texte */
    text-align: center;
    
    /* Espacement interne */
    padding: var(--spacing-md);
    
    /* Couleur de fond */
    background: var(--theme-secondary);
    
    /* Arrondit uniquement les coins supérieurs */
    border-radius: var(--border-radius-md) var(--border-radius-md) 0 0;
    
    /* Bordure plus épaisse */
    border: 3px solid var(--theme-primary);
    
    /* Supprime la bordure inférieure */
    border-bottom: none;
  }
  
  /* Masque les en-têtes du tableau */
  .element-Du-Cours-table thead {
    display: none;
  }
  
  /* Transforme le corps du tableau en bloc */
  .element-Du-Cours-table tbody {
    display: block;
  }
  
  /* Transforme chaque ligne en carte indépendante */
  .element-Du-Cours-table tr {
    /* Affichage en bloc */
    display: block;
    
    /* Couleur de fond pour les cartes */
    background: var(--theme-tertiary);
    
    /* Bordure épaisse pour les cartes */
    border: 3px solid var(--theme-primary);
    
    /* Coins arrondis */
    border-radius: var(--table-card-radius);
    
    /* Espace entre les cartes */
    margin-bottom: var(--table-card-gap);
    
    /* Espacement interne généreux */
    padding: var(--spacing-lg);
    
    /* Ombre portée pour l'effet de carte */
    box-shadow: var(--theme-section-shadow);
    
    /* Animation douce */
    transition: var(--table-transition);
  }
  
  /* Effet au survol des cartes */
  .element-Du-Cours-table tr:hover {
    /* Soulève légèrement la carte */
    transform: translateY(-3px);
    
    /* Accentue l'ombre pour l'effet de profondeur */
    box-shadow: var(--theme-card-shadow);
  }
  
  /* Réorganise les cellules en format label:valeur */
  .element-Du-Cours-table td {
    /* Affichage flexible pour alignement */
    display: flex;
    
    /* Centre verticalement le contenu */
    align-items: center;
    
    /* Espacement interne */
    padding: var(--card-item-padding);
    
    /* Supprime les bordures standard */
    border: none;
    
    /* Ajoute une ligne séparatrice en bas */
    border-bottom: var(--card-separator-style);
    
    /* Aligne le texte à gauche */
    text-align: left;
    
    /* Nécessaire pour le positionnement du pseudo-élément */
    position: relative;
    
    /* Décale le contenu pour laisser place à l'étiquette */
    padding-left: 40%;
    
    /* Taille de police adaptée aux mobiles */
    font-size: var(--table-mobile-font-size);
    
    /* Marge verticale entre les éléments */
    margin: var(--card-separator-margin);
    
    /* Garantit une hauteur minimale */
    min-height: 40px;
  }
  
  /* Supprime la bordure inférieure du dernier élément */
  .element-Du-Cours-table td:last-child {
    border-bottom: none;
    margin-bottom: 0;
  }
  
  /* Crée les étiquettes à partir de l'attribut data-label */
  .element-Du-Cours-table td:before {
    /* Insère le contenu de data-label suivi de ":" */
    content: attr(data-label) ": ";
    
    /* Positionnement absolu par rapport à la cellule */
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    
    /* Espacement interne */
    padding: var(--card-item-padding);
    
    /* Texte en gras */
    font-weight: 700;
    
    /* Couleur du texte */
    color: var(--theme-text-titre);
    
    /* Couleur de fond de l'étiquette */
    background: var(--theme-secondary);
    
    /* Largeur fixe pour l'étiquette (35% de la cellule) */
    width: 35%;
    
    /* Aligne le texte à gauche */
    text-align: left;
    
    /* Taille de police adaptée aux mobiles */
    font-size: var(--table-mobile-font-size);
    
    /* Bordure droite pour séparer l'étiquette de la valeur */
    border-right: 3px solid var(--theme-primary);
    
    /* Marge droite */
    margin-right: var(--spacing-sm);
    
    /* Alignement vertical du texte */
    display: flex;
    align-items: center;
    
    /* Arrondit uniquement les coins gauches */
    border-radius: var(--border-radius-sm) 0 0 var(--border-radius-sm);
  }
  
  /* Effet au survol des cellules */
  .element-Du-Cours-table td:hover {
    /* Change la couleur de fond */
    background-color: var(--theme-background);
    
    /* Décale légèrement à droite */
    transform: translateX(5px);
    
    /* Change la couleur du texte */
    color: var(--theme-primary);
  }
  
  /* Effet au survol des étiquettes */
  .element-Du-Cours-table td:hover:before {
    /* Change la couleur de fond de l'étiquette */
    background: var(--theme-primary);
    
    /* Change la couleur du texte de l'étiquette */
    color: var(--theme-button-primary-text, white);
  }
}

/* MODE COMPACT */
/* Adaptation pour petits écrans mobiles */
@media (max-width: 576px) {
  /*
   * Format compact empilé:
   * +----------------+
   * |     Label      |
   * |     Valeur     |
   * +----------------+
   * |     Label      |
   * |     Valeur     |
   * +----------------+
   */
  
  /* Ajuste les cartes pour petit écran */
  .element-Du-Cours-table tr {
    /* Réduit le padding interne */
    padding: var(--spacing-md);
    
    /* Augmente l'espacement vertical entre les cartes */
    margin-bottom: var(--spacing-lg);
  }
  
  /* Réorganise les cellules en format empilé */
  .element-Du-Cours-table td {
    /* Supprime le décalage horizontal */
    padding-left: 0;
    
    /* Centre le contenu */
    text-align: center;
    
    /* Empile l'étiquette au-dessus de la valeur */
    flex-direction: column;
    
    /* Augmente la hauteur minimale */
    min-height: 60px;
  }
  
  /* Réorganise les étiquettes pour les mettre au-dessus */
  .element-Du-Cours-table td:before {
    /* Position normale dans le flux au lieu d'absolue */
    position: static;
    
    /* Affichage en bloc */
    display: block;
    
    /* Utilise toute la largeur disponible */
    width: 100%;
    
    /* Centre le texte */
    text-align: center;
    
    /* Ajoute une marge en bas */
    margin-bottom: var(--spacing-xs);
    
    /* Taille de police légèrement réduite */
    font-size: var(--font-size-sm);
    
    /* Couleur du texte */
    color: var(--theme-text-titre);
    
    /* Texte en gras */
    font-weight: 700;
    
    /* Bordure tout autour au lieu d'un seul côté */
    border: 2px solid var(--theme-primary);
    
    /* Coins arrondis */
    border-radius: var(--border-radius-md);
    
    /* Couleur de fond */
    background: var(--theme-secondary);
    
    /* Supprime la marge droite */
    margin-right: 0;
    
    /* Espacement interne réduit */
    padding: var(--spacing-sm);
  }
  
  /* Effet au survol des étiquettes */
  .element-Du-Cours-table td:hover:before {
    /* Change la couleur de fond */
    background: var(--theme-primary);
    
    /* Change la couleur du texte */
    color: var(--theme-button-primary-text, white);
  }
}

/* Classes utilitaires */
/* Pour masquer des éléments sur les écrans moyens et petits */
@media (max-width: 768px) {
  /* Masque complètement les éléments sur tablette et mobile */
  .hide-mobile {
    display: none !important;
  }
}

/* Pour masquer des éléments uniquement sur les très petits écrans */
@media (max-width: 576px) {
  /* Masque complètement les éléments sur petits mobiles */
  .hide-small {
    display: none !important;
  }
}

/* Animation */
/* Ajoute une animation d'apparition aux lignes en mode responsive */
@media (max-width: 768px) {
  /* Animation de chaque ligne/carte apparaissant du bas vers le haut */
  .element-Du-Cours-table tr {
    animation: slideInUp 0.4s ease-out;
  }
}

/* Définition de l'animation slideInUp */
@keyframes slideInUp {
  /* État initial: invisible et décalé vers le bas */
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  /* État final: visible et à sa position normale */
  to {
    opacity: 1;
    transform: translateY(0);
  }
}