/**
 * Theme Name: Web-Créativité
 * Theme URI: https://web-creativite.fr
 * Description: Thème WordPress moderne et performant pour freelances et agences web.
 * Author: Web-Créativité
 * Author URI: https://web-creativite.fr
 * Version: 1.0.0
 * Requires at least: 6.0
 * Tested up to: 6.7
 * Requires PHP: 8.0
 * Text Domain: web-creativite
 * Tags: blog, portfolio, freelance, responsive, custom-colors, custom-logo
 */

/**
 * Modern Responsive CSS - Web-Créativité Theme 2025
 * Mobile-First Approach
 */

/* ===================================
   CSS VARIABLES
   =================================== */
:root {
    /* Colors */
    --primary-color: #2980b9;
    --secondary-color: #3498db;
    --dark-color: #2c3e50;
    --light-color: #ecf0f1;
    --white-color: #ffffff;
    --success-color: #2ecc71;
    --text-color: #2c3e50;
    --text-muted: #7f8c8d;
    --bg-body: #ffffff;
    --bg-section: #ecf0f1;
    --bg-card: #ffffff;
    --shadow: 0 4px 15px rgba(0,0,0,0.1);
    --shadow-hover: 0 8px 25px rgba(0,0,0,0.15);

    /* Fluid Typography - Mobile First */
    --font-size-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
    --font-size-sm: clamp(0.875rem, 0.8rem + 0.375vw, 1rem);
    --font-size-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
    --font-size-lg: clamp(1.125rem, 1rem + 0.625vw, 1.5rem);
    --font-size-xl: clamp(1.5rem, 1.25rem + 1.25vw, 2.5rem);
    --font-size-2xl: clamp(2rem, 1.5rem + 2.5vw, 3.5rem);

    /* Spacing - Fluid */
    --space-xs: clamp(0.5rem, 0.4rem + 0.5vw, 0.75rem);
    --space-sm: clamp(0.75rem, 0.6rem + 0.75vw, 1rem);
    --space-md: clamp(1rem, 0.8rem + 1vw, 1.5rem);
    --space-lg: clamp(1.5rem, 1rem + 2.5vw, 3rem);
    --space-xl: clamp(2rem, 1.5rem + 2.5vw, 4rem);
    --space-2xl: clamp(3rem, 2rem + 5vw, 6rem);

    /* Border Radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 16px;
    --radius-full: 9999px;

    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-base: 0.3s ease;
    --transition-slow: 0.5s ease;
}

/* ===================================
   2. RESET & BASE STYLES
   =================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Poppins', sans-serif;
    color: var(--dark-color);
    line-height: 1.6;
}

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

/* ===================================
   2b. LIENS — SYSTÈME GLOBAL
   =================================== */

/*
 * Stratégie :
 *  - Liens en prose (articles, descriptions, pages) : soulignement offset + highlight au hover
 *  - Liens UI (nav, boutons, cards, breadcrumb, meta) : conservent leur style propre via surcharge
 *  - On NE touche PAS aux éléments : nav, .btn, button, [role="button"], footer nav
 */

/* ---- Liens dans le contenu éditorial ---- */
.entry-content a,
.single-post .entry-content a,
.page-content a,
.wp-block-post-content a,
.woocommerce-Tabs-panel a,
.woocommerce-product-details__short-description a,
.comment-content a,
.widget-area a {
    color: var(--primary-color);
    text-decoration: none;
    border-bottom: 1.5px solid rgba(41, 128, 185, 0.35);
    padding-bottom: 1px;
    transition: color 0.18s ease, border-bottom-color 0.18s ease, background 0.18s ease;
    border-radius: 2px;
}

.entry-content a:hover,
.single-post .entry-content a:hover,
.page-content a:hover,
.wp-block-post-content a:hover,
.woocommerce-Tabs-panel a:hover,
.woocommerce-product-details__short-description a:hover,
.comment-content a:hover,
.widget-area a:hover {
    color: #1a6a9a;
    border-bottom-color: var(--primary-color);
    background: rgba(41, 128, 185, 0.07);
    border-radius: 3px;
    padding-left: 2px;
    padding-right: 2px;
}

/* Exclure les éléments qui ont leur propre style dans le contenu éditorial */
.entry-content a.btn,
.entry-content a[class*="wp-block-button"],
.entry-content a[class*="woocommerce"],
.entry-content img,
.page-content a.btn {
    border-bottom: none;
    padding-bottom: 0;
    background: none;
    padding-left: 0;
    padding-right: 0;
}

/* ---- Meta produit WooCommerce (Catégorie, Marque) ---- */
.woocommerce div.product .product_meta a,
.woocommerce .product_meta .posted_in a,
.woocommerce .product_meta .tagged_as a {
    display: inline-block;
    color: var(--primary-color) !important;
    background: rgba(41, 128, 185, 0.08) !important;
    border: 1px solid rgba(41, 128, 185, 0.18) !important;
    border-radius: 6px !important;
    padding: 0.15rem 0.6rem !important;
    font-size: 0.78rem !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: background 0.18s, border-color 0.18s, color 0.18s !important;
    margin: 0 0.15rem !important;
}
.woocommerce div.product .product_meta a:hover,
.woocommerce .product_meta .posted_in a:hover,
.woocommerce .product_meta .tagged_as a:hover {
    background: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: #fff !important;
}

/* ---- Liens inline dans les pages WordPress (Gutenberg) ---- */
.wp-block-paragraph a,
.wp-block-list a,
.wp-block-quote a,
.wp-block-heading a {
    color: var(--primary-color);
    text-decoration: none;
    border-bottom: 1.5px solid rgba(41, 128, 185, 0.35);
    padding-bottom: 1px;
    transition: color 0.18s, border-bottom-color 0.18s, background 0.18s;
    border-radius: 2px;
}
.wp-block-paragraph a:hover,
.wp-block-list a:hover,
.wp-block-quote a:hover,
.wp-block-heading a:hover {
    color: #1a6a9a;
    border-bottom-color: var(--primary-color);
    background: rgba(41, 128, 185, 0.07);
    padding-left: 2px;
    padding-right: 2px;
    border-radius: 3px;
}

/* ===================================
   2c. TABLEAUX — SYSTÈME GLOBAL
   =================================== */
.entry-content table,
.page-content table,
.single-post table,
.wp-block-table table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    margin: 2rem 0;
    font-size: 0.9rem;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 2px 16px rgba(44, 62, 80, 0.08);
}

/* En-tête */
.entry-content table thead tr,
.page-content table thead tr,
.single-post table thead tr,
.wp-block-table table thead tr {
    background: var(--dark-color);
}
.entry-content table thead th,
.page-content table thead th,
.single-post table thead th,
.wp-block-table table thead th {
    color: #ffffff;
    font-weight: 700;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.9rem 1.2rem;
    text-align: left;
    border: none;
}
.entry-content table thead th:first-child,
.page-content table thead th:first-child,
.single-post table thead th:first-child,
.wp-block-table table thead th:first-child {
    border-radius: 14px 0 0 0;
}
.entry-content table thead th:last-child,
.page-content table thead th:last-child,
.single-post table thead th:last-child,
.wp-block-table table thead th:last-child {
    border-radius: 0 14px 0 0;
}

/* Lignes */
.entry-content table tbody tr,
.page-content table tbody tr,
.single-post table tbody tr,
.wp-block-table table tbody tr {
    background: #ffffff;
    border-bottom: 1px solid #e9eef4;
    transition: background 0.15s ease;
}
.entry-content table tbody tr:nth-child(even),
.page-content table tbody tr:nth-child(even),
.single-post table tbody tr:nth-child(even),
.wp-block-table table tbody tr:nth-child(even) {
    background: #f7fafd;
}
.entry-content table tbody tr:hover,
.page-content table tbody tr:hover,
.single-post table tbody tr:hover,
.wp-block-table table tbody tr:hover {
    background: #eef5fb;
}
.entry-content table tbody tr:last-child,
.page-content table tbody tr:last-child,
.single-post table tbody tr:last-child,
.wp-block-table table tbody tr:last-child {
    border-bottom: none;
}

/* Cellules */
.entry-content table td,
.page-content table td,
.single-post table td,
.wp-block-table table td {
    padding: 0.85rem 1.2rem;
    color: var(--text-color);
    border: none;
    vertical-align: middle;
    line-height: 1.5;
}

/* Première colonne en semi-gras */
.entry-content table td:first-child,
.page-content table td:first-child,
.single-post table td:first-child,
.wp-block-table table td:first-child {
    font-weight: 600;
    color: #2c3e50;
}

/* Colonne colorée (ex: avantage freelance) */
.entry-content table td:nth-child(2),
.page-content table td:nth-child(2),
.single-post table td:nth-child(2),
.wp-block-table table td:nth-child(2) {
    color: var(--primary-color);
}

/* Responsive : scroll horizontal sur mobile */
.entry-content .wp-block-table,
.page-content .wp-block-table,
.single-post .wp-block-table {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
@media (max-width: 640px) {
    .entry-content table,
    .page-content table,
    .single-post table,
    .wp-block-table table {
        font-size: 0.82rem;
    }
    .entry-content table td,
    .entry-content table th,
    .page-content table td,
    .page-content table th,
    .single-post table td,
    .single-post table th {
        padding: 0.65rem 0.8rem;
    }
}

/* ===================================
   3. LAYOUT & CONTAINER
   =================================== */
.container {
    max-width: 1100px;
    margin: auto;
    padding: 0 2rem;
    overflow: hidden;
}

section {
    padding: 5rem 0;
}

#services h2,
#about h2,
#portfolio h2,
#testimonials h2 {
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: 1rem;
    color: var(--dark-color);
}

.section-subtitle {
    text-align: center;
    font-size: 1.1rem;
    color: #7f8c8d;
    max-width: 600px;
    margin: 0 auto 3rem auto;
}

/* ===================================
   4. HEADER & NAVIGATION
   =================================== */

/* Compensation du header fixe (80px) sur toutes les pages internes */
#main-content {
    padding-top: 80px;
}

/* La page d'accueil gère son propre espacement via le hero */
body.home #main-content,
body.front-page #main-content {
    padding-top: 0;
}

#main-header {
    background: var(--white-color);
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1000;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
    transition: all 0.3s ease;
}

/* Admin bar : décaler le header fixe (32px desktop, 46px tablette) */
.admin-bar #main-header { top: 32px; }
@media screen and (max-width: 782px) {
    .admin-bar #main-header { top: 46px; }
}
/* < 600px : admin bar en position:absolute (défile) — géré par JS */

#main-header.scrolled {
    box-shadow: 0 4px 15px rgba(0,0,0,0.15);
}

#main-header .container {
    padding: 0 2rem;
    overflow: visible;
}

#main-header .header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 80px;
}

#main-header .logo {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--dark-color);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

#main-header .logo i {
    color: var(--primary-color);
}

#main-header .site-logo img {
    max-height: 60px;
    width: auto;
}

#main-header nav > ul {
    display: flex;
    list-style: none;
    align-items: center;
    margin: 0;
}

#main-header nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

#main-header nav > ul > li {
    margin: 0;
}

#main-header nav > ul > li > a {
    padding: 1rem;
    color: var(--dark-color);
    text-decoration: none;
    font-weight: 600;
    transition: color 0.3s ease;
    display: block;
}

#main-header nav > ul > li > a:hover {
    color: var(--primary-color);
}

#main-header nav > ul > li .btn {
    margin-left: 1rem;
}

/* Mobile Menu Toggle */
.mobile-menu-toggle {
    display: none;
    flex-direction: column;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    z-index: 1001;
}

.mobile-menu-toggle .bar {
    width: 25px;
    height: 3px;
    background-color: var(--dark-color);
    margin: 3px 0;
    transition: 0.3s;
    border-radius: 3px;
}

.mobile-menu-toggle.active .bar:nth-child(1) {
    transform: rotate(-45deg) translate(-5px, 6px);
}

.mobile-menu-toggle.active .bar:nth-child(2) {
    opacity: 0;
}

.mobile-menu-toggle.active .bar:nth-child(3) {
    transform: rotate(45deg) translate(-5px, -6px);
}

/* ===================================
   5. HERO SECTION
   =================================== */
#hero {
    color: var(--white-color);
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    position: relative;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

#hero .hero-content {
    max-width: 800px;
    padding: 2rem;
}

#hero h1 {
    font-size: 3.5rem;
    margin-bottom: 1rem;
    line-height: 1.2;
}

#hero p {
    font-size: 1.2rem;
    margin-bottom: 2rem;
}

/* ===================================
   6. BUTTONS
   =================================== */
.btn {
    display: inline-block;
    padding: 0.8rem 1.8rem;
    background: var(--primary-color);
    color: var(--white-color);
    border: none;
    border-radius: 5px;
    cursor: pointer;
    text-decoration: none;
    font-size: 1rem;
    font-weight: 600;
    transition: all 0.3s ease;
}

.btn:hover {
    background: var(--secondary-color);
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

/* Bouton ghost (contour blanc, fond transparent) — utilisé sur fonds colorés */
.btn-ghost {
    background: transparent;
    border: 2px solid var(--white-color);
    color: var(--white-color);
}

.btn-ghost:hover {
    background: var(--white-color);
    color: var(--primary-color);
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

/* Groupe de CTA côte à côte */
.hero-cta-group {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
    margin-top: 0.5rem;
}

/* ===================================
   STATS BAND
   =================================== */
.stats-band {
    background: var(--dark-color);
    padding: 3rem 0;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    text-align: center;
}

.stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.stat-item i {
    font-size: 1.8rem;
    color: var(--primary-color);
    margin-bottom: 0.25rem;
}

.stat-value {
    font-size: clamp(1.8rem, 3vw, 2.5rem);
    font-weight: 800;
    color: var(--white-color);
    line-height: 1;
}

.stat-label {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.65);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

@media (max-width: 768px) {
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }
}

@media (max-width: 480px) {
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ===================================
   PROCESS SECTION
   =================================== */
.process-section {
    padding: 5rem 0;
    background: var(--light-color, #f8f9fa);
}

.process-section h2 {
    text-align: center;
    margin-bottom: 0.5rem;
}

.process-section .section-subtitle {
    text-align: center;
    color: var(--text-muted, #6c757d);
    max-width: 600px;
    margin: 0 auto 3rem;
}

.process-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    counter-reset: steps;
}

.process-step {
    text-align: center;
    padding: 2rem 1.5rem;
    background: var(--white-color, #fff);
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
    position: relative;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.process-step:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.step-icon-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color, #3498db));
    border-radius: 50%;
    margin: 0 auto 1.25rem;
}

.step-icon-wrap i {
    font-size: 1.6rem;
    color: #fff;
}

.step-number {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 26px;
    height: 26px;
    background: var(--dark-color);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--white-color, #fff);
}

.process-step h3 {
    font-size: 1.1rem;
    margin-bottom: 0.75rem;
    color: var(--dark-color);
}

.process-step p {
    font-size: 0.9rem;
    color: var(--text-muted, #6c757d);
    line-height: 1.6;
    margin: 0;
}

.process-cta {
    text-align: center;
    margin-top: 3rem;
}

@media (max-width: 992px) {
    .process-steps {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .process-steps {
        grid-template-columns: 1fr;
    }
}

/* ===================================
   7. SERVICES SECTION
   =================================== */
.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

.service-card {
    background: var(--white-color);
    padding: 2.5rem 2rem;
    text-align: center;
    border-radius: 8px;
    box-shadow: var(--shadow);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.service-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

.service-card i {
    font-size: 3rem;
    color: var(--primary-color);
    margin-bottom: 1.5rem;
}

.service-card h3 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    color: var(--dark-color);
}

.service-card p {
    color: #7f8c8d;
    line-height: 1.6;
}

.services-cta {
    text-align: center;
    margin-top: 3rem;
}

/* ===================================
   8. ABOUT SECTION
   =================================== */
#about {
    background: var(--light-color);
}

.about-content {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 3rem;
    align-items: center;
}

.about-content img {
    width: 100%;
    max-width: 300px;
    border-radius: 50%;
    box-shadow: 0 0 25px rgba(0,0,0,0.2);
    justify-self: center;
}

.about-content .about-text h3 {
    font-size: 1.8rem;
    margin-bottom: 1rem;
    color: var(--dark-color);
}

.about-content .about-text p {
    margin-bottom: 1rem;
    line-height: 1.8;
    color: #555;
}

.about-content .about-text .highlight {
    color: var(--primary-color);
    font-weight: 700;
}

.about-content .about-text .btn {
    margin-top: 1rem;
}

/* ===================================
   9. PORTFOLIO SECTION
   =================================== */
.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.portfolio-item {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    box-shadow: var(--shadow);
    cursor: pointer;
    aspect-ratio: 4 / 3;
    background: var(--light-color);
}

.portfolio-item img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: top center;
    transition: transform 0.5s ease;
}

/* Logo mode : centré sur fond blanc avec padding */
.portfolio-item.has-logo img {
    object-fit: contain;
    object-position: center;
    background: #fff;
    padding: 1.25rem;
}

.portfolio-item:hover img {
    transform: scale(1.05);
}

.portfolio-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(41, 128, 185, 0.85);
    color: var(--white-color);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.portfolio-item:hover .portfolio-overlay {
    opacity: 1;
}

.portfolio-overlay h4 {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

.portfolio-overlay p {
    font-size: 1rem;
}

.portfolio-cta {
    text-align: center;
    margin-top: 3rem;
}

/* ===================================
   10b. ZONES D'INTERVENTION
   =================================== */
.zones-intervention {
    background: #f4f6f8;
    border-top: 1px solid #e2e8f0;
    padding: 2rem 0;
    text-align: center;
}

.zones-label {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #64748b;
    margin-bottom: 1rem;
}

.zones-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
}

.zones-list li a {
    display: inline-block;
    font-size: 0.8rem;
    color: #475569;
    text-decoration: none;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    padding: 0.3rem 0.85rem;
    transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
    white-space: nowrap;
    cursor: pointer;
}

.zones-list li a:hover {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: #fff;
}

@media (max-width: 600px) {
    .zones-label {
        font-size: 0.72rem;
    }

    .zones-list li a {
        font-size: 0.75rem;
        padding: 0.25rem 0.7rem;
    }
}

/* ===================================
   11. NEWSLETTER SECTION
   =================================== */

.newsletter-section {
    background: linear-gradient(135deg, #0f1c2e 0%, #1a3a5c 50%, #0f1c2e 100%);
    padding: 5rem 0;
    position: relative;
    overflow: hidden;
}
.newsletter-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 60% 80% at 10% 50%, rgba(41,128,185,0.18) 0%, transparent 70%),
        radial-gradient(ellipse 40% 60% at 90% 50%, rgba(52,152,219,0.12) 0%, transparent 70%);
    pointer-events: none;
}

.newsletter-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3.5rem;
    align-items: center;
    position: relative;
}

/* --- Contenu gauche --- */
.newsletter-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(41,128,185,0.25);
    border: 1px solid rgba(41,128,185,0.45);
    color: #74c0fc;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 0.35rem 0.85rem;
    border-radius: 999px;
    margin-bottom: 1.25rem;
}
.newsletter-title {
    font-size: clamp(1.5rem, 1.2rem + 1.5vw, 2.1rem);
    font-weight: 800;
    color: #ffffff;
    line-height: 1.2;
    margin-bottom: 1rem;
}
.newsletter-desc {
    color: rgba(255,255,255,0.72);
    font-size: 1rem;
    line-height: 1.7;
    margin-bottom: 1.5rem;
}
.newsletter-perks {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.newsletter-perks li {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    color: rgba(255,255,255,0.82);
    font-size: 0.95rem;
}
.newsletter-perks li i {
    color: #4cd964;
    font-size: 0.8rem;
    flex-shrink: 0;
}

/* --- Carte formulaire droite --- */
.newsletter-card {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 24px;
    padding: 2.25rem 2rem;
    backdrop-filter: blur(12px);
}
.newsletter-card-label {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: rgba(255,255,255,0.85);
    font-weight: 600;
    font-size: 1rem;
    margin-bottom: 1.25rem;
}
.newsletter-card-label i {
    color: var(--primary-color);
}

/* Messages Brevo */
.newsletter-msg {
    display: none;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.85rem 1rem;
    border-radius: 10px;
    font-size: 0.9rem;
    margin-bottom: 1rem;
}
.newsletter-msg--error {
    background: rgba(231,76,60,0.15);
    border: 1px solid rgba(231,76,60,0.4);
    color: #ff8b7e;
}
.newsletter-msg--success {
    background: rgba(46,204,113,0.15);
    border: 1px solid rgba(46,204,113,0.4);
    color: #6ee9a0;
}
/* Brevo JS affiche/cache ces divs — on laisse nos classes newsletter-msg gérer l'affichage */
.sib-form-message-panel { display: none; }
#error-message.newsletter-msg,
#success-message.newsletter-msg { display: none; }
/* Quand Brevo retire le style display:none */

/* Ligne email + bouton */
.newsletter-input-row {
    display: flex;
    gap: 0.6rem;
    margin-bottom: 0.75rem;
}
.newsletter-input-row input[type="text"] {
    flex: 1;
    min-width: 0;
    padding: 0.85rem 1.1rem;
    border: 1.5px solid rgba(255,255,255,0.15);
    border-radius: 12px;
    background: rgba(255,255,255,0.08);
    color: #ffffff;
    font-size: 0.95rem;
    outline: none;
    transition: border-color 0.2s, background 0.2s;
}
.newsletter-input-row input[type="text"]:focus {
    border-color: var(--primary-color);
    background: rgba(255,255,255,0.12);
}
.newsletter-input-row input[type="text"]::placeholder {
    color: rgba(255,255,255,0.4);
}
.newsletter-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.85rem 1.35rem;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    color: #fff;
    border: none;
    border-radius: 12px;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: opacity 0.2s, transform 0.2s, box-shadow 0.2s;
    box-shadow: 0 4px 18px rgba(41,128,185,0.4);
}
.newsletter-btn:hover {
    opacity: 0.9;
    transform: translateY(-1px);
    box-shadow: 0 6px 24px rgba(41,128,185,0.55);
}
.newsletter-btn__spinner {
    width: 18px;
    height: 18px;
    fill: #fff;
    animation: spin 0.8s linear infinite;
    display: none;
}
.newsletter-btn__arrow {
    font-size: 0.8rem;
    transition: transform 0.2s;
}
.newsletter-btn:hover .newsletter-btn__arrow {
    transform: translateX(3px);
}
@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Erreur champ */
.newsletter-field-error {
    display: block;
    font-size: 0.8rem;
    color: #ff8b7e;
    min-height: 0;
    margin-bottom: 0.5rem;
}

/* reCaptcha */
.newsletter-captcha {
    margin-top: 0.75rem;
    transform: scale(0.88);
    transform-origin: left center;
}

/* Bouton — état chargement */
.newsletter-btn--loading {
    opacity: 0.75;
    cursor: not-allowed;
    pointer-events: none;
}
.newsletter-btn--loading .newsletter-btn__spinner {
    display: inline-block !important;
    animation: spin 0.8s linear infinite;
}

/* Messages succès/erreur — animation d'apparition */
.newsletter-msg--visible {
    display: flex !important;
    animation: nlMsgIn 0.4s ease forwards;
}
@keyframes nlMsgIn {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Privacy */
.newsletter-privacy {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: rgba(255,255,255,0.45);
    font-size: 0.78rem;
    margin-top: 1rem;
}
.newsletter-privacy i {
    color: rgba(255,255,255,0.35);
    font-size: 0.75rem;
    flex-shrink: 0;
}

/* Responsive */
@media (max-width: 900px) {
    .newsletter-inner {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }
    .newsletter-section {
        padding: 3.5rem 0;
    }
}
@media (max-width: 540px) {
    .newsletter-input-row {
        flex-direction: column;
    }
    .newsletter-btn {
        justify-content: center;
    }
    .newsletter-captcha {
        transform: scale(0.8);
        transform-origin: left center;
    }
}

/* ===================================
   11. FOOTER
   =================================== */
#main-footer {
    background: #0f1c2e;
    color: rgba(255,255,255,0.72);
    font-size: 0.9rem;
    line-height: 1.75;
}

/* --- CTA band ---------------------------------------- */
.footer-cta-band {
    background: linear-gradient(135deg, #1a2d45 0%, #0f1c2e 100%);
    padding: 4rem 0;
    text-align: center;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    position: relative;
    overflow: hidden;
}

.footer-cta-band::before {
    content: '';
    position: absolute;
    top: -60px;
    left: 50%;
    transform: translateX(-50%);
    width: 500px;
    height: 180px;
    background: radial-gradient(ellipse, rgba(41,128,185,0.18) 0%, transparent 70%);
    pointer-events: none;
}

.footer-cta-band h3 {
    font-size: 2rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 0.6rem;
    letter-spacing: -0.02em;
}

.footer-cta-band p {
    color: rgba(255,255,255,0.6);
    margin-bottom: 2rem;
    font-size: 1rem;
}

/* --- Main footer grid -------------------------------- */
.footer-main {
    padding: 3.5rem 0 2rem;
    text-align: left;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.7fr 1fr 1fr 1fr;
    gap: 3rem;
    text-align: left;
    align-items: start;
}

/* Brand column */
.footer-brand .footer-logo {
    font-size: 1.25rem;
    font-weight: 700;
    color: #fff;
    display: inline-block;
    margin-bottom: 0.9rem;
    letter-spacing: -0.02em;
    text-decoration: none;
}

.footer-brand .footer-logo span {
    color: var(--primary-color);
}

.footer-brand > p {
    color: rgba(255,255,255,0.55);
    font-size: 0.875rem;
    margin-bottom: 1.5rem;
    line-height: 1.7;
    max-width: 250px;
}

.footer-social {
    display: flex;
    gap: 0.5rem;
}

.footer-social a {
    width: 34px;
    height: 34px;
    border-radius: 7px;
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,0.65);
    font-size: 0.9rem;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    text-decoration: none;
    cursor: pointer;
}

.footer-social a:hover {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: #fff;
}

/* Column titles */
.footer-col-title {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #fff;
    margin-bottom: 1.25rem;
    padding-bottom: 0.65rem;
    border-bottom: 1px solid rgba(255,255,255,0.12);
    position: relative;
}

.footer-col-title::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 28px;
    height: 2px;
    background: var(--primary-color);
    border-radius: 2px;
}

/* Column links */
.footer-links,
.footer-links li {
    list-style: none !important;
    padding: 0 !important;
    margin: 0;
}

.footer-links {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.footer-links a {
    color: rgba(255,255,255,0.58);
    text-decoration: none;
    font-size: 0.875rem;
    transition: color 0.18s ease, padding-left 0.18s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    cursor: pointer;
}

.footer-links a::before {
    content: '';
    width: 0;
    height: 1px;
    background: var(--primary-color);
    transition: width 0.18s ease;
    flex-shrink: 0;
}

.footer-links a:hover {
    color: #fff;
}

.footer-links a:hover::before {
    width: 12px;
}

/* Contact column */
.footer-contact-item {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    margin-bottom: 0.8rem;
    color: rgba(255,255,255,0.58);
    font-size: 0.875rem;
    line-height: 1.5;
}

.footer-contact-item i {
    color: var(--primary-color);
    font-size: 0.8rem;
    margin-top: 0.25rem;
    flex-shrink: 0;
    width: 14px;
    text-align: center;
}

.footer-contact-item a {
    color: rgba(255,255,255,0.58);
    text-decoration: none;
    transition: color 0.18s ease;
    cursor: pointer;
}

.footer-contact-item a:hover {
    color: #fff;
}

/* --- Footer bottom bar ------------------------------- */
.footer-bottom-bar {
    border-top: 1px solid rgba(255,255,255,0.07);
    padding: 1.25rem 0;
    background: rgba(0,0,0,0.15);
}

.footer-bottom-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.footer-copyright {
    font-size: 0.8rem;
    color: rgba(255,255,255,0.35);
    margin: 0;
}

.footer-legal-links {
    display: flex;
    gap: 1.5rem;
    list-style: none !important;
    padding: 0 !important;
    margin: 0;
}

.footer-legal-links a {
    font-size: 0.8rem;
    color: rgba(255,255,255,0.35);
    text-decoration: none;
    transition: color 0.18s ease;
    cursor: pointer;
}

.footer-legal-links a:hover {
    color: rgba(255,255,255,0.75);
}

/* Responsive footer */
@media (max-width: 1024px) {
    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 2.5rem;
    }
}

@media (max-width: 600px) {
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .footer-cta-band {
        padding: 2.5rem 0;
    }

    .footer-cta-band h3 {
        font-size: 1.5rem;
    }

    .footer-brand > p {
        max-width: 100%;
    }

    .footer-bottom-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.4rem;
    }
}












/* ===================================
   MODERN ANIMATIONS
   =================================== */

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

/* Smooth animations for those who want them */
@media (prefers-reduced-motion: no-preference) {
    .fade-in {
        animation: fadeIn var(--transition-slow) ease-in;
    }

    .slide-up {
        animation: slideUp var(--transition-base) ease-out;
    }

    @keyframes fadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
    }

    @keyframes slideUp {
        from {
            opacity: 0;
            transform: translateY(20px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
}

/* ===================================
   13. RESPONSIVE DESIGN (Migrated from main.css)
   =================================== */

/* Tablet - 2 columns */
@media (max-width: 1024px) and (min-width: 769px) {
    .portfolio-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }
}

/* Mobile - 1 column */
@media (max-width: 768px) {
    /* Mobile Menu */
    .mobile-menu-toggle {
        display: flex;
    }

    #main-header .main-navigation {
        position: fixed;
        top: 80px;
        left: -100%;
        width: 100%;
        background: var(--white-color);
        box-shadow: 0 4px 10px rgba(0,0,0,0.1);
        transition: left 0.3s ease;
    }

    #main-header .main-navigation.active {
        left: 0;
    }

    #main-header nav ul {
        flex-direction: column;
        padding: 1rem 0;
    }

    #main-header nav > ul > li {
        width: 100%;
    }

    #main-header nav > ul > li > a {
        padding: 1rem 2rem;
        border-bottom: 1px solid var(--light-color);
    }

    #main-header nav > ul > li .btn {
        margin-left: 0;
        display: block;
        text-align: center;
    }

    /* Hero */
    #hero h1 {
        font-size: 2.5rem;
    }

    #hero p {
        font-size: 1.0rem;
    }

    /* About */
    .about-content {
        grid-template-columns: 1fr;
    }

    .about-content img {
        margin-bottom: 2rem;
    }

    /* Portfolio */
    .portfolio-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .portfolio-item {
        aspect-ratio: 3 / 2;
    }

    /* General */
    section {
        padding: 3rem 0;
    }

    #services h2,
    #about h2,
    #portfolio h2,
    #testimonials h2 {
        font-size: 2rem;
    }

    .container {
        padding: 0 1rem;
    }
}

@media (max-width: 480px) {
    #hero h1 {
        font-size: 2rem;
    }

    .service-card {
        padding: 2rem 1.5rem;
    }

    .btn {
        padding: 0.7rem 1.5rem;
        font-size: 0.9rem;
    }
}

.btn {
        padding: 0.7rem 1.5rem;
        font-size: 0.9rem;
    }
}

/* ===================================
   14. GUTENBERG BLOCKS SUPPORT (Migrated from main.css)
   =================================== */

/* Block alignments */
.alignleft {
    float: left;
    margin-right: 2rem;
    margin-bottom: 1rem;
}

.alignright {
    float: right;
    margin-left: 2rem;
    margin-bottom: 1rem;
}

.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.alignwide {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

.alignfull {
    max-width: 100%;
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}

/* Block: Button */
.wp-block-button__link {
    background-color: var(--primary-color);
    color: var(--white-color);
    padding: 0.8rem 1.8rem;
    border-radius: 5px;
    font-weight: 600;
    transition: all 0.3s ease;
    border: none;
    text-decoration: none;
    display: inline-block;
}

.wp-block-button__link:hover {
    background-color: var(--secondary-color);
    transform: translateY(-2px);
}

.wp-block-button.is-style-outline .wp-block-button__link {
    background-color: transparent;
    border: 2px solid var(--primary-color);
    color: var(--primary-color);
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
    background-color: var(--primary-color);
    color: var(--white-color);
}

/* Block: Quote */
.wp-block-quote {
    border-left: 4px solid var(--primary-color);
    padding-left: 2rem;
    margin: 2rem 0;
    font-style: italic;
    color: #555;
}

.wp-block-quote cite {
    color: var(--primary-color);
    font-weight: 600;
    font-style: normal;
    display: block;
    margin-top: 1rem;
}

.wp-block-pullquote {
    border-top: 4px solid var(--primary-color);
    border-bottom: 4px solid var(--primary-color);
    padding: 2rem 0;
    text-align: center;
}

/* Block: Image */
.wp-block-image {
    margin: 2rem 0;
}

.wp-block-image img {
    border-radius: 8px;
    max-width: 100%;
    height: auto;
}

.wp-block-image figcaption {
    text-align: center;
    color: #7f8c8d;
    font-size: 0.9rem;
    margin-top: 0.5rem;
}

/* Block: Gallery */
.wp-block-gallery {
    margin: 2rem 0;
}

/* Block: Cover */
.wp-block-cover {
    min-height: 400px;
}

/* Block: Table */
.wp-block-table,
.table-responsive {
    width: 100%;
    margin: 2rem 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.wp-block-table table,
.table-responsive table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    min-width: 520px;
    background-color: var(--white-color);
    border-radius: 12px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
}

.wp-block-table table thead,
.table-responsive table thead {
    background-color: var(--primary-color);
    color: var(--white-color);
}

.wp-block-table table th,
.wp-block-table table td,
.table-responsive table th,
.table-responsive table td {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid rgba(44, 62, 80, 0.08);
    text-align: left;
    font-size: 0.95rem;
}

.wp-block-table table tbody tr:nth-child(even),
.table-responsive table tbody tr:nth-child(even) {
    background-color: rgba(41, 128, 185, 0.05);
}

.wp-block-table table caption,
.table-responsive table caption {
    caption-side: bottom;
    text-align: left;
    padding: 0.75rem 1rem 0;
    font-size: 0.85rem;
    color: #7f8c8d;
}

.wp-block-table::-webkit-scrollbar,
.table-responsive::-webkit-scrollbar {
    height: 6px;
}

.wp-block-table::-webkit-scrollbar-track,
.table-responsive::-webkit-scrollbar-track {
    background: #ecf0f1;
    border-radius: 3px;
}

.wp-block-table::-webkit-scrollbar-thumb,
.table-responsive::-webkit-scrollbar-thumb {
    background: var(--primary-color);
    border-radius: 3px;
}

@media (max-width: 640px) {
    .wp-block-table table,
    .table-responsive table {
        min-width: 420px;
    }

    .wp-block-table table th,
    .wp-block-table table td,
    .table-responsive table th,
    .table-responsive table td {
        padding: 0.75rem;
        font-size: 0.9rem;
    }
}

/* Block: Code */
.wp-block-code,
.wp-block-preformatted {
    background-color: #1a252f;
    color: #e8f1f8;
    padding: 1.5rem;
    border-radius: 8px;
    font-family: 'Courier New', Consolas, 'Liberation Mono', monospace;
    font-size: 0.9rem;
    line-height: 1.65;
    overflow-x: auto;
    border-left: 4px solid var(--primary-color);
}

/* Block: Separator */
.wp-block-separator {
    border: none;
    border-top: 2px solid var(--light-color);
    margin: 3rem 0;
}

.wp-block-separator.is-style-wide {
    border-top-width: 3px;
}

.wp-block-separator.is-style-dots {
    border: none;
    text-align: center;
}

.wp-block-separator.is-style-dots::before {
    content: '···';
    color: var(--primary-color);
    font-size: 2rem;
    letter-spacing: 1rem;
}

/* Block: Group */
.wp-block-group {
    padding: 2rem;
    margin: 2rem 0;
}

.wp-block-group.has-background {
    padding: 2rem;
}

/* Block: Columns */
.wp-block-columns {
    margin: 2rem 0;
}

/* Block: Media & Text */
.wp-block-media-text {
    margin: 2rem 0;
}

/* Color palette classes */
.has-primary-color {
    color: var(--primary-color);
}

.has-primary-background-color {
    background-color: var(--primary-color);
}

.has-secondary-color {
    color: var(--secondary-color);
}

.has-secondary-background-color {
    background-color: var(--secondary-color);
}

.has-dark-color {
    color: var(--dark-color);
}

.has-dark-background-color {
    background-color: var(--dark-color);
}

.has-light-color {
    color: var(--dark-color);
}

.has-light-background-color {
    background-color: var(--light-color);
}

.has-white-color {
    color: var(--dark-color);
}

.has-white-background-color {
    background-color: var(--white-color);
}

.has-success-color {
    color: var(--success-color);
}

.has-success-background-color {
    background-color: var(--success-color);
}

/* ===================================
   15. PAGE BUILDERS COMPATIBILITY (Migrated from main.css)
   =================================== */

/* DIVI Builder */
.divi-builder-active #main-header {
    position: relative;
}

.divi-builder-active #main-content {
    padding-top: 0;
}

/* Elementor */
.elementor-active .container {
    max-width: 100%;
}

/* Ensure page builders have full width */
body.page-template-default.divi-builder-active #main-content,
body.page-template-default.elementor-active #main-content {
    padding: 0;
}

/* ===================================
   16. WOOCOMMERCE SUPPORT (Migrated from main.css)
   =================================== */

/* ===================================
   WOOCOMMERCE — Boutique
   =================================== */

/* ---------- Layout général ---------- */
.woocommerce-content-wrapper {
    background: #f4f7fb;
    padding: 0 0 5rem;
    min-height: 70vh;
}

/* Hero bannière boutique */
.wc-shop-hero {
    background: linear-gradient(135deg, var(--dark-color) 0%, #1a3a5c 100%);
    padding: 3rem 0 2.5rem;
    margin-bottom: 2.5rem;
    text-align: center;
}
.wc-shop-hero h1 {
    color: #fff;
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 0.4rem;
    letter-spacing: -0.02em;
}
.wc-shop-hero p {
    color: rgba(255,255,255,0.65);
    font-size: 1rem;
    margin: 0;
}

/* ---------- Breadcrumb ---------- */
.woocommerce .woocommerce-breadcrumb {
    font-size: 0.8rem;
    color: #94a3b8;
    margin-bottom: 1.25rem;
    padding: 0;
}
.woocommerce .woocommerce-breadcrumb a {
    color: #64748b;
    text-decoration: none;
    transition: color 0.15s;
}
.woocommerce .woocommerce-breadcrumb a:hover { color: var(--primary-color); }

/* ---------- Barre résultats + tri ---------- */
.woocommerce-page .woocommerce-result-count { font-size: 0.85rem; color: #64748b; margin: 0; }
.woocommerce-page .woocommerce-ordering select {
    border: 1px solid #dde3ed;
    border-radius: 8px;
    padding: 0.45rem 0.85rem;
    font-size: 0.85rem;
    background: #fff;
    color: var(--dark-color);
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0,0,0,.05);
}

/* ---------- Grille de produits ---------- */
body.woocommerce ul.products,
body.woocommerce-page ul.products,
body.woocommerce-shop ul.products {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 1.5rem !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    float: none !important;
    width: 100% !important;
}
/* Neutralise le clearfix ::before/::after parasites (items fantômes dans le grid) */
body.woocommerce ul.products::before,
body.woocommerce ul.products::after,
body.woocommerce-page ul.products::before,
body.woocommerce-page ul.products::after {
    display: none !important;
}
/* Neutralise float + width de woocommerce-layout.css */
body.woocommerce ul.products li.product,
body.woocommerce-page ul.products li.product,
body.woocommerce-shop ul.products li.product,
body.woocommerce ul.products.columns-3 li.product,
body.woocommerce-page ul.products.columns-3 li.product {
    float: none !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    clear: none !important;
    margin: 0 !important;
}
@media (max-width: 1024px) {
    body.woocommerce ul.products,
    body.woocommerce-page ul.products { grid-template-columns: repeat(2,1fr) !important; }
}
@media (max-width: 600px) {
    body.woocommerce ul.products,
    body.woocommerce-page ul.products { grid-template-columns: 1fr !important; }
}

/* ---------- Carte produit ---------- */
.woocommerce ul.products li.product {
    background: #fff !important;
    border: 1px solid #e2eaf4 !important;
    border-radius: 14px !important;
    padding: 0 !important;
    margin: 0 !important;
    width: auto !important;
    float: none !important;
    overflow: hidden;
    display: flex !important;
    flex-direction: column;
    position: relative;
    transition: box-shadow 0.25s ease, transform 0.25s ease;
    cursor: pointer;
}
.woocommerce ul.products li.product:hover {
    box-shadow: 0 12px 32px rgba(41,128,185,0.15);
    transform: translateY(-5px);
}

/* Bande colorée en haut selon catégorie */
.woocommerce ul.products li.product::before {
    content: '';
    display: block;
    height: 4px;
    background: linear-gradient(90deg, var(--primary-color), #1abc9c);
    width: 100%;
}

/* Image */
.woocommerce ul.products li.product a img {
    width: 100% !important;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    object-position: top center;
    display: block;
    border-bottom: 1px solid #f0f4f9;
    transition: transform 0.3s ease;
}
.woocommerce ul.products li.product:hover a img { transform: scale(1.02); }

/* Badge "Gratuit" produit à 0€ */
.wc-badge-free {
    position: absolute;
    top: 12px;
    right: 12px;
    background: #22c55e;
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 0.2rem 0.65rem;
    border-radius: 20px;
    z-index: 2;
    box-shadow: 0 2px 6px rgba(34,197,94,0.35);
}

/* Badge promo */
.woocommerce span.onsale {
    background: #ef4444 !important;
    border-radius: 20px !important;
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    padding: 0.2rem 0.65rem !important;
    top: 12px !important;
    left: 12px !important;
    min-height: auto !important;
    min-width: auto !important;
    line-height: 1.6 !important;
    box-shadow: 0 2px 6px rgba(239,68,68,0.35) !important;
}

/* Titre produit */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product .woocommerce-loop-category__title {
    font-size: 0.98rem !important;
    font-weight: 700 !important;
    color: var(--dark-color) !important;
    padding: 1rem 1.25rem 0.35rem !important;
    margin: 0 !important;
    line-height: 1.4;
}

/* Badge type catégorie (ajouté via PHP) */
.wc-cat-badge {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    padding: 0.15rem 0.55rem;
    border-radius: 4px;
    margin: 0 1.25rem 0.5rem;
}
.wc-cat-badge--prestashop { background: #fff3cd; color: #92650a; }
.wc-cat-badge--wordpress  { background: #e8f0fe; color: #1a56db; }
.wc-cat-badge--theme      { background: #f3e8ff; color: #7c3aed; }

/* Description courte */
.woocommerce ul.products li.product .woocommerce-product-details__short-description {
    padding: 0 1.25rem 0.75rem;
    font-size: 0.82rem;
    color: #64748b;
    line-height: 1.55;
    flex: 1;
}

/* Prix */
.woocommerce ul.products li.product .price {
    display: block !important;
    padding: 0 1.25rem 0.5rem !important;
    font-size: 1.15rem !important;
    font-weight: 800 !important;
    color: var(--primary-color) !important;
}
.woocommerce ul.products li.product .price ins { text-decoration: none; }
.woocommerce ul.products li.product .price del { color: #94a3b8; font-size: 0.88rem; font-weight: 400; }
/* Prix gratuit en vert */
.woocommerce ul.products li.product .price bdi:only-child {
    color: var(--primary-color);
}

/* Bouton */
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product a.button {
    display: block !important;
    margin: 0.5rem 1.25rem 1.25rem !important;
    background: var(--primary-color) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 0.7rem 1rem !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    text-align: center !important;
    text-decoration: none !important;
    transition: background 0.2s ease, transform 0.2s ease !important;
    cursor: pointer !important;
    width: auto !important;
    float: none !important;
    letter-spacing: 0.01em;
}
.woocommerce ul.products li.product .button:hover,
.woocommerce ul.products li.product a.button:hover {
    background: var(--dark-color) !important;
    transform: translateY(-1px) !important;
    color: #fff !important;
}

/* ---------- Catégories (page principale) ---------- */
.woocommerce ul.products li.product-category {
    text-align: center;
}
.woocommerce ul.products li.product-category::before { display: none; }
.woocommerce ul.products li.product-category a {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1.5rem 1rem;
    height: 100%;
    text-decoration: none;
}
.woocommerce ul.products li.product-category a img {
    aspect-ratio: 1;
    width: 80px !important;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 0.85rem;
    border: 3px solid #e2eaf4;
}
.woocommerce ul.products li.product-category h2 { font-size: 1rem; font-weight: 700; color: var(--dark-color); margin-bottom: 0.25rem; }
.woocommerce ul.products li.product-category mark { background: none; color: #94a3b8; font-size: 0.8rem; font-weight: 400; }

/* ---------- Page produit ---------- */
.woocommerce div.product {
    background: #fff;
    border-radius: 16px;
    padding: 2.5rem;
    border: 1px solid #e2eaf4;
    box-shadow: 0 4px 20px rgba(0,0,0,.04);
}

.woocommerce div.product .product_title {
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--dark-color);
    margin-bottom: 0.5rem;
    letter-spacing: -0.02em;
    line-height: 1.25;
}

/* Prix page produit */
.woocommerce div.product p.price,
.woocommerce div.product span.price {
    font-size: 2rem;
    font-weight: 800;
    color: var(--primary-color);
    display: block;
    margin: 0.5rem 0 1.25rem;
}

/* Bouton CTA page produit */
.woocommerce div.product form.cart {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}
.woocommerce div.product form.cart .button {
    background: var(--primary-color) !important;
    color: #fff !important;
    border-radius: 10px !important;
    padding: 0.85rem 2.5rem !important;
    font-weight: 700 !important;
    font-size: 1rem !important;
    border: none !important;
    cursor: pointer !important;
    transition: background 0.2s ease, transform 0.2s ease !important;
    letter-spacing: 0.01em;
    box-shadow: 0 4px 14px rgba(41,128,185,0.3);
}
.woocommerce div.product form.cart .button:hover {
    background: var(--dark-color) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 18px rgba(44,62,80,0.25) !important;
}

/* Bloc trust badges page produit */
.wc-trust-badges {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
    margin: 1.25rem 0;
    padding: 1rem 1.25rem;
    background: #f8fafc;
    border-radius: 10px;
    border: 1px solid #e8edf3;
}
.wc-trust-badge {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    color: #475569;
    font-weight: 500;
}
.wc-trust-badge i { color: #22c55e; font-size: 0.9rem; }

/* Onglets produit */
.woocommerce div.product .woocommerce-tabs {
    margin-top: 2rem;
}
.woocommerce div.product .woocommerce-tabs ul.tabs {
    border-bottom: 2px solid #e8edf3;
    padding: 0 !important;
    margin-bottom: 0 !important;
    background: none !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs::before { display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li {
    border: none !important;
    border-radius: 0 !important;
    background: none !important;
    margin: 0 !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
    color: #64748b;
    font-size: 0.9rem;
    font-weight: 500;
    padding: 0.75rem 1.25rem;
    display: block;
    transition: color 0.15s;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
    border-bottom: 2px solid var(--primary-color) !important;
    margin-bottom: -2px !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--primary-color); font-weight: 700; }
.woocommerce div.product .woocommerce-tabs .panel {
    background: #fff;
    border: 1px solid #e8edf3;
    border-top: none;
    border-radius: 0 0 10px 10px;
    padding: 1.5rem !important;
    margin: 0 !important;
}

/* ---------- Messages ---------- */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
    border-radius: 10px !important;
    border-top: none !important;
    border-left: 4px solid var(--primary-color) !important;
    background: #eff8ff !important;
    color: var(--dark-color) !important;
    padding: 1rem 1.25rem !important;
    margin-bottom: 1.5rem !important;
    box-shadow: none !important;
}
.woocommerce-error { border-left-color: #ef4444 !important; background: #fff5f5 !important; }
.woocommerce-info  { border-left-color: #f59e0b !important; background: #fffbeb !important; }

/* ---------- Panier ---------- */
.woocommerce table.shop_table {
    border: 1px solid #e2eaf4 !important;
    border-radius: 12px;
    overflow: hidden;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    background: #fff;
}
.woocommerce table.shop_table th {
    background: #f8fafc;
    color: #475569;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    padding: 0.9rem 1rem;
    font-weight: 700;
    border-bottom: 1px solid #e2eaf4 !important;
}
.woocommerce table.shop_table td {
    padding: 1rem !important;
    border-bottom: 1px solid #f0f4f9 !important;
    vertical-align: middle;
}
.woocommerce .cart-collaterals .cart_totals {
    background: #fff;
    border: 1px solid #e2eaf4;
    border-radius: 12px;
    padding: 1.5rem;
}

/* ---------- Checkout ---------- */
.woocommerce form .form-row label {
    font-size: 0.85rem;
    font-weight: 600;
    color: #475569;
    margin-bottom: 0.35rem;
    display: block;
}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
    border: 1px solid #dde3ed !important;
    border-radius: 8px !important;
    padding: 0.6rem 0.85rem !important;
    font-size: 0.9rem !important;
    transition: border-color 0.15s !important;
    box-shadow: none !important;
    width: 100%;
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus {
    border-color: var(--primary-color) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(41,128,185,0.12) !important;
}

/* ---------- Mon compte — Page connexion/inscription ---------- */

/* Fond page */
body.woocommerce-account:not(.logged-in) #main-content {
    background: #f4f7fa;
}

/* Titre "Mon compte" */
body.woocommerce-account:not(.logged-in) .woocommerce > h2:first-of-type,
body.woocommerce-account:not(.logged-in) .woocommerce > .entry-header h1,
body.woocommerce-account:not(.logged-in) .page-title {
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    font-weight: 800;
    color: var(--dark-color);
    letter-spacing: -0.02em;
    margin-bottom: 2.5rem;
}

/* Grille 2 colonnes login / register
   — ID #customer_login (spécificité 1,0,0) écrase les règles float WC */
#customer_login {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 2rem !important;
    width: 100% !important;
    align-items: start !important;
}
/* Neutraliser le clearfix WC (::before/::after deviendraient des grid items) */
#customer_login::before,
#customer_login::after {
    display: none !important;
}

/* Chaque colonne = carte — annuler float/width WC */
#customer_login .col-1,
#customer_login .col-2,
#customer_login .u-column1,
#customer_login .u-column2 {
    float: none !important;
    clear: none !important;
    width: 100% !important;
    margin: 0 !important;
    background: #fff !important;
    border: 1px solid #e4eaf2 !important;
    border-radius: 20px !important;
    padding: 2.25rem 2rem !important;
    box-shadow: 0 8px 32px rgba(44,62,80,0.07) !important;
}

/* Titres "Se connecter" / "S'inscrire" */
#customer_login h2 {
    font-size: 1.15rem !important;
    font-weight: 800 !important;
    color: var(--dark-color) !important;
    letter-spacing: -0.01em !important;
    margin: 0 0 1.75rem !important;
    padding-bottom: 1.25rem !important;
    border-bottom: 2px solid #f1f5f9 !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.6rem !important;
}
/* Icône devant chaque titre */
#customer_login .u-column1 h2::before,
#customer_login .col-1 h2::before {
    content: "\f2f6"; /* fa-sign-in-alt */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 0.95rem;
    color: var(--primary-color);
}
#customer_login .u-column2 h2::before,
#customer_login .col-2 h2::before {
    content: "\f234"; /* fa-user-plus */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 0.95rem;
    color: var(--primary-color);
}

/* Labels */
.woocommerce-account:not(.logged-in) .woocommerce-form label,
.woocommerce-account:not(.logged-in) .woocommerce form .form-row label {
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    color: #64748b !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    margin-bottom: 0.4rem !important;
    display: block !important;
}

/* Inputs */
.woocommerce-account:not(.logged-in) .woocommerce-form input[type="text"],
.woocommerce-account:not(.logged-in) .woocommerce-form input[type="email"],
.woocommerce-account:not(.logged-in) .woocommerce-form input[type="password"],
.woocommerce-account:not(.logged-in) .woocommerce form .form-row input.input-text {
    width: 100% !important;
    height: 50px !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 12px !important;
    padding: 0 1rem !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 0.9rem !important;
    color: var(--dark-color) !important;
    background: #f8fafc !important;
    transition: border-color 0.18s, box-shadow 0.18s, background 0.18s !important;
    box-shadow: none !important;
    outline: none !important;
}
.woocommerce-account:not(.logged-in) .woocommerce-form input:focus,
.woocommerce-account:not(.logged-in) .woocommerce form .form-row input.input-text:focus {
    border-color: var(--primary-color) !important;
    background: #fff !important;
    box-shadow: 0 0 0 3px rgba(41,128,185,0.12) !important;
}

/* Ligne "Se souvenir de moi" */
.woocommerce-account:not(.logged-in) .woocommerce-form-login__rememberme {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    font-size: 0.85rem !important;
    color: #64748b !important;
    margin: 0.75rem 0 !important;
}
.woocommerce-account:not(.logged-in) .woocommerce-form-login__rememberme input[type="checkbox"] {
    width: 16px !important;
    height: 16px !important;
    accent-color: var(--primary-color) !important;
    cursor: pointer !important;
    margin: 0 !important;
}

/* Bouton Se connecter */
.woocommerce-account:not(.logged-in) .woocommerce-form-login .woocommerce-form-login__submit,
.woocommerce-account:not(.logged-in) .woocommerce-form-register .woocommerce-form-register__submit {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 52px !important;
    background: linear-gradient(135deg, var(--primary-color) 0%, #1c6ea4 100%) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 14px !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.01em !important;
    cursor: pointer !important;
    transition: transform 0.2s, box-shadow 0.2s !important;
    box-shadow: 0 6px 22px rgba(41,128,185,0.35) !important;
    margin-top: 1.25rem !important;
}
.woocommerce-account:not(.logged-in) .woocommerce-form-login .woocommerce-form-login__submit:hover,
.woocommerce-account:not(.logged-in) .woocommerce-form-register .woocommerce-form-register__submit:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 32px rgba(41,128,185,0.48) !important;
}

/* Lien "Mot de passe perdu" */
.woocommerce-account:not(.logged-in) .woocommerce-LostPassword a,
.woocommerce-account:not(.logged-in) .lost_password a {
    font-size: 0.8rem !important;
    color: #94a3b8 !important;
    text-decoration: none !important;
    border-bottom: none !important;
    transition: color 0.18s !important;
    display: inline-block !important;
    margin-top: 0.75rem !important;
}
.woocommerce-account:not(.logged-in) .woocommerce-LostPassword a:hover,
.woocommerce-account:not(.logged-in) .lost_password a:hover {
    color: var(--primary-color) !important;
    background: none !important;
    padding: 0 !important;
}

/* Texte informatif côté inscription */
.woocommerce-account:not(.logged-in) .woocommerce-privacy-policy-text,
.woocommerce-account:not(.logged-in) .woocommerce-form-register p:not(.form-row) {
    font-size: 0.78rem !important;
    color: #94a3b8 !important;
    line-height: 1.6 !important;
    margin-top: 1rem !important;
}
.woocommerce-account:not(.logged-in) .woocommerce-privacy-policy-text a {
    color: var(--primary-color) !important;
    border-bottom: 1px solid rgba(41,128,185,0.3) !important;
    padding-bottom: 1px !important;
}

/* Espacements form-row */
.woocommerce-account:not(.logged-in) .woocommerce form .form-row {
    margin-bottom: 1rem !important;
    padding: 0 !important;
}
.woocommerce-account:not(.logged-in) .woocommerce form .form-row-wide {
    clear: both !important;
    width: 100% !important;
}

/* Ligne bouton + remember me */
.woocommerce-account:not(.logged-in) .woocommerce-form-login .form-row.form-row-first {
    display: flex !important;
    align-items: center !important;
    gap: 1rem !important;
    flex-wrap: wrap !important;
}

/* Responsive */
@media (max-width: 768px) {
    #customer_login {
        grid-template-columns: 1fr !important;
    }
    #customer_login .col-1,
    #customer_login .col-2,
    #customer_login .u-column1,
    #customer_login .u-column2 {
        padding: 1.5rem 1.25rem !important;
    }
}

/* ---------- Mon compte — Notices WC en pleine largeur avant le layout ---------- */

/* Notices WC en pleine largeur avant le layout */
.woocommerce-account .woocommerce-notices-wrapper {
    width: 100%;
}

/* Wrapper principal : flex pour résister aux éléments injectés par WC */
.woocommerce-account .woocommerce {
    display: flex !important;
    flex-wrap: wrap;
    gap: 2rem;
    align-items: flex-start;
}

/* Tous les enfants directs : pleine largeur par défaut */
.woocommerce-account .woocommerce > * {
    flex: 0 0 100%;
    width: 100%;
}

/* Navigation sidebar */
.woocommerce-account .woocommerce .woocommerce-MyAccount-navigation {
    flex: 0 0 220px !important;
    width: 220px !important;
    order: 1;
}

/* Zone contenu */
.woocommerce-account .woocommerce .woocommerce-MyAccount-content {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    order: 2;
}

.woocommerce-MyAccount-navigation {
    background: #fff;
    border: 1.5px solid #eef1f6;
    border-radius: 14px;
    padding: 1rem;
    position: sticky;
    top: 90px;
    box-shadow: 0 2px 8px rgba(15,23,42,0.05);
}
.woocommerce-MyAccount-navigation ul { list-style: none !important; padding: 0 !important; margin: 0; }
.woocommerce-MyAccount-navigation li a {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.65rem 0.9rem;
    border-radius: 8px;
    color: #475569;
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 500;
    transition: background 0.15s, color 0.15s;
}
.woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-MyAccount-navigation li a:hover {
    background: var(--primary-color);
    color: #fff !important;
}
.woocommerce-MyAccount-content {
    background: transparent;
    padding: 0;
}

/* ---------- Checkboxes WooCommerce ---------- */
.woocommerce form .form-row input.input-checkbox,
.woocommerce-form input[type="checkbox"],
.woocommerce form input[type="checkbox"],
.wc-block-components-checkbox input[type="checkbox"] {
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    min-height: 16px !important;
    max-width: 16px !important;
    max-height: 16px !important;
    accent-color: var(--primary-color) !important;
    cursor: pointer !important;
    vertical-align: middle !important;
    margin: 0 !important;
    transform: none !important;
    flex-shrink: 0 !important;
}

/* ---------- Boutons génériques ---------- */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
    border-radius: 8px !important;
    font-weight: 600 !important;
    transition: background 0.2s ease, transform 0.2s ease !important;
    cursor: pointer !important;
    font-size: 0.9rem !important;
}
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
    background: var(--primary-color) !important;
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(41,128,185,0.25) !important;
}
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover {
    background: var(--dark-color) !important;
    transform: translateY(-1px) !important;
}

/* ---------- Responsive Mon compte ---------- */
@media (max-width: 768px) {
    .woocommerce-account .woocommerce .woocommerce-MyAccount-navigation { flex: 0 0 100% !important; width: 100% !important; position: static; }
    .woocommerce-account .woocommerce .woocommerce-MyAccount-content { flex: 0 0 100% !important; }
    .woocommerce div.product { padding: 1.25rem; }
    .woocommerce div.product .product_title { font-size: 1.4rem; }
}

/* ===================================
   17. WOOCOMMERCE CUSTOM TEMPLATES
   =================================== */

/* ----- Shop hero banner ----- */
.wc-shop-hero { position: relative; overflow: hidden; }
.wc-shop-hero__title { font-size: 2.2rem; font-weight: 800; color: #fff; margin: 0 0 0.6rem; line-height: 1.2; }
.wc-shop-hero__desc  { color: rgba(255,255,255,0.75); font-size: 1.05rem; margin: 0; max-width: 560px; }

/* =============================================
   PRODUCT CARDS (content-product.php)
   ============================================= */

/* Reset WC list styles */
.woocommerce ul.products { list-style: none !important; margin: 0 !important; padding: 0 !important; }
.woocommerce ul.products li.product { margin: 0 !important; padding: 0 !important; float: none !important; width: auto !important; }

/* Grid override */
.woocommerce ul.products.columns-3 {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 1.5rem !important;
}
.woocommerce ul.products.columns-2 {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1.5rem !important;
}

/* Card shell */
.wc-product-card { list-style: none !important; }
.wc-product-card__inner {
    background: #fff;
    border-radius: 16px;
    border: 1.5px solid #e8edf3;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
    transition: transform 0.25s cubic-bezier(.22,1,.36,1), box-shadow 0.25s;
}
.wc-product-card__inner:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 50px rgba(30,64,175,0.13);
    border-color: var(--primary-color);
}

/* Thumb */
.wc-product-card__thumb {
    position: relative;
    display: block;
    overflow: hidden;
    background: linear-gradient(135deg, #f0f4ff 0%, #e8f4fd 100%);
    aspect-ratio: 16/9;
    text-decoration: none;
}
.wc-product-card__img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s cubic-bezier(.22,1,.36,1);
}
.wc-product-card__inner:hover .wc-product-card__img { transform: scale(1.06); }

/* No-image placeholder */
.wc-product-card__no-img {
    display: flex; align-items: center; justify-content: center;
    width: 100%; height: 100%;
    font-size: 2.5rem; color: #bdd3f0;
}

/* Overlay on hover */
.wc-product-card__overlay {
    position: absolute; inset: 0;
    background: rgba(15,23,42,0.45);
    display: flex; align-items: center; justify-content: center;
    opacity: 0;
    transition: opacity 0.25s;
    backdrop-filter: blur(2px);
}
.wc-product-card__inner:hover .wc-product-card__overlay { opacity: 1; }
.wc-product-card__overlay-btn {
    display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.55rem 1.25rem;
    background: #fff;
    color: var(--dark-color);
    border-radius: 999px;
    font-size: 0.82rem; font-weight: 700;
    transform: translateY(8px);
    transition: transform 0.25s;
}
.wc-product-card__inner:hover .wc-product-card__overlay-btn { transform: translateY(0); }

/* Badges */
.wc-product-card__badges {
    position: absolute;
    top: 0.6rem; left: 0.6rem;
    display: flex; flex-wrap: wrap; gap: 0.3rem;
    z-index: 3;
}

/* Badge base */
.wc-badge {
    display: inline-flex; align-items: center;
    padding: 0.2em 0.6em;
    border-radius: 999px;
    font-size: 0.68rem; font-weight: 700;
    line-height: 1.4;
    text-transform: uppercase; letter-spacing: 0.04em;
}
.wc-badge--free       { background: #22c55e; color: #fff; }
.wc-badge--sale       { background: #ef4444; color: #fff; }
.wc-badge--cat        { background: rgba(15,23,42,0.8); color: #fff; backdrop-filter: blur(6px); }
.wc-badge--prestashop { background: #df6900; }
.wc-badge--wordpress  { background: #2271b1; }
.wc-badge--theme      { background: #7c3aed; }

/* Body */
.wc-product-card__body {
    padding: 1.1rem 1.25rem 0.5rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.wc-product-card__meta {
    display: flex; gap: 0.5rem; flex-wrap: wrap;
}
.wc-product-card__meta-item {
    font-size: 0.72rem; color: #94a3b8; font-weight: 500;
    display: inline-flex; align-items: center; gap: 0.25rem;
}
.wc-product-card__title-link { text-decoration: none; color: inherit; }
.wc-product-card__title {
    font-size: 1rem; font-weight: 700;
    color: var(--dark-color);
    margin: 0;
    line-height: 1.35;
    transition: color 0.15s;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.wc-product-card__title-link:hover .wc-product-card__title { color: var(--primary-color); }
.wc-product-card__excerpt {
    font-size: 0.8rem; color: #64748b;
    margin: 0; line-height: 1.55;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Footer */
.wc-product-card__footer {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0.9rem 1.25rem;
    border-top: 1px solid #f1f5f9;
    gap: 0.5rem;
    margin-top: auto;
}
.wc-product-card__price-wrap .wc-product-card__price .amount,
.wc-product-card__price-wrap .woocommerce-Price-amount {
    font-size: 1.15rem !important;
    font-weight: 800 !important;
    color: var(--primary-color) !important;
}
.wc-product-card__price-free {
    font-size: 1.05rem; font-weight: 800;
    color: #22c55e;
}
.wc-product-card__cta {
    display: inline-flex; align-items: center; gap: 0.35rem;
    padding: 0.48rem 1rem;
    background: var(--primary-color);
    color: #fff !important;
    border-radius: 8px;
    font-size: 0.82rem; font-weight: 700;
    text-decoration: none !important;
    transition: background 0.18s, transform 0.15s;
    white-space: nowrap;
    flex-shrink: 0;
}
.wc-product-card__cta:hover { background: #1d4ed8; transform: translateY(-1px); }

@media (max-width: 900px) {
    .woocommerce ul.products.columns-3 { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 540px) {
    .woocommerce ul.products.columns-3,
    .woocommerce ul.products.columns-2 { grid-template-columns: 1fr !important; }
}

/* =============================================
   SINGLE PRODUCT PAGE
   ============================================= */

/* Topbar badges */
.wc-single-product__topbar {
    display: flex; align-items: center; gap: 0.6rem;
    padding-bottom: 1.25rem; margin-bottom: 1.5rem;
    border-bottom: 1px solid #f1f5f9;
}
.wc-single-product__type {
    display: inline-flex; align-items: center; gap: 0.4rem;
    font-size: 0.8rem; color: #64748b; font-weight: 500;
}

/* Flex 2-column layout — works WITH WooCommerce's own flex */
.woocommerce div.product {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0 !important;
    align-items: flex-start !important;
}

/* Full-width elements */
.wc-single-product__topbar,
.woocommerce div.product .woocommerce-tabs,
.woocommerce div.product .up-sells,
.woocommerce div.product .related.products {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* Gallery — left column */
.woocommerce div.product .woocommerce-product-gallery {
    flex: 0 0 46% !important;
    width: 46% !important;
    max-width: 46% !important;
    margin: 0 !important;
    float: none !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    border: 1.5px solid #e8edf3 !important;
    position: sticky !important;
    top: 90px !important;
    align-self: flex-start !important;
}

/* Summary — right column */
.woocommerce div.product .summary.entry-summary {
    flex: 0 0 54% !important;
    width: 54% !important;
    max-width: 54% !important;
    float: none !important;
    padding-left: 3.5rem !important;
    box-sizing: border-box !important;
}

/* Tabs full width after 2-col section */
.woocommerce div.product .woocommerce-tabs { margin-top: 3rem !important; }

/* Product title */
.woocommerce div.product .product_title {
    font-size: 1.9rem !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    margin: 0 0 0.75rem !important;
    color: var(--dark-color) !important;
}

/* Price */
.woocommerce div.product p.price,
.woocommerce div.product span.price {
    display: block !important;
    font-size: 2.6rem !important;
    font-weight: 800 !important;
    color: var(--primary-color) !important;
    margin: 1rem 0 1.25rem !important;
    line-height: 1 !important;
}
.woocommerce div.product p.price .amount,
.woocommerce div.product span.price .amount {
    font-size: inherit !important;
    color: inherit !important;
}

/* Short description */
.woocommerce div.product .woocommerce-product-details__short-description {
    font-size: 0.95rem !important;
    line-height: 1.7 !important;
    color: #475569 !important;
    margin-bottom: 1.5rem !important;
    padding-bottom: 1.5rem !important;
    border-bottom: 1px solid #f1f5f9 !important;
}

/* Quantity + add to cart */
.woocommerce div.product form.cart {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.75rem !important;
    margin-bottom: 1.5rem !important;
}
.woocommerce div.product .quantity { display: none !important; } /* hidden for digital */
.woocommerce div.product .single_add_to_cart_button,
.woocommerce div.product .button.single_add_to_cart_button {
    display: block !important;
    width: 100% !important;
    padding: 1rem 1.5rem !important;
    background: var(--primary-color) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 12px !important;
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    text-align: center !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    transition: background 0.2s, box-shadow 0.2s, transform 0.15s !important;
    box-shadow: 0 6px 22px rgba(30,64,175,0.35) !important;
    margin: 0 !important;
}
.woocommerce div.product .single_add_to_cart_button:hover {
    background: #1d4ed8 !important;
    box-shadow: 0 10px 30px rgba(30,64,175,0.45) !important;
    transform: translateY(-2px) !important;
}

/* Meta */
.woocommerce div.product .product_meta {
    margin-top: 1.25rem !important;
    padding-top: 1.25rem !important;
    border-top: 1px solid #f1f5f9 !important;
    font-size: 0.82rem !important;
    color: #94a3b8 !important;
}
/* Liens meta produit — stylisés dans "2b. LIENS — SYSTÈME GLOBAL" */

/* Tabs redesign */
.woocommerce div.product .woocommerce-tabs ul.tabs {
    border-bottom: 2px solid #e8edf3 !important;
    padding: 0 !important; display: flex !important;
    list-style: none !important; margin: 0 !important;
    background: transparent !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs::before { display: none !important; }
.woocommerce div.product .woocommerce-tabs ul.tabs li {
    background: transparent !important; border: none !important;
    border-radius: 0 !important; margin: 0 !important; padding: 0 !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after { display: none !important; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
    display: block !important; padding: 0.8rem 1.5rem !important;
    font-weight: 600 !important; font-size: 0.9rem !important;
    color: #64748b !important; text-decoration: none !important;
    border-bottom: 3px solid transparent !important; margin-bottom: -2px !important;
    transition: color 0.15s, border-color 0.15s !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a,
.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover {
    color: var(--primary-color) !important;
    border-bottom-color: var(--primary-color) !important;
}
.woocommerce div.product .woocommerce-tabs .panel {
    border: none !important; padding: 2rem 0 !important;
    background: transparent !important; margin: 0 !important;
}

/* Responsive */
@media (max-width: 900px) {
    .woocommerce div.product .woocommerce-product-gallery {
        flex: 0 0 100% !important; width: 100% !important; max-width: 100% !important;
        position: static !important; margin-bottom: 1.5rem !important;
    }
    .woocommerce div.product .summary.entry-summary {
        flex: 0 0 100% !important; width: 100% !important; max-width: 100% !important;
        padding-left: 0 !important;
    }
}

/* =============================================
   TRUST BADGES (single product)
   ============================================= */
.wc-trust-badges {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem;
    padding: 1.25rem;
    background: #f8fafc;
    border-radius: 12px;
    border: 1px solid #e8edf3;
    margin: 1rem 0;
}
.wc-trust-badge {
    display: flex; align-items: center; gap: 0.5rem;
    font-size: 0.78rem; font-weight: 600; color: #374151;
}
.wc-trust-badge i { color: #22c55e; font-size: 0.95rem; width: 16px; text-align: center; }

/* =============================================
   EMPTY CART
   ============================================= */
.wc-empty-cart {
    text-align: center;
    padding: 5rem 2rem 4rem;
    max-width: 520px;
    margin: 0 auto;
}
.wc-empty-cart__icon {
    width: 110px;
    height: 110px;
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 2rem;
    border: 2px solid #bfdbfe;
    box-shadow: 0 8px 24px rgba(41,128,185,0.12);
}
.wc-empty-cart__icon i { font-size: 2.75rem; color: var(--primary-color); }
.wc-empty-cart__title {
    font-size: 1.5rem;
    font-weight: 800;
    margin: 0 0 0.75rem;
    color: var(--dark-color);
    letter-spacing: -0.02em;
}
.wc-empty-cart__text  { color: #64748b; margin: 0 0 2rem; font-size: 0.95rem; line-height: 1.7; }
.wc-empty-cart__actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin-bottom: 3rem; }
.btn--outline {
    background: transparent !important;
    border: 2px solid var(--primary-color) !important;
    color: var(--primary-color) !important;
    box-shadow: none !important;
}
.btn--outline:hover { background: var(--primary-color) !important; color: #fff !important; }

.wc-empty-cart__suggestions {
    text-align: left;
    border-top: 1px solid #e8edf3;
    padding-top: 2rem;
}
.wc-empty-cart__suggestions-label {
    font-size: 0.72rem;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin: 0 0 1rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.wc-empty-cart__suggestions-label i { color: var(--primary-color); }
.wc-empty-cart__suggestions-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0;
    background: #f8fafc;
    border-radius: 14px;
    border: 1px solid #e8edf3;
    overflow: hidden;
}
.wc-empty-cart__suggestions-list li + li { border-top: 1px solid #f1f5f9; }
.wc-empty-cart__suggestions-list li a {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-radius: 0;
    text-decoration: none;
    color: var(--dark-color);
    transition: background 0.15s, color 0.15s;
}
.wc-empty-cart__suggestions-list li a:hover { background: #fff; color: var(--primary-color); }
.wc-empty-cart__suggestion-thumb {
    width: 56px;
    height: 56px;
    border-radius: 10px;
    overflow: hidden;
    flex-shrink: 0;
    border: 1px solid #e8edf3;
}
.wc-empty-cart__suggestion-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wc-empty-cart__suggestion-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.2rem; }
.wc-empty-cart__suggestion-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--dark-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.wc-empty-cart__suggestion-price .amount { font-size: 0.8rem; color: var(--primary-color); font-weight: 700; }
.wc-empty-cart__suggestions-list li a > .fas { color: #d1d8e0; font-size: 0.75rem; flex-shrink: 0; }

/* =============================================
   "AJOUTÉ AU PANIER" NOTIFICATION
   ============================================= */

/* =============================================
   CART PILL — INDICATEUR DISCRET PANIER
   ============================================= */

@keyframes wcPillIn {
    from { opacity: 0; transform: translateY(16px) scale(0.88); }
    to   { opacity: 1; transform: translateY(0)    scale(1);    }
}
@keyframes wcPillBounce {
    0%, 100% { transform: scale(1); }
    40%       { transform: scale(1.18); }
    70%       { transform: scale(0.94); }
}

/* ---- PILL : conteneur principal ---- */
.wc-cart-pill {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    z-index: 9989;
    display: none;
    align-items: center;
    gap: 0.875rem;
    background: linear-gradient(135deg, #2c3e50 0%, #1a2a3a 100%);
    color: #fff;
    border: none;
    border-radius: 20px;
    padding: 0.75rem 1.1rem 0.75rem 0.85rem;
    font-family: 'Poppins', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    box-shadow:
        0 12px 40px rgba(26,42,58,0.35),
        0 4px 12px rgba(26,42,58,0.2),
        inset 0 1px 0 rgba(255,255,255,0.07);
    transition: transform 0.25s cubic-bezier(0.34,1.2,0.64,1),
                box-shadow 0.25s ease;
    cursor: pointer;
    white-space: nowrap;
}

.wc-cart-pill--visible {
    display: flex;
    animation: wcPillIn 0.42s cubic-bezier(0.34,1.2,0.64,1) forwards;
}

.wc-cart-pill:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow:
        0 20px 56px rgba(26,42,58,0.4),
        0 6px 18px rgba(26,42,58,0.25),
        inset 0 1px 0 rgba(255,255,255,0.1);
    color: #fff;
    text-decoration: none;
}

/* ---- Icône + badge ---- */
.wc-cart-pill__icon-wrap {
    position: relative;
    width: 40px;
    height: 40px;
    background: rgba(41,128,185,0.22);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.2s;
}
.wc-cart-pill:hover .wc-cart-pill__icon-wrap {
    background: rgba(41,128,185,0.35);
}
.wc-cart-pill__icon-wrap svg {
    width: 18px;
    height: 18px;
    color: #60b4f0;
    flex-shrink: 0;
}

/* Badge compteur */
.wc-cart-pill__count {
    position: absolute;
    top: -7px;
    right: -7px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-color);
    color: #fff;
    border-radius: 50%;
    width: 22px;
    height: 22px;
    font-size: 0.68rem;
    font-weight: 800;
    line-height: 1;
    border: 2px solid #1a2a3a;
    box-shadow: 0 2px 6px rgba(41,128,185,0.5);
}
/* Bounce quand le count change (class ajoutée par JS) */
.wc-cart-pill__count--bounce {
    animation: wcPillBounce 0.45s ease forwards;
}

/* ---- Texte ---- */
.wc-cart-pill__body {
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
    min-width: 0;
}
.wc-cart-pill__label {
    font-size: 0.7rem;
    font-weight: 500;
    color: rgba(255,255,255,0.55);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    line-height: 1;
}
.wc-cart-pill__total {
    font-size: 1rem;
    font-weight: 800;
    color: #fff;
    line-height: 1.2;
    letter-spacing: -0.01em;
}

/* ---- Flèche ---- */
.wc-cart-pill__arrow {
    width: 16px;
    height: 16px;
    color: rgba(255,255,255,0.3);
    flex-shrink: 0;
    transition: transform 0.2s, color 0.2s;
}
.wc-cart-pill:hover .wc-cart-pill__arrow {
    transform: translateX(3px);
    color: rgba(255,255,255,0.7);
}

/* ---- Mobile ---- */
@media (max-width: 480px) {
    .wc-cart-pill {
        bottom: 1rem;
        right: 1rem;
        border-radius: 16px;
        padding: 0.6rem 0.9rem 0.6rem 0.7rem;
        gap: 0.65rem;
    }
    .wc-cart-pill__icon-wrap {
        width: 36px;
        height: 36px;
        border-radius: 10px;
    }
    .wc-cart-pill__icon-wrap svg { width: 16px; height: 16px; }
    .wc-cart-pill__total { font-size: 0.9rem; }
}

/* ---- Sticky ATC bar active → remonter ---- */
body.wc-sticky-atc-active .wc-cart-pill {
    bottom: calc(80px + 1.25rem);
}
@media (max-width: 480px) {
    body.wc-sticky-atc-active .wc-cart-pill {
        bottom: calc(80px + 0.75rem);
    }
}

@media (prefers-reduced-motion: reduce) {
    .wc-cart-pill--visible { animation: none; }
    .wc-cart-pill:hover    { transform: none; }
}

/* =============================================
   CART TOAST — NOTIFICATION FLOTTANTE
   ============================================= */

@keyframes wcToastIn {
    from { opacity: 0; transform: translateX(110%) scale(0.92); }
    to   { opacity: 1; transform: translateX(0)   scale(1);    }
}
@keyframes wcToastOut {
    from { opacity: 1; transform: translateX(0)   scale(1);    }
    to   { opacity: 0; transform: translateX(110%) scale(0.92); }
}
@keyframes wcToastProgress {
    from { width: 100%; }
    to   { width: 0%;   }
}

/* Conteneur fixe bottom-right */
.woocommerce-notices-wrapper {
    position: fixed !important;
    bottom: 2rem !important;
    right: 2rem !important;
    top: auto !important;
    left: auto !important;
    z-index: 99999 !important;
    max-width: 400px !important;
    width: calc(100vw - 4rem) !important;
    margin: 0 !important;
    padding: 0 !important;
    pointer-events: none;
}

/* Chaque carte toast */
.woocommerce-notices-wrapper .woocommerce-message,
.woocommerce-notices-wrapper .woocommerce-error,
.woocommerce-notices-wrapper .woocommerce-info {
    pointer-events: all;
    background: #fff !important;
    border: none !important;
    border-radius: 16px !important;
    box-shadow: 0 24px 64px rgba(15,23,42,0.16), 0 4px 16px rgba(15,23,42,0.06) !important;
    padding: 0 !important;
    margin: 0 0 0.75rem !important;
    overflow: hidden !important;
    position: relative !important;
    animation: wcToastIn 0.42s cubic-bezier(0.34,1.36,0.64,1) forwards !important;
    list-style: none !important;
}
.woocommerce-notices-wrapper .woocommerce-message { border-left: 4px solid #22c55e !important; }
.woocommerce-notices-wrapper .woocommerce-error   { border-left: 4px solid #ef4444 !important; }
.woocommerce-notices-wrapper .woocommerce-info    { border-left: 4px solid #3b82f6 !important; }

/* Supprimer le ::before WC qui superposait l'icône */
.woocommerce-notices-wrapper .woocommerce-message::before,
.woocommerce-notices-wrapper .woocommerce-error::before,
.woocommerce-notices-wrapper .woocommerce-info::before { display: none !important; }

/* Corps du toast (injecté par JS) */
.wc-toast-body {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    padding: 1.1rem 1.25rem 0.6rem;
    position: relative;
}
.wc-toast-icon {
    width: 36px; height: 36px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    margin-top: 1px;
}
.wc-toast-icon--success { background: linear-gradient(135deg,#22c55e,#16a34a); color: #fff; }
.wc-toast-icon--error   { background: linear-gradient(135deg,#ef4444,#dc2626); color: #fff; }
.wc-toast-icon--info    { background: linear-gradient(135deg,#3b82f6,#1d4ed8); color: #fff; }
.wc-toast-icon svg { width: 17px; height: 17px; stroke-width: 2.5; }

.wc-toast-text {
    flex: 1;
    font-size: 0.875rem;
    font-weight: 500;
    color: #0f172a;
    line-height: 1.5;
    padding-right: 1.75rem;
}
.wc-toast-text strong { font-weight: 700; color: #0f172a; }

/* Bouton fermer */
.wc-toast-close {
    position: absolute; top: 0.7rem; right: 0.8rem;
    background: none; border: none; cursor: pointer;
    font-size: 1.1rem; color: #94a3b8; line-height: 1;
    padding: 0.2rem 0.35rem; border-radius: 6px;
    transition: color 0.15s, background 0.15s;
    font-family: sans-serif;
}
.wc-toast-close:hover { color: #0f172a; background: #f1f5f9; }

/* Bouton CTA "Voir le panier" */
.wc-toast-actions { padding: 0 1.25rem 1rem; }
.wc-toast-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    width: 100%;
    background: linear-gradient(135deg,#3b82f6,#1d4ed8) !important;
    color: #fff !important;
    text-decoration: none !important;
    font-size: 0.875rem !important;
    font-weight: 700 !important;
    padding: 0.7rem 1rem !important;
    border-radius: 10px !important;
    box-shadow: 0 4px 14px rgba(30,64,175,0.32) !important;
    transition: box-shadow 0.2s, transform 0.15s !important;
    border: none !important;
    margin: 0 !important;
    cursor: pointer !important;
}
.wc-toast-cta svg { width: 14px; height: 14px; flex-shrink: 0; }
.wc-toast-cta:hover {
    box-shadow: 0 6px 20px rgba(30,64,175,0.48) !important;
    transform: translateY(-1px);
    color: #fff !important;
}

/* Barre de progression */
.wc-toast-progress { height: 3px; background: #f1f5f9; }
.wc-toast-progress-bar {
    height: 100%;
    background: linear-gradient(90deg,#22c55e,#16a34a);
    animation: wcToastProgress 5s linear forwards;
}

/* Accessibilité : pas d'animation */
@media (prefers-reduced-motion: reduce) {
    .woocommerce-notices-wrapper .woocommerce-message,
    .woocommerce-notices-wrapper .woocommerce-error,
    .woocommerce-notices-wrapper .woocommerce-info { animation: none !important; }
    .wc-toast-progress-bar { animation: none !important; }
}

/* Mobile */
@media (max-width: 480px) {
    .woocommerce-notices-wrapper {
        bottom: 1rem !important; right: 1rem !important;
        max-width: calc(100vw - 2rem) !important;
        width: calc(100vw - 2rem) !important;
    }
}

/* =============================================
   BLOCK CART — PAGE PANIER  (refonte premium)
   ============================================= */

.wc-block-cart,
.wc-block-checkout { font-family: 'Poppins', sans-serif !important; }

/* Fond page panier */
body.woocommerce-cart #main-content {
    background: #f4f7fa;
}

/* Titre de page */
.wc-block-cart .wc-block-cart__main-heading {
    font-size: 1.75rem !important;
    font-weight: 800 !important;
    color: var(--dark-color) !important;
    margin: 2rem 0 1.75rem !important;
    padding-bottom: 1.25rem !important;
    border-bottom: 2px solid #e8edf3 !important;
    letter-spacing: -0.02em !important;
}

/* ---- ZONE PRINCIPALE — carte blanche ---- */
.wc-block-cart__main {
    background: #fff !important;
    border-radius: 18px !important;
    border: 1px solid #e4eaf2 !important;
    box-shadow: 0 4px 24px rgba(44,62,80,0.06) !important;
    overflow: hidden !important;
    padding: 0 !important;
}

/* ---- TABLE DES ARTICLES ---- */
.wc-block-cart-items table {
    border-collapse: collapse !important;
    width: 100% !important;
    border: none !important;
    background: transparent !important;
}

/* En-têtes colonnes */
.wc-block-cart-items table thead {
    background: #f8fafc !important;
}
.wc-block-cart-items table thead tr {
    background: #f8fafc !important;
    border: none !important;
}
.wc-block-cart-items table thead th,
.wc-block-cart-items__header-image,
.wc-block-cart-items__header-product,
.wc-block-cart-items__header-total {
    background: #f8fafc !important;
    color: #94a3b8 !important;
    font-size: 0.68rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.12em !important;
    padding: 1rem 1.25rem !important;
    border: none !important;
    border-bottom: 1px solid #e8edf3 !important;
}
.wc-block-cart-items__header-image { width: 100px !important; }
.wc-block-cart-items__header-total {
    text-align: right !important;
    width: 100px !important;
    padding-right: 1.5rem !important;
}

/* Lignes articles */
.wc-block-cart-items table tbody tr,
.wc-block-cart-items .wc-block-cart-item {
    background: #fff !important;
    border: none !important;
    transition: background 0.18s !important;
}
.wc-block-cart-items table tbody tr:hover,
.wc-block-cart-items .wc-block-cart-item:hover {
    background: #fafbff !important;
}
.wc-block-cart-items table tbody tr td,
.wc-block-cart-items .wc-block-cart-item td {
    border: none !important;
    border-bottom: 1px solid #f1f5f9 !important;
    padding: 1.5rem 1.25rem !important;
    vertical-align: middle !important;
    background: transparent !important;
}
.wc-block-cart-items table tbody tr:last-child td,
.wc-block-cart-items .wc-block-cart-item:last-child td {
    border-bottom: none !important;
}

/* Image produit */
.wc-block-cart-item__image { padding-right: 0 !important; }
.wc-block-cart-item__image img {
    width: 88px !important;
    height: 88px !important;
    border-radius: 12px !important;
    object-fit: cover !important;
    border: 1px solid #eef1f6 !important;
    box-shadow: 0 2px 10px rgba(44,62,80,0.09) !important;
    display: block !important;
}

/* Infos produit */
.wc-block-cart-item__product { padding: 0 1.5rem 0 1rem !important; }

/* Nom produit */
.wc-block-components-product-name,
.wc-block-components-product-name a {
    font-weight: 700 !important;
    font-size: 0.975rem !important;
    color: #1e293b !important;
    text-decoration: none !important;
    display: block !important;
    margin-bottom: 0.3rem !important;
    line-height: 1.4 !important;
    transition: color 0.15s !important;
}
.wc-block-components-product-name a:hover {
    color: var(--primary-color) !important;
    text-decoration: underline !important;
}

/* Cacher la description dans le panier */
.wc-block-components-product-details,
.wc-block-components-product-details__list,
.wc-block-cart-item__product .wc-block-components-product-details {
    display: none !important;
}

/* Prix unitaire */
.wc-block-components-product-price {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.25rem !important;
}
.wc-block-components-product-price .woocommerce-Price-amount {
    font-size: 0.85rem !important;
    font-weight: 500 !important;
    color: #64748b !important;
}

/* Quantité stepper — pill */
.wc-block-components-quantity-selector {
    display: inline-flex !important;
    align-items: center !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 50px !important;
    overflow: hidden !important;
    margin-top: 0.75rem !important;
    height: 38px !important;
    background: #f8fafc !important;
    transition: border-color 0.2s !important;
}
.wc-block-components-quantity-selector:focus-within {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 3px rgba(41,128,185,0.12) !important;
}
.wc-block-components-quantity-selector__button {
    width: 36px !important;
    height: 38px !important;
    background: transparent !important;
    border: none !important;
    color: #475569 !important;
    font-size: 1.1rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: background 0.15s, color 0.15s !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
}
.wc-block-components-quantity-selector__button:hover {
    background: var(--primary-color) !important;
    color: #fff !important;
}
.wc-block-components-quantity-selector input {
    width: 42px !important;
    height: 38px !important;
    border: none !important;
    border-left: 1px solid #e8edf3 !important;
    border-right: 1px solid #e8edf3 !important;
    text-align: center !important;
    font-weight: 700 !important;
    font-size: 0.9rem !important;
    font-family: 'Poppins', sans-serif !important;
    background: #fff !important;
    color: var(--dark-color) !important;
    padding: 0 !important;
    -moz-appearance: textfield !important;
}
.wc-block-components-quantity-selector input::-webkit-inner-spin-button,
.wc-block-components-quantity-selector input::-webkit-outer-spin-button {
    -webkit-appearance: none !important;
}

/* Bouton supprimer */
.wc-block-cart-item__remove-link {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.35rem !important;
    color: #cbd5e1 !important;
    font-size: 0.75rem !important;
    font-weight: 500 !important;
    margin-top: 0.6rem !important;
    text-decoration: none !important;
    transition: color 0.18s !important;
    cursor: pointer !important;
}
.wc-block-cart-item__remove-link:hover { color: #ef4444 !important; }

/* Total colonne droite */
.wc-block-cart-item__total {
    text-align: right !important;
    white-space: nowrap !important;
    padding-right: 1.5rem !important;
}
.wc-block-cart-item__total .woocommerce-Price-amount {
    font-size: 1.1rem !important;
    font-weight: 800 !important;
    color: var(--dark-color) !important;
}

/* Wrap article */
.wc-block-cart-items .wc-block-cart-item__wrap {
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* Bloc cross-sells (sous la table) */
.wp-block-woocommerce-cart-cross-sells-block {
    margin-top: 2rem !important;
}

/* ---- SIDEBAR RÉSUMÉ PANIER ---- */
.wc-block-cart__sidebar .wp-block-woocommerce-cart-order-summary-block,
.wp-block-woocommerce-cart-order-summary-block {
    background: #fff !important;
    border: 1px solid #e4eaf2 !important;
    border-radius: 20px !important;
    padding: 1.75rem 2rem !important;
    position: sticky !important;
    top: 100px !important;
    box-shadow: 0 8px 32px rgba(44,62,80,0.09) !important;
}

/* Titre sidebar */
.wp-block-woocommerce-cart-order-summary-heading-block h2,
.wc-block-cart__sidebar h2 {
    font-size: 1.05rem !important;
    font-weight: 800 !important;
    color: var(--dark-color) !important;
    letter-spacing: -0.01em !important;
    text-transform: none !important;
    margin: 0 0 1.25rem !important;
    padding-bottom: 1rem !important;
    border-bottom: 2px solid #f1f5f9 !important;
}

/* Lignes totaux */
.wc-block-components-totals-item {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 0.7rem 0 !important;
    border-bottom: 1px solid #f8fafc !important;
    font-size: 0.875rem !important;
    color: #475569 !important;
}
.wc-block-components-totals-item__label { font-weight: 500 !important; }
.wc-block-components-totals-item__value {
    font-weight: 700 !important;
    color: var(--dark-color) !important;
}

/* Ligne TOTAL */
.wc-block-components-totals-footer-item {
    padding: 1.25rem 0 0.5rem !important;
    margin-top: 0.25rem !important;
    border-top: 2px solid #e8edf3 !important;
    border-bottom: none !important;
}
.wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
    font-size: 0.95rem !important;
    font-weight: 800 !important;
    color: var(--dark-color) !important;
}
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
    font-size: 1.7rem !important;
    font-weight: 900 !important;
    color: var(--dark-color) !important;
    line-height: 1 !important;
}
.wc-block-components-totals-footer-item .woocommerce-Price-currencySymbol {
    font-size: 1rem !important;
    vertical-align: super !important;
    font-weight: 700 !important;
    color: var(--primary-color) !important;
}

/* Coupon */
.wc-block-components-panel__button,
.wc-block-components-totals-coupon__form-link {
    color: #64748b !important;
    font-size: 0.83rem !important;
    font-weight: 500 !important;
    background: none !important;
    border: none !important;
    border-top: 1px solid #f1f5f9 !important;
    padding: 0.75rem 0 0 !important;
    margin-top: 0.25rem !important;
    cursor: pointer !important;
    text-decoration: none !important;
    width: 100% !important;
    text-align: left !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    transition: color 0.15s !important;
}
.wc-block-components-panel__button:hover,
.wc-block-components-totals-coupon__form-link:hover { color: var(--primary-color) !important; }

/* Bouton "Valider la commande" */
.wc-block-cart__submit-button,
.wp-block-woocommerce-proceed-to-checkout-block a,
.wp-block-woocommerce-proceed-to-checkout-block .wc-block-cart__submit-button {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    width: 100% !important;
    background: linear-gradient(135deg, var(--primary-color) 0%, #1c6ea4 100%) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 14px !important;
    height: 54px !important;
    padding: 0 1.5rem !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    text-align: center !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: transform 0.2s, box-shadow 0.2s !important;
    box-shadow: 0 6px 22px rgba(41,128,185,0.35) !important;
    margin-top: 1.5rem !important;
    letter-spacing: 0.01em !important;
}
.wc-block-cart__submit-button:hover,
.wp-block-woocommerce-proceed-to-checkout-block a:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 32px rgba(41,128,185,0.48) !important;
    color: #fff !important;
}

/* Badges de confiance sous le bouton */
.wc-cart-trust-badges {
    display: flex !important;
    justify-content: center !important;
    gap: 1rem !important;
    margin-top: 1rem !important;
    flex-wrap: wrap !important;
}
.wc-cart-trust-badges span {
    display: flex !important;
    align-items: center !important;
    gap: 0.3rem !important;
    font-size: 0.7rem !important;
    font-weight: 500 !important;
    color: #94a3b8 !important;
}
.wc-cart-trust-badges span i {
    font-size: 0.75rem !important;
    color: var(--success-color) !important;
}

/* Lien retour boutique sous le bouton */
.wc-block-cart__submit-container + a,
.wc-block-cart__submit-container a.wc-block-cart__edit {
    font-size: 0.78rem !important;
    color: #94a3b8 !important;
    text-decoration: none !important;
    display: block !important;
    text-align: center !important;
    margin-top: 0.75rem !important;
    transition: color 0.15s !important;
}
.wc-block-cart__submit-container + a:hover { color: var(--primary-color) !important; }

/* ---- RESPONSIVE ---- */
@media (max-width: 768px) {
    .wc-block-cart-item__image img {
        width: 68px !important;
        height: 68px !important;
    }
    .wc-block-cart-items table thead th { padding: 0.75rem 0.75rem !important; }
    .wc-block-cart-items table tbody tr td { padding: 1.1rem 0.75rem !important; }
    .wc-block-cart-item__total { padding-right: 0.5rem !important; }
    .wc-block-cart__main {
        border-radius: 14px !important;
    }
    .wp-block-woocommerce-cart-order-summary-block {
        padding: 1.5rem 1.25rem !important;
        border-radius: 16px !important;
    }
    .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
        font-size: 1.4rem !important;
    }
}
@media (max-width: 480px) {
    .wc-block-cart-item__image img {
        width: 56px !important;
        height: 56px !important;
    }
    .wc-block-cart-item__product { padding: 0 0.5rem !important; }
    .wc-block-components-product-name { font-size: 0.875rem !important; }
}

/* =============================================
   BLOCK CHECKOUT — FORMULAIRE DE COMMANDE
   ============================================= */

/* Titre de la page checkout */
.woocommerce-checkout h1,
.wp-block-woocommerce-checkout h1,
.wc-block-checkout-page-with-sidebar h1 {
    font-size: 1.8rem !important;
    font-weight: 800 !important;
    color: var(--dark-color) !important;
    margin-bottom: 2rem !important;
}

/* Chaque étape (Coordonnées, Adresse) */
.wc-block-components-checkout-step {
    background: #fff !important;
    border: 1.5px solid #eef1f6 !important;
    border-radius: 14px !important;
    padding: 1.5rem 1.75rem !important;
    margin-bottom: 1rem !important;
    box-shadow: 0 1px 4px rgba(15,23,42,0.05) !important;
}

/* En-tête de section (numéro + titre) */
.wc-block-components-checkout-step__heading {
    display: flex !important;
    align-items: center !important;
    gap: 0.75rem !important;
    margin-bottom: 1.25rem !important;
    padding-bottom: 1rem !important;
    border-bottom: 1px solid #f1f5f9 !important;
}

/* Numéro d'étape */
.wc-block-components-checkout-step__number {
    background: var(--primary-color) !important;
    color: #fff !important;
    border-radius: 50% !important;
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    line-height: 1 !important;
}

/* Titre de section */
.wc-block-components-checkout-step__title {
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    color: var(--dark-color) !important;
    letter-spacing: 0 !important;
    margin: 0 !important;
}

/* Inputs */
.wc-block-components-text-input input,
.wc-block-components-country-input input,
.wc-block-components-state-input input {
    height: 50px !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 10px !important;
    padding: 0 1rem !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 0.88rem !important;
    color: var(--dark-color) !important;
    background: #fff !important;
    box-shadow: none !important;
    outline: none !important;
    width: 100% !important;
    transition: border-color 0.2s, box-shadow 0.2s !important;
}
.wc-block-components-select select,
.wc-block-components-country-input select {
    height: 50px !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 10px !important;
    padding: 0 1rem !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 0.88rem !important;
    color: var(--dark-color) !important;
    background: #fff !important;
    outline: none !important;
    width: 100% !important;
}
.wc-block-components-text-input input:focus,
.wc-block-components-select select:focus,
.wc-block-components-country-input input:focus,
.wc-block-components-country-input select:focus {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 3px rgba(59,130,246,0.12) !important;
}
.wc-block-components-text-input label,
.wc-block-components-select label {
    font-size: 0.78rem !important;
    font-weight: 600 !important;
    color: #64748b !important;
}

/* Zone actions (Retour + Commander) */
.wc-block-checkout__actions {
    display: flex !important;
    align-items: center !important;
    gap: 1rem !important;
    margin-top: 1.5rem !important;
    flex-wrap: wrap !important;
}

/* Bouton Commander */
.wc-block-components-checkout-place-order-button {
    flex: 1 1 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    padding: 0 2rem !important;
    height: 54px !important;
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 12px !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em !important;
    cursor: pointer !important;
    box-shadow: 0 6px 20px rgba(30,64,175,0.35) !important;
    transition: box-shadow 0.2s, transform 0.15s !important;
    white-space: nowrap !important;
    text-align: center !important;
    line-height: 1 !important;
}
.wc-block-components-checkout-place-order-button:hover {
    box-shadow: 0 10px 28px rgba(30,64,175,0.48) !important;
    transform: translateY(-1px) !important;
}

/* Lien Retour au panier */
.wc-block-checkout__return-to-cart-link,
.wc-block-checkout__return-to-cart-link a {
    font-size: 0.82rem !important;
    color: #94a3b8 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.35rem !important;
}
.wc-block-checkout__return-to-cart-link a:hover { color: var(--primary-color) !important; }

/* Champ "Ajouter une note" — supprimé */
.wc-block-checkout__add-note,
.wp-block-woocommerce-checkout-order-note-block { display: none !important; }

/* Checkbox note + Mentions légales */
.wc-block-checkout__add-note .wc-block-components-checkbox label { font-size: 0.85rem !important; color: #64748b !important; }
.wc-block-checkout__terms .wc-block-components-checkbox label,
.wc-block-checkout__terms p,
.wc-block-checkout__privacy-policy { font-size: 0.78rem !important; color: #94a3b8 !important; line-height: 1.5 !important; }
.wc-block-checkout__terms a { color: var(--primary-color) !important; }

/* Sidebar checkout — Résumé de la commande */
.wc-block-checkout__sidebar .wc-block-components-order-summary,
.wc-block-checkout .wc-block-components-order-summary-block,
.wp-block-woocommerce-checkout-order-summary-block {
    background: #f8fafc !important;
    border: 1.5px solid #eef1f6 !important;
    border-radius: 16px !important;
    padding: 1.5rem !important;
    position: sticky !important;
    top: 90px !important;
    box-shadow: 0 2px 12px rgba(15,23,42,0.06) !important;
}

/* Titre résumé */
.wc-block-components-order-summary__title,
.wc-block-checkout__sidebar .wc-block-components-order-summary__button-text {
    font-size: 1rem !important;
    font-weight: 700 !important;
    color: var(--dark-color) !important;
}

/* Image produit dans résumé */
.wc-block-components-order-summary-item__image img {
    border-radius: 8px !important;
    border: 1px solid #e8edf3 !important;
}

/* Description produit dans résumé — cachée */
.wc-block-components-order-summary-item__description,
.wc-block-components-product-details {
    display: none !important;
}

/* Badge quantité */
.wc-block-components-order-summary-item__quantity {
    background: var(--primary-color) !important;
    color: #fff !important;
    border-radius: 50% !important;
    font-weight: 700 !important;
    font-size: 0.7rem !important;
    min-width: 20px !important;
    height: 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Totaux */
.wc-block-components-totals-item { padding: 0.6rem 0 !important; }
.wc-block-components-totals-item__label { font-size: 0.88rem !important; color: #64748b !important; font-weight: 500 !important; }
.wc-block-components-totals-item__value { font-size: 0.88rem !important; color: var(--dark-color) !important; font-weight: 600 !important; }

/* Total final */
.wc-block-components-totals-footer-item { border-top: 2px solid #e2e8f0 !important; margin-top: 0.5rem !important; padding-top: 1rem !important; }
.wc-block-components-totals-footer-item .wc-block-components-totals-item__label { font-size: 1rem !important; font-weight: 700 !important; color: var(--dark-color) !important; }
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value { font-size: 1.25rem !important; font-weight: 800 !important; color: var(--dark-color) !important; }

@media (max-width: 768px) {
    .wc-block-components-checkout-step { padding: 1.25rem !important; }
    .wc-block-checkout__actions { flex-direction: column !important; }
    .wc-block-components-checkout-place-order-button { width: 100% !important; }
}

/* =============================================
   THANK YOU PAGE
   ============================================= */
.wc-thankyou { max-width: 700px; margin: 0 auto; padding: 2rem 0 4rem; }

.wc-thankyou__hero { text-align: center; padding: 2rem 1rem 1.5rem; }
.wc-thankyou__icon {
    width: 88px; height: 88px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 1.5rem;
    font-size: 2.2rem;
}
.wc-thankyou__icon--success {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    color: #fff;
    box-shadow: 0 10px 30px rgba(34,197,94,0.35);
    animation: wc-pop-in 0.45s cubic-bezier(.22,1,.36,1);
}
.wc-thankyou__icon--error { background: #ef4444; color: #fff; }
@keyframes wc-pop-in {
    0%   { transform: scale(0.4); opacity: 0; }
    65%  { transform: scale(1.15); }
    100% { transform: scale(1); opacity: 1; }
}
.wc-thankyou__heading {
    font-size: 2rem; font-weight: 800;
    color: var(--dark-color); margin: 0 0 0.65rem;
}
.wc-thankyou__subheading {
    color: #64748b; font-size: 0.95rem;
    line-height: 1.65; max-width: 480px; margin: 0 auto;
}

.wc-thankyou__card {
    background: #fff;
    border: 1.5px solid #e8edf3;
    border-radius: 16px;
    padding: 1.75rem;
    margin: 2rem 0;
}
.wc-thankyou__card-title {
    font-size: 0.9rem; font-weight: 700;
    color: var(--dark-color);
    margin: 0 0 1.25rem;
    display: flex; align-items: center; gap: 0.5rem;
    text-transform: uppercase; letter-spacing: 0.06em; color: #94a3b8;
}
.wc-thankyou__card-title i { color: var(--primary-color); font-size: 1rem; }
.wc-thankyou__details { list-style: none !important; padding: 0 !important; margin: 0; }
.wc-thankyou__details li {
    display: flex; justify-content: space-between; align-items: center;
    padding: 0.75rem 0;
    border-bottom: 1px solid #f1f5f9;
    gap: 1rem;
}
.wc-thankyou__details li:last-child { border-bottom: none; padding-bottom: 0; }
.wc-thankyou__detail-label { font-size: 0.85rem; color: #64748b; }
.wc-thankyou__detail-value { font-size: 0.9rem; color: var(--dark-color); font-weight: 600; }
.wc-thankyou__total { font-size: 1.4rem !important; color: var(--primary-color) !important; font-weight: 800 !important; }

.wc-thankyou__next-steps { margin: 0 0 2rem; }
.wc-thankyou__next-steps > h3 {
    font-size: 0.85rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.06em;
    color: #94a3b8; margin: 0 0 1rem;
}
.wc-thankyou__steps { display: flex; flex-direction: column; gap: 0.6rem; }
.wc-thankyou__step {
    display: flex; align-items: flex-start; gap: 1rem;
    padding: 1.1rem 1.25rem;
    background: #f8fafc;
    border-radius: 12px;
    border-left: 3px solid var(--primary-color);
    transition: background 0.15s;
}
.wc-thankyou__step:hover { background: #eff6ff; }
.wc-thankyou__step-icon {
    width: 40px; height: 40px; flex-shrink: 0;
    background: linear-gradient(135deg, var(--primary-color) 0%, #06b6d4 100%);
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 0.95rem;
}
.wc-thankyou__step-body strong { display: block; font-size: 0.88rem; margin-bottom: 0.2rem; color: var(--dark-color); font-weight: 700; }
.wc-thankyou__step-body p { font-size: 0.8rem; color: #64748b; margin: 0; line-height: 1.5; }
.wc-thankyou__step-body a { color: var(--primary-color); text-decoration: none; font-weight: 600; }
.wc-thankyou__step-body a:hover { text-decoration: underline; }

.wc-thankyou__actions { display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center; margin-top: 2rem; }
.wc-thankyou__error { text-align: center; padding: 3rem 1rem; }
.wc-thankyou__error h2 { color: #ef4444; margin: 0 0 0.5rem; }
.wc-thankyou__error p { color: #64748b; margin-bottom: 1.5rem; }

/* =============================================
   MY ACCOUNT DASHBOARD
   ============================================= */
.wc-dashboard__welcome {
    display: flex; align-items: center; gap: 1.5rem;
    background: linear-gradient(135deg, var(--dark-color) 0%, #1a3a5c 100%);
    border-radius: 18px;
    padding: 2.25rem 2rem;
    margin-bottom: 2rem;
    position: relative; overflow: hidden;
}
.wc-dashboard__welcome::before {
    content: '';
    position: absolute; top: -60px; right: -60px;
    width: 260px; height: 260px;
    background: radial-gradient(circle, rgba(59,130,246,0.18) 0%, transparent 65%);
    pointer-events: none;
}
.wc-dashboard__welcome::after {
    content: '';
    position: absolute; bottom: -40px; left: 30%;
    width: 200px; height: 200px;
    background: radial-gradient(circle, rgba(6,182,212,0.12) 0%, transparent 65%);
    pointer-events: none;
}
.wc-dashboard__avatar { border-radius: 50%; border: 3px solid rgba(255,255,255,0.25); flex-shrink: 0; position: relative; z-index: 1; }
.wc-dashboard__welcome-text { flex: 1; position: relative; z-index: 1; }
.wc-dashboard__welcome-title { font-size: 1.5rem; font-weight: 800; color: #fff; margin: 0 0 0.4rem; line-height: 1.2; }
.wc-dashboard__welcome-title strong { color: #93c5fd; }
.wc-dashboard__welcome-sub { font-size: 0.85rem; color: rgba(255,255,255,0.6); margin: 0 0 1rem; line-height: 1.55; }
.wc-dashboard__logout {
    display: inline-flex; align-items: center; gap: 0.35rem;
    font-size: 0.78rem; color: rgba(255,255,255,0.45);
    text-decoration: none; transition: color 0.15s;
}
.wc-dashboard__logout:hover { color: #fff; }

.wc-dashboard__cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-bottom: 2rem;
}
.wc-dashboard__card {
    display: flex; align-items: center; gap: 1rem;
    padding: 1.35rem;
    background: #fff;
    border: 1.5px solid #e8edf3;
    border-radius: 14px;
    text-decoration: none; color: inherit;
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}
.wc-dashboard__card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(30,64,175,0.11);
    border-color: var(--primary-color);
}
.wc-dashboard__card--highlight {
    border-color: #22c55e;
    background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 100%);
}
.wc-dashboard__card--highlight:hover { border-color: #16a34a; box-shadow: 0 12px 32px rgba(34,197,94,0.12); }
.wc-dashboard__card-icon {
    width: 50px; height: 50px; flex-shrink: 0;
    background: linear-gradient(135deg, var(--primary-color) 0%, #06b6d4 100%);
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 1.15rem;
}
.wc-dashboard__card--highlight .wc-dashboard__card-icon {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
}
.wc-dashboard__card-body { flex: 1; }
.wc-dashboard__card-title { display: block; font-size: 0.92rem; font-weight: 700; color: var(--dark-color); }
.wc-dashboard__card-desc  { display: block; font-size: 0.78rem; color: #64748b; margin-top: 0.15rem; }
.wc-dashboard__card-arrow { color: #e2e8f0; font-size: 0.8rem; transition: transform 0.15s, color 0.15s; }
.wc-dashboard__card:hover .wc-dashboard__card-arrow { transform: translateX(4px); color: var(--primary-color); }

@media (max-width: 600px) {
    .wc-dashboard__cards { grid-template-columns: 1fr; }
    .wc-dashboard__welcome { flex-direction: column; text-align: center; }
}

/* =============================================
   STICKY ADD TO CART — MOBILE
   ============================================= */

@keyframes wcStickyAtcIn {
    from { transform: translateY(100%); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}
@keyframes wcStickyAtcOut {
    from { transform: translateY(0);    opacity: 1; }
    to   { transform: translateY(100%); opacity: 0; }
}

/* Barre sticky — cachée par défaut, mobile uniquement */
.wc-sticky-atc {
    display: none; /* JS ajoute .wc-sticky-atc--visible */
}

@media (max-width: 768px) {
    .wc-sticky-atc {
        display: flex;
        position: fixed;
        bottom: 0; left: 0; right: 0;
        z-index: 9990;
        background: #fff;
        border-top: 1.5px solid #e2e8f0;
        box-shadow: 0 -8px 32px rgba(15,23,42,0.12);
        padding: 0.85rem 1rem calc(0.85rem + env(safe-area-inset-bottom, 0px));
        align-items: center;
        gap: 0.75rem;
        transform: translateY(100%);
        opacity: 0;
        transition: none;
        pointer-events: none;
    }

    .wc-sticky-atc--visible {
        animation: wcStickyAtcIn 0.32s cubic-bezier(0.34,1.2,0.64,1) forwards;
        pointer-events: all;
    }

    .wc-sticky-atc--hidden {
        animation: wcStickyAtcOut 0.22s ease-in forwards;
        pointer-events: none;
    }

    /* Infos produit (gauche) */
    .wc-sticky-atc__info {
        flex: 1;
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 0.1rem;
    }
    .wc-sticky-atc__title {
        font-size: 0.78rem;
        font-weight: 700;
        color: #0f172a;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .wc-sticky-atc__price {
        font-size: 0.88rem;
        font-weight: 800;
        color: #3b82f6;
    }
    .wc-sticky-atc__price .woocommerce-Price-currencySymbol { font-size: 0.75rem; }

    /* Bouton CTA (droite) */
    .wc-sticky-atc__btn {
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.4rem;
        background: linear-gradient(135deg, #3b82f6, #1d4ed8);
        color: #fff !important;
        border: none;
        border-radius: 12px;
        padding: 0.75rem 1.25rem;
        font-size: 0.9rem;
        font-weight: 700;
        cursor: pointer;
        box-shadow: 0 4px 16px rgba(30,64,175,0.35);
        text-decoration: none;
        white-space: nowrap;
        transition: box-shadow 0.2s, transform 0.15s;
        -webkit-tap-highlight-color: transparent;
    }
    .wc-sticky-atc__btn:active {
        transform: scale(0.97);
        box-shadow: 0 2px 8px rgba(30,64,175,0.3);
    }
    .wc-sticky-atc__btn svg {
        width: 16px; height: 16px; flex-shrink: 0;
    }

    /* Produit gratuit */
    .wc-sticky-atc__btn--free {
        background: linear-gradient(135deg, #22c55e, #16a34a);
        box-shadow: 0 4px 16px rgba(22,163,74,0.35);
    }

    /* Espace pour ne pas cacher le footer par la barre */
    .single-product .site-footer { padding-bottom: 90px; }
}

@media (prefers-reduced-motion: reduce) {
    .wc-sticky-atc--visible,
    .wc-sticky-atc--hidden { animation: none !important; opacity: 1; transform: none; }
}

/* ===================================
   18. CONTACT FORM 7 (Migrated from main.css)
   =================================== */

.wcreativite-cf7-form input[type="text"],
.wcreativite-cf7-form input[type="email"],
.wcreativite-cf7-form input[type="tel"],
.wcreativite-cf7-form input[type="url"],
.wcreativite-cf7-form textarea,
.wcreativite-cf7-form select {
    width: 100%;
    padding: 0.8rem;
    border: 1px solid var(--light-color);
    border-radius: 5px;
    font-family: 'Poppins', sans-serif;
    margin-bottom: 1rem;
}

.wcreativite-cf7-form input[type="submit"] {
    background-color: var(--primary-color);
    color: var(--white-color);
    padding: 0.8rem 1.8rem;
    border: none;
    border-radius: 5px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.wcreativite-cf7-form input[type="submit"]:hover {
    background-color: var(--secondary-color);
    transform: translateY(-2px);
}

/* =============================================
   FORMULAIRE BREVO — PAGE CONTACT
   ============================================= */

.sib-form-block {
    background: #fff;
    border: 1px solid #e4eaf2;
    border-radius: 20px;
    padding: 2.5rem;
    box-shadow: 0 8px 32px rgba(44,62,80,0.07);
    max-width: 760px;
    margin: 0 auto;
    font-family: 'Poppins', sans-serif;
}

/* Entête */
.sib-form-block__title {
    font-size: clamp(1.5rem, 2.5vw, 2rem) !important;
    font-weight: 800 !important;
    color: var(--dark-color) !important;
    letter-spacing: -0.02em !important;
    margin: 0 0 0.75rem !important;
}
.sib-form-block__desc {
    font-size: 0.92rem !important;
    color: #64748b !important;
    line-height: 1.7 !important;
    margin: 0 0 2rem !important;
    padding-bottom: 2rem !important;
    border-bottom: 2px solid #f1f5f9 !important;
}

/* Ligne double colonne */
.sib-form-row {
    display: flex;
    gap: 1.25rem;
    margin-bottom: 1.25rem;
}
.sib-form-row--half .sib-form-group { flex: 1; }

/* Groupe champ */
.sib-form-group {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-bottom: 1.25rem;
}
.sib-form-row .sib-form-group { margin-bottom: 0; }

/* Labels */
.sib-form-block label {
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    color: #475569 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    display: block !important;
}
.sib-required {
    color: var(--primary-color);
    margin-left: 2px;
}

/* Inputs & textarea */
.sib-form-block input[type="text"],
.sib-form-block input[type="email"],
.sib-form-block input[type="tel"],
.sib-form-block input[type="url"],
.sib-form-block textarea {
    width: 100% !important;
    background: #f8fafc !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 12px !important;
    padding: 0 1rem !important;
    height: 50px !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 0.9rem !important;
    color: var(--dark-color) !important;
    transition: border-color 0.18s, box-shadow 0.18s, background 0.18s !important;
    outline: none !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
}
.sib-form-block textarea {
    height: auto !important;
    padding: 0.85rem 1rem !important;
    resize: vertical !important;
    min-height: 150px !important;
    line-height: 1.6 !important;
}
.sib-form-block input:focus,
.sib-form-block textarea:focus {
    border-color: var(--primary-color) !important;
    background: #fff !important;
    box-shadow: 0 0 0 3px rgba(41,128,185,0.12) !important;
}
.sib-form-block input::placeholder,
.sib-form-block textarea::placeholder {
    color: #b0bec5 !important;
    font-size: 0.88rem !important;
}

/* Bouton submit */
.sib-form-submit {
    margin-top: 1.75rem;
}
.sib-form-block .sib-default-btn,
.sib-form-block input[type="submit"] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 54px !important;
    padding: 0 2.5rem !important;
    background: linear-gradient(135deg, var(--primary-color) 0%, #1c6ea4 100%) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 14px !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.01em !important;
    cursor: pointer !important;
    transition: transform 0.2s, box-shadow 0.2s !important;
    box-shadow: 0 6px 22px rgba(41,128,185,0.35) !important;
    width: 100% !important;
}
.sib-form-block .sib-default-btn:hover,
.sib-form-block input[type="submit"]:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 32px rgba(41,128,185,0.48) !important;
}

/* Messages succès / erreur Brevo */
.sib-form-block .sib-form-message-panel {
    border-radius: 12px !important;
    padding: 1rem 1.25rem !important;
    font-size: 0.9rem !important;
    font-weight: 500 !important;
    margin-top: 1rem !important;
}
.sib-form-block .sib-form-message-panel--success {
    background: #f0fdf4 !important;
    border: 1.5px solid #86efac !important;
    color: #166534 !important;
}
.sib-form-block .sib-form-message-panel--error {
    background: #fef2f2 !important;
    border: 1.5px solid #fca5a5 !important;
    color: #991b1b !important;
}

/* Responsive */
@media (max-width: 600px) {
    .sib-form-block { padding: 1.5rem 1.25rem; }
    .sib-form-row { flex-direction: column; gap: 1.25rem; }
    .sib-form-block .sib-default-btn,
    .sib-form-block input[type="submit"] { width: 100% !important; }
}

/* =============================================
   WPFORMS — STYLES GLOBAUX
   ============================================= */

/* Fond de page pour les pages avec formulaire */
.page-content {
    background: #f4f7fa;
}

/* Wrapper pleine largeur */
.wpforms-container {
    background: #fff !important;
    border: 1px solid #e4eaf2 !important;
    border-radius: 24px !important;
    padding: 0 !important;
    box-shadow: 0 8px 40px rgba(44,62,80,0.09) !important;
    font-family: 'Poppins', sans-serif !important;
    max-width: 100% !important;
    margin: 0 !important;
    overflow: hidden !important;
}

/* Formulaire interne — grille 2 colonnes */
.wpforms-container .wpforms-form {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0 !important;
}

/* Champ container (field-container) prend toute la grille par défaut */
.wpforms-container .wpforms-field-container {
    grid-column: 1 / -1 !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 1.5rem 2rem !important;
    padding: 2.5rem 3rem !important;
}

/* Submit container pleine largeur */
.wpforms-container .wpforms-submit-container {
    grid-column: 1 / -1 !important;
    background: #f8fafc !important;
    border-top: 1px solid #f1f5f9 !important;
    padding: 2rem 3rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 2rem !important;
    margin: 0 !important;
}

/* Mention légale à gauche du bouton */
.wpforms-container .wpforms-submit-container::before {
    content: "🔒 Vos données sont confidentielles et ne seront jamais partagées." !important;
    font-size: 0.75rem !important;
    color: #94a3b8 !important;
    flex: 1 !important;
    line-height: 1.5 !important;
}

/* Chaque champ — pleine colonne par défaut */
.wpforms-container .wpforms-field {
    padding: 0 !important;
    margin: 0 !important;
    grid-column: span 1 !important;
}

/* Champs pleine largeur (textarea, checkbox, select budget, message) */
.wpforms-container .wpforms-field-textarea,
.wpforms-container .wpforms-field-checkbox,
.wpforms-container .wpforms-field-select,
.wpforms-container .wpforms-field-divider,
.wpforms-container .wpforms-field-pagebreak,
.wpforms-container .wpforms-field-captcha {
    grid-column: 1 / -1 !important;
}

/* Labels */
.wpforms-container .wpforms-field-label {
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    color: #64748b !important;
    text-transform: uppercase !important;
    letter-spacing: 0.09em !important;
    margin-bottom: 0.5rem !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.25rem !important;
}
.wpforms-container .wpforms-field-label .wpforms-required-label {
    color: var(--primary-color) !important;
    font-size: 0.9rem !important;
}
/* Labels cachés : forcer affichage */
.wpforms-container .wpforms-field-label.wpforms-label-hide {
    display: flex !important;
    visibility: visible !important;
}

/* Sous-labels champ Nom splitté */
.wpforms-container .wpforms-field-name .wpforms-field-row-block label {
    font-size: 0.7rem !important;
    font-weight: 600 !important;
    color: #94a3b8 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    margin-top: 0.4rem !important;
    display: block !important;
}

/* Description sous le label */
.wpforms-container .wpforms-field-description {
    font-size: 0.78rem !important;
    color: #94a3b8 !important;
    margin-top: 0.4rem !important;
    line-height: 1.5 !important;
}

/* ---- Inputs, selects ---- */
.wpforms-container .wpforms-field input[type="text"],
.wpforms-container .wpforms-field input[type="email"],
.wpforms-container .wpforms-field input[type="tel"],
.wpforms-container .wpforms-field input[type="url"],
.wpforms-container .wpforms-field input[type="number"],
.wpforms-container .wpforms-field input[type="password"],
.wpforms-container .wpforms-field select,
.wpforms-container input.wpforms-field-medium,
.wpforms-container input.wpforms-field-large,
.wpforms-container input.wpforms-field-small {
    width: 100% !important;
    height: 52px !important;
    background: #f8fafc !important;
    border: 1.5px solid #e8edf3 !important;
    border-radius: 12px !important;
    padding: 0 1.1rem !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 0.9rem !important;
    color: var(--dark-color) !important;
    transition: border-color 0.18s, box-shadow 0.18s, background 0.18s !important;
    outline: none !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}

/* Textarea */
.wpforms-container .wpforms-field textarea {
    width: 100% !important;
    min-height: 160px !important;
    background: #f8fafc !important;
    border: 1.5px solid #e8edf3 !important;
    border-radius: 12px !important;
    padding: 1rem 1.1rem !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 0.9rem !important;
    color: var(--dark-color) !important;
    transition: border-color 0.18s, box-shadow 0.18s, background 0.18s !important;
    outline: none !important;
    box-shadow: none !important;
    resize: vertical !important;
    line-height: 1.6 !important;
    box-sizing: border-box !important;
}

/* Select — flèche custom */
.wpforms-container .wpforms-field select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2394a3b8' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 1.1rem center !important;
    padding-right: 2.5rem !important;
    cursor: pointer !important;
}

/* Focus */
.wpforms-container .wpforms-field input:focus,
.wpforms-container .wpforms-field textarea:focus,
.wpforms-container .wpforms-field select:focus {
    border-color: var(--primary-color) !important;
    background: #fff !important;
    box-shadow: 0 0 0 3px rgba(41,128,185,0.12) !important;
}

/* Placeholder */
.wpforms-container .wpforms-field input::placeholder,
.wpforms-container .wpforms-field textarea::placeholder {
    color: #c4cdd6 !important;
}

/* ---- Champ Nom splitté ---- */
.wpforms-container .wpforms-field-name .wpforms-field-row {
    display: flex !important;
    gap: 1rem !important;
}
.wpforms-container .wpforms-field-name .wpforms-field-row-block {
    flex: 1 !important;
}

/* ---- Téléphone (flag) ---- */
.wpforms-container .wpforms-field-phone .wpforms-field-phone-intl {
    border-radius: 12px !important;
    border: 1.5px solid #e8edf3 !important;
    overflow: hidden !important;
}

/* ---- Checkboxes — bulles cliquables ---- */
.wpforms-container .wpforms-field-checkbox .wpforms-field-label {
    margin-bottom: 0.75rem !important;
}
.wpforms-container .wpforms-field-checkbox ul {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.6rem !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
.wpforms-container .wpforms-field-checkbox li {
    margin: 0 !important;
}
/* Cacher le checkbox natif */
.wpforms-container .wpforms-field-checkbox li input[type="checkbox"] {
    position: absolute !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    pointer-events: none !important;
}
/* Bulle — état par défaut */
.wpforms-container .wpforms-field-checkbox li label {
    display: inline-flex !important;
    align-items: center !important;
    background: #f1f5f9 !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 999px !important;
    padding: 0.5rem 1.1rem !important;
    font-size: 0.85rem !important;
    font-weight: 500 !important;
    color: #475569 !important;
    cursor: pointer !important;
    transition: border-color 0.18s, background 0.18s, color 0.18s, box-shadow 0.18s !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    line-height: 1.4 !important;
    user-select: none !important;
    white-space: nowrap !important;
}
/* Hover */
.wpforms-container .wpforms-field-checkbox li label:hover {
    border-color: var(--primary-color) !important;
    background: rgba(41,128,185,0.07) !important;
    color: var(--primary-color) !important;
}
/* Cochée → bulle pleine */
.wpforms-container .wpforms-field-checkbox li input[type="checkbox"]:checked ~ label {
    background: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: #fff !important;
    font-weight: 600 !important;
    box-shadow: 0 4px 12px rgba(41,128,185,0.3) !important;
}

/* Radios */
.wpforms-container .wpforms-field-radio li {
    display: flex !important;
    align-items: center !important;
    gap: 0.6rem !important;
    margin-bottom: 0.5rem !important;
    font-size: 0.9rem !important;
    color: #475569 !important;
}
.wpforms-container .wpforms-field-radio input[type="radio"] {
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    accent-color: var(--primary-color) !important;
    cursor: pointer !important;
    margin: 0 !important;
}

/* ---- Erreurs ---- */
.wpforms-container label.wpforms-error {
    font-size: 0.76rem !important;
    color: #ef4444 !important;
    font-weight: 500 !important;
    margin-top: 0.35rem !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.3rem !important;
}
.wpforms-container .wpforms-field input.wpforms-error,
.wpforms-container .wpforms-field textarea.wpforms-error,
.wpforms-container .wpforms-field select.wpforms-error {
    border-color: #ef4444 !important;
    background: #fff5f5 !important;
    box-shadow: 0 0 0 3px rgba(239,68,68,0.1) !important;
}
.wpforms-container .wpforms-error-alert {
    background: #fef2f2 !important;
    border: 1.5px solid #fca5a5 !important;
    border-radius: 12px !important;
    color: #991b1b !important;
    padding: 1rem 1.25rem !important;
    font-size: 0.88rem !important;
    margin: 0 3rem 1.5rem !important;
    grid-column: 1 / -1 !important;
}

/* ---- Confirmation succès ---- */
.wpforms-container .wpforms-confirmation-container,
.wpforms-confirmation-container-full {
    background: #f0fdf4 !important;
    border: 1.5px solid #86efac !important;
    border-radius: 14px !important;
    color: #166534 !important;
    padding: 2rem !important;
    font-size: 0.95rem !important;
    font-weight: 500 !important;
    text-align: center !important;
    margin: 2rem 3rem !important;
}

/* ---- Bouton submit ---- */
.wpforms-container .wpforms-submit,
.wpforms-container button[type="submit"] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    height: 54px !important;
    padding: 0 3rem !important;
    background: linear-gradient(135deg, var(--primary-color) 0%, #1c6ea4 100%) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 14px !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.01em !important;
    cursor: pointer !important;
    transition: transform 0.2s, box-shadow 0.2s !important;
    box-shadow: 0 6px 22px rgba(41,128,185,0.35) !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
}
.wpforms-container .wpforms-submit:hover,
.wpforms-container button[type="submit"]:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 32px rgba(41,128,185,0.48) !important;
}
.wpforms-container .wpforms-submit-container .wpforms-submit-spinner {
    filter: brightness(10) !important;
}

/* ---- reCAPTCHA ---- */
.wpforms-container .wpforms-field-captcha {
    padding-top: 0.5rem !important;
}

/* ---- Responsive ---- */
@media (max-width: 900px) {
    .wpforms-container .wpforms-field-container {
        grid-template-columns: 1fr !important;
        padding: 2rem !important;
    }
    .wpforms-container .wpforms-field-checkbox ul {
        gap: 0.5rem !important;
    }
    .wpforms-container .wpforms-submit-container {
        flex-direction: column !important;
        align-items: stretch !important;
        padding: 1.5rem 2rem !important;
    }
    .wpforms-container .wpforms-submit-container::before {
        text-align: center !important;
    }
    .wpforms-container .wpforms-submit,
    .wpforms-container button[type="submit"] {
        width: 100% !important;
    }
}
@media (max-width: 600px) {
    .wpforms-container .wpforms-field-container {
        padding: 1.5rem !important;
        gap: 1.25rem !important;
    }
    .wpforms-container .wpforms-field-name .wpforms-field-row {
        flex-direction: column !important;
        gap: 1rem !important;
    }
    .wpforms-container .wpforms-field-checkbox ul {
        gap: 0.4rem !important;
    }
    .wpforms-container .wpforms-submit-container {
        padding: 1.25rem 1.5rem !important;
    }
    .wpforms-container .wpforms-error-alert,
    .wpforms-container .wpforms-confirmation-container {
        margin: 1rem 1.5rem !important;
    }
}

/* =============================================
   CONTACT FORM 7 — ANCIEN FORMULAIRE
   ============================================= */

.wpcf7-not-valid-tip {
    color: #e74c3c;
    font-size: 0.9rem;
}

.wpcf7-validation-errors,
.wpcf7-acceptance-missing {
    border: 2px solid #e74c3c;
    background-color: #ffe5e5;
    padding: 1rem;
    border-radius: 5px;
    margin-top: 1rem;
}

.wpcf7-mail-sent-ok {
    border: 2px solid var(--success-color);
    background-color: #e8f8f5;
    padding: 1rem;
    border-radius: 5px;
    margin-top: 1rem;
}

/* ===================================
   18. BLOG STYLES
   =================================== */

/* ---- Conteneur blog (override overflow:hidden du container global) ---- */
.blog-section .container {
    overflow: visible;
}

/* ---- En-tête de page blog ---- */
.blog-section {
    background: var(--light-color);
    padding: 2.5rem 0 4rem;
}

/* Sections des pages internes — le header fixe est déjà compensé par #main-content */
.archive-section,
.blog-archive,
.search-results,
.page-content,
.author-archive {
    padding-top: 2.5rem;
}

.blog-section .page-header {
    text-align: center;
    margin-bottom: 3.5rem;
}

.blog-section .page-header .page-title {
    font-size: 2.5rem;
    color: var(--dark-color);
    margin-bottom: 0.75rem;
    text-align: center;
}

.blog-section .page-header .page-description {
    color: #7f8c8d;
    font-size: 1.05rem;
    max-width: 600px;
    margin: 0 auto;
}

/* ---- Liste des articles (1 par ligne) ---- */
.blog-grid {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

/* ---- Carte article — disposition horizontale ---- */
.blog-post {
    background: var(--white-color);
    border-radius: 8px;
    box-shadow: var(--shadow);
    overflow: hidden;
    display: flex;
    flex-direction: row;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.blog-post:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

/* Thumbnail — colonne gauche fixe */
.blog-post .post-thumbnail {
    flex-shrink: 0;
    width: 300px;
    overflow: hidden;
}

.blog-post .post-thumbnail a {
    display: block;
    height: 100%;
}

.blog-post .post-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
    border-radius: 0;
    margin: 0;
    box-shadow: none;
}

.blog-post:hover .post-thumbnail img {
    transform: scale(1.05);
}

/* Corps de la carte — colonne droite */
.blog-post-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 1.75rem 2rem;
    min-width: 0;
}

/* Catégorie badge */
.post-category {
    margin-bottom: 0.75rem;
}

.post-category a {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--primary-color);
    background: rgba(41, 128, 185, 0.1);
    padding: 0.2rem 0.65rem;
    border-radius: 20px;
    text-decoration: none;
    transition: background 0.3s ease, color 0.3s ease;
}

.post-category a:hover {
    background: var(--primary-color);
    color: var(--white-color);
}

/* Titre article — override section h2 */
.blog-post .entry-header {
    margin-bottom: 0.6rem;
}

.blog-post .entry-title {
    font-size: clamp(1.25rem, 1.8vw, 1.5rem);
    line-height: 1.3;
    margin: 0 0 0.5rem 0;
    text-align: left;
    font-weight: 800;
    color: var(--dark-color);
}

.blog-post .entry-title a {
    color: var(--dark-color);
    text-decoration: none;
    background-image: linear-gradient(var(--primary-color), var(--primary-color));
    background-position: 0% 100%;
    background-repeat: no-repeat;
    background-size: 0% 2px;
    padding-bottom: 3px;
    transition: background-size 0.35s ease, color 0.35s ease;
}

.blog-post .entry-title a:hover {
    color: var(--primary-color);
    background-size: 100% 2px;
}

/* Méta */
.blog-post .entry-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
    font-size: 0.82rem;
    color: #7f8c8d;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--light-color);
}

.blog-post .entry-meta span {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.blog-post .entry-meta i {
    color: var(--primary-color);
    font-size: 0.78rem;
}

.blog-post .entry-meta a {
    color: inherit;
    text-decoration: none;
    transition: color 0.3s ease;
}

.blog-post .entry-meta a:hover {
    color: var(--primary-color);
}

/* Extrait */
.blog-post .entry-excerpt {
    flex: 1;
    font-size: 0.92rem;
    color: #555;
    line-height: 1.7;
    margin-bottom: 1.25rem;
}

.blog-post .entry-excerpt p {
    margin: 0;
}

/* Footer de carte */
.blog-post .entry-footer {
    margin-top: auto;
}

/* Bouton petit */
.btn-sm {
    padding: 0.55rem 1.2rem;
    font-size: 0.88rem;
}

/* ---- État vide ---- */
.no-posts {
    grid-column: 1 / -1;
    text-align: center;
    padding: 4rem 2rem;
    color: #7f8c8d;
}

.no-posts i {
    font-size: 3rem;
    margin-bottom: 1rem;
    display: block;
    color: #bdc3c7;
}

.no-posts h2 {
    font-size: 1.5rem;
    margin-bottom: 0.75rem;
    color: var(--dark-color);
    text-align: center;
}

.no-posts p {
    margin-bottom: 1.5rem;
}

/* ---- Pagination ---- */
.nav-links.posts-navigation,
.navigation.pagination {
    grid-column: 1 / -1;
}

.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    margin-top: 3rem;
    flex-wrap: wrap;
}

.pagination .page-numbers {
    display: inline-block;
    padding: 0.6rem 1rem;
    background-color: var(--white-color);
    color: var(--dark-color);
    text-decoration: none;
    border-radius: 5px;
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: var(--shadow);
}

.pagination .page-numbers:hover {
    background-color: var(--primary-color);
    color: var(--white-color);
    transform: translateY(-2px);
}

.pagination .page-numbers.current {
    background-color: var(--primary-color);
    color: var(--white-color);
}

.pagination .page-numbers.prev,
.pagination .page-numbers.next {
    background-color: var(--secondary-color);
    color: var(--white-color);
}

.pagination .page-numbers.prev:hover,
.pagination .page-numbers.next:hover {
    background-color: var(--primary-color);
}

/* ---- Single post ---- */
.single-post {
    padding: 2rem 0 5rem;
    background: var(--white-color);
}

.single-post .entry-header {
    margin-bottom: 1.5rem;
}

.single-post .entry-title {
    font-size: clamp(1.8rem, 3vw, 2.6rem);
    line-height: 1.2;
    margin-bottom: 1rem;
    color: var(--dark-color);
    text-align: left;
}

.single-post .entry-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
    font-size: 0.88rem;
    color: #7f8c8d;
    padding-bottom: 1.5rem;
    border-bottom: 2px solid var(--light-color);
    margin-bottom: 2rem;
}

.single-post .entry-meta span {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.single-post .entry-meta i {
    color: var(--primary-color);
}

.single-post .entry-meta a {
    color: inherit;
    text-decoration: none;
}

.single-post .entry-meta a:hover {
    color: var(--primary-color);
}

.single-post .entry-footer {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--light-color);
}

.single-post .tags-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.88rem;
    color: #7f8c8d;
}

.single-post .tags-links a {
    display: inline-block;
    color: #7f8c8d;
    text-decoration: none;
    padding: 0.25rem 0.75rem;
    background-color: var(--light-color);
    border-radius: 20px;
    font-size: 0.82rem;
    transition: all 0.3s ease;
}

.single-post .tags-links a:hover {
    background-color: var(--primary-color);
    color: var(--white-color);
}

/* ---- Navigation prev/next ---- */
.post-navigation {
    margin: 3rem 0;
    padding: 2rem 0;
    border-top: 2px solid var(--light-color);
}

.post-navigation .nav-links {
    display: flex;
    justify-content: space-between;
    gap: 2rem;
}

.post-navigation .nav-previous,
.post-navigation .nav-next {
    flex: 1;
    background: var(--white-color);
    padding: 1.5rem;
    border-radius: 8px;
    box-shadow: var(--shadow);
    transition: transform 0.3s ease;
}

.post-navigation .nav-previous:hover,
.post-navigation .nav-next:hover {
    transform: translateY(-3px);
}

.post-navigation a {
    color: var(--dark-color);
    text-decoration: none;
}

.post-navigation .nav-subtitle {
    display: block;
    color: var(--primary-color);
    font-size: 0.85rem;
    margin-bottom: 0.4rem;
}

.post-navigation .nav-title {
    display: block;
    font-weight: 600;
    font-size: 0.95rem;
}

/* ---- Comments link ---- */
.comments-link a {
    color: inherit;
    text-decoration: none;
    transition: color 0.3s ease;
}

.comments-link a:hover {
    color: var(--primary-color);
}

/* ---- Responsive blog ---- */
@media (max-width: 768px) {
    /* Cartes en colonne sur mobile */
    .blog-post {
        flex-direction: column;
    }

    .blog-post .post-thumbnail {
        width: 100%;
        height: 200px;
    }

    .blog-post-body {
        padding: 1.25rem;
    }

    .blog-section .page-header .page-title {
        font-size: 1.8rem;
    }

    .single-post .entry-title {
        font-size: 1.6rem;
    }

    .pagination {
        gap: 0.3rem;
    }

    .pagination .page-numbers {
        padding: 0.5rem 0.8rem;
        font-size: 0.9rem;
    }

    .post-navigation .nav-links {
        flex-direction: column;
    }
}

/* ===================================
   19. COMMENTS SYSTEM (Migrated from main.css)
   =================================== */

/* Comments area */
.comments-area {
    margin-top: 3rem;
    padding: 2.5rem;
    background: var(--light-color);
    border-radius: 8px;
}

.comments-title {
    font-size: 2rem;
    color: var(--dark-color);
    margin-bottom: 2rem;
}

.comments-title span {
    color: var(--primary-color);
}

/* Comment list */
.comment-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.comment-list .comment {
    margin-bottom: 2rem;
    padding: 2rem;
    background: var(--white-color);
    border-radius: 8px;
    box-shadow: var(--shadow);
}

.comment-list .comment.bypostauthor {
    border-left: 4px solid var(--primary-color);
}

.comment-list .children {
    list-style: none;
    margin-left: 2rem;
    margin-top: 2rem;
}

.comment-meta {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.comment-author {
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.comment-author img {
    border-radius: 50%;
    border: 2px solid var(--light-color);
}

.comment-author .fn {
    font-weight: 700;
    font-style: normal;
    color: var(--dark-color);
    text-decoration: none;
}

.comment-author .fn:hover {
    color: var(--primary-color);
}

.comment-author .says {
    display: none;
}

.comment-metadata {
    font-size: 0.85rem;
    color: #7f8c8d;
}

.comment-metadata a {
    color: inherit;
    text-decoration: none;
    transition: color 0.3s ease;
}

.comment-metadata a:hover {
    color: var(--primary-color);
}

.comment-content {
    line-height: 1.8;
    color: #555;
    margin-bottom: 1rem;
}

.comment-content p {
    margin-bottom: 1rem;
}

.comment-reply-link {
    display: inline-block;
    padding: 0.5rem 1rem;
    background-color: var(--primary-color);
    color: var(--white-color);
    border-radius: 3px;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 600;
    transition: all 0.3s ease;
}

.comment-reply-link:hover {
    background-color: var(--secondary-color);
    transform: translateY(-2px);
}

.comment-reply-link i {
    margin-right: 0.3rem;
}

/* Comment awaiting moderation */
.comment-awaiting-moderation {
    display: inline-block;
    padding: 0.5rem 1rem;
    background-color: #f39c12;
    color: var(--white-color);
    border-radius: 3px;
    font-size: 0.9rem;
    margin-top: 0.5rem;
}

/* Comments navigation */
.comment-navigation,
.comments-navigation {
    margin: 2rem 0;
    display: flex;
    justify-content: space-between;
}

.comment-navigation .nav-previous,
.comment-navigation .nav-next,
.comments-navigation .nav-previous,
.comments-navigation .nav-next {
    flex: 1;
}

.comment-navigation a,
.comments-navigation a {
    display: inline-block;
    padding: 0.6rem 1.2rem;
    background-color: var(--primary-color);
    color: var(--white-color);
    text-decoration: none;
    border-radius: 5px;
    transition: all 0.3s ease;
    font-weight: 600;
}

.comment-navigation a:hover,
.comments-navigation a:hover {
    background-color: var(--secondary-color);
    transform: translateY(-2px);
}

/* No comments */
.no-comments {
    padding: 1.5rem;
    background: var(--white-color);
    border-radius: 5px;
    text-align: center;
    color: #7f8c8d;
}

/* Comment form */
.comment-form-wcreativite {
    margin-top: 2rem;
    padding: 2rem;
    background: var(--white-color);
    border-radius: 8px;
}

.comment-form-wcreativite label {
    display: block;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--dark-color);
}

.comment-form-wcreativite .required {
    color: #e74c3c;
}

.comment-form-wcreativite input[type="text"],
.comment-form-wcreativite input[type="email"],
.comment-form-wcreativite input[type="url"],
.comment-form-wcreativite textarea {
    width: 100%;
    padding: 0.8rem;
    border: 1px solid var(--light-color);
    border-radius: 5px;
    font-family: 'Poppins', sans-serif;
    transition: border-color 0.3s ease;
}

.comment-form-wcreativite input[type="text"]:focus,
.comment-form-wcreativite input[type="email"]:focus,
.comment-form-wcreativite input[type="url"]:focus,
.comment-form-wcreativite textarea:focus {
    outline: none;
    border-color: var(--primary-color);
}

.comment-form-wcreativite textarea {
    resize: vertical;
    min-height: 120px;
}

.comment-form-wcreativite .form-submit {
    margin-top: 1rem;
}

.comment-form-wcreativite .comment-reply-title {
    font-size: 1.8rem;
    color: var(--dark-color);
    margin-bottom: 1.5rem;
}

.comment-form-wcreativite .comment-reply-title small {
    font-size: 0.9rem;
}

.comment-form-wcreativite .comment-reply-title small a {
    color: var(--primary-color);
    text-decoration: none;
    transition: color 0.3s ease;
}

.comment-form-wcreativite .comment-reply-title small a:hover {
    color: var(--secondary-color);
}

.comment-form-wcreativite .comment-notes {
    font-size: 0.9rem;
    color: #7f8c8d;
    margin-bottom: 1.5rem;
}

.comment-form-wcreativite .logged-in-as {
    font-size: 0.9rem;
    color: #7f8c8d;
    margin-bottom: 1rem;
}

.comment-form-wcreativite .logged-in-as a {
    color: var(--primary-color);
    text-decoration: none;
}

.comment-form-wcreativite .logged-in-as a:hover {
    text-decoration: underline;
}

/* Comment form fields */
.comment-form-wcreativite .comment-form-author,
.comment-form-wcreativite .comment-form-email,
.comment-form-wcreativite .comment-form-url,
.comment-form-wcreativite .comment-form-comment {
    margin-bottom: 1.5rem;
}

/* ===================================
   20. BLOG POST CONTENT STYLES (Migrated from main.css)
   =================================== */

/* Entry content - images */
.entry-content img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 2rem auto;
    box-shadow: var(--shadow);
    display: block;
}

.featured-image-in-content {
    width: 100%;
    border-radius: 8px;
    margin-bottom: 2rem;
    overflow: hidden; /* Assure que le border-radius s'applique à l'image */
}

.featured-image-in-content img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 0; /* Réinitialise le border-radius de l'image si elle est dans la div */
}

/* WordPress image alignments */
.entry-content .alignleft {
    float: left;
    margin: 1rem 2rem 1rem 0;
}

.entry-content .alignright {
    float: right;
    margin: 1rem 0 1rem 2rem;
}

.entry-content .aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* WordPress image captions */
.entry-content .wp-caption {
    max-width: 100%;
}

.entry-content .wp-caption img {
    margin: 0;
}

.entry-content .wp-caption-text {
    text-align: center;
    font-size: 0.9rem;
    color: #7f8c8d;
    font-style: italic;
    padding: 0.5rem 0;
}

/* WordPress galleries */
.entry-content .wp-block-gallery,
.entry-content .blocks-gallery-grid {
    margin: 2rem 0;
}

/* Entry content - general typography */
.entry-content p {
    margin-bottom: 1.5rem;
}

.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6 {
    margin-top: 2rem;
    margin-bottom: 1rem;
    color: var(--dark-color);
}

.entry-content h2 {
    font-size: 2rem;
}

.entry-content h3 {
    font-size: 1.5rem;
}

.entry-content h4 {
    font-size: 1.25rem;
}

.entry-content ul,
.entry-content ol {
    margin: 1.5rem 0;
    padding-left: 2rem;
}

.entry-content li {
    margin-bottom: 0.5rem;
}

.entry-content blockquote {
    border-left: 4px solid var(--primary-color);
    padding-left: 1.5rem;
    margin: 2rem 0;
    font-style: italic;
    color: #555;
}

/* Code inline */
.entry-content code {
    background: #f0f3f5;
    color: #c0392b;
    padding: 0.2rem 0.45rem;
    border-radius: 4px;
    font-family: 'Courier New', Consolas, 'Liberation Mono', monospace;
    font-size: 0.88em;
    white-space: nowrap;
}

/* Bloc de code (pre) */
.entry-content pre {
    background: #1a252f;
    color: #e8f1f8;
    padding: 1.5rem 1.75rem;
    border-radius: 8px;
    overflow-x: auto;
    margin: 2rem 0;
    font-family: 'Courier New', Consolas, 'Liberation Mono', monospace;
    font-size: 0.9rem;
    line-height: 1.65;
    border-left: 4px solid var(--primary-color);
}

/* Code à l'intérieur d'un pre : hérite tout, pas de surcharge */
.entry-content pre code {
    background: none;
    color: inherit;
    padding: 0;
    font-size: inherit;
    white-space: pre;
}

/* Author bio responsive */
@media (max-width: 768px) {
    .author-bio > div {
        flex-direction: column;
        text-align: center;
    }

    .author-bio .author-avatar {
        margin: 0 auto;
    }
}

/* ===================================
   SCROLL TO TOP BUTTON
   =================================== */
#scroll-to-top {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--primary-color);
    color: var(--white-color);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease, background-color 0.3s ease;
    z-index: 998;
}

#scroll-to-top.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

#scroll-to-top:hover {
    background-color: var(--dark-color);
    transform: translateY(-3px);
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.28);
}

@media (max-width: 768px) {
    #scroll-to-top {
        bottom: 1.25rem;
        right: 1.25rem;
        width: 42px;
        height: 42px;
        font-size: 0.9rem;
        transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease, background-color 0.3s ease, bottom 0.3s ease;
    }
    /* Remonte au-dessus de la barre sticky ATC quand elle est visible */
    body.wc-sticky-atc-active #scroll-to-top {
        bottom: calc(80px + 1rem) !important;
    }
}

/* Scroll-to-top au-dessus du cart pill (desktop + mobile) */
body.wc-cart-pill-active #scroll-to-top {
    bottom: calc(48px + 2rem + 0.75rem) !important;
}
@media (max-width: 480px) {
    body.wc-cart-pill-active #scroll-to-top {
        bottom: calc(44px + 1rem + 0.75rem) !important;
    }
}

/* ===================================
   21. ACCESSIBILITY (Migrated from main.css)
   =================================== */

/* Skip link */
.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background-color: var(--primary-color);
    color: var(--white-color);
    padding: 0.8rem 1.5rem;
    text-decoration: none;
    font-weight: 600;
    z-index: 10000;
    transition: top 0.3s ease;
}

.skip-link:focus {
    top: 0;
    outline: 2px solid var(--dark-color);
    outline-offset: 2px;
}

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

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















/* Testimonials Carousel */
.testimonials-carousel {
    position: relative;
    overflow: hidden;
    padding: var(--space-lg) 0;
}

.testimonials-track {
    display: flex;
    flex-wrap: nowrap;
    gap: 1.5rem;
    transition: transform var(--transition-slow);
}

.testimonial-slide {
    flex-shrink: 0;
    flex-basis: 100%; /* Mobile : 1 slide */
    box-sizing: border-box;
}

/* Tablet - 2 colonnes : (100% - 1 gap) / 2 */
@media (min-width: 768px) {
    .testimonial-slide {
        flex-basis: calc(50% - 0.75rem);
    }
}

/* Desktop - 3 colonnes : (100% - 2 gaps) / 3 */
@media (min-width: 1024px) {
    .testimonial-slide {
        flex-basis: calc(33.333% - 1rem);
    }
}

/* Carte témoignage */
.testimonial-item {
    background: #ffffff;
    padding: 2rem;
    border-radius: var(--radius-md);
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.testimonial-rating {
    display: flex;
    gap: 0.2rem;
}

.testimonial-rating i {
    color: #ffc107;
    font-size: 1.1rem;
}

.testimonial-text {
    font-size: 0.95rem;
    line-height: 1.7;
    font-style: italic;
    color: #444;
    flex: 1;
    margin: 0;
}

.testimonial-author {
    font-weight: 700;
    color: #2980b9;
    font-size: 0.95rem;
}

.testimonial-position {
    color: #7f8c8d;
    font-size: 0.82rem;
}

.testimonial-source {
    margin-top: var(--space-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    color: var(--text-muted);
    font-size: var(--font-size-sm);
}

.testimonial-source img {
    width: 20px;
    height: 20px;
}

/* Carousel controls */
.carousel-controls {
    display: flex;
    justify-content: center;
    gap: var(--space-md);
    margin-top: var(--space-lg);
}

.carousel-btn {
    background: var(--primary-color);
    color: var(--white-color);
    border: none;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--transition-base);
    font-size: 1.2rem;
}

.carousel-btn:hover {
    background: var(--secondary-color);
    transform: scale(1.1);
}

.carousel-btn:disabled {
    background: var(--light-color);
    color: var(--text-muted);
    cursor: not-allowed;
    transform: scale(1);
}

.carousel-dots {
    display: flex;
    justify-content: center;
    gap: var(--space-xs);
    margin-top: var(--space-md);
}

.carousel-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--light-color);
    border: none;
    cursor: pointer;
    transition: all var(--transition-base);
}

.carousel-dot.active {
    background: var(--primary-color);
    transform: scale(1.3);
}

/* Breadcrumbs */
.breadcrumbs {
    padding: var(--space-sm) 0;
    font-size: var(--font-size-sm);
    color: var(--text-muted);
}

.breadcrumb-separator {
    margin: 0 0.5rem;
}

.breadcrumb-current {
    color: var(--text-color);
}

/* Reading Time */
.reading-time {
    color: var(--text-muted);
    font-size: var(--font-size-sm);
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

/* Author Bio */
.author-bio {
    margin-top: var(--space-xl);
    padding: var(--space-lg);
    background: var(--bg-section);
    border-radius: var(--radius-md);
    border-left: 4px solid var(--primary-color);
}

.author-bio-wrapper {
    display: flex;
    gap: var(--space-lg);
    align-items: flex-start;
}

.author-avatar {
    flex-shrink: 0;
}

.author-avatar img {
    border-radius: 50%;
    border: 3px solid var(--primary-color);
    width: 100px;
    height: 100px;
    object-fit: cover;
}

.author-info {
    flex: 1;
}

.author-info h3 {
    margin: 0 0 var(--space-xs) 0;
    color: var(--text-color);
    font-size: var(--font-size-lg);
}

.author-info h3 a {
    color: var(--text-color);
    text-decoration: none;
    transition: color var(--transition-base);
}

.author-info h3 a:hover {
    color: var(--primary-color);
}

/* ===================================
   DROPDOWN NAVIGATION
   =================================== */

/* Évite le retour à la ligne sur les liens du menu principal */
#main-header nav > ul > li > a {
    white-space: nowrap;
}

#main-header nav > ul > li {
    position: relative;
}

/* Sous-menu : toujours flex column, masqué via opacity/visibility */
#main-header nav > ul > li > .sub-menu {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    background: #fff;
    min-width: 220px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    border-radius: 6px;
    border-top: 3px solid var(--primary-color);
    z-index: 9999;
    padding: 0.5rem 0;
    /* Masqué par défaut */
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease, visibility 0.15s ease;
}

/* Afficher au survol — géré par JS via classe .is-open */
#main-header nav > ul > li.is-open > .sub-menu {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}

/* Items du sous-menu */
#main-header nav > ul > li > .sub-menu > li {
    width: 100%;
    margin: 0;
}

#main-header nav > ul > li > .sub-menu > li > a {
    padding: 0.7rem 1.25rem;
    color: var(--dark-color);
    font-size: 0.9rem;
    border-bottom: 1px solid #f0f0f0;
    white-space: nowrap;
    transition: background 0.2s, color 0.2s;
    display: block;
    font-weight: 400;
}

#main-header nav > ul > li > .sub-menu > li:last-child > a {
    border-bottom: none;
}

#main-header nav > ul > li > .sub-menu > li > a:hover {
    background: #f8f9fa;
    color: var(--primary-color);
    padding-left: 1.5rem;
}

/* Indicateur flèche sur les items parent */
#main-header nav > ul > li:has(> .sub-menu) > a::after {
    content: ' ▾';
    font-size: 0.75em;
    vertical-align: middle;
    opacity: 0.7;
}

/* Bouton CTA "Devis Gratuit" dans le menu */
#main-header nav > ul > li.btn-header > a {
    background: var(--primary-color);
    color: #fff !important;
    border-radius: 6px;
    padding: 0.55rem 1.1rem;
    margin-left: 0.5rem;
    transition: background 0.2s;
}
#main-header nav > ul > li.btn-header > a:hover {
    background: var(--dark-color);
}

/* Mobile : sous-menu en bloc, masqué par défaut */
@media (max-width: 768px) {
    #main-header nav > ul > li > .sub-menu {
        position: static;
        visibility: visible;
        opacity: 1;
        pointer-events: auto;
        display: none;
        box-shadow: none;
        border-top: none;
        border-left: 3px solid var(--primary-color);
        border-radius: 0;
        background: #f8f9fa;
        padding: 0;
        min-width: unset;
        transition: none;
    }

    #main-header nav > ul > li.is-open > .sub-menu {
        display: flex;
    }

    #main-header nav > ul > li > .sub-menu > li > a {
        padding: 0.75rem 2.5rem;
        font-size: 0.88rem;
        border-bottom: 1px solid var(--light-color);
    }
}

/* ===================================
   RÉALISATIONS — ARCHIVE & SINGLE
   =================================== */

.realisations-header { text-align: center; margin-bottom: 2rem; }
.realisations-header h1 { font-size: var(--font-size-xl); color: var(--dark-color); margin-bottom: 0.5rem; }

/* Filtres */
.realisations-filters { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; margin-bottom: 2.5rem; }
.filter-btn { background: #f0f4f8; border: 2px solid transparent; border-radius: 50px; padding: 0.45rem 1.1rem; font-size: 0.875rem; font-weight: 600; color: var(--dark-color); cursor: pointer; transition: all 0.2s; }
.filter-btn:hover, .filter-btn.active { background: var(--primary-color); color: #fff; border-color: var(--primary-color); }

/* Grille */
.realisations-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.75rem; margin-bottom: 3rem; }
@media (max-width: 900px) { .realisations-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 580px) { .realisations-grid { grid-template-columns: 1fr; } }

/* Carte */
.realisation-card { background: #fff; border-radius: 10px; box-shadow: var(--shadow); overflow: hidden; transition: transform 0.25s, box-shadow 0.25s; }
.realisation-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); }
.realisation-card-link { text-decoration: none; color: inherit; display: block; }
.realisation-card-img { position: relative; overflow: hidden; aspect-ratio: 16 / 10; }
.realisation-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.35s; }
.realisation-card:hover .realisation-card-img img { transform: scale(1.05); }
.realisation-card-overlay { position: absolute; inset: 0; background: rgba(41,128,185,0.82); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.25s; }
.realisation-card:hover .realisation-card-overlay { opacity: 1; }
.realisation-card-overlay span { color: #fff; font-weight: 700; font-size: 1rem; }
.realisation-card-body { padding: 1.1rem 1.25rem 1.25rem; }
.realisation-card-title { font-size: 1.05rem; color: var(--dark-color); margin: 0 0 0.4rem; }
.realisation-card-client { font-size: 0.875rem; color: var(--text-muted); margin: 0 0 0.6rem; }
.realisation-card-tags { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.realisation-card-tags .tag { background: #eaf3fb; color: var(--primary-color); font-size: 0.75rem; font-weight: 600; padding: 0.2rem 0.6rem; border-radius: 50px; }

/* Single */
.single-realisation { padding-bottom: 4rem; }
.realisation-hero-img {
    width: 100%;
    height: 520px;
    overflow: hidden;
}
.realisation-hero-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block;
}
.realisation-inner { display: grid; grid-template-columns: 1fr 300px; gap: 3rem; margin-top: 2rem; align-items: start; }
@media (max-width: 768px) { .realisation-inner { grid-template-columns: 1fr; } }
.realisation-title { font-size: var(--font-size-xl); color: var(--dark-color); margin-bottom: 1.5rem; }

/* Sidebar meta */
.realisation-meta-box { background: #f8f9fa; border-radius: 10px; padding: 1.5rem; border-top: 4px solid var(--primary-color); position: sticky; top: 100px; }
.realisation-meta-box h3 { font-size: 1rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--primary-color); margin-bottom: 1rem; }
.realisation-meta-row { display: flex; flex-direction: column; gap: 0.2rem; padding: 0.75rem 0; border-bottom: 1px solid #e9ecef; }
.realisation-meta-row:last-child { border-bottom: none; }
.meta-label { font-size: 0.8rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.meta-value { font-size: 0.95rem; color: var(--dark-color); }
.meta-value a { color: var(--primary-color); text-decoration: none; }
.realisation-meta-cta { margin-top: 0.5rem; }
.realisation-meta-cta .btn { width: 100%; text-align: center; display: block; }
.realisation-back { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--light-color); }

/* --- Miniature screenshot ------------------------------------ */
.realisation-screenshot-preview {
    margin-top: 2.5rem;
    padding-top: 2rem;
    border-top: 1px solid var(--light-color);
}

.screenshot-label {
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    margin-bottom: 0.75rem;
}

.screenshot-thumb-btn {
    position: relative;
    display: block;
    width: 100%;
    border: none;
    padding: 0;
    cursor: pointer;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: var(--shadow);
    transition: box-shadow 0.2s;
    background: none;
}

.screenshot-thumb-btn:hover {
    box-shadow: var(--shadow-hover);
}

.screenshot-thumb-btn img {
    width: 100%;
    height: auto;
    display: block;
}

.screenshot-zoom-icon {
    position: absolute;
    inset: 0;
    background: rgba(41, 128, 185, 0.75);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    color: #fff;
    font-weight: 600;
    font-size: 0.95rem;
    opacity: 0;
    transition: opacity 0.2s;
}

.screenshot-zoom-icon i {
    font-size: 1.8rem;
}

.screenshot-thumb-btn:hover .screenshot-zoom-icon {
    opacity: 1;
}

/* --- Modal screenshot --------------------------------------- */
.screenshot-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 99999;
}

.screenshot-modal.is-open {
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.screenshot-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.88);
}

.screenshot-modal-inner {
    position: relative;
    z-index: 1;
    width: 90vw;
    max-width: 1400px;
    margin: 2rem auto;
    display: flex;
    flex-direction: column;
}

.screenshot-modal-close {
    align-self: flex-end;
    background: #fff;
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    font-size: 1.1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.75rem;
    color: var(--dark-color);
    transition: background 0.2s, color 0.2s;
    flex-shrink: 0;
}

.screenshot-modal-close:hover {
    background: var(--primary-color);
    color: #fff;
}

.screenshot-modal-scroll {
    max-height: 85vh;
    overflow-y: auto;
    border-radius: 8px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}

.screenshot-modal-scroll img {
    width: 100%;
    height: auto;
    display: block;
}
.btn-outline { background: transparent; border: 2px solid var(--primary-color); color: var(--primary-color); }
.btn-outline:hover { background: var(--primary-color); color: #fff; }

/* --- Modules liés ------------------------------------------- */
.realisation-modules-box {
    margin-top: 1.5rem;
    background: #f8f9fa;
    border-radius: 10px;
    padding: 1.25rem 1.5rem;
    border-top: 4px solid var(--dark-color);
}

.realisation-modules-box h3 {
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--dark-color);
    margin-bottom: 1rem;
}

.realisation-modules-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.realisation-module-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 0.6rem 0.75rem;
    transition: box-shadow 0.2s ease;
}

.realisation-module-item:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.module-icon {
    width: 30px;
    height: 30px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 0.85rem;
    color: #fff;
}

.module-item--shop .module-icon  { background: var(--primary-color); }
.module-item--github .module-icon { background: #24292e; }

.module-info {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    gap: 0.15rem;
}

.module-name {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--dark-color);
    line-height: 1.3;
}

.module-badge {
    font-size: 0.72rem;
    font-weight: 500;
    line-height: 1;
}

.module-item--shop  .module-badge { color: var(--primary-color); }
.module-item--github .module-badge { color: #6c757d; }

.module-link {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 0.75rem;
    color: #6c757d;
    background: #f1f3f5;
    transition: background 0.2s ease, color 0.2s ease;
    text-decoration: none;
}

.module-item--shop .module-link:hover  { background: var(--primary-color); color: #fff; }
.module-item--github .module-link:hover { background: #24292e; color: #fff; }