.overflow-hidden{ overflow-x:hidden; }

#page-transition-overlay {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  background: var(--background-inverted);
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  transform-origin: top left;
  /* PAS de transform ici → l'overlay couvre la page par défaut */
  pointer-events: none;
}

#page-transition-overlay-content {
  width: clamp(80px, 10vw, 140px);
  opacity: 1; /* visible par défaut, comme un loading screen */
}



.btn::after, .menu-cta::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-conic-gradient(
    var(--checked-btn-color) 0% 25%,
    transparent 0% 50%
  );
  background-size: var(--checked-size-btn) var(--checked-size-btn);
  mask-image: radial-gradient(circle at bottom right, black 30%, transparent 70%);
  z-index: -1; /* sous le texte mais au-dessus du fond */
  pointer-events: none;
}

.btn::before, .menu-cta::before { z-index: 1; }  /* hover fill — passe par-dessus la texture */
.btn::after, .menu-cta::after  { z-index: 0; }  /* texture — sous le fill */
.btn, .menu-cta        { z-index: 0; }

.btn, .menu-cta {
  position: relative;
  overflow: hidden;
  z-index: 0;
  transition: color 0.3s cubic-bezier(0.7, 0, 0.2, 1);
}

.btn::before, .menu-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background-color: var(--text);
  transform: translateX(-101%);
  transition: transform 0.3s cubic-bezier(0.7, 0, 0.2, 1);
  z-index: -1;
}

.btn:hover::before, .menu-cta:hover::before {
  transform: translateX(0);
}

.btn:hover, .menu-cta:hover {
  color: var(--text-inverted);
}






.checked-background {
  position: relative;
  isolation: isolate; /* creates stacking context without z-index */
  overflow-x:hidden;
}

.checked-background::before {
  content: '';
  position: absolute;
  inset: 0;
  transform: skewX(-15deg) scaleX(1.5) translateX(-3vw); /* scaleX compense les bords coupés */
  background-image: repeating-conic-gradient(
    var(--checked-bg-color) 0% 25%,
    transparent 0% 50%
  );
  background-size: var(--checked-size-hero) var(--checked-size-hero);
  mask-image: linear-gradient(
    105deg,
    transparent 0%,
    black 40%,
    transparent 100%
  );
  mask-size: 200% 100%;
  animation: flag-wave 24s ease-in-out infinite;
  pointer-events: none;
  z-index: -1;
}


.checked-background-adjusted::before{
transform: skewX(0) scaleX(1.5) translateX(0) !important; /* scaleX compense les bords coupés */
	
}

.checked-background-inverted {
  position: relative;
  isolation: isolate; /* creates stacking context without z-index */
  overflow-x:hidden;
}

.checked-background-inverted::before {
  content: '';
  position: absolute;
  inset: 0;
  transform: skewX(-15deg) scaleX(1.5) translateX(-3vw); /* scaleX compense les bords coupés */
  background-image: repeating-conic-gradient(
    var(--checked-bg-color-inverted) 0% 25%,
    transparent 0% 50%
  );
  background-size: var(--checked-size-hero) var(--checked-size-hero);
  mask-image: linear-gradient(
    105deg,
    transparent 0%,
    black 40%,
    transparent 100%
  );
  mask-size: 200% 100%;
  animation: flag-wave 24s ease-in-out infinite;
  pointer-events: none;
  z-index: -1;
}



@keyframes flag-wave {
  0%   { mask-position: 200% 0; opacity: 0.4; }
  50%  { mask-position: 0% 0;   opacity: 1;   }
  100% { mask-position: 200% 0; opacity: 0.4; }
}

.stripe-surface {
  --stripe-color-1: #1a1a1a;
  --stripe-color-2: #222222;
  --stripe-angle: 135deg;
  --stripe-width: 12px;

  background-image: repeating-linear-gradient(
    var(--stripe-angle),
    var(--stripe-color-1) 0px,
    var(--stripe-color-1) var(--stripe-width),
    var(--stripe-color-2) var(--stripe-width),
    var(--stripe-color-2) calc(var(--stripe-width) * 2)
  );
}


// GSAP SPLITFLAP
.anim-splitflap {
  display: inline-flex;
  flex-wrap: nowrap;            /* empêche le retour à la ligne */
  font-variant-numeric: tabular-nums;
  line-height: 1;
  /* pas de gap */
}

.anim-splitflap__slot {
  position: relative;
  display: inline-block;
  overflow: hidden;
  height: 1em;
  min-width: 1ch;               /* largeur d'un chiffre, ni plus ni moins */
  /* pas de background, pas de border-radius */
}

.anim-splitflap__track {
  display: flex;
  flex-direction: column;
  will-change: transform;
}

.anim-splitflap__cell {
  display: block;
  height: 1em;
  line-height: 1em;
  text-align: center;
  /* pas de padding */
}
/* Pliure centrale typique des split-flap */
.anim-splitflap__slot::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 0px;
  background: var(--brt-blue);
  pointer-events: none;
  z-index: 1;
}


// Graident
@keyframes hero-gradient-animation{0%{--c-0:hsla(308,100%,50%,1); --x-0:75%; --y-0:4%; --s-start-0:10%; --s-end-0:52%; --c-1:hsla(308,100%,50%,1); --x-1:89%; --y-1:80%; --s-start-1:5%; --s-end-1:72%;}100%{--c-0:hsla(308,95%,29%,1); --x-0:59%; --y-0:88%; --s-start-0:10%; --s-end-0:84%; --c-1:hsla(307.88283108405807,87%,31%,1); --x-1:55%; --y-1:28%; --s-start-1:0%; --s-end-1:59%;}}@property --c-0{syntax:'<color>';inherits:false;initial-value:hsla(308,100%,50%,1)}@property --x-0{syntax:'<percentage>';inherits:false;initial-value:75%}@property --y-0{syntax:'<percentage>';inherits:false;initial-value:4%}@property --s-start-0{syntax:'<percentage>';inherits:false;initial-value:10%}@property --s-end-0{syntax:'<percentage>';inherits:false;initial-value:52%}@property --c-1{syntax:'<color>';inherits:false;initial-value:hsla(308,100%,50%,1)}@property --x-1{syntax:'<percentage>';inherits:false;initial-value:89%}@property --y-1{syntax:'<percentage>';inherits:false;initial-value:80%}@property --s-start-1{syntax:'<percentage>';inherits:false;initial-value:5%}@property --s-end-1{syntax:'<percentage>';inherits:false;initial-value:72%}.gradient-bg-magenta{--c-0:hsla(308,100%,50%,1);--x-0:75%;--y-0:4%;--c-1:hsla(308,100%,50%,1);--x-1:89%;--y-1:80%;;background-color:hsla(308,97%,30%,1);background-image:radial-gradient(circle at var(--x-0) var(--y-0), var(--c-0) var(--s-start-0),transparent var(--s-end-0)),radial-gradient(circle at var(--x-1) var(--y-1), var(--c-1) var(--s-start-1),transparent var(--s-end-1));animation:hero-gradient-animation 10s linear infinite alternate;background-blend-mode:normal,normal;}


[data-anim="scrollCarousel"] {
  overflow: hidden;
  width: 100%;
  height: 100vh;
}

.carousel-track {
  will-change: transform;
}

.carousel-track__item{
	height: 100%;
  opacity: 0.2; /* état initial avant JS */
  transition: opacity 0.3s ease; /* optionnel — lisse le changement */
}