/*
Theme Name: Rodeo Stitch
Theme URI: https://www.rodeodesign.com/
Author: Rodeo Design
Description: Un thème WordPress pixel-perfect, animé et minimaliste basé sur le design Stitch.
Version: 1.1
License: GNU General Public License v2 or later
Text Domain: rodeo-stitch
*/

/* ===============================================================
   VARIABLES & DESIGN TOKENS
   =============================================================== */
:root {
    --stitch-violet: #4b3aec;
    --stitch-violet-light: rgba(75, 58, 236, 0.1);
    --stitch-dark: #2d2d41;
    --stitch-bg: #f8f7ff;
    --stitch-white: #ffffff;
    --stitch-gray: #5a5970;
    --stitch-font-sans: 'Inter', sans-serif;
    --stitch-font-display: 'Bricolage Grotesque', sans-serif;
    --stitch-font-mono: 'Open sans', monospace;
}

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

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
}

body {
    background-color: var(--stitch-bg);
    color: var(--stitch-dark);
    font-family: var(--stitch-font-sans);
    line-height: 1.5;
    overflow-x: hidden;
}

::selection {
    background-color: var(--stitch-violet);
    color: var(--stitch-white);
}

/* ===============================================================
   TYPOGRAPHY
   =============================================================== */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--stitch-font-display);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.font-display { font-family: var(--stitch-font-display); }
.font-mono { font-family: var(--stitch-font-mono); }

/* ===============================================================
   LAYOUT UTILITIES (MAPPING TAILWIND)
   =============================================================== */
.max-w-7xl { max-width: 80rem; margin-left: auto; margin-right: auto; }
.px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
.mx-auto { margin-left: auto; margin-right: auto; }

/* ===============================================================
   COMPONENTS: HEADER & NAVIGATION
   =============================================================== */
.glass-nav {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(75, 58, 236, 0.1);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
}

/* Style du menu WordPress */
.glass-nav ul {
    display: flex;
    gap: 2rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.glass-nav li a {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--stitch-dark);
    transition: color 0.3s ease;
}

.glass-nav li a:hover {
    color: var(--stitch-violet);
}

/* ===============================================================
   COMPONENTS: FOOTER & CONTACT
   =============================================================== */
footer#contact {
    background-color: var(--stitch-dark);
    color: var(--stitch-white);
}

footer input, footer textarea {
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    color: white;
    padding: 0.75rem 0;
    width: 100%;
    outline: none;
    transition: border-color 0.3s ease;
}

footer input:focus, footer textarea:focus {
    border-color: var(--stitch-violet);
}

/* ===============================================================
   ANIMATIONS
   =============================================================== */
@keyframes drift {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(2%, 2%) scale(1.05); }
    66% { transform: translate(-1%, 3%) scale(0.95); }
}

@keyframes marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.animate-drift {
    animation: drift 20s ease-in-out infinite;
}

.marquee-content {
    display: flex;
    width: fit-content;
    animation: marquee 25s linear infinite;
}

/* ===============================================================
   WORDPRESS FIXES
   =============================================================== */
.entry-content, .post-content, .wp-block-post-content {
    overflow: visible !important;
}

/* Cache l'en-tête WordPress par défaut si nécessaire */
#wpadminbar {
    opacity: 0.9;
}