/* ============================================================
   IK TISSU - Système de design (custom.css)
   ----------------------------------------------------------
   Source unique de vérité pour la palette, les polices et les
   animations partagées. Tailwind référence ces variables CSS
   via tailwind.config inline dans index.php.

   Convention : couleurs en triplets RGB pour permettre les
   modificateurs d'opacité Tailwind (text-cream/60, etc.)
   ============================================================ */

/* ------------------------------------------------------------
   1. POLICES (self-hosted, woff2, subset latin)
   ------------------------------------------------------------ */
@font-face {
    font-family: 'Cormorant Garamond';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url('/assets/fonts/cormorant-garamond-400-italic.woff2') format('woff2');
}
@font-face {
    font-family: 'Cormorant Garamond';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/assets/fonts/cormorant-garamond-400-normal.woff2') format('woff2');
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/assets/fonts/inter-400-normal.woff2') format('woff2');
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/assets/fonts/inter-500-normal.woff2') format('woff2');
}

/* ------------------------------------------------------------
   2. VARIABLES CSS - palette (triplets RGB), typo, easing
   ------------------------------------------------------------ */
:root {
    /* Couleurs marque (verrouillées sur logo IK Fashion House)
       Format triplet sans virgules : "R G B" - compatible avec
       rgb(var(--color-X) / <alpha-value>) côté Tailwind */
    --color-cream:           250 247 242;   /* #FAF7F2 */
    --color-cream-2:         245 241 234;   /* #F5F1EA */
    --color-sage:            168 196 162;   /* #A8C4A2 */
    --color-sage-deep:        88 116  80;   /* #587450 */
    --color-terracotta:      216 139 110;   /* #D88B6E */
    --color-terracotta-deep: 156  92  68;   /* #9C5C44 */
    --color-ink:              10  10  10;   /* #0A0A0A */

    /* Polices */
    --font-serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
    --font-sans:  'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;

    /* Easing cinématique (ease-out doux) - pour D2 */
    --easing-cinematic: cubic-bezier(0.16, 1, 0.3, 1);

    /* Durées d'animation */
    --duration-fast: 200ms;
    --duration-base: 600ms;
    --duration-slow: 1200ms;
}

/* ------------------------------------------------------------
   3. RESET LÉGER (essentiels uniquement)
   ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}

body {
    margin: 0;
    font-family: var(--font-sans);
    color: rgb(var(--color-ink));
    background: rgb(var(--color-cream));
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 1.5;
    overflow-x: hidden;
}

img, picture, video {
    max-width: 100%;
    display: block;
}

button { font: inherit; cursor: pointer; }
a { color: inherit; }

/* Sélection de texte */
::selection { background: rgb(var(--color-sage)); color: rgb(var(--color-ink)); }

/* ------------------------------------------------------------
   4. SCROLLBAR DISCRÈTE
   ------------------------------------------------------------ */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: rgb(var(--color-cream-2)); }
::-webkit-scrollbar-thumb { background: rgb(var(--color-sage)); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgb(var(--color-sage-deep)); }

/* ------------------------------------------------------------
   5. ANIMATIONS PARTAGÉES
   ----------------------------------------------------------
   .anim-ken-burns      - zoom lent infini (hero photo)
   .anim-fade-up        - fade + translateY au scroll, déclenché
                          par classe .is-visible posée par
                          main.js IntersectionObserver
   .anim-veil-up        - voile cream qui se lève (transition
                          entre actes)
   ------------------------------------------------------------ */

/* Ken Burns - zoom 1 → 1.05 → 1 sur 25s */
.anim-ken-burns {
    animation: kenBurns 25s var(--easing-cinematic) infinite;
    will-change: transform;
}
@keyframes kenBurns {
    0%, 100% { transform: scale(1) translate(0, 0); }
    50%      { transform: scale(1.05) translate(-1.5%, -1%); }
}

/* Fade-up - révèle au scroll */
.anim-fade-up {
    opacity: 0;
    transform: translateY(30px);
    transition:
        opacity var(--duration-slow) var(--easing-cinematic),
        transform var(--duration-slow) var(--easing-cinematic);
    will-change: opacity, transform;
}
.anim-fade-up.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger - délai progressif sur enfants successifs */
.anim-fade-up[data-stagger="1"] { transition-delay: 0ms; }
.anim-fade-up[data-stagger="2"] { transition-delay: 150ms; }
.anim-fade-up[data-stagger="3"] { transition-delay: 300ms; }
.anim-fade-up[data-stagger="4"] { transition-delay: 450ms; }

/* Scale-Y - filet vertical qui se déploie (utilisé pour décorations linéaires) */
.anim-scale-y {
    transform: scaleY(0);
    transform-origin: top;
    transition: transform var(--duration-base) var(--easing-cinematic);
    will-change: transform;
}
.anim-scale-y.is-visible {
    transform: scaleY(1);
}

/* Letter-by-letter stagger - pour le titre hero "Le coton, sublimé" (Acte I).
   delay défini inline via style="animation-delay: Xms" côté PHP. */
.anim-letter {
    display: inline-block;
    opacity: 0;
    transform: translateY(20px);
    animation: letterIn 600ms var(--easing-cinematic) forwards;
    will-change: opacity, transform;
}
@keyframes letterIn {
    to { opacity: 1; transform: translateY(0); }
}

/* Fade + scale (0.95 → 1) - pour les photos Acte III */
.anim-fade-scale {
    opacity: 0;
    transform: scale(0.95);
    transition:
        opacity var(--duration-slow) var(--easing-cinematic),
        transform var(--duration-slow) var(--easing-cinematic);
    will-change: opacity, transform;
}
.anim-fade-scale.is-visible {
    opacity: 1;
    transform: scale(1);
}

/* Pulse vertical - pour le scroll cue Acte I (trait sage qui s'étire et se contracte) */
.anim-pulse-vertical {
    animation: pulseVertical 2.4s ease-in-out infinite;
    transform-origin: top;
    will-change: transform;
}
@keyframes pulseVertical {
    0%, 100% { transform: scaleY(1); }
    50%      { transform: scaleY(1.2); }
}

/* CTA sticky "Réserver" - styles principaux INLINE dans index.php pour robustesse
   (indépendant du chargement CSS). Seule la règle hover vit ici. */
#cta-sticky:hover {
    background: #9C5C44 !important; /* terracotta-deep */
}

/* Pulse WhatsApp - halo doux qui respire sur le bouton final (Acte VI) */
@keyframes pulseWhatsapp {
    0%, 100% { box-shadow: 0 20px 50px -15px rgba(37, 211, 102, 0.55); }
    50%      { box-shadow: 0 28px 65px -10px rgba(37, 211, 102, 0.95); }
}
.animate-pulse-whatsapp {
    animation: pulseWhatsapp 2.5s ease-in-out infinite;
}

/* Veil-up - voile cream qui se lève (mask reveal) */
.anim-veil-up {
    position: relative;
    overflow: hidden;
}
.anim-veil-up::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgb(var(--color-cream));
    transform: translateY(0);
    transition: transform var(--duration-slow) var(--easing-cinematic);
    will-change: transform;
    pointer-events: none;
}
.anim-veil-up.is-visible::after {
    transform: translateY(-100%);
}

/* ------------------------------------------------------------
   6. PREFERS-REDUCED-MOTION (global)
   ------------------------------------------------------------ */
@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;
    }
    .anim-ken-burns        { animation: none !important; }
    .anim-fade-up          { opacity: 1 !important; transform: none !important; }
    .anim-fade-scale       { opacity: 1 !important; transform: none !important; }
    .anim-scale-y          { transform: scaleY(1) !important; }
    .anim-letter           { opacity: 1 !important; transform: none !important; animation: none !important; }
    .anim-pulse-vertical   { animation: none !important; }
    .anim-veil-up::after   { transform: translateY(-100%) !important; }
    .animate-pulse-whatsapp { animation: none !important; }
}

/* ------------------------------------------------------------
   7. UTILITAIRES PONCTUELS
   ------------------------------------------------------------ */
.text-balance { text-wrap: balance; }

/* Focus visible accessible (sage profond, 2px) */
:focus-visible {
    outline: 2px solid rgb(var(--color-sage-deep));
    outline-offset: 2px;
    border-radius: 2px;
}