/* =========================================
   1. IMPORTS TYPOGRAPHIES
   ========================================= */
/* Clarity City */
@font-face { font-family: 'Clarity City'; src: url('../fonts/ClarityCity-Thin.otf') format('opentype'); font-weight: 100; font-style: normal; }
@font-face { font-family: 'Clarity City'; src: url('../fonts/ClarityCity-ThinItalic.otf') format('opentype'); font-weight: 100; font-style: italic; }
@font-face { font-family: 'Clarity City'; src: url('../fonts/ClarityCity-ExtraLight.otf') format('opentype'); font-weight: 200; font-style: normal; }
@font-face { font-family: 'Clarity City'; src: url('../fonts/ClarityCity-ExtraLightItalic.otf') format('opentype'); font-weight: 200; font-style: italic; }
@font-face { font-family: 'Clarity City'; src: url('../fonts/ClarityCity-Light.otf') format('opentype'); font-weight: 300; font-style: normal; }
@font-face { font-family: 'Clarity City'; src: url('../fonts/ClarityCity-LightItalic.otf') format('opentype'); font-weight: 300; font-style: italic; }
@font-face { font-family: 'Clarity City'; src: url('../fonts/ClarityCity-Regular.otf') format('opentype'); font-weight: 400; font-style: normal; }
@font-face { font-family: 'Clarity City'; src: url('../fonts/ClarityCity-RegularItalic.otf') format('opentype'); font-weight: 400; font-style: italic; }
@font-face { font-family: 'Clarity City'; src: url('../fonts/ClarityCity-Medium.otf') format('opentype'); font-weight: 500; font-style: normal; }
@font-face { font-family: 'Clarity City'; src: url('../fonts/ClarityCity-MediumItalic.otf') format('opentype'); font-weight: 500; font-style: italic; }
@font-face { font-family: 'Clarity City'; src: url('../fonts/ClarityCity-SemiBold.otf') format('opentype'); font-weight: 600; font-style: normal; }
@font-face { font-family: 'Clarity City'; src: url('../fonts/ClarityCity-SemiBoldItalic.otf') format('opentype'); font-weight: 600; font-style: italic; }
@font-face { font-family: 'Clarity City'; src: url('../fonts/ClarityCity-Bold.otf') format('opentype'); font-weight: 700; font-style: normal; }
@font-face { font-family: 'Clarity City'; src: url('../fonts/ClarityCity-BoldItalic.otf') format('opentype'); font-weight: 700; font-style: italic; }
@font-face { font-family: 'Clarity City'; src: url('../fonts/ClarityCity-ExtraBold.otf') format('opentype'); font-weight: 800; font-style: normal; }
@font-face { font-family: 'Clarity City'; src: url('../fonts/ClarityCity-ExtraBoldItalic.otf') format('opentype'); font-weight: 800; font-style: italic; }
@font-face { font-family: 'Clarity City'; src: url('../fonts/ClarityCity-Black.otf') format('opentype'); font-weight: 900; font-style: normal; }
@font-face { font-family: 'Clarity City'; src: url('../fonts/ClarityCity-BlackItalic.otf') format('opentype'); font-weight: 900; font-style: italic; }

/* NOUVELLES TYPOS */
@font-face { 
    font-family: 'Luxury'; 
    src: url('../fonts/luxury.otf') format('opentype'); 
    font-weight: normal; 
    font-style: normal; 
}

@font-face { 
    font-family: 'Giomori'; 
    src: url('../fonts/Giomori Italic.otf') format('opentype'); 
    font-weight: normal; 
    font-style: normal; 
}

/* =========================================
   2. LENIS & RESET
   ========================================= */
html.lenis { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

* { margin: 0; padding: 0; box-sizing: border-box; cursor: none !important; }
html { scrollbar-width: none; -ms-overflow-style: none; }
::-webkit-scrollbar { display: none; }
html, body, a, button, input, textarea, .menu-text-item, .anim-appear, .anim-disappear { cursor: none !important; }

body {
    font-family: 'Clarity City', -apple-system, BlinkMacSystemFont, sans-serif;
    background-color: #FFFFFF;
    color: #0E0E0E;
    min-height: 100vh;
    overflow-x: hidden; 
    -webkit-font-smoothing: antialiased; 
    -moz-osx-font-smoothing: grayscale;
    transition: background-color 0.8s cubic-bezier(0.25, 1, 0.5, 1), color 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}
a { text-decoration: none; color: inherit; }

/* =========================================
   3. CURSEUR
   ========================================= */
#custom-cursor {
    position: fixed; top: 0; left: 0; width: 12px; height: 12px;
    background-color: #ffffff; border-radius: 50%; pointer-events: none; z-index: 999999; 
    mix-blend-mode: difference; 
    transform: translate3d(-50%, -50%, 0) scale(1);
    transition: transform 0.2s cubic-bezier(0.19, 1, 0.22, 1);
}
#custom-cursor.cursor-out { transform: translate3d(-50%, -50%, 0) scale(0); }

/* =========================================
   5. HEADER & NAVIGATION
   ========================================= */
#site-header { 
    position: fixed; top: 0; left: 0; width: 100%; height: 120px; padding: 0 5vw; 
    display: flex; justify-content: center; align-items: center; 
    z-index: 200; 
    background: transparent; 
    transition: transform 1.0s, opacity 1s; 
    mix-blend-mode: difference; 
}

.menu-container { cursor: pointer; }

.menu-text-mask { height: 16px; overflow: hidden; position: relative; padding-bottom: 5px; }

.menu-text-rail {
    display: flex; flex-direction: column; align-items: center;
    transition: transform 1.2s cubic-bezier(0.19, 1, 0.22, 1);
}

.menu-text-item {
    font-family: 'Clarity City', sans-serif; font-weight: 500; font-size: 14px; 
    text-transform: uppercase; letter-spacing: 0.05em; color: #ffffff; 
    display: block; height: 16px; line-height: 16px;
}

.menu-active .menu-text-rail { transform: translateY(-16px); }

/* --- HOVER SYSTEM HEADER --- */
.hover-target { position: relative; display: inline-block; }
.hover-target::after {
    content: ''; position: absolute; width: 100%; height: 1px; bottom: 0; left: 0; 
    background-color: currentColor; transform: scaleX(0); transform-origin: right; 
    transition: transform 0.6s cubic-bezier(0.19, 1, 0.22, 1);
}
.hover-trigger:hover .hover-target::after { transform: scaleX(1); transform-origin: left; }

.hidden-header-init { opacity: 0; pointer-events: none; }
.header-scroll-hidden { transform: translateY(-100%); }

/* =========================================
   6. MAIN STRUCTURE & INTRO
   ========================================= */
main { width: 100%; min-height: 100vh; opacity: 0; transition: opacity 1s ease; display: block; padding: 0; }
.screen-intro { height: 100vh; width: 100%; display: flex; justify-content: center; align-items: center; padding: 150px 5vw 0; }
.grid-layout { display: grid; width: 100%; max-width: 1400px; grid-template-columns: repeat(12, 1fr); grid-template-rows: auto 2vh auto; align-items: center; }
.area-kitoka { grid-column: 1 / 8; grid-row: 1; } .area-student { grid-column: 9 / 13; grid-row: 1; text-align: right; align-self: start; padding-top: 10px; }
.area-portfolio { grid-column: 1 / 4; grid-row: 3; align-self: end; padding-bottom: 10px; } .area-joshua { grid-column: 5 / 13; grid-row: 3; text-align: right; display: flex; justify-content: flex-end; }
.title-mask { overflow: hidden; display: block; padding-bottom: 5px; }

h1.big-text { font-family: 'Luxury', serif; font-weight: 500; font-size: 13vw; line-height: 1.1; letter-spacing: 0.02em; text-transform: uppercase; color: #0E0E0E; transition: color 0.8s ease; }
.small-text { font-family: 'Clarity City', sans-serif; font-weight: 500; font-size: 16px; letter-spacing: 0.05em; text-transform: uppercase; color: #0E0E0E; transition: color 0.8s ease; }
.hidden-title { transform: translateY(175%); will-change: transform; }

/* =========================================
   7. SECTIONS CONTENU (AVEC FIX GAP 50PX)
   ========================================= */
.maquette-blocs {
    width: 100%; min-height: 80vh; display: flex; flex-direction: column; 
    margin-top: 0; padding: 0 5vw 50px; box-sizing: border-box; position: relative; 
}

/* --- ANIMATION CONTENT 1 --- */
#content-1 { margin-top: 250px; }
.line-mask { overflow: hidden; display: block; position: relative; padding-bottom: 2px; }
#content-1 .line-mask > * { transform: translateY(110%); transition: transform 1.2s cubic-bezier(0.25, 1, 0.5, 1); display: block; }
#content-1.visible-on-scroll .line-mask > * { transform: translateY(0); }
#content-1.visible-on-scroll .text-wrapper .line-mask > * { transition-delay: 0.2s; }
#content-1.visible-on-scroll .text-wrapper .line-mask:nth-child(2) > * { transition-delay: 0.3s; }

#content-2 { margin-top: 200px; }

/* --- ZONES --- */
.zone-header { display: flex; width: 100%; align-items: baseline; }
.zone-blue-marine { width: 60px; text-align: left; }
.zone-yellow { flex-grow: 1; text-align: left; padding-left: 20px; }
.zone-green { width: auto; text-align: left; }

.label-header {
    font-family: 'Clarity City', sans-serif; font-size: 13px; font-weight: 500; color: #000000; 
    line-height: 1; text-transform: uppercase; letter-spacing: 0.05em; display: inline-block; transition: color 0.8s ease;
}
a.label-header { cursor: pointer; position: relative; }

.zone-body {
    margin-top: 150px; display: grid; grid-template-columns: 80px 1fr 300px; width: 100%;
}
.zone-protection-left { } .zone-protection-right { }
.zone-grey { display: flex; flex-direction: column; }

/* FIX GAP 50PX ICI */
.text-wrapper { 
    width: 100%; 
    display: flex; flex-direction: column; 
    gap: 50px; /* L'espace clean */
}

.text-paragraphe {
    font-family: 'Luxury', serif; font-weight: 500; font-size: 45px; font-style: normal; color: #0E0E0E; 
    text-align: justify; line-height: 1.1; 
    margin: 0; /* Plus de marge ici */
    width: 100%; max-width: 100%; transition: color 0.8s ease;
}

.col-button { width: 25%; min-width: 180px; flex-shrink: 0; display: flex; justify-content: flex-end; align-items: flex-start; padding-top: 10px; }

/* =========================================
   8. VIDÉO FLOTTANTE
   ========================================= */
.floating-video-wrapper {
    position: absolute; top: 65%; left: 50%; transform: translate(-50%, -50%); 
    z-index: 10; display: flex; justify-content: center; align-items: center; pointer-events: none; 
}

/* Le nouveau format 2940x1660 */
.video-placeholder {
    display: block; /* Devient un bloc car c'est maintenant un lien <a> */
    width: 50vw; /* Plus grand qu'avant pour mettre en valeur le format paysage */
    max-width: 900px; 
    min-width: 280px;
    aspect-ratio: 2940 / 1660; /* TES PROPORTIONS ICI */
    background-color: #ffffff; 
    pointer-events: auto; 
    transition: transform 0.4s ease, opacity 0.4s ease;
    overflow: hidden; /* Coupe ce qui dépasse */
    border-radius: 10px;
}


/* La vidéo à l'intérieur */
.video-placeholder video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none; /* Le clic est géré par la balise <a> parente */
}

/* =========================================
   9. SECTION 3
   ========================================= */
#content-3 { margin-top: 250px; justify-content: center; align-items: center; position: relative; padding-top: 100px; padding-bottom: 50px; }

/* TRAIT SIGNATURE UNIFIÉ (1px) */
#content-3::before {
    content: ''; position: absolute; top: 0; width: 100vw; height: 1px; background-color: #0E0E0E; 
    left: 50%; transform: translateX(-50%); transition: background-color 0.8s ease;
}
.center-content-wrapper { display: flex; flex-direction: column; align-items: center; text-align: center; width: 100%; max-width: 1200px; }
.josh-signature { width: 200px; height: auto; margin-bottom: 60px; transition: filter 0.8s ease; }
.text-statement { font-family: 'Luxury', serif; font-weight: 400; font-size: 24px; line-height: 1.1; color: #0E0E0E; text-transform: uppercase; transition: color 0.8s ease; }
.text-italic { font-family: 'Giomori', serif; font-style: normal; text-transform: lowercase; }

.zone-footer {
    position: absolute; bottom: 0; left: 5vw; right: 5vw; display: flex; justify-content: space-between; align-items: flex-end; padding-bottom: 20px;
}

/* =========================================
   10. ANIMATIONS
   ========================================= */
.anim-appear { position: relative; display: inline-block; text-decoration: none; }
.anim-appear::after { content: ''; position: absolute; width: 100%; height: 1px; bottom: 0; left: 0; background-color: currentColor; transform: scaleX(0); transform-origin: right; transition: transform 0.8s cubic-bezier(0.19, 1, 0.22, 1); }
.anim-appear:hover::after { transform: scaleX(1); transform-origin: left; }
.anim-disappear { position: relative; display: inline-block; text-decoration: none; }
.anim-disappear::after { content: ''; position: absolute; width: 100%; height: 1px; bottom: 0; left: 0; background-color: currentColor; transform: scaleX(1); transform-origin: left; transition: transform 0.8s cubic-bezier(0.19, 1, 0.22, 1); }
.anim-disappear:hover::after { transform: scaleX(0); transform-origin: right; }

/* =========================================
   11. MEDIA QUERIES
   ========================================= */
@media (max-width: 1400px) { .text-paragraphe, .text-statement { font-size: 38px; margin-bottom: 20px; } }
@media (max-width: 1024px) {
    .maquette-blocs { padding: 0 5vw 50px; }
    .zone-body { grid-template-columns: 20px 1fr 20px; }
    .video-placeholder { width: 60vw; height: 80vw; }
    #content-1 { margin-top: 150px; } #content-2 { margin-top: 150px; } #content-3 { margin-top: 100px; }
    .floating-video-wrapper { top: 55%; }
}

/* =========================================
   12. DARK MODE
   ========================================= */
body.dark-mode { background-color: #0E0E0E; color: #FFFFFF; }
body.dark-mode h1.big-text,
body.dark-mode .small-text,
body.dark-mode .label-header,
body.dark-mode .text-paragraphe,
body.dark-mode .text-statement,
body.dark-mode .menu-text-item { color: #FFFFFF !important; }
body.dark-mode .video-placeholder { background-color: #FFFFFF; }
body.dark-mode #content-3::before { background-color: #FFFFFF; }
body.dark-mode .josh-signature { filter: invert(1); }

/* =========================================
   13. MENU OVERLAY
   ========================================= */
#menu-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100vh; 
    background-color: #0E0E0E;
    z-index: 150; 
    transform: translateY(100%);
    transition: transform 2.0s cubic-bezier(0.19, 1, 0.22, 1);
    display: flex; flex-direction: column; justify-content: center; align-items: center;
}

#menu-overlay.menu-open { transform: translateY(0); }
#menu-overlay.menu-exit { transform: translateY(-100%); }

/* =========================================
   14. CONTENU MENU (SPOTLIGHT FLUIDE)
   ========================================= */
.menu-main-nav {
    display: flex; flex-direction: column; width: 100%; max-width: 1400px; padding: 0 5vw;
}

/* Ligne Menu */
.menu-row {
    display: flex; justify-content: space-between; align-items: flex-start; padding: 30px 0; width: 100%;
    text-decoration: none;
    opacity: 1;
    transition: opacity 0.6s cubic-bezier(0.25, 1, 0.5, 1);
    backface-visibility: hidden; 
}

/* Spotlight Effect */
.menu-main-nav:hover .menu-row { opacity: 0.3; }
.menu-main-nav .menu-row:hover { opacity: 1 !important; }

.menu-num-col { width: 50px; }
.menu-link-col { flex-grow: 1; display: flex; justify-content: flex-end; }

.mask-wrapper { overflow: hidden; display: block; position: relative; padding-bottom: 2px; }

.menu-num {
    font-family: 'Clarity City', sans-serif; font-size: 16px; color: #ffffff; font-weight: 500;
    display: block; transform: translateY(110%);
}

.menu-link {
    font-family: 'Luxury', serif; font-size: 8vw; line-height: 0.9; color: #ffffff; 
    text-transform: uppercase; display: block; transform: translateY(110%);
}

/* Lignes Séparatrices (Unifiées à 1px) */
.menu-line {
    width: 100%; height: 1px;
    background-color: rgba(255, 255, 255, 0.4);
    transform: scaleX(0); transform-origin: left;
}

/* Footer Menu */
.overlay-footer {
    position: absolute; bottom: 5vh; left: 5vw; right: 5vw; 
    display: flex; justify-content: space-between; align-items: flex-end;
}
.white-text { color: #ffffff !important; }
.fade-in-up { opacity: 0; transform: translateY(30px); }

/* --- ANIMATIONS OUVERTURE --- */
#menu-overlay.menu-open .menu-num,
#menu-overlay.menu-open .menu-link {
    transition: transform 1.2s cubic-bezier(0.25, 1, 0.5, 1);
    transform: translateY(0);
}

#menu-overlay.menu-open .menu-line {
    transition: transform 1.5s cubic-bezier(0.19, 1, 0.22, 1);
    transform: scaleX(1);
}

#menu-overlay.menu-open .fade-in-up {
    transition: all 1.0s cubic-bezier(0.25, 1, 0.5, 1);
    opacity: 1; transform: translateY(0);
}

/* Délais Séquentiels */
#menu-overlay.menu-open .menu-row:nth-child(1) .reveal-text { transition-delay: 1.0s; }
#menu-overlay.menu-open .menu-row:nth-child(3) .reveal-text { transition-delay: 1.1s; }
#menu-overlay.menu-open .menu-row:nth-child(5) .reveal-text { transition-delay: 1.2s; }

#menu-overlay.menu-open .menu-line:nth-of-type(1) { transition-delay: 1.2s; }
#menu-overlay.menu-open .menu-line:nth-of-type(2) { transition-delay: 1.4s; }

#menu-overlay.menu-open .fade-in-up { transition-delay: 1.4s; }

/* --- ETAT FERMETURE (FIGÉ & SLIDE HAUT) --- */
#menu-overlay.menu-exit .menu-num,
#menu-overlay.menu-exit .menu-link,
#menu-overlay.menu-exit .fade-in-up,
#menu-overlay.menu-exit .menu-line {
    transform: translateY(0) !important;
    opacity: 1 !important;
    transition: none !important;
    transform: scaleX(1) !important;
}
/* =========================================
   PAGE PROJETS (MODIFICATEURS)
   ========================================= */

.page-projet {
    opacity: 0;
    animation: fadeInPage 1s ease forwards;
}

@keyframes fadeInPage { 
    to { opacity: 1; } 
}

.projet-spacer {
    height: 35vh; 
    width: 100%;
    display: block;
}

.section-projet {
    margin-top: 0 !important;
    margin-bottom: 200px; /* Ajoute un bel espace en bas de chaque projet */
}
/* L'écart à 20px et modification de la grille pour supprimer la marge droite */
.body-projet {
    margin-top: 20px !important; 
    grid-template-columns: 80px 1fr !important; 
}

/* --- STRUCTURE DES BLOCS D'IMAGES --- */
.project-teasers {
    display: flex;
    gap: 30px; /* L'écart entre les deux blocs noirs */
    width: 100%;
    height: 65vh; /* Hauteur des blocs, modifie si tu les veux plus ou moins hauts */
}

/* Le bloc de gauche (horizontal/paysage) */
.teaser-landscape {
    flex: 2; 
    background-color: #0E0E0E;
    background-size: cover;          /* L'image remplit tout le bloc sans se déformer */
    background-position: center;     /* L'image est centrée */
    background-repeat: no-repeat;    /* L'image ne se répète pas */
}

/* Le bloc de droite (vertical/portrait) */
.teaser-portrait {
    flex: 1; 
    background-color: #0E0E0E;
    background-size: cover;          /* Pareil ici */
    background-position: center;
    background-repeat: no-repeat;
}

/* --- CORRECTION DU FOOTER --- */
.footer-projet {
    margin-top: 50px !important; /* Réduit l'énorme espace naturel du footer */
    padding-top: 50px !important;
}

/* =========================================
   PAGE JOSHUA - ALIGNEMENTS & TYPO UNIFIÉE
   ========================================= */

.joshua-section {
    width: 100%;
    padding: 80px 5vw; 
}

/* Espacement haut/bas drastiquement augmenté pour faire respirer le bloc */
.joshua-services-padding {
    padding: 180px 5vw; 
}

/* --- BLOC 1 (Me Concernant) --- */
.joshua-container {
    max-width: 1400px; 
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr; 
    gap: 10vw; 
}

.joshua-align-center {
    align-items: center; 
}

/* --- BLOC 2 (Mes Services) : Le Super-Bloc centré --- */
.joshua-services-wrapper {
    max-width: 1300px; 
    margin: 0 auto;
}

.joshua-services-grid {
    display: grid;
    /* On réduit la largeur accordée au texte (1.1fr) pour le forcer à revenir à la ligne */
    grid-template-columns: 1.1fr 1fr; 
    /* On augmente énormément l'écart entre le texte et les listes */
    gap: 12vw;
    align-items: start; 
}

.joshua-services-lists-container {
    display: flex;
    gap: 4vw; 
}

/* --- LE RECTANGLE NOIR (DEVENU TON IMAGE) --- */
.joshua-black-box {
    width: 100%;
    max-width: 400px; 
    aspect-ratio: 4 / 5; 
    background-color: #0E0E0E; /* Ça sert de couleur de secours pendant le chargement */
    background-size: cover;    /* L'image remplit tout le bloc sans se déformer */
    background-position: center; /* L'image est parfaitement centrée */
    background-repeat: no-repeat;
    margin: 0; 
}

/* --- TYPOGRAPHIE UNIFIÉE --- */
.joshua-text-header span,
.joshua-sub-title,
.joshua-p,
.joshua-ul li {
    font-family: 'Clarity City', sans-serif;
    font-size: 13px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #0E0E0E;
    line-height: 1.8;
}

/* --- REGLAGES SPECIFIQUES --- */
.joshua-text-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 60px;
}

.joshua-sub-title {
    display: block;
    margin-bottom: 60px; 
}

.joshua-p {
    text-align: justify;
    margin-top: 0; 
    margin-bottom: 30px;
}

.joshua-p:last-child {
    margin-bottom: 0;
}

.joshua-ul {
    list-style: none;
    padding: 0;
    margin: 0;
    flex: 1; 
}

.joshua-ul li {
    margin-bottom: 10px; 
    margin-top: 0;
}

/* --- LIGNE DE SÉPARATION PLEIN ÉCRAN --- */
.joshua-full-line {
    width: 100vw;
    height: 1px;
    background-color: #0E0E0E;
    margin: 50px 0; 
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

/* --- RESPONSIVE MOBILE --- */
@media (max-width: 900px) {
    .joshua-container,
    .joshua-services-grid {
        grid-template-columns: 1fr; 
        gap: 60px;
    }
    .joshua-services-lists-container {
        flex-direction: column; 
        gap: 18px;
    }
}

/* Réduit l'espace uniquement sur la page Joshua */
.page-joshua .projet-spacer {
    height: 10vh; /* Ajuste cette valeur comme tu veux */
}

/* =========================================
   PAGE CONTACT - DESIGN ÉPURÉ ET CENTRÉ
   ========================================= */

.page-contact {
    opacity: 0;
    animation: fadeInPage 1s ease forwards;
}

/* On pousse le contenu vers le bas pour l'éloigner du header */
.contact-section {
    width: 100%;
    min-height: 100vh; 
    display: flex;
    justify-content: center;
    align-items: center; 
    padding: 120px 5vw 0; /* Les 120px ici forcent le décalage sous le menu */
}

.contact-wrapper {
    width: 100%;
    max-width: 600px; /* On passe de 450px à 600px pour étirer le bloc */
    display: flex;
    flex-direction: column;
    align-items: stretch; 
}

.contact-label {
    font-family: 'Clarity City', sans-serif;
    font-size: 13px; 
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #0E0E0E;
    margin-bottom: 35px; /* Égalité d'espacement (haut) */
}

/* L'adresse Email plus petite */
.contact-email {
    font-family: 'Luxury', serif;
    font-size: clamp(28px, 4vw, 48px); /* Taille bien réduite et plus fine */
    line-height: 1;
    color: #0E0E0E;
    text-decoration: none;
    margin-bottom: 35px; /* Égalité d'espacement (bas) */
    transition: opacity 0.4s ease;
    text-align: left;
}

.contact-email:hover {
    opacity: 0.6;
}

/* Textes paragraphes resserrés */
.contact-p {
    font-family: 'Clarity City', sans-serif;
    font-size: 13px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 1.8; 
    text-align: justify; 
    margin-bottom: 25px;
    color: #0E0E0E;
}

.contact-p:last-of-type {
    margin-bottom: 0;
}

/* Le texte bleu avec animation lueur */
.contact-blue {
    color: #3A6CFF;
    animation: softGlow 4s infinite ease-in-out;
}

@keyframes softGlow {
    0% { 
        text-shadow: 0 0 0px rgba(58, 108, 255, 0); 
        opacity: 0.85; 
    }
    50% { 
        text-shadow: 0 0 12px rgba(58, 108, 255, 0.5); 
        opacity: 1; 
    }
    100% { 
        text-shadow: 0 0 0px rgba(58, 108, 255, 0); 
        opacity: 0.85; 
    }
}

/* Les liens CV et Linkedin */
.contact-links {
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin-top: 50px;
}

.contact-link-item {
    font-family: 'Clarity City', sans-serif;
    font-size: 13px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #0E0E0E;
}

/* Ajustement spécifique mobile */
@media (max-width: 650px) {
    .contact-email {
        font-size: 8vw;
    }
}

/* =========================================
   PAGE US VILLEJUIF (USV)
   ========================================= */

.page-usv .projet-spacer {
    height: 30vh;
}

.usv-body-flex {
    margin-top: 80px !important; 
    grid-template-columns: 80px 1fr !important; 
}

/* Intro Text */
.usv-text-luxury {
    font-size: 38px !important; 
    line-height: 1.25;
    text-align: left !important;
    max-width: 100%; 
}

/* Grille des services */
.usv-services-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    margin-top: 45px; 
    width: 100%;
    max-width: 700px;
}

.usv-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.usv-list li {
    font-family: 'Clarity City', sans-serif;
    font-size: 13px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #0E0E0E;
    margin-bottom: 12px;
}

/* =========================================
   PAGE US VILLEJUIF (USV)
   ========================================= */

.page-usv .projet-spacer { height: 30vh; }

.usv-body-flex {
    margin-top: 80px !important; 
    grid-template-columns: 80px 1fr !important; 
}

/* Intro Text */
.usv-text-luxury {
    font-size: 38px !important; 
    line-height: 1.25;
    text-align: left !important;
    max-width: 100%; 
}

.usv-services-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    margin-top: 45px; 
    width: 100%;
    max-width: 700px;
}

.usv-list { list-style: none; padding: 0; margin: 0; }
.usv-list li {
    font-family: 'Clarity City', sans-serif;
    font-size: 13px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #0E0E0E;
    margin-bottom: 12px;
}

/* =========================================
   UTILITAIRE : BORDS ARRONDIS INTERNES
   ========================================= */
.rounded-light {
    border-radius: 12px;
    overflow: hidden;
}

/* =========================================
   SYSTÈME DE GALERIE (ZONES EMPILÉES)
   ========================================= */
.usv-gallery-wrapper {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px; 
    margin-top: 100px; 
    margin-bottom: 100px;
}

/* --- ZONES 1 & 3 : Grilles de 2 carrés --- */
.usv-image-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px; 
    width: 90vw; 
    max-width: 1150px; 
}

.charte-item-square {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    background-color: #0E0E0E;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /* AUCUN ARRONDI ICI */
}

.charte-item-square::after {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-color: #0E0E0E;
    transition: opacity 1.5s cubic-bezier(0.25, 1, 0.5, 1);
    z-index: 2;
}
.usv-image-grid.is-visible .charte-item-square::after {
    opacity: 0;
    pointer-events: none;
}

/* --- ZONE 2 : STORIES INSTAGRAM --- */
.usv-story-container {
    position: relative;
    width: 90vw;
    max-width: 1150px;
    background-color: #0E0E0E; 
    display: grid;
    grid-template-columns: repeat(3, 1fr); 
    gap: 20px;
    padding: 60px 40px; 
    /* AUCUN ARRONDI SUR LE FOND */
}

.story-item {
    width: 100%;
    aspect-ratio: 9 / 16; 
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border: 5px solid #FFFFFF; 
    background-color: #1A1A1A;
    transition: opacity 1.2s ease-in-out; 
}

.usv-story-container::after {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-color: #0E0E0E;
    transition: opacity 1.5s cubic-bezier(0.25, 1, 0.5, 1);
    z-index: 2;
    pointer-events: none;
}
.usv-story-container.is-visible::after { opacity: 0; }

/* --- ZONE 4 : BLOC VIDÉO + CARROUSEL --- */
.usv-complex-grid {
    width: 90vw;
    max-width: 1150px;
    background-color: #0E0E0E; 
    display: grid;
    grid-template-columns: 1fr 1fr; 
    gap: 20px;
    padding: 60px 40px;
    position: relative;
    /* AUCUN ARRONDI SUR LE FOND */
}

.usv-complex-grid::after {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-color: #0E0E0E;
    transition: opacity 1.5s cubic-bezier(0.25, 1, 0.5, 1);
    z-index: 5;
    pointer-events: none;
}
.usv-complex-grid.is-visible::after { opacity: 0; }

.complex-left, .complex-right {
    display: flex;
    justify-content: center;
    align-items: center;
}

.video-container {
    width: 100%;
    max-width: 320px; 
    aspect-ratio: 9 / 16; 
    background-color: #1A1A1A;
}
.video-container video {
    width: 100%; height: 100%;
    object-fit: cover; 
    pointer-events: none; 
    outline: none;
}

.carousel-crossfade-item {
    width: 100%;
    max-width: 400px; 
    aspect-ratio: 4 / 5; 
    border: 5px solid #FFFFFF; 
    background-color: #1A1A1A;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: opacity 1.2s ease-in-out; 
}

/* --- ZONE 6 : RIDEAUX + VIDÉO GÉNÉRATEUR --- */
.usv-generator-zone {
    position: relative;
    width: 90vw;
    max-width: 1150px;
    min-height: 80vh; 
    background-image: url('../images/usv/rideaux.png');
    background-size: cover;
    background-position: center;
    display: flex;
    justify-content: center;
    align-items: center;
    /* AUCUN ARRONDI SUR LE FOND */
}

.usv-generator-zone::after {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-color: #0E0E0E;
    transition: opacity 1.5s cubic-bezier(0.25, 1, 0.5, 1);
    z-index: 2;
    pointer-events: none;
}
.usv-generator-zone.is-visible::after { opacity: 0; }

/* Le rectangle central blanc */
.generator-ui-box {
    width: 90%; 
    max-width: 650px; 
    aspect-ratio: 2940 / 1530; 
    background-color: #FFFFFF;
    position: relative;
    z-index: 3;
}

/* La vidéo */
.generator-ui-box video {
    width: 100%;
    height: 100%;
    object-fit: cover; 
    pointer-events: none; 
    outline: none;
}

/* =========================================
   CONTENT 2 : TEXTE MA MISSION
   ========================================= */
.usv-mission-section {
    margin-top: 50px; /* Espace après les rideaux */
    margin-bottom: 150px;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1.2s cubic-bezier(0.25, 1, 0.5, 1), 
                transform 1.2s cubic-bezier(0.25, 1, 0.5, 1);
}

.usv-mission-section.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.usv-small-title {
    font-family: 'Clarity City', sans-serif;
    font-size: 13px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #0E0E0E;
    margin-bottom: 40px; 
}

/* =========================================
   ZONE 7 : VIDÉOS SUPERPOSÉES
   ========================================= */
.usv-zone7-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-bottom: 15px; /* LA CORRECTION EST ICI : 15px au lieu de 150px pour coller à la Zone 8 */
}

/* Le fond gris sombre (Angles droits) */
.usv-stacked-container {
    position: relative;
    width: 90vw;
    max-width: 1150px;
    background-color: #0E0E0E;
    display: flex;
    flex-direction: column;
    gap: 40px; 
    padding: 80px 60px; 
}

/* Le rideau d'apparition */
.usv-stacked-container::after {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-color: #0E0E0E;
    transition: opacity 1.5s cubic-bezier(0.25, 1, 0.5, 1);
    z-index: 2;
    pointer-events: none;
}
.usv-zone7-wrapper.is-visible .usv-stacked-container::after {
    opacity: 0;
}

/* Les conteneurs de vidéos ultra-larges */
.stacked-video-box {
    width: 100%;
    aspect-ratio: 3400 / 900; 
    background-color: #1A1A1A;
    position: relative;
    z-index: 3;
}

/* Les vidéos en boucle */
.stacked-video-box video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none; 
    outline: none;
}

/* --- Responsive Zone 7 --- */
@media (max-width: 900px) {
    .usv-stacked-container {
        padding: 40px 20px;
        gap: 20px;
    }
}

/* =========================================
   ZONE 8 : VIDÉOS FORMAT TÉLÉPHONE (9:16)
   ========================================= */
.usv-zone8-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-bottom: 15px; /* Bel espace de fin de page avant le visuel panoramic final */
}

/* Conteneur gris sombre (Angles droits) */
.usv-phone-container {
    position: relative;
    width: 90vw;
    max-width: 1150px;
    background-color: #0E0E0E;
    display: flex;
    justify-content: center;
    gap: 80px; 
    padding: 80px 40px;
}

/* Rideau d'apparition */
.usv-phone-container::after {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-color: #0E0E0E;
    transition: opacity 1.5s cubic-bezier(0.25, 1, 0.5, 1);
    z-index: 2;
    pointer-events: none;
}
.usv-zone8-wrapper.is-visible .usv-phone-container::after {
    opacity: 0;
}

/* Conteneurs de vidéos (Format Smartphone) */
.phone-video-wrapper {
    width: 100%;
    max-width: 320px; 
    aspect-ratio: 9 / 16;
    background-color: #1A1A1A;
    position: relative;
    z-index: 3;
}

/* Les vidéos en boucle sans contrôle */
.phone-video-wrapper video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
    outline: none;
}

/* --- Responsive Zone 8 --- */
@media (max-width: 900px) {
    .usv-phone-container {
        flex-direction: column; 
        align-items: center;
        gap: 40px;
        padding: 40px 20px;
    }
}

/* =========================================
   ZONE 9 : ULTIME VISUEL (4185x11980)
   ========================================= */
.usv-zone9-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-bottom: 150px; /* Bel espace de fin de page avant le footer */
}

/* Conteneur gris sombre (Angles droits) */
.usv-last-container {
    position: relative;
    width: 90vw;
    max-width: 1150px;
    background-color: #0E0E0E;
    padding: 80px 60px; /* L'espace noir autour de l'image */
    display: flex;
    justify-content: center;
    
    /* BLOCAGE TOTAL DE LA SÉLECTION ICI */
    -webkit-user-select: none; /* Pour Safari */
    -moz-user-select: none;    /* Pour Firefox */
    -ms-user-select: none;     /* Pour Edge */
    user-select: none;         /* Standard */
}

/* Rideau d'apparition */
.usv-last-container::after {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-color: #0E0E0E;
    transition: opacity 1.5s cubic-bezier(0.25, 1, 0.5, 1);
    z-index: 2;
    pointer-events: none;
}
.usv-zone9-wrapper.is-visible .usv-last-container::after {
    opacity: 0;
}

.last-image-box {
    width: 100%;
    max-width: 900px; 
    position: relative;
    z-index: 3;
    
    /* SÉCURITÉ SUPPLÉMENTAIRE ICI */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* L'image gérée nativement pour une netteté absolue et verrouillée */
.last-image-box img {
    width: 100%;
    height: auto;
    display: block;
    image-rendering: high-quality;
    image-rendering: -webkit-optimize-contrast; 
    
    /* LE VERROUILLAGE EST ICI */
    pointer-events: none; /* Bloque le clic et le clic-droit */
    user-select: none; /* Empêche la sélection */
    -webkit-user-drag: none; /* Sécurité supplémentaire pour bloquer le glissement sur certains navigateurs */
}

/* --- Responsive Zone 9 --- */
@media (max-width: 900px) {
    .usv-last-container {
        padding: 40px 20px;
    }
}

/* =========================================
   ZONE 10 : FOOTER SUIVANT (CARAMBAR)
   ========================================= */
.usv-footer-separator {
    width: 100%; /* Prend toute la largeur de l'écran */
    max-width: none; /* Casse la limite de la grille */
    height: 1px;
    background-color: #0E0E0E;
    margin: 50px 0 60px 0; /* Ajuste l'espace au-dessus du bloc Carambar */
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 1.5s cubic-bezier(0.19, 1, 0.22, 1);
}

.usv-footer-separator.is-visible {
    transform: scaleX(1);
}

/* Modificateur pour réduire l'espace sous le footer */
.usv-footer-section {
    margin-bottom: 50px !important; /* Remplace les 200px d'origine */
}

/* =========================================
   PAGE CARAMBAR (ZONES SPÉCIFIQUES)
   ========================================= */

/* --- WRAPPERS COMMUNS (Zones 1, 3, 5) --- */
/* L'espacement de 15px est géré par la galerie parente */
.carambar-garde-wrapper,
.carambar-shop-wrapper,
.carambar-recu-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
    margin: 0 !important; /* On interdit les marges parasites */
}

/* ZONE 1 : GARDE */
.carambar-garde-rect {
    width: 90vw;
    max-width: 1150px;
    aspect-ratio: 2838.38 / 1195;
    background-color: #0E0E0E; 
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* ZONE 3 : SHOP */
.carambar-shop-rect {
    width: 90vw;
    max-width: 1150px;
    /* REMPLACE CES VALEURS PAR LES DIMENSIONS EXACTES DE SHOP.PNG */
    aspect-ratio: 1920 / 1080; 
    background-color: #0E0E0E;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* ZONE 5 : RECU */
.carambar-recu-rect {
    width: 90vw;
    max-width: 1150px;
    /* REMPLACE CES VALEURS PAR LES DIMENSIONS EXACTES DE RECU.PNG */
    aspect-ratio: 1920 / 1080; 
    background-color: #0E0E0E;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* =========================================
   ZONE 6 : PUBS SUR PATTERN (CARAMBAR)
   ========================================= */
.carambar-zone6-wrapper,
.carambar-zone8-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-bottom: 15px; /* Maintient l'espacement de 15px entre les zones */
}

/* Le grand rectangle de fond avec le pattern */
.carambar-pattern-container {
    position: relative;
    width: 90vw;
    max-width: 1150px;
    background-size: cover; 
    background-position: center;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 120px; /* PLUS ESPACÉ (au lieu de 60px) */
    padding: 60px 5vw; /* HAUTEUR RÉDUITE (au lieu de 100px) */
}

/* Les deux rectangles internes (Pubs) */
.pub-box {
    width: 100%;
    max-width: 350px; /* BLOCS RÉDUITS (au lieu de 459px) */
    aspect-ratio: 459 / 612; 
    background-color: #1A1A1A;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    
    /* BORDS ARRONDIS À L'INTÉRIEUR */
    border-radius: 12px; 
    overflow: hidden; /* Assure que l'image ne dépasse pas des bords arrondis */
}

/* --- Responsive Zone 6 --- */
@media (max-width: 900px) {
    .carambar-pattern-container {
        flex-direction: column; 
        padding: 50px 20px;
        gap: 50px;
    }
}

/* =========================================
   ZONES 7 & 10 : DEUX CARRÉS (CARAMBAR)
   ========================================= */
.carambar-zone7-wrapper,
.carambar-zone10-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-bottom: 15px; 
}

/* =========================================
   ZONE 11 : DERNIERS CARRÉS AVANT FOOTER
   ========================================= */
.carambar-zone11-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-bottom: 150px; /* La correction est ici : 150px pour matcher exactement avec USV */
}
/* =========================================
   ZONE 9 : 3 PUBS SUR PATTERN (CARAMBAR)
   ========================================= */
.carambar-zone9-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-bottom: 15px; 
}

/* Le conteneur pattern adapté pour 3 éléments */
.carambar-pattern-container-trio {
    position: relative;
    width: 90vw;
    max-width: 1150px;
    background-size: cover; 
    background-position: center;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px; /* L'espace est réduit pour pouvoir caler les 3 blocs proprement */
    padding: 60px 5vw; 
}

/* Les rectangles internes (Sans ombre) */
.pub-box-flat {
    width: 100%;
    max-width: 280px; /* Légèrement plus petit que les précédents pour que les 3 rentrent */
    aspect-ratio: 459 / 612; 
    background-color: #1A1A1A;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 12px; 
    overflow: hidden; 
    /* ZÉRO BOX-SHADOW ICI */
}

/* --- Responsive Zone 9 --- */
@media (max-width: 900px) {
    .carambar-pattern-container-trio {
        flex-direction: column; 
        padding: 50px 20px;
        gap: 40px;
    }
}
/* =========================================
   PAGE PROJET PERSONNEL (ZONES)
   ========================================= */
/* =========================================
   AJUSTEMENT ESPACEMENT PAGE PERSO
   ========================================= */
.page-perso .usv-gallery-wrapper {
    margin-top: 40px; 
    margin-bottom: 150px; /* LA CORRECTION EST ICI : on aligne l'espace du bas avec USV et Carambar */
}

/* ZONE 1 : VITRY */
.perso-vitry-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
    margin: 0 !important; /* L'espacement est géré par la galerie */
}

.perso-vitry-rect {
    width: 90vw;
    max-width: 1150px;
    
    /* LA PROPORTION EXACTE (Largeur / Hauteur) */
    aspect-ratio: 9859 / 2695; 
    
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /* Zéro arrondi, comme sur les grands rectangles de Carambar */
}

/* =========================================
   ZONES 2 & 3 : T-SHIRTS (PROJET PERSONNEL)
   ========================================= */
.perso-tshirt-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
    margin: 0 !important; /* L'espacement de 15px est géré par la galerie */
}

/* Le grand rectangle noir du fond (Angles droits) */
.perso-tshirt-outer {
    width: 90vw;
    max-width: 1150px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 80px 5vw; /* L'espace entre le bord noir et le rectangle arrondi à l'intérieur */
}

/* Le rectangle gris clair à l'intérieur (Bords arrondis) */
.perso-tshirt-inner {
    width: 100%;
    max-width: 800px; /* Contrôle la largeur du bloc gris central */
    
    /* METS ICI LES PROPORTIONS EXACTES DE TON IMAGE BLANC.PNG */
    aspect-ratio: 16 / 9; 
    
    background-color: #4A4A4A; /* La couleur de fond grise si ton image a un fond transparent */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    
    /* L'ARRONDI EST LÀ */
    border-radius: 24px; 
    overflow: hidden;
}

/* --- Responsive pour les t-shirts --- */
@media (max-width: 900px) {
    .perso-tshirt-outer {
        padding: 40px 20px;
    }
}

/* =========================================
   ZONE 4 : DEUX RECTANGLES PORTRAITS (PERSO)
   ========================================= */
.perso-zone4-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
    margin: 0 !important; /* L'espacement de 15px est géré automatiquement */
}

.perso-item-portrait {
    position: relative;
    width: 100%;
    
    /* PROPORTION TYPE PORTRAIT (3 en largeur, 4 en hauteur) */
    aspect-ratio: 3 / 4; 
    
    background-color: #1A1A1A;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /* Pas d'arrondis pour coller à ta maquette */
}

/* L'animation du rideau noir (identique au reste du site) */
.perso-item-portrait::after {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-color: #0E0E0E;
    transition: opacity 1.5s cubic-bezier(0.25, 1, 0.5, 1);
    z-index: 2;
}
.usv-image-grid.is-visible .perso-item-portrait::after {
    opacity: 0;
    pointer-events: none;
}

/* =========================================
   ZONE 5 : GRAND RECTANGLE (7.PNG)
   ========================================= */
.perso-zone5-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
    margin: 0 !important; /* La galerie gère les 15px */
}

.perso-rect-full {
    width: 90vw;
    max-width: 1150px;
    
    /* REMPLACE PAR LES DIMENSIONS EXACTES DE TON IMAGE 7.PNG */
    aspect-ratio: 16 / 9; 
    
    background-color: #1A1A1A;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* =========================================
   ZONES 4 & 6 : DEUX RECTANGLES PORTRAITS (PERSO)
   ========================================= */
.perso-zone4-wrapper,
.perso-zone6-wrapper,
.perso-zone9-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
    margin: 0 !important; 
}

/* Le format portrait (3:4) est déjà géré ici et s'applique aux deux zones */
.perso-item-portrait {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 4; 
    background-color: #1A1A1A;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.perso-item-portrait::after {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-color: #0E0E0E;
    transition: opacity 1.5s cubic-bezier(0.25, 1, 0.5, 1);
    z-index: 2;
}
.usv-image-grid.is-visible .perso-item-portrait::after {
    opacity: 0;
    pointer-events: none;
}

/* =========================================
   ZONE 10 : CARROUSEL DOUBLE (PERSO)
   ========================================= */
.perso-zone10-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
    margin: 0 !important; /* Espacement géré par la galerie */
}

/* Le grand conteneur gris sombre (Angles droits) */
.perso-slider-container {
    width: 90vw;
    max-width: 1150px;
    background-color: #1A1A1A; 
    padding: 80px 5vw; /* Espace autour des miniatures */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* La grille interne pour les deux miniatures */
.perso-slider-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px; /* L'espace entre les deux images */
    width: 100%;
    max-width: 900px; 
}

/* Les miniatures elles-mêmes (Bords arrondis) */
.perso-slide-box {
    width: 100%;
    aspect-ratio: 16 / 9; /* Format classique YouTube */
    background-color: #0E0E0E;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    
    /* L'ARRONDI COMME SUR TA MAQUETTE */
    border-radius: 20px; 
    
    /* L'animation de fondu */
    transition: opacity 0.8s ease-in-out;
}

/* --- Responsive Zone 10 --- */
@media (max-width: 900px) {
    .perso-slider-container {
        padding: 40px 20px;
    }
    .perso-slider-grid {
        grid-template-columns: 1fr; /* Les images passent l'une sous l'autre sur mobile */
        gap: 20px;
    }
}

/* =========================================
   ZONE 11 : RECTANGLES 1024x1536 (PERSO)
   ========================================= */
.perso-zone11-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
    margin: 0 !important; /* L'espacement de 15px est géré par la grille parente */
}

/* Le nouveau format plus haut (Ratio 2:3) */
.perso-item-tall {
    position: relative;
    width: 100%;
    
    /* LES PROPORTIONS EXACTES DEMANDÉES */
    aspect-ratio: 1024 / 1536; 
    
    background-color: #1A1A1A;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* L'animation du rideau noir */
.perso-item-tall::after {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-color: #0E0E0E;
    transition: opacity 1.5s cubic-bezier(0.25, 1, 0.5, 1);
    z-index: 2;
}
.usv-image-grid.is-visible .perso-item-tall::after {
    opacity: 0;
    pointer-events: none;
}