/* === Reset & Base === */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: var(--font-size-base);
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-main);
    line-height: var(--line-height-base);
    color: var(--color-dark);
    background-color: var(--color-white);
}

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

a {
    color: var(--color-primary);
    text-decoration: none;
}

/* === Container === */
.container {
    width: 100%;
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 var(--container-padding);
}

/* === Accessibilité === */
.screen-reader-text {
    clip: rect(1px, 1px, 1px, 1px);
    position: absolute !important;
    height: 1px;
    width: 1px;
    overflow: hidden;
}

:root {

  /* === MARQUE === */
  --color-primary:       #C5785A;
  --color-secondary:     #6C3B28;
  --color-accent:        #f59e0b;
  --color-success:       #22c55e;
  --color-error:         #ef4444;
  --color-warning:       #f97316;
  --color-dark:          #000000;
  --color-grey:          #94a3b8;
  --color-light:         #f8fafc;
  --color-white:         #FAF3E5;  /* blanc chaud de ta marque */
  --color-black:         #000000;

  /* === TYPOGRAPHIE === */
  --font-main:           work-sans, sans-serif;     /* police principale */
  --font-title:          all-round-gothic, sans-serif; /* titres */
  --font-mono:           'Fira Code', monospace;

  --font-size-xs:        0.75rem;
  --font-size-sm:        0.875rem;
  --font-size-base:      1rem;
  --font-size-md:        1.125rem;
  --font-size-lg:        1.25rem;
  --font-size-xl:        1.5rem;
  --font-size-2xl:       2rem;
  --font-size-3xl:       2.5rem;
  --font-size-4xl:       3rem;

  --font-weight-light:   300;
  --font-weight-regular: 400;
  --font-weight-medium:  500;
  --font-weight-semibold:600;
  --font-weight-bold:    700;
  --font-weight-black:   900;

  --line-height-tight:   1.2;
  --line-height-base:    1.6;
  --line-height-loose:   1.8;

  /* === ESPACEMENTS === */
  --spacing-xs:          0.25rem;   /* 4px  — alias: --space-1 */
  --spacing-sm:          0.5rem;    /* 8px  — alias: --space-2 */
  --spacing-md:          1rem;      /* 16px — alias: --space-4 */
  --spacing-lg:          1.5rem;    /* 24px — alias: --space-6 */
  --spacing-xl:          2rem;      /* 32px — alias: --space-8 */
  --spacing-2xl:         3rem;      /* 48px — alias: --space-12 */
  --spacing-3xl:         4rem;      /* 64px — alias: --space-16 */
  --spacing-4xl:         5rem;      /* 80px — alias: --space-20 */
  --spacing-5xl:         6rem;      /* 96px — alias: --space-24 */

  /* === LAYOUT === */
  --container-width:     1200px;
  --container-sm:        640px;
  --container-md:        768px;
  --container-lg:        1024px;
  --container-xl:        1280px;
  --container-2xl:       1536px;
  --container-padding:   1.5rem;

  /* === BORDURES === */
  --radius-sm:           4px;
  --radius-md:           8px;
  --radius-lg:           12px;
  --radius-xl:           16px;
  --radius-full:         9999px;
  --border-width:        1px;
  --border-color:        #e2e8f0;

  /* === OMBRES === */
  --shadow-sm:           0 1px 3px rgba(0,0,0,0.1);
  --shadow-md:           0 4px 6px rgba(0,0,0,0.1);
  --shadow-lg:           0 10px 25px rgba(0,0,0,0.1);
  --shadow-xl:           0 20px 40px rgba(0,0,0,0.15);

  /* === TRANSITIONS === */
  --transition-fast:     0.15s ease;
  --transition-base:     0.3s ease;
  --transition-slow:     0.5s ease;

  /* === Z-INDEX === */
  --z-below:             -1;
  --z-base:              0;
  --z-dropdown:          100;
  --z-sticky:            200;
  --z-overlay:           300;
  --z-modal:             400;
  --z-toast:             500;
}

/* === DISPLAY === */
.d-none         { display: none; }
.d-block        { display: block; }
.d-flex         { display: flex; }
.d-grid         { display: grid; }

/* === FLEX === */
.flex-center    { display: flex; align-items: center; justify-content: center; }
.flex-between   { display: flex; align-items: center; justify-content: space-between; }
.flex-col       { flex-direction: column; }
.flex-wrap      { flex-wrap: wrap; }
.gap-sm         { gap: var(--spacing-sm); }
.gap-md         { gap: var(--spacing-md); }
.gap-lg         { gap: var(--spacing-lg); }

/* === TEXT === */
.text-center    { text-align: center; }
.text-left      { text-align: left; }
.text-right     { text-align: right; }
.text-primary   { color: var(--color-primary); }
.text-muted     { color: var(--color-grey); }
.font-bold      { font-weight: var(--font-weight-bold); }
.uppercase      { text-transform: uppercase; }

/* === SPACING === */
.mt-auto        { margin-top: auto; }
.mb-0           { margin-bottom: 0; }
.section-py     { padding: var(--space-16) 0; }
.section-py-lg  { padding: var(--space-24) 0; }

/* === MISC === */
.w-full         { width: 100%; }
.h-full         { height: 100%; }
.relative       { position: relative; }
.overflow-hidden{ overflow: hidden; }
.rounded        { border-radius: var(--radius-md); }
.shadow         { box-shadow: var(--shadow-md); }
.img-cover      {
    width: 100%;
    height: 100%;
    object-fit: cover;
}