*{margin: 0; padding: 0;}


html{
    font-family: 'Nippo', sans-serif;
    background-color: #FFFBF4;
    cursor: url('../assets/site/cursor.svg'), pointer;
}
body{
    max-width: 1280px;
    margin: auto;
    /* marges latérales : le contenu ne touche jamais les bords de l'écran */
    padding-inline: clamp(16px, 4vw, 40px);
}


/* Sauts internes (ancres, lien d'évitement) en douceur, sauf si mouvement réduit */
@media (prefers-reduced-motion: no-preference){
    html{ scroll-behavior: smooth; }
}

/* Accessibilité clavier */
/* Lien d'évitement : invisible jusqu'à ce qu'il reçoive le focus (1re tabulation) */
.skip-link{
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 100;
    padding: 12px 20px;
    border-radius: 999px;
    background: #16442E;
    color: #FFFFFF;
    font-weight: 500;
    text-decoration: none;
    transform: translateY(-200%);
}
.skip-link:focus-visible{
    transform: none;
}
/* Anneau de focus visible et cohérent sur tous les éléments interactifs */
:focus-visible{
    outline: 2px solid #16442E;
    outline-offset: 3px;
    border-radius: 4px;
}
main:focus{ outline: none; }


/* Nav */
nav{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;

    flex-wrap: wrap;
    gap: 12px 24px;
    width: 100%;
    padding-top: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    margin-bottom: 40px;
}
ul li{
    list-style: none;;
}
ul li a{
    text-decoration: none;
    color: #121212;
}
ul li a:hover{
    text-decoration: underline;
}
/* Sélecteur de langue (EN / FR) */
ul li a.lang-switch{
    display: inline-block;
    padding: 4px 10px;
    border: 1px solid currentColor;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 500;
}
ul li a.lang-switch:hover{
    text-decoration: none;
    opacity: .7;
}

/* Info-bulle du sélecteur de langue (souris et clavier, pas sur écran tactile) */
li.lang-item{ position: relative; }
@media (hover: hover){
    li.lang-item::after{
        content: attr(data-tooltip);
        position: absolute;
        top: calc(100% + 8px);
        right: 0;
        padding: 6px 10px;
        border-radius: 8px;
        background: #121212;
        color: #fff;
        font-size: 13px;
        font-weight: 400;
        line-height: 1.2;
        white-space: nowrap;
        pointer-events: none;
        opacity: 0;
        transform: translateY(-4px);
        transition: opacity .15s ease, transform .15s ease;
        z-index: 10;
    }
    li.lang-item:hover::after,
    li.lang-item:focus-within::after{
        opacity: 1;
        transform: translateY(0);
    }
    nav.is-open li.lang-item::after{ display: none; }
}

nav div.right-container-nav ul{
    display: flex;
    flex-direction: row;
    gap: 24px;
    align-items: center;
}
nav div.left-container-nav{
    display: flex;
    flex-direction: row;
    gap: 16px;
    align-items: center;
}

/* Écrans tactiles : zones de tap d'au moins 44 px de haut */
@media (pointer: coarse){
    nav div.right-container-nav ul li a{
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }
    ul li a.lang-switch{
        min-height: 0;
        padding: 10px 16px;
    }
}


/* Header */
header{
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;

    gap: 72px;
    margin-bottom: 80px;
}
header .header-img{
    display: block;
    width: 100%;
    min-width: 0;
    height: 620px;
    border-radius: 16px;
    object-fit: cover;
    object-position: 50% 60%;
}
header div.header-text{
    display: flex;
    flex-direction: column;
    gap: 16px;
}
header h1{
    font-family: 'Nippo', sans-serif;
    font-size: 80px;
    font-weight: 400;
    line-height: 1;
    color: #121212
}
header h1 span{
    font-family: 'Author', sans-serif;
    font-style: italic;
    font-weight: 600;
    font-size: 1.1em;
    color: #609A7E;
}
header h1 span:first-child{
    text-decoration: underline;
}
header p{
    font-family: 'Nippo', sans-serif;
    font-size: 16px;
    font-weight: 300;
    color: #121212
}
h2{
    font-family: 'Nippo', sans-serif;
    font-size: 56px;
    font-weight: 400;
    color: #121212;
    margin-bottom: 40px;
}


/* En-tête de section : titre à gauche, boutons du carrousel à droite */
.section-head{
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 24px;
    margin-bottom: 40px;
}
.section-head h2{ margin-bottom: 0; }
.carousel-controls{
    display: flex;
    gap: 12px;
    flex-shrink: 0;
    /* aligne les boutons sur la ligne de base visuelle du titre */
    padding-bottom: 6px;
}
.carousel-btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 1px solid #121212;
    border-radius: 999px;
    background: transparent;
    color: #121212;
    cursor: inherit;
    transition: background-color .25s ease, color .25s ease, opacity .25s ease, border-color .25s ease;
}
.carousel-btn:hover:not(:disabled){
    background: #121212;
    color: #FFFBF4;
}
.carousel-btn:focus-visible{ border-radius: 999px; }
.carousel-btn:disabled{
    opacity: .25;
    cursor: default;
}

/* Works — carrousel horizontal (molette + drag, défilement lissé avec inertie) */
/* Le bandeau sort du conteneur 1280px pour occuper toute la largeur de l'écran */
.carousel{
    box-sizing: border-box; /* le padding reste dans les 100vw : pas de défilement horizontal */
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    overflow: hidden;
    margin-bottom: 80px;
    padding: 8px 24px;
    cursor: grab;
    /* au doigt : le glissement horizontal fait défiler le carrousel,
       le glissement vertical fait toujours défiler la page */
    touch-action: pan-y;
    /* fondu sur les bords gauche/droite */
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}
.carousel.is-dragging{
    cursor: grabbing;
}
.carousel-track{
    display: flex;
    width: max-content;
    will-change: transform;
}
.carousel-track a{
    display: block;
    border-radius: 16px;
    color: inherit;
    text-decoration: none;
    -webkit-user-drag: none;
}
.carousel-track .work{
    position: relative;
    flex: 0 0 auto;
    margin: 0 24px 0 0;
}
.carousel-track img{
    display: block;
    width: auto;
    height: 440px;
    border-radius: 16px;
    object-fit: cover;
    -webkit-user-select: none;
            user-select: none;
    -webkit-user-drag: none;
    /* le drag est géré sur le conteneur ; l'image ne capte pas le pointeur
       (évite le "ghost" de drag natif, tout en laissant le :hover sur .work) */
    pointer-events: none;
}
/* Overlay titre — pastille blanche qui apparaît au survol */
.carousel-track .work figcaption{
    position: absolute;
    left: 50%;
    bottom: 20px;
    transform: translate(-50%, 8px);
    padding: 10px 20px;
    background: #FFFBF4;
    border-radius: 999px;
    font-family: 'Nippo', sans-serif;
    font-size: 16px;
    font-weight: 500;
    white-space: nowrap;
    color: #121212;
    box-shadow: 0 8px 24px -8px rgba(18, 18, 18, 0.25);
    opacity: 0;
    pointer-events: none;
    transition: opacity .35s ease, transform .35s cubic-bezier(.075,.82,.165,1);
}
.carousel-track .work:hover figcaption,
.carousel-track a:focus-visible figcaption{
    opacity: 1;
    transform: translate(-50%, 0);
}
/* Sans survol possible (tactile), le titre du projet reste affiché */
@media (hover: none){
    .carousel-track .work figcaption{
        opacity: 1;
        transform: translate(-50%, 0);
        bottom: 12px;
        padding: 8px 16px;
        font-size: 14px;
    }
}

h3{
    font-family: 'Nippo', sans-serif;
    font-size: 32px;
    font-weight: 300;
    color: #121212;
}


/* Footer */
footer{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding-top: 24px;
    padding-bottom: 24px;
}
footer p{
    width: 100%;
    text-align: center;
    font-weight: 300;
    font-size: 14px;
}


/* Tablette / mobile */
@media (max-width: 900px){
    nav{ margin-bottom: 32px; }

    /* Accueil : la photo passe au-dessus du titre */
    header{
        flex-direction: column;
        align-items: stretch;
        gap: 32px;
        margin-bottom: 64px;
    }
    header .header-img{
        height: auto;
        aspect-ratio: 4 / 5;
        max-height: 72vh;
        object-position: 50% 45%;
    }
    header h1{ font-size: clamp(44px, 12vw, 80px); }
    h2{
        font-size: clamp(36px, 9vw, 56px);
        margin-bottom: 24px;
    }
    .section-head{ margin-bottom: 24px; }
    .carousel-controls{ gap: 8px; padding-bottom: 2px; }
    .carousel-btn{ width: 44px; height: 44px; }

    .carousel{
        padding: 8px clamp(16px, 4vw, 40px);
        margin-bottom: 64px;
    }
    .carousel-track .work{ margin-right: 16px; }
    .carousel-track img{ height: clamp(240px, 62vw, 440px); }
}