/* ============================================================
   refinements.css — Raffinements visuels globaux
   ------------------------------------------------------------
   Micro-interactions, focus, scrollbar, transitions,
   états de sélection, print styles.
   
   Respecte prefers-reduced-motion : toutes les animations
   sont neutralisées pour les utilisateurs sensibles.
   ============================================================ */

/* ==== 1. Sélection texte — palette du site ==== */
::selection {
  background: rgba(138, 177, 205, 0.35);
  color: #1F3A52;
  text-shadow: none;
}
::-moz-selection {
  background: rgba(138, 177, 205, 0.35);
  color: #1F3A52;
}

/* ==== 2. Scrollbar personnalisée — Firefox + WebKit ==== */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(45, 82, 121, 0.35) transparent;
}
*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
*::-webkit-scrollbar-track {
  background: transparent;
}
*::-webkit-scrollbar-thumb {
  background: rgba(45, 82, 121, 0.25);
  border-radius: 10px;
  border: 2px solid transparent;
  background-clip: content-box;
  transition: background 0.3s;
}
*::-webkit-scrollbar-thumb:hover {
  background: rgba(45, 82, 121, 0.55);
  background-clip: content-box;
  border: 2px solid transparent;
}

/* ==== 3. Focus visible — accessibilité + élégance ==== */
/* On enlève le focus par défaut (souvent moche) et on met le nôtre */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid #8ab1cd;
  outline-offset: 3px;
  border-radius: 3px;
  transition: outline-offset 0.15s;
}
/* Focus spécifique boutons + liens : plus doux */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
[role="button"]:focus-visible {
  outline: 2px solid #8ab1cd;
  outline-offset: 4px;
}
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid #8ab1cd;
  outline-offset: 0;
  box-shadow: 0 0 0 4px rgba(138, 177, 205, 0.15);
}

/* ==== 4. Liens : soulignement animé au survol ==== */
/* On applique uniquement aux liens de contenu (pas les cards) */
main a:not([class]),
.page-content a:not([class]),
p a:not([class]) {
  color: #2d5279;
  text-decoration: none;
  background-image: linear-gradient(#2d5279, #2d5279);
  background-size: 0% 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size 0.3s ease;
  padding-bottom: 1px;
}
main a:not([class]):hover,
.page-content a:not([class]):hover,
p a:not([class]):hover {
  background-size: 100% 1px;
}

/* ==== 5. Transitions globales harmonisées ==== */
a, button, .btn, .single-card, .album-card, .film-card, .gallery-item,
.ticket-card, .product-card, .quick-link, .starac-photo, .agency-credit {
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.25s,
              background-color 0.25s,
              color 0.25s;
}

/* ==== 6. Hover d'élévation subtile sur les cards ==== */
.single-card:hover,
.album-card:hover,
.film-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(31, 58, 82, 0.12), 0 2px 6px rgba(31, 58, 82, 0.06);
  border-color: rgba(138, 177, 205, 0.5);
}

/* Un touch subtil pour la card featured Ma Fille */
.single-card-featured:hover {
  box-shadow: 0 8px 24px rgba(178, 90, 90, 0.18), 0 2px 6px rgba(178, 90, 90, 0.08);
  border-color: #b25a5a;
}

/* ==== 7. Photos de galerie : léger zoom + révélation caption ==== */
.gallery-item {
  overflow: hidden;
  position: relative;
}
.gallery-item img {
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1),
              filter 0.4s;
}
.gallery-item:hover img {
  transform: scale(1.04);
  filter: brightness(0.95) saturate(1.1);
}
.gallery-item .caption {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.3s,
              background 0.3s;
}
.gallery-item:hover .caption {
  transform: translateY(-2px);
}

/* ==== 8. Photos Star Ac : même comportement ==== */
.starac-photo {
  overflow: hidden;
}
.starac-photo img {
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.starac-photo:hover img {
  transform: scale(1.05);
}

/* ==== 9. Boutons YouTube Music dans les cards — style raffiné ==== */
.single-yt {
  position: relative;
  padding-left: 14px;
}
.single-yt::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  transform: translateY(-50%) scale(0.7);
  transition: transform 0.2s;
  opacity: 0.5;
}
.single-yt:hover::before {
  transform: translateY(-50%) scale(1);
  opacity: 1;
}

/* ==== 10. Scroll fade-in : classe appliquée en JS ==== */
[data-fade-in] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
[data-fade-in].is-visible {
  opacity: 1;
  transform: none;
}
[data-fade-in][data-delay="1"] { transition-delay: 0.08s; }
[data-fade-in][data-delay="2"] { transition-delay: 0.16s; }
[data-fade-in][data-delay="3"] { transition-delay: 0.24s; }

/* ==== 11. Titres de section — meilleure lisibilité ==== */
.page-title em,
.hero h1 em,
h1 em, h2 em {
  font-style: italic;
  color: inherit;
  opacity: 0.75;
}

/* ==== 12. Nav pill : soulignement animé au hover ==== */
.site-nav-links a {
  position: relative;
}
.site-nav-links a::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -4px;
  width: 0;
  height: 1px;
  background: currentColor;
  transition: width 0.3s ease, left 0.3s ease;
}
.site-nav-links a:hover::after {
  width: 60%;
  left: 20%;
}

/* ==== 13. Chargement lazy : léger blur qui s'estompe ==== */
img[loading="lazy"] {
  filter: none;
  transition: filter 0.4s ease;
}

/* ==== 14. Skeleton pour images CDN qui n'ont pas chargé ==== */
.single-cover, .album-cover {
  background: linear-gradient(110deg,
    rgba(31, 58, 82, 0.04) 8%,
    rgba(31, 58, 82, 0.08) 18%,
    rgba(31, 58, 82, 0.04) 33%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 2.5s ease-in-out infinite;
}
.single-cover img,
.album-cover img {
  position: relative;
  z-index: 1;
}
@keyframes skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ==== 15. Effet de « entrée en scène » du curseur note ==== */
/* (Le curseur note SVG est déjà défini dans effects.css) */

/* ==== 16. Support prefers-reduced-motion ==== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  [data-fade-in] {
    opacity: 1;
    transform: none;
  }
  .single-cover, .album-cover {
    animation: none;
    background: rgba(31, 58, 82, 0.04);
  }
}

/* ==== 17. Print styles pour pages légales ==== */
@media print {
  body {
    font-size: 11pt;
    line-height: 1.5;
    color: black;
    background: white;
  }
  .site-nav, .site-footer, .site-nav-links,
  .btn, button, .agency-credit,
  #sfx-toggle, .cta-buttons,
  video, audio, iframe {
    display: none !important;
  }
  main {
    max-width: 100%;
    padding: 0;
  }
  h1, h2, h3 {
    page-break-after: avoid;
    color: black;
  }
  a {
    color: black;
    text-decoration: underline;
  }
  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 9pt;
    color: #666;
  }
  .legal-section, .film-card, .album-card {
    page-break-inside: avoid;
  }
}

/* ==== 18. Amélioration des ancres HTML5 sections ==== */
section[id] {
  scroll-margin-top: 80px;
}

/* ==== 19. Smooth scroll global ==== */
html {
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ==== 20. Bouton "retour en haut" (activé via JS) ==== */
.back-to-top {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(31, 58, 82, 0.85);
  color: white;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition: opacity 0.3s, visibility 0.3s, transform 0.3s, background 0.2s;
  z-index: 999;
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 12px rgba(31, 58, 82, 0.25);
}
.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.back-to-top:hover {
  background: rgba(31, 58, 82, 1);
  transform: translateY(-2px);
}
.back-to-top svg {
  width: 20px;
  height: 20px;
}
@media (max-width: 640px) {
  .back-to-top {
    bottom: 16px;
    right: 16px;
    width: 40px;
    height: 40px;
  }
}