/* Regular (200) */
@font-face {
  font-family: "TradeGothicNextRegular";
  src:
    url("/css/typo/TradeGothicNextLTW05-Rg.woff2") format("woff2"),
    url("/css/typo/TradeGothicNextLTW05-Rg.woff") format("woff"),
    url("/css/typo/TradeGothicNextLTPro-Rg.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap; /* évite le flash invisible */
}

/* Condensed */
@font-face {
  font-family: "TradeGothicNextCond";
  src:
    url("/css/typo/TradeGothicNextLTW05-Cond.woff2") format("woff2"),
    url("/css/typo/TradeGothicNextLTW05-Cond.woff") format("woff"),
    url("/css/typo/TradeGothicNextLTPro-Cn.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap; /* évite le flash invisible */  
}

/* Light */
@font-face {
  font-family: "TradeGothicNextLight";
  src:
    url("/css/typo/TradeGothicNextLTW05-Light.woff2") format("woff2"),
    url("/css/typo/TradeGothicNextLTW05-Light.woff") format("woff"),
    url("/css/typo/TradeGothicNextLTPro-Lt.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap; /* évite le flash invisible */  
}

/* (optionnel) Italic, autres graisses = mêmes patterns */

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  width: 100%; height: 100%; overflow: hidden;
  background-image: url("../images/background.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  font-family: "TradeGothicNextLight", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  touch-action: auto;
}
h1 {
  font-family: "TradeGothicNextLight", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}
.container {
  display: flex;
  height: calc(100% - 300px);
  width: 100%;
  background: none;
  border-radius: 16px;
}

.content {
  width: 100%;
  overflow-y: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
  overflow-x: hidden;
  border-radius: 16px;
}
.carousel {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%; height: 100%;
  position: relative;
}

.carousel {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* TEST */

/* Base : un seul positionnement et une seule taille pour TOUTES les .item */
.item {
  position: absolute;
  width: 2250px;
  height: 2120px;
  left: calc(50% - 1125px);
  top:  calc(50% - 1060px);

  /* Animations only GPU-friendly */
  transition: transform 600ms ease, opacity 600ms ease;
  will-change: transform, opacity;
  transform-origin: center center;

  /* (Optionnel) améliore la stabilité de rendu */
  backface-visibility: hidden;
  contain: layout paint;
}

/* Le wrapper reste cliquable pour le slide */
.item.left, .item.right { pointer-events: auto; cursor: pointer; }

/* Mais tout le contenu interne est inactif tant que l'item est sur un côté */
.item.left *,.item.right * { pointer-events: none !important; }

/* États visuels : UNIQUEMENT transform/opacity/z-index */
.center {
  z-index: 3;
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1); /* grand panneau centré */
}

/* Cibles pour les vignettes à gauche/droite :
   - position visuelle voulue = left:50px et right:50px
   - top visuelle voulue = calc(50% - 425px)
   - taille vignette voulue = 700×850
   On y parvient par un translate depuis la base (centrée) + un scale non uniforme. */


/* Gauche : déplacer depuis la base centrée vers "left:50px" */
.left {
  transform:
    translate3d(calc(-1520px), 0, 0)
    scale(0.31, 0.31);
}

/* Droite : déplacer depuis la base centrée vers "right:50px"
   => left cible = calc(100% - 700px - 50px) */
.right {
  transform:
    translate3d(1520px, 0, 0)
    scale(0.31, 0.31);
}

.left, .right {
  z-index: 2;
  opacity: 0.8;
  /* scale exact pour passer de 2250×2120 -> 700×850 */
  /* 700/2250 ≈ 0.3111 ; 850/2120 ≈ 0.4019 */
  /* Le translateY est identique à gauche/droite : 
     (50% - 425) - (50% - 1060) = 635px */
}


/* (Optionnel) états hors-champ pour préparer le slide sans flash */
.off-left {
  z-index: 1;
  opacity: 0;
  transform:
    translate3d(calc(-100vw), 0, 0)
    scale(0.31, 0.31);
}
.off-right {
  z-index: 1;
  opacity: 0;
  transform:
    translate3d(calc(100vw), 0, 0)
    scale(0.31, 0.31);
}


/* 
.left .logo img {
  height: 230%;
  margin-top: -200px; 
} */



/*
.center {
  width: 2250px; height: 2120px;
  z-index: 3;
  left: calc(50% - 1125px);
  top: calc(50% - 1060px);
  transform: scale(1);
}
.left, .right {
  width: 700px; height: 850px;
  z-index: 2;
  opacity: 0.8;
  top: calc(50% - 425px);
  transform: scale(0.8);
}
.left {
  left: 50px;
}
.right {
  right: 50px;
} */



/* --- Overlay d'inactivité --- */
#idle-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  background: rgba(0,0,0,0.5);           /* opacité très légère */
  backdrop-filter: blur(0.5px);           /* optionnel */
  color: #fff;
  opacity: 0;
  pointer-events: none;                   /* inactif tant qu’invisible */
  transition: opacity .25s ease;
}
#idle-overlay.is-visible {
  opacity: 1;
  pointer-events: auto;                   /* capte le premier toucher pour fermer */
}

/* Contenu centré */
#idle-overlay .idle-content {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 400px;
  align-items: center;
  text-align: center;
  padding: 14px 18px;
  border-radius: 14px;
  /* background: rgba(0,0,0,0.18); */
}

/* Main qui se balade + tap */
#idle-overlay .hand {
  font-size: 100px;                        /* 👆🏻 */
  line-height: 1;
  user-select: none;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.35));
  animation:
    wander 8s ease-in-out infinite,
    tap 1.4s ease-in-out infinite;
}

/* Légers cercles de ripple sous la main */
#idle-overlay .ripples::before,
#idle-overlay .ripples::after {
  content: "";
  position: absolute;
  width: 400px; height: 400px;
  border-radius: 9999px;
  /* border: 10px solid rgba(255,255,255,1); */
  border: 10px solid #0ac5ba;
  left: 50%; top: 50%;
  transform: translate(-50%,-50%) scale(0.7);
  opacity: .6;
  animation: pulse 2s ease-out infinite;
}
#idle-overlay .ripples::after {
  width: 120px; height: 120px;
  border-color: rgba(255,255,255,.25);
  animation-delay: .5s;
}

#idle-overlay .label {
  font-size: 90px;
  font-weight: 600;
  letter-spacing: .02em;
  text-shadow: 0 1px 2px rgba(0,0,0,.35);
}

/* Animations */
@keyframes wander {
  0%   { transform: translate(-18vw,-8vh)  rotate(0deg); }
  25%  { transform: translate(-6vw, 10vh)  rotate(-6deg); }
  50%  { transform: translate(10vw, 4vh)   rotate(4deg); }
  75%  { transform: translate(6vw,-10vh)   rotate(-3deg); }
  100% { transform: translate(-18vw,-8vh)  rotate(0deg); }
}
@keyframes tap {
  0%,100% { transform-origin: center bottom; }
  45%     { transform: translateY(2px) scale(0.98); }
}
@keyframes pulse {
  0%   { transform: translate(-50%,-50%) scale(0.7); opacity:.6; }
  100% { transform: translate(-50%,-50%) scale(1.2); opacity:0; }
}

/* Respecte la réduction d’animations */
@media (prefers-reduced-motion: reduce) {
  #idle-overlay .hand,
  #idle-overlay .ripples::before,
  #idle-overlay .ripples::after { animation: none; }
}