/*
Theme Name: Portfolio 
Theme URI: https://example.com
Author: Caroline Cueva
Author URI: https://example.com
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: portfolio-minimal
Tags: portfolio, minimal, editorial, creative, art

/* latin */
@font-face {
    font-family: 'Chivo Mono';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url(assets/webfont/Chivo-Mono.woff2) format('woff2');
}

/* latin */
@font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 900;
    src: url(assets/webfont/Lato.woff2) format('woff2');
}

/* ==========================================================================
   VARIABLES CSS GLOBALES
   ========================================================================== */

* {
    outline: none;
    border: none;
}

:root {
    --header-h: 100px;
    /* Palette de couleurs */
    --color-primary: #000000;
    --color-secondary: #ffffff;
    --color-text: #1a1a1a;
    --color-text-light: #666666;
    --color-border: #e0e0e0;
    --color-bg: #ffffff;
    --color-bg-alt: #f9f9f9;

    /* Typographie */
    --font-primary: 'Chivo Mono', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-secondary: 'Lato';

    /* Tailles de police */
    --font-size-xs: 0.75rem;
    /* 12px */
    --font-size-sm: 0.875rem;
    /* 14px */
    --font-size-base: 1rem;
    /* 16px */
    --font-size-lg: 1.125rem;
    /* 18px */
    --font-size-xl: 1.5rem;
    /* 24px */
    --font-size-2xl: 2rem;
    /* 32px */
    --font-size-3xl: 3rem;
    /* 48px */
    --font-size-4xl: 4rem;
    /* 64px */

    /* Espacements */
    --spacing-xs: 0.5rem;
    /* 8px */
    --spacing-sm: 1rem;
    /* 16px */
    --spacing-md: 2rem;
    /* 32px */
    --spacing-lg: 4rem;
    /* 64px */
    --spacing-xl: 6rem;
    /* 96px */
    --spacing-2xl: 8rem;
    /* 128px */

    /* Transitions */
    --transition-fast: 0.2s ease;
    --transition-base: 0.3s ease;
    --transition-slow: 0.5s ease;

    /* Largeurs maximales */
    --max-width-text: 65ch;
    --max-width-content: 1200px;
    --max-width-wide: 1600px;
}

/* ==========================================================================
   RESET ET BASE
   ========================================================================== */

/* Reset basique pour cohérence cross-browser */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    scroll-behavior: smooth;
}

body {
    overflow-x: hidden;
    margin: 0;
    padding: 0;
    font-family: var(--font-primary);
    font-size: var(--font-size-base);
    line-height: 1.6;
    color: var(--color-text);
    background-color: var(--color-bg);
    font-weight: 300;
    /* Poids léger pour esthétique minimaliste */
}

/* Suppression des styles par défaut des éléments */
h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
    padding: 0;
    font-weight: 300;
    line-height: 1.2;
}

ul,
ol {
    list-style: none;
}

a {
    color: inherit;
    text-decoration: none;
    transition: opacity var(--transition-base);
}

a:hover {
    opacity: 1;
}

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

button {
    border: none;
    background: none;
    cursor: pointer;
    font-family: inherit;
}

/* ==========================================================================
   HEADER / NAVIGATION
   ========================================================================== */

.main-runtext {
    opacity: 0;
}

.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    padding: var(--spacing-md) var(--spacing-lg);
    /* background: #FFF;
    background: linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 10%);
    backdrop-filter: blur(30px); */
}

.site-header:has(.is-open) {
    background: white;
}

.header-container {
    display: flex;
    justify-content: center;
}

.main-navigation ul a {
    background: #FFF;
    padding: 3px;

}

/* Logo / Nom du site */
.site-logo {
    font-size: var(--font-size-lg);
    font-weight: 400;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    display: none;
}

.site-logo a {
    transition: opacity var(--transition-base);


}

/* .site-logo a:hover {
    opacity: 1;
} */

/* Navigation principale */
.main-navigation {
    display: flex;
    gap: var(--spacing-lg);
    width: 100%;
}

.main-navigation>ul>li>a {
    position: relative;
    display: inline-block;
}

.main-navigation ul li a:hover {
    transition: color 0.35s ease, letter-spacing 0.35s ease;
    color: #7a1c2e;
    letter-spacing: 4em;
}



.main-navigation ul {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 5em;
    width: 100%;
    align-items: center;
}

.main-navigation ul li:nth-child(2) {
    justify-self: center;
}

.main-navigation ul li:nth-child(3) {
    justify-self: end;
}

.main-navigation a {
    font-size: var(--font-size-sm);
    font-weight: 300;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    position: relative;
    padding-bottom: 4px;
}

.main-navigation .sub-menu li {
    width: 100%;
    text-align: center;

}

/* Effet de soulignement au survol */
/* État normal */
/* État normal */
.main-navigation .sub-menu a {
    display: block;
    width: 100%;
    text-align: center;
    white-space: nowrap;
    text-transform: uppercase;
    position: relative;
    padding-bottom: 4px;

    letter-spacing: 0;
    transform: scale(1);

    transition:
        letter-spacing .6s cubic-bezier(.16, 1, .3, 1),
        transform .6s cubic-bezier(.16, 1, .3, 1),
        color .35s ease;
}

/* Hover */
.main-navigation .sub-menu a:hover {
    color: #8c1b0b;
    letter-spacing: 4em;

    /* transform: scale(1.02); */
}




/* Garder le style actif si le parent est hover OU si le panneau est hover */
.main-navigation .menu-item-has-children:hover>a,
.main-navigation .menu-item-has-children:focus-within>a,
.main-navigation .menu-item-has-children>.sub-menu:hover~a {
    background-size: 100% 2px;
    color: #8c1b0b;
    letter-spacing: 4em;
}

.main-navigation .menu-item-has-children.is-open>a {

    background-size: 100% 2px;
    color: #8c1b0b;
    letter-spacing: 4em;
}

/* Sub menu */

.projects-submenu {
    width: 100%;
    padding: var(--spacing-xl) 0;
}

.projects-submenu-list {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10vh;
}

.projects-submenu-link {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr auto;
    /* text-align: center; */
    padding: 0 var(--spacing-lg);

    text-transform: uppercase;
    font-size: 1em;
    font-weight: 300;
    letter-spacing: 0.6em;
    background: none;
    border: none;
    cursor: pointer;
    transition: letter-spacing .6s cubic-bezier(.16, 1, .3, 1), color .35s ease;

}

.projects-submenu-name {
    justify-self: center;
}

.projects-submenu-link .projects-submenu-count a {
    transition: letter-spacing .6s cubic-bezier(.16, 1, .3, 1), color .35s ease;
    justify-self: end;
    font-size: 0.2em;
    letter-spacing: 0;
    color: #8c1b0b;
}


.projects-submenu-link.is-active .projects-submenu-name {
    color: #8c1b0b;
}


.home-categories-item {
    display: flex;
    align-items: center;
    justify-content: center;

}



/* Bouton fermeture mega menu */

.mega-close {
    position: absolute;
    left: 50%;
    bottom: 24px;
    /* ajuste si tu veux plus bas/haut */
    transform: translateX(-50%);

    font-size: 30px;
    font-weight: 100;
    background: none;
    border: none;
    cursor: pointer;

    color: #000;
    transition: transform .25s ease, color .25s ease;
    z-index: 1001;
    pointer-events: auto;

}

.mega-close:hover {
    color: #8c1b0b;
    transform: translateX(-50%) rotate(90deg);
}


.menu-item-has-children.is-open>.sub-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* =========================
   MENU CATEGORIES HOME 
   ========================= */

.projects-submenu--home .projects-submenu-list {
    gap: 10vh;
}

/* Le lien sert de zone, et le mot est centré en absolu */
.projects-submenu--home .projects-submenu-link {
    position: relative;
    display: block;
    padding: 0 var(--spacing-lg);

    text-transform: uppercase;
    font-weight: 300;
    font-size: clamp(40px, 6.5vw, 60px);
    letter-spacing: 0.6em;

    min-height: 1.2em;

    transition: letter-spacing .6s cubic-bezier(.16, 1, .3, 1), color .35s ease;
}

/* Texte au centre parfait */
.projects-submenu projects-submenu--home .projects-submenu-name {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: max-content;
    white-space: nowrap;
    line-height: 1;
}

.projects-submenu--home .projects-submenu-link,
.projects-submenu--home .home-categories-name {
    width: fit-content;
}

/*  Numéro en exposant rouge */
.home-categories-count {
    position: absolute;
    top: 25%;
    transform: translateY(-0%);
    right: 20px;
    font-size: 0.2em;
    vertical-align: super;
    color: #7a1c2e;
    /* margin-left: -100px; */
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0;
}




/* Hover */
.projects-submenu--home .projects-submenu-link:hover {
    color: #8c1b0b;
    letter-spacing: 0;
}



/* ==========================================================================
   FOOTER
   ========================================================================== */

.site-footer {
    padding: var(--spacing-xl) var(--spacing-lg) var(--spacing-md);
    margin-top: var(--spacing-2xl);
}

.footer-container {
    max-width: var(--max-width-wide);
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-md);
}

.footer-copyright {
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
    font-weight: 300;
}

.footer-social {
    display: flex;
    gap: var(--spacing-md);
}

.footer-social a {
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
    transition: color var(--transition-base);
}

.footer-social a:hover {
    color: var(--color-primary);
    opacity: 1;
}

/* ==========================================================================
   LAYOUT PRINCIPAL
   ========================================================================== */

.site-content {
    min-height: 100vh;
    padding-top: 100px;
    /* Compense le header fixe */
}

/* Container centré avec largeur maximale */
.container {
    margin: 0 auto;
    padding: 0 var(--spacing-lg);
}

.container-wide {
    /* max-width: var(--max-width-wide);
    margin: 0 auto;
    padding: 0 var(--spacing-lg); */
    overflow: hidden;
}

/* ==========================================================================
   PAGE D'ACCUEIL (FRONT-PAGE)
   ========================================================================== */

.home-hero {
    min-height: 80vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: var(--spacing-2xl) var(--spacing-md);
}

.home-title {
    font-size: var(--font-size-4xl);
    font-weight: 200;
    letter-spacing: -0.02em;
    margin-bottom: var(--spacing-md);
    line-height: 1.1;
    display: none;
}

.home-subtitle {
    font-size: var(--font-size-xl);
    font-weight: 300;
    color: var(--color-text-light);
    max-width: 600px;
    margin-bottom: var(--spacing-xl);
}

.home-cta {
    display: inline-block;
    padding: var(--spacing-sm) var(--spacing-lg);
    border: 1px solid var(--color-primary);
    font-size: var(--font-size-sm);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    transition: all var(--transition-base);
}

.home-cta:hover {
    background-color: var(--color-primary);
    color: var(--color-secondary);
    opacity: 1;
}

/* Image centrale optionnelle */
.home-visual {
    margin-top: var(--spacing-xl);
    max-width: 600px;
    opacity: 1;
}

/* ==========================================================================
ABOUT ME (adapté à ton thème)
========================================================================== */

.home-about {
    padding: var(--spacing-2xl) calc(var(--spacing-lg) * 1.5);
}

.home-about__grid {
    max-width: var(--max-width-wide);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 380px 240px 1fr;
    gap: 9em;
    align-items: center;
    justify-content: center;
}


/* Flip card */
.flip-card {
    width: 380px;
    height: 380px;
    perspective: 1200px;
    border: 1px solid #7a1c2e;
    /* ton bordeaux */
}

.flip-card__inner {
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform var(--transition-slow);
}

.flip-card:hover .flip-card__inner {
    transform: rotateY(180deg);
}

.flip-card__face {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    inset: 0;
    backface-visibility: hidden;
}

.flip-card__face img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.flip-card__face p {
    text-transform: uppercase;
    color: #8c1b0b;
    font-size: 4em;
    text-align: center;
}

.flip-card__back {
    transform: rotateY(180deg);
}

.home-about__card {
    justify-self: center;
}

.home-about__info {
    justify-self: center;
    text-align: left;
}

.home-about__text {
    justify-self: center;
}


/* Infos */
.home-about__info {
    font-size: var(--font-size-xs);
    line-height: 1.6;
    text-transform: uppercase;
    letter-spacing: 0.15em;
}

.info-row {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-xs);
}

.info-label {
    color: var(--color-text-light);
    letter-spacing: 0.1em;
    text-transform: uppercase;

}

.info-value {
    letter-spacing: 0;
    text-transform: none;
}

/* Texte */
.home-about__text {
    max-width: var(--max-width-text);
    font-size: var(--font-size-sm);
    line-height: 1.8;
    letter-spacing: 0.08em;
}

/* Responsive */
@media (max-width: 980px) {
    .home-about__grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
        align-items: start;
    }

    .flip-card {
        width: min(420px, 90vw);
        height: min(420px, 90vw);
    }

    .home-about__info {
        letter-spacing: 0.12em;
    }
}




/* ==========================================================================
   PAGE PROJECTS (LA PLUS IMPORTANTE)
   ========================================================================== */

.projects-page {
    /* padding: var(--spacing-2xl) 0; */
}

.projects-header {
    text-align: center;
    margin-bottom: var(--spacing-2xl);
}

.projects-title {
    font-size: var(--font-size-3xl);
    font-weight: 200;
    letter-spacing: -0.01em;
    margin-bottom: var(--spacing-sm);
    display: none;
}

.projects-description {
    font-size: var(--font-size-lg);
    color: var(--color-text-light);
    font-weight: 300;
}

/* Grille des projets */
.projects-grid {
    display: flex;
    flex-direction: column;
}

/* Un seul projet */
.project-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 var(--spacing-lg);
    transition: transform var(--transition-slow);
}

.project-item img {
    opacity: .2;
    transition: scale 0.5s ease-in-out;
}

.project-item:hover img {
    opacity: 1;
    scale: 1.1;
    transition: scale 0.5s ease-in-out;
}

.project-item:hover {
    transform: translateY(-5px);
}

/* Parallax seulement pour les projets "photo" */
.project-item.is-photo .project-image-wrapper {
    overflow: hidden;
}

.project-item.is-photo .project-image {
    transform: translate3d(0, 0, 0) scale(1.08);
    will-change: transform;
}


/* Numéro du projet */

.project-text-wrapper {

    z-index: 1;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 100%;
    display: grid;
    align-items: center;
    grid-template-columns: repeat(12, calc(100%/12));

}

.project-number {
    font-size: var(--font-size-xs);
    letter-spacing: 0.2em;
    font-weight: 400;
}

/* Nom du projet avec fond "PROJECT" */
.project-name-wrapper {
    position: relative;
    /* text-align: center; */
    grid-column: 2/12;
    translate: 50% 0;
    transition: translate 0.5s ease-in-out;
}

.project-name {
    text-transform: uppercase;
    font-size: var(--font-size-sm);
    font-weight: 200;
    /* letter-spacing: 0.02em; */
    letter-spacing: 2em;
    text-align: center;
    position: relative;
    z-index: 2;
    padding: var(--spacing-sm);
    translate: -50% 0;
    width: fit-content;
    transition: translate 0.5s ease-in-out, letter-spacing 0.5s ease-in-out;
}

/* Image du projet */
.project-image-wrapper {
    position: relative;
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
    overflow: hidden;
}

.project-image {
    width: auto;
    max-height: 300px;
    display: inline-block;
    opacity: 0.85;
    transition: opacity var(--transition-slow), transform var(--transition-slow);
}

.project-item:hover .project-image {

    opacity: 1;
    transform: scale(1.02);
    margin: 0;
}

/* Catégorie du projet */
.project-category {
    grid-column: 12;
    font-size: var(--font-size-sm);
    letter-spacing: 0.15em;
    color: var(--color-text-light);
    font-weight: 400;
    white-space: nowrap;
    text-align: right;
}

/* Lien vers le projet (englobe tout) */
.project-link {
    position: relative;
    display: block;
    width: 100%;
}

.project-item .project-name {}

.project-item:hover .project-name-wrapper {
    translate: 0 0;
    transition: translate 0.5s ease-in-out;
}

.project-item:hover .project-name {
    letter-spacing: 0.02em;
    translate: 0 0;
    transition: translate 0.5s ease-in-out, letter-spacing 0.5s ease-in-out;
}

.single-project {
    /* padding-top: var(--spacing-xl); */
}

.project-header {
    text-align: center;
    min-height: 100vh;
    margin-bottom: var(--spacing-xl);
}

.project-meta {
    font-size: var(--font-size-sm);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--color-text-light);
    margin-bottom: var(--spacing-md);
}

.project-meta-separator {
    margin: 0 var(--spacing-xs);
}

.project-title-single {
    position: absolute;
    z-index: 0;
    width: 100vw;
    line-height: 1;
    color: #8c1b0b;
    font-size: 300px;
    font-weight: 800;
    text-transform: uppercase;
    display: flex;
    justify-content: center;
    top: 50%;
    transform: translateY(-50%);
    will-change: transform;
}

.project-modal-image {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    align-items: center;
    justify-content: center;
    width: 100vw;
    height: 100vh;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(20px);
    pointer-events: none;
    z-index: 5;
    pointer-events: none;
}

.project-modal-image.is-active {
    display: flex;
    pointer-events: auto;
}

.project-modal-image img {
    max-width: 75%;
    width: auto;
    max-height: 75%;
    height: 100%;
}




.project-title-single span {
    display: inline-block;
    white-space: nowrap;
    will-change: transform;
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    animation: titleMarquee 20s linear infinite;

}

@keyframes titleMarquee {
    from {
        transform: translate3d(0, 0, 0);
    }

    to {
        transform: translate3d(-50%, 0, 0);
    }
}


.project-excerpt {
    font-size: var(--font-size-lg);
    color: var(--color-text-light);
    max-width: 700px;
    margin: 0 auto;
    font-weight: 300;
}

.project-featured-image {
    object-fit: cover;
    width: 10%;
    top: 50%;
    transform: translate(-50%, -50%);
    left: 50%;
    position: absolute;
    z-index: 1;
}

.project-featured-image img {
    width: 100%;
    height: auto;
}

.project-content {
    padding: var(--spacing-xl) 0;
    line-height: 1.8;
}

.project-content p {
    margin-bottom: var(--spacing-md);
}

.project-content h2,
.project-content h3 {
    margin-top: var(--spacing-lg);
    margin-bottom: var(--spacing-md);
    font-weight: 300;
}

.project-gallery {
    padding: var(--spacing-xl) 0;
    background-color: var(--color-bg-alt);
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--spacing-md);
}

.gallery-item img {
    width: 100%;
    height: auto;
}

.parallax-wrap {
    will-change: transform;
    transform: translate3d(0, 0, 0);
}

.parallax-wrap>img {
    display: block;
}


.project-footer-label {
    font-weight: 400;
    margin-right: var(--spacing-xs);
}

.project-categories,
.project-date {
    margin-bottom: var(--spacing-sm);
}

.project-categories a {
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Navigation entre projets */
.project-navigation {
    padding: var(--spacing-2xl) 0;

}

.nav-links {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-md);
}

.nav-previous,
.nav-next {
    flex: 1;
}

.nav-next {
    text-align: right;
}

.nav-link {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    transition: opacity var(--transition-base);
}

.nav-link:hover {
    opacity: 0.6;
}

.nav-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.nav-subtitle {
    font-size: var(--font-size-xs);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-text-light);
}

.nav-title {
    font-size: var(--font-size-lg);
    font-weight: 300;
}

.nav-arrow {
    font-size: var(--font-size-2xl);
    font-weight: 200;
}

.nav-all-link {
    padding: var(--spacing-sm) var(--spacing-lg);
    border: 1px solid var(--color-primary);
    font-size: var(--font-size-sm);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    transition: all var(--transition-base);
    display: inline-block;
}

.nav-all-link:hover {
    background-color: var(--color-primary);
    color: var(--color-secondary);
    opacity: 1;
}

/* Responsive */
@media (max-width: 768px) {
    .project-title-single {
        font-size: var(--font-size-2xl);
    }

    .nav-links {
        flex-direction: column;
        gap: var(--spacing-lg);
    }

    .nav-previous,
    .nav-next {
        width: 100%;
        text-align: center;
    }

    .nav-link {
        justify-content: center;
    }

    .gallery-grid {
        grid-template-columns: 1fr;
    }
}


/* ==========================================================================
   PAGE CONTACT
   ========================================================================== */

.contact-page {
    max-width: 600px;
    margin: 0 auto;
    padding: var(--spacing-2xl) var(--spacing-md);
}

.contact-header {
    text-align: center;
    margin-bottom: var(--spacing-xl);
}

.contact-title {
    font-size: var(--font-size-3xl);
    font-weight: 200;
    letter-spacing: -0.01em;
    margin-bottom: var(--spacing-sm);
    display: none;
}

.contact-description {
    font-size: var(--font-size-lg);
    color: var(--color-text-light);
    font-weight: 300;
}

/* Formulaire de contact */
.contact-form {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.form-label {
    font-size: var(--font-size-sm);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 400;
    color: var(--color-text-light);
}

.form-input,
.form-textarea {
    padding: var(--spacing-sm) var(--spacing-md);
    border: 1px solid var(--color-border);
    background-color: var(--color-bg);
    font-family: var(--font-primary);
    font-size: var(--font-size-base);
    font-weight: 300;
    color: var(--color-text);
    transition: border-color var(--transition-base);
}

.form-input:focus,
.form-textarea:focus {
    outline: none;
    border-color: var(--color-primary);
}

.form-textarea {
    min-height: 200px;
    resize: vertical;
}

.form-submit {
    padding: var(--spacing-sm) var(--spacing-lg);
    border: 1px solid var(--color-primary);
    background-color: var(--color-bg);
    font-size: var(--font-size-sm);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 400;
    color: var(--color-primary);
    cursor: pointer;
    transition: all var(--transition-base);
    align-self: flex-start;
}

.form-submit:hover {
    background-color: var(--color-primary);
    color: var(--color-secondary);
}

.form-submit:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Message de confirmation/erreur */
.form-message {
    padding: var(--spacing-md);
    border-radius: 4px;
    font-size: var(--font-size-sm);
    text-align: center;
}

.form-message.success {
    background-color: #f0f9f4;
    color: #2d5f3f;
    border: 1px solid #c6e6d3;
}

.form-message.error {
    background-color: #fef2f2;
    color: #7f1d1d;
    border: 1px solid #fecaca;
}



/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

/* Tablettes et petits écrans */
@media (max-width: 768px) {
    :root {
        --spacing-lg: 2rem;
        --spacing-xl: 4rem;
        --spacing-2xl: 6rem;
    }

    .site-header {
        padding: var(--spacing-sm) var(--spacing-md);
    }

    .main-navigation ul {
        gap: var(--spacing-md);
    }

    .home-title {
        font-size: var(--font-size-3xl);
    }

    .home-subtitle {
        font-size: var(--font-size-lg);
    }

    .projects-title,
    .contact-title {
        font-size: var(--font-size-2xl);
    }

    .project-name {
        font-size: var(--font-size-xl);
    }

    .project-category {
        position: static;
        transform: none;
        margin-top: var(--spacing-sm);
    }

    .footer-container {
        flex-direction: column;
        text-align: center;
        gap: var(--spacing-sm);
    }
}

/* Mobiles */
@media (max-width: 480px) {
    .site-header {
        padding: var(--spacing-sm);
    }

    .main-navigation ul {
        gap: var(--spacing-sm);
    }

    .main-navigation a {
        font-size: var(--font-size-xs);
    }

    .home-title {
        font-size: var(--font-size-2xl);
    }

    .project-item {
        padding: var(--spacing-md) var(--spacing-sm);
    }

    .projects-grid {
        /* gap: var(--spacing-xl); */
    }
}

/* =========================
   MEGA MENU (Projects) - sous le header
   ========================= */

.main-navigation .menu-item-has-children {
    position: static;
}

.main-navigation .menu-item-has-children>.sub-menu {
    position: fixed;
    left: 0;
    top: var(--header-h);
    width: 100vw;
    height: calc(100vh - var(--header-h));
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0;
    padding-bottom: 100px;
    justify-content: space-between;
    background: #fff;

    /* IMPORTANT : en dessous du header */
    z-index: 999;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition: opacity .35s ease, visibility .35s ease;
}

.main-navigation .menu-item-has-children>.sub-menu::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -24px;
    /* hauteur du "pont" */
    height: 24px;
    background: transparent;
}

.main-navigation .menu-item-has-children.is-open>.sub-menu::before {
    background: white;
}

/* Ouverture UNIQUEMENT via is-open (sinon la X ne peut pas fermer) */
.main-navigation .menu-item-has-children.is-open>.sub-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}



/* ==========================================================================
   UTILITAIRES
   ========================================================================== */

.text-center {
    text-align: center;
}

.mb-0 {
    margin-bottom: 0;
}

.mb-sm {
    margin-bottom: var(--spacing-sm);
}

.mb-md {
    margin-bottom: var(--spacing-md);
}

.mb-lg {
    margin-bottom: var(--spacing-lg);
}

.mb-xl {
    margin-bottom: var(--spacing-xl);
}

.mt-0 {
    margin-top: 0;
}

.mt-sm {
    margin-top: var(--spacing-sm);
}

.mt-md {
    margin-top: var(--spacing-md);
}

.mt-lg {
    margin-top: var(--spacing-lg);
}

.mt-xl {
    margin-top: var(--spacing-xl);
}

/* Accessibilité : masquer visuellement mais garder pour lecteurs d'écran */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/*cta scrolle*/

.scroll-indicator {
    position: fixed;
    left: 50%;
    bottom: 28px;
    transform: translateX(-50%);
    z-index: 0;
    pointer-events: none;
    transition: opacity .3s ease, visibility .3s ease;
}

.scroll-indicator__mouse {
    width: 22px;
    height: 34px;
    border: 1px solid rgba(0, 0, 0, .55);
    border-radius: 999px;
    position: relative;
}

.scroll-indicator__dot {
    width: 4px;
    height: 4px;
    border-radius: 999px;
    background: #7a1c2e;
    /* bordeaux */
    position: absolute;
    left: 50%;
    top: 8px;
    transform: translateX(-50%);
    animation: scrollWheel 1.2s ease-in-out infinite;
}

.scroll-indicator.is-hidden {
    opacity: 0;
    visibility: hidden;
}

@keyframes scrollWheel {
    0% {
        transform: translateX(-50%) translateY(0);
        opacity: .4;
    }

    60% {
        transform: translateX(-50%) translateY(10px);
        opacity: 1;
    }

    100% {
        transform: translateX(-50%) translateY(14px);
        opacity: 0;
    }
}