@font-face { font-family: 'Diatype'; src: url('fonts/ABCDiatype-Regular.woff2') format('woff2'); font-weight: 400; }
@font-face { font-family: 'Diatype-Medium'; src: url('fonts/ABCDiatype-Medium.woff2') format('woff2'); font-weight: 500; }

html.lenis { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

body { font-family: 'Diatype-Medium', 'Inter', sans-serif; transition: background-color 0.6s ease; overflow-x: hidden; }

/* Application de la police Anton */
h1, h2, h3, h4, h5, .anton { 
    font-family: 'Anton', sans-serif; 
    text-transform: uppercase; 
    letter-spacing: 0.03em; 
    line-height: 0.95 !important; 
}

.header-logo { letter-spacing: 0.05em !important; font-family: 'Diatype', sans-serif !important;}

button, .btn-diatype, input[type="submit"], a.btn-diatype { 
    font-family: 'Diatype', sans-serif !important; 
    font-weight: 400 !important; 
    text-transform: uppercase; 
    letter-spacing: 0.15em !important; 
    display: inline-block;
}

#manifesto .btn-diatype {
    text-transform: none !important;
    letter-spacing: -0.02em !important;
}

.line-parent { overflow: hidden; margin-bottom: -0.1em; }
.line-child { display: inline-block; transform: translateY(115%); }

.reveal-frame { clip-path: inset(100% 0% 0% 0%); transition: clip-path 1.4s cubic-bezier(0.19, 1, 0.22, 1); }
.reveal-frame.active { clip-path: inset(0% 0% 0% 0%); }

.floating-bg { position: absolute; z-index: 1; pointer-events: none; opacity: 0.7;  object-fit: cover; }
.dark .floating-bg { opacity: 0.7; }

input, select, textarea { appearance: none !important; background-color: transparent !important; border: none !important; border-bottom: 1px solid currentColor !important; padding: 1rem 0 !important; border-radius: 0 !important; outline: none !important; font-size: 13px !important; width: 100%; }

#pricing { background-color: #e4e4e7; color: #0e0e0e; }
.dark #pricing { background-color: #18181b; color: #f2f2f2; }
.price-row { border-bottom: 1px solid rgba(0,0,0,0.1); padding: 1.2rem 0; display: flex; justify-content: space-between; font-size: 13px; }
.dark .price-row { border-bottom: 1px solid rgba(255,255,255,0.1); }

#contact-section { background-color: #0a0a0a !important; color: #ffffff !important; transition: all 0.6s ease; }
.dark #contact-section { background-color: #ffffff !important; color: #0a0a0a !important; }

#modal-study { position: fixed; inset: 0; background: rgba(0,0,0,0.8); z-index: 1000; display: none; align-items: center; justify-content: center; backdrop-filter: blur(10px); padding: 20px; }
#modal-study.active { display: flex; }
.modal-content { background: white; color: black; width: 100%; max-width: 800px; max-height: 90vh; overflow-y: auto; padding: 60px; position: relative; }
.dark .modal-content { background: #0f0f0f; color: white; border: 1px solid rgba(255,255,255,0.1); }

#scroll-indicator { position: fixed; right: 40px; bottom: 40px; z-index: 100; display: flex; flex-direction: column; align-items: center; gap: 15px; mix-blend-mode: difference; }
.scroll-line { width: 1px; height: 60px; background: rgba(255,255,255,0.2); position: relative; overflow: hidden; }
.scroll-progress { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: white; transform: translateY(-100%); }

#cursor { mix-blend-mode: difference; z-index: 9999; }
.reveal { opacity: 0; transform: translateY(30px); transition: all 1s cubic-bezier(0.19, 1, 0.22, 1); }
.reveal.active { opacity: 1; transform: translateY(0); }

#menu-overlay { position: fixed; inset: 0; background: #f2f2f2; z-index: 500; display: none; flex-direction: column; align-items: center; justify-content: center; }
.dark #menu-overlay { background: #0a0a0a; }
#menu-overlay.open { display: flex; }

#menu-overlay.active {
    display: flex;
}

.menu-link {
    /* On supprime les transitions CSS pour laisser GSAP gérer à 100% */
    color: currentColor;
    cursor: pointer;
    will-change: transform, opacity; /* Prépare le processeur graphique */
    backface-visibility: hidden;    /* Évite les scintillements sur Safari/Chrome */
}

/* On garde juste le hover en CSS pour la rapidité, ou on le passe en JS */
.menu-link:hover {
    font-style: italic;
}

/* Animation de l'icône Menu vers Croix */
#menu-btn.is-active #bar1 {
    transform: translateY(4.5px) rotate(45deg);
}

#menu-btn.is-active #bar2 {
    transform: translateY(-4.5px) rotate(-45deg);
}

.hero-title, #hero-phrase {
    transform: translateY(110%); /* Caché au début */
    will-change: transform;
}

.carousel-img {
    filter: brightness(0.4) contrast(1.1); /* On assombrit bien pour le blanc du texte */
}

.reveal-text {
    display: inline-block;
    will-change: transform;
}

/* Optionnel : Ajustement précis pour les petits écrans */
@media (max-width: 768px) {
    .reveal-text {
        font-size: 10vw !important; /* Réduction légère sur mobile pour tenir sur une ligne */
    }
}



/* Fix pour les polices introuvables */
body {
    font-family: 'Inter', sans-serif; /* Fallback si Diatype n'est pas trouvé */
}