/* ============================================================
   home.css — Hero, sections accueil, detail œuvre, lightbox
   ============================================================ */

/* ─── Hero (page d'accueil) ─────────────────────────────────────────────────── */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--bg);
}

/* Collage de fond : images qui se superposent */
.hero__collage {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 3px;
  opacity: 0.15;
  transition: opacity 1s ease;
}

[data-theme="dark"] .hero__collage { opacity: 0.08; }

.hero__collage-item {
  overflow: hidden;
}

.hero__collage-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(30%);
}

/* Dégradé par-dessus le collage */
.hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    var(--bg) 0%,
    rgba(250,249,247,0.75) 50%,
    var(--bg) 100%
  );
}
[data-theme="dark"] .hero__overlay {
  background: linear-gradient(135deg, var(--dark-bg) 0%, rgba(20,18,16,0.7) 50%, var(--dark-bg) 100%);
}

.hero__content {
  position: relative;
  z-index: 2;
  max-width: var(--max-content);
  margin: 0 auto;
  padding: 0 var(--sp-6);
  padding-top: 80px; /* hauteur nav */
}

.hero__eyebrow {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--accent);
  font-weight: 600;
  margin-bottom: var(--sp-4);
  opacity: 0;
  animation: heroFade 0.8s 0.2s ease forwards;
}

.hero__title {
  font-size: clamp(3rem, 8vw, 7rem);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin-bottom: var(--sp-6);
  opacity: 0;
  animation: heroFade 0.9s 0.4s ease forwards;
}

.hero__title em {
  font-style: italic;
  color: var(--accent);
}

.hero__subtitle {
  font-size: clamp(var(--text-lg), 2vw, var(--text-2xl));
  color: var(--text-2);
  font-weight: 300;
  max-width: 560px;
  line-height: 1.6;
  margin-bottom: var(--sp-10);
  opacity: 0;
  animation: heroFade 0.9s 0.6s ease forwards;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  opacity: 0;
  animation: heroFade 0.9s 0.8s ease forwards;
}

.hero__scroll {
  position: absolute;
  bottom: var(--sp-8);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  opacity: 0;
  animation: heroFade 1s 1.2s ease forwards;
}

.hero__scroll-line {
  width: 1px;
  height: 48px;
  background: linear-gradient(to bottom, var(--accent), transparent);
  animation: scrollLine 1.5s 1.5s ease-in-out infinite;
}

.hero__scroll-text {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-3);
  writing-mode: vertical-rl;
  rotate: 180deg;
}

@keyframes heroFade {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: none; }
}

@keyframes scrollLine {
  0%, 100% { transform: scaleY(1); transform-origin: top; }
  50%       { transform: scaleY(0.4); transform-origin: bottom; }
}

/* ─── Section "Coups de cœur" ───────────────────────────────────────────────── */
.featured-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: auto auto;
  gap: var(--sp-5);
}

.featured-grid .artwork-card:first-child {
  grid-row: 1 / 3;
}

.featured-grid .artwork-card:first-child .artwork-card__image {
  aspect-ratio: 2/3;
}

/* ─── Diaporama automatique ─────────────────────────────────────────────────── */
.slideshow {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-xl);
  aspect-ratio: 16/7;
  background: var(--surface);
  cursor: pointer;
}

.slideshow__track {
  display: flex;
  height: 100%;
  transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

.slideshow__slide {
  min-width: 100%;
  height: 100%;
  position: relative;
}

.slideshow__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.slideshow__caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to top, rgba(28,25,23,0.8) 0%, transparent 100%);
  padding: var(--sp-8) var(--sp-6) var(--sp-5);
  color: #fff;
}

.slideshow__caption h3 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 400;
  color: #fff;
  margin-bottom: 4px;
}

.slideshow__caption p { color: rgba(255,255,255,0.75); font-size: var(--text-sm); margin: 0; }

.slideshow__controls {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  display: flex;
  justify-content: space-between;
  padding: 0 var(--sp-4);
  pointer-events: none;
}

.slideshow__btn {
  width: 44px;
  height: 44px;
  background: rgba(250,249,247,0.9);
  border-radius: var(--r-full);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
  pointer-events: all;
  transition: background var(--t-fast), transform var(--t-fast);
  box-shadow: var(--shadow);
}

.slideshow__btn:hover { background: var(--bg); transform: scale(1.05); }

.slideshow__dots {
  position: absolute;
  bottom: var(--sp-4);
  right: var(--sp-5);
  display: flex;
  gap: var(--sp-1);
}

.slideshow__dot {
  width: 6px;
  height: 6px;
  border-radius: var(--r-full);
  background: rgba(255,255,255,0.4);
  cursor: pointer;
  transition: background var(--t-fast), width var(--t);
}

.slideshow__dot.active {
  background: #fff;
  width: 20px;
}

.slideshow__pause {
  position: absolute;
  top: var(--sp-4);
  right: var(--sp-4);
  width: 36px;
  height: 36px;
  background: rgba(28,25,23,0.5);
  border-radius: var(--r-full);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  transition: background var(--t-fast);
}
.slideshow__pause:hover { background: rgba(28,25,23,0.75); }

/* ─── Section statistiques artiste ──────────────────────────────────────────── */
.stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-6);
  padding: var(--sp-10) 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.stat-item {
  text-align: center;
}

.stat-item__number {
  font-family: var(--font-display);
  font-size: var(--text-5xl);
  font-weight: 300;
  color: var(--text);
  line-height: 1;
  margin-bottom: var(--sp-1);
}

.stat-item__label {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-2);
  font-weight: 500;
}

/* ─── Page détail d'une œuvre ────────────────────────────────────────────────── */
.artwork-detail {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: var(--sp-12);
  align-items: start;
  padding-top: calc(64px + var(--sp-8));
}

.artwork-detail__viewer {
  position: sticky;
  top: calc(64px + var(--sp-6));
}

.artwork-detail__main-image {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  background: var(--surface);
  cursor: zoom-in;
  aspect-ratio: 3/4;
}

.artwork-detail__main-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 0.3s ease;
}

.artwork-detail__zoom-hint {
  position: absolute;
  bottom: var(--sp-4);
  right: var(--sp-4);
  background: rgba(28,25,23,0.6);
  color: #fff;
  padding: 0.4em 0.8em;
  border-radius: var(--r-full);
  font-size: var(--text-xs);
  display: flex;
  align-items: center;
  gap: 5px;
  backdrop-filter: blur(4px);
  pointer-events: none;
}

/* Vignettes */
.artwork-detail__thumbnails {
  display: flex;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
  flex-wrap: wrap;
}

.artwork-detail__thumb {
  width: 72px;
  height: 72px;
  border-radius: var(--r-md);
  overflow: hidden;
  cursor: pointer;
  border: 2px solid transparent;
  transition: border-color var(--t-fast), opacity var(--t-fast);
  flex-shrink: 0;
}

.artwork-detail__thumb.active { border-color: var(--accent); }

.artwork-detail__thumb:hover { opacity: 0.8; }

.artwork-detail__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Infos texte */
.artwork-detail__info {
  padding-top: var(--sp-4);
}

.artwork-detail__technique {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent);
  font-weight: 600;
  margin-bottom: var(--sp-3);
}

.artwork-detail__title {
  font-size: clamp(var(--text-3xl), 4vw, var(--text-5xl));
  font-weight: 300;
  line-height: 1.1;
  margin-bottom: var(--sp-4);
}

.artwork-detail__price-row {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin-bottom: var(--sp-6);
}

.artwork-detail__price {
  font-size: var(--text-3xl);
  font-weight: 600;
  color: var(--text);
  font-family: var(--font-display);
}

.artwork-detail__status {
  transform: translateY(2px);
}

.artwork-detail__desc {
  font-size: var(--text-lg);
  color: var(--text-2);
  line-height: 1.75;
  margin-bottom: var(--sp-8);
  font-weight: 300;
}

.artwork-detail__specs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-4);
  padding: var(--sp-6);
  background: var(--surface);
  border-radius: var(--r-lg);
  margin-bottom: var(--sp-8);
}

.artwork-detail__spec label {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-3);
  font-weight: 600;
  display: block;
  margin-bottom: 4px;
}

.artwork-detail__spec span {
  font-size: var(--text-base);
  color: var(--text);
  font-weight: 500;
}

.artwork-detail__actions {
  display: flex;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin-bottom: var(--sp-6);
}

.artwork-detail__share {
  display: flex;
  gap: var(--sp-2);
  align-items: center;
  padding: var(--sp-4) 0;
  border-top: 1px solid var(--border);
}

.artwork-detail__share span {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-3);
  margin-right: var(--sp-1);
}

.share-btn {
  width: 36px;
  height: 36px;
  border-radius: var(--r-full);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-2);
  border: 1.5px solid var(--border);
  transition: all var(--t-fast);
  font-size: var(--text-sm);
}
.share-btn:hover { color: #fff; border-color: transparent; }
.share-btn--wa:hover  { background: #25D366; }
.share-btn--tw:hover  { background: #1DA1F2; }
.share-btn--pin:hover { background: #E60023; }
.share-btn--mail:hover{ background: var(--accent); }

/* ─── Intérêt et vues ────────────────────────────────────────────────────────── */
.interest-bar {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: var(--accent-l);
  border-radius: var(--r-md);
  margin-bottom: var(--sp-5);
  font-size: var(--text-sm);
  color: var(--accent-h);
}

.interest-bar svg { width: 16px; height: 16px; flex-shrink: 0; }

/* ─── Note de curateur ───────────────────────────────────────────────────────── */
.curator-note {
  padding: var(--sp-5) var(--sp-6);
  border-left: 3px solid var(--gold);
  background: var(--gold-l);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  margin-bottom: var(--sp-8);
}

.curator-note__label {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--gold);
  font-weight: 600;
  margin-bottom: var(--sp-2);
}

.curator-note p {
  font-size: var(--text-base);
  color: var(--text-2);
  font-style: italic;
  line-height: 1.7;
}

/* ─── Lightbox (zoom plein écran) ───────────────────────────────────────────── */
.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(10,8,7,0.97);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.lightbox.open {
  opacity: 1;
  pointer-events: all;
}

.lightbox__img {
  max-width: min(90vw, 1000px);
  max-height: 90svh;
  object-fit: contain;
  border-radius: var(--r-md);
  box-shadow: var(--shadow-xl);
  transition: opacity 0.3s ease;
}

.lightbox__close {
  position: absolute;
  top: var(--sp-6);
  right: var(--sp-6);
  width: 48px;
  height: 48px;
  background: rgba(255,255,255,0.1);
  border-radius: var(--r-full);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: var(--text-xl);
  transition: background var(--t-fast);
}
.lightbox__close:hover { background: rgba(255,255,255,0.2); }

.lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  background: rgba(255,255,255,0.08);
  border-radius: var(--r-full);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  transition: background var(--t-fast);
}
.lightbox__nav:hover { background: rgba(255,255,255,0.18); }
.lightbox__nav--prev { left: var(--sp-6); }
.lightbox__nav--next { right: var(--sp-6); }

.lightbox__caption {
  position: absolute;
  bottom: var(--sp-8);
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  color: rgba(255,255,255,0.6);
  font-size: var(--text-sm);
}

/* ─── Navigation entre œuvres (vignettes bas d'écran lightbox) ──────────────── */
.lightbox__thumbs {
  position: absolute;
  bottom: var(--sp-6);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: var(--sp-2);
  max-width: 90vw;
  overflow-x: auto;
  padding: var(--sp-2);
}

.lightbox__thumb {
  width: 56px;
  height: 56px;
  border-radius: var(--r-sm);
  overflow: hidden;
  flex-shrink: 0;
  opacity: 0.4;
  cursor: pointer;
  transition: opacity var(--t-fast);
  border: 2px solid transparent;
}
.lightbox__thumb.active, .lightbox__thumb:hover {
  opacity: 1;
  border-color: var(--accent);
}
.lightbox__thumb img { width: 100%; height: 100%; object-fit: cover; }

/* ─── Sections commentaires & offres ────────────────────────────────────────── */
.comment-form,
.offer-form {
  background: var(--surface);
  padding: var(--sp-8);
  border-radius: var(--r-xl);
  margin-bottom: var(--sp-8);
}

.comment-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.comment-item {
  display: flex;
  gap: var(--sp-4);
  padding: var(--sp-5);
  background: var(--surface);
  border-radius: var(--r-lg);
  animation: fadeSlide 0.4s ease;
}

@keyframes fadeSlide {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

.comment-item__avatar {
  width: 40px;
  height: 40px;
  border-radius: var(--r-full);
  background: var(--accent-l);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 500;
  flex-shrink: 0;
}

.comment-item__pseudo {
  font-weight: 600;
  color: var(--text);
  font-size: var(--text-sm);
  margin-bottom: 4px;
}

.comment-item__date {
  font-size: var(--text-xs);
  color: var(--text-3);
  margin-left: var(--sp-2);
  font-weight: 400;
}

.comment-item__message {
  color: var(--text-2);
  font-size: var(--text-base);
  line-height: 1.65;
  margin: 0;
}

/* ─── Œuvres suggérées ───────────────────────────────────────────────────────── */
.suggestions-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-4);
}

/* ─── Navigation clavier hint ───────────────────────────────────────────────── */
.kb-hint {
  position: fixed;
  bottom: var(--sp-6);
  left: 50%;
  transform: translateX(-50%);
  background: rgba(28,25,23,0.75);
  color: rgba(255,255,255,0.8);
  padding: 0.5em 1em;
  border-radius: var(--r-full);
  font-size: var(--text-xs);
  backdrop-filter: blur(8px);
  pointer-events: none;
  opacity: 0;
  animation: kbHint 3s 0.5s ease forwards;
  z-index: 900;
  white-space: nowrap;
}

@keyframes kbHint {
  0%   { opacity: 0; }
  15%  { opacity: 1; }
  75%  { opacity: 1; }
  100% { opacity: 0; }
}

/* ─── Responsive détail ──────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .artwork-detail {
    grid-template-columns: 1fr;
  }
  .artwork-detail__viewer { position: static; }
  .featured-grid { grid-template-columns: 1fr 1fr; }
  .featured-grid .artwork-card:first-child { grid-row: auto; }
  .suggestions-grid { grid-template-columns: repeat(2, 1fr); }
  .stats-row { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .artwork-detail__specs { grid-template-columns: 1fr; }
  .featured-grid { grid-template-columns: 1fr; }
  .hero__title { font-size: clamp(2.5rem, 12vw, 4rem); }
  .suggestions-grid { grid-template-columns: repeat(2, 1fr); }
  .stats-row { grid-template-columns: repeat(2, 1fr); }
  .lightbox__nav { display: none; }
}