/*______________________________________________________ROOT_______________________________________________________*/
:root {
  /* Brand core */
  --color-brand: #E00002;           /* Rouge primaire */
  --color-brand-600: #C10002;       /* Rouge hover/active */
  --color-brand-50: #FFF5F5;        /* Rouge très clair (fonds pâles) */
  --color-brand-100: #FFE5E6;       /* Rouge clair (badges/alertes soft) */

  /* Brand neutrals */
  --color-gray-brand: #3A3333;      /* Gris de marque (textes forts, logos) */
  --color-gray-ui: #2F2F2F;         /* Gris UI (header/footer/boutons dark) */
  --color-gray-900: #111827;        /* Texte principal */
  --color-gray-700: #374151;        /* Texte secondaire */
  --color-gray-500: #6B7280;        /* Métadonnées/labels */
  --color-gray-300: #D1D5DB;        /* Bordures légères */
  --color-gray-200: #E5E7EB;        /* Bordures/fonds */
  --color-gray-100: #F3F4F6;        /* Fond doux sections */
  --color-white: #FFFFFF;           /* Blanc pur */
  --color-black: #000000;           /* Noir pur */

  /* Typography */
  --color-text: var(--color-gray-900);
  --color-text-soft: var(--color-gray-700);
  --color-title: var(--color-brand); /* Couleur des h1/h2/h3 et titres */

  /* Background tokens */
  --bg-page: var(--color-white);
  --bg-soft: var(--color-gray-100);
  --bg-contrast: var(--color-gray-ui);
  --bg-accent: var(--color-brand-50);

  /* Links */
  --link: var(--color-brand);
  --link-hover: var(--color-brand-600);
  --link-invert: var(--color-white);
  --link-invert-hover: var(--color-brand-50);

  /* Buttons */
  --btn-primary-bg: var(--color-brand);
  --btn-primary-bg-hover: var(--color-brand-600);
  --btn-primary-text: var(--color-white);

  --btn-secondary-bg: var(--color-white);
  --btn-secondary-bg-hover: var(--color-gray-100);
  --btn-secondary-text: var(--color-gray-ui);

  --btn-dark-bg: var(--color-gray-ui);
  --btn-dark-bg-hover: #252525;
  --btn-dark-text: var(--color-white);

  /* Header states */
  --header-bg: transparent;
  --header-text: var(--color-white);
  --header-bg-scrolled: var(--color-gray-ui);
  --header-text-scrolled: var(--color-white);

  /* Forms */
  --input-bg: var(--color-white);
  --input-text: var(--color-text);
  --input-border: var(--color-gray-200);
  --input-border-focus: var(--color-brand);
  --input-ring: 0 0 0 4px rgba(224, 0, 2, 0.35); /* focus visible */

  /* Borders and dividers */
  --border-default: var(--color-gray-200);
  --border-strong: var(--color-gray-300);

  /* Shadows and radii */
  --radius-sm: .25rem;
  --radius-md: .375rem;
  --radius-lg: .5rem;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.06);
  --shadow-md: 0 4px 10px rgba(0,0,0,.12);
  --shadow-lg: 0 10px 25px rgba(0,0,0,.18);

  /* Transitions */
  --transition-fast: .15s ease;
  --transition-base: .2s ease;
  --transition-slow: .3s ease;
}

/*______________________________________________________BODY_______________________________________________________*/
body{
    height:100vh;
    -ms-overflow-style: none; 
      scrollbar-width: none;
      overflow-y: auto;
}

.text-shadow {
    text-shadow: 10px 10px 30px rgba(0, 0, 0, 1);
  }
/*_____________________________________________________HEADER______________________________________________________*/
header {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 30; 
}
/*____________________________________________BACKGROUND_VIDEO_HERO_SECTION________________________________________*/
.video-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  overflow: hidden;
}
.video-bg video {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.video-bg::after {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  backdrop-filter: blur(6px);
  z-index: 1;
}
 /*_______________________________________________ASCENSEUR_SCROLLBAR_______________________________________________*/
.custom-scrollbar {
  position: fixed;
  top: 0;
  right: 10px;
  width: 60px;
  height: 100%;
  overflow: hidden;
  z-index: 20; 
}
.elevator {
  position: absolute;
  width: 100%;
  margin-top: 128px;
  height: 100px; 
  background: url('../img/ascenseur_button.png') no-repeat center;
  background-size: cover;
  transition: top 0.1s ease-out;
}
::-webkit-scrollbar {
  display: none;
}
/*________________________________________________MEDIA_QUERIES______________________________________________________*/
@media (max-width: 768px) {
      .custom-scrollbar {
        display: none;}
      .video-bg::after{
  backdrop-filter: blur(1px);}}
  
@media (max-width: 1024px) {
.video-bg::after{
  backdrop-filter: blur(2px);}}