/* =========================================================
   🎨 STYLE BONUS GLOBAL (par défaut pour tous les tableaux)
   ========================================================= */
.article-content table {
  border-collapse: collapse;
  width: 100%;
  margin: 1.5em 0;
  font-family: Arial, sans-serif;
  font-size: 14px;
  border-radius: 6px;          /* coins arrondis */
  overflow: hidden;            /* pour appliquer les coins arrondis */
  box-shadow: 0 2px 6px rgba(0,0,0,0.1); /* ombre douce */
}

.article-content th,
.article-content td {
  border: 1px solid #ddd;
  padding: 8px 12px;
  text-align: left;
}

.article-content th {
  background-color: #f2f2f2;
  font-weight: bold;
  color: #333;
}

.article-content tr:nth-child(even) {
  background-color: #fafafa;
}

.article-content tr:hover {
  background-color: #e6f2ff;   /* bleu clair au survol */
  transform: scale(1.01);      /* léger effet loupe */
  transition: all 0.2s ease;
}

/* =========================================================
   📊 STYLE 1 : CLAIR façon Excel
   (à activer avec class="table-excel" dans JCE)
   ========================================================= */
.table-excel {
  border-collapse: collapse;
  width: 100%;
  font-family: Arial, sans-serif;
  font-size: 14px;
}

.table-excel th,
.table-excel td {
  border: 1px solid #ccc;
  padding: 8px 12px;
  text-align: left;
}

.table-excel th {
  background-color: #f2f2f2;
  font-weight: bold;
}

.table-excel tr:nth-child(even) {
  background-color: #fafafa;
}

.table-excel tr:hover {
  background-color: #e6f2ff;
}

/* =========================================================
   🌙 STYLE 2 : SOMBRE élégant
   (à activer avec class="table-dark" dans JCE)
   ========================================================= */
.table-dark {
  border-collapse: collapse;
  width: 100%;
  background-color: #2b2b2b;
  color: #eee;
  font-family: Arial, sans-serif;
  font-size: 14px;
  border-radius: 6px;
  overflow: hidden;
}

.table-dark th,
.table-dark td {
  border: 1px solid #555;
  padding: 10px 14px;
  text-align: left;
}

.table-dark th {
  background-color: #444;
  color: #fff;
}

.table-dark tr:nth-child(even) {
  background-color: #333;
}

.table-dark tr:hover {
  background-color: #555;
  transition: background 0.3s ease;
}

/* =========================================================
   💎 STYLE 3 : MODERNE avec ombre et arrondis
   (à activer avec class="table-modern" dans JCE)
   ========================================================= */
.table-modern {
  border-collapse: collapse;
  width: 100%;
  font-family: Arial, sans-serif;
  font-size: 14px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.table-modern th,
.table-modern td {
  border: 1px solid #ddd;
  padding: 10px 14px;
  text-align: left;
}

.table-modern th {
  background-color: #f9f9f9;
  font-weight: bold;
  color: #333;
}

.table-modern tr:nth-child(even) {
  background-color: #fdfdfd;
}

.table-modern tr:hover {
  background-color: #f0f8ff;
  transform: scale(1.01);
  transition: all 0.2s ease;
}

/* =========================================================
   📚 TABLE OF CONTENTS (TOC) — Styles pour module sticky
   - Colle ce bloc à la fin de /media/templates/site/cassiopeia_child/css/user.css
   - Utilise Module Class Suffix " toc-module" sur ton module pour cibler .toc-module
   - Ajuste la valeur `--toc-top-offset` si ton header fixe est plus haut
   ========================================================= */

/* Variable CSS pour ajuster facilement l'offset du header */
:root {
  --toc-top-offset: 90px; /* distance entre le haut de la fenêtre et la TOC sticky */
  --toc-vertical-gap: 20px; /* marge verticale autour de la TOC */
}

/* Conteneur parent de la sidebar : s'assure que le positionnement relatif est défini */
.sidebar-right,
.position-7,
.position-8 { /* ajoute ici les positions possibles de ton template si nécessaire */
  position: relative;
}

/* Classe appliquée via Module Class Suffix : .toc-module
   - width: 100% pour que la TOC prenne la largeur de la colonne
   - utile si le module est dans une colonne étroite */
.toc-module {
  width: 100%;
  box-sizing: border-box;
}

/* Sélecteur principal de la TOC générée par Table Of Contents CK
   - .toc et .toc-list sont des classes courantes ; adapte si ton plugin génère d'autres classes */
.toc-module .toc,
.toc-module .toc-list {
  /* Sticky natif : fonctionne si aucun parent n'a overflow:hidden/transform */
  position: -webkit-sticky;
  position: sticky;
  top: var(--toc-top-offset); /* laisse de la place pour le header fixe */
  max-height: calc(100vh - (var(--toc-top-offset) + var(--toc-vertical-gap)));
  overflow: auto; /* permet le scroll interne si la TOC est longue */
  padding: 12px;
  margin-bottom: var(--toc-vertical-gap);
  background: #ffffff; /* fond blanc pour lisibilité */
  border-radius: 6px;
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  z-index: 20; /* au-dessus du contenu mais en dessous des modals */
  -webkit-overflow-scrolling: touch; /* inertie sur iOS */
}

/* Style des liens de la TOC pour lisibilité et accessibilité */
.toc-module .toc a {
  color: #0b5ed7; /* couleur des liens */
  text-decoration: none;
  display: block;
  padding: 6px 4px;
  border-radius: 4px;
}
.toc-module .toc a:hover,
.toc-module .toc a:focus {
  background: rgba(11,94,215,0.06);
  outline: none;
}

/* Indentation des niveaux (H2/H3/H4) si le plugin ajoute des classes de niveau */
.toc-module .toc .toc-level-1 { padding-left: 0; }
.toc-module .toc .toc-level-2 { padding-left: 10px; }
.toc-module .toc .toc-level-3 { padding-left: 20px; }

/* Petite règle pour masquer le titre du module si tu veux uniquement la liste */
.toc-module .module-title { display: none; }

/* =========================================================
   ⚠️ Fallback JavaScript hint (si position:sticky ne fonctionne pas)
   - Si le parent a overflow:hidden ou transform, sticky natif peut échouer.
   - Le script JS suivant (à ajouter dans le footer du template enfant)
     émule le comportement sticky en position:fixed.
   - Ne colle pas le JS ici ; place‑le dans le fichier JS du template ou via l'option d'injection.
   ========================================================= */
/*
<script>
document.addEventListener('DOMContentLoaded', function() {
  var toc = document.querySelector('.toc-module .toc');
  if (!toc) return;
  var parent = toc.parentElement;
  var topSpacing = parseInt(getComputedStyle(document.documentElement).getPropertyValue('--toc-top-offset')) || 90;
  var initialOffset = toc.getBoundingClientRect().top + window.pageYOffset;
  function onScroll() {
    if (window.pageYOffset + topSpacing > initialOffset) {
      toc.style.position = 'fixed';
      toc.style.top = topSpacing + 'px';
      toc.style.width = parent.offsetWidth + 'px';
    } else {
      toc.style.position = '';
      toc.style.top = '';
      toc.style.width = '';
    }
  }
  window.addEventListener('scroll', onScroll);
  window.addEventListener('resize', function() {
    toc.style.width = parent.offsetWidth + 'px';
  });
});
</script>
*/

/* =========================================================
   📱 Règles mobiles
   - Sur petits écrans, la TOC devient statique pour ne pas gêner l'affichage
   - Optionnel : masquer complètement la TOC sur mobile en décommentant la ligne display:none
   ========================================================= */
@media (max-width: 991px) {
  .toc-module .toc,
  .toc-module .toc-list {
    position: static;
    max-height: none;
    overflow: visible;
    box-shadow: none;
    background: transparent;
  }
  /* .toc-module { display: none; }  Uncomment to hide TOC on mobile */
}

/* =========================================================
   ✅ Conseils d'utilisation rapide
   - Ajoute " toc-module" (avec espace) dans Module Class Suffix du module Sourcerer
   - Active Prepare Content = Oui dans les options du module
   - Ajuste --toc-top-offset si ton header fixe est plus haut (ex: 120px)
   - Purge cache Joomla et CDN après modification
   ========================================================= */