/* =============================================================================
   Piscinity — Design System (tokens) — Méditerranée Premium
   Direction : lumière du Sud, artisanat haut de gamme, animations fluides 400-600ms.
   N'ajouter ici QUE des variables (custom properties) et l'import des fonts.
   ============================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,opsz,wght@0,6..96,400;0,6..96,500;0,6..96,600;0,6..96,700;1,6..96,500;1,6..96,600&family=Inter:wght@400;500;600;700&display=swap');

:root {
    /* --- Couleurs primaires ------------------------------------------------ */
    --color-ink:               #0B2E3F; /* Encre Profonde - footer, headlines emphasis */
    --color-primary:           #0E5C70; /* Bleu Lagune - accent froid principal */
    --color-primary-soft:      #1B7286; /* Bleu Lagune clair - hover/decor */
    --color-secondary:         #79C2C2; /* Turquoise Soleil */
    --color-secondary-soft:    #B2DCDC; /* Turquoise pale */

    /* --- Couleurs CTA (corail Piscinity, identité de marque) --------------- */
    --color-cta:               #FF5757; /* Corail Piscinity (logo) */
    --color-cta-hover:         #F23E3E;
    --color-cta-soft:          rgba(255, 87, 87, 0.12);
    --color-text-on-cta:       #FFFFFF; /* texte blanc sur bouton corail (contraste) */
    --color-cta-glow:          #FFC0C0; /* halo / dégradé clair lié au CTA (corail pâle) */
    --color-cta-rgb:           255, 87, 87; /* triplet RGB du CTA pour les halos rgba(...) */

    /* --- Fonds (jamais sombre par défaut, lumière du Sud) ----------------- */
    --color-bg-page:           #FBF9F5; /* Crème Lumière */
    --color-bg-section:        #F4ECDF; /* Sable doux légèrement chaud (alternance) */
    --color-bg-white:          #FFFFFF;
    --color-bg-glass:          rgba(255, 255, 255, 0.78); /* Header glass clair */
    --color-bg-dark:           #0B2E3F; /* Footer + bandeaux nuit */

    /* --- Texte -------------------------------------------------------------- */
    --color-text:              #0F2733; /* corps - lisible 4.5:1+ sur crème */
    --color-text-muted:        #4D6470; /* captions, sous-titres */
    --color-text-on-primary:   #FFFFFF;
    --color-text-on-dark:      rgba(255, 255, 255, 0.92);
    --color-text-on-dark-mut:  rgba(255, 255, 255, 0.74);

    /* --- Bordures et états ------------------------------------------------- */
    --color-border:            #E2DDD3;
    --color-border-strong:     #C9C2B3;
    --color-border-on-dark:    rgba(255, 255, 255, 0.14);
    --color-success:           #5C8A4A;
    --color-error:             #B0492C;

    /* --- Typographie : Bodoni Moda (display) + Inter (body) --------------- */
    --font-display: 'Bodoni Moda', 'Cormorant Garamond', Georgia, serif;
    --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    /* Echelle typographique premium (mobile first) */
    --fs-display-mobile: 48px;
    --fs-display:        clamp(56px, 8.5vw, 112px); /* Hero H1, vraiment imposant */
    --fs-h1-mobile:      40px;
    --fs-h1:             clamp(44px, 4.8vw, 72px);
    --fs-h2-mobile:      32px;
    --fs-h2:             clamp(36px, 3.6vw, 56px);
    --fs-h3-mobile:      24px;
    --fs-h3:             clamp(26px, 2.2vw, 34px);
    --fs-h4-mobile:      20px;
    --fs-h4:             22px;
    --fs-eyebrow:        13px;
    --fs-body:           17px;
    --fs-body-large:     19px;
    --fs-body-small:     14px;
    --fs-button:         15px;
    --fs-caption:        12px;

    --lh-tight:    1.05;
    --lh-display:  1.02;
    --lh-snug:     1.15;
    --lh-normal:   1.35;
    --lh-relaxed:  1.7;

    /* --- Espacements (8 px grid) ------------------------------------------- */
    --space-1:   4px;
    --space-2:   8px;
    --space-3:   12px;
    --space-4:   16px;
    --space-5:   20px;
    --space-6:   24px;
    --space-8:   32px;
    --space-10:  40px;
    --space-12:  48px;
    --space-16:  64px;
    --space-20:  80px;
    --space-24:  96px;
    --space-32:  128px;
    --space-40:  160px;

    /* --- Rayons et ombres -------------------------------------------------- */
    --radius-xs: 2px;
    --radius-sm: 4px;
    --radius-md: 10px;
    --radius-lg: 18px;
    --radius-xl: 28px;
    --radius-pill: 999px;

    --shadow-soft:    0 4px 14px rgba(11, 46, 63, 0.06);
    --shadow-medium:  0 12px 28px rgba(11, 46, 63, 0.10);
    --shadow-strong:  0 24px 56px rgba(11, 46, 63, 0.18);
    --shadow-cta:     0 10px 24px rgba(255, 87, 87, 0.30);
    --shadow-cta-hover: 0 14px 32px rgba(242, 62, 62, 0.42);

    /* --- Transitions premium (jamais < 250ms ni > 600ms) ------------------ */
    --ease-out:    cubic-bezier(0.22, 0.61, 0.36, 1);
    --ease-in-out: cubic-bezier(0.45, 0.05, 0.55, 0.95);
    --ease-emph:   cubic-bezier(0.2, 0.8, 0.2, 1);

    --transition-fast:  220ms var(--ease-out);
    --transition-base:  320ms var(--ease-out);
    --transition-slow:  520ms var(--ease-emph);

    /* --- Layout ----------------------------------------------------------- */
    --container-max:    1280px;
    --container-narrow: 820px;
    --container-pad:    clamp(20px, 4vw, 56px);

    --header-h:       80px;
    --header-h-sm:    64px;
}

/* prefers-reduced-motion : on coupe net les transitions et animations */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}