/* =================== Base =================== */

* { box-sizing: border-box; }

@font-face {
  font-family: 'Terminal-grotesque';
  src: url('./fonts/Terminal-grotesque/terminal-grotesque.woff') format('woff');
  font-weight: 400;
}
@font-face {
  font-family: 'Inter';
  src: url('./font/Inter_18pt-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('./font/Inter_18pt-LightItalic.ttf') format('truetype');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('./fonts/Inter/Inter_18pt-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('./font/Inter_18pt-Italic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('./fonts/Inter/Inter_18pt-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('./fonts/Inter/Inter_18pt-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
:root {
  --light-ultramarine: rgb(125, 110, 255);  
  --red: rgb(255, 25, 82);
  --lightgrey: #ebeaf2;
  --charcoalgrey: #211e1e;
  --gallery-gap: 22px;
}

/* =================== Typography =================== */

html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body {
  overflow-x: hidden;
  overflow-y: scroll;
  margin: 0;
  padding: 0;
  font-family: 'Inter', sans-serif;
  background-color: var(--lightgrey); 
  color: var(--charcoalgrey);
}
::selection { color: #fff; background: var(--light-ultramarine); }
p, small, h1 {
  font-family: 'Inter', sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  margin: 0;
}
p {  }
.paragraph-text p { font-size: 1rem; margin-bottom: 1.5em; }
.light { font-weight: 300; }
.regular { font-weight: 400; }
.medium { font-weight: 500; }
.bold { font-weight: 700; }
.italic { font-style: italic; }
small { font-weight: 400; font-size: 0.9rem; }
h1 { font-weight: 700; font-size: 1.5rem; margin-bottom: 1.6em; } 

/* =================== Layout =================== */

main {
  margin-left: 30%;
  width: 70%;
  min-height: 100vh;
  position: relative;
  box-sizing: border-box;
  align-items: flex-start;
}
section {   
  min-height: 100vh;
  height: 100vh;
  width: 100%;
  position: relative;
  box-sizing: border-box;
  display: block; 
}
main section { display: none; }
main section.active { display: block; }
section a {
  color: var(--light-ultramarine);
  text-decoration: none; 
  transition: color 0.3s;
}
section a:hover {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
.text-column { max-width: 580px; margin-right: auto; padding : 2rem; }
.section-container {  
  width: 100%;
  height: 100%;
  flex: 1 1 100%;
  box-sizing: border-box;
  position : relative; 
  display: flex; 
  gap: 20px; 
  align-items: flex-start; 
  flex-wrap: wrap; 
  z-index: 50;
  background-color: var(--lightgrey);
}

/* =================== Sidebar =================== */

.sidebar {
  font-family: 'Terminal-grotesque';
  width: 30%;
  min-width: 200px;
  color: var(--charcoalgrey);
  padding: 0px 20px;
  position: fixed;
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  pointer-events: none;
  z-index: 5000;
}
.sidebar-logo { margin-top : 0px; margin-bottom: 40px; pointer-events: auto; max-height: 4rem; max-width: 190px; }
.logo-link { text-decoration: none; }
.pluto-text,
.pluto-text-mobile {
  font-size: 4rem;
  font-family: 'Terminal-grotesque', sans-serif;
  font-weight: 400;
  color: var(--charcoalgrey);
  display: flex;
  gap: 0;
  justify-content: left;
  margin: 0 0 0 0;
  padding: 0;
  user-select: none;
  pointer-events: auto; 
}
h1.pluto-text-mobile {}
.pluto-text-mobile { display: none; letter-spacing: 0.15em; }
.letter-container { display: inline-flex; align-items: center; padding: 7px; cursor: default; }
.letter { display: inline-block; transition: transform 1s, color 0.5s; pointer-events: auto; }
.letter.is-animating { pointer-events: none; }
.letter-container:hover .letter:not(.is-animating) { transform: rotate(360deg); color: var(--light-ultramarine); }
.letter-container:hover .letter { transform: rotate(360deg); color: var(--light-ultramarine); }
.sidebar-nav ul { list-style: none; padding: 0; margin: 0; max-width: 190px; pointer-events: auto; }
.sidebar-nav li { margin-bottom: 5px; user-select: none; }
.sidebar-nav a {
  color: var(--charcoalgrey);
  text-decoration: none;
  font-size: 1.2rem;
  transition: color 0.3s;
  display: inline-block;
  padding: 0 5px 1px 0;
}
.sidebar-nav a:hover { color: var(--light-ultramarine); }

/* =================== Lang Switcher =================== */

.lang-switcher {
  position: fixed; top: 20px; right: 20px; display: flex; gap: 5px;
  z-index: 9999; pointer-events: auto; align-items: center; height: 30px;
}

.lang-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-width: 36px;
  box-sizing: border-box;
  padding: 0.4em 0.7em;
  font-size: 1rem;
  font-family: Terminal-grotesque, sans-serif;
  line-height: 1;
  border-radius: 8px;
  background: none;
  border: none;
  cursor: pointer;
  transition: background 0.3s, color 0.3s;
  color: var(--charcoalgrey);
}

.lang-btn.active {
  background: var(--charcoalgrey);
  color: #fff;
}

/* =================== Draggables & Fixed =================== */

.fixed { position: fixed; z-index: 9999; text-align: center; pointer-events: none; }
.draggable { position: fixed; z-index: 9999; text-align: center; cursor: move; pointer-events: auto; }

.fleur1 { top: 40px; left: 20%; width: 6%; }
.fleur3 { left: 3.5%; bottom: 17%; width: 5%; }
.soleil { position : fixed; z-index : 10; top: 50px; right: 30px; width: 290px; }
.perso1 { left: 100px; bottom: 5%; width: 12%; }
.face { display: none; width: 15%; }

.cycle-perso, .cycle-fleur, .cycle-soleil { cursor: pointer; }
/*.cycle-perso:hover, .cycle-fleur:hover { transform: scale(1.03); }
.cycle-soleil:hover { transform: scale(1.015); }*/

.tooltip {
  position: fixed;
  pointer-events: none;
  background: transparent;
  color: rgb(177, 176, 183);
  padding: 2px 6px;
  font-size: 12px;
  white-space: nowrap;
  border-radius: 3px;
  display: none;
  z-index: 10001;
}

/* =================== Cursor Trail =================== */

#cursor-trail {
  position: fixed; left: 0; top: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 9999;
}
.dot {
  width: 10px; height: 10px; background: var(--charcoalgrey); position: absolute;
  border-radius: 50%; pointer-events: none; transform: translate(-50%, -50%);
}

/* =================== Cycle Filter Versions =================== */

.cycle-filter {
  transition: filter 0.5s, transform 0.5s;
}
.cycle-filter.version1 { filter: none; transform: scale(1) rotate(0deg); }
.cycle-filter.version2 { filter: hue-rotate(230deg) brightness(1.2); transform: scale(1.05) rotate(-20deg); }
.cycle-filter.version3 { filter: hue-rotate(140deg) saturate(140%); transform: rotate(-5deg); }
.cycle-filter.version4 { filter: hue-rotate(90deg) brightness(1.2); transform: scale(0.90) rotate(-10deg); }

/* =================== Gallery =================== */

/* Container */
.gallery-grid {
  display: flex;
  flex-direction: column;
  margin: var(--gallery-gap);
  position: relative;
  z-index: 100;
  background-color: var(--lightgrey);
}

/* ---------- Two-column ---------- */
.gallery-group {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--gallery-gap);
  margin-bottom: 0.5rem;
}
.gallery-group:last-child { margin-bottom: 0; }

.group-caption { grid-column: 1 / -1; text-align: left; font-size: 0.8rem; margin-top: -18px; }
.grid-text { grid-column: 1 / 3; max-width: 75%; text-align: left; margin-bottom: 1em; }
.grid-text p { font-size: 0.8rem; margin-bottom: 0.5em; }

.gallery-group img {
  width: 100%;
  object-fit: cover;
  cursor: pointer;
  transition: filter 1s;
  display: block;
  height: auto;
}
.gallery-group img:hover { filter: grayscale(100%) contrast(1) invert(1); }


/* ---------- Masonry layout ---------- */
.gallery-group.masonry {
  display: block;
  column-count: 3;
  column-gap: var(--gallery-gap);
  padding: 0 var(--gallery-gap) var(--gallery-gap) var(--gallery-gap);
  margin-bottom: 0.5rem;
}

.gallery-group.masonry .group-caption,
.gallery-group.masonry .grid-text {
  column-span: all;
  break-inside: avoid;
  display: block;
  width: 100%;
  margin-top: 0.5rem;
  padding: 0.5rem 0;
}

.gallery-group.masonry img {
  width: 100%;
  display: inline-block;
  margin: 0 0 var(--gallery-gap) 0;
  padding: 0;
  break-inside: avoid-column;
  object-fit: cover;
  cursor: pointer;
  transition: filter 3s;
  box-sizing: border-box;
}
.gallery-group.masonry img:hover { filter: contrast(1) saturate(200%) hue-rotate(180deg); }

/* Ensure captions/text take full width and align with grid behavior when possible */
.gallery-group.masonry .group-caption { margin-top: calc(var(--gallery-gap) / 4); }
.gallery-group.masonry .grid-text { margin-bottom: calc(var(--gallery-gap) / 2); }

/* =================== Fullscreen Preview =================== */

#fullscreen-preview {
  position: fixed; top: 0; left: 0;
  width: 100vw; height: 100vh;
  background: rgba(0,0,0,0.8);
  display: flex; align-items: center; justify-content: center;
  z-index: 9999;
}
#fullscreen-preview.hidden { display: none; }
#fullscreen-preview .img-box {
  width: 90vw; max-width: 900px;
  height: 90vh; max-height: 700px;
  overflow: hidden; position: relative;
  display: flex; align-items: center; justify-content: center;
  background: transparent;
}
#fullscreen-preview img { width: 100%; height: 100%; object-fit: contain; transition: transform 0.3s; }
#fullscreen-preview img.zoomed { cursor: pointer; }
#close-preview {
  position: absolute; top: 1rem; right: 10%; color: #fff;
  font-size: 2rem; cursor: pointer; user-select: none; z-index: 1;
}
.nav-arrow {
  position: absolute; top: 50%; width: 36px; height: 36px; display: flex;
  align-items: center; justify-content: center;
  cursor: pointer; z-index: 1; opacity: 0.8; transition: opacity 0.2s;
  transform: translateY(-50%);
}
.nav-arrow:hover { opacity: 1; }
#arrow-left { left: 10% }
#arrow-right { right: 10%; }
.nav-arrow img {
  width: 32px; height: 64px; object-fit: contain; pointer-events: none; user-select: none;
}

/* =================== Jotform Mask =================== */

#iframe-mask {
  position: fixed; left: 30%; bottom: 0; width: 70%; height: 60px; pointer-events: none;
  z-index: 9999; background: var(--lightgrey); display: none; 
}

/* =================== Sandbox / Compositor =================== */

#compositor .section-container {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  margin: 0;
  align-items: flex-start;
}
#compositor .toolbar {
  display: flex;
  position: relative;
  align-items: center;
  flex-direction: row;
  flex-wrap: wrap;
  margin-top: 16px;
  margin-bottom: 8px;
  padding: 0;
  background: transparent;
  height: auto;
  box-sizing: border-box;
  overflow: visible;
}
#compositor .toolbar button {
  margin-right: 7px;
  margin-bottom: 7px;
  padding: 1px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  font-weight: 500;
  cursor: pointer;
  gap: 10px;
  position: relative;
  z-index: 1000;
}
#compositor .toolbar button:last-child {
  margin-right: 0;
}
.icon-small img {
  width: 24px;
  height: 24px;
  object-fit: contain;
  display: block;
}
#deleteButton { padding: 6px; }
#mirrorButton { padding: 5px; }
#compositor .toolbar button img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
#compositor .toolbar button:disabled {
  opacity: 0.5;
  cursor: default;
  pointer-events: none;
}

#compositor .sandbox {
  position: relative;
  margin: 0;
  padding: 0;
  width: 80%;
  max-height: 80vh;
  height: 80vh;
  min-height: 300px;
  background: #eeedf4;
  border: 1px dotted var(--charcoalgrey);
  overflow: hidden;
  z-index: 10;
  box-sizing: border-box;
}
#compositor .sandbox img { z-index: 101; position: absolute; transform-origin: 50% 50%; }
.multi-selected { outline: 2px dotted var(--light-ultramarine); }
#drawingCanvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 100; pointer-events: none; }
.sandbox-fleur, .sandbox-perso, .sandbox-soleil, .sandbox-extra, .sandbox-arbre { 
  position: absolute; top: 10px; left: 10px; height: auto; cursor: pointer; transition: transform 0.3s; }
.sandbox-fleur { width: 12%; }
.sandbox-perso, .sandbox-soleil { width: 28%; }
.sandbox-arbre { width: 25%; }
.sandbox-extra { width: 5%; }
.rotate-cursor { cursor: grab; }
.mirrored { transform: scaleX(-1); }
.delete-cursor { cursor: url('icon/trashbin.png'), auto !important; }
#deleteButton.active-delete { background: var(--light-ultramarine); color: #fff; }
.clickable-img { cursor: pointer; }
.delete-cursor .clickable-img { cursor: url('icon/trashbin.png'), auto !important; }
button small { font-size: 0.6em; }

#hueSlider {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 0; 
  display: none;   
  z-index: 2000;   
  box-shadow: 0 6px 18px rgba(0,0,0,0.15);
  border-radius: 999px;
  padding: 6px;    
  background: white;
  pointer-events: auto;
  transition: opacity 140ms ease, transform 120ms ease;
  opacity: 0;
  width: 180px;
  overflow: visible;
}
#hueSlider.visible {
  display: block;
  opacity: 1;
}
#hueSlider.small {
  width: 140px;
}
/* WebKit track and thumb */
#hueSlider::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 999px;
  background: transparent; 
}
/* WebKit thumb  */
#hueSlider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 6px;          
  height: 6px;
  border-radius: 50%;
  background: #fff;            
  box-shadow: 0 0 0 3px rgba(0,0,0,0.06), 0 0 0 4px var(--hue-thumb-color, transparent);
  margin-top: -1px;       
  transition: box-shadow 120ms ease, transform 120ms ease;
  pointer-events: auto;
}
/* Firefox (Gecko) thumb */
#hueSlider::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  border: none;
  box-shadow: 0 0 0 3px rgba(0,0,0,0.06), 0 0 0 4px var(--hue-thumb-color, transparent);
  transition: box-shadow 120ms ease, transform 120ms ease;
}
#hueSlider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  border: none;
  box-shadow: 0 0 0 3px rgba(0,0,0,0.06), 0 0 0 6px var(--hue-thumb-color, transparent);
  transition: box-shadow 120ms ease, transform 120ms ease;
}
@media (max-width: 480px) {
  #hueSlider { width: 140px; }
  #hueSlider::-webkit-slider-thumb, #hueSlider::-moz-range-thumb { width: 16px; height: 16px; }
}

/* =================== Bouton MENU (mobile/tablette) =================== */

.menu-button {
  display: none;
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  font-family: Terminal-grotesque, sans-serif;
  font-size: 1.2rem;
  width: 70px;
  height: 70px;
  background: var(--lightgrey);
  border: 2px solid currentColor;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: inherit;
  z-index: 1000;
  cursor: pointer;
}
@media (max-width: 768px) {
  .menu-button {
    display: block;
  }
}

/* =================== Dark Theme =================== */

body.dark-theme { background: var(--charcoalgrey); color: #fff; }
.dark-theme .draggable:not(.dark-color), .dark-theme .fixed:not(.dark-color) {
  filter: invert(1) hue-rotate(280deg) brightness(1) saturate(170%);
}
.dark-theme .sidebar { color: #fff; }
.dark-theme .pluto-text, .dark-theme .pluto-text-mobile { color: #fff; }
.dark-theme .letter-container:hover .letter { color: var(--red); }
.dark-theme section a { color: var(--red); }
.dark-theme .section-container { background-color: var(--charcoalgrey); }
.dark-theme .sidebar-nav a { color: #fff; }
.dark-theme .sidebar-nav a:hover { color: var(--red); }
.dark-theme .content { color: #fff; }
.dark-theme .gallery-grid { background-color: var(--charcoalgrey); }
.dark-theme .gallery-home img { filter: brightness(0.9); }
.dark-theme .gallery-home img:hover { filter: hue-rotate(150deg) brightness(1.1); }
.dark-theme ::selection { background: var(--red); }
.dark-theme .dot { background: #fff; }
.dark-theme .menu-button { background: var(--charcoalgrey); }
.dark-theme .menu-button:hover { color: var(--red); }
.dark-theme .cycle-filter.version1 { filter: none; transform: scale(1); }
.dark-theme .cycle-filter.version2 { filter: hue-rotate(190deg) brightness(1.3) saturate(180%); transform: scale(1.05); }
.dark-theme .cycle-filter.version3 { filter: hue-rotate(330deg) brightness(1.5) saturate(110%); transform: rotate(10deg); }
.dark-theme .cycle-filter.version4 { filter: hue-rotate(230deg) brightness(1.2); transform: scale(0.95); }
.dark-theme .lang-btn { color: #fff; }
.dark-theme .lang-btn.active { background: #fff; color: var(--charcoalgrey); }
.dark-theme .tooltip { color: rgb(86, 79, 79); }

/* =================== Responsive =================== */

@media (max-width: 1100px) {
  .fleur1 { display: none; }
  .fleur3 { bottom: 17%; left: 5%; width: 6%; }
  .soleil { top: 7%; right: 30px; width: 26%; }
  .perso1 { left: 10%; bottom: 5%; width: 15%; }
}

@media (max-width: 768px) {
  main {
    width: 100vw;
    max-width: 100vw;
    margin: 0;
    box-sizing: border-box;
    min-height: 100vh;
    padding: 0;
  }
  .text-column,
  .section-container { width: 100%; margin: 0; padding-top: 4rem; }
  .text-column { padding-top: 7rem; }
  .gallery-group {
    grid-template-columns: repeat(1, 1fr);
    margin-bottom: 1.2rem;
  }
  .pluto-text { display: none; }
  .pluto-text-mobile {
    display: inline-block;
    font-size: clamp(2.2rem, 8vw, 4rem);
    white-space: nowrap;
    margin-top: 20px;
    padding: 0;
    max-width: 100%;
    width: auto;
    text-align: left;
    letter-spacing: 0.15em;
    line-height: 1;
    overflow: hidden;
    background: none;
  }
  .sidebar-logo {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 40px;
  }
  .logo-link {
    display: inline-block;
    padding: 0;
    margin: 0;
    width: auto;
    max-width: none;
    background: none;
  }
  .sidebar-nav { display: block; transition: transform 0.3s; }
  .sidebar-nav.hidden + .menu-button { display: block; }
  .dot { display: none !important; }
  .fleur3 { display: none; width: 12% } .perso1 { display:none; width: 30% }
  .soleil { top: 10%; width: 35%; }
  a:hover,
  .sidebar-nav a:hover,
  section a:hover,
  .gallery-group img:hover,
  #theme-toggle:hover,
  .letter-container:hover .letter {
    color: inherit !important;
    text-decoration: none !important;
    filter: none !important;
    background: none !important;
    transform: none !important;
  } 
  .grid-text { grid-column: 1 / 3; max-width: 100%; text-align: left; margin-bottom: 1em; }
  .gallery-group img {
    display: block;
    width: 100%;
    margin: 0;
  }
  .gallery-group.masonry {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: var(--gallery-gap);
    padding: 0;
    column-count: initial;
    column-gap: initial;
    margin-bottom: 1.2rem;
  }
  .gallery-group.masonry .group-caption,
  .gallery-group.masonry .grid-text {
    column-span: none;
    break-inside: auto;
    width: 100%;
    margin-top: 0;
    padding: 0;
    grid-column: 1 / -1;
  }
  .gallery-group.masonry img {
    display: block;
    width: 100%;
    margin: 0;
    break-inside: auto;
  }
  #iframe-mask {
    position: fixed; left: 0%; bottom: 0; width: 100%; height: 60px; pointer-events: none;
    z-index: 9999; background: var(--lightgrey); display: none; 
  }
  #compositor .toolbar {
    padding-top: 15%;
    margin: 0 auto;
    justify-content: center;
  }
  #compositor {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    min-height: 100vh;
  }
  #compositor .sandbox {
    box-sizing: border-box;
    width: 90%;
    max-width: 1200px;
    height: 65vh;
    max-height: 65vh;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: #eeedf4;
    border: 1px dotted var(--charcoalgrey);
    overflow: hidden;
    z-index: 10;
  }
}

@media (pointer: coarse) {
  .tooltip { color: transparent; }
  a:hover,
  .sidebar-nav a:hover,
  section a:hover,
  .gallery-group img:hover,
  #theme-toggle:hover,
  .letter-container:hover .letter {
    color: inherit !important;
    text-decoration: none !important;
    filter: none !important;
    background: none !important;
    transform: none !important;
  }
}