/* ==========================================================================
   ADAOZIK-MUSIC — THEME ACADEMIQUE / CONSERVATOIRE (BLEU & DORE)
   Fichier complet, propre et optimisé
   ========================================================================== */

/* 1. TYPOGRAPHIES ACADEMIQUES */
@import url('https://fonts.googleapis.com/css2?family=Merriweather:wght@400;700&family=Source+Sans+3:wght@400;600;700&display=swap');

/* 2. VARIABLES GLOBALES */
:root {
  --site-bleu: #244b73;
  --site-bleu-fonce: #14283c;
  --site-bleu-nuit: #0f1e2e;
  --site-dore: #a3915f;
  --site-dore-clair: #d8c58a;
  --site-fond-doux: #f5f4ef;
  --site-texte: #263746;
}

/* 3. BASE DU SITE */
body {
  font-family: "Source Sans 3", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.7;
  color: var(--site-texte);
  background-color: #fcfcfc;
}

/* Titres */
h1, h2, h3, h4, h5, h6,
.page-header h1, .page-header h2 {
  font-family: "Merriweather", Georgia, serif;
  color: var(--site-bleu-fonce);
  line-height: 1.35;
  font-weight: 700;
}

h1 { font-size: clamp(2rem, 4vw, 2.4rem); }
h2 { font-size: clamp(1.5rem, 3vw, 1.8rem); }
h3 { font-size: 1.3rem; }
h4 { font-size: 1.15rem; }

p, li { line-height: 1.7; }
p { margin-bottom: 1rem; }

a {
  color: #245b83;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

a:hover, a:focus {
  color: #173c5a;
}

/* ==========================================================================
   4. BANDEAU ACADÉMIQUE DÉCORÉ : AMBIANCE SESSION & PARTAGE MUSICAL
   ========================================================================== */

/* Cadre du bandeau avec halo lumineux central */
header.header,
.header,
.container-header,
.container-header.header {
  background: 
    radial-gradient(ellipse at center top, rgba(216, 197, 138, 0.12) 0%, rgba(14, 27, 41, 0) 70%),
    linear-gradient(180deg, #0a1520 0%, #132437 60%, #0d1a29 100%) !important;
  background-color: #0e1b29 !important;
  border-bottom: 2px solid #bda86d !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4) !important;
  padding: 1.4rem 1rem 1.1rem !important;
  position: relative !important;
  width: 100% !important;
  overflow: hidden;
}

/* Décoration basse : portée musicale dorée */
.container-header::after {
  content: "" !important;
  position: absolute !important;
  bottom: 3px !important;
  left: 0 !important;
  width: 100% !important;
  height: 1px !important;
  background: rgba(189, 168, 109, 0.35) !important;
  box-shadow: 0 -3px 0 0 rgba(189, 168, 109, 0.15) !important;
}

/* Centrage vertical de l'ensemble */
.container-header .grid-child,
.container-header .navbar,
.container-header .header-inner,
.container-header > div {
  background: transparent !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  margin: 0 auto !important;
  position: relative;
  z-index: 2;
}

/* Logo avec arabesques dorées */
.container-header .navbar-brand,
.container-header .brand,
.container-header h1.brand {
  margin: 0 auto 0.2rem !important;
  color: #fff9ea !important;
  font-family: "Cinzel", "Merriweather", Georgia, "Times New Roman", serif !important;
  font-size: 2rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6), 0 0 12px rgba(216, 197, 138, 0.2) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.8rem !important;
  text-decoration: none !important;
}

.container-header .navbar-brand::before {
  content: "❧ 𝄞" !important;
  color: #cca457 !important;
  font-size: 1.5rem !important;
  font-weight: 400 !important;
  letter-spacing: 0.2rem;
  opacity: 0.9;
}

.container-header .navbar-brand::after {
  content: "𝄢 ☙" !important;
  color: #cca457 !important;
  font-size: 1.5rem !important;
  font-weight: 400 !important;
  letter-spacing: 0.2rem;
  opacity: 0.9;
}

.container-header .navbar-brand {
  position: relative;
  flex-direction: row;
}

/* Barre des menus */
.container-header nav,
.container-header .mod-menu,
.container-header .navbar-nav,
.container-header ul.metismenu {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0.6rem auto 0 !important;
  padding: 0 !important;
  gap: 0.4rem !important;
  list-style: none !important;
  background: transparent !important;
}

/* Boutons de menu */
.container-header .mod-menu > li,
.container-header .navbar-nav > li,
.container-header .metismenu > li {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
}

.container-header .mod-menu a,
.container-header .navbar-nav .nav-link,
.container-header .metismenu a {
  color: #e5edf5 !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: 0.92rem !important;
  font-weight: 500 !important;
  padding: 0.42rem 0.85rem !important;
  border-radius: 4px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(216, 197, 138, 0.22) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.45rem !important;
  transition: all 0.25s ease !important;
}

.container-header .mod-menu a:hover,
.container-header .navbar-nav .nav-link:hover,
.container-header .metismenu a:hover {
  background: linear-gradient(180deg, #1f3954 0%, #162a3f 100%) !important;
  border-color: #cca457 !important;
  color: #ffffff !important;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.35), 0 0 8px rgba(204, 164, 87, 0.25) !important;
  transform: translateY(-1px);
}

.container-header .mod-menu a span,
.container-header .mod-menu a i,
.container-header .navbar-nav .nav-link span,
.container-header .navbar-nav .nav-link i {
  color: #cca457 !important;
  font-size: 0.95rem !important;
}

/* Neutralisation du gros pavé bleu des flèches Cassiopeia */
.container-header button,
.container-header .btn,
.container-header .mm-toggler,
.container-header .dropdown-toggle {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  min-height: unset !important;
  min-width: unset !important;
  height: auto !important;
  width: auto !important;
  padding: 0 0.3rem !important;
  margin: 0 !important;
  color: var(--site-dore-clair, #d8c58a) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
}

.container-header button svg,
.container-header .mm-toggler svg {
  display: none !important;
}

.container-header .mm-toggler::after,
.container-header button.mm-toggler::after {
  content: "" !important;
  display: inline-block !important;
  width: 6px !important;
  height: 6px !important;
  border-right: 2px solid var(--site-dore-clair, #d8c58a) !important;
  border-bottom: 2px solid var(--site-dore-clair, #d8c58a) !important;
  transform: rotate(45deg) !important;
  margin-top: -3px !important;
  margin-left: 2px !important;
}

/* Sous-menus déroulants */
.container-header .metismenu .mm-collapse,
.container-header .dropdown-menu,
.container-header .mod-menu__sub {
  position: absolute !important;
  top: 100% !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 1050 !important;
  min-width: 210px !important;
  background-color: #fdfcf9 !important;
  border: 1px solid #cca457 !important;
  border-radius: 6px !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3) !important;
  padding: 0.4rem 0 !important;
  list-style: none !important;
}

.container-header .metismenu .mm-collapse a,
.container-header .dropdown-menu a,
.container-header .mod-menu__sub a {
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 0.6rem 1.2rem !important;
  color: #1a2a3a !important;
  background-color: transparent !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: 0.95rem !important;
  text-decoration: none !important;
  text-align: left !important;
}

.container-header .metismenu .mm-collapse a:hover,
.container-header .dropdown-menu a:hover,
.container-header .mod-menu__sub a:hover {
  background-color: #f1ebd8 !important;
  color: #0c1824 !important;
  padding-left: 1.45rem !important;
}

/* ==========================================================================
   5. BARRE DE RECHERCHE ET MISE EN PAGE PRINCIPALE
   ========================================================================== */
.page-header {
  border-bottom: 1px solid #c8b98a;
  padding-bottom: 0.5rem;
  margin-bottom: 1.5rem;
}

audio {
  display: block;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  box-sizing: border-box;
}

/* ==========================================================================
   6. MODULES LATERAUX (SIDEBAR)
   ========================================================================== */
.container-sidebar .card,
.container-sidebar .moduletable,
.sidebar-right .card,
.sidebar-left .card {
  margin-bottom: 1.5rem;
  overflow: hidden;
  border: 1px solid #dce3e9;
  border-radius: 8px;
  box-shadow: 0 4px 14px rgba(32, 53, 74, 0.08);
  background-color: #ffffff;
}

.sidebar-right .card-header,
.sidebar-left .card-header,
.container-sidebar .card-header {
  padding: 0.85rem 1rem;
  color: #fff;
  background: var(--site-bleu);
  border-bottom: 3px solid var(--site-dore);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.1rem;
}

.sidebar-right .card-body,
.sidebar-left .card-body,
.container-sidebar .card-body {
  padding: 1.25rem;
  background: #fff;
}

.sidebar-right .card-body a,
.sidebar-left .card-body a {
  color: var(--site-bleu);
  text-decoration: none;
}

.sidebar-right .card-body a:hover,
.sidebar-left .card-body a:hover {
  color: #8b7541;
  text-decoration: underline;
}

/* ==========================================================================
   7. FORMULAIRE DE CONNEXION ACCUEIL & COMPOSANT USERS
   ========================================================================== */
.connexion-accueil {
  padding: 1.25rem;
  margin: 1rem auto;
}

.connexion-accueil h3,
.connexion-accueil .module-title {
  color: var(--site-bleu);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.35rem;
  text-align: center;
  margin-bottom: 0.8rem;
}

.connexion-accueil input[type="text"],
.connexion-accueil input[type="password"] {
  width: 100%;
  min-height: 42px;
  padding: 0.6rem 0.85rem;
  border: 1px solid #b8cadd;
  border-radius: 6px;
  background: #fff;
  box-sizing: border-box;
}

.connexion-accueil input:focus {
  border-color: #315f91;
  box-shadow: 0 0 0 3px rgba(49, 95, 145, 0.15);
  outline: none;
}

.connexion-accueil button,
.connexion-accueil input[type="submit"] {
  width: 100%;
  min-height: 42px;
  color: #fff;
  background: #315f91;
  border: 0;
  border-radius: 6px;
  font-weight: 600;
  transition: background-color 0.2s ease;
  cursor: pointer;
}

.connexion-accueil button:hover,
.connexion-accueil input[type="submit"]:hover {
  background: var(--site-bleu);
}

.accueil-musiciens {
  max-width: 760px;
  margin: 0 auto 1.5rem;
  padding: 1.25rem 1.5rem;
  background: #fff;
  border-left: 4px solid #315f91;
  border-radius: 8px;
  box-shadow: 0 4px 14px rgba(25, 55, 85, 0.08);
}

.accueil-musiciens h2 {
  margin: 0 0 0.6rem;
  color: var(--site-bleu);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.5rem;
}

.accueil-musiciens p {
  margin: 0.5rem 0;
  line-height: 1.6;
}

.accueil-musiciens-indication {
  color: #315f91;
  font-weight: 600;
}

body.connexion-page {
  background: #eaf4ff;
  color: #17283d;
}

body.connexion-page .com-users-login {
  padding: clamp(1.5rem, 4vw, 3rem);
  background: #fff;
  border: 1px solid #d7e3ef;
  border-radius: 1rem;
  box-shadow: 0 1rem 2.5rem rgba(27, 73, 118, 0.12);
}

/* ==========================================================================
   8. CARTES DES RÉPERTOIRES (CENTREES + SANS SOULIGNEMENT + ICÔNE 🎵)
   ========================================================================== */
.com-content-category-blog__children,
.com-content-categories__items,
.com-content-category__children,
.category-desc + .cat-children,
.cat-children,
div[class*="__children"],
div[class*="__items"] {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
  gap: 1.25rem !important;
  margin-top: 2rem !important;
  margin-bottom: 2rem !important;
  padding: 0 !important;
  list-style: none !important;
}

.com-content-category-blog__children > div,
.com-content-category-blog__children > li,
.com-content-categories__items > div,
.com-content-categories__items > li,
.com-content-categories__item,
.com-content-category-blog__child,
.category-desc + .cat-children > div,
div[class*="__children"] > div,
div[class*="__items"] > div {
  background: #ffffff !important;
  border: 1px solid #dcd3b8 !important;
  border-left: 4px solid #a3915f !important;
  border-bottom: 1px solid #dcd3b8 !important;
  border-radius: 6px !important;
  padding: 1.1rem 1.3rem !important;
  min-height: 68px !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.04) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease !important;
  margin: 0 !important;
}

.com-content-category-blog__children > div:hover,
.com-content-category-blog__children > li:hover,
.com-content-categories__items > div:hover,
.com-content-categories__items > li:hover,
.com-content-categories__item:hover,
.com-content-category-blog__child:hover,
div[class*="__children"] > div:hover,
div[class*="__items"] > div:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 16px rgba(17, 34, 51, 0.12) !important;
  border-color: #cca457 !important;
}

.com-content-category-blog__children h3,
.com-content-categories__items h3,
.com-content-categories__item h3,
.com-content-category-blog__child h3,
.com-content-categories__item .page-header,
.com-content-category-blog__child .page-header,
div[class*="__children"] h3,
div[class*="__items"] h3,
div[class*="__children"] .page-header,
div[class*="__items"] .page-header {
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  width: 100% !important;
  text-align: center !important;
}

.com-content-category-blog__children a,
.com-content-categories__items a,
.com-content-categories__item a,
.com-content-category-blog__child a,
div[class*="__children"] a,
div[class*="__items"] a {
  font-family: "Merriweather", Georgia, serif !important;
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  color: #112233 !important;
  text-decoration: none !important;
  text-decoration-line: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: color 0.2s ease !important;
}

.com-content-category-blog__children a:hover,
.com-content-categories__items a:hover,
.com-content-categories__item a:hover,
.com-content-category-blog__child a:hover,
div[class*="__children"] a:hover,
div[class*="__items"] a:hover {
  color: #a3915f !important;
  text-decoration: none !important;
}

.com-content-category-blog__children h3 a::before,
.com-content-categories__items h3 a::before,
.com-content-categories__item h3 a::before,
.com-content-category-blog__child h3 a::before,
.com-content-categories__item a::before,
.com-content-category-blog__child a::before,
div[class*="__children"] a::before,
div[class*="__items"] a::before {
  content: "🎵\00a0" !important;
  font-size: 0.95rem !important;
  margin-right: 0.35rem !important;
  opacity: 0.85 !important;
}

.com-content-category-blog__children .badge,
.com-content-categories__items .badge,
div[class*="__children"] .badge,
div[class*="__items"] .badge {
  background-color: #f4eee1 !important;
  color: #8c763e !important;
  border: 1px solid #dcd3b8 !important;
  font-weight: 600 !important;
  font-size: 0.8rem !important;
  border-radius: 20px !important;
  padding: 0.35rem 0.65rem !important;
  margin-left: 0.5rem !important;
}

/* ==========================================================================
   9. PIED DE PAGE ACADEMIQUE
   ========================================================================== */
.container-footer {
  background-color: var(--site-bleu-fonce) !important;
  background-image: none !important;
  color: #eef3f8 !important;
  border-top: 4px solid var(--site-dore);
  padding: 2.5rem 1.5rem 1rem !important;
}

.container-footer a {
  color: var(--site-dore-clair) !important;
}

.container-footer a:hover {
  color: #ffffff !important;
}

.footer-academique {
  /* Aligne exactement la largeur sur le conteneur principal de Joomla / Cassiopeia */
  max-width: var(--cassiopeia-container-width, 1320px) !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding-left: 1rem !important;
  padding-right: 1rem !important;
  box-sizing: border-box !important;
}

/* Si vous avez un conteneur parent dans le footer */
.container-footer > .grid-child,
.container-footer .footer-inner {
  max-width: var(--cassiopeia-container-width, 1320px) !important;
  margin: 0 auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.footer-academique__contenu {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 2.5rem;
}

.footer-academique__signature,
.footer-academique__colonne h3 {
  color: var(--site-dore-clair);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 0 0 0.5rem;
}

.footer-academique__presentation h2 {
  margin: 0.7rem 0;
  color: #fff;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  line-height: 1.15;
}

.footer-academique__presentation h2 em {
  color: #b9cde0;
  font-weight: 400;
}

.footer-academique__texte {
  max-width: 420px;
  color: #d1dce6;
  line-height: 1.7;
}

.footer-academique__colonne {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.footer-academique__colonne a {
  color: #eef3f8 !important;
  text-decoration: none;
}

.footer-academique__colonne a:hover {
  color: var(--site-dore-clair) !important;
  text-decoration: underline;
}

.footer-academique__bas {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin: 2rem auto 0;
  padding-top: 1rem;
  border-top: 1px solid rgba(238, 243, 248, 0.2);
  color: #cbd5df;
  font-size: 0.8rem;
}

@media (max-width: 700px) {
  .footer-academique__contenu {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  .footer-academique__bas {
    flex-direction: column;
  }
}

/* ==========================================================================
   10. STYLE DES CARTES LATÉRALES (Ex: Tags populaires)
   ========================================================================== */
.card-theme {
  background: #ffffff !important;
  border: 1px solid #dbe2ea !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
  margin-bottom: 25px;
}

.card-theme .card-header,
.card-theme h3,
.card-theme .mod-title,
.card-theme .page-header {
  background-color: #1e4570 !important;
  color: #ffffff !important;
  font-family: "Georgia", "Times New Roman", serif !important;
  font-size: 1.15rem !important;
  font-weight: 700 !important;
  padding: 12px 18px !important;
  margin: 0 !important;
  border: none !important;
  border-bottom: 3px solid #c5a059 !important;
}

.card-theme .card-body,
.card-theme .mod-content {
  padding: 16px 20px !important;
  background-color: #ffffff !important;
}

.card-theme ul {
  list-style: none !important;
  padding-left: 0 !important;
  margin: 0 !important;
}

.card-theme ul li {
  padding: 6px 0 !important;
  font-size: 0.95rem;
}

.card-theme ul li a {
  color: #1e4570 !important;
  text-decoration: none !important;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  transition: color 0.2s ease, transform 0.2s ease;
}

.card-theme ul li a::before {
  content: "•";
  color: #1e4570;
  font-weight: bold;
  display: inline-block;
  margin-right: 8px;
}

.card-theme ul li a:hover {
  color: #c5a059 !important;
  transform: translateX(4px);
}

.card-theme ul li a:hover::before {
  color: #c5a059 !important;
}

/* ==========================================================================
   11. TABLEAU LISTE D'ARTICLES / MORCEAUX (BLEU, OR & ICÔNES)
   ========================================================================== */

/* Cadre général du tableau */
.category table.category,
.com-content-category table {
  border-collapse: separate !important;
  border-spacing: 0 !important;
  width: 100% !important;
  background-color: #ffffff !important;
  border: 1px solid #dbe2ea !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05) !important;
  margin-top: 15px !important;
  margin-bottom: 25px !important;
}

/* En-tête : Bleu marine + Liseré or */
.category table.category thead th,
.com-content-category table thead th {
  background-color: #1e4570 !important;
  color: #ffffff !important;
  font-family: "Georgia", "Times New Roman", serif !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  padding: 13px 18px !important;
  border: none !important;
  border-bottom: 3px solid #c5a059 !important;
}

.category table.category thead th a,
.com-content-category table thead th a {
  color: #ffffff !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
}

.category table.category thead th a:hover,
.com-content-category table thead th a:hover {
  color: #f6d899 !important;
}

/* Icônes dans les en-têtes (Titre, Auteur, Clics) */
.category table.category thead th:first-child::before,
.com-content-category table thead th:first-child::before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 8px;
  vertical-align: -2px;
  background-color: #c5a059;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M9 18V5l12-2v13'%3E%3C/path%3E%3Ccircle cx='6' cy='18' r='3'%3E%3C/circle%3E%3Ccircle cx='18' cy='16' r='3'%3E%3C/circle%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M9 18V5l12-2v13'%3E%3C/path%3E%3Ccircle cx='6' cy='18' r='3'%3E%3C/circle%3E%3Ccircle cx='18' cy='16' r='3'%3E%3C/circle%3E%3C/svg%3E") no-repeat center / contain;
}

.category table.category thead th:nth-child(2)::before,
.com-content-category table thead th:nth-child(2)::before {
  content: "";
  display: inline-block;
  width: 15px;
  height: 15px;
  margin-right: 8px;
  vertical-align: -2px;
  background-color: #c5a059;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'%3E%3C/path%3E%3Ccircle cx='12' cy='7' r='4'%3E%3C/circle%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'%3E%3C/path%3E%3Ccircle cx='12' cy='7' r='4'%3E%3C/circle%3E%3C/svg%3E") no-repeat center / contain;
}

.category table.category thead th:last-child::before,
.com-content-category table thead th:last-child::before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 6px;
  vertical-align: -2px;
  background-color: #c5a059;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'%3E%3C/path%3E%3Ccircle cx='12' cy='12' r='3'%3E%3C/circle%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'%3E%3C/path%3E%3Ccircle cx='12' cy='12' r='3'%3E%3C/circle%3E%3C/svg%3E") no-repeat center / contain;
}

/* Lignes et survol */
.category table.category tbody tr,
.com-content-category table tbody tr {
  transition: background-color 0.2s ease !important;
  border-bottom: 1px solid #edf2f7 !important;
}

.category table.category tbody tr:nth-of-type(even),
.com-content-category table tbody tr:nth-of-type(even) {
  background-color: #fafbfd !important;
}

.category table.category tbody tr:hover,
.com-content-category table tbody tr:hover {
  background-color: #f1f6fc !important;
}

/* Liseré doré sur la gauche au survol */
.category table.category tbody tr:hover td:first-child,
.com-content-category table tbody tr:hover td:first-child {
  border-left: 4px solid #c5a059 !important;
}

/* Cellules */
.category table.category tbody td,
.com-content-category table tbody td {
  padding: 12px 18px !important;
  vertical-align: middle !important;
  border-top: none !important;
  border-bottom: 1px solid #eef2f6 !important;
}

/* Liens des morceaux (Titre) avec note de musique ♪ */
.category table.category tbody td.list-title a,
.com-content-category table tbody td:first-child a {
  color: #1e4570 !important;
  font-weight: 600 !important;
  font-size: 0.98rem !important;
  text-decoration: none !important;
  transition: color 0.2s ease, padding-left 0.2s ease !important;
}

.category table.category tbody td.list-title a::before,
.com-content-category table tbody td:first-child a::before {
  content: "♪";
  display: inline-block;
  color: #c5a059;
  font-size: 1.05rem;
  margin-right: 8px;
  transition: transform 0.2s ease, color 0.2s ease;
}

.category table.category tbody td.list-title a:hover,
.com-content-category table tbody td:first-child a:hover {
  color: #c5a059 !important;
  padding-left: 4px !important;
}

.category table.category tbody td.list-title a:hover::before,
.com-content-category table tbody td:first-child a:hover::before {
  transform: scale(1.25) rotate(5deg);
  color: #1e4570;
}

/* Colonne Auteur avec icône */
.category table.category tbody td.list-author,
.com-content-category table tbody td:nth-child(2) {
  color: #475569 !important;
  font-size: 0.92rem !important;
}

.category table.category tbody td.list-author::before,
.com-content-category table tbody td:nth-child(2)::before {
  content: "";
  display: inline-block;
  width: 13px;
  height: 13px;
  margin-right: 6px;
  vertical-align: -1px;
  background-color: #8fa0b5;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'%3E%3C/path%3E%3Ccircle cx='12' cy='7' r='4'%3E%3C/circle%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'%3E%3C/path%3E%3Ccircle cx='12' cy='7' r='4'%3E%3C/circle%3E%3C/svg%3E") no-repeat center / contain;
}

/* Badge Clics (Pilule avec icône oeil) */
.category table.category tbody td.list-hits .badge,
.com-content-category table tbody td .badge {
  background-color: #1e4570 !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  padding: 4px 10px !important;
  border-radius: 12px !important;
  font-size: 0.8rem !important;
  letter-spacing: 0.5px;
  box-shadow: 0 2px 4px rgba(30, 69, 112, 0.2);
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  transition: background-color 0.2s ease !important;
}

.category table.category tbody td.list-hits .badge::before,
.com-content-category table tbody td .badge::before {
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  background-color: #ffffff;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'%3E%3C/path%3E%3Ccircle cx='12' cy='12' r='3'%3E%3C/circle%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'%3E%3C/path%3E%3Ccircle cx='12' cy='12' r='3'%3E%3C/circle%3E%3C/svg%3E") no-repeat center / contain;
}

/* Le badge devient doré au survol de la ligne */
.category table.category tbody tr:hover td .badge {
  background-color: #c5a059 !important;
}

/* Filtres et Sélecteur en haut de page */
.com-content-category .filters-btn,
.com-content-category select.form-select {
  border: 1px solid #cbd5e1 !important;
  border-radius: 6px !important;
  padding: 5px 12px !important;
  font-weight: 500 !important;
  color: #1e4570 !important;
}