/* =========================
   Fonts (inchangées)
========================= */
@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:"aufeu"; src:url("Font/FFauFEU.woff") format("woff"); font-weight:100 900; font-style:normal; font-display:swap; }
@font-face { font-family:"arte"; src:url("Font/Arte.woff") format("woff"); font-weight:100 900; font-style:normal; font-display:swap; }
@font-face { font-family:"nes"; src:url("Font/Nes.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; }

/* =============================
   3D BACKGROUND CONTAINER
============================= */
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #fff;
}

html.is-inverted {
  filter: invert(1);
}

#container {
  position: fixed;   /* toujours derrière tout */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;        /* fond */
}

/* canvas overlay pour grille/symboles */
#ui canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;        /* au-dessus du fond, derrière les fenêtres */
  pointer-events: none;
}

/* =============================
   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;
}

/* =============================
   SWITCH STYLE IPHONE - CENTRÉ
============================= */
.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::before {
  transform: translateX(24px);
}

/* =============================
   MODE NUIT / INVERSION
============================= */

.cursor,
.cursor-trail-item {
  filter: invert(0);
}

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

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

/* =============================
   TITRE ET MENU
============================= */
.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 {
  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; }

/* =============================
   FENÊTRES
============================= */
.window {
  position: fixed;
  background: #c0c0c0;
  font-family: 'Red';
  font-size: 12px;
  z-index: 1000;  /* fenêtres au-dessus du canvas */
  overflow: hidden;
  display: flex;
  flex-direction: column;

  border-top: 2px solid #dfdfdf;
  border-left: 2px solid #dfdfdf;
  border-right: 2px solid #404040;
  border-bottom: 2px solid #404040;

  box-shadow:
    inset 1px 1px 0 #ffffff,
    inset -1px -1px 0 #808080;
}

/* =============================
   HEADER, CONTENT, FOOTER
============================= */
.window-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 30px;
  padding: 0 4px;
  background: linear-gradient(to bottom,#0000aa,#000080);
  color: white;
  cursor: move;
  user-select: none;
  border-bottom: 2px solid #808080;
}

.window-title { font-size: 15px; font-weight: bold; white-space: nowrap; font-family: 'Doto'; }

.window-controls { display: flex; gap: 2px; }
.window-btn {
  width: 18px;
  height: 16px;
  font-size: 14px;
  line-height: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #c0c0c0;
  color: #000;
  cursor: pointer;
  border-top: 2px solid #dfdfdf;
  border-left: 2px solid #dfdfdf;
  border-right: 2px solid #404040;
  border-bottom: 2px solid #404040;
}
.window-btn:active { border-top: 2px solid #808080; border-left: 2px solid #808080; border-right: 2px solid #dfdfdf; border-bottom: 2px solid #dfdfdf; }
.window-btn.close:hover { background: #ff0000; color: white; }

.window-content {
  padding: 4px;
  background: #e4e4e4;
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
}

.window-footer {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 32px;
  padding: 0 6px;
  background: #c0c0c0;
  border-top: 2px solid #dfdfdf;
}

.slider-wrapper { flex: 1; }
.font-size-slider {
  -webkit-appearance: none;
  width: 100%;
  height: 6px;
  background: #c0c0c0;
  cursor: ew-resize;
  border-top: 1px solid #404040;
  border-left: 1px solid #404040;
  border-right: 1px solid #dfdfdf;
  border-bottom: 1px solid #dfdfdf;
}

.font-preview {
  flex: 1;
  width: 100%;
  height: 100%;
  resize: none;
  border: none;
  outline: none;
  padding: 4px;
  box-sizing: border-box;
  background: #e4e4e4;
  color: #000;
  font-family: inherit;
  font-size: inherit;
  line-height: 1.2;
  overflow: auto;
}

.font-preview:focus { outline: none; }

.download-btn {
  width: 50%;
  height: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: 'RedI';
  font-size: 13px;
  color: #000;
  text-decoration: none;
  background: #c0c0c0;
  border-top: 2px solid #ffffff;
  border-left: 2px solid #ffffff;
  border-right: 2px solid #404040;
  border-bottom: 2px solid #404040;
}
.download-btn:active {
  border-top: 2px solid #404040;
  border-left: 2px solid #404040;
  border-right: 2px solid #ffffff;
  border-bottom: 2px solid #ffffff;
}

/* =============================
   FENÊTRES TYPO
============================= */
.window-1 .font-preview { font-family: 'nes', serif; font-size: 32px; line-height: 1.3; }
.window-2 .font-preview { font-family: 'arte', serif; font-size: 72px; line-height: 1.25; padding-top: 12px; overflow: auto; }
.window-3 .font-preview { font-family: 'aufeu', serif; font-size: 48px; line-height: 1; }

/* =============================
   POSITIONS FENÊTRES
============================= */
.window-1 { top: 10vw; left: 5vw; width: 280px; height: 400px; }
.window-2 { top: 20vw; left: 28vw; width: 600px; height: 400px; }
.window-3 { top: 5vw; left: 72vw; width: 380px; height: 300px; }

.window.inactive .window-header { background: #808080; }

#bouncing-text {
  position: fixed;
  top: 100px;
  left: 100px;
  font-family: 'Red';
  font-size: 18px;
  font-weight: 500;
  color: #000;
  white-space: nowrap;
  text-align: center;
  pointer-events: none;
  z-index: 9999;
}

/* =============================
   MOBILE
============================= */
@media (max-width: 768px) {

  body { overflow-y: auto; }

  .curseur-vertical,
  .curseur-horizontal { display: none; }

  .window {
    position: relative;
    top: auto;
    left: auto;
    width: 92vw;
    height: auto;
    margin: 16px auto;
    z-index: 1;
  }

  .window-1,
  .window-2,
  .window-3 { top: auto; left: auto; }

.window-1 { top: 27vw; }
.window-2 { top: 31vw; }
.window-3 { top: 35vw; }

  .window-content { max-height: 50vh; }

  .window-header { height: 40px; font-size: 14px; }
  .window-footer { height: 40px; }

  #bouncing-text { display: none; }

  .titre { 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 { 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 { 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 { display:none; 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 { display:none; position: fixed; bottom: 16vw; left: 50%; transform: translateX(-50%); z-index: 9999; width: 50px; height: 26px; }
}