Refactor: consolider toutes les variables CSS dans variables.css

- variables.css : z-index, couleurs et font-sizes au même endroit
- layout.css, buttons.css : z-index: 1 → var(--z-base)
- Suppression de src/style.css (fichier mort, jamais importé)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

src/style.css

@@ -1,305 +0,0 @@
-/* Z-INDEX SCALE
- * --z-base     : éléments décoratifs (lignes verticales, bg)
- * --z-content  : contenu de slides (textes, overlays légers)
- * --z-menu     : overlay menu plein écran
- * --z-header   : barre de navigation (toujours au-dessus du menu)
- * --z-cursor   : curseur personnalisé (toujours au-dessus de tout)
- */
-:root {
-  --z-base:    1;
-  --z-content: 5;
-  --z-menu:    100;
-  --z-header:  200;
-  --z-cursor:  9999;
-}
-
-/* FONT SIZING SYSTEM - Consistent typography across the site */
-:root {
-  /* Base font sizes for desktop */
-  --font-size-paragraph: 18px;
-  --font-size-paragraph-small: 16px;
-  --font-size-subtitle: 20px;
-  --font-size-title-section: 32px;
-  --font-size-title-main: 48px;
-  --font-size-title-hero: 96px;
-  --font-size-button: 13px;
-  --font-size-caption: 12px;
-
-  /* Mobile font sizes */
-  --font-size-paragraph-mobile: 16px;
-  --font-size-paragraph-small-mobile: 12px;
-  --font-size-subtitle-mobile: 16px;
-  --font-size-title-section-mobile: 24px;
-  --font-size-title-main-mobile: 32px;
-  --font-size-title-hero-mobile: 48px;
-  --font-size-button-mobile: 11px;
-  --font-size-caption-mobile: 10px;
-
-  /* Tablet font sizes */
-  --font-size-paragraph-tablet: 16px;
-  --font-size-paragraph-small-tablet: 14px;
-  --font-size-subtitle-tablet: 18px;
-  --font-size-title-section-tablet: 28px;
-  --font-size-title-main-tablet: 40px;
-  --font-size-title-hero-tablet: 64px;
-  --font-size-button-tablet: 12px;
-  --font-size-caption-tablet: 11px;
-}
-
-html,
-body {
-  height: 100%;
-  min-height: 100vh;
-  min-height: -webkit-fill-available;
-  min-height: calc(var(--vh, 1vh) * 100);
-  user-select: none;
-}
-
-body {
-  margin: 0;
-  font-family: "Danzza Regular", "Danzza", -apple-system, BlinkMacSystemFont,
-    "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans",
-    "Droid Sans", "Helvetica Neue", sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  cursor: none;
-  background: #000;
-  overflow-x: hidden;
-}
-
-* {
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
-  cursor: none;
-}
-
-/* Font faces */
-@font-face {
-  font-family: "Terminal";
-  font-weight: bold;
-  src: local("terminal-grotesque"),
-    url("/assets/fonts/terminal-grotesque.ttf") format("truetype");
-}
-
-@font-face {
-  font-family: "Danzza";
-  src: local("Danzza Regular"),
-    url("/assets/fonts/Danzza-Regular.woff") format("woff"),
-    url("/assets/fonts/Danzza-Regular.otf") format("opentype");
-  font-display: swap;
-}
-
-@font-face {
-  font-family: "Danzza Light";
-  src: local("Danzza Light"),
-    url("/assets/fonts/Danzza-Light.woff") format("woff"),
-    url("/assets/fonts/Danzza-Light.otf") format("opentype");
-  font-display: swap;
-}
-
-@font-face {
-  font-family: "Danzza Medium";
-  src: local("Danzza Medium"),
-    url("/assets/fonts/Danzza-Medium.woff") format("woff"),
-    url("/assets/fonts/Danzza-Medium.otf") format("opentype");
-  font-display: swap;
-}
-
-@font-face {
-  font-family: "Danzza Bold";
-  src: local("Danzza Bold"),
-    url("/assets/fonts/Danzza-Bold.woff") format("woff"),
-    url("/assets/fonts/Danzza-Bold.otf") format("opentype");
-  font-display: swap;
-}
-
-.font-face-terminal {
-  font-family: "Terminal";
-}
-
-.font-face-danzza {
-  font-family: "Danzza";
-}
-
-.font-face-danzza-light {
-  font-family: "Danzza Light";
-}
-
-.font-face-danzza-medium {
-  font-family: "Danzza Medium";
-}
-
-.font-face-danzza-bold {
-  font-family: "Danzza Bold";
-}
-
-/* Golden Grid */
-.golden-grid {
-  height: 100vh !important;
-  min-height: 100% !important;
-  display: grid !important;
-  position: relative;
-  grid-template-rows: 1fr 1fr 2fr 4fr 2.66fr 5.33fr 5.33fr 4.33fr 2.83fr 3.5fr 3.5fr 2.83fr 4.33fr 5.33fr 5.33fr 2.66fr 4fr 2fr 1fr 1fr;
-  grid-template-columns: 1fr 1fr 2fr 4fr 2.66fr 5.33fr 5.33fr 4.33fr 2.83fr 3.5fr 3.5fr 2.83fr 4.33fr 5.33fr 5.33fr 2.66fr 4fr 2fr 1fr 1fr;
-  text-align: center;
-}
-
-.slide {
-  overflow-y: hidden;
-}
-
-/* Vertical Lines */
-.vertical-line {
-  z-index: 1;
-  border-left: 0.1px solid rgba(238, 238, 238, 0.2);
-  height: 150%;
-}
-
-.vertical-line-start {
-  z-index: 1;
-  border-left: 0.1px solid rgba(238, 238, 238, 0.2);
-  grid-area: 1/6 / span 20 / span 1;
-  height: 150%;
-}
-
-.vertical-line-center {
-  z-index: 1;
-  border-left: 0.1px solid rgba(238, 238, 238, 0.2);
-  grid-area: 1/11 / span 20 / span 1;
-  height: 150%;
-}
-
-.vertical-line-end {
-  z-index: 1;
-  border-left: 0.1px solid rgba(238, 238, 238, 0.2);
-  grid-area: 1/16 / span 20 / span 1;
-  height: 150%;
-}
-
-/* Button */
-.button {
-  width: 14vmax;
-  min-width: 130px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  position: sticky;
-  z-index: 1;
-  padding: 12px 16px;
-  transition: 0.5s ease-out;
-  font-family: "Danzza Bold";
-  background-color: #04fea0;
-  border: none;
-  cursor: pointer;
-}
-
-.button:hover {
-  background-position: left;
-  background-color: transparent;
-  outline: solid 2px #04fea0;
-}
-
-.button p {
-  color: black;
-  margin: 0;
-  transition: color 0.3s;
-}
-
-.button:hover p {
-  color: #04fea0 !important;
-}
-
-.earth-icon {
-  width: 24px;
-  height: 24px;
-  background-image: url("/assets/img/icon-earth-green.png");
-  background-size: contain;
-  background-repeat: no-repeat;
-  background-position: center;
-  margin-right: 8px;
-  transition: filter 0.3s;
-}
-
-.button:hover .earth-icon {
-  filter: brightness(0) saturate(100%) invert(77%) sepia(82%) saturate(507%)
-    hue-rotate(91deg) brightness(101%) contrast(97%);
-}
-
-/* Clickable elements */
-.clickable {
-  cursor: pointer;
-  user-select: none;
-}
-
-/* Cursor */
-#cursor-dot,
-#cursor-dot-outline,
-#cursor-circle {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  z-index: var(--z-cursor);
-  transform: translate(-50%, -50%);
-  transition: opacity 0.15s ease-in-out, transform 0.15s ease-in-out;
-  border-radius: 50%;
-  pointer-events: none;
-  opacity: 0;
-}
-
-#cursor-dot {
-  width: 14px;
-  height: 14px;
-  background-color: white;
-}
-
-#cursor-circle {
-  width: 50px;
-  height: 50px;
-  border-width: 3px;
-  border-style: solid;
-  border-color: #04fea0;
-}
-
-#cursor-dot-outline {
-  width: 13px;
-  height: 13px;
-  background-color: white;
-}
-
-@media (pointer: coarse) {
-  #cursor-dot,
-  #cursor-dot-outline,
-  #cursor-circle {
-    display: none;
-  }
-
-  body,
-  * {
-    cursor: auto;
-  }
-}
-
-/* Selection */
-::selection {
-  background: #04fea0;
-  color: #000;
-}
-
-/* Scrollbar */
-::-webkit-scrollbar {
-  width: 10px;
-}
-
-::-webkit-scrollbar-track {
-  background: #000;
-}
-
-::-webkit-scrollbar-thumb {
-  background: #04fea0;
-  border-radius: 5px;
-}
-
-::-webkit-scrollbar-thumb:hover {
-  background: #03d98c;
-}

src/styles/buttons.css

@@ -6,7 +6,7 @@
   align-items: center;
   justify-content: center;
   position: sticky;
-  z-index: 1;
+  z-index: var(--z-base);
   padding: 12px 16px;
   transition: 0.5s ease-out;
   font-family: "Danzza Bold";

src/styles/layout.css

@@ -15,27 +15,27 @@
 
 /* Vertical Lines */
 .vertical-line {
-  z-index: 1;
+  z-index: var(--z-base);
   border-left: 0.1px solid rgba(238, 238, 238, 0.2);
   height: 150%;
 }
 
 .vertical-line-start {
-  z-index: 1;
+  z-index: var(--z-base);
   border-left: 0.1px solid rgba(238, 238, 238, 0.2);
   grid-area: 1/6 / span 20 / span 1;
   height: 150%;
 }
 
 .vertical-line-center {
-  z-index: 1;
+  z-index: var(--z-base);
   border-left: 0.1px solid rgba(238, 238, 238, 0.2);
   grid-area: 1/11 / span 20 / span 1;
   height: 150%;
 }
 
 .vertical-line-end {
-  z-index: 1;
+  z-index: var(--z-base);
   border-left: 0.1px solid rgba(238, 238, 238, 0.2);
   grid-area: 1/16 / span 20 / span 1;
   height: 150%;

src/styles/variables.css

@@ -1,6 +1,25 @@
 /* CSS Variables */
 :root {
-  /* Base font sizes for desktop */
+  /* Colors */
+  --color-primary: #04fea0;
+  --color-primary-hover: #03d98c;
+  --color-background: #000;
+  --color-text: #fff;
+
+  /* Z-INDEX SCALE
+   * --z-base     : éléments décoratifs (lignes verticales, bg)
+   * --z-content  : contenu de slides (textes, overlays légers)
+   * --z-menu     : overlay menu plein écran
+   * --z-header   : barre de navigation (toujours au-dessus du menu)
+   * --z-cursor   : curseur personnalisé (toujours au-dessus de tout)
+   */
+  --z-base:    1;
+  --z-content: 5;
+  --z-menu:    100;
+  --z-header:  200;
+  --z-cursor:  9999;
+
+  /* Font sizes — desktop */
   --font-size-paragraph: 18px;
   --font-size-paragraph-small: 16px;
   --font-size-subtitle: 20px;
@@ -10,7 +29,7 @@
   --font-size-button: 13px;
   --font-size-caption: 12px;
 
-  /* Mobile font sizes */
+  /* Font sizes — mobile */
   --font-size-paragraph-mobile: 16px;
   --font-size-paragraph-small-mobile: 12px;
   --font-size-subtitle-mobile: 16px;
@@ -20,7 +39,7 @@
   --font-size-button-mobile: 11px;
   --font-size-caption-mobile: 10px;
 
-  /* Tablet font sizes */
+  /* Font sizes — tablet */
   --font-size-paragraph-tablet: 16px;
   --font-size-paragraph-small-tablet: 14px;
   --font-size-subtitle-tablet: 18px;
@@ -29,10 +48,4 @@
   --font-size-title-hero-tablet: 64px;
   --font-size-button-tablet: 12px;
   --font-size-caption-tablet: 11px;
-
-  /* Colors */
-  --color-primary: #04fea0;
-  --color-primary-hover: #03d98c;
-  --color-background: #000;
-  --color-text: #fff;
 }