/* =========================================================
   TRAVERSE — feuille de style
   ========================================================= */

@font-face {
    font-family: 'Funnel Display';
    src: url('../fonts/FunnelDisplay-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Funnel Display';
    src: url('../fonts/FunnelDisplay-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Rethink Sans';
    src: url('../fonts/RethinkSans-VariableFont_wght.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

:root{
    --lime:   #DBFC73;
    --lime-d: #C9EE4E;
    --black:  #333333;
    --ink:    #333333;
    --white:  #ffffff;
    --grey:   #8a8a8a;
    --maxw:   1280px;
    --nav-h:  84px;
}

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

html{ scroll-behavior:smooth; scroll-padding-top:var(--nav-h); }

body{
    margin:0;
    padding-bottom:68px;
    font-family:'Rethink Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    color:var(--ink);
    background:var(--white);
    line-height:1.5;
    -webkit-font-smoothing:antialiased;
    cursor:none; /* remplacé par le curseur custom */
}

/* désactive le curseur custom sur touch */
@media (pointer:coarse){ body{ cursor:auto; } }

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }

/* =========================================================
   KEYFRAMES
   ========================================================= */

@keyframes navSlideIn{
    from{ transform:translateY(-100%); opacity:0; }
    to  { transform:none; opacity:1; }
}

/* Entrée du wordmark hero : scale + légère vibration finale */
@keyframes heroWordIn{
    0%  { opacity:0; transform:scale(.86) translateY(18px); }
    60% { opacity:1; transform:scale(1.015); }
    74% { transform:scale(1) translateX(-4px); }
    82% { transform:scale(1) translateX( 3px); }
    90% { transform:scale(1) translateX(-1px); }
    100%{ transform:scale(1) translateX(0); }
}

@keyframes taglineIn{
    from{ opacity:0; transform:translateY(20px); }
    to  { opacity:1; transform:none; }
}

@keyframes scrollPulse{
    0%,100%{ opacity:.6; transform:scaleY(1) translateY(0); }
    50%    { opacity:1;  transform:scaleY(1.6) translateY(4px); }
}

@keyframes clickPulse{
    from{ opacity:.85; transform:translate(-50%,-50%) scale(.25); }
    to  { opacity:0; transform:translate(-50%,-50%) scale(1.9); }
}

@keyframes clickParticle{
    from{ opacity:1; transform:translate(-50%,-50%) scale(1); }
    to  { opacity:0; transform:translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(.15); }
}

/* =========================================================
   WORDMARK
   ========================================================= */
.wordmark{
    font-weight:700;
    letter-spacing:-.01em;
    white-space:nowrap;
    display:inline-block;
}
.wordmark .b{ font-weight:600; }
.wordmark .schwa{
    display:inline-block;
    vertical-align:baseline;
}
.wordmark .pixel-paren{
    display:inline-flex;
    width:.56em;
    height:1.24em;
    margin-left:.03em;
    vertical-align:-.3em;
}
.wordmark .pixel-paren svg{
    display:block;
    width:100%;
    height:100%;
}
.wordmark--xl{
    font-size:clamp(56px, 11vw, 150px);
    line-height:.9;
}

/* =========================================================
   CUSTOM CURSOR
   ========================================================= */
.cursor-dot{
    position:fixed;
    top:0; left:0;
    width:8px; height:8px;
    border-radius:50%;
    background:var(--lime);
    pointer-events:none;
    z-index:9999;
    will-change:transform;
    transition:opacity .3s ease, width .3s ease, height .3s ease;
}
.cursor-dot.hide{ opacity:0; }

.cursor-ring{
    position:fixed;
    top:0; left:0;
    width:36px; height:36px;
    border-radius:50%;
    border:2px solid var(--lime);
    pointer-events:none;
    z-index:9998;
    will-change:transform;
    transition:
        width .4s cubic-bezier(.16,1,.3,1),
        height .4s cubic-bezier(.16,1,.3,1),
        opacity .3s ease,
        border-color .4s ease;
}
.cursor-ring.is-hover{
    width:54px; height:54px;
    border-color:rgba(219,252,115,.5);
}
.cursor-ring.is-click{
    width:28px; height:28px;
    border-color:var(--lime);
}

.click-pulse,
.click-particle{
    position:fixed;
    left:var(--x);
    top:var(--y);
    pointer-events:none;
    z-index:9997;
    color:var(--click-color, var(--lime));
}
.click-pulse{
    width:44px;
    height:44px;
    border:2px solid currentColor;
    border-radius:50%;
    animation:clickPulse .55s cubic-bezier(.16,1,.3,1) forwards;
}
.click-particle{
    width:6px;
    height:6px;
    background:currentColor;
    animation:clickParticle .5s cubic-bezier(.16,1,.3,1) forwards;
}

/* sur fond lime : bascule en noir */
body.over-lime .cursor-dot { background:var(--black); }
body.over-lime .cursor-ring{ border-color:var(--black); }
body.over-lime .cursor-ring.is-hover{ border-color:rgba(17,17,17,.45); }

/* =========================================================
   NAV
   ========================================================= */
.nav{
    position:fixed;
    top:0; left:0; right:0;
    height:var(--nav-h);
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 clamp(20px,4vw,48px);
    z-index:100;
    transition:background .35s ease, color .35s ease, box-shadow .35s ease;
    color:var(--black);
    animation:navSlideIn .7s cubic-bezier(.16,1,.3,1) both;
}

.nav__logo-img{
    height:28px;
    width:auto;
    display:block;
    transition:transform .35s cubic-bezier(.16,1,.3,1);
}
.nav__logo:hover .nav__logo-img{ transform:scale(1.05); }
/* jaune par défaut (hero) → noir quand nav est sur fond blanc */
.nav__logo-img--light{ display:block; }
.nav__logo-img--dark { display:none; }
.nav--solid .nav__logo-img--light{ display:none; }
.nav--solid .nav__logo-img--dark { display:block; }

.nav__menu{ display:flex; align-items:center; gap:34px; }
.nav__item{ position:relative; }

.nav__link{
    font-family:'Funnel Display', sans-serif;
    font-size:30px;
    font-weight:600;
    color:inherit;
    background:none;
    border:none;
    cursor:none;
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:6px 0;
    transition:opacity .2s ease;
}
.nav__link:hover{ opacity:.65; }

.pixel-arrow{
    display:inline-flex;
    align-items:center;
}

/* sous-menu */
.nav__sub{
    position:absolute;
    top:calc(100% + 8px);
    left:0;
    min-width:190px;
    background:var(--white);
    border:1.5px solid var(--black);
    display:flex;
    flex-direction:column;
    opacity:0;
    visibility:hidden;
    transform:translateY(-8px);
    transition:opacity .22s ease, transform .22s ease, visibility .22s;
    box-shadow:0 14px 36px rgba(0,0,0,.14);
}
.nav__sub a{
    padding:11px 18px;
    font-weight:600;
    color:var(--black);
    border-bottom:1px solid rgba(0,0,0,.1);
    transition:background .15s ease, padding-left .2s ease;
    cursor:none;
}
.nav__sub a:last-child{ border-bottom:none; }
.nav__sub a:hover{ background:var(--lime); padding-left:24px; }
.nav__item--has-sub.open .nav__sub,
.nav__item--has-sub:hover .nav__sub{
    opacity:1; visibility:visible; transform:translateY(0);
}

/* états couleur nav */
.nav--light{ color:var(--lime); }
.nav--solid{
    background:var(--white);
    color:var(--black);
    box-shadow:0 1px 0 rgba(0,0,0,.08);
}
.nav--solid.nav--on-lime{ background:var(--lime); }

/* burger mobile */
.nav__burger{
    display:none;
    flex-direction:column;
    gap:5px;
    background:none; border:none; cursor:pointer; padding:8px;
}
.nav__burger span{
    width:26px; height:2.5px; background:currentColor; display:block;
    transition:.25s ease;
}
.nav__burger.open span:nth-child(1){ transform:translateY(7.5px) rotate(45deg); }
.nav__burger.open span:nth-child(2){ opacity:0; transform:scaleX(0); }
.nav__burger.open span:nth-child(3){ transform:translateY(-7.5px) rotate(-45deg); }

/* =========================================================
   SCROLL REVEALS
   ========================================================= */
.reveal{
    opacity:0;
    transform:translateY(38px);
    transition:
        opacity .75s ease,
        transform .75s cubic-bezier(.16,1,.3,1);
}
.reveal.visible{
    opacity:1;
    transform:none;
}
/* variante : slide depuis la gauche */
.reveal--left{
    transform:translateX(-40px);
}
.reveal--left.visible{ transform:none; }

/* variante : scale (intro wordmark) */
.reveal--scale{
    transform:scale(.88) translateY(20px);
    transform-origin:center bottom;
}
.reveal--scale.visible{ transform:none; }

/* ligne décorative sous les titres, animée à la révélation */
.block__title{
    font-family:'Funnel Display', sans-serif;
    font-weight:700;
    position:relative;
    font-size:35px;
    padding-bottom:14px;
}
.block__title::after{
    content:'';
    position:absolute;
    left:0; bottom:0;
    width:0; height:3px;
    background:var(--lime);
    transition:width .65s cubic-bezier(.16,1,.3,1) .25s;
}
.block.visible .block__title::after{ width:44px; }

/* =========================================================
   HERO
   ========================================================= */
.hero{
    position:relative;
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    background:var(--black);
}

/* Espace extra pour le parallax (40 % en haut = marge de translateY max) */
.hero__media{
    position:absolute;
    top:-40%; left:0; right:0;
    height:180%;
    background:url("../img/hero.webp") center 30%/cover no-repeat;
    will-change:transform;
}
.hero__media::after{
    content:""; position:absolute; inset:0;
    background:linear-gradient(180deg,
        rgba(0,0,0,.4) 0%,
        rgba(0,0,0,.12) 45%,
        rgba(0,0,0,.5) 100%);
}

.hero__overlay{
    position:relative;
    z-index:2;
    text-align:center;
    padding:0 20px;
    will-change:transform;
}
.hero__wordmark{ margin:0; }
.hero__logo{
    width:clamp(220px,52vw,680px);
    height:auto;
    display:block;
    margin:0 auto;
    animation:heroWordIn 1.5s cubic-bezier(.16,1,.3,1) both .25s;
}

.hero__tagline{
    position:absolute;
    z-index:2;
    left:0; right:0;
    bottom:clamp(52px,7vh,80px);
    text-align:center;
    margin:0 auto;
    width:max-content;
    max-width:calc(100vw - 48px);
    padding:0 24px;
    color:var(--lime);
    font-weight:600;
    font-size:min(2.2vw,28px);
    white-space:nowrap;
    animation:taglineIn .9s cubic-bezier(.16,1,.3,1) both 1.1s;
}

/* indicateur de scroll — ligne pulsante */
.hero__scroll-hint{
    position:absolute;
    bottom:22px; left:50%;
    transform:translateX(-50%);
    z-index:2;
    animation:taglineIn .8s ease both 1.8s;
}
.hero__scroll-hint span{
    display:block;
    width:2px; height:32px;
    background:var(--lime);
    margin:0 auto;
    animation:scrollPulse 1.8s ease-in-out infinite;
    opacity:.7;
}

/* =========================================================
   INTRO (fond lime)
   ========================================================= */
.intro{
    background:var(--lime);
    color:var(--black);
    padding:clamp(80px,12vh,150px) 24px clamp(40px,7vh,90px);
    text-align:center;
}
.intro__inner{ max-width:880px; margin:0 auto; }
.intro__title{
    font-family:'Rethink Sans', sans-serif;
    font-size:35px;
    font-weight:800;
    margin:0 0 36px;
}
.intro__text{
    font-family:'Rethink Sans', sans-serif;
    font-size:28px;
    font-weight:600;
    margin:0 0 18px;
}
.intro__mark{
    margin-top:clamp(40px,8vh,90px);
    will-change:transform;
}
.intro__logo{
    width:clamp(200px,46vw,580px);
    height:auto;
    display:block;
    margin:0 auto;
}

/* =========================================================
   ABOUT SECTION (image fixe gauche + scroll droite)
   ========================================================= */
.about-section{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    align-items:start;
}
.about-section__media{
    position:sticky;
    top:var(--nav-h);
    height:calc(100vh - var(--nav-h));
    background:url("../img/about.webp") center 50%/cover no-repeat;
    will-change:background-position;
}
.about-section__content{
    padding:clamp(64px,8vw,112px) clamp(28px,5vw,80px);
    display:flex;
    flex-direction:column;
    gap:clamp(64px,10vh,100px);
}

.block p{
    font-family:'Rethink Sans', sans-serif;
    font-weight:500;
    font-size:18px;
    margin:0 0 12px;
    max-width:60ch;
}

/* =========================================================
   CONTACT
   ========================================================= */
.contact{
    padding:clamp(64px,10vh,130px) 24px;
    border-top:1px solid rgba(0,0,0,.08);
}
.contact__inner{
    max-width:620px;
    margin:0 auto;
}
.contact__title{
    font-family:'Funnel Display', sans-serif;
    font-weight:700;
    font-size:59px;
    margin:0 0 40px;
}

.cform__row{ position:relative; margin-bottom:30px; }

.cform input,
.cform select,
.cform textarea{
    width:100%;
    font-family:'Rethink Sans', sans-serif;
    font-weight:700;
    font-size:30px;
    color:var(--black);
    background:transparent;
    border:none;
    border-bottom:2px solid var(--black);
    padding:8px 2px 12px;
    border-radius:0;
    outline:none;
    transition:border-color .25s ease;
    cursor:none;
}
.cform textarea{ resize:vertical; line-height:1.4; }
.cform input::placeholder,
.cform textarea::placeholder{ color:rgba(51,51,51,0.3); }

.cform select{
    -webkit-appearance:none; appearance:none;
    cursor:none;
    color:var(--grey);
    padding-right:34px;
}
.cform select.filled{ color:var(--black); }
.cform__row--select .cform__chevron{
    position:absolute; right:2px; top:10px;
    pointer-events:none;
    color:var(--black);
}

.cform input:focus,
.cform select:focus,
.cform textarea:focus{
    border-color:var(--lime-d);
}

/* ligne animée au focus (underline qui s'étend) */
.cform__row::after{
    content:'';
    position:absolute;
    bottom:0; left:50%;
    width:0; height:2px;
    background:var(--lime-d);
    transform:translateX(-50%);
    transition:width .35s cubic-bezier(.16,1,.3,1);
    pointer-events:none;
}
.cform__row:focus-within::after{ width:100%; }

.cform__hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.btn-send{
    margin-top:10px;
    font:inherit;
    font-size:24px;
    font-weight:600;
    color:var(--lime);
    background:var(--black);
    border:none;
    border-radius:50px;
    padding:18px 52px;
    cursor:none;
    transition:
        transform .25s cubic-bezier(.16,1,.3,1),
        background-color .3s ease,
        color .3s ease,
        box-shadow .3s ease;
}
.btn-send:hover{
    background:var(--lime);
    color:var(--black);
    transform:translateY(-3px);
    box-shadow:0 10px 28px rgba(219,252,115,.4);
}
.btn-send:active{ transform:translateY(0); }
.btn-send:disabled{ opacity:.55; cursor:default; transform:none; box-shadow:none; }

.cform__feedback{
    margin:20px 0 0;
    font-weight:600;
    min-height:1.4em;
}
.cform__feedback.ok{ color:#2f7d18; }
.cform__feedback.err{ color:#c0341d; }

/* =========================================================
   FOOTER
   ========================================================= */
.footer{
    position:fixed;
    left:0; right:0; bottom:0;
    z-index:80;
    background:var(--lime);
    color:var(--black);
    padding:10px clamp(16px,3vw,32px);
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    text-align:left;
}
.footer__text{
    font-family:'Rethink Sans', sans-serif;
    font-weight:400;
    flex:1 1 auto;
    margin:0;
    font-size:10px;
    max-width:720px;
    line-height:1.3;
}
.footer__logos{
    flex:0 0 auto;
    margin-left:auto;
}
.footer__logos img{
    height:38px;
    width:auto;
    mix-blend-mode:multiply;
}
.footer .reveal{
    opacity:1;
    transform:none;
}

/* bouton retour haut */
.to-top{
    position:fixed;
    right:22px; bottom:70px;
    width:46px; height:46px;
    border-radius:50%;
    background:var(--black);
    color:var(--lime);
    display:flex; align-items:center; justify-content:center;
    font-size:22px;
    opacity:0; visibility:hidden;
    transform:translateY(14px);
    transition:opacity .3s ease, transform .3s ease, visibility .3s, background .25s ease;
    z-index:90;
    cursor:none;
}
.to-top.show{ opacity:1; visibility:visible; transform:translateY(0); }
.to-top:hover{ background:var(--lime); color:var(--black); }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:860px){
    :root{ --nav-h:70px; }

    .nav__menu{
        position:fixed;
        top:var(--nav-h); left:0; right:0;
        background:var(--white);
        color:var(--black);
        flex-direction:column;
        align-items:flex-start;
        gap:0;
        padding:8px 24px 24px;
        border-bottom:1.5px solid var(--black);
        transform:translateY(-130%);
        transition:transform .3s cubic-bezier(.16,1,.3,1);
        z-index:99;
    }
    .nav__menu.open{ transform:translateY(0); }
    .nav__item{ width:100%; border-top:1px solid rgba(0,0,0,.1); }
    .nav__link{ font-size:20px; padding:14px 0; width:100%; cursor:pointer; }
    .nav__sub{
        position:static;
        opacity:1; visibility:visible; transform:none;
        border:none; box-shadow:none;
        padding-left:34px;
        background:transparent;
    }
    .nav__sub a{ border-bottom:none; padding:8px 0; cursor:pointer; }
    .nav__sub a:hover{ background:transparent; text-decoration:underline; padding-left:0; }

    .nav__burger{ display:flex; }
    .nav--light .nav__burger{ color:var(--lime); }

    .about-section{ grid-template-columns:1fr; }
    .about-section__media{
        position:relative;
        top:auto;
        height:320px;
    }
    .footer{ align-items:flex-start; justify-content:flex-start; gap:10px; }
    .footer__text{ font-size:9px; }
    .footer__logos img{ height:18px; }

    /* curseur system sur touch */
    body{ cursor:auto; }
    .cursor-dot, .cursor-ring{ display:none; }
}

@media (max-width:480px){
    .nav__logo-img{ height:22px; }
    .btn-send{ width:100%; }
    .footer__logos img{ height:14px; }
}

/* =========================================================
   PREFERS-REDUCED-MOTION
   ========================================================= */
@media (prefers-reduced-motion:reduce){
    *{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
    .reveal{ opacity:1 !important; transform:none !important; }
    .hero__media{ will-change:auto; }
    .intro__mark{ will-change:auto; }
    .cursor-dot, .cursor-ring{ display:none; }
    body{ cursor:auto; }
}