/**
     * 📘 IMPORTANT : Après toute modification de ce fichier CSS
     * → Incrémenter assets_version dans gallery/reglages/gallery-config.json
     * → Consulter gallery/reglages/DEV-GUIDELINES.md pour les bonnes pratiques
     */

    /* ========================================
       FONTS (SangBleuKingdom pour DesktopTopics)
       Format: WOFF2 (priorité) + WOFF (fallback)
       ======================================== */
    
    /* Bold - 700 (pour label) */
    @font-face {
        font-family: 'SangBleuKingdom';
        src: url('../fonts/sangbleu/SangBleuKingdom-Bold-WebS.woff2') format('woff2'),
             url('../fonts/sangbleu/SangBleuKingdom-Bold-WebS.woff') format('woff');
        font-weight: 700;
        font-style: normal;
        font-display: swap;
    }
    
    /* Medium - 500 (pour title) */
    @font-face {
        font-family: 'SangBleuKingdom';
        src: url('../fonts/sangbleu/SangBleuKingdom-Medium-WebS.woff2') format('woff2'),
             url('../fonts/sangbleu/SangBleuKingdom-Medium-WebS.woff') format('woff');
        font-weight: 500;
        font-style: normal;
        font-display: swap;
    }
    
    /* Regular - 400 (pour columns) */
    @font-face {
        font-family: 'SangBleuKingdom';
        src: url('../fonts/sangbleu/SangBleuKingdom-Regular-WebS.woff2') format('woff2'),
             url('../fonts/sangbleu/SangBleuKingdom-Regular-WebS.woff') format('woff');
        font-weight: 400;
        font-style: normal;
        font-display: swap;
    }

    :root{
      --bg:#f5f3ed; --fg:#000000; --hint:#888888;
      --bg-rgb: 245, 243, 237; /* RGB pour les gradients avec rgba() */
      --edge-padding-vw:10vw; --padding-top:8vh; --padding-bottom:10vh;
      --ui-gap:8px; --info-line-height:1.2; --mobile-gap:2vh; --logo-h:0px;
      /* Zone texte à gauche (DesktopOne) - largeur responsive, police fixe */
      --text-zone-width: clamp(120px, 15vw, 280px);
      --text-zone-left: clamp(16px, 2vw, 40px);
    }
    [data-theme="dark"]{ --bg:#0b0b0b; --fg:#e8e8e8; --hint:#a0a0a0; --bg-rgb: 11, 11, 11; }

    *,*::before,*::after{box-sizing:border-box;}
    html,body{height:100%; overscroll-behavior-y: none; /* Désactive pull-to-refresh */}
    body{ margin:0; font-family:'Roboto',system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
          background:var(--bg); color:var(--fg); transition:background .25s ease,color .25s ease; 
          overscroll-behavior-y: none; /* Désactive pull-to-refresh sur body aussi */
          -webkit-overflow-scrolling: touch; /* Scroll fluide sur iOS/Android */ }
    
    /* PageSpeed optimized: body toujours visible, masquer seulement le contenu */
    body.loading main,
    body.loading .text-info-container,
    body.loading .cmd-hint { 
      opacity: 0; 
      pointer-events: none;
    }
    
    /* BUG FIX 3: Cacher DesktopOne UNIQUEMENT lors du chargement initial avec URL grid-* ou topics-* */
    /* Important: Ne pas utiliser !important pour permettre JavaScript de réactiver */
    body.loading.initial-grid-view main {
      display: none;
      opacity: 0;
      visibility: hidden;
    }
    
    body.loading.initial-grid-view .desktop-grid-view {
      display: block;
    }
    
    body.loading.initial-topics-view main {
      display: none;
      opacity: 0;
      visibility: hidden;
    }
    
    body.loading.initial-topics-view .desktop-topics-view {
      display: block;
    }
    
    body.loaded main,
    body.loaded .text-info-container,
    body.loaded .cmd-hint { 
      opacity: 1; 
      transition: opacity .3s ease;
    }

    /* Filtre monochrome - N&B style pellicule argentique */
    body.monochrome #photo {
      filter: 
        grayscale(100%)
        contrast(1.22)
        brightness(1.05)
        saturate(0)
        url(#kodak-grain);
      transition: filter 350ms ease;
    }

    .logo-link{position:fixed;top:2vh;left:2vw;width:clamp(80px,10vw,150px);height:clamp(80px,10vw,150px);z-index:20;transition:opacity .3s ease;text-decoration:none;display:block}
    .logo{width:100%;height:100%;object-fit:contain;pointer-events:none}
    /* Logo footer principal (galerie desktop ET mobile) */
    .logo-footer-link {
      position: fixed;
      bottom: 2vh;
      left: 2vw;
      width: clamp(40px,5vw,75px);
      height: auto;
      z-index: 10000;
      transition: opacity .3s ease;
      text-decoration: none;
      display: none; /* Caché par défaut en desktop */
      pointer-events: auto;
      cursor: pointer;
    }
    
    /* Afficher UNIQUEMENT en mobile */
    @media (max-width: 768px) {
      .logo-footer-link {
        display: block !important;
      }
    }
    
    .logo-footer {
      width: 100%;
      height: auto;
      object-fit: contain;
      pointer-events: auto;
      cursor: pointer;
    }
    
    body[data-theme="dark"] .logo-footer-link {
      display: none;
    }

    /* Layout Desktop : Conteneur texte à gauche - flex column pour empilement automatique */
    .text-info-container{
      position:fixed;
      left:var(--text-zone-left);
      top:50%;
      transform:translateY(-50%);
      width:var(--text-zone-width);
      max-width:var(--text-zone-width);
      display:flex;
      flex-direction:column;
      gap:0.3em;
      pointer-events:none;
      z-index:3;
      overflow:hidden;
    }
    
    .counter-fixed{font-size:clamp(9px,0.9vw,12px);line-height:var(--info-line-height);font-weight:400;opacity:.9}
    .caption-fixed{font-size:clamp(9px,0.9vw,12px);line-height:var(--info-line-height);font-weight:400;opacity:.9;word-wrap:break-word;overflow-wrap:break-word}
    .city-fixed{font-size:clamp(9px,0.9vw,12px);line-height:var(--info-line-height);font-weight:400;opacity:.8;word-wrap:break-word;overflow-wrap:break-word}
    .description-fixed{font-size:clamp(9px,0.9vw,12px);line-height:1.4;font-weight:400;opacity:.7;margin-top:0.8em;word-wrap:break-word;overflow-wrap:break-word}
    
    /* Ajustements pour grands écrans (>1600px) : zone texte plus grande */
    @media (min-width: 1600px) {
      :root {
        --text-zone-width: clamp(200px, 18vw, 320px);
      }
    }
    
    /* Ajustements pour écrans moyens-petits (769px-1200px) : zone texte réduite */
    @media (min-width: 769px) and (max-width: 1200px) {
      :root {
        --text-zone-width: clamp(100px, 12vw, 180px);
      }
    }

    .cmd-hint{ position:fixed; right:2vw; bottom:2vh; color:var(--hint); font-size:clamp(10px,.9vw,12px);
               line-height:1.3; letter-spacing:.2px; opacity:.28; transition:opacity .25s ease;
               pointer-events:none; z-index:20; user-select:none; }
    body:hover .cmd-hint{ opacity:.6; }
    .cmd-hint .cmd-active{ 
      font-weight:normal; 
      opacity:1; 
      background:rgba(128, 128, 128, 0.25); 
      color:var(--hint); 
      padding:2px 8px; 
      border-radius:3px;
      display:inline-block;
    }

    .cmd-hint .topics-switch.active,
    .cmd-hint .grid-switch.active { 
      font-weight:normal; 
      opacity:1; 
      background:rgba(128, 128, 128, 0.25); 
      color:var(--hint); 
      padding:2px 8px; 
      border-radius:3px;
      display:inline-block;
      pointer-events:auto;
      cursor:pointer;
    }

    /* Image toujours centrée sur l'écran */
    main{height:100vh;width:100vw;padding:var(--padding-top) var(--edge-padding-vw) var(--padding-bottom) var(--edge-padding-vw)}
    .stack{min-height:calc(100vh - var(--padding-top) - var(--padding-bottom));display:grid;place-items:center;gap:var(--ui-gap);position:relative;width:100%}

    figure{margin:0}
    .image-wrap{position:relative;display:inline-block}
    /* Image centrée sur l'écran */
    #photo{display:block;margin:0 auto;user-select:none;-webkit-user-drag:none;max-width:calc(100vw - (var(--edge-padding-vw) * 2));max-height:calc(100vh - (var(--padding-top) + var(--padding-bottom)));object-fit:contain;transition:opacity 350ms ease;opacity:1;z-index:1}
    
    /* Curseur flèche droite en mode fullscreen */
    :fullscreen #photo,
    :-webkit-full-screen #photo {
      cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><text x="2" y="18" font-family="Roboto,system-ui,sans-serif" font-size="18" fill="%23ddcdbd">→</text></svg>') 12 12, e-resize;
    }
    
    .fade-out{opacity:0}

    /* Transparent nav zones — no focus outline */
    .nav-zone{
      position:absolute;inset:0;width:50%;
      background:transparent;border:0;padding:0;margin:0;z-index:2;
      outline:none; box-shadow:none; -webkit-appearance:none; appearance:none;
      -webkit-tap-highlight-color: transparent;
    }
    .nav-zone:focus{ outline:none; box-shadow:none; }
    .nav-zone::-moz-focus-inner{ border:0; }
    .nav-left{
      left:0;right:auto;
      cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><text x="2" y="18" font-family="Roboto,system-ui,sans-serif" font-size="18" fill="%23ddcdbd">←</text></svg>') 12 12, w-resize;
    }
    .nav-right{
      right:0;left:auto;
      cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><text x="2" y="18" font-family="Roboto,system-ui,sans-serif" font-size="18" fill="%23ddcdbd">→</text></svg>') 12 12, e-resize;
    }
    
    /* Curseurs pour thème dark - même couleur #ddcdbd */
    [data-theme="dark"] .nav-left {
      cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><text x="2" y="18" font-family="Roboto,system-ui,sans-serif" font-size="18" fill="%23ddcdbd">←</text></svg>') 12 12, w-resize;
    }
    [data-theme="dark"] .nav-right {
      cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><text x="2" y="18" font-family="Roboto,system-ui,sans-serif" font-size="18" fill="%23ddcdbd">→</text></svg>') 12 12, e-resize;
    }
    [data-theme="dark"] .grid-item {
      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;
    }

    figcaption{display:none}

    @media (max-width:768px){
      :root{--edge-padding-vw:0vw;--padding-top: calc(var(--logo-h, 0px) + 4vh);--padding-bottom:5vh}
      .logo{ top:1vh; }
      .text-info-container,.counter-fixed,.caption-fixed,.city-fixed,.description-fixed{display:none}
      .cmd-hint{display:none}
      .cmd-hint-full{display:none !important}
      .cmd-hint-grid{display:none !important}
      
      /* Cacher les anciennes vues mobiles */
      .cmd-mobile {
        display: none !important;
      }
      
      .stack{display:none}
      main{display:none}
      
      /* DESKTOP: Afficher main par défaut, sauf en grid-mode ou mobile-active */
      @media (min-width: 769px) {
        body:not(.grid-mode):not(.mobile-active) main {
          display: block !important;
        }
        
        /* DESKTOP: Afficher cmd-hint-full par défaut (sauf en grid-mode) */
        body:not(.grid-mode):not(.mobile-active) .cmd-hint-full {
          display: block !important;
        }
        
        /* DESKTOP: Cacher cmd-hint-grid par défaut (sauf en grid-mode) */
        body:not(.grid-mode):not(.mobile-active) .cmd-hint-grid {
          display: none !important;
        }
      }
      
      /* ===== VUE MOBILETWO ===== */
      
      /* Container principal MobileTwo - CACHÉ PAR DÉFAUT */
      .mobile-two-view {
        display: none !important; /* Force hide by default */
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        padding: 0;
        overflow-x: hidden;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-y: contain;
        z-index: 100;
      }
      
      /* Cacher MobileTwo si la vue Topics est active (toutes tailles d'écran) */
      body.topics-mode .mobile-two-view {
        display: none !important;
      }
      
      /* Afficher MobileTwo en mobile (<768px) PAR DÉFAUT, SAUF si DesktopTopics est actif */
      @media (max-width: 768px) {
        .mobile-two-view {
          display: block !important;
        }
      }
      
      /* FORCER à cacher MobileTwo en desktop (>768px) */
      @media (min-width: 769px) {
        .mobile-two-view,
        .mobile-two-view[style] {
          display: none !important;
        }
      }
      
      /* Scroll fluide pour mobile */
      body.mobile-active {
        overflow: hidden;
        position: fixed;
        width: 100%;
        height: 100%;
        touch-action: pan-y;
      }
      
      html.mobile-active {
        overflow: hidden;
        height: 100%;
      }
      
      /* Optimisations GPU pour scroll fluide */
      .mobile-two-row {
        transform: translate3d(0, 0, 0);
        -webkit-transform: translate3d(0, 0, 0);
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
        perspective: 1000px;
        -webkit-perspective: 1000px;
      }
      
      /* Cacher le logo en haut à gauche */
      .mobile-two-view ~ .logo-link,
      body.mobile-active .logo-link {
        display: none !important;
      }
      
      /* Logo fixe aligné à gauche avec les images - UNIQUEMENT EN MOBILETWO */
      .mobile-two-logo {
        display: none; /* Caché par défaut */
        position: fixed;
        top: 50%;
        left: 4vw;
        transform: translateY(-50%);
        width: clamp(80px, 20vw, 120px);
        height: auto;
        z-index: 1;
        opacity: 0.15;
        pointer-events: none;
        transition: opacity 0.3s ease;
      }
      
      /* Afficher le logo UNIQUEMENT en mobile */
      @media (max-width: 768px) {
        .mobile-two-logo {
          display: block;
        }
      }
      
      /* Afficher le logo UNIQUEMENT si mobile-active est présent ET en mobile */
      @media (max-width: 768px) {
        body.mobile-active .mobile-two-logo {
          display: block !important;
        }
      }
      
      /* FORCER à cacher le logo en desktop - PRIORITÉ ABSOLUE */
      @media (min-width: 769px) {
        .mobile-two-logo,
        .mobile-two-logo[style],
        body.mobile-active .mobile-two-logo,
        body.grid-mode .mobile-two-logo {
          display: none !important;
        }
      }
      
      /* Menu burger */
      .mobile-burger {
        position: fixed;
        top: 3vh;
        right: 4vw;
        width: 32px;
        height: 32px;
        z-index: 100;
        cursor: pointer;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 6px;
        padding: 4px;
      }
      
      .mobile-burger-line {
        width: 100%;
        height: 2px;
        background: var(--hint);
        transition: all 0.3s ease;
      }
      
      .mobile-burger.active .mobile-burger-line:nth-child(1) {
        transform: rotate(45deg) translateY(8px);
      }
      
      .mobile-burger.active .mobile-burger-line:nth-child(2) {
        opacity: 0;
      }
      
      .mobile-burger.active .mobile-burger-line:nth-child(3) {
        transform: rotate(-45deg) translateY(-8px);
      }
      
      /* Tiroir menu */
      .mobile-drawer {
        position: fixed;
        top: 0;
        right: -100%;
        width: 80vw;
        height: 100vh;
        background: #ddcdbd;
        z-index: 99;
        transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        overflow-y: auto;
        padding: 15vh 8vw 10vh 8vw;
      }
      
      .mobile-drawer.open {
        right: 0;
      }
      
      .mobile-drawer-link {
        display: block;
        font-family: "Neuton", serif;
        font-weight: 300;
        font-size: 20px;
        line-height: 1.2;
        color: #000;
        text-decoration: none;
        margin-bottom: 0.8vh;
        transition: opacity 0.3s ease;
        text-transform: capitalize;
      }
      
      .mobile-drawer-link:hover,
      .mobile-drawer-link:active {
        opacity: 0.6;
      }
      
      .mobile-drawer-separator {
        height: 1px;
        background: var(--hint);
        opacity: 0.2;
        margin: 6vh 0;
      }
      
      /* Container avec flexbox pour contrôle précis */
      .mobile-two-grid {
        display: flex;
        flex-wrap: wrap;
        gap: 0;
        padding: 4vw;
        position: relative;
        z-index: 2;
      }
      
      /* Ligne (row) contenant 2 images - Optimisation GPU conservatrice */
      .mobile-two-row {
        display: flex;
        width: 100%;
        gap: 4vw;
        padding-bottom: 4vw;
        /* Optimisation GPU basique uniquement */
        transform: translateZ(0);
        -webkit-transform: translateZ(0);
      }
      
      /* Item image - Animation optimisée SANS blur */
      .mobile-two-item {
        position: relative;
        flex: 1;
        cursor: pointer;
        transition: flex 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        opacity: 0;
        min-width: 0;
        overflow: hidden;
        /* Animation simplifiée : translateY réduit + scale subtil */
        transform: translateY(20px) scale(0.96) translateZ(0);
        -webkit-transform: translateY(20px) scale(0.96) translateZ(0);
        /* Suppression du blur coûteux - GAIN PRINCIPAL */
      }
      
      /* État chargé - Transition rapide et fluide */
      .mobile-two-item.loaded {
        opacity: 1;
        transform: translateY(0) scale(1) translateZ(0);
        -webkit-transform: translateY(0) scale(1) translateZ(0);
        /* Transitions optimisées : 400ms au lieu de 1000ms */
        transition: flex 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                    opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1),
                    transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
      }
      
      /* Image agrandie : prend 4 parts */
      .mobile-two-item.expanded {
        flex: 4;
        z-index: 10;
      }
      
      /* Image réduite : prend 1 part */
      .mobile-two-item.shrunk {
        flex: 1;
        opacity: 1;
      }
      
      /* Image - Optimisation GPU basique */
      .mobile-two-item img {
        width: 100%;
        height: auto;
        display: block;
        object-fit: cover;
        pointer-events: none;
        user-select: none;
        -webkit-user-select: none;
        transform: translateZ(0);
        -webkit-transform: translateZ(0);
      }
      
      /* Étiquette nom (visible uniquement si expanded) */
      .mobile-two-label {
        position: absolute;
        bottom: 6px;
        left: 6px;
        background: rgba(0, 0, 0, 0.75);
        color: #fff;
        padding: 3px 8px;
        font-family: "Roboto", sans-serif;
        font-size: 8px;
        font-weight: 400;
        text-transform: uppercase;
        letter-spacing: 0.3px;
        opacity: 0;
        transition: opacity 0.5s ease 0.3s;
        pointer-events: none;
      }
      
      .mobile-two-item.expanded .mobile-two-label {
        opacity: 1;
      }
      
      .mobile-two-item.shrunk .mobile-two-label {
        opacity: 0;
        transition: opacity 0.2s ease;
      }
      figure{display:block;text-align:center}
      #photo{max-width:100vw}

      figcaption{
        display:block;
        margin:var(--mobile-gap) auto 0 auto;
        width:var(--fig-w, 100%);
        max-width:100vw;
        padding:0 12px;
        font-size:14px;
        line-height:var(--info-line-height)
      }
      .cap-line{ display:flex; align-items:baseline; justify-content:space-between; gap:8px; width:100%; }
      .mobile-counter{white-space:nowrap; flex:0 0 auto; text-align:left; opacity:.9;}
      .mobile-caption{flex:1 1 auto; text-align:center; opacity:.9; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
      .mobile-city{white-space:nowrap; flex:0 0 auto; text-align:right; opacity:.85;}
    }

    :fullscreen, :-webkit-full-screen { --edge-padding-vw:5vw; --padding-top:5vh; --padding-bottom:5vh; }
    /* Fullscreen: Masquer logos, description et TOUS les menus de commande, mais conserver compteur/légende/ville */
    :fullscreen .logo-link, :fullscreen .logo-footer-link, :fullscreen .description-fixed, 
    :fullscreen .mobile-counter, :fullscreen .mobile-caption, :fullscreen .mobile-city, 
    :fullscreen .cmd-hint, :fullscreen .cmd-hint-full, :fullscreen .cmd-hint-grid { display:none !important; }
    
    /* Safari */
    :-webkit-full-screen .logo-link, :-webkit-full-screen .logo-footer-link, :-webkit-full-screen .description-fixed, 
    :-webkit-full-screen .mobile-counter, :-webkit-full-screen .mobile-caption, :-webkit-full-screen .mobile-city, 
    :-webkit-full-screen .cmd-hint, :-webkit-full-screen .cmd-hint-full, :-webkit-full-screen .cmd-hint-grid { display:none !important; }
    
    /* Fullscreen depuis Grid : même apparence que fullscreen normal */
    :fullscreen .desktop-grid-view,
    :-webkit-full-screen .desktop-grid-view { display: none !important; z-index: -1 !important; }
    
    /* IMPORTANT: Forcer main à s'afficher en fullscreen même si body.grid-mode est actif */
    :fullscreen main,
    :-webkit-full-screen main,
    body.grid-mode:fullscreen main,
    body.grid-mode:-webkit-full-screen main { 
      display: block !important; 
      z-index: 10 !important; 
    }
    
    :fullscreen #photo,
    :-webkit-full-screen #photo { z-index: 10 !important; }

    /* DesktopGrid Styles */
    .desktop-grid-view {
      display: none !important; /* Force hide by default */
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      background: var(--bg-color);
      z-index: 1;
      overflow-y: auto;
      overflow-x: hidden;
      padding: 0;
      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;
    }
    
    [data-theme="dark"] .desktop-grid-view {
      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;
    }
    
    /* FORCER à cacher DesktopGrid en desktop par défaut (sauf si grid-mode) */
    @media (min-width: 769px) {
      body:not(.grid-mode) .desktop-grid-view,
      body:not(.grid-mode) .desktop-grid-view[style] {
        display: none !important;
      }
    }

    /* Conteneur du menu filtre - centré horizontalement */
    .category-selector-container {
      position: fixed;
      top: calc(var(--padding-top) * 2 - 4vh); /* 4vh d'espace avant la grid */
      left: 50%; /* Centré horizontalement */
      transform: translateX(-50%); /* Ajustement pour centrage parfait */
      z-index: 200; /* Au-dessus de toutes les images (z-index max: 100) */
      /* Pas de fond ici, le fond sera sur le .category-selector */
    }

    .category-selector {
      /* Fond opaque compact autour du texte */
      position: relative;
      display: inline-block; /* Taille adaptée au contenu */
      text-align: right;
      color: var(--hint);
      font-size: clamp(10px, .9vw, 12px);
      line-height: 1.3;
      letter-spacing: .2px;
      opacity: .28;
      transition: opacity .25s ease;
      pointer-events: auto;
      user-select: none;
      background: var(--bg); /* Fond 100% opaque */
      padding: 8px 16px; /* Padding compact */
      border-radius: 12px; /* Coins arrondis plus élégants */
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); /* Ombre légère */
    }
    
    body:hover .category-selector {
      opacity: .6;
    }
    
    [data-theme="dark"] .category-selector {
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    }

    .category-btn {
      background: none;
      border: none;
      color: inherit;
      cursor: pointer;
      transition: opacity .25s ease;
      font-size: inherit;
      font-weight: 400;
      white-space: nowrap;
      padding: 0;
      margin-right: 0;
    }
    
    .category-btn:not(:last-child)::after {
      content: " — ";
      margin: 0 4px;
    }

    .category-btn:hover {
      opacity: 1;
    }

    .category-btn.active {
      opacity: 1;
      font-weight: 500;
    }
    
    .category-btn.active .category-text {
      background: rgba(0, 0, 0, 0.15);
      padding: 4px 8px;
      border-radius: 4px;
    }
    
    /* Style actif adaptatif pour les boutons de catégorie */
    [data-theme="dark"] .category-btn.active .category-text {
      background: rgba(255, 255, 255, 0.2);
    }

    .grid-switch {
      cursor: pointer;
      padding: 4px 8px;
      border-radius: 4px;
      transition: all 0.3s ease;
    }

    .grid-switch:hover {
      background: rgba(255, 255, 255, 0.1);
    }

    .grid-switch.active {
      background: rgba(0, 0, 0, 0.15);
    }
    
    /* Style actif adaptatif selon le thème */
    [data-theme="dark"] .grid-switch.active {
      background: rgba(255, 255, 255, 0.2);
    }

    .grid-container {
      position: relative;
      margin-top: 0;
      width: 100vw;
      min-height: 100vh;
      padding: 5vh 5vw;
      box-sizing: border-box;
    }

    .grid-item {
      position: absolute;
      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;
      overflow: hidden;
      border-radius: 0;
      will-change: transform;
      transition: transform 0.1s ease-out;
    }

    .grid-item:hover {
      z-index: 100 !important;
      transform: scale(1.05) !important;
    }

    .grid-item img {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: cover;
      pointer-events: none;
    }


    /* Masquer conteneur texte en mode DesktopGrid */
    body.grid-mode .text-info-container,
    body.grid-mode .counter-fixed,
    body.grid-mode .caption-fixed,
    body.grid-mode .city-fixed,
    body.grid-mode .description-fixed {
      display: none !important;
    }
    
    /* BUG FIX: Forcer main à être caché en mode grid-mode */
    body.grid-mode main {
      display: none !important;
    }
    
    /* BUG FIX: Forcer desktopGrid à être visible en mode grid-mode */
    body.grid-mode .desktop-grid-view {
      display: block !important;
    }
    
    /* FIX RESPONSIVE: Cacher main et desktopGrid en mode mobile-active */
    body.mobile-active main {
      display: none !important;
    }
    
    body.mobile-active .desktop-grid-view {
      display: none !important;
    }
    
    body.mobile-active .mobile-two-view {
      display: block !important;
    }
    
    /* IMPORTANT: Forcer le masquage de DesktopGrid en mobile MÊME avec style inline */
    body.mobile-active .desktop-grid-view[style] {
      display: none !important;
    }

    /* Gestion des deux versions du Menu Commande */
    body.grid-mode .cmd-hint-full {
      display: none !important;
    }
    
    body.grid-mode .cmd-hint-grid {
      display: block !important;
    }
    
    /* Cacher TOUS les menus de commande en mode mobile-active */
    body.mobile-active .cmd-hint,
    body.mobile-active .cmd-hint-full,
    body.mobile-active .cmd-hint-grid {
      display: none !important;
    }

    /* Masquer DesktopGrid en mode mobile MÊME avec style inline */
    @media (max-width: 768px) {
      .desktop-grid-view,
      .desktop-grid-view[style] {
        display: none !important;
      }
      .description-fixed {
        display: none !important;
      }
    }


    /* ===== FULLSCREEN MOBILE VIEW ===== */
    .fullscreen-mobile-view {
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh; /* Fallback pour anciens navigateurs */
      height: 100dvh; /* ✅ Dynamic Viewport Height - s'adapte à la barre d'URL Chrome */
      background: var(--bg);
      z-index: 10000;
      display: none;
      opacity: 0;
      transform: scale(0.95);
      transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1), 
                  transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    }
        
    .fullscreen-mobile-view.active {
      display: flex; /* Flexbox au lieu de block */
      flex-direction: column;
      justify-content: center; /* ✅ Centre verticalement */
      align-items: center; /* ✅ Centre horizontalement */
      opacity: 1;
      transform: scale(1);
    }
    
    /* IMPORTANT: Masquer complètement FullscreenMobile en mode desktop */
    @media (min-width: 769px) {
      .fullscreen-mobile-view {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
        z-index: -1 !important;
      }
    }

    /* Masquer MobileTwo quand FullscreenMobile est actif */
    body.fullscreen-mobile-active .mobile-two-view {
      display: none !important;
    }

    /* Wrapper global pour centrer image + texte ensemble */
    .fullscreen-mobile-content {
      position: relative; /* Référence pour le logo en absolute */
      display: flex;
      flex-direction: column;
      justify-content: center; /* ✅ Centre le contenu verticalement */
      align-items: center; /* ✅ Centre le contenu horizontalement */
      gap: 20px; /* Espace entre image et texte */
      padding: 0 5vw; /* Même padding que l'image pour alignement */
      height: 100%; /* ✅ CRUCIAL: Prend toute la hauteur du parent pour activer le centrage */
      width: 100%;
    }

    /* Conteneur de l'image - Flex qui s'adapte au contenu */
    .fullscreen-mobile-image-container {
      display: flex;
      justify-content: center;
      align-items: center;
      max-height: 70vh; /* Laisser de la place pour le texte */
      width: 100%; /* ✅ Prend toute la largeur du wrapper */
    }
    
    /* Image verticale et horizontale → toutes centrées */
    .fullscreen-mobile-image-container.vertical,
    .fullscreen-mobile-image-container.horizontal {
      align-items: center;
    }
    
    .fullscreen-mobile-image {
      max-width: 100%;
      max-height: 100%; /* 100% du conteneur (70vh) */
      width: auto;
      height: auto;
      object-fit: contain;
      cursor: pointer;
      user-select: none;
      -webkit-user-select: none;
      touch-action: pan-x;
    }

    /* Zone de texte - Centrée par rapport à l'image */
    .fullscreen-mobile-info {
      position: relative; /* ✅ Référence pour le logo */
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      z-index: 10; /* Au-dessus de l'image */
      width: 100%;
    }

    /* Logo deus - Aligné avec le bord gauche de l'image */
    .fullscreen-mobile-logo {
      position: absolute;
      bottom: 0; /* ✅ Aligné avec le bas du bloc de texte */
      left: 0; /* ✅ Aligné avec le bord gauche (padding déjà appliqué au wrapper) */
      width: 40px; /* Taille du logo */
      height: auto;
      opacity: 0.8; /* Légèrement transparent pour élégance */
      pointer-events: none; /* Pas d'interaction */
      z-index: 11;
    }

    /* Wrapper pour titre + ville (colonne verticale) */
    .fullscreen-mobile-text {
      display: flex;
      flex-direction: column;
      gap: 3px; /* Espace réduit entre titre et ville */
      align-items: center; /* Texte centré */
    }

    .fullscreen-mobile-title,
    .fullscreen-mobile-city {
      font-family: 'Roboto', sans-serif;
      font-weight: 600;
      color: var(--fg);
      text-align: center; /* Texte centré */
    }

    .fullscreen-mobile-title {
      font-size: 12px;
      letter-spacing: 0.3px;
    }

    .fullscreen-mobile-city {
      font-size: 11px;
    }

    /* ========================================
       DESKTOPTOPICS VIEW (Style éditorial)
       Créée le 26 janvier 2026 - Refonte 28 janvier 2026
       ======================================== */
    
    .desktop-topics-view {
      display: none;
      width: 100%;
      min-height: 100vh;
      overflow-y: auto;
      overflow-x: hidden;
      background: var(--bg);
      color: var(--fg);
    }
    
    /* Thème clair : fond beige comme Prix Pictet */
    [data-theme="light"] .desktop-topics-view {
      background: #f5f5f0;
      color: #2a2a2a;
    }
    
    /* Thème dark : fond noir */
    [data-theme="dark"] .desktop-topics-view {
      background: #0b0b0b;
      color: #e8e8e8;
    }
    
    /* Réactiver le scroll pour le mode Topics - PRIORITÉ MAXIMALE */
    html.topics-mode,
    body.topics-mode,
    html.topics-mode body,
    body.topics-mode html {
      overflow-y: auto !important;
      overflow-x: hidden !important;
      height: auto !important;
      min-height: 100vh !important;
      overflow: visible !important;
    }
    
    body.topics-mode .desktop-topics-view {
      display: block;
      position: relative; /* Changé de fixed à relative pour permettre le scroll */
      width: 100%;
      min-height: 100vh;
      z-index: 10;
    }
    
    /* Topics utilise les MÊMES classes CSS que Grid (.category-selector-container et .category-btn) */
    
    /* Topics Content */
    .topics-content {
      max-width: none;  /* Pas de limite, conteneur pleine largeur */
      margin: 0 auto;
      padding: 0;  /* Pas de padding sur le conteneur principal */
    }
    
    /* Hero Photo (grande photo en haut de page) */
    .topics-hero {
      margin: 16rem auto 6rem;
      cursor: pointer;
      max-width: 1980px;
      padding: 0 4vw;
    }
    
    .topics-hero-image {
      width: 100%;
      height: auto;
      aspect-ratio: 4 / 3;
      object-fit: cover;
      display: block;
      transition: opacity 0.3s ease;
    }
    
    .topics-hero:hover .topics-hero-image {
      opacity: 0.95;
    }
    
    .topics-hero-caption {
      margin-top: 1.2rem;
      font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
      font-size: 14px;
      line-height: 1.7;
      color: var(--hint);
      text-align: left;
    }
    
    /* Bloc Intro (label + title + 2 colonnes) - Aligné comme les images alternées */
    .topics-intro-block {
      margin: 8rem auto;
      padding: 3rem 0;
      max-width: 1980px;
      border-top: 1px solid rgba(var(--bg-rgb), 0.15);
      border-bottom: 1px solid rgba(var(--bg-rgb), 0.15);
    }
    
    [data-theme="light"] .topics-intro-block {
      border-top: 1px solid rgba(42, 42, 42, 0.15);
      border-bottom: 1px solid rgba(42, 42, 42, 0.15);
    }
    
    [data-theme="dark"] .topics-intro-block {
      border-top: 1px solid rgba(232, 232, 232, 0.15);
      border-bottom: 1px solid rgba(232, 232, 232, 0.15);
    }
    
    .topics-intro-inner {
      display: flex;
      justify-content: space-between;
      align-items: start;
      max-width: 1980px;
      margin: 0 auto;
      padding: 0 4vw;
      gap: 2rem;
    }
    
    .topics-intro-label {
      font-family: 'SangBleuKingdom', Georgia, 'Times New Roman', serif;
      font-size: 25px;
      font-weight: 700;
      color: var(--fg);
      font-style: normal;
      line-height: 1.3;
      line-height: 1.6;
      padding-top: 0.3rem;
      flex-shrink: 0;
      width: auto;
    }
    
    [data-theme="dark"] .topics-intro-label {
      color: #ffffff;
    }
    
    .topics-intro-content {
      display: flex;
      flex-direction: column;
      gap: 0;
      width: 70%;
      max-width: 1100px;
      margin-left: auto;
      margin-right: 0;
    }
    
    .topics-intro-title {
      font-family: 'SangBleuKingdom', Georgia, 'Times New Roman', serif;
      font-size: 20px;
      font-weight: 500;
      line-height: 1.6;
      color: var(--fg);
      margin: 0 0 2.5rem 0;
    }
    
    [data-theme="dark"] .topics-intro-title {
      color: #ffffff;
    }
    
    .topics-intro-columns {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 4rem;
    }
    
    .topics-intro-column {
      font-family: 'SangBleuKingdom', Georgia, 'Times New Roman', serif;
      font-size: 18px;
      font-weight: 400;
      line-height: 1.7;
      color: var(--fg);
    }
    
    [data-theme="dark"] .topics-intro-column {
      color: #ffffff;
    }
    
    .topics-intro-column p {
      margin: 0 0 1rem 0;
    }
    
    .topics-intro-column p:last-child {
      margin-bottom: 0;
    }
    
    /* Featured Photos (10 photos alternées droite/gauche) */
    .topics-featured {
      margin: 8rem auto;
      max-width: 1980px;
      padding: 0 4vw;
    }
    
    .topics-featured-item {
      margin-bottom: 300px;
      cursor: pointer;
      width: 70%;
      max-width: 1100px;
    }
    
    .topics-featured-item:last-child {
      margin-bottom: 0;
    }
    
    /* Image à droite (impair = 1, 3, 5...) */
    .topics-featured-item:nth-child(odd) {
      margin-left: auto;
      margin-right: 0;
    }
    
    /* Image à gauche (pair = 2, 4, 6...) */
    .topics-featured-item:nth-child(even) {
      margin-left: 0;
      margin-right: auto;
    }
    
    .topics-featured-image {
      width: 100%;
      height: auto;
      aspect-ratio: 4 / 3;
      object-fit: cover;
      display: block;
      transition: opacity 0.3s ease;
    }
    
    .topics-featured-item:hover .topics-featured-image {
      opacity: 0.95;
    }
    
    .topics-featured-caption {
      margin-top: 1.2rem;
      font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
      font-size: 14px;
      line-height: 1.7;
      color: var(--hint);
    }
    
    /* Séparateur avant la grille */
    .topics-separator {
      margin: 8rem auto;
      max-width: 1980px;
      padding: 0 4vw;
    }
    
    .topics-separator-line {
      border-top: 1px solid rgba(var(--bg-rgb), 0.15);
    }
    
    [data-theme="light"] .topics-separator-line {
      border-top: 1px solid rgba(42, 42, 42, 0.15);
    }
    
    [data-theme="dark"] .topics-separator-line {
      border-top: 1px solid rgba(232, 232, 232, 0.15);
    }
    
    /* Grid finale (4 photos/ligne) */
    .topics-grid {
      margin: 8rem auto 10rem;
      max-width: 1980px;
      padding: 0 4vw;
    }
    
    .topics-grid-container {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 3rem 2.5rem;
    }
    
    .topics-grid-item {
      cursor: pointer;
      transition: opacity 0.3s ease;
    }
    
    .topics-grid-item:hover {
      opacity: 0.85;
    }
    
    .topics-grid-image {
      width: 100%;
      height: auto;
      aspect-ratio: 4 / 3;
      object-fit: cover;
      display: block;
    }
    
    .topics-grid-caption {
      margin-top: 1rem;
      font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
      font-size: 13px;
      line-height: 1.6;
      color: var(--hint);
    }
    
    /* Responsive */
    @media (max-width: 1024px) {
      .topics-intro-block {
        grid-template-columns: 150px 1fr;
        gap: 2rem;
      }
      
      .topics-featured-item {
        gap: 2rem;
      }
      
      .topics-grid-container {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.5rem;
      }
    }
    
    @media (max-width: 768px) {
      /* Topics utilise .category-selector - pas de règle spécifique nécessaire */
      
      /* IMPORTANT: Forcer l'affichage de DesktopTopics en mobile si actif */
      body.topics-mode .desktop-topics-view {
        display: block !important;
        position: relative;
        width: 100%;
        min-height: 100vh;
      }
      
      .topics-content {
        padding: 0 5vw 4vh;
      }
      
      .topics-intro-block {
        grid-template-columns: 1fr;
        gap: 1.5rem;
      }
      
      .topics-intro-columns {
        grid-template-columns: 1fr;
        gap: 1.5rem;
      }
      
      .topics-featured-item {
        grid-template-columns: 1fr !important;
        gap: 1rem;
        margin-bottom: 2rem;
        direction: ltr !important;
      }
      
      .topics-grid-container {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
      }
    }