.elementor-kit-8{--e-global-color-primary:#E70101;--e-global-color-secondary:#0A0A0A;--e-global-color-text:#FFF0F0;--e-global-color-accent:#FAFAFA;--e-global-color-93ee90c:#FF9696;--e-global-color-bf7f6bd:#FF5A5A;--e-global-color-d5d635a:#FB0707;--e-global-typography-primary-font-family:"Inter";--e-global-typography-primary-font-size:60px;--e-global-typography-primary-font-weight:700;--e-global-typography-primary-line-height:60px;--e-global-typography-secondary-font-family:"Instrument Serif";--e-global-typography-secondary-font-size:60px;--e-global-typography-secondary-font-weight:500;--e-global-typography-secondary-font-style:italic;--e-global-typography-secondary-line-height:60px;--e-global-typography-text-font-family:"Inter Tight";--e-global-typography-text-font-size:18px;--e-global-typography-text-font-weight:400;--e-global-typography-text-line-height:28px;--e-global-typography-accent-font-family:"Inter Tight";--e-global-typography-accent-font-size:18px;--e-global-typography-accent-font-weight:500;--e-global-typography-accent-line-height:28px;background-color:var( --e-global-color-secondary );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-size:var( --e-global-typography-text-font-size );font-weight:var( --e-global-typography-text-font-weight );line-height:var( --e-global-typography-text-line-height );}.elementor-kit-8 e-page-transition{background-color:#FFBC7D;}.elementor-kit-8 h1{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-size:var( --e-global-typography-text-font-size );font-weight:var( --e-global-typography-text-font-weight );line-height:var( --e-global-typography-text-line-height );}.elementor-kit-8 h2{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-size:var( --e-global-typography-accent-font-size );font-weight:var( --e-global-typography-accent-font-weight );line-height:var( --e-global-typography-accent-line-height );}.elementor-kit-8 h3{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-size:var( --e-global-typography-text-font-size );font-weight:var( --e-global-typography-text-font-weight );line-height:var( --e-global-typography-text-line-height );}.elementor-kit-8 h4{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-size:var( --e-global-typography-accent-font-size );font-weight:var( --e-global-typography-accent-font-weight );line-height:var( --e-global-typography-accent-line-height );}.elementor-kit-8 h5{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-size:var( --e-global-typography-text-font-size );font-weight:var( --e-global-typography-text-font-weight );line-height:var( --e-global-typography-text-line-height );}.elementor-kit-8 h6{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-size:var( --e-global-typography-text-font-size );font-weight:var( --e-global-typography-text-font-weight );line-height:var( --e-global-typography-text-line-height );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1024px){.elementor-kit-8{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}.elementor-kit-8 h1{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}.elementor-kit-8 h2{font-size:var( --e-global-typography-accent-font-size );line-height:var( --e-global-typography-accent-line-height );}.elementor-kit-8 h3{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}.elementor-kit-8 h4{font-size:var( --e-global-typography-accent-font-size );line-height:var( --e-global-typography-accent-line-height );}.elementor-kit-8 h5{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}.elementor-kit-8 h6{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-kit-8{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}.elementor-kit-8 h1{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}.elementor-kit-8 h2{font-size:var( --e-global-typography-accent-font-size );line-height:var( --e-global-typography-accent-line-height );}.elementor-kit-8 h3{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}.elementor-kit-8 h4{font-size:var( --e-global-typography-accent-font-size );line-height:var( --e-global-typography-accent-line-height );}.elementor-kit-8 h5{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}.elementor-kit-8 h6{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}
/* Start custom CSS *//* ============================================================
   CARROUSEL HERO BACKGROUND — carousel-hero.css
   À coller dans : Elementor > Personnaliser > CSS Additionnel
   OU dans le champ CSS Personnalisé de ta Section Hero
   ============================================================ */

/* -------------------------------------------------------
   VARIABLES — MODIFIE ICI TA PALETTE
   ------------------------------------------------------- */
:root {
  --carousel-card-width: 340px;          /* largeur d'une vignette */
  --carousel-card-height: 192px;         /* hauteur d'une vignette (ratio 16/9) */
  --carousel-gap: 16px;                  /* espace entre vignettes */
  --carousel-border-radius: 12px;        /* arrondi des coins */
  --carousel-speed-fast: 35s;            /* vitesse rangée 1 et 3 */
  --carousel-speed-slow: 50s;            /* vitesse rangée 2 (inverse) */

  /* ---- OVERLAY SOMBRE : joue sur l'opacité ici ---- */
  --overlay-color: rgba(10, 10, 10, 0.79);   /* fond sombre principal */
  --overlay-gradient-start: rgba(10, 10, 10, 0.90); /* bords latéraux opaques */

  /* ---- TES COULEURS (exemples neutres — remplace par ta palette) ---- */
  --brand-primary:   #E8001C;   /* rouge vif */
  --brand-secondary: #FF4D00;   /* orange */
  --brand-dark:      #0A0A0A;   /* noir profond */
  --brand-light:     #FFFFFF;   /* blanc */
}

/* -------------------------------------------------------
   WRAPPER GLOBAL
   ------------------------------------------------------- */
.carousel-bg-wrapper {
  position: absolute;         /* ← clé : se positionne dans la section */
  inset: 0;                   /* couvre toute la section hero */
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
  z-index: 0;                 /* derrière le contenu Elementor */
  pointer-events: none;       /* n'intercepte pas les clics */
  padding: 20px 0;
}

/* -------------------------------------------------------
   OVERLAY (assombrit + colore légèrement l'arrière-plan)
   ------------------------------------------------------- */
.carousel-overlay {
  position: absolute;
  inset: 0;
  background: var(--overlay-color);
  z-index: 2;
  pointer-events: none;
}

/* Masques flous sur les bords gauche/droite (fondu élégant) */
.carousel-bg-wrapper::before,
.carousel-bg-wrapper::after {
  content: '';
  position: absolute;
  top: 0;
  width: 120px;
  height: 100%;
  z-index: 3;
  pointer-events: none;
}
.carousel-bg-wrapper::before {
  left: 0;
  background: linear-gradient(
    to right,
    var(--brand-dark) 0%,
    transparent 100%
  );
}
.carousel-bg-wrapper::after {
  right: 0;
  background: linear-gradient(
    to left,
    var(--brand-dark) 0%,
    transparent 100%
  );
}

/* -------------------------------------------------------
   TRACK WRAPPER — chaque rangée
   ------------------------------------------------------- */
.carousel-track-wrapper {
  overflow: hidden;
  width: 100%;
  position: relative;
  z-index: 1;
}

/* -------------------------------------------------------
   TRACK — la bande qui défile
   ------------------------------------------------------- */
.carousel-track {
  display: flex;
  gap: var(--carousel-gap);
  width: max-content;
  will-change: transform;     /* optimisation GPU */
}

/* Rangée vers la gauche */
.track-left {
  animation: scrollLeft var(--carousel-speed-fast) linear infinite;
}

/* Rangée vers la droite */
.track-right {
  animation: scrollRight var(--carousel-speed-slow) linear infinite;
}

/* Variante lente (rangée 3) */
.track-slow {
  animation-duration: 55s;
}

/* -------------------------------------------------------
   CARTES / VIGNETTES
   ------------------------------------------------------- */
.carousel-card {
  flex-shrink: 0;
  width: var(--carousel-card-width);
  height: var(--carousel-card-height);
  border-radius: var(--carousel-border-radius);
  overflow: hidden;
  position: relative;
  /* Légère brillance de bordure */
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.07),
    0 4px 24px rgba(0,0,0,0.45);
  transition: transform 0.3s ease;
}

.carousel-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* légère désaturation pour ne pas voler la vedette au contenu */
  filter: saturate(0.85) brightness(0.9);
  transition: filter 0.3s ease;
}

/* -------------------------------------------------------
   ANIMATIONS
   ------------------------------------------------------- */
@keyframes scrollLeft {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }   /* -50% car on a dupliqué les items */
}

@keyframes scrollRight {
  0%   { transform: translateX(-50%); }
  100% { transform: translateX(0); }
}

/* Pause au survol (optionnel — tu peux supprimer) */
.carousel-track-wrapper:hover .carousel-track {
  animation-play-state: paused;
}

/* -------------------------------------------------------
   RESPONSIVE
   ------------------------------------------------------- */

/* Tablette */
@media (max-width: 1024px) {
  :root {
    --carousel-card-width: 260px;
    --carousel-card-height: 146px;
    --carousel-gap: 12px;
  }
  .carousel-bg-wrapper {
    gap: 14px;
  }
}

/* Mobile */
@media (max-width: 768px) {
  :root {
    --carousel-card-width: 200px;
    --carousel-card-height: 113px;
    --carousel-gap: 10px;
    --carousel-speed-fast: 25s;
    --carousel-speed-slow: 38s;
  }
  .carousel-bg-wrapper {
    gap: 10px;
    padding: 0;                   /* ✅ supprime le padding vertical */
    justify-content: flex-start;  /* ✅ colle les rangées en haut */
    align-items: stretch;
  }
  /* ✅ CORRECTION : suppression du display:none qui cachait la 3ème rangée */
  .carousel-bg-wrapper::before,
  .carousel-bg-wrapper::after {
    width: 60px;
  }
}

/* -------------------------------------------------------
   INTÉGRATION ELEMENTOR
   La section hero doit avoir :
     position: relative  (Elementor le fait nativement)
   Et le contenu de ta section doit avoir :
     position: relative; z-index: 10;
   ------------------------------------------------------- */
@keyframes wave {
  0%   { border-radius: 45% 55% 40% 60% / 45% 45% 55% 55%; }
  25%  { border-radius: 55% 45% 60% 40% / 55% 35% 65% 45%; }
  50%  { border-radius: 40% 60% 45% 55% / 35% 55% 45% 65%; }
  75%  { border-radius: 60% 40% 55% 45% / 65% 45% 55% 35%; }
  100% { border-radius: 45% 55% 40% 60% / 45% 45% 55% 55%; }
}

#hero-titre-yt .elementor-heading-title {
  display: block;
  text-align: center;
}

#hero-titre-yt .elementor-heading-title .letter {
  display: inline-block;
  opacity: 0;
  filter: blur(8px);
  transform: translateY(14px);
  animation: letterFadeIn 0.20s forwards ease-out;
}

#hero-titre-yt .elementor-heading-title .space-char {
  display: inline-block;
  width: 0.3em;
}

@keyframes letterFadeIn {
  to {
    opacity: 1;
    filter: blur(0px);
    transform: translateY(0);
  }
}/* End custom CSS */