/*
Theme Name: Avis Parfums
Theme URI: https://avis-parfums.fr
Author: Thomas Verdict
Author URI: https://avis-parfums.fr
Description: Thème personnalisé pour Avis Parfums - Tests et critiques honnêtes de parfums. Design moderne, authentique et accessible avec système de notation intégré.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.4
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: avis-parfums
Tags: blog, one-column, custom-menu, featured-images, full-width-template, custom-logo

Avis Parfums Theme © 2026
*/

/* ==========================================================================
   CSS VARIABLES - CHARTE GRAPHIQUE
   ========================================================================== */

:root {
    /* Couleurs principales (inspirées du logo) */
    --color-primary: #182748;          /* Bleu Marine - Titres, texte principal */
    --color-secondary: #2574bf;        /* Bleu Vif - Liens, boutons */
    --color-accent: #e75957;           /* Rouge Corail - Notes, verdicts, CTA */
    --color-accent-hover: #d64240;     /* Rouge Foncé - États hover */
    
    /* Fonds */
    --color-bg-light: #f8f9fa;         /* Gris Perle - Arrière-plan sections */
    --color-bg-white: #ffffff;         /* Blanc - Cards, articles */
    --color-bg-dark: #182748;          /* Bleu Marine - Footer, sections sombres */
    
    /* Textes */
    --color-text: #182748;             /* Texte principal */
    --color-text-light: #6c757d;       /* Texte secondaire, meta */
    --color-text-white: #ffffff;       /* Texte sur fond sombre */
    --color-text-muted: #8a9199;       /* Texte désactivé */
    
    /* Bordures et séparateurs */
    --color-border: #e9ecef;
    --color-border-dark: #dee2e6;
    
    /* Système de notation */
    --color-note-excellent: #28a745;   /* 9-10 : Exceptionnel */
    --color-note-good: #2574bf;        /* 7-8 : Très bon */
    --color-note-average: #fd7e14;     /* 5-6 : Correct */
    --color-note-poor: #dc3545;        /* 1-4 : Décevant */
    
    /* Typographies */
    --font-heading: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-body: 'Open Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    
    /* Tailles de police */
    --font-size-xs: 0.75rem;           /* 12px */
    --font-size-sm: 0.875rem;          /* 14px */
    --font-size-base: 1rem;            /* 16px */
    --font-size-lg: 1.125rem;          /* 18px */
    --font-size-xl: 1.25rem;           /* 20px */
    --font-size-2xl: 1.375rem;         /* 22px */
    --font-size-3xl: 1.75rem;          /* 28px */
    --font-size-4xl: 2.25rem;          /* 36px */
    --font-size-5xl: 3rem;             /* 48px */
    
    /* Espacements */
    --spacing-xs: 0.25rem;             /* 4px */
    --spacing-sm: 0.5rem;              /* 8px */
    --spacing-md: 1rem;                /* 16px */
    --spacing-lg: 1.5rem;              /* 24px */
    --spacing-xl: 2rem;                /* 32px */
    --spacing-2xl: 3rem;               /* 48px */
    --spacing-3xl: 4rem;               /* 64px */
    
    /* Bordures */
    --border-radius-sm: 4px;
    --border-radius-md: 6px;
    --border-radius-lg: 8px;
    --border-radius-xl: 12px;
    
    /* Ombres */
    --shadow-sm: 0 1px 2px rgba(24, 39, 72, 0.05);
    --shadow-md: 0 4px 6px rgba(24, 39, 72, 0.07);
    --shadow-lg: 0 10px 20px rgba(24, 39, 72, 0.1);
    --shadow-xl: 0 20px 40px rgba(24, 39, 72, 0.12);
    
    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-base: 250ms ease;
    --transition-slow: 350ms ease;
    
    /* Largeurs */
    --container-width: 1200px;
    --content-width: 800px;
}

/* ==========================================================================
   RESET & BASE
   ========================================================================== */

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

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

body {
    margin: 0;
    padding: 0;
    font-family: var(--font-body);
    font-size: var(--font-size-base);
    line-height: 1.7;
    color: var(--color-text);
    background-color: var(--color-bg-light);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ==========================================================================
   TYPOGRAPHIE
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 700;
    line-height: 1.3;
    margin-top: 0;
    margin-bottom: var(--spacing-md);
    color: var(--color-primary);
}

h1 {
    font-size: var(--font-size-4xl);
    letter-spacing: -0.02em;
}

h2 {
    font-size: var(--font-size-3xl);
    font-weight: 600;
}

h3 {
    font-size: var(--font-size-2xl);
    font-weight: 600;
}

h4 {
    font-size: var(--font-size-lg);
    font-weight: 500;
}

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

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

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

strong, b {
    font-weight: 600;
}

/* ==========================================================================
   LAYOUT - CONTAINER
   ========================================================================== */

.container {
    width: 100%;
    max-width: var(--container-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--spacing-lg);
    padding-right: var(--spacing-lg);
}

.container-narrow {
    max-width: var(--content-width);
}

/* ==========================================================================
   UTILITAIRES
   ========================================================================== */

.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;
}

.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.mt-md { margin-top: var(--spacing-md); }
.mb-md { margin-bottom: var(--spacing-md); }
.mt-lg { margin-top: var(--spacing-lg); }
.mb-lg { margin-bottom: var(--spacing-lg); }
.mt-xl { margin-top: var(--spacing-xl); }
.mb-xl { margin-bottom: var(--spacing-xl); }

/* ==========================================================================
   IMAGES
   ========================================================================== */

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

figure {
    margin: 0;
}

figcaption {
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
    margin-top: var(--spacing-sm);
}

/* ==========================================================================
   BOUTONS
   ========================================================================== */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-lg);
    font-family: var(--font-heading);
    font-size: var(--font-size-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border: none;
    border-radius: var(--border-radius-md);
    cursor: pointer;
    transition: all var(--transition-base);
    text-decoration: none;
}

.btn-primary {
    background-color: var(--color-accent);
    color: var(--color-text-white);
}

.btn-primary:hover {
    background-color: var(--color-accent-hover);
    color: var(--color-text-white);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.btn-secondary {
    background-color: var(--color-secondary);
    color: var(--color-text-white);
}

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

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

.btn-outline:hover {
    background-color: var(--color-primary);
    color: var(--color-text-white);
}

/* ==========================================================================
   FORMULAIRES
   ========================================================================== */

input[type="text"],
input[type="email"],
input[type="search"],
textarea {
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-md);
    font-family: var(--font-body);
    font-size: var(--font-size-base);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-md);
    background-color: var(--color-bg-white);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="search"]:focus,
textarea:focus {
    outline: none;
    border-color: var(--color-secondary);
    box-shadow: 0 0 0 3px rgba(37, 116, 191, 0.1);
}

/* ==========================================================================
   ACCESSIBILITÉ
   ========================================================================== */

:focus-visible {
    outline: 2px solid var(--color-secondary);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    
    html {
        scroll-behavior: auto;
    }
}