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

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

:root {
    /* Spacing — base 8px */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 16px;
    --space-4: 24px;
    --space-5: 32px;
    --space-6: 40px;

    /* Semantic spacing */
    --gutter: var(--space-3);
    --margin-y: var(--space-3);
    --margin-x: var(--space-4);

    /* Typography */
    --fw-main: 600;
    --fs-main: 12px;
    --ls-main: 0em;
    --lh-main: 1.15;
    --op-low: 0.2;

    /* Layout */
    --index-width: 180px;
    --index-item-height: 14px;
    --folder-size: 25px;
    --dot-size: var(--space-1);
    --slide-gap: var(--space-2);
    --slide-max-height: 70vh;
    --layout-8-padding-top: 10vh;
    --layout-8-padding-bottom: 15vh;

    /* Motion */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --duration-fast: 0.1s;
    --duration-normal: 0.4s;
    --duration-slow: 0.5s;

    /* Colors */
    --bg-color: #ffffff;
    --text-color: #211f1f;
    --index-bg: #000000;
    --index-text: #ffffff;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
}

h1, h2 {
    font-weight: inherit;
    font-size: inherit;
}

body {
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: 'AdobeClean', sans-serif;
    font-weight: var(--fw-main);
    overflow: hidden;
    height: 100vh;
    height: 100dvh;
    font-size: var(--fs-main);
    line-height: var(--lh-main);
    letter-spacing: var(--ls-main);
    cursor: default;
}

#portfolio-container {
    height: 100vh;
    height: 100dvh;
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
    scrollbar-width: none;
}

#portfolio-container::-webkit-scrollbar {
    display: none;
}

.project-section {
    height: 100vh;
    height: 100dvh;
    width: 100vw;
    scroll-snap-align: start;
    padding: 0;
    position: relative;
    display: flex;
    flex-direction: column;
}

.grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    column-gap: var(--gutter);
    align-items: baseline;
    width: 100%;
}

.main-header {
    position: fixed;
    top: var(--margin-y);
    left: var(--margin-x);
    right: var(--margin-x);
    z-index: 300 !important;
    letter-spacing: var(--ls-main);
}

.branding {
    font-size: var(--fs-main);
    line-height: var(--lh-main);
}

.low-opacity {
    opacity: var(--op-low);
}

.nav-btn,
.external-link,
.index-btn,
.overview-btn,
.index-item {
    text-decoration: none;
    color: var(--text-color);
    display: inline-block;
    transition:
        opacity var(--duration-fast) ease,
        transform var(--duration-normal) var(--ease-out);
}

.nav-btn {
    margin-left: var(--space-2);
    margin-right: var(--space-1);
}

.overview-btn {
    margin-left: var(--space-1);
}

@media (hover: hover) {
    .nav-btn:hover,
    .external-link:hover,
    .index-btn:hover,
    .overview-btn:hover,
    .outro-contact-link:hover,
    .about-close-btn:hover {
        opacity: 0 !important;
        cursor: pointer;
    }
}

.external-link {
    color: inherit;
    margin-left: var(--space-1);
}

.index-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 250; /* Above images, details (200), footer (200), and overview (220) */
    display: none;
    mix-blend-mode: normal; /* Par défaut sur mobile : noir simple */
    pointer-events: none; /* Laisse passer le scroll et les événements souris */
}

.index-overlay.is-visible {
    display: block;
}

.index-list {
    margin-top: calc(var(--margin-y) + 3 * var(--fs-main));
    margin-left: var(--margin-x);
    margin-right: var(--margin-x);
    display: flex;
    flex-direction: column;
    gap: 0;
    pointer-events: auto; /* Capture les survols et clics sur la liste */
}

.index-item {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    column-gap: var(--gutter);
    width: 100%;
    color: var(--text-color) !important; /* Noir simple par défaut */
    text-decoration: none;
    font-family: inherit;
    font-size: var(--fs-main);
    font-weight: var(--fw-main);
    letter-spacing: var(--ls-main);
    line-height: var(--lh-main);
    cursor: pointer;
    opacity: 0.2; /* Inactive lines are light grey on mobile */
    transition: opacity var(--duration-fast) ease, color var(--duration-fast) ease;
}

body:not(:has(#overview-overlay.is-visible)) .index-item.is-active {
    opacity: 1 !important;
}

.index-client-wrapper {
    grid-column: span 2;
    display: flex;
    align-items: baseline;
    overflow: hidden;
    padding-bottom: 4px; /* Espace vertical pour les descendantes */
    margin-bottom: -4px; /* Annule l'écart vertical pour conserver l'interlignage originel */
}

.index-client {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}

.index-num {
    margin-right: var(--space-1);
    min-width: 15px;
    flex-shrink: 0;
}

.index-details-wrapper {
    grid-column: span 2;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    overflow: hidden;
    gap: var(--space-2);
    padding-bottom: 4px; /* Espace vertical pour les descendantes */
    margin-bottom: -4px; /* Annule l'écart vertical pour conserver l'interlignage originel */
}

.index-project {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}

.index-year {
    flex-shrink: 0;
}

.index-action-wrapper {
    display: none; /* Masqué sur mobile */
}

.index-images-wrapper {
    display: none; /* Masqué sur mobile */
}

@media (min-width: 1025px) {
    .index-overlay {
        mix-blend-mode: difference; /* Mode de fusion uniquement sur desktop */
    }

    .index-item {
        color: rgba(255, 255, 255, 0.2) !important; /* Gris clair par différence */
        opacity: 1 !important;
    }

    .index-item:hover {
        color: #ffffff !important;
        cursor: pointer;
    }

    body:not(:has(#overview-overlay.is-visible)) .index-list:not(:hover) .index-item.is-active {
        color: #ffffff !important;
    }

    .index-client-wrapper {
        grid-column: 1;
    }

    .index-details-wrapper {
        grid-column: 2;
    }

    .index-images-wrapper {
        grid-column: 3;
        display: flex;
        justify-content: center;
        align-items: baseline;
        padding-bottom: 4px;
        margin-bottom: -4px;
    }

    .index-images-count {
        width: 60px;
        text-align: right;
        white-space: nowrap;
    }

    .index-action-wrapper {
        grid-column: 4;
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        overflow: hidden;
        gap: var(--space-2);
        padding-bottom: 4px;
        margin-bottom: -4px;
    }

    .index-collab {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        flex: 1;
        min-width: 0;
    }

    .index-collab a {
        color: inherit;
        text-decoration: none;
    }

    .index-collab a:hover {
        text-decoration: underline;
    }

    .index-view-btn {
        flex-shrink: 0;
    }
}

.project-details {
    position: absolute;
    bottom: var(--margin-y);
    left: var(--margin-x);
    right: var(--margin-x);
    z-index: 10;
    display: block;
    white-space: normal;
}

.slider-area {
    margin-top: auto;
    height: 100vh;
    height: 100dvh;
    padding-bottom: calc(var(--margin-y) + var(--fs-main) * var(--lh-main) + var(--margin-y));
    width: 100%;
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: flex-end;
}

.slides-wrapper {
    display: flex;
    height: 100%;
    gap: var(--slide-gap);
}

.slide {
    flex: 0 0 100vw;
    width: 100vw;
    height: 100%;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    column-gap: var(--gutter);
    padding: 0 var(--margin-x);
    align-items: center;
    justify-content: center;
}

.slide-item {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    max-height: var(--slide-max-height);
}

.slide img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* Layouts plein écran (Bleed edge-to-edge) */
.layout-1-full {
    padding: 0 !important;
    display: flex !important;
    justify-content: center;
    align-items: center;
}
.layout-1-full .slide-item {
    grid-column: auto !important;
    width: 100vw;
    height: 100vh;
    max-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}
.layout-1-full img {
    height: 100vh;
    max-height: 100vh;
    width: auto;
    max-width: 100%;
    object-fit: contain;
}

.layout-1-vh {
    padding: 0 !important;
    display: flex !important;
    justify-content: center;
    align-items: center;
}
.layout-1-vh .slide-item {
    grid-column: auto !important;
    width: 100vw;
    height: 100vh;
    max-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}
.layout-1-vh img {
    width: 100vw;
    max-width: 100vw;
    height: auto;
    max-height: 100%;
    object-fit: contain;
}

.layout-1-cover {
    padding: 0 !important;
    display: flex !important;
    justify-content: center;
    align-items: center;
}
.layout-1-cover .slide-item {
    grid-column: auto !important;
    width: 100vw;
    height: 100vh;
    max-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}
.layout-1-cover img {
    width: 100vw;
    height: 100vh;
    max-width: 100vw;
    max-height: 100vh;
    object-fit: cover;
}

.layout-1-90vh, .layout-1-80vh, .layout-1-60vh, .layout-1-50vh {
    padding: 0 !important;
    display: flex !important;
    justify-content: center;
    align-items: center;
}
.layout-1-90vh .slide-item, .layout-1-80vh .slide-item, .layout-1-60vh .slide-item, .layout-1-50vh .slide-item {
    grid-column: auto !important;
    width: 100vw;
    height: 100vh;
    max-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}
.layout-1-90vh img, .layout-1-80vh img, .layout-1-60vh img, .layout-1-50vh img {
    width: auto;
    max-width: 100%;
    object-fit: contain;
}
.layout-1-90vh img { height: 90vh; max-height: 90vh; }
.layout-1-80vh img { height: 80vh; max-height: 80vh; }
.layout-1-60vh img { height: 60vh; max-height: 60vh; }
.layout-1-50vh img { height: 50vh; max-height: 50vh; }

.layout-2-stack, .layout-2-60vh {
    display: flex !important;
    flex-direction: column;
    height: 100vh;
    width: 100vw;
    padding: 0 !important;
    justify-content: center;
    align-items: center;
    gap: var(--space-3);
}
.layout-2-stack .slide-item, .layout-2-60vh .slide-item {
    width: 100% !important;
    grid-column: auto !important;
    height: auto !important;
    max-height: calc(45vh - (var(--space-3) / 2)) !important;
    display: flex;
    justify-content: center;
    align-items: center;
}
.layout-2-stack img, .layout-2-60vh img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

@media (min-width: 1025px) {
    .layout-1 .slide-item { grid-column: 2 / span 2; }
    .layout-2 .slide-item { grid-column: span 2; }
    .layout-4 .slide-item { grid-column: span 1; }

    .layout-1-full,
    .layout-1-vh,
    .layout-1-90vh,
    .layout-1-80vh,
    .layout-1-60vh,
    .layout-1-50vh,
    .layout-1-cover,
    .layout-2-stack,
    .layout-2-60vh {
        height: 100vh !important;
    }

    .layout-2-60vh {
        display: grid !important;
        grid-template-columns: repeat(4, 1fr);
        column-gap: var(--gutter);
        padding: 0 var(--margin-x) !important;
        align-items: center;
    }
    .layout-2-60vh .slide-item {
        grid-column: span 2 !important;
        height: 60vh !important;
        max-height: 60vh !important;
    }

    .layout-8 {
        grid-template-rows: repeat(2, 1fr);
        row-gap: var(--gutter);
        padding-top: var(--layout-8-padding-top);
        padding-bottom: var(--layout-8-padding-bottom);
    }

    .layout-8 .slide-item {
        grid-column: span 1;
        height: 100%;
    }
}

.breadcrumb {
    font-size: var(--fs-main);
    letter-spacing: var(--ls-main);
    font-weight: var(--fw-main);
}

.pagination-dots {
    display: none;
    pointer-events: auto;
}

.image-name {
    opacity: 1;
}

.main-footer {
    position: fixed;
    bottom: var(--margin-y);
    right: var(--margin-x);
    z-index: 100;
}

.copyright {
    font-size: var(--fs-main);
    opacity: 0.1;
}

@media (max-width: 1024px), (orientation: portrait) {
    :root {
        --gutter: var(--space-2);
    }

    .grid-4 {
        display: block;
    }

    .project-details {
        z-index: 100;
    }

    .pagination-dots {
        position: absolute;
        bottom: calc(100% + var(--space-3));
        left: 0;
        right: 0;
        display: flex;
        justify-content: center;
        gap: var(--space-1);
        z-index: 110;
    }

    .dot {
        width: var(--dot-size);
        height: var(--dot-size);
        background-color: rgba(255, 255, 255, 0.1);
        border-radius: 50%;
        transition: background-color var(--duration-fast) ease;
    }

    .dot.is-active {
        background-color: #ffffff;
    }

    .project-description {
        width: 100%;
    }

    .slider-area {
        position: absolute;
        top: 0;
        left: 0;
        height: 100vh;
        height: 100dvh;
        width: 100vw;
        align-items: center;
        justify-content: flex-start;
        margin-top: 0;
        padding-bottom: 150px; /* Espace réservé pour la description et les points en bas */
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        scroll-snap-stop: always;
        -webkit-overflow-scrolling: touch;
    }

    .slider-area::-webkit-scrollbar {
        display: none;
    }

    .slide {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100vw;
        height: 100%; /* Utilise la hauteur disponible moins le padding-bottom */
        flex: 0 0 100vw;
        padding: 0;
        scroll-snap-align: center;
        scroll-snap-stop: always;
        overflow: hidden; /* Empêche le débordement horizontal lors du crop */
    }

    .slide-item {
        width: 100%;
        height: 100%;
        max-height: 100% !important;
    }

    .layout-1-full,
    .layout-1-vh,
    .layout-1-90vh,
    .layout-1-80vh,
    .layout-1-60vh,
    .layout-1-50vh,
    .layout-1-cover,
    .layout-2-stack,
    .layout-2-60vh {
        height: 100% !important;
    }

    .layout-1-full .slide-item,
    .layout-1-vh .slide-item,
    .layout-1-cover .slide-item {
        height: 100% !important;
        max-height: 100% !important;
    }

    .layout-1-full img,
    .layout-1-vh img,
    .layout-1-cover img {
        height: auto !important;
        max-height: 100% !important;
    }

    .layout-2-stack .slide-item {
        max-height: calc(50% - (var(--space-3) / 2)) !important;
    }

    .slide img {
        width: 100%;
        height: auto;
        max-width: none;
        max-height: 100%;
        object-fit: contain;
    }

    .slide img.wide-crop {
        width: 140vw !important; /* Zoom pour remplir l'écran verticalement et cropper les côtés */
        max-width: 140vw !important;
        height: auto !important;
        object-fit: cover !important;
    }
}

/* Mix blend mode for premium overlay text readability on dark backgrounds */
.main-header {
    color: #ffffff !important;
    mix-blend-mode: difference;
    z-index: 300;
}

.project-details,
.main-footer {
    color: #ffffff !important;
    mix-blend-mode: difference;
    z-index: 200;
}

.main-header a,
.project-details a,
.main-footer a {
    color: inherit !important;
}

/* Custom slide background colors */
.slide.bg-white {
    background-color: #ffffff;
}
.slide.bg-black {
    background-color: #000000;
}
.slide.bg-grey {
    background-color: #e6e6e6;
}



/* Overview Overlay & Grid Layout */
.overview-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 220; /* above project details (200) but below index (250) */
    background-color: var(--bg-color); /* solid white background */
    display: none;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: none;  /* IE et Edge */
    scrollbar-width: none;  /* Firefox */
}

.overview-overlay::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}

.overview-overlay.is-visible {
    display: block;
}

.overview-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: var(--space-4);
    row-gap: var(--space-5);
    margin: calc(var(--margin-y) * 2 + var(--fs-main) * var(--lh-main) + var(--space-4)) var(--margin-x) var(--margin-y) var(--margin-x);
}

.overview-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    cursor: pointer;
    min-width: 0; /* Permet le rétrécissement de la carte sous le texte d'une seule ligne */
}

.overview-block {
    width: 100%;
    border: 1px solid #e6e6e6;
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ffffff;
    transition: opacity var(--duration-fast) ease;
}

.overview-card:hover .overview-block {
    opacity: 0.8;
}

/* Backgrounds within overview blocks */
.overview-block.bg-white {
    background-color: #ffffff;
}
.overview-block.bg-black {
    background-color: #000000;
}
.overview-block.bg-grey {
    background-color: #e6e6e6;
}

/* Layout images containment styles inside overview-block */
.overview-block img {
    position: absolute !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    top: 0 !important;
    left: 0 !important;
    max-height: 100% !important;
    max-width: 100% !important;
}

.overview-block.overview-layout-1-cover img {
    object-fit: cover !important;
}

/* 90%, 80%, 60%, 50% height ratios inside the blocks, centered vertically */
.overview-block.overview-layout-1-90vh img {
    height: 90% !important;
    top: 5% !important;
}
.overview-block.overview-layout-1-80vh img {
    height: 80% !important;
    top: 10% !important;
}
.overview-block.overview-layout-1-60vh img {
    height: 60% !important;
    top: 20% !important;
}
.overview-block.overview-layout-1-50vh img {
    height: 50% !important;
    top: 25% !important;
}

/* Multiple stacked layout */
.overview-block.overview-layout-2-stack,
.overview-block.overview-layout-2-60vh {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4%;
    width: 100%;
    height: 100%;
}

.overview-block.overview-layout-2-stack img,
.overview-block.overview-layout-2-60vh img {
    position: static !important; /* Annuler le positionnement absolu pour le flexbox vertical */
    height: 45% !important;
    width: auto !important;
    object-fit: contain !important;
}

/* Breadcrumb label below blocks */
.overview-label {
    font-family: inherit;
    font-size: var(--fs-main);
    font-weight: var(--fw-main);
    letter-spacing: var(--ls-main);
    line-height: 1.3; /* Légèrement supérieur pour éviter le rognage des descendantes */
    color: var(--text-color);
    opacity: var(--op-low);
    margin-top: var(--space-2);
    padding-bottom: 4px; /* Espace nécessaire pour les lettres descendantes (g, p, y, q) */
    white-space: normal;
    height: calc(2 * var(--fs-main) * 1.3 + 4px);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

@media (max-width: 1024px), (orientation: portrait) {
    .overview-overlay {
        padding: 0;
    }

    .overview-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: var(--space-2);
        row-gap: var(--space-4);
        margin: calc(var(--margin-y) * 2 + var(--fs-main) * var(--lh-main) + var(--space-5)) var(--margin-x) var(--margin-y) var(--margin-x);
    }
}

/* Intro Overlay Styles */
.intro-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 400; /* Au-dessus de tous les éléments */
    background-color: var(--bg-color); /* Fond blanc opaque 100% */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

.intro-overlay.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.intro-image-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50vh;
    width: 100vw;
}

#intro-anim-img {
    max-height: 50vh;
    max-width: 30vw;
    width: auto;
    height: auto;
    object-fit: contain;
}

.intro-branding {
    font-family: inherit;
    font-size: var(--fs-main);
    font-weight: var(--fw-main);
    letter-spacing: var(--ls-main);
    line-height: var(--lh-main);
    color: var(--text-color);
    white-space: nowrap;
    margin-top: var(--space-4); /* Espace harmonisé sous l'image */
}

.intro-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-2);
    margin-top: var(--space-5); /* Espace harmonisé sous le texte branding */
}

@media (max-width: 1024px), (orientation: portrait) {
    .intro-image-wrapper {
        height: 40vh;
    }
    #intro-anim-img {
        max-height: 40vh;
        max-width: 50vw;
    }
}

.intro-text {
    font-family: inherit;
    font-size: var(--fs-main);
    font-weight: var(--fw-main);
    letter-spacing: var(--ls-main);
    line-height: var(--lh-main);
    color: var(--text-color);
    opacity: var(--op-low);
}

.intro-arrow {
    font-family: inherit;
    font-size: var(--fs-main);
    font-weight: var(--fw-main);
    color: var(--text-color);
    opacity: var(--op-low);
    display: inline-block;
    margin-top: var(--space-1);
    animation: arrowSlide 1.5s infinite ease-in-out;
}

.intro-char {
    display: inline-block;
    opacity: 0;
    animation: fadeInIntroChar 0.1s forwards;
}

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

@keyframes arrowSlide {
    0% {
        transform: translateY(-4px);
        opacity: 0.2;
    }
    50% {
        transform: translateY(4px);
        opacity: 0.6;
    }
    100% {
        transform: translateY(-4px);
        opacity: 0.2;
    }
}



/* About Overlay Styles */
.about-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 250; /* Même niveau que index et overview */
    display: none;
    background-color: var(--bg-color); /* Blanc opaque */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.about-overlay.is-visible {
    display: block; /* Apparaît tout de suite sans animation */
}

/* About Section Styles */
.about-section {
    background-color: var(--bg-color); /* Blanc opaque */
}

.about-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    column-gap: var(--gutter);
    row-gap: calc(2 * var(--fs-main)); /* Écart de 2 lignes entre les rangées de sections */
    margin-top: calc(var(--margin-y) + 3 * var(--fs-main));
    margin-left: var(--margin-x);
    margin-right: var(--margin-x);
    margin-bottom: var(--margin-y);
}

.about-column {
    border-top: 1px solid rgba(33, 31, 31, 0.15); /* Filet plus fin */
    padding-top: var(--fs-main); /* Écart de 1 ligne sous le filet */
    display: flex;
    flex-direction: column;
}

.about-bio-section,
.about-contact-section {
    grid-column: span 4;
}

.about-clients-section,
.about-exhibitions-publications-section,
.about-services-section,
.about-credits-section {
    grid-column: span 2;
}

.about-p {
    font-family: inherit;
    font-size: var(--fs-main);
    font-weight: var(--fw-main);
    letter-spacing: var(--ls-main);
    line-height: var(--lh-main);
    color: var(--text-color);
    margin-top: 0;
    margin-bottom: var(--fs-main); /* Écart de 1 ligne entre paragraphes d'une même section */
}

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

.about-credits-section .about-p {
    opacity: var(--op-low);
}

.about-link {
    color: inherit;
    text-decoration: none;
    transition: opacity var(--duration-fast) ease;
}

@media (hover: hover) {
    .about-link:hover {
        opacity: 0 !important;
        cursor: pointer;
    }
}

.about-title {
    font-family: inherit;
    font-size: var(--fs-main);
    font-weight: var(--fw-main);
    letter-spacing: var(--ls-main);
    line-height: var(--lh-main);
    color: var(--text-color);
    opacity: var(--op-low);
    margin-top: 0;
    margin-bottom: var(--fs-main); /* Écart de 1 ligne sous le titre */
}

.about-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.about-list li {
    font-family: inherit;
    font-size: var(--fs-main);
    font-weight: var(--fw-main);
    letter-spacing: var(--ls-main);
    line-height: var(--lh-main);
    color: var(--text-color);
    display: flex;
    align-items: flex-start;
}

/* Espacement des sous-sections d'une même section (Exhibitions & Publications) */
.about-subsection + .about-subsection {
    margin-top: calc(2 * var(--fs-main)); /* Écart de 2 lignes */
}

/* Alignement des années dans les catégories */
.about-year {
    min-width: 45px;
    opacity: var(--op-low);
}

.about-event {
    flex: 1;
}

/* Contacts Aligned Form */
.about-contact-details {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-top: var(--fs-main); /* Écart de 1 ligne */
}

.about-contact-details div {
    display: flex;
    font-size: var(--fs-main);
    line-height: var(--lh-main);
}

.contact-label {
    min-width: 80px; /* Alignement parfait des libellés */
    opacity: var(--op-low);
}

@media (min-width: 1025px) {
    .about-bio-section {
        grid-column: span 2;
    }
    
    .about-contact-section {
        grid-column: span 2;
    }
    
    .about-clients-section {
        grid-column: 1;
    }
    
    .about-exhibitions-publications-section {
        grid-column: 2;
    }
    
    .about-services-section {
        grid-column: 3;
    }
    
    .about-credits-section {
        grid-column: 4;
    }
    
    .about-p {
        margin-bottom: var(--fs-main);
    }
}

/* Header overrides when About is open */
body.about-open .main-header .nav-btn,
body.about-open .main-header .index-btn,
body.about-open .main-header .overview-btn {
    opacity: 0;
    pointer-events: none;
}

body.about-open .main-header br {
    display: none;
}

body.about-open .main-header .low-opacity {
    opacity: 1; /* Reste en noir uni */
}

/* Close button styling */
.about-close-btn {
    position: absolute;
    top: 0;
    right: 0;
    font-size: var(--fs-main);
    line-height: var(--lh-main);
    color: var(--text-color);
    text-decoration: none;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--duration-fast) ease;
}

body.about-open .about-close-btn {
    opacity: 1;
    pointer-events: auto;
}