/* =================================================================
   DESIGN SYSTEM — Simplement Vous
   Source : Maquette approuvée par le client (mars 2026)
   Tonalité : Organic Luxury — élégant, chaleureux, artisanal

   Google Fonts (à preload dans le HTML) :
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,400;1,500&family=Plus+Jakarta+Sans:wght@300;400;500;600&display=swap" rel="stylesheet">

   Breakpoints (mobile-first, min-width) :
   - Tablet  : 768px
   - Desktop : 1024px
   - Wide    : 1400px
   ================================================================= */

:root {
    /* ----- Colors ----- */
    --c-bg: #FDFBF8;
    --c-bg-alt: #F3F0EB;
    --c-text-main: #2A2826;
    --c-text-muted: #6B6661;
    --c-primary: #A67B5B;
    --c-primary-dark: #8C6245;
    --c-accent: #D4C5B9;
    --c-white: #FFFFFF;
    --c-black: #1A1918;

    /* ----- Typography — Families ----- */
    --f-display: 'Cormorant Garamond', serif;
    --f-body: 'Plus Jakarta Sans', sans-serif;
    --f-signature: 'Great Vibes', cursive;

    /* ----- Typography — Sizes ----- */
    --fs-hero: clamp(2.5rem, 6vw, 5rem);
    --fs-display: clamp(2rem, 5vw, 4rem);
    --fs-h3: 1.5rem;
    --fs-lead: 1.125rem;
    --fs-body: 1rem;
    --fs-nav: 0.95rem;
    --fs-btn: 0.9rem;
    --fs-small: 0.85rem;
    --fs-eyebrow: 0.8rem;
    --fs-micro: 0.75rem;

    /* ----- Typography — Line Heights ----- */
    --lh-body: 1.7;
    --lh-heading: 1.1;
    --lh-quote: 1.3;
    --lh-badge: 1.6;

    /* ----- Typography — Weights ----- */
    --fw-light: 300;
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;

    /* ----- Spacing ----- */
    --s-container: 1280px;
    --s-container-width: 90%;
    --s-container-wide: 1400px;
    --s-section: clamp(5rem, 8vw, 10rem);
    --s-gap-2xl: clamp(6rem, 12vw, 12rem);
    --s-gap-xl: 6rem;
    --s-gap-lg: 4rem;
    --s-gap-md: 3rem;
    --s-gap-sm: 2rem;
    --s-gap-xs: 1.5rem;
    --s-gap-xxs: 1rem;

    /* ----- Border Radius ----- */
    --r-sm: 4px;
    --r-md: 12px;
    --r-lg: 24px;
    --r-full: 999px;

    /* ----- Shadows ----- */
    --shadow-card: 0 20px 40px rgba(0, 0, 0, 0.06);
    --shadow-badge: -10px 10px 40px rgba(0, 0, 0, 0.05);
    --shadow-section: 0 30px 60px rgba(0, 0, 0, 0.05);
    --shadow-header: 0 4px 30px rgba(0, 0, 0, 0.03);

    /* ----- Transitions ----- */
    --ease-out: cubic-bezier(0.215, 0.61, 0.355, 1);
    --ease-in-out: cubic-bezier(0.645, 0.045, 0.355, 1);
    --t-fast: 0.3s;
    --t-normal: 0.4s;
    --t-slow: 0.5s;
    --t-reveal: 0.8s;

    /* ----- Component tokens ----- */
    --logo-height: 80px;
    --icon-box-size: 64px;
    --icon-overlay-size: 32px;
    --header-offset: 120px;
    --hero-desc-max: 480px;
    --vibe-max-width: 800px;
    --map-min-height: 400px;
    --footer-padding: 5rem 0 2rem;

    /* ----- Typography — Misc ----- */
    --fs-signature: 2rem;
    --fs-quote-mark: 4rem;
    --fs-quote-mark-lg: 6rem;
    --ls-eyebrow: 2px;
    --ls-stat: 1px;

    /* ----- Colors — Alpha variants ----- */
    --c-bg-glass: rgba(253, 251, 248, 0.9);
    --c-white-70: rgba(255, 255, 255, 0.7);
    --c-white-10: rgba(255, 255, 255, 0.1);
    --c-border-light: rgba(0, 0, 0, 0.03);
    --c-border-subtle: rgba(0, 0, 0, 0.1);
    --c-vibe-overlay: rgba(26, 25, 24, 0.4);

    /* ----- Z-Index ----- */
    --z-header: 100;
    --z-overlay: 50;
    --z-content: 2;
    --z-base: 1;
}