:root {
  --color-bg: #242424;
  --color-primary: #5a90a0;
  --header-height: 88px;
  --early-access-banner-height: 0px;
  --layout-top-offset: var(--header-height, 88px);
  --color-secondary: linear-gradient(135deg, rgba(3, 8, 10, 0.98) 0%, rgba(1, 4, 6, 0.96) 55%, rgba(0, 0, 0, 0.92) 100%);
  --color-secondary-solid: rgba(3, 8, 10, 0.98);
  --color-text: #ffffff;
  --color-text-muted: #6c757d;
  --color-text-inverse: #000000;
  --color-header-primary: #1a1a1a;
  --color-header-secondary: #4f5254;
  --color-action-primary: #007bff;
  --color-action-secondary: #6c757d;
  --color-action-accent: #ffc107;
  --color-on-primary: #ffffff;
  --color-on-secondary: #ffffff;
  --color-on-accent: #000000;
  --color-ui-border: #ced4da;
  --color-ui-focus: #80bdff;
  --color-feedback-success: #28a745;
  --color-feedback-warning: #ffc107;
  --color-feedback-danger: #dc3545;
  --color-background: #242424;
  --color-brand-400: #2bd879;
  --color-brand-500: #1fb86c;
  --color-brand-600: #148556;
}

html {
  font-size: clamp(13.5px, 1.2vw, 16px);
}

body:not(.customize-layout-page) #site-content {
        display: flex;
        margin: auto;
}

body:not(.customize-layout-page) .site-content {
    /* Use the dynamic viewport unit to avoid layout jumps */
    min-height: calc(100dvh - 215px);
    flex-direction: column;
}

body {
  font-family: 'Arial', sans-serif;
  color: var(--color-text);
}

body > #content {
  padding: 0;
  margin: 0;
}

#content {
  margin: 0;
}

#content img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* Ensure body and Astra container share the same background */
body,
.ast-separate-container {
  background-color: var(--color-background) !important;
}

h2.title {
        font-size: 24px;
        }

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

a:hover {
  color: var(--color-secondary-solid);
  text-decoration: none;
}

button,
.button {
  background-color: var(--color-primary);
  color: #ffffff;
  border: none;
  cursor: pointer;
}

button:hover,
.button:hover,
button:focus-visible,
.button:focus-visible {
  background: var(--color-secondary);
  color: #ffffff;
}

/* Surcharge des styles de WooCommerce pour les images dans le panier */
.woocommerce img, .woocommerce-page img {
    max-width: 100%;
}