:root{
      --bg:#ffffff; 
      --fg:#000000; 
      --hint:#888888;
    }
    [data-theme="dark"]{ 
      --bg:#0b0b0b; 
      --fg:#e8e8e8; 
      --hint:#a0a0a0; 
    }

    *,*::before,*::after{box-sizing:border-box;}
    html,body{height:100%; margin:0; padding:0;}
    body{ 
      font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
      background:var(--bg); 
      color:var(--fg); 
      transition:background .25s ease,color .25s ease;
      cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><text x="0" y="15" font-size="16" fill="black">—</text></svg>') 10 10, default;
      /* La hauteur minimale sera calculée dynamiquement par JavaScript */
    }
    
    [data-theme="dark"] body {
      cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><text x="0" y="15" font-size="16" fill="white">—</text></svg>') 10 10, default;
    }
    
    .logo-link{
      position:fixed;
      top:2vh;
      left:2vw;
      width:clamp(80px,10vw,150px);
      height:clamp(80px,10vw,150px);
      z-index:3;
      transition:opacity .3s ease;
      text-decoration:none;
      display:block;
    }
    .logo{
      width:100%;
      height:100%;
      object-fit:contain;
      pointer-events:none;
    }
    
    .cmd-hint{ 
      position:fixed; 
      right:2vw; 
      bottom:2vh; 
      color:var(--hint); 
      font-size:clamp(10px,.9vw,12px);
      line-height:1.4;
      font-weight:400;
      opacity:.9;
      z-index:3;
      pointer-events:none;
      user-select:none;
      -webkit-user-select:none;
      -moz-user-select:none;
      -ms-user-select:none;
    }
    
    /* Bloc de texte centré - FIXE pendant tout le parallaxe */
    .text-center {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 90%;
      max-width: 960px; /* Augmenté de 20% (800px * 1.2) */
      text-align: center;
      z-index: 2;
      padding: 2rem;
      transition: opacity 0.3s ease-out; /* Transition fluide pour le fade sur mobile */
    }
    
    /* Overlay de transition vers la galerie */
    #transitionOverlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: var(--bg);
      opacity: 0;
      pointer-events: none;
      z-index: 9999;
      transition: opacity 1.5s ease-out;
    }
    
    #transitionOverlay.active {
      opacity: 1;
    }
    
    /* Classes Neuton */
    .neuton-extralight {
      font-family: "Neuton", serif;
      font-weight: 200;
      font-style: normal;
    }

    .neuton-light {
      font-family: "Neuton", serif;
      font-weight: 300;
      font-style: normal;
    }

    .neuton-regular {
      font-family: "Neuton", serif;
      font-weight: 400;
      font-style: normal;
    }

    .neuton-bold {
      font-family: "Neuton", serif;
      font-weight: 700;
      font-style: normal;
    }

    .neuton-extrabold {
      font-family: "Neuton", serif;
      font-weight: 800;
      font-style: normal;
    }

    .neuton-regular-italic {
      font-family: "Neuton", serif;
      font-weight: 400;
      font-style: italic;
    }
    
    .intro-text {
      font-family: "Neuton", serif;
      font-weight: 300;
      font-style: normal;
      font-size: clamp(28px, 4vw, 45px);
      line-height: 1.05; /* Interligne encore réduit (était 1.15) */
      color: var(--fg);
      margin: 0;
    }
    
    /* Nouvelle section finale avec lien vers la galerie */
    .final-section {
      position: absolute;
      top: 0; /* Sera repositionné par JavaScript après calcul de la hauteur */
      left: 0;
      width: 100%;
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #ddcdbd; /* Couleur de fond spécifique */
      z-index: 11; /* Au-dessus des images parallaxe */
      will-change: auto; /* Pas d'animation parallaxe */
    }
    
    .final-text-container {
      text-align: center;
      width: 90%;
      max-width: 960px;
      padding: 2rem;
    }
    
    .final-text {
      font-family: "Neuton", serif;
      font-weight: 300;
      font-style: normal;
      font-size: clamp(28px, 4vw, 45px);
      line-height: 1.05;
      color: #000000; /* Texte noir sur fond beige */
      margin: 0 0 2rem 0;
    }
    
    .gallery-link {
      display: inline-block;
      font-family: "Neuton", serif;
      font-weight: 400;
      font-size: clamp(24px, 3.5vw, 38px);
      color: #000000; /* Lien noir sur fond beige */
      text-decoration: none;
      border-bottom: 2px solid #000000;
      padding-bottom: 0.2em;
      transition: opacity 0.3s ease, border-color 0.3s ease;
      cursor: pointer;
    }
    
    .gallery-link:hover {
      opacity: 0.7;
    }
    
    /* Conteneur des images en arrière-plan - grille aérée */
    .parallax-images {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 1;
      overflow: hidden;
      pointer-events: none; /* Désactiver les événements par défaut sur le conteneur */
    }
    
    .parallax-image-link {
      position: absolute;
      pointer-events: auto; /* Réactiver les événements sur les liens */
      transition: transform 0.3s ease;
      text-decoration: none;
    }
    
    .parallax-image-link {
      cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><text x="0" y="15" font-size="16" fill="%23ddcdbd">—</text></svg>') 10 10, pointer !important;
    }
    
    /* Curseur identique en mode dark */
    [data-theme="dark"] .parallax-image-link {
      cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><text x="0" y="15" font-size="16" fill="%23ddcdbd">—</text></svg>') 10 10, pointer !important;
    }
    
    .parallax-image-link:hover {
      z-index: 1000 !important;
    }
    
    .parallax-image-link:hover .parallax-image {
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    }
    
    .parallax-image {
      position: relative;
      max-width: 326px; /* Réduit de 5% (343 * 0.95) */
      max-height: 326px;
      width: auto;
      height: auto;
      object-fit: contain;
      border-radius: 2px;
      opacity: 1; /* Images claires, pas d'opacité réduite */
      will-change: transform, opacity;
      pointer-events: auto;
      filter: none; /* Pas de filtre */
      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
      transition: box-shadow 0.3s ease;
    }
    
    [data-theme="dark"] .parallax-image {
      opacity: 1; /* Images claires même en dark */
      filter: none;
      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
    }
    
    /* Espaces blancs (placeholders) pour créer l'aération */
    .parallax-placeholder {
      position: absolute;
      background: var(--bg);
      border-radius: 2px;
      will-change: transform;
      pointer-events: none;
      opacity: 1;
    }
    
    @media (max-width: 768px) {
      .logo-link{
        top:1vh;
        left:1vw;
        width:clamp(60px,8vw,100px);
        height:clamp(60px,8vw,100px);
      }
      .cmd-hint{
        display: none; /* Caché sur mobile (pas de clavier) */
      }
      .text-center {
        width: 85%;
        padding: 1.5rem;
      }
      .intro-text {
        font-size: clamp(24px, 5vw, 35px);
        line-height: 1.1; /* Interligne réduit pour mobile aussi */
      }
      .parallax-image {
        max-width: 222px; /* Réduit de 5% : 234 * 0.95 */
        max-height: 222px;
      }
    }
  </style>