/* ==================================================================================
   RÉVEILLON PHOTOGRAPHIE — STYLESHEET v1.5
   Corrections v1.5 :
   · @import supprimé (polices chargées via <link> dans le HTML)
   · --cream corrigé de #ffffff → #fdfcfa (ivoire chaud, cohérent avec le nom)
   · --bg-cream-glass-nav supprimé (jamais utilisé)
   · @keyframes scaleIn supprimé (doublon de popIn) — usages remplacés par popIn
   · @keyframes fadeInModal supprimé (doublon de fadeIn) — usages remplacés par fadeIn
   · meta-theme-color dark aligné : utiliser #111009 dans le HTML (scriptv1.4.js)
   · Tous les html.dark .composant regroupés dans la section DARK MODE en bas de fichier
   Organisation : Reset → Variables Light → Variables Dark → Base → Layout →
                  Composants → Responsive → Dark Mode → Features → Print
   ================================================================================== */


/* ==================== CSS RESET ==================== */
*, *::before, *::after {
    margin: 0;
    box-sizing: border-box;
}


/* ==================== CSS VARIABLES — LIGHT ==================== */
:root {
    /* Couleurs principales */
    --primary:       #5c0000;
    --primary-light: #7a0000;

    /* Fonds */
    --cream:      #fdfcfa;   /* ivoire chaud — v1.5 : était #ffffff */
    --light-gray: #f4f4f6;

    /* Texte */
    --dark: #111111;
    --gray: #555560;

    /* Surfaces */
    --white:  #ffffff;
    --border: rgba(92, 0, 0, 0.12);

    /* Overlays */
    --overlay-dark:     rgba(0, 0, 0, 0.45);
    --overlay-primary:  rgba(92, 0, 0, 0.88);
    --overlay-gradient: linear-gradient(to bottom, transparent 0%, rgba(17, 0, 0, 0.92) 100%);
    --overlay-light:    rgba(0, 0, 0, 0.3);
    --overlay-lightbox: rgba(8, 8, 12, 0.72);

    /* Fonds glassmorphism */
    --bg-primary-light:  rgba(92, 0, 0, 0.06);
    --bg-white-90:       rgba(255, 255, 255, 0.92);
    --bg-white-80:       rgba(255, 255, 255, 0.82);
    --bg-cream-glass:    rgba(253, 252, 250, 0.78);
    --bg-cream-glass-85: rgba(253, 252, 250, 0.88);
    --bg-cream-glass-98: rgba(253, 252, 250, 0.99);

    /* Ombres */
    --shadow-sm:            0 1px 3px rgba(0,0,0,0.07), 0 1px 2px rgba(0,0,0,0.04);
    --shadow-md:            0 4px 16px rgba(0,0,0,0.06), 0 1px 4px rgba(0,0,0,0.04);
    --shadow-lg:            0 8px 28px rgba(0,0,0,0.07), 0 2px 8px rgba(0,0,0,0.04);
    --shadow-xl:            0 16px 48px rgba(0,0,0,0.09), 0 4px 12px rgba(0,0,0,0.05);
    --shadow-primary:       0 6px 24px rgba(92,0,0,0.22);
    --shadow-primary-hover: 0 10px 32px rgba(92,0,0,0.3);

    /* Transitions */
    --transition-base: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 0.6s cubic-bezier(0.4, 0, 0.2, 1);

    /* Border-radius */
    --radius-sm:  8px;
    --radius-md:  16px;
    --radius-lg:  24px;
    --radius-xl:  32px;
    --radius-2xl: 48px;
    --radius-pill: 9999px;
}


/* ==================== CSS VARIABLES — DARK ==================== */
html.dark {
    --primary:       #c8c8c8;
    --primary-light: #e0e0e0;

    --cream:      #080808;
    --light-gray: #101010;

    --dark: #f2f2f2;
    --gray: #8a8a8a;

    --white:  #161616;
    --border: rgba(255, 255, 255, 0.06);

    --overlay-dark:     rgba(0, 0, 0, 0.78);
    --overlay-primary:  rgba(20, 20, 20, 0.95);
    --overlay-gradient: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.97) 100%);
    --overlay-light:    rgba(0, 0, 0, 0.62);
    --overlay-lightbox: rgba(0, 0, 0, 0.96);

    --bg-primary-light:  rgba(255, 255, 255, 0.05);
    --bg-white-90:       rgba(22, 22, 22, 0.93);
    --bg-white-80:       rgba(22, 22, 22, 0.82);
    --bg-cream-glass:    rgba(8, 8, 8, 0.86);
    --bg-cream-glass-85: rgba(8, 8, 8, 0.91);
    --bg-cream-glass-98: rgba(16, 16, 16, 0.99);

    --shadow-sm:            0 1px 2px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.03);
    --shadow-md:            0 4px 12px rgba(0,0,0,0.55), 0 1px 3px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.04);
    --shadow-lg:            0 8px 24px rgba(0,0,0,0.6), 0 2px 6px rgba(0,0,0,0.45), 0 0 0 1px rgba(255,255,255,0.05);
    --shadow-xl:            0 20px 56px rgba(0,0,0,0.7), 0 6px 16px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.05);
    --shadow-primary:       0 6px 24px rgba(255,255,255,0.15), 0 2px 8px rgba(255,255,255,0.08);
    --shadow-primary-hover: 0 10px 36px rgba(255,255,255,0.22), 0 4px 12px rgba(255,255,255,0.12);
}


/* ==================== BASE ==================== */
html {
    scroll-behavior: smooth;
    overscroll-behavior: none;
}

body {
    font-family: 'Montserrat', sans-serif;
    color: var(--dark);
    background: var(--cream);
    max-width: 100%;
    overflow-x: hidden;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

body.menu-open { overflow: hidden; }

body::before {
    content: '';
    position: fixed;
    inset: 0;
    background: var(--overlay-dark);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s;
    z-index: 998;
}

body.menu-open::before {
    opacity: 1;
    pointer-events: auto;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

.skip-link {
    position: absolute;
    top: -100%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--primary);
    color: #fff;
    padding: 12px 24px;
    border-radius: 0 0 12px 12px;
    font-size: 14px;
    letter-spacing: 1px;
    text-decoration: none;
    z-index: 9999;
    transition: top 0.2s;
}

.skip-link:focus { top: 0; }


/* ==================== PRELOADER ==================== */
.preloader {
    position: fixed;
    inset: 0;
    background: var(--cream);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                visibility 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.preloader.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.preloader-inner {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
}

.preloader-logo {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(48px, 8vw, 80px);
    font-weight: 300;
    letter-spacing: 8px;
    color: var(--primary);
    animation: preloaderPulse 1.8s ease-in-out infinite;
}

@keyframes preloaderPulse {
    0%, 100% { opacity: 1; letter-spacing: 8px; }
    50%       { opacity: 0.4; letter-spacing: 14px; }
}

.preloader-bar {
    width: 180px;
    height: 1.5px;
    background: var(--border);
    border-radius: 2px;
    overflow: hidden;
}

.preloader-progress {
    height: 100%;
    background: var(--primary);
    border-radius: 2px;
    width: 0%;
    transition: width 0.3s ease;
}

.preloader-label {
    font-size: 9px;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--gray);
    font-weight: 400;
}


/* ==================== PAGE TRANSITION ==================== */
.page-transition {
    position: fixed;
    inset: 0;
    background: var(--primary);
    z-index: 99998;
    transform: scaleX(0);
    transform-origin: left;
    pointer-events: none;
}

.page-transition.slide-in {
    animation: transSlideIn 0.22s cubic-bezier(0.76, 0, 0.24, 1) forwards;
}

.page-transition.slide-out {
    animation: transSlideOut 0.22s cubic-bezier(0.76, 0, 0.24, 1) forwards;
}

@keyframes transSlideIn {
    from { transform: scaleX(0); transform-origin: left; }
    to   { transform: scaleX(1); transform-origin: left; }
}

@keyframes transSlideOut {
    from { transform: scaleX(1); transform-origin: right; }
    to   { transform: scaleX(0); transform-origin: right; }
}


/* ==================== LAYOUT ==================== */
section { padding: 120px 60px; }

.section-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 48px;
    font-weight: 300;
    text-align: center;
    margin-bottom: 20px;
    color: var(--primary);
}

.section-subtitle {
    text-align: center;
    color: var(--gray);
    font-size: 15px;
    font-weight: 300;
    letter-spacing: 1px;
    margin-bottom: 80px;
}

.label {
    display: inline-block;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--primary);
    margin-bottom: 20px;
}


/* ==================== ANIMATIONS ==================== */
/* NOTE v1.5 : scaleIn supprimé (= popIn), fadeInModal supprimé (= fadeIn) */

@keyframes slideDown {
    from { opacity: 0; transform: translate(-50%, -20px); }
    to   { opacity: 1; transform: translate(-50%, 0); }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(40px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes slideAnim {
    0%, 100% { opacity: 0; transform: scale(1.1); }
    5%, 20%  { opacity: 1; transform: scale(1); }
    25%      { opacity: 0; transform: scale(1.1); }
}

@keyframes popIn {
    from { transform: scale(0.9); opacity: 0; }
    to   { transform: scale(1);   opacity: 1; }
}

@keyframes shimmer {
    0%   { background-position: 200% 50%; }
    100% { background-position: -200% 50%; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}


/* ==================== HEADER ==================== */
.header-wrapper {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 40px);
    max-width: 1400px;
    z-index: 1500;
    display: flex;
    gap: 12px;
    animation: slideDown 0.8s ease-out;
    transition: width 1s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                transform 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.header-wrapper.shrink { width: 55%; }

header {
    position: relative;
    flex: 1;
    padding: 15px 20px;
    background: var(--bg-cream-glass);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    border-radius: 24px;
    box-shadow: var(--shadow-md);
    border: 1px solid rgba(92, 0, 0, 0.08);
}

.logo {
    font-family: 'Cormorant Garamond', serif;
    font-size: 26px;
    font-weight: 300;
    letter-spacing: 4px;
    color: var(--primary);
    text-decoration: none;
    flex-shrink: 0;
    transition: letter-spacing var(--transition-slow), transform var(--transition-slow);
}

.logo:hover {
    letter-spacing: 6px;
    transform: translateX(6px);
}

nav {
    display: flex;
    gap: 40px;
    background: var(--bg-primary-light);
    padding: 10px 28px;
    border-radius: 24px;
    box-shadow: var(--shadow-md);
    border: 1px solid rgba(92, 0, 0, 0.08);
    margin-left: auto;
}

nav a {
    text-decoration: none;
    color: var(--dark);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    position: relative;
    transition: color var(--transition-base), transform var(--transition-base);
}

nav a::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 1.5px;
    background: var(--primary);
    border-radius: 2px;
    transition: width var(--transition-base);
}

nav a:hover,
nav a[aria-current="page"] {
    color: var(--primary);
    transform: translateY(-2px);
}

nav a:hover::after,
nav a[aria-current="page"]::after { width: 100%; }

.menu-toggle {
    display: none;
    flex-direction: column;
    gap: 4px;
    cursor: pointer;
    z-index: 2001;
    padding: 4px;
    background: none;
    border: none;
    appearance: none;
    -webkit-appearance: none;
}

.menu-toggle span {
    width: 22px;
    height: 2px;
    background: var(--primary);
    border-radius: 2px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.menu-toggle.active span:nth-child(1) { transform: rotate(45deg) translateY(8.5px); }
.menu-toggle.active span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.menu-toggle.active span:nth-child(3) { transform: rotate(-45deg) translateY(-8.5px); }

.theme-desktop-btn {
    flex-shrink: 0;
    background: var(--bg-primary-light);
    border: none;
    cursor: pointer;
    width: 42px;
    height: 42px;
    border-radius: 24px;
    font-size: 18px;
    transition: transform var(--transition-base), background var(--transition-base);
    display: flex;
    align-items: center;
    justify-content: center;
}

.theme-desktop-btn:hover {
    transform: scale(1.1) rotate(-15deg);
    background: var(--border);
}

.theme-mobile-btn { display: none; }


/* ==================== MODAL ==================== */
.modal-container {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--overlay-light);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    z-index: 9999;
    padding: 20px;
}

.modal-container.show {
    opacity: 1;
    pointer-events: auto;
}

.modal {
    background: var(--bg-cream-glass-98);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-radius: 24px;
    box-shadow: var(--shadow-xl);
    padding: clamp(24px, 4vw, 50px);
    width: clamp(280px, 90%, 560px);
    max-height: 85vh;
    text-align: center;
    animation: popIn 0.4s ease;   /* v1.5 : était scaleIn */
    overflow-y: auto;
    border: 1px solid var(--border);
}

.modal p#modal-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(22px, 4vw, 38px);
    font-weight: 300;
    letter-spacing: 2px;
    margin-bottom: 16px;
    color: var(--primary);
}

.modal p {
    font-size: clamp(13px, 1.8vw, 15px);
    font-weight: 300;
    line-height: 1.7;
    color: var(--gray);
    margin-bottom: 20px;
}

.changelog {
    background: var(--light-gray);
    border-radius: 24px;
    padding: 20px 24px;
    margin: 20px 0;
    text-align: left;
}

.changelog strong {
    display: block;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--primary);
    margin-bottom: 12px;
}

.changelog p a { color: var(--primary); text-decoration: none; }

.modal #close {
    margin-top: 8px;
    padding: 14px 36px;
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: 24px;
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    cursor: pointer;
    transition: background var(--transition-base), transform var(--transition-base);
}

.modal #close:hover {
    background: var(--primary-light);
    transform: translateY(-2px);
}


/* ==================== HERO ==================== */
.hero {
    background: var(--bg-primary-light);
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
    overflow: hidden;
    border-radius: 0 0 48px 48px;
    text-align: center;
    padding-top: 100px;
}

.hero h1 {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(48px, 7vw, 80px);
    font-weight: 300;
    letter-spacing: 6px;
    margin-bottom: 16px;
    color: var(--primary);
    animation: fadeInUp 1s ease-out 0.2s both;
}

.hero h2 {
    font-size: 14px;
    color: var(--gray);
    letter-spacing: 3px;
    text-transform: uppercase;
    font-weight: 300;
    animation: fadeInUp 1s ease-out 0.4s both;
}

.hero--solid {
    background: var(--primary);
    border-radius: 0 0 48px 48px;
}

.hero--solid .hero-content,
.hero--solid > div { position: relative; z-index: 1; }

.hero--solid h1  { color: #fff; }
.hero--solid p   { color: rgba(255, 255, 255, 0.7); }

.hero--solid .hero-content::after,
.hero--solid > div::after {
    content: '';
    display: block;
    width: 40px;
    height: 1px;
    background: rgba(255, 255, 255, 0.35);
    margin: 22px auto 0;
    animation: fadeInUp 1s ease-out 0.6s both;
}

.slideshow {
    background: var(--primary);
    position: absolute;
    inset: 0;
    border-radius: 0 0 48px 48px;
    overflow: hidden;
}

.slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    background-size: cover;
    background-position: center;
    animation: slideAnim 20s infinite;
    filter: brightness(0.85);
    transform: scale(1.1);
}

.slide:nth-child(1) { animation-delay: 0s; }
.slide:nth-child(2) { animation-delay: 5s; }
.slide:nth-child(3) { animation-delay: 10s; }
.slide:nth-child(4) { animation-delay: 15s; }

.hero-content {
    position: relative;
    z-index: 10;
    text-align: center;
    color: var(--white);
    animation: fadeInUp 1.2s ease-out 0.3s both;
    padding: 0 20px;
}

.hero-content h1 {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(42px, 6vw, 72px);
    font-weight: 300;
    letter-spacing: 4px;
    margin-bottom: 16px;
    text-shadow: 0 2px 20px rgba(0,0,0,0.3);
    color: #fff;
}

.hero-content p {
    font-size: 15px;
    font-weight: 300;
    letter-spacing: 2px;
    opacity: 0.9;
    color: #fff;
}


/* ==================== BOUTONS ==================== */
.btn-cta {
    padding: 18px 40px;
    text-decoration: none;
    font-size: 12px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    transition: all var(--transition-base);
    display: inline-block;
    border-radius: 24px;
}
.btn-cta:focus-visible { outline: 2px solid var(--primary); outline-offset: 4px; }

.btn-primary {
    background: var(--primary);
    color: #fff;
    border: 2px solid var(--primary);
}

.btn-primary:hover {
    background: var(--primary-light);
    transform: translateY(-3px);
    box-shadow: var(--shadow-primary-hover);
}

.btn-secondary {
    background: transparent;
    color: var(--dark);
    border: 2px solid var(--dark);
}

.btn-secondary:hover {
    background: var(--dark);
    color: #fff;
    transform: translateY(-3px);
}

.submit-button {
    width: 100%;
    padding: 18px;
    background: var(--primary);
    color: #fff;
    border: none;
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
    cursor: pointer;
    border-radius: 24px;
    transition: all var(--transition-base);
    box-shadow: var(--shadow-primary);
}

.submit-button:hover {
    background: var(--primary-light);
    transform: translateY(-3px);
    box-shadow: var(--shadow-primary-hover);
}


/* ==================== FILTRES ==================== */
.filters {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 40px 20px 30px;
}

.filters-row {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

.filters-search-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    max-width: 600px;
}

.filter-btn {
    padding: 11px 26px;
    background: var(--white);
    border: 1.5px solid var(--border);
    border-radius: 24px;
    font-family: 'Montserrat', sans-serif;
    font-size: 11px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all var(--transition-base);
    color: var(--gray);
    font-weight: 500;
    box-shadow: var(--shadow-sm);
}

.filter-btn:hover {
    background: var(--bg-primary-light);
    color: var(--primary);
    border-color: var(--primary);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}
.filter-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }

.filter-btn.active {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
    transform: translateY(-2px);
    box-shadow: var(--shadow-primary);
}


/* ==================== DESCRIPTIONS DE CATÉGORIE ==================== */
.category-description {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 20px;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.5s ease, opacity 0.4s ease, margin-bottom 0.4s ease;
    box-sizing: border-box;
}

.category-description.active {
    opacity: 1;
    max-height: 600px;
    margin-bottom: 50px;
}

.description-card {
    background: var(--white);
    padding: 36px 28px;
    border-radius: 24px;
    box-shadow: var(--shadow-lg);
    border-left: 4px solid var(--primary);
    width: 100%;
    box-sizing: border-box;
}

.description-card h2 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 30px;
    font-weight: 400;
    color: var(--primary);
    margin-bottom: 12px;
}

.description-card p {
    color: var(--gray);
    line-height: 1.8;
    font-size: 14px;
}

.description-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid var(--border);
    width: 100%;
    box-sizing: border-box;
}

.stat { text-align: center; }

.stat-number {
    font-family: 'Cormorant Garamond', serif;
    font-size: 22px;
    font-weight: 400;
    color: var(--primary);
    display: block;
    margin-bottom: 4px;
}

.stat-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--gray);
}


/* ==================== GALERIE ==================== */
.gallery-container {
    padding: 40px 40px 120px;
    max-width: 1600px;
    margin: 0 auto;
}

.gallery {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 290px;
    grid-auto-flow: dense;
    gap: 16px;
}

.gallery-empty {
    text-align: center;
    padding: 80px 20px;
    animation: fadeIn 0.4s ease;
    width: 100%;
}

.gallery-empty[hidden] { display: none; }

.gallery-empty-icon {
    font-size: 48px;
    margin-bottom: 16px;
    opacity: 0.5;
}

.gallery-empty p {
    font-size: 14px;
    color: var(--gray);
    letter-spacing: 1px;
}

.gallery-item {
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    cursor: pointer;
    box-shadow: var(--shadow-lg);
    min-height: 0;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform, opacity;
    transform-style: preserve-3d;
}

.gallery-item:focus-visible {
    outline: 3px solid var(--primary);
    outline-offset: 4px;
}

.gallery-item.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ── BENTO GRID — placement par format ──────────────────────────────────
   4 colonnes × rows de 290px, gap 16px, dense fill activé
   Portrait  → col×1 row×2  |  Landscape → col×2 row×1  |  Square → col×1 row×1
   grid-auto-flow: dense remplit automatiquement les trous
   ─────────────────────────────────────────────────────────────────────── */

/* Transition delays */
.gallery-item:nth-child(1)  { transition-delay: 0.05s; }
.gallery-item:nth-child(2)  { transition-delay: 0.10s; }
.gallery-item:nth-child(3)  { transition-delay: 0.15s; }
.gallery-item:nth-child(4)  { transition-delay: 0.20s; }
.gallery-item:nth-child(5)  { transition-delay: 0.25s; }
.gallery-item:nth-child(6)  { transition-delay: 0.30s; }
.gallery-item:nth-child(7)  { transition-delay: 0.35s; }
.gallery-item:nth-child(8)  { transition-delay: 0.40s; }
.gallery-item:nth-child(9)  { transition-delay: 0.45s; }
.gallery-item:nth-child(10) { transition-delay: 0.50s; }
.gallery-item:nth-child(11) { transition-delay: 0.55s; }
.gallery-item:nth-child(12) { transition-delay: 0.60s; }

/* Classes de format — la grille réelle */
.gallery-item.portrait,
.gallery-item.portraits { grid-row: span 2; }

.gallery-item.landscape  { grid-column: span 2; }

/* Mise en valeur : 1re photo héroïque (2×2) */
.gallery-item:nth-child(1)  { grid-column: span 2; grid-row: span 2; }

.gallery-item:hover {
    transform: translateY(-10px) scale(1.02);
    box-shadow: 0 20px 48px rgba(92, 0, 0, 0.14);
    transition-delay: 0s;
    z-index: 5;
}

/* Lazy loading — placeholder shimmer */
.img-placeholder {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        110deg,
        var(--light-gray) 30%,
        rgba(230, 228, 232, 0.7) 50%,
        var(--light-gray) 70%
    );
    background-size: 300% 100%;
    animation: shimmer 1.8s ease-in-out infinite;
    border-radius: inherit;
    z-index: 1;
    transition: opacity 0.5s ease 0.3s;
}

.gallery-item.img-ready .img-placeholder {
    opacity: 0;
    pointer-events: none;
}

.lazy-img {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    filter: blur(12px) saturate(0.4) brightness(1.1);
    transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1),
                filter 0.7s cubic-bezier(0.4, 0, 0.2, 1),
                transform var(--transition-slow);
    will-change: opacity, filter, transform;
}

.lazy-img.loaded {
    opacity: 1;
    filter: blur(0px) saturate(1) brightness(1);
}

.gallery-item:hover .lazy-img { transform: scale(1.08); }

.overlay {
    position: absolute;
    inset: 0;
    background: var(--overlay-gradient);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 28px;
    opacity: 0;
    transition: opacity var(--transition-base);
    z-index: 3;
}

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

.overlay h3 {
    font-family: 'Cormorant Garamond', serif;
    color: #fff;
    font-size: 22px;
    font-weight: 400;
    margin-bottom: 6px;
    transform: translateY(12px);
    transition: transform var(--transition-base) 0.05s;
}

.gallery-item:hover .overlay h3 { transform: translateY(0); }

.overlay p {
    color: rgba(255, 255, 255, 0.8);
    font-size: 12px;
    letter-spacing: 1px;
    transform: translateY(12px);
    transition: transform var(--transition-base) 0.1s;
}

.gallery-item:hover .overlay p { transform: translateY(0); }

.badge {
    position: absolute;
    top: 16px;
    right: 16px;
    background: var(--bg-white-90);
    backdrop-filter: blur(8px);
    padding: 6px 14px;
    border-radius: 24px;
    font-size: 10px;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-weight: 500;
    color: var(--primary);
    opacity: 0;
    transform: translateY(-8px);
    transition: all var(--transition-base);
    z-index: 4;
}

.gallery-item:hover .badge {
    opacity: 1;
    transform: translateY(0);
}


/* ==================== LIGHTBOX ==================== */
.lightbox {
    position: fixed;
    inset: 0;
    background: rgba(5, 4, 7, 0.96);
    backdrop-filter: blur(28px) saturate(0.6);
    -webkit-backdrop-filter: blur(28px) saturate(0.6);
    z-index: 2000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 56px 80px;
    overflow-y: auto;
}

.lightbox.active {
    display: flex;
    animation: fadeIn 0.3s ease-out;
}

.lightbox-container {
    max-width: 1440px;
    width: 100%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 56px;
    align-items: center;
    animation: popIn 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.lightbox-image {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 84vh;
    object-fit: contain;
    border-radius: 12px;
    box-shadow: 0 40px 80px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.04);
    display: block;
    margin: 0 auto;

}

.lightbox-image.landscape {
    max-height: 70vh;
    width: 100%;
    height: auto;
}

.lightbox-image.portrait {
    max-height: 88vh;
    width: auto;
}

.lightbox-image.square {
    max-height: 78vh;
    width: auto;
    height: auto;
}

/* ── Panneau d'infos — transparent, texte clair sur fond sombre ── */
.lightbox-info {
    background: transparent;
    padding: 0;
    border-radius: 0;
    border: none;
    position: sticky;
    top: 56px;
    max-height: calc(100vh - 112px);
    overflow-y: auto;
    scrollbar-width: none;
}

.lightbox-info::-webkit-scrollbar { display: none; }

.lightbox-info h2 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 38px;
    font-weight: 300;
    color: #ffffff;
    margin-bottom: 14px;
    line-height: 1.1;
    letter-spacing: 1px;
}

.lightbox-meta {
    display: flex;
    gap: 18px;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    flex-wrap: wrap;
}

.meta-item {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    color: rgba(255,255,255,0.45);
}

.meta-item svg { opacity: 0.45; }

.lightbox-counter {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 10px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.3);
    background: none;
    padding: 0;
    border-radius: 0;
    margin-bottom: 20px;
    font-weight: 400;
}

.counter-current {
    font-family: 'Cormorant Garamond', serif;
    font-size: 22px;
    color: rgba(255,255,255,0.85);
    font-weight: 300;
    line-height: 1;
}

.counter-sep { opacity: 0.2; font-size: 12px; }

.counter-total {
    font-family: 'Cormorant Garamond', serif;
    font-size: 17px;
    color: rgba(255,255,255,0.35);
    font-weight: 300;
    line-height: 1;
}

.lightbox-description {
    color: rgba(255,255,255,0.55);
    line-height: 1.85;
    margin-bottom: 28px;
    font-size: 14px;
    font-weight: 300;
}

.lightbox-details {
    background: rgba(255,255,255,0.04);
    padding: 18px 20px;
    border-radius: 12px;
    margin-bottom: 20px;
    border: 1px solid rgba(255,255,255,0.07);
}

.detail-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 9px 0;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.detail-row:last-child { border-bottom: none; }

.detail-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: rgba(255,255,255,0.3);
    font-weight: 500;
}

.detail-value {
    font-size: 12px;
    color: rgba(255,255,255,0.7);
    font-weight: 300;
    text-align: right;
    max-width: 65%;
}

.lightbox-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-bottom: 24px;
}

.tag {
    background: rgba(255,255,255,0.07);
    color: rgba(255,255,255,0.45);
    border: 1px solid rgba(255,255,255,0.1);
    padding: 5px 13px;
    border-radius: 24px;
    font-size: 10px;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.lightbox-hint {
    font-size: 10px;
    color: rgba(255,255,255,0.2);
    text-align: left;
    letter-spacing: 1px;
    margin-top: 8px;
}

/* ── Bouton fermer ── */
.lightbox-close {
    position: fixed;
    top: 20px;
    right: 20px;
    width: 42px;
    height: 42px;
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 50%;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-base);
    color: rgba(255,255,255,0.65);
    z-index: 2001;
    backdrop-filter: blur(12px);
}

.lightbox-close:hover {
    transform: scale(1.1) rotate(90deg);
    background: rgba(255,255,255,0.14);
    color: #fff;
    border-color: rgba(255,255,255,0.22);
}

/* ── Boutons nav ── */
.lightbox-nav {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    width: 42px;
    height: 42px;
    background: rgba(255,255,255,0.07);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 50%;
    font-size: 22px;
    font-weight: 300;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-base);
    color: rgba(255,255,255,0.65);
    z-index: 2001;
    line-height: 1;
    padding-bottom: 2px;
}

.lightbox-nav:hover {
    background: rgba(255,255,255,0.14);
    color: #fff;
    border-color: rgba(255,255,255,0.22);
    transform: translateY(-50%) scale(1.08);
}

.lightbox-nav:disabled {
    opacity: 0.15;
    cursor: not-allowed;
    pointer-events: none;
}

.lightbox-prev { left: 16px; }
.lightbox-next { right: 16px; }


/* ==================== ABOUT SECTION ==================== */
.about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    max-width: 1400px;
    margin: 0 auto;
    align-items: center;
}

.about-text {
    background: var(--white);
    padding: 60px;
    border-radius: 32px;
    box-shadow: var(--shadow-xl);
    border: 1px solid var(--border);
    transition: all var(--transition-slow);
}

.about-text:hover {
    transform: translateY(-8px);
    box-shadow: 0 24px 64px rgba(92, 0, 0, 0.1);
}

.about-text p {
    font-size: 15px;
    line-height: 1.9;
    color: var(--gray);
    margin-bottom: 30px;
    font-weight: 300;
}

.about-image {
    width: 100%;
    height: 600px;
    overflow: hidden;
    border-radius: 32px;
    box-shadow: var(--shadow-xl);
    transition: all var(--transition-slow);
}

.about-image:hover {
    transform: scale(1.02);
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.14);
}

.about-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow);
}

.about-image:hover img { transform: scale(1.1); }


/* ==================== STATS ==================== */
.stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 36px;
}

.stat-item {
    text-align: center;
    padding: 22px;
    background: var(--light-gray);
    border-radius: 16px;
    border: 1px solid transparent;
    transition: all var(--transition-base);
}

.stat-item:hover {
    transform: translateY(-4px) scale(1.04);
    background: var(--primary);
    border-color: var(--primary);
}

.stat-item:hover .stat-number,
.stat-item:hover .stat-label { color: #fff; }

.stat-item .stat-number {
    font-family: 'Cormorant Garamond', serif;
    font-size: 44px;
    font-weight: 400;
    color: var(--primary);
    display: block;
    margin-bottom: 8px;
    transition: color var(--transition-base);
}

.stat-item .stat-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--gray);
    transition: color var(--transition-base);
}


/* ==================== PORTFOLIO ==================== */
.portfolio {
    background: var(--light-gray);
    border-radius: 48px;
    margin: 0 20px;
    padding: 120px 60px;
}

.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    max-width: 1400px;
    margin: 0 auto;
}

.portfolio-item {
    position: relative;
    height: 480px;
    overflow: hidden;
    cursor: pointer;
    border-radius: 28px;
    box-shadow: var(--shadow-lg);
    transition: all var(--transition-slow);
    opacity: 0;
    transform: translateY(20px);
}

.portfolio-item.visible {
    opacity: 1;
    transform: translateY(0);
}

.portfolio-item:hover {
    transform: translateY(-10px);
    box-shadow: var(--shadow-xl);
}

.portfolio-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow);
}

.portfolio-item:hover img { transform: scale(1.12); }

.portfolio-overlay {
    position: absolute;
    inset: 0;
    background: var(--overlay-primary);
    backdrop-filter: blur(10px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: all var(--transition-base);
    border-radius: 28px;
}

.portfolio-item:hover .portfolio-overlay { opacity: 1; }

.portfolio-overlay h3 {
    font-family: 'Cormorant Garamond', serif;
    color: #fff;
    font-size: 30px;
    font-weight: 300;
    margin-bottom: 8px;
    transform: translateY(16px);
    transition: transform var(--transition-base) 0.1s;
}

.portfolio-item:hover .portfolio-overlay h3 { transform: translateY(0); }

.portfolio-overlay p {
    color: rgba(255, 255, 255, 0.8);
    transform: translateY(16px);
    transition: transform var(--transition-base) 0.2s;
}

.portfolio-item:hover .portfolio-overlay p { transform: translateY(0); }


/* ==================== VISIBILITY (scroll reveal) ==================== */
.timeline-item,
.vision-item,
.influence-item {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.timeline-item.visible,
.vision-item.visible,
.influence-item.visible {
    opacity: 1;
    transform: translateY(0);
}


/* ==================== FOOTER ==================== */
footer {
    background: var(--dark);
    color: #fff;
    border-radius: 48px 48px 0 0;
    margin-top: 60px;
    padding: 60px 8%;
}

.footer-grid {
    display: grid;
    grid-template-columns: 2.5fr 1.5fr 1fr;
    gap: 60px;
    max-width: 1400px;
}

.footer-section h3 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 22px;
    font-weight: 300;
    letter-spacing: 2px;
    margin-bottom: 16px;
}

.footer-section h4 {
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 20px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.5);
}

.footer-section p {
    font-size: 14px;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.6);
    font-weight: 300;
}

.footer-section ul {
    padding: 0;
    margin: 0;
    list-style: none;
    min-width: 0;
}

.footer-section ul li {
    margin-bottom: 10px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.6);
    font-weight: 300;
}

.footer-section ul li a {
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    transition: all var(--transition-base);
    word-break: break-all;
}

.footer-section ul li a:hover {
    color: #fff;
    padding-left: 8px;
}

.social-links {
    display: flex;
    gap: 12px;
    margin-top: 20px;
}

.social-link {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: all var(--transition-base);
    color: #c8c8c8;
}

.social-link img { width: 20px; height: 20px; }

.social-link:hover { transform: translateY(-4px) scale(1.1); }
.social-link:focus-visible { outline: 2px solid var(--primary); outline-offset: 4px; border-radius: 4px; }
.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 32px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.4);
    font-size: 12px;
    font-weight: 300;
    flex-wrap: wrap;
    gap: 8px;
}


/* ==================== PAGES ABOUT & CONTACT ==================== */
.intro,
.journey,
.cta {
    padding: 120px 60px;
    max-width: 1400px;
    margin: 0 auto;
}

.intro-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}

.intro-image {
    width: 100%;
    height: 580px;
    overflow: hidden;
    border-radius: 32px;
    box-shadow: var(--shadow-xl);
}

.intro-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow);
}

.intro-image:hover img { transform: scale(1.08); }

.intro-text h2 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 40px;
    font-weight: 300;
    letter-spacing: -1px;
    margin-bottom: 24px;
}

.intro-text .large {
    font-size: 19px;
    line-height: 1.6;
    margin-bottom: 18px;
    font-weight: 300;
}

.intro-text p {
    color: var(--gray);
    margin-bottom: 14px;
    line-height: 1.8;
    font-size: 15px;
}

.section-header-about { margin-bottom: 60px; }

.section-header-about h2 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 40px;
    font-weight: 300;
    letter-spacing: -1px;
    margin-top: 8px;
}

.timeline {
    position: relative;
    padding-left: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.timeline::before {
    content: '';
    position: absolute;
    left: 140px;
    top: 12px;
    bottom: 12px;
    width: 1px;
    background: linear-gradient(to bottom, transparent, var(--primary) 12%, var(--primary) 88%, transparent);
    opacity: 0.25;
}

.timeline-item {
    position: relative;
    display: grid;
    grid-template-columns: 140px 1fr;
    align-items: start;
    padding-bottom: 52px;
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.55s cubic-bezier(0.4, 0, 0.2, 1), transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}

.timeline-item.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Date côté gauche */
.timeline-item::before {
    content: attr(data-year);
    display: block;
    font-family: 'Montserrat', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--primary);
    opacity: 0.7;
    padding-top: 4px;
    text-align: right;
    padding-right: 36px;
}

/* Point sur la ligne */
.timeline-item::after {
    content: '';
    position: absolute;
    left: 134px;
    top: 7px;
    width: 13px;
    height: 13px;
    background: var(--white);
    border-radius: 50%;
    border: 2px solid var(--primary);
    transition: background 0.3s, transform 0.3s;
}

.timeline-item:last-child::after {
    background: var(--primary);
    transform: scale(1.15);
    box-shadow: 0 0 0 4px rgba(92, 0, 0, 0.12);
    animation: timelinePulse 2.4s ease-in-out infinite;
}

@keyframes timelinePulse {
    0%, 100% { box-shadow: 0 0 0 4px rgba(92, 0, 0, 0.12); }
    50%       { box-shadow: 0 0 0 8px rgba(92, 0, 0, 0.05); }
}

.timeline-content {
    padding-left: 36px;
    border-left: none;
}

.timeline-content h3 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 24px;
    font-weight: 400;
    letter-spacing: -0.3px;
    margin-bottom: 10px;
    color: var(--dark);
}

.timeline-item:last-child .timeline-content h3 {
    color: var(--primary);
}

.timeline-content p {
    color: var(--gray);
    line-height: 1.8;
    max-width: 560px;
    font-size: 14.5px;
}

.vision {
    padding: 120px 60px;
    background: var(--light-gray);
    border-radius: 48px;
    margin: 0 20px;
}

.vision-wrapper { max-width: 1400px; margin: 0 auto; }

.vision-wrapper p {
    text-align: center;
    font-size: 19px;
    line-height: 1.8;
    margin-bottom: 24px;
    font-weight: 300;
}

.today {
    padding: 120px 60px;
    background: var(--light-gray);
    border-radius: 48px;
    margin: 50px 20px;
}

.today-content { max-width: 1400px; margin: 0 auto; }

.today-content h2 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 40px;
    font-weight: 300;
    letter-spacing: -1px;
    margin-bottom: 24px;
}

.today-content .large {
    font-size: 19px;
    line-height: 1.8;
    margin-bottom: 24px;
    font-weight: 300;
}

.today-content p {
    color: var(--gray);
    margin-bottom: 20px;
    line-height: 1.8;
    font-size: 15px;
}

.cta-content h2 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 46px;
    font-weight: 300;
    letter-spacing: -1px;
    margin-bottom: 16px;
}

.cta-content p {
    font-size: 17px;
    color: var(--gray);
    margin-bottom: 36px;
}

.cta-buttons {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}


/* ==================== CONTACT ==================== */
#contact { overflow-x: hidden; }

.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
}

.contact-info,
.contact-form {
    background: var(--white);
    padding: 56px;
    border-radius: 32px;
    box-shadow: var(--shadow-xl);
    border: 1px solid var(--border);
}

.contact-info h2 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 40px;
    font-weight: 300;
    margin-bottom: 24px;
    color: var(--primary);
}

.contact-info p {
    font-size: 15px;
    line-height: 1.8;
    color: var(--gray);
    margin-bottom: 40px;
    font-weight: 300;
}

.contact-item {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 20px;
    padding: 18px;
    background: var(--light-gray);
    border-radius: 24px;
    transition: all var(--transition-base);
    text-decoration: none;
    border: 1px solid transparent;
}

.contact-item:hover {
    transform: translateX(8px);
    background: var(--primary);
    border-color: var(--primary);
}

.contact-item:hover .contact-icon,
.contact-item:hover span { color: #fff; }

.contact-icon {
    font-size: 18px;
    color: var(--primary);
    transition: color var(--transition-base);
}

.contact-item span {
    font-size: 14px;
    color: var(--gray);
    transition: color var(--transition-base);
}

.form-group { margin-bottom: 24px; }

.form-group label {
    display: block;
    font-size: 11px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--gray);
    margin-bottom: 8px;
    font-weight: 500;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 16px 20px;
    border: 1.5px solid var(--light-gray);
    border-radius: 24px;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 300;
    background: var(--light-gray);
    color: var(--dark);
    transition: all var(--transition-base);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--primary);
    background: var(--white);
    transform: translateY(-2px);
    box-shadow: var(--shadow-primary);
}


/* ==================== RESPONSIVE — TABLET 1024px ==================== */
@media (max-width: 1024px) {

    .header-wrapper {
        top: 10px;
        width: calc(100% - 20px);
        gap: 10px;
    }

    .header-wrapper.shrink { width: 80%; }

    header { padding: 16px 28px; }
    .logo  { font-size: 22px; letter-spacing: 2px; }

    nav {
        gap: 22px;
        padding: 9px 18px;
    }

    nav a { font-size: 11px; }

    section { padding: 80px 30px; }

    .about-grid,
    .contact-grid,
    .intro-grid { grid-template-columns: 1fr; gap: 36px; }

    .about-text,
    .contact-info,
    .contact-form { padding: 40px 32px; }

    .about-image,
    .intro-image { height: 380px; }

    .portfolio-grid { grid-template-columns: 1fr; gap: 20px; }
    .portfolio-item { height: 400px; }

    .gallery {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: 240px;
        grid-auto-flow: dense;
        gap: 14px;
    }

    .gallery-item:nth-child(1) { grid-column: span 2; grid-row: span 2; }
    .gallery-item.landscape { grid-column: span 2; }

    .footer-grid { grid-template-columns: 1fr; gap: 36px; }

    .stats { grid-template-columns: repeat(2, 1fr); }

    .intro,
    .journey,
    .today,
    .cta { padding: 80px 30px; }

    .vision { padding: 80px 30px; margin: 0 10px; }

    .timeline::before { left: 110px; }
    .timeline-item { grid-template-columns: 110px 1fr; }
    .timeline-item::after  { left: 104px; }

    /* Lightbox 1024px — colonne unique */
    .lightbox { padding: 40px 20px; }

    .lightbox-container {
        grid-template-columns: 1fr;
        gap: 24px;
        max-width: 680px;
    }

    .lightbox-image.landscape { max-width: 100%; max-height: 42vh; width: 100%; }
    .lightbox-image.portrait  { max-width: 64vw; max-height: 56vh; }
    .lightbox-image.square    { max-width: 76vw; max-height: 52vh; }

    .lightbox-info {
        position: static;
        max-height: none;
        padding-bottom: 20px;
    }

    .lightbox-info h2 { font-size: 28px; }

    .lightbox-nav { width: 38px; height: 38px; font-size: 20px; }
    .lightbox-prev { left: 12px; }
    .lightbox-next { right: 12px; }
}


/* ==================== RESPONSIVE — MOBILE 768px ==================== */
@media (max-width: 768px) {

    .header-wrapper {
        top: 10px;
        width: calc(100% - 20px);
        gap: 0;
    }

    .header-wrapper.shrink { width: calc(100% - 20px); }

    header { padding: 13px 18px; border-radius: 18px; }

    .logo { font-size: 18px; letter-spacing: 2px; order: 1; }

    .theme {
        order: 2;
        margin-left: auto;
        margin-right: -6px;
    }

    body.menu-open .theme { opacity: 0; pointer-events: none; }

    .theme button { width: 38px; height: 38px; font-size: 15px; }

    .theme-desktop-btn { display: none; }

    .theme-mobile-btn {
        display: flex;
        align-items: center;
        gap: 10px;
        background: none;
        border: none;
        cursor: pointer;
        padding: 14px 0;
        border-bottom: 1px solid var(--border);
        border-radius: 0;
        width: 100%;
        color: var(--dark);
        font-family: 'Montserrat', sans-serif;
        font-size: 16px;
        letter-spacing: 1px;
    }

    .theme-mobile-btn::before { content: 'Thème'; }

    .menu-toggle {
        display: flex;
        position: absolute;
        right: 20px;
        top: 50%;
        transform: translateY(-50%);
    }

    .menu-toggle.active { transform: translate(20px, -50%); }

    nav {
        display: flex;
        position: fixed;
        top: 0;
        right: -110%;
        height: 100vh;
        width: 75%;
        max-width: 280px;
        flex-direction: column;
        padding: 96px 36px 40px;
        gap: 4px;
        background: var(--white);
        backdrop-filter: blur(20px) saturate(180%);
        -webkit-backdrop-filter: blur(20px) saturate(180%);
        border-radius: 24px;
        box-shadow: var(--shadow-xl);
        border: 1px solid var(--border);
        transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        z-index: 2000;
    }

    nav.active { right: -2px; }

    nav a {
        font-size: 16px;
        padding: 14px 0;
        border-bottom: 1px solid var(--border);
        letter-spacing: 1px;
    }

    nav a::after { display: none; }
    nav a:hover  { transform: translateX(8px); }

    .modal {
        position: absolute;
        top: 56px;
        max-height: 76%;
        border-radius: 24px;
    }

    section { padding: 60px 20px; }

    .hero {
        height: 100dvh;
        border-radius: 0 0 32px 32px;
    }

    .hero h1 {
        font-size: clamp(38px, 9vw, 56px);
        letter-spacing: 4px;
    }

    .hero p { font-size: 12px; letter-spacing: 2px; }

    .about-text,
    .contact-info,
    .contact-form {
        padding: 28px 20px;
        border-radius: 24px;
    }

    .about-image,
    .intro-image { height: 280px; border-radius: 24px; }

    .stats { grid-template-columns: 1fr; gap: 16px; }

    .portfolio {
        border-radius: 28px;
        padding: 56px 18px;
        margin: 0 8px;
    }

    .portfolio-item { height: 320px; border-radius: 18px; }

    .gallery {
        grid-template-columns: repeat(2, 1fr) !important;
        grid-auto-rows: 200px !important;
        grid-auto-flow: dense !important;
        gap: 10px !important;
    }

    .gallery-item {
        grid-row: span 1 !important;
        grid-column: span 1 !important;
        border-radius: 14px !important;
        min-height: 0 !important;
        height: auto !important;
    }

    .gallery-item:nth-child(1) { grid-column: span 2 !important; grid-row: span 1 !important; }

    .filters { gap: 8px; padding: 28px 16px 20px; }
    .filter-btn { padding: 9px 18px; font-size: 10px; }
    .gallery-container { padding: 32px 14px 80px; }

    .description-stats { grid-template-columns: repeat(2, 1fr); }

    /* Lightbox mobile 768px — image plein écran + drawer en bas */
    .lightbox {
        padding: 0 !important;
        align-items: center;
        overflow: hidden;
    }

    /* Container = plein écran, positionnement absolu */
    .lightbox-container {
        display: block !important;
        position: relative;
        width: 100vw;
        height: 100dvh;
        max-width: 100%;
        gap: 0;
    }

    /* Image couvre tout l'écran */
    .lightbox-image,
    .lightbox-image.landscape,
    .lightbox-image.portrait,
    .lightbox-image.square {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
        max-height: 100% !important;
        object-fit: contain !important;
        border-radius: 0 !important;
        margin: 0 !important;
        padding-bottom: 180px;
        box-shadow: none !important;
    }

    /* Drawer infos fixé en bas */
    .lightbox-info {
        position: absolute !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        top: auto !important;
        max-height: 52dvh;
        overflow-y: auto;
        padding: 20px 20px 32px;
        background: linear-gradient(to bottom, rgba(5,4,7,0) 0%, rgba(5,4,7,0.97) 18%);
        border-top: none;
        border-radius: 0;
        z-index: 2003;
        scrollbar-width: none;
    }

    .lightbox-info::-webkit-scrollbar { display: none; }
    .lightbox-info h2 { font-size: 22px; margin-bottom: 8px; }
    .lightbox-counter { margin-bottom: 10px; }
    .lightbox-description { font-size: 13px; margin-bottom: 14px; }
    .lightbox-details { padding: 12px 14px; margin-bottom: 12px; }
    .lightbox-hint { display: block; }

    .lightbox-close {
        top: 14px !important;
        right: 14px !important;
        z-index: 2010;
    }
    .lightbox-nav { display: none !important; }

    .footer-grid { grid-template-columns: 1fr; gap: 28px; }

    footer {
        padding: 50px 20px 28px;
        border-radius: 28px 28px 0 0;
    }

    .footer-bottom { flex-direction: column; text-align: center; }

    .contact-grid { grid-template-columns: 1fr; gap: 20px; }

    .intro,
    .journey,
    .today,
    .cta { padding: 60px 20px; }

    .vision { padding: 60px 20px; border-radius: 28px; margin: 0 8px; }
    .today  { border-radius: 28px; margin: 28px 8px; }

    .timeline::before { left: 72px; }
    .timeline-item { grid-template-columns: 72px 1fr; }
    .timeline-item::before { font-size: 10px; padding-right: 24px; }
    .timeline-item::after  { left: 66px; top: 6px; width: 11px; height: 11px; }
    .timeline-content { padding-left: 24px; }
    .timeline-content h3 { font-size: 20px; }
}


/* ==================== RESPONSIVE — SMALL MOBILE 480px ==================== */
@media (max-width: 480px) {

    header { padding: 11px 14px; }
    .logo  { font-size: 16px; }
    .theme button { width: 34px; height: 34px; font-size: 13px; }

    .hero h1 { font-size: 32px; letter-spacing: 3px; }
    .section-title { font-size: 26px; }

    .about-text,
    .contact-info,
    .contact-form { padding: 22px 16px; }

    .description-card { padding: 20px 16px; }
    .description-stats { grid-template-columns: 1fr; gap: 10px; }
    .description-card h2 { font-size: 24px; }

    .lightbox-info { padding: 16px 16px 24px; max-height: 46dvh; }
    .lightbox-info h2 { font-size: 22px; }
    .lightbox-meta { flex-direction: column; gap: 5px; }
    .detail-row { flex-direction: column; gap: 3px; }
    .detail-value { max-width: 100%; text-align: left; }

    .contact-item { padding: 13px; word-break: break-word; }
    .cta-content h2 { font-size: 28px; }

    .cta-buttons { flex-direction: column; align-items: center; }
    .btn-cta { width: 100%; max-width: 280px; text-align: center; }

    /* Galerie mobile — 1 colonne pleine largeur */
    .gallery {
        grid-template-columns: 1fr !important;
        grid-auto-rows: 240px !important;
        grid-auto-flow: dense !important;
        gap: 8px !important;
    }

    .gallery-item {
        grid-row: span 1 !important;
        grid-column: span 1 !important;
        border-radius: 12px !important;
        min-height: 0 !important;
        height: auto !important;
    }

    .gallery-item:nth-child(1) {
        grid-column: span 1 !important;
        grid-row: span 1 !important;
    }

    .gallery-container { padding: 16px 10px 60px !important; }
    .filters { gap: 6px; padding: 16px 10px 14px; }
    .filter-btn { padding: 8px 12px; font-size: 10px; letter-spacing: 1px; }
}


/* ==================== RESPONSIVE — LARGE 1600px+ ==================== */
@media (min-width: 1600px) {

    .hero h1         { font-size: 88px; }
    .hero-content h1 { font-size: 80px; }
    .section-title   { font-size: 54px; }

    .about-image,
    .intro-image  { height: 680px; }

    .portfolio-item { height: 520px; }

    section { padding: 140px 80px; }
}


/* ==================================================================================
   DARK MODE — TOUTES LES SURCHARGES COMPOSANT REGROUPÉES ICI
   Les variables :root sont déjà redéfinies dans html.dark { } en haut du fichier.
   Ces règles couvrent les cas non solubles par variable seule.
   ================================================================================== */

html.dark body          { background-color: var(--cream); color: var(--dark); }

/* Header */
html.dark header {
    background: rgba(14, 14, 14, 0.92);
    box-shadow: 0 4px 24px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.04);
}

html.dark nav           { background: rgba(255, 255, 255, 0.04); }

html.dark .theme button {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.07);
}

/* Preloader & hero */
html.dark .preloader    { background: var(--cream); }
html.dark .hero--solid  { background: #2c0000; }

/* Modal */
html.dark .modal {
    background: #1c1c1c;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 24px 64px rgba(0,0,0,0.8), 0 0 0 1px rgba(255,255,255,0.06);
}

html.dark .changelog {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

html.dark .modal #close { color: #fff; }

/* Galerie */
html.dark .gallery-item {
    box-shadow: 0 4px 20px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.04);
}

html.dark .gallery-item:hover {
    box-shadow: 0 16px 48px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.07);
}

html.dark .lazy-img {
    filter: blur(12px) saturate(0.3) brightness(0.65);
}

html.dark .lazy-img.loaded {
    filter: blur(0px) saturate(0.88) contrast(1.06) brightness(0.96);
}

html.dark .img-placeholder {
    background: linear-gradient(110deg, #101010 30%, #1a1a1a 50%, #101010 70%);
    background-size: 300% 100%;
}

html.dark .badge {
    background: rgba(16, 16, 16, 0.94);
    color: #f2f2f2;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Filtres */
html.dark .filter-btn {
    background: #161616;
    color: #8a8a8a;
    border: 1px solid rgba(255, 255, 255, 0.07);
    box-shadow: 0 2px 8px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.03);
}

html.dark .filter-btn:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: var(--primary);
    color: var(--primary);
    box-shadow: 0 4px 16px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.12);
}

html.dark .filter-btn.active {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
    box-shadow: var(--shadow-primary);
}

/* Lightbox */
/* Lightbox toujours sombre — dark mode overrides non nécessaires */

/* Description carte */
html.dark .description-card {
    background: #161616;
    border: 1px solid rgba(255, 255, 255, 0.07);
    box-shadow: 0 4px 20px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.04);
}

/* About */
html.dark .about-text {
    background: #161616;
    border: 1px solid rgba(255, 255, 255, 0.07);
    box-shadow: 0 8px 32px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.05);
}

html.dark .about-text:hover {
    box-shadow: 0 20px 60px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.08);
}

/* Portfolio / Vision / Today */
html.dark .portfolio,
html.dark .vision,
html.dark .today {
    background: #101010;
    border: 1px solid rgba(255, 255, 255, 0.04);
}

html.dark .portfolio-overlay h3 { color: #fff; }

/* Stats */
html.dark .stat-item {
    background: #161616;
    border: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: 0 2px 8px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.03);
}

html.dark .stat-item:hover {
    background: var(--primary);
    border-color: var(--primary);
    box-shadow: var(--shadow-primary);
}

/* Contact */
html.dark .contact-info,
html.dark .contact-form {
    background: #161616;
    border: 1px solid rgba(255, 255, 255, 0.07);
    box-shadow: 0 8px 32px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.05);
}

html.dark .contact-item {
    background: #0e0e0e;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

html.dark .contact-item:hover {
    background: var(--primary);
    border-color: var(--primary);
}

html.dark .form-group input,
html.dark .form-group select,
html.dark .form-group textarea {
    background: #0e0e0e;
    color: var(--dark);
    border-color: rgba(255, 255, 255, 0.08);
}

html.dark .form-group input:focus,
html.dark .form-group select:focus,
html.dark .form-group textarea:focus {
    background: #111111;
    border-color: var(--primary);
}

html.dark .form-group input::placeholder,
html.dark .form-group textarea::placeholder { color: #555; }

/* Footer */
html.dark footer {
    background: #040404;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

/* Timeline */
html.dark .timeline::before        { background: linear-gradient(to bottom, transparent, rgba(200,80,80,0.3) 12%, rgba(200,80,80,0.3) 88%, transparent); }
html.dark .timeline-item::after    { background: #161616; border-color: #c05050; }
html.dark .timeline-item:last-child::after { background: #c05050; box-shadow: 0 0 0 4px rgba(200,80,80,0.15); }
html.dark .timeline-item:last-child .timeline-content h3 { color: #e07070; }

/* Recherche */
html.dark .search-input         { background: #161616; border-color: rgba(255,255,255,0.08); color: #f2f2f2; }
html.dark .search-input:focus   { background: #1a1a1a; border-color: #c8c8c8; }
html.dark .search-clear         { background: rgba(255,255,255,0.07); color: rgba(255,255,255,0.5); }

/* Anciens sites */
html.dark .previous-sites       { background: #101010; border: 1px solid rgba(255,255,255,0.04); }
html.dark .previous-card        { background: #161616; border-color: rgba(255,255,255,0.07); }
html.dark .previous-card-header { background: #0e0e0e; border-color: rgba(255,255,255,0.05); }
html.dark .previous-card-url    { background: #1a1a1a; border-color: rgba(255,255,255,0.08); color: rgba(255,255,255,0.4); }
html.dark .previous-card-tags span { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.08); }
html.dark .previous-card-footer { border-color: rgba(255,255,255,0.06); }
html.dark .previous-card-btn    { border-color: rgba(255,255,255,0.2); color: rgba(255,255,255,0.6); }
html.dark .previous-card-btn:hover { background: rgba(255,255,255,0.1); color: #fff; }

/* Favoris */
html.dark .fav-btn              { background: rgba(22,22,22,0.92); color: #f5c6c6; }
html.dark .fav-btn.active       { background: #c8c8c8; color: #111; }
/* lb-favorite/share dark overrides — inclus dans base sombre */
html.dark .fav-empty            { background: rgba(255,255,255,0.03); border-color: rgba(255,255,255,0.08); }

/* Partage */
html.dark .share-btn            { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.1); color: rgba(255,255,255,0.6); }
html.dark .share-btn:hover      { border-color: #f5c6c6; color: #f5c6c6; background: rgba(255,255,255,0.08); }
html.dark .share-btn--native    { background: #c8c8c8; color: #111; border-color: #c8c8c8; }

/* Raccourcis */
html.dark kbd {
    background: #1e1e1e;
    border-color: rgba(255,255,255,0.12);
    color: rgba(255,255,255,0.8);
}

/* Statistiques */
html.dark .stats-card   { background: rgba(255,255,255,0.04); }
html.dark .stats-recent { background: rgba(255,255,255,0.04); }

/* Theme switch */
html.dark .theme-switch-icon--sun  { opacity: 0.4; color: var(--gray); }
html.dark .theme-switch-icon--moon { opacity: 1; color: #f5c6c6; }
html.dark .theme-switch-track      { background: rgba(255,255,255,0.04); }
html.dark .theme-switch-thumb      { transform: translateX(42px); background: #383838; box-shadow: 0 2px 8px rgba(0,0,0,0.5); }
html.dark .theme-switch-thumb-icon--sun  { opacity: 0; transform: rotate(90deg) scale(0.5); }
html.dark .theme-switch-thumb-icon--moon { opacity: 1; transform: rotate(0deg) scale(1); }

/* Settings */
html.dark .settings-modal       { background: #1a1a1a; border-color: rgba(255,255,255,0.08); }
html.dark .settings-sidebar     { background: #111; border-color: rgba(255,255,255,0.06); }
html.dark .settings-tab         { color: rgba(255,255,255,0.55); }
html.dark .settings-tab:hover,
html.dark .settings-tab.active  { background: rgba(255,255,255,0.07); color: #f5c6c6; }
html.dark .settings-row         { border-color: rgba(255,255,255,0.06); }
html.dark .settings-row-label   { color: rgba(255,255,255,0.88); }
html.dark .settings-row-desc    { color: rgba(255,255,255,0.45); }
html.dark .settings-panel-subtitle { color: rgba(255,255,255,0.4); }
html.dark .settings-radio-group { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.08); }
html.dark .radio-pill           { background: rgba(255,255,255,0.10); border-color: rgba(255,255,255,0.15); box-shadow: 0 2px 8px rgba(0,0,0,0.3); }
html.dark .settings-radio-btn           { color: rgba(255,255,255,0.45); }
html.dark .settings-radio-btn:hover     { color: #f5c6c6; }
html.dark .settings-radio-btn.active    { color: #f5c6c6; }
html.dark .settings-about-link          { background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.8); }
html.dark .settings-mobile-btn          { color: rgba(255,255,255,0.8); border-color: rgba(255,255,255,0.08); }
html.dark .settings-close               { background: rgba(255,255,255,0.07); color: rgba(255,255,255,0.55); }
html.dark .settings-toggle-track        { background: rgba(255,255,255,0.09); box-shadow: inset 0 1px 3px rgba(0,0,0,0.4); }
html.dark .settings-toggle-thumb        { background: #d4d4d4; box-shadow: 0 2px 6px rgba(0,0,0,0.5); }
html.dark .settings-reset-btn           { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.1); color: rgba(255,255,255,0.55); }
html.dark .settings-reset-btn:hover     { border-color: #f5c6c6; color: #f5c6c6; background: rgba(255,255,255,0.08); }
html.dark .settings-reset-btn--danger   { border-color: rgba(255,80,80,0.3); color: #ff6b6b; background: rgba(255,80,80,0.06); }
html.dark .settings-reset-btn--danger:hover { background: #c00; border-color: #c00; color: #fff; }
html.dark .settings-content             { background: var(--bg-cream-glass-98) !important; }
html.dark .settings-lang-preview        { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.07); }
html.dark .settings-stored-data         { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.07); }
html.dark .stored-data-value            { background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.08); color: rgba(255,255,255,0.8); }

/* Accessibilité contraste haut */
html.dark.high-contrast body  { color: #fff; }
html.dark.high-contrast nav a { color: #fff; }


/* ==================== PARAMÈTRES ==================== */
.settings-btn {
    flex-shrink: 0;
    background: none;
    border: none;
    cursor: pointer;
    width: 42px;
    height: 42px;
    border-radius: 24px;
    font-size: 18px;
    transition: transform var(--transition-base), background var(--transition-base);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--dark);
}

.settings-btn:hover { transform: scale(1.1) rotate(60deg); }

.settings-mobile-btn { display: none; }

.settings-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    padding: 20px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}

.settings-overlay.show { opacity: 1; pointer-events: auto; }
.settings-overlay.show .settings-modal {
    animation: settingsPopIn 0.32s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.settings-modal {
    background: var(--bg-cream-glass-98);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    border-radius: 20px;
    box-shadow: var(--shadow-xl);
    border: 1px solid var(--border);
    width: clamp(320px, 90vw, 780px);
    height: clamp(400px, 70vh, 580px);
    display: flex;
    overflow: hidden;
}

@keyframes settingsPopIn {
    from { transform: scale(0.92) translateY(12px); opacity: 0; }
    to   { transform: scale(1) translateY(0);       opacity: 1; }
}

@keyframes settingsPopOut {
    from { transform: scale(1) translateY(0);        opacity: 1; }
    to   { transform: scale(0.94) translateY(8px);   opacity: 0; }
}

.settings-header {
    display: none;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
    font-family: 'Cormorant Garamond', serif;
    font-size: 18px;
    letter-spacing: 1px;
    color: var(--primary);
}

.settings-sidebar {
    width: 180px;
    flex-shrink: 0;
    background: var(--light-gray);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    padding: 20px 0;
    gap: 2px;
    overflow-y: auto;
    scrollbar-width: none;
}
.settings-sidebar::-webkit-scrollbar { display: none; }

.settings-sidebar-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--gray);
    padding: 0 16px 12px;
    opacity: 0.6;
}

.settings-tab {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    cursor: pointer;
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 400;
    color: var(--gray);
    border-radius: 10px;
    margin: 0 8px;
    transition: background 0.2s, color 0.2s;
    border: none;
    background: none;
    text-align: left;
    width: calc(100% - 16px);
}

.settings-tab:hover { background: var(--bg-primary-light); color: var(--dark); }

.settings-tab.active {
    background: var(--bg-primary-light);
    color: var(--primary);
    font-weight: 500;
}

.settings-tab-icon { font-size: 16px; width: 20px; text-align: center; flex-shrink: 0; }

.settings-separator { height: 1px; background: var(--border); margin: 8px 16px; }

.settings-content {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.settings-close {
    position: absolute;
    top: 14px;
    right: 16px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: none;
    background: var(--bg-primary-light);
    cursor: pointer;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gray);
    transition: background 0.2s, color 0.2s;
    flex-shrink: 0;
    z-index: 100;
}

.settings-close:hover { background: var(--border); color: var(--dark); }

.settings-panel {
    display: none;
    flex-direction: column;
    padding: 28px 32px;
    gap: 24px;
    flex: 1;
    position: relative;
    min-height: 0;
}

.settings-panel.active { display: flex; }

.settings-panel-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(20px, 3vw, 28px);
    font-weight: 300;
    letter-spacing: 2px;
    color: var(--primary);
    margin-bottom: 4px;
}

.settings-panel-subtitle {
    font-size: 12px;
    color: var(--gray);
    font-weight: 300;
    margin-top: -16px;
    opacity: 0.8;
}

.settings-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 0;
    border-bottom: 1px solid var(--border);
    gap: 16px;
}

.settings-row:last-child { border-bottom: none; }

.settings-row-info { display: flex; flex-direction: column; gap: 3px; }
.settings-row-label { font-size: 13px; font-weight: 500; color: var(--dark); }
.settings-row-desc  { font-size: 11px; color: var(--gray); font-weight: 300; line-height: 1.5; }

.settings-toggle {
    cursor: pointer;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
    display: inline-block;
    position: relative;
}

.settings-toggle input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

.settings-toggle-track {
    display: block;
    width: 48px;
    height: 26px;
    background: #ddd8d8;
    border-radius: 26px;
    position: relative;
    cursor: pointer;
    box-shadow: inset 0 1px 3px rgba(0,0,0,.12);
    transition: background .32s cubic-bezier(.4,0,.2,1),
                box-shadow .32s cubic-bezier(.4,0,.2,1);
}

.settings-toggle input:checked + .settings-toggle-track {
    background: rgba(117, 2, 2, 0.44);
    box-shadow: inset 0 1px 2px rgba(0,0,0,.18);
}

.settings-toggle input:focus-visible + .settings-toggle-track {
    outline: 1.5px solid var(--primary);
    outline-offset: 3px;
}

.settings-toggle-thumb {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    background: #ffffff;
    border-radius: 50%;
    box-shadow: 0 2px 5px rgba(0,0,0,.20), 0 1px 2px rgba(0,0,0,.12);
    transition: transform .36s cubic-bezier(.34,1.28,.64,1),
                width .12s ease,
                border-radius .12s ease;
    will-change: transform;
}

.settings-toggle input:checked + .settings-toggle-track .settings-toggle-thumb {
    transform: translateX(22px);
}

.settings-toggle:active .settings-toggle-thumb {
    width: 25px;
    border-radius: 11px;
}

.settings-radio-group {
    display: flex;
    gap: 0;
    flex-wrap: nowrap;
    position: relative;
    background: var(--light-gray);
    border-radius: 12px;
    padding: 3px;
    border: 1px solid var(--border);
}

.radio-pill {
    position: absolute;
    top: 3px;
    left: 3px;
    height: calc(100% - 6px);
    background: white;
    border-radius: 9px;
    box-shadow: 0 2px 8px rgba(92,0,0,0.13), 0 1px 3px rgba(0,0,0,0.08);
    transition: left 0.3s cubic-bezier(0.34, 1.36, 0.64, 1), width 0.3s cubic-bezier(0.34, 1.36, 0.64, 1);
    pointer-events: none;
    z-index: 0;
    border: 1px solid rgba(92,0,0,0.12);
}

.settings-radio-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 7px 13px;
    border-radius: 9px;
    border: none;
    background: none;
    cursor: pointer;
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    color: var(--gray);
    transition: color 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    z-index: 1;
    white-space: nowrap;
    flex-shrink: 0;
}

.settings-radio-btn:hover { color: var(--primary); }

.settings-radio-btn.active {
    color: var(--primary);
    font-weight: 600;
}


/* ==================== THEME SWITCH ==================== */
.theme-switch-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
}

.theme-switch-icon {
    display: flex;
    align-items: center;
    color: var(--gray);
    transition: color 0.3s, opacity 0.3s;
    opacity: 0.5;
}

.theme-switch-icon--sun  { opacity: 1; color: var(--primary); }
.theme-switch-icon--moon { opacity: 0.4; }

.theme-switch-track {
    position: relative;
    width: 90px;
    height: 48px;
    border-radius: 48px;
    background: #e0d4d4;
    border: none;
    cursor: pointer;
    transition: background 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 0;
    flex-shrink: 0;
}

.theme-switch-thumb {
    position: absolute;
    top: 5px;
    left: 5px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: white;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2), 0 1px 3px rgba(0,0,0,0.1);
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.theme-switch-thumb-icon {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.3s, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.theme-switch-thumb-icon--sun  { opacity: 1; color: var(--primary); transform: rotate(0deg) scale(1); }
.theme-switch-thumb-icon--moon { opacity: 0; color: #f5c6c6; transform: rotate(-90deg) scale(0.5); }

.settings-about-logo {
    font-family: 'Cormorant Garamond', serif;
    font-size: 48px;
    font-weight: 300;
    color: var(--primary);
    letter-spacing: 4px;
    text-align: center;
    margin: 8px 0;
}

.settings-about-version {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--gray);
    text-align: center;
}

.settings-about-links { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }

.settings-about-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 10px;
    background: var(--light-gray);
    text-decoration: none;
    color: var(--dark);
    font-size: 13px;
    transition: background 0.2s;
}

.settings-about-link:hover { background: var(--bg-primary-light); color: var(--primary); }


/* ==================== ACCESSIBILITÉ GLOBALE ==================== */
html.reduce-motion *,
html.reduce-motion *::before,
html.reduce-motion *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
}

/* Texte agrandi */
html.large-text body                    { font-size: 17px; }
html.large-text nav a                   { font-size: 13px; }
html.large-text .filter-btn             { font-size: 13px; }
html.large-text .overlay p,
html.large-text .detail-label,
html.large-text .detail-value           { font-size: 15px; }
html.large-text .lightbox-description   { font-size: 16px; }
html.large-text .settings-row-label     { font-size: 15px; }
html.large-text .settings-row-desc      { font-size: 13px; }

/* Police dyslexique */
html.dyslexic-font body,
html.dyslexic-font nav a,
html.dyslexic-font .filter-btn,
html.dyslexic-font .overlay h3,
html.dyslexic-font .overlay p,
html.dyslexic-font .lightbox-info,
html.dyslexic-font .detail-label,
html.dyslexic-font .detail-value,
html.dyslexic-font .settings-row-label,
html.dyslexic-font .settings-row-desc,
html.dyslexic-font .btn-cta {
    font-family: 'OpenDyslexic', sans-serif !important;
    letter-spacing: 0.05em;
    word-spacing: 0.1em;
    line-height: 1.9;
}

/* Contraste élevé */
html.high-contrast              { --border: rgba(92, 0, 0, 0.4); }
html.high-contrast body         { color: #000; }
html.high-contrast nav a        { color: #000; font-weight: 600; }
html.high-contrast .gallery-item  { box-shadow: 0 0 0 2px var(--primary); }
html.high-contrast .filter-btn    { border-width: 2px; font-weight: 600; }
html.high-contrast .lightbox-info { border: 2px solid var(--primary); }


/* ==================== GALERIE — DENSITÉ ==================== */
html.gallery-compact .gallery {
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 180px;
    gap: 10px;
}

html.gallery-normal .gallery {
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 260px;
    gap: 16px;
}

html.gallery-large .gallery {
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 360px;
    gap: 20px;
}

html.no-badges .badge       { display: none !important; }

html.no-overlays .gallery-item:hover .overlay { opacity: 0 !important; pointer-events: none; }


/* ==================== LANGUE — APERÇU ==================== */
.settings-lang-preview {
    background: var(--light-gray);
    border-radius: 12px;
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    border: 1px solid var(--border);
    margin-top: 4px;
}

.settings-lang-preview-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--gray);
    font-weight: 500;
}

.settings-lang-preview-box {
    font-family: 'Cormorant Garamond', serif;
    font-size: 18px;
    font-weight: 300;
    color: var(--primary);
    letter-spacing: 1px;
    transition: opacity 0.3s ease;
}


/* ==================== CONFIDENTIALITÉ ==================== */
.settings-stored-data {
    background: var(--light-gray);
    border-radius: 12px;
    padding: 16px 20px;
    border: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-bottom: 8px;
}

.stored-data-title {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--gray);
    font-weight: 500;
    margin-bottom: 10px;
    display: block;
}

.stored-data-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
    font-size: 12px;
}

.stored-data-item:last-child { border-bottom: none; }
.stored-data-key   { color: var(--gray); font-weight: 400; }

.stored-data-value {
    color: var(--dark);
    font-weight: 500;
    background: var(--white);
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 11px;
    border: 1px solid var(--border);
}

.stored-data-empty {
    font-size: 12px;
    color: var(--gray);
    font-style: italic;
    text-align: center;
    padding: 8px 0;
}

.settings-reset-btn {
    flex-shrink: 0;
    padding: 8px 16px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--light-gray);
    cursor: pointer;
    font-family: 'Montserrat', sans-serif;
    font-size: 11px;
    letter-spacing: 0.5px;
    color: var(--gray);
    transition: all 0.2s;
    white-space: nowrap;
}

.settings-reset-btn:hover { border-color: var(--primary); color: var(--primary); background: var(--bg-primary-light); }

.settings-reset-btn--danger       { border-color: rgba(180,0,0,0.25); color: #b00; background: rgba(180,0,0,0.04); }
.settings-reset-btn--danger:hover { background: #b00; border-color: #b00; color: #fff; }


/* ==================== TERMINAL ==================== */
.settings-tab--terminal { display: none; }

.settings-tab--terminal.unlocked {
    display: flex;
    color: #00c853 !important;
    animation: terminalUnlock 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes terminalUnlock {
    from { opacity: 0; transform: translateX(-12px); }
    to   { opacity: 1; transform: translateX(0); }
}

#panel-terminal {
    padding: 0 !important;
    gap: 0 !important;
    background: #0d0d0d;
    border-radius: 0 20px 20px 0;
    font-family: 'Courier New', 'Menlo', 'Monaco', monospace;
    overflow: hidden;
    color: #e0e0e0;
}

.terminal-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    background: #1a1a1a;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    user-select: none;
}

.terminal-dots  { display: flex; gap: 7px; align-items: center; }
.terminal-dot   { width: 12px; height: 12px; border-radius: 50%; }
.terminal-dot--red    { background: #ff5f57; }
.terminal-dot--yellow { background: #ffbd2e; }
.terminal-dot--green  { background: #28c940; }

.terminal-title {
    font-size: 11px;
    color: rgba(255,255,255,0.4);
    letter-spacing: 0.5px;
    flex: 1;
    text-align: center;
}

.terminal-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px 20px 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-height: 260px;
    max-height: 320px;
    scroll-behavior: smooth;
}

.terminal-line           { font-size: 12px; line-height: 1.7; white-space: pre-wrap; word-break: break-word; }
.terminal-line--system   { color: rgba(255,255,255,0.35); font-size: 11px; }
.terminal-line--input    { color: #80cbc4; }
.terminal-line--input::before { content: 'rp@site:~$ '; color: #00c853; font-weight: bold; }
.terminal-line--output   { color: #e0e0e0; }
.terminal-line--success  { color: #69f0ae; }
.terminal-line--error    { color: #ff5252; }
.terminal-line--warning  { color: #ffd740; }
.terminal-line--info     { color: #82b1ff; }
.terminal-line--spacer   { height: 4px; }

.terminal-cmd-hint {
    color: #80cbc4;
    background: rgba(128, 203, 196, 0.12);
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 11px;
}

.terminal-input-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px 16px;
    border-top: 1px solid rgba(255,255,255,0.06);
    background: #0d0d0d;
}

.terminal-prompt {
    color: #00c853;
    font-size: 12px;
    font-weight: bold;
    white-space: nowrap;
    font-family: 'Courier New', monospace;
}

.terminal-input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: #80cbc4;
    font-family: 'Courier New', 'Menlo', monospace;
    font-size: 12px;
    caret-color: #00c853;
    padding: 0;
}

.terminal-input::placeholder { color: rgba(255,255,255,0.15); }

/* Effets visuels */
.snow-flake {
    position: fixed;
    top: -10px;
    color: white;
    font-size: 1em;
    user-select: none;
    pointer-events: none;
    z-index: 99999;
    animation: snowFall linear forwards;
    opacity: 0.85;
}

@keyframes snowFall {
    0%   { transform: translateY(0) rotate(0deg);   opacity: 0.85; }
    100% { transform: translateY(110vh) rotate(360deg); opacity: 0; }
}

.matrix-canvas {
    position: fixed;
    inset: 0;
    z-index: 99998;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.matrix-canvas.active { opacity: 0.18; }

.confetti-piece {
    position: fixed;
    top: -10px;
    width: 8px;
    height: 8px;
    pointer-events: none;
    z-index: 99999;
    border-radius: 2px;
    animation: confettiFall linear forwards;
}

@keyframes confettiFall {
    0%   { transform: translateY(0) rotate(0deg) scaleX(1);    opacity: 1; }
    80%  { opacity: 1; }
    100% { transform: translateY(110vh) rotate(720deg) scaleX(-1); opacity: 0; }
}

.terminal-toast {
    position: fixed;
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: #0d0d0d;
    color: #00c853;
    border: 1px solid rgba(0, 200, 83, 0.3);
    padding: 10px 24px;
    border-radius: 24px;
    font-family: 'Courier New', monospace;
    font-size: 12px;
    letter-spacing: 1px;
    z-index: 99997;
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    pointer-events: none;
    white-space: nowrap;
    box-shadow: 0 4px 24px rgba(0,0,0,0.4), 0 0 0 1px rgba(0,200,83,0.1);
}

.terminal-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }


/* ==================== APPARENCE — POLICE / ESPACEMENT / RADIUS ==================== */
html.font-georgia body,
html.font-georgia nav a,
html.font-georgia .filter-btn,
html.font-georgia .overlay p,
html.font-georgia .detail-value,
html.font-georgia .settings-row-label,
html.font-georgia .settings-row-desc {
    font-family: Georgia, 'Times New Roman', serif !important;
}

html.font-system body,
html.font-system nav a,
html.font-system .filter-btn,
html.font-system .settings-row-label {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

html.spacing-compact body { line-height: 1.4; }
html.spacing-compact p    { margin-bottom: 10px; }

html.spacing-aere body    { line-height: 2; }
html.spacing-aere p       { margin-bottom: 28px; }
html.spacing-aere .gallery-item,
html.spacing-aere .portfolio-item { margin-bottom: 8px; }

html.radius-none {
    --radius-sm:   0px;
    --radius-md:   0px;
    --radius-lg:   0px;
    --radius-xl:   0px;
    --radius-2xl:  0px;
    --radius-pill: 4px;
}
html.radius-none *, html.radius-none *::before, html.radius-none *::after {
    border-radius: 0 !important;
}
/* Garder les ronds fonctionnels (avatars, dots, toggles) */
html.radius-none .settings-toggle-track,
html.radius-none .settings-toggle-thumb,
html.radius-none .preloader-logo,
html.radius-none .evolution-dot,
html.radius-none .terminal-dot,
html.radius-none .previous-card-dots span,
html.radius-none .code-dot { border-radius: 50% !important; }

html.radius-round {
    --radius-sm:   16px;
    --radius-md:   28px;
    --radius-lg:   40px;
    --radius-xl:   48px;
    --radius-2xl:  64px;
    --radius-pill: 9999px;
}
html.radius-round *, html.radius-round *::before, html.radius-round *::after {
    border-radius: var(--radius-lg) !important;
}
/* Conserver les vrais ronds et les cas spéciaux */
html.radius-round .settings-toggle-track,
html.radius-round .settings-toggle-thumb,
html.radius-round .evolution-dot,
html.radius-round .terminal-dot,
html.radius-round .previous-card-dots span,
html.radius-round .code-dot,
html.radius-round .fav-btn { border-radius: 50% !important; }
html.radius-round .settings-modal  { border-radius: 40px !important; }
html.radius-round header,
html.radius-round nav               { border-radius: var(--radius-xl) !important; }


/* ==================== INTERACTIONS ==================== */
html.no-transitions .page-transition { display: none !important; }

html.no-hover-zoom .gallery-item:hover .lazy-img { transform: none !important; }
html.no-hover-zoom .gallery-item:hover { transform: translateY(-10px) !important; }

html.parallax-on .gallery-item {
    transition: transform 0.15s ease, box-shadow 0.4s ease;
}

html.no-scroll-reveal .gallery-item,
html.no-scroll-reveal .portfolio-item,
html.no-scroll-reveal .timeline-item,
html.no-scroll-reveal .vision-item,
html.no-scroll-reveal .influence-item {
    opacity: 1 !important;
    transform: none !important;
}

html.no-shrink-header .header-wrapper.shrink {
    width: calc(100% - 40px) !important;
}


/* ==================== NOTIFICATIONS ==================== */
.gallery-item[data-new="true"]::before {
    content: 'Nouveau';
    position: absolute;
    top: 14px;
    left: 14px;
    background: #00c853;
    color: #fff;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 20px;
    z-index: 10;
    box-shadow: 0 2px 8px rgba(0,200,83,0.4);
}

html.no-new-badge .gallery-item[data-new="true"]::before { display: none; }

.welcome-toast {
    position: fixed;
    bottom: 28px;
    right: 28px;
    background: var(--bg-cream-glass-98);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 14px 20px;
    box-shadow: var(--shadow-xl);
    z-index: 9000;
    max-width: 280px;
    opacity: 0;
    transform: translateY(16px);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    pointer-events: none;
}

.welcome-toast.show { opacity: 1; transform: translateY(0); pointer-events: auto; }

.welcome-toast-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 16px;
    color: var(--primary);
    display: block;
    margin-bottom: 4px;
}

.welcome-toast-body  { font-size: 12px; color: var(--gray); line-height: 1.5; }

.welcome-toast-close {
    position: absolute;
    top: 8px;
    right: 10px;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 14px;
    color: var(--gray);
    padding: 2px;
}


/* ==================== RACCOURCIS ==================== */
.shortcuts-grid { display: flex; flex-direction: column; gap: 2px; }

.shortcut-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 10px 14px;
    border-radius: 10px;
    transition: background 0.2s;
}

.shortcut-item:hover { background: var(--light-gray); }
.shortcut-item--secret { opacity: 0.45; }
.shortcut-item--secret:hover { opacity: 1; }

.shortcut-keys { display: flex; gap: 4px; flex-shrink: 0; min-width: 120px; flex-wrap: wrap; }

kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 26px;
    padding: 0 7px;
    background: var(--white);
    border: 1px solid var(--border);
    border-bottom: 2px solid var(--border);
    border-radius: 6px;
    font-family: 'Montserrat', sans-serif;
    font-size: 10px;
    font-weight: 600;
    color: var(--dark);
    letter-spacing: 0.5px;
    box-shadow: var(--shadow-sm);
}

.shortcut-desc { font-size: 12px; color: var(--gray); flex: 1; }


/* ==================== STATISTIQUES ==================== */
.stats-dashboard { display: flex; flex-direction: column; gap: 12px; margin-bottom: 8px; }

.stats-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.stats-card {
    background: var(--light-gray);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 14px 12px;
    text-align: center;
    transition: all 0.2s;
}

.stats-card:hover { border-color: var(--primary); transform: translateY(-2px); }

.stats-card-value {
    font-family: 'Cormorant Garamond', serif;
    font-size: 28px;
    font-weight: 400;
    color: var(--primary);
    display: block;
    line-height: 1.1;
}

.stats-card-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--gray);
    margin-top: 4px;
    display: block;
}

.stats-section-title {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--gray);
    font-weight: 500;
    margin-bottom: 6px;
    opacity: 0.7;
}

.stats-category-bars { display: flex; flex-direction: column; gap: 8px; }

.stats-bar-row { display: flex; align-items: center; gap: 10px; }
.stats-bar-label { font-size: 11px; color: var(--gray); width: 80px; flex-shrink: 0; }

.stats-bar-track {
    flex: 1;
    height: 6px;
    background: var(--light-gray);
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid var(--border);
}

.stats-bar-fill {
    height: 100%;
    background: var(--primary);
    border-radius: 6px;
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.stats-bar-count { font-size: 10px; color: var(--gray); width: 24px; text-align: right; flex-shrink: 0; }

.stats-recent {
    background: var(--light-gray);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 12px 14px;
}

.stats-recent-list { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }

.stats-recent-item {
    font-size: 11px;
    color: var(--gray);
    padding: 4px 0;
    border-bottom: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
}

.stats-recent-item:last-child { border-bottom: none; }

.stats-empty {
    text-align: center;
    padding: 24px;
    color: var(--gray);
    font-size: 13px;
    font-style: italic;
}


/* ==================== IMPRESSION ==================== */
.print-actions {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.settings-print-btn {
    width: 100%;
    padding: 14px 24px;
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: 12px;
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: var(--shadow-primary);
}

.settings-print-btn:hover {
    background: var(--primary-light);
    transform: translateY(-2px);
    box-shadow: var(--shadow-primary-hover);
}

.print-hint { font-size: 11px; color: var(--gray); text-align: center; line-height: 1.5; }

@media print {
    .print-hide-nav .header-wrapper,
    .print-hide-nav nav,
    .print-hide-nav .filters { display: none !important; }

    .print-hide-footer footer { display: none !important; }

    .print-show-titles .gallery-item::after {
        content: attr(data-title);
        display: block;
        text-align: center;
        font-size: 11px;
        color: #333;
        padding: 4px 0 8px;
        font-family: 'Montserrat', sans-serif;
    }

    .print-cols-1 .gallery { grid-template-columns: 1fr !important; }
    .print-cols-2 .gallery { grid-template-columns: repeat(2, 1fr) !important; }
    .print-cols-3 .gallery { grid-template-columns: repeat(3, 1fr) !important; }

    .gallery-item { break-inside: avoid; }

    .settings-overlay,
    .lightbox,
    .modal-container { display: none !important; }
}


/* ==================== PARAMÈTRES MOBILE ==================== */
@media (max-width: 768px) {

    .settings-mobile-btn {
        display: flex;
        align-items: center;
        gap: 10px;
        background: none;
        border: none;
        cursor: pointer;
        padding: 14px 0;
        border-bottom: 1px solid var(--border);
        border-radius: 0;
        width: 100%;
        color: var(--dark);
        font-family: 'Montserrat', sans-serif;
        font-size: 16px;
        letter-spacing: 1px;
    }

    .settings-mobile-btn::before { content: '⚙'; font-size: 18px; }

    .settings-btn { display: none; }

    .settings-overlay {
        padding: 0 !important;
        align-items: flex-end !important;
        justify-content: center !important;
    }

    .settings-modal {
        position: relative !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: 88vh !important;
        height: 88dvh !important;
        max-height: 88dvh !important;
        border-radius: 20px 20px 0 0 !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
        animation: settingsMobileIn 0.36s cubic-bezier(0.32, 0.72, 0, 1) !important;
    }

    @keyframes settingsMobileIn {
        from { transform: translateY(100%); }
        to   { transform: translateY(0); }
    }

    .settings-modal::before {
        content: '' !important;
        display: block !important;
        width: 36px !important;
        height: 4px !important;
        background: rgba(120, 120, 120, 0.35) !important;
        border-radius: 4px !important;
        margin: 10px auto 0 !important;
        flex-shrink: 0 !important;
    }

    .settings-sidebar {
        width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        flex-shrink: 0 !important;
        align-items: center !important;
        overflow-x: auto !important;
        overflow-y: visible !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        padding: 8px 48px 10px 10px !important;
        gap: 6px !important;
        border-right: none !important;
        border-bottom: 1px solid var(--border) !important;
        position: relative !important;
        right: 55px;
    }

    .settings-sidebar::-webkit-scrollbar { display: none !important; }
    .settings-sidebar-title,
    .settings-separator { display: none !important; }

    .settings-close {
        position: fixed !important;
        top: calc(12dvh + 10px) !important;
        right: 12px !important;
        bottom: auto !important;
        z-index: 10002 !important;
    }

    .settings-tab {
        white-space: nowrap !important;
        flex-shrink: 0 !important;
        width: auto !important;
        margin: 0 !important;
        padding: 7px 14px !important;
        font-size: 12px !important;
        border-radius: 20px !important;
        min-height: 34px !important;
        border: 1.5px solid transparent !important;
        line-height: 1 !important;
    }

    .settings-tab.active {
        border-color: var(--primary) !important;
        background: var(--bg-primary-light) !important;
        color: var(--primary) !important;
    }

    .settings-tab-icon { display: none !important; }
    .settings-tab--terminal { display: none !important; }
    .settings-tab--terminal.unlocked { display: flex !important; color: #00c853 !important; }

    .settings-content {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        width: 100% !important;
        display: block !important;
        background: var(--bg-cream-glass-98) !important;
    }

    .settings-panel {
        display: none !important;
        padding: 20px 18px 40px !important;
    }

    .settings-panel.active { display: block !important; }

    .settings-panel-title {
        font-family: 'Cormorant Garamond', serif !important;
        font-size: 22px !important;
        font-weight: 300 !important;
        letter-spacing: 2px !important;
        color: var(--primary) !important;
        display: block !important;
        margin-bottom: 4px !important;
        padding-right: 0 !important;
    }

    .settings-panel-subtitle {
        font-size: 12px !important;
        color: var(--gray) !important;
        display: block !important;
        margin-bottom: 16px !important;
        margin-top: 2px !important;
        opacity: 0.8 !important;
    }

    .settings-row {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 12px 0 !important;
        border-bottom: 1px solid var(--border) !important;
        gap: 12px !important;
        box-sizing: border-box !important;
        width: 100% !important;
    }

    .settings-row:last-child { border-bottom: none !important; }

    .settings-row:has(.settings-radio-group) {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px !important;
    }

    .settings-row-info  { flex: 1 !important; min-width: 0 !important; display: flex !important; flex-direction: column !important; gap: 3px !important; }
    .settings-row-label { font-size: 13px !important; }
    .settings-row-desc  { font-size: 11px !important; line-height: 1.4 !important; }

    .settings-radio-group { flex-wrap: nowrap !important; gap: 0 !important; width: 100% !important; display: flex !important; overflow-x: auto !important; }
    .settings-radio-btn   { padding: 8px 12px !important; font-size: 12px !important; min-height: 36px !important; border-radius: 9px !important; flex-shrink: 0 !important; }

    .settings-toggle-track { width: 48px !important; height: 26px !important; border-radius: 26px !important; flex-shrink: 0 !important; }
    .settings-toggle-thumb { width: 20px !important; height: 20px !important; top: 3px !important; left: 3px !important; }
    .settings-toggle input:checked + .settings-toggle-track .settings-toggle-thumb { transform: translateX(22px) !important; }

    .settings-reset-btn  { padding: 10px 14px !important; font-size: 12px !important; min-height: 38px !important; }
    .settings-print-btn  { padding: 16px !important; font-size: 14px !important; min-height: 52px !important; }

    .settings-about-logo    { font-size: 34px !important; }
    .settings-about-version { font-size: 11px !important; }
    .settings-about-link    { padding: 12px 14px !important; font-size: 13px !important; min-height: 46px !important; }

    .shortcut-item  { flex-direction: column !important; align-items: flex-start !important; gap: 5px !important; padding: 10px 4px !important; }
    .shortcut-keys  { min-width: unset !important; }
    .shortcut-desc  { font-size: 11px !important; }

    .stats-cards     { grid-template-columns: repeat(3, 1fr) !important; gap: 8px !important; }
    .stats-card      { padding: 10px 8px !important; }
    .stats-card-value { font-size: 22px !important; }
    .stats-card-label { font-size: 9px !important; }
    .stats-bar-label  { width: 56px !important; font-size: 10px !important; }

    .stored-data-item  { flex-direction: column !important; align-items: flex-start !important; gap: 4px !important; }
    .stored-data-value { align-self: flex-end !important; }

    #panel-terminal   { border-radius: 0 !important; }
    .terminal-body    { min-height: 140px !important; max-height: calc(88dvh - 260px) !important; }
    .terminal-line    { font-size: 11px !important; }
    .terminal-input-row { padding: 8px 12px 12px !important; }
    .terminal-prompt  { font-size: 11px !important; }
    .terminal-input   { font-size: 12px !important; }

    .favorites-grid { grid-template-columns: 1fr !important; }

    .share-buttons { flex-direction: column !important; }
    .share-btn     { width: 100% !important; justify-content: center !important; }
}

@media (max-width: 380px) {
    .settings-modal { height: 93dvh !important; }
    .settings-close { top: calc(7dvh + 10px) !important; }
    .settings-tab   { padding: 7px 11px !important; font-size: 11px !important; }
    .stats-cards    { grid-template-columns: repeat(2, 1fr) !important; }
    .settings-radio-btn { padding: 8px 10px !important; font-size: 11px !important; }
}


/* ==================== FAVORIS ==================== */
.fav-btn {
    position: absolute;
    bottom: 14px;
    right: 14px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(8px);
    cursor: pointer;
    font-size: 17px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: scale(0.75);
    transition: opacity 0.25s ease,
                transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
                background 0.2s;
    z-index: 5;
    color: var(--primary);
    box-shadow: 0 2px 8px rgba(0,0,0,0.18);
    line-height: 1;
}

.gallery-item:hover .fav-btn { opacity: 1; transform: scale(1); }
.fav-btn.active              { opacity: 1; transform: scale(1); background: var(--primary); color: #fff; }
.fav-btn:hover               { transform: scale(1.18) !important; }

.lb-favorite-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 10px 18px;
    margin-top: 10px;
    border-radius: 24px;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.05);
    cursor: pointer;
    font-family: 'Montserrat', sans-serif;
    font-size: 11px;
    letter-spacing: 1px;
    color: rgba(255,255,255,0.5);
    transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.lb-favorite-btn:hover  { border-color: rgba(255,255,255,0.22); color: rgba(255,255,255,0.85); background: rgba(255,255,255,0.09); }
.lb-favorite-btn.active { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.2); color: #fff; }
.lb-fav-icon            { font-size: 15px; line-height: 1; }

.lb-share-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 10px 18px;
    margin-top: 8px;
    border-radius: 24px;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.05);
    cursor: pointer;
    font-family: 'Montserrat', sans-serif;
    font-size: 11px;
    letter-spacing: 1px;
    color: rgba(255,255,255,0.5);
    transition: all 0.2s;
}

.lb-share-btn:hover { border-color: rgba(255,255,255,0.22); color: rgba(255,255,255,0.85); background: rgba(255,255,255,0.09); }

.favorites-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-bottom: 8px;
}

.fav-card {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    cursor: pointer;
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    transition: transform 0.2s, box-shadow 0.2s;
}

.fav-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.fav-card img   { width: 100%; height: 100%; object-fit: cover; }

.fav-card-info {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 8px 10px;
    background: linear-gradient(to top, rgba(0,0,0,0.72) 0%, transparent 100%);
}

.fav-card-title { display: block; font-size: 11px; font-weight: 500; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fav-card-cat   { display: block; font-size: 9px; color: rgba(255,255,255,0.7); text-transform: uppercase; letter-spacing: 1px; }

.fav-card-remove {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: none;
    background: rgba(0,0,0,0.5);
    color: #fff;
    font-size: 11px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s, background 0.2s;
}

.fav-card:hover .fav-card-remove { opacity: 1; }
.fav-card-remove:hover            { background: #c00; }

.fav-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 28px 20px;
    color: var(--gray);
    font-size: 13px;
    line-height: 1.8;
    background: var(--light-gray);
    border-radius: 12px;
    border: 1px dashed var(--border);
}

.fav-tab-count {
    background: var(--primary);
    color: #fff;
    font-size: 9px;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 10px;
    margin-left: auto;
    letter-spacing: 0;
    flex-shrink: 0;
}


/* ==================== VITESSE DES ANIMATIONS ==================== */
/* Redéfinit les variables globales → toutes les transitions/animations héritent automatiquement */
html.anim-slow {
    --transition-base: 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 1.4s cubic-bezier(0.4, 0, 0.2, 1);
}
html.anim-slow *, html.anim-slow *::before, html.anim-slow *::after {
    transition-duration: 0.8s !important;
    animation-duration:  0.8s !important;
}
html.anim-slow .preloader-logo         { animation-duration:  3.2s !important; }
html.anim-slow .radio-pill,
html.anim-slow .settings-toggle-thumb  { transition-duration: 0.3s !important; }

html.anim-fast {
    --transition-base: 0.08s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 0.14s cubic-bezier(0.4, 0, 0.2, 1);
}
html.anim-fast *, html.anim-fast *::before, html.anim-fast *::after {
    transition-duration: 0.08s !important;
    animation-duration:  0.08s !important;
}
html.anim-fast .preloader-logo { animation-duration: 0.5s !important; }


/* ==================== PARTAGE ==================== */
.share-section {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border);
}

.share-section:last-of-type { border-bottom: none; padding-bottom: 0; }

.share-section-title {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--gray);
    font-weight: 500;
    opacity: 0.8;
}

.share-buttons { display: flex; gap: 8px; flex-wrap: wrap; }

.share-btn {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 9px 16px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--light-gray);
    cursor: pointer;
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    color: var(--gray);
    text-decoration: none;
    transition: all 0.2s;
    white-space: nowrap;
}

.share-btn:hover         { border-color: var(--primary); color: var(--primary); background: var(--bg-primary-light); transform: translateY(-2px); }
.share-btn--native       { background: var(--primary); color: #fff; border-color: var(--primary); }
.share-btn--native:hover { background: var(--primary-light); color: #fff; border-color: var(--primary-light); }

.share-feedback {
    background: #00c853;
    color: #fff;
    padding: 10px 16px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 500;
    text-align: center;
    animation: fadeIn 0.3s ease;
}


/* ==================== BARRE DE RECHERCHE ==================== */
.search-wrapper {
    flex: 1;
    max-width: 480px;
    width: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.search-bar {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
}

.search-icon {
    position: absolute;
    left: 18px;
    font-size: 15px;
    pointer-events: none;
    opacity: 0.5;
    z-index: 1;
}

.search-input {
    width: 100%;
    padding: 14px 48px 14px 46px;
    border: 1.5px solid var(--border);
    border-radius: 24px;
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 300;
    background: var(--white);
    color: var(--dark);
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-base);
    outline: none;
    appearance: none;
}

.search-input:focus {
    border-color: var(--primary);
    box-shadow: var(--shadow-primary);
    background: var(--cream);
    transform: translateY(-1px);
}

.search-input::placeholder { color: var(--gray); opacity: 0.6; }
.search-input::-webkit-search-cancel-button { display: none; }

.search-clear {
    position: absolute;
    right: 14px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: none;
    background: var(--light-gray);
    cursor: pointer;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gray);
    transition: all 0.2s;
}

.search-clear:hover { background: var(--primary); color: #fff; }

.search-results-count {
    font-size: 12px;
    color: var(--gray);
    letter-spacing: 0.5px;
    text-align: center;
    font-weight: 300;
}


/* ==================== FULLSCREEN LIGHTBOX ==================== */
.lb-fullscreen-btn {
    position: fixed;
    top: 20px;
    right: 70px;
    width: 42px;
    height: 42px;
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 50%;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-base);
    color: rgba(255,255,255,0.65);
    z-index: 2001;
    backdrop-filter: blur(12px);
}

.lb-fullscreen-btn:hover,
.lb-fullscreen-btn.active {
    background: rgba(255,255,255,0.14);
    color: #fff;
    border-color: rgba(255,255,255,0.22);
    transform: scale(1.08);
}

#lb-fullscreen-btn { cursor: pointer; }

/* ── Play (slideshow) btn ── */
.lb-play-btn {
    position: fixed;
    top: 20px;
    right: 120px;
    width: 42px;
    height: 42px;
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-base);
    color: rgba(255,255,255,0.65);
    z-index: 2001;
    backdrop-filter: blur(12px);
}
.lb-play-btn:hover { background: rgba(255,255,255,0.14); color: #fff; border-color: rgba(255,255,255,0.22); transform: scale(1.08); }
.lb-play-btn.playing { background: rgba(255,255,255,0.18); color: #fff; border-color: rgba(255,255,255,0.35); }
.lb-play-btn.playing svg { animation: pausePulse 1.5s ease-in-out infinite; }
@keyframes pausePulse { 0%,100% { opacity: 1; } 50% { opacity: 0.5; } }

/* ── Copy link btn ── */
.lb-copy-btn {
    position: fixed;
    top: 20px;
    right: 170px;
    width: 42px;
    height: 42px;
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-base);
    color: rgba(255,255,255,0.65);
    z-index: 2001;
    backdrop-filter: blur(12px);
    gap: 5px;
    font-size: 11px;
    font-family: 'Montserrat', sans-serif;
    white-space: nowrap;
}
.lb-copy-btn:hover { background: rgba(255,255,255,0.14); color: #fff; border-color: rgba(255,255,255,0.22); transform: scale(1.08); }
.lb-copy-btn.copied { background: rgba(80,200,120,0.25); border-color: rgba(80,200,120,0.4); color: #5dc87a; width: auto; padding: 0 14px; border-radius: 21px; }

/* ── Slideshow progress wave ── */
.lb-slideshow-wave {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 3px;
    z-index: 2001;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}
.lb-slideshow-wave.active { opacity: 1; }
.lb-slideshow-wave span {
    display: block;
    width: 3px;
    height: 4px;
    border-radius: 2px;
    background: rgba(255,255,255,0.7);
}
.lb-slideshow-wave.active span {
    animation: waveBar 1.4s ease-in-out infinite;
}
.lb-slideshow-wave.active span:nth-child(1) { animation-delay: 0s;    animation-duration: 1.1s; }
.lb-slideshow-wave.active span:nth-child(2) { animation-delay: 0.15s; animation-duration: 0.9s; }
.lb-slideshow-wave.active span:nth-child(3) { animation-delay: 0.3s;  animation-duration: 1.3s; }
.lb-slideshow-wave.active span:nth-child(4) { animation-delay: 0.1s;  animation-duration: 1.0s; }
.lb-slideshow-wave.active span:nth-child(5) { animation-delay: 0.22s; animation-duration: 0.85s; }

@keyframes waveBar {
    0%,100% { height: 4px; }
    50%      { height: 18px; }
}

@media (max-width: 768px) {
    /* Regroupe tous les boutons lightbox dans une barre en bas */
    .lightbox-close,
    .lb-fullscreen-btn,
    .lb-play-btn,
    .lb-copy-btn,
    .lb-download-btn {
        position: fixed;
        top: auto;
        bottom: 24px;
        width: 44px;
        height: 44px;
        border-radius: 50%;
    }

    /* Fermer — tout à droite */
    .lightbox-close   { right: 16px;  bottom: 24px; }

    /* Masque fullscreen sur mobile */
    .lb-fullscreen-btn { display: none; }

    /* Les autres de droite à gauche : play, copier, télécharger */
    .lb-play-btn      { right: 70px;  bottom: 24px; }
    .lb-copy-btn      { right: 124px; bottom: 24px; }
    .lb-download-btn  { right: 178px; bottom: 24px; }
}

@media (max-width: 400px) {
    /* Encore plus petit : réduit taille et espacement */
    .lightbox-close,
    .lb-play-btn,
    .lb-copy-btn,
    .lb-download-btn {
        width: 38px;
        height: 38px;
        bottom: 16px;
    }
    .lightbox-close  { right: 12px; }
    .lb-play-btn     { right: 60px; }
    .lb-copy-btn     { right: 108px; }
    .lb-download-btn { right: 156px; }
}

.lightbox:fullscreen { padding: 20px; background: #000; }
.lightbox:fullscreen .lightbox-info { max-height: calc(100vh - 40px); }


/* ==================== IDENTITY SECTION ==================== */
.identity-section {
    padding: 120px 60px;
    max-width: 1400px;
    margin: 0 auto;
}

.identity-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}

.identity-text h2 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 40px;
    font-weight: 300;
    letter-spacing: -1px;
    margin-bottom: 24px;
    margin-top: 8px;
}

.identity-text p {
    color: var(--gray);
    line-height: 1.9;
    font-size: 15px;
    font-weight: 300;
    margin-bottom: 16px;
}

.identity-photo {
    border-radius: 32px;
    overflow: hidden;
    box-shadow: var(--shadow-xl);
    aspect-ratio: 3 / 4;
    transition: transform var(--transition-slow), box-shadow var(--transition-slow);
}

.identity-photo:hover {
    transform: translateY(-8px) scale(1.01);
    box-shadow: 0 24px 64px rgba(0,0,0,0.14);
}

.identity-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow);
}

.identity-photo:hover img { transform: scale(1.06); }

@media (max-width: 1024px) {
    .identity-inner   { grid-template-columns: 1fr; gap: 40px; }
    .identity-section { padding: 80px 30px; }
    .identity-photo   { max-height: 400px; aspect-ratio: 4/3; }
}

@media (max-width: 768px) {
    .identity-section { padding: 60px 20px; }
    .identity-text h2 { font-size: 28px; }
    .identity-photo   { border-radius: 20px; }
}


/* ==================== ANCIENS SITES ==================== */
.previous-sites {
    padding: 120px 60px;
    background: var(--light-gray);
    border-radius: 48px;
    margin: 0 20px;
}

.previous-wrapper { max-width: 1000px; margin: 0 auto; }

.previous-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    margin-bottom: 48px;
}

.previous-card {
    background: var(--white);
    border-radius: 20px;
    border: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.previous-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-xl); }

.previous-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--light-gray);
    border-bottom: 1px solid var(--border);
}

.previous-card-dots { display: flex; gap: 6px; }
.previous-card-dots span { width: 10px; height: 10px; border-radius: 50%; }
.previous-card-dots span:nth-child(1) { background: #ff5f57; }
.previous-card-dots span:nth-child(2) { background: #ffbd2e; }
.previous-card-dots span:nth-child(3) { background: #28c940; }

.previous-card-url {
    font-size: 11px;
    color: var(--gray);
    font-family: 'Courier New', monospace;
    background: var(--white);
    padding: 4px 12px;
    border-radius: 20px;
    border: 1px solid var(--border);
    flex: 1;
    text-align: center;
}

.previous-card-body { padding: 24px; flex: 1; }

.previous-card-version {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--primary);
    font-weight: 600;
    margin-bottom: 8px;
}

.previous-card-body h3 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 24px;
    font-weight: 400;
    color: var(--dark);
    margin-bottom: 12px;
}

.previous-card-body p {
    font-size: 13px;
    color: var(--gray);
    line-height: 1.7;
    margin-bottom: 16px;
}

.previous-card-tags { display: flex; flex-wrap: wrap; gap: 6px; }

.previous-card-tags span {
    background: var(--bg-primary-light);
    color: var(--primary);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 20px;
    border: 1px solid var(--border);
}

.previous-card-footer {
    padding: 14px 24px;
    border-top: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 12px;
}

.previous-card-year {
    font-family: 'Cormorant Garamond', serif;
    font-size: 18px;
    color: var(--primary);
    font-weight: 400;
    flex-shrink: 0;
}

.previous-card-lesson { font-size: 11px; color: var(--gray); font-style: italic; flex: 1; }

.previous-card-btn {
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--primary);
    border: 1px solid var(--primary);
    padding: 5px 12px;
    border-radius: 20px;
    text-decoration: none;
    transition: background var(--transition-base), color var(--transition-base);
}

.previous-card-btn:hover { background: var(--primary); color: #fff; }
.previous-card-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }

.previous-inline-link {
    color: var(--primary);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.previous-inline-link:hover { opacity: 0.75; }

.previous-evolution {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 0 0;
}

.evolution-step { display: flex; flex-direction: column; align-items: center; gap: 8px; }

.evolution-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--border);
    border: 2px solid var(--primary);
    flex-shrink: 0;
    transition: all var(--transition-base);
}

.evolution-step--current .evolution-dot {
    background: var(--primary);
    width: 18px;
    height: 18px;
    box-shadow: 0 0 0 4px rgba(92,0,0,0.15);
}

.evolution-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--gray);
    white-space: nowrap;
}

.evolution-step--current .evolution-label { color: var(--primary); font-weight: 600; }

.evolution-line {
    flex: 1;
    height: 2px;
    background: var(--border);
    margin-bottom: 20px;
    max-width: 120px;
}

@media (max-width: 768px) {
    .previous-grid      { grid-template-columns: 1fr; }
    .previous-sites     { padding: 60px 20px; border-radius: 28px; margin: 0 8px; }
    .evolution-line     { display: none; }
    .previous-evolution { display: grid; grid-template-columns: 1fr; gap: 16px; }
    .previous-card-footer { flex-direction: column; align-items: flex-start; gap: 4px; }
    .previous-card-lesson { text-align: left; }
}


/* ==================== SECTION CODE ==================== */
.code-section { padding: 120px 60px; }
.code-wrapper  { max-width: 900px; margin: 0 auto; }

.code-editor {
    border-radius: 16px;
    overflow: hidden;
    box-shadow: var(--shadow-xl);
    border: 1px solid rgba(255,255,255,0.06);
    background: #1a1a1a;
    font-family: 'Courier New', 'Menlo', monospace;
}

.code-editor-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 20px;
    background: #111;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    user-select: none;
}

.code-editor-dots { display: flex; gap: 7px; flex-shrink: 0; }

.code-dot           { width: 12px; height: 12px; border-radius: 50%; }
.code-dot--red      { background: #ff5f57; }
.code-dot--yellow   { background: #ffbd2e; }
.code-dot--green    { background: #28c940; }

.code-tabs { display: flex; gap: 2px; }

.code-tab {
    padding: 6px 16px;
    border-radius: 8px 8px 0 0;
    border: none;
    background: rgba(255,255,255,0.05);
    color: rgba(255,255,255,0.4);
    font-family: 'Montserrat', sans-serif;
    font-size: 11px;
    cursor: pointer;
    transition: all 0.2s;
    letter-spacing: 0.5px;
}

.code-tab:hover  { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.7); }
.code-tab.active { background: #1a1a1a; color: #e0e0e0; }

.code-editor-title {
    font-size: 11px;
    color: rgba(255,255,255,0.25);
    margin-left: auto;
    letter-spacing: 0.5px;
}

.code-body {
    padding: 24px 28px;
    min-height: 280px;
    overflow-x: auto;
}

.code-panel {
    display: none;
    margin: 0;
    padding: 0;
    font-size: 13px;
    line-height: 1.8;
    color: #e0e0e0;
    white-space: pre;
    overflow-x: auto;
}

.code-panel.active { display: block; }

.code-comment  { color: #546e7a; font-style: italic; }
.code-tag      { color: #80cbc4; }
.code-attr     { color: #82b1ff; }
.code-string   { color: #c3e88d; }
.code-selector { color: #f07178; }
.code-prop     { color: #82b1ff; }
.code-value    { color: #c3e88d; }
.code-keyword  { color: #c792ea; }
.code-fn       { color: #82aaff; }

.code-editor-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 20px;
    background: #111;
    border-top: 1px solid rgba(255,255,255,0.06);
}

.code-lines { font-size: 10px; color: rgba(255,255,255,0.25); letter-spacing: 0.5px; }

.code-lang {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 2px 10px;
    border-radius: 20px;
    background: rgba(128,203,196,0.15);
    color: #80cbc4;
}

.code-note {
    text-align: center;
    font-size: 13px;
    color: var(--gray);
    margin-top: 24px;
    font-style: italic;
    line-height: 1.7;
}

@media (max-width: 768px) {
    .code-section   { padding: 60px 20px; }
    .code-body      { padding: 16px; }
    .code-panel     { font-size: 11px; }
    .evolution-line { max-width: 40px; }
}

@media (max-width: 480px) {
    .code-tab          { padding: 6px 10px; font-size: 10px; }
    .code-editor-title { display: none; }
    .evolution-label   { font-size: 9px; }
}

/* ==================== FOCUS VISIBLE ==================== */
/* Navigation clavier — outline cohérent sur tous les éléments interactifs */
nav a:focus-visible,
.btn-cta:focus-visible,
.social-link:focus-visible,
.portfolio-item:focus-visible,
.previous-card-btn:focus-visible,
.settings-btn:focus-visible,
.menu-toggle:focus-visible,
.open-modal:focus-visible,
.filter-btn:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 3px;
    border-radius: 2px;
}

/* ================================================================
   MODE EXPOSITION
   ================================================================ */

html.exposition body {
    background: #000 !important;
    color: #fff !important;
}
html.exposition .header-wrapper,
html.exposition footer,
html.exposition .preloader,
html.exposition section:not(.portfolio):not(#lightbox),
html.exposition .skip-link,
html.exposition .modal-container {
    display: none !important;
    visibility: hidden !important;
}
html.exposition .portfolio {
    padding-top: 32px;
}
html.exposition .filter-row {
    background: #000;
}
html.exposition .gallery-item .overlay {
    display: none;
}

/* Bouton flottant "Quitter l'exposition" */
#exposition-exit {
    position: fixed;
    bottom: 28px;
    right: 28px;
    z-index: 3000;
    background: rgba(255,255,255,0.08);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.2);
    padding: 10px 20px;
    font-family: 'Montserrat', sans-serif;
    font-size: 11px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    border-radius: 24px;
    cursor: pointer;
    backdrop-filter: blur(12px);
    transition: background 0.2s, border-color 0.2s;
}
#exposition-exit:hover {
    background: rgba(255,255,255,0.16);
    border-color: rgba(255,255,255,0.4);
}


/* ================================================================
   LIGHTBOX — EXIF CARDS
   ================================================================ */

.lb-exif-row {
    display: flex;
    gap: 8px;
    margin: 14px 0 8px;
}

.lb-exif-card {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    padding: 10px 6px;
    text-align: center;
}

.lb-exif-icon {
    font-size: 14px;
    opacity: 0.5;
    line-height: 1;
}

.lb-exif-val {
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    font-weight: 500;
    color: #fff;
    letter-spacing: 0.5px;
}

.lb-exif-label {
    font-size: 9px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.35);
}


/* ================================================================
   LIGHTBOX — VIEWS + DOWNLOAD BUTTON
   ================================================================ */

.lb-views {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    letter-spacing: 0.5px;
    color: rgba(255,255,255,0.35);
    margin-top: 6px;
}

.lb-download-btn {
    position: fixed;
    top: 20px;
    right: 220px;
    width: 42px;
    height: 42px;
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-base);
    color: rgba(255,255,255,0.65);
    z-index: 2001;
    backdrop-filter: blur(12px);
    gap: 5px;
    font-size: 11px;
    font-family: 'Montserrat', sans-serif;
    white-space: nowrap;
}
.lb-download-btn:hover {
    background: rgba(255,255,255,0.15);
    color: #fff;
    transform: scale(1.08);
}
.lb-download-btn:disabled {
    opacity: 0.4;
    cursor: default;
    transform: none;
}

/* Zoom cursor state */
#lightbox-img {
    transition: transform 0.15s ease;
    will-change: transform;
}



/* ================================================================

/* ================================================================
   PAGINATION — VOIR PLUS
   ================================================================ */

.load-more-wrap {
    display: none;
    text-align: center;
    padding: 40px 20px 60px;
}

.load-more-btn {
    background: none;
    border: 1px solid var(--primary);
    color: var(--primary);
    font-family: 'Montserrat', sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    padding: 12px 32px;
    border-radius: 2px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: background .2s, color .2s;
}

.load-more-btn:hover {
    background: var(--primary);
    color: #fff;
}

.load-more-count {
    font-size: 10px;
    opacity: 0.6;
    font-weight: 300;
    letter-spacing: 1px;
}