/* ========================================
   DOYA STUDIO - STYLES GLOBAUX
   Studio de réalisation haut de gamme
   
   ARCHITECTURE CSS :
   ─────────────────────────────────────────
   Ce fichier contient :
   1. TOKENS (:root) — Variables de design system
   2. RESET — Normalisation de base
   3. FONDATION — Body, typographie HTML, glue transversale
   4. UTILITAIRES — Classes helper réutilisables
   
   Les styles spécifiques sont dans :
   - components/*.css — Socle composants réutilisables + header/footer
   - page-*.css — Styles par template (chargement conditionnel)
   ======================================== */


/* ========================================
   1. TOKENS — Variables CSS
   ======================================== */
:root {
    /* ----------------------------------------
       COULEURS — Palette principale
       ---------------------------------------- */
    --color-primary: #DD571C;
    --color-primary-light: #FF6B35;
    --gradient-primary: linear-gradient(135deg, #DD571C 0%, #FF6B35 100%);
    --gradient-primary-hover: linear-gradient(135deg, #FF6B35 0%, #FF8C42 100%);
    /* Variantes d'opacité */
    --color-primary-15: rgba(221, 87, 28, 0.15);
    --color-primary-20: rgba(221, 87, 28, 0.2);
    --color-primary-30: rgba(221, 87, 28, 0.3);
    
    /* ----------------------------------------
       COULEURS — Palette carbone
       ---------------------------------------- */
    --carbon-100: #2A2A2A;
    --carbon-200: #1A1A1A;
    --carbon-300: #111111;
    --carbon-400: #0A0A0A;
    --carbon-500: #030303;
    
    /* ----------------------------------------
       COULEURS — Palette neutre (du plus clair au plus foncé)
       ---------------------------------------- */
    --white: #FFFFFF;
    --black: #000000;
    --neutral-100: #F5F5F5;
    --neutral-200: #E5E5E5;
    --neutral-300: #D4D4D4;
    --neutral-400: #A3A3A3;
    --neutral-500: #737373;
    --neutral-600: #525252;
    --neutral-700: #404040;
    --neutral-800: #262626;
    --neutral-900: #171717;
    /* Aliases (à migrer progressivement) */
    --gray-100: var(--neutral-100);
    --gray-200: var(--neutral-200);
    --gray-300: var(--neutral-300);
    --gray-400: var(--neutral-400);
    --gray-500: var(--neutral-500);
    --gray-600: var(--neutral-600);
    --gray-700: var(--neutral-700);
    --gray-800: var(--neutral-800);
    --gray-900: var(--neutral-900);
    
    /* ----------------------------------------
       COULEURS — Transparences (blanc)
       ---------------------------------------- */
    --color-white-02: rgba(255, 255, 255, 0.02);
    --color-white-05: rgba(255, 255, 255, 0.05);
    --color-white-08: rgba(255, 255, 255, 0.08);
    --color-white-10: rgba(255, 255, 255, 0.1);
    --color-white-15: rgba(255, 255, 255, 0.15);
    
    /* ----------------------------------------
       COULEURS — Accents (tricolore étapes)
       Indigo (étape 1) → Orange/Primary (étape 2) → Teal (étape 3)
       ---------------------------------------- */
    --color-accent-indigo: #6366F1;
    --color-accent-indigo-30: rgba(99, 102, 241, 0.3);
    --color-accent-indigo-60: rgba(99, 102, 241, 0.6);
    --color-accent-teal: #14B8A6;
    --color-accent-teal-30: rgba(20, 184, 166, 0.3);
    --color-accent-teal-60: rgba(20, 184, 166, 0.6);
    
    /* ----------------------------------------
       COULEURS — Thématiques (sections spéciales)
       ---------------------------------------- */
    --wedding-bg: #FFF0EB;
    --wedding-accent: #D4AF37;
    --icon-fill-dark: #282928;
    
    /* ----------------------------------------
       TYPOGRAPHIE — Familles de polices
       ---------------------------------------- */
    --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-display: 'Outfit', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-serif: 'Playfair Display', serif;
    
    /* ----------------------------------------
       TYPOGRAPHIE — Tailles (fluid avec clamp)
       ---------------------------------------- */
    --font-size-label: 0.75rem;
    --font-size-meta: 0.875rem;
    --font-size-body: clamp(0.9375rem, 1.1vw, 1rem);
    --font-size-body-large: clamp(1rem, 1.2vw, 1.125rem);
    --font-size-title-card: clamp(1.25rem, 2vw, 1.5rem);
    --font-size-title-card-large: clamp(1.125rem, 2.2vw, 1.625rem);
    --font-size-title-section: clamp(2rem, 4.5vw, 3.5rem);
    --font-size-hero: clamp(2.5rem, 8vw, 6.5rem);
    --font-size-small: 0.65rem;
    
    /* ----------------------------------------
       TYPOGRAPHIE — Line-height
       ---------------------------------------- */
    --line-height-tight: 1.15;
    --line-height-title: 1.2;
    --line-height-body: 1.6;
    --line-height-body-large: 1.65;
    --line-height-loose: 1.7;
    
    /* ----------------------------------------
       TYPOGRAPHIE — Letter-spacing
       ---------------------------------------- */
    --letter-spacing-label: 0.2em;
    --letter-spacing-badge: 0.15em;
    --letter-spacing-title: -0.02em;
    --letter-spacing-title-large: -0.01em;
    
    /* ----------------------------------------
       ESPACEMENTS — Échelle de base
       ---------------------------------------- */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-2xl: 3rem;
    --spacing-3xl: 4rem;
    
    /* ----------------------------------------
       ESPACEMENTS — Sections et composants (fluid)
       ---------------------------------------- */
    --spacing-section: clamp(4rem, 8vw, 6rem);
    --spacing-section-header: clamp(2.5rem, 5vw, 4rem);
    --spacing-grid: clamp(1.5rem, 2.5vw, 2rem);
    --spacing-card: clamp(1.75rem, 2.5vw, 2.25rem);
    --spacing-banner-offset: 80px;
    --size-divider: 24px;
    
    /* ----------------------------------------
       LAYOUT — Dimensions structurelles
       ---------------------------------------- */
    --header-height: 70px;
    --header-height-scrolled: 75px;
    --header-height-mobile: 70px;
    --container-max: 1400px;
    --container-wide: 1600px;
    
    /* ----------------------------------------
       LAYOUT — Largeurs max
       ---------------------------------------- */
    --max-width-section: 760px;
    --max-width-section-narrow: 700px;
    --max-width-section-wide: 900px;
    
    /* ----------------------------------------
       BREAKPOINTS — Points de rupture
       ---------------------------------------- */
    --breakpoint-xs: 480px;
    --breakpoint-sm: 640px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 1024px;
    --breakpoint-xl: 1200px;
    --breakpoint-2xl: 1400px;
    
    /* ----------------------------------------
       BORDURES — Radius
       ---------------------------------------- */
    --border-radius: 8px;
    --border-radius-lg: 12px;
    --border-radius-xl: 16px;
    --border-radius-pill: 999px;
    
    /* ----------------------------------------
       BORDURES — Styles pré-calculés
       ---------------------------------------- */
    --border-subtle: 1px solid var(--color-white-08);
    --border-light: 1px solid var(--color-white-10);
    --border-medium: 1px solid var(--color-white-15);
    --border-dim: 1px solid rgba(255, 255, 255, 0.06);
    --border-hero: 1px solid rgba(255, 255, 255, 0.12);
    
    /* ----------------------------------------
       OMBRES
       ---------------------------------------- */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15);
    --shadow-glow: 0 0 20px rgba(221, 87, 28, 0.3);
    --shadow-header: 0 4px 24px rgba(0, 0, 0, 0.4);
    --shadow-overlay: 0 0 0 1px rgba(255, 255, 255, 0.05);
    
    /* ----------------------------------------
       TRANSITIONS — Durées
       ---------------------------------------- */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;
    --transition-bg: 0.6s ease;
    --transition-opacity: 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    
    /* ----------------------------------------
       TRANSITIONS — Courbes d'animation
       ---------------------------------------- */
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out-smooth: cubic-bezier(0.4, 0, 0.2, 1);
    --transition-smooth: 0.5s var(--ease-in-out-smooth);
    
    /* ----------------------------------------
       BLUR — Backdrop-filter
       ---------------------------------------- */
    --blur-sm: blur(5px);
    --blur-md: blur(10px);
    --blur-lg: blur(14px);
    --blur-xl: blur(20px);
    
    /* ----------------------------------------
       OPACITÉS — États visuels
       ---------------------------------------- */
    --opacity-subtle: 0.05;
    --opacity-light: 0.08;
    --opacity-medium: 0.1;
    --opacity-strong: 0.15;
    --opacity-accent: 0.2;
    --opacity-overlay: 0.38;
    --opacity-dim: 0.6;
    --opacity-muted: 0.5;
    --opacity-hover: 1;
    --opacity-active: 0.7;
    --opacity-badge-default: 0.7;
    --opacity-card-inactive: 0.85;
    --opacity-ghost: 0.03;
    --opacity-ghost-hover: 0.05;
    
    /* ----------------------------------------
       OVERLAYS — Fonds semi-transparents
       ---------------------------------------- */
    --overlay-light: rgba(0, 0, 0, 0.3);
    --overlay-medium: rgba(0, 0, 0, 0.4);
    --overlay-semi: rgba(0, 0, 0, 0.5);
    --overlay-dark: rgba(0, 0, 0, 0.7);
    --overlay-vignette: rgba(0, 0, 0, 0.85);
    --overlay-card: linear-gradient(135deg, rgba(10, 10, 10, 0.8) 0%, rgba(17, 17, 17, 0.55) 100%);
    --overlay-carousel: linear-gradient(to bottom, transparent 0%, rgba(10, 10, 10, 0.25) 50%, rgba(10, 10, 10, 0.8) 100%);
    --shadow-band: linear-gradient(to bottom, rgba(0, 0, 0, 0.08), transparent);
    
    /* ----------------------------------------
       Z-INDEX — Échelle centralisée
       Règle : utiliser UNIQUEMENT ces tokens, jamais de valeurs hardcodées
       ---------------------------------------- */
    --z-base: 0;
    --z-background: 1;
    --z-content: 2;
    --z-overlay: 3;
    --z-badge: 10;
    --z-sticky: 100;
    --z-header: 1000;
    --z-mobile-menu: 1100;
    --z-hamburger: 1200;
    --z-modal: 2000;
    --z-lightbox: 2100;
    --z-toast: 3000;
    
    /* ----------------------------------------
       TRANSFORMS — Valeurs courantes
       ---------------------------------------- */
    --transform-lift: translateY(-4px);
    --transform-lift-large: translateY(-8px);
    --transform-slide-down: translateY(16px);
    --transform-slide-up: translateY(-16px);
    
    /* ----------------------------------------
       COMPOSANTS — Dimensions spécifiques
       ---------------------------------------- */
    --size-play-button: 72px;
    --size-play-button-sm: 56px;
    --size-play-button-xs: 44px;
    --size-nav-button: 44px;
    --size-nav-button-sm: 38px;
    --size-icon-quote: 32px;
    --process-badge-size: 72px;
    --process-badge-size-sm: 64px;
    --process-number-font-size: clamp(5rem, 8vw, 7rem);
    --process-number-offset-top: -24px;
    --process-number-offset-right: -8px;
    
}

/* ========================================
   2. RESET — Normalisation de base
   ======================================== */

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

/* Reset marges/paddings sur éléments courants */
body,
h1, h2, h3, h4, h5, h6,
p,
figure,
blockquote,
dl, dd {
    margin: 0;
}

/* Liste sans style par défaut (dans nav) */
ul[role='list'],
ol[role='list'] {
    list-style: none;
    padding: 0;
    margin: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-primary);
    line-height: var(--line-height-body);
    color: var(--white);
    background-color: var(--carbon-400);
    overflow-x: hidden;
    min-height: 100vh;
    text-rendering: optimizeSpeed;
}

/* Admin bar offset pour header fixed */
body.admin-bar .studio-header.header--transparent {
    top: 32px;
}

@media screen and (max-width: 782px) {
    body.admin-bar .studio-header.header--transparent {
        top: 46px;
    }
}

/* Reset liens */
a {
    color: inherit;
    text-decoration: none;
}

a:not([class]) {
    text-decoration-skip-ink: auto;
}

/* Images responsives par défaut */
img,
picture {
    max-width: 100%;
    display: block;
}

/* Héritage des polices pour les formulaires */
input,
button,
textarea,
select {
    font: inherit;
}

/* ========================================
   3. TYPOGRAPHIE — Styles de base
   ======================================== */

/* Titres - Styles par défaut */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    color: var(--white);
    line-height: var(--line-height-title);
}

h1 {
    font-size: clamp(2rem, 4vw, 3.5rem);
    font-weight: 700;
    letter-spacing: var(--letter-spacing-title);
    margin-bottom: var(--spacing-lg);
}

h2 {
    font-size: clamp(1.75rem, 3.5vw, 2.5rem);
    font-weight: 600;
    letter-spacing: var(--letter-spacing-title-large);
    margin-bottom: var(--spacing-md);
}

h3 {
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 600;
    margin-bottom: var(--spacing-md);
}

h4 {
    font-size: clamp(1.25rem, 2.5vw, 1.75rem);
    font-weight: 500;
    margin-bottom: var(--spacing-sm);
}

h5 {
    font-size: clamp(1.1rem, 2vw, 1.5rem);
    font-weight: 500;
    margin-bottom: var(--spacing-sm);
}

h6 {
    font-size: clamp(1rem, 1.8vw, 1.25rem);
    font-weight: 500;
    margin-bottom: var(--spacing-sm);
}


/* ========================================
   COMPOSANTS UTILITAIRES
   ======================================== */
/* Boutons : déplacés vers components/ui-buttons-links.css */

/* ========================================
   CONTAINER — Standardisé
   ======================================== */
.container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--spacing-lg);
}

/* ========================================
   ANIMATIONS
   ======================================== */


/* ========================================
   RESPONSIVE
   ======================================== */
/* Responsive boutons : déplacé vers components/ui-buttons-links.css */

/* ========================================
   ACCESSIBILITÉ
   ======================================== */

/* Respect des préférences de mouvement réduit */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Focus visible */
/* (déplacé vers components/ui-focus.css) */

/* Mode sombre forcé */
@media (prefers-color-scheme: light) {
    body {
        background-color: var(--carbon-400);
        color: var(--white);
    }
}

/* ========================================
   UI (déplacé vers components/)
   - Boutons : components/ui-buttons-links.css
   - Focus visible : components/ui-focus.css
   ======================================== */

/* ========================================
   COMPOSANTS VIDÉO
   ----------------------------------------
   `.video-card` a été déplacé vers `assets/css/components/ui-media-cards.css`
   (chargement conditionnel perf-first).
   ======================================== */

/* ========================================
   CLASSES UTILITAIRES — Système de Design
   
   Convention de nommage simplifiée :
   - Pas de préfixe pour alléger le code
   - BEM classique : .block__element--modifier
   - Conflits Elementor évités car leurs classes sont .elementor-*
   ======================================== */

/* ----------------------------------------
   ANIMATIONS — Globales réutilisables
   ---------------------------------------- */

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: var(--transform-slide-down);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ----------------------------------------
   SECTION SPACING — Padding standardisé
   Usage: Remplace padding: var(--spacing-3xl) 0 dupliqué
   ---------------------------------------- */
.section-spacing--large {
    padding: var(--spacing-section) 0;
}

/* ----------------------------------------
   OVERLAYS GRADIENT — Classes utilitaires
   Usage: Remplace les gradients dupliqués dans les pages
   ---------------------------------------- */
.overlay-gradient-bottom {
    background: linear-gradient(180deg, transparent 40%, rgba(0, 0, 0, 0.4) 100%);
    pointer-events: none;
}

.overlay-gradient-top {
    background: linear-gradient(0deg, transparent 40%, rgba(0, 0, 0, 0.4) 100%);
    pointer-events: none;
}

.overlay-gradient-strong {
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.5) 50%, transparent 100%);
    pointer-events: none;
}

/* ----------------------------------------
   POSITIONING — Classes utilitaires
   Usage: Remplace transform: translate(-50%, -50%) dupliqué
   ---------------------------------------- */
.center-absolute {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}