/*
Theme Name: Bien être vital
Description: Thème WordPress professionnel pour Bien être vital - Votre guide vers une vie saine et équilibrée. Thème optimisé pour WooCommerce avec un design élégant et professionnel, entièrement compatible avec tous les plugins WordPress. Développé par Team Canada Digital.
Version: 1.0.0
Author: Aiterraxis
Author URI: https://aiterraxis.com
Text Domain: bienetrevital
Domain Path: /languages/
Requires at least: 5.0
Tested up to: 6.4
Requires PHP: 7.4
License: GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html

Bien être vital WordPress Theme, Copyright 2024 Team Canada Digital
Bien être vital is distributed under the terms of the GNU GPL

Developed by: Team Canada Digital
Website: http://teamcanadadigital.com
Phone: +225 07 69 67 08 93

Tags: e-commerce, woocommerce, health, wellness, beauty, responsive, custom-menu, custom-logo, featured-images, footer-widgets, full-width-template, sticky-post, theme-options, threaded-comments, translation-ready, blog
*/

/* ==========================================
   VARIABLES CSS GLOBALES
   ========================================== */
:root {
    /* Couleurs principales */
    --primary-color: #E8890A;        /* Orange */
    --primary-dark: #c5720a;         /* Orange foncé */
    --primary-light: #fef3e2;        /* Orange clair */

    /* Couleurs secondaires */
    --navy: #2D7A1F;                 /* Vert foncé */
    --navy-light: #3a9427;           /* Vert foncé clair */
    --green: #6DC029;                /* Vert clair */
    --green-dark: #2D7A1F;           /* Vert foncé */
    --white: #FFFFFF;
    --black: #1a2e1a;
    --gray-light: #F7F8FA;
    --gray-medium: #8a8fa8;
    --gray-dark: #3d4152;

    /* Couleur d'accent */
    --accent-color: #2D7A1F;

    /* Typographie */
    --font-primary: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-secondary: 'Merriweather', Georgia, serif;

    /* Espacements */
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 2rem;
    --spacing-lg: 3rem;
    --spacing-xl: 4rem;

    /* Bordures */
    --border-radius: 8px;
    --border-radius-lg: 16px;

    /* Transitions */
    --transition: all 0.3s ease;
    --transition-fast: all 0.2s ease;

    /* Ombres */
    --shadow-sm: 0 2px 4px rgba(0,0,0,0.1);
    --shadow-md: 0 4px 8px rgba(0,0,0,0.15);
    --shadow-lg: 0 8px 16px rgba(0,0,0,0.2);
}

/* ==========================================
   RESET ET BASE
   ========================================== */
* {
    box-sizing: border-box;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-primary);
    font-size: 1rem;
    line-height: 1.6;
    color: var(--gray-dark);
    background-color: var(--white);
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Reset margins pour les éléments WordPress */
.wp-block-group,
.wp-block-columns,
.wp-block-column {
    margin-top: 0;
    margin-bottom: var(--spacing-md);
}

/* Support des images responsives WordPress */
img {
    height: auto;
    max-width: 100%;
}

/* ==========================================
   TYPOGRAPHIE
   ========================================== */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-primary);
    font-weight: 600;
    line-height: 1.2;
    margin-top: 0;
    margin-bottom: var(--spacing-sm);
    color: var(--black);
}

h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.75rem; }
h4 { font-size: 1.5rem; }
h5 { font-size: 1.25rem; }
h6 { font-size: 1rem; }

p {
    margin-top: 0;
    margin-bottom: var(--spacing-sm);
}

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

a:hover,
a:focus {
    color: var(--primary-dark);
    text-decoration: underline;
}

/* ==========================================
   LAYOUT ET CONTENEURS
   ========================================== */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--spacing-sm);
}

.container-wide {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 var(--spacing-sm);
}

.container-narrow {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 var(--spacing-sm);
}

/* ==========================================
   BOUTONS
   ========================================== */
.btn {
    display: inline-block;
    padding: 12px 24px;
    background-color: var(--primary-color);
    color: var(--white);
    border: none;
    border-radius: var(--border-radius);
    font-family: var(--font-primary);
    font-size: 1rem;
    font-weight: 500;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: var(--transition);
    box-shadow: var(--shadow-sm);
}

.btn:hover,
.btn:focus {
    background-color: var(--primary-dark);
    color: var(--white);
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.btn-secondary {
    background-color: var(--white);
    color: var(--primary-color);
    border: 2px solid var(--primary-color);
}

.btn-secondary:hover,
.btn-secondary:focus {
    background-color: var(--primary-color);
    color: var(--white);
}

.btn-large {
    padding: 16px 32px;
    font-size: 1.125rem;
}

/* ==========================================
   UTILITAIRES
   ========================================== */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: var(--spacing-xs); }
.mb-2 { margin-bottom: var(--spacing-sm); }
.mb-3 { margin-bottom: var(--spacing-md); }
.mb-4 { margin-bottom: var(--spacing-lg); }

.mt-0 { margin-top: 0; }
.mt-1 { margin-top: var(--spacing-xs); }
.mt-2 { margin-top: var(--spacing-sm); }
.mt-3 { margin-top: var(--spacing-md); }
.mt-4 { margin-top: var(--spacing-lg); }

.fade-in {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ==========================================
   RESPONSIVE
   ========================================== */
@media (max-width: 768px) {
    :root {
        --spacing-md: 1.5rem;
        --spacing-lg: 2rem;
        --spacing-xl: 2.5rem;
    }

    h1 { font-size: 2rem; }
    h2 { font-size: 1.75rem; }
    h3 { font-size: 1.5rem; }

    .container,
    .container-wide,
    .container-narrow {
        padding: 0 var(--spacing-sm);
    }
}

/* ==========================================
   SUPPORT WORDPRESS ET PLUGINS
   ========================================== */

/* Support Gutenberg Blocks */
.wp-block-image {
    margin-bottom: var(--spacing-md);
}

.wp-block-gallery {
    margin-bottom: var(--spacing-md);
}

.wp-block-quote {
    border-left: 4px solid var(--primary-color);
    padding-left: var(--spacing-md);
    margin: var(--spacing-md) 0;
    font-style: italic;
}

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

.screen-reader-text:focus {
    background-color: var(--gray-light);
    border-radius: 3px;
    box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
    clip: auto !important;
    color: var(--black);
    display: block;
    font-size: 14px;
    font-weight: bold;
    height: auto;
    left: 5px;
    line-height: normal;
    padding: 15px 23px 14px;
    text-decoration: none;
    top: 5px;
    width: auto;
    z-index: 100000;
}

/* Support des plugins de chargement paresseux */
img[data-lazy] {
    opacity: 0;
    transition: opacity 0.3s;
}

img[data-lazy].loaded {
    opacity: 1;
}