/**
 * Emil Editing - Design System & Styles Globaux
 * Design premium, moderne, responsive et accessible (W3C compliant)
 */

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,600&display=swap');

@font-face {
  font-family: 'bumbbled';
  src: url('../assets/fonts/Bumbbled.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Palette de couleurs officielle Emil Editing */
  --mainColor: #002f6d;
  --secondColor: #0090ff;
  --accentGlow: #00a2ff;
  --yellowColor: #ffed00;
  --yellowGlow: rgba(255, 237, 0, 0.45);
  --textColor: #ffffff;
  --textMuted: rgba(255, 255, 255, 0.82);
  --textDim: rgba(255, 255, 255, 0.65);
  
  /* Arrière-plans & Gradients */
  --bgGradient: linear-gradient(84deg, #002f6d 4%, #0090ff 72%);
  --bgGradientDeep: linear-gradient(135deg, #001e47 0%, #002f6d 45%, #0077d8 85%, #0090ff 100%);
  --cardBg: #1c1c1c;
  --cardBgGlass: rgba(28, 28, 30, 0.88);
  --glassNavbar: rgba(20, 48, 102, 0.45);
  --glassBorder: rgba(255, 255, 255, 0.16);

  /* Ombres & Lueurs */
  --shadowSm: 0 4px 12px rgba(0, 0, 0, 0.25);
  --shadowMd: 0 8px 24px rgba(0, 0, 0, 0.35);
  --shadowLg: 0 16px 36px rgba(0, 0, 0, 0.45);
  --glowYellow: 0 0 20px var(--yellowGlow);
  --glowBlue: 0 0 25px rgba(0, 144, 255, 0.4);

  /* Typographie & Espacement */
  --fontBody: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --fontDisplay: 'bumbbled', 'Poppins', cursive;
  --transitionFast: 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  --transitionNormal: 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  --transitionBounce: 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Rayons de courbure */
  --radiusSm: 8px;
  --radiusMd: 16px;
  --radiusLg: 24px;
  --radiusPill: 9999px;
}

/* ==========================================================================
   Mode Nuit - Confort Visuel Anti-Éblouissement (Palette Bleue DA Préservée)
   ========================================================================== */
[data-theme="dark"] {
  /* Palette Bleue Emil Editing - Version Adoucie / Confort Visuel */
  --mainColor: #001e4c;
  --secondColor: #005eb8;
  --accentGlow: #0077e6;
  --yellowColor: #ffed00;
  --yellowGlow: rgba(255, 237, 0, 0.4);
  --textColor: #ffffff;
  --textMuted: rgba(255, 255, 255, 0.85);
  --textDim: rgba(255, 255, 255, 0.65);

  /* Arrière-plan dégradé identique à la DA d'origine (angle 84deg), mais adouci en luminosité */
  --bgGradient: linear-gradient(84deg, #001c45 4%, #0059b5 72%);
  --bgGradientDeep: linear-gradient(135deg, #001333 0%, #001c45 45%, #00458f 85%, #0059b5 100%);
  --cardBg: #00193d;
  --cardBgGlass: rgba(0, 25, 61, 0.88);
  --glassNavbar: rgba(0, 22, 54, 0.65);
  --glassBorder: rgba(255, 255, 255, 0.14);

  /* Ombres & Lueurs adoucies */
  --shadowSm: 0 4px 12px rgba(0, 0, 0, 0.35);
  --shadowMd: 0 8px 24px rgba(0, 0, 0, 0.45);
  --shadowLg: 0 16px 36px rgba(0, 0, 0, 0.55);
  --glowYellow: 0 0 18px var(--yellowGlow);
  --glowBlue: 0 0 22px rgba(0, 94, 184, 0.35);
}

/* Transitions douces globales */
body,
.site-header::before,
.video-pres-section,
.partner-white-card,
.partners-arrow,
.carousel-nav-btn,
.theme-toggle-btn {
  transition: background-color 0.4s ease, background 0.4s ease, color 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease, filter 0.4s ease;
}

/* Adaptations d'éléments au Mode Nuit (Anti-éblouissement tout en préservant la DA bleue) */
[data-theme="dark"] .video-pres-section {
  background-color: #001a3e;
}

[data-theme="dark"] .video-player-frame {
  box-shadow: none;
}

[data-theme="dark"] .triangle-float {
  opacity: 0.75;
  filter: drop-shadow(0 10px 25px rgba(0, 0, 0, 0.5)) brightness(0.95);
}

[data-theme="dark"] .hero-portrait {
  filter: drop-shadow(0 20px 45px rgba(0, 0, 0, 0.55)) brightness(0.97);
}

/* ==========================================================================
   Reset & Base Styles
   ========================================================================== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: var(--fontBody);
}

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
  color-scheme: dark;
}

body {
  background-color: var(--mainColor);
  color: var(--textColor);
  font-size: 16px;
  line-height: 1.6;
  min-height: 100vh;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* Verrouillage strict du défilement lors de l'ouverture d'une modale */
html.modal-open,
body.modal-open {
  overflow: hidden !important;
  height: 100% !important;
  overscroll-behavior: none !important;
}

/* Décoration du texte & surbrillance */
::selection {
  background-color: var(--yellowColor);
  color: #001f4d;
}

/* Barre de défilement moderne */
::-webkit-scrollbar {
  width: 10px;
}
::-webkit-scrollbar-track {
  background: #001a3d;
}
::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.35);
  border-radius: 5px;
  border: 2px solid #001a3d;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--yellowColor);
}

a {
  color: var(--textColor);
  text-decoration: none;
  transition: color var(--transitionFast);
}

ul, ol {
  list-style: none;
}

img, video {
  max-width: 100%;
  height: auto;
  display: block;
}

button {
  font-family: inherit;
  border: none;
  outline: none;
  background: none;
  cursor: pointer;
}

/* Accessibilité: focus visible */
:focus-visible {
  outline: 3px solid var(--yellowColor);
  outline-offset: 3px;
  border-radius: var(--radiusSm);
}

.skip-to-content {
  position: absolute;
  top: -60px;
  left: 20px;
  background: var(--yellowColor);
  color: #001f4d;
  padding: 10px 18px;
  font-weight: 700;
  z-index: 9999;
  border-radius: var(--radiusSm);
  transition: top var(--transitionFast);
}
.skip-to-content:focus {
  top: 20px;
}

/* Classes utilitaires de mise en valeur */
.highlight {
  color: var(--yellowColor);
  font-family: var(--fontDisplay);
  font-weight: 400;
  text-shadow: var(--glowYellow);
}

/* Conteneur global */
.container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ==========================================================================
   Header & Navbar
   ========================================================================== */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  padding: 1.2rem clamp(24px, 5vw, 64px);
  transition: background var(--transitionNormal), padding var(--transitionNormal), box-shadow var(--transitionNormal);
}

.site-header.scrolled {
  padding: 0.8rem clamp(24px, 5vw, 64px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

.site-header::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--glassNavbar);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  border-bottom: 1px solid var(--glassBorder);
  z-index: -1;
  transition: opacity var(--transitionNormal);
}

.navbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1600px;
  margin: 0 auto;
}

.site-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 1001;
}

.site-logo img {
  width: 5.4rem;
  height: auto;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.4));
}

.main-nav {
  display: flex;
  align-items: center;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.8vw, 30px);
}

.nav-link {
  font-size: 1.08rem;
  font-weight: 500;
  color: var(--textColor);
  position: relative;
  padding: 6px 0;
  transition: color var(--transitionFast);
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0%;
  height: 2.5px;
  background: var(--yellowColor);
  border-radius: 2px;
  box-shadow: var(--glowYellow);
  transition: width var(--transitionNormal);
}

.nav-link:hover,
.nav-link.active {
  color: var(--yellowColor);
}

.nav-link:hover::after,
.nav-link.active::after {
  width: 100%;
}

.btn-rdv-nav {
  background: var(--yellowColor);
  color: #00224f;
  font-weight: 700;
  font-size: 0.98rem;
  padding: 10px 24px;
  border-radius: var(--radiusPill);
  box-shadow: 0 4px 15px rgba(255, 237, 0, 0.35);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all var(--transitionNormal);
}

.btn-rdv-nav:hover {
  background: #ffffff;
  color: var(--mainColor);
  transform: translateY(-2px);
  box-shadow: 0 6px 22px rgba(255, 255, 255, 0.4);
}

/* ==========================================================================
   Menu déroulant "Services" dans la Navbar
   ========================================================================== */
.nav-item-dropdown {
  position: relative;
}

.nav-link-dropdown {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

.dropdown-arrow {
  display: inline-block;
  vertical-align: middle;
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), stroke 0.2s ease;
  flex-shrink: 0;
}

.nav-item-dropdown:hover .nav-link-dropdown,
.nav-item-dropdown:focus-within .nav-link-dropdown,
.nav-item-dropdown.is-open .nav-link-dropdown {
  color: var(--yellowColor);
}

.nav-item-dropdown:hover .nav-link-dropdown::after,
.nav-item-dropdown:focus-within .nav-link-dropdown::after,
.nav-item-dropdown.is-open .nav-link-dropdown::after {
  width: 100%;
}

.nav-item-dropdown:hover .dropdown-arrow,
.nav-item-dropdown:focus-within .dropdown-arrow,
.nav-item-dropdown.is-open .dropdown-arrow {
  transform: rotate(180deg);
  stroke: var(--yellowColor);
}

.nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  min-width: 205px;
  padding: 8px;
  background: rgba(0, 24, 60, 0.94);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 237, 0, 0.25);
  border-radius: 14px;
  box-shadow: 0 16px 40px rgba(0, 10, 30, 0.6), 0 0 24px rgba(255, 237, 0, 0.1);
  list-style: none;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.24s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.24s cubic-bezier(0.16, 1, 0.3, 1),
              visibility 0.24s ease;
  z-index: 1050;
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin: 0;
}

/* Zone tampon invisible pour fluidité du survol */
.nav-dropdown-menu::before {
  content: '';
  position: absolute;
  top: -14px;
  left: 0;
  right: 0;
  height: 16px;
  background: transparent;
}

.nav-item-dropdown:hover .nav-dropdown-menu,
.nav-item-dropdown:focus-within .nav-dropdown-menu,
.nav-item-dropdown.is-open .nav-dropdown-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.dropdown-item {
  display: flex;
  align-items: center;
  padding: 10px 16px;
  font-size: 0.96rem;
  font-weight: 600;
  color: #ffffff;
  border-radius: 10px;
  text-decoration: none;
  white-space: nowrap;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  background: transparent;
}

.dropdown-item:hover {
  background: rgba(255, 237, 0, 0.14);
  color: var(--yellowColor);
  padding-left: 20px;
  box-shadow: inset 0 0 12px rgba(255, 237, 0, 0.06);
}

/* Bouton Mode Nuit / Confort Visuel dans la Navbar */
.nav-item-theme {
  display: flex;
  align-items: center;
}

.theme-toggle-btn {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid var(--glassBorder);
  border-radius: var(--radiusPill);
  padding: 8px 16px;
  color: var(--textColor);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  font-size: 0.92rem;
  font-weight: 600;
  transition: all var(--transitionNormal);
  user-select: none;
  position: relative;
}

.theme-toggle-btn:hover {
  background: rgba(255, 255, 255, 0.22);
  border-color: rgba(255, 255, 255, 0.35);
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25);
}

.theme-toggle-btn:focus-visible {
  outline: 2px solid var(--yellowColor);
  outline-offset: 3px;
}

/* Conteneur d'icône 3D avec micro-animation fluide */
.theme-toggle-icon-wrap {
  position: relative;
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.theme-toggle-icon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1),
              opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, opacity;
}

/* En mode standard (jour/clair) */
.theme-toggle-btn .moon-icon {
  transform: rotate(0deg) scale(1);
  opacity: 1;
  color: var(--yellowColor);
}

.theme-toggle-btn .sun-icon {
  transform: rotate(-120deg) scale(0);
  opacity: 0;
  color: var(--yellowColor);
  pointer-events: none;
}

/* Animation sur le texte lors du clic aller-retour */
.theme-toggle-label {
  display: inline-block;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
              opacity 0.3s ease;
  will-change: transform, opacity;
}

/* Micro-animations actives au clic aller-retour */
.theme-toggle-btn.is-animating {
  animation: btnClickPulse 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.theme-toggle-btn.is-animating .theme-toggle-label {
  animation: textTogglePop 0.42s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes btnClickPulse {
  0% { transform: scale(0.93); }
  50% { transform: scale(1.04); }
  100% { transform: scale(1); }
}

@keyframes textTogglePop {
  0% {
    transform: translateY(-6px) scale(0.88);
    opacity: 0;
  }
  60% {
    transform: translateY(1.5px) scale(1.04);
    opacity: 1;
  }
  100% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

/* État Actif Mode Nuit */
[data-theme="dark"] .theme-toggle-btn {
  background: rgba(255, 220, 51, 0.16);
  border-color: rgba(255, 220, 51, 0.45);
  color: var(--yellowColor);
  box-shadow: 0 0 16px rgba(255, 220, 51, 0.25);
}

[data-theme="dark"] .theme-toggle-btn:hover {
  background: rgba(255, 220, 51, 0.26);
  border-color: var(--yellowColor);
  transform: translateY(-2px);
  box-shadow: 0 0 22px rgba(255, 220, 51, 0.35);
}

[data-theme="dark"] .theme-toggle-btn .moon-icon {
  transform: rotate(120deg) scale(0);
  opacity: 0;
  pointer-events: none;
}

[data-theme="dark"] .theme-toggle-btn .sun-icon {
  transform: rotate(0deg) scale(1);
  opacity: 1;
  pointer-events: auto;
}

/* Bouton Burger Mobile */
.burger-btn {
  display: none;
  flex-direction: column;
  justify-content: space-around;
  width: 42px;
  height: 42px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--glassBorder);
  border-radius: var(--radiusSm);
  padding: 9px;
  cursor: pointer;
  z-index: 1002;
  transition: background var(--transitionFast);
}

.burger-btn span {
  display: block;
  width: 100%;
  height: 2.5px;
  background-color: var(--textColor);
  border-radius: 2px;
  transition: transform var(--transitionNormal), opacity var(--transitionNormal);
}

.burger-btn.active span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}
.burger-btn.active span:nth-child(2) {
  opacity: 0;
}
.burger-btn.active span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/* ==========================================================================
   Boutons d'action (CTA)
   ========================================================================== */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background-color: var(--textColor);
  color: var(--mainColor);
  font-size: 1.15rem;
  font-weight: 700;
  padding: 16px 38px;
  border-radius: var(--radiusPill);
  box-shadow: var(--shadowMd);
  position: relative;
  overflow: hidden;
  z-index: 1;
  transition: all var(--transitionNormal);
  border: 2px solid var(--textColor);
}

.btn-primary::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  width: 120%;
  height: 120%;
  background-color: var(--secondColor);
  border-radius: inherit;
  z-index: -1;
  transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

.btn-primary:hover::before {
  transform: translate(-50%, -50%) scale(1.5);
}

.btn-primary:hover {
  color: var(--textColor);
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 12px 30px rgba(0, 144, 255, 0.45), 0 0 14px rgba(255, 255, 255, 0.25);
  border-color: #ffffff;
}

.btn-primary:active {
  transform: translateY(0) scale(0.98);
}

/* ==========================================================================
   Triangles 3D Décoratifs Flottants (Identité visuelle iconique)
   ========================================================================== */
.triangle-float {
  position: absolute;
  pointer-events: none;
  aspect-ratio: 1/1;
  z-index: 2;
  filter: drop-shadow(0 10px 25px rgba(0, 0, 0, 0.35));
  will-change: transform;
}

.triangle-pos-1 {
  width: 13rem;
  top: 80px;
  left: 20px;
  animation: floatTriangle1 4.5s ease-in-out infinite;
}

.triangle-pos-2 {
  width: 11rem;
  top: 35%;
  right: 40px;
  animation: floatTriangle2 5.5s ease-in-out infinite;
}

.triangle-pos-3 {
  width: 12rem;
  bottom: 120px;
  right: 50px;
  animation: floatTriangle3 5s ease-in-out infinite;
}

/* Triangle décoratif jaune à droite de la section "Comment on procède ?" */
.triangle-pos-convaincu {
  position: absolute;
  width: clamp(10rem, 14vw, 14.5rem);
  top: clamp(-10px, 1.5vw, 25px);
  right: clamp(15px, 4vw, 55px);
  z-index: 3;
  pointer-events: none;
  animation: floatTriangleConvaincu 4.8s ease-in-out infinite;
  filter: drop-shadow(0 15px 30px rgba(0, 0, 0, 0.35));
}

.triangle-pos-process {
  position: absolute;
  width: clamp(10rem, 14vw, 14.5rem);
  top: clamp(-15px, 1.5vw, 25px);
  right: calc((100% - 100vw) / 2 + clamp(20px, 3vw, 55px));
  z-index: 3;
  pointer-events: none;
  animation: floatTriangleConvaincu 4.8s ease-in-out infinite;
  filter: drop-shadow(0 15px 30px rgba(0, 0, 0, 0.35));
}

/* Triangle décoratif jaune à gauche de "Ils m'ont fait confiance !" */
.triangle-pos-confiance {
  width: clamp(8rem, 10.5vw, 12.5rem);
  top: clamp(-65px, -4.5vw, -30px);
  left: calc((100% - 100vw) / 2 + clamp(15px, 2vw, 40px));
  z-index: 1;
  pointer-events: none;
  animation: floatTriangleConfiance 5.2s ease-in-out infinite;
  filter: drop-shadow(0 15px 30px rgba(0, 0, 0, 0.35));
}

/* Triangle décoratif jaune à droite de "Foire aux questions" */
.triangle-pos-faq {
  width: clamp(8rem, 10.5vw, 12.5rem);
  top: clamp(-75px, -5.5vw, -35px);
  right: calc((100% - 100vw) / 2 + clamp(15px, 2vw, 40px));
  z-index: 1;
  pointer-events: none;
  animation: floatTriangleFaq 5.6s ease-in-out infinite;
  filter: drop-shadow(0 15px 30px rgba(0, 0, 0, 0.35));
}

@keyframes floatTriangle1 {
  0% { transform: translateY(0) rotate(340deg); }
  50% { transform: translateY(22px) rotate(348deg); }
  100% { transform: translateY(0) rotate(340deg); }
}

@keyframes floatTriangle2 {
  0% { transform: translateY(0) rotate(40deg); }
  50% { transform: translateY(28px) rotate(48deg); }
  100% { transform: translateY(0) rotate(40deg); }
}

@keyframes floatTriangle3 {
  0% { transform: translateY(0) rotate(90deg); }
  50% { transform: translateY(24px) rotate(100deg); }
  100% { transform: translateY(0) rotate(90deg); }
}

@keyframes floatTriangleConvaincu {
  0% { transform: translateY(0) rotate(6deg); }
  50% { transform: translateY(18px) rotate(14deg); }
  100% { transform: translateY(0) rotate(6deg); }
}

@keyframes floatTriangleConfiance {
  0% { transform: translateY(0) rotate(-6deg); }
  50% { transform: translateY(18px) rotate(-14deg); }
  100% { transform: translateY(0) rotate(-6deg); }
}

@keyframes floatTriangleFaq {
  0% { transform: translateY(0) rotate(12deg); }
  50% { transform: translateY(20px) rotate(20deg); }
  100% { transform: translateY(0) rotate(12deg); }
}

/* ==========================================================================
   Hero Section
   ========================================================================== */
.hero-section {
  position: relative;
  background: var(--bgGradientDeep);
  min-height: 100vh;
  display: flex;
  align-items: flex-end;
  padding: 100px 0 0 clamp(24px, 5vw, 64px);
  overflow: hidden;
  z-index: 20;
  border-bottom: 5px solid #ffffff;
}

/* Vidéo d'arrière-plan 16:9 de la page d'accueil (en boucle, muette, visible derrière le texte) */
.hero-video-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}

.hero-bg-video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  transform: translate(-50%, -50%);
  object-fit: cover;
  pointer-events: none;
  opacity: 0.85;
  filter: saturate(1.1) brightness(0.95);
}

.hero-video-overlay {
  position: absolute;
  inset: 0;
  background: 
    linear-gradient(90deg, rgba(2, 6, 20, 0.72) 0%, rgba(2, 6, 20, 0.4) 50%, rgba(2, 6, 20, 0.15) 100%),
    linear-gradient(180deg, rgba(2, 6, 20, 0.3) 0%, rgba(2, 6, 20, 0.58) 100%);
  z-index: 2;
  pointer-events: none;
}

/* Halos lumineux en fond */
.hero-section::after {
  content: '';
  position: absolute;
  top: 15%;
  right: 8%;
  width: 540px;
  height: 540px;
  background: radial-gradient(circle, rgba(0, 144, 255, 0.35) 0%, transparent 70%);
  filter: blur(80px);
  z-index: 2;
  pointer-events: none;
}

.hero-section > .triangle-float {
  z-index: 3;
}

.hero-grid {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: calc(100vh - 100px);
  position: relative;
  z-index: 4;
}

.hero-text {
  flex: 0 0 auto;
  width: auto;
  max-width: 760px;
  margin-left: clamp(50px, 10vw, 160px);
  padding-top: 15px;
  padding-bottom: 40px;
  padding-right: 0;
  text-align: center;
  z-index: 5;
  position: relative;
}

.hero-title {
  font-size: clamp(2rem, 3.4vw, 4.4rem);
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: -0.02em;
  max-width: 700px;
  margin: 0 auto 22px;
  color: #ffffff;
  text-align: center;
  width: 100%;
  text-shadow: 0 4px 22px rgba(0, 0, 0, 0.8), 0 2px 6px rgba(0, 0, 0, 0.95);
}

.hero-title-line {
  display: block;
  text-align: center;
  width: 100%;
  white-space: nowrap;
}

.hero-title-mobile-break {
  display: none;
}

.hero-title .highlight {
  font-size: 1.15em;
  display: inline-block;
  padding-right: 6px;
  text-shadow: 0 0 25px var(--yellowGlow);
}

.hero-subtitle {
  font-size: clamp(1.02rem, 1.18vw, 1.25rem);
  font-weight: 300;
  line-height: 1.38;
  color: rgba(255, 255, 255, 0.95);
  max-width: 700px;
  margin: 0 auto 22px;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.85);
}

.hero-subtitle-line {
  display: block;
}

.hero-cta-group {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 20px;
}

.cta-secondary-wrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
}

/* Troisième triangle flottant derrière le bouton découvrir mes projets */
.triangle-behind-cta {
  position: absolute;
  width: 28rem;
  top: 105px;
  left: -110px;
  z-index: -1;
  pointer-events: none;
  opacity: 0.85;
  filter: drop-shadow(0 16px 32px rgba(0, 0, 0, 0.35));
  animation: floatTriangleCta 5.2s ease-in-out infinite;
  will-change: transform;
}

@keyframes floatTriangleCta {
  0% { transform: translateY(0) rotate(15deg); }
  50% { transform: translateY(-18px) rotate(24deg); }
  100% { transform: translateY(0) rotate(15deg); }
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--textColor);
  font-size: 1.05rem;
  font-weight: 600;
  padding: 15px 30px;
  border-radius: var(--radiusPill);
  border: 1.5px solid rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: all var(--transitionFast);
}

.btn-secondary:hover {
  border-color: var(--yellowColor);
  color: var(--yellowColor);
  transform: translateY(-2px);
  background: rgba(255, 237, 0, 0.08);
}



/* Badge Statut "Disponible" centré sous les boutons Hero */
.availability-status-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 24px;
  width: 100%;
}

.availability-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background-color: #0b2217;
  border: 1.2px solid #13553e;
  padding: 4px 15px 4px 6px;
  border-radius: 9999px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(52, 211, 153, 0.12);
  user-select: none;
  transition: transform var(--transitionFast), border-color var(--transitionFast), box-shadow var(--transitionFast);
}

.availability-badge:hover {
  border-color: #1eb87d;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4), 0 0 12px rgba(18, 185, 129, 0.22);
  transform: translateY(-1px);
}

.availability-dot-container {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #143525;
}

.availability-dot-halo {
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  background: rgba(18, 185, 129, 0.35);
  animation: pulseAvailabilityHalo 2.5s ease-out infinite;
}

.availability-dot {
  position: relative;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #12b981;
  box-shadow: 0 0 6px #12b981, 0 0 3px #34d399;
}

.availability-text {
  color: #34d399;
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  font-family: var(--fontFamily), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  line-height: 1;
}

@keyframes pulseAvailabilityHalo {
  0% {
    transform: scale(0.85);
    opacity: 0.85;
  }
  50% {
    transform: scale(1.22);
    opacity: 0.25;
  }
  100% {
    transform: scale(0.85);
    opacity: 0.85;
  }
}

/* Image Hero d'Émilien - Format idéal, légèrement réduit et collé au bas du header */
.hero-image-wrapper {
  position: absolute;
  right: clamp(50px, 6.2vw, 125px);
  bottom: 0;
  width: 48vw;
  max-width: 710px;
  height: calc(100vh - 70px);
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  pointer-events: none;
  z-index: 4;
}

.hero-portrait {
  width: auto;
  height: 112%;
  max-width: none;
  object-fit: contain;
  display: block;
  transform: translateY(22.7%);
  filter: drop-shadow(0 20px 45px rgba(0, 0, 0, 0.45));
  animation: animHeroPortrait 1.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  will-change: transform, opacity;
}

@keyframes animHeroPortrait {
  0% {
    opacity: 0;
    transform: translateX(110px) translateY(22.7%);
  }
  100% {
    opacity: 1;
    transform: translateX(0) translateY(22.7%);
  }
}


/* ==========================================================================
   Mini-blocs statistiques intégrés dans le Header (sous le badge Disponible)
   ========================================================================== */
.hero-mini-stats {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 14px;
  margin: 0 auto 28px;
  width: 100%;
  max-width: 680px;
}

.hero-mini-stat-card {
  flex: 1 1 0;
  min-width: 0;
  background: linear-gradient(135deg, rgba(0, 144, 255, 0.28) 0%, rgba(0, 110, 230, 0.16) 100%);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(0, 144, 255, 0.35);
  border-radius: 14px;
  padding: 11px 12px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35), inset 0 1px 1px rgba(255, 255, 255, 0.25);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.3s ease,
              background 0.3s ease,
              border-color 0.3s ease;
  user-select: none;
}

.hero-mini-stat-card:hover {
  transform: translateY(-3px) scale(1.02);
  background: linear-gradient(135deg, rgba(0, 144, 255, 0.45) 0%, rgba(0, 110, 230, 0.28) 100%);
  border-color: rgba(0, 144, 255, 0.65);
  box-shadow: 0 12px 30px rgba(0, 144, 255, 0.35), 0 0 14px rgba(0, 144, 255, 0.2);
}

.hero-mini-stat-num {
  font-family: var(--fontDisplay);
  font-size: clamp(1.05rem, 1.4vw, 1.32rem);
  font-weight: 800;
  line-height: 1.2;
  color: var(--yellowColor, #ffed00);
  letter-spacing: -0.02em;
  text-shadow: 0 0 16px rgba(255, 237, 0, 0.45), 0 2px 8px rgba(0, 20, 70, 0.5);
  white-space: nowrap;
}

.hero-mini-stat-card:hover .hero-mini-stat-num {
  text-shadow: 0 0 22px rgba(255, 237, 0, 0.75), 0 2px 8px rgba(0, 20, 70, 0.6);
}

.hero-mini-stat-label {
  font-size: clamp(0.7rem, 0.85vw, 0.82rem);
  font-weight: 600;
  color: rgba(255, 255, 255, 0.92);
  line-height: 1.2;
  margin-top: 3px;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

@media (max-width: 640px) {
  .hero-mini-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin: 18px auto 26px;
    width: 100%;
    max-width: 480px;
    padding: 0 4px;
  }

  .hero-mini-stat-card {
    padding: 10px 4px 8px;
    border-radius: 12px;
    min-width: 0;
  }

  .hero-mini-stat-num {
    font-size: clamp(0.92rem, 3.6vw, 1.15rem);
    white-space: nowrap;
    text-align: center;
    line-height: 1.15;
  }

  .hero-mini-stat-label {
    font-size: clamp(0.6rem, 2.2vw, 0.72rem);
    white-space: normal;
    text-align: center;
    line-height: 1.25;
    word-break: normal;
  }
}

@media (max-width: 360px) {
  .hero-mini-stats {
    gap: 5px;
  }

  .hero-mini-stat-card {
    padding: 8px 3px 6px;
  }

  .hero-mini-stat-num {
    font-size: 0.85rem;
  }

  .hero-mini-stat-label {
    font-size: 0.58rem;
  }
}

/* ==========================================================================
   Section Accueil & Processus (« Comment on procède ? »)
   ========================================================================== */
.accueil-section {
  position: relative;
  background: var(--bgGradient);
  padding: 0;
  margin-top: 0;
  z-index: 5;
}

.cta-banner {
  text-align: center;
  padding: 0 24px;
  margin-top: 30px;
  margin-bottom: 20px;
}

.cta-banner h2 {
  font-size: clamp(2.2rem, 3.5vw, 3.4rem);
  font-weight: 800;
  color: var(--textColor);
  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
  margin-bottom: 24px;
}

.section-title {
  color: var(--textColor);
  font-size: clamp(2rem, 3vw, 2.8rem);
  font-weight: 800;
  text-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
  margin-bottom: 48px;
  text-align: center;
}

/* ==========================================================================
   Section « Comment on procède ? » — Design Premium Apple & Awwwards
   ========================================================================== */
.process-container {
  max-width: 1400px;
  margin: 0 auto 100px;
  padding: clamp(120px, 12vw, 180px) 24px 0;
  position: relative;
}

.process-header-box {
  text-align: center;
  max-width: 800px;
  margin: 0 auto 52px;
}

.process-pre-title {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--yellowColor);
  background: rgba(255, 237, 0, 0.1);
  border: 1px solid rgba(255, 237, 0, 0.28);
  padding: 6px 18px;
  border-radius: var(--radiusPill);
  margin-bottom: 16px;
  box-shadow: 0 0 16px rgba(255, 237, 0, 0.15);
}

.process-title {
  color: var(--textColor);
  font-size: clamp(2.2rem, 3.8vw, 3.4rem);
  font-weight: 800;
  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
  margin-bottom: 16px;
  line-height: 1.2;
}

.process-title .highlight {
  font-family: var(--fontDisplay);
  color: var(--yellowColor);
  font-weight: 400;
  text-shadow: 0 0 20px var(--yellowGlow);
  padding-left: 6px;
}

.process-subtitle {
  color: var(--textMuted);
  font-size: clamp(0.98rem, 1.35vw, 1.12rem);
  line-height: 1.65;
  margin: 0 auto;
}

.process-carousel-wrapper {
  position: relative;
  width: 100%;
}

.process-carousel-nav {
  display: none;
}

.process-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
  position: relative;
}

/* Ligne de flux directrice reliant les étapes sur grand écran */
.process-grid::before {
  content: '';
  position: absolute;
  top: 52px;
  left: 60px;
  right: 60px;
  height: 2px;
  background: linear-gradient(90deg, rgba(255, 237, 0, 0.12) 0%, rgba(255, 255, 255, 0.22) 50%, rgba(255, 237, 0, 0.12) 100%);
  z-index: 0;
  pointer-events: none;
}

.process-card {
  position: relative;
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.09) 0%, rgba(255, 255, 255, 0.02) 100%);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 22px;
  padding: 26px 20px 28px;
  display: flex;
  flex-direction: column;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 14px 32px -6px rgba(0, 15, 45, 0.4), inset 0 1px 1px 0 rgba(255, 255, 255, 0.25);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.35s ease,
              background 0.35s ease,
              box-shadow 0.35s ease;
  overflow: hidden;
  z-index: 1;
}

/* Ligne supérieure lumineuse sur chaque carte */
.process-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transition: background 0.35s ease, box-shadow 0.35s ease;
}

.process-card:hover {
  transform: translateY(-8px);
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.04) 100%);
  border-color: rgba(255, 237, 0, 0.45);
  box-shadow: 0 24px 48px -8px rgba(0, 10, 30, 0.55), 0 0 28px rgba(255, 237, 0, 0.14);
}

.process-card:hover::before {
  background: linear-gradient(90deg, transparent, var(--yellowColor), transparent);
  box-shadow: 0 0 14px var(--yellowColor);
}

/* Numéro géant en filigrane pour donner du relief et de la profondeur */
.process-watermark-num {
  position: absolute;
  bottom: 8px;
  right: 14px;
  font-family: var(--fontDisplay);
  font-size: 4.8rem;
  font-weight: 800;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.12);
  pointer-events: none;
  user-select: none;
  transition: -webkit-text-stroke 0.4s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 0;
}

.process-card:hover .process-watermark-num {
  -webkit-text-stroke: 1.5px rgba(255, 237, 0, 0.35);
  transform: translateY(-4px) scale(1.05);
}

.process-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  position: relative;
  z-index: 1;
}

/* Boîte d'icône avec effet verre poli */
.process-icon-box {
  width: 52px;
  height: 52px;
  border-radius: 15px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.05) 100%);
  border: 1.5px solid rgba(255, 255, 255, 0.28);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
              border-color 0.3s ease,
              box-shadow 0.3s ease,
              background 0.3s ease;
  flex-shrink: 0;
}

.process-card:hover .process-icon-box {
  transform: scale(1.1) translateY(-2px);
  border-color: rgba(255, 237, 0, 0.6);
  background: linear-gradient(135deg, rgba(255, 237, 0, 0.22) 0%, rgba(255, 255, 255, 0.08) 100%);
  box-shadow: 0 10px 24px rgba(255, 237, 0, 0.28);
}

/* Icônes blanches pures comme demandé */
.process-icon {
  width: 24px;
  height: 24px;
  filter: brightness(0) invert(1) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.35));
  display: block;
  object-fit: contain;
  transition: transform 0.3s ease, filter 0.3s ease;
  will-change: transform;
}

/* 1. Animation Téléphone : Vibre et sonne joyeusement au survol */
.process-card:hover .process-icon-phone,
.process-icon-box:hover .process-icon-phone {
  animation: animPhoneVibrate 0.65s ease-in-out infinite;
  transform-origin: center center;
}

@keyframes animPhoneVibrate {
  0% { transform: scale(1.06) rotate(0deg); }
  15% { transform: scale(1.18) rotate(-16deg); }
  30% { transform: scale(1.18) rotate(16deg); }
  45% { transform: scale(1.18) rotate(-12deg); }
  60% { transform: scale(1.18) rotate(12deg); }
  75% { transform: scale(1.12) rotate(-6deg); }
  90% { transform: scale(1.08) rotate(6deg); }
  100% { transform: scale(1.06) rotate(0deg); }
}

/* 2. Animation Nuage Cloud : Flotte en apesanteur avec une légère lueur */
.process-card:hover .process-icon-cloud,
.process-icon-box:hover .process-icon-cloud {
  animation: animCloudFloat 1.2s ease-in-out infinite;
  transform-origin: center center;
}

@keyframes animCloudFloat {
  0%, 100% {
    transform: translateY(0) scale(1.06);
    filter: brightness(0) invert(1) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.35));
  }
  50% {
    transform: translateY(-5px) scale(1.15);
    filter: brightness(0) invert(1) drop-shadow(0 6px 12px rgba(255, 237, 0, 0.45));
  }
}

/* 3. Animation Laptop : Léger rebond d'ouverture / pulsation de travail */
.process-card:hover .process-icon-laptop,
.process-icon-box:hover .process-icon-laptop {
  animation: animLaptopPulse 0.85s cubic-bezier(0.34, 1.56, 0.64, 1) infinite alternate;
  transform-origin: bottom center;
}

@keyframes animLaptopPulse {
  0% {
    transform: scale(1.06) translateY(0);
  }
  100% {
    transform: scale(1.2) translateY(-4px);
    filter: brightness(0) invert(1) drop-shadow(0 4px 10px rgba(255, 237, 0, 0.5));
  }
}

/* 4. Animation Recyclage : Rotation fluide à 360° évoquant les révisions et cycles */
.process-card:hover .process-icon-recycle,
.process-icon-box:hover .process-icon-recycle {
  animation: animRecycleSpin 1.3s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  transform-origin: center center;
}

@keyframes animRecycleSpin {
  0% {
    transform: scale(1.06) rotate(0deg);
  }
  50% {
    transform: scale(1.18) rotate(180deg);
  }
  100% {
    transform: scale(1.06) rotate(360deg);
  }
}

/* 5. Animation Camion : Déplacement dynamique vers l'avant avec rebond de suspension */
.process-card:hover .process-icon-truck,
.process-icon-box:hover .process-icon-truck {
  animation: animTruckDrive 0.8s ease-in-out infinite;
  transform-origin: center bottom;
}

@keyframes animTruckDrive {
  0%, 100% {
    transform: translateX(0) translateY(0) scale(1.06) rotate(0deg);
  }
  25% {
    transform: translateX(4px) translateY(-3px) scale(1.12) rotate(-3deg);
  }
  50% {
    transform: translateX(7px) translateY(1px) scale(1.1) rotate(2deg);
  }
  75% {
    transform: translateX(4px) translateY(-2px) scale(1.12) rotate(-1deg);
  }
}

/* Badge Étape */
.process-step-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 11px;
  border-radius: var(--radiusPill);
  background: rgba(255, 237, 0, 0.12);
  border: 1px solid rgba(255, 237, 0, 0.35);
  color: var(--yellowColor);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.process-card:hover .process-step-badge {
  background: var(--yellowColor);
  color: #00224f;
  border-color: var(--yellowColor);
  box-shadow: 0 0 12px rgba(255, 237, 0, 0.5);
}

.process-card-content {
  position: relative;
  z-index: 1;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.process-card-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 10px;
  line-height: 1.35;
  letter-spacing: -0.01em;
}

.process-card-text {
  font-size: 0.91rem;
  color: rgba(230, 242, 255, 0.82);
  line-height: 1.62;
  font-weight: 400;
  margin: 0;
}

/* Responsive pour les 5 étapes */
@media (max-width: 1200px) and (min-width: 860px) {
  .process-grid {
    grid-template-columns: repeat(6, 1fr);
    gap: 18px;
  }
  .process-grid::before {
    display: none;
  }
  .process-card:nth-child(1),
  .process-card:nth-child(2),
  .process-card:nth-child(3) {
    grid-column: span 2;
  }
  .process-card:nth-child(4) {
    grid-column: 2 / span 2;
  }
  .process-card:nth-child(5) {
    grid-column: 4 / span 2;
  }
}

@media (max-width: 859px) and (min-width: 601px) {
  .process-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
  .process-grid::before {
    display: none;
  }
  .process-card:nth-child(5) {
    grid-column: span 2;
    max-width: 480px;
    margin: 0 auto;
    width: 100%;
  }
}

@media (max-width: 600px) {
  .process-container {
    padding: clamp(65px, 15vw, 95px) 16px 0;
    margin-bottom: 70px;
  }
  .process-header-box {
    margin-bottom: 32px;
  }
  .process-title {
    font-size: clamp(0.92rem, 4.4vw, 1.65rem);
    line-height: 1.2;
    letter-spacing: -0.012em;
    white-space: nowrap;
  }

  .process-carousel-wrapper {
    position: relative;
    width: 100%;
    margin: 0 auto;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .process-grid {
    display: flex !important;
    flex-direction: row !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    scroll-behavior: smooth !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    gap: 16px !important;
    padding: 20px 0 36px !important;
    margin: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .process-grid::-webkit-scrollbar {
    display: none !important;
  }

  .process-grid::before {
    display: none !important;
  }

  .process-card,
  .process-card:nth-child(1),
  .process-card:nth-child(2),
  .process-card:nth-child(3),
  .process-card:nth-child(4),
  .process-card:nth-child(5) {
    grid-column: auto !important;
    flex: 0 0 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    scroll-snap-align: center !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 24px 20px !important;
    box-shadow: 0 10px 28px -4px rgba(0, 15, 45, 0.45), 0 3px 10px rgba(0, 0, 0, 0.22), inset 0 1px 1px 0 rgba(255, 255, 255, 0.25) !important;
  }

  .process-watermark-num {
    font-size: 3.6rem;
    bottom: 6px;
    right: 12px;
  }

  .process-carousel-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-top: 14px;
    width: 100%;
    z-index: 10;
    position: relative;
  }

  .process-arrow {
    position: relative;
    transform: none;
    width: 42px;
    height: 42px;
    min-width: 42px;
    min-height: 42px;
    border-radius: 50%;
    background: rgba(0, 47, 109, 0.95);
    border: 1.5px solid var(--yellowColor);
    color: var(--yellowColor);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    -webkit-user-select: none;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35), 0 0 10px rgba(255, 237, 0, 0.25);
    transition: transform 0.2s ease, background 0.2s ease;
  }

  .process-arrow svg {
    pointer-events: none;
  }

  .process-arrow:active {
    transform: scale(0.92);
  }

  .process-dots {
    display: flex;
    align-items: center;
    gap: 8px;
    user-select: none;
  }

  .process-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.25);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    cursor: pointer;
    touch-action: manipulation;
  }

  .process-dot.active {
    width: 22px;
    border-radius: 4px;
    background: var(--yellowColor);
    box-shadow: 0 0 8px var(--yellowGlow);
  }
}

/* ==========================================================================
   Carrousel Partenaires & Témoignages
   ========================================================================== */
.social-proof-section {
  position: relative;
  margin: 80px 0;
}

/* Carrousel avec cartes blanches & photos rondes : "Ils m'ont fait confiance !" */
.partners-title {
  color: #ffffff;
  font-size: clamp(2.3rem, 3.6vw, 3.6rem);
  font-weight: 800;
  text-align: center;
  margin-bottom: 42px;
  text-shadow: 0 0 16px rgba(0, 0, 0, 0.45);
}

.partners-title .highlight {
  font-family: var(--fontDisplay);
  color: var(--yellowColor);
  font-weight: 400;
  text-shadow: 0 0 20px var(--yellowGlow);
  padding-left: 8px;
}

.partners-carousel-wrapper {
  position: relative;
  max-width: 1120px;
  margin: 0 auto 50px;
  width: 100%;
  display: flex;
  align-items: center;
}

.partners-grid-scroll {
  display: grid;
  gap: 36px;
  grid-auto-columns: calc(33.333% - 24px);
  grid-auto-flow: column;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding: 20px 4px;
  width: 100%;
}

.partners-grid-scroll::-webkit-scrollbar {
  display: none;
}

.partner-white-card {
  background: #ffffff;
  border-radius: 14px;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(0, 0, 0, 0.04);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 38px 20px 28px;
  scroll-snap-align: start;
  user-select: none;
  min-height: 320px;
}

.partner-circle-frame {
  width: 144px;
  height: 144px;
  border-radius: 50%;
  border: 3.5px solid #002d62;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #ffffff;
  margin-bottom: 20px;
  flex-shrink: 0;
}

.partner-circle-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.partner-circle-img.is-logo {
  object-fit: contain;
  padding: 16px;
  box-sizing: border-box;
}

.partner-white-card h3 {
  font-size: 1.35rem;
  font-weight: 700;
  color: #002b66;
  margin-bottom: 2px;
  line-height: 1.2;
  text-align: center;
}

.partner-white-card span {
  font-size: 1.05rem;
  font-weight: 500;
  color: #004b99;
  line-height: 1.2;
  margin-top: 0;
  text-align: center;
}

.partners-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #ffffff;
  border: none;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
  color: #002b66;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.partners-arrow:hover {
  background: #f4f8fc;
  transform: translateY(-50%) scale(1.08);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.38);
}

.partners-arrow:active {
  transform: translateY(-50%) scale(0.92);
}

.partners-arrow.prev {
  left: -22px;
}

.partners-arrow.next {
  right: -22px;
}

/* ==========================================================================
   Carrousel 3D Coverflow des vidéos avis clients
   ========================================================================== */
.reviews-title {
  color: #ffffff;
  font-size: clamp(2.3rem, 3.6vw, 3.6rem);
  font-weight: 800;
  text-align: center;
  margin-top: 10px;
  margin-bottom: 35px;
  text-shadow: 0 0 16px rgba(0, 0, 0, 0.45);
}

.reviews-title .highlight {
  font-family: var(--fontDisplay);
  color: var(--yellowColor);
  font-weight: 400;
  text-shadow: 0 0 20px var(--yellowGlow);
  padding-left: 8px;
}

.reviews-carousel-wrapper {
  width: 100%;
  max-width: 1160px;
  margin: 0 auto;
  padding: 10px 15px 35px;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.reviews-carousel-container {
  position: relative;
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
  padding: 0 45px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#reviews-container {
  position: relative;
  width: 100%;
  max-width: 720px;
  aspect-ratio: 16 / 9;
  perspective: 1200px;
  -webkit-perspective: 1200px;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  outline: none;
}

.review-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: transform 0.65s cubic-bezier(0.22, 1, 0.36, 1),
              opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1),
              filter 0.65s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform, opacity, filter;
  border-radius: 20px;
  user-select: none;
}

/* Slide centrale active (nette, au premier plan) */
.review-slide.is-active {
  transform: translate3d(0, 0, 0) scale(1) rotateY(0deg);
  opacity: 1;
  filter: blur(0px);
  z-index: 10;
  cursor: default;
  pointer-events: auto;
}

.review-slide.is-active .review-video-frame {
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
}

/* Slide précédente à gauche (réduite, en arrière-plan avec flou & inclinaison 3D) */
.review-slide.is-prev {
  transform: translate3d(-36%, 0, -120px) scale(0.82) rotateY(15deg);
  opacity: 0.55;
  filter: blur(4px);
  z-index: 4;
  cursor: pointer;
  pointer-events: auto;
}

.review-slide.is-prev:hover {
  opacity: 0.78;
  filter: blur(2px);
  transform: translate3d(-34%, 0, -80px) scale(0.85) rotateY(10deg);
}

.review-slide.is-prev video,
.review-slide.is-next video {
  pointer-events: none;
}

/* Slide suivante à droite (réduite, en arrière-plan avec flou & inclinaison 3D) */
.review-slide.is-next {
  transform: translate3d(36%, 0, -120px) scale(0.82) rotateY(-15deg);
  opacity: 0.55;
  filter: blur(4px);
  z-index: 4;
  cursor: pointer;
  pointer-events: auto;
}

.review-slide.is-next:hover {
  opacity: 0.78;
  filter: blur(2px);
  transform: translate3d(34%, 0, -80px) scale(0.85) rotateY(-10deg);
}

/* Autres slides masquées en arrière-plan */
.review-slide.is-hidden {
  transform: translate3d(0, 0, -260px) scale(0.65);
  opacity: 0;
  filter: blur(10px);
  z-index: 1;
  pointer-events: none;
}

.review-video-frame {
  background: #000;
  border: 4px solid #ffffff;
  border-radius: 20px;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.35);
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 100%;
  transition: box-shadow 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}

.review-slide.is-active .review-video-frame {
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
}

.review-video-frame video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border-radius: 16px;
  background: #000;
  cursor: pointer;
}

/* Bouton central Play interactif sur les vidéos d'avis clients */
.review-center-play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: transparent;
  border: none;
  cursor: pointer;
  z-index: 12;
  padding: 0;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  -webkit-user-select: none;
  user-select: none;
}

.play-btn-circle {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: var(--secondColor, #0090ff);
  border: 2.5px solid var(--yellowColor, #ffed00);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: var(--yellowColor, #ffed00);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4), 0 0 25px rgba(0, 144, 255, 0.5);
  position: relative;
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1),
              background 0.28s ease,
              box-shadow 0.28s ease,
              color 0.28s ease;
}

.play-btn-circle svg {
  width: 28px;
  height: 28px;
  display: block;
  margin-left: 3px;
}

/* Onde de pulsation lumineuse animée autour du bouton */
.play-btn-pulse-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 70px;
  height: 70px;
  margin-top: -35px;
  margin-left: -35px;
  border-radius: 50%;
  border: 2px solid rgba(255, 237, 0, 0.75);
  animation: reviewPlayPulse 2.4s cubic-bezier(0.22, 1, 0.36, 1) infinite;
  pointer-events: none;
}

@keyframes reviewPlayPulse {
  0% {
    transform: scale(0.95);
    opacity: 0.9;
  }
  60% {
    transform: scale(1.65);
    opacity: 0;
  }
  100% {
    transform: scale(1.65);
    opacity: 0;
  }
}

/* Label textuel invitant sous le bouton */
.play-btn-label {
  background: var(--secondColor, #0090ff);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: var(--radiusPill, 9999px);
  padding: 6px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35), 0 2px 14px rgba(0, 144, 255, 0.4);
  pointer-events: none;
  transition: transform 0.25s ease, background 0.25s ease;
}

.play-btn-text {
  color: #ffffff;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.3px;
  white-space: nowrap;
  text-shadow: 0 1px 3px rgba(0, 30, 80, 0.35);
}

.play-btn-author {
  color: var(--yellowColor, #ffed00);
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
  text-shadow: 0 1px 3px rgba(0, 30, 80, 0.4);
}

/* Badge aperçu muet en haut à gauche */
.video-preview-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background: var(--secondColor, #0090ff);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: var(--radiusPill, 9999px);
  padding: 4px 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  font-weight: 600;
  color: #ffffff;
  z-index: 11;
  pointer-events: none;
  transition: opacity 0.35s ease;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}

.preview-dot-pulse {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ffed00;
  box-shadow: 0 0 8px #ffed00;
  animation: previewDotBlink 1.6s ease-in-out infinite;
}

@keyframes previewDotBlink {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.85); }
}

/* Au survol du bouton Play */
.review-slide.is-active:hover .play-btn-circle,
.review-center-play-btn:hover .play-btn-circle {
  transform: scale(1.1);
  background: var(--yellowColor, #ffed00);
  color: #00224f;
  box-shadow: 0 12px 35px rgba(255, 237, 0, 0.6);
  border-color: #ffffff;
}

.review-slide.is-active:hover .play-btn-pulse-ring {
  border-color: #ffffff;
}

/* Quand la vidéo joue avec le son : masquage fluide du bouton central & badge */
.review-video-frame.is-playing-audio .review-center-play-btn {
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.8);
}

.review-video-frame.is-playing-audio .video-preview-badge {
  opacity: 0;
  pointer-events: none;
}

/* Slides inactives (gauche/droite) : bouton discret */
.review-slide:not(.is-active) .review-center-play-btn {
  opacity: 0.4;
  pointer-events: none;
}

.review-slide:not(.is-active) .play-btn-pulse-ring,
.review-slide:not(.is-active) .video-preview-badge {
  display: none;
}

.carousel-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 50px;
  height: 50px;
  background: #ffffff;
  border: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #002F6D;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.32);
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
  z-index: 25;
}

.carousel-nav-btn:hover {
  transform: translateY(-50%) scale(1.12);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  background: #ffffff;
  color: #001f4a;
}

.carousel-nav-btn:active {
  transform: translateY(-50%) scale(0.95);
}

.carousel-nav-btn.prev { left: 0; }
.carousel-nav-btn.next { right: 0; }

/* ==========================================================================
/* ==========================================================================
   Section Logos des marques partenaires (Banderoles animées infinies)
   Ligne 1 (Haut) : Défilement continu de la GAUCHE vers la DROITE (slide)
   Ligne 2 (Bas) : Défilement continu de la DROITE vers la GAUCHE (translation)
   Effet de fondu progressif aux extrémités gauche et droite (fade-out)
   ========================================================================== */
.brand-logos-container {
  width: 100%;
  max-width: 1400px;
  margin: 30px auto 75px;
  padding: 0 clamp(10px, 2vw, 30px);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 36px; /* Espace vertical élégant et respirant entre les deux banderoles */
  position: relative;
  overflow: hidden;
}

/* Lignes banderoles avec masque de fondu transparent sur les bords gauche et droite */
.brand-logos-row {
  display: flex;
  align-items: center;
  width: 100%;
  overflow: hidden;
  position: relative;
  box-sizing: border-box;
  padding: 8px 0;
  /* Fondu progressif parfait sur les bords gauche et droite */
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    rgba(0, 0, 0, 1) 9%,
    rgba(0, 0, 0, 1) 91%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0%,
    rgba(0, 0, 0, 1) 9%,
    rgba(0, 0, 0, 1) 91%,
    transparent 100%
  );
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  /* Stabilisation GPU WebKit / Safari : empêche la coupure ou la disparition des logos lors du scroll */
  transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  contain: paint;
  isolation: isolate;
}

.brand-logos-grid {
  display: flex;
  flex-direction: column;
  gap: 36px;
  width: 100%;
}

/* Piste de défilement continu infini */
.brand-logos-track {
  display: flex;
  align-items: center;
  width: max-content;
  gap: clamp(28px, 3.2vw, 48px); /* Espacement net, régulier et équitable entre chaque logo */
  will-change: transform;
  transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-perspective: 1000px;
  perspective: 1000px;
}

/* Ligne 1 (Haut) : translation continue de la GAUCHE vers la DROITE */
.brand-logos-track-right {
  animation: marqueeScrollRight 34s linear infinite;
  -webkit-animation: marqueeScrollRight 34s linear infinite;
}

/* Ligne 2 (Bas) : translation continue de la DROITE vers la GAUCHE */
.brand-logos-track-left {
  animation: marqueeScrollLeft 34s linear infinite;
  -webkit-animation: marqueeScrollLeft 34s linear infinite;
}

/* Pause au survol pour permettre l'examen attentif ou le clic */
.brand-logos-row:hover .brand-logos-track {
  animation-play-state: paused;
  -webkit-animation-play-state: paused;
}

/* Keyframes translation continue Gauche vers Droite */
@keyframes marqueeScrollRight {
  0% {
    transform: translate3d(-50%, 0, 0);
    -webkit-transform: translate3d(-50%, 0, 0);
  }
  100% {
    transform: translate3d(0%, 0, 0);
    -webkit-transform: translate3d(0%, 0, 0);
  }
}

@-webkit-keyframes marqueeScrollRight {
  0% {
    -webkit-transform: translate3d(-50%, 0, 0);
  }
  100% {
    -webkit-transform: translate3d(0%, 0, 0);
  }
}

/* Keyframes translation continue Droite vers Gauche */
@keyframes marqueeScrollLeft {
  0% {
    transform: translate3d(0%, 0, 0);
    -webkit-transform: translate3d(0%, 0, 0);
  }
  100% {
    transform: translate3d(-50%, 0, 0);
    -webkit-transform: translate3d(-50%, 0, 0);
  }
}

@-webkit-keyframes marqueeScrollLeft {
  0% {
    -webkit-transform: translate3d(0%, 0, 0);
  }
  100% {
    -webkit-transform: translate3d(-50%, 0, 0);
  }
}

.brand-logo-item {
  flex: 0 0 clamp(140px, 12vw, 180px);
  height: 96px; /* Hauteur généreuse pour accueillir les logos sans compression */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  box-sizing: border-box;
  transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transition: transform 0.28s cubic-bezier(0.25, 1, 0.5, 1);
}

.brand-logo-item:hover {
  transform: translateY(-4px) scale(1.06) translate3d(0, 0, 0);
  -webkit-transform: translateY(-4px) scale(1.06) translate3d(0, 0, 0);
}

/* Base uniforme de dimensions pour tout logo - Fichiers sources 100% blancs natifs */
.brand-logo-item img {
  max-width: 150px;
  max-height: 62px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  user-select: none;
  pointer-events: none;
  /* Logos en blanc pur natif haute définition : AUCUN filtre CSS requis (zéro bug Safari possible) */
  opacity: 0.85;
  transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transition: opacity 0.28s ease;
}

.brand-logo-item:hover img {
  opacity: 1;
}

/* ==========================================================================
   Harmonisation grand format (surface visuelle uniforme ~7000-7500 px²)
   Garantit que TOUS les logos possèdent exactement la même taille perçue
   ========================================================================== */

/* 1. Logos carrés et verticaux (calibrés pour une surface optique équilibrée) */
.brand-logo-yodels img,
.brand-logo-brand_yodels img,
.brand-logo-brand-yodels img {
  max-width: clamp(82px, 7.2vw, 92px);
  max-height: clamp(62px, 5.5vw, 70px);
}

.brand-logo-crous-strasbourg img,
.brand-logo-brand_crous_strasbourg img,
.brand-logo-brand-crous-strasbourg img {
  max-width: clamp(66px, 5.8vw, 72px);
  max-height: clamp(66px, 5.8vw, 72px);
}

.brand-logo-iut-lens img,
.brand-logo-brand_iut_lens img,
.brand-logo-brand-iut-lens img {
  max-width: clamp(68px, 6.2vw, 76px);
  max-height: clamp(74px, 6.8vw, 82px);
}

.brand-logo-opera-gx img,
.brand-logo-brand_opera_gx img,
.brand-logo-brand-opera-gx img {
  max-width: clamp(80px, 7.2vw, 88px);
  max-height: clamp(64px, 5.8vw, 72px);
}

/* 2. Logos de ratio intermédiaire (~2:1) */
.brand-logo-lotus img,
.brand-logo-brand_lotus img,
.brand-logo-brand-lotus img {
  max-width: clamp(120px, 10.5vw, 136px);
  max-height: clamp(54px, 5vw, 64px);
}

.brand-logo-saily img,
.brand-logo-brand_saily img,
.brand-logo-brand-saily img {
  max-width: clamp(120px, 10.5vw, 136px);
  max-height: clamp(52px, 4.8vw, 60px);
}

.brand-logo-universite-artois img,
.brand-logo-brand_universite_artois img,
.brand-logo-brand-universite-artois img {
  max-width: clamp(118px, 10.4vw, 136px);
  max-height: clamp(58px, 5.2vw, 70px);
}

/* 3. Logos allongés et wordmarks horizontaux (> 2.5:1) */
.brand-logo-pepite-france img,
.brand-logo-brand_pepite_france img,
.brand-logo-brand-pepite-france img {
  max-width: clamp(124px, 11vw, 138px);
  max-height: clamp(46px, 4.2vw, 52px);
}

.brand-logo-hellofresh img,
.brand-logo-brand_hellofresh img,
.brand-logo-brand-hellofresh img,
.brand-logo-hello-fresh img {
  max-width: clamp(128px, 11.5vw, 142px);
  max-height: clamp(42px, 3.8vw, 48px);
}

.brand-logo-fiverr img,
.brand-logo-brand_fiverr img,
.brand-logo-brand-fiverr img {
  max-width: clamp(130px, 11.8vw, 144px);
  max-height: clamp(40px, 3.6vw, 46px);
}

.brand-logo-holy img,
.brand-logo-brand_holy img,
.brand-logo-brand-holy img {
  max-width: clamp(132px, 12vw, 146px);
  max-height: clamp(38px, 3.5vw, 44px);
}

.brand-logo-revolut img,
.brand-logo-brand_revolut img,
.brand-logo-brand-revolut img {
  max-width: clamp(140px, 12.8vw, 154px);
  max-height: clamp(34px, 3.2vw, 38px);
}

.brand-logo-hubhouse img,
.brand-logo-brand_hubhouse img,
.brand-logo-brand-hubhouse img {
  max-width: clamp(124px, 11vw, 140px);
  max-height: clamp(40px, 3.6vw, 46px);
}

@media (max-width: 900px) {
  .brand-logos-container {
    gap: 24px;
    margin: 20px auto 55px;
  }
  .brand-logos-row {
    padding: 6px 0;
    -webkit-mask-image: linear-gradient(
      to right,
      transparent 0%,
      rgba(0, 0, 0, 1) 8%,
      rgba(0, 0, 0, 1) 92%,
      transparent 100%
    );
    mask-image: linear-gradient(
      to right,
      transparent 0%,
      rgba(0, 0, 0, 1) 8%,
      rgba(0, 0, 0, 1) 92%,
      transparent 100%
    );
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    contain: paint;
    isolation: isolate;
  }
  .brand-logos-track {
    gap: clamp(20px, 2.5vw, 32px);
  }
  .brand-logos-track-right {
    animation-duration: 28s;
  }
  .brand-logos-track-left {
    animation-duration: 28s;
  }
  .brand-logo-item {
    flex: 0 0 clamp(118px, 15vw, 140px);
    height: 72px;
  }
  .brand-logo-item img {
    max-width: 115px;
    max-height: 46px;
  }
}

@media (max-width: 480px) {
  .brand-logos-container {
    gap: 18px;
    margin: 15px auto 45px;
  }
  .brand-logo-item {
    flex: 0 0 110px;
    height: 58px;
  }
  .brand-logo-item img {
    max-width: 98px;
    max-height: 40px;
  }
}

/* Accessibilité : désactivation de l'animation si l'utilisateur l'a demandé dans son système */
@media (prefers-reduced-motion: reduce) {
  .brand-logos-track-right,
  .brand-logos-track-left {
    animation: none !important;
    transform: none !important;
  }
  .brand-logos-row {
    overflow-x: auto;
    -webkit-mask-image: none;
    mask-image: none;
  }
}

@media (max-width: 540px) {
  .carousel-nav-btn.prev { left: -14px; }
  .carousel-nav-btn.next { right: -14px; }
}

/* ==========================================================================
   Section FAQ (Accordéon interactif accessible & animation ultra-smooth)
   ========================================================================== */
.faq-section {
  position: relative;
  max-width: 900px;
  margin: 100px auto 40px;
}

.faq-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.faq-item {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--glassBorder);
  border-radius: var(--radiusMd);
  overflow: hidden;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: background 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.faq-item.active,
.faq-item:hover {
  border-color: rgba(255, 214, 0, 0.7);
  background: rgba(255, 255, 255, 0.12);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 28px;
  text-align: left;
  font-size: 1.15rem;
  font-weight: 600;
  color: #ffffff;
  cursor: pointer;
  gap: 20px;
  background: transparent;
  border: none;
  transition: color 0.25s ease;
}

.faq-item.active .faq-question,
.faq-item:hover .faq-question {
  color: var(--yellowColor);
}

.faq-icon {
  font-size: 1.6rem;
  color: var(--yellowColor);
  line-height: 1;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  flex-shrink: 0;
}

.faq-item.active .faq-icon,
.faq-item:hover .faq-icon {
  transform: rotate(45deg);
}

/* Animation fluide d'ouverture basée sur CSS Grid 0fr -> 1fr */
.faq-answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.42s cubic-bezier(0.16, 1, 0.3, 1);
}

.faq-item.active .faq-answer,
.faq-item:hover .faq-answer {
  grid-template-rows: 1fr;
}

.faq-answer-inner {
  overflow: hidden;
  padding: 0 28px;
  transition: padding 0.42s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.38s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.42s cubic-bezier(0.16, 1, 0.3, 1);
  opacity: 0;
  transform: translateY(-6px);
}

.faq-item.active .faq-answer-inner,
.faq-item:hover .faq-answer-inner {
  padding: 0 28px 26px;
  opacity: 1;
  transform: translateY(0);
}

.faq-answer-inner p {
  color: var(--textMuted);
  font-size: 1.02rem;
  line-height: 1.68;
  margin: 0;
}

/* ==========================================================================
   Page « Vidéos » - Arrière-plan dégradé uniforme et continu sans rupture
   ========================================================================== */
.videos-page-main {
  background: var(--bgGradientDeep);
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.videos-page-main .section-bottom-wave {
  margin-top: auto;
  margin-bottom: 0;
  width: 100%;
  line-height: 0;
  display: block;
}

.projets-page-header {
  padding: 160px 8% 25px;
  text-align: center;
  background: transparent;
  position: relative;
}

.videos-page-main .projets-page-header {
  background: transparent;
}


.projets-title {
  font-size: clamp(2.2rem, 3.8vw, 3.8rem);
  font-weight: 800;
  line-height: 1.15;
  margin-bottom: 20px;
}

/* Titre Typographique de la page Publicité (Interlignes resserrés et compacts) */
.publicite-hero-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  margin-bottom: 20px;
  text-align: center;
}

.publicite-title-main {
  display: block;
  font-size: clamp(2.1rem, 3.8vw, 3.6rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.5px;
  color: #ffffff;
}

.publicite-title-amp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(0.95rem, 1.25vw, 1.2rem);
  font-weight: 700;
  line-height: 1;
  color: var(--yellowColor, #ffed00);
  opacity: 0.9;
  text-shadow: 0 0 16px var(--yellowGlow, rgba(255, 237, 0, 0.4));
  margin: -1px 0;
  letter-spacing: 1px;
}

.publicite-title-sub {
  display: block;
  font-size: clamp(2rem, 3.6vw, 3.4rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.5px;
  color: #ffffff;
}

/* Titre Typographique des pages Montage Vidéo, Motion Design & Tournage (En deux lignes) */
.montage-hero-title,
.motion-hero-title,
.tournage-hero-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin-bottom: 20px;
  text-align: center;
}

.montage-title-main,
.motion-title-main,
.tournage-title-main {
  display: block;
  font-size: clamp(2.2rem, 3.8vw, 3.6rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.5px;
  color: #ffffff;
}

.montage-title-sub,
.motion-title-sub,
.tournage-title-sub {
  display: block;
  font-size: clamp(1.7rem, 2.9vw, 2.7rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.3px;
  color: #ffffff;
}

.montage-title-sub .highlight,
.motion-title-sub .highlight,
.tournage-title-sub .highlight {
  color: var(--yellowColor, #ffed00);
  font-family: var(--fontDisplay);
  font-weight: 400;
  font-size: 1.15em;
  display: inline-block;
  letter-spacing: normal;
  text-shadow: 0 0 25px var(--yellowGlow, rgba(255, 237, 0, 0.45));
}

/* ==========================================================================
   Page « Vidéos » - Showcase Split-Screen & Slide Vertical
   ========================================================================== */
.creators-showcase-section {
  padding: 25px 4% 80px;
  max-width: 1480px;
  margin: 0 auto;
  width: 100%;
  background: transparent;
  position: relative;
  z-index: 2;
}

.creators-showcase-container {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 36px;
  align-items: start;
}

/* Colonne de gauche : Sidebar créateurs */
.creators-sidebar {
  background: var(--cardBg);
  border: 1.5px solid var(--glassBorder);
  border-radius: var(--radiusLg);
  padding: 24px;
  box-shadow: var(--shadowMd);
  position: sticky;
  top: 100px;
  max-height: calc(100vh - 120px);
  display: flex;
  flex-direction: column;
}

.sidebar-header {
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.sidebar-subtitle {
  display: block;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--yellowColor, #ffed00);
  margin-bottom: 4px;
}

.sidebar-title {
  font-size: 1.35rem;
  font-weight: 800;
  color: #ffffff;
}

/* Liste des rectangles interactifs */
.creators-selector-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
  padding-right: 4px;
}

.creators-selector-list::-webkit-scrollbar {
  width: 5px;
}
.creators-selector-list::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 4px;
}

/* Rectangle de sélection créateur */
.creator-selector-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.04);
  border: 1.5px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  cursor: pointer;
  text-align: left;
  transition: all 0.22s cubic-bezier(0.2, 0, 0.2, 1);
  position: relative;
  outline: none;
  user-select: none;
  color: inherit;
  width: 100%;
}

.creator-selector-card:hover {
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(255, 255, 255, 0.2);
  transform: translateX(4px);
}

.creator-selector-card:focus-visible {
  border-color: var(--yellowColor, #ffed00);
  box-shadow: 0 0 0 3px rgba(255, 237, 0, 0.3);
}

/* État actif du créateur sélectionné */
.creator-selector-card.active {
  background: linear-gradient(135deg, rgba(255, 237, 0, 0.12) 0%, rgba(255, 255, 255, 0.07) 100%);
  border-color: var(--yellowColor, #ffed00);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35), 0 0 16px rgba(255, 237, 0, 0.15);
  transform: translateX(6px);
}

.creator-selector-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(255, 255, 255, 0.18);
  flex-shrink: 0;
  transition: border-color 0.25s ease, transform 0.25s ease;
}

.creator-selector-card.active .creator-selector-avatar {
  border-color: var(--yellowColor, #ffed00);
  transform: scale(1.04);
}

.creator-selector-info {
  flex-grow: 1;
  min-width: 0;
}

.creator-selector-name {
  font-size: 1.05rem;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 4px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.creator-selector-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.creator-selector-subs {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--yellowColor, #ffed00);
}

.creator-selector-badge {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.1);
  padding: 2px 7px;
  border-radius: var(--radiusPill);
}

.creator-selector-arrow {
  color: rgba(255, 255, 255, 0.4);
  transition: transform 0.2s ease, color 0.2s ease;
}

.creator-selector-card.active .creator-selector-arrow {
  color: var(--yellowColor, #ffed00);
  transform: translateX(3px);
}

/* ==========================================================================
   Colonne de droite : Fenêtre d'affichage et Slide Vertical
   ========================================================================== */
.video-showcase-window {
  background: rgba(13, 17, 26, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1.5px solid rgba(255, 255, 255, 0.12);
  border-radius: 24px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
  padding: 30px;
  display: flex;
  flex-direction: column;
  position: relative;
  min-height: 640px;
}

/* En-tête de la fenêtre d'affichage */
.showcase-window-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 24px;
  margin-bottom: 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  flex-wrap: wrap;
}

.showcase-creator-meta {
  flex: 1;
  min-width: 260px;
}

.showcase-creator-badge-line {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.showcase-creator-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  padding: 4px 10px;
  border-radius: var(--radiusPill);
  background: rgba(255, 237, 0, 0.12);
  color: var(--yellowColor, #ffed00);
  border: 1px solid rgba(255, 237, 0, 0.3);
}

.showcase-creator-name {
  font-size: 1.6rem;
  font-weight: 800;
  color: #ffffff;
  margin: 0;
}


/* Barre de contrôles du slide vertical (Haut / Bas + Compteur) */
.showcase-slide-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255, 255, 255, 0.06);
  padding: 8px 16px;
  border-radius: var(--radiusPill);
  border: 1px solid rgba(255, 255, 255, 0.12);
  align-self: flex-start;
}

.slide-counter-badge {
  font-size: 0.85rem;
  font-weight: 700;
  color: #ffffff;
  min-width: 105px;
  text-align: center;
}

.slide-counter-badge strong {
  color: var(--yellowColor, #ffed00);
}

.vertical-slide-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.vertical-slide-btn:hover:not(:disabled) {
  background: var(--yellowColor, #ffed00);
  color: #00224f;
  border-color: var(--yellowColor, #ffed00);
  transform: scale(1.08);
}

.vertical-slide-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

/* ==========================================================================
   Conteneur Slide Vertical des Vidéos
   ========================================================================== */
.vertical-video-slider {
  display: flex;
  flex-direction: column;
  gap: 28px;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
  max-height: 560px;
  padding-right: 8px;
  border-radius: 16px;
}

.vertical-video-slider::-webkit-scrollbar {
  width: 6px;
}
.vertical-video-slider::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.04);
  border-radius: 6px;
}
.vertical-video-slider::-webkit-scrollbar-thumb {
  background: rgba(255, 237, 0, 0.4);
  border-radius: 6px;
}
.vertical-video-slider::-webkit-scrollbar-thumb:hover {
  background: var(--yellowColor, #ffed00);
}

/* Slide vidéo unitaire */
.vertical-video-slide {
  scroll-snap-align: start;
  scroll-snap-stop: always;
  background: #000000;
  border-radius: 18px;
  overflow: hidden;
  border: 1.5px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
  flex-shrink: 0;
  width: 100%;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.vertical-video-slide.is-in-view {
  border-color: rgba(255, 237, 0, 0.4);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6), 0 0 20px rgba(255, 237, 0, 0.15);
}

.video-slide-player-wrap {
  aspect-ratio: 16 / 9;
  width: 100%;
  background: #000000;
  position: relative;
}

.video-slide-player-wrap iframe,
.video-slide-player-wrap video {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
  object-fit: contain;
  background: #000000;
}

.video-slide-info-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  background: rgba(18, 22, 33, 0.96);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.video-slide-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: #ffffff;
  display: flex;
  align-items: center;
  gap: 8px;
}

.video-slide-badge {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--yellowColor, #ffed00);
  background: rgba(255, 237, 0, 0.12);
  padding: 3px 8px;
  border-radius: var(--radiusPill);
  border: 1px solid rgba(255, 237, 0, 0.25);
}

/* Lecteur Audio Custom */
.custom-audio-player {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--radiusPill);
  padding: 6px 16px;
  margin-top: 6px;
}

.audio-play-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--yellowColor, #ffed00);
  color: #00224f;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform var(--transitionFast);
}

.audio-play-btn:hover {
  transform: scale(1.1);
}

.audio-progress-bar {
  width: 120px;
  height: 5px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 3px;
  position: relative;
  cursor: pointer;
  overflow: hidden;
}

.audio-progress-fill {
  height: 100%;
  width: 0%;
  background: var(--yellowColor, #ffed00);
  border-radius: 3px;
  transition: width 0.1s linear;
}

.audio-label {
  font-size: 0.8rem;
  color: #fff;
  font-weight: 600;
}

/* Responsiveness Split-Screen */
@media (max-width: 992px) {
  .creators-showcase-container {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .creators-sidebar {
    position: static;
    max-height: none;
    padding: 18px;
  }

  .creators-selector-list {
    flex-direction: row;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 14px;
    padding-bottom: 12px;
    -webkit-overflow-scrolling: touch;
  }

  .creator-selector-card {
    width: 270px !important;
    min-width: 270px;
    max-width: 270px;
    scroll-snap-align: start;
    flex-shrink: 0;
  }

  .creator-selector-card:hover,
  .creator-selector-card.active {
    transform: none;
  }


  .video-showcase-window {
    padding: 20px;
    min-height: auto;
  }
}

@media (max-width: 580px) {
  .creator-selector-card {
    min-width: 230px;
    padding: 12px 14px;
  }

  .creator-selector-avatar {
    width: 48px;
    height: 48px;
  }

  .showcase-window-header {
    flex-direction: column;
    align-items: stretch;
  }

  .showcase-slide-controls {
    align-self: stretch;
    justify-content: space-between;
  }

  .vertical-video-slider {
    max-height: 440px;
  }
}


/* ==========================================================================
   Showcase Motion Design & Animations (Style Split-Screen Créateurs)
   ========================================================================== */
.motion-showcase-section {
  padding: 50px 4% 80px;
  max-width: 1480px;
  margin: 0 auto;
  width: 100%;
  background: transparent;
  position: relative;
  z-index: 2;
}

.motion-section-header {
  text-align: center;
  margin-bottom: 36px;
}

.section-tag,
.service-tag,
.photos-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: rgba(255, 237, 0, 0.12);
  color: var(--yellowColor, #ffed00);
  border: 1px solid rgba(255, 237, 0, 0.35);
  padding: 6px 16px;
  border-radius: var(--radiusPill, 9999px);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 18px;
  box-shadow: 0 0 15px rgba(255, 237, 0, 0.08);
  transition: all 0.25s ease;
}

.section-tag:hover,
.service-tag:hover,
.photos-tag:hover {
  background: rgba(255, 237, 0, 0.18);
  border-color: rgba(255, 237, 0, 0.55);
  box-shadow: 0 0 20px rgba(255, 237, 0, 0.2);
}

.section-tag svg,
.service-tag svg,
.photos-tag svg {
  color: var(--yellowColor, #ffed00);
  stroke: currentColor;
  flex-shrink: 0;
}

.motion-section-header .section-title {
  margin-bottom: 12px;
}

.motion-card-number-badge {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(0, 47, 109, 0.7) 0%, rgba(0, 144, 255, 0.25) 100%);
  border: 2px solid rgba(255, 255, 255, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--fontDisplay, 'Poppins');
  font-size: 1rem;
  font-weight: 800;
  color: var(--yellowColor, #ffed00);
  flex-shrink: 0;
  transition: all 0.25s ease;
}

.creator-selector-card.active .motion-card-number-badge {
  border-color: var(--yellowColor, #ffed00);
  background: linear-gradient(135deg, rgba(255, 237, 0, 0.25) 0%, rgba(0, 47, 109, 0.85) 100%);
  transform: scale(1.05);
  box-shadow: 0 0 14px rgba(255, 237, 0, 0.35);
}

.motion-sidebar {
  max-height: calc(100vh - 120px);
}

.motion-selector-list {
  max-height: calc(100vh - 220px);
  overflow-y: auto;
  padding-right: 6px;
}

.motion-selector-list::-webkit-scrollbar {
  width: 5px;
}
.motion-selector-list::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.04);
  border-radius: 4px;
}
.motion-selector-list::-webkit-scrollbar-thumb {
  background: rgba(255, 237, 0, 0.35);
  border-radius: 4px;
}
.motion-selector-list::-webkit-scrollbar-thumb:hover {
  background: var(--yellowColor, #ffed00);
}

/* Grille de Vidéos Motion & Personnelles */
.video-grid-section {
  padding: 60px 0 0;
  background: transparent;
  position: relative;
  z-index: 2;
}

.video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 24px;
  max-width: 1400px;
  margin: 30px auto 40px;
  padding: 0 24px;
}

.video-grid-item {
  border-radius: var(--radiusMd);
  overflow: hidden;
  background: #000;
  border: 2px solid rgba(255, 255, 255, 0.2);
  box-shadow: var(--shadowSm);
  transition: transform var(--transitionNormal), border-color var(--transitionNormal);
}

.video-grid-item:hover {
  transform: translateY(-4px);
  border-color: var(--yellowColor);
  box-shadow: var(--shadowMd);
}

.video-grid-item video {
  width: 100%;
  aspect-ratio: 16/9;
  display: block;
}

/* ==========================================================================
   Page « Contact »
   ========================================================================== */
.contact-page-container {
  min-height: 100vh;
  padding: 160px 0 0;
  background: var(--bgGradient);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.contact-card-box {
  background: transparent;
  border: none;
  border-radius: var(--radiusLg);
  padding: 0 24px 60px;
  width: 100%;
  max-width: 760px;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.contact-header {
  text-align: center;
  margin-bottom: 36px;
}

.contact-header h1 {
  font-size: clamp(2.2rem, 3.5vw, 3rem);
  font-weight: 800;
  margin-bottom: 12px;
}

.contact-header p,
.contact-subtitle {
  color: var(--textMuted);
  font-size: 1.1rem;
}

.contact-subtitle-line {
  display: block;
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.form-group-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form-field label {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--textColor);
}

.form-input,
.form-textarea {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.55) 0%, rgba(230, 238, 250, 0.45) 50%, rgba(255, 255, 255, 0.52) 100%);
  border: 1.5px solid rgba(255, 255, 255, 0.65);
  border-radius: var(--radiusSm);
  color: #00224d;
  font-size: 1rem;
  font-weight: 500;
  padding: 14px 18px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.5), 0 4px 14px rgba(0, 20, 50, 0.12);
  transition: all var(--transitionFast);
}

.form-input::placeholder,
.form-textarea::placeholder {
  color: rgba(0, 35, 75, 0.6);
  font-weight: 400;
}

.form-input:hover,
.form-textarea:hover {
  border-color: rgba(255, 255, 255, 0.9);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.6) 0%, rgba(235, 242, 252, 0.5) 50%, rgba(255, 255, 255, 0.58) 100%);
}

.form-input:focus,
.form-textarea:focus {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.68) 0%, rgba(240, 246, 255, 0.58) 100%);
  border-color: var(--yellowColor);
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.7), 0 0 0 3px rgba(255, 237, 0, 0.35), 0 6px 18px rgba(0, 20, 50, 0.16);
  outline: none;
  color: #001a3e;
}

.form-textarea {
  resize: vertical;
  min-height: 140px;
}

.form-status-alert {
  padding: 14px 20px;
  border-radius: var(--radiusSm);
  font-weight: 500;
  text-align: center;
  display: none;
}

@keyframes btnSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.form-status-alert.success {
  display: block;
  background: rgba(40, 167, 69, 0.25);
  border: 1.5px solid #28a745;
  color: #75f096;
}

.form-status-alert.error {
  display: block;
  background: rgba(220, 53, 69, 0.25);
  border: 1.5px solid #dc3545;
  color: #ff8c96;
}

.calendly-alt-box {
  margin-top: 36px;
  padding-top: 30px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  text-align: center;
}

.calendly-alt-box p {
  color: var(--textMuted);
  margin-bottom: 16px;
  font-size: 1rem;
}

/* ==========================================================================
   Page d'Erreur 404
   ========================================================================== */
.error-page-section {
  position: relative;
  background: var(--bgGradient);
  min-height: calc(100vh - 160px);
  padding: 160px 0 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
}

.error-content-wrapper {
  max-width: 1080px;
  margin: 0 auto;
  text-align: center;
  padding: 20px 20px 40px;
  position: relative;
  z-index: 2;
}

.error-glitch-title {
  font-family: var(--fontDisplay);
  font-size: clamp(5.5rem, 14vw, 9rem);
  font-weight: 400;
  color: var(--yellowColor);
  line-height: 0.95;
  margin-bottom: 24px;
  text-shadow: 0 0 35px var(--yellowGlow);
  letter-spacing: 2px;
}

.error-content-wrapper h1 {
  font-size: clamp(1.35rem, 2.5vw, 2.25rem);
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 16px;
  line-height: 1.3;
  text-shadow: 0 0 16px rgba(0, 0, 0, 0.45);
}

@media (min-width: 768px) {
  .error-content-wrapper h1 {
    white-space: nowrap;
  }
}

.error-content-wrapper h1 .highlight {
  white-space: nowrap;
}

.error-content-wrapper p {
  color: #e2edfb;
  font-size: 1.15rem;
  line-height: 1.65;
  max-width: 580px;
  margin: 0 auto 36px;
}

.error-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 18px;
}

.error-page-section .section-bottom-wave {
  width: 100%;
  margin-top: auto;
  line-height: 0;
  display: block;
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  border-radius: 50px;
  background: rgba(255, 255, 255, 0.08);
  border: 1.5px solid rgba(255, 255, 255, 0.25);
  color: #ffffff;
  font-weight: 600;
  font-size: 1.05rem;
  text-decoration: none;
  transition: all var(--transitionFast);
  backdrop-filter: blur(8px);
}

.btn-secondary:hover {
  background: rgba(255, 255, 255, 0.18);
  border-color: #ffffff;
  transform: translateY(-2px);
  color: #ffffff;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

.btn-secondary svg {
  flex-shrink: 0;
}

/* ==========================================================================
   Pages Légales (Mentions & Conditions)
   ========================================================================== */
.legal-page-container {
  min-height: 100vh;
  padding: 160px 0 0;
  background: var(--bgGradient);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.legal-content-card {
  background: rgba(24, 24, 28, 0.9);
  border: 1px solid var(--glassBorder);
  border-radius: var(--radiusLg);
  padding: 50px;
  width: 100%;
  max-width: 960px;
  box-shadow: var(--shadowLg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.legal-header {
  text-align: center;
  margin-bottom: 40px;
}

.legal-header h1 {
  font-size: clamp(2.2rem, 3.5vw, 3.2rem);
  font-weight: 800;
  margin-bottom: 16px;
}

.legal-article {
  margin-bottom: 32px;
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.legal-article:last-child {
  border-bottom: none;
}

.legal-article h2 {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--yellowColor);
  margin-bottom: 10px;
}

.legal-article p {
  font-size: 1rem;
  color: var(--textMuted);
  line-height: 1.7;
}

/* ==========================================================================
   Vague de transition & Footer épuré blanc (#ffffff) avec éléments en #002F6D
   ========================================================================== */
.section-bottom-wave {
  width: 100%;
  margin-top: 50px;
  line-height: 0;
  display: block;
}

.footer-wave {
  width: 100%;
  height: auto;
  display: block;
  margin-bottom: -1px;
  pointer-events: none;
}

.site-footer {
  position: relative;
  background: #ffffff;
  color: #002F6D;
  margin-top: 0;
  z-index: 25;
}

.footer-inner {
  background: #ffffff;
  padding: 30px 8% 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 30px;
  width: 100%;
}

.footer-left h3 {
  font-size: 1.15rem;
  font-weight: 700;
  color: #002F6D;
  margin-bottom: 6px;
}

.footer-left p {
  font-size: 0.9rem;
  color: #002F6D;
  opacity: 0.85;
  line-height: 1.5;
}

.footer-subtitle-line {
  display: inline;
}

.footer-socials {
  display: flex;
  align-items: center;
  gap: 16px;
}

.social-link-btn {
  width: 44px;
  height: 44px;
  background: rgba(0, 47, 109, 0.07);
  border: 1.5px solid rgba(0, 47, 109, 0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #002F6D;
  transition: all var(--transitionFast);
}

.social-link-btn svg {
  width: 20px;
  height: 20px;
  fill: #002F6D;
  transition: fill var(--transitionFast);
}

.social-link-btn:hover {
  background: #002F6D;
  color: #ffffff;
  border-color: #002F6D;
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(0, 47, 109, 0.3);
}

.social-link-btn:hover svg {
  fill: #ffffff;
}

.footer-legal-links {
  width: 100%;
  padding-top: 24px;
  border-top: 1px solid rgba(0, 47, 109, 0.15);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 0.9rem;
  color: #002F6D;
}

.footer-legal-links a {
  color: #002F6D;
  font-weight: 600;
  transition: opacity var(--transitionFast);
}

.footer-legal-links a:hover {
  opacity: 0.75;
  text-decoration: underline;
}

/* ==========================================================================
   Responsive Breakpoints
   ========================================================================== */
@media (max-width: 1024px) {
  .hero-section {
    padding: 130px 6% 0;
    min-height: auto;
  }

  .hero-grid {
    flex-direction: column;
    align-items: center;
    text-align: center;
    min-height: auto;
  }

  .hero-text {
    max-width: 100%;
    margin-left: 0;
    padding-right: 0;
    padding-bottom: 24px;
  }
  
  .hero-subtitle {
    margin: 0 auto 32px;
  }

  .hero-cta-group {
    justify-content: center;
  }

  .hero-image-wrapper {
    position: relative;
    right: auto;
    bottom: auto;
    width: 100%;
    max-width: 500px;
    height: auto;
    justify-content: center;
    margin: 20px auto 0;
  }

  .hero-portrait {
    width: 100%;
    max-width: 480px;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    object-position: center top;
    transform: translateY(6%);
  }

  .triangle-behind-cta {
    width: 22rem;
    left: 50%;
    margin-left: -11rem;
    top: 70px;
  }

  @keyframes animHeroPortrait {
    0% {
      opacity: 0;
      transform: translateX(60px) translateY(6%);
    }
    100% {
      opacity: 1;
      transform: translateX(0) translateY(6%);
    }
  }

  .burger-btn {
    display: flex;
  }

  .main-nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: rgba(0, 31, 77, 0.96);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 30px 20px;
    transform: translateY(-100%);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 999;
  }

  .main-nav.open {
    transform: translateY(0);
  }

  [data-theme="dark"] .main-nav {
    background: rgba(0, 24, 60, 0.96);
  }

  .nav-links {
    margin: auto 0;
    display: flex;
    flex-direction: column;
    gap: 22px;
    width: 100%;
    max-width: 300px;
    align-items: center;
    text-align: center;
    padding: 20px 0;
  }

  .nav-link {
    font-size: 1.5rem;
    font-weight: 700;
  }

  .nav-item-dropdown {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
  }

  .nav-link-dropdown {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    cursor: pointer;
    user-select: none;
  }

  .nav-link-dropdown .dropdown-arrow {
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .nav-dropdown-menu {
    position: static;
    transform: none !important;
    width: 100%;
    max-width: 260px;
    margin: 0 auto;
    padding: 0 8px;
    max-height: 0;
    opacity: 0;
    visibility: hidden;
    overflow: hidden;
    pointer-events: none;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid transparent;
    border-radius: 14px;
    box-shadow: none;
    transition: max-height 0.38s cubic-bezier(0.16, 1, 0.3, 1),
                opacity 0.25s ease,
                padding 0.35s ease,
                margin-top 0.35s ease,
                border-color 0.3s ease;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  /* État déplié au clic sur "Services" sur mobile */
  .nav-item-dropdown.is-open .nav-dropdown-menu {
    max-height: 340px;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    padding: 10px 8px;
    margin-top: 12px;
    border-color: rgba(255, 237, 0, 0.3);
    box-shadow: 0 10px 30px rgba(0, 10, 30, 0.45);
  }

  .nav-item-dropdown.is-open .dropdown-arrow {
    transform: rotate(180deg);
    stroke: var(--yellowColor, #ffed00);
  }

  .dropdown-item {
    justify-content: center;
    font-size: 1.12rem;
    padding: 10px 14px;
    text-align: center;
    border-radius: 10px;
  }

  .partners-grid-scroll {
    grid-auto-columns: calc(50% - 18px);
    gap: 24px;
  }

  .partners-arrow.prev {
    left: -12px;
  }

  .partners-arrow.next {
    right: -12px;
  }
}

@media (max-width: 860px) {
  /* Masquer la photo portrait du header au format téléphone */
  .hero-image-wrapper {
    display: none !important;
  }
}

@media (max-width: 768px) {
  .site-header {
    padding: 1rem 6%;
  }

  .hero-section {
    padding: 135px 5% 35px;
    min-height: auto;
  }

  .video-pres-section {
    padding-left: 5%;
    padding-right: 5%;
  }

  .projets-page-header {
    padding: 120px 10px 20px !important;
  }

  .projets-page-header .container {
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: 100% !important;
  }

  /* Pages Montage Vidéo, Motion Design & Tournage : Titre et sous-titre calibrés sur exactement deux lignes */
  .montage-hero-title,
  .motion-hero-title,
  .tournage-hero-title {
    margin-bottom: 14px;
    gap: 3px;
    text-align: center;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .montage-title-main,
  .motion-title-main {
    font-size: clamp(1.35rem, 6.8vw, 2.15rem) !important;
    white-space: nowrap !important;
    line-height: 1.15;
    letter-spacing: -0.02em;
    display: block;
    text-align: center;
  }

  /* Titre tournage légèrement réduit pour garantir l'affichage sur une seule ligne (Ligne 1) */
  .tournage-title-main {
    font-size: clamp(1.02rem, 4.9vw, 1.65rem) !important;
    white-space: nowrap !important;
    line-height: 1.18 !important;
    letter-spacing: -0.025em !important;
    display: block !important;
    text-align: center !important;
  }

  .montage-title-sub {
    font-size: clamp(0.95rem, 4.4vw, 1.45rem) !important;
    white-space: nowrap !important;
    line-height: 1.2;
    letter-spacing: -0.015em;
    display: block;
    text-align: center;
  }

  .motion-title-sub {
    font-size: clamp(1.2rem, 6.2vw, 1.95rem) !important;
    white-space: nowrap !important;
    line-height: 1.2;
    letter-spacing: -0.015em;
    display: block;
    text-align: center;
  }

  /* Sous-titre tournage professionnelle (Ligne 2) */
  .tournage-title-sub {
    font-size: clamp(1.05rem, 5.1vw, 1.75rem) !important;
    white-space: nowrap !important;
    line-height: 1.2 !important;
    letter-spacing: -0.015em !important;
    display: block !important;
    text-align: center !important;
  }

  .montage-title-sub .highlight,
  .motion-title-sub .highlight,
  .tournage-title-sub .highlight {
    font-size: 1.12em;
  }

  /* Page Publicité : Titre réduit, équilibré et sans rupture intempestive pour smartphone */
  .publicite-hero-title {
    margin-bottom: 14px !important;
    gap: 2px !important;
    text-align: center !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  .publicite-title-main {
    font-size: clamp(1.12rem, 5.4vw, 1.85rem) !important;
    white-space: nowrap !important;
    line-height: 1.15 !important;
    letter-spacing: -0.02em !important;
    display: block !important;
    text-align: center !important;
  }

  .publicite-title-amp {
    font-size: clamp(0.8rem, 3.2vw, 1.05rem) !important;
    color: var(--yellowColor, #ffed00) !important;
    margin: 1px 0 !important;
    line-height: 1 !important;
    text-shadow: 0 0 16px var(--yellowGlow, rgba(255, 237, 0, 0.4)) !important;
  }

  .publicite-title-sub {
    font-size: clamp(1.05rem, 5.0vw, 1.75rem) !important;
    white-space: nowrap !important;
    line-height: 1.15 !important;
    letter-spacing: -0.02em !important;
    display: block !important;
    text-align: center !important;
  }

  .montage-hero-subtitle,
  .motion-hero-subtitle,
  .tournage-hero-subtitle,
  .publicite-hero-subtitle {
    font-size: clamp(0.55rem, 2.35vw, 0.72rem) !important;
    line-height: 1.48 !important;
    letter-spacing: -0.022em !important;
    margin: 0 auto 24px !important;
    max-width: 100% !important;
    text-align: center !important;
    padding: 0 !important;
  }

  .montage-hero-subtitle .hero-subtitle-line,
  .motion-hero-subtitle .hero-subtitle-line,
  .tournage-hero-subtitle .hero-subtitle-line,
  .publicite-hero-subtitle .hero-subtitle-line {
    display: block !important;
    white-space: nowrap !important;
  }

  .accueil-section .container,
  .legal-page-container .container {
    padding-left: 6%;
    padding-right: 6%;
  }

  .contact-page-container {
    padding: 125px 0 0 !important;
    box-sizing: border-box;
    width: 100%;
  }

  .form-group-row {
    grid-template-columns: 1fr;
  }

  .contact-card-box {
    padding: 0 16px 36px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .contact-header {
    margin-bottom: 22px;
    text-align: center;
    width: 100%;
    padding: 0 4px;
    box-sizing: border-box;
  }

  .contact-header h1 {
    font-size: clamp(1.35rem, 6.4vw, 2.15rem);
    white-space: nowrap;
    line-height: 1.2;
    letter-spacing: -0.02em;
    margin-bottom: 12px;
    text-align: center;
  }

  .contact-header p,
  .contact-header .contact-subtitle,
  .contact-subtitle {
    font-size: clamp(0.70rem, 3.0vw, 0.88rem) !important;
    line-height: 1.48;
    text-align: center;
    margin: 0 auto;
    width: 100%;
    max-width: 100%;
    color: var(--textMuted);
    padding: 0;
    box-sizing: border-box;
  }

  .contact-subtitle-line {
    display: block;
    white-space: nowrap;
  }

  .contact-page-container .section-bottom-wave {
    margin-top: auto;
    width: 100%;
    line-height: 0;
    margin-bottom: 0;
    display: block;
  }

  .contact-page-container .footer-wave {
    width: 100%;
    height: auto;
    display: block;
    margin-bottom: -1px;
    pointer-events: none;
  }

  .calendly-alt-box {
    margin-top: 26px;
    padding-top: 22px;
  }

  .calendly-alt-box p {
    font-size: clamp(0.78rem, 3.2vw, 0.92rem);
    line-height: 1.4;
    margin-bottom: 12px;
  }

  .calendly-alt-box .btn-secondary {
    font-size: 0.92rem;
    padding: 12px 18px;
    white-space: nowrap;
  }

  .legal-content-card,
  .error-card-box {
    padding: 36px 20px;
  }

  .reviews-carousel-wrapper {
    overflow: visible;
    overflow: clip visible;
    padding: 24px 0 42px;
    width: 100%;
    box-sizing: border-box;
  }

  .reviews-carousel-container {
    padding: 0 20px;
    max-width: 100%;
    box-sizing: border-box;
  }

  #reviews-container {
    max-width: 82%;
  }

  .review-slide.is-active .review-video-frame {
    box-shadow: 0 14px 34px -4px rgba(0, 0, 0, 0.55), 0 3px 12px rgba(0, 0, 0, 0.3) !important;
  }

  .review-video-frame {
    box-shadow: 0 10px 24px -4px rgba(0, 0, 0, 0.35);
  }

  .review-slide.is-prev {
    transform: translate3d(-24%, 0, -60px) scale(0.85) rotateY(8deg);
    opacity: 0.45;
    filter: blur(3px);
  }

  .review-slide.is-next {
    transform: translate3d(24%, 0, -60px) scale(0.85) rotateY(-8deg);
    opacity: 0.45;
    filter: blur(3px);
  }

  .carousel-nav-btn {
    width: 38px;
    height: 38px;
    z-index: 15;
  }

  .carousel-nav-btn.prev { left: 4px; }
  .carousel-nav-btn.next { right: 4px; }

  /* Masquer tous les triangles décoratifs d'arrière-plan au format mobile/téléphone */
  .triangle-float {
    display: none !important;
  }

  .section-bottom-wave {
    width: 100%;
    margin-bottom: 0;
    line-height: 0;
  }

  .footer-wave {
    width: 100%;
    height: auto;
    display: block;
    margin-bottom: -1px;
  }

  .site-footer {
    width: 100%;
    margin-top: 0;
  }

  .footer-inner {
    flex-direction: column;
    text-align: center;
    gap: 20px;
    padding: 28px 5% 36px;
  }

  .footer-left {
    width: 100%;
    text-align: center;
  }

  .footer-left h3 {
    font-size: clamp(0.66rem, 2.75vw, 0.82rem);
    white-space: nowrap;
    letter-spacing: -0.015em;
    margin-bottom: 6px;
    text-align: center;
  }

  .footer-left p {
    font-size: clamp(0.58rem, 2.2vw, 0.70rem);
    line-height: 1.48;
    color: #002F6D;
    opacity: 0.88;
    margin: 0 auto;
    text-align: center;
  }

  .footer-subtitle-line {
    display: block;
    white-space: nowrap;
  }

  .footer-socials {
    justify-content: center;
    gap: 14px;
    width: 100%;
  }

  .footer-legal-links {
    padding-top: 18px;
    justify-content: center;
    gap: 20px;
    font-size: 0.82rem;
    text-align: center;
    width: 100%;
  }
}

@media (max-width: 480px) {
  .site-logo img {
    width: 4.5rem;
  }

  .btn-primary,
  .btn-secondary {
    width: 100%;
    justify-content: center;
    padding: 14px 24px;
    font-size: 1.05rem;
  }

  .creator-card-row {
    gap: 24px;
  }

  .creator-info-box {
    width: 100%;
    padding: 20px;
  }

  .triangle-pos-convaincu,
  .triangle-pos-process {
    width: 5.5rem;
    top: -10px;
    right: 10px;
    opacity: 0.45;
  }

  .triangle-pos-confiance {
    width: 4.5rem;
    top: -20px;
    left: 4px;
    opacity: 0.35;
  }

  .triangle-pos-faq {
    width: 4.5rem;
    top: -25px;
    right: 4px;
    opacity: 0.35;
  }
}

@media (max-width: 600px) {
  .hero-title {
    font-size: clamp(1.55rem, 6.6vw, 2.15rem);
    line-height: 1.2;
    text-align: center;
    width: 100%;
    margin-top: 20px;
    margin-bottom: 18px;
  }

  .hero-title-line {
    display: block;
    text-align: center;
    width: 100%;
    white-space: nowrap;
  }

  .hero-subtitle {
    font-size: clamp(0.61rem, 2.6vw, 0.74rem);
    line-height: 1.55;
    letter-spacing: -0.015em;
    margin-bottom: 22px;
    padding: 0 4px;
  }

  .hero-subtitle-line {
    display: block;
    white-space: nowrap;
  }

  /* Ajustement triangles flottants sur mobile */
  .hero-section > .triangle-pos-1 {
    width: 5.5rem;
    top: 70px;
    left: -15px;
    opacity: 0.4;
  }

  .hero-section > .triangle-pos-2 {
    width: 4.8rem;
    top: 45%;
    right: -10px;
    opacity: 0.4;
  }

  .triangle-behind-cta {
    width: 14rem !important;
    margin-left: -7rem !important;
    top: 45px !important;
    opacity: 0.55 !important;
  }

  .partners-grid-scroll {
    grid-auto-columns: calc(100% - 10px);
    gap: 16px;
    padding: 16px 2px;
  }

  .partners-arrow {
    width: 38px;
    height: 38px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.22);
  }

  .partners-arrow.prev {
    left: 4px;
  }

  .partners-arrow.next {
    right: 4px;
  }

  .process-title,
  .partners-title,
  .reviews-title,
  .faq-section .section-title,
  .cta-banner h2 {
    font-size: clamp(0.92rem, 4.4vw, 1.65rem);
    line-height: 1.2;
    letter-spacing: -0.012em;
    white-space: nowrap;
  }

  .partners-title {
    margin-bottom: 24px;
  }

  .partners-title .highlight {
    padding-left: 3px;
  }

  .reviews-title {
    margin-top: 8px;
    margin-bottom: 24px;
  }

  .reviews-title .highlight {
    padding-left: 3px;
  }

  .faq-section {
    margin: 55px auto 30px;
    padding: 0;
  }

  .faq-section .section-title {
    margin-bottom: 24px;
  }

  .cta-banner {
    padding: 0;
    margin-top: 24px;
    margin-bottom: 20px;
  }

  .cta-banner h2 {
    margin-bottom: 16px;
  }

  /* Bouton "Prendre RDV" compact en largeur */
  .cta-banner .btn-primary {
    width: auto !important;
    min-width: 160px;
    max-width: 220px;
    margin: 0 auto;
    padding: 12px 26px;
    font-size: 0.95rem;
    display: inline-flex;
    justify-content: center;
  }

  /* Foire aux questions : Blocs plus fins et élégants sur mobile */
  .faq-list {
    gap: 10px;
  }

  .faq-item {
    border-radius: 14px;
  }

  .faq-question {
    padding: 14px 18px;
    font-size: 0.92rem;
    gap: 12px;
    line-height: 1.35;
  }

  .faq-icon {
    font-size: 1.25rem;
  }

  .faq-answer-inner {
    padding: 0 18px;
  }

  .faq-item.active .faq-answer-inner,
  .faq-item:hover .faq-answer-inner {
    padding: 0 18px 16px;
  }

  .faq-answer-inner p {
    font-size: 0.84rem;
    line-height: 1.5;
  }

  /* Bouton "Écouter l'avis" sur les vidéos d'avis clients réduit sur mobile */
  .review-center-play-btn {
    gap: 6px;
  }

  .play-btn-circle {
    width: 48px;
    height: 48px;
    border-width: 2px;
  }

  .play-btn-circle svg {
    width: 20px;
    height: 20px;
    margin-left: 2px;
  }

  .play-btn-pulse-ring {
    width: 48px;
    height: 48px;
    margin-top: -24px;
    margin-left: -24px;
  }

  .play-btn-label {
    padding: 4px 10px;
    border-radius: var(--radiusPill);
    gap: 1px;
  }

  .play-btn-text {
    font-size: 0.72rem;
  }

  .play-btn-author {
    font-size: 0.62rem;
  }
}

@media (max-width: 360px) {
  .process-title,
  .partners-title,
  .reviews-title,
  .faq-section .section-title,
  .cta-banner h2 {
    font-size: clamp(0.82rem, 3.9vw, 1.05rem);
    letter-spacing: -0.015em;
  }

  .partners-title .highlight,
  .reviews-title .highlight {
    padding-left: 2px;
  }
}

/* ==========================================================================
   Accessibilité Apple HIG & Awwwards : Prefers Reduced Motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .hero-portrait {
    transform: translateY(25%) !important;
    opacity: 1 !important;
  }
  .triangle-float {
    animation: none !important;
  }
}

/* ==========================================================================
   Curseur Personnalisé : Cercle Blanc avec Point Jaune
   ========================================================================== */
@media (pointer: fine) {
  .has-custom-cursor,
  .has-custom-cursor body,
  .has-custom-cursor a,
  .has-custom-cursor button,
  .has-custom-cursor [role="button"],
  .has-custom-cursor .btn,
  .has-custom-cursor .btn-primary,
  .has-custom-cursor .btn-secondary,
  .has-custom-cursor .nav-link,
  .has-custom-cursor .faq-question,
  .has-custom-cursor .partner-card,
  .has-custom-cursor .video-card-inner,
  .has-custom-cursor .theme-toggle-btn,
  .has-custom-cursor .carousel-nav-btn,
  .has-custom-cursor .partners-arrow,
  .has-custom-cursor .social-link-btn,
  .has-custom-cursor .audio-play-btn,
  .has-custom-cursor .audio-progress-bar {
    cursor: none !important;
  }

  input,
  textarea,
  select {
    cursor: text !important;
  }

  .custom-cursor-dot,
  .custom-cursor-ring {
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: none !important;
    z-index: 999999;
    border-radius: 50%;
    opacity: 0;
    transform: translate3d(-100px, -100px, 0);
    -webkit-transform: translate3d(-100px, -100px, 0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    will-change: transform;
  }

  .custom-cursor-dot.visible,
  .custom-cursor-ring.visible {
    opacity: 1;
  }

  .custom-cursor-dot {
    width: 6px;
    height: 6px;
    background-color: var(--yellowColor, #ffed00);
    box-shadow: 0 0 8px rgba(255, 237, 0, 0.9);
    transition: opacity 0.2s ease;
  }

  .custom-cursor-ring {
    width: 38px;
    height: 38px;
    border: 2px solid #ffffff;
    background-color: transparent;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.25);
    transition: opacity 0.2s ease, border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
  }

  .custom-cursor-ring.hovered {
    border-color: var(--yellowColor, #ffed00);
    background-color: rgba(255, 237, 0, 0.08);
    box-shadow: 0 0 16px rgba(255, 237, 0, 0.45);
  }

  .custom-cursor-ring.active {
    border-width: 2.5px;
    border-color: var(--yellowColor, #ffed00);
    background-color: rgba(255, 237, 0, 0.16);
  }

  .custom-cursor-ring.text-mode {
    opacity: 0.15;
    border-color: rgba(255, 255, 255, 0.4);
  }

  .custom-cursor-dot.text-mode {
    opacity: 0.25;
  }
}

/* ==========================================================================
   Page Photos - Galerie & Lightbox Plein Écran (Zero Spacing & Fond continu)
   ========================================================================== */
.photos-page-section {
  padding: 160px 0 0;
  text-align: center;
  background: var(--bgGradientDeep);
  position: relative;
  min-height: calc(100vh - 120px);
  display: flex;
  flex-direction: column;
}

.photos-header-content {
  margin: 0 auto 40px;
  padding: 0 16px;
  max-width: 1360px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.photos-main-title {
  white-space: nowrap !important;
  font-size: clamp(2.0rem, 3.8vw, 3.6rem) !important;
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 20px;
  letter-spacing: -0.5px;
  text-align: center;
}


.photos-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 237, 0, 0.12);
  color: var(--yellowColor, #ffed00);
  border: 1px solid rgba(255, 237, 0, 0.35);
  padding: 6px 16px;
  border-radius: var(--radiusPill);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 18px;
}

.photos-container {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 4%;
  width: 100%;
}

/* Conteneur principal pour la galerie photo */
.photos-frame {
  position: relative;
  width: 100%;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  margin-bottom: 80px;
}

/* Grille photos moderne avec espacement élégant */
.photos-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  list-style: none !important;
  width: 100%;
  line-height: normal;
  border: none !important;
}

/* Élément photo unitaire avec bords arrondis et ombre douce */
.photo-item {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  border-radius: 20px;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid var(--glassBorder);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.38);
  background: rgba(7, 28, 68, 0.45);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  cursor: pointer;
  display: block;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.45s ease, border-color 0.35s ease;
}

.photo-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), filter 0.4s ease;
  will-change: transform;
}

.photo-item:hover,
.photo-item:focus-visible {
  transform: translateY(-6px);
  border-color: rgba(255, 237, 0, 0.7);
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.55), 0 0 25px rgba(255, 237, 0, 0.2);
}

.photo-item:hover img,
.photo-item:focus-visible img {
  transform: scale(1.06);
}

/* Overlay esthétique au survol */
.photo-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 35%,
    rgba(3, 6, 12, 0.7) 70%,
    rgba(3, 6, 12, 0.94) 100%
  );
  opacity: 0;
  transition: opacity 0.35s ease;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 24px;
  line-height: 1.4;
  pointer-events: none;
}

.photo-item:hover .photo-overlay,
.photo-item:focus-visible .photo-overlay {
  opacity: 1;
}

.photo-category,
.photo-subtitle {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--yellowColor, #ffed00);
  margin-bottom: 4px;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
}

.photo-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 10px 0;
  line-height: 1.25;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.7);
}

.photo-zoom-hint {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 4px 12px;
  border-radius: var(--radiusPill);
  width: fit-content;
  border: 1px solid rgba(255, 255, 255, 0.2);
}


/* Commandes carrousel mobile (masquées sur ordinateur par défaut) */
.photo-carousel-btn,
.photo-carousel-nav {
  display: none;
}

/* Media queries responsive Galerie Photos */
@media (min-width: 769px) and (max-width: 1024px) {
  .photos-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;
  }
}

/* Format Téléphone / Mobile (Carrousel fluide avec flèches gauche/droite et défilement tactile) */
@media (max-width: 768px) {
  .photos-header-content {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    margin: 0 auto 24px !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 12px !important;
  }

  .photos-tag {
    margin: 0 auto 14px !important;
  }

  /* Titre lisible sur une seule ligne et centré */
  .photos-main-title {
    white-space: nowrap !important;
    display: block !important;
    text-align: center !important;
    font-size: clamp(1.05rem, 4.8vw, 1.85rem) !important;
    line-height: 1.2 !important;
    letter-spacing: -0.025em !important;
    margin: 0 auto 14px !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Sous-titre lisible sur exactement deux lignes et centré */
  .photos-hero-subtitle {
    font-size: clamp(0.48rem, 2.05vw, 0.72rem) !important;
    line-height: 1.48 !important;
    letter-spacing: -0.022em !important;
    margin: 0 auto 24px !important;
    max-width: 100% !important;
    text-align: center !important;
    padding: 0 !important;
    display: block !important;
  }

  .photos-hero-subtitle .hero-subtitle-line {
    display: block !important;
    white-space: nowrap !important;
    text-align: center !important;
  }

  .photos-container {
    padding: 0 16px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .photos-frame {
    position: relative !important;
    width: 100% !important;
    max-width: 440px !important;
    margin: 0 auto 50px !important;
  }

  /* Transformation de la grille en carrousel horizontal tactile */
  .photos-grid {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
    scroll-behavior: smooth !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important; /* Firefox */
    gap: 0 !important;
    width: 100% !important;
    border-radius: 20px !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.45) !important;
  }

  .photos-grid::-webkit-scrollbar {
    display: none !important; /* WebKit */
  }

  /* Carte photo plein cadre pour le carrousel */
  .photo-item {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    scroll-snap-align: start !important;
    scroll-snap-stop: always !important;
    aspect-ratio: 4 / 5 !important;
    border-radius: 20px !important;
    box-sizing: border-box !important;
    box-shadow: none !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    transform: none !important;
  }

  .photo-item:hover,
  .photo-item:active,
  .photo-item:focus-visible {
    transform: none !important;
  }

  .photo-item:hover img,
  .photo-item:active img {
    transform: none !important;
  }

  /* Overlay visible sur mobile pour une lecture instantanée */
  .photo-overlay {
    opacity: 1 !important;
    padding: 22px 18px !important;
    background: linear-gradient(
      180deg,
      rgba(0, 0, 0, 0) 40%,
      rgba(3, 6, 12, 0.72) 72%,
      rgba(3, 6, 12, 0.95) 100%
    ) !important;
  }

  .photo-title {
    font-size: 1.12rem !important;
  }

  /* Flèches de navigation carrousel */
  .photo-carousel-btn {
    display: flex !important;
    position: absolute !important;
    top: calc(50% - 24px) !important;
    transform: translateY(-50%) !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255, 255, 255, 0.6) !important;
    color: #002F6D !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45) !important;
    cursor: pointer !important;
    z-index: 25 !important;
    align-items: center !important;
    justify-content: center !important;
    transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  .photo-carousel-btn:hover {
    background: #ffffff !important;
    color: #001f4a !important;
    transform: translateY(-50%) scale(1.08) !important;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.55) !important;
  }

  .photo-carousel-btn:active {
    transform: translateY(-50%) scale(0.92) !important;
    background: #ffffff !important;
  }

  .photo-carousel-prev {
    left: 10px !important;
  }

  .photo-carousel-next {
    right: 10px !important;
  }

  /* Barre de pagination inférieure (dots + compteur) */
  .photo-carousel-nav {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 14px !important;
    margin-top: 18px !important;
    width: 100% !important;
  }

  .photo-carousel-dots {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
  }

  .photo-carousel-dot {
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.3) !important;
    border: none !important;
    padding: 0 !important;
    cursor: pointer !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  .photo-carousel-dot.is-active {
    width: 24px !important;
    border-radius: 12px !important;
    background: var(--yellowColor, #ffed00) !important;
    box-shadow: 0 0 12px rgba(255, 237, 0, 0.6) !important;
  }

  .photo-carousel-counter {
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    color: rgba(255, 255, 255, 0.85) !important;
    letter-spacing: 0.8px !important;
    font-variant-numeric: tabular-nums !important;
    background: rgba(255, 255, 255, 0.08) !important;
    padding: 4px 12px !important;
    border-radius: var(--radiusPill) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
  }
}

/* ==========================================================================
   Lightbox Plein Écran
   ========================================================================== */
.photo-lightbox {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.photo-lightbox.active {
  opacity: 1;
  visibility: visible;
}

.lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(6, 8, 14, 0.93);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}

.lightbox-container {
  position: relative;
  z-index: 2;
  max-width: 94vw;
  max-height: 94vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.lightbox-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.lightbox-img {
  max-width: 86vw;
  max-height: 74vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 12px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.12);
  transition: transform 0.3s ease, opacity 0.2s ease;
}

.lightbox-info {
  margin-top: 18px;
  color: #ffffff;
}

.lightbox-counter {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--yellowColor, #ffed00);
  margin-bottom: 4px;
}

.lightbox-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: #ffffff;
  margin: 2px 0 4px;
}

.lightbox-category {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.7);
}

/* Boutons de contrôle Lightbox */
.lightbox-close {
  position: absolute;
  top: -50px;
  right: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.lightbox-close:hover {
  background: rgba(255, 255, 255, 0.25);
  border-color: #ffffff;
  transform: scale(1.08);
}

.lightbox-arrow {
  position: absolute;
  top: 45%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  z-index: 10;
}

.lightbox-prev {
  left: -76px;
}

.lightbox-next {
  right: -76px;
}

.lightbox-arrow:hover {
  background: rgba(255, 255, 255, 0.25);
  border-color: var(--yellowColor, #ffed00);
  color: var(--yellowColor, #ffed00);
  transform: translateY(-50%) scale(1.08);
}

@media (max-width: 860px) {
  .lightbox-arrow {
    width: 44px;
    height: 44px;
    background: rgba(0, 0, 0, 0.5);
  }
  .lightbox-prev {
    left: 8px;
  }
  .lightbox-next {
    right: 8px;
  }
  .lightbox-close {
    top: 10px;
    right: 12px;
    z-index: 20;
    background: rgba(0, 0, 0, 0.6);
  }
  .lightbox-img {
    max-height: 65vh;
  }
}

/* ==========================================================================
   Page « Publicité » - Grille 4 Vidéos 16:9 Plein Écran & Lightbox Vidéo
   ========================================================================== */
.publicite-page-header {
  padding: 160px 4% 45px;
}

/* ==========================================================================
   Sous-titres des pages « Services » (Montage, Motion, Photos, Tournage, Publicité)
   Strictement calibrés pour être lisibles sur exactement deux lignes
   ========================================================================== */
.montage-hero-subtitle,
.motion-hero-subtitle,
.photos-hero-subtitle,
.tournage-hero-subtitle,
.publicite-hero-subtitle {
  margin: 0 auto 32px;
  max-width: 980px;
  text-align: center;
  font-size: clamp(0.98rem, 1.18vw, 1.22rem);
  line-height: 1.48;
}

.montage-hero-subtitle .hero-subtitle-line,
.motion-hero-subtitle .hero-subtitle-line,
.photos-hero-subtitle .hero-subtitle-line,
.tournage-hero-subtitle .hero-subtitle-line,
.publicite-hero-subtitle .hero-subtitle-line {
  display: block;
  white-space: nowrap;
}



.publicite-grid-section {
  width: 100vw;
  max-width: 100vw;
  margin: 10px 0 50px;
  padding: 0;
  position: relative;
  z-index: 2;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

.publicite-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  width: 100vw;
  background: #000000;
}

.publicite-card {
  position: relative;
  aspect-ratio: 16 / 9;
  width: 100%;
  border-radius: 0 !important;
  overflow: hidden;
  background: #020611;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: none;
  cursor: pointer;
  transition: border-color 0.35s ease, box-shadow 0.35s ease, z-index 0.35s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  user-select: none;
  z-index: 1;
}

.publicite-card:hover {
  z-index: 5;
  border-color: rgba(255, 237, 0, 0.85);
  box-shadow: inset 0 0 0 2px var(--yellowColor, #ffed00);
}

.publicite-card:focus-visible {
  outline: 3px solid var(--yellowColor, #ffed00);
  outline-offset: -3px;
  z-index: 6;
}

.publicite-video-preview {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  pointer-events: none;
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.publicite-card:hover .publicite-video-preview {
  transform: scale(1.05);
}

.publicite-card-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: rgba(0, 0, 0, 0.28);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: clamp(16px, 3.5vw, 48px);
  transition: background 0.4s ease;
}

.publicite-card:hover .publicite-card-overlay {
  background: rgba(0, 0, 0, 0.1);
}

.publicite-brand-title {
  font-size: clamp(2.2rem, 4.4vw, 4.8rem);
  font-weight: 900;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: #ffffff;
  margin: 0 0 8px;
  line-height: 1;
  text-shadow: 0 3px 18px rgba(0, 0, 0, 0.95), 0 0 35px rgba(0, 0, 0, 0.75);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), text-shadow 0.4s ease;
}

.publicite-card:hover .publicite-brand-title {
  transform: scale(1.05);
  text-shadow: 0 4px 25px rgba(0, 0, 0, 1), 0 0 40px rgba(255, 237, 0, 0.45);
}

.publicite-brand-subtitle {
  font-size: clamp(0.72rem, 1vw, 1rem);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2.5px;
  color: rgba(255, 255, 255, 0.85);
  margin: 0;
  max-width: 90%;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.95);
}

@media (max-width: 640px) {
  .publicite-page-header {
    padding: 125px 4% 28px;
  }
  .publicite-title-main {
    font-size: clamp(1.02rem, 5.0vw, 1.55rem) !important;
    white-space: nowrap !important;
  }
  .publicite-title-sub {
    font-size: clamp(0.98rem, 4.8vw, 1.5rem) !important;
    white-space: nowrap !important;
  }
  .publicite-hero-subtitle {
    margin-bottom: 20px;
  }
  .publicite-grid-section {
    width: 100% !important;
    max-width: 100% !important;
    margin: 10px 0 35px !important;
    padding: 0 !important;
    left: 0 !important;
    right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    position: relative !important;
  }
  .publicite-card-overlay {
    padding: 10px 6px;
  }
  .publicite-brand-title {
    font-size: 1.15rem;
    letter-spacing: 1px;
    margin-bottom: 3px;
  }
  .publicite-brand-subtitle {
    font-size: 0.58rem;
    letter-spacing: 1.2px;
    line-height: 1.2;
    max-width: 95%;
  }
}

/* Bannière CTA sous la grille publicitaire, motion design, tournage, montage vidéo et photographie */
.publicite-cta-banner,
.motion-cta-banner,
.tournage-cta-banner,
.montage-cta-banner,
.photos-cta-banner {
  margin-top: 55px;
  margin-bottom: 65px;
  position: relative;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* ==========================================================================
   MODAL LIGHTBOX - PAGE PUBLICITÉ
   Arrière-plan dégradé identique à la page Accueil (var(--bgGradientDeep)).
   Disposition : Grande Vidéo en haut à gauche, Titre & sous-titre juste en dessous à gauche,
   croix de fermeture en bas à droite sous la vidéo, et liste plus grande à droite.
   ========================================================================== */

.video-lightbox {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  opacity: 0;
  visibility: hidden;
  background: var(--bgGradientDeep); /* Même dégradé de couleur que sur la page d'accueil */
  transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.25s ease;
  padding: 32px 40px;
  box-sizing: border-box;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Halo lumineux bleuté identique à l'accueil */
.video-lightbox::before {
  content: '';
  position: fixed;
  top: 10%;
  right: 12%;
  width: 580px;
  height: 580px;
  background: radial-gradient(circle, rgba(0, 144, 255, 0.32) 0%, transparent 70%);
  filter: blur(80px);
  pointer-events: none;
  z-index: 1;
}

.video-lightbox.active {
  opacity: 1;
  visibility: visible;
}

/* Zone cliquable pour fermer en cliquant en dehors */
.video-lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: transparent;
  cursor: pointer;
  z-index: 1;
}

/* Conteneur global de la modal (Plein format aligné en haut à gauche) */
.publicite-modal-layout {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 100%;
  height: calc(100vh - 64px);
  max-height: calc(100vh - 64px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) 480px;
  gap: 36px;
  align-items: stretch;
  animation: modalFadeIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes modalFadeIn {
  from {
    opacity: 0;
    transform: scale(0.98) translateY(6px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.publicite-modal-main {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  justify-content: flex-start;
}

/* Grande Vidéo en haut à gauche de l'écran (Format 16:9) */
.publicite-modal-video-wrap {
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: calc(84vh - 85px);
  background: #000000;
  border-radius: 0;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
}

.publicite-modal-video-wrap video,
.publicite-modal-video-wrap iframe {
  width: 100%;
  height: 100%;
  max-height: calc(84vh - 85px);
  object-fit: contain;
  background: #000000;
  display: block;
  border: none;
}

/* Mode format vertical pour les vidéos Instagram Reels & formats 9:16 */
.publicite-modal-video-wrap.is-instagram-format,
.publicite-modal-video-wrap.is-vertical-format {
  aspect-ratio: auto !important;
  width: 100% !important;
  max-width: 420px !important;
  height: calc(84vh - 85px) !important;
  max-height: 740px !important;
  min-height: 520px !important;
  margin: 0 auto;
  border-radius: 18px !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  box-shadow: 0 25px 70px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(255, 255, 255, 0.1) !important;
  background: #000000 !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.publicite-modal-video-wrap.is-instagram-format iframe,
.publicite-modal-video-wrap.is-vertical-format iframe {
  width: 100% !important;
  height: 100% !important;
  max-height: 100% !important;
  min-height: 100% !important;
  border: none !important;
  border-radius: 18px !important;
  background: #000000 !important;
  object-fit: cover !important;
  overflow: hidden !important;
}

.publicite-modal-video-wrap.is-vertical-format video {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 18px !important;
}

/* Alignement du titre et des sous-titres sous le lecteur vertical */
.publicite-modal-main.is-vertical-active .publicite-modal-caption {
  max-width: 440px;
  margin: 14px auto 0;
  width: 100%;
}

/* Juste en dessous sous la vidéo : Titre + sous-titre à gauche, Croix de fermeture à droite sous la vidéo */
.publicite-modal-caption {
  width: 100%;
  margin-top: 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal-caption-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.modal-caption-title {
  font-size: clamp(2rem, 2.8vw, 2.6rem);
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #ffffff;
  margin: 0;
  line-height: 1.1;
  text-align: left;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
}

.modal-caption-subtitle {
  font-size: clamp(0.95rem, 1.2vw, 1.15rem);
  font-weight: 500;
  color: rgba(255, 255, 255, 0.75);
  letter-spacing: 0.5px;
  margin: 0;
  text-align: left;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.8);
}

/* Bouton croix en bas à droite sous la vidéo qu'on regarde */
.modal-close-circle-btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  flex-shrink: 0;
}

.modal-close-circle-btn:hover {
  background: #ffffff;
  color: #000000;
  border-color: #ffffff;
  transform: scale(1.08);
}

/* Panneau latéral droit : Liste des vidéos de la marque / créateur */
.publicite-modal-sidebar {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  max-height: 100%;
  background: rgba(14, 14, 18, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  padding: 24px;
  box-sizing: border-box;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7);
  overflow: hidden; /* Empêche tout débordement hors du conteneur */
}

.modal-sidebar-header {
  flex-shrink: 0; /* Ne rétrécit jamais */
  padding-bottom: 14px;
  margin-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.modal-sidebar-title {
  font-size: 0.88rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: rgba(255, 255, 255, 0.85);
}

.modal-sidebar-feed {
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 8px;
  flex: 1 1 0;
  min-height: 0; /* INDISPENSABLE en Flexbox pour activer le défilement ! */
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--yellowColor, #ffed00) rgba(255, 255, 255, 0.08);
}

/* Scrollbar dorée élégante et bien visible */
.modal-sidebar-feed::-webkit-scrollbar {
  width: 7px;
}
.modal-sidebar-feed::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 6px;
}
.modal-sidebar-feed::-webkit-scrollbar-thumb {
  background: var(--yellowColor, #ffed00);
  border-radius: 6px;
  box-shadow: 0 0 10px rgba(255, 237, 0, 0.4);
}
.modal-sidebar-feed::-webkit-scrollbar-thumb:hover {
  background: #ffffff;
}

/* Cartes des vidéos de la marque / créateur */
.modal-sidebar-card {
  display: flex;
  gap: 18px;
  align-items: center;
  padding: 14px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  flex-shrink: 0; /* GARANTIT que chaque carte garde sa hauteur normale et provoque le scroll */
  transition: background 0.25s ease, border-color 0.25s ease;
}

.modal-sidebar-card:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.25);
  transform: none !important;
}

.modal-sidebar-card.active {
  background: rgba(255, 255, 255, 0.18);
  border-color: var(--color-accent, #ffd700);
}

.modal-sidebar-card-thumb {
  width: 170px;
  aspect-ratio: 16 / 9;
  flex-shrink: 0;
  background: #000000;
  overflow: hidden;
  position: relative;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.6);
  pointer-events: none; /* Désactive tout hover interne sur la vidéo */
}

.modal-sidebar-card-thumb video,
.modal-sidebar-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}

.modal-sidebar-card-meta {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.modal-sidebar-card-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: #ffffff;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}

.modal-sidebar-card-sub {
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.modal-sidebar-card.active .modal-sidebar-card-sub {
  color: var(--color-accent, #ffd700);
  font-weight: 700;
}

/* Responsive */
@media (max-width: 1024px) {
  .video-lightbox {
    padding: 16px;
    overflow-y: auto;
  }
  .publicite-modal-layout {
    height: auto;
    max-height: none;
    display: flex;
    flex-direction: column;
    overflow-y: visible;
    gap: 20px;
  }
  .publicite-modal-main {
    height: auto;
  }
  .publicite-modal-sidebar {
    width: 100%;
    height: 440px;
    max-height: 55vh;
  }
  .modal-sidebar-feed {
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
  }
  .publicite-modal-video-wrap.is-instagram-format,
  .publicite-modal-video-wrap.is-vertical-format {
    width: 100% !important;
    max-width: min(390px, 94vw) !important;
    height: 600px !important;
    max-height: 70vh !important;
    min-height: 460px !important;
  }
}

/* ==========================================================================
   Page « Motion Design » - Grille Plein Écran en Colonnes de 4
   Même principe d'affichage que la page Publicité :
   - Vidéos en 16:9 bord à bord (100vw) sans bordure arrondie
   - Pas de titre ni sous-titre par-dessus
   - Pas de clic (curseur par défaut)
   - Disposées en colonnes de 4 sur toute la longueur des vidéos disponibles
   ========================================================================== */

.motion-page-header {
  padding: 160px 4% 45px;
}

/* ==========================================================================
   Grille des 4 Grands Rectangles Catégories Motion Design (Format 16:9)
   Visuellement identique à la page Publicité (2x2, 100vw, titres majuscules centrés)
   ========================================================================== */
.motion-categories-section {
  width: 100vw;
  max-width: 100vw;
  margin: 10px 0 25px;
  padding: 0;
  position: relative;
  z-index: 3;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

.motion-categories-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  width: 100vw;
  background: transparent;
}

.motion-category-card {
  position: relative;
  aspect-ratio: 16 / 9;
  width: 100%;
  border-radius: 0 !important;
  overflow: hidden;
  background: #020611;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: none;
  cursor: pointer;
  transition: border-color 0.35s ease, box-shadow 0.35s ease, z-index 0.35s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  user-select: none;
  z-index: 1;
}

/* Si une catégorie est seule sur sa ligne (nombre impair, ex: 5ème catégorie) :
   Elle s'étend harmonieusement sur toute la largeur (façon bannière cinématographique)
   avec la même hauteur de ligne pour supprimer tout vide ou zone noire */
.motion-category-card:last-child:nth-child(odd) {
  grid-column: 1 / -1;
  aspect-ratio: 32 / 9;
  min-height: 120px;
}

.motion-category-card:hover {
  z-index: 5;
  border-color: rgba(255, 237, 0, 0.85);
  box-shadow: inset 0 0 0 2px var(--yellowColor, #ffed00);
}

.motion-category-card.is-active {
  z-index: 6;
  border-color: var(--yellowColor, #ffed00) !important;
  box-shadow: inset 0 0 0 3px var(--yellowColor, #ffed00), 0 0 30px rgba(255, 237, 0, 0.35) !important;
}

.motion-category-card:focus-visible {
  outline: 3px solid var(--yellowColor, #ffed00);
  outline-offset: -3px;
  z-index: 7;
}

.motion-category-video-preview {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  pointer-events: none;
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.motion-category-card:hover .motion-category-video-preview,
.motion-category-card.is-active .motion-category-video-preview {
  transform: scale(1.05);
}

.motion-category-iframe-preview {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 115%;
  height: 115%;
  transform: translate(-50%, -50%);
  border: 0;
  pointer-events: none;
  z-index: 1;
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.motion-category-card:hover .motion-category-iframe-preview,
.motion-category-card.is-active .motion-category-iframe-preview {
  transform: translate(-50%, -50%) scale(1.05);
}

.motion-category-card-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: rgba(0, 0, 0, 0.32);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: clamp(16px, 3.5vw, 48px);
  transition: background 0.4s ease;
}

.motion-category-card:hover .motion-category-card-overlay {
  background: rgba(0, 0, 0, 0.12);
}

.motion-category-card.is-active .motion-category-card-overlay {
  background: rgba(0, 0, 0, 0.08);
}

.motion-category-title {
  font-size: clamp(2.2rem, 4.4vw, 4.8rem);
  font-weight: 900;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: #ffffff;
  margin: 0 0 8px;
  line-height: 1;
  text-shadow: 0 3px 18px rgba(0, 0, 0, 0.95), 0 0 35px rgba(0, 0, 0, 0.75);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), text-shadow 0.4s ease;
}

.motion-category-card:hover .motion-category-title {
  transform: scale(1.05);
  text-shadow: 0 4px 25px rgba(0, 0, 0, 1), 0 0 40px rgba(255, 237, 0, 0.45);
}

.motion-category-card.is-active .motion-category-title {
  transform: scale(1.05);
  text-shadow: 0 4px 25px rgba(0, 0, 0, 1), 0 0 45px rgba(255, 237, 0, 0.7);
}

.motion-category-subtitle {
  font-size: clamp(0.72rem, 1vw, 1rem);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2.5px;
  color: rgba(255, 255, 255, 0.85);
  margin: 0;
  max-width: 90%;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.95);
  transition: color 0.3s ease;
}

.motion-category-card.is-active .motion-category-subtitle {
  color: var(--yellowColor, #ffed00);
}

/* Barre de statut du filtre et bouton de réinitialisation */
.motion-filter-bar-wrap {
  margin: 10px auto 30px;
  position: relative;
  z-index: 5;
}

.motion-filter-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 12px 22px;
  background: rgba(10, 18, 38, 0.7);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.motion-filter-status {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.92rem;
  color: rgba(255, 255, 255, 0.85);
}

.motion-filter-indicator {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.55);
  text-transform: uppercase;
  font-size: 0.76rem;
  letter-spacing: 1px;
}

.motion-filter-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 14px;
  border-radius: 999px;
  background: rgba(255, 237, 0, 0.12);
  border: 1px solid rgba(255, 237, 0, 0.4);
  color: var(--yellowColor, #ffed00);
  font-weight: 700;
  font-size: 0.86rem;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.motion-filter-count {
  font-size: 0.84rem;
  color: rgba(255, 255, 255, 0.6);
}

.motion-reset-filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #ffffff;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.25s ease;
}

.motion-reset-filter-btn:hover {
  background: rgba(255, 237, 0, 0.15);
  border-color: var(--yellowColor, #ffed00);
  color: var(--yellowColor, #ffed00);
  transform: translateY(-1px);
}

.motion-card.is-filtered-out {
  display: none !important;
}

.motion-grid-section {
  width: 100vw;
  max-width: 100vw;
  margin: 15px 0 50px;
  padding: 0;
  position: relative;
  z-index: 2;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

.motion-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  width: 100vw;
  background: #000000;
}

.motion-card {
  position: relative;
  aspect-ratio: 16 / 9;
  width: 100%;
  border-radius: 0 !important;
  overflow: hidden;
  background: #020611;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: none;
  cursor: default;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.motion-card:hover {
  border-color: rgba(255, 237, 0, 0.6);
  box-shadow: inset 0 0 0 1px rgba(255, 237, 0, 0.3);
}

.motion-video-preview {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.motion-card:hover .motion-video-preview {
  transform: scale(1.025);
}

/* Bouton d'activation / désactivation du son sur chaque vidéo Motion Design */
.motion-sound-btn {
  position: absolute;
  right: 14px;
  bottom: 14px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(2, 6, 20, 0.75);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  padding: 0;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.25s ease, transform 0.25s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
  pointer-events: none;
}

/* Apparaît lorsqu'on regarde / survole la vidéo */
.motion-card:hover .motion-sound-btn,
.motion-card:focus-within .motion-sound-btn,
.motion-card.is-playing .motion-sound-btn,
.motion-sound-btn.is-unmuted {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.motion-sound-btn:hover {
  background: rgba(0, 0, 0, 0.92);
  border-color: #ffffff;
  color: #ffffff;
  transform: translateY(0) scale(1.1);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.6), 0 0 12px rgba(255, 255, 255, 0.35);
}

.motion-sound-btn:active {
  transform: translateY(0) scale(0.94);
}

.motion-sound-btn svg {
  width: 18px;
  height: 18px;
  stroke: #ffffff;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
  display: block;
}

/* Bascule entre icône son coupé et son activé */
.motion-sound-btn .sound-icon-unmuted {
  display: none;
}

.motion-sound-btn .sound-icon-muted {
  display: block;
}

.motion-sound-btn.is-unmuted .sound-icon-unmuted {
  display: block;
}

.motion-sound-btn.is-unmuted .sound-icon-muted {
  display: none;
}

.motion-sound-btn.is-unmuted {
  background: rgba(0, 144, 255, 0.88);
  border-color: #ffffff;
  box-shadow: 0 0 16px rgba(0, 144, 255, 0.6), 0 4px 14px rgba(0, 0, 0, 0.5);
}

.motion-sound-btn.is-unmuted:hover {
  background: rgba(0, 144, 255, 1);
  box-shadow: 0 0 22px rgba(0, 144, 255, 0.85), 0 6px 18px rgba(0, 0, 0, 0.6);
}

@media (max-width: 900px) {
  .motion-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .motion-page-header {
    padding: 130px 4% 30px;
  }
}

@media (max-width: 768px) {
  .motion-categories-section {
    width: 100% !important;
    max-width: 100% !important;
    margin: 5px 0 20px !important;
    padding: 0 !important;
    left: 0 !important;
    right: 0 !important;
    position: relative !important;
  }
  .motion-categories-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    width: 100% !important;
    gap: 0 !important;
    background: transparent !important;
  }
  .motion-category-card {
    width: 100% !important;
    aspect-ratio: 16 / 9 !important;
  }
  .motion-category-card:last-child:nth-child(odd) {
    grid-column: 1 / -1 !important;
    aspect-ratio: 32 / 9 !important;
    min-height: 110px !important;
  }
}

@media (max-width: 640px) {
  .motion-category-card-overlay {
    padding: 10px 6px;
  }
  .motion-category-title {
    font-size: 1.15rem;
    letter-spacing: 1px;
    margin-bottom: 3px;
  }
  .motion-category-subtitle {
    font-size: 0.62rem;
    letter-spacing: 1px;
  }
  .motion-filter-bar {
    padding: 10px 14px;
    flex-direction: column;
    align-items: flex-start;
  }
  .motion-grid-section {
    margin: 10px 0 35px;
  }
  .motion-hero-subtitle {
    margin-bottom: 20px;
  }
  .motion-sound-btn {
    right: 10px;
    bottom: 10px;
    width: 34px;
    height: 34px;
    opacity: 0.9;
    transform: translateY(0);
    pointer-events: auto;
  }
  .motion-sound-btn svg {
    width: 16px;
    height: 16px;
  }
}

/* ==========================================================================
   Page « Tournage » - Grille Plein Écran 3 Vidéos 16:9
   Même principe d'affichage que la page Publicité :
   - Vidéos en 16:9 bord à bord (100vw) sans bordure arrondie
   - Pas de texte par-dessus la preview
   - Pas d'autoplay
   - Clic pour ouvrir la régie/lightbox grand format
   ========================================================================== */

.tournage-page-header {
  padding: 160px 4% 45px;
}

.tournage-grid-section {
  width: 100vw;
  max-width: 100vw;
  margin: 15px 0 50px;
  padding: 0;
  position: relative;
  z-index: 2;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

.tournage-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  width: 100vw;
  background: #000000;
}

.tournage-card {
  position: relative;
  aspect-ratio: 16 / 9;
  width: 100%;
  border-radius: 0 !important;
  overflow: hidden;
  background: #020611;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: none;
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.35s ease, box-shadow 0.35s ease, z-index 0.35s ease;
  z-index: 1;
}

.tournage-card:hover {
  z-index: 5;
  border-color: rgba(255, 237, 0, 0.85);
  box-shadow: inset 0 0 0 2px var(--yellowColor, #ffed00);
}

.tournage-card:focus-visible {
  outline: 3px solid var(--yellowColor, #ffed00);
  outline-offset: -3px;
  z-index: 6;
}

.tournage-video-preview {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.tournage-card:hover .tournage-video-preview {
  transform: scale(1.04);
}

.tournage-card-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: rgba(0, 0, 0, 0.32);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 20px 14px;
  pointer-events: none;
  transition: background 0.4s ease;
}

.tournage-card:hover .tournage-card-overlay {
  background: rgba(0, 0, 0, 0.48);
}

.tournage-brand-title {
  font-size: clamp(1.2rem, 1.75vw, 2.2rem);
  font-weight: 900;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #ffffff;
  margin: 0 0 8px;
  line-height: 1.18;
  text-shadow: 0 3px 18px rgba(0, 0, 0, 0.95), 0 0 35px rgba(0, 0, 0, 0.75);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), text-shadow 0.4s ease;
  max-width: 92%;
}

.tournage-card:hover .tournage-brand-title {
  transform: scale(1.04);
  text-shadow: 0 4px 25px rgba(0, 0, 0, 1), 0 0 40px rgba(255, 237, 0, 0.45);
}

.tournage-brand-subtitle {
  font-size: clamp(0.65rem, 0.82vw, 0.88rem);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.8px;
  color: rgba(255, 255, 255, 0.88);
  margin: 0;
  max-width: 92%;
  line-height: 1.25;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.95);
}

@media (max-width: 900px) {
  .tournage-title-main {
    font-size: clamp(1.5rem, 3.4vw, 2.4rem) !important;
    white-space: nowrap !important;
  }
  .tournage-title-sub {
    font-size: clamp(1.4rem, 3.2vw, 2.2rem) !important;
    white-space: nowrap !important;
  }
  .tournage-brand-title {
    font-size: clamp(1.35rem, 3.2vw, 2rem);
  }
  .tournage-brand-subtitle {
    font-size: 0.75rem;
  }
  .tournage-grid {
    grid-template-columns: 1fr;
  }
  .tournage-page-header {
    padding: 130px 4% 30px;
  }
}

@media (max-width: 768px) {
  .tournage-grid-section {
    width: 100% !important;
    max-width: 100% !important;
    margin: 5px 0 25px !important;
    padding: 0 !important;
    left: 0 !important;
    right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    position: relative !important;
  }

  .tournage-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 0 !important;
    background: transparent !important;
  }

  .tournage-card {
    width: 100% !important;
    aspect-ratio: 16 / 9 !important;
  }

  .tournage-card-overlay {
    padding: 16px 12px !important;
  }

  .tournage-brand-title {
    font-size: clamp(1.15rem, 4.8vw, 1.6rem) !important;
    letter-spacing: 1px !important;
    margin-bottom: 4px !important;
  }

  .tournage-brand-subtitle {
    font-size: clamp(0.68rem, 2.2vw, 0.82rem) !important;
    letter-spacing: 1.2px !important;
  }
}

@media (max-width: 640px) {
  .tournage-title-main {
    font-size: clamp(0.96rem, 4.8vw, 1.45rem) !important;
    white-space: nowrap !important;
  }
  .tournage-title-sub {
    font-size: clamp(1.0rem, 5.0vw, 1.55rem) !important;
    white-space: nowrap !important;
  }
  .tournage-grid-section {
    width: 100% !important;
    max-width: 100% !important;
    margin: 5px 0 25px !important;
    padding: 0 !important;
    left: 0 !important;
    right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    position: relative !important;
  }

  .tournage-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 0 !important;
    background: transparent !important;
  }

  .tournage-card {
    width: 100% !important;
    aspect-ratio: 16 / 9 !important;
  }

  .tournage-brand-title {
    font-size: 1.15rem !important;
    letter-spacing: 0.8px !important;
    margin-bottom: 3px !important;
  }

  .tournage-brand-subtitle {
    font-size: 0.65rem !important;
    letter-spacing: 1px !important;
  }
}

/* ==========================================================================
   PAGE MONTAGE VIDÉO - GRILLE CRÉATEURS 16:9 (PRINCIPE PUBLICITÉ)
   Affiche la photo de profil, le pseudo et le nombre d'abonnés / fonction
   ========================================================================== */

.montage-grid-section {
  width: 100vw;
  max-width: 100vw;
  margin: 15px 0 50px;
  padding: 0;
  position: relative;
  z-index: 2;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

.montage-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  width: 100vw;
  background: #000000;
}

.montage-card {
  position: relative;
  aspect-ratio: 16 / 9;
  width: 100%;
  border-radius: 0 !important;
  overflow: hidden;
  background: #030712;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: none;
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.35s ease, box-shadow 0.35s ease, z-index 0.35s ease;
  z-index: 1;
}

.montage-card:hover {
  z-index: 5;
  border-color: rgba(255, 237, 0, 0.85);
  box-shadow: inset 0 0 0 2px var(--yellowColor, #ffed00);
}

.montage-card:focus-visible {
  outline: 3px solid var(--yellowColor, #ffed00);
  outline-offset: -3px;
  z-index: 6;
}

/* Arrière-plan atmosphérique avec photo floutée */
.montage-card-bg {
  position: absolute;
  inset: -15px;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

.montage-card-bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(28px) brightness(0.22) saturate(1.4);
  transform: scale(1.15);
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), filter 0.4s ease;
}

.montage-card:hover .montage-card-bg-img {
  transform: scale(1.22);
  filter: blur(24px) brightness(0.32) saturate(1.6);
}

/* Overlay de contenu de la carte */
.montage-card-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: radial-gradient(circle at center, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.72) 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: clamp(14px, 2.5vw, 32px);
  pointer-events: none;
  transition: background 0.4s ease;
}

.montage-card:hover .montage-card-overlay {
  background: radial-gradient(circle at center, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.55) 100%);
}

/* Avatar circulaire du créateur */
.montage-avatar-wrap {
  position: relative;
  width: clamp(62px, 5.2vw, 86px);
  height: clamp(62px, 5.2vw, 86px);
  border-radius: 50%;
  margin-bottom: clamp(6px, 0.9vw, 12px);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.7);
}

.montage-avatar-img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  border: 2.5px solid rgba(255, 255, 255, 0.3);
  transition: border-color 0.35s ease, box-shadow 0.35s ease;
}

.montage-card:hover .montage-avatar-wrap {
  transform: scale(1.08);
}

.montage-card:hover .montage-avatar-img {
  border-color: var(--yellowColor, #ffed00);
  box-shadow: 0 0 25px rgba(255, 237, 0, 0.45);
}

/* Pseudo du créateur */
.montage-creator-title {
  font-size: clamp(1.1rem, 1.4vw, 1.7rem);
  font-weight: 900;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #ffffff;
  margin: 0 0 6px;
  line-height: 1.15;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.95);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), text-shadow 0.4s ease;
  max-width: 92%;
}

.montage-card:hover .montage-creator-title {
  transform: scale(1.04);
  text-shadow: 0 4px 20px rgba(0, 0, 0, 1), 0 0 30px rgba(255, 237, 0, 0.35);
}

/* Sous-titre (Nombre d'abonnés ou fonction "Artiste") */
.montage-creator-subtitle {
  font-size: clamp(0.7rem, 0.85vw, 0.9rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--yellowColor, #ffed00);
  margin: 0;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.95);
}

/* Responsive Tablettes & Mobiles */
@media (max-width: 960px) {
  .montage-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .montage-creator-title {
    font-size: 1.25rem;
  }
  .montage-creator-subtitle {
    font-size: 0.75rem;
  }
}

@media (max-width: 600px) {
  .montage-grid-section {
    width: 100% !important;
    max-width: 100% !important;
    margin: 10px 0 35px !important;
    padding: 0 !important;
    left: 0 !important;
    right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    position: relative !important;
  }
  .montage-grid {
    grid-template-columns: 1fr;
  }
  .montage-card:nth-child(n) {
    grid-column: auto;
  }
  .montage-avatar-wrap {
    width: 68px;
    height: 68px;
  }
  .montage-creator-title {
    font-size: 1.15rem;
    letter-spacing: 1px;
  }
  .montage-creator-subtitle {
    font-size: 0.72rem;
    letter-spacing: 1.5px;
  }
}

/* ==========================================================================
   Page de chargement fictive (« Chargement de la timeline... ») avec volets ouvrants
   ========================================================================== */
body.preloader-active {
  overflow: hidden !important;
}

body.preloader-active .hero-portrait {
  animation-play-state: paused;
}

.site-preloader {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  user-select: none;
  overflow: hidden;
}

/* Volet ouvrant descendant vers le bas à la verticale */
.preloader-shutter {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at 50% 45%, #0d4396 0%, #07275c 60%, #041638 100%);
  z-index: 1;
  transition: transform 0.9s cubic-bezier(0.77, 0, 0.175, 1);
  will-change: transform;
  border-top: 2px solid rgba(255, 237, 0, 0.45);
  box-shadow: 0 -25px 60px rgba(0, 0, 0, 0.9);
}

/* Déclenchement de la disparition vers le bas */
.site-preloader.is-opening .preloader-shutter {
  transform: translateY(102%);
}

/* Contenu central du chargement */
.preloader-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  transition: opacity 0.28s ease, transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

.preloader-content.is-hidden {
  opacity: 0;
  transform: scale(0.92);
  pointer-events: none;
}

/* Triangle SVG parfaitement équilatéral centré qui tourne sur son axe exact */
.preloader-triangle-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 110px;
  height: 110px;
  margin-bottom: 22px;
}

.preloader-triangle {
  width: 95px;
  height: 95px;
  transform-origin: 50% 50%;
  animation: preloaderSpinCenter 2.2s linear infinite;
  will-change: transform;
  filter: drop-shadow(0 0 24px rgba(255, 237, 0, 0.65));
}

@keyframes preloaderSpinCenter {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.preloader-title {
  font-size: clamp(1.35rem, 2.4vw, 1.95rem);
  color: #ffffff;
  margin: 0 0 22px;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.85);
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.35em;
}

/* "Chargement de la" en police standard (Poppins) en blanc */
.preloader-phrase {
  font-family: var(--fontBody);
  font-weight: 600;
  color: #ffffff;
  letter-spacing: -0.01em;
}

/* "timeline" dans l'autre police ('bumbbled') en jaune */
.preloader-title .preloader-timeline-word {
  font-family: var(--fontDisplay);
  font-weight: 700;
  font-size: 1.12em;
  color: var(--yellowColor, #ffed00);
  text-shadow: 0 0 28px rgba(255, 237, 0, 0.75), 0 2px 10px rgba(0, 0, 0, 0.8);
  letter-spacing: 0.02em;
}

/* Barre de chargement en plus grand avec tête de lecture de timeline */
.preloader-timeline-widget {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: clamp(320px, 46vw, 520px);
  position: relative;
  margin: 0 auto;
}

.preloader-playhead-track {
  position: relative;
  width: 100%;
  height: 22px;
  margin-bottom: -3px;
  z-index: 4;
}

.preloader-playhead {
  position: absolute;
  top: 0;
  left: 0%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
  transition: left 0.05s linear;
  will-change: left;
}

.playhead-marker {
  display: block;
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.7)) drop-shadow(0 0 10px rgba(255, 237, 0, 0.75));
}

.playhead-line {
  width: 2px;
  height: 14px;
  background: #ffed00;
  box-shadow: 0 0 8px #ffed00;
  margin-top: -1px;
}

.preloader-progress-container {
  width: 100%;
  height: 9px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 99px;
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.6), 0 4px 16px rgba(0, 0, 0, 0.4);
}

.preloader-timeline-ticks {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: space-between;
  padding: 0 14px;
  align-items: center;
  pointer-events: none;
  opacity: 0.35;
  z-index: 1;
}

.preloader-timeline-ticks span {
  display: block;
  width: 1px;
  height: 4px;
  background: #ffffff;
}

.preloader-progress-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #0090ff 0%, #00d2ff 65%, #ffffff 100%);
  border-radius: 99px;
  box-shadow: 0 0 14px rgba(0, 210, 255, 0.8), 0 0 28px rgba(0, 144, 255, 0.45);
  transition: width 0.05s linear;
  position: relative;
  z-index: 2;
}

.preloader-counter {
  font-family: var(--fontDisplay);
  font-size: 0.95rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
  margin-top: 14px;
  letter-spacing: 0.05em;
}

/* Disparition complète une fois le volet ouvert */
.site-preloader.is-finished {
  display: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .site-preloader {
    display: none !important;
  }
}