/* ── LOCAL FONTS ─────────────────────────────────────────────────────── */
/* Self-hosted WOFF2 — eliminates render-blocking Google Fonts requests   */

/* Inter — normal variable */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/fonts/inter-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/fonts/inter-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Space Grotesk — normal variable */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/assets/fonts/space-grotesk-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/assets/fonts/space-grotesk-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Sacramento — regular */
@font-face {
  font-family: 'Sacramento';
  font-style: normal;
  font-weight: 400;
  font-display: optional;
  src: url('/assets/fonts/sacramento-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Sacramento';
  font-style: normal;
  font-weight: 400;
  font-display: optional;
  src: url('/assets/fonts/sacramento-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@layer {

    *,
    *::before,
    *::after {
        box-sizing: border-box;
        background-repeat: no-repeat;
    }

    * {
        padding: 0;
        margin: 0;
    }

    html {
        -webkit-text-size-adjust: none;
        text-size-adjust: none;
        line-height: 1.5;
        -webkit-font-smoothing: antialiased;
        block-size: 100%;
    }

    body {
        min-block-size: 100%;
    }

    img,
    iframe,
    audio,
    video,
    canvas {
        display: block;
        max-inline-size: 100%;
        block-size: auto;
    }

    svg {
        max-inline-size: 100%;
    }

    svg:not([fill]) {
        fill: currentColor;
    }

    input,
    button,
    textarea,
    select {
        font: inherit;
    }

    textarea {
        resize: vertical;
    }

    fieldset,
    iframe {
        border: none;
    }

    p,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        overflow-wrap: break-word;
    }

    p {
        text-wrap: pretty;
        font-variant-numeric: proportional-nums;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        font-variant-numeric: lining-nums;
    }

    p,
    blockquote,
    q,
    figcaption,
    li {
        hanging-punctuation: first allow-end last;
    }

    input,
    label,
    button,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        line-height: 1.1;
    }

    math,
    time,
    table {
        font-variant-numeric: tabular-nums lining-nums slashed-zero;
    }

    code {
        font-variant-numeric: slashed-zero;
    }

    table {
        border-collapse: collapse;
    }

    abbr {
        font-variant-caps: all-small-caps;
        text-decoration: none;

        &[title] {
            cursor: help;
            text-decoration: underline dotted;
        }
    }

    sup,
    sub {
        line-height: 0;
    }

    :disabled {
        opacity: 0.8;
        cursor: not-allowed;
    }

    :focus-visible {
        outline-offset: 0.2rem;
    }
}:root {
    --color-primary: #28e98c;
    --color-primary-dark: #22d17a;
    /* Vert profond, lisible sur fond sombre */
    --color-dark: #101010;
    /* Noir principal, légèrement chaud */
    --color-shadow: #202020;
    /* Noir secondaire / surfaces */
    --color-soft: #A8AEAD;
    --color-muted: #505050;
    --color-light: #E6E9E8;
    /* Blanc cassé légèrement froid */
}body {
    width: 100%;
    margin: 0 auto;
    overflow-x: hidden;
    padding: clamp(1rem, 1.5vw + 0.5rem, 2rem) clamp(1rem, 1.5vw + 0.5rem, 2rem) 0;
    display: flex;
    gap: clamp(2em, 1.4em + 1.5vw, 3em);
    flex-direction: column;
    background-color: var(--color-dark);
    font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    color: var(--color-light);

}

h2 {
    font-size: 1.75em;
    font-weight: 600;
    font-family: "Space Grotesk", system-ui, sans-serif;
}

a {
    color: var(--color-light);
    text-decoration: none;

    &:hover {
        cursor: pointer;
        text-decoration: underline;
        color: var(--color-primary);
    }
}

/* INLINE SVG ICONS */
svg.icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
    flex-shrink: 0;
}

@keyframes icon-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

svg.icon.icon-spin {
    animation: icon-spin 1s linear infinite;
}

/* UTILS */
.border-subtle {
    border: 0.5px solid var(--color-muted);
}

main {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 2.5em;
    width: 100%;


    @media screen and (min-width: 720px) {
        &.main {
            margin-top: 1.5em;
        }
    }

    @media (min-width: 1380px) {
        &.main {
            flex: 1;
            padding: 1.5em;
            overflow-x: hidden;
            max-width: 1020px;
            margin-left: 320px;
        }
    }
}

/* SCROLL TO TOP */
.scroll-top-btn {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    background-color: var(--color-dark);
    color: var(--color-primary);
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s, background-color 0.2s, color 0.2s;
}

.scroll-top-btn.visible {
    opacity: 1;
    pointer-events: auto;
}

.scroll-top-btn:hover {
    background-color: var(--color-primary);
    color: var(--color-dark);
}

section {
    width: 100%;

    .section-title {
        font-weight: 500;
        font-family: "Inter";
        margin-bottom: 1.5em;
        display: flex;
        flex-direction: row;
        gap: 0.5em;
        align-items: center;
        justify-content: flex-start;
    }
}.navbox {
    padding: clamp(1em, 0.46em + 1.45vw, 1.5em);
    border-radius: 1em;
    background-color: var(--color-shadow);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: clamp(1em, 0.19em + 2.17vw, 1.75em);

    .avatar {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;

        .avatar-img {
            border-radius: 1em;
            width: 60%;
            max-width: 320px;
        }
    }

    .contactInfos {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1em;
    }

    .badge {
        padding: 0.5em;
        border-radius: 0.5em;
        display: inline-flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.5em;

        .dot {
            width: 0.5em;
            height: 0.5em;
            background-color: var(--color-primary);
            border-radius: 100%;
            position: relative;
            animation: sonar-pulse 2s ease-out infinite;

            &::before,
            &::after {
                content: "";
                position: absolute;
                top: 50%;
                left: 50%;
                width: 0.5em;
                height: 0.5em;
                background-color: var(--color-primary);
                border-radius: 100%;
                transform: translate(-50%, -50%);
            }

            &::before {
                animation: sonar-expand 2s ease-out infinite;
            }

            &::after {
                animation: sonar-expand 2s ease-out 0.5s infinite;
            }
        }
    }

    .name {
        margin: 0 1.5em;
    }

    .socials {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-evenly;
        gap: 1em;

        .socialIcon {
            padding: 0.5em;
            width: 2em;
            height: 2em;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 0.5em;
            transition: transform 0.25s ease, box-shadow 0.25s ease;
            font-size: 1.25em;
            line-height: 1.25em;

            &:hover {
                scale: 1.05;
                cursor: pointer;
                box-shadow: 0 0 12px rgba(230, 233, 232, 0.15);
            }

            i.fa-brands {
                font-size: 1.25em;
                line-height: 1.25em;
                border: 0;
                margin: 0;
                padding: 0;
            }
        }
    }

    .buttons {
        display: inline-flex;
        gap: 0.5em;
        align-items: center;
        justify-content: center;

        .btn {
            padding: 0.5em 1em;
            border-radius: 0.5em;
            display: flex;
            flex-direction: row;
            gap: 0.5em;
            align-items: center;
            justify-content: center;
            border: 1px solid;
            text-decoration: none;
            color: inherit;
            line-height: inherit;
            background: none;

            &:hover {
                cursor: pointer;
                scale: 1.05;
            }
        }

        .btn-dark {
            background-color: var(--color-muted);
            border-color: var(--color-muted);

            &:hover {
                border-color: var(--color-light);
            }
        }

        .btn-primary {
            background-color: var(--color-primary-dark);
            color: var(--color-shadow);
            border-color: var(--color-primary-dark);

            &:hover {
                border-color: var(--color-shadow);
            }
        }
    }

}

@media screen AND (min-width: 720px) {
    .navbox {
        flex-direction: row;
        align-items: flex-start;
        justify-content: flex-start;
        height: 35vh;
        max-height: 320px;


        .avatar {
            width: 100%;
            height: 100%;
            max-width: 240px;

            .avatar-img {
                width: 100%;
                height: 100%;
                aspect-ratio: 1 / 1;
                object-fit: cover;
                margin: 0;
            }
        }

        .contactInfos {
            height: 100%;
            align-items: flex-start;
            justify-content: space-between;
            font-size: 1.25em;
        }

        .name {
            font-size: 1.75em;
            text-align: left;
            width: 100%;
            margin: 0;
        }

        .btn {
            font-size: 0.9em;
            padding: 0.75em 1.5em;
        }
    }
}

@media (min-width: 1380px) {
    .navbox {
        position: fixed;
        top: 1.25em;
        left: 1.25em;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        height: 60vh;
        min-height: 540px;
        max-height: 720px;
        width: 320px;
        overflow-y: auto;


        .avatar {
            width: 100%;
            flex-shrink: 0;
            height: auto;

            .avatar-img {
                width: 100%;
                height: auto;
                aspect-ratio: 1 / 1;
                object-fit: cover;
                margin: 0;
            }
        }

        .contactInfos {
            width: 100%;
            height: 100%;
            align-items: center;
            justify-content: flex-start;
            font-size: 1em;
            gap: 1.5em;
        }

        .name {
            font-size: 1.5em;
            text-align: center;
            width: 100%;
            margin: 0;
        }

        .btn {
            font-size: 0.9em;
            padding: 0.75em 1.5em;
        }
    }
}

@keyframes sonar-expand {
    0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 1;
    }

    100% {
        transform: translate(-50%, -50%) scale(2);
        /* 0.5em → 1em */
        opacity: 0;
    }
}

@keyframes sonar-pulse {

    0%,
    100% {
        opacity: 1;
    }

    70% {
        opacity: 0.7;
    }
}.about {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: clamp(1.25em, 0.1em + 3.1vw, 2.5em);

    .hello {
        font-size: clamp(1em, 0.75em + 0.7vw, 1.25em);
        font-weight: 600;
        font-family: "Space Grotesk", system-ui, sans-serif;
        margin: 0;
    }

    /* TYPEWRITER */
    .typewriter-line {
        display: inline-flex;
        align-items: baseline;
        margin: 0;
        height: clamp(1.5em, 1em + 1.4vw, 2em);
        font-size: clamp(1.5em, 1em + 1.4vw, 2em);
        font-weight: 600;
        font-family: "Space Grotesk", system-ui, sans-serif;
        color: var(--color-primary);

        .cursor {
            color: var(--color-primary);
            font-weight: 300;
            animation: blink 1s step-start infinite;
            line-height: 1;
        }
    }

}

.about-title,
.about-subtitle {
    font-size: clamp(1.5em, 1em + 1.4vw, 2em);
    font-weight: 600;
    font-family: "Space Grotesk", system-ui, sans-serif;
    margin: 0;
}

.about-subtitle .nowrap {
    white-space: nowrap;
    font-size: clamp(0.9em, 4vw, 1em);
    line-height: inherit;
}

.resume-text {
    font-family: "Inter", sans-serif;
    font-size: 1.25em;
    font-weight: 400;

    strong {
        color: var(--color-primary-dark);
        font-weight: 500;
    }
}

.insights {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, auto);
    place-items: center;
    gap: 1.5em;
    width: 100%;

    .insight {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 1em;

        .insight-num {
            font-family: "Space Grotesk", system-ui, sans-serif;
            font-size: 2em;
            font-weight: 600;
            text-align: center;
        }

        .insight-txt {
            font-size: 1.25em;
            color: var(--color-soft);
        }
    }

    @media screen AND (min-width: 720px) {
        & {
            max-width: 60vw;
            margin: 0 auto;
        }
    }
}

@keyframes blink {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }
}.experiences .cards,
.education .cards {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    gap: 1em;

    .experience-card {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: space-between;
        gap: clamp(1em, 0.57em + 1.15vw, 1.75em);
        width: 100%;
        padding: clamp(1em, 0.57em + 1.15vw, 1.75em);
        border-radius: clamp(1em, 0.57em + 1.15vw, 1.75em);
        background-color: var(--color-shadow);

        .top {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
            gap: clamp(1em, 0.71em + 0.77vw, 1.5em);
            flex-wrap: wrap;

            .exp-logo {
                height: clamp(3.5em, 2.06em + 3.85vw, 6em);
                width: clamp(3.5em, 2.06em + 3.85vw, 6em);
                object-fit: cover;
                border-radius: 100%;
                background-color: var(--color-light);
                flex-shrink: 2;
            }

            .infos {
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: flex-start;
                gap: 0.5em;
                flex-grow: 2;
                flex-shrink: 1;

                .title {
                    font-family: "Space Grotesk", system-ui, sans-serif;
                    font-weight: 600;
                    font-size: clamp(1.25em, 0.82em + 1.15vw, 2em);
                    line-height: 1.5em;
                }

                .subtitle {
                    font-weight: 400;
                    font-size: clamp(1em, 0.75em + 0.7vw, 1.25em);
                    color: var(--color-soft);
                }
            }

            .dates {
                padding: 0.5em;
                background-color: var(--color-muted);
                border-radius: 0.5em;
                font-weight: 500;
                font-size: clamp(1em, 0.71em + 0.77vw, 1.5em);
                flex-shrink: 2;
            }
        }

        .separator {
            width: 100%;
            height: clamp(1px, 0.5px + 0.2vw, 3px);
            background-color: var(--color-muted);
        }

        .bottom {
            font-size: clamp(1em, 0.71em + 0.77vw, 1.5em);
        }
    }
}

.experiences .cards.collapsed .experience-card:not(:first-child),
.education .cards.collapsed .experience-card:not(:first-child) {
    display: none;
}

.show-more-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    margin-top: 0.75em;
    padding: 0.6em 1.25em;
    width: 100%;
    background: transparent;
    border: 1px solid var(--color-muted);
    border-radius: 0.75em;
    color: var(--color-soft);
    font-size: 0.95em;
    font-family: inherit;
    cursor: pointer;
    transition: color 0.2s, border-color 0.2s;
}

.show-more-btn:hover {
    color: var(--color-primary);
    border-color: var(--color-primary);
}

.show-more-icon {
    transition: transform 0.3s ease;
}

.show-more-btn[aria-expanded="true"] .show-more-icon {
    transform: rotate(180deg);
}
/* Mobile only: keep 1 */
@media screen and (max-width: 719px) {
    .projects .cards.collapsed .project-card:nth-child(n+2) {
        display: none;
    }
}

/* Tablet only: keep 2 */
@media screen and (min-width: 720px) and (max-width: 1379px) {
    .projects .cards.collapsed .project-card:nth-child(n+3) {
        display: none;
    }
}

/* Desktop: keep 3 */
@media screen and (min-width: 1380px) {
    .projects .cards.collapsed .project-card:nth-child(n+4) {
        display: none;
    }
}

.projects {
    width: 100%;

    .cards {
        display: grid;
        grid-template-columns: 1fr;
        gap: 1em;
        width: 100%;

        @media screen and (min-width: 720px) {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        @media screen and (min-width: 1380px) {
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }


        .project-card {
            display: flex;
            flex-direction: column;
            gap: 1em;
            padding: 1em;
            border-radius: 1em;
            width: 100%;
            background-color: var(--color-shadow);
            color: var(--color-light);
            text-decoration: none;
            cursor: pointer;

            &:hover,
            &:focus {
                box-shadow: 0 0 0.25em var(--color-light);
                transition: box-shadow 0.3s ease;
            }

            .project-screenshot {
                width: 100%;
                height: clamp(150px, 15vw + 50px, 280px);
                object-fit: cover;
                border-radius: 0.5em;
            }

            .bottom {
                display: flex;
                flex-direction: row;
                align-items: flex-start;
                justify-content: space-between;
                gap: 1em;

                .infos {
                    flex-grow: 2;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    align-items: flex-start;
                    gap: 1em;

                    .title {
                        font-family: "Space Grotesk", system-ui, sans-serif;
                        font-size: 1.5em;
                        font-weight: 600;
                        white-space: nowrap;
                    }

                    .metadatas {
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        gap: 0.5em;
                        color: var(--color-soft);

                        .subtitle {
                            font-weight: 400;
                            font-size: 1em;
                        }

                        .dot {
                            display: block;
                            width: 5px;
                            height: 5px;
                            border-radius: 100%;
                            background-color: var(--color-soft);
                        }
                    }
                }

                .arrows {
                    padding: 0.5em;
                    width: 2.5em;
                    height: 2.5em;
                    position: relative;
                    overflow: hidden;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    border-radius: 100%;
                    transform: rotate(45deg);
                    background-color: var(--color-muted);
                    flex-shrink: 0;

                    transition: background-color 0.3s ease, color 0.3s ease;

                    .first,
                    .second {
                        position: absolute;
                        transition: transform 0.3s ease;
                    }

                    /* 1ère flèche : cachée au sud-ouest au repos */
                    .first {
                        transform: translateY(200%);
                    }

                    /* 2ème flèche : visible au centre au repos */
                    .second {
                        transform: translate(0, 0);
                    }

                    /* Animation déclenchée par le hover/focus du .project-card parent */
                    .project-card:hover &,
                    .project-card:focus & {
                        background-color: var(--color-light);
                        color: var(--color-muted);

                        .first {
                            transform: translate(0, 0);
                        }

                        .second {
                            transform: translateY(-200%);
                        }
                    }
                }

            }


        }

    }

}/* Mobile only: keep 3 */
@media screen and (max-width: 719px) {
    .stacks-container.collapsed .stack-card:nth-child(n+4) {
        display: none;
    }
}

/* Tablet only: keep 4 */
@media screen and (min-width: 720px) and (max-width: 1379px) {
    .stacks-container.collapsed .stack-card:nth-child(n+5) {
        display: none;
    }
}

/* Desktop: keep 3 */
@media screen and (min-width: 1380px) {
    .stacks-container.collapsed .stack-card:nth-child(n+4) {
        display: none;
    }
}

.stacks-container {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1em;
    width: 100%;

    @media screen and (min-width: 720px) {
        grid-template-columns: repeat(2, 1fr);
    }

    @media screen and (min-width: 1380px) {
        grid-template-columns: repeat(3, 1fr);
    }

    .stack-card {
        width: 100%;
        height: 100%;
        padding: 0.75em 1em;
        border-radius: 0.5em;
        background-color: var(--color-shadow);
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: 1em;

        .stack-img {
            height: 3em;
            width: 3em;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 0.5em;
            background-color: var(--color-dark);

            .icon {
                font-size: 1.5em;
            }

        }

        .stack-name h3 {
            font-size: 1.25em;
            font-weight: 500;
        }

        .stack-info p {
            font-size: 0.9em;
            font-weight: 400;
            color: var(--color-soft);
        }
    }
}.contact {
    width: 100%;
}

/* ── ACCESSIBILITY ───────────────────────────────────────────────────── */

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ── HONEYPOT (anti-bot) ─────────────────────────────────────────────── */

.contact-honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
    pointer-events: none;
}

/* ── FIELD ERROR MESSAGE ─────────────────────────────────────────────── */

.field-error-msg {
    display: block;
    color: #f08080;
    font-size: 0.8em;
    margin-top: 0.3em;
}

/* ── LAYOUT ─────────────────────────────────────────────────────────── */

/* Mobile : tout en colonne */
.contact-wrapper {
    display: flex;
    flex-direction: column;
    gap: 1.5em;
    width: 100%;
}

/* Tablette : grille 2 colonnes pour contact-info / formulaire */
/* Le heading et le bouton restent en dehors → pleine largeur */
.contact .content {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2em;
    width: 100%;
}

@media screen and (min-width: 720px) {
    .contact .content {
        grid-template-columns: 1fr 1fr;
        align-items: start;
    }
}

/* Desktop : le wrapper devient aussi une grille 2 colonnes
   — le heading couvre les 2 colonnes
   — .content couvre les 2 colonnes
   — le bouton se positionne sur la 2ème colonne uniquement */
@media screen and (min-width: 1380px) {
    .contact-wrapper {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1.5em;
    }

    .contact-wrapper > .contact-heading {
        grid-column: 1 / -1;
    }

    .contact-wrapper > .content {
        grid-column: 1 / -1;
    }

    .contact-submit-btn {
        grid-column: 2 / 3;
    }
}

/* ── INFO COLUMN ─────────────────────────────────────────────────────── */

.contact-info {
    display: flex;
    flex-direction: column;
    gap: 0.75em;
}

.contact-heading {
    font-family: "Space Grotesk", sans-serif;
    font-size: 1.5em;
    font-weight: 700;
    margin: 0;
    color: var(--color-light);
}

.contact-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1em;
    padding: 1em;
    border-radius: 0.75em;
    background-color: var(--color-shadow);
}

.contact-icon {
    font-size: 1.25em;
    color: var(--color-primary);
    flex-shrink: 0;
    width: 1.5em;
    text-align: center;
}

.contact-label {
    display: block;
    font-size: 0.8em;
    color: var(--color-soft);
    margin-bottom: 0.2em;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.contact-value {
    font-size: 0.95em;
    font-weight: 500;
    color: var(--color-light);
    word-break: break-all;
}

/* ── FORM ─────────────────────────────────────────────────────────────── */

.contact-form-wrapper {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 0.75em;
}

.form-field {
    width: 100%;
}

.form-input {
    width: 100%;
    box-sizing: border-box;
    background-color: var(--color-shadow);
    border: 0.5px solid var(--color-muted);
    border-radius: 0.5em;
    color: var(--color-light);
    font-family: "Inter", sans-serif;
    font-size: 1em;
    padding: 0.75em 1em;
    outline: 2px solid transparent;
    outline-offset: 2px;
    transition: border-color 0.2s ease, outline-color 0.2s ease;
    resize: none;
}

.form-input::placeholder {
    color: var(--color-soft);
}

.form-input:focus {
    border-color: var(--color-primary);
}

.form-input.input-error {
    border-color: #e05252;
}

.form-textarea {
    min-height: 7em;
    resize: vertical;
}

/* ── SUBMIT BUTTON ───────────────────────────────────────────────────── */

.contact-submit-btn {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    padding: 0.85em 1em;
    font-size: 1em;
    font-weight: 600;
    font-family: inherit;
    border-radius: 0.5em;
    border: 1px solid var(--color-primary-dark);
    background-color: var(--color-primary-dark);
    color: var(--color-shadow);
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.contact-submit-btn:hover:not(:disabled) {
    opacity: 0.88;
}

.contact-submit-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ── TOAST NOTIFICATION ──────────────────────────────────────────────── */

.contact-toast[hidden] {
    display: none;
}

.contact-toast {
    display: flex;
    align-items: center;
    gap: 0.75em;
    padding: 0.9em 1.1em;
    border-radius: 0.6em;
    font-size: 0.95em;
    font-weight: 500;
    margin-bottom: 1em;
    border: 0.5px solid transparent;
}

.contact-toast.toast-success {
    background-color: rgba(40, 233, 140, 0.12);
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.contact-toast.toast-error {
    background-color: rgba(224, 82, 82, 0.12);
    border-color: #e05252;
    color: #f08080;
}

.contact-toast i {
    flex-shrink: 0;
    font-size: 1.1em;
}/* ── FOOTER ───────────────────────────────────────────────────────────── */

.site-footer {
    width: 100%;
    border-top: 0.5px solid var(--color-muted);
    background-color: var(--color-dark);
    padding: 1.5em 1.5em 1.5em;
    box-sizing: border-box;
}

/* ── MAIN ROW ─────────────────────────────────────────────────────────── */

.footer-main {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25em;
    text-align: center;
}

@media screen and (min-width: 1200px) {
    .footer-main {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        text-align: left;
    }
}

/* ── COLUMNS ──────────────────────────────────────────────────────────── */

.footer-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5em;
}

@media screen and (min-width: 1200px) {
    .footer-col--left {
        align-items: flex-start;
    }

    .footer-col--right {
        align-items: flex-end;
    }
}

/* ── LEFT — tech stack ────────────────────────────────────────────────── */

.footer-built-label {
    font-size: 0.8em;
    color: var(--color-soft);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.footer-tech-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5em;
    justify-content: center;
}

@media screen and (min-width: 720px) {
    .footer-tech-badges {
        justify-content: flex-start;
    }
}

.footer-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    font-size: 0.82em;
    font-weight: 600;
    color: var(--color-light);
    background-color: var(--color-shadow);
    border: 0.5px solid var(--color-muted);
    border-radius: 0.4em;
    padding: 0.25em 0.6em;
}

.footer-icon {
    font-size: 1.1em;
}

.footer-icon--html {
    color: #e34f26;
}

.footer-icon--css {
    color: #264de4;
}

.footer-icon--js {
    color: #f7df1e;
}

/* ── CENTER — signature ───────────────────────────────────────────────── */

.footer-signature {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.65em;
}

.footer-avatar {
    width: 2.2em;
    height: 2.2em;
    border-radius: 50%;
    object-fit: cover;
    border: 1.5px solid var(--color-muted);
}

.footer-name {
    font-family: "Sacramento", cursive;
    font-size: 1.6em;
    color: var(--color-light);
    line-height: 1;
    position: relative;
    top: 5px;
}

/* ── RIGHT — credit ───────────────────────────────────────────────────── */

.footer-credit {
    font-size: 0.85em;
    color: var(--color-soft);
    white-space: nowrap;
}

/* ── BOTTOM ROW — terms link ──────────────────────────────────────────── */

.footer-bottom {
    margin-top: 1.25em;
    padding-top: 0.75em;
    padding-bottom: 0;
    border-top: 0.5px solid var(--color-muted);
    text-align: center;
}

.footer-terms-link {
    color: var(--color-soft);
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer-terms-link:hover {
    color: var(--color-primary);
    text-decoration: underline;
}/* ── COOKIE BANNER ─────────────────────────────────────────────────────── */

.cookie-banner {
    position: fixed;
    bottom: 1.25rem;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 2rem);
    max-width: 560px;
    background: var(--color-shadow);
    border: 0.5px solid var(--color-muted);
    border-radius: 12px;
    padding: 1.25rem 1.5rem 1.25rem 1.25rem;
    z-index: 9999;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.55);
    font-family: "Inter", sans-serif;

    /* entrance animation */
    animation: cookie-slide-up 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.cookie-banner[hidden] {
    display: none;
}

@keyframes cookie-slide-up {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(1.5rem);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

/* Close (×) button — top-right corner */
.cookie-close {
    position: absolute;
    top: 0.65rem;
    right: 0.75rem;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-muted);
    font-size: 1rem;
    line-height: 1;
    padding: 0.25rem;
    transition: color 0.2s ease;
}

.cookie-close:hover {
    color: var(--color-light);
}

/* Text */
.cookie-text {
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--color-soft);
    margin: 0 0 1rem;
    padding-right: 1.25rem; /* room for the × */
}

.cookie-link {
    color: var(--color-primary);
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.cookie-link:hover {
    opacity: 0.8;
}

/* Action row */
.cookie-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    justify-content: flex-end;
}

/* Shared button base */
.cookie-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: "Inter", sans-serif;
    font-size: 0.825rem;
    font-weight: 500;
    padding: 0.45em 1.1em;
    border-radius: 6px;
    border: 0.5px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: opacity 0.2s ease, background 0.2s ease;
    white-space: nowrap;
}

/* Refuse — ghost / muted */
.cookie-btn--refuse {
    background: transparent;
    border-color: var(--color-muted);
    color: var(--color-soft);
}

.cookie-btn--refuse:hover {
    border-color: var(--color-light);
    color: var(--color-light);
}

/* Accept — brand green */
.cookie-btn--accept {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-dark);
}

.cookie-btn--accept:hover {
    background: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
}

/* Dismiss animation */
.cookie-banner.cookie-dismiss {
    animation: cookie-slide-down 0.25s ease forwards;
}

@keyframes cookie-slide-down {
    to {
        opacity: 0;
        transform: translateX(-50%) translateY(1.5rem);
    }
}
/* ── TERMS PAGE ───────────────────────────────────────────────────────── */

.terms-page {
    min-height: 100vh;
    background-color: var(--color-dark);
    color: var(--color-light);
    font-family: "Inter", sans-serif;
}

.terms-container {
    max-width: 760px;
    margin: 0 auto;
    padding: 2em 1.5em 3em;
    box-sizing: border-box;
}

/* ── HEADER ───────────────────────────────────────────────────────────── */

.terms-header {
    margin-bottom: 2.5em;
}

.terms-back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    font-size: 0.85em;
    color: var(--color-soft);
    text-decoration: none;
    margin-bottom: 1.5em;
    transition: color 0.2s ease;
}

.terms-back-link:hover {
    color: var(--color-primary);
}

.terms-title {
    font-family: "Space Grotesk", sans-serif;
    font-size: 2em;
    font-weight: 700;
    color: var(--color-light);
    margin: 0 0 0.25em;
}

.terms-date {
    font-size: 0.85em;
    color: var(--color-soft);
    margin: 0;
}

/* ── CONTENT ──────────────────────────────────────────────────────────── */

.terms-content {
    display: flex;
    flex-direction: column;
    gap: 2em;
}

.terms-section h2 {
    font-family: "Space Grotesk", sans-serif;
    font-size: 1.1em;
    font-weight: 600;
    color: var(--color-primary);
    margin: 0 0 0.6em;
}

.terms-section p {
    font-size: 0.95em;
    line-height: 1.7;
    color: var(--color-soft);
    margin: 0 0 0.75em;
}

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

.terms-section h3 {
    font-family: "Space Grotesk", sans-serif;
    font-size: 0.95em;
    font-weight: 600;
    color: var(--color-light);
    margin: 1.25em 0 0.5em;
}

.terms-section ul {
    margin: 0 0 0.75em 1.25em;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35em;
}

.terms-section ul li {
    font-size: 0.95em;
    line-height: 1.7;
    color: var(--color-soft);
}

.terms-section strong {
    color: var(--color-light);
    font-weight: 600;
}

.terms-section code {
    font-family: "Space Mono", "Courier New", monospace;
    font-size: 0.85em;
    color: var(--color-primary);
    background: rgba(40, 233, 140, 0.08);
    padding: 0.1em 0.35em;
    border-radius: 3px;
}

/* ── TABLE ────────────────────────────────────────────────────────────── */

.terms-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88em;
    margin: 0.75em 0;
}

.terms-table th,
.terms-table td {
    text-align: left;
    padding: 0.55em 0.75em;
    border-bottom: 0.5px solid rgba(80, 80, 80, 0.5);
    color: var(--color-soft);
    line-height: 1.5;
}

.terms-table th {
    font-family: "Space Grotesk", sans-serif;
    font-weight: 600;
    color: var(--color-light);
    background: rgba(255, 255, 255, 0.03);
}

.terms-table tr:last-child td {
    border-bottom: none;
}

.terms-link {
    color: var(--color-primary);
    text-decoration: underline;
    text-underline-offset: 0.15em;
    transition: opacity 0.2s ease;
}

.terms-link:hover {
    opacity: 0.8;
}

/* ── FOOTER ───────────────────────────────────────────────────────────── */

.terms-footer {
    margin-top: 3em;
    padding-top: 1.5em;
    border-top: 0.5px solid var(--color-muted);
    text-align: center;
    font-size: 0.85em;
    color: var(--color-soft);
}

.terms-footer p {
    margin: 0;
}