@font-face {
    font-family: "Ogg";
    src: url("Ogg-Regular.woff2") format("woff2");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

:root {
    /* Tokens */

    /* colors green */
    --color-green-50: #f8faf7;
    --color-green-100: #e8eee3;
    --color-green-200: #d7e1ce;
    --color-green-300: #c5d3b7;
    --color-green-400: #acc198;
    --color-green-500: #8ca970;
    --color-green-600: #6f8d53;
    --color-green-700: #5b7344;
    --color-green-800: #4b5f38;
    --color-green-900: #354428;
    --color-green-950: #212919;

    --color-accent: #b6c300;

    /* colors grey */
    --color-grey-50: #f9f9f9;
    --color-grey-100: #f5f5f5;
    --color-grey-200: #dedede;
    --color-grey-300: #cecece;
    --color-grey-400: #bababa;
    --color-grey-500: #a0a0a0;
    --color-grey-600: #848484;
    --color-grey-700: #6c6c6c;
    --color-grey-800: #595959;
    --color-grey-950: #2e2e2e;
    --color-grey-900: #1c1c1c;

    /* font size */
    --font-1: 0.25em; /* 4px */
    --font-2: 0.5em; /* 8px */
    --font-3: 0.75em; /* 12px */
    --font-3-5: 0.875em; /* 14px */
    --font-4: 1em; /* 16px */
    --font-4-5: 1.125em; /* 18px */
    --font-5: 1.25em; /* 20px */
    --font-6: 1.5em; /* 24px */
    --font-12: 3em; /* 48px */
    --font-16: 4em; /* 64px */
    --font-17: 8em; /* 128px */

    /* spacing size */
    --spacing-0: 0em; /* 0px */
    --spacing-05: 0.125em; /* 2px */
    --spacing-1: 0.25em; /* 4px */
    --spacing-2: 0.5em; /* 8px */
    --spacing-3: 0.75em; /* 12px */
    --spacing-4: 1em; /* 16px */
    --spacing-5: 1.25em; /* 20px */
    --spacing-6: 1.5em; /* 24px */
    --spacing-7: 1.75em; /* 28px */
    --spacing-8: 2em; /* 32px */
    --spacing-9: 2.25em; /* 36px */
    --spacing-10: 2.5em; /* 40px */
    --spacing-11: 2.75em; /* 44px */
    --spacing-12: 3em; /* 48px */
    --spacing-14: 3.5em; /* 56px */
    --spacing-16: 4em; /* 64px */
    --spacing-20: 5em; /* 80px */
    --spacing-24: 6em; /* 96px */
    --spacing-32: 8em; /* 128px */

    /* font weight */
    --font-weight-light: 300;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-bold: 700;

    /* paragraph spacing */
    --paragraph-spacing-default: 0px;

    /*------------------------------------------------------------------------------------------*/

    /* Primary */

    /* spacing */
    --spacing-none: var(--spacing-0);
    --spacing-xs: var(--spacing-1);
    --spacing-sm: var(--spacing-2);
    --spacing-md: var(--spacing-4);
    --spacing-lg: var(--spacing-6);
    --spacing-xl: var(--spacing-8);
    --spacing-xxl: var(--spacing-12);
    --spacing-3xl: var(--spacing-16);
    --spacing-4xl: var(--spacing-24);
    --spacing-5xl: var(--spacing-32);

    /* text size cross device */
    --text-size-body: var(--font-4);
    --text-size-body-xs: var(--font-3-5);

    /* text size desktop */
    --text-size-desktop-display-1: var(--font-16);
    --text-size-desktop-display-2: var(--font-12);
    --text-size-desktop-display-3: var(--font-6);

    /* text size mobile */
    --text-size-mobile-display-1: var(--font-12);
    --text-size-mobile-display-2: var(--font-6);
    --text-size-mobile-display-3: var(--font-5);

    /* letter spacing */
    --letter-spacing-uppercase: 1px;
    --letter-spacing-body: 0;
    --letter-spacing-display: -0.5px;

    /* line spacing */
    --line-spacing-body: calc(var(--text-size-body) * 1.5);
    --line-spacing-body-xs: calc(var(--text-size-body-xs) * 1.7);

    --line-spacing-desktop-display-1: calc(var(--text-size-desktop-display-1) * 0.3);
    --line-spacing-desktop-display-2: calc(var(--text-size-desktop-display-2) * 0.4);
    --line-spacing-desktop-display-3: calc(var(--text-size-desktop-display-3) * 0.8);

    --line-spacing-mobile-display-1: calc(var(--text-size-mobile-display-1) * 0.4);
    --line-spacing-mobile-display-2: calc(var(--text-size-mobile-display-2) * 0.9);
    --line-spacing-mobile-display-3: calc(var(--text-size-mobile-display-3) * 0.9);

    /* color */
    --text-primary: var(--color-grey-950);

    --foreground-primary: var(--color-grey-950);

    --border: var(--color-grey-300);

    --background-body: var(--color-grey-100);
    --background-body-background: rgba(245, 245, 245, 0.9);
    --background-surface: var(--color-grey-50);

    /* string */
    --font-family-font-family-1: "Ogg";
    --font-family-font-family-2: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
        Arial, sans-serif;

    /*------- PAGE STRUCTURE ------*/
    position: relative;
    font-family: var(--font-family-font-family-2);
    background-color: var(--background-body);
    color: var(--text-primary);
}

html[data-theme="dark"] {
    --text-primary: var(--color-grey-50);

    --foreground-primary: var(--color-grey-50);

    --border: var(--color-grey-800);

    --background-body: var(--color-grey-900);
    --background-body-background: rgba(28, 28, 28, 0.9);
    --background-surface: var(--color-grey-950);
}

@media only screen and (min-width: 1080px) {
    body {
        margin: var(--spacing-none);
    }

    .display1 {
        font-size: var(--text-size-desktop-display-1);
        line-height: var(--line-spacing-desktop-display-1);
        letter-spacing: var(--letter-spacing-display);
    }

    .display2 {
        font-size: var(--text-size-desktop-display-2);
        line-height: var(--line-spacing-desktop-display-2);
        letter-spacing: var(--letter-spacing-display);
    }

    .display3 {
        font-size: var(--text-size-desktop-display-3);
        line-height: var(--line-spacing-desktop-display-3);
        letter-spacing: var(--letter-spacing-display);
    }
}

@media only screen and (max-width: 1080px) {
    body {
        margin: var(--spacing-none);
    }

    .display1 {
        font-size: var(--text-size-mobile-display-1);
        line-height: var(--line-spacing-mobile-display-1);
        letter-spacing: var(--letter-spacing-display);
    }

    .display2 {
        font-size: var(--text-size-mobile-display-2);
        line-height: var(--line-spacing-mobile-display-2);
        letter-spacing: var(--letter-spacing-display);
    }

    .display3 {
        font-size: var(--text-size-mobile-display-3);
        line-height: var(--line-spacing-mobile-display-3);
        letter-spacing: var(--letter-spacing-display);
    }
}

body::-webkit-scrollbar {
    display: none;
}

body {
    position: relative;
}

section {
    padding: var(--spacing-5xl) var(--spacing-md);
    position: relative;
}

main {
    background: var(--background-body);
    z-index: 1;
    position: relative;
    margin-top: 100vh;

    background-image: linear-gradient(
            to right,
            transparent 33%,
            rgba(124, 124, 124, 0.1) 33%,
            rgba(124, 124, 124, 0.1) 33.1%,
            transparent 33.1%
        ),
        linear-gradient(
            to right,
            transparent 66%,
            rgba(124, 124, 124, 0.1) 66%,
            rgba(124, 124, 124, 0.1) 66.1%,
            transparent 66.1%
        );
    background-size: 100% 100%; /* Taille de la grille */
}

a {
    text-decoration: none;
    transition: all 0.1s ease-out;
    color: var(--text-primary);
    z-index: 10;
}

li a {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-xs);
}

a:hover {
    opacity: 0.5;
}

hr {
    border: 0;
    width: 100%;
    border-top: 4px solid var(--border);
}

html {
    scroll-behavior: smooth;
}

p {
    margin: var(--spacing-none);
}

.entete {
    display: flex;
    padding: var(--spacing-xxl) var(--spacing-xl);
    align-items: center;
    align-self: stretch;
}

i {
    margin: auto;
    display: block;
    text-align: center;
}

img {
    width: 100%;
}

*:focus {
    outline: 2px dashed;
}

* {
    margin: 0;
    list-style: none;
    padding: 0;
}

.display1 {
    font-family: var(--font-family-font-family-1);
    letter-spacing: var(--letter-spacing-uppercase);
    font-weight: 100;
}

.italic {
    font-style: italic;
}

.display2 {
    font-family: var(--font-family-font-family-1);
    letter-spacing: var(--letter-spacing-uppercase);
}

.display3 {
    font-family: var(--font-family-font-family-1);
    letter-spacing: var(--letter-spacing-uppercase);
}

.body-xs {
    font-size: var(--text-size-body-xs);
    line-height: var(--line-spacing-body-xs);
}

.body {
    font-size: var(--text-size-body);
    line-height: var(--line-spacing-body);
}

/*---- COMPOSANTS  ----*/

.button {
    display: flex;
    width: fit-content;
    padding: 0 var(--spacing-lg);
    align-items: center;
    cursor: pointer;
    align-self: stretch;
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-uppercase);
    font-size: 12px;
}

.primary-button {
    padding: var(--spacing-lg) var(--spacing-3xl);
    color: var(--color-grey-950);
    background-color: var(--color-accent);
}

/*------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/

@media (min-width: 768px) {
    .menu ul {
        display: flex;
    }

    .menu {
        height: 42px;
    }

    .switch {
        width: 42px;
    }

    .menu-container-right {
    }
}

@media (max-width: 1080px) {
    .menu ul {
        display: none;
    }

    .menu-container-right {
        justify-content: space-between;
        flex: 1 0 0;
    }

    .switch {
        width: 42px;
    }

    .menu {
        height: 42px;
    }

    .menu-container-right .button {
    }

    .hamburger {
        position: relative;
        display: block;
        transition: all 0.2s linear;
        cursor: pointer;
        width: 24px;
    }

    .hamburger-container {
        display: flex;
        justify-content: center; /* Centre horizontalement */
        align-items: center; /* Centre verticalement */
        cursor: pointer;
        height: 100%;
        width: 42px;
    }

    .hamburger .bar,
    .hamburger:after,
    .hamburger:before {
        content: "";
        display: block;
        background-color: var(--foreground-primary);
        transition: 0.2s;
    }

    .hamburger-container.is-active .hamburger .bar {
        opacity: 0;
    }

    .hamburger .bar,
    .hamburger:after,
    .hamburger:before {
        margin: 8px auto;
        width: 100%;
        height: 1px;
    }

    .hamburger .bar {
        width: 100%;
        margin-right: 0;
    }

    .hamburger-container.is-active .hamburger:before {
        transform: rotate(-45deg) translate(-7px, 7px);
    }

    .hamburger-container.is-active .hamburger:after {
        transform: rotate(45deg) translate(-6px, -6px);
    }
}

.mobile-nav {
    position: fixed;
    top: -100%; /* Position initiale hors écran en haut */
    opacity: 0;
    width: 100%;
    height: 100vh;
    display: flex;
    visibility: hidden;
    flex-direction: column;
    text-align: center;
    z-index: 98;
    background-color: var(--background-body);
    transition: 0.5s ease-in-out;
    justify-content: flex-end;
    flex: 1 0 0;
    align-self: stretch;
}

.mobile-nav.is-active {
    visibility: visible;
    opacity: 1;
    top: 0; /* Position finale au sommet */
}

h1,
h2,
h3 {
    margin: 0;
    padding: 0;
    font-weight: normal;
    font-size: inherit;
}

.mobile-nav ul li a {
    display: flex;
    padding: var(--spacing-lg) var(--spacing-md);
    justify-content: space-between;
    box-sizing: border-box;
    align-items: center;
    align-self: stretch;
    border-top: 1px solid var(--border);
    width: 100%;
}

nav {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-content: flex-start;
}

.menu {
    display: flex;
    /*box-sizing: border-box;
    overflow: hidden;*/
    position: fixed;
    transition: top 0.5s;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 99;
    border-bottom: 1px solid var(--border);
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
}

.menu ul {
    align-self: stretch;
}

.menu ul li {
    display: flex;
}

.menu-container-right svg path {
    transition: 0.3s;
}

.menu-container-right {
    display: flex;

    align-self: stretch;
    transition: 0.3s;
}

.menu-container-right .button:hover {
    opacity: 0.5;
}

.menu-container-right svg:hover {
    opacity: 0.5;
}

.menu-container-right svg {
    transition: 0.3s;
}

.menu-container-right .button {
    color: var(--color-grey-950);
    background-color: var(--color-accent);
    transition: 0.3s;
}

.slider:hover {
    cursor: pointer;
}

.switch {
    display: flex;
    position: relative;
    cursor: pointer;
    justify-content: center;
    align-items: center;
    align-self: stretch;
    border-left: 1px solid var(--border);
    border-right: 1px solid var(--border);
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

/*------------------------------------- FOOTER ------------------------------------------------*/

footer {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    gap: var(--spacing-xl);
    align-self: stretch;
    background-color: var(--background-surface);
    z-index: 0;
    position: relative;
    width: 100%;
    transition: transform 0.3s ease;
    overflow: hidden;
    box-sizing: border-box;
}

.footer-container {
    display: flex;
    justify-content: space-between;
}

.footer-container-eco {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: var(--spacing-xs);
}

.pin-spacer {
    max-width: 100%;
    overflow: hidden;
    box-sizing: border-box;
}

@media only screen and (max-width: 1080px) {
    footer {
        padding: var(--spacing-5xl) var(--spacing-md) var(--spacing-md) var(--spacing-md);
    }

    .footer-container {
        flex-direction: column;
        gap: var(--spacing-md);
    }
}

@media only screen and (min-width: 1080px) {
    footer {
        padding: var(--spacing-5xl) var(--spacing-md) var(--spacing-md) var(--spacing-md);
    }

    .footer-container {
        align-items: flex-end;
        align-self: stretch;
        text-align-last: right;
    }
}

/*------------------------------------- HEADER ------------------------------------------------*/

@media only screen and (max-width: 1080px) {
    header {
        padding: var(--spacing-4xl) var(--spacing-md) var(--spacing-md) var(--spacing-md);
        flex-direction: column;
        gap: var(--spacing-lg);
    }

    .header-chiffre {
        flex-direction: row;
    }

    .header-chiffre-case {
        padding: var(--spacing-md);
        height: 130px;
    }

    .header-chiffre-case-container {
        gap: var(--spacing-md);
    }

    .header-scroll {
        display: none;
    }
    .header-chiffre-case:nth-of-type(1),
    .header-chiffre-case:nth-of-type(2) {
        display: none;
    }

    .header-text {
        gap: var(--spacing-xs);
    }
}
@media only screen and (min-width: 1080px) {
    header {
        padding: var(--spacing-5xl) var(--spacing-md) var(--spacing-md) var(--spacing-md);
        flex-direction: row;
        align-items: flex-end;
    }

    .header-chiffre-case-container {
        gap: var(--spacing-xs);
    }

    .header-text {
        gap: var(--spacing-xs);
    }

    .header-scroll {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: var(--spacing-sm, 8px);
        flex-shrink: 0;
        animation: bounce 2s infinite;
    }

    @keyframes bounce {
        0%,
        100% {
            transform: translateY(0);
        }
        50% {
            transform: translateY(10px);
        }
    }

    .header-chiffre-case {
        width: 400px;
        height: 150px;
        padding: var(--spacing-md);
    }

    .header-chiffre {
        flex-direction: column;
        flex: 1 0 0;
    }
}

header {
    display: flex;
    justify-content: space-between;
    align-self: stretch;
    height: 100vh;
    position: fixed;
    z-index: 0;
    top: 0;
    left: 0;
    width: 100%;
    box-sizing: border-box;
    background: linear-gradient(var(--background-body-background), var(--background-body-background)),
        url(/img/antoine.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.header-chiffre-case {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    flex: 1 0 0;
    border: 1px solid var(--border);
}

.header-chiffre {
    display: flex;
    gap: var(--spacing-md);
    align-self: stretch;
    justify-content: flex-end;
    align-items: flex-end;
}

.header-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: end;
    flex: 1 0 0;
}

.header-text p {
    max-width: 400px;
}

.header-chiffre-case-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;

    align-self: stretch;
}

/*------------------------------------- MAIN ------------------------------------------------*/

/* Projets */

@media only screen and (min-width: 1080px) {
    .projets-number {
        min-height: 150px;
        min-width: 150px;
    }

    .projets a {
        width: 100%;
        height: 190px;
    }

    .projets-text {
        width: auto;
        padding-right: var(--spacing-lg);
    }

    .projets-line {
        width: 100%;
    }
}

@media only screen and (max-width: 1080px) {
    .projets-number {
        min-height: 100px;
        min-width: 100px;
    }

    .projets a {
        width: 100%;
        height: 120px;
    }

    .projets-text {
        min-width: 200px;
        padding-right: var(--spacing-md);
    }

    .projets-line {
        width: 100%;
    }
}
@media only screen and (max-width: 720px) {
}

.projets {
    display: flex;
    position: relative;
    flex-direction: column;
    align-items: flex-start;
    align-self: stretch;
}

.projets a {
    display: flex;
    justify-content: center;
    align-self: stretch;
    vertical-align: middle;
    align-items: center;
}

.projets-line {
    display: inline-block;
    align-items: center;
}

.projets-number {
    display: flex;
    border: 1px solid var(--border);
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.projets-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: var(--spacing-sm);
    /*flex: 1 0 0;*/
    align-self: stretch;
}

.line {
    position: relative;
    height: 1px;
    background-color: var(--border);
}

/*------------------------------------------------------------------------------------------*/

/* About me */
@media only screen and (max-width: 1080px) {
    .about {
        flex-direction: column;
        background: linear-gradient(var(--background-body-background), var(--background-body-background)),
            url(/img/antoine2.jpg);
        background-position: right center;
        background-repeat: no-repeat;
        background-size: cover;
    }

    .about-image {
        display: none;
    }

    .background-title {
        font-size: 25vw;
        bottom: 40%;
        right: 0;
    }

    .about-text {
        width: 100%;
    }
}
@media only screen and (min-width: 1080px) {
    about {
    }

    .background-title {
        font-size: 10vw;
        bottom: 50%;
        right: 0;
    }

    .about-text {
        width: 30%;
    }
}

.about {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex: 1 0 0;
    align-self: stretch;
}

.about-image {
    background: linear-gradient(var(--background-body-background), var(--background-body-background)),
        url(/img/antoine2.jpg);
    background-position: right center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 32%;
    height: 1000px;
}

.background-title {
    position: absolute;
    transform: rotate(90deg);
    /* font-size: 16vw; /* Adaptatif */
    color: var(--text-primary);
    opacity: 0.1; /* Effet subtil pour que le texte reste lisible */
    z-index: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; /* optionnel si tu veux vraiment couper */
}

.about-wrapper {
    display: flex;
    position: relative;
    width: 100%;
    height: 100vh;
    gap: var(--spacing-xl);
}

.about-text {
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-md);
    position: sticky;
    top: 30px;
    height: 350px;
}

table {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    align-self: stretch;
    width: 100%;
}

td {
    display: flex;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

thead {
    display: flex;
    width: 100%;
    position: sticky;
    top: 0;
    padding: var(--spacing-sm) var(--spacing-md);
    align-items: flex-start;
    gap: var(--spacing-xs);
    align-self: stretch;
}

thead tr {
    display: flex;
    width: 100%;
}

thead th {
    display: flex;
    width: 100%;
}

tbody {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    align-self: stretch;
}

tbody tr {
    display: flex;
    padding: var(--spacing-md) 0;
    align-items: flex-start;
    gap: var(--spacing-md);
    align-self: stretch;
    border-bottom: 1px solid var(--border);

    text-transform: uppercase;
}

td:nth-child(1) {
    width: 100px;

    text-transform: none;
}

td:nth-child(1) p {
    max-width: 500px;
}

/* Ajout pour la ligne cliquable */
.accordion-toggle {
    cursor: pointer;
    position: relative;
    transition: background 0.3s;
}

.accordion-toggle:hover {
    background-color: var(--background-surface);
}

/* Style du "+" */
.accordion-toggle .plus-icon {
    margin-left: auto;
    transition: transform 0.3s;
}

/* Quand l'accordéon est ouvert, rotation du + */
.accordion-toggle.open .plus-icon {
    transform: rotate(45deg);
}

/* Contenu caché de l'accordéon */
.accordion-content {
    display: none;
    padding: var(--spacing-md) 0;
    align-self: stretch;
    border-bottom: 1px solid var(--border);
}

.accordion-toggle.open {
    border-bottom: none;
}

.accordion-content td {
    width: 100%;
    display: block;
}

/*------------------------------------------------------------------------------------------*/

/* Quote */

@media only screen and (max-width: 1080px) {
    .quote div {
        width: 100%;
    }
}

@media only screen and (min-width: 1080px) {
    .quote div {
        width: 66%;
    }
}

.quote {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    align-self: stretch;
}

.quote div {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
    padding: var(--spacing-md) 0;
    border-top: 1px solid var(--border);
}