:root {
  --light-bg: #f8f9fa;
  --light-text: #232323;
  --dark-bg: #151517;
  --dark-text: #ededed;
  --primary: #3074e7;
  --gallery-title-light: #888888;
  --gallery-title-dark: #aaaaaa;
  --gallery-title-bg-light: #f2f2f5;
  --gallery-title-bg-dark: #18181b;
  --tooltip-fr-light: #333;
  --tooltip-fr-dark: #e2e2e2;
  --tooltip-bg-fr-light: #f5f5f5;
  --tooltip-bg-fr-dark: #242429;
  --lightbox-bg-light: #f0f0f0;
  --lightbox-bg-dark: #000000;
  --hover-btn: #ececec; /* Ajout d'une variable pour la couleur de survol */
}

html, body {
  min-height: 100%;
  height: 100%;
  font-family: 'Raleway', sans-serif;
}

[data-theme="light"] {
  background: var(--light-bg);
  color: var(--light-text);
}

[data-theme="dark"] {
  background: var(--dark-bg);
  color: var(--dark-text);
}

body {
  margin: 0;
}

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1em 2em;
  background: transparent;
}

.logo {
  height: 90px;
}

.top-btn-group {
  display: flex;
  gap: 1em;
}

.toggle-btn {
  background: var(--light-bg);
  color: var(--light-text);
  border: 1px solid var(--light-text);
  border-radius: 3px;
  padding: 0.5em 1.2em;
  font-family: inherit;
  font-weight: light;
  font-size: 1em;
  transition: background 0.2s, color 0.2s;
  cursor: pointer;
  outline: none;
}

[data-theme="dark"] .toggle-btn {
  background: var(--dark-bg);
  color: var(--dark-text);
  border: 1px solid var(--dark-text);
}

.toggle-btn:hover {
  background: var(--hover-btn); /* Utilisation de la nouvelle variable pour le survol */
  color: var(--primary);
}

main {
  padding: 1.5em 2em;
}


[data-theme="dark"] .gallery-head { color: var(--gallery-title-dark); }

.gallery-section { margin-bottom:2.5em; }
.gallery-list {
  display: flex; flex-wrap: wrap; gap: 1px;
  margin: 0; padding: 0;
}
.gallery-entry {
  display: flex; flex-direction: column; align-items: stretch; 
  margin: 0; padding: 0;
}

.gallery-thumb {
  /* Dimensions calculées dynamiquement via PHP */
  height: 200px; /* Hauteur fixe */
  background-size: cover; /* Cover pour remplir complètement */
  background-position: center center;
  background-repeat: no-repeat;
  box-shadow: 0 2px 18px #0002;
  position: relative; cursor:pointer; 
  margin: 0; padding: 0;
  border: none;
  outline: none;
  min-width: 100px;
  max-width: 400px;
}

.video-thumb {
  width: 355px; min-width: 170px;
  aspect-ratio: 16/9; height: auto;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  box-shadow: 0 2px 18px #0002;
  position: relative; cursor:pointer; margin: 0;
  border: none;
  outline: none;
}

.gallery-title {
  display: block;
  width: 100%;
  font-size: 1em; 
  font-weight: 300;
  padding: 0.25em 0;
  margin: 0;
  text-align: center;
  background: black; /* Pas de fond gris */
  color: grey; /* Couleur du thème */
}

.custom-tooltip {
  position: absolute;
  z-index: 999;
  width: 260px; /* largeur fixe */
  padding: 1em 1.1em;
  background: #27282c;
  color: #ededed;
  border-radius: 0; /* coins carrés */
  font-size: 1em;
  text-align: center;
  /* pointer-events: none; */
  white-space: pre-line;
  font-family: inherit;
  box-sizing: border-box;
}


.custom-tooltip.fr {
  color: var(--tooltip-fr-light) !important;
  background: var(--tooltip-bg-fr-light) !important;
}
[data-theme="dark"] .custom-tooltip.fr {
  color: var(--tooltip-fr-dark) !important;
  background: var(--tooltip-bg-fr-dark) !important;
}

[data-theme="light"] .custom-tooltip { background: #fff; color: #232323; }
[data-theme="dark"] .custom-tooltip  { background: #27282c; color: #ededed; }

@media (max-width: 760px) {
  .gallery-thumb, .video-thumb { width: 99vw; min-width: unset; height:180px;}
  main { padding: 1em .7em; }
  .gallery-list { gap:1px; }
  .logo { height:30px;}
}

/* Enhanced lightbox with theme-aware background */
.enhanced-lightbox[data-theme="light"] {
  background: var(--lightbox-bg-dark) !important;
}
.enhanced-lightbox[data-theme="dark"] {
  background: var(--lightbox-bg-dark) !important;
}

/* Video popup with theme-aware background */
.video-popup {
  position: fixed; 
  left: 0; 
  top: 0; 
  right: 0; 
  bottom: 0; 
  z-index: 2000;
  display: flex; 
  align-items: stretch; 
  justify-content: stretch;
  background: var(--lightbox-bg-dark) !important; /* Toujours noir */
}
[data-theme="light"] .video-popup {
  background: var(--lightbox-bg-dark);
}
[data-theme="dark"] .video-popup {
  background: var(--lightbox-bg-dark);
}

.video-popup-content {
  background: none;
  padding: 0;
  border-radius: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  position: relative;
}
.video-iframe-wrap {
  width: 100vw; height: 100vh; display: flex; align-items: stretch; justify-content: stretch;
}
.video-popup .popup-close {
  position: absolute;
  top: 20px;
  right: 40px;
  color: #ededed;
  background: rgba(20,20,20,0.35);
  font-size: 2.5em;
  border: none;
  z-index: 10;
  cursor: pointer;
}

/* À ajouter dans le <style> de index.php ou dans style.css */

/* Titres de sections de galerie */
.galerie.auteur {
  font-size: 1.3em !important; /* Agrandir la taille */
  font-weight: 600 !important;
  margin-bottom: 5px !important; /* Ajouter 5px de marge en bas */
  display: block;
}

/* Titres spécifiques des sections photo et vidéo */
#photo-title, #video-title {
  font-size: 1.3em !important;
  font-weight: 600 !important;
  margin-bottom: 5px !important;
}

/* Liens dans les sections galerie (couvertures, livres) */
.galerie.auteur a {
  font-size: 1.3em !important;
  font-weight: 600 !important;
  margin-bottom: 5px !important;
  text-decoration: none;
}

/* Container des liens couvertures/livres pour appliquer la marge */
div[style*="text-align:left"] .galerie.auteur {
  margin-bottom: 5px !important;
  line-height: 1.4;
}

/* S'assurer que tous les éléments .auteur ont la bonne taille et marge */
.auteur {
  font-size: 1.3em !important;
  font-weight: 600 !important;
  margin-bottom: 5px !important;
}

/* Responsive pour mobile */
@media (max-width: 767px) {
  .galerie.auteur,
  #photo-title, 
  #video-title,
  .galerie.auteur a,
  .auteur {
    font-size: 1.2em !important; /* Légèrement plus petit sur mobile */
  }
}

/* Nouvelle classe spécifique pour les éléments de galerie de index.php */
.sample {
  font-size: 1.3em !important;
  font-weight: 600 !important;
  margin-bottom: 5px !important;
  display: block;
}

/* Nouvelle classe spécifique pour les éléments de galerie de index.php */
.sample {
  font-size: 1.3em !important;
  font-weight: 600 !important;
  margin-bottom: 5px !important;
  display: block;
}

/* Nouvelle classe spécifique pour les éléments de galerie de index.php */
.sample {
  font-size: 1.3em !important;
  font-weight: 600 !important;
  margin-bottom: 5px !important;
  display: block;
}

/* Nouvelle classe spécifique pour les éléments de galerie de index.php */
.sample {
  font-size: 1.3em !important;
  font-weight: 600 !important;
  margin-bottom: 5px !important;
  display: block;
}

/* Pour les liens avec la classe sample - force la même taille exacte */
.sample a {
  font-size: 1em !important; /* Relatif au parent .sample qui fait déjà 1.3em */
  font-weight: 600 !important;
  margin-bottom: 0px !important;
  text-decoration: none;
  color: var(--light-text) !important; /* Noir en mode clair, blanc en mode sombre */
  transform: scale(1) !important; /* Empêche les transformations */
  zoom: 1 !important; /* Empêche le zoom */
  line-height: inherit !important;
  letter-spacing: inherit !important;
  transition: color 0.3s ease !important; /* Animation pour le hover */
  display: inline-block !important; /* Permet aux marges de fonctionner */
}
.sample {
  margin-bottom: 25px !important;
}

[data-theme="dark"] .sample a {
  color: var(--dark-text) !important; /* Blanc en mode sombre */
}

/* Hover rouge pour les liens sample - couleur directe */
.sample a:hover,
.sample a:focus {
  color: #cc4444 !important; /* Rouge direct au survol dans les deux thèmes */
}

/* Responsive pour mobile */
@media (max-width: 767px) {
  .sample {
    font-size: 1.2em !important; /* Légèrement plus petit sur mobile */
  }
  
  .sample a {
    font-size: 1em !important; /* Reste relatif au parent */
  }
}

/* Masquer le filet gris entre les sections en mode clair */
hr[style*="border-top: 1px solid var(--text-color"] {
  display: none !important;
}

/* Alternative plus spécifique si la première règle ne fonctionne pas */
div[style*="text-align:left"] hr {
  display: none !important;
}