/* ---------- RESET CSS ----------*/
/* enlever les marges naturelles + reset du body/html */
html, body {
    margin: 0 auto;
    padding: 0;
    border: 0;
    box-sizing: border-box;
    }
    
    *, *:before, *:after {
    box-sizing: inherit;
    }
    
    /* enlever le style des listes */
    ul, ol {
    margin: 0 auto;
    padding: 0;
    list-style: none;
    }
    
    /* corriger l’affichage des images */
    img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
    }

    * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;

}

body {
  margin: 0;
}

/* Contenu utile à Google et aux lecteurs d'écran, invisible à l'affichage */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------------- CHARTE GRAPHIQUE NEBULIGHT ----------------*/
/* Source unique de vérité pour tout le site : couleurs, dégradé de marque,
   glassmorphism, typographie, forme et rythme d'espacement.
   Les autres fichiers CSS consomment ces tokens — ils ne redéfinissent
   plus leur propre :root. */
:root{
    /* Couleurs de marque */
    --violet:       #3e00ff;
    --violet-light: #6743ff;
    --white:        #fffffa;
    --creme:        #e0d7c1;
    --black:        #000000;
    --grey:         #1d1d1b;

    /* Dégradé Nebulight */
    --gradient-1: #3e00ff;
    --gradient-2: #bc0084;
    --gradient-3: #ef1800;
    --gradient-4: #ffac0e;
    --gradient-nebulight: linear-gradient(135deg,
        var(--gradient-1) 0%,
        var(--gradient-2) 33%,
        var(--gradient-3) 66%,
        var(--gradient-4) 100%);

    /* Fond / texte */
    --bg:        var(--black);
    --text-dim:  rgba(255, 255, 250, 0.55);
    /* 0.48 et non 0.35 : en dessous de 0.46 le contraste sur fond noir tombe
       à 3:1, sous le minimum WCAG AA de 4.5:1 pour du texte de petite taille
       (mentions « Sur devis », « Étape 1 »… en 12-13 px sur /services). */
    --text-faint: rgba(255, 255, 250, 0.48);

    /* Compat : anciens alias encore utilisés comme nuances de texte secondaire */
    --gray:       var(--grey);
    --gray-light: var(--text-dim);
    --border:     rgba(255, 255, 250, 0.1);

    /* Glassmorphism (charte) */
    --glass-bg:     rgba(12, 12, 12, 0.555);
    --glass-border: rgba(255, 255, 250, 0.2);
    --glass-blur:   7.5px;
    --glass-radius: 16px;
    --glass-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);

    /* Typographie */
    --font-base: 'Inter', 'Inter Fallback', sans-serif;
    --fw-heading:   900; /* Inter Black — H1, H2 */
    --fw-body:      200; /* Inter ExtraLight — paragraphes */

    /* Forme */
    --radius:       20px;
    --border-color: var(--white);

    /* Rythme d'espacement (échelle régulière, réutilisable partout) */
    --space-3xs: 0.25rem;
    --space-2xs: 0.5rem;
    --space-xs:  0.75rem;
    --space-sm:  1rem;
    --space-md:  1.5rem;
    --space-lg:  2rem;
    --space-xl:  3rem;
    --space-2xl: 4rem;
    --space-3xl: 6rem;

    --desktop-padding:      var(--space-2xl);
    --desktop-text-margin:  var(--space-md);
    --mobile-padding:       var(--space-lg);
    --mobile-text-margin:   var(--space-sm);
}

.container {
    width: 100%;
    max-width:100%;
    margin-right: auto;
    margin-left: auto;
    padding-left: var(--desktop-padding);
    padding-right: var(--desktop-padding);
}

/* Bouton fantôme, contour blanc — variante secondaire utilisée partout sur le site */
.btn.btn-white {
    display: inline-block;
    color: var(--white);
    background-color: transparent;
    text-decoration: none;
    padding: 10px 30px;
    border: solid 1px var(--white);
    border-radius: var(--radius);
    transition: all 0.6s ease-in;
}
.btn.btn-white:hover {
    color: var(--black);
    background-color: var(--white);
}

.glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(200px);
  pointer-events: none;
}
.sun-light {
    width: 400px;
    height: 400px;
    background: rgba(255, 172, 14, 0.4); /* --gradient-4, teinte "soleil" du dégradé Nebulight */
    /* right: 0 et non -30px : ce halo est un enfant direct de body, un décalage
       négatif provoquait un défilement horizontal de 30px sur toutes les pages.
       Le flou de 200px rend le décalage invisible. */
    right: 0;
    top: 50%;
}


/* ---------------- Font ----------------*/

body {
  background: var(--bg);
  color: var(--white);
  font-family: var(--font-base);
  /* position: relative pour que les halos décoratifs en position: absolute
     (.glow, .sun-light, les orbes des héros) soient rattachés au body et donc
     rognés par overflow-x. Sans cela leur bloc conteneur est le viewport et
     ils provoquent un défilement horizontal sur mobile. */
  position: relative;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

body.menu-open {
  overflow: hidden;
}

/* ------------------- SÉLECTION DE TEXTE ----------------------------------------------------- */
/* ::selection ne supporte pas les dégradés : on retient le violet de marque. */
::selection {
  background: var(--violet);
  color: var(--white);
}
::-moz-selection {
  background: var(--violet);
  color: var(--white);
}

/* Charte : Titres H1/H2 en Inter Black, paragraphes en Inter ExtraLight.
   Base par défaut — chaque section peut surcharger ponctuellement pour
   des besoins de hiérarchie (ex : lead, reassure...). */
h1, h2 {
  font-family: var(--font-base);
  font-weight: var(--fw-heading);
}
p {
  font-family: var(--font-base);
  font-weight: var(--fw-body);
}

/* ------------------- SCROLLBAR ------------------------------------------------------------------------------------- */
/* Scrollbar des conteneurs internes (ex. menu plein écran scrollable) :
   fine, sans flèches, couleurs de marque. */
*::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

*::-webkit-scrollbar-track {
  background: transparent;
}

*::-webkit-scrollbar-thumb {
  background-color: var(--violet-light);
  background-image: linear-gradient(180deg,
      var(--gradient-1) 0%,
      var(--gradient-2) 40%,
      var(--gradient-3) 70%,
      var(--gradient-4) 100%);
  background-clip: padding-box;
  border: 2px solid var(--bg);
  border-radius: 999px;
}

*::-webkit-scrollbar-button {
  display: none;
  width: 0;
  height: 0;
}

/* Scrollbar de la page elle-même : masquée, remplacée par la jauge de
   progression .scrollbar-track / .scrollbar-fill (voir script.js). */
html {
  scrollbar-width: none;
}
html::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.scrollbar-track {
  position: fixed;
  top: 0;
  right: 0;
  width: 6px;
  height: 100vh;
  background: var(--glass-bg);
  border-left: 1px solid rgba(255, 255, 250, 0.3);
  box-shadow: var(--glass-shadow);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  touch-action: none;
  z-index: 300;
}

.scrollbar-fill {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0%;
  border-radius: 0 0 3px 3px;
  background: linear-gradient(to bottom, rgba(255, 255, 250, 0.85), var(--white));
}

/* Halo au bord d'attaque du remplissage : même recette que .glow / .ball
   (cercle plein + flou, pas de dégradé) — un cœur net posé sur une
   diffusion plus large, pour un rendu de lumière crédible. */
.scrollbar-fill::before,
.scrollbar-fill::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  border-radius: 50%;
  background: var(--white);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.scrollbar-fill::before {
  width: 8px;
  height: 8px;
  transform: translate(-50%, 25%);
  filter: blur(2px);
}

.scrollbar-fill::after {
  width: 30px;
  height: 30px;
  transform: translate(-50%, 35%);
  filter: blur(13px);
}

.scrollbar-fill.is-active::before {
  opacity: 0.9;
}

.scrollbar-fill.is-active::after {
  opacity: 0.5;
}

body.menu-open .scrollbar-track {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

@media (max-width: 767px) {
  .scrollbar-track { display: none; }
}

/* ------------------Noise ------------------------ */

/* body {
  background-color: black;
  margin: 0;
  overflow-x: hidden;
}

#noise {
  position: fixed;
  top: -50%;
  left: -50%;
  right: -50%;
  bottom: -50%;
  width: 200%;
  height: 200vh;
  background: transparent url('../img/noise-transparent.png') repeat 0 0;
  background-repeat: repeat;
  animation: bg-animation .2s infinite;
  opacity: .9;
  visibility: visible;
}

@keyframes bg-animation {
    0% { transform: translate(0,0) }
    10% { transform: translate(-5%,-5%) }
    20% { transform: translate(-10%,5%) }
    30% { transform: translate(5%,-10%) }
    40% { transform: translate(-5%,15%) }
    50% { transform: translate(-10%,5%) }
    60% { transform: translate(15%,0) }
    70% { transform: translate(0,10%) }
    80% { transform: translate(-15%,0) }
    90% { transform: translate(10%,5%) }
    100% { transform: translate(5%,0) }
} */

/* ------------------- CURSOR-------------------------------------------------------------------------------------------- */
/* Le curseur système n'est masqué que là où le curseur personnalisé s'affiche
   réellement : pointeur fin, survol possible, écran large. Sans cette
   condition, une tablette munie d'une souris se retrouvait sans aucun
   curseur, #cursor étant par ailleurs masqué sous 768 px. */
@media (min-width: 769px) and (hover: hover) and (pointer: fine) {
  html, body {
    cursor: none !important;
  }
  * {
      cursor: none !important;
  }
}

#cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 10px;
  height: 10px;
  background: var(--white);
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%);
  z-index: 9999;
  mix-blend-mode: difference;
  transition: width 0.8s ease, height 0.8s ease, transform 0.8s ease;
}

#cursor.hover {
  width: 80px;
  height: 80px;
}

.cursor-hidden {
  opacity: 0;
}

/* Masqué par défaut, affiché dans les mêmes conditions que la règle
   cursor: none plus haut. */
#cursor {
  display: none;
}
@media (min-width: 769px) and (hover: hover) and (pointer: fine) {
  #cursor {
    display: block;
  }
}


/* Cercle fin autour */
.cursor-outer {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40px;
  height: 40px;
  border: 1px solid var(--white);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  mix-blend-mode: difference;
}

/* Petit rond qui tourne */
.cursor-orbit {
  position: absolute;
  top: 43%;
  left: 43%;
  width: 5px;
  height: 5px;
  background: var(--white);
  border-radius: 50%;
  transform: translateX(-50%);
  animation: orbit 3s linear infinite;
  mix-blend-mode: difference;
}

/* Animation rotation */
@keyframes orbit {
  from {
    transform: rotate(0deg) translateX(26px);
  }
  to {
    transform: rotate(360deg) translateX(26px);
  }
}



/* ------------------- LOADER -------------------------------------------------------------------------------------------- */
/* Écran d'entrée plein écran : étoile + logo, joués en entier à la première visite
   de la session. Les navigations internes suivantes réutilisent le même élément
   mais en mode allégé (.loader--light) : une simple barre de progression en haut
   de l'écran, sans occulter la page — cf. script.js pour la bascule des deux modes. */
.loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--black);
  overflow: hidden;
  opacity: 1;
  visibility: visible;
}

.loader__aura {
  position: absolute;
  width: min(60vw, 640px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--gradient-nebulight);
  filter: blur(120px);
  opacity: 0;
  animation: loader-aura-in 1.8s ease-out forwards;
}

@keyframes loader-aura-in {
  0%   { opacity: 0;    transform: scale(0.6); }
  55%  { opacity: 0.45; transform: scale(1.05); }
  100% { opacity: 0.3;  transform: scale(1); }
}

.loader__mark {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1.5rem, 4vw, 2.5rem);
}

.loader__star {
  width: clamp(46px, 8vw, 72px);
  color: var(--white);
  opacity: 0;
  filter: drop-shadow(0 0 24px rgba(200, 80, 255, 0.35));
  transform: scale(0.4) rotate(-28deg);
  animation:
    loader-star-in 1s cubic-bezier(0.16, 1, 0.3, 1) 0.1s forwards,
    loader-star-float 3.4s ease-in-out 1.1s infinite;
}

@keyframes loader-star-in {
  to { opacity: 1; transform: scale(1) rotate(0deg); }
}
@keyframes loader-star-float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-6px) rotate(4deg); }
}

.loader__logo {
  width: clamp(150px, 20vw, 210px);
  fill: var(--white);
  opacity: 0;
  transform: translateY(14px);
  animation: loader-logo-in 0.85s cubic-bezier(0.22, 1, 0.36, 1) 0.62s forwards;
}

@keyframes loader-logo-in {
  to { opacity: 1; transform: translateY(0); }
}

/* Barre de progression : masquée par défaut, utilisée uniquement en mode léger */
.loader__bar {
  display: none;
}

/* ---------------- Sortie (commune aux deux modes) ---------------- */
.loader--hide {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.6s ease, visibility 0s linear 0.6s;
}
.loader--hide .loader__mark {
  transform: scale(1.06);
  transition: transform 0.6s ease;
}

/* ---------------- Mode léger : navigation interne, simple barre en haut ---------------- */
.loader--light {
  inset: 0 0 auto 0;
  height: 3px;
  background: transparent;
  pointer-events: none;
}
.loader--light .loader__aura,
.loader--light .loader__mark {
  display: none;
}
.loader--light .loader__bar {
  display: block;
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: rgba(255, 255, 250, 0.08);
}
.loader--light .loader__bar-fill {
  display: block;
  height: 100%;
  width: 0%;
  background: var(--gradient-nebulight);
  animation: loader-bar-grow 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
@keyframes loader-bar-grow {
  from { width: 0%; }
  to   { width: 80%; }
}
.loader--light.loader--hide {
  transition: opacity 0.35s ease 0.15s;
}
.loader--light.loader--hide .loader__bar-fill {
  width: 100%;
  transition: width 0.2s ease;
}

@media (prefers-reduced-motion: reduce) {
  .loader__aura,
  .loader__star,
  .loader__logo,
  .loader--light .loader__bar-fill {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .loader--light .loader__bar-fill { width: 80%; }
}

/* contenu caché au départ */
#content {
  display: none;
}



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



/* -_-_-_-_-_-_-_-_-_-_-_-_-_- Page d'accueil -_-_-_-_-_-_-_-_-_-_-_-_-_- */





/* -_-_-_-_-_-_-_-_-_-_- Débordement horizontal -_-_-_-_-_-_-_-_-_-_-_-_- */
/*
  Plusieurs éléments purement décoratifs dépassent volontairement du cadre
  (halos, orbe du héros, étoile du menu, traits SVG de fond, grain animé).
  Sur petit écran ils rendaient la page défilante latéralement.
  On les rogne au niveau de leur section plutôt que sur html ou body :
  une règle d'overflow posée sur html casserait la section services en
  position: sticky. « clip » n'ouvre pas de conteneur de défilement.
*/
#hero,
#projects-section,
#nebulight-section,
.menu-overlay,
.about-hero,
.services-hero,
.svc__stage {
  overflow-x: clip;
}