:root {
    --bg-color: #08080c;
    --card-bg: rgba(255, 255, 255, 0.03);
    --card-border: rgba(255, 255, 255, 0.08);
    --text-primary: #ffffff;
    --text-secondary: #94a3b8;
    --accent: #6366f1;
    --accent-glow: rgba(99, 102, 241, 0.15);
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    background-color: var(--bg-color);
    color: var(--text-primary);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    overflow-x: hidden;
    letter-spacing: -0.02em;
}

nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 2rem 4%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 1000;
    background: linear-gradient(to bottom, rgba(8, 8, 12, 0.9), rgba(8, 8, 12, 0));
    backdrop-filter: blur(8px);
}

.logo {
    font-size: 1.5rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-primary);
    text-decoration: none;
    transition: color 0.3s;
}

.logo:hover {
    color: var(--accent);
}

.nav-links {
    display: flex;
    gap: 2.5rem;
}

.nav-links a {
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    transition: color 0.3s;
}

.nav-links a:hover {
    color: var(--text-primary);
}

.hero {
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 0 1rem;
    position: relative;
}

.hero::before {
    content: '';
    position: absolute;
    width: 400px;
    height: 400px;
    background: var(--accent);
    filter: blur(150px);
    opacity: 0.12;
    pointer-events: none;
}

.hero h1 {
    font-size: 3.5rem;
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 1.5rem;
    background: linear-gradient(to right, #fff, #94a3b8);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero p {
    color: var(--text-secondary);
    font-size: 1.15rem;
    max-width: 600px;
    margin-bottom: 3rem;
}

.scroll-indicator {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--accent);
    animation: pulse 2s infinite;
}

/* section volontairement très haute (500vh) pour avoir assez de scroll
   à "consommer" avant que le carousel ait fini toute sa rotation */
.showcase-section {
    height: 500vh;
    position: relative;
}

.scene-container {
    position: sticky;
    top: 0;
    height: 100vh;
    /* svh : sur mobile, 100vh inclut la barre d'adresse et la scene sautait
       quand celle-ci se retracte au defilement */
    height: 100svh;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    perspective: 2000px;
    overflow: hidden;
}

/* la rotation réelle est appliquée en JS (script.js) selon le scroll,
   ici on prépare juste la perspective 3D et une transition très courte
   pour que ça reste fluide sans "traîner" derrière la souris */
.carousel3d {
    /* toute la geometrie tient dans ces trois variables : les media queries
       n'ont plus qu'a les redefinir pour adapter le carrousel a l'ecran */
    --card-w: 320px;
    --card-h: 460px;
    --radius: 380px;

    width: var(--card-w);
    height: var(--card-h);
    position: absolute;
    transform-style: preserve-3d;
    will-change: transform;
    /* la rotation se cale desormais sur des paliers de 60deg (voir script.js) :
       il faut une transition assez longue pour que le passage d'une carte a
       l'autre soit un glissement et non un saut */
    transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.product-card {
    position: absolute;
    width: var(--card-w);
    height: var(--card-h);
    /* chaque carte se place toute seule sur l'anneau depuis son index --i */
    transform: rotateY(calc(var(--i) * 60deg)) translateZ(var(--radius));
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    backdrop-filter: blur(20px);
    border-radius: 24px;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    backface-visibility: hidden;
    transition: border-color 0.4s, box-shadow 0.4s;
}

.product-card:hover {
    border-color: rgba(99, 102, 241, 0.3);
    box-shadow: 0 20px 40px var(--accent-glow);
}

.product-image-area {
    width: 100%;
    height: 200px;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.03);
    color: #ffffff;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    overflow: hidden;
}

.product-image-area img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.product-meta h3 {
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: #fff;
}

.product-meta p {
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1.4;
}

.product-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 1.5rem;
}

.price {
    font-size: 1.25rem;
    font-weight: 700;
}

.view-link {
    color: var(--accent);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: color 0.3s;
}

.view-link:hover {
    color: #fff;
}

.about-section {
    min-height: 80vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(to top, #040406, var(--bg-color));
    padding: 4rem 2rem;
    position: relative;
}

.about-content {
    max-width: 800px;
    text-align: center;
}

.about-content h2 {
    font-size: 2.5rem;
    margin-bottom: 2rem;
    font-weight: 800;
}

.about-content p {
    font-size: 1.1rem;
    line-height: 1.8;
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
}

.highlight-violet {
    color: #9333ea;
    text-decoration: underline;
}

@keyframes pulse {

    0%,
    100% {
        opacity: 0.6;
        transform: translateY(0);
    }

    50% {
        opacity: 1;
        transform: translateY(6px);
    }
}

/* ========================================================================= */
/* AJOUTS RESPONSIVE (Mobiles & Tablettes)                                   */
/* Le carrousel conserve ses dimensions de 320x460 (passe partout)           */
/* ========================================================================= */

@media screen and (max-width: 768px) {

    /* Carrousel : les cartes gardaient 320px de large sur un ecran de 375px.
       On redimensionne, et le rayon suit la meme proportion (380/320) pour
       que l'anneau garde son allure. */
    .carousel3d {
        --card-w: min(300px, 76vw);
        --card-h: 420px;
        --radius: calc(var(--card-w) * 1.1875);
    }

    .product-card {
        padding: 1.25rem;
    }

    .product-image-area {
        height: 150px;
    }

    .product-meta h3 {
        font-size: 1.1rem;
    }

    .product-meta p {
        font-size: 0.85rem;
    }

    /* Navigation : On centre et on empile si besoin */
    nav {
        padding: 1.5rem 5%;
        flex-direction: column;
        gap: 1rem;
    }

    .nav-links {
        gap: 1.5rem;
    }

    /* Hero : Réduction de la taille de la typo pour éviter les débordements */
    .hero h1 {
        font-size: 2.2rem;
        margin-bottom: 1rem;
    }

    .hero p {
        font-size: 1rem;
        padding: 0 1rem;
        margin-bottom: 2rem;
    }

    .hero::before {
        width: 250px;
        height: 250px;
    }

    /* About section : Marges et tailles de typo ajustées */
    .about-section {
        padding: 3rem 1.5rem;
    }

    .about-content h2 {
        font-size: 1.8rem;
        margin-bottom: 1.5rem;
    }

    .about-content p {
        font-size: 0.95rem;
    }

}

@media screen and (max-width: 480px) {

    /* Ajustements mineurs pour les très petits smartphones */
    .hero h1 {
        font-size: 1.8rem;
    }

    .nav-links {
        gap: 1rem;
    }

    .nav-links a {
        font-size: 0.85rem;
    }
}