/*
Theme Name: Synthocode E-Commerce AI
Theme URI: https://ecommerce-ai.synthocode.studio
Author: Slim Belhadj
Author URI: https://synthocode.studio/
Description: A fast, lightweight Full Site Editing e-commerce theme for WooCommerce. 100% Gutenberg, no page builder, Core Web Vitals 95+ target, 9 one-click style variations. Designed to pair with the optional free Synthocode AI Companion plugin for automated product descriptions and visuals. The theme works fully on its own.
Version: 1.0.1
Requires at least: 6.5
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: synthocode-e-commerce-ai
Tags: full-site-editing, block-styles, block-patterns, e-commerce, translation-ready, custom-colors, custom-logo, featured-images, threaded-comments, wide-blocks

Synthocode E-Commerce AI is distributed under the terms of the GNU GPL v2 or later.
*/

/* SYNTHOCODE-BUILD-MARKER: ECAI-1.0.1 */

html {
    scrollbar-gutter: stable;
}

:root {
    /* Tokens de marque — derives des presets theme.json pour suivre la variation de style active */
    --sc-accent: var(--wp--preset--color--accent-neon, #6d4aff);
    --sc-accent-deep: var(--wp--preset--color--accent-ai, #5a37e0);
    --sc-accent-soft: var(--wp--preset--color--accent-soft, #f1edff);
    --sc-border: var(--wp--preset--color--line, #e8e8ee);
    --sc-accent-light: color-mix(in srgb, var(--sc-accent) 60%, #ffffff);
    --sc-accent-darker: color-mix(in srgb, var(--sc-accent-deep) 78%, #000000);
    --sc-ink: color-mix(in srgb, var(--sc-accent-deep) 85%, transparent);
    /* Halos (depuis l'accent) */
    --sc-glow-12: color-mix(in srgb, var(--sc-accent) 12%, transparent);
    --sc-glow-16: color-mix(in srgb, var(--sc-accent) 16%, transparent);
    --sc-glow-22: color-mix(in srgb, var(--sc-accent) 22%, transparent);
    --sc-glow-35: color-mix(in srgb, var(--sc-accent) 35%, transparent);
    --sc-glow-45: color-mix(in srgb, var(--sc-accent) 45%, transparent);
    --sc-glow-55: color-mix(in srgb, var(--sc-accent) 55%, transparent);
    --sc-glow-60: color-mix(in srgb, var(--sc-accent) 60%, transparent);
    /* Ombres profondes (depuis l'accent fonce) */
    --sc-shadow-10: color-mix(in srgb, var(--sc-accent-deep) 10%, transparent);
    --sc-shadow-15: color-mix(in srgb, var(--sc-accent-deep) 15%, transparent);
    --sc-shadow-20: color-mix(in srgb, var(--sc-accent-deep) 20%, transparent);
    --sc-shadow-25: color-mix(in srgb, var(--sc-accent-deep) 25%, transparent);
    --sc-shadow-28: color-mix(in srgb, var(--sc-accent-deep) 28%, transparent);
    --sc-shadow-30: color-mix(in srgb, var(--sc-accent-deep) 30%, transparent);
    --sc-shadow-40: color-mix(in srgb, var(--sc-accent-deep) 40%, transparent);
    --sc-shadow-55: color-mix(in srgb, var(--sc-accent-deep) 55%, transparent);
    --synthocode-focus-ring: 0 0 0 3px var(--sc-glow-35);
}

*:focus-visible {
    outline: none;
    box-shadow: var(--synthocode-focus-ring);
}

body.admin-bar .wp-site-blocks {
    padding-top: 32px;
}

@media screen and (max-width: 782px) {
    body.admin-bar .wp-site-blocks {
        padding-top: 46px;
    }
}

.wp-site-blocks {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.wp-site-blocks>footer {
    margin-top: auto;
}

.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    word-wrap: normal !important;
}

.screen-reader-text:focus {
    background-color: #fff;
    clip: auto;
    clip-path: none;
    color: #0a0a0f;
    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;
}

/* =========================================================================
    Synthocode — Couche de design
   ========================================================================= */

@media (prefers-reduced-motion: no-preference) {

    .sc-card,
    .sc-btn-primary .wp-block-button__link,
    .sc-btn-ghost .wp-block-button__link,
    .wp-block-woocommerce-product-template li,
    .wc-block-grid__product {
        transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, background-color .2s ease, color .2s ease;
    }
}

.sc-eyebrow {
    display: table;
    margin-inline: auto;
    margin-block: 0 1.5rem;
    padding: 0.4rem 0.9rem;
    font-family: var(--wp--preset--font-family--mono);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--sc-accent);
    border: 1px solid color-mix(in srgb, var(--sc-accent) 22%, transparent);
    border-radius: 999px;
    background: var(--sc-accent-soft);
}

.sc-hero {
    position: relative;
    overflow: hidden;
    background: var(--wp--preset--color--base);
}

.sc-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(60% 50% at 50% -5%, var(--sc-glow-16), transparent 70%),
        radial-gradient(45% 55% at 88% 110%, var(--sc-glow-12), transparent 72%);
}

.sc-hero>* {
    position: relative;
    z-index: 1;
}

.sc-hero-title {
    color: var(--wp--preset--color--contrast);
    -webkit-text-fill-color: var(--wp--preset--color--contrast);
}

.sc-hero-title .sc-grad {
    color: var(--sc-accent);
    -webkit-text-fill-color: var(--sc-accent);
    font-style: italic;
}

/* --- Cartes "feature" 3D --------------------------------------------- */
.sc-cards-3d {
    display: flex;
    flex-wrap: wrap;
    gap: 2.75rem 2rem;
    justify-content: center;
    margin-top: 1rem;
}

.sc-cards-3d .parent {
    width: 290px;
    height: 300px;
    perspective: 1000px;
}

.sc-cards-3d .card {
    position: relative;
    height: 100%;
    border-radius: 50px;
    background: linear-gradient(135deg, var(--sc-accent-light) 0%, var(--sc-accent-deep) 100%);
    transition: all 0.5s ease-in-out;
    transform-style: preserve-3d;
    box-shadow: transparent 40px 50px 25px -40px, var(--sc-shadow-20) 0px 25px 25px -5px;
}

.sc-cards-3d .glass {
    transform-style: preserve-3d;
    position: absolute;
    inset: 8px;
    border-radius: 55px;
    border-top-right-radius: 100%;
    background: linear-gradient(0deg, rgba(255, 255, 255, 0.349) 0%, rgba(255, 255, 255, 0.815) 100%);
    transform: translate3d(0, 0, 25px);
    border-left: 1px solid white;
    border-bottom: 1px solid white;
    transition: all 0.5s ease-in-out;
}

.sc-cards-3d .content {
    position: relative;
    padding: 40px 32px 36px 32px;
    transform: translate3d(0, 0, 26px);
}

.sc-cards-3d .content .title {
    display: block;
    color: var(--sc-accent-deep);
    font-family: var(--wp--preset--font-family--display, inherit);
    font-weight: 900;
    font-size: 20px;
    line-height: 1.2;
}

.sc-cards-3d .content .text {
    display: block;
    color: var(--sc-ink);
    font-size: 14px;
    line-height: 1.5;
    margin-top: 16px;
}

.sc-cards-3d .parent:hover .card {
    transform: rotate3d(1, 1, 0, 30deg);
    box-shadow: var(--sc-shadow-30) 30px 50px 25px -40px, var(--sc-shadow-10) 0px 25px 30px 0px;
}

@media (prefers-reduced-motion: reduce) {

    .sc-cards-3d .card,
    .sc-cards-3d .parent:hover .card {
        transition: none;
    }

    .sc-cards-3d .parent:hover .card {
        transform: none;
    }
}

/* --- Boutons de structure et utilitaires ---------------------------- */
.sc-btn-primary .wp-block-button__link {
    background: var(--sc-accent);
    color: #ffffff;
    border: none;
    box-shadow: 0 10px 24px -6px var(--sc-glow-45);
}

.sc-btn-primary .wp-block-button__link:hover {
    background: var(--sc-accent-deep);
    transform: translateY(-2px);
    box-shadow: 0 14px 32px -6px var(--sc-glow-55);
}

.sc-btn-ghost .wp-block-button__link {
    background: var(--wp--preset--color--surface);
    color: var(--wp--preset--color--contrast);
    border: 1px solid var(--sc-border);
}

.sc-btn-ghost .wp-block-button__link:hover {
    transform: translateY(-2px);
    border-color: var(--sc-accent);
    background: var(--sc-accent-soft);
    color: var(--sc-accent);
}

.wp-block-woocommerce-product-template li:hover,
.wc-block-grid__product:hover {
    transform: translateY(-4px);
}

.wp-block-woocommerce-product-template img,
.wc-block-grid__product img {
    border-radius: 0.75rem;
}

.wp-block-woocommerce-product-template li:hover img {
    box-shadow: 0 16px 32px -10px rgba(20, 20, 40, 0.22);
}

/* Appareils tactiles (sans vrai survol) : on neutralise les effets de :hover
   qui restent "colles" au tap et provoquent un va-et-vient au clic. */
@media (hover: none) {

    .wp-block-woocommerce-product-template li:hover,
    .wc-block-grid__product:hover,
    .sc-btn-primary .wp-block-button__link:hover,
    .sc-btn-ghost .wp-block-button__link:hover,
    .sc-cards-3d .parent:hover .card {
        transform: none !important;
    }

    .wp-block-woocommerce-product-template li:hover img,
    .wc-block-grid__product:hover img {
        box-shadow: none !important;
    }
}

.wp-block-template-part .wp-block-navigation-item a:hover {
    color: var(--sc-accent);
}

header.wp-block-group .wp-block-site-title a,
header.wp-block-group .wp-block-navigation-item a,
header.wp-block-group .wp-block-navigation-item .wp-block-navigation-item__content,
header.wp-block-group .wc-block-mini-cart__button {
    color: var(--wp--preset--color--contrast) !important;
}

header.wp-block-group .wp-block-navigation-item a:hover,
header.wp-block-group .wc-block-mini-cart__button:hover {
    color: var(--sc-accent) !important;
}

/* Footer : couleur de defaut (token) SANS !important -> recolorable librement
   dans l'editeur ; "Reinitialiser les styles" restaure ce defaut. */
footer .wp-block-navigation-item a,
footer .wp-block-navigation-item .wp-block-navigation-item__content {
    color: var(--wp--preset--color--muted);
}

footer .wp-block-navigation-item a:hover {
    color: var(--sc-accent);
}

/* --- Menu mobile (overlay burger) ----------------------------------- */
/* Bouton burger : couleur du thème + taille (l'affichage burger vs menu
   reste gere par WordPress selon la largeur d'ecran — ne PAS forcer display) */
.sc-header .wp-block-navigation__responsive-container-open {
    color: var(--wp--preset--color--contrast);
    padding: 4px;
}

.sc-header .wp-block-navigation__responsive-container-open svg {
    width: 30px;
    height: 30px;
    fill: currentColor;
}

/* Overlay plein écran quand le menu est ouvert */
.wp-block-navigation__responsive-container.is-menu-open {
    background-color: var(--wp--preset--color--base) !important;
    color: var(--wp--preset--color--contrast) !important;
    padding: clamp(1.5rem, 7vw, 3.5rem);
}

/* Bouton fermer (X) */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
    color: var(--wp--preset--color--contrast);
    top: clamp(1.2rem, 5vw, 2rem);
    right: clamp(1.2rem, 5vw, 2rem);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close svg {
    width: 28px;
    height: 28px;
    fill: currentColor;
}

/* Liste centrée et aérée */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
    width: 100%;
    justify-content: center;
    align-items: center;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
    gap: clamp(1.1rem, 4.5vw, 2rem);
    align-items: center;
    justify-content: center;
}

/* Liens du menu mobile : grands, lisibles, dans la police de titres */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item a,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item .wp-block-navigation-item__content {
    color: var(--wp--preset--color--contrast) !important;
    font-family: var(--wp--preset--font-family--display);
    font-size: clamp(1.6rem, 8vw, 2.4rem);
    font-weight: 500;
    letter-spacing: -0.01em;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item a:hover,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item a:focus {
    color: var(--sc-accent) !important;
}

.sc-btn-primary .wp-block-button__link,
.sc-btn-ghost .wp-block-button__link {
    padding: 0.7rem 1.5rem;
    font-size: 0.95rem;
}

/* =========================================================================
    Boutons comportementaux & Boutons WooCommerce (Glossy)
   ========================================================================= */

.sc-btn-primary .wp-block-button__link,
.sc-btn-ghost .wp-block-button__link,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce .single_add_to_cart_button,
.woocommerce .checkout-button,
.wp-block-woocommerce-cart .wc-block-cart__submit-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 50px;
    padding: 0 2rem;
    border-radius: 0.625rem;
    font-family: var(--wp--preset--font-family--sans);
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    transition: all 0.2s ease;
}

/* --- Relief GLOSSY NEUTRE (translucide, color-agnostic) ---------------------
   Le fond du bouton vient de son background-color : pour les boutons de bloc
   (.wp-element-button) c'est theme.json element "button" = token cta par defaut,
   PILOTABLE via l'editeur Styles > Bouton. On ne pose ici qu'un calque de
   degrade TRANSPARENT (ombre en bas, reflet en haut) -> l'effet glossy marche
   sur n'importe quelle couleur. "Reinitialiser les styles" restaure le cta,
   donc le rendu d'origine. */
.sc-btn-primary .wp-block-button__link,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce .single_add_to_cart_button,
.woocommerce .checkout-button,
.wp-block-woocommerce-cart .wc-block-cart__submit-button {
    background-image: linear-gradient(to top, rgba(0,0,0,0.22) 0%, rgba(0,0,0,0) 40%, rgba(255,255,255,0.25) 100%) !important;
    border: 1px solid rgba(0,0,0,0.16);
    text-shadow: 0 1px rgba(0,0,0,0.22);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.18);
}

/* Fond par defaut des boutons WooCommerce CLASSIQUES (non .wp-element-button,
   donc hors de portee de theme.json) -> colores au token cta, comme avant.
   Ils suivent la variation de style, mais pas le controle natif "Bouton". */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce .single_add_to_cart_button,
.woocommerce .checkout-button,
.wp-block-woocommerce-cart .wc-block-cart__submit-button {
    background-color: var(--wp--preset--color--cta) !important;
    color: #ffffff !important;
}

/* Centrage vertical du texte : certains boutons WooCommerce classiques
   (ex. « Voir » de l'espace compte) sont mis en display:block par WC, ce qui
   colle le texte en haut. On force inline-flex pour recentrer le libelle. */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce-MyAccount-content .button,
.woocommerce .woocommerce-Button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1.2 !important;
}

.sc-btn-primary .wp-block-button__link:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce .single_add_to_cart_button:hover,
.woocommerce .checkout-button:hover,
.wp-block-woocommerce-cart .wc-block-cart__submit-button:hover {
    filter: brightness(1.07);
    box-shadow: 0 6px 16px rgba(0,0,0,0.20),
        0 2px 4px rgba(0,0,0,0.12),
        inset 0 1px 0 rgba(255,255,255,0.30);
}

.sc-btn-primary .wp-block-button__link:active,
.woocommerce a.button:active,
.woocommerce button.button:active,
.woocommerce input.button:active,
.woocommerce #respond input#submit:active,
.woocommerce .single_add_to_cart_button:active,
.woocommerce .checkout-button:active,
.wp-block-woocommerce-cart .wc-block-cart__submit-button:active {
    filter: brightness(0.95);
    box-shadow: inset 0 2px 6px rgba(0,0,0,0.32);
}

/* --- Version Argentée (Boutons secondaires du thème) --- */
.sc-btn-ghost .wp-block-button__link {
    background-image: linear-gradient(to top, #D8D9DB 0%, #ffffff 80%, #FDFDFD 100%) !important;
    color: #606060 !important;
    border: 1px solid #8F9092 !important;
    text-shadow: 0 1px #ffffff;
    box-shadow: none;
}

.sc-btn-ghost .wp-block-button__link:hover {
    box-shadow: 0 4px 3px 1px #FCFCFC, 0 6px 8px #D6D7D9, 0 -4px 4px #CECFD1, 0 -6px 4px #FEFEFE, inset 0 0 3px 3px #CECFD1;
}

.sc-btn-ghost .wp-block-button__link:active,
.sc-btn-ghost .wp-block-button__link:focus {
    box-shadow: 0 4px 3px 1px #FCFCFC, 0 6px 8px #D6D7D9, 0 -4px 4px #CECFD1, 0 -6px 4px #FEFEFE, inset 0 0 5px 3px #999, inset 0 0 30px #aaa;
    color: #606060 !important;
}

/* =========================================================================
    UNIFICATION « Ajouter au panier » (grille produits)
    Les boutons des blocs product-collection / product-template rendent en
    .wc-block-components-product-button .wp-block-button__link et heritent du
    style PLAT de theme.json (woocommerce/product-button, rayon 0.625rem).
    On leur applique le MEME skin glossy violet que les autres boutons du theme
    (.single_add_to_cart_button, .checkout-button...). Les verrous de hauteur
    anti-decalage (height:3rem) restent definis plus bas et ne sont pas touches.
   ========================================================================= */
.wc-block-product-template .wc-block-components-product-button .wp-block-button__link,
.wp-block-woocommerce-product-template .wc-block-components-product-button .wp-block-button__link,
.wp-block-button.wc-block-components-product-button .wp-block-button__link,
.wc-block-grid__product .wp-block-button__link,
.wc-block-grid__product .add_to_cart_button,
ul.products > li.product a.button,
ul.products > li.product a.add_to_cart_button {
    background-image: linear-gradient(to top, rgba(0,0,0,0.22) 0%, rgba(0,0,0,0) 40%, rgba(255,255,255,0.25) 100%) !important;
    border: 1px solid rgba(0,0,0,0.16);
    border-radius: 0.625rem !important;
    text-shadow: 0 1px rgba(0,0,0,0.22);
    font-family: var(--wp--preset--font-family--sans);
    font-weight: 600;
    letter-spacing: 0.01em;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.18);
    transition: all 0.2s ease;
}

/* Boutons de grille CLASSIQUES (non .wp-element-button) -> fond au token cta.
   Les boutons de bloc product-button heritent, eux, de l'element "button"
   (cta par defaut, pilotable via l'editeur). */
.wc-block-grid__product .add_to_cart_button,
ul.products > li.product a.button,
ul.products > li.product a.add_to_cart_button {
    background-color: var(--wp--preset--color--cta) !important;
    color: #ffffff !important;
}

.wc-block-product-template .wc-block-components-product-button .wp-block-button__link:hover,
.wp-block-woocommerce-product-template .wc-block-components-product-button .wp-block-button__link:hover,
.wp-block-button.wc-block-components-product-button .wp-block-button__link:hover,
.wc-block-grid__product .wp-block-button__link:hover,
.wc-block-grid__product .add_to_cart_button:hover,
ul.products > li.product a.button:hover,
ul.products > li.product a.add_to_cart_button:hover {
    filter: brightness(1.07);
    box-shadow: 0 6px 16px rgba(0,0,0,0.20),
        0 2px 4px rgba(0,0,0,0.12),
        inset 0 1px 0 rgba(255,255,255,0.30);
}

.wc-block-product-template .wc-block-components-product-button .wp-block-button__link:active,
.wp-block-woocommerce-product-template .wc-block-components-product-button .wp-block-button__link:active,
.wp-block-button.wc-block-components-product-button .wp-block-button__link:active,
.wc-block-grid__product .wp-block-button__link:active,
.wc-block-grid__product .add_to_cart_button:active,
ul.products > li.product a.button:active,
ul.products > li.product a.add_to_cart_button:active {
    filter: brightness(0.95);
    box-shadow: inset 0 2px 6px rgba(0,0,0,0.32);
}

/* =========================================================================
    Header, Pages Mon Compte & WooCommerce Architecture
   ========================================================================= */

.sc-header .sc-brand,
.sc-header .sc-brand a {
    font-family: var(--wp--preset--font-family--display) !important;
    text-transform: uppercase;
    letter-spacing: 0.28em;
    font-weight: 500;
    font-size: clamp(1.05rem, 1.6vw, 1.35rem);
    line-height: 1;
    color: var(--wp--preset--color--contrast) !important;
    text-decoration: none !important;
    white-space: nowrap;
}

.sc-header .sc-nav-main {
    text-transform: uppercase;
    letter-spacing: 0.13em;
    font-weight: 500;
    font-size: 0.74rem;
}

.sc-header .sc-nav-main a {
    color: var(--wp--preset--color--contrast) !important;
    position: relative;
    padding-bottom: 2px;
}

.sc-header .sc-nav-main a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 1px;
    background: var(--sc-accent);
    transition: width 0.25s ease;
}

.sc-header .sc-nav-main a:hover {
    color: var(--sc-accent) !important;
}

.sc-header .sc-nav-main a:hover::after {
    width: 100%;
}

.sc-header .wc-block-mini-cart__button {
    color: var(--wp--preset--color--contrast) !important;
}

.sc-header .wc-block-mini-cart__button:hover {
    color: var(--sc-accent) !important;
}

/* Nav-bar : garder les items sur UNE seule ligne (pas de retour a la ligne du
   menu quand on ajoute des pages). S'applique meme si le header est personnalise
   en BDD. Le menu burger reste pris en charge en mobile (overlayMenu:mobile). */
.sc-header .sc-nav-main .wp-block-navigation__container,
.sc-header .wp-block-navigation > .wp-block-navigation__container {
    flex-wrap: nowrap !important;
    column-gap: 1.1rem;
}

/* Chaque entree de menu reste sur une seule ligne (ex. "Mon compte", "Front Page"
   ne se coupent plus en deux). */
.sc-header .wp-block-navigation-item,
.sc-header .wp-block-navigation-item__content,
.sc-header .wp-block-navigation-item__label,
.sc-header .wp-block-navigation .wp-block-navigation-item a {
    white-space: nowrap !important;
}

.woocommerce-account .woocommerce-MyAccount-content h2,
.woocommerce-account .woocommerce-MyAccount-content h3,
.woocommerce-Address-title h3,
.woocommerce-Address h3,
.woocommerce .addresses .title h3 {
    font-size: 1.35rem !important;
    line-height: 1.3 !important;
    font-weight: 500 !important;
    overflow-wrap: break-word;
    word-break: normal;
}

.woocommerce .col2-set,
.woocommerce-page .col2-set,
.woocommerce .u-columns {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 2.5rem;
}

/* CAUSE REELLE du decalage des colonnes d'adresses (verifie via DevTools le
   2026-06-05) : WooCommerce pose un clearfix ::before/::after (content:" ";
   display:table) sur .col2-set. Sur un conteneur display:flex, ces pseudo-
   elements deviennent de VRAIS items flex -> la ligne flex est en realite
   [::before] [col1] [col2] [::after], et le gap insere 2.5rem AVANT la 1ere
   colonne. On neutralise ces pseudo-elements pour que col1 colle au bord
   gauche (aligne avec le paragraphe d'intro). */
.woocommerce .col2-set::before,
.woocommerce .col2-set::after,
.woocommerce-page .col2-set::before,
.woocommerce-page .col2-set::after,
.woocommerce .u-columns::before,
.woocommerce .u-columns::after,
.woocommerce-Addresses.u-columns::before,
.woocommerce-Addresses.u-columns::after {
    content: none !important;
    display: none !important;
}

.woocommerce .col2-set .col-1,
.woocommerce .col2-set .col-2,
.woocommerce-page .col2-set .col-1,
.woocommerce-page .col2-set .col-2 {
    float: none;
    width: auto;
    flex: 1 1 280px;
}

/* ── Page Mon compte > Adresses : alignement vertical des 2 colonnes ── */
.woocommerce-Addresses.u-columns {
    align-items: flex-start;
}

.woocommerce-Addresses .u-column1,
.woocommerce-Addresses .u-column2 {
    float: none !important;
    width: auto !important;
    margin: 0 !important;
    /* padding remis a 0 : un padding-left residuel decalait le contenu des
       colonnes (~38px) vers la droite, donc plus aligne avec le paragraphe
       d'intro pleine largeur "Les adresses suivantes seront utilisees...". */
    padding: 0 !important;
    flex: 1 1 280px;
}

/* L'intro et les colonnes partagent EXACTEMENT le meme bord gauche.
   Le decalage (~38px) venait d'un padding-left sur le CONTENEUR des colonnes
   (.woocommerce-Addresses / .u-columns / .col2-set / .addresses), pas sur les
   colonnes : on neutralise le bord gauche a TOUS les niveaux du bloc adresses
   pour garantir l'alignement, quel que soit l'element porteur du padding. */
.woocommerce-account .woocommerce-MyAccount-content > p,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Addresses,
.woocommerce-account .woocommerce-MyAccount-content .u-columns,
.woocommerce-account .woocommerce-MyAccount-content .col2-set,
.woocommerce-account .woocommerce-MyAccount-content .addresses {
    margin-left: 0 !important;
    padding-left: 0 !important;
}

/* Titre normal : libellé puis lien "Ajouter" en dessous, hauteur égale des 2 côtés */
.woocommerce-account .woocommerce-Address-title,
.woocommerce .woocommerce-Address-title,
.woocommerce-Address-title {
    display: block !important;
    min-height: 3.4rem;
    margin: 0 0 1rem !important;
    padding: 0 !important;
    text-align: left !important;
}

/* Le titre, le lien "Ajouter" et l'adresse alignés sur le MÊME bord gauche */
.woocommerce-account .woocommerce-Address-title h3,
.woocommerce-account .woocommerce-Address-title a,
.woocommerce-account .woocommerce-Address-title .edit,
.woocommerce-Address-title h3,
.woocommerce-Address-title a,
.woocommerce-Address-title .edit,
.woocommerce-account .woocommerce-Address address,
.woocommerce-Address address {
    display: block !important;
    float: none !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
    text-indent: 0 !important;
}

.woocommerce-Address-title h3 {
    margin: 0 0 .25rem !important;
}

.woocommerce-Address address {
    margin: 0 !important;
    line-height: 1.6;
}

@media (max-width: 768px) {
    .woocommerce-Addresses .u-column1,
    .woocommerce-Addresses .u-column2 {
        flex: 1 1 100%;
    }
}

.sc-card .wp-block-heading,
.sc-card h2,
.sc-card h3,
.sc-card h4 {
    color: var(--wp--preset--color--contrast);
    font-weight: 540;
}

/* Footer titres/marque : defaut token, recolorable dans l'editeur (pas de !important) */
footer .wp-block-site-title a,
footer .wp-block-heading {
    color: var(--wp--preset--color--contrast);
}

footer .wp-block-navigation-item a {
    color: var(--wp--preset--color--muted);
}

/* Boutons .button.alt (CTA primaires WooCommerce : Ajouter au panier fiche
   produit, Proceder au paiement) -> meme glossy NEUTRE que les autres, fond au
   token cta (suit la variation + restaure au reset). Plus de degrade accent fige. */
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
    background-color: var(--wp--preset--color--cta) !important;
    background-image: linear-gradient(to top, rgba(0,0,0,0.22) 0%, rgba(0,0,0,0) 40%, rgba(255,255,255,0.25) 100%) !important;
    color: #ffffff !important;
    border: 1px solid rgba(0,0,0,0.16) !important;
    border-radius: 0.625rem !important;
    min-height: 50px;
    padding: 0 2rem !important;
    font-size: 0.95rem;
    font-weight: 600;
    text-shadow: 0 1px rgba(0,0,0,0.22);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.18);
    transition: all 0.2s ease;
}

.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover {
    filter: brightness(1.07);
    box-shadow: 0 6px 16px rgba(0,0,0,0.20),
        0 2px 4px rgba(0,0,0,0.12),
        inset 0 1px 0 rgba(255,255,255,0.30);
}

.woocommerce .quantity .qty {
    border: 1px solid var(--sc-border);
    border-radius: 0.5rem;
    padding: 0.5rem;
}

/* Carte produit : structure verticale uniforme. Le bloc product-collection
   rend chaque produit en <li class="wp-block-post ... product">, d'ou le
   selecteur sur les enfants directs > li (et fallbacks anciennes grilles). */
.wc-block-product-template > li,
.wp-block-woocommerce-product-template > li,
.wc-block-product-template .wc-block-product,
ul.products > li.product {
    display: flex !important;
    flex-direction: column;
    height: 100%;
    text-align: center;
}

/* Titre + prix centres (override l'alignement a gauche du markup) */
.wc-block-product-template > li .wp-block-post-title,
.wc-block-product-template > li .wp-block-post-title a,
.wc-block-product-template > li .wc-block-components-product-price,
.wc-block-product-template > li .wp-block-woocommerce-product-price,
.wp-block-woocommerce-product-template > li .wp-block-post-title,
.wp-block-woocommerce-product-template > li .wc-block-components-product-price {
    text-align: center !important;
    justify-content: center;
    width: 100%;
}

/* Prix : pas de hauteur reservee (sinon ligne vide / "trou" sur les produits
   sans prix). Les boutons restent alignes en bas via margin-top:auto. */
.wc-block-product-template > li .wc-block-components-product-price,
.wc-block-product-template > li .wp-block-woocommerce-product-price {
    display: block;
    margin: 0.35rem 0 0.75rem;
}

/* Conteneur du bouton : toujours colle en bas -> boutons alignes */
.wc-block-product-template > li .wp-block-button.wc-block-components-product-button,
.wp-block-woocommerce-product-template > li .wp-block-button.wc-block-components-product-button {
    margin-top: auto !important;
    width: 100%;
}

/* Bouton produit : pleine largeur + hauteur uniforme (pas de saut entre
   "ajouter au panier" sur 2 lignes et "1 dans le panier" sur 1 ligne) */
.wc-block-product-template > li .wc-block-components-product-button .wp-block-button__link,
.wp-block-woocommerce-product-template > li .wc-block-components-product-button .wp-block-button__link,
.wc-block-product-template .wc-block-components-product-button .wp-block-button__link {
    width: 100% !important;
    /* Hauteur VERROUILLEE : l'animation "slide" de WooCommerce (l'ancien texte
       "X dans le panier" glisse dehors pendant que le nouveau glisse dedans)
       empile brievement les deux lignes et gonfle le bouton de +12px. Comme la
       grille etire toute la rangee a la plus grande carte, les boutons voisins
       descendaient au clic. height fixe + overflow:hidden clippent l'animation
       dans une fenetre fixe -> plus aucun decalage. */
    height: 3rem !important;
    min-height: 3rem !important;
    max-height: 3rem !important;
    overflow: hidden !important;
    position: relative;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1.2;
}

/* MEME verrouillage anti-decalage pour la grille CLASSIQUE (ul.products) :
   boutons "Ajouter au panier" / "Lire la suite" / "X dans le panier" des
   templates archive-product ou shortcode [products]. Sans ca, une page Boutique
   personnalisee en BDD (ancien markup) retrouvait le saut au survol/refresh. */
ul.products > li.product .button,
ul.products > li.product a.add_to_cart_button,
ul.products > li.product a.added_to_cart,
.wc-block-grid__product .wp-block-button__link,
.wc-block-grid__product .add_to_cart_button {
    margin-top: auto !important;
    width: 100% !important;
    height: 3rem !important;
    min-height: 3rem !important;
    max-height: 3rem !important;
    overflow: hidden !important;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1.2;
}

/* Image produit : ratio carre uniforme -> toutes les images ont la MEME hauteur,
   quel que soit le format d'origine. C'est la cause n°1 du desalignement des prix. */
.wc-block-product-template > li .wc-block-components-product-image,
.wp-block-woocommerce-product-template > li .wc-block-components-product-image,
.wc-block-product-template > li .wp-block-woocommerce-product-image,
.wp-block-woocommerce-product-template > li .wp-block-woocommerce-product-image {
    width: 100%;
    margin: 0 0 0.75rem;
}

.wc-block-product-template > li .wc-block-components-product-image a,
.wp-block-woocommerce-product-template > li .wc-block-components-product-image a,
.wc-block-product-template > li .wp-block-woocommerce-product-image a {
    display: block;
    width: 100%;
}

.wc-block-product-template > li .wc-block-components-product-image img,
.wp-block-woocommerce-product-template > li .wc-block-components-product-image img,
.wc-block-product-template > li .wp-block-woocommerce-product-image img,
.wp-block-woocommerce-product-template > li .wp-block-woocommerce-product-image img {
    width: 100% !important;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    border-radius: 0.75rem;
}

/* Titre produit : hauteur reservee pour 2 lignes -> un titre sur 1 ou 2 lignes
   occupe le meme espace, donc le prix tombe toujours au meme niveau. */
.wc-block-product-template > li .wp-block-post-title,
.wp-block-woocommerce-product-template > li .wp-block-post-title {
    min-height: 2.6em;
    line-height: 1.3;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 0.75rem !important;
    overflow: hidden;
}

/* Masquer le lien "Voir le panier" ajoute apres l'ajout : il decalait la grille.
   Le mini-panier s'ouvre deja automatiquement au clic. */
.wc-block-product-template .added_to_cart,
.wp-block-woocommerce-product-template .added_to_cart,
.wc-block-grid__product .added_to_cart {
    display: none !important;
}

/* FIX décalage au 1er ajout panier (mesure live 2026-06-04) :
   le lien "Voir le panier" (.added_to_cart) est enveloppe dans un <span>
   ENFANT DIRECT du wrapper bouton. Masquer le <a> ne suffit pas : le <span>
   conserve ~12px de line-height -> le wrapper passe de 64px a 76px -> la carte
   ajoutee grandit de 12px -> align-items:stretch etire la rangee -> les boutons
   VOISINS descendent de 12px (desalignement visible tant que tous les produits
   ne sont pas ajoutes). On retire le span du flux -> hauteur stable 64px. */
.wc-block-components-product-button > span,
.wp-block-button.wc-block-components-product-button > span {
    display: none !important;
}

/* =========================================================================
   FOCUS — REGLE UNIQUE ET EXHAUSTIVE
   Aucun cadre / cercle / ovale de focus sur TOUS les boutons et liens-boutons
   (Voir le panier, Parcourir les produits, ajouter au panier, Lire la suite,
   boutons de blocs, boutons WooCommerce classiques et blocs...).
   Le focus clavier reste visible sur les champs de formulaire et les liens
   de contenu (accessibilite preservee).
   ========================================================================= */
/* (A) Vrais boutons : gardent leur ombre douce, jamais d'anneau lumineux */
.wp-block-button__link:focus,
.wp-block-button__link:focus-visible,
.wp-element-button:focus,
.wp-element-button:focus-visible,
.button:focus,
.button:focus-visible,
a.button:focus,
a.button:focus-visible,
.add_to_cart_button:focus,
.add_to_cart_button:focus-visible,
.single_add_to_cart_button:focus,
.single_add_to_cart_button:focus-visible,
.wc-block-components-button:focus,
.wc-block-components-button:focus-visible,
.wc-block-components-product-button .wp-block-button__link:focus,
.wc-block-components-product-button .wp-block-button__link:focus-visible {
    outline: none !important;
    box-shadow: var(--wp--preset--shadow--md) !important;
}

/* (B) Liens de bandeau WooCommerce (Voir le panier / Parcourir les produits,
   non remplis) : aucun cadre, aucune ombre, aucun cercle */
.wc-forward:focus,
.wc-forward:focus-visible,
.wc-backward:focus,
.wc-backward:focus-visible,
.woocommerce-message a:focus,
.woocommerce-message a:focus-visible,
.woocommerce-info a:focus,
.woocommerce-info a:focus-visible,
.woocommerce-error a:focus,
.woocommerce-error a:focus-visible,
.woocommerce-notices-wrapper a:focus,
.woocommerce-notices-wrapper a:focus-visible,
.wc-block-components-notice-banner a:focus,
.wc-block-components-notice-banner a:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

/* (C) Boutons d'action SECONDAIRES ("Voir le panier", "Parcourir les produits",
   "Continuer mes achats", retour boutique panier vide, notices) -> apparence
   GHOST ARGENTEE pour creer la HIERARCHIE : seuls les CTA primaires (Ajouter au
   panier, Valider la commande) restent en violet plein. Les primaires
   (.checkout-button, .single_add_to_cart_button, .add_to_cart_button) sont
   exclus via :not() pour ne JAMAIS etre demotes. Largeur AUTO, arrondi 30px. */
body .woocommerce-message a.button:not(.checkout-button):not(.single_add_to_cart_button):not(.add_to_cart_button),
body .woocommerce-info a.button:not(.checkout-button):not(.single_add_to_cart_button):not(.add_to_cart_button),
body .woocommerce-error a.button:not(.checkout-button):not(.single_add_to_cart_button):not(.add_to_cart_button),
body .woocommerce a.button.wc-forward:not(.checkout-button):not(.single_add_to_cart_button):not(.add_to_cart_button),
body .woocommerce a.button.wc-backward,
body a.button.wc-forward:not(.checkout-button):not(.single_add_to_cart_button):not(.add_to_cart_button),
body a.button.wc-backward,
body a.woocommerce-Button.wc-forward:not(.checkout-button),
.wc-block-components-notice-banner .wc-block-components-notice-banner__content a.wc-forward,
.wc-block-components-notice-banner .wc-block-components-notice-banner__content a.wc-backward,
.wp-block-woocommerce-empty-cart-block .wp-block-button__link,
.wc-block-cart__empty-cart .wp-block-button__link,
.cart-empty ~ .return-to-shop a.button,
.woocommerce-cart .return-to-shop a.button {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: auto !important;
    max-width: max-content;
    box-sizing: border-box !important;
    /* min-height + border-box : neutralise le min-height:50px herite de .button
       (qui, en content-box, donnait un bouton de 68px de haut). */
    min-height: 48px !important;
    background-color: #f4f4f6 !important;
    background-image: linear-gradient(to top, #D8D9DB 0%, #ffffff 80%, #FDFDFD 100%) !important;
    color: #5a5a66 !important;
    border: 1px solid #8F9092 !important;
    border-radius: 0.625rem !important;
    box-shadow: none !important;
    text-shadow: 0 1px #ffffff !important;
    outline: none !important;
    opacity: 1 !important;
    text-decoration: none !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    padding: 0 1.75rem !important;
    float: none !important;
    -webkit-text-fill-color: #5a5a66 !important;
}

body .woocommerce-message a.button:not(.checkout-button):not(.single_add_to_cart_button):not(.add_to_cart_button):hover,
body .woocommerce-info a.button:not(.checkout-button):not(.single_add_to_cart_button):not(.add_to_cart_button):hover,
body a.button.wc-forward:not(.checkout-button):not(.single_add_to_cart_button):not(.add_to_cart_button):hover,
body a.button.wc-backward:hover,
.wc-block-components-notice-banner a.wc-forward:hover,
.wp-block-woocommerce-empty-cart-block .wp-block-button__link:hover,
.woocommerce-cart .return-to-shop a.button:hover {
    background-color: #ffffff !important;
    background-image: linear-gradient(to top, #D8D9DB 0%, #ffffff 80%, #FDFDFD 100%) !important;
    color: #5a5a66 !important;
    box-shadow: 0 4px 3px 1px #FCFCFC,
        0 6px 8px #D6D7D9,
        0 -4px 4px #CECFD1,
        0 -6px 4px #FEFEFE,
        inset 0 0 3px 3px #CECFD1 !important;
}

/* (D) Notices WooCommerce : retirer le badge/icone colore (bleu, vert...) et
   rendre le bandeau sobre aux couleurs du theme. */
.wc-block-components-notice-banner > svg,
.wc-block-components-notice-banner__icon,
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before {
    display: none !important;
}

.wc-block-components-notice-banner,
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
    border: 1px solid var(--sc-border) !important;
    border-radius: 0.625rem !important;
    background: var(--wp--preset--color--accent-soft) !important;
    color: var(--wp--preset--color--contrast) !important;
}

.wc-block-components-notice-banner__content,
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
    padding-left: 1.25rem !important;
}

/* (E) Alignement bulletproof : forcer l'etirement des cellules pour que TOUS
   les boutons collent au bas, meme quand un produit n'a pas de prix. */
.wc-block-product-template.is-flex-container,
.wc-block-product-template__responsive,
.wp-block-woocommerce-product-template,
ul.products {
    align-items: stretch !important;
}

.wc-block-product-template > li,
.wp-block-woocommerce-product-template > li,
ul.products > li.product {
    align-self: stretch !important;
}

.wc-block-product-template .wc-block-product .wp-block-post-title {
    min-height: 2.6em;
    max-height: 2.6em;
    display: -webkit-box !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.wc-block-product-template .wc-block-product .wp-block-post-title a {
    display: inline;
}

.wc-block-product-template .wc-block-components-product-image {
    position: relative;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    border-radius: 10px;
}

.wc-block-product-template .wc-block-components-product-image>a {
    display: block;
    position: absolute;
    inset: 0;
}

.wc-block-product-template .wc-block-components-product-image img {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block;
}

.woocommerce-breadcrumb a,
.woocommerce-breadcrumb {
    color: var(--wp--preset--color--muted);
}

.woocommerce-breadcrumb a:hover {
    color: var(--sc-accent);
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
    color: var(--sc-accent);
    font-weight: 600;
}

/* PRIX (grille) : couleur pilotable par l'editeur.
   theme.json ne force plus la couleur du prix (sinon elle verrouillait
   l'element interne .wc-block-components-product-price et bloquait l'heritage,
   empechant le controle natif "Prix du produit > Texte" de fonctionner).
   - Defaut = Accent, pose sur le conteneur a specificite NULLE (:where) -> le
     controle de l'editeur le surcharge facilement ; "Reinitialiser les styles"
     le restaure.
   - Le montant et l'element interne HERITENT -> la couleur choisie (ou l'accent
     par defaut) se propage jusqu'au chiffre. */
:where(.wp-block-woocommerce-product-price) {
    color: var(--sc-accent);
}
.wc-block-components-product-price,
.wc-block-components-product-price .woocommerce-Price-amount,
.wc-block-components-product-price .woocommerce-Price-amount bdi,
.wp-block-woocommerce-product-price .woocommerce-Price-amount {
    color: inherit;
}

/* Onglets produit (Description / Avis) : meme hauteur et style coherent */
.woocommerce-tabs ul.tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0 0 1.25rem;
    padding: 0;
    border-bottom: 1px solid var(--sc-border);
}

.woocommerce-tabs ul.tabs::before {
    display: none;
}

.woocommerce-tabs ul.tabs li {
    margin: 0;
    padding: 0;
    background: var(--wp--preset--color--surface-alt);
    border: 1px solid var(--sc-border);
    border-bottom: none;
    border-radius: 0.5rem 0.5rem 0 0;
}

.woocommerce-tabs ul.tabs li::before,
.woocommerce-tabs ul.tabs li::after {
    display: none;
}

.woocommerce-tabs ul.tabs li a {
    display: block;
    padding: 0.65rem 1.4rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--wp--preset--color--muted);
}

.woocommerce-tabs ul.tabs li.active {
    background: var(--wp--preset--color--surface);
}

.woocommerce-tabs ul.tabs li.active a {
    color: var(--wp--preset--color--contrast);
}

/* --- Mini-panier (Drawer Modern Blocks) ----------------------------- */
.wc-block-mini-cart__footer-actions .wc-block-components-button,
.wc-block-mini-cart__footer .wc-block-components-button {
    border-radius: 0.625rem;
    padding: 0.65rem 1rem !important;
    min-height: 0 !important;
    font-size: 0.9rem !important;
    font-weight: 600;
}

.wc-block-mini-cart__footer-checkout {
    background-color: var(--sc-accent) !important;
    color: #ffffff !important;
}

.wc-block-mini-cart__footer-checkout:hover {
    background-color: var(--sc-accent-deep) !important;
}

.wc-block-mini-cart__footer-cart {
    border: 1px solid var(--sc-border) !important;
    color: var(--wp--preset--color--contrast) !important;
    background: var(--wp--preset--color--surface) !important;
}

.wc-block-mini-cart__footer-cart:hover {
    border-color: var(--sc-accent) !important;
    color: var(--sc-accent) !important;
}

/* Pas de cadre de focus disgracieux sur le conteneur du tiroir panier
   (le focus clavier reste visible sur les vrais boutons/liens internes) */
.wc-block-components-drawer:focus,
.wc-block-components-drawer:focus-visible,
.wc-block-components-drawer__content:focus,
.wc-block-components-drawer__content:focus-visible,
.wc-block-components-drawer__screen-overlay:focus,
.wc-block-components-drawer__screen-overlay:focus-visible,
.wc-block-mini-cart__drawer:focus,
.wc-block-mini-cart__drawer:focus-visible,
.wp-block-navigation__responsive-container:focus,
.wp-block-navigation__responsive-container:focus-visible,
.wp-block-navigation__responsive-container-content:focus,
.wp-block-navigation__responsive-container-content:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

/* Bouton fermer du tiroir : focus arrondi propre au lieu d'un carré */
.wc-block-components-drawer__close {
    border-radius: 0.5rem;
}

/* =========================================================================
    Widget de contact flottant (FAB Accessibilité)
   ========================================================================= */
.sc-fab {
    position: fixed;
    right: clamp(16px, 3vw, 28px);
    bottom: clamp(16px, 3vw, 28px);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    margin: 0;
}

.sc-fab .sc-fab-actions {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    margin: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px) scale(0.9);
    transform-origin: bottom center;
    pointer-events: none;
    transition: opacity .25s ease, transform .25s ease, visibility .25s;
}

.sc-fab.sc-fab--open .sc-fab-actions {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.sc-fab .wp-block-button.sc-fab-btn {
    margin: 0;
}

.sc-fab .wp-block-button.sc-fab-btn .wp-block-button__link {
    width: 52px;
    height: 52px;
    min-height: 0 !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 50% !important;
    display: grid !important;
    place-content: center;
    font-size: 0 !important;
    color: transparent !important;
    text-shadow: none !important;
    background-image: none !important;
    box-shadow: 0 6px 16px rgba(20, 20, 40, 0.22) !important;
    transition: transform .2s ease, box-shadow .2s ease;
}

.sc-fab .wp-block-button.sc-fab-btn .wp-block-button__link:hover {
    transform: translateY(-2px) scale(1.06);
    box-shadow: 0 10px 22px rgba(20, 20, 40, 0.28) !important;
}

.sc-fab .sc-fab-btn .wp-block-button__link::before {
    content: "";
    width: 24px;
    height: 24px;
    background-color: #ffffff;
    -webkit-mask: var(--sc-fab-icon) center / 22px 22px no-repeat;
    mask: var(--sc-fab-icon) center / 22px 22px no-repeat;
}

.sc-fab .sc-fab-phone .wp-block-button__link {
    background-color: #16a34a !important;
    --sc-fab-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z'/%3E%3C/svg%3E");
}

.sc-fab .sc-fab-whatsapp .wp-block-button__link {
    background-color: #25d366 !important;
    --sc-fab-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19.05 4.91A9.82 9.82 0 0 0 12.04 2C6.58 2 2.13 6.45 2.13 11.91c0 1.75.46 3.45 1.32 4.95L2.05 22l5.25-1.38a9.9 9.9 0 0 0 4.74 1.21h.01c5.46 0 9.91-4.45 9.91-9.91 0-2.65-1.03-5.14-2.9-7.01zM12.05 20.15c-1.48 0-2.93-.4-4.2-1.15l-.3-.18-3.12.82.83-3.04-.2-.31a8.26 8.26 0 0 1-1.26-4.38c0-4.54 3.7-8.24 8.25-8.24 2.2 0 4.27.86 5.82 2.42a8.18 8.18 0 0 1 2.41 5.83c0 4.54-3.7 8.23-8.24 8.23zm4.52-6.16c-.25-.12-1.47-.72-1.69-.81-.23-.08-.39-.12-.56.12-.17.25-.64.81-.78.97-.14.17-.29.19-.54.06-.25-.12-1.05-.39-1.99-1.23-.74-.66-1.23-1.47-1.38-1.72-.14-.25-.02-.38.11-.51.11-.11.25-.29.37-.43.13-.14.17-.25.25-.42.08-.17.04-.31-.02-.43-.06-.12-.56-1.34-.76-1.84-.2-.48-.41-.42-.56-.43h-.48c-.17 0-.43.06-.66.31-.22.25-.86.85-.86 2.07 0 1.22.89 2.4 1.01 2.56.12.17 1.75 2.67 4.23 3.74.59.26 1.05.41 1.41.52.59.19 1.13.16 1.56.1.48-.07 1.47-.6 1.68-1.18.21-.58.21-1.07.14-1.18-.06-.11-.22-.17-.47-.29z'/%3E%3C/svg%3E");
}

.sc-fab .sc-fab-email .wp-block-button__link {
    background-color: #2f6df6 !important;
    --sc-fab-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z'/%3E%3C/svg%3E");
}

.sc-fab-toggle {
    width: 60px;
    height: 60px;
    border: none;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--sc-accent-light) 0%, var(--sc-accent-deep) 100%);
    box-shadow: 0 8px 20px var(--sc-shadow-40);
    cursor: pointer;
    display: grid;
    place-content: center;
    padding: 0;
    transition: transform .25s ease, box-shadow .2s ease;
}

.sc-fab-toggle:hover {
    box-shadow: 0 12px 26px var(--sc-shadow-55);
}

.sc-fab-toggle:focus-visible {
    outline: 3px solid var(--sc-glow-60);
    outline-offset: 3px;
}

.sc-fab--open .sc-fab-toggle {
    transform: rotate(135deg);
}

.sc-fab-toggle__icon,
.sc-fab-toggle__icon::before {
    content: "";
    display: block;
    width: 22px;
    height: 3px;
    background: #ffffff;
    border-radius: 2px;
}

.sc-fab-toggle__icon {
    position: relative;
}

.sc-fab-toggle__icon::before {
    position: absolute;
    inset: 0;
    transform: rotate(90deg);
}

@media (prefers-reduced-motion: reduce) {

    .sc-fab .sc-fab-actions,
    .sc-fab-toggle,
    .sc-fab .sc-fab-btn .wp-block-button__link {
        transition: none;
    }
}
/* --- Block styles (register_block_style) --- */
.wp-block-button.is-style-sc-pill .wp-block-button__link { border-radius: 30px; }
.wp-block-group.is-style-sc-card { background: var(--wp--preset--color--surface); border: 1px solid var(--wp--preset--color--line); border-radius: 1rem; padding: var(--wp--preset--spacing--40); }
.wp-block-image.is-style-sc-rounded img { border-radius: 1rem; }

/* --- Required classic-content classes (WordPress / Theme Unit Test) --- */

/* Image & text alignments in classic (non-block) content */
.alignleft {
    float: left;
    margin: 0.5em 1.5em 1em 0;
}

.alignright {
    float: right;
    margin: 0.5em 0 1em 1.5em;
}

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

/* Captions & gallery captions */
.wp-caption {
    max-width: 100%;
    margin-bottom: 1.5em;
}

.wp-caption img[class*="wp-image-"] {
    display: block;
    margin: 0 auto;
}

.wp-caption .wp-caption-text,
.wp-caption-text,
.gallery-caption {
    margin: 0.5em 0;
    font-size: 0.875em;
    line-height: 1.5;
    text-align: center;
    color: var(--wp--preset--color--muted);
}

/* Sticky post & post-author body hooks (required) */
.sticky,
.bypostauthor {
    display: block;
}

/* Classic tables inside post content */
.wp-block-post-content table,
.entry-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 1.5em;
}

.wp-block-post-content th,
.wp-block-post-content td,
.entry-content th,
.entry-content td {
    border: 1px solid var(--wp--preset--color--line);
    padding: 0.5em 0.75em;
}