:root {
    --margin: 10px;
    --img-gap: 10px;
    --almost-black: #7d7d7d;  
    --line-gray: #d1d1d1;
    --project-bg: #ffffff; 
    --footer-gray: #F3F3F3;
    --footer-text-size: 0.8rem;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { overflow-x: hidden; max-width: 100%; }
body { font-family: 'Inter', sans-serif; padding: var(--margin); background: #fff; color: #000; line-height: 1.2; -webkit-font-smoothing: antialiased; overflow-x: hidden; max-width: 100%; }
.main-links a, .footer-block a { overflow-wrap: anywhere; word-break: break-word; }
i { font-style: italic; }

/* ACCUEIL MOBILE */
.brand-name { font-size: 18px; font-weight: 400; color: #000; margin-bottom: 0; }
.intro-bio p { color: #000; font-size: 18px; line-height: 1.4; margin-bottom: 20px; text-indent: 30px; }
.intro-bio p.intro-tag { text-indent: 0; color: var(--almost-black); margin-bottom: 0; }
.intro-bio p:nth-of-type(2) { margin-bottom: 0; }
.main-links { display: flex; flex-direction: column; gap: 6px; margin-bottom: 180px; }
.main-links a { text-decoration: none; color: #000; border-bottom: 1px solid var(--line-gray); width: fit-content; font-size: 18px; }
.grid { display: grid; grid-template-columns: 1fr; gap: 20px; margin-bottom: 100px; }
.card { cursor: pointer; }
.project-square { width: 100%; aspect-ratio: 1/1; background-color: var(--project-bg); display: flex; justify-content: center; align-items: center; overflow: hidden; }
.project-square img { width: 100%; height: 100%; object-fit: cover; }
.meta-row { display: grid; grid-template-columns: 40px 1fr; gap: 0; margin-top: 15px; font-size: 18px; }
.gray-cat { color: var(--almost-black) !important; }
.square-black { width: 100%; height: 100%; background: #2b2b2b; }
.card-p2-home .project-square { aspect-ratio: 3 / 2; background-color: #000; }
.card-p2-home .project-square img { width: 100%; height: 100%; object-fit: contain; object-position: center top; transform: scale(1.3); }
.card-p6-home .project-square { aspect-ratio: 1 / 1.15; }
.card-p7-home .project-square { aspect-ratio: 1 / 1.2; }
.card-p7-home .project-square img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.card-p8-home .project-square { aspect-ratio: 1 / 1.35; }
.card-p8-home .project-square img { object-fit: contain; }
.p6-pair-wrap { display: flex; flex-direction: column; gap: var(--img-gap); }

/* REGLAGES MANUELS MOBILE */
@media (max-width: 1023px) {
    /* effet de survol (tap) sur mobile : les titres restent toujours visibles, seul l'estompage des autres cartes se fait au toucher */
    .grid .project-square { opacity: 1; transition: opacity 0.3s ease; }
    .grid .meta-txt { opacity: 1; }
    .grid:has(.card:hover) .project-square { opacity: 0.4; }
    .grid .card:hover .project-square { opacity: 1 !important; }
    .related-projects .project-square { opacity: 1; transition: opacity 0.3s ease; }
    .related-projects .meta-txt { opacity: 1; }
    .related-projects:has(.card:hover) .project-square { opacity: 0.4; }
    .related-projects .card:hover .project-square { opacity: 1 !important; }

    .card-p3-home .project-square { aspect-ratio: auto; }
    .card-p3-home .project-square img { width: 100%; height: auto; object-fit: contain !important; object-position: center top !important; }
    
    .card-tall-home .project-square { aspect-ratio: 1 / 1.35; }
    
    .p3-adj-1 img, .p3-adj-2 img, .p3-adj-3 img { object-position: 45% center !important; }
    .p3-adj-4 img { object-position: 35% center !important; }
    .p4-mobile-long { aspect-ratio: 2/3 !important; }
    
    /* PROJET 1 MOBILE : RESTAURATION GIF ET TEXTE */
    #project-1 .project-hero-section { flex-direction: column; height: auto; align-items: flex-start; gap: 40px; padding-top: 60px; }
    #project-1 .project-info-side { width: 100%; }
    #project-1 .project-first-image-free { width: 100%; height: auto; margin-bottom: var(--img-gap); }
    #project-1 .project-first-image-free img { width: 100%; height: auto; }

    #project-1 .gallery-p1 { display: flex; flex-direction: column; gap: var(--img-gap); }
    #project-1 .gallery-p1 .project-square { height: auto !important; aspect-ratio: auto !important; }
    #project-1 .gallery-p1 .project-square img { height: auto !important; object-fit: contain !important; }

    /* PROJET 2 MOBILE : CORRECTIONS */
    #project-2 .project-hero-section { flex-direction: column; height: auto; align-items: flex-start; gap: 40px; padding-top: 60px; }
    #project-2 .project-info-side { width: 100%; }
    
    /* Image 1 : Zoom léger */
    #project-2 .project-first-image-free { width: 100%; height: auto; margin-bottom: var(--img-gap); overflow: hidden !important; }
    #project-2 .project-first-image-free img { width: 100%; height: auto; object-fit: cover !important; transform: scale(1.4) !important; }

    #project-2 .p2-gallery { display: flex; flex-direction: column; gap: var(--img-gap); }
    #project-2 .p2-gallery .project-square { height: auto !important; aspect-ratio: auto !important; margin-top: 0 !important; }
    
    /* Correction Images Projet 2 Mobile */
    #project-2 .p2-gallery .project-square img { width: 100% !important; height: 100% !important; }
    
    /* Image 2 (GIF) : Zoom 3.8 interne avec cadre noir fixe + marge adaptée */
    #project-2 .p2-gallery .project-square.p2-main-gif { aspect-ratio: 1/1 !important; padding: 60px !important; background-color: #000 !important; margin-bottom: 70px !important; overflow: hidden !important; }
    #project-2 .p2-gallery .project-square.p2-main-gif img { object-fit: contain !important; transform: scale(3.8) !important; } 
    
    /* Exception Image 3 & 4 : Suppression de la marge entre les deux */
    #project-2 .p2-gallery div:nth-child(3) { margin-top: -20px !important; }

    /* Image 5 : Marges haut/bas importantes (80px haut / 110px bas) */
    #project-2 .p2-gallery .project-square.img-8-special { margin-top: 80px !important; margin-bottom: 110px !important; }
    #project-2 .p2-gallery .project-square.img-8-special img { object-fit: cover !important; transform: scale(2.6) !important; } 

    /* PROJET 4 MOBILE : CORRECTIONS STRUCTURE + TEXTE */
    #project-4 .project-hero-section { flex-direction: column; height: auto; align-items: flex-start; gap: 40px; padding-top: 60px; }
    #project-4 .project-info-side { width: 100%; }
    #project-4 .project-first-image-free { width: 100%; height: auto; margin-bottom: var(--img-gap); }
    #project-4 .project-first-image-free img { width: 100%; height: auto; }

    #project-4 .gallery-p4 { display: flex; flex-direction: column; gap: var(--img-gap); }
    #project-4 .gallery-p4 .project-square { height: auto !important; aspect-ratio: auto !important; margin: 0 !important; }
    #project-4 .gallery-p4 .project-square img { height: auto !important; width: 100% !important; object-fit: contain !important; }

    /* PROJET 3 MOBILE : CORRECTIONS STRUCTURE */
    #project-3 .project-hero-section { flex-direction: column; height: auto; align-items: flex-start; gap: 40px; padding-top: 60px; }
    #project-3 .project-info-side { width: 100%; }
    #project-3 .project-first-image-free { width: 100%; height: auto; margin-bottom: var(--img-gap); }
    #project-3 .project-first-image-free img { width: 100%; height: auto; }

    #project-3 .gallery-p3 { display: flex; flex-direction: column; gap: var(--img-gap); }
    #project-3 .gallery-p3 .project-square { height: auto !important; aspect-ratio: auto !important; }
    #project-3 .gallery-p3 .project-square img { height: auto !important; object-fit: contain !important; }

    /* PROJET 5 MOBILE */
    #project-5 .project-hero-section { flex-direction: column; height: auto; align-items: flex-start; gap: 40px; padding-top: 60px; }
    #project-5 .project-info-side { width: 100%; }
    #project-5 .project-first-image-free { width: 100%; height: auto; margin-bottom: var(--img-gap); }
    #project-5 .project-first-image-free img { width: 100%; height: auto; }

    #project-5 .gallery-p5 { display: flex; flex-direction: column; gap: var(--img-gap); }
    .p5-mobile-tall { aspect-ratio: 2 / 3 !important; }
    .gallery-p5 .p5-col-2, .gallery-p5 .p5-img-6, .gallery-p5 .p5-img-7 { aspect-ratio: 2 / 3 !important; }

    /* PROJET 6 MOBILE */
    #project-6 .project-hero-section { flex-direction: column; height: auto; align-items: flex-start; gap: 40px; padding-top: 60px; }
    #project-6 .project-info-side { width: 100%; }
    #project-6 .project-first-image-free { width: 100%; height: auto; margin-bottom: var(--img-gap); }
    #project-6 .project-first-image-free img { width: 100%; height: auto; }

    #project-6 .gallery-p6 { display: flex; flex-direction: column; gap: var(--img-gap); }
    #project-6 .gallery-p6 .project-square { height: auto !important; aspect-ratio: auto !important; }
    #project-6 .gallery-p6 .project-square img { height: auto !important; object-fit: contain !important; }
    #project-6 .p6-grille-frame img { transform: scale(1.3); }

    /* ACCUEIL MOBILE */
    .intro-bio p.intro-tag { text-indent: 0; }
    .card-p8-home .project-square { aspect-ratio: auto; }
    .card-p8-home .project-square img { width: 100%; height: auto; object-fit: contain; }
    .card-p1-home .project-square { aspect-ratio: auto; }
    .card-p1-home .project-square img { width: 100%; height: auto; object-fit: contain; }

    /* PROJET 7 MOBILE */
    #project-7 .project-hero-section { flex-direction: column; height: auto; align-items: flex-start; gap: 40px; padding-top: 60px; }
    #project-7 .project-info-side { width: 100%; }
    #project-7 .project-first-image-free { width: 100%; height: auto; margin-bottom: var(--img-gap); }
    #project-7 .project-first-image-free img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; }

    #project-7 .gallery-p7 { display: flex; flex-direction: column; gap: var(--img-gap); }
    #project-7 .gallery-p7 .project-square { height: auto !important; aspect-ratio: auto !important; }
    #project-7 .gallery-p7 .project-square img { height: auto !important; object-fit: contain !important; }
    #project-7 .gallery-p7 .p7-r1, #project-7 .gallery-p7 .p7-r2 { aspect-ratio: 4 / 5 !important; }
    #project-7 .gallery-p7 .p7-r1 img, #project-7 .gallery-p7 .p7-r2 img { height: 100% !important; object-fit: cover !important; }

    /* PROJET 8 MOBILE */
    #project-8 .project-hero-section { flex-direction: column; height: auto; align-items: flex-start; gap: 40px; padding-top: 60px; }
    #project-8 .project-info-side { width: 100%; }
    #project-8 .project-first-image-free { width: 100%; height: auto; margin-bottom: var(--img-gap); }
    #project-8 .project-first-image-free img { width: 100%; height: auto; }

    #project-8 .gallery-p8 { display: flex; flex-direction: column; gap: var(--img-gap); }
    #project-8 .gallery-p8 .project-square { height: auto !important; aspect-ratio: auto !important; }
    #project-8 .gallery-p8 .project-square img { height: auto !important; object-fit: contain !important; }
    #project-8 .p8-r4-wrap { display: flex; flex-direction: column; gap: var(--img-gap); }

    /* MON PARCOURS MOBILE */
}

/* FOOTER MOBILE */
.footer-gray-area { 
    background-color: transparent; 
    margin-top: 220px; 
    padding: var(--margin) 0; 
    border-top: 1px solid var(--line-gray);
}
.footer-content { display: flex; flex-direction: column; }
.overlay .footer-gray-area { margin-left: var(--margin); margin-right: var(--margin); }
.footer-block.identity { margin-bottom: 30px; cursor: pointer; width: fit-content; }
.brand-name-footer { font-size: var(--footer-text-size); font-weight: 400; color: #000; }
.sub-job { font-size: var(--footer-text-size); color: #000; }
.footer-block a { text-decoration: none; color: var(--almost-black); border-bottom: 1px solid var(--line-gray); width: fit-content; font-size: var(--footer-text-size); display: block; margin-bottom: 4px; }
.copyright { margin-top: 30px; font-size: var(--footer-text-size); color: var(--almost-black); }

/* MARGES DE SÉCURITÉ */
.with-margin { padding: 0 var(--margin) !important; }

/* PROJET 1 : IMAGE-LIEN VERS LE SITE WEB */
.visit-site-link { display: inline-flex; align-items: center; gap: 5px; color: var(--almost-black); text-decoration: none; border-bottom: none; width: fit-content; font-size: 18px; }
.visit-site-link .arrow { width: 0.85em; height: 0.85em; flex-shrink: 0; }
#project-1 .project-info-side > .visit-site-link { margin-top: 0; margin-bottom: 80px; }
.p1-webfix-wrap { display: flex; flex-direction: column; }
.p1-webfix-img { flex: 1; min-height: 0; }
.web-link-left { align-self: flex-start; margin-top: 6px; }

/* PROJETS SUIVANTS MOBILE */
.project-header p, .grid-num { font-size: 18px; }
.next-title-bar { margin-top: 250px; margin-bottom: 40px; text-align: center; }
.next-title-bar p { font-size: 18px; }
.related-projects { width: 100%; display: flex; flex-direction: column; gap: 20px; padding: 0 var(--margin); margin-bottom: 100px; align-items: center; }
.card.mini { width: 75%; }

/* OVERLAY */
.overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 2000; display: none; background: #fff; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; }
.overlay.active { display: block; }
.close-x { position: fixed; top: var(--margin); right: var(--margin); width: 45px; height: 45px; background: none; border: none; cursor: pointer; z-index: 2500; }
.close-x::before, .close-x::after { content: ''; position: absolute; width: 100%; height: 1px; background: #000; left: 0; top: 50%; }
.close-x::before { transform: rotate(45deg); }
.close-x::after { transform: rotate(-45deg); }
.project-hero-section { display: flex; flex-direction: row; height: 100vh; padding: 0 var(--margin); align-items: center; justify-content: space-between; }
.project-info-side { width: 35%; }
.project-first-image-free { display: flex; align-items: center; height: 100%; }

/* PROJET 1 & 2 : STYLE TEXTE DESCRIPTIF (ancien style demandé) */
#project-1 .text-layout-grid, #project-2 .text-layout-grid, #project-4 .text-layout-grid, #project-3 .text-layout-grid, #project-5 .text-layout-grid, #project-6 .text-layout-grid, #project-7 .text-layout-grid, #project-8 .text-layout-grid { display: grid; grid-template-columns: 45px 1fr; gap: 15px; margin-bottom: 15px; }
#project-1 .description-text, #project-2 .description-text, #project-4 .description-text, #project-3 .description-text, #project-5 .description-text, #project-6 .description-text, #project-7 .description-text, #project-8 .description-text { font-size: 18px; line-height: 1.4; margin-bottom: 80px; }
#project-1 .description-text p, #project-2 .description-text p, #project-4 .description-text p, #project-3 .description-text p, #project-5 .description-text p, #project-6 .description-text p, #project-7 .description-text p, #project-8 .description-text p { margin-bottom: 17px; }
#project-1 .description-text { margin-bottom: 30px; }

@media (min-width: 1024px) {
    /* PROJETS : TEXTE DESCRIPTIF ET TITRES PLUS GRANDS (DESKTOP UNIQUEMENT) */
    #project-1 .description-text, #project-2 .description-text, #project-4 .description-text, #project-3 .description-text, #project-5 .description-text, #project-6 .description-text, #project-7 .description-text, #project-8 .description-text { font-size: 1.1rem; line-height: 1.5; }
    .project-header p, .grid-num { font-size: 1.1rem; }
    .next-title-bar p { font-size: 1.1rem; }
}

/* ORDINATEUR (DESKTOP) */
@media (min-width: 1024px) {
    .home-top-wrapper { display: block; margin-bottom: 130px; }
    .header-left-area { width: 100%; }
    .header-right-area { width: 100%; }
        .main-links { margin-top: 0; }

    .grid > .card .meta-row { font-size: 1.15rem; }
    .card-p8-home .project-square img { width: 100%; height: 100%; object-fit: cover; }

    .site-header .brand-name { font-size: 18px; }
    .intro-bio { max-width: calc((100% - 40px) / 3); }
    .intro-bio p { font-size: 18px; text-indent: 75px; }
    .intro-bio p.intro-tag { text-align: left; text-indent: 0; }
    .main-links a { font-size: 18px; }
    
    .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px 10px; align-items: start; }
    .grid .project-square { opacity: 1; transition: opacity 0.3s ease; }
    .grid .meta-txt { opacity: 0; transition: opacity 0.3s ease; }
    .grid:has(.card:hover) .project-square { opacity: 0.4; }
    .grid .card:hover .project-square { opacity: 1 !important; }
    .grid .card:hover .meta-txt { opacity: 1 !important; }
    .related-projects { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 10px; align-items: start; }
    .related-projects .project-square { opacity: 1; transition: opacity 0.3s ease; }
    .related-projects .meta-txt { opacity: 0; transition: opacity 0.3s ease; }
    .related-projects:has(.card:hover) .project-square { opacity: 0.4; }
    .related-projects .card:hover .project-square { opacity: 1 !important; }
    .related-projects .card:hover .meta-txt { opacity: 1 !important; }
    
    .card-p2-home .project-square { aspect-ratio: 1 / 0.85; }
    .card-p1-home .project-square, .card-p2-home .project-square, .card-p3-home .project-square { aspect-ratio: 3 / 2 !important; width: 100% !important; align-items: flex-start !important; }
    .card-p2-home .project-square { background-color: #000 !important; }
    .card-p1-home .project-square { aspect-ratio: auto !important; }
    .card-p1-home .project-square img { width: 100% !important; height: auto !important; object-fit: contain !important; }
    .card-p3-home .project-square img { width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center top !important; }
    .card-p2-home .project-square img { width: 100% !important; height: 100% !important; object-fit: contain !important; object-position: center top !important; transform: scale(1.3); }
    
    .card-tall-home .project-square { aspect-ratio: 1 / 1.35; }
    .card-tall-home .project-square img { transform: scale(1.15); }
    .card-p5-home .project-square img { object-position: center 15%; }

    .footer-gray-area { padding-top: 50px; padding-bottom: 0; }
    .overlay .footer-gray-area { padding-bottom: var(--margin); }
    .footer-content { display: flex; flex-direction: row; justify-content: space-between; align-items: flex-end; }
    .footer-block.identity { margin-bottom: 0; }
    .copyright { text-align: right; }

    /* PROJET 1 : GRILLE 2-3-2-2 DESKTOP */
    .gallery-p1 { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--img-gap); }
    .p1-r1 { grid-column: span 3; height: 90vh; }
    
    /* MODIFICATION : 3 IMAGES CÔTE À CÔTE RECTANGULAIRES */
    .p1-r2 { grid-column: span 2; height: 45vh; } 
    #project-1 .gallery-p1 > div:nth-child(3) img { object-position: center 60%; }
    
    .p1-r3 { grid-column: span 3; height: 55vh; }
    .p1-r4-large { grid-column: span 4; height: 70vh; }
    .p1-r4-small { grid-column: span 2; height: 70vh; }
    #project-1 .p1-webfix-wrap { position: relative; }
    #project-1 .p1-webfix-img { height: 100%; }
    #project-1 .web-link-left { position: absolute; top: 100%; left: 0; margin-top: 6px; }
    #project-1 .visit-site-link { font-size: 1rem; }

    #project-1 .project-first-image-free { width: 58%; margin-left: auto; justify-content: center; }
    #project-1 .project-first-image-free img { max-width: 100%; max-height: 80vh; width: auto; }

    /* Autres projets Desktop */
    #project-2 .project-first-image-free { width: 68%; justify-content: flex-end; margin-left: 0; }
    #project-2 .project-first-image-free img { width: 100%; height: 94vh; object-fit: cover; }
    #project-3 .project-first-image-free { width: calc(50% - (var(--img-gap) / 2)); margin-left: auto; justify-content: center; }
    #project-3 .project-first-image-free img { width: 100%; height: 60vh; object-fit: cover; }
    #project-4 .project-first-image-free { width: 50%; margin-left: auto; justify-content: center; }
    #project-4 .project-first-image-free img { max-width: 100%; max-height: 80vh; width: auto; object-fit: contain; }
    #project-4 .p4-pair { grid-column: span 3; height: 88vh; }
    #project-4 .p4-single-left { grid-column: span 3; height: 90vh; }
    #project-4 .p4-img-1-top img { object-position: center top; }
    #project-5 .project-first-image-free { width: 50%; margin-left: auto; justify-content: center; }
    #project-5 .project-first-image-free img { max-width: 100%; max-height: 97vh; width: auto; clip-path: inset(0 0 16% 0); transform: translateY(9%); }
    #project-6 .project-first-image-free { width: 30%; margin: 0 auto; justify-content: center; }
    #project-6 .project-first-image-free img { width: 100%; height: 82vh; object-fit: contain; }

    #project-1 .project-rest-gallery, #project-2 .p2-gallery, #project-4 .gallery-p4 { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--img-gap); }
    #project-2 .p2-main-gif { grid-column: 1 / -1; height: calc(100vh - 40px); margin-top: -160px; }
    #project-2 .p2-main-gif img { transform: scale(1.4); }
    #project-2 .p2-gallery > div:nth-child(2), #project-2 .p2-gallery > div:nth-child(3) { grid-column: span 3; height: calc(100vh - 40px); margin-top: 60px; }
    #project-2 .img-8-special { grid-column: 1 / -1; width: 100%; height: 100vh; }
    #project-2 .img-8-special img { transform: scale(1.71) !important; }
    #project-2 .p2-gallery > div:nth-child(n+5) { grid-column: span 2; aspect-ratio: 1/1; }

    .gallery-p3 { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--img-gap); }
    .p3-item { grid-column: span 3; height: 60vh; }
    .p3-enveloppe { grid-column: 1 / -1; height: 85vh; }
    .p3-insta-row { grid-column: span 3; height: auto; aspect-ratio: auto; }
    .p3-insta-row img { object-fit: contain; }
    .p3-affiche-row { grid-column: span 3; height: 100vh; }
    .p3-trio { grid-column: span 2; height: 50vh; }
    .p3-tshirt-sq { aspect-ratio: 1/1 !important; }
    .p3-livre-pair { grid-column: span 3; aspect-ratio: 3/2; height: auto; }

    .gallery-p5 { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--img-gap); }
    .p5-col-3 { grid-column: span 3; height: 89vh; } 
    .p5-col-2 { grid-column: span 2; height: 50vh; }
    .gallery-p5 > div:nth-child(3) img { object-position: center 60%; } 
    .p5-img-6, .p5-img-7 { height: 95vh; grid-column: span 4; }
    .p5-img-7 { grid-column: span 2; }
    .p5-img-6 img { object-fit: cover; object-position: center 45%; }
    .p5-img-7 img { object-fit: cover; object-position: center 45%; transform: scale(1.4); }

    .next-title-bar { margin-top: 400px; }
    .related-projects { width: 65%; margin: 60px auto 120px auto; }
    .card.mini { width: 100%; }

    /* PROJET 6 DESKTOP (provisoire, en attente de la capture d'écran pour l'agencement exact) */
    #project-6 .gallery-p6 { display: flex; flex-direction: column; gap: var(--img-gap); }
    #project-6 .p6-grille-frame { width: 100%; height: 92vh; background-color: #000; padding: 60px; }
    #project-6 .p6-grille-frame img { width: 100%; height: 100%; object-fit: contain; transform: scale(1.15); }
    #project-6 .p6-pair-wrap { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--img-gap); width: 60%; margin: 0 auto; }
    #project-6 .p6-pair { height: 92vh; }
    #project-6 .p6-pair img { width: 100%; height: 100%; object-fit: cover; }

    /* PROJET 7 DESKTOP */
    #project-7 .project-first-image-free { width: 29%; margin: 0 auto; justify-content: center; }
    #project-7 .project-first-image-free img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; }

    #project-7 .gallery-p7 { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--img-gap); }
    #project-7 .p7-r1 { height: 85vh; }
    #project-7 .gallery-p7 > div:nth-child(1) { grid-column: span 4; }
    #project-7 .gallery-p7 > div:nth-child(2) { grid-column: span 2; }
    #project-7 .p7-r2 { grid-column: span 3; height: 80vh; }
    #project-7 .p7-r3 { grid-column: 1 / -1; height: 94vh; }

    /* PROJET 8 DESKTOP */
    #project-8 .project-first-image-free { width: 45%; margin-left: auto; margin-right: 5%; justify-content: center; }
    #project-8 .project-first-image-free img { max-width: 100%; max-height: 85vh; width: auto; object-fit: contain; }

    #project-8 .gallery-p8 { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--img-gap); }
    #project-8 .p8-r2 { grid-column: span 2; height: 90vh; }
    #project-8 .p8-r3-a { grid-column: span 2; height: 65vh; }
    #project-8 .p8-r3-b { grid-column: span 4; height: 65vh; }
    #project-8 .p8-r4-tall { grid-column: span 4; height: 94vh; }
    #project-8 .p8-r4-wrap { grid-column: span 2; height: 94vh; display: flex; flex-direction: column; gap: var(--img-gap); }
    #project-8 .p8-r4-stack:first-child { flex: 0.65; min-height: 0; }
    #project-8 .p8-r4-stack:last-child { flex: 1.35; min-height: 0; }
    #project-8 .p8-r4-stack img { width: 100%; height: 100%; object-fit: cover; }
}

/* ================= MON PARCOURS ================= */
.parcours-hero { padding: var(--margin) var(--margin) 60px var(--margin); }
.parcours-hero .brand-name { margin-bottom: 20px; }
.parcours-contact { display: flex; flex-direction: column; gap: 6px; margin-bottom: 70px; }
.parcours-contact a { text-decoration: none; color: #000; border-bottom: 1px solid var(--line-gray); width: fit-content; }

.parcours-content { max-width: 700px; padding-bottom: 100px; }
.parcours-section { margin-bottom: 45px; padding-bottom: 45px; border-bottom: 1px solid var(--line-gray); }
.parcours-section:last-of-type { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }
.parcours-title { font-size: 1.2rem; font-weight: 500; margin: 0 0 40px 0; text-align: left; }
.parcours-section-content { max-width: 700px; }

/* colonne date + colonne contenu, réutilisée par l'éducation et l'expérience */
.parcours-date { font-size: 18px; font-weight: 400; margin: 0; color: #000; }
.parcours-indent-content { margin-left: 175px; }

.parcours-item { display: grid; grid-template-columns: 150px 1fr; gap: 25px; margin-bottom: 50px; }
.parcours-item.parcours-item-tight { margin-bottom: 18px; }
.parcours-item:last-child { margin-bottom: 0; }
.parcours-item-text p.parcours-item-title { font-size: 18px; font-weight: 400; font-style: normal; margin: 0 0 1px 0; line-height: 1.2; }
.parcours-item-text p.parcours-sub { color: var(--almost-black); font-size: 18px; margin: 0 0 6px 0; line-height: 1.2; }
.parcours-item-text p { line-height: 1.4; margin-bottom: 6px; }
.parcours-item-text p:last-child { margin-bottom: 0; }

.parcours-edu-item { display: grid; grid-template-columns: 150px 1fr; gap: 25px; margin-bottom: 24px; }
.parcours-edu-item:last-child { margin-bottom: 0; }
.parcours-edu-text p { margin: 0; }
.parcours-edu-degree { font-size: 18px; font-weight: 400; margin: 0 0 1px 0; }
.parcours-edu-school { font-size: 18px; color: var(--almost-black); margin: 0; }

.parcours-tasks { list-style: none; padding: 0; margin: 14px 0 0 0; }
.parcours-tasks li { position: relative; padding-left: 14px; line-height: 1.4; margin-bottom: 6px; color: #000; font-size: 18px; }
.parcours-tasks li::before { content: ''; position: absolute; left: 0; top: 0.6em; width: 3px; height: 3px; border-radius: 50%; background: #000; }
.parcours-tasks li:last-child { margin-bottom: 0; }

.parcours-skills { display: flex; flex-direction: column; gap: 18px; }
.parcours-skill-row { display: flex; flex-direction: column; gap: 1px; }
.parcours-label { font-size: 18px; font-weight: 400; margin: 0; }
.parcours-skill-row p:last-child { font-size: 18px; line-height: 1.4; color: var(--almost-black); margin: 0; }

.parcours-langues { display: flex; flex-direction: column; gap: 4px; }
.parcours-langues p { position: relative; padding-left: 14px; font-size: 18px; margin: 0; }
.parcours-langues p::before { content: ''; position: absolute; left: 0; top: 0.55em; width: 3px; height: 3px; border-radius: 50%; background: #000; }

@media (min-width: 1024px) {
    /* MON PARCOURS DESKTOP */
    .parcours-content { max-width: none; margin: 0; padding-left: var(--margin); padding-right: var(--margin); }
    .parcours-section-content { max-width: none; }
    .parcours-section { display: grid; grid-template-columns: 280px 1fr; gap: clamp(60px, 25vw, 600px); max-width: none; margin-left: 0; margin-right: 0; margin-bottom: 90px; padding-bottom: 45px; border-bottom: 1px solid var(--line-gray); }
    .parcours-title { margin-bottom: 0; text-align: left; white-space: nowrap; font-size: 1.6rem; }
    .parcours-indent-content { margin-left: 220px; }
    .parcours-item, .parcours-edu-item { grid-template-columns: 190px 1fr; gap: 30px; }
    .parcours-item-text p.parcours-item-title, .parcours-tasks li, .parcours-edu-degree, .parcours-edu-school, .parcours-date, .parcours-skill-row p, .parcours-item-text p.parcours-sub, .parcours-langues p, .parcours-label { font-size: 1.35rem; }
}

/* Dark Theme */
.dark-theme { background-color: #000; color: #fff; }
.dark-theme .description-text, .dark-theme .grid-num, .dark-theme .project-header p i, .dark-theme .next-title-bar p { color: #fff; }
.dark-theme .close-x::before, .dark-theme .close-x::after { background-color: #fff; }
.dark-theme .footer-gray-area { background-color: #000; }
.dark-theme .brand-name-footer, .dark-theme .sub-job { color: #fff; }
.dark-theme .project-square { background-color: #000; }

.home-gif-free { background-color: transparent !important; align-items: flex-end !important; }
.home-gif-free img { object-fit: contain !important; width: 100%; height: auto; }