:root { --bg: #fff; --fg: #111; --muted: #888; --border: #eee; --surface: #f2f2f2; --danger: #c0392b; color-scheme: light; } /* Mode sombre : activé en posant data-theme="dark" sur (voir app.js), jamais par défaut (préférence explicite de l'utilisateur uniquement, pas prefers-color-scheme). */ :root[data-theme='dark'] { --bg: #121212; --fg: #f2f2f2; --muted: #9a9a9a; --border: #2e2e2e; --surface: #1e1e1e; --danger: #ff6b6b; color-scheme: dark; } * { box-sizing: border-box; } html { /* Réserve toujours la place de la barre de défilement verticale, même sur une page encore courte (ex: pendant le "Chargement…"). Sinon, la grille de photos calcule sa largeur avant que la barre n'apparaisse (page qui devient plus haute que l'écran une fois les photos insérées), et les lignes - à largeur fixe, non rétrécissables - débordent horizontalement une fois la barre effectivement affichée. */ scrollbar-gutter: stable; } body { margin: 0; background: var(--bg); color: var(--fg); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; } a { color: inherit; text-decoration: none; } .layout { min-height: 100vh; } .content { min-width: 0; } /* Panneau superposé (position: fixed) plutôt qu'une colonne dans la mise en page : le contenu (photos, etc.) garde toujours la pleine largeur et n'a pas besoin d'être recalculé à l'ouverture/fermeture du menu. Fond opaque indispensable ici, sinon le contenu en dessous (photos à largeurs fixes calculées avant l'ouverture) transparaît. */ .sidebar { position: fixed; top: 0; right: 0; width: 260px; max-width: 85vw; height: 100vh; overflow-y: auto; padding: 1.5rem 1rem; background: var(--bg); border-left: 1px solid var(--border); box-shadow: -8px 0 24px rgba(0, 0, 0, 0.15); z-index: 1050; transform: translateX(0); visibility: visible; /* visibility dans la transition : reste visible pendant tout le glissement de fermeture (elle ne bascule qu'à la toute fin), et redevient visible immédiatement à l'ouverture. */ transition: transform 0.2s ease, visibility 0.2s ease; scrollbar-width: thin; scrollbar-color: var(--border) transparent; } .sidebar::-webkit-scrollbar { width: 6px; } .sidebar::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; } .layout.sidebar-collapsed .sidebar { /* translateX (pas display:none) pour animer le glissement à l'ouverture/fermeture ; visibility+pointer-events évitent de garder le panneau focusable/cliquable hors écran. */ transform: translateX(105%); visibility: hidden; pointer-events: none; } .sidebar-toggle { /* Ne s'affiche que lorsque le menu est masqué (voir .visible), pour ne pas chevaucher le logo/titre en haut de la sidebar quand elle est ouverte. */ display: none; position: fixed; top: 1rem; right: 1rem; z-index: 1100; width: 2.25rem; height: 2.25rem; align-items: center; justify-content: center; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); color: var(--fg); font-size: 1.1rem; line-height: 1; cursor: pointer; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15); } .sidebar-toggle.visible { display: flex; } .sidebar-toggle:hover { background: var(--border); } .sidebar-header { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 1.25rem; } .site-title { display: block; font-weight: 600; font-size: 1.1rem; letter-spacing: 0.02em; min-width: 0; } .sidebar-close { flex-shrink: 0; width: 1.75rem; height: 1.75rem; display: flex; align-items: center; justify-content: center; border: none; background: none; color: var(--muted); font-size: 1rem; line-height: 1; cursor: pointer; border-radius: 4px; } .sidebar-close:hover { color: var(--fg); background: var(--border); } .site-logo { display: block; max-width: 100%; height: auto; max-height: 56px; } .tree-nav ul { list-style: none; margin: 0; padding-left: 0.9rem; /* Guide vertical : rend la profondeur des sous-dossiers lisible d'un coup d'œil. */ border-left: 1px solid var(--border); } .tree-nav > ul { padding-left: 0; border-left: none; } .tree-row { display: flex; align-items: center; gap: 0.35rem; } .tree-toggle { width: 1.1rem; height: 1.5rem; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border: none; background: none; color: var(--muted); cursor: pointer; font-size: 0.7rem; padding: 0; /* Un seul glyphe (▸), pivoté plutôt que remplacé par ▾ : l'ouverture/fermeture s'anime. */ transition: transform 0.15s ease; } .tree-toggle.open { transform: rotate(90deg); } .tree-toggle:disabled { visibility: hidden; } .tree-nav a { display: block; flex: 1; min-width: 0; padding: 0.3rem 0.5rem; border-radius: 6px; font-size: 0.9rem; color: var(--fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tree-nav a:hover { background: var(--surface); } .tree-nav a.active { background: var(--surface); font-weight: 600; } .sidebar-footer { margin-top: 1.5rem; padding-top: 0.9rem; border-top: 1px solid var(--border); } .sidebar-footer-item { display: block; width: 100%; text-align: left; border: none; background: none; padding: 0.3rem 0; font-size: 0.9rem; color: var(--muted); cursor: pointer; font-family: inherit; } .sidebar-footer-item:hover { color: var(--fg); text-decoration: underline; } .page-modal-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); display: flex; align-items: center; justify-content: center; padding: 1.5rem; z-index: 1200; } .page-modal-overlay.hidden { display: none; } .page-modal { position: relative; width: min(720px, 100%); max-height: 85vh; overflow-y: auto; background: var(--bg); color: var(--fg); border-radius: 8px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); } .page-modal-close { position: absolute; top: 0.75rem; right: 0.75rem; width: 1.75rem; height: 1.75rem; display: flex; align-items: center; justify-content: center; border: none; background: var(--bg); color: var(--muted); font-size: 1rem; line-height: 1; cursor: pointer; border-radius: 4px; z-index: 1; } .page-modal-close:hover { color: var(--fg); background: var(--border); } .static-page { padding: 3rem 1.5rem; line-height: 1.65; } .static-page h1, .static-page h2, .static-page h3 { line-height: 1.3; } .static-page a { text-decoration: underline; } .static-page img { max-width: 100%; height: auto; } /* Boutons personnalisés du lightbox (partager / télécharger l'original) : PhotoSwipe stylise ses boutons par défaut via une icône SVG absolument positionnée (.pswp__icn), donc le simple texte/emoji qu'on met dans les nôtres n'hérite d'aucune couleur/taille visible sans ceci. */ .pswp__button--download-button, .pswp__button--share-button { font-size: 20px; line-height: 60px; text-align: center; color: #fff; } #app { padding: 1px; } #app.home-view { padding: 0; } .loading, .empty { padding: 3rem; text-align: center; color: var(--muted); } .folder-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 4px; padding: 4px; } .folder-tile { position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden; background: var(--surface); } .folder-tile img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.3s ease; } .folder-tile:hover img { transform: scale(1.04); } .folder-label { position: absolute; left: 0; right: 0; bottom: 0; padding: 0.6rem 0.75rem; background: linear-gradient(to top, rgba(0, 0, 0, 0.6), transparent); color: #fff; font-size: 0.95rem; font-weight: 500; } .folder-lock { position: absolute; top: 0.5rem; right: 0.5rem; font-size: 1.1rem; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6)); } .folder-tile-empty { display: flex; align-items: center; justify-content: center; color: var(--muted); } .photo-gallery { display: flex; flex-direction: column; gap: 4px; padding: 4px; } .photo-row { display: flex; gap: 4px; } .photo-row a { display: block; overflow: hidden; flex-shrink: 0; } .photo-row img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.3s ease; } .photo-row a:hover img { transform: scale(1.03); } .home-hero { width: 100%; height: 100vh; /* dvh tient compte de la barre d'adresse mobile qui apparaît/disparaît au scroll ; les navigateurs qui ne le supportent pas ignorent cette ligne et gardent 100vh. */ height: 100dvh; background-size: cover; background-position: center; background-color: #111; } .home-hero-empty { display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1.5rem; letter-spacing: 0.08em; text-transform: uppercase; } .unlock-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); display: flex; align-items: center; justify-content: center; /* Doit rester au-dessus du menu (1050) et du bouton ☰ (1100), même s'ils sont visibles. */ z-index: 1200; } .unlock-overlay.hidden { display: none; } .unlock-form { background: var(--bg); color: var(--fg); padding: 1.5rem; border-radius: 8px; width: 300px; display: flex; flex-direction: column; gap: 0.75rem; } .unlock-form input { padding: 0.5rem; font-size: 1rem; background: var(--bg); color: var(--fg); border: 1px solid var(--border); border-radius: 4px; } .unlock-error { color: var(--danger); font-size: 0.85rem; margin: 0; } .unlock-error.hidden { display: none; } .unlock-actions { display: flex; justify-content: flex-end; gap: 0.5rem; } .unlock-actions button { padding: 0.5rem 1rem; border: 1px solid var(--border); background: var(--bg); color: var(--fg); border-radius: 4px; cursor: pointer; } .unlock-actions button[type='submit'] { /* Fond/texte inversés : fonctionne dans les deux thèmes sans variable dédiée. */ background: var(--fg); color: var(--bg); border-color: var(--fg); }