/* =============================
   FONTS
============================= */
@font-face { 
  font-family: "Doto"; 
  src: url("font/Doto-VariableFont.woff2") format("woff2"), 
       url("font/Doto-VariableFont.woff") format("woff"); 
  font-weight: 100 900; 
  font-style: normal; 
  font-display: swap;
}
@font-face {
  font-family:"Red"; 
  src:url("font/RedHatMono-VariableFont_wght.woff2") format("woff2"), 
      url("font/RedHatMono-VariableFont_wght.woff") format("woff"); 
  font-weight:100 900; 
  font-style:normal; 
  font-display:swap; 
}
@font-face {
  font-family:"RedI"; 
  src:url("font/RedHatMono-Italic-VariableFont_wght.woff2") format("woff2"), 
      url("font/RedHatMono-Italic-VariableFont_wght.woff") format("woff"); 
  font-weight:100 900; 
  font-style:italic; 
  font-display:swap; 
}

/* =============================
   CV
============================= */

.cv{
    position: fixed;
  bottom: 52px;
  left: 2.6vw;
  font-family: 'RedI';
  font-size: 15px;
  z-index: 2000;
}

.cv a{
  text-decoration: none;
    font-size: 15px;
  color: black;
}

.cv a:hover{
  color: blue;
}

/* =============================
   INSTA
============================= */

.insta{
    position: fixed;
  bottom: 52px;
  right: 2.6vw;
  font-family: 'RedI';
  font-size: 15px;
  z-index: 2000;
}

.insta a{
  text-decoration: none;
    font-size: 15px;
  color: black;
}

.insta a:hover{
  color: blue;
}

/* =============================
   RESET & BODY
============================= */

html{
  cursor: none;
}

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #fff;
}

/* =============================
   CURSEUR1
============================= */

/* Ligne verticale */
.curseur-vertical {
  position: fixed;
  top: 0;
  left: 0;
  width: 1px;        /* épaisseur */
  height: 100vh;
  background: black;
  pointer-events: none;
  z-index: 9999;
}

/* Ligne horizontale */
.curseur-horizontal {
  position: fixed;
  top: 0;
  left: 0;
  height: 1px;       /* épaisseur */
  width: 100vw;
  background: black;
  pointer-events: none;
  z-index: 9999;
}

/* =============================
   TITRE
============================= */
.titre {
  position: fixed;
  top: 1.6vw;
  left: 2.5vw;
  font-family: 'RedI';
  font-size: 21px;
  z-index: 2000;
}

.titre a {
  text-decoration: none;
  color: black;
}

.titre a:hover {
  color: blue;
}

/* =============================
   MENU
============================= */
.menu {
  position: fixed;
  top: 1.9vw;
  right: 2.6vw;
  display: flex;
  z-index: 2000;
}

.menu-item {
  font-family: 'RedI';
  font-size: 15px;
  padding: 0 0.5vw;
  text-decoration: none;
  color: black;
}

.menu-item:hover {
  color: blue;
}

/* =============================
   COUCHE UI
============================= */
#ui {
  position: fixed;
  inset: 0;
  z-index: 2000;
  pointer-events: none; /* menu et titre cliquables via pointer-events:auto */
}

.menu,
.titre {
  pointer-events: auto;
}

/* =============================
   BOUTON NEGATIF
============================= */
#invert-btn {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 9999;
  font-family: 'RedI';
  font-size: 13px;
  background: white;
  border: 1px solid black;
  padding: 6px 10px;
  cursor: pointer;
}

/* Mode négatif sur tout le site */
html.is-inverted {
  filter: invert(1);
}

/* =============================
   SWITCH STYLE IPHONE - CENTRÉ HORIZONTALEMENT
============================= */
.switch {
  position: fixed;
  bottom: 47px;     
  left: 50%;          
  transform: translateX(-50%); 
  z-index: 9999;
  width: 50px;
  height: 26px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  background-color: transparent;
  border: 1px solid black;
  border-radius: 34px;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  transition: 0.4s;
}

.slider::before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: 1px;
  bottom: 1px;
  background-color: black;
  border: 1px solid black;
  border-radius: 50%;
  transition: 0.4s;
}

input:checked + .slider {
  background-color: transparent; /* couleur ON */
}

input:checked + .slider::before {
  transform: translateX(24px);
}



/* =============================
   3D CONTAINER
============================= */
#container {
  width: 100%;
  height: 100%;
}






/* =============================
   MOBILE
============================= */

/* =============================
   MOBILE
============================= */

/* =============================
   MOBILE
============================= */

/* =============================
   MOBILE
============================= */

/* =============================
   MOBILE
============================= */






@media (max-width: 768px) {
  /* styles pour téléphone */






/* =============================
   TITRE
============================= */
.titre {
  position: fixed;
  top: 4.2vw;
  left: 4.5vw;
  font-family: 'Red';
  font-size: 8vw;
  z-index: 2000;
}

.titre a {
  text-decoration: none;
  color: black;
}

.titre a:hover {
  color: blue;
}

/* =============================
   MENU
============================= */
.menu {
  position: fixed;
  top: 18vw;
  left: 3vw;
  display: flex;
  z-index: 2000;
}

.menu-item {
  font-family: 'Red';
  font-size: 4.4vw;
  padding: 0 2vw;
  text-decoration: none;
  color: black;
}

.menu-item:hover {
  color: blue;
}

/* =============================
   CV
============================= */

.cv{
  display: none;
    position: fixed;
  bottom: 52px;
  left: 5vw;
  font-family: 'Red';
  z-index: 2000;
}

.cv a{
  text-decoration: none;
  font-size: 4.4vw;
  color: black;
}

.cv a:hover{
  color: blue;
}

/* =============================
   INSTA
============================= */

.insta{
    position: fixed;
  bottom: 6vw;
  right: 28vw;
  font-family: 'Red';
  z-index: 2000;
}

.insta a{
  text-decoration: none;
  font-size: 4.4vw;
  color: black;
}

.insta a:hover{
  color: blue;
}

/* =============================
   SWITCH STYLE IPHONE - CENTRÉ HORIZONTALEMENT
============================= */
.switch {
  position: fixed;
  bottom: 16vw;     
  left: 50%;          
  transform: translateX(-50%); 
  z-index: 9999;
  width: 50px;
  height: 26px;
}




}