/* YouTube lite embed facade */
.item-media .yt-lite {
  width: 100%;
  height: 100%;
  position: relative;
  background-color: #111;
  background-size: cover;
  background-position: center;
  cursor: pointer;
  display: block;
}
.item-media .yt-lite::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.15);
  transition: background 0.2s;
  z-index: 1;
}
.item-media .yt-lite:hover::before {
  background: rgba(0,0,0,0.05);
}
.item-media .yt-lite::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60px;
  height: 60px;
  background-color: rgba(200, 0, 0, 0.88);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpolygon points='9,7 19,12 9,17' fill='white'/%3E%3C/svg%3E");
  background-size: 55% 55%;
  background-repeat: no-repeat;
  background-position: 55% 50%;
  border-radius: var(--radius-pill);
  /* Ombre conservee : ce bouton flotte au-dessus d'une vignette, il doit s'en decoller. */
  box-shadow: 0 4px 16px rgba(0,0,0,0.5);
  transition: transform 0.2s;
  z-index: 2;
}
.item-media .yt-lite:hover::after {
  transform: translate(-50%, -50%) scale(1.12);
}
.item-media .yt-lite.yt-playing::before,
.item-media .yt-lite.yt-playing::after {
  display: none;
}

/* Gallery page styles */

/* Hero Section */
.gallery-hero {
  margin: 10px auto 40px;
  padding: 56px 20px;
  max-width: var(--largeur-site, 1200px);
  /* Bloc carbone : aplat opaque, arete vive, plus de cerne lime decoratif.
     Le lime revient uniquement par la barre de course sous le titre. */
  border-radius: var(--radius-lg);
  background: var(--carbon);
  border: 1px solid var(--border-color);
  text-align: left;
  box-shadow: none;
}

.hero-title {
  /* Le centrage decrochait la barre lime du debut du titre. */
  margin: 0 0 var(--space-3);
  font-size: clamp(32px, 5vw, 48px);
  text-align: left;
}

.hero-title .title-text {
  /* Le titre reste en couleur pleine de texte : le lime est porte par la barre
     de course sous le titre, pas par le titre lui-meme. Un accent qui remplit
     les titres cesse d'etre un accent. */
  color: var(--text-primary);
}

.hero-subtitle {
  color: var(--muted);
  margin: 0;
  max-width: var(--container-text);
  font-size: clamp(16px, 2vw, 18px);
}

/* Filter Section */
.filter-section {
  max-width: var(--largeur-site, 1200px);
  margin: 0 auto 32px;
  padding: 0 20px;
  display: flex;
  /* Aligne a gauche comme le reste de la page. Le `margin: 0 auto` est
     conserve : il centre le CONTENEUR en largeur, pas son contenu. */
  justify-content: flex-start;
}

.filter-tabs {
  display: inline-flex;
  gap: 12px;
  background: var(--card-bg);
  padding: 8px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-color);
  backdrop-filter: blur(10px);
}

/* Onglets de filtre : contour NEUTRE au repos, l'aplat lime est reserve a
   l'onglet actif. Hauteur portee au seuil tactile de 48px. */
.filter-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 28px;
  border: 2px solid var(--border-control);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-primary);
  font-family: inherit;
  font-size: var(--text-base);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition-property: var(--anim-proprietes);
  transition-duration: 0.3s;
  transition-timing-function: ease;
}

.filter-btn:hover {
  background: var(--card-bg-hover);
  border-color: var(--accent-line);
  color: var(--accent-text);
}

.filter-btn.active {
  background: var(--accent);
  border-color: var(--accent-ink);
  color: var(--accent-ink);
}

/* Gallery Grid */
.gallery-grid {
  max-width: var(--largeur-site, 1200px);
  margin: 0 auto 40px;
  padding: 0 20px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 24px;
}

.gallery-item {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  overflow: hidden;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
  box-shadow: none;
  opacity: 1;
  transform: scale(1);
}

.gallery-item.hidden {
  display: none;
}

.gallery-item:hover {
  transform: translateY(-6px);
  border-color: var(--accent-line);
  box-shadow: none;
}

.item-media {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  background: var(--carbon);
  overflow: hidden;
}

.item-media iframe {
  width: 100%;
  height: 100%;
  border: none;
}

/* Keep photo carousels at same 16/9 ratio as videos for uniform card sizing */
.item-media.photo-carousel {
  aspect-ratio: 16/9;
  display: block;
}

/* Ensure carousel track adapts to tallest image */
.photo-carousel .carousel-track {
  align-items: center;
}

/* Photo placeholder */
.photo-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: var(--card-bg-hover);
}

.placeholder-icon {
  font-size: 48px;
  opacity: 0.5;
}

.placeholder-text {
  color: var(--muted);
  font-size: 14px;
  opacity: 0.7;
}

.item-info {
  padding: 18px;
}

.item-title {
  margin: 0 0 8px;
  color: var(--text);
  font-size: 18px;
  font-weight: 700;
}

.item-description {
  margin: 0 0 12px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}

.item-badge {
  display: inline-block;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  background: var(--card-bg-hover);
  /* Le vert reste porte par le TEXTE du badge ; le cerne lime au repos partait
     en filet decoratif sur chaque carte. */
  color: var(--accent-text);
  font-size: 12px;
  font-weight: 700;
  border: 1px solid var(--border-color);
}

/* Photo Carousel */
.photo-carousel {
  position: relative;
  overflow: hidden;
}

.carousel-track {
  display: flex;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.carousel-slide {
  min-width: 100%;
  flex-shrink: 0;
  display: flex; /* Keep all slides for transform animation */
}

/* Non-visible (off-screen) slides accessibility */
.carousel-slide[aria-hidden="true"] {
  pointer-events: none;
}

.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  /* Cible tactile portee au seuil de 44px (elle en mesurait 40). */
  width: var(--tap-min);
  height: var(--tap-min);
  min-height: var(--tap-min);
  border: none;
  border-radius: var(--radius-pill);
  background: rgba(0,0,0,0.7);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition-property: var(--anim-proprietes);
  transition-duration: 0.3s;
  transition-timing-function: ease;
  z-index: 10;
  opacity: 0;
  backdrop-filter: blur(4px);
}

.photo-carousel:hover .carousel-btn {
  opacity: 1;
}


/* Lightbox (full resolution view) */
.lightbox-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.85);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  padding: 20px;
}
.lightbox-overlay.active { display: grid; place-items: center; }
.lightbox-single{
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
}
.lightbox-image {
  max-width: 90vw;
  max-height: 90vh;
  border-radius: var(--radius-sm);
  /* Ombre conservee : contenu de modale, elle le decolle du voile. */
  box-shadow: 0 8px 32px rgba(0,0,0,0.6);
  background: #111;
  z-index: 1;
  opacity: 1;
  position: static;
  transform: none;
}
.lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  min-height: var(--tap-min);
  border: none;
  border-radius: var(--radius-pill);
  background: rgba(0,0,0,0.45);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .25s ease, transform .25s ease, opacity .25s ease;
  opacity: .9;
  z-index: 2;
}
.lightbox-nav:hover { background: var(--accent); color: var(--accent-ink); transform: translateY(-50%) scale(1.08); }
.lightbox-prev { left: 18px; }
.lightbox-next { right: 18px; }
.lightbox-close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: var(--tap-min);
  height: var(--tap-min);
  min-height: var(--tap-min);
  border: none;
  border-radius: var(--radius-pill);
  background: rgba(0,0,0,0.6);
  color: #fff;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  transition: background .25s ease, transform .25s ease;
}
.lightbox-close:hover { background: var(--accent); color: var(--accent-ink); transform: scale(1.1); }

[data-theme="light"] .lightbox-close { background: rgba(255,255,255,0.85); color:#0a0a0a; }
[data-theme="light"] .lightbox-overlay { background: rgba(0,0,0,0.75); }

/* Loading state */
.lightbox-overlay.loading .lightbox-image { opacity: 0; }
.lightbox-overlay.loading::after{
  content: '';
  position: absolute;
  width: 42px; height: 42px;
  border-radius: var(--radius-pill);
  border: 3px solid rgba(255,255,255,0.25);
  border-top-color: var(--accent-line);
  animation: lb-spin .8s linear infinite;
}
@keyframes lb-spin { to { transform: rotate(360deg); } }

/* Counter + caption */
.lightbox-meta{
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: grid;
  gap: 6px;
  justify-items: center;
  text-align: center;
  z-index: 2;
  pointer-events: none;
}
.lightbox-counter{
  padding: 6px 10px;
  font-weight: 800;
  font-size: 13px;
  border-radius: var(--radius-pill);
  background: rgba(0,0,0,0.55);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.25);
}
.lightbox-caption{
  max-width: 70vw;
  font-size: 14px;
  color: #eaeaea;
  text-shadow: 0 1px 2px rgba(0,0,0,0.6);
}
[data-theme="light"] .lightbox-counter{ background: rgba(255,255,255,0.9); color:#0a0a0a; border-color: rgba(0,0,0,0.15); }
.carousel-btn:hover {
  background: var(--accent);
  color: var(--accent-ink);
  transform: translateY(-50%) scale(1.1);
}

.carousel-prev {
  left: 12px;
}

.carousel-next {
  right: 12px;
}

.carousel-dots {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 10;
}

/* La puce mesure 8px a l'oeil mais la CIBLE fait 44px : le point visible est
   dessine par ::before, le bouton lui-meme est une zone tactile transparente.
   Sans ca on demande a l'utilisateur de viser 8px au doigt. */
.carousel-dot {
  width: var(--tap-min);
  height: var(--tap-min);
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.carousel-dot::before {
  content: '';
  display: block;
  width: 8px;
  height: 8px;
  border-radius: var(--radius-pill);
  border: 2px solid rgba(255,255,255,0.8);
  background: rgba(255,255,255,0.3);
  transition-property: var(--anim-proprietes);
  transition-duration: 0.3s;
  transition-timing-function: ease;
}

/* Les etats visent le ::before, pas le bouton : le bouton n'est plus qu'une
   zone tactile transparente, l'y appliquer ne se verrait pas. */
.carousel-dot:hover::before {
  background: rgba(255,255,255,0.6);
  transform: scale(1.2);
}

.carousel-dot.active::before {
  background: var(--accent);
  border-color: var(--accent-line);
  width: 24px;
  border-radius: var(--radius-md);
}

/* Carousel images fill container with object-fit cover for uniform cards */
.photo-carousel img {
  width: 100%;
  height: 100%; /* fill parent container */
  object-fit: cover; /* crop to fill 16/9 container */
  display: block;
  background: #111; /* backdrop for transparent images */
}

/* Multi-image lightbox grid */
.lightbox-multi {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  padding: 8px;
}
.lightbox-multi img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
  object-fit: cover;
  background: #111;
  cursor: zoom-out;
}
.lightbox-overlay.multi .lightbox-single { display: none; }
.lightbox-overlay.multi .lightbox-multi { display: grid; }

/* Tooltips */
.tooltip {
  position: relative;
  cursor: help;
}

.tooltip::before {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) scale(0.9);
  padding: 8px 12px;
  background: var(--carbon);
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-color);
  /* Ombre conservee : panneau flottant. */
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
  opacity: 0;
  pointer-events: none;
  transition-property: var(--anim-proprietes);
  transition-duration: 0.2s;
  transition-timing-function: ease;
  z-index: 1000;
}

.tooltip::after {
  content: '';
  position: absolute;
  bottom: calc(100% + 2px);
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: var(--carbon);
  opacity: 0;
  pointer-events: none;
  transition-property: var(--anim-proprietes);
  transition-duration: 0.2s;
  transition-timing-function: ease;
}

.tooltip:hover::before,
.tooltip:hover::after {
  opacity: 1;
  transform: translateX(-50%) scale(1);
}

/* Responsive */
@media (max-width: 768px) {
  .gallery-hero {
    padding: 40px 16px;
    margin-bottom: 24px;
  }

  .filter-tabs {
    gap: 8px;
    padding: 6px;
  }

  .filter-btn {
    padding: 10px 20px;
    font-size: 14px;
  }

  .gallery-grid {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 0 16px;
  }

}

@media (max-width: 480px) {
  .gallery-hero {
    padding: 30px 12px;
    border-radius: var(--radius-lg);
  }

  .filter-section {
    padding: 0 12px;
  }

  .filter-tabs {
    width: 100%;
    justify-content: flex-start;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }

  .filter-btn {
    flex: 0 0 auto;
    /* 42px passait sous le seuil tactile, et c'est justement sur mobile qu'on tape. */
    min-height: 48px;
    padding: 0 14px;
  }

  .gallery-grid {
    padding: 0 12px;
  }

  .item-info {
    padding: 14px;
  }

  .carousel-btn {
    opacity: 1;
    width: var(--tap-min);
    height: var(--tap-min);
  }

  .lightbox-nav {
    width: var(--tap-min);
    height: var(--tap-min);
  }

  .lightbox-close {
    width: var(--tap-min);
    height: var(--tap-min);
    top: 12px;
    right: 12px;
  }
}

/* Light mode overrides */
/* NE PLUS APPLIQUER CECI A .gallery-hero : il porte une photo de fond depuis
   qu'il a recu la classe .hero-photo, donc il est carbone dans les deux themes
   et un aplat clair y rendrait le titre illisible. Selecteur neutralise en
   .gallery-hero--sans-photo, qui n'existe nulle part : la regle est conservee
   telle quelle pour documenter l'etat d'avant, et se reactive en retirant la
   classe .hero-photo du HTML et le suffixe ici. */
[data-theme="light"] .gallery-hero--sans-photo {
  /* Aplat clair opaque : le bloc reste lisible en theme clair, sans cerne lime
     ni ombre diffuse. */
  background: var(--card-bg);
  border-color: var(--border-color);
  box-shadow: none;
}

[data-theme="light"] .hero-title .title-text {
  color: var(--text-primary);
}

[data-theme="light"] .hero-subtitle {
  color: var(--text-secondary);
}

[data-theme="light"] .filter-tabs {
  background: var(--card-bg);
  border-color: var(--border-color);
}

[data-theme="light"] .filter-btn {
  color: var(--text-primary);
}

[data-theme="light"] .filter-btn:hover {
  background: var(--card-bg-hover);
  border-color: var(--accent-line);
  color: var(--accent-text);
}

[data-theme="light"] .filter-btn.active {
  background: var(--accent);
  border-color: var(--accent-ink);
  color: var(--accent-ink);
}

[data-theme="light"] .gallery-item {
  background: var(--card-bg);
  border-color: var(--border-color);
  box-shadow: none;
}

[data-theme="light"] .gallery-item:hover {
  border-color: var(--accent-line);
  box-shadow: none;
}

[data-theme="light"] .photo-placeholder {
  background: var(--card-bg-hover);
}

[data-theme="light"] .placeholder-text {
  color: var(--muted);
}

[data-theme="light"] .item-title {
  color: var(--text-primary);
}

[data-theme="light"] .item-description {
  color: var(--text-secondary);
}

[data-theme="light"] .item-badge {
  background: var(--card-bg-hover);
  color: var(--accent-text);
  border-color: var(--border-color);
}

[data-theme="light"] .carousel-btn {
  background: rgba(255,255,255,0.9);
  color: #0a0a0a;
}

[data-theme="light"] .carousel-btn:hover {
  background: var(--accent);
  color: var(--accent-ink);
}

[data-theme="light"] .carousel-dot {
  border-color: rgba(0,0,0,0.5);
  background: rgba(0,0,0,0.2);
}

[data-theme="light"] .carousel-dot.active {
  background: var(--accent);
  border-color: var(--accent-line);
}

[data-theme="light"] .tooltip::before {
  background: var(--card-bg);
  color: var(--text-primary);
  border-color: var(--border-color);
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
}

[data-theme="light"] .tooltip::after {
  border-top-color: var(--card-bg);
}

/* Notification System */
.notification {
  position: fixed;
  top: 100px;
  right: 20px;
  padding: 16px 24px;
  border-radius: var(--radius-sm);
  /* Ombre conservee : element flottant au-dessus de la page. */
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
  font-weight: 600;
  z-index: 10000;
  animation: slideInRight 0.3s ease-out;
}

.notification-success {
  background: var(--accent);
  color: var(--accent-ink);
}

.notification-error {
  background: #ff5252;
  color: #fff;
}

.notification-info {
  background: #357abd;
  color: #fff;
}

.notification-out {
  animation: slideOutRight 0.3s ease-out;
}

@keyframes slideInRight {
  from { 
    transform: translateX(400px); 
    opacity: 0; 
  }
  to { 
    transform: translateX(0); 
    opacity: 1; 
  }
}

@keyframes slideOutRight {
  from { 
    transform: translateX(0); 
    opacity: 1; 
  }
  to { 
    transform: translateX(400px); 
    opacity: 0; 
  }
}

/* ---- Bande tablette ----
   Ces grilles passaient a une colonne des 768px (900px pour certaines), soit
   en pleine tablette : les cartes prenaient toute la largeur et la page
   devenait une longue colonne. Deux colonnes sont retablies jusqu'a 600px,
   ou une colonne unique devient reellement justifiee.
   Regle ajoutee en fin de fichier : a specificite egale, elle l'emporte sur
   la media query d'origine par l'ordre de declaration. */
@media (min-width: 601px) and (max-width: 900px) {
  .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}