/* ==========================================================================
   CAMILO LAVEDRINE — FEUILLE DE STYLE GLOBALE
   Une seule feuille pour tout le site. Modifier ici = modifier partout.

   SOMMAIRE
   1.  Variables (couleurs, espacements, polices)
   2.  Reset & base
   3.  Header + navigation (desktop, burger, overlay mobile)
   4.  Hero (accueil)
   5.  Grille de projets
   6.  Page projet (titre, fiche technique, galerie, projet suivant)
   7.  Pages texte (studio, contact, 404)
   8.  Footer
   9.  Animations d'apparition au scroll
   10. Responsive
   ========================================================================== */

/* ==========================================================================
   1. VARIABLES
   ========================================================================== */
:root {
    /* Couleurs */
    --noir:        #0C0C0C;  /* fond général */
    --noir-clair:  #181818;  /* fond des images en cours de chargement */
    --ligne:       #1F1F1F;  /* filets et séparateurs */
    --blanc:       #FFFFFF;  /* titres */
    --texte:       #F0F0F0;  /* texte courant */
    --texte-doux:  #A0A0A0;  /* paragraphes secondaires */
    --texte-gris:  #888888;  /* métadonnées, footer */

    /* Rythme horizontal : marge latérale des pages */
    --marge:       3rem;

    /* Transitions */
    --transition:  0.3s ease;
    --transition-image: 0.7s cubic-bezier(0.25, 1, 0.5, 1);
}

/* ==========================================================================
   2. RESET & BASE
   ========================================================================== */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background-color: var(--noir);
    color: var(--texte);
    font-weight: 300;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

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

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

/* Accessibilité : contour visible uniquement au clavier */
:focus-visible {
    outline: 1px solid var(--blanc);
    outline-offset: 4px;
}

/* Lien d'évitement pour les lecteurs d'écran */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--blanc);
    color: var(--noir);
    padding: 0.75rem 1.25rem;
    z-index: 2000;
    font-size: 0.85rem;
}
.skip-link:focus {
    left: 1rem;
    top: 1rem;
}

/* ==========================================================================
   3. HEADER & NAVIGATION
   ========================================================================== */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2.5rem var(--marge);
    z-index: 1000;
    background: transparent;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
                padding 0.3s ease;
    will-change: transform;
}

/* Ajoutée en JS au scroll vers le bas */
.site-header.nav-hidden {
    transform: translateY(-100%);
}

/* Ajoutée en JS dès qu'on a défilé : header plus compact */
.site-header.nav-compact {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}

.brand-logo {
    font-size: 0.95rem;
    font-weight: 400;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--blanc);
    z-index: 1001;
    text-shadow: 0 1px 5px rgba(0, 0, 0, 0.7);
}

/* --- Menu desktop --- */
.desktop-nav ul {
    display: flex;
    list-style: none;
    gap: 2.5rem;
}

.desktop-nav a {
    font-size: 0.85rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--blanc);
    opacity: 0.7;
    text-shadow: 0 1px 5px rgba(0, 0, 0, 0.7);
}

.desktop-nav a:hover,
.desktop-nav a[aria-current="page"] {
    opacity: 1;
}

/* --- Bouton burger (mobile) --- */
.burger-menu {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 28px;
    height: 18px;
    background: transparent;
    border: none;
    cursor: pointer;
    z-index: 1001;
    padding: 0;
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.8));
}

.burger-menu span {
    width: 100%;
    height: 1px;
    background-color: var(--blanc);
    transition: transform var(--transition), opacity var(--transition);
}

.burger-menu.open span:nth-child(1) { transform: translateY(8.5px) rotate(45deg); }
.burger-menu.open span:nth-child(2) { opacity: 0; }
.burger-menu.open span:nth-child(3) { transform: translateY(-8.5px) rotate(-45deg); }

/* --- Overlay plein écran (mobile) --- */
.mobile-nav-overlay {
    position: fixed;
    inset: 0;
    background-color: var(--noir);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease;
    z-index: 999;
}

.mobile-nav-overlay.open {
    opacity: 1;
    visibility: visible;
}

.mobile-nav-overlay ul {
    list-style: none;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.mobile-nav-overlay a {
    font-size: 1.5rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--blanc);
    opacity: 0.7;
}

.mobile-nav-overlay a:hover,
.mobile-nav-overlay a[aria-current="page"] {
    opacity: 1;
}

/* ==========================================================================
   4. HERO (ACCUEIL)
   ========================================================================== */
.hero-section {
    display: block;
    width: 100%;
    position: relative;
    overflow: hidden;
    background-color: var(--noir-clair);

    /* Toute la photo est cliquable : elle fait descendre jusqu'aux projets. */
    cursor: pointer;

    /* Plein écran.
       1re ligne : hauteur de la fenêtre, comprise par tous les navigateurs.
       2e ligne  : hauteur RÉELLE visible sur mobile. Sans elle, le bas de la
       photo passe sous la barre d'adresse du téléphone, qui n'est pas comptée
       dans 100vh. Les navigateurs qui ignorent dvh gardent la 1re ligne. */
    height: 100vh;
    height: 100dvh;
}

/* --------------------------------------------------------------------------
   DIAPORAMA : les photos sont empilées au même endroit et se croisent
   en fondu. Une seule est opaque à la fois.
   -------------------------------------------------------------------------- */
.hero-slides {
    position: absolute;
    inset: 0;
}

.hero-slide {
    position: absolute;
    inset: 0;
    display: block;
    opacity: 0;

    /* Fondu très lent. "linear" volontairement : sur un fondu d'opacité,
       une courbe accélérée se remarque, une progression régulière non. */
    transition: opacity 4s linear;
}

/* Avant que le JavaScript ne tourne (ou s'il est désactivé),
   la première photo est visible : pas d'écran noir au chargement. */
.hero-slide:first-child {
    opacity: 1;
}

/* Une fois le JS prêt, c'est lui qui décide laquelle est affichée.
   Trois classes = priorité supérieure à la règle :first-child ci-dessus. */
.hero-slides.js-pret .hero-slide {
    opacity: 0;
}

.hero-slides.js-pret .hero-slide.est-visible {
    opacity: 1;
}

.hero-slide img {
    width: 100%;
    height: 100%;
    display: block;
}

/* "cover" = la photo remplit tout le cadre sans jamais être déformée :
   elle est rognée sur le côté le plus long. C'est ce qui lui permet de
   s'adapter aussi bien à un écran large 16/9 qu'à un téléphone vertical.
   object-position décide de ce qui est conservé au rognage : "center"
   garde le milieu. Mets "center 35%" si tes photos ont leur sujet
   plutôt vers le haut (un bâtiment avec beaucoup de premier plan).

   Aucun zoom, ni au survol ni automatique : l'image reste fixe. */
.hero-slide img {
    object-fit: cover;
    object-position: center;
}

/* Rien n'est posé sur la photo : ni titre, ni voile sombre, ni indicateur.
   Le seul rôle du hero est d'être une image, et un clic pour descendre. */

/* Point d'arrivée du clic sur la photo.
   scroll-margin-top réserve la hauteur de l'en-tête fixe : sans lui, le
   titre "Projets sélectionnés" arriverait caché dessous. */
#projets {
    scroll-margin-top: 5rem;
}

/* Phrase de positionnement sous le hero */
.intro-statement {
    padding: 3rem var(--marge);
    max-width: 44rem;
    font-size: 1.35rem;
    font-weight: 300;
    line-height: 1.5;
    color: var(--blanc);
}

/* ==========================================================================
   5. GRILLE DE PROJETS
   ========================================================================== */
.page-main {
    padding: 0 var(--marge) 5rem var(--marge);
}

/* Titre de section discret (ex. « Projets sélectionnés ») */
.section-label {
    font-size: 0.75rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--texte-gris);
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--ligne);
    margin-bottom: 3rem;
    font-weight: 400;
}

.project-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 4rem 2.5rem;
    list-style: none;
}

.project-card {
    display: block;
    width: 100%;
}

.image-wrapper {
    position: relative;
    overflow: hidden;
    background-color: var(--noir-clair);
    width: 100%;
    aspect-ratio: 16 / 10;
}

.image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-image);
}

.project-card:hover .image-wrapper img,
.project-card:focus-visible .image-wrapper img {
    transform: scale(1.03);
}

.project-info {
    margin-top: 1.2rem;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    font-size: 0.85rem;
    letter-spacing: 0.03em;
}

.project-name {
    font-weight: 400;
    font-size: 0.9rem;
    color: var(--blanc);
}

.project-meta {
    color: var(--texte-gris);
    font-size: 0.8rem;
    text-align: right;
}

/* ==========================================================================
   6. PAGE PROJET
   ========================================================================== */
.project-page {
    padding-top: 8rem;
}

/* Image de couverture pleine largeur */
.project-cover {
    width: 100%;
    height: 75vh;
    overflow: hidden;
    background-color: var(--noir-clair);
    margin-bottom: 5rem;
}

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

/* Bloc titre + fiche technique + description */
.project-intro {
    padding: 0 var(--marge);
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 4rem;
    margin-bottom: 6rem;
    align-items: start;
}

.project-heading {
    font-size: 1.6rem;
    font-weight: 400;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--blanc);
    line-height: 1.3;
}

/* Fiche technique : lieu, année, surface… */
.project-specs {
    margin-top: 2rem;
    font-size: 0.8rem;
    letter-spacing: 0.03em;
}

.project-specs div {
    display: flex;
    gap: 1rem;
    padding: 0.7rem 0;
    border-top: 1px solid var(--ligne);
}

.project-specs dt {
    color: var(--texte-gris);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.7rem;
    min-width: 7rem;
    padding-top: 0.15rem;
}

.project-specs dd {
    color: var(--texte);
}

.project-description {
    font-size: 1rem;
    color: var(--texte-doux);
    line-height: 1.8;
    max-width: 38rem;
}

.project-description p + p {
    margin-top: 1.5rem;
}

/* Galerie : empilement vertical pleine largeur */
.project-gallery {
    display: flex;
    flex-direction: column;
    gap: 4rem;
    padding: 0 var(--marge);
}

/* Le fond clair sert de repère pendant le chargement de la photo :
   il est porté par l'image, pas par la figure, sinon la légende
   se retrouve sur un bandeau plus clair que le reste de la page. */
.project-gallery img {
    background-color: var(--noir-clair);
}

.project-gallery figcaption {
    margin-top: 0.8rem;
    font-size: 0.75rem;
    color: var(--texte-gris);
    letter-spacing: 0.05em;
}

/* Bandeau « projet suivant » */
.next-project {
    display: block;
    margin-top: 8rem;
    padding: 4rem var(--marge);
    border-top: 1px solid var(--ligne);
    text-align: center;
}

.next-project .label {
    display: block;
    font-size: 0.7rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--texte-gris);
    margin-bottom: 1rem;
}

.next-project .name {
    font-size: 1.8rem;
    font-weight: 300;
    color: var(--texte-gris);
    letter-spacing: 0.04em;
    transition: color var(--transition);
}

.next-project:hover .name {
    color: var(--blanc);
}

/* ==========================================================================
   7. PAGES TEXTE (STUDIO, CONTACT, 404)
   ========================================================================== */
.text-page {
    padding: 10rem var(--marge) 6rem var(--marge);
    max-width: 52rem;
}

.page-title {
    font-size: 0.75rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--texte-gris);
    font-weight: 400;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--ligne);
    margin-bottom: 3rem;
}

.lede {
    font-size: 1.35rem;
    line-height: 1.5;
    color: var(--blanc);
    font-weight: 300;
    margin-bottom: 3rem;
}

.text-body {
    font-size: 1rem;
    color: var(--texte-doux);
    line-height: 1.8;
    max-width: 38rem;
}

.text-body p + p {
    margin-top: 1.5rem;
}

.text-body h2 {
    font-size: 0.75rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--texte-gris);
    font-weight: 400;
    margin-top: 3.5rem;
    margin-bottom: 1rem;
}

.text-body a {
    color: var(--blanc);
    border-bottom: 1px solid var(--ligne);
    padding-bottom: 1px;
}

.text-body a:hover {
    border-bottom-color: var(--blanc);
}

/* Bloc de coordonnées (page contact) */
.contact-block {
    margin-top: 3rem;
    display: flex;
    flex-wrap: wrap;
    gap: 3rem;
    font-size: 0.9rem;
}

.contact-block .label {
    display: block;
    font-size: 0.7rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--texte-gris);
    margin-bottom: 0.5rem;
}

/* ==========================================================================
   8. FOOTER
   ========================================================================== */
.site-footer {
    padding: 4rem var(--marge) 2.5rem var(--marge);
    border-top: 1px solid var(--ligne);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 2.5rem;
    font-size: 0.8rem;
    color: var(--texte-gris);
    text-align: center;
}

.footer-col {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.footer-col strong {
    color: var(--blanc);
    font-weight: 400;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-size: 0.85rem;
}

.footer-link {
    color: var(--blanc);
    opacity: 0.7;
}

.footer-link:hover {
    opacity: 1;
}

/* ==========================================================================
   9. APPARITION AU SCROLL
   Les éléments .reveal montent doucement quand ils entrent dans l'écran.
   La classe .is-visible est ajoutée en JS.
   ========================================================================== */
.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}

.reveal.is-visible {
    opacity: 1;
    transform: none;
}

/* Si le JS ne tourne pas, on affiche tout */
.no-js .reveal {
    opacity: 1;
    transform: none;
}

/* Respect des préférences système d'accessibilité */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }

    .reveal {
        opacity: 1;
        transform: none;
    }

    /* EXCEPTION : le fondu du diaporama est conservé.
       La règle universelle ci-dessus coupe toutes les transitions, ce qui
       transformerait le fondu en coupure sèche toutes les 11 secondes —
       plus brutal que le fondu lui-même.
       Un fondu d'opacité ne déplace rien à l'écran : ce n'est pas du
       mouvement au sens où l'entend ce réglage d'accessibilité. */
    .hero-slide {
        transition-duration: 4s !important;
    }
}

/* ==========================================================================
   10. RESPONSIVE
   ========================================================================== */
@media (max-width: 900px) {
    :root {
        --marge: 1.5rem;
    }

    .site-header {
        padding: 1.8rem var(--marge);
    }

    .desktop-nav { display: none; }
    .burger-menu { display: flex; }

    /* Le hero garde 100dvh sur mobile : pas de réduction de hauteur ici. */

    .intro-statement {
        padding: 4rem var(--marge);
        font-size: 1.15rem;
    }

    .page-main {
        padding-bottom: 3rem;
    }

    .project-grid {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .project-page { padding-top: 6rem; }

    .project-cover {
        height: 55vh;
        margin-bottom: 3rem;
    }

    .project-intro {
        grid-template-columns: 1fr;
        gap: 2.5rem;
        margin-bottom: 4rem;
    }

    .project-heading { font-size: 1.25rem; }

    .project-gallery { gap: 2.5rem; }

    .next-project {
        margin-top: 5rem;
        padding: 3rem var(--marge);
    }

    .next-project .name { font-size: 1.4rem; }

    .text-page {
        padding: 7rem var(--marge) 4rem var(--marge);
    }

    .lede { font-size: 1.15rem; }

    /* ----------------------------------------------------------------------
       PIED DE PAGE SUR TÉLÉPHONE

       En largeur d'ordinateur, les trois colonnes sont réparties de gauche à
       droite et c'est lisible. Sur un écran étroit, "space-between" les
       empile en les laissant chacune sur son bord : la marque à gauche, les
       liens à droite, le copyright à gauche. Ça donne un escalier désordonné.

       Ici on repasse en une colonne centrée, et on remet à l'horizontale ce
       qui tient sur une ligne : les deux liens, puis le copyright.
       ---------------------------------------------------------------------- */
    .site-footer {
        padding: 3rem var(--marge) 2rem var(--marge);
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 2rem;
    }

    .footer-col {
        align-items: center;
    }

    /* Les deux liens côte à côte */
    .site-footer .footer-col:nth-child(2) {
        flex-direction: row;
        gap: 2.5rem;
    }

    /* Copyright et mention sur une seule ligne */
    .site-footer .footer-col:nth-child(3) {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.4rem;
    }
}