@font-face {
  font-family: 'Roobert';
  src: url('/static/font/Roobert-Regular.woff2') format('woff2'),
       url('/static/font/Roobert-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Roobert';
  src: url('/static/font/Roobert-Medium.woff2') format('woff2'),
       url('/static/font/Roobert-Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Roobert';
  src: url('/static/font/Roobert-SemiBold.woff2') format('woff2'),
       url('/static/font/Roobert-SemiBold.otf') format('opentype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

body {
  font-family: 'Roobert', sans-serif;
} 

/* Hamburger menu styles */
#hamburger-icon-svg {
    opacity: 1;
    pointer-events: auto;
}

#cross-icon-svg {
    pointer-events: none; /* Reste non cliquable quand invisible */
}

#hamburger-button.sidebar-open #hamburger-icon-svg {
    opacity: 0;
    pointer-events: none;
}

#hamburger-button.sidebar-open #cross-icon-svg {
    opacity: 1 !important; /* !important pour surcharger le style inline opacity:0 */
    pointer-events: auto;
} 

/* Mobile language scroller styles */
#scrollContainer {
  display: flex;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

#scrollContainer::-webkit-scrollbar {
  display: none;
}

#scrollContainer>div {
  display: flex;
  flex-shrink: 0;
  min-width: 100%;
}

/* Spotlight effect styles */
[aria-label="spotlight-title"]::before {
  content: "";
  position: absolute;
  top: -25px;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background-image:
    radial-gradient(ellipse at 50% 25%,
      rgba(255, 255, 255, 0.12) 0%,
      rgba(255, 255, 255, 0) 70%),
    radial-gradient(ellipse at 50% 10%,
      rgba(255, 255, 255, 0.17) 0%,
      rgba(255, 255, 255, 0) 75%),
    radial-gradient(ellipse at 50% -5%,
      rgba(255, 255, 255, 0.22) 10%,
      rgba(255, 255, 255, 0) 75%);
  pointer-events: none;
} 

/* Styles pour l'effet d'arc - SANS variables CSS */

.arc-container {
  position: absolute; /* Vous avez 'absolute' de Tailwind, redéfinir ici est ok. */
  width: 130%; /* Équivalent à calc(100% * 1.30) */
  padding-bottom: 62%; /* Équivalent à calc(100% * 0.62), crée la hauteur de l'arc */
  left: -15%; /* Équivalent à calc(-50% * (1.30 - 1)) */
  border-top: 30px solid transparent; /* Était var(--arc-spacing) */
  border-left: 30px solid transparent; /* Était var(--arc-spacing) */
  border-right: 30px solid transparent; /* Était var(--arc-spacing) */
  /* Ajout de l'ombre principale, plus foncée, sur le conteneur lui-même */
  /* Cette ombre sera SOUS le ::before à cause du z-index du ::before */
  box-shadow: 0 0 0 9999px rgba(37, 99, 235, 0.2);
  /* rounded-t-full de Tailwind s'occupe du border-radius du conteneur.
     Si vous l'enlevez, ajoutez ici:
     border-top-left-radius: 9999px;
     border-top-right-radius: 9999px;
  */
}

.arc-container::before {
  content: "";
  position: absolute;
  top: 0%; /* Était var(--arc-spacing) */
  left: 0px; /* Était var(--arc-spacing) */
  right: 0px; /* Était var(--arc-spacing) */
  bottom: 0;
  border-top-left-radius: 9999px; /* Pour un arc très arrondi */
  border-top-right-radius: 9999px; /* Pour un arc très arrondi */
  /* Ombre du ::before, plus claire, et par-dessus grâce au z-index */
  box-shadow: 0 0 0 9999px rgba(37, 99, 235, 0.1); /* Couleur et opacité de l'ombre de l'arc */
  z-index: 1; /* Crucial pour que cette ombre soit au-dessus de celle du parent */
  pointer-events: none; /* Le pseudo-élément ne doit pas intercepter les clics */
} 

/* Scrollbar styles */
.scrollbar-hidden {
    scrollbar-width: thin;
    scrollbar-color: #9ca3af transparent;
    -webkit-overflow-scrolling: touch;
    overflow-y: scroll !important;
    height: 100%;
}

.scrollbar-hidden::-webkit-scrollbar {
    width: 8px;
    display: block;
}

.scrollbar-hidden::-webkit-scrollbar-track {
    background: transparent;
}

.scrollbar-hidden::-webkit-scrollbar-thumb {
    background-color: #9ca3af;
    /* gray-400 */
    border-radius: 20px;
    min-height: 40px;
}

.scrollbar-hidden::-webkit-scrollbar-thumb:hover {
    background-color: #6b7280;
    /* gray-500 */
}