/*
Theme Name: Pixelyz
Theme URI: https://www.pixelyz.com
Author: Mika - Digitalix
Author URI: https://www.digitalix.pro/
Description: Un thème WordPress moderne et élégant conçu spécialement pour Pixelyz. Ce thème offre une expérience utilisateur exceptionnelle avec un design responsive, des options de personnalisation avancées et une interface intuitive. Parfait pour les sites vitrines, portfolios et landing pages professionnelles. Le thème inclut un système de menus dynamiques, des options de mise en page personnalisables, et une intégration complète avec l'éditeur de blocs WordPress moderne.
Version: 1.64.16
Requires at least: 5.0
Tested up to: 6.4
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: pixelyz
Tags: custom-background, custom-colors, custom-header, custom-logo, custom-menu, featured-images, flexible-header, accessibility-ready, block-patterns, block-styles, wide-blocks, translation-ready, rtl-language-support, threaded-comments, sticky-post, blog, portfolio, business, landing-page, responsive, modern, elegant, customizable, professional
*/

/* ==========================================================================
   CSS VARIABLES
   ========================================================================== */

:root {
    --bg: #0b0f19;
    --bg-secondary: #1a1f2e;
    --text: #ffffff;
    --text-muted: #8b95a7;
    --line: #2d3748;
    --accent: #3b82f6;
    --accent2: #1d4ed8;
    --cyan: #0ea5e9;
    --radius: 10px;
    --shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    --max-width: 1400px;
    --card-bg: #1e293b;
    --card-br: 18px;
    --card-bd: rgba(255,255,255,.06);
    --gold: #fbbf24;
    
    /* Pixelyz Brand Colors */
    --px-violet: #4F46E5;
    --px-indigo: #4338CA;
    --px-cyan: #06B6D4;
    --px-beige: #F5E9DC;
    --px-gray: #D1D5DB;
    --px-black: #111827;
    --px-white: #FFFFFF;
}

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

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Satoshi', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: linear-gradient(135deg, var(--bg) 0%, var(--bg-secondary) 100%);
    color: var(--text);
    line-height: 1.6;
    overflow-x: hidden;
    font-size: 13px;
}

.container {
    max-width: var(--page-max-width);
    margin: 0 auto;
    padding: 0 8px;
}

/* Page content container - harmonise avec header/footer */
.page-content,
.single-content,
.archive-content,
.search-content {
    max-width: var(--page-max-width);
    margin: 0 auto;
    padding: 2rem var(--header-side-margin);
    margin-top: 4rem; /* Espace réduit pour le header fixe */
}

/* WordPress content area - marges ajustées */
.entry-content,
.page-content {
    max-width: none !important; /* Force la pleine largeur sans limite */
    width: 100%; /* Prend toute la largeur disponible */
    margin: 0 !important; /* Force l'absence de marges pour coller aux bords */
    padding: 0 !important; /* Suppression complète du padding pour affichage à 100% */
}

/* ==========================================================================
   PROTECTION DES SECTIONS LANDING PAGE
   ========================================================================== */

/* Protection des sections de landing contre les styles WordPress */
.entry-content .pixelyz-landing-section,
.page-content .pixelyz-landing-section {
    display: block;
    box-sizing: border-box;
    font-family: 'Satoshi', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: #E7EEF7;
    /* Les styles inline dans les sections auront la priorité naturelle */
}

/* Permettre aux styles inline de fonctionner */
.pixelyz-landing-section * {
    /* Ne pas forcer de styles, laisser les styles inline fonctionner */
}

/* Protection contre les marges/paddings WordPress */
body .entry-content > .pixelyz-landing-section,
body .page-content > .pixelyz-landing-section {
    margin: 0 !important;
    padding: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
}

/* Conteneur principal pour toutes les pages - marges ajustées */
.site-main,
main {
    margin-top: 0; /* Marge supérieure à 0 pour coller au header */
    /* Suppression de min-height qui causait l'espace excessif */
    padding-bottom: 0; /* Suppression complète de l'espacement du bas */
}

/* Éviter l'espacement excessif sur les pages courtes */
body {
    min-height: 100vh; /* Hauteur minimale pour le body seulement */
}

/* Suppression complète de tous les espacements en bas - VERSION AGRESSIVE */
.site-main,
main,
.entry-content,
.page-content,
.single-content,
.archive-content,
.search-content,
.wp-block-group,
.wp-block-columns,
.wp-block-cover,
.post,
.page,
.wp-block-paragraph,
p,
h1, h2, h3, h4, h5, h6,
.wp-block-heading,
.wp-block-list,
.wp-block-quote,
.wp-block-image,
.wp-block-gallery,
.wp-block-media-text,
.wp-block-button,
.wp-block-separator,
.wp-block-spacer {
    margin-bottom: 0 !important; /* Suppression forcée de tous les espacements en bas */
    padding-bottom: 0 !important; /* Suppression forcée de tous les paddings en bas */
}

/* S'assurer que le dernier élément n'a pas d'espacement */
.site-main > *:last-child,
main > *:last-child,
.entry-content > *:last-child,
.page-content > *:last-child,
.single-content > *:last-child,
.archive-content > *:last-child,
.search-content > *:last-child {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* Suppression de l'espacement WordPress par défaut */
.wp-block,
.wp-block-group__inner-wrapper,
.wp-block-column,
.wp-block-columns {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* Suppression de l'espacement des éléments inline */
.site-main *,
main *,
.entry-content *,
.page-content * {
    margin-bottom: 0 !important;
}

/* Exception pour les éléments qui doivent garder un espacement interne */
.site-main p:not(:last-child),
main p:not(:last-child),
.entry-content p:not(:last-child),
.page-content p:not(:last-child) {
    margin-bottom: 1rem !important; /* Espacement entre paragraphes seulement */
}

/* S'assurer qu'il n'y a pas d'espacement entre le contenu et le footer */
.site-main + .footer,
main + .footer,
.entry-content + .footer,
.page-content + .footer,
.single-content + .footer,
.archive-content + .footer,
.search-content + .footer {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Suppression de l'espacement entre tous les éléments et le footer */
* + .footer {
    margin-top: 0 !important;
}

/* Conteneur de contenu avec hauteur naturelle */
.page-content,
.single-content,
.archive-content,
.search-content,
.entry-content {
    min-height: auto; /* Hauteur naturelle du contenu */
}

/* Contenu WordPress par défaut - espacement supprimé */
.wp-block-group,
.wp-block-columns,
.wp-block-cover {
    margin-top: 0; /* Suppression complète */
    margin-bottom: 0; /* Suppression complète */
}

/* Styles spécifiques pour le contenu WordPress */
.post,
.page {
    margin-top: 0; /* Suppression complète */
    margin-bottom: 0; /* Suppression complète */
}

.post-title,
.page-title,
.entry-title {
    margin-top: 0; /* Suppression complète pour les titres */
    margin-bottom: 0; /* Suppression complète */
}

/* Contenu par défaut WordPress (Welcome message, etc.) */
.wp-block-paragraph,
p {
    margin-top: 0; /* Suppression complète */
    margin-bottom: 0; /* Suppression complète */
}

/* Première ligne de contenu */
.wp-block-paragraph:first-child,
p:first-child {
    margin-top: 0; /* Suppression complète pour le premier paragraphe */
    margin-bottom: 0; /* Suppression complète */
}

/* Styles pour le lien Edit - masqué par défaut */
.edit-link,
.post-edit-link,
.page-edit-link {
    display: none !important; /* Masquer le lien Edit */
}

/* Alternative : styliser le lien Edit au lieu de le masquer */
/*
.edit-link,
.post-edit-link,
.page-edit-link {
    font-size: 0.8rem !important;
    color: var(--text-muted) !important;
    text-decoration: none !important;
    opacity: 0.6 !important;
    margin-top: 1rem !important;
    display: inline-block !important;
}

.edit-link:hover,
.post-edit-link:hover,
.page-edit-link:hover {
    opacity: 1 !important;
    color: var(--accent) !important;
}
*/

/* ==========================================================================
   GOOGLE FONTS CLASSES
   ========================================================================== */

.font-title {
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-weight: 700;
}

.font-body {
    font-family: 'Satoshi', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* ==========================================================================
   PIXELYZ BRAND STYLES
   ========================================================================== */

.gradient-brand {
    background-image: linear-gradient(90deg, var(--px-violet), var(--px-indigo), var(--px-cyan));
}

.text-gradient {
    background: linear-gradient(90deg, var(--px-violet), var(--px-indigo), var(--px-cyan));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.reveal {
    opacity: 0;
    transform: translateY(10px);
    animation: fadeUp .6s ease forwards;
}

@keyframes fadeUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.container-xl {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
}

/* ==========================================================================
   HEADER STYLES
   ========================================================================== */

.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: rgba(10, 10, 15, 0.95);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--line);
    z-index: 100;
    padding: 1rem 0;
    overflow: hidden;
}

.nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    padding-left: var(--header-side-margin);
    padding-right: var(--header-side-margin);
}

.site-branding {
    flex-shrink: 0;
    z-index: 2;
}

.logo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--text);
    text-decoration: none;
    flex-shrink: 0;
}

.logo-icon {
    width: var(--header-logo-icon-size, 32px);
    height: var(--header-logo-height, 32px);
    background: linear-gradient(135deg, var(--accent), var(--cyan));
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
    margin-left: -8px; /* Décalage vers la gauche pour compenser le décalage vers la droite */
}

/* Custom Logo Styles */
.logo-custom {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.logo-custom .header-logo-image {
    margin-left: -8px; /* Décalage vers la gauche pour compenser le décalage vers la droite */
}

.logo-custom .custom-logo {
    border-radius: 8px;
    transition: transform 0.3s ease;
}

.logo-custom .custom-logo:hover {
    transform: scale(1.05);
}

.logo-custom .logo-text {
    font-weight: bold;
    color: var(--text);
    text-decoration: none;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 1rem;
    list-style: none;
    margin: 0;
    padding: 0;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
    /* Le centrage est géré dynamiquement par JavaScript dans theme.js */
}

.header-buttons {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-left: auto;
    flex-shrink: 0;
    z-index: 2;
}

.nav-links li {
    position: relative;
}

/* ==========================================================================
   NAVIGATION MENU STYLES
   ========================================================================== */

/* Styles de base pour tous les liens de menu */
.nav-links a,
#primary-menu a,
.nav-links .menu-item a,
#primary-menu .menu-item a,
.nav-links .menu-item-has-children a,
#primary-menu .menu-item-has-children a {
    color: #8b95a7 !important;
    text-decoration: none !important;
    padding: 0.35rem 0.7rem !important;
    border-radius: 20px !important;
    transition: color 0.3s ease, background 2s ease !important;
    position: relative !important;
    z-index: 2 !important;
    font-size: var(--header-menu-size, 1rem) !important;
    background: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden;
    line-height: normal !important;
    height: auto !important;
    min-height: 0 !important;
    box-sizing: border-box !important;
    border: none !important;
    margin: 0 !important;
}

/* Reset des marges et paddings pour les éléments enfants */
.nav-links a *,
#primary-menu a *,
.nav-links .menu-item a *,
#primary-menu .menu-item a *,
.nav-links .menu-item-has-children a *,
#primary-menu .menu-item-has-children a * {
    margin: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    line-height: inherit !important;
}

/* Effet ::before pour le hover (dégradé animé) */
.nav-links a::before,
#primary-menu a::before,
.nav-links .menu-item a::before,
#primary-menu .menu-item a::before,
.nav-links .menu-item-has-children a::before,
#primary-menu .menu-item-has-children a::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    background: var(--menu-hover-gradient, linear-gradient(135deg, #1e40af, #2563eb));
    border-radius: 20px;
    z-index: -1;
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.8);
    transform-origin: center center;
    transition: opacity 0.3s ease, transform 0.3s ease;
    backface-visibility: hidden;
    will-change: opacity, transform;
}

/* État hover */
.nav-links a:hover:not(.active),
#primary-menu a:hover:not(.active),
.nav-links .menu-item a:hover:not(.active),
#primary-menu .menu-item a:hover:not(.active),
.nav-links .menu-item-has-children a:hover:not(.active),
#primary-menu .menu-item-has-children a:hover:not(.active),
.nav-links a:not(.active):not(.current-menu-item):not(.current_page_item):not(.current-menu-ancestor):hover,
#primary-menu a:not(.active):not(.current-menu-item):not(.current_page_item):not(.current-menu-ancestor):hover,
.nav-links .menu-item a:not(.active):not(.current-menu-item):not(.current_page_item):not(.current-menu-ancestor):hover,
#primary-menu .menu-item a:not(.active):not(.current-menu-item):not(.current_page_item):not(.current-menu-ancestor):hover {
    color: #ffffff !important;
    padding: 0.35rem 0.7rem !important;
}

.nav-links a:hover::before,
#primary-menu a:hover::before,
.nav-links .menu-item a:hover::before,
#primary-menu .menu-item a:hover::before,
.nav-links .menu-item-has-children a:hover::before,
#primary-menu .menu-item-has-children a:hover::before {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

/* Liens actifs */
.nav-links a.active,
#primary-menu a.active,
.nav-links .menu-item a.active,
#primary-menu .menu-item a.active,
.nav-links .menu-item-has-children a.active,
#primary-menu .menu-item-has-children a.active,
.nav-links .current-menu-item a,
#primary-menu .current-menu-item a,
.nav-links .current_page_item a,
#primary-menu .current_page_item a,
.nav-links .current-menu-ancestor a,
#primary-menu .current-menu-ancestor a {
    /* Dégradé géré dynamiquement via functions.php */
    color: white !important;
    box-shadow: none !important;
    z-index: 3 !important;
    /* Conserver les mêmes dimensions pour éviter le décalage */
    padding: 0.35rem 0.7rem !important;
    transform: none !important;
    /* Pas de transition spécifique pour le background : la transition de base (0.6s) sera utilisée lors de la disparition */
    transition: color 0.3s ease, box-shadow 0.3s ease !important;
}

/* S'assurer que le padding reste identique même au survol d'un bouton actif */
.nav-links a.active:hover,
#primary-menu a.active:hover,
.nav-links .menu-item a.active:hover,
#primary-menu .menu-item a.active:hover,
.nav-links .menu-item-has-children a.active:hover,
#primary-menu .menu-item-has-children a.active:hover,
.nav-links .current-menu-item a:hover,
#primary-menu .current-menu-item a:hover,
.nav-links .current_page_item a:hover,
#primary-menu .current_page_item a:hover,
.nav-links .current-menu-ancestor a:hover,
#primary-menu .current-menu-ancestor a:hover {
    padding: 0.35rem 0.7rem !important;
    box-shadow: none !important;
    transform: none !important;
}

/* Masquer l'effet ::before pour les liens actifs */
.nav-links a.active::before,
#primary-menu a.active::before,
.nav-links .menu-item a.active::before,
#primary-menu .menu-item a.active::before,
.nav-links .menu-item-has-children a.active::before,
#primary-menu .menu-item-has-children a.active::before,
.nav-links a.active:hover::before,
#primary-menu a.active:hover::before,
.nav-links .menu-item a.active:hover::before,
#primary-menu .menu-item a.active:hover::before,
.nav-links .menu-item-has-children a.active:hover::before,
#primary-menu .menu-item-has-children a.active:hover::before,
.nav-links .current-menu-item a::before,
#primary-menu .current-menu-item a::before,
.nav-links .current_page_item a::before,
#primary-menu .current_page_item a::before,
.nav-links .current-menu-ancestor a::before,
#primary-menu .current-menu-ancestor a::before {
    display: none !important; /* Masquer l'overlay pour les actifs comme accueil.html */
}

/* Reset des styles WordPress par défaut qui peuvent interférer */
.nav-links .menu-item,
#primary-menu .menu-item {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.nav-links .menu-item a,
#primary-menu .menu-item a {
    box-shadow: none !important;
    text-shadow: none !important;
    outline: none !important;
}

/* FORCER le reset des styles WordPress par défaut */
.nav-links a:not(.active):not(.current-menu-item):not(.current_page_item):not(.current-menu-ancestor):not(:hover),
#primary-menu a:not(.active):not(.current-menu-item):not(.current_page_item):not(.current-menu-ancestor):not(:hover),
.nav-links .menu-item a:not(.active):not(.current-menu-item):not(.current_page_item):not(.current-menu-ancestor):not(:hover),
#primary-menu .menu-item a:not(.active):not(.current-menu-item):not(.current_page_item):not(.current-menu-ancestor):not(:hover) {
    background: none !important;
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
    border-radius: 20px !important;
    color: #8b95a7 !important; /* var(--text-muted) en valeur directe pour meilleure transition */
    padding: 0.35rem 0.7rem !important;
    text-decoration: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
    outline: none !important;
    font-weight: normal !important;
    font-size: var(--header-menu-size, 1rem) !important;
    transition: color 0.3s ease !important;
}

/* Styles pour les sous-menus */
.nav-links .sub-menu a,
#primary-menu .sub-menu a {
    display: block !important;
    padding: 0.75rem 1rem !important;
    color: var(--text-muted) !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    border-radius: 0 !important;
    background: none !important;
}

.nav-links .sub-menu a:hover,
#primary-menu .sub-menu a:hover {
    color: var(--text) !important;
    background: rgba(255, 255, 255, 0.1) !important; /* Overlay subtil au survol */
}

.nav-links .sub-menu a.active,
#primary-menu .sub-menu a.active {
    background: linear-gradient(135deg, var(--accent), var(--cyan)) !important; /* Bleu pour les actifs */
    color: white !important;
}

/* Reset pour les menus WordPress par défaut */
.menu a,
.menu-item a,
.menu-item-has-children a {
    background: none !important;
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
    outline: none !important;
}

/* Reset pour les classes WordPress spécifiques */
.menu-item-1 a,
.menu-item-2 a,
.menu-item-3 a,
.menu-item-4 a,
.menu-item-5 a {
    background: none !important;
    background-color: transparent !important;
    background-image: none !important;
}

/* Sous-menus */

.nav-links .sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background: rgba(10, 10, 15, 0.95);
    backdrop-filter: blur(20px);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 0.5rem 0;
    min-width: 200px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    z-index: 1000;
    list-style: none;
    margin: 0;
}

.nav-links li:hover .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.nav-links .sub-menu li {
    margin: 0;
}

.nav-links .sub-menu a {
    display: block;
    padding: 0.75rem 1rem;
    color: var(--text-muted);
    text-decoration: none;
    transition: all 0.3s ease;
    border-radius: 0;
}

.nav-links .sub-menu a:hover {
    color: var(--text);
    background: rgba(255, 255, 255, 0.1);
}

.nav-links .sub-menu a.active {
    background: linear-gradient(135deg, var(--accent), var(--cyan));
    color: white;
}

.header-buttons {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-left: auto;
    flex-shrink: 0;
    z-index: 2;
}

.cta-button {
    color: white;
    padding: 0.5rem 1.2rem;
    border-radius: 9999px; /* Forme pillule comme le CTA du hero */
    text-decoration: none;
    font-weight: 600;
    transition: color 0.3s ease, border 0.3s ease;
    display: inline-block;
    /* border: none; supprimé pour permettre les bordures via style inline */
    cursor: pointer;
    font-size: 0.9rem;
    box-sizing: border-box; /* Inclure la bordure dans le calcul de la taille */
    box-shadow: none !important;
    border: none !important;
    margin: 0 !important;
}

/* Forcer l'affichage des bordures définies via style inline */
.cta-button[style*="border"] {
    border-style: solid !important;
}

/* Style spécifique pour les bordures des boutons header */
.header-buttons .cta-button[style*="border"] {
    border-style: solid !important;
    box-sizing: border-box !important;
}

/* Forcer l'affichage des bordures même si elles sont définies via style inline */
.header-buttons .cta-button-primary[style*="border"],
.header-buttons .cta-button-secondary[style*="border"] {
    border-style: solid !important;
    box-sizing: border-box !important;
}

/* S'assurer que les bordures ne sont pas surchargées au survol */
.header-buttons .cta-button-primary:hover[style*="border"],
.header-buttons .cta-button-secondary:hover[style*="border"] {
    border-style: solid !important;
}

/* Transition pour l'effet de déplacement seulement si activé */
.cta-button.hover-lift {
    transition: transform 0.3s ease, color 0.3s ease;
}

.cta-button-primary {
    background: linear-gradient(135deg, var(--accent), var(--cyan));
    /* Le box-shadow est géré dynamiquement dans functions.php */
}

.cta-button-secondary {
    background: linear-gradient(135deg, var(--accent), var(--cyan));
    /* Le box-shadow est géré dynamiquement dans functions.php */
}

/* Effet de déplacement au survol - Appliqué seulement si activé */
.cta-button-primary:hover,
.cta-button-secondary:hover {
    text-decoration: none !important; /* Corriger la ligne noire */
    /* border-bottom: none supprimé pour permettre les bordures */
    padding: 0.5rem 1.2rem !important;
    box-shadow: none !important;
    transform: none !important;
}

/* Effet de déplacement conditionnel pour Bouton A */
.cta-button-primary.hover-lift:hover {
    transform: translateY(-2px);
    padding: 0.5rem 1.2rem !important;
    box-shadow: none !important;
}

/* Effet de déplacement conditionnel pour Bouton B */
.cta-button-secondary.hover-lift:hover {
    transform: translateY(-2px);
    padding: 0.5rem 1.2rem !important;
    box-shadow: none !important;
}

/* Couleur du texte au survol - Bouton A */
.cta-button-primary:hover {
    color: var(--primary-hover-text-color, white);
}

/* Couleur du texte au survol - Bouton B */
.cta-button-secondary:hover {
    color: var(--secondary-hover-text-color, white);
}

/* ==========================================================================
   FOOTER STYLES
   ========================================================================== */

.footer {
    background: var(--bg-secondary);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding: 2rem 0 0; /* Suppression du padding-bottom pour centrage */
    margin-top: 0 !important; /* Suppression forcée de l'espacement du haut */
}

.footer-content {
    display: grid;
    grid-template-columns: 2fr 1.7fr 1.1fr 1.1fr;
    gap: 3rem;
    align-items: start;
    width: 100%;
    margin-bottom: 3rem;
    margin-top: 2rem !important; /* Force l'espacement entre la ligne et le contenu */
    padding-left: var(--header-side-margin) !important; /* Aligné avec le logo du header */
    padding-right: 0 !important;
}

.footer-brand {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 0 !important; /* Force l'espacement depuis le conteneur parent */
}

/* Force l'espacement pour tous les éléments du footer */
.footer-brand {
    margin-top: 0 !important; /* L'espacement vient du .footer-content */
}

/* Wrapper pour Menu et Ressources (même colonne verticale) */
.footer-menu-wrapper {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
    margin-top: 1.5rem !important; /* Aligne avec la première ligne de la description */
}

/* Descendre les menus pour aligner les premiers liens avec la première phrase de la description */
.footer-menu,
.footer-resources {
    margin-top: 0 !important; /* L'espacement vient du wrapper */
}

/* S'assurer que toutes les sections de menu sont alignées au même niveau */
.footer-menu-secondary,
.footer-cta {
    margin-top: 1.5rem !important; /* Aligne avec Menu et Ressources */
}

.footer-logo {
    width: var(--footer-logo-size, 40px);
    height: var(--footer-logo-height, 40px);
    background: linear-gradient(135deg, var(--accent), var(--cyan));
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 1.2rem;
    color: white;
    margin-left: -8px; /* Décalage vers la gauche pour compenser le décalage vers la droite */
}

.footer-description {
    color: var(--text-muted);
    line-height: 1.6;
    max-width: 300px;
    margin-bottom: 1.5rem;
}

.footer-contact {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 1.5rem;
}

.footer-contact h4 {
    color: var(--text);
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.footer-contact a {
    color: var(--cyan);
    text-decoration: none;
    transition: color 0.3s ease;
    display: inline-block;
    width: fit-content;
}

.footer-contact a {
    position: relative;
}

.footer-contact a::before {
    content: '✦';
    position: absolute;
    left: -1.2em;
    color: #3b82f6;
    opacity: 0;
    transition: opacity 0.3s ease;
}

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

.footer-contact a:hover::before {
    opacity: 1;
}

.footer-menu h4, .footer-menu-secondary h4, .footer-cta h4, .footer-resources h4 {
    color: #a9c8f9;
    font-size: var(--footer-title-size);
    font-weight: 600;
    margin-bottom: 0.5rem;
    margin-top: 0;
    padding-bottom: 0;
    position: relative;
    display: inline-block;
    line-height: 1.2;
    height: auto;
    letter-spacing: 0.03em; /* Très léger letter-spacing */
}

/* Ligne de soulignement sous les titres du footer (comme "Zero prompt") */
/* Produit, Ressources et Légal : courbe réduite de moitié */
.footer-menu h4::after,
.footer-menu-secondary h4::after,
.footer-resources h4::after {
    content: '';
    position: absolute;
    bottom: -3px;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    height: 12px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'%3E%3Cpath d='M0,10 Q50,8.5 100,9.0 Q150,9.2 200,9.4' stroke='%2366A3FF' stroke-width='2.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat;
    background-size: 100% 100%;
    pointer-events: none;
}

/* Accès : même ligne que Produit et Légal */
.footer-cta h4::after {
    content: '';
    position: absolute;
    bottom: -3px;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    height: 12px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'%3E%3Cpath d='M0,10 Q50,8.5 100,9.0 Q150,9.2 200,9.4' stroke='%2366A3FF' stroke-width='2.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat;
    background-size: 100% 100%;
    pointer-events: none;
}

.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
    margin-top: 0.5rem;
}

.footer-links a {
    color: var(--text-muted);
    text-decoration: none;
    transition: color 0.3s ease;
    font-size: var(--footer-text-size);
}

.footer-links a {
    position: relative;
}

.footer-links a::before {
    content: '✦';
    position: absolute;
    left: -1.2em;
    color: #3b82f6;
    opacity: 0;
    transition: opacity 0.3s ease;
}

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

.footer-links a:hover::before {
    opacity: 1;
}


/* Footer Separator - Ligne qui prend toute la largeur */
.footer-separator {
    width: 100vw;
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
    margin: 0;
    margin-left: calc(-50vw + 50%);
}

/* Footer Bottom - Section Copyright - RECRÉÉ DE ZÉRO */
.footer-bottom {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    height: 2.5rem;
    padding: 0;
    padding-left: var(--header-side-margin) !important; /* Aligné avec le logo du header */
    padding-right: 0 !important;
}

.footer-copyright {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin: 0;
    padding: 0;
    line-height: 1;
}

.footer-bottom-right {
    color: var(--text-muted);
    font-size: 0.9rem;
    text-align: right;
    margin: 0;
    padding: 0;
    line-height: 1;
}

.footer-bottom-right a {
    color: var(--text-muted);
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-bottom-right a:hover {
    color: var(--text);
}

/* Footer Individual Alignment Options */
.footer-brand.align-left,
.footer-menu.align-left,
.footer-menu-secondary.align-left,
.footer-cta.align-left,
.footer-resources.align-left {
    text-align: left;
}

.footer-brand.align-center,
.footer-menu.align-center,
.footer-menu-secondary.align-center,
.footer-cta.align-center,
.footer-resources.align-center {
    text-align: center;
}

.footer-brand.align-right,
.footer-menu.align-right,
.footer-menu-secondary.align-right,
.footer-cta.align-right,
.footer-resources.align-right {
    text-align: right;
}

.footer-cta.align-right {
    /* Marge symétrique - pas de compensation négative */
}

/* ==========================================================================
   RESPONSIVE STYLES
   ========================================================================== */

@media (max-width: 1024px) {
    .footer-content {
        grid-template-columns: 1fr 1fr 1fr;
        gap: 2rem;
    }
    
    .footer-brand {
        grid-column: 1 / -1;
    }
}

@media (max-width: 768px) {
    .container {
        padding: 0 1rem;
    }
    
    .nav {
        flex-direction: column;
        gap: 1rem;
    }
    
    .site-branding {
        order: 1;
    }
    
    .nav-links {
        position: static;
        transform: none;
        left: auto;
        justify-content: center;
        order: 2;
    }
    
    .header-buttons {
        order: 3;
        margin-left: 0;
        flex-direction: column;
        width: 100%;
        gap: 0.5rem;
    }
    
    .cta-button {
        width: 100%;
        text-align: center;
    }
    
    /* Ajustement de l'espacement pour mobile */
    .site-main,
    main {
        margin-top: 5rem; /* Espace réduit sur mobile */
    }
    
    .page-content,
    .single-content,
    .archive-content,
    .search-content,
    .entry-content {
        margin-top: 5rem; /* Espace réduit sur mobile */
        padding: 1.5rem var(--header-side-margin);
    }
    
    .footer-content {
        grid-template-columns: 1fr;
        gap: 2rem;
        text-align: center;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    .footer-description {
        max-width: none;
    }
    
    .footer-bottom {
        grid-template-columns: 1fr;
        text-align: center;
        height: auto;
        padding: 0.5rem 0;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    .footer-copyright {
        text-align: center;
    }
    
    .footer-bottom-right {
        text-align: center;
    }
}

@media (max-width: 480px) {
    .container {
        padding: 0 1rem;
    }
    
    .logo {
        font-size: 1.2rem;
    }
    
    .cta-button {
        padding: 0.5rem 1rem;
        font-size: 0.9rem;
    }
}

/* ==========================================================================
   COMMENT CA MARCHE
   ========================================================================== */