/* ============================================================
   MAZOUT.MA — Variables CSS et reset
   ============================================================ */

:root {
  /* Palette */
  --color-primary:       #1B4332;
  --color-primary-hover: #2D6A4F;
  --color-accent:        #C9A84C;
  --color-accent-light:  #E8D5A3;
  --color-success:       #27AE60;
  --color-danger:        #C0392B;
  --color-danger-light:  #FADBD8;
  --color-warning:       #EF9F27;

  /* Neutres */
  --color-bg:            #F9F7F4;
  --color-bg-alt:        #F2F2F7;
  --color-white:         #FFFFFF;
  --color-bandeau-bg:    #111111;
  --color-text:          #1C1C1E;
  --color-text-2:        #3D3D3D;
  --color-text-3:        #8E8E93;
  --color-border:        #C7C7CC;
  --color-border-light:  #E5E5EA;

  /* Typographie */
  --font-sans:   'Inter', system-ui, -apple-system, sans-serif;
  --font-arabic: 'Cairo', 'Noto Sans Arabic', sans-serif;
  --font-mono:   'Fira Mono', monospace;

  /* Tailles */
  --text-xs:   11px;
  --text-sm:   13px;
  --text-base: 15px;
  --text-md:   17px;
  --text-lg:   20px;
  --text-xl:   24px;
  --text-2xl:  32px;

  /* Espacements (multiples de 8) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 40px;
  --space-6: 64px;

  /* Rayons */
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  12px;

  /* Ombres */
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.08);
  --shadow-md:  0 4px 12px rgba(0,0,0,0.10);

  /* Hauteurs fixes */
  --header-h:   64px;
  --bandeau-h:  36px;
}

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

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* Police arabe */
.lang-ar body,
.lang-ar { font-family: var(--font-arabic); }

img { max-width: 100%; height: auto; display: block; }
a { color: var(--color-primary); text-decoration: none; }
a:hover { color: var(--color-primary-hover); text-decoration: underline; }
button { cursor: pointer; font-family: inherit; }
ul, ol { list-style: none; }

/* Utilitaires */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-3);
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* Chiffres tabulaires pour les prix */
.price-value, .bandeau-price {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Cairo:wght@400;500;600;700&display=swap');