/* ==========================================================================
   Composants — Tous les éléments d'interface
   ========================================================================== */

/* ==========================================================================
   Header
   ========================================================================== */

.site-header {
  background-color: var(--couleur-header-fond);
  color: var(--couleur-header-texte);
  padding: var(--espacement-md) var(--marge-laterale);
}

.site-header-inner {
  max-width: var(--largeur-max-large);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.site-titre {
  font-size: var(--taille-grande);
  font-weight: 700;
  margin: 0;
}

.site-titre a {
  color: var(--couleur-header-texte);
  text-decoration: none;
}

.site-titre a:hover {
  opacity: 0.9;
}

/* --- Bouton bascule de thème --- */

.theme-toggle {
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: var(--couleur-header-texte);
  padding: var(--espacement-xs) var(--espacement-sm);
  border-radius: var(--rayon-bordure);
  cursor: pointer;
  font-size: var(--taille-petite);
  transition: border-color var(--transition-rapide);
  line-height: 1;
}

.theme-toggle:hover {
  border-color: rgba(255, 255, 255, 0.6);
}

.theme-toggle:focus-visible {
  outline: 2px solid var(--couleur-header-texte);
  outline-offset: 2px;
}

/* ==========================================================================
   Navigation
   ========================================================================== */

.site-nav {
  background-color: var(--couleur-fond-secondaire);
  border-bottom: 1px solid var(--couleur-bordure-legere);
  padding: 0 var(--marge-laterale);
}

.site-nav .nav-inner {
  max-width: var(--largeur-max-large);
  margin: 0 auto;
}

/* Checkbox cachée */
.nav-toggle-checkbox {
  display: none;
}

/* Label hamburger — caché par défaut, visible en mobile */
.nav-toggle-label {
  display: none;
  cursor: pointer;
  padding: var(--espacement-sm) 0;
  font-size: 1.5rem;
  color: var(--couleur-texte);
  user-select: none;
}

.nav-toggle-label:hover {
  color: var(--couleur-lien-survol);
}

/* Menu de navigation */
.nav-menu {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 0;
}

.nav-menu li {
  margin: 0;
}

.nav-menu a {
  display: block;
  padding: var(--espacement-sm) var(--espacement-md);
  color: var(--couleur-texte);
  text-decoration: none;
  font-size: var(--taille-petite);
  font-weight: 500;
  transition: color var(--transition-rapide), background-color var(--transition-rapide);
}

.nav-menu a:hover,
.nav-menu a[aria-current="page"] {
  color: var(--couleur-lien);
  background-color: var(--couleur-fond);
}

/* --- Mobile : hamburger --- */

@media (max-width: 768px) {
  .nav-toggle-label {
    display: block;
  }

  .nav-menu {
    display: none;
    flex-direction: column;
  }

  .nav-toggle-checkbox:checked ~ .nav-menu {
    display: flex;
  }

  .nav-menu a {
    padding: var(--espacement-sm) 0;
    border-bottom: 1px solid var(--couleur-bordure-legere);
  }

  .nav-menu li:last-child a {
    border-bottom: none;
  }
}

/* ==========================================================================
   Fil d'Ariane (breadcrumb)
   ========================================================================== */

.fil-ariane {
  font-size: var(--taille-petite);
  color: var(--couleur-texte-leger);
  padding: var(--espacement-sm) 0;
  margin-bottom: var(--espacement-lg);
}

.fil-ariane ol {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacement-xs);
}

.fil-ariane li {
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--espacement-xs);
}

.fil-ariane li + li::before {
  content: "›";
  color: var(--couleur-texte-leger);
}

.fil-ariane a {
  color: var(--couleur-texte-leger);
  text-decoration: none;
}

.fil-ariane a:hover {
  color: var(--couleur-lien);
  text-decoration: underline;
}

.fil-ariane [aria-current="page"] {
  color: var(--couleur-texte);
  font-weight: 500;
}

/* ==========================================================================
   Encarts
   ========================================================================== */

.encart {
  border-left: var(--largeur-bordure-encart) solid;
  background-color: var(--couleur-fond-encart);
  padding: var(--espacement-md) var(--espacement-lg);
  margin: var(--espacement-lg) 0;
  border-radius: 0 var(--rayon-bordure) var(--rayon-bordure) 0;
}

.encart-titre {
  font-weight: 700;
  font-size: var(--taille-base);
  margin-bottom: var(--espacement-sm);
}

.encart p:last-child {
  margin-bottom: 0;
}

.encart--info {
  border-left-color: var(--couleur-encart-info);
}

.encart--info .encart-titre {
  color: var(--couleur-encart-info);
}

.encart--important {
  border-left-color: var(--couleur-encart-important);
}

.encart--important .encart-titre {
  color: var(--couleur-encart-important);
}

.encart--attention {
  border-left-color: var(--couleur-encart-attention);
}

.encart--attention .encart-titre {
  color: var(--couleur-encart-attention);
}

.encart--exemple {
  border-left-color: var(--couleur-encart-exemple);
}

.encart--exemple .encart-titre {
  color: var(--couleur-encart-exemple);
}

.encart--citation {
  border-left-color: var(--couleur-encart-citation);
}

.encart--citation .encart-titre {
  color: var(--couleur-encart-citation);
}

/* ==========================================================================
   Ressource externe
   ========================================================================== */

.ressource-externe {
  border: 1px solid var(--couleur-bordure);
  border-radius: var(--rayon-bordure);
  padding: var(--espacement-md) var(--espacement-lg);
  margin: var(--espacement-lg) 0;
  display: flex;
  gap: var(--espacement-md);
  align-items: flex-start;
}

.ressource-externe-icone {
  font-size: 1.5rem;
  flex-shrink: 0;
  line-height: 1;
}

.ressource-externe-contenu {
  flex: 1;
  min-width: 0;
}

.ressource-externe-titre {
  font-weight: 700;
  font-size: var(--taille-base);
  margin-bottom: var(--espacement-xs);
}

.ressource-externe-titre a {
  color: var(--couleur-lien);
}

.ressource-externe-meta {
  font-size: var(--taille-tres-petite);
  color: var(--couleur-texte-leger);
  margin-bottom: var(--espacement-sm);
}

.ressource-externe-contenu p:last-child {
  margin-bottom: 0;
}

/* ==========================================================================
   Dépliable (details/summary)
   ========================================================================== */

.depliable {
  border: 1px solid var(--couleur-bordure);
  border-radius: var(--rayon-bordure);
  margin: var(--espacement-lg) 0;
}

.depliable summary {
  padding: var(--espacement-sm) var(--espacement-md);
  cursor: pointer;
  font-weight: 600;
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--espacement-sm);
  user-select: none;
  transition: background-color var(--transition-rapide);
}

.depliable summary:hover {
  background-color: var(--couleur-fond-secondaire);
}

.depliable summary::-webkit-details-marker {
  display: none;
}

.depliable summary::before {
  content: "▸";
  font-size: 0.8em;
  transition: transform var(--transition-rapide);
}

.depliable[open] summary::before {
  content: "▾";
}

.depliable-contenu {
  padding: var(--espacement-md);
  border-top: 1px solid var(--couleur-bordure-legere);
}

.depliable-contenu p:last-child {
  margin-bottom: 0;
}

/* ==========================================================================
   Table des matières
   ========================================================================== */

.table-des-matieres {
  background-color: var(--couleur-fond-secondaire);
  border: 1px solid var(--couleur-bordure-legere);
  border-radius: var(--rayon-bordure);
  padding: var(--espacement-md) var(--espacement-lg);
  margin-bottom: var(--espacement-xl);
}

.table-des-matieres-titre {
  font-size: var(--taille-base);
  font-weight: 700;
  margin-bottom: var(--espacement-sm);
  color: var(--couleur-texte);
}

.table-des-matieres ol {
  margin: 0;
  padding-left: var(--espacement-lg);
}

.table-des-matieres li {
  margin-bottom: var(--espacement-xs);
  font-size: var(--taille-petite);
}

.table-des-matieres a {
  color: var(--couleur-lien);
  text-decoration: none;
}

.table-des-matieres a:hover {
  text-decoration: underline;
}

/* ==========================================================================
   Notes de bas de page
   ========================================================================== */

.notes-bas-de-page {
  border-top: 1px solid var(--couleur-bordure);
  margin-top: var(--espacement-2xl);
  padding-top: var(--espacement-lg);
}

.notes-bas-de-page-titre {
  font-size: var(--taille-base);
  font-weight: 700;
  margin-bottom: var(--espacement-md);
}

.notes-bas-de-page ol {
  padding-left: var(--espacement-lg);
  font-size: var(--taille-petite);
}

.notes-bas-de-page li {
  margin-bottom: var(--espacement-sm);
  color: var(--couleur-texte-secondaire);
}

.note-ref {
  font-size: 0.75em;
  vertical-align: super;
  line-height: 0;
  text-decoration: none;
  font-weight: 600;
}

.note-retour {
  text-decoration: none;
  margin-left: var(--espacement-xs);
  font-size: 0.85em;
}

/* ==========================================================================
   Bibliographie (style LaTeX)
   ========================================================================== */

.bibliographie {
  border-top: 1px solid var(--couleur-bordure);
  margin-top: var(--espacement-2xl);
  padding-top: var(--espacement-lg);
}

.bibliographie-titre {
  font-family: var(--police-serif);
  font-size: var(--taille-h3);
  font-variant: small-caps;
  font-weight: 700;
  margin-bottom: var(--espacement-md);
}

.bibliographie ol {
  list-style: none;
  padding: 0;
  font-family: var(--police-serif);
  font-size: var(--taille-petite);
}

.bibliographie li {
  padding-left: var(--espacement-xl);
  text-indent: calc(-1 * var(--espacement-xl));
  margin-bottom: var(--espacement-sm);
  line-height: 1.6;
}

.bibliographie li::before {
  content: "[" attr(data-ref) "] ";
  font-weight: 700;
}

/* ==========================================================================
   Glossaire (style LaTeX)
   ========================================================================== */

.glossaire {
  border-top: 1px solid var(--couleur-bordure);
  margin-top: var(--espacement-2xl);
  padding-top: var(--espacement-lg);
}

.glossaire-titre {
  font-family: var(--police-serif);
  font-size: var(--taille-h3);
  font-variant: small-caps;
  font-weight: 700;
  margin-bottom: var(--espacement-md);
}

.glossaire dl {
  font-family: var(--police-serif);
  font-size: var(--taille-petite);
}

.glossaire dt {
  font-weight: 700;
  display: inline;
}

.glossaire dt::after {
  content: " : ";
}

.glossaire dd {
  display: inline;
  margin: 0;
}

.glossaire dd::after {
  content: "";
  display: block;
  margin-bottom: var(--espacement-sm);
}

/* ==========================================================================
   Carte d'article (pour les listings)
   ========================================================================== */

.grille-articles {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--espacement-lg);
}

@media (min-width: 769px) {
  .grille-articles {
    grid-template-columns: repeat(2, 1fr);
  }
}

.carte-article {
  background-color: var(--couleur-carte-fond);
  border: 1px solid var(--couleur-carte-bordure);
  border-radius: var(--rayon-bordure-grand);
  padding: var(--espacement-lg);
  box-shadow: var(--ombre-legere);
  transition: box-shadow var(--transition-normale), transform var(--transition-normale);
}

.carte-article:hover {
  box-shadow: var(--ombre-moyenne);
  transform: translateY(-2px);
}

.carte-article-titre {
  font-size: var(--taille-grande);
  margin-bottom: var(--espacement-sm);
}

.carte-article-titre a {
  color: var(--couleur-primaire);
  text-decoration: none;
}

[data-theme="sombre"] .carte-article-titre a {
  color: var(--couleur-texte);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="clair"]) .carte-article-titre a {
    color: var(--couleur-texte);
  }
}

.carte-article-titre a:hover {
  color: var(--couleur-lien);
  text-decoration: underline;
}

.carte-article-date {
  font-size: var(--taille-tres-petite);
  color: var(--couleur-texte-leger);
  margin-bottom: var(--espacement-sm);
}

.carte-article-description {
  font-size: var(--taille-petite);
  color: var(--couleur-texte-secondaire);
  margin-bottom: var(--espacement-sm);
}

.carte-article-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacement-xs);
}

/* ==========================================================================
   Tags
   ========================================================================== */

.tag {
  display: inline-block;
  background-color: var(--couleur-tag-fond);
  color: var(--couleur-tag-texte);
  padding: var(--espacement-xs) var(--espacement-sm);
  border-radius: 999px;
  font-size: var(--taille-tres-petite);
  text-decoration: none;
  font-weight: 500;
  transition: background-color var(--transition-rapide), color var(--transition-rapide);
}

.tag:hover {
  background-color: var(--couleur-tag-fond-survol);
  color: var(--couleur-tag-texte-survol);
}

.tag:visited {
  color: var(--couleur-tag-texte);
}

.tag:visited:hover {
  color: var(--couleur-tag-texte-survol);
}

.liste-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacement-sm);
  list-style: none;
  padding: 0;
  margin: 0 0 var(--espacement-lg) 0;
}

.liste-tags li {
  margin: 0;
}

/* ==========================================================================
   Partage social
   ========================================================================== */

.partage-social {
  border-top: 1px solid var(--couleur-bordure-legere);
  margin-top: var(--espacement-xl);
  padding-top: var(--espacement-lg);
}

.partage-social-titre {
  font-size: var(--taille-petite);
  font-weight: 600;
  margin-bottom: var(--espacement-sm);
  color: var(--couleur-texte-secondaire);
}

.partage-social-liens {
  display: flex;
  gap: var(--espacement-md);
}

.partage-social-liens a {
  color: var(--couleur-texte-secondaire);
  text-decoration: none;
  font-size: var(--taille-petite);
  padding: var(--espacement-xs) var(--espacement-sm);
  border: 1px solid var(--couleur-bordure);
  border-radius: var(--rayon-bordure);
  transition: color var(--transition-rapide), border-color var(--transition-rapide);
}

.partage-social-liens a:hover {
  color: var(--couleur-lien);
  border-color: var(--couleur-lien);
}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
  background-color: var(--couleur-footer-fond);
  color: var(--couleur-footer-texte);
  padding: var(--espacement-sm) var(--marge-laterale);
  margin-top: auto;
}

.site-footer-inner {
  max-width: var(--largeur-max-large);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--espacement-xs);
  text-align: center;
}

.site-footer-copyright {
  font-size: var(--taille-petite);
  margin: 0;
}

.site-footer-liens {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacement-md);
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: var(--taille-petite);
}

.site-footer-liens li {
  margin: 0;
}

.site-footer-liens a {
  color: var(--couleur-footer-lien);
  text-decoration: none;
}

.site-footer-liens a:hover {
  text-decoration: underline;
  color: var(--couleur-header-texte);
}

/* ==========================================================================
   Formulaire de contact
   ========================================================================== */

.formulaire-contact {
  max-width: 600px;
}

.champ {
  margin-bottom: 1.25rem;
}

.champ label {
  display: block;
  margin-bottom: 0.35rem;
  font-weight: 600;
  color: var(--couleur-texte);
}

.champ input,
.champ textarea {
  width: 100%;
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--couleur-bordure);
  border-radius: var(--rayon-bordure);
  font-family: inherit;
  font-size: 1rem;
  background: var(--couleur-carte-fond);
  color: var(--couleur-texte);
}

.champ input:focus,
.champ textarea:focus {
  outline: 2px solid var(--couleur-primaire-clair);
  outline-offset: 1px;
  border-color: var(--couleur-primaire-clair);
}

.bouton-envoyer {
  padding: 0.6rem 1.5rem;
  background: var(--couleur-primaire);
  color: var(--couleur-texte-inverse);
  border: none;
  border-radius: var(--rayon-bordure);
  font-size: 1rem;
  cursor: pointer;
}

.bouton-envoyer:hover {
  background: var(--couleur-primaire-clair);
}

/* ==========================================================================
   Onglets univers
   ========================================================================== */

.univers-tabs {
  background-color: var(--couleur-fond);
  border-bottom: 1px solid var(--couleur-bordure-legere);
  padding: 0 var(--marge-laterale);
}

.univers-tabs-inner {
  max-width: var(--largeur-max-large);
  margin: 0 auto;
  display: flex;
  justify-content: center;
  gap: 0;
}

.univers-tab {
  padding: var(--espacement-sm) var(--espacement-lg);
  font-size: var(--taille-petite);
  text-decoration: none;
  border-bottom: 3px solid transparent;
  transition: border-color var(--transition-rapide);
}

.univers-tab--portail {
  color: var(--couleur-tab-portail, #1a2a4a);
  border-bottom-color: var(--couleur-tab-portail-25, rgba(26, 42, 74, 0.25));
}
.univers-tab--fabnum {
  color: var(--couleur-tab-fabnum, #650303);
  border-bottom-color: var(--couleur-tab-fabnum-25, rgba(101, 3, 3, 0.25));
}
.univers-tab--musia {
  color: var(--couleur-tab-musia, #2a5a2a);
  border-bottom-color: var(--couleur-tab-musia-25, rgba(42, 90, 42, 0.25));
}
.univers-tab--iron {
  color: var(--couleur-tab-iron, #3a4a5a);
  border-bottom-color: var(--couleur-tab-iron-25, rgba(58, 74, 90, 0.25));
}

.univers-tab--actif { font-weight: 700; }
.univers-tab--actif.univers-tab--portail { border-bottom-color: var(--couleur-tab-portail, #1a2a4a); }
.univers-tab--actif.univers-tab--fabnum { border-bottom-color: var(--couleur-tab-fabnum, #650303); }
.univers-tab--actif.univers-tab--musia { border-bottom-color: var(--couleur-tab-musia, #2a5a2a); }
.univers-tab--actif.univers-tab--iron { border-bottom-color: var(--couleur-tab-iron, #3a4a5a); }

/* Onglets — mode sombre (direct, pas via variables) */
@media (prefers-color-scheme: dark) {
  html:not([data-theme="clair"]) .univers-tab--portail { color: #8ab4e8; }
  html:not([data-theme="clair"]) .univers-tab--fabnum { color: #e8a0a0; }
  html:not([data-theme="clair"]) .univers-tab--musia { color: #a0d0a0; }
  html:not([data-theme="clair"]) .univers-tab--iron { color: #a0b0c0; }
  html:not([data-theme="clair"]) .univers-tab--actif.univers-tab--portail { border-bottom-color: #8ab4e8; }
  html:not([data-theme="clair"]) .univers-tab--actif.univers-tab--fabnum { border-bottom-color: #e8a0a0; }
  html:not([data-theme="clair"]) .univers-tab--actif.univers-tab--musia { border-bottom-color: #a0d0a0; }
  html:not([data-theme="clair"]) .univers-tab--actif.univers-tab--iron { border-bottom-color: #a0b0c0; }
}
[data-theme="sombre"] .univers-tab--portail { color: #8ab4e8; }
[data-theme="sombre"] .univers-tab--fabnum { color: #e8a0a0; }
[data-theme="sombre"] .univers-tab--musia { color: #a0d0a0; }
[data-theme="sombre"] .univers-tab--iron { color: #a0b0c0; }
[data-theme="sombre"] .univers-tab--actif.univers-tab--portail { border-bottom-color: #8ab4e8; }
[data-theme="sombre"] .univers-tab--actif.univers-tab--fabnum { border-bottom-color: #e8a0a0; }
[data-theme="sombre"] .univers-tab--actif.univers-tab--musia { border-bottom-color: #a0d0a0; }
[data-theme="sombre"] .univers-tab--actif.univers-tab--iron { border-bottom-color: #a0b0c0; }

/* ==========================================================================
   Page d'accueil — Présentation
   ========================================================================== */

.accueil-presentation {
  background-color: var(--couleur-fond-secondaire);
  padding: var(--espacement-xl) var(--marge-laterale);
  margin-bottom: var(--espacement-xl);
}

.accueil-presentation h1,
.accueil-presentation h2 {
  color: var(--couleur-primaire);
}

/* ==========================================================================
   Page d'accueil — Accroche (bandeau)
   ========================================================================== */

.accueil-accroche {
  background-color: var(--couleur-primaire);
  color: var(--couleur-texte-inverse);
  padding: var(--espacement-2xl) var(--marge-laterale);
  text-align: center;
}

.accueil-accroche p {
  max-width: var(--largeur-max);
  margin: 0 auto;
  font-size: var(--taille-h3);
  line-height: var(--hauteur-ligne-titre);
  font-weight: 300;
}

/* ==========================================================================
   Page d'accueil — Accordéon univers
   ========================================================================== */

.accueil-univers {
  max-width: var(--largeur-max);
  margin: 0 auto var(--espacement-xl);
  padding: 0 var(--marge-laterale);
}

.accueil-univers > h2 {
  text-align: center;
}

.univers-accordeon {
  margin-bottom: var(--espacement-sm);
}

.accordeon-boutons {
  display: flex;
  gap: var(--espacement-xs);
}

.accordeon-bouton {
  flex: 1;
  padding: var(--espacement-md);
  border: none;
  border-radius: var(--rayon-bordure) var(--rayon-bordure) 0 0;
  cursor: pointer;
  text-align: center;
  transition: opacity var(--transition-rapide);
  color: var(--couleur-texte-inverse);
  font-family: inherit;
  font-size: var(--taille-petite);
}

.accordeon-bouton--fabnum { background-color: #650303; }
.accordeon-bouton--musia { background-color: #2a5a2a; }
.accordeon-bouton--iron { background-color: #3a4a5a; }

.accordeon-sous-titre {
  display: block;
  font-size: var(--taille-tres-petite);
  opacity: 0.8;
  margin-top: var(--espacement-xs);
}

.accordeon-fleche {
  display: block;
  font-size: var(--taille-tres-petite);
  margin-top: var(--espacement-xs);
  transition: transform var(--transition-rapide);
}

.accordeon-bouton[aria-expanded="true"] .accordeon-fleche {
  transform: rotate(180deg);
}

.accordeon-contenu {
  border: 2px solid var(--couleur-bordure);
  border-top: none;
  padding: var(--espacement-md);
  border-radius: 0 0 var(--rayon-bordure) var(--rayon-bordure);
}

.accordeon-lien {
  font-weight: 600;
}

.accordeon-bouton[aria-expanded="true"] {
  opacity: 1;
}

.accordeon-bouton[aria-expanded="false"] {
  opacity: 0.7;
}

/* Quand aucun n'est ouvert, tous à pleine opacité */
.univers-accordeon:not(:has(.accordeon-bouton[aria-expanded="true"])) .accordeon-bouton {
  opacity: 1;
}

/* ==========================================================================
   Page d'accueil — Activité récente
   ========================================================================== */

.accueil-activite {
  max-width: var(--largeur-max);
  margin: 0 auto;
  padding: 0 var(--marge-laterale);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--espacement-xl);
}

.accueil-activite h2 {
  font-size: var(--taille-h3);
  color: var(--couleur-primaire);
  margin: 0 0 var(--espacement-md);
  border-bottom: 1px solid var(--couleur-bordure-legere);
  padding-bottom: var(--espacement-sm);
}

.activite-item {
  padding: var(--espacement-sm) var(--espacement-md);
  border-left: 2px solid var(--couleur-bordure);
  margin-bottom: var(--espacement-sm);
}

.activite-item a {
  font-weight: 600;
  display: block;
}

.activite-item time {
  font-size: var(--taille-tres-petite);
  color: var(--couleur-texte-leger);
}

.activite-vide {
  color: var(--couleur-texte-leger);
  font-style: italic;
}

.activite-univers-item {
  padding: var(--espacement-sm) var(--espacement-md);
  margin-bottom: var(--espacement-sm);
  border-radius: 0 var(--rayon-bordure) var(--rayon-bordure) 0;
}

.activite-univers-item--fabnum {
  border-left: 3px solid var(--couleur-activite-fabnum-bordure, #650303);
  background: var(--couleur-activite-fabnum-fond, #fdf5f5);
}
.activite-univers-item--musia {
  border-left: 3px solid var(--couleur-activite-musia-bordure, #2a5a2a);
  background: var(--couleur-activite-musia-fond, #f0f5f0);
}
.activite-univers-item--iron {
  border-left: 3px solid var(--couleur-activite-iron-bordure, #3a4a5a);
  background: var(--couleur-activite-iron-fond, #f2f4f6);
}

.activite-univers-item a {
  text-decoration: none;
  display: block;
}

.activite-univers-item time {
  font-size: var(--taille-tres-petite);
  color: var(--couleur-texte-leger);
}

/* Activité univers — mode sombre (direct) */
@media (prefers-color-scheme: dark) {
  html:not([data-theme="clair"]) .activite-univers-item--fabnum { border-left-color: #e8a0a0; background: #1a1215; }
  html:not([data-theme="clair"]) .activite-univers-item--musia { border-left-color: #a0d0a0; background: #121a12; }
  html:not([data-theme="clair"]) .activite-univers-item--iron { border-left-color: #a0b0c0; background: #141a20; }
}
[data-theme="sombre"] .activite-univers-item--fabnum { border-left-color: #e8a0a0; background: #1a1215; }
[data-theme="sombre"] .activite-univers-item--musia { border-left-color: #a0d0a0; background: #121a12; }
[data-theme="sombre"] .activite-univers-item--iron { border-left-color: #a0b0c0; background: #141a20; }

/* Mobile */
@media (max-width: 768px) {
  .accueil-activite {
    grid-template-columns: 1fr;
  }
  .accordeon-boutons {
    flex-direction: column;
  }
}

/* ==========================================================================
   Bouton de téléchargement — utilise la couleur de l'univers actif
   ========================================================================== */

.btn-telecharger {
  display: inline-block;
  padding: var(--espacement-sm) var(--espacement-lg);
  background-color: var(--couleur-header-fond);
  color: var(--couleur-texte-inverse);
  text-decoration: none;
  border-radius: var(--rayon-bordure);
  font-weight: 700;
  font-size: var(--taille-base);
  transition: background-color var(--transition-rapide);
}

.btn-telecharger:hover {
  background-color: var(--couleur-lien);
  color: var(--couleur-texte-inverse);
}

.btn-telecharger:visited {
  color: var(--couleur-texte-inverse);
}

.btn-telecharger:focus-visible {
  outline: 2px solid var(--couleur-lien-focus);
  outline-offset: 2px;
}

/* Bouton télécharger — mode sombre (fond foncé garanti via variable univers) */
@media (prefers-color-scheme: dark) {
  :not([data-theme="clair"]) .btn-telecharger { background-color: var(--couleur-header-fond); }
}
[data-theme="sombre"] .btn-telecharger { background-color: var(--couleur-header-fond); }

/* ==========================================================================
   IRON — mode sombre (dans composants.css car iron.css est chargé en body)
   ========================================================================== */

@media (prefers-color-scheme: dark) {
  html:not([data-theme="clair"]) .iron-page {
    --iron-marine: #8ab4e8;
    --iron-moyen: #6fa8e0;
    --iron-rouge: #e07070;
    --iron-orange: #e8a060;
    --iron-vert: #70c070;
    --iron-gris-fond: #1a2230;
    --iron-texte: #e0e0e0;
    --iron-texte-secondaire: #b0b0b0;
  }
  html:not([data-theme="clair"]) .iron-page .btn-plein {
    background: #2c6fbb;
    color: #fff;
  }
}
[data-theme="sombre"] .iron-page {
  --iron-marine: #8ab4e8;
  --iron-moyen: #6fa8e0;
  --iron-rouge: #e07070;
  --iron-orange: #e8a060;
  --iron-vert: #70c070;
  --iron-gris-fond: #1a2230;
  --iron-texte: #e0e0e0;
  --iron-texte-secondaire: #b0b0b0;
}
[data-theme="sombre"] .iron-page .btn-plein {
  background: #2c6fbb;
  color: #fff;
}