:root {
    --blue: #00b4ff;
    --blue-dark: #0077cc;
    --orange: #ff8c00;
    --orange-bright: #ffaa00;
    --bg: #f7fbff;
    --card: #ffffff;
    --text: #1a2a3a;
    --muted: #5a6a7a;
    --glow: rgba(0, 180, 255, 0.35);
    --radius: 18px;
    --shadow: 0 10px 30px rgba(0, 100, 180, 0.08);
    --shadow-hover: 0 18px 40px rgba(0, 100, 180, 0.15);
}

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Poppins', sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.6;
    overflow-x: hidden;
}

/* Filet de sécurité : sur un thème actif dont les styles globaux ciblent h1-h6 directement
   (ex. theme.json d'un thème par blocs définissant sa propre police de titres), cette règle a la
   même spécificité que body{font-family} ci-dessus et peut gagner selon l'ordre de chargement —
   repéré en comparant visuellement le rendu réel contre le bundle de référence (titres affichés
   dans la police du thème au lieu de Poppins). Scopé à .buzo-page pour ne jamais affecter le
   reste du site. */
.buzo-page h1, .buzo-page h2, .buzo-page h3, .buzo-page h4, .buzo-page h5, .buzo-page h6 {
    font-family: 'Poppins', sans-serif;
}

/* Circuit background */
.circuit-bg {
    position: fixed;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(circle at 20% 30%, rgba(0, 180, 255, 0.06) 0%, transparent 40%),
        radial-gradient(circle at 80% 70%, rgba(255, 140, 0, 0.05) 0%, transparent 40%),
        linear-gradient(135deg, #f7fbff 0%, #eef6ff 100%);
    pointer-events: none;
}

.circuit-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(90deg, rgba(0, 180, 255, 0.04) 1px, transparent 1px),
        linear-gradient(rgba(0, 180, 255, 0.04) 1px, transparent 1px);
    background-size: 60px 60px;
    opacity: 0.5;
}

/* Header */
header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(0, 180, 255, 0.12);
    transition: box-shadow 0.3s ease;
}

header.scrolled {
    box-shadow: 0 4px 20px rgba(0, 100, 180, 0.1);
}

.nav-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0.85rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.logo {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    text-decoration: none;
    color: var(--text);
    font-weight: 800;
    font-size: 1.35rem;
}

.logo img {
    /* Variable DÉDIÉE (--buzo-header-logo-size), volontairement séparée de --buzo-hero-logo-size
       (.mascot-big ci-dessous) — piège identique déjà rencontré dans le bundle source : les deux
       images partageaient à l'origine la même variable CSS, donc redimensionner la mascotte du
       héro depuis l'admin redimensionnait aussi ce petit logo du header, désalignant le header.
       Chaque image a son propre attribut de taille (convention "choix + taille" du bloc, voir
       bloc_Gutenberg.md), donc ses propres variables sont posées en style inline par bloc. */
    width: var(--buzo-header-logo-size, 52px);
    height: auto;
    max-height: 58px;
    object-fit: contain;
    filter: drop-shadow(0 4px 10px rgba(0, 160, 224, 0.45));
    animation: float 3s ease-in-out infinite;
}

.logo span {
    background: linear-gradient(90deg, var(--orange), var(--blue));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

nav ul {
    display: flex;
    list-style: none;
    gap: 1.8rem;
}

nav a {
    text-decoration: none;
    color: var(--muted);
    font-weight: 500;
    font-size: 0.95rem;
    position: relative;
    transition: color 0.25s;
}

nav a::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--orange), var(--blue));
    transition: width 0.3s ease;
}

nav a:hover {
    color: var(--blue-dark);
}

nav a:hover::after {
    width: 100%;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.lang-switcher {
    display: flex;
    background: rgba(0, 180, 255, 0.08);
    border-radius: 30px;
    padding: 3px;
    border: 1px solid rgba(0, 180, 255, 0.15);
}

.lang-btn {
    background: transparent;
    border: none;
    padding: 0.35rem 0.75rem;
    font-family: inherit;
    font-weight: 600;
    font-size: 0.8rem;
    color: var(--muted);
    border-radius: 25px;
    cursor: pointer;
    transition: all 0.25s ease;
}

.lang-btn:hover {
    color: var(--blue-dark);
}

.lang-btn.active {
    background: linear-gradient(135deg, var(--blue), var(--blue-dark));
    color: white;
    box-shadow: 0 3px 10px rgba(0, 140, 220, 0.35);
}

/* Cart button */
.cart-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(0, 180, 255, 0.1);
    color: var(--blue-dark);
    text-decoration: none;
    font-size: 1.15rem;
    transition: all 0.25s ease;
    border: 1px solid rgba(0, 180, 255, 0.2);
}

.cart-btn:hover {
    background: var(--blue);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 140, 220, 0.3);
}

.cart-count {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 18px;
    height: 18px;
    background: linear-gradient(135deg, var(--orange), #ff6b00);
    color: white;
    font-size: 0.7rem;
    font-weight: 700;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    box-shadow: 0 2px 6px rgba(255, 100, 0, 0.4);
    transition: transform 0.3s ease;
}

.cart-count.bump {
    transform: scale(1.35);
}

.cart-count:empty,
.cart-count[data-count="0"] {
    display: none;
}

/* contact_address peut être laissé vide par l'admin ("laisse vide pour ne rien afficher", voir
   CHP_CONFIG). L'icône est déplacée en ::before (plutôt que <i class="fas fa-map-marker-alt">
   séparé dans le HTML) pour que .contact-address:empty ci-dessous fonctionne : un <li> qui ne
   contient que du texte est un vrai nœud texte, donc réellement :empty quand {{contact_address}}
   est vide — un <i> frère dans le DOM aurait empêché :empty de matcher (même pattern que
   .optional-note:empty utilisé sur d'autres bundles du projet). Codepoint/font-family vérifiés
   contre le CDN Font Awesome 6.5.1 déjà chargé par ce bundle (fa-map-marker-alt = alias de
   fa-location-dot, \f3c5, style solide = "Font Awesome 6 Free" poids 900). */
.contact-address::before {
    content: "\f3c5";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    margin-right: 0.5em;
}

.contact-address:empty {
    display: none;
}

/* Product actions */
.product-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    margin-top: 0.4rem;
    flex-wrap: wrap;
}

.add-to-cart-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: linear-gradient(135deg, var(--blue), var(--blue-dark));
    color: white;
    border: none;
    font-family: inherit;
    font-weight: 600;
    font-size: 0.85rem;
    padding: 0.45rem 0.9rem;
    border-radius: 25px;
    cursor: pointer;
    transition: all 0.25s ease;
    box-shadow: 0 4px 12px rgba(0, 140, 220, 0.3);
}

.add-to-cart-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0, 140, 220, 0.4);
}

.add-to-cart-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
}

.add-to-cart-btn.loading {
    pointer-events: none;
    opacity: 0.8;
}

.add-to-cart-btn.loading i {
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.burger {
    display: none;
    background: none;
    border: none;
    font-size: 1.6rem;
    color: var(--blue-dark);
    cursor: pointer;
}

/* Hero */
#accueil {
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: 7rem 1.5rem 4rem;
    position: relative;
    overflow: hidden;
}

.hero-content {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 3rem;
    align-items: center;
}

.hero-text h1 {
    font-size: clamp(2.2rem, 5vw, 3.4rem);
    font-weight: 800;
    line-height: 1.15;
    margin-bottom: 1.2rem;
    background: linear-gradient(120deg, #1a2a3a 30%, var(--blue-dark));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-text h1 .highlight {
    background: linear-gradient(90deg, var(--orange), #ff5500);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-text p {
    font-size: 1.15rem;
    color: var(--muted);
    margin-bottom: 2rem;
    max-width: 520px;
}

.cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    background: linear-gradient(135deg, var(--orange), #ff6b00);
    color: white;
    font-weight: 700;
    font-size: 1.1rem;
    padding: 1rem 2rem;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    text-decoration: none;
    box-shadow: 0 8px 25px rgba(255, 140, 0, 0.4);
    transition: transform 0.3s, box-shadow 0.3s;
    animation: bounce 2.5s ease-in-out infinite;
}

.cta-btn:hover {
    transform: translateY(-4px) scale(1.03);
    box-shadow: 0 14px 35px rgba(255, 140, 0, 0.5);
    animation: none;
}

.hero-visual {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.mascot-big {
    /* --buzo-hero-logo-size posée en style inline par le bloc hero (attribut mascotSize, réglage
       admin RangeControl) — 300px = repli identique à l'ancienne valeur figée. height:auto
       (jamais fixe) pour préserver le ratio réel de l'image — voir .mascot-big img ci-dessous,
       qui doit aussi rester en height:auto en conséquence. */
    width: var(--buzo-hero-logo-size, 300px);
    height: auto;
    position: relative;
    animation: float 4s ease-in-out infinite;
}

.mascot-big img {
    width: 100%;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 20px 40px rgba(0, 160, 224, 0.4));
}

.floating-item {
    position: absolute;
    width: var(--buzo-item-size, 70px);
    height: var(--buzo-item-size, 70px);
    animation: float 3.5s ease-in-out infinite;
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.15));
}

.floating-item img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.floating-item:nth-child(2) { top: 5%; left: 0%; animation-delay: 0.5s; }
.floating-item:nth-child(3) { top: 15%; right: -5%; animation-delay: 1s; }
.floating-item:nth-child(4) { bottom: 10%; left: 5%; animation-delay: 1.5s; }
.floating-item:nth-child(5) { bottom: 20%; right: 0%; animation-delay: 0.8s; }

/* Sections */
section {
    padding: 5rem 1.5rem;
    max-width: 1200px;
    margin: 0 auto;
}

.section-title {
    text-align: center;
    margin-bottom: 3rem;
}

.section-title h2 {
    font-size: clamp(1.8rem, 4vw, 2.5rem);
    font-weight: 800;
    margin-bottom: 0.6rem;
    background: linear-gradient(90deg, var(--blue-dark), var(--orange));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.section-title p {
    color: var(--muted);
    font-size: 1.05rem;
    max-width: 600px;
    margin: 0 auto;
}

/* Services */
.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.8rem;
}

.service-card {
    background: var(--card);
    border-radius: var(--radius);
    padding: 2rem 1.8rem;
    box-shadow: var(--shadow);
    border: 1px solid rgba(0, 180, 255, 0.1);
    transition: transform 0.35s, box-shadow 0.35s;
    position: relative;
    overflow: hidden;
}

.service-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, var(--blue), var(--orange));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s ease;
}

.service-card:hover {
    transform: translateY(-10px);
    box-shadow: var(--shadow-hover);
}

.service-card:hover::before {
    transform: scaleX(1);
}

.service-icon {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, rgba(0, 180, 255, 0.15), rgba(255, 140, 0, 0.15));
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.7rem;
    margin-bottom: 1.2rem;
    color: var(--blue-dark);
}

.service-card h3 {
    font-size: 1.25rem;
    margin-bottom: 0.7rem;
    font-weight: 700;
}

.service-card p {
    color: var(--muted);
    font-size: 0.95rem;
}

/* Showcase */
#showcase {
    background: linear-gradient(180deg, transparent, rgba(0, 180, 255, 0.04), transparent);
}

.showcase-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.6rem;
}

.product-card {
    background: var(--card);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
    transition: transform 0.35s, box-shadow 0.35s;
    cursor: pointer;
}

.product-card:hover {
    transform: translateY(-12px) rotate(1deg);
    box-shadow: var(--shadow-hover);
}

.product-img {
    height: 200px;
    background: linear-gradient(135deg, #e0f7ff, #fff0e0);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    padding: 1.5rem;
}

.product-img img {
    max-width: 140px;
    max-height: 140px;
    object-fit: contain;
    transition: transform 0.4s ease;
    filter: drop-shadow(0 8px 16px rgba(0,0,0,0.12));
}

.product-card:hover .product-img img {
    transform: scale(1.12) rotate(-3deg);
}

.product-info {
    padding: 1.3rem 1.4rem 1.5rem;
}

.product-info h3 {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 0.4rem;
}

.product-info p {
    font-size: 0.88rem;
    color: var(--muted);
    margin-bottom: 0.8rem;
}

.price-tag {
    display: inline-block;
    background: linear-gradient(90deg, var(--orange), #ff6b00);
    color: white;
    font-weight: 700;
    font-size: 0.9rem;
    padding: 0.3rem 0.9rem;
    border-radius: 20px;
}

/* How it works */
.steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.5rem;
}

.step {
    background: var(--card);
    border-radius: var(--radius);
    padding: 2rem 1.5rem;
    text-align: center;
    box-shadow: var(--shadow);
    transition: transform 0.3s;
}

.step:hover {
    transform: scale(1.04);
}

.step-num {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, var(--blue), var(--orange));
    color: white;
    font-weight: 800;
    font-size: 1.3rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.1rem;
    box-shadow: 0 6px 15px rgba(0, 140, 200, 0.3);
}

.step h3 {
    font-size: 1.15rem;
    margin-bottom: 0.5rem;
}

.step p {
    font-size: 0.9rem;
    color: var(--muted);
}

/* Contact */
#contact {
    padding-bottom: 3rem;
}

.contact-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    background: var(--card);
    border-radius: 24px;
    padding: 2.5rem;
    box-shadow: var(--shadow);
    border: 1px solid rgba(0, 180, 255, 0.1);
}

.contact-info h3 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

.contact-info p {
    color: var(--muted);
    margin-bottom: 1.5rem;
}

.contact-info ul {
    list-style: none;
}

.contact-info li {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin-bottom: 1rem;
    color: var(--text);
}

.contact-info i {
    color: var(--blue);
    width: 24px;
}

/* Habillage du formulaire WPForms auto-provisionné (voir includes/wpforms-integration.php) pour
   matcher le thème visuel du site — via les variables CSS natives de WPForms plutôt qu'en
   surchargeant ses classes une à une (technique documentée dans bloc_Gutenberg.md § Habiller un
   formulaire WPForms intégré). !important nécessaire : WPForms définit ces variables inline sur
   .wpforms-container via le style de formulaire choisi dans son admin, priorité supérieure à une
   simple redéclaration en cascade. */
.contact-form-wrapper .wpforms-container {
    --wpforms-label-color: var(--text);
    --wpforms-field-text-color: var(--text);
    --wpforms-field-background-color: #fafcff;
    --wpforms-field-border-color: rgba(0, 180, 255, 0.2);
    --wpforms-field-border-radius: 12px;
    --wpforms-field-size-input-height: 52px;
    --wpforms-button-background-color: var(--blue);
    --wpforms-button-text-color: #ffffff;
    --wpforms-button-border-radius: 12px;
    --wpforms-button-size-font-size: 1.05rem;
}

.contact-form-wrapper .wpforms-field input:focus,
.contact-form-wrapper .wpforms-field textarea:focus {
    outline: none !important;
    border-color: var(--blue) !important;
    box-shadow: 0 0 0 4px var(--glow) !important;
}

.contact-form-wrapper .wpforms-submit-container button {
    width: 100%;
    font-weight: 700 !important;
    background: linear-gradient(135deg, var(--blue), var(--blue-dark)) !important;
    box-shadow: 0 6px 20px rgba(0, 140, 220, 0.35);
    transition: transform 0.25s, box-shadow 0.25s;
}

.contact-form-wrapper .wpforms-submit-container button:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 28px rgba(0, 140, 220, 0.45);
}

/* Footer */
footer {
    background: #0d1b2a;
    color: #a0b4c8;
    padding: 3rem 1.5rem 1.5rem;
    margin-top: 2rem;
}

.footer-content {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 2.5rem;
    margin-bottom: 2.5rem;
}

.footer-brand h3 {
    color: white;
    font-size: 1.4rem;
    margin-bottom: 0.8rem;
    background: linear-gradient(90deg, var(--orange), var(--blue));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.footer-brand p {
    font-size: 0.9rem;
    max-width: 320px;
}

.footer-links h4 {
    color: white;
    margin-bottom: 1rem;
    font-size: 1rem;
}

.footer-links a {
    display: block;
    color: #a0b4c8;
    text-decoration: none;
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
    transition: color 0.25s;
}

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

.socials {
    display: flex;
    gap: 0.8rem;
    margin-top: 1rem;
}

.socials a {
    width: 40px;
    height: 40px;
    background: rgba(255,255,255,0.08);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.1rem;
    transition: background 0.3s, transform 0.3s;
    text-decoration: none;
}

.socials a:hover {
    background: var(--blue);
    transform: translateY(-3px);
}

.footer-bottom {
    max-width: 1200px;
    margin: 0 auto;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255,255,255,0.08);
    text-align: center;
    font-size: 0.85rem;
}

/* Animations */
@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-12px); }
}

@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

/* Toast */
.toast {
    position: fixed;
    bottom: 30px;
    right: 30px;
    background: linear-gradient(135deg, #00c853, #00a040);
    color: white;
    padding: 1rem 1.5rem;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 160, 80, 0.4);
    font-weight: 600;
    transform: translateY(100px);
    opacity: 0;
    transition: all 0.4s ease;
    z-index: 9999;
}

.toast.show {
    transform: translateY(0);
    opacity: 1;
}

/* Responsive */
@media (max-width: 900px) {
    .hero-content {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .hero-text p {
        margin-left: auto;
        margin-right: auto;
    }
    .contact-wrapper {
        grid-template-columns: 1fr;
    }
    .footer-content {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .footer-brand p {
        margin: 0 auto;
    }
    .socials {
        justify-content: center;
    }
}

@media (max-width: 768px) {
    nav ul {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: white;
        flex-direction: column;
        padding: 1.5rem;
        gap: 1rem;
        box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    }
    nav ul.open {
        display: flex;
    }
    .burger {
        display: block;
    }
    .mascot-big {
        /* Choix : on continue de lire --buzo-hero-logo-size sur mobile plutôt que de réintroduire
           une valeur figée qui écraserait le réglage admin — seul un plafond max-width (ancienne valeur
           220px) est conservé, pour éviter qu'une très grande valeur choisie par l'admin ne
           déborde sur petit écran. Retrait de la hauteur fixe (380px→280px) : height:auto sur la
           règle de base préserve déjà le ratio à toutes les tailles d'écran. */
        max-width: 220px;
    }
    .floating-item {
        width: 50px;
        height: 50px;
    }
}

/* ========== V6: a11y, reduced-motion, product link, focus ========== */

:focus-visible {
    outline: 3px solid var(--blue);
    outline-offset: 3px;
}

.product-link {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--blue-dark);
    text-decoration: none;
    border-bottom: 1px dashed rgba(0, 119, 204, 0.4);
    transition: color 0.2s, border-color 0.2s;
}

.product-link:hover {
    color: var(--orange);
    border-color: var(--orange);
}

.product-link.is-visible {
    display: inline !important;
}

.add-to-cart-btn.is-disabled,
.add-to-cart-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
}

.cart-btn.is-loading .cart-count {
    opacity: 0.5;
}

.price-tag.is-loading {
    opacity: 0.5;
}

@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;
    }
    .mascot-big,
    .floating-item,
    .logo img,
    .cta-btn {
        animation: none !important;
    }
}

/* ========== Panier : tiroir latéral (drawer) + page dédiée ========== */

.cart-drawer-overlay {
    position: fixed;
    inset: 0;
    background: rgba(10, 20, 35, 0.45);
    backdrop-filter: blur(2px);
    z-index: 1200;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.cart-drawer-overlay.open {
    opacity: 1;
    pointer-events: auto;
}

.cart-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(420px, 100vw);
    background: var(--bg);
    box-shadow: -20px 0 50px rgba(0, 40, 80, 0.25);
    z-index: 1201;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.cart-drawer.open {
    transform: translateX(0);
}

.cart-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.3rem 1.5rem;
    border-bottom: 1px solid rgba(0, 180, 255, 0.15);
    background: var(--card);
}

.cart-drawer-header h3 {
    font-size: 1.2rem;
    font-weight: 800;
}

.cart-drawer-close {
    background: rgba(0, 180, 255, 0.1);
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    color: var(--blue-dark);
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.cart-drawer-close:hover {
    background: var(--blue);
    color: white;
}

.cart-drawer-body {
    flex: 1;
    overflow-y: auto;
    padding: 1.2rem 1.5rem;
}

.cart-drawer-footer {
    padding: 1.2rem 1.5rem 1.5rem;
    background: var(--card);
    border-top: 1px solid rgba(0, 180, 255, 0.15);
}

/* Réutilisable par le tiroir ET la page panier dédiée */
.cart-item {
    display: grid;
    grid-template-columns: 64px 1fr auto;
    gap: 0.9rem;
    align-items: center;
    padding: 0.9rem 0;
    border-bottom: 1px solid rgba(0, 100, 180, 0.08);
}

.cart-item:last-child {
    border-bottom: none;
}

.cart-item-img {
    width: 64px;
    height: 64px;
    border-radius: 12px;
    background: linear-gradient(135deg, #e0f7ff, #fff0e0);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.cart-item-img img {
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
}

.cart-item-info h4 {
    font-size: 0.92rem;
    font-weight: 700;
    margin-bottom: 0.3rem;
}

.cart-item-price {
    font-size: 0.85rem;
    color: var(--muted);
    font-weight: 600;
}

.cart-item-lowstock {
    font-size: 0.75rem;
    color: var(--orange);
    font-weight: 700;
    margin-top: 0.2rem;
}

.cart-item-qty {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.5rem;
}

.cart-qty-btn {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1px solid rgba(0, 100, 180, 0.2);
    background: white;
    color: var(--blue-dark);
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    font-size: 0.85rem;
    line-height: 1;
}

.cart-qty-btn:hover:not(:disabled) {
    background: var(--blue);
    color: white;
}

.cart-qty-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.cart-item-qty span {
    min-width: 20px;
    text-align: center;
    font-weight: 700;
    font-size: 0.9rem;
}

.cart-item-remove {
    justify-self: end;
    align-self: start;
    background: none;
    border: none;
    color: var(--muted);
    font-size: 1rem;
    cursor: pointer;
    padding: 0.3rem;
    transition: color 0.2s ease;
}

.cart-item-remove:hover {
    color: #e53935;
}

.cart-item.is-updating {
    opacity: 0.5;
    pointer-events: none;
}

.cart-empty {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--muted);
}

.cart-empty i {
    font-size: 2.5rem;
    color: rgba(0, 180, 255, 0.3);
    margin-bottom: 1rem;
    display: block;
}

.cart-empty a {
    display: inline-block;
    margin-top: 1rem;
    color: var(--blue-dark);
    font-weight: 700;
    text-decoration: none;
    border-bottom: 2px solid var(--orange);
}

.cart-loading,
.cart-error {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--muted);
}

.cart-loading i {
    font-size: 1.6rem;
    color: var(--blue);
    animation: spin 0.8s linear infinite;
    display: block;
    margin-bottom: 0.8rem;
}

.cart-drawer-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 1.05rem;
    margin-bottom: 1rem;
}

.cart-drawer-total strong {
    color: var(--blue-dark);
    font-size: 1.3rem;
}

.checkout-btn {
    display: block;
    text-align: center;
    background: linear-gradient(135deg, var(--orange), #ff6b00);
    color: white;
    font-weight: 700;
    padding: 0.85rem 1.2rem;
    border-radius: 25px;
    text-decoration: none;
    box-shadow: 0 6px 18px rgba(255, 130, 0, 0.35);
    transition: all 0.25s ease;
    margin-bottom: 0.7rem;
}

.checkout-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(255, 130, 0, 0.45);
}

.checkout-btn.is-disabled {
    opacity: 0.5;
    pointer-events: none;
}

.view-cart-link {
    display: block;
    text-align: center;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--muted);
    text-decoration: none;
}

.view-cart-link:hover {
    color: var(--blue-dark);
}

body.cart-drawer-locked {
    overflow: hidden;
}

@media (max-width: 480px) {
    .cart-drawer {
        width: 100vw;
    }
}

/* ========== Aperçu produit (modale, remplace la navigation vers la fiche native) ========== */

.product-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(10, 20, 35, 0.55);
    backdrop-filter: blur(3px);
    z-index: 1300;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}

.product-modal-overlay.open {
    opacity: 1;
    pointer-events: auto;
}

.product-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -46%) scale(0.96);
    width: min(640px, calc(100vw - 2.4rem));
    max-height: min(680px, calc(100vh - 3rem));
    overflow-y: auto;
    background: var(--card);
    border-radius: var(--radius);
    box-shadow: 0 30px 70px rgba(0, 40, 80, 0.35);
    z-index: 1301;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.product-modal.open {
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, -50%) scale(1);
}

.product-modal-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: rgba(0, 180, 255, 0.1);
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    color: var(--blue-dark);
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.2s ease;
    z-index: 2;
}

.product-modal-close:hover {
    background: var(--blue);
    color: white;
}

.product-modal-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
}

.product-modal-media {
    background: linear-gradient(135deg, #e0f7ff, #fff0e0);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2.4rem;
    min-height: 260px;
}

.product-modal-media img {
    max-width: 100%;
    max-height: 220px;
    object-fit: contain;
    filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.12));
}

.product-modal-info {
    padding: 2.2rem 2rem;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.product-modal-info h3 {
    font-size: 1.4rem;
    font-weight: 800;
    padding-right: 2rem;
}

.product-modal-rating {
    color: var(--orange);
    font-size: 0.85rem;
    font-weight: 600;
}

.product-modal-desc {
    color: var(--muted);
    font-size: 0.95rem;
    line-height: 1.6;
}

.product-modal-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 0.4rem;
    flex-wrap: wrap;
}

.product-modal-actions .price-tag {
    font-size: 1.05rem;
    padding: 0.4rem 1rem;
}

.product-modal-full-link {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--blue-dark);
    text-decoration: none;
    border-bottom: 1px dashed rgba(0, 119, 204, 0.4);
    transition: color 0.2s, border-color 0.2s;
    margin-top: 0.2rem;
}

.product-modal-full-link:hover {
    color: var(--orange);
    border-color: var(--orange);
}

body.product-modal-open {
    overflow: hidden;
}

@media (max-width: 640px) {
    .product-modal-body {
        grid-template-columns: 1fr;
    }

    .product-modal-media {
        min-height: 180px;
        padding: 1.6rem;
    }

    .product-modal {
        top: auto;
        bottom: 0;
        left: 0;
        transform: translateY(100%);
        width: 100%;
        max-height: 88vh;
        border-radius: var(--radius) var(--radius) 0 0;
    }

    .product-modal.open {
        transform: translateY(0);
    }
}

/* Page panier dédiée (pleine page, même structure de carte que le tiroir) */
.cart-page-section {
    max-width: 760px;
    margin: 0 auto;
    padding: 8.5rem 1.5rem 5rem;
}

.cart-page-section h1 {
    font-size: 2.1rem;
    font-weight: 800;
    margin-bottom: 0.4rem;
}

.cart-page-section > p.cart-page-subtitle {
    color: var(--muted);
    margin-bottom: 2rem;
}

.cart-page-card {
    background: var(--card);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 1.5rem 1.8rem;
}

.cart-page-card .cart-item {
    grid-template-columns: 80px 1fr auto;
}

.cart-page-card .cart-item-img {
    width: 80px;
    height: 80px;
}

.cart-page-summary {
    margin-top: 1.5rem;
    padding-top: 1.3rem;
    border-top: 1px solid rgba(0, 100, 180, 0.12);
}

.cart-page-summary .cart-drawer-total {
    font-size: 1.2rem;
    margin-bottom: 1.2rem;
}

.cart-page-summary .checkout-btn {
    max-width: 320px;
    margin-left: auto;
    margin-right: auto;
}

.back-to-shop {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 1.5rem;
    color: var(--blue-dark);
    font-weight: 600;
    text-decoration: none;
    font-size: 0.9rem;
}

.back-to-shop:hover {
    color: var(--orange);
}

/* Fiche produit WooCommerce native (templates/single-product.php) — le header/footer viennent du
   même bloc que sur l'accueil (déjà stylés ci-dessus), seul le contenu du produit lui-même
   (galerie/prix/bouton panier générés par WooCommerce) a besoin d'un habillage pour matcher le
   reste du site. Pas de max-width via un Group Gutenberg ici (page rendue en PHP simple, pas un
   vrai bloc core/group) — donc défini explicitement. */
/* IMPORTANT : le correctif ci-dessous ne doit PAS aller sur .buzo-product-page — ce wrapper
   enveloppe le header ET le footer, pas seulement le contenu central. Sur la page d'accueil (un
   vrai bloc Group Gutenberg, align:"full" + layout:"constrained"/contentSize:1200px), seuls les
   enfants SANS align:"full" (hero/services/showcase/contact) sont resserrés à 1200px — header et
   footer (marqués align:"full") restent volontairement pleine largeur (100vw), grâce au CSS généré
   automatiquement par Gutenberg pour ce type de bloc. templates/single-product.php et
   templates/archive-product.php ne sont PAS de vrais blocs Group (juste un <div> écrit à la main) —
   aucun CSS de ce genre n'est généré. Mettre max-width sur le wrapper entier (comme fait
   initialement) resserrait donc AUSSI le header/footer, contrairement à l'accueil — repéré sur une
   capture d'écran comparative envoyée par l'utilisateur (footer visiblement plus étroit que sur
   l'accueil). Corrigé en limitant la largeur au SEUL contenu central (.buzo-product-main), jamais
   au wrapper .buzo-product-page — le header/footer héritent alors naturellement de la pleine
   largeur du <body>, comme sur l'accueil. */
.buzo-product-main {
    max-width: 1200px;
    margin: 0 auto;
    padding: 3rem 24px;
}

.buzo-product-main .woocommerce-notices-wrapper:empty {
    display: none;
}

/* !important nécessaire ci-dessous : même piège que la grille boutique (voir bloc_Gutenberg.md) —
   woocommerce-layout.css force `float:left/right; width:48%` sur .images/.summary (classes encore
   présentes sur le HTML moderne : la galerie porte bien une classe "images", le résumé une classe
   "summary", héritage des très anciens gabarits WooCommerce) et se charge après frontend.css. Sans
   ce correctif, la galerie et le résumé restent à 48% de large chacun À L'INTÉRIEUR de leur cellule
   de grille CSS, au lieu de la remplir — effet visuel "pas pleine largeur". */
.buzo-product-main div.product {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 3rem;
    background: var(--card);
    border-radius: 24px;
    padding: 2.5rem;
    box-shadow: var(--shadow);
    border: 1px solid rgba(0, 180, 255, 0.1);
}

.buzo-product-main div.product > .woocommerce-product-gallery,
.buzo-product-main div.product > .summary {
    float: none !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    clear: none !important;
    box-sizing: border-box !important;
}

.buzo-product-main .woocommerce-product-gallery__image img {
    border-radius: var(--radius);
}

.buzo-product-main .product_title {
    font-family: 'Poppins', sans-serif;
    font-size: 1.8rem;
    margin-bottom: 0.5rem;
}

.buzo-product-main .price {
    color: var(--blue-dark);
    font-size: 1.4rem;
    font-weight: 700;
}

.buzo-product-main .single_add_to_cart_button,
.buzo-product-main button.button {
    background: linear-gradient(135deg, var(--blue), var(--blue-dark)) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 12px !important;
    font-weight: 700 !important;
    padding: 1rem 1.8rem !important;
    box-shadow: 0 6px 20px rgba(0, 140, 220, 0.35);
    transition: transform 0.25s, box-shadow 0.25s;
}

.buzo-product-main .single_add_to_cart_button:hover,
.buzo-product-main button.button:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 28px rgba(0, 140, 220, 0.45);
}

.buzo-product-main .woocommerce-tabs ul.tabs li.active a,
.buzo-product-main .woocommerce-tabs ul.tabs li a:hover {
    color: var(--blue-dark);
}

.buzo-product-main .related.products {
    margin-top: 3rem;
}

.buzo-product-main .related.products > h2 {
    font-family: 'Poppins', sans-serif;
    margin-bottom: 1.5rem;
}

/* Les produits liés (bas de fiche produit) réutilisent le même markup ul.products/li.product que
   la grille boutique — même conflit de cascade avec woocommerce-layout.css, même correctif. */
.buzo-product-main .related.products ul.products {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 1.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.buzo-product-main .related.products ul.products li.product {
    float: none !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

@media (max-width: 768px) {
    .buzo-product-main div.product {
        grid-template-columns: 1fr !important;
        padding: 1.5rem;
        gap: 1.5rem;
    }
}

/* Boutique / catégories produit (templates/archive-product.php) — grille de fiches produit,
   habillée dans le même esprit que .showcase-grid de la page d'accueil. */
.buzo-shop-main .woocommerce-products-header__title {
    font-family: 'Poppins', sans-serif;
    font-size: 2rem;
    margin-bottom: 1.5rem;
}

/* !important nécessaire ci-dessous : le CSS natif de WooCommerce (woocommerce-layout.css) impose
   `.woocommerce ul.products li.product{float:left;width:22.05%;margin:0 3.8% ...}` — une grille par
   float/pourcentages, en conflit direct avec la grille CSS ci-dessous. Comme buzology3d-blocks se
   charge avant woocommerce (ordre alphabétique des dossiers de plugins — même piège que celui déjà
   rencontré pour wc-single-product.js, voir plus haut), le CSS de WooCommerce s'imprime APRÈS le
   nôtre dans le <head> et gagne les propriétés en conflit à spécificité égale — d'où l'effet
   rapporté "pas pleine largeur" (chaque carte reste coincée à 22.05% de large alors que sa cellule
   de grille en fait ~25%, laissant un vide). Plutôt que rejouer la course de priorité de hook déjà
   vue pour le JS, !important règle ça une fois pour toutes ici, sans dépendre de l'ordre de
   chargement. */
.buzo-shop-main ul.products {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 2rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* min-width:0 !important nécessaire : par défaut, un item de grille CSS a min-width:auto, ce qui
   respecte la taille minimale de son CONTENU (ex. le badge "Quack ergo sum" en position absolue,
   ou un titre de produit qui ne peut pas se casser) plutôt que de se laisser comprimer à la largeur
   de sa piste de grille — pouvait rendre une carte visiblement plus large que ses voisines malgré
   des pistes de grille définies à taille égale (repeat(4,1fr)). */
.buzo-shop-main ul.products li.product {
    float: none !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    background: var(--card);
    border-radius: var(--radius);
    padding: 1.5rem;
    box-shadow: var(--shadow);
    border: 1px solid rgba(0, 180, 255, 0.1);
    text-align: center;
    transition: transform 0.25s, box-shadow 0.25s;
}

.buzo-shop-main ul.products li.product:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-hover);
}

.buzo-shop-main ul.products li.product img {
    border-radius: 12px;
    margin-bottom: 1rem;
}

.buzo-shop-main ul.products li.product .woocommerce-loop-product__title {
    font-family: 'Poppins', sans-serif;
    font-size: 1.05rem;
    margin-bottom: 0.4rem;
}

.buzo-shop-main ul.products li.product .price {
    color: var(--blue-dark);
    font-weight: 700;
}

.buzo-shop-main ul.products li.product .button {
    display: inline-block;
    margin-top: 1rem;
    background: linear-gradient(135deg, var(--blue), var(--blue-dark));
    color: #fff;
    border: none;
    border-radius: 12px;
    font-weight: 700;
    padding: 0.7rem 1.4rem;
    text-decoration: none;
}

.buzo-shop-main .woocommerce-result-count,
.buzo-shop-main .woocommerce-ordering {
    color: var(--muted);
    margin-bottom: 1.5rem;
}

.buzo-shop-main nav.woocommerce-pagination {
    margin-top: 2.5rem;
    text-align: center;
}

.buzo-shop-main nav.woocommerce-pagination .page-numbers li {
    display: inline-block;
}

.buzo-shop-main nav.woocommerce-pagination a,
.buzo-shop-main nav.woocommerce-pagination span {
    display: inline-block;
    padding: 0.5rem 0.9rem;
    margin: 0 0.2rem;
    border-radius: 8px;
    color: var(--text);
    text-decoration: none;
}

.buzo-shop-main nav.woocommerce-pagination .current {
    background: var(--blue);
    color: #fff;
}

@media (max-width: 992px) {
    .buzo-shop-main ul.products {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 576px) {
    .buzo-shop-main ul.products {
        grid-template-columns: 1fr !important;
    }
}