/*
 * Template : Manufactt — Manufacturing Services Website
 * Adapté pour ArteZya / MODX
 * Fichier  : landing.css  (source à compiler)
 *
 * Compilation :
 *   npx tailwindcss -i landing.css -o assets/css/landing.min.css --minify
 *
 * Fichiers à placer dans assets/ avant compilation :
 *   css/swiper-bundle.min.css   → copié depuis node_modules/swiper/swiper-bundle.min.css
 *   js/swiper-bundle.min.js     → copié depuis node_modules/swiper/swiper-bundle.min.js
 *   js/preline.min.js           → copié depuis node_modules/preline/dist/preline.min.js
 *   js/iconify.min.js           → copié depuis node_modules/@iconify/iconify/dist/iconify.min.js
 *   js/landing.js               → ce projet
 *   images/favicon.svg          → depuis src/assets/images/favicon.svg du template
 *   images/bg-noice.gif         → depuis src/assets/images/bg-noice.gif du template
 *   images/cta-bg.png           → depuis src/assets/images/cta-bg.png du template
 *   fonts/MonaSans.woff2        → à récupérer (Google Fonts ou bundle)
 *   fonts/Geist.woff2           → à récupérer (Google Fonts ou bundle)
 *
 * Dépendances npm requises :
 *   tailwindcss@4
 *   preline
 *   swiper
 *   aos
 *   @tailwindcss/typography
 *   @tailwindcss/forms
 *   @iconify/tailwind4
 */


/* ==========================================================================
   1. POLICES — chargement local depuis assets/fonts/
   ========================================================================== */

@font-face {
    font-family: "Mona Sans";
    src: url("../fonts/MonaSans.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Geist";
    src: url("../fonts/Geist.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}


/* ==========================================================================
   2. TAILWIND CSS + PLUGINS
   ========================================================================== */

@import "tailwindcss";

/* Preline UI — variantes hs-* */
@import "preline/variants.css";
@source "preline/dist/*.js";

/* Swiper */
@import "swiper/swiper-bundle.css";

/* AOS (animations au scroll) */
@import "aos/dist/aos.css";

/* Plugins Tailwind */
@plugin "@tailwindcss/typography";
@plugin "@tailwindcss/forms";

/* Iconify — préfixes tabler et lucide */
@plugin "@iconify/tailwind4" {
    prefixes: tabler, lucide;
}


/* ==========================================================================
   3. THÈME — VARIABLES DE DESIGN
   ========================================================================== */

@theme {

    /* Typographie */
    --font-heading: "Mona Sans", sans-serif;
    --font-body:    "Geist", sans-serif;

    /* Couleur principale (orange/brique) */
    --color-primary:   #c8370b;
    --color-primary-1: #f66234;
    --color-primary-2: #c8370b;
    --color-primary-3: #9e3211;

    /* Fond et texte de base */
    --color-body-bg:    var(--color-white);
    --color-body-color: var(--color-zinc-600);

    /* Palette de gris — aliasée sur zinc */
    --color-default-50:  var(--color-zinc-50);
    --color-default-100: var(--color-zinc-100);
    --color-default-200: var(--color-zinc-200);
    --color-default-300: var(--color-zinc-300);
    --color-default-400: var(--color-zinc-400);
    --color-default-500: var(--color-zinc-500);
    --color-default-600: var(--color-zinc-600);
    --color-default-700: var(--color-zinc-700);
    --color-default-800: var(--color-zinc-800);
    --color-default-900: var(--color-zinc-900);
    --color-default-950: var(--color-zinc-950);

    /* Line-height unifié */
    --tw-leading:             1.3em;
    --text-xs--line-height:   1.3em;
    --text-sm--line-height:   1.3em;
    --text-base--line-height: 1.3em;
    --text-lg--line-height:   1.3em;
    --text-xl--line-height:   1.3em;
    --text-2xl--line-height:  1.3em;
    --text-3xl--line-height:  1.3em;
    --text-7xl--line-height:  1.1;
}


/* ==========================================================================
   4. BASE GLOBALE
   ========================================================================== */

@layer base {

    html {
        @apply w-full scroll-smooth;
    }

    body {
        @apply font-body bg-body-bg text-body-color md:text-lg text-base leading-[1.3em] font-medium overflow-x-clip;
    }

    h1, h2, h3, h4, h5, h6 {
        @apply font-heading leading-[1.3] font-semibold text-default-900;
    }

    button:not(:disabled),
    [role="button"]:not(:disabled) {
        @apply cursor-pointer;
    }
}

/* Inputs / Textarea — focus */
select,
input,
textarea {
    @apply transition-all duration-200 focus:border-primary focus:ring-0 focus:outline-0;
}


/* ==========================================================================
   5. CONTENEURS
   ========================================================================== */

.container {
    @apply md:px-7.5 px-4 max-w-340 mx-auto;
}

.container-full {
    @apply mx-auto max-w-full lg:px-12.5 md:px-7.5 px-4;
}


/* ==========================================================================
   6. NAVBAR
   ========================================================================== */

#navbar a.active {
    @apply text-primary;
    span { @apply scale-100; }
}

#navbar .hs-dropdown-menu a.active {
    @apply bg-primary/8;
}


/* ==========================================================================
   7. SWIPER
   ========================================================================== */

.swiper {
    width: 100%;
    height: 100%;
}

.swiper-button-prev::after,
.swiper-button-next::after {
    display: none;
}

.swiper-button-prev,
.swiper-button-next {
    margin-top: 0 !important;
}


/* ==========================================================================
   8. DÉFILEMENT INFINI HORIZONTAL
   ========================================================================== */

@keyframes infinite-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-100%); }
}

.infinite-scroll {
    animation: infinite-scroll 100s linear infinite;
    will-change: transform;
}

@keyframes infinite-scroll-inverse {
    from { transform: translateX(-100%); }
    to   { transform: translateX(0); }
}

.infinite-scroll-inverse {
    animation: infinite-scroll-inverse 100s linear infinite;
    will-change: transform;
}


/* ==========================================================================
   9. COMPOSANTS LANDING — BLOCS ARTEZYA
   ========================================================================== */

/* --- 9.1 Services sticky --- */

.landing-service-item {
    width: 100%;
}

@media (min-width: 64rem) {
    .landing-service-item {
        position: sticky;
    }
}

/* --- 9.2 Zoom image au hover --- */

.landing-blog-card__img,
.blog-article-card__img,
.blog-article-featured__img,
.service-card__img {
    transition: transform 0.5s ease;
}

.landing-blog-card:hover .landing-blog-card__img,
.blog-article-card:hover .blog-article-card__img,
.blog-article-featured:hover .blog-article-featured__img,
.service-card:hover .service-card__img {
    transform: scale(1.1);
}

/* --- 9.3 Titres avec <em> coloré --- */

.landing-hero__title em,
.landing-about__title em,
.landing-services__title em,
.landing-products__footer-title em,
.landing-cases__title em,
.landing-blog-preview__title em,
.about-story__title em,
.products-header__title em,
.contact-hero__title em {
    font-style: normal;
    color: var(--color-primary);
}

/* --- 9.4 Formulaires --- */

.contact-form__input:focus {
    border-color: var(--color-primary);
    outline: none;
}