/* FomLove - Variables CSS & Reset global */

:root {
  /* --- Couleurs principales --- */
  --color-bg:           #0d0d0d;
  --color-bg-card:      #1a1a1a;
  --color-bg-card-hover:#222222;
  --color-bg-overlay:   rgba(0, 0, 0, 0.75);
  --color-surface:      #141414;
  --color-border:       #2a2a2a;
  --color-border-light: #333333;

  /* --- Accent principal (rose/pink) --- */
  --color-primary:      #e8175d;
  --color-primary-dark: #c0134d;
  --color-primary-light:#ff4d85;

  /* --- Dégradés badges --- */
  --gradient-verified:  linear-gradient(135deg, #11998e, #38ef7d);
  --gradient-new:       linear-gradient(135deg, #e8175d, #ff6b9d);
  --gradient-featured:  linear-gradient(135deg, #f7971e, #ffd200);

  /* --- Texte --- */
  --color-text:         #f0f0f0;
  --color-text-muted:   #888888;
  --color-text-light:   #bbbbbb;
  --color-white:        #ffffff;

  /* --- Typographie --- */
  --font-main:    'Inter', 'Segoe UI', Arial, sans-serif;
  --font-size-xs: 0.75rem;    /* 12px */
  --font-size-sm: 0.875rem;   /* 14px */
  --font-size-base: 1rem;     /* 16px */
  --font-size-md: 1.125rem;   /* 18px */
  --font-size-lg: 1.25rem;    /* 20px */
  --font-size-xl: 1.5rem;     /* 24px */
  --font-size-2xl: 1.875rem;  /* 30px */
  --font-size-3xl: 2.25rem;   /* 36px */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semi:   600;
  --font-weight-bold:   700;

  /* --- Espacements --- */
  --space-1:  0.25rem;   /* 4px */
  --space-2:  0.5rem;    /* 8px */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-5:  1.25rem;   /* 20px */
  --space-6:  1.5rem;    /* 24px */
  --space-8:  2rem;      /* 32px */
  --space-10: 2.5rem;    /* 40px */
  --space-12: 3rem;      /* 48px */
  --space-16: 4rem;      /* 64px */

  /* --- Bordures & rayons --- */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-full: 9999px;

  /* --- Ombres --- */
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.4);
  --shadow-md:  0 4px 12px rgba(0,0,0,0.5);
  --shadow-lg:  0 8px 24px rgba(0,0,0,0.6);
  --shadow-card: 0 2px 8px rgba(0,0,0,0.5);

  /* --- Transitions --- */
  --transition-fast:   0.15s ease;
  --transition-base:   0.25s ease;
  --transition-slow:   0.4s ease;

  /* --- Header --- */
  --header-height-mobile:  60px;
  --header-height-desktop: 70px;

  /* --- Breakpoints (référence pour JS) --- */
  --bp-mobile:  480px;
  --bp-tablet:  768px;
  --bp-desktop: 1200px;
}

/* RESET */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-main);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-normal);
  color: var(--color-text);
  background-color: var(--color-bg);
  line-height: 1.6;
  min-height: 100vh;
  overflow-x: hidden;
}

/* Body avec menu ouvert - bloquer le scroll */
body.menu-open {
  overflow: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}

a:hover {
  color: var(--color-primary);
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

ul, ol {
  list-style: none;
}

button, input, select, textarea {
  font-family: inherit;
  font-size: inherit;
}

button {
  cursor: pointer;
  border: none;
  background: none;
}

input, textarea, select {
  outline: none;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: var(--font-weight-bold);
  line-height: 1.3;
  color: var(--color-white);
}