/* ==========================================================================
   TOM WHEIZ — PORTFOLIO V2
   Preloader -> Home (showreel plein écran + overlay infos) -> Catalogue
   (grille de projets, activée par le bouton "ACTIVER LA CRÉATIVITÉ").
   Direction inspirée de mikkisindhunata.com : la vidéo EST l'interface.
   Toutes les classes sont préfixées .wf- pour éviter tout conflit avec
   le thème WordPress ou Elementor.
   ========================================================================== */

/* Police d'accent : BBH Sans Hegarty (nom, header, preloader, menu).
   Fichier fourni par l'utilisateur dans /wf-portfolio/fonts/. Un seul
   poids disponible (Regular) : c'est volontairement cette même graisse
   qui donne tout son caractère au logo (l'effet "gras" du visuel vient
   de la taille et des lettres condensées, pas d'un poids Bold séparé). */
@font-face {
  font-family: 'BBH Sans Hegarty';
  src: url('./fonts/BBHSansHegarty-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Neutralise TOUTE la chaîne de conteneurs Elementor/Astra autour du
   widget HTML (section > container > column > widget > widget-container),
   quelle que soit sa profondeur d'imbrication. Sans ça, un padding ou une
   hauteur minimale ajoutée par l'un de ces conteneurs peut dépasser
   100vh et créer un léger scroll résiduel sur la page, même si .wf-root
   est lui-même correctement en plein écran. */
html:has(.wf-root),
body:has(.wf-root) {
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  height: 100% !important;
}

body:has(.wf-root) * {
  min-height: 0 !important;
}

body:has(.wf-root) > *:not(.wf-root):not(script):not(style):not(noscript):not(link):not(meta) {
  all: unset;
  display: contents !important;
}

/* Filet de sécurité supplémentaire : au cas où le padding/margin des
   conteneurs Elementor (section, container, colonne, widget-wrap) ne
   serait pas remis à 0 manuellement dans l'éditeur, ces règles forcent
   la valeur 0 directement, avec la spécificité la plus haute possible
   pour ce cas précis. Sans effet néfaste si ces classes sont absentes. */
.elementor-section:has(.wf-root),
.elementor-container:has(.wf-root),
.elementor-column:has(.wf-root),
.elementor-widget-wrap:has(.wf-root),
.elementor-widget-html:has(.wf-root),
.elementor-widget-container:has(.wf-root) {
  margin: 0 !important;
  padding: 0 !important;
  max-width: none !important;
  min-height: 0 !important;
}

.wf-root {
  position: fixed;
  inset: 0;
  z-index: 2147483000; /* au-dessus de tout élément résiduel du thème */
}

.wf-root {
  --wf-black: #0a0a0a;
  --wf-white: #f5f5f3;
  --wf-grey-500: #8a8a86;
  --wf-grey-800: #1c1c1a;
  --wf-accent: #c9c4b8;
  --wf-media-radius: 10px;

  /* Basement Grotesque n'existe qu'en un seul poids très gras (800/Black),
     donc réservé aux titres. 'Archivo' (variable, proche en esprit,
     chargée depuis Google Fonts) sert de repli pour le corps de texte et
     tant que le fichier de police n'a pas été ajouté. */
  --wf-font-display: 'BBH Sans Hegarty', 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --wf-font-body: 'Archivo', 'Helvetica Neue', Arial, sans-serif;

  background: var(--wf-black);
  color: var(--wf-white);
  font-family: var(--wf-font-body);
  width: 100%;
  height: 100svh;
  overflow: hidden;
}

html:has(.wf-root),
body:has(.wf-root) {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}

.wf-root,
.wf-root * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent !important;
  -webkit-touch-callout: none;
}

.wf-root ::selection {
  background: var(--wf-white);
  color: var(--wf-black);
}

/* Empêche la sélection de texte (qui peut aussi apparaître en bleu sur
   desktop lors d'un clic rapide ou d'un double-clic accidentel) sur les
   éléments interactifs : boutons, switch, logo/icône du header. */
.wf-header-name,
.wf-header-name *,
.wf-catalog-switch-label,
.wf-catalog-switch-track,
.wf-unlock-track,
.wf-unlock-thumb,
.wf-activator,
.wf-nav-arrow {
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent !important;
}

/* --------------------------------------------------------------------------
   PRELOADER
   Animation inspirée d'un compte à rebours de pellicule / clap de cinéma :
   des traits verticaux qui montent en cadence pendant le chargement.
   -------------------------------------------------------------------------- */

.wf-preloader {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: var(--wf-black);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
}

.wf-preloader-name {
  font-family: var(--wf-font-display);
  font-size: clamp(0.9rem, 2vw, 1.1rem);
  letter-spacing: 0.14em;
  color: var(--wf-white);
  overflow: hidden;
}

.wf-preloader-name span {
  display: inline-block;
  will-change: transform;
}

.wf-preloader-bars {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  height: 30px;
}

.wf-preloader-bars span {
  display: block;
  width: 3px;
  height: 100%;
  background: var(--wf-grey-500);
  border-radius: 2px;
  transform-origin: bottom;
  animation: wf-bar-pulse 1.1s ease-in-out infinite;
}

.wf-preloader-bars span:nth-child(1) { animation-delay: 0s; }
.wf-preloader-bars span:nth-child(2) { animation-delay: 0.12s; }
.wf-preloader-bars span:nth-child(3) { animation-delay: 0.24s; }
.wf-preloader-bars span:nth-child(4) { animation-delay: 0.36s; }
.wf-preloader-bars span:nth-child(5) { animation-delay: 0.48s; }

@keyframes wf-bar-pulse {
  0%, 100% { transform: scaleY(0.25); background: var(--wf-grey-500); }
  50% { transform: scaleY(1); background: var(--wf-white); }
}

.wf-preloader-bar {
  width: min(220px, 40vw);
  height: 1px;
  background: rgba(245, 245, 243, 0.15);
  position: relative;
  overflow: hidden;
}

.wf-preloader-bar-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0%;
  background: var(--wf-white);
  will-change: width;
}

.wf-preloader-percent {
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  color: var(--wf-grey-500);
  font-variant-numeric: tabular-nums;
}

.wf-preloader.wf-is-hidden {
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   HEADER
   -------------------------------------------------------------------------- */

.wf-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: clamp(20px, 3vw, 32px) clamp(24px, 5vw, 56px);
  pointer-events: none; /* le header lui-même ne bloque plus les clics */
}

.wf-header > * {
  pointer-events: auto; /* mais ses enfants (bouton, menu) restent cliquables */
}

.wf-header-name {
  display: flex;
  align-items: center;
  font-family: var(--wf-font-display);
  font-size: clamp(1.4rem, 3vw, 2.1rem);
  line-height: 0.92;
  letter-spacing: 0.01em;
  color: var(--wf-white);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  text-align: left;
  transition: opacity 0.3s ease;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
}

.wf-header-name:hover {
  background: none;
}

.wf-header-name-text span {
  display: block;
}

/* Sur la home : on montre une icône discrète plutôt que le nom en toutes
   lettres, pour éviter le doublon visuel avec le grand "TOM WHEIZ"
   affiché au centre de la page. Le nom complet revient dès qu'on ouvre
   le catalogue, où il n'y a plus ce doublon. */
.wf-header-name-icon {
  display: block;
  width: 26px;
  height: 26px;
  animation: wf-icon-spin 8s linear infinite;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  outline: none;
  pointer-events: none; /* le clic reste géré par le bouton parent .wf-header-name */
  background: transparent !important;
}

.wf-header-name-icon:hover,
.wf-header-name:hover .wf-header-name-icon {
  background: transparent !important;
}

.wf-header-name-icon * {
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  pointer-events: none;
  background: transparent !important;
}

@keyframes wf-icon-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.wf-header-name-text {
  display: none;
}

body:has(.wf-catalog.wf-is-visible) .wf-header-name-icon {
  display: none;
}

body:has(.wf-catalog.wf-is-visible) .wf-header-name-text {
  display: block;
}

.wf-header-name:hover,
.wf-header-name:focus-visible {
  opacity: 0.75;
}

.wf-header-name:focus-visible {
  outline: 1px solid var(--wf-white);
  outline-offset: 4px;
}

.wf-header-menu {
  position: relative;
}

.wf-header-about {
  font-family: var(--wf-font-display);
  font-size: clamp(0.85rem, 1.4vw, 1.05rem);
  letter-spacing: 0.02em;
  color: var(--wf-white);
  text-decoration: none;
  transition: opacity 0.3s ease;
  cursor: pointer;
  background: none;
  border: none;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
}

.wf-header-about:hover,
.wf-header-about:focus-visible {
  opacity: 0.75;
}

.wf-header-about:focus-visible {
  outline: 1px solid var(--wf-white);
  outline-offset: 4px;
}

.wf-header-menu-dropdown {
  position: absolute;
  top: calc(100% + 14px);
  right: 0;
  min-width: 180px;
  background: rgba(20, 20, 20, 0.85);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  border: 1px solid rgba(245, 245, 243, 0.14);
  border-radius: 12px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
}

.wf-header-menu-dropdown.wf-is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.wf-header-menu-item {
  font-family: var(--wf-font-display);
  font-size: 0.95rem;
  color: var(--wf-white);
  text-decoration: none;
  background: none;
  border: none;
  text-align: left;
  padding: 10px 12px;
  border-radius: 7px;
  cursor: pointer;
  transition: background 0.25s ease;
}

.wf-header-menu-item:hover,
.wf-header-menu-item:focus-visible {
  background: rgba(245, 245, 243, 0.1);
}

/* --------------------------------------------------------------------------
   HOME — showreel plein écran, la vidéo est l'interface
   -------------------------------------------------------------------------- */

.wf-home {
  position: absolute;
  inset: 0;
  z-index: 10;
  transition: opacity 0.7s ease, visibility 0.7s ease;
}

.wf-home.wf-is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.wf-home-video-wrap {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: var(--wf-grey-800);
}

.wf-home-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Voile sombre sur le showreel pour garantir la lisibilité du texte,
   sans que la vidéo perde sa présence à l'écran. */
.wf-home-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(10, 10, 10, 0.55) 0%,
    rgba(10, 10, 10, 0.25) 35%,
    rgba(10, 10, 10, 0.35) 65%,
    rgba(10, 10, 10, 0.75) 100%
  );
}

.wf-home-content {
  position: absolute;
  left: 50%;
  top: clamp(110px, 16vh, 160px);
  transform: translateX(-50%);
  z-index: 5;
  width: 100%;
  max-width: 900px;
  padding: 0 24px;
  text-align: center;
}

.wf-home-name {
  font-family: var(--wf-font-display);
  font-size: clamp(2.4rem, 6vw, 4.4rem);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1;
  text-align: center;
  color: var(--wf-white);
  overflow: hidden;
}

.wf-home-name span {
  display: inline-block;
  will-change: transform;
}

.wf-home-role {
  margin-top: 14px;
  font-size: clamp(0.85rem, 1.4vw, 1rem);
  letter-spacing: 0.06em;
  color: var(--wf-white);
  opacity: 0.85;
}

/* --------------------------------------------------------------------------
   SLIDE TO UNLOCK — remplace l'ancien bouton, mécanique de déverrouillage
   façon iPhone : on fait glisser le curseur jusqu'au bout du rail pour
   ouvrir le catalogue. Rendu translucide type verre (glassmorphism iOS).
   -------------------------------------------------------------------------- */

.wf-unlock-wrap {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
}

.wf-unlock-track {
  position: relative;
  width: min(320px, 78vw);
  height: 56px;
  border-radius: 30px;
  background: rgba(245, 245, 243, 0.08);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  border: 1px solid rgba(245, 245, 243, 0.18);
  display: flex;
  align-items: center;
  overflow: hidden;
  transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.wf-unlock-label {
  position: absolute;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  color: rgba(245, 245, 243, 0.55);
  pointer-events: none;
  animation: wf-unlock-label-shimmer 2.6s ease-in-out infinite;
  transition: opacity 0.3s ease;
}

@keyframes wf-unlock-label-shimmer {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 0.9; }
}

.wf-unlock-thumb {
  position: absolute;
  left: 4px;
  top: 4px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(245, 245, 243, 0.95);
  color: var(--wf-black);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
  touch-action: none;
  z-index: 2;
  transition: box-shadow 0.3s ease, background 0.3s ease, transform 0.2s ease;
  box-shadow: 0 0 0 rgba(245, 245, 243, 0);
}

.wf-unlock-thumb svg {
  width: 18px;
  height: 18px;
}

.wf-unlock-thumb.wf-is-dragging {
  cursor: grabbing;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0 0 20px 4px rgba(245, 245, 243, 0.45);
  transform: scale(1.06);
}

/* Dès que le doigt/curseur touche le rail, le fond et la bordure
   s'éclaircissent nettement pour donner un retour immédiat — pas
   d'attente jusqu'au déverrouillage complet. */
.wf-unlock-track.wf-is-active {
  background: rgba(245, 245, 243, 0.22);
  border-color: rgba(245, 245, 243, 0.4);
  box-shadow: 0 0 30px 2px rgba(245, 245, 243, 0.12);
}

.wf-unlock-track.wf-is-active .wf-unlock-label {
  opacity: 0.9;
}

/* État déverrouillé : pulsation de luminosité façon verre qui s'éclaire,
   avant la transition vers le catalogue. */
.wf-unlock-track.wf-is-unlocked {
  animation: wf-unlock-glow 0.7s ease-out;
}

.wf-unlock-track.wf-is-unlocked .wf-unlock-thumb {
  box-shadow: 0 0 24px 6px rgba(245, 245, 243, 0.5);
}

@keyframes wf-unlock-glow {
  0% {
    background: rgba(245, 245, 243, 0.14);
    box-shadow: 0 0 0 rgba(245, 245, 243, 0);
  }
  50% {
    background: rgba(245, 245, 243, 0.35);
    box-shadow: 0 0 40px 4px rgba(245, 245, 243, 0.25);
  }
  100% {
    background: rgba(245, 245, 243, 0.14);
    box-shadow: 0 0 0 rgba(245, 245, 243, 0);
  }
}

/* --------------------------------------------------------------------------
   MENTIONS LÉGALES — lien discret + panneau overlay
   -------------------------------------------------------------------------- */

.wf-legal-link {
  position: absolute;
  right: clamp(20px, 4vw, 40px);
  bottom: 20px;
  z-index: 10;
  background: none;
  border: none;
  color: rgba(245, 245, 243, 0.4);
  font-size: 0.65rem;
  letter-spacing: 0.04em;
  font-family: inherit;
  cursor: pointer;
  transition: color 0.3s ease;
}

.wf-legal-link:hover,
.wf-legal-link:focus-visible {
  color: rgba(245, 245, 243, 0.85);
}

.wf-legal-panel {
  position: fixed;
  inset: 0;
  z-index: 400;
  background: rgba(10, 10, 10, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}

.wf-legal-panel.wf-is-visible {
  opacity: 1;
  visibility: visible;
}

.wf-legal-panel-inner {
  position: relative;
  max-width: 640px;
  max-height: 80vh;
  overflow-y: auto;
  background: var(--wf-grey-800);
  border: 1px solid rgba(245, 245, 243, 0.1);
  border-radius: 14px;
  padding: clamp(28px, 5vw, 48px);
}

.wf-legal-panel-inner h2 {
  font-family: var(--wf-font-display);
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--wf-white);
  margin-bottom: 24px;
}

.wf-bio-photo {
  display: block;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 20px;
  border: 1px solid rgba(245, 245, 243, 0.15);
}

.wf-legal-panel-inner h3 {
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  color: var(--wf-white);
  margin-top: 22px;
  margin-bottom: 8px;
}

.wf-legal-panel-inner h3:first-of-type {
  margin-top: 0;
}

.wf-legal-panel-inner p {
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--wf-white);
}

.wf-legal-close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid rgba(245, 245, 243, 0.2);
  border-radius: 50%;
  color: var(--wf-white);
  cursor: pointer;
  transition: border-color 0.3s ease;
}

.wf-legal-close:hover,
.wf-legal-close:focus-visible {
  border-color: rgba(245, 245, 243, 0.7);
}

.wf-legal-close svg {
  width: 14px;
  height: 14px;
}

/* --------------------------------------------------------------------------
   CATALOGUE — grille de tous les projets
   -------------------------------------------------------------------------- */

.wf-catalog {
  position: absolute;
  inset: 0;
  z-index: 20;
  background: var(--wf-black);
  overflow-y: auto;
  padding: clamp(170px, 20vh, 220px) clamp(24px, 5vw, 64px) 80px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.7s ease, visibility 0.7s ease;
}

.wf-catalog.wf-is-visible {
  opacity: 1;
  visibility: visible;
}

.wf-catalog-back {
  position: fixed;
  top: 30px;
  left: clamp(24px, 5vw, 56px);
  z-index: 101;
  display: flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  color: var(--wf-grey-500);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  font-family: inherit;
  cursor: pointer;
  transition: color 0.3s ease;
}

.wf-catalog-back:hover,
.wf-catalog-back:focus-visible {
  color: var(--wf-white);
}

.wf-catalog-back svg {
  width: 14px;
  height: 14px;
}

/* Switch Commercial / Fiction — même esthétique sobre que l'ancien
   switch de catalogue, repris ici pour filtrer la grille. */
.wf-catalog-switch {
  position: relative;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-bottom: clamp(32px, 5vh, 56px);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  pointer-events: auto;
}

.wf-catalog-switch-label {
  position: relative;
  z-index: 51;
  color: var(--wf-grey-500);
  cursor: pointer;
  background: none;
  border: none;
  font-family: inherit;
  letter-spacing: inherit;
  padding: 4px;
  transition: color 0.4s ease;
  pointer-events: auto;
}

.wf-catalog-switch-label:hover,
.wf-catalog-switch-label:focus-visible {
  color: var(--wf-white);
}

.wf-catalog-switch-label:focus-visible {
  outline: 1px solid var(--wf-white);
  outline-offset: 3px;
}

.wf-catalog-switch-label.wf-is-active {
  color: var(--wf-white);
}

.wf-catalog-switch-track {
  position: relative;
  width: 36px;
  height: 14px;
  border: 1px solid rgba(245, 245, 243, 0.3);
  border-radius: 10px;
  cursor: pointer;
}

.wf-catalog-switch-dot {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--wf-white);
  transition: left 0.4s cubic-bezier(0.65, 0, 0.35, 1);
}

.wf-catalog-switch-track.wf-is-fiction .wf-catalog-switch-dot {
  left: 24px;
}

.wf-catalog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2vw, 28px);
  max-width: 1400px;
  margin: 0 auto;
}

.wf-catalog-item {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: var(--wf-media-radius);
  background: var(--wf-grey-800);
  cursor: pointer;
}

.wf-catalog-item img,
.wf-catalog-item video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease, opacity 0.4s ease;
}

.wf-catalog-item video {
  opacity: 0;
}

.wf-catalog-item.wf-video-ready video {
  opacity: 1;
}

.wf-catalog-item:hover img,
.wf-catalog-item:hover video {
  transform: scale(1.04);
}

.wf-catalog-item-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 10, 10, 0) 50%, rgba(10, 10, 10, 0.85) 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 18px 20px;
}

.wf-catalog-item-number {
  font-size: 0.68rem;
  color: rgba(245, 245, 243, 0.7);
  letter-spacing: 0.06em;
  margin-bottom: 4px;
}

.wf-catalog-item-title {
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.wf-catalog-item-meta {
  margin-top: 2px;
  font-size: 0.75rem;
  color: rgba(245, 245, 243, 0.65);
  letter-spacing: 0.02em;
}

/* --------------------------------------------------------------------------
   ACCESSIBILITY
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .wf-home,
  .wf-catalog,
  .wf-catalog-item img,
  .wf-catalog-item video,
  .wf-preloader-bar-fill {
    transition-duration: 0.01ms !important;
  }

  .wf-preloader-bars span,
  .wf-activator-dot {
    animation-duration: 2.4s;
  }

  .wf-header-name-icon {
    animation-duration: 20s; /* ralentie plutôt que stoppée : reste discrète */
  }
}

/* --------------------------------------------------------------------------
   RESPONSIVE — MOBILE
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
  .wf-catalog-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .wf-header {
    padding: 20px 20px;
  }

  .wf-home-content {
    left: 50%;
    top: 100px;
    transform: translateX(-50%);
    width: 100%;
    max-width: none;
    padding: 0 20px;
    text-align: center;
  }

  .wf-unlock-track {
    height: 52px;
  }

  .wf-unlock-thumb {
    width: 44px;
    height: 44px;
  }

  .wf-unlock-label {
    font-size: 0.6rem;
  }

  .wf-catalog-grid {
    grid-template-columns: 1fr;
  }

  .wf-catalog {
    padding-top: 140px;
  }
}