.elementor-kit-8{--e-global-color-primary:#BA024A;--e-global-color-secondary:#FFCC07;--e-global-color-text:#FFFFFF;--e-global-color-accent:#98033D;--e-global-color-dd1d06a:#48011D;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;}.elementor-kit-8 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:80.5vw;}.e-con{--container-max-width:80.5vw;}.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);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:95vw;}.e-con{--container-max-width:95vw;}}:root { --48011D:#48011D; --FFFFFF:#ffffff; --BA024A:#BA024A; --98033D:#98033D; --FFCC07:#FFCC07; --000000:#000000; --transparent:#ffffff00; --font-size-60px:3.75rem; --font-size-45px:2.813rem; }
/* Start custom CSS *//* ==========================================================================
   1. GENERAL
   ========================================================================== */

.header-principal,
.top-header {
  position: relative; /* Nécessaire pour que le z-index soit pris en compte */
  z-index: 999;
}
.pointer {cursor: pointer;}

@media screen and (max-width: 1025px) {
  .display-none-mobile {
    display: none !important;
  }
}
@media screen and (min-width: 1025px) {
  .display-none-desktop {
    display: none !important;
  }
}
/* ==========================================================================
   2. HEADER / FOOTER
   ========================================================================== */
/* Style pour écrans mobiles (jusqu'à 1024px inclus) */
@media screen and (max-width: 1024px) {
  .btn-inscription-mobile {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999;
    
    /* Masqué : transparent, décalé légèrement vers le haut et ininteragissable */
    opacity: 0;
    pointer-events: none;
    transform: translateY(-15px);
    
    /* Transition fluide avec une courbe d'amorti (cubic-bezier) */
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
                opacity 0.4s ease,
                box-shadow 0.4s ease;
  }

  /* État affiché au scroll */
  .btn-inscription-mobile.is-scrolled {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15); /* Ombre douce pour décoller l'élément */
  }
}

@media screen and (max-width: 1024px) {
  /* Conteneur fixe en bas du mobile */
  .container-btn-fixe-footer {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.15);
    transition: transform 0.05s linear; /* Suivi fluide pendant le défilement */
  }
}

/* --------------------------------------------------------------------------
   2.1 Base & Couleurs Initiales
   -------------------------------------------------------------------------- */

.btn-resultats,
.btn-panier,
.btn-inscription {
  transition: background-color 0.3s ease;
  overflow: hidden;
}

/* Application des couleurs initiales */
.btn-resultats {
  background-color: #BA024A;
}

.btn-panier {
  background-color: #98033D;
}

.btn-inscription {
  background-color: #FDCC05;
}



/* Transitions pour les icônes et le texte */
.btn-resultats .elementor-icon,
.btn-panier .elementor-icon,
.btn-inscription .elementor-icon,
.btn-resultats p,
.btn-panier p,
.btn-inscription p,
.btn-resultats a,
.btn-panier a,
.btn-inscription a {
  transition: transform 0.3s ease;
  display: inline-block;
}


/* --------------------------------------------------------------------------
   2.2 Hover & Animations au Survol
   -------------------------------------------------------------------------- */

/* Couleurs plus sombres sur-mesure au survol */
.btn-resultats:hover {
  background-color: #8E0138; /* Version assombrie de #BA024A */
}

.btn-panier:hover {
  background-color: #70022C; /* Version assombrie de #98033D */
}

.btn-inscription:hover {
  background-color: #DCA203; /* Version assombrie de #FDCC05 */
}

/* Agrandissement de l'icône au survol (+20%) */
.btn-resultats:hover .elementor-icon,
.btn-panier:hover .elementor-icon,
.btn-inscription:hover .elementor-icon {
  transform: scale(1.2);
}

/* Réduction du texte au survol (-10%) */
.btn-resultats:hover p,
.btn-panier:hover p,
.btn-inscription:hover p,
.btn-resultats:hover a,
.btn-panier:hover a,
.btn-inscription:hover a {
  transform: scale(0.9);
}


/* ==========================================================================

   3. BOUTONS AVEC FLÈCHE SVG (ANIMATION ROTATION 45DEG)

   ========================================================================== */



/* --------------------------------------------------------------------------

   3.1 Structure commune des boutons (.btn-cta-principal & .btn-commun-1)

   -------------------------------------------------------------------------- */



.btn-cta-principal,

.btn-commun-1 {

  display: inline-flex !important;

  align-items: center;

  justify-content: center;

  gap: 10px;

  transition: all 400ms ease-in-out !important;

  text-decoration: none;

  cursor: pointer;

}



/* Création de la flèche via le pseudo-élément ::after (18px x 15px) */

.btn-cta-principal::after,

.btn-commun-1::after {

  content: "";

  display: inline-block;

  width: 30px;

  height: 27px;

  flex-shrink: 0;

  -webkit-mask: url('https://www.nimesarchery.com/wp-content/uploads/2026/08/fleche-archery.svg') no-repeat center / contain;

  mask: url('https://www.nimesarchery.com/wp-content/uploads/2026/08/fleche-archery.svg') no-repeat center / contain;

  transform: rotate(0deg);

  transition: transform 400ms cubic-bezier(0.4, 0, 0.2, 1), background-color 400ms ease;

}





/* --------------------------------------------------------------------------

   3.2 Style & Hover - Bouton Inscription / CTA Principal (.btn-cta-principal)

   -------------------------------------------------------------------------- */

.btn-cta-principal {

  gap: 8px; /* Espacement de 8px avec le pseudo-élément ::after */

}

/* Flèche noire initialement */

.btn-cta-principal::after {

  background-color: #000000;

}



/* Rotation à 45deg et passage en blanc au survol */

.btn-cta-principal:hover::after {

  transform: rotate(45deg);

  background-color: var(--000000);

}





/* --------------------------------------------------------------------------

   3.3 Style & Hover - Bouton Commun 1 (.btn-commun-1)

   -------------------------------------------------------------------------- */

.btn-commun-1 {

  gap: 20px; /* Espacement de 20px avec le pseudo-élément ::after */

}

/* Flèche blanche initialement */

.btn-commun-1::after {

  background-color: #ffffff;

}



/* Rotation à 45deg et passage en noir au survol */

.btn-commun-1:hover::after {

  transform: rotate(45deg);

  background-color: var(--000000);

} 



/* ==========================================================================
   TITRES ET CONTENEURS AVEC ACCENT (.titre-border-br, .titre-border-br-white & .titre-border-br-container)
   ========================================================================== */

/* Structure commune */
.titre-border-br,
.titre-border-br-white,
.titre-border-br-container {
  position: relative !important;
  padding-right: 12px;
  padding-bottom: 12px;
  overflow: visible !important;
}

.titre-border-br,
.titre-border-br-white {
  display: inline-block;
}

.titre-border-br-container {
  display: block;
}

/* Pseudo-éléments : Réinitialisation commune */
.titre-border-br::before,
.titre-border-br-white::before,
.titre-border-br-container::before,
.titre-border-br::after,
.titre-border-br-white::after,
.titre-border-br-container::after {
  content: "" !important;
  position: absolute !important;
  top: auto !important;  /* Annule les styles Elementor */
  left: auto !important; /* Annule les styles Elementor */
  z-index: 2;
}

/* Offset des titres simples */
.titre-border-br::before,
.titre-border-br-white::before,
.titre-border-br::after,
.titre-border-br-white::after {
  bottom: -20px !important;
  right: -44px !important;
}

/* Offset spécifique du conteneur */
.titre-border-br-container::before,
.titre-border-br-container::after {
  bottom: -4px !important;
  right: -4px !important;
}

/* Trait vertical ::before */
.titre-border-br::before,
.titre-border-br-white::before,
.titre-border-br-container::before {
  width: 10px !important;
  height: 44px !important;
  transform-origin: bottom right;
  transform: scaleY(0);
}

/* Trait horizontal ::after */
.titre-border-br::after,
.titre-border-br-white::after,
.titre-border-br-container::after {
  width: 44px !important;
  height: 10px !important;
  transform-origin: bottom right;
  transform: scaleX(0);
}

/* Couleurs */
.titre-border-br::before,
.titre-border-br::after {
  background-color: #BA024A;
}

.titre-border-br-white::before,
.titre-border-br-white::after,
.titre-border-br-container::before,
.titre-border-br-container::after {
  background-color: #FFFFFF;
}

/* Animations au scroll (.in-view) */
.titre-border-br.in-view::before,
.titre-border-br-white.in-view::before,
.titre-border-br-container.in-view::before,
.in-view .titre-border-br-container::before {
  animation: traceVertical 400ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.titre-border-br.in-view::after,
.titre-border-br-white.in-view::after,
.titre-border-br-container.in-view::after,
.in-view .titre-border-br-container::after {
  animation: traceHorizontal 800ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes traceVertical {
  to { transform: scaleY(1); }
}

@keyframes traceHorizontal {
  to { transform: scaleX(1); }
}

/* ==========================================================================
   RESPONSIVE & FLÈCHES
   ========================================================================== */

@media (min-width: 1025px) {
  .carousel-programme .elementor-swiper-button {
    display: none !important;
  }
}

@media (max-width: 1024px) {
  .carousel-programme .elementor-swiper-button {
    display: flex !important;
  }
}

@media (max-width: 767px) {
  .carousel-programme .swiper-slide::before {
    display: none !important;
  }
}

/* ==========================================================================
   CAROUSEL PROGRAMME (.carousel-programme) - LIGNES DE CONNEXION
   ========================================================================== */

/* 1. Autoriser le débordement pour que les traits puissent sortir des slides */
.carousel-programme,
.carousel-programme .e-n-carousel,
.carousel-programme .swiper,
.carousel-programme .swiper-wrapper {
  overflow: visible !important;
}

/* 2. Positionnement des slides */
.carousel-programme .swiper-slide {
  position: relative;
}

/* 3. Placer les icônes au-dessus des traits */
.carousel-programme .elementor-icon-box-icon {
  position: relative;
  z-index: 5 !important;
}

/* 4. Configuration de la ligne (Calcul équilibré avec la marge Swiper) */
.carousel-programme .swiper-slide::before {
  content: "";
  position: absolute;
  top: 60px; /* Centre vertical des cercles rouges */
  left: calc(-50% + 62px);   /* Écart égal à gauche du cercle */
  width: calc(100% - 134px); /* Écart égal à droite du cercle */
  height: 3px;
  background-color: #BA024A;
  z-index: 1;
  
  transform-origin: left center;
  transform: scaleX(0); /* Masqué par défaut jusqu'au scroll */
}

/* 5. Supprimer la ligne avant la 1ère slide (14/01) */
.carousel-programme .swiper-slide:first-child::before,
.carousel-programme .swiper-slide[data-slide="1"]::before {
  display: none !important;
}

/* 6. Keyframes de l'animation */
@keyframes drawCarouselLine {
  0% { transform: scaleX(0); }
  100% { transform: scaleX(1); }
}

/* 7. DÉCLENCHEMENT AU SCROLL (Cibles HTML correctes : data-slide / nth-child) */
/* Trait 1 : entre 14/01 et 15/01 (sur la slide 2) */
.carousel-programme.in-view .swiper-slide[data-slide="2"]::before,
.carousel-programme.in-view .swiper-slide:nth-child(2)::before {
  animation: drawCarouselLine 500ms ease-out 300ms forwards;
}

/* Trait 2 : entre 15/01 et 16/01 (sur la slide 3) */
.carousel-programme.in-view .swiper-slide[data-slide="3"]::before,
.carousel-programme.in-view .swiper-slide:nth-child(3)::before {
  animation: drawCarouselLine 500ms ease-out 800ms forwards;
}

/* Trait 3 : entre 16/01 et 17/01 (sur la slide 4) */
.carousel-programme.in-view .swiper-slide[data-slide="4"]::before,
.carousel-programme.in-view .swiper-slide:nth-child(4)::before {
  animation: drawCarouselLine 500ms ease-out 1300ms forwards;
}

/* 8. Masquage Responsive sur mobile */
@media (max-width: 767px) {
  .carousel-programme .swiper-slide::before {
    display: none !important;
  }
}


/* 1. Préparation du conteneur parent */
.container-chiffre-cle {
  position: relative !important;
  overflow: hidden; /* Empêche l'arrière-plan de dépasser si la carte a des coins arrondis */
}

/* 2. Superposition du texte et gestion des transitions */
.container-chiffre-cle .chiffre-cle,
.container-chiffre-cle .texte-chiffre-cle {
  position: relative;
  z-index: 2; /* Place le texte au-dessus du fond d'arrière-plan */
  transition: color 0.3s ease;
}

/* 3. Masquer l'arrière-plan au repos et le positionner en absolu */
.container-chiffre-cle .background-hover-chiffre-cle {
  z-index: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none; /* Évite d'interférer avec la détection de la souris */
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* 4. Effets au survol du bloc parent */

/* Affichage progressif du fond */
.container-chiffre-cle:hover .background-hover-chiffre-cle {
  opacity: 1;
  visibility: visible;
}

/* Force la couleur blanche sur le chiffre Elementor et tous ses sous-éléments (numéros, préfixes, suffixes) */
.container-chiffre-cle:hover .chiffre-cle,
.container-chiffre-cle:hover .chiffre-cle * {
  color: #FFFFFF !important;
}
#ombre-jaune {
    box-shadow: 20px 20px 0 #FFD600;
}
#ombre-noire {
    box-shadow: 20px 20px 0 #000;
}

@media(max-width:767px){
    .elementor .cadre-img {
    padding-block-start: 41px!important;
    padding-inline-end: 50px !important;
   }
}
body, html{
    overflow-x: hidden;
}/* End custom CSS */