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

  .site-wrap {
    font-family: 'DM Sans', sans-serif;
    background: #0e0e0e;
    color: #f0ede6;
    display: flex;
    flex-direction: column;
    height: 100vh;
    min-height: 500px;
    overflow: hidden;
  }

  /* HEADER */
  .site-header {
    background: #111;
    border-bottom: 1px solid #222;
    padding: 0 1.5rem;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 4px;
    flex-shrink: 0;
  }

  .site-name {
    font-family: 'Playfair Display', serif;
    font-size: clamp(18px, 4vw, 28px);
    font-weight: 700;
    letter-spacing: 0.08em;
    color: #f0ede6;
    text-transform: uppercase;
  }

  .site-desc {
    font-size: clamp(9px, 2vw, 12px);
    font-weight: 300;
    letter-spacing: 0.18em;
    color: #888;
    text-transform: uppercase;
    text-align: center;
  }

  /* MAIN */
  .site-main {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 1rem 1.2rem;
    gap: 0.8rem;
  }

  /* GALERIE DESKTOP : horizontale */
  .gallery-wrapper {
    flex: 1;
    overflow: hidden;
    position: relative;
  }

  .gallery-track {
    display: flex;
    gap: 12px;
    height: 100%;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  }

  /* Desktop : expand au hover via flex-grow */
  .gallery-item {
    flex: 1 1 0;
    min-width: 0;
    height: 100%;
    border-radius: 6px;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    transition: flex-grow 0.45s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease;
    border: 1px solid #222;
  }

  .gallery-track:has(.gallery-item:hover) .gallery-item { flex-grow: 0.55; }
  .gallery-item:hover { flex-grow: 2.4 !important; box-shadow: 0 12px 40px rgba(0,0,0,0.7); border-color: #444; }

  .gallery-item .img-bg {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    transition: transform 0.4s ease;
  }

  .gallery-item:hover .img-bg { transform: scale(1.03); }

  .gallery-item .overlay {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.85), transparent);
    padding: 1.2rem 0.9rem 0.9rem;
    opacity: 0;
    transition: opacity 0.3s ease;
  }

  .gallery-item:hover .overlay,
  .gallery-item.touch-active .overlay { opacity: 1; }

  .overlay-title {
    font-family: 'Playfair Display', serif;
    font-size: clamp(11px, 2vw, 14px);
    color: #f0ede6;
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .overlay-sub { font-size: 10px; color: #aaa; letter-spacing: 0.1em; }

  /* CONTRÔLES */
  .controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    flex-shrink: 0;
  }

  .ctrl-btn {
    background: #1a1a1a;
    border: 1px solid #333;
    color: #f0ede6;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
    flex-shrink: 0;
  }

  .ctrl-btn:hover { background: #2a2a2a; border-color: #555; }

  .dots-nav { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: center; }

  .dot-nav {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #444;
    cursor: pointer;
    transition: background 0.2s, transform 0.2s;
  }

  .dot-nav.active { background: #c8a96e; transform: scale(1.4); }

  /* FOOTER */
  .site-footer {
    background: #111;
    border-top: 1px solid #222;
    padding: 0 1.5rem;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    flex-shrink: 0;
    flex-wrap: wrap;
  }

  .footer-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: clamp(10px, 2vw, 12px);
    color: #888;
  }

  .footer-sep { width: 1px; height: 16px; background: #2a2a2a; }
  .footer-item span { color: #bbb; }
  .footer-icon { width: 13px; height: 13px; opacity: 0.6; flex-shrink: 0; }
  
  
  
  
  
  
  
  
  
  
  
  
  

    /* ─── MOBILE : scroll vertical natif ─── */
    @media (max-width: 768px) {
        
        
      .site-wrap {
        height: auto;
        min-height: 100vh;
        overflow: visible;
      }

      .site-main { 
        padding: 0.8rem; 
        gap: 0.6rem; 
        overflow: visible;
      }

      .gallery-wrapper {
        overflow: visible;
        -webkit-overflow-scrolling: touch;
      }

      .gallery-wrapper::-webkit-scrollbar { display: none; }

      .gallery-track {
        flex-direction: column;
        flex-wrap: nowrap;
        height: auto;
          
      }

      .gallery-track {
        flex-direction: column;
        flex-wrap: nowrap;
        height: auto;
        width: 100%;
        transform: none !important; /* désactive le JS de pagination */
        transition: none;
        gap: 10px;
      }

      /* Désactive l'effet flex-grow sur mobile */
      .gallery-track:has(.gallery-item:hover) .gallery-item { flex-grow: 1; }
      .gallery-item:hover {
        flex-grow: 1 !important;
        box-shadow: none;
        border-color: #222;
      }

      .gallery-item {
        flex: none;
        width: 100%; 
        height: 60vh;/* légèrement inférieur à 100% pour voir la suivante */
        transition: box-shadow 0.3s ease;
      }

    /* Sur mobile pas de hover, on utilise touch-active */
    .gallery-track:has(.gallery-item:hover) .gallery-item { flex-grow: 1; }
    .gallery-item:hover { flex-grow: 1 !important; box-shadow: none; border-color: #222; }

       .gallery-item.touch-active {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        z-index: 10;
        box-shadow: 0 12px 40px rgba(0,0,0,0.8);
        border-color: #444 !important;
        border-radius: 0;
      }

      .gallery-item.touch-active .img-bg {
        border-radius: 0;
      }

    .gallery-item.touch-active .overlay { opacity: 1; }
    .gallery-item.touch-active .img-bg { transform: scale(1.03); }
    
    /* CONTRÔLES */
  .controls {
      display: none;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    flex-shrink: 0;
  }

  .ctrl-btn {
      display: none;
    background: #1a1a1a;
    border: 1px solid #333;
    color: #f0ede6;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
    flex-shrink: 0;
  }

  .ctrl-btn:hover { display: none; background: #2a2a2a; border-color: #555; }

  .dots-nav { display: none; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: center; }

  .dot-nav {
      display: none;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #444;
    cursor: pointer;
    transition: background 0.2s, transform 0.2s;
  }

  .dot-nav.active { display: none; background: #c8a96e; transform: scale(1.4); }

    .site-footer {
      height: auto;
      padding: 8px 1rem;
      gap: 0.8rem;
    }

    .footer-sep { display: none; }
  }