/**
 * Activity Viewer — Styles de la modale galerie
 * Respecte les variables CSS du thème Evieong (Tailwind v4)
 * --color-vert, --color-orange, --color-encre, --color-gris, etc.
 */

/* ══════════════════════════════════════════════════════════════════
   Variables locales (reprises du thème Evieong)
   ══════════════════════════════════════════════════════════════════ */
:root {
  --av-vert:        var(--color-vert,        #69a641);
  --av-vert-dark:   var(--color-vert-dark,   #4f7e31);
  --av-vert-pale:   var(--color-vert-pale,   #eef6e8);
  --av-orange:      var(--color-orange,      #cb6d2a);
  --av-encre:       var(--color-encre,       #1a1a1a);
  --av-gris:        var(--color-gris,        #6b7280);
  --av-gris-bg:     var(--color-gris-bg,     #f4f5f4);
  --av-font-sans:   var(--font-sans,         "DM Sans", ui-sans-serif, system-ui, sans-serif);
  --av-font-display:var(--font-display,      "DM Serif Display", serif);
  --av-transition:  cubic-bezier(.77, 0, .18, 1);
  --av-radius:      0px; /* le thème n'utilise pas de border-radius arrondis */
}

/* ══════════════════════════════════════════════════════════════════
   Overlay
   ══════════════════════════════════════════════════════════════════ */
.av-overlay {
  position: fixed;
  inset: 0;
  z-index: 9800;
  background: rgba(0, 0, 0, .72);
  opacity: 0;
  pointer-events: none;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  transition: opacity .35s ease;
}
.av-overlay.av-open {
  opacity: 1;
  pointer-events: all;
}

/* ══════════════════════════════════════════════════════════════════
   Modale
   ══════════════════════════════════════════════════════════════════ */
.av-modal {
  position: fixed;
  inset: 0;
  z-index: 9801;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  pointer-events: none;
  opacity: 0;
  transform: scale(.96) translateY(12px);
  transition:
    opacity .38s var(--av-transition),
    transform .38s var(--av-transition);
}
.av-modal.av-open {
  pointer-events: all;
  opacity: 1;
  transform: scale(1) translateY(0);
}

/* ══════════════════════════════════════════════════════════════════
   Boîte intérieure
   ══════════════════════════════════════════════════════════════════ */
.av-box {
  position: relative;
  background: #fff;
  width: 100%;
  max-width: 1140px;
  max-height: calc(100vh - 2rem);
  display: grid;
  grid-template-columns: 1fr 360px;
  grid-template-rows: 1fr;
  overflow: hidden;
  box-shadow: 0 24px 80px rgba(0, 0, 0, .28), 0 8px 24px rgba(0, 0, 0, .18);
}

/* ══════════════════════════════════════════════════════════════════
   Colonne gauche — Slider
   ══════════════════════════════════════════════════════════════════ */
.av-slider-col {
  position: relative;
  background: var(--av-encre);
  overflow: hidden;
  min-height: 420px;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
}

/* Piste de slides */
.av-track-wrapper {
  position: absolute;
  inset: 0;
  overflow: hidden;
  cursor: grab;
}
.av-track-wrapper.av-dragging {
  cursor: grabbing;
}
.av-track {
  display: flex;
  height: 100%;
  will-change: transform;
  transition: transform .55s var(--av-transition);
}
.av-track.av-no-transition {
  transition: none;
}
.av-slide {
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}
.av-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
  -webkit-user-drag: none;
  transition: transform .6s ease;
}
.av-slide.av-active img {
  transform: scale(1.02);
}

/* Overlay gradient bas */
.av-slide-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.55) 0%, transparent 45%);
  pointer-events: none;
}

/* Flèches de navigation */
.av-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 44px;
  height: 44px;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .2);
  color: #fff;
  font-size: .88rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .22s, border-color .22s, transform .22s;
  backdrop-filter: blur(4px);
}
.av-arrow:hover {
  background: var(--av-vert);
  border-color: var(--av-vert);
  transform: translateY(-50%) scale(1.06);
}
.av-arrow:focus-visible {
  outline: 2px solid var(--av-vert);
  outline-offset: 2px;
}
.av-arrow-prev { left: 1rem; }
.av-arrow-next { right: 1rem; }
.av-arrow.av-hidden { opacity: 0; pointer-events: none; }

/* Compteur */
.av-counter {
  position: absolute;
  bottom: 1.1rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  font-family: var(--av-font-sans);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .12em;
  color: rgba(255, 255, 255, .75);
  background: rgba(0, 0, 0, .35);
  padding: .2rem .65rem;
  pointer-events: none;
  backdrop-filter: blur(3px);
}

/* Pastilles de navigation */
.av-dots {
  position: absolute;
  bottom: .7rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  gap: 6px;
  pointer-events: none;
}
.av-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .4);
  transition: background .25s, transform .25s;
}
.av-dot.av-active {
  background: var(--av-vert);
  transform: scale(1.3);
}

/* Spinner de chargement */
.av-spinner {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--av-encre);
  transition: opacity .3s;
}
.av-spinner.av-hidden {
  opacity: 0;
  pointer-events: none;
}
.av-spinner-ring {
  width: 42px;
  height: 42px;
  border: 3px solid rgba(255, 255, 255, .15);
  border-top-color: var(--av-vert);
  border-radius: 50%;
  animation: av-spin .8s linear infinite;
}
@keyframes av-spin {
  to { transform: rotate(360deg); }
}

/* ══════════════════════════════════════════════════════════════════
   Colonne droite — Informations
   ══════════════════════════════════════════════════════════════════ */
.av-info-col {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-left: 1px solid #e8f0e2;
  overflow: hidden;
}

/* En-tête de la colonne info */
.av-info-header {
  padding: 1.6rem 1.8rem 1.2rem;
  border-bottom: 1px solid #eef3eb;
  flex-shrink: 0;
}
.av-info-tag {
  font-family: var(--av-font-sans);
  font-size: .58rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--av-orange);
  margin-bottom: .55rem;
  display: flex;
  align-items: center;
  gap: .4rem;
}
.av-info-title {
  font-family: var(--av-font-display);
  font-size: 1.22rem;
  line-height: 1.28;
  color: var(--av-encre);
  margin: 0 0 .85rem;
}

/* Corps scrollable */
.av-info-body {
  flex: 1;
  overflow-y: auto;
  padding: 1.4rem 1.8rem 2rem;
  scrollbar-width: thin;
  scrollbar-color: #d1d5db transparent;
}
.av-info-body::-webkit-scrollbar { width: 4px; }
.av-info-body::-webkit-scrollbar-track { background: transparent; }
.av-info-body::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 2px; }

.av-info-desc {
  font-family: var(--av-font-sans);
  font-size: .84rem;
  line-height: 1.78;
  color: var(--av-gris);
  margin: 0;
}
.av-info-desc-empty {
  font-size: .78rem;
  color: #c5cec5;
  font-style: italic;
}

/* Séparateur */
.av-info-sep {
  height: 1px;
  background: #eef3eb;
  margin: 1.4rem 0;
}

/* Miniatures */
.av-thumbs-label {
  font-family: var(--av-font-sans);
  font-size: .62rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--av-encre);
  margin-bottom: .75rem;
  display: flex;
  align-items: center;
  gap: .45rem;
}
.av-thumbs-label i { color: var(--av-vert); }


.av-thumbs-grid::-webkit-scrollbar {
  width: 4px;
}
.av-thumbs-grid::-webkit-scrollbar-track {
  background: #eef3eb;
  border-radius: 2px;
}
.av-thumbs-grid::-webkit-scrollbar-thumb {
  background: var(--av-vert);
  border-radius: 2px;
}
.av-thumbs-grid::-webkit-scrollbar-thumb:hover {
  background: var(--av-vert-dark);
}
.av-thumb {
  aspect-ratio: 1;
  overflow: hidden;
  cursor: pointer;
  position: relative;
  background: var(--av-gris-bg);
}
.av-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .4s ease, opacity .25s;
}
.av-thumb:hover img { transform: scale(1.08); }
.av-thumb::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 2px solid transparent;
  transition: border-color .2s;
  pointer-events: none;
}
.av-thumb.av-thumb-active::after {
  border-color: var(--av-vert);
}

/* ══════════════════════════════════════════════════════════════════
   Bouton fermer
   ══════════════════════════════════════════════════════════════════ */
.av-close {
  position: absolute;
  top: .9rem;
  right: .9rem;
  z-index: 9802;
  width: 36px;
  height: 36px;
  background: rgba(0, 0, 0, .5);
  border: none;
  color: #fff;
  font-size: .78rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s, transform .2s;
  backdrop-filter: blur(4px);
}
.av-close:hover {
  background: rgba(0, 0, 0, .8);
  transform: scale(1.08);
}
.av-close:focus-visible {
  outline: 2px solid var(--av-vert);
  outline-offset: 2px;
}

/* ══════════════════════════════════════════════════════════════════
   État d'erreur
   ══════════════════════════════════════════════════════════════════ */
.av-error-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .7rem;
  padding: 2rem;
  color: rgba(255, 255, 255, .65);
  font-family: var(--av-font-sans);
  font-size: .8rem;
  text-align: center;
}
.av-error-state i {
  font-size: 1.5rem;
  color: var(--av-orange);
}

/* ══════════════════════════════════════════════════════════════════
   Responsive
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 860px) {
  .av-box {
    grid-template-columns: 1fr;
    grid-template-rows: 55vw 1fr;
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
  }
  .av-slider-col {
    min-height: 0;
  }
  .av-info-col {
    border-left: none;
    border-top: 1px solid #eef3eb;
    max-height: none;
    overflow: visible;
  }
  .av-info-body {
    overflow: visible;
  }
  .av-thumbs-grid {
    grid-template-columns: repeat(5, 1fr);
    --av-thumb-cell: calc((100% - 20px) / 5);
    max-height: calc(var(--av-thumb-cell) * 2 + 5px);
  }
}

@media (max-width: 520px) {
  .av-modal {
    padding: 0;
    align-items: flex-end;
  }
  .av-box {
    max-height: 95vh;
    grid-template-rows: 56vw 1fr;
    border-radius: 0;
    width: 100%;
    max-width: 100%;
  }
  .av-info-header {
    padding: 1.1rem 1.2rem .9rem;
  }
  .av-info-body {
    padding: 1rem 1.2rem 1.6rem;
  }
  .av-info-title {
    font-size: 1.05rem;
  }
  .av-thumbs-grid {
    grid-template-columns: repeat(4, 1fr);
    --av-thumb-cell: calc((100% - 15px) / 4);
    max-height: calc(var(--av-thumb-cell) * 2 + 5px);
  }
  .av-arrow {
    width: 38px;
    height: 38px;
    font-size: .78rem;
  }
}

/* ══════════════════════════════════════════════════════════════════
   Animation de fade des slides
   ══════════════════════════════════════════════════════════════════ */
@keyframes av-fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.av-slide-fadein {
  animation: av-fadeIn .4s ease forwards;
}


/* COORRECTIONS */ 

/* ══════════════════════════════════════════════════════════════════
   Colonne gauche — Slider (VERSION CORRIGÉE - PLEINE LARGEUR SANS COUPURE)
   ══════════════════════════════════════════════════════════════════ */
.av-slider-col {
  position: relative;
  background: var(--av-encre);
  overflow: visible; /* ← Changé : permet l'affichage complet */
  min-height: 420px;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
}



.av-track {
  display: flex;
  height: 100%;
  will-change: transform;
  transition: transform .55s var(--av-transition);
}

.av-slide {
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  position: relative;
  overflow: visible; /* ← Changé : ne plus cacher les débordements */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* IMAGE CORRIGÉE - Pleine largeur sans recadrage */
.av-slide img {
  width: 100%;
  height: auto;           /* ← Changé : hauteur automatique */
  max-height: 100%;      /* ← Nouveau : limite au conteneur sans recadrage */
  object-fit: contain;   /* ← Changé : 'contain' au lieu de 'cover' */
  display: block;
  pointer-events: none;
  -webkit-user-drag: none;
  transition: transform .6s ease;
}

/* Supprimer ou ajuster l'effet de zoom qui peut causer des coupures */
.av-slide.av-active img {
  transform: scale(1);    /* ← Changé : retirer le scale qui coupait */
  /* Alternative avec zoom léger mais sans coupure : */
  /* transform: scale(1.02); */
}

/* Si vous voulez garder un effet de zoom, faites-le sur le conteneur parent */
.av-slide.av-active {
  transform: scale(1.01);
}

/* ══════════════════════════════════════════════════════════════════
   Option alternative : Style cinémascope (bandes noires horizontales)
   Si vous préférez garder object-fit: cover mais sans coupure des côtés
   ══════════════════════════════════════════════════════════════════ */
/*
.av-slide img {
  width: auto;
  min-width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}
*/




/* ══════════════════════════════════════════════════════════════════
   Gestionnaire des Miniatures — Version 100% CSS
   ══════════════════════════════════════════════════════════════════ */

.av-thumbs-grid {
  display: grid;
  /* 4 colonnes égales : le navigateur divise l'espace par 4 mathématiquement */
  grid-template-columns: repeat(4, 1fr); 
  gap: 8px;
  
  /* On fixe la hauteur du conteneur selon votre besoin */
  height: 200px;
  max-height: 200px;
  
  /* On force le défilement vertical */
  overflow-y: auto;
  overflow-x: hidden;
  
  /* Aligne les lignes au sommet du conteneur (évite l'étirement vertical) */
  align-content: start;
  
  /* Padding pour ne pas coller à la scrollbar */
  padding-right: 6px;
  
  /* Style scrollbar Firefox */
  scrollbar-width: thin;
  scrollbar-color: var(--av-vert) #eef3eb;
}

/* Personnalisation Scrollbar Chrome/Safari */
.av-thumbs-grid::-webkit-scrollbar {
  width: 5px;
}
.av-thumbs-grid::-webkit-scrollbar-track {
  background: #eef3eb;
}
.av-thumbs-grid::-webkit-scrollbar-thumb {
  background: var(--av-vert);
}

.av-thumb {
  /* CRUCIAL : Définit la structure AVANT le chargement de l'image */
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1; 
  position: relative;
  background: var(--av-gris-bg);
  cursor: pointer;
  overflow: hidden;
}

.av-thumb img {
  /* L'image s'adapte au carré défini par le parent */
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .3s ease;
}

/* État actif & Hover */
.av-thumb:hover img {
  transform: scale(1.08);
}

.av-thumb::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 2px solid transparent;
  pointer-events: none;
  transition: border-color .2s;
  z-index: 2;
}

.av-thumb.av-thumb-active::after {
  border-color: var(--av-vert);
}

/* ══════════════════════════════════════════════════════════════════
   Responsive : Adaptation du nombre de colonnes
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 860px) {
  .av-thumbs-grid {
    grid-template-columns: repeat(5, 1fr); /* 5 miniatures par ligne */
    height: 160px;
  }
}

@media (max-width: 520px) {
  .av-thumbs-grid {
    grid-template-columns: repeat(4, 1fr);
    height: 140px;
  }
}




/* Masquer complètement la section des miniatures */
.av-thumbs-label,
.av-thumbs-grid {
    display: none !important;
}