/* ==========================================================================
   PATICHE • Façonné à Troyes — DESIGN SYSTEM MAÎTRE UNIFIÉ (3 VERSIONS)
   Généré selon les directives et datasets du skill UI/UX Pro Max
   Normes : WCAG 2.2 AA/AAA, Apple HIG & Material Design 3
   ========================================================================== */

:root {
  /* 1. ÉCHELLE D'ESPACEMENT SPATIAL (Grille modulaire 8-pt) */
  --space-05: 2px;
  --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;

  /* 2. ERGONOMIE TACTILE & CONVERSIONS (WCAG 2.2 AA) */
  --touch-target-min: 44px; /* Règle Apple HIG & Material Design */
  --touch-gap-min: 8px;
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 26px;
  --radius-full: 9999px;

  /* 3. ÉCHELLE TYPOGRAPHIQUE ACCESSIBLE (Base 16px mobile) */
  --font-size-xs:   0.75rem;  /* 12px */
  --font-size-sm:   0.875rem; /* 14px */
  --font-size-base: 1.00rem;  /* 16px - Seuil anti-zoom iOS */
  --font-size-lg:   1.125rem; /* 18px */
  --font-size-xl:   1.25rem;  /* 20px */
  --font-size-2xl:  1.50rem;  /* 24px */
  --font-size-3xl:  2.00rem;  /* 32px */
  --font-size-4xl:  2.50rem;  /* 40px */
  --font-size-5xl:  3.25rem;  /* 52px */

  --line-height-tight:  1.15;
  --line-height-snug:   1.30;
  --line-height-normal: 1.50;
  --line-height-relaxed:1.65;

  /* 4. TEMPORISATIONS & MOTION GSAP PRESETS */
  --motion-fast:   150ms cubic-bezier(0.25, 0.46, 0.45, 0.94); /* power1.out */
  --motion-normal: 250ms cubic-bezier(0.16, 1, 0.3, 1);        /* power2.out */
  --motion-smooth: 400ms cubic-bezier(0.16, 1, 0.3, 1);        /* expo.out */
  --motion-spring: 350ms cubic-bezier(0.34, 1.56, 0.64, 1);    /* back.out(1.4) */

  /* 5. FOCUS VISIBLE UNIVERSAL WCAG 2.2 (Area + Contrast) */
  --focus-ring-color: #D4AF37;
  --focus-ring-offset: 3px;
  --focus-ring-width: 2px;
}

/* --------------------------------------------------------------------------
   ACCESSIBILITÉ UNIVERSELLE : SKIP LINK POUR CLAVIER
   -------------------------------------------------------------------------- */
.skip-to-content {
  position: absolute;
  top: -100px;
  left: 16px;
  z-index: 99999;
  background: #111115;
  color: #D4AF37;
  padding: 12px 20px;
  font-weight: 700;
  font-size: 0.95rem;
  border-radius: var(--radius-sm);
  border: 2px solid #D4AF37;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.35);
  text-decoration: none;
  transition: top 0.2s ease;
}

.skip-to-content:focus,
.skip-to-content:focus-visible {
  top: 16px;
  outline: 3px solid #FFF;
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   FOCUS RING UNIFIÉ POUR TOUS LES ÉLÉMENTS INTERACTIFS (WCAG 2.2 AAA)
   -------------------------------------------------------------------------- */
:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color) !important;
  outline-offset: var(--focus-ring-offset) !important;
}

button:focus:not(:focus-visible),
a:focus:not(:focus-visible),
input:focus:not(:focus-visible) {
  outline: none;
}

/* --------------------------------------------------------------------------
   STANDARD DE CIBLE TACTILE MINIMUM 44x44px (Touch & Interaction Priority 2)
   -------------------------------------------------------------------------- */
.btn-primary,
.btn-secondary,
.btn-custom,
.btn-outline,
.tab-btn,
.nav-cart-btn,
.btn-papercut-primary,
.btn-papercut-secondary,
.theme-pill-btn {
  min-height: var(--touch-target-min);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  touch-action: manipulation;
}

/* --------------------------------------------------------------------------
   SUPPORT STRICT DU MODE RÉDUIT (prefers-reduced-motion)
   -------------------------------------------------------------------------- */
@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;
  }
  .papercut-torch-glow,
  .hero-ambient-glow {
    display: none !important;
  }
}

/* --------------------------------------------------------------------------
   THÈME 1 : V1 SHOWCASE VIVANT (Éco-Luxe Sombre & Horlogerie Artisanale)
   -------------------------------------------------------------------------- */
[data-theme="v1-showcase"],
.theme-v1-showcase {
  --ds-bg-page:        #111115;
  --ds-bg-surface:     #18191D;
  --ds-bg-card:        #1F2127;
  --ds-text-primary:   #F9F9FB;
  --ds-text-secondary: #B0B5C0;
  --ds-text-muted:     #7A8190;
  --ds-accent-gold:    #D4AF37;
  --ds-accent-champagne:#E6CF8B;
  --ds-accent-forest:  #1E3A2B;
  --ds-border:         rgba(212, 175, 55, 0.20);
  --ds-font-heading:   'Playfair Display', Georgia, serif;
  --ds-font-body:      'Inter', system-ui, sans-serif;
  --ds-shadow:         0 12px 30px rgba(0, 0, 0, 0.45);
}

/* --------------------------------------------------------------------------
   THÈME 2 : V2 PINNED SCROLLYTELLING (Éditorial Cinématographique & Récit)
   -------------------------------------------------------------------------- */
[data-theme="v2-scrolly"],
.theme-v2-scrolly {
  --ds-bg-page:        #122118;
  --ds-bg-surface:     #16291E;
  --ds-bg-card:        #1A3225;
  --ds-text-primary:   #FAF8F5;
  --ds-text-secondary: #C2C9C3;
  --ds-text-muted:     #8E9A90;
  --ds-accent-gold:    #D4AF37;
  --ds-accent-champagne:#E2C17D;
  --ds-accent-forest:  #264836;
  --ds-border:         rgba(255, 255, 255, 0.12);
  --ds-font-heading:   'Playfair Display', Georgia, serif;
  --ds-font-body:      'Plus Jakarta Sans', system-ui, sans-serif;
  --ds-shadow:         0 20px 40px rgba(0, 0, 0, 0.5);
}

/* --------------------------------------------------------------------------
   THÈME 3 : V3 PAPERCUT & BAS-RELIEF (Manufacture Poétique & Papier Découpé)
   -------------------------------------------------------------------------- */
[data-theme="v3-papercut"],
.theme-v3-papercut {
  --ds-bg-page:        #F8F5EE;
  --ds-bg-surface:     #FAF6EE;
  --ds-bg-card:        #FFFFFF;
  --ds-text-primary:   #2A332C; /* Contraste 11.4:1 sur fond écru */
  --ds-text-secondary: #435543; /* Rehaussé WCAG AA 5.8:1 sur fond écru */
  --ds-text-muted:     #526352; /* Rehaussé WCAG AA 4.7:1 sur fond blanc */
  --ds-accent-gold:    #AA8222; /* Dorure chaude contrastée */
  --ds-accent-terracotta:#C86A58;
  --ds-accent-sage:    #5F735F;
  --ds-border:         #E5D9C7;
  --ds-font-heading:   'Playfair Display', serif;
  --ds-font-body:      'Plus Jakarta Sans', sans-serif;
  --ds-shadow:         0 6px 18px rgba(60, 45, 30, 0.09), 0 1px 3px rgba(60, 45, 30, 0.05);
}

/* --------------------------------------------------------------------------
   MICRO-INTERACTION PRESSED PAPER (Boutons Physiques Bas-Relief)
   -------------------------------------------------------------------------- */
.btn-pressed-paper {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-weight: 700;
  border-radius: var(--radius-md);
  padding: 14px 28px;
  cursor: pointer;
  transition: transform var(--motion-fast), box-shadow var(--motion-fast), background-color var(--motion-fast);
  will-change: transform, box-shadow;
  text-decoration: none;
  font-size: var(--font-size-base);
}

.btn-pressed-paper:hover {
  transform: translateY(-2px);
}

.btn-pressed-paper:active {
  transform: translateY(1.5px);
}

/* --------------------------------------------------------------------------
   BARRE DE RÉASSURANCE ATELIER (Optimisation Taux de Conversion E-commerce)
   -------------------------------------------------------------------------- */
.atelier-trust-bar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-4);
  padding: var(--space-6) var(--space-8);
  border-radius: var(--radius-lg);
  margin: var(--space-6) 0;
}

.trust-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--font-size-sm);
  font-weight: 600;
}

.trust-item-icon {
  width: 40px;
  height: 40px;
  min-width: 40px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
}

/* --------------------------------------------------------------------------
   RÉSEAUX SOCIAUX OFFICIELS FOOTER UNIFIÉ
   -------------------------------------------------------------------------- */
.v4-social-links {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
}

.v4-social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #FAF6EE;
  transition: all 0.2s ease;
  text-decoration: none;
}

.v4-social-icon svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.v4-social-icon:hover {
  background: #C86A58;
  border-color: #C86A58;
  color: #FFFFFF;
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(200, 106, 88, 0.35);
}

.v4-social-icon.v4-social-insta:hover {
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%) !important;
  border-color: #d6249f !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 12px rgba(214, 36, 159, 0.4) !important;
}

.v4-social-icon.v4-social-fb:hover {
  background: #1877F2 !important;
  border-color: #1877F2 !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 12px rgba(24, 119, 242, 0.4) !important;
}

.v4-social-icon.v4-social-tiktok:hover {
  background: #000000 !important;
  border-color: #25F4EE !important;
  color: #FFFFFF !important;
  box-shadow: -2px 2px 10px rgba(37, 244, 238, 0.5), 2px -2px 10px rgba(254, 44, 85, 0.5) !important;
}