/* Base styles */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Karla', sans-serif;
  font-weight: 300;
  line-height: 1.6;
  color: #333;
}

.app {
  display: flex;
  min-height: 100vh;
}

/* Sidebar styles */
.sidebar {
  width: 20%;
  min-width: 200px;
  background: #f8f8f8;
  padding: 2rem 1.5rem;
  position: fixed;
  height: 100vh;
  left: 0;
  top: 0;
}

.brand {
  font-size: 1.2rem;
  font-weight: 700;
  text-decoration: none;
  color: #333;
  display: block;
  margin-bottom: 2rem;
}

.side-nav a {
  display: block;
  text-decoration: none;
  color: #666;
  margin-bottom: 0.5rem;
  font-weight: 300;
}

.side-nav a:hover {
  color: #333;
}

/* Main content */
.main {
  margin-left: 20%;
  width: 80%;
  min-height: 100vh;
}

.content {
  padding: 2rem;
}

/* Mobile header (hidden on desktop) */
.mobile-header {
  display: none;
}

/* Responsive utilities */
.desktop-only {
  display: block;
}

.mobile-only {
  display: none !important;
}

/* Homepage slideshow */
.slideshow {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.slides-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
}

.slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

.slide.active {
  opacity: 1;
}

/* Mobile stack images */
.homepage-mobile-stack {
  display: flex;
  flex-direction: column;
}

.mobile-stack-image {
  width: 100%;
  height: auto;
  display: block;
}

/* Gallery styles */
.gallery-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 32px;
}

.gallery-grid.two-cols {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 32px;
}

.thumb {
  display: block;
  text-decoration: none;
}

.thumb img {
  display: block;
  max-width: 100%;
  height: auto;
  width: auto;
  margin: 0 auto;
  /* Prevent image saving and selection */
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
  user-drag: none;
  pointer-events: auto;
}

/* Dimensionnement spécifique basé sur les vraies dimensions des œuvres */

/* "tentefacedetour" 220cm x 240cm - La plus grande œuvre - AGRANDIE x1.5 */
.thumb img[src*="tentefacedetour"] { 
  max-height: 780px; 
  max-width: 720px;
}

/* "hepeuxplustevoirenpeinturedetour" 40cm x 50cm - Très petit format */
.thumb img[src*="jepeuxplustevoirenpeinturedetour"] { 
  max-height: 110px; 
  max-width: 88px;
}

/* "portefacedetour" 200cm x 200cm - Grand format carré */
.thumb img[src*="portefacedetour"] { 
  max-height: 400px; 
  max-width: 400px;
}

/* "cuirdetour" 200cm x 200cm - Grand format carré */
.thumb img[src*="cuirdetour"] { 
  max-height: 400px; 
  max-width: 400px;
}

/* "oeufdetour" 165cm x 120cm - Format horizontal moyen - AGRANDI x1.15 */
.thumb img[src*="oeufdetour"] { 
  max-height: 322px; 
  max-width: 443px;
}

/* "saintglinglindetour" 165cm x 120cm - Format horizontal moyen - AGRANDI x1.15 */
.thumb img[src*="saintglinglindetour"] { 
  max-height: 322px; 
  max-width: 443px;
}

/* "gouttedetour" 190cm x 130cm - Format vertical */
.thumb img[src*="gouttedetour"] { 
  max-height: 380px; 
  max-width: 260px;
}

/* "prometheedetour" 165cm x 120cm - Format horizontal moyen */
.thumb img[src*="prometheedetour"] { 
  max-height: 280px; 
  max-width: 385px;
}

/* "sisyphedetour" 145cm x 145cm - Format carré moyen */
.thumb img[src*="sisyphedetour"] { 
  max-height: 290px; 
  max-width: 290px;
}

/* "vulcaindetour" 185cm x 50cm - Format très horizontal - AGRANDI x1.8 */
.thumb img[src*="vulcaindetour"] { 
  max-height: 360px; 
  max-width: 1332px;
}

/* "carteldetour" 100cm x 74cm - Format horizontal petit - AGRANDI x1.5 */
.thumb img[src*="carteldetour"] { 
  max-height: 222px; 
  max-width: 300px;
}

/* "autoportraitdetour" 80cm x 40cm - Format horizontal très petit - AGRANDI x1.3 */
.thumb img[src*="autoportraitdetour"] { 
  max-height: 208px; 
  max-width: 416px;
}

/* Work page styles */
.work-media {
  margin: 2rem 0;
}

.work-image {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
  margin-bottom: 1rem;
  cursor: zoom-in;
  /* Prevent image saving and selection */
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
  user-drag: none;
}

.slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1s ease-in-out;
  /* Prevent image saving and selection */
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
  user-drag: none;
}

.mobile-stack-image {
  width: 100%;
  height: auto;
  display: block;
  /* Prevent image saving and selection */
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
  user-drag: none;
}

.work-desc {
  margin-top: 2rem;
  color: #666;
  line-height: 1.6;
}

/* Lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.88);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.lightbox[aria-hidden="false"] {
  display: flex;
}

.lightbox-inner {
  position: relative;
  max-width: 95vw;
  max-height: 95vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lb-canvas {
  overflow: hidden;
  touch-action: none;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
}

.lb-canvas img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  cursor: grab;
  transition: transform .12s linear;
}

.lb-btn {
  position: absolute;
  top: 18px;
  background: transparent;
  color: #fff;
  border: 0;
  font-size: 28px;
  cursor: pointer;
  padding: 6px;
  z-index: 10;
}

#lb-close {
  right: 18px;
}

#lb-zoom-in {
  right: 68px;
}

#lb-zoom-out {
  right: 118px;
}

/* Bio styles */
.bio-text {
  margin-bottom: 2rem;
}

.bio-text p {
  margin-bottom: 1rem;
}

/* CV styles */
.cv-text {
  line-height: 1.8;
}

.cv-section-title {
  font-weight: 700;
  margin-top: 2rem;
  margin-bottom: 1rem;
}

.cv-year {
  font-weight: 400;
  margin-top: 1rem;
  margin-bottom: 0.5rem;
}

/* MOBILE RESPONSIVE */
@media (max-width: 900px) {
  .app {
    flex-direction: column;
  }
  
  .sidebar {
    display: none;
  }
  
  .mobile-header {
    display: block;
    background: #f8f8f8;
    padding: 1rem;
    width: 100%;
  }
  
  .mobile-nav {
    display: flex;
    gap: 1rem;
    margin-top: 1rem;
  }
  
  .mobile-nav a {
    text-decoration: none;
    color: #666;
    font-size: 0.9rem;
  }
  
  .main {
    margin-left: 0;
    width: 100%;
  }
  
  .content {
    padding: 1rem;
  }
  
  /* Hide desktop slideshow on mobile */
  .desktop-only {
    display: none !important;
  }
  
  /* Show mobile stack on mobile */
  .mobile-only {
    display: block !important;
  }
  
  /* Mobile stack styles */
  .homepage-mobile-stack {
    display: flex;
    flex-direction: column;
    gap: 0;
  }
  
  .mobile-stack-image {
    width: 100%;
    height: auto;
    display: block;
    margin: 0;
  }

  /* Gallery mobile - disposition flexible pour 2-3 images par ligne */
  .gallery-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 16px;
  }

  .gallery-grid.two-cols {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 16px;
  }

  /* Tailles adaptées mobile - toutes augmentées x1.3 puis ajustements spécifiques */
  .thumb img[src*="tentefacedetour"] { max-height: 400px; max-width: 370px; } /* x1.3 puis x1.1 = 364x338 arrondi */
  .thumb img[src*="portefacedetour"], .thumb img[src*="cuirdetour"] { max-height: 286px; max-width: 286px; } /* x1.3 = 286x286 */
  .thumb img[src*="vulcaindetour"] { max-height: 260px; max-width: 962px; } /* x1.3 puis x2 = 260x962 */
  .thumb img[src*="gouttedetour"] { max-height: 260px; max-width: 182px; } /* x1.3 = 260x182 */
  .thumb img[src*="oeufdetour"], .thumb img[src*="saintglinglindetour"], .thumb img[src*="prometheedetour"] { max-height: 234px; max-width: 325px; } /* x1.3 = 234x325 */
  .thumb img[src*="sisyphedetour"] { max-height: 208px; max-width: 208px; } /* x1.3 = 208x208 */
  .thumb img[src*="carteldetour"] { max-height: 234px; max-width: 312px; } /* x1.3 puis x1.5 = 234x312 */
  .thumb img[src*="autoportraitdetour"] { max-height: 156px; max-width: 312px; } /* x1.3 puis x1.5 = 156x312 */
  .thumb img[src*="jepeuxplustevoirenpeinturedetour"] { max-height: 104px; max-width: 85px; } /* x1.3 = 104x85 */
}