:root {
  --fond: #f4f7fa;
  --texte: #111827;
  --texte-secondaire: #6b7280;
  --surface: #ffffff;
  --bordure: #e5e7eb;
  --primaire: #2563eb;
  --primaire-hover: #1d4ed8;
  --ombre: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
  --rayon: 1.25rem; /* Coins très arrondis, comme pour le thème Galet */
  --font-sans: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

body[data-theme='sombre'] {
  --fond: #111827;
  --texte: #f9fafb;
  --texte-secondaire: #9ca3af;
  --surface: #1f2937;
  --bordure: #374151;
  --primaire: #3b82f6;
  --primaire-hover: #60a5fa;
}

body[data-theme='sépia'] {
  --fond: #fdf8f2;
  --texte: #5a4a3a;
  --texte-secondaire: #a18f7c;
  --surface: #ffffff;
  --bordure: #e9e2d9;
  --primaire: #e8794e; /* Orange brûlé */
  --primaire-hover: #d16a42;
}

body[data-theme='ardoise'] {
  --fond: #263238;
  --texte: #eceff1;
  --texte-secondaire: #b0bec5;
  --surface: #37474f;
  --bordure: #546e7a;
  --primaire: #80cbc4;
  --primaire-hover: #4db6ac;
}

body[data-theme='forêt'] {
  --fond: #fbfdfa;
  --texte: #1b3d2f;
  --texte-secondaire: #607d6b;
  --surface: #ffffff;
  --bordure: #e2e8e4;
  --primaire: #38761d;
  --primaire-hover: #2a5715;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="60" height="60" viewBox="0 0 100 100"><path d="M50 0 C50 30, 80 30, 80 50 S50 70, 50 100" stroke="%232e7d32" fill="none" stroke-width="2" opacity="0.05" stroke-linecap="round" /><path d="M50 0 C50 30, 20 30, 20 50 S50 70, 50 100" stroke="%232e7d32" fill="none" stroke-width="2" opacity="0.05" stroke-linecap="round" /></svg>');
}

body[data-theme='rubis'] {
  --fond: #ffffff;
  --texte: #6a1b3c;
  --texte-secondaire: #a36d83;
  --surface: #fef7f9; /* Ancien fond, pour un léger contraste */
  --bordure: #e6dbe0;
  --primaire: #c23b6b;
  --primaire-hover: #a8335d;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="70" height="70" viewBox="0 0 100 100"><path d="M50 0 L65 20 L50 40 L35 20 Z M0 50 L20 65 L40 50 L20 35 Z M60 50 L80 65 L100 50 L80 35 Z M50 100 L65 80 L50 60 L35 80 Z" fill="%23c23b6b" opacity="0.05" /></svg>');
}

body[data-theme='sport'] {
  --fond: #f5f3f7;
  --texte: #311b92;
  --texte-secondaire: #7e57c2;
  --surface: #ffffff;
  --bordure: #d1c4e9;
  --primaire: #673ab7;
  --primaire-hover: #5e35b1;
  --rayon: 0.5rem; /* Formes un peu plus carrées */
  background-image: repeating-linear-gradient(45deg, transparent, transparent 25px, rgba(103, 58, 183, 0.04) 25px, rgba(103, 58, 183, 0.04) 30px);
}

body[data-theme='futuriste'] {
  --fond: #000000;
  --texte: #00ff00;
  --texte-secondaire: #00cc00;
  --surface: #0a0a0a;
  --bordure: #00ff00;
  --primaire: #00ff00;
  --primaire-hover: #ffffff;
  --font-sans: 'Courier New', Courier, monospace;
  --rayon: 0rem;
  --ombre: 0 0 8px rgba(0, 255, 0, 0.5);
}

body[data-theme='galet'] {
  --fond: #e9eef2; /* Un gris-bleu très clair */
  --texte: #334155;
  --texte-secondaire: #64748b;
  --surface: #f8fafc;
  --bordure: transparent;
  --primaire: #6366f1;
  --primaire-hover: #4f46e5;
  --ombre: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 -5px 10px -5px rgba(255, 255, 255, 0.9);
}

body[data-theme='galet'] .carte-outil,
body[data-theme='galet'] .recherche-filtres-integres {
  border-color: transparent;
}

body[data-theme='cahier'] {
  --fond: #ffffff;
  --texte: #212121;
  --texte-secondaire: #757575;
  --surface: #fafafa;
  --bordure: #e0e0e0;
  --primaire: #d32f2f;
  --primaire-hover: #c62828;
  --font-sans: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  --rayon: 0.25rem;
  --ombre: 0 1px 2px rgba(0, 0, 0, 0.1);
  background-image: linear-gradient(rgba(0,0,0,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(0,0,0,0.04) 1px, transparent 1px);
  background-size: 25px 25px;
}

body[data-theme='cristal'] {
  --fond: #1a1a1a;
  --texte: #f0f0f0;
  --texte-secondaire: #d0d0d0;
  --surface: rgba(255, 255, 255, 0.25); /* Plus opaque pour la lisibilité */
  --bordure: rgba(255, 255, 255, 0.2);
  --primaire: #ffffff;
  --primaire-hover: #f0f0f0;
  --ombre: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
  text-shadow: 0 0 6px rgba(0, 0, 0, 0.4); /* Ombre pour détacher le texte */
  
  background: #1a1a1a;
  /* Fond simplifié et plus froid pour la performance et le contraste */
  background-image:
    radial-gradient(at 10% 20%, hsla(189,100%,56%,0.7) 0px, transparent 50%),
    radial-gradient(at 80% 20%, hsla(242,100%,70%,0.6) 0px, transparent 50%),
    radial-gradient(at 20% 80%, hsla(340,100%,76%,0.6) 0px, transparent 50%),
    radial-gradient(at 90% 90%, hsla(180,100%,70%,0.7) 0px, transparent 50%);
  background-size: 100% 100%;
  background-attachment: fixed;
}

body[data-theme='cristal'] .carte-outil,
body[data-theme='cristal'] .recherche-filtres-integres,
body[data-theme='cristal'] .fiche-detail,
body[data-theme='cristal'] header {
  background: var(--surface);
  backdrop-filter: blur(8px); /* Flou réduit pour la performance */
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--bordure);
}

/* Amélioration de la lisibilité des tags en mode Cristal */
body[data-theme='cristal'] .carte-header .type-badge,
body[data-theme='cristal'] .carte-footer .tag {
  background: rgba(255, 255, 255, 0.2);
  color: var(--texte);
  border: 1px solid var(--bordure);
}

/* Amélioration de la lisibilité de la recherche en mode Cristal */
body[data-theme='cristal'] #recherche {
  background: rgba(0, 0, 0, 0.2);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.3);
}

body[data-theme='cristal'] #recherche::placeholder {
  color: rgba(255, 255, 255, 0.6);
}

body[data-theme='matériel'] {
  --fond: #f5f5f5; /* Un gris très léger, proche du blanc */
  --texte: #212121; /* Noir profond pour le texte principal */
  --texte-secondaire: #757575; /* Gris moyen pour les textes secondaires */
  --surface: #ffffff; /* Blanc pur pour les cartes et conteneurs */
  --bordure: #e0e0e0; /* Gris clair pour les bordures subtiles */
  --primaire: #6200EE; /* Violet Material Design par défaut */
  --primaire-hover: #3700B3; /* Violet plus foncé pour le survol */
  --ombre: 0 2px 4px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.05); /* Ombre douce */
  --rayon: 0.5rem; /* Rayon moyen, légèrement arrondi */
  --font-sans: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; /* Polices système */
  --primaire-transparent: rgba(98, 0, 238, 0.1); /* Violet transparent pour les tags */
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 100 100"><g fill="%23e0e0e0" fill-opacity="0.4"><path d="M0 50 L50 100 L100 50 L50 0 Z M50 25 L75 50 L50 75 L25 50 Z"/></g></svg>');
}

/* Ajustements spécifiques pour l'aspect Material Design */
body[data-theme='matériel'] #recherche {
  box-shadow: none; /* Material utilise moins de shadow sur les inputs */
  border: 1px solid var(--bordure);
}

body[data-theme='matériel'] #recherche:focus {
  border-color: var(--primaire);
  box-shadow: 0 0 0 3px var(--primaire-transparent); /* Anneau de focus Material */
  outline: none;
}

body[data-theme='matériel'] .carte-outil {
  border: none; /* Pas de bordure, l'ombre fait l'élévation */
  box-shadow: var(--ombre);
}

body[data-theme='matériel'] .carte-outil:hover {
  transform: translateY(-3px); /* Légère élévation au survol */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.08); /* Ombre plus prononcée */
}

body[data-theme='matériel'] .filtres-header,
body[data-theme='matériel'] #filtres select,
body[data-theme='matériel'] .filtre-favoris-btn {
  box-shadow: var(--ombre); /* Ombre pour l'élévation */
  border: 1px solid var(--bordure);
}

body[data-theme='matériel'] .fiche-detail {
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2), 0 4px 8px rgba(0, 0, 0, 0.1); /* Ombre plus prononcée pour les modales */
}

/* Couleurs des tags (s'inspirant du Material) */
body[data-theme='matériel'] .tag-date { background: #E8EAF6; color: #3F51B5; border-color: #C5CAE9; } /* Indigo */
body[data-theme='matériel'] .tag-type { background: #E0F2F7; color: #00BCD4; border-color: #B2EBF2; } /* Cyan */
body[data-theme='matériel'] .tag-public { background: #E8F5E9; color: #4CAF50; border-color: #C8E6C9; } /* Vert */
body[data-theme='matériel'] .tag-discipline { background: #F3E5F5; color: #9C27B0; border-color: #E1BEE7; } /* Violet Foncé */
body[data-theme='matériel'] .tag-tag { background: #FBE9E7; color: #FF5722; border-color: #FFCCBC; } /* Orange Foncé */

/* Boutons d'accès popup (couleurs génériques, non Google) */
body[data-theme='matériel'] .fiche-liens .acces { background-color: #2196F3; } /* Bleu Material */
body[data-theme='matériel'] .fiche-liens .wiki { background-color: #4CAF50; } /* Vert Material */
body[data-theme='matériel'] .fiche-liens .forge { background-color: #F44336; } /* Rouge Material */
body[data-theme='matériel'] .fiche-liens .changelog { background-color: #FFC107; color: #212121; } /* Ambre Material (texte noir) */

body[data-theme='fluence'] {
  --fond: #f8f8fa; /* Un gris bleuté très clair */
  --texte: #242424; /* Gris très foncé, presque noir */
  --texte-secondaire: #606060; /* Gris plus doux pour les secondaires */
  --surface: #ffffff; /* Blanc pour les surfaces */
  --bordure: #e1e1e1; /* Bordure fine et discrète */
  --primaire: #0078D4; /* Bleu Fluent par défaut */
  --primaire-hover: #005A9E; /* Bleu plus foncé au survol */
  --ombre: 0 4px 10px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.03); /* Ombre plus diffuse */
  --rayon: 0.35rem; /* Rayon plus subtil, moins prononcé */
  --font-sans: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; /* Polices système */
  --primaire-transparent: rgba(0, 120, 212, 0.1); /* Bleu transparent pour les tags */
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 100 100"><path d="M0 50 C25 25, 75 75, 100 50" stroke="%23e1e1e1" fill="none" stroke-width="2" stroke-linecap="round" opacity="0.5"/><path d="M0 60 C25 35, 75 85, 100 60" stroke="%23e1e1e1" fill="none" stroke-width="2" stroke-linecap="round" opacity="0.5"/></svg>');
}

/* Ajustements spécifiques pour l'aspect Fluent Design */
body[data-theme='fluence'] #recherche {
  border: 1px solid var(--bordure);
  box-shadow: none;
}

body[data-theme='fluence'] #recherche:focus {
  border-color: var(--primaire);
  box-shadow: 0 0 0 2px var(--primaire-transparent); /* Léger halo de focus */
  outline: none;
}

body[data-theme='fluence'] .carte-outil {
  border: 1px solid var(--bordure); /* Bordure fine visible */
  box-shadow: var(--ombre);
}

body[data-theme='fluence'] .carte-outil:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04); /* Ombre plus douce et large */
}

body[data-theme='fluence'] .filtres-header,
body[data-theme='fluence'] #filtres select,
body[data-theme='fluence'] .filtre-favoris-btn {
  border: 1px solid var(--bordure);
  box-shadow: var(--ombre);
}

body[data-theme='fluence'] .fiche-detail {
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1), 0 4px 8px rgba(0, 0, 0, 0.05);
}

/* Couleurs des tags (s'inspirant de la palette Fluent) */
body[data-theme='fluence'] .tag-date { background: #E6F0F6; color: #005C9C; border-color: #CCDAE4; } /* Bleu-gris */
body[data-theme='fluence'] .tag-type { background: #E1F7E1; color: #007233; border-color: #B8EBD8; } /* Vert doux */
body[data-theme='fluence'] .tag-public { background: #F6F1E6; color: #7B5F00; border-color: #EDE2CC; } /* Jaune-ocre */
body[data-theme='fluence'] .tag-discipline { background: #F7EBF5; color: #7C2A69; border-color: #EBD2E6; } /* Rose-violet */
body[data-theme='fluence'] .tag-tag { background: #EBEFF9; color: #4354A0; border-color: #D3DDF4; } /* Bleu clair */

/* Boutons d'accès popup */
body[data-theme='fluence'] .fiche-liens .acces { background-color: #0078D4; } /* Bleu */
body[data-theme='fluence'] .fiche-liens .wiki { background-color: #10893E; } /* Vert */
body[data-theme='fluence'] .fiche-liens .forge { background-color: #7A2E9F; } /* Violet */
body[data-theme='fluence'] .fiche-liens .changelog { background-color: #D96A00; } /* Orange */
body {
  margin: 0;
  font-family: var(--font-sans);
  background: var(--fond);
  color: var(--texte);
  line-height: 1.2;
}

header {
  background: var(--surface);
  padding: 1rem 2rem;
  border-bottom: 1px solid var(--bordure);
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 100;
  transition: transform 0.3s ease-in-out;
}

header.header-hidden {
  transform: translateY(-100%);
}

.logo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.logo img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}
.logo span {
  line-height: 1.2;
  font-size: 0.9rem;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.view-toggle {
  display: flex;
  background: var(--fond);
  border-radius: var(--rayon);
  padding: 0.2rem;
  align-items: center;
}

/* Conteneur pour les contrôles de la grille (icône + chiffres) */
.grid-controls {
  display: flex;
  align-items: center;
  background: var(--surface);
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
  padding: 0 0.2rem;
  transition: all 0.3s ease;
}

/* Wrapper pour les options de colonnes pour gérer l'animation */
#cols-options-wrapper {
  display: flex;
  align-items: center;
  max-width: 0;
  overflow: hidden;
  transition: max-width 0.4s ease-in-out;
  white-space: nowrap;
}

/* État "ouvert" du sélecteur */
.grid-controls.expanded #cols-options-wrapper {
  max-width: 200px; /* Assez grand pour contenir les boutons */
}

/* Style des boutons de colonnes */
#cols-options-wrapper button {
  background: none;
  border: none;
  padding: 0.4rem 0.7rem;
  cursor: pointer;
  color: var(--texte-secondaire);
  font-weight: 500;
  border-radius: var(--rayon);
  margin: 0 0.1rem;
}

#cols-options-wrapper button.active {
  background: var(--fond);
  color: var(--primaire);
}

/* Cacher les boutons non actifs quand le menu est fermé */
.grid-controls:not(.expanded) #cols-options-wrapper button:not(.active) {
  display: none;
}

/* Style général des boutons dans le view-toggle */
.view-toggle button {
  background: none;
  border: none;
  padding: 0.4rem 0.8rem;
  border-radius: var(--rayon);
  cursor: pointer;
  color: var(--texte-secondaire);
  font-size: 1rem;
  flex-shrink: 0; /* Empêche les boutons de se réduire */
}

/* Style pour le bouton de liste quand il n'est pas actif */
#list-view-btn:not(.active) {
  background: transparent;
  box-shadow: none;
}

/* Style pour les boutons actifs (soit le conteneur grille, soit le bouton liste) */
.view-toggle > .active {
  background: var(--surface);
  color: var(--primaire);
  box-shadow: var(--ombre);
}

/* Le conteneur grille est actif quand la vue grille est sélectionnée */
.grid-controls.active {
  color: var(--primaire);
}

/* Quand la grille n'est pas active, on change juste son apparence */
.grid-controls:not(.active) {
  background: transparent;
  box-shadow: none;
  color: var(--texte-secondaire);
}

/* Masquer le sélecteur de colonnes quand la grille n'est pas active */
.grid-controls:not(.active) #cols-options-wrapper {
  display: none;
}

#refresh-data {
  font-size: 1.5rem;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--texte-secondaire);
}
.theme-selector {
  position: relative;
}

#theme-menu-btn {
  font-size: 1.2rem;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--texte-secondaire);
  padding: 0.4rem;
}

.theme-menu {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
  padding: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  z-index: 110;
  width: 150px;
}

.theme-menu button {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem;
  border-radius: var(--rayon);
  cursor: pointer;
  background: none;
  border: none;
  text-align: left;
  width: 100%;
  font-family: var(--font-sans);
  color: var(--texte);
}

.theme-menu button:hover {
  background: var(--fond);
}

.theme-menu button.active {
  font-weight: bold;
  color: var(--primaire);
}

.theme-menu .theme-label {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.theme-menu .theme-active-icon {
  visibility: hidden;
  color: var(--primaire);
  font-size: 0.9rem;
}

.theme-menu button.active .theme-active-icon {
  visibility: visible;
}

.theme-menu .theme-color-preview {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid var(--bordure);
  flex-shrink: 0;
  background: linear-gradient(
    to bottom,
    var(--theme-text) 50%,
    var(--theme-bg) 50%
  );
}

main {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1rem;
}

.main-title {
  text-align: center;
  margin-bottom: 2rem;
}
.main-title h1 {
  font-size: 2.25rem;
  margin-bottom: 0.5rem;
}
.main-title p {
  font-size: 1.1rem;
  color: var(--texte-secondaire);
  max-width: 600px;
  margin: 0 auto;
}

.recherche-filtres-section {
  max-width: 850px;
  margin: 0 auto 1rem auto;
}

.recherche-filtres-barre {
  display: flex;
  gap: 0.75rem;
  align-items: stretch; /* Pour que les éléments aient la même hauteur */
}

.recherche-wrapper {
  position: relative;
  flex-grow: 1;
}

.recherche-wrapper .fa-magnifying-glass {
  position: absolute;
  left: 1.25rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--texte-secondaire);
}

#recherche {
  width: 100%;
  height: 100%;
  padding: 0.8rem 1rem 0.8rem 3rem;
  border-radius: var(--rayon);
  border: 1px solid var(--bordure);
  background: var(--surface);
  color: var(--texte);
  font-size: 1rem;
  box-sizing: border-box;
  box-shadow: var(--ombre);
}

.filtres-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0 1.25rem;
  cursor: pointer;
  border-radius: var(--rayon);
  border: 1px solid var(--bordure);
  background: var(--surface);
  color: var(--texte);
  font-weight: 500;
  box-shadow: var(--ombre);
  flex-shrink: 0;
  transition: background-color 0.2s;
}

.filtres-header:hover {
  background: var(--fond);
}

.filtres-header .toggle-icon {
  transition: transform 0.3s ease;
  color: var(--texte-secondaire);
}

.filtres-container.collapsed .toggle-icon {
  transform: rotate(-90deg);
}

.filtres-container {
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
  margin-top: 0.75rem;
  overflow: hidden;
  transition: all 0.3s ease-in-out;
  max-height: 1000px; /* Hauteur suffisante pour les filtres */
}

.tri-btn {
  width: 50px;
  height: 50px;
  cursor: pointer;
  border-radius: var(--rayon);
  border: 1px solid var(--bordure);
  background: var(--surface);
  color: var(--texte);
  font-size: 1rem;
  box-shadow: var(--ombre);
  flex-shrink: 0;
  transition: background-color 0.2s;
  display: grid;
  place-items: center;
}

.tri-btn:hover {
  background: var(--fond);
}

.filtres-container.collapsed {
  max-height: 0;
  border-width: 0;
  margin-top: 0;
  padding: 0;
}

#filtres {
  display: grid;
  grid-template-columns: repeat(4, 1fr) auto;
  gap: 1rem;
  align-items: center;
  padding: 1.5rem;
}
#filtres select {
  width: 100%;
  padding: 0.6rem 1rem;
  border-radius: var(--rayon);
  border: 1px solid var(--bordure);
  background: var(--fond);
  color: var(--texte);
}

.reset-filters-btn {
  padding: 0.6rem 1rem;
  border-radius: var(--rayon);
  border: 1px solid var(--bordure);
  background: var(--fond);
  color: var(--texte-secondaire);
  cursor: pointer;
  transition: all 0.2s;
  font-size: 1rem;
  display: grid;
  place-items: center;
}

.reset-filters-btn:hover {
  background: var(--primaire);
  color: white;
  border-color: var(--primaire-hover);
}

.filtre-favoris-btn {
  width: 50px; /* Cohérent avec .tri-btn */
  height: 50px; /* Cohérent avec .tri-btn */
  padding: 0;
  border-radius: var(--rayon); /* Cohérent avec .tri-btn */
  border: 1px solid var(--bordure);
  background: var(--surface); /* Cohérent avec .tri-btn */
  color: var(--texte);
  cursor: pointer;
  font-size: 1rem; /* Cohérent avec .tri-btn */
  display: grid; /* Cohérent avec .tri-btn */
  place-items: center; /* Cohérent avec .tri-btn */
  transition: all 0.2s;
  box-sizing: border-box;
  box-shadow: var(--ombre); /* Cohérent avec .tri-btn */
  flex-shrink: 0; /* Cohérent avec .tri-btn */
}

.filtre-favoris-btn:hover {
  border-color: var(--primaire);
  color: var(--primaire);
}

.filtre-favoris-btn.actif {
  background: var(--primaire);
  color: white;
  border-color: var(--primaire);
}

.filtre-favoris-btn.actif .fa-star {
  color: #ffc107;
}

#resultats-compteur {
  color: var(--texte-secondaire);
  margin-bottom: 1rem;
}

#liste-outils {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1.5rem;
}

#liste-outils[data-cols="1"] { grid-template-columns: 1fr; }
#liste-outils[data-cols="2"] { grid-template-columns: repeat(2, 1fr); }
#liste-outils[data-cols="3"] { grid-template-columns: repeat(3, 1fr); }
#liste-outils[data-cols="4"] { grid-template-columns: repeat(4, 1fr); }


/* Styles pour la vue en liste */
#liste-outils.list-view {
  grid-template-columns: 1fr;
}

#liste-outils.list-view .carte-outil {
  flex-direction: row;
  align-items: stretch; /* Pour que les éléments s'étirent */
  gap: 1.5rem;
  padding: 1.5rem;
}

#liste-outils.list-view .carte-image-container {
  flex-basis: 400px; /* Augmentation supplémentaire de la largeur */
  flex-shrink: 0;
  cursor: default;
}

#liste-outils.list-view .carte-image-container img {
  border-radius: var(--rayon);
  width: 100%;
  height: 100%;
  object-fit: cover; /* Pour que l'image couvre la zone sans se déformer */
}

#liste-outils.list-view .carte-contenu {
  padding: 0;
  gap: 0.8rem;
}

#liste-outils.list-view .carte-footer {
  border-top: none;
  padding-top: 0;
}

/* Suppression de la règle qui forçait l'affichage permanent en vue liste */

.carte-outil {
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
  display: flex;
  flex-direction: column;
  transition: transform 0.2s, box-shadow 0.2s;
}
.carte-outil:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
}
.carte-image-container {
  position: relative;
  cursor: pointer;
}
.carte-image-container .open-link {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  width: 2.5rem;
  height: 2.5rem;
  background: rgba(255,255,255,0.9);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--texte);
  font-size: 1.2rem;
  text-decoration: none;
  opacity: 1;
  transform: scale(0.8);
  transition: opacity 0.2s, transform 0.2s;
}
.carte-outil:hover .open-link {
  opacity: 1;
  transform: scale(1);
}
.carte-outil img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  background: #eee;
  border-top-left-radius: var(--rayon);
  border-top-right-radius: var(--rayon);
}

.carte-image-container .default-svg {
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
    border-top-left-radius: var(--rayon);
    border-top-right-radius: var(--rayon);
}

.fiche-detail-grid .default-svg {
    width: 100%;
    border-radius: var(--rayon);
    box-shadow: var(--ombre);
}

.carte-contenu {
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  gap: 1rem;
}
.carte-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
}

.carte-header-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.favori-btn {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  width: 2.5rem;
  height: 2.5rem;
  background: rgba(255,255,255,0.9);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--texte-secondaire);
  font-size: 1.2rem;
  border: none;
  cursor: pointer;
  opacity: 1;
  transform: scale(0.8);
  transition: opacity 0.2s, transform 0.2s;
}

.carte-outil:hover .favori-btn, .favori-btn.is-favori {
  opacity: 1;
  transform: scale(1);
}

.favori-btn .fa-solid {
  color: #ffc107;
}

.carte-header h2 {
  font-size: 1.25rem;
  margin: 0;
  color: var(--primaire);
}
/* La règle .carte-header .type-badge est maintenant inutile car on utilise .tag-type */

/* --- Styles de base pour les tags --- */
.tag {
  font-weight: 500;
  border-radius: 999px;
  white-space: nowrap;
  border: 1px solid; /* La couleur est définie par les modificateurs */
  flex-shrink: 0;
}

/* Styles spécifiques aux tags des cartes */
.carte-header .tag,
.carte-footer .tag {
  font-size: 0.7rem;
  padding: 0.25rem 0.5rem;
}

body {
  --primaire-transparent: #e0e7ff;
}
body[data-theme='sombre'] {
  --primaire-transparent: rgba(59, 130, 246, 0.2);
}


.carte-contenu p {
  font-size: 0.9rem;
  color: var(--texte-secondaire);
  margin: 0;
  flex-grow: 1; /* La description prend l'espace disponible */
  line-height: 1.5;
  /* Empêche le texte de déborder sur plus de 5 lignes */
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.carte-footer {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-top: auto; /* Aligne le pied de page en bas de la carte */
  padding-top: 0.25rem;
  border-top: 1px solid var(--bordure);
}

.info-section {
  display: flex;
  align-items: flex-start; /* Aligner le contenu en haut */
  gap: 0.25rem;
/*   min-height: 60px; Augmenter la hauteur minimale pour accommoder plusieurs lignes */
}

.info-section i {
  color: var(--texte-secondaire);
  margin-top: 0.2rem;  /* Aucun margin ou padding pour un alignement flex parfait */
}

.tags-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* Forcer une hauteur minimale pour aligner les sections entre les cartes */
/* La hauteur minimale est supprimée pour permettre aux sections de disparaître complètement si elles sont vides */
/* Les sélecteurs .public-section et .tags-section sont supprimés car .info-section est maintenant utilisé dynamiquement */

.footer-divider {
  border: none;
  border-top: 1px solid var(--bordure);
  margin: 0;
}

/* Les styles spécifiques à la position sont maintenant gérés par la règle .tag de base */

/* Suppression des styles .public-tag car on utilise .tag-public de la modale */

body {
  --surface-badge: #e5e7eb;
  --texte-badge: #374151;
}
body[data-theme='sombre'] {
  --surface-badge: #374151;
  --texte-badge: #e5e7eb;
}

/* --- POPUP --- */
#popup-detail {
  position: fixed;
  inset: 0;
  background: rgba(17, 24, 39, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
  opacity: 0;
  transition: opacity 0.3s;
  padding: 1rem;
}
#popup-detail:not(.caché) {
  opacity: 1;
}
.fiche-detail {
  background: var(--surface);
  border-radius: var(--rayon);
  width: 100%;
  max-width: 950px;
  max-height: 95vh;
  overflow-y: auto;
  padding: 1.5rem;
  position: relative;
  transform: scale(0.95);
  transition: transform 0.3s;
}
#popup-detail:not(.caché) .fiche-detail {
  transform: scale(1);
}
.fiche-detail .fermer {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: var(--texte-secondaire);
}
.fiche-detail .partager-markdown {
  position: absolute;
  top: 1rem;
  right: 4rem;
  background: none;
  border: none;
  font-size: 1.4rem;
  cursor: pointer;
  color: var(--texte-secondaire);
  padding: 0;
  width: 2rem;
  height: 2rem;
  line-height: 2rem;
  text-align: center;
}
.fiche-detail-grid {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 1.5rem;
}
.fiche-detail-grid img {
  width: 100%;
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
}
.fiche-detail h2 {
  font-size: 1.8rem;
  margin: 0 0 1rem 0;
}
.fiche-detail .description {
  margin: 1rem 0;
}
.fiche-liens {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin: 1rem 0;
}
.fiche-liens a {
  text-decoration: none;
  color: #fff;
  padding: 0.6rem 1rem;
  border-radius: var(--rayon);
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  transition: filter 0.2s;
}
.fiche-liens a:hover {
  filter: brightness(1.1);
}
.fiche-liens .acces { background-color: #2563eb; }
.fiche-liens .wiki { background-color: #16a34a; }
.fiche-liens .forge { background-color: #9333ea; }
.fiche-liens .changelog { background-color: #d97706; }

.qr-code-container {
  background: var(--fond);
  padding: 1rem;
  border-radius: var(--rayon);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.metadata-section {
  margin-top: 1rem;
}
.metadata-section h3 {
  font-size: 0.9rem;
  margin-bottom: 0.4rem;
  color: var(--texte-secondaire);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.metadata-section .tags {
  gap: 0.4rem;
}
/* Style de base pour les tags dans la modale */
.metadata-section .tag {
  font-size: 0.8rem;
  padding: 0.1rem 0.6rem;
}

/* --- Définitions des couleurs des tags --- */
/* Ces règles s'appliquent maintenant partout grâce à l'harmonisation des classes */
.tag-date { background: #dbeafe; color: #1e40af; border-color: #bfdbfe; }
.tag-type { background: #e0e7ff; color: #4338ca; border-color: #c7d2fe; }
.tag-public { background: #d1fae5; color: #065f46; border-color: #a7f3d0; }
.tag-discipline { background: #f3e8ff; color: #7e22ce; border-color: #e9d5ff; }
.tag-tag { background: #e5e7eb; color: #374151; border-color: #d1d5db; }

/* Règle pour que les tags ne soient jamais coupés */
.tag {
  white-space: nowrap;
}

.spinner {
  width: 40px;
  height: 40px;
  border: 4px solid var(--bordure);
  border-top-color: var(--primaire);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 2rem auto;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* --- MODALE DE PARTAGE --- */
#share-btn {
  font-size: 1.2rem;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--texte-secondaire);
  padding: 0.4rem;
}

.share-modal {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 200;
  width: 350px;
  background: var(--surface);
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
  border: 1px solid var(--bordure);
  opacity: 0;
  transform: translateY(-20px);
  transition: opacity 0.3s, transform 0.3s;
  pointer-events: none;
}

.share-modal:not(.caché) {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.share-modal-content {
  padding: 1.5rem;
  position: relative;
}

.close-share-modal {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: var(--texte-secondaire);
}

.share-modal-content h3 {
  margin-top: 0;
  margin-bottom: 0.5rem;
}

.share-modal-content p {
  font-size: 0.9rem;
  color: var(--texte-secondaire);
  margin-bottom: 1rem;
}

.share-url-container {
  position: relative;
  display: flex;
  align-items: center;
  margin-bottom: 1rem;
}

#share-url {
  width: 100%;
  padding: 0.5rem 2.5rem 0.5rem 0.5rem; /* Ajout de padding à droite pour le bouton */
  border-radius: var(--rayon);
  border: 1px solid var(--bordure);
  background: var(--fond);
  color: var(--texte);
  box-sizing: border-box;
}

#copy-share-url {
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--texte-secondaire);
  font-size: 1.2rem;
  padding: 0.25rem;
}

#qrcode {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1rem;
  border-radius: 0.5rem;
  border: 1px solid var(--bordure);
  background: var(--surface);
}
.caché { display: none !important; }

@media (max-width: 900px) {
  .fiche-detail-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 768px) {
  header {
    flex-direction: column;
    gap: 1rem;
    padding: 1rem;
  }
  main {
    padding: 1rem;
  }

  .recherche-filtres-barre {
    flex-wrap: wrap;
  }

  .recherche-wrapper {
    flex-basis: 100%;
    order: 1;
  }

  .filtre-favoris-btn {
    order: 3;
  }

  .tri-btn {
    order: 2;
  }

  .filtres-header {
    order: 4;
    margin-left: auto;
  }

  #filtres {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  }

  #liste-outils {
    grid-template-columns: 1fr;
  }
  #liste-outils[data-cols="2"],
  #liste-outils[data-cols="3"],
  #liste-outils[data-cols="4"] {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  #filtres {
    grid-template-columns: 1fr;
  }

  #liste-outils,
  #liste-outils[data-cols="2"],
  #liste-outils[data-cols="3"],
  #liste-outils[data-cols="4"] {
    grid-template-columns: 1fr;
  }
}

footer {
  text-align: center;
  padding: 1rem;
  margin-top: 2rem;
  border-top: 1px solid var(--bordure);
  font-size: 0.8rem;
  color: var(--texte-secondaire);
  background: var(--surface);
}

#footer-copyright {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.3rem 0.3rem;
}

footer a {
  color: var(--texte-secondaire);
  text-decoration: none;
  font-weight: 500;
  white-space: nowrap;
}

footer a i {
  margin-right: 0.3em;
}

footer a:hover {
  color: var(--primaire);
  text-decoration: underline;
}

footer p {
  margin: 0.25rem 0;
}

/* Styles pour la page des mentions légales */
.legal-main {
  max-width: 800px;
  margin: 2rem auto;
  padding: 2rem;
  background: var(--surface);
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
  flex-grow: 1;
}

.legal-main h1, .legal-main h2 {
  color: var(--primaire);
}

.legal-main a {
  color: var(--primaire);
}

/* --- Bouton Remonter en haut --- */
#scrollTopBtn {
  position: fixed;
  bottom: 20px; /* Relevé pour ne pas chevaucher le footer */
  right: 20px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5); /* Transparence augmentée */
  color: var(--texte);
  border: 1px solid rgba(255, 255, 255, 0.2);
  cursor: pointer;
  display: flex;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  z-index: 210; /* Au-dessus du popup */
  box-shadow: var(--ombre);
  transition: opacity 0.3s, transform 0.3s, visibility 0.3s;
  opacity: 0;
  transform: translateY(20px);
  visibility: hidden;
  pointer-events: none;
}

#scrollTopBtn.visible {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
  pointer-events: auto;
}

#scrollTopBtn:hover {
  background: rgba(255, 255, 255, 0.7); /* Moins opaque au survol */
}

@media (max-width: 768px) {
  #scrollTopBtn {
    left: 50%;
    bottom: 20px; /* Reste plus bas sur mobile */
    transform: translateX(-50%) translateY(20px);
  }

  #scrollTopBtn.visible {
    transform: translateX(-50%) translateY(0);
  }
}