/* ══════════════════════════════════════════════════════════
   site.css — styles partagés (masonry, animations premium)
   Chargé sur toutes les pages, mis en cache par le navigateur.
   ══════════════════════════════════════════════════════════ */

/* ── Masonry équilibrée (activée par site.js, fallback = CSS columns) ── */
.photo-grid.masonry-active { columns: auto; display: flex; align-items: flex-start; gap: 8px; }
.photo-grid.masonry-active .masonry-col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.photo-grid.masonry-active .photo-card { margin-bottom: 0; }
@media (max-width: 768px) {
  .photo-grid.masonry-active { gap: 6px; }
  .photo-grid.masonry-active .masonry-col { gap: 6px; }
}

/* ── Reveal premium : zoom-out subtil des photos à l'apparition ── */
.has-js .rs-card:not(.rs-in) img { transform: scale(1.06); }
/* le retour à scale(1) est géré par la transition transform déjà présente sur .photo-card img */

/* ── Transitions de page (View Transitions API, dégrade proprement) ── */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation-duration: 0.22s; }
::view-transition-new(root) { animation-duration: 0.22s; }

/* ── Parallax hero : évite tout saut si JS absent ── */
.has-js .hero-visual { will-change: transform; }

/* ── Resserrage des blancs sur mobile (index) ── */
@media (max-width: 900px) {
  .portfolio-gallery { margin-top: 40px; }
  .section-title { margin-bottom: 32px; }
}

/* ── Barre de progression de lecture (injectée par site.js) ── */
.scroll-progress {
  position: fixed; top: 0; left: 0; z-index: 3000;
  width: 100%; height: 2px;
  background: var(--terracotta, #A85832);
  transform: scaleX(0); transform-origin: left;
  pointer-events: none;
}

/* ── Soulignement animé des liens de navigation ── */
.nav-links li:not(.nav-cat) a { position: relative; }
.nav-links li:not(.nav-cat) a::after {
  content: ''; position: absolute; left: 0; bottom: -4px;
  width: 100%; height: 1px;
  background: var(--terracotta, #A85832);
  transform: scaleX(0); transform-origin: right;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.nav-links li:not(.nav-cat) a:hover::after,
.nav-links li:not(.nav-cat) a.nav-active::after {
  transform: scaleX(1); transform-origin: left;
}

/* ── Soulignement "manuscrit" du mot-clé du hero ── */
.hero-title em { position: relative; display: inline-block; }
.em-stroke {
  position: absolute; left: -2%; bottom: -0.08em;
  width: 104%; height: 0.22em; overflow: visible;
  pointer-events: none;
}
.em-stroke path {
  stroke-dasharray: 130; stroke-dashoffset: 130;
}
.has-js .em-stroke path {
  animation: em-draw 0.9s cubic-bezier(0.65, 0, 0.35, 1) 1.25s forwards;
}
@keyframes em-draw { to { stroke-dashoffset: 0; } }

@media (prefers-reduced-motion: reduce) {
  .has-js .rs-card:not(.rs-in) img { transform: none !important; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; }
  .scroll-progress { display: none; }
  .nav-links li:not(.nav-cat) a::after { transition: none; }
  .em-stroke path { animation: none !important; stroke-dashoffset: 0; }
}

/* ══════════════════════════════════════════════════════════
   Contrôles vidéo — direction artistique Ju.en.vie
   (surcharge les styles inline des pages, chargés avant ce fichier)
   Palette : terracotta #A85832, crème #F5F0E8, brun profond #1C1410
   ══════════════════════════════════════════════════════════ */

/* ── Bouton Play (vidéos verticales) : CTA terracotta, halo crème ── */
.video-card.needs-play { cursor: pointer; }
.video-play-btn {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 66px; height: 66px; border-radius: 50%;
  background: rgba(168,88,50,0.92);
  border: 1px solid rgba(245,240,232,0.9);
  color: var(--white, #FDFAF6);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; z-index: 6; padding: 0;
  box-shadow: 0 6px 22px rgba(28,20,16,0.42), 0 0 0 8px rgba(245,240,232,0.08);
  transition: opacity 0.3s ease, background 0.25s ease,
              transform 0.25s ease, box-shadow 0.25s ease;
}
.video-play-btn svg { width: 24px; height: 24px; margin-left: 4px; }
.video-card:hover .video-play-btn {
  background: var(--terracotta, #A85832);
  transform: translate(-50%, -50%) scale(1.09);
  box-shadow: 0 8px 28px rgba(28,20,16,0.5), 0 0 0 10px rgba(245,240,232,0.13);
}
.video-play-btn:focus-visible {
  outline: none;
  box-shadow: 0 6px 22px rgba(28,20,16,0.42), 0 0 0 4px rgba(245,240,232,0.85);
}
.video-card.is-playing .video-play-btn { opacity: 0; pointer-events: none; }
.video-card.needs-play:not(.is-playing) .sound-btn { display: none; }

/* ── Bouton son : verre chaud brun, terracotta quand le son est actif ── */
.sound-btn {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  background: rgba(28,20,16,0.4);
  border: 1px solid rgba(245,240,232,0.6);
  color: var(--white, #FDFAF6);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 2px 10px rgba(28,20,16,0.3);
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.2s ease;
  font: inherit; padding: 0; appearance: none; -webkit-appearance: none;
}
.sound-btn svg { width: 15px; height: 15px; }
.sound-btn:hover {
  background: rgba(28,20,16,0.62);
  border-color: rgba(245,240,232,0.9);
  transform: scale(1.08);
}
.sound-btn.unmuted {
  background: var(--terracotta, #A85832);
  border-color: var(--terracotta, #A85832);
  color: #fff;
}
.sound-btn.unmuted:hover { background: #96502c; border-color: #96502c; }
.sound-btn:focus-visible {
  outline: none;
  border-color: rgba(245,240,232,0.95);
  box-shadow: 0 0 0 3px rgba(245,240,232,0.4);
}
/* Bouton son de la vidéo drone en vedette : légèrement plus grand */
.sound-btn--featured { width: 40px; height: 40px; }
.sound-btn--featured svg { width: 17px; height: 17px; }

@media (max-width: 480px) {
  .video-play-btn { width: 56px; height: 56px; }
  .video-play-btn svg { width: 21px; height: 21px; }
  .sound-btn { width: 32px; height: 32px; }
}