/* =============================================================

 * TEMP — Catalogue : espacement haut/bas du contenu

 * Cible l'archive shop (/catalogue/) + les archives de catégorie

 * pour décoller du header en haut et du footer en bas.

 * ============================================================= */

body.woocommerce-shop main,

body.woocommerce-shop .ct-main-container,

body.archive.post-type-archive-product main,

body.tax-product_cat main,

body.parent-pageid-863 main {

    padding-top: 0;

    padding-bottom: 96px;

}



@media (max-width: 999px) {

    /* Sur mobile, on retire le padding-top du main : la sidebar (order: -1)

       prend la charge de l'espacement haut via son propre margin-top. */

    body.woocommerce-shop main,

    body.woocommerce-shop .ct-main-container,

    body.archive.post-type-archive-product main,

    body.tax-product_cat main,

    body.parent-pageid-863 main {

        padding-top: 0 !important;

        padding-bottom: 48px;

    }



    /* Sidebar mobile : marge en haut pour décoller du header,

       marge en bas à 0 pour coller aux produits. */

    body.woocommerce-shop main aside#sidebar.ct-hidden-sm.ct-hidden-md,

    body.tax-product_cat main aside#sidebar.ct-hidden-sm.ct-hidden-md,

    body.archive.post-type-archive-product main aside#sidebar.ct-hidden-sm.ct-hidden-md {

        margin-top: 32px !important;

        margin-bottom: 0 !important;

    }



    /* Blocksy applique un gap flex de 50px entre la sidebar et le contenu

       principal dans .ct-container. On réduit à 25px sur mobile. */

    body.woocommerce-shop main .ct-container,

    body.tax-product_cat main .ct-container,

    body.archive.post-type-archive-product main .ct-container {

        gap: 25px !important;

        row-gap: 25px !important;

        --sidebar-grid-row-gap: 25px !important;

        --grid-row-gap: 25px !important;

    }

}



/* =============================================================

 * Catalogue : style du widget natif Blocksy .ct-active-filters

 * Affiche les filtres actifs en haut sous forme de chips.

 * Markup natif : <div class="ct-active-filters"><span>Filtres actifs</span>

 *                <a>Réinitialiser</a> <a>Filtre 1</a> <a>Filtre 2</a></div>

 * ============================================================= */

.ct-active-filters {

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    gap: var(--m-space-3);

    padding: var(--m-space-3) var(--m-space-4);

    background: var(--m-beige-50);

    border-radius: var(--m-radius-md);

    margin-bottom: var(--m-space-4);

    font-size: var(--m-fs-body-s);

}



.ct-active-filters > span {

    color: var(--m-brand-secondary);

    font-weight: var(--m-fw-bold);

    text-transform: uppercase;

    letter-spacing: 0.06em;

    font-size: var(--m-fs-caption);

    flex-shrink: 0;

}



/* Chips filtres actifs : tous les <a> en bleu Manergo plein */

.ct-active-filters > a {

    display: inline-flex;

    align-items: center;

    gap: 6px;

    padding: 5px 12px;

    background: var(--m-blue-500);

    color: #ffffff;

    border: 1px solid var(--m-blue-500);

    border-radius: var(--m-radius-pill);

    text-decoration: none;

    font-size: var(--m-fs-caption);

    font-weight: var(--m-fw-medium);

    transition: background-color var(--m-duration-fast) var(--m-ease-standard),

                border-color     var(--m-duration-fast) var(--m-ease-standard),

                transform        var(--m-duration-fast) var(--m-ease-standard);

}



.ct-active-filters > a:hover,

.ct-active-filters > a:focus-visible {

    background: var(--m-blue-600);

    border-color: var(--m-blue-600);

    color: #ffffff;

    transform: translateY(-1px);

    outline: none;

}



.ct-active-filters > a svg {

    flex-shrink: 0;

    width: 11px;

    height: 11px;

    opacity: 0.85;

    transition: opacity var(--m-duration-fast) var(--m-ease-standard);

}



.ct-active-filters > a:hover svg {

    opacity: 1;

}



/* Premier <a> = "Réinitialiser les filtres" → style "lien" discret,

   poussé à droite via order, sans fond plein */

.ct-active-filters > a:first-of-type {

    background: transparent;

    color: var(--m-text-secondary);

    border-color: transparent;

    text-decoration: underline;

    text-underline-offset: 3px;

    padding: 4px 8px;

    margin-left: auto;

    order: 999;

}



.ct-active-filters > a:first-of-type:hover,

.ct-active-filters > a:first-of-type:focus-visible {

    background: transparent;

    border-color: transparent;

    color: var(--m-blue-600);

    transform: none;

}



.ct-active-filters > a:first-of-type svg {

    opacity: 0.6;

}



/* =============================================================

 * Catalogue : style des filtres Blocksy sélectionnés

 * Checkbox cochée en bleu Manergo + ligne entière mise en avant.

 * ============================================================= */



/* Checkbox native : couleur d'accentuation = bleu Manergo */

.ct-filter-item input.ct-checkbox,

.ct-filter-widget input[type="checkbox"] {

    accent-color: var(--m-blue-500);

    cursor: pointer;

}



/* Ligne du filtre coché : léger fond bleu très clair + bordure subtile */

.ct-filter-item:has(input.ct-checkbox:checked) > .ct-filter-item-inner {

    background-color: var(--m-blue-0);

    border-radius: var(--m-radius-sm);

    transition: background-color var(--m-duration-fast) var(--m-ease-standard);

}



/* Label du filtre coché en gras + couleur Manergo */

.ct-filter-item:has(input.ct-checkbox:checked) > .ct-filter-item-inner .ct-filter-label {

    color: var(--m-blue-600);

    font-weight: var(--m-fw-bold);

}



/* Fallback : si :has() n'est pas supporté, on cible juste le label

   adjacent à une checkbox cochée (CSS valide partout) */

.ct-filter-item input.ct-checkbox:checked + .ct-filter-label {

    color: var(--m-blue-600);

    font-weight: var(--m-fw-bold);

}



/* =============================================================

 * TEMP — Catalogue : afficher les filtres sur mobile

 * Blocksy cache la sidebar avec .ct-hidden-sm .ct-hidden-md.

 * On la force visible sur mobile, en pleine largeur au-dessus du

 * contenu, avec marges propres. Le widget filter Blocksy a déjà un

 * mode accordéon (ct-expandable-trigger) donc l'UX reste lisible.

 * ============================================================= */

@media (max-width: 999px) {

    /* Conteneur parent en flex column pour permettre le réordonnancement */

    body.woocommerce-shop .ct-container,

    body.woocommerce-shop .ct-main-content,

    body.tax-product_cat .ct-container,

    body.tax-product_cat .ct-main-content,

    body.archive.post-type-archive-product .ct-container,

    body.archive.post-type-archive-product .ct-main-content {

        display: flex !important;

        flex-direction: column !important;

    }



    body.woocommerce-shop aside#sidebar.ct-hidden-sm.ct-hidden-md,

    body.tax-product_cat aside#sidebar.ct-hidden-sm.ct-hidden-md,

    body.archive.post-type-archive-product aside#sidebar.ct-hidden-sm.ct-hidden-md {

        display: block !important;

        width: 100%;

        max-width: 100%;

        margin: 0 !important;

        padding: 0;

        /* Remonte la sidebar au-dessus du contenu principal */

        order: -1;

    }



    /* Compresser les espaces résiduels du wrapper produits + header WC */

    body.woocommerce-shop .woocommerce-products-header,

    body.tax-product_cat .woocommerce-products-header,

    body.archive.post-type-archive-product .woocommerce-products-header {

        margin-top: 0 !important;

        padding-top: var(--m-space-2);

    }



    body.woocommerce-shop ul.products,

    body.tax-product_cat ul.products,

    body.archive.post-type-archive-product ul.products {

        margin-top: var(--m-space-2) !important;

        padding-top: 0 !important;

    }



    /* Le widget Blocksy a peut-être un padding-bottom interne — on l'annule */

    body.woocommerce-shop .ct-sidebar .ct-widget.widget_block,

    body.tax-product_cat .ct-sidebar .ct-widget.widget_block,

    body.archive.post-type-archive-product .ct-sidebar .ct-widget.widget_block {

        margin-bottom: 0 !important;

        padding-bottom: 0 !important;

    }



    /* Le main reste à sa place naturelle (après la sidebar dans l'ordre flex) */

    body.woocommerce-shop main,

    body.tax-product_cat main,

    body.archive.post-type-archive-product main {

        order: 0;

    }



    /* Le widget filter en plus compact sur mobile */

    body.woocommerce-shop .ct-filter-widget-wrapper,

    body.tax-product_cat .ct-filter-widget-wrapper,

    body.archive.post-type-archive-product .ct-filter-widget-wrapper {

        max-height: 280px;

        overflow-y: auto;

    }



    /* Titre du widget plus visible sur mobile */

    body.woocommerce-shop .ct-sidebar .widget-title,

    body.tax-product_cat .ct-sidebar .widget-title,

    body.archive.post-type-archive-product .ct-sidebar .widget-title {

        font-size: var(--m-fs-body-m);

        padding: var(--m-space-3) 0;

        border-bottom: 1px solid var(--m-beige-100);

    }

}



/* =============================================================

 * TEMP — Filtre catalogue : masquer cats non navigables

 * Cible le widget filter Blocksy (.ct-filter-widget) sur l'archive

 * catalogue pour cacher "Mis en avant" (80), "Non classé" (81),

 * "Uncategorized" (20).

 *

 * Approche CSS pragmatique en attendant un hook PHP propre.

 * Si les term_ids changent (édition côté admin), mettre à jour ici.

 * ============================================================= */

.ct-filter-widget .ct-filter-item:has(a[data-value="80"]),

.ct-filter-widget .ct-filter-item:has(a[data-value="81"]),

.ct-filter-widget .ct-filter-item:has(a[data-value="20"]) {

    display: none !important;

}



/* Fallback pour les navigateurs sans :has() : on cache l'élément interne */

.ct-filter-widget .ct-filter-item a[data-value="80"],

.ct-filter-widget .ct-filter-item a[data-value="81"],

.ct-filter-widget .ct-filter-item a[data-value="20"] {

    display: none !important;

}



/* =============================================================

 * TEMP — Overrides homepage

 * À déplacer dans assets/css/homepage.css quand un module dédié sera créé.

 * ============================================================= */



/* Section 1 (hero) — la photo est dans un bloc Gutenberg .wp-block-cover

   avec is-position-bottom-center qui colle le texte en bas. On override

   pour centrer verticalement le contenu sur desktop.



   Idéal long terme : modifier la "Content position" du bloc Cover en

   "Center Center" depuis l'éditeur Gutenberg (clic dans le Customizer

   sur le bloc → Toolbar → bouton position 9 cases → center). */

@media (min-width: 1024px) {

    .home .wp-block-cover.alignfull.is-position-bottom-center,

    body.home .wp-block-cover.is-position-bottom-center {

        align-items: center !important;

    }

}



/* =============================================================

 * MANERGO — CTA Devis (bouton + side panel modal)

 * =============================================================

 * À déposer dans blocksy-child/assets/css/cta-devis.css

 *

 * Dépend de tokens.css (chargé en amont via wp_enqueue_style).

 * Utilise les sémantiques DS Manergo (cf. skill manergo-ds-hygiene).

 *

 * @version 3.0 — design panneau enrichi (560px, header, contexte produit, étapes, trust)

 * ============================================================= */



/* ============================================================

 * 1. Bouton CTA Devis

 * ============================================================ */



.manergo-cta-devis-wrapper {

    margin: var(--m-space-6) 0;

}



.manergo-cta-devis-wrapper--center { text-align: center; }

.manergo-cta-devis-wrapper--right  { text-align: right; }



/* Sur fiche produit : CTA principal, large et dominant */

.manergo-cta-devis-wrapper--product {

    margin: var(--m-space-2) 0 var(--m-space-6);

}

.manergo-cta-devis-wrapper--product .manergo-cta-devis {

    width: 100%;

    justify-content: center;

    padding: var(--m-space-5) var(--m-space-8);

    font-size: var(--m-fs-h5);

    font-weight: var(--m-fw-bold);

}



.manergo-cta-devis {

    display: inline-flex;

    align-items: center;

    gap: var(--m-space-3);

    background-color: var(--m-blue-500);

    color: #FFFFFF;

    padding: var(--m-space-4) var(--m-space-8);

    border: 2px solid var(--m-blue-500);

    border-radius: var(--m-radius-sm);

    font-family: var(--m-font-sans);

    font-size: var(--m-fs-body-m);

    font-weight: var(--m-fw-medium);

    line-height: var(--m-lh-tight);

    text-decoration: none;

    cursor: pointer;

    transition:

        background-color var(--m-duration-normal) var(--m-ease-standard),

        border-color     var(--m-duration-normal) var(--m-ease-standard),

        color            var(--m-duration-normal) var(--m-ease-standard),

        transform        var(--m-duration-fast)   var(--m-ease-standard);

}



.manergo-cta-devis:hover,

.manergo-cta-devis:focus-visible {

    background-color: var(--m-blue-600);

    border-color: var(--m-blue-600);

    color: #FFFFFF;

    text-decoration: none;

}



.manergo-cta-devis:focus-visible {

    outline: 2px solid var(--m-blue-500);

    outline-offset: 3px;

}



.manergo-cta-devis:active {

    transform: translateY(1px);

}



.manergo-cta-devis__arrow {

    display: inline-block;

    transition: transform var(--m-duration-normal) var(--m-ease-standard);

}



.manergo-cta-devis:hover .manergo-cta-devis__arrow,

.manergo-cta-devis:focus-visible .manergo-cta-devis__arrow {

    transform: translateX(3px);

}



/* Couleur logo Manergo, spécificité élevée pour passer outre Blocksy */

.manergo-cta-devis.manergo-cta-devis--primary,

button.manergo-cta-devis.manergo-cta-devis--primary {

    background-color: var(--m-blue-500);

    border-color: var(--m-blue-500);

    color: #FFFFFF;

}

.manergo-cta-devis.manergo-cta-devis--primary:hover,

.manergo-cta-devis.manergo-cta-devis--primary:focus-visible,

button.manergo-cta-devis.manergo-cta-devis--primary:hover,

button.manergo-cta-devis.manergo-cta-devis--primary:focus-visible {

    background-color: var(--m-blue-600);

    border-color: var(--m-blue-600);

    color: #FFFFFF;

}



.manergo-cta-devis--ghost {

    background: transparent;

    color: var(--m-text-accent);

}



/* Bouton dans le header : taille compacte + typo héritée du header.

   Posé via Blocksy Header Builder (élément HTML custom) avec la classe

   .manergo-cta-devis--header. */

.ct-header-actions .manergo-cta-devis,

.header-cta-zone .manergo-cta-devis,

.ct-header .manergo-cta-devis,

.manergo-cta-devis--header,

.manergo-cta-devis--header-injected {

    padding: var(--m-space-2) var(--m-space-5);

    font-size: var(--m-fs-body-s);

    margin-right: var(--m-space-2);

    vertical-align: middle;

    font-family: inherit;

}



/* Bouton header : plein bleu Manergo, hauteur alignée sur le bouton

   Stackable "Nous contacter" (stk-button) qui est juste à côté.

   Spécificité élevée pour override les règles génériques. */

.manergo-cta-devis--header.manergo-cta-devis--primary,

.ct-header .manergo-cta-devis--header.manergo-cta-devis--primary,

button.manergo-cta-devis--header.manergo-cta-devis--primary {

    background-color: var(--m-blue-500);

    color: #ffffff;

    /* Bordure 2px pour matcher l'épaisseur du Stackable "Nous contacter" */

    border: 2px solid var(--m-blue-500);

    /* Coins carrés (pas d'arrondi) — aligné sur le bouton Stackable adjacent */

    border-radius: 160px;

    padding: 14px 28px;

    min-height: 52px;

    display: inline-flex;

    align-items: center;

    gap: var(--m-space-2);

    font-family: inherit;

    font-size: 15px;

    line-height: 1.2;

    font-weight: var(--m-fw-medium);

    text-decoration: none;

    vertical-align: middle;

    transition:

        background-color var(--m-duration-normal) var(--m-ease-standard),

        border-color var(--m-duration-normal) var(--m-ease-standard),

        transform var(--m-duration-fast) var(--m-ease-standard);

}



.manergo-cta-devis--header.manergo-cta-devis--primary:hover,

.manergo-cta-devis--header.manergo-cta-devis--primary:focus-visible,

.ct-header .manergo-cta-devis--header.manergo-cta-devis--primary:hover,

.ct-header .manergo-cta-devis--header.manergo-cta-devis--primary:focus-visible,

button.manergo-cta-devis--header.manergo-cta-devis--primary:hover,

button.manergo-cta-devis--header.manergo-cta-devis--primary:focus-visible {

    background-color: var(--m-blue-600);

    border-color: var(--m-blue-600);

    color: #ffffff;

    /* Effet hover-lift inspiré de stk--hover-effect-lift */

    transform: translateY(-2px);

}



/* Mobile : bouton header compact + texte raccourci en "Devis" */

@media (max-width: 999px) {

    .manergo-cta-devis--header.manergo-cta-devis--primary,

    .ct-header .manergo-cta-devis--header.manergo-cta-devis--primary,

    button.manergo-cta-devis--header.manergo-cta-devis--primary {

        padding: 6px 14px;

        min-height: 36px;

        font-size: 13px;

        gap: var(--m-space-1);

    }



    .manergo-cta-devis--header .manergo-cta-devis__arrow {

        display: none;

    }



    /* On masque le label "Demander un devis" et on affiche "Devis"

       via un pseudo-élément. Le texte original reste dans le DOM pour

       l'accessibilité (screen reader) et le SEO. */

    .manergo-cta-devis--header .manergo-cta-devis__label {

        font-size: 0;

        line-height: 0;

    }

    .manergo-cta-devis--header .manergo-cta-devis__label::before {

        content: "Devis";

        font-size: 13px;

        line-height: 1.2;

        font-weight: var(--m-fw-medium);

        color: inherit;

    }

}



/* Masque le "Sur devis" rendu par WC dans la summary principale */

.product > .summary > p.price,

.summary.entry-summary > p.price {

    display: none !important;

}



/* ============================================================

 * 2. Side panel modal — Container

 * ============================================================ */



.manergo-devis-modal {

    /* === FORCE LIGHT MODE DANS LE MODAL ===

       Override des sémantiques DS pour garantir un rendu light constant,

       même si l'OS ou le navigateur est en prefers-color-scheme: dark.

       (Le DS bascule automatiquement les sémantiques en dark mode global.) */

    --m-bg-canvas:       #ffffff;

    --m-bg-surface:      var(--m-neutral-50);

    --m-bg-subtle:       var(--m-beige-50);

    --m-bg-inverse:      var(--m-blue-900);

    --m-bg-accent:       var(--m-blue-500);

    --m-bg-accent-soft:  var(--m-blue-0);

    --m-text-primary:    var(--m-blue-900);

    --m-text-secondary:  var(--m-neutral-700);

    --m-text-muted:      var(--m-neutral-500);

    --m-text-inverse:    #ffffff;

    --m-text-accent:     var(--m-blue-500);

    --m-text-onAccent:   #ffffff;

    --m-border-default:  var(--m-neutral-200);

    --m-border-subtle:   var(--m-neutral-100);

    --m-border-strong:   var(--m-neutral-400);

    --m-border-accent:   var(--m-blue-500);

    --m-brand-primary:   var(--m-blue-500);

    --m-brand-secondary: var(--m-green-500);

    --m-brand-paper:     var(--m-beige-100);



    position: fixed;

    top: 0;

    right: 0;

    bottom: 0;

    left: auto;

    width: min(560px, 100vw);

    max-width: 100%;

    height: 100vh;

    max-height: 100vh;

    margin: 0;

    padding: 0;

    border: none;

    /* Fond beige très clair "papier kraft" Manergo */

    background: var(--m-beige-0);

    color: var(--m-text-primary);

    box-shadow: var(--m-shadow-lg);

    overflow-y: auto;

    z-index: 99999;

}



.manergo-devis-modal[open] {

    display: block;

    animation: manergo-devis-slide-in var(--m-duration-slow) var(--m-ease-standard) forwards;

}



.manergo-devis-modal::backdrop {

    background: rgba(19, 23, 67, 0.5);

    backdrop-filter: blur(2px);

    -webkit-backdrop-filter: blur(2px);

}



@keyframes manergo-devis-slide-in {

    from { transform: translateX(100%); }

    to   { transform: translateX(0); }

}



body:has(.manergo-devis-modal[open]) {

    overflow: hidden;

}



.manergo-devis-modal__inner {

    padding: var(--m-space-8);

    display: flex;

    flex-direction: column;

    gap: var(--m-space-6);

    min-height: 100%;

    font-family: var(--m-font-sans);

}



/* ============================================================

 * 3. Header (titre + sous-titre + close)

 * ============================================================ */



.manergo-devis-modal__header {

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: var(--m-space-4);

    padding-bottom: var(--m-space-5);

    border-bottom: 1px solid var(--m-border-subtle);

}



.manergo-devis-modal__heading {

    flex: 1;

    min-width: 0;

}



.manergo-devis-modal__title {

    font-size: var(--m-fs-h3);

    font-weight: var(--m-fw-bold);

    color: var(--m-brand-secondary);

    margin: 0 0 var(--m-space-2);

    line-height: var(--m-lh-snug);

}



.manergo-devis-modal__subtitle {

    font-size: var(--m-fs-body-s);

    /* text-secondary plutôt que text-muted pour passer AA sur fond beige */

    color: var(--m-text-secondary);

    margin: 0;

    line-height: var(--m-lh-normal);

}



.manergo-devis-modal__subtitle-sep {

    color: var(--m-border-strong);

    margin: 0 var(--m-space-1);

}



.manergo-devis-modal__close {

    background: transparent;

    border: none;

    cursor: pointer;

    font-size: 28px;

    line-height: 1;

    color: var(--m-brand-secondary);

    padding: 0;

    width: 40px;

    height: 40px;

    min-width: 40px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: var(--m-radius-pill);

    transition: background-color var(--m-duration-normal) var(--m-ease-standard);

    flex-shrink: 0;

}



.manergo-devis-modal__close:hover,

.manergo-devis-modal__close:focus-visible {

    background: var(--m-brand-paper);

    outline: none;

}



/* ============================================================

 * 4-BIS. Devis Cart — liste multi-produits

 * ============================================================ */



.manergo-devis-cart {

    display: flex;

    flex-direction: column;

    gap: var(--m-space-4);

}



.manergo-devis-cart__header {

    display: flex;

    align-items: baseline;

    justify-content: space-between;

    gap: var(--m-space-3);

}



.manergo-devis-cart__title {

    font-size: var(--m-fs-body-l);

    font-weight: var(--m-fw-bold);

    color: var(--m-brand-secondary);

    margin: 0;

    line-height: var(--m-lh-snug);

}



.manergo-devis-cart__counter {

    font-size: var(--m-fs-body-s);

    font-weight: var(--m-fw-regular);

    color: var(--m-text-secondary);

    margin-left: var(--m-space-2);

}



.manergo-devis-cart__list {

    list-style: none;

    padding: 0;

    margin: 0;

    display: flex;

    flex-direction: column;

    gap: var(--m-space-3);

}



.manergo-devis-cart__list[hidden] { display: none; }



.manergo-devis-cart__item {

    display: flex;

    align-items: flex-start;

    gap: var(--m-space-3);

    background: var(--m-bg-canvas);

    border: 1px solid var(--m-beige-100);

    border-radius: var(--m-radius-md);

    padding: var(--m-space-3);

}



.manergo-devis-cart__thumb {

    flex-shrink: 0;

    width: 56px;

    height: 56px;

    background: var(--m-beige-50);

    border-radius: var(--m-radius-sm);

    overflow: hidden;

    display: flex;

    align-items: center;

    justify-content: center;

}



.manergo-devis-cart__thumb img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;

}



.manergo-devis-cart__thumb-empty {

    color: var(--m-text-muted);

    font-size: var(--m-fs-body-l);

}



.manergo-devis-cart__text {

    flex: 1;

    min-width: 0;

    display: flex;

    flex-direction: column;

    gap: var(--m-space-1);

}



.manergo-devis-cart__ref {

    font-size: var(--m-fs-caption);

    color: var(--m-text-muted);

    margin: 0;

    font-weight: var(--m-fw-medium);

    text-transform: uppercase;

    letter-spacing: 0.04em;

}



.manergo-devis-cart__name {

    font-size: var(--m-fs-body-m);

    font-weight: var(--m-fw-bold);

    color: var(--m-brand-secondary);

    margin: 0;

    line-height: var(--m-lh-snug);

}



.manergo-devis-cart__family {

    display: inline-block;

    font-size: var(--m-fs-caption);

    color: var(--m-text-accent);

    background: var(--m-bg-accent-soft);

    padding: 2px var(--m-space-2);

    border-radius: var(--m-radius-pill);

    font-weight: var(--m-fw-medium);

    align-self: flex-start;

}



/* Options + coloris RAL capturés au moment de l'ajout */

.manergo-devis-cart__config {

    list-style: none;

    padding: var(--m-space-2) var(--m-space-3);

    margin: var(--m-space-2) 0 0;

    background: var(--m-beige-50);

    border-left: 2px solid var(--m-blue-500);

    border-radius: 0 var(--m-radius-sm) var(--m-radius-sm) 0;

    font-size: var(--m-fs-caption);

    color: var(--m-text-secondary);

    line-height: var(--m-lh-snug);

}



.manergo-devis-cart__config li {

    padding: 2px 0;

}



.manergo-devis-cart__config-label {

    font-weight: var(--m-fw-medium);

    color: var(--m-brand-secondary);

}



.manergo-devis-cart__controls {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: var(--m-space-3);

    margin-top: var(--m-space-2);

}



/* Qty stepper (− [N] +) */

.manergo-devis-cart__qty {

    display: inline-flex;

    align-items: stretch;

    border: 1px solid var(--m-beige-200);

    border-radius: var(--m-radius-sm);

    overflow: hidden;

    background: var(--m-bg-canvas);

}



.manergo-devis-cart__qty-btn {

    background: transparent;

    border: none;

    cursor: pointer;

    width: 32px;

    color: var(--m-text-primary);

    font-size: var(--m-fs-body-m);

    font-weight: var(--m-fw-bold);

    line-height: 1;

    padding: 0;

    transition: background-color var(--m-duration-fast) var(--m-ease-standard);

}



.manergo-devis-cart__qty-btn:hover,

.manergo-devis-cart__qty-btn:focus-visible {

    background: var(--m-beige-50);

    outline: none;

}



.manergo-devis-cart__qty input {

    width: 44px;

    border: none;

    background: transparent;

    text-align: center;

    font-size: var(--m-fs-body-s);

    font-weight: var(--m-fw-medium);

    color: var(--m-text-primary);

    -moz-appearance: textfield;

}



.manergo-devis-cart__qty input::-webkit-outer-spin-button,

.manergo-devis-cart__qty input::-webkit-inner-spin-button {

    -webkit-appearance: none;

    margin: 0;

}



.manergo-devis-cart__qty input:focus {

    outline: 2px solid var(--m-blue-500);

    outline-offset: -2px;

}



/* Bouton "Retirer" */

.manergo-devis-cart__remove {

    background: transparent;

    border: none;

    cursor: pointer;

    color: var(--m-text-muted);

    font-size: var(--m-fs-body-s);

    font-weight: var(--m-fw-medium);

    display: inline-flex;

    align-items: center;

    gap: var(--m-space-1);

    padding: var(--m-space-1) var(--m-space-2);

    border-radius: var(--m-radius-sm);

    transition:

        color var(--m-duration-normal) var(--m-ease-standard),

        background-color var(--m-duration-normal) var(--m-ease-standard);

}



.manergo-devis-cart__remove:hover,

.manergo-devis-cart__remove:focus-visible {

    color: var(--m-brown-500);

    background: var(--m-brown-0);

    outline: none;

}



/* État vide */

.manergo-devis-cart__empty {

    text-align: center;

    padding: var(--m-space-8) var(--m-space-4);

    background: var(--m-bg-canvas);

    border: 1px dashed var(--m-beige-200);

    border-radius: var(--m-radius-md);

}



.manergo-devis-cart__empty[hidden] { display: none; }



.manergo-devis-cart__empty-text {

    color: var(--m-text-secondary);

    margin: 0 0 var(--m-space-4);

    font-size: var(--m-fs-body-s);

}



/* Bouton "+ Ajouter un autre produit" */

.manergo-devis-cart__add-another {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: var(--m-space-2);

    background: transparent;

    border: 1px dashed var(--m-blue-500);

    color: var(--m-blue-500);

    padding: var(--m-space-3) var(--m-space-4);

    border-radius: var(--m-radius-sm);

    cursor: pointer;

    font-size: var(--m-fs-body-s);

    font-weight: var(--m-fw-medium);

    transition:

        background-color var(--m-duration-normal) var(--m-ease-standard),

        border-style     var(--m-duration-normal) var(--m-ease-standard);

}



.manergo-devis-cart__add-another:hover,

.manergo-devis-cart__add-another:focus-visible {

    background: var(--m-blue-0);

    border-style: solid;

    outline: none;

}



.manergo-devis-cart__add-another span[aria-hidden] {

    font-size: var(--m-fs-h5);

    line-height: 1;

    font-weight: var(--m-fw-bold);

}



/* État du CTA fiche quand le produit est dans le cart (style "ghost") */

.manergo-cta-devis.manergo-cta-devis--in-cart,

button.manergo-cta-devis.manergo-cta-devis--in-cart {

    background-color: transparent;

    color: var(--m-blue-500);

    border-color: var(--m-blue-500);

}

.manergo-cta-devis.manergo-cta-devis--in-cart:hover,

.manergo-cta-devis.manergo-cta-devis--in-cart:focus-visible {

    background-color: var(--m-blue-0);

    color: var(--m-blue-600);

    border-color: var(--m-blue-600);

}



/* Divider "Vos coordonnées" entre la sélection et le form */

.manergo-devis-modal__body-divider {

    display: flex;

    align-items: center;

    gap: var(--m-space-3);

    margin: var(--m-space-6) 0 var(--m-space-4);

    color: var(--m-text-secondary);

    font-size: var(--m-fs-body-s);

    font-weight: var(--m-fw-medium);

    text-transform: uppercase;

    letter-spacing: 0.06em;

}



.manergo-devis-modal__body-divider::before,

.manergo-devis-modal__body-divider::after {

    content: '';

    flex: 1;

    border-top: 1px solid var(--m-beige-100);

}



/* ============================================================

 * 7-BIS. Form WPForms — styles dans le modal

 * ============================================================ */



.manergo-devis-modal__form-wrap[hidden] { display: none; }



.manergo-devis-modal__form-wrap .wpforms-container {

    margin: 0;

}



.manergo-devis-modal__form-wrap .wpforms-form input[type="text"],

.manergo-devis-modal__form-wrap .wpforms-form input[type="email"],

.manergo-devis-modal__form-wrap .wpforms-form input[type="tel"],

.manergo-devis-modal__form-wrap .wpforms-form input[type="url"],

.manergo-devis-modal__form-wrap .wpforms-form textarea,

.manergo-devis-modal__form-wrap .wpforms-form select {

    border: 1px solid var(--m-beige-200);

    border-radius: var(--m-radius-sm);

    background: var(--m-bg-canvas);

    font-size: var(--m-fs-body-s);

    color: var(--m-text-primary);

}



.manergo-devis-modal__form-wrap .wpforms-form input:focus,

.manergo-devis-modal__form-wrap .wpforms-form textarea:focus,

.manergo-devis-modal__form-wrap .wpforms-form select:focus {

    border-color: var(--m-blue-500);

    outline: none;

    box-shadow: 0 0 0 3px var(--m-blue-0);

}



.manergo-devis-modal__form-wrap .wpforms-form label.wpforms-field-label {

    color: var(--m-brand-secondary);

    font-weight: var(--m-fw-medium);

    font-size: var(--m-fs-body-s);

}



.manergo-devis-modal__form-wrap .wpforms-form .wpforms-submit-container {

    margin-top: var(--m-space-5);

}



.manergo-devis-modal__form-wrap .wpforms-form button[type="submit"],

.manergo-devis-modal__form-wrap .wpforms-form .wpforms-submit {

    background-color: var(--m-blue-500) !important;

    border-color: var(--m-blue-500) !important;

    color: #FFFFFF !important;

    border-radius: var(--m-radius-sm) !important;

    padding: var(--m-space-4) var(--m-space-8) !important;

    font-weight: var(--m-fw-bold) !important;

    font-size: var(--m-fs-body-m) !important;

    width: 100%;

}



.manergo-devis-modal__form-wrap .wpforms-form button[type="submit"]:hover,

.manergo-devis-modal__form-wrap .wpforms-form .wpforms-submit:hover {

    background-color: var(--m-blue-600) !important;

    border-color: var(--m-blue-600) !important;

}



/* Boutons multi-pages "Précédent / Suivant" WPForms */

.manergo-devis-modal__form-wrap .wpforms-page-button {

    background-color: var(--m-blue-500) !important;

    color: #FFFFFF !important;

    border: 2px solid var(--m-blue-500) !important;

    border-radius: var(--m-radius-sm) !important;

    font-weight: var(--m-fw-medium) !important;

}



.manergo-devis-modal__form-wrap .wpforms-page-button.wpforms-page-prev {

    background-color: transparent !important;

    color: var(--m-blue-500) !important;

}



/* ============================================================

 * 7-TER. Écran de succès inline (après soumission)

 * ============================================================ */



.manergo-devis-modal__success {

    text-align: center;

    padding: var(--m-space-12) var(--m-space-6);

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: var(--m-space-4);

}



.manergo-devis-modal__success[hidden] { display: none; }



.manergo-devis-modal__success-icon {

    width: 80px;

    height: 80px;

    border-radius: 50%;

    background: var(--m-blue-0);

    color: var(--m-blue-500);

    display: flex;

    align-items: center;

    justify-content: center;

}



.manergo-devis-modal__success-title {

    font-size: var(--m-fs-h4);

    font-weight: var(--m-fw-bold);

    color: var(--m-brand-secondary);

    margin: 0;

}



.manergo-devis-modal__success-text {

    color: var(--m-text-secondary);

    font-size: var(--m-fs-body-s);

    margin: 0 0 var(--m-space-4);

    max-width: 360px;

    line-height: var(--m-lh-relaxed);

}



/* ============================================================

 * 4. Contexte produit enrichi (image + ref + nom + famille)

 *    (legacy — gardé pour compatibilité, plus utilisé maintenant

 *     que le panneau gère plusieurs produits)

 * ============================================================ */



.manergo-devis-modal__product-context {

    display: flex;

    align-items: center;

    gap: var(--m-space-4);

    /* Fiche papier blanche sur le fond beige du modal */

    background: var(--m-bg-canvas);

    border: 1px solid var(--m-beige-100);

    padding: var(--m-space-4);

    border-radius: var(--m-radius-md);

}



.manergo-devis-modal__product-context[hidden] {

    display: none;

}



.manergo-devis-modal__product-thumb {

    flex-shrink: 0;

    width: 64px;

    height: 64px;

    background: var(--m-beige-50);

    border-radius: var(--m-radius-sm);

    overflow: hidden;

    display: flex;

    align-items: center;

    justify-content: center;

}



.manergo-devis-modal__product-thumb[hidden] {

    display: none;

}



.manergo-devis-modal__product-thumb img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;

}



.manergo-devis-modal__product-text {

    flex: 1;

    min-width: 0;

}



.manergo-devis-modal__product-ref {

    font-size: var(--m-fs-caption);

    color: var(--m-text-muted);

    margin: 0 0 var(--m-space-1);

    font-weight: var(--m-fw-medium);

    text-transform: uppercase;

    letter-spacing: 0.04em;

}



.manergo-devis-modal__product-ref[hidden] { display: none; }



.manergo-devis-modal__product-name {

    font-size: var(--m-fs-body-m);

    font-weight: var(--m-fw-bold);

    color: var(--m-brand-secondary);

    margin: 0 0 var(--m-space-2);

    line-height: var(--m-lh-snug);

}



.manergo-devis-modal__product-family {

    display: inline-block;

    font-size: var(--m-fs-caption);

    color: var(--m-text-accent);

    background: var(--m-bg-accent-soft);

    padding: 2px var(--m-space-2);

    border-radius: var(--m-radius-pill);

    font-weight: var(--m-fw-medium);

}



.manergo-devis-modal__product-family[hidden] { display: none; }



/* ============================================================

 * 5. Étapes annoncées

 * ============================================================ */



.manergo-devis-modal__steps {

    padding: var(--m-space-2) 0;

}



.manergo-devis-modal__steps-intro {

    font-size: var(--m-fs-body-s);

    color: var(--m-text-secondary);

    margin: 0 0 var(--m-space-3);

    font-weight: var(--m-fw-medium);

}



.manergo-devis-modal__steps-list {

    list-style: none;

    padding: 0;

    margin: 0;

    display: flex;

    flex-direction: column;

    gap: var(--m-space-2);

}



.manergo-devis-modal__steps-list li {

    display: flex;

    align-items: center;

    gap: var(--m-space-3);

    font-size: var(--m-fs-body-s);

    color: var(--m-text-primary);

    line-height: var(--m-lh-snug);

}



.manergo-devis-modal__step-num {

    flex-shrink: 0;

    width: 24px;

    height: 24px;

    background: var(--m-blue-500);

    color: #FFFFFF;

    border-radius: var(--m-radius-pill);

    font-size: var(--m-fs-caption);

    font-weight: var(--m-fw-bold);

    display: flex;

    align-items: center;

    justify-content: center;

}



/* ============================================================

 * 6. Body (placeholder / formulaire WPForms étape B)

 * ============================================================ */



.manergo-devis-modal__body {

    flex: 1;

}



.manergo-devis-modal__placeholder {

    color: var(--m-text-muted);

    font-style: italic;

    text-align: center;

    padding: var(--m-space-12) var(--m-space-4);

    background: var(--m-bg-canvas);

    border: 1px dashed var(--m-beige-200);

    border-radius: var(--m-radius-md);

    margin: 0;

}



/* ============================================================

 * 7. Footer (alt actions tel/email + trust signals)

 * ============================================================ */



.manergo-devis-modal__footer {

    padding-top: var(--m-space-6);

    border-top: 1px solid var(--m-border-subtle);

    display: flex;

    flex-direction: column;

    gap: var(--m-space-4);

}



.manergo-devis-modal__alt-intro {

    font-size: var(--m-fs-body-s);

    color: var(--m-text-secondary);

    margin: 0;

    font-weight: var(--m-fw-medium);

    text-align: center;

}



.manergo-devis-modal__alt-actions {

    display: flex;

    gap: var(--m-space-3);

    flex-wrap: wrap;

	justify-content: center;

}



/* Boutons secondaires : style "lien discret" — pas de bg ni border,

   l'accent visuel reste sur le CTA primaire du formulaire. */

.manergo-devis-modal__alt-action {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: var(--m-space-2);

    padding: var(--m-space-2) var(--m-space-3);

    background: transparent;

    border: none;

    color: var(--m-text-secondary);

    text-decoration: none;

    font-size: var(--m-fs-body-s);

    font-weight: var(--m-fw-medium);

    border-radius: var(--m-radius-sm);

    transition:

        color            var(--m-duration-normal) var(--m-ease-standard),

        background-color var(--m-duration-normal) var(--m-ease-standard);

}



.manergo-devis-modal__alt-action:hover,

.manergo-devis-modal__alt-action:focus-visible {

    background: transparent;

    color: var(--m-blue-500);

    text-decoration: underline;

    text-underline-offset: 3px;

    outline: none;

}



.manergo-devis-modal__alt-action svg {

    flex-shrink: 0;

}



.manergo-devis-modal__trust {

    list-style: none;

    padding: var(--m-space-3) 0 0;

    margin: 0;

    display: flex;

    justify-content: center;

    gap: var(--m-space-5);

    flex-wrap: wrap;

    border-top: 1px solid var(--m-beige-100);

}



.manergo-devis-modal__trust li {

    font-size: var(--m-fs-caption);

    color: var(--m-text-secondary);

    font-weight: var(--m-fw-medium);

    white-space: nowrap;

    display: flex;

    align-items: center;

    gap: var(--m-space-2);

    text-transform: uppercase;

    letter-spacing: 0.06em;

}



/* Bullet sobre en bleu Manergo devant chaque trust signal */

.manergo-devis-modal__trust li::before {

    content: '';

    display: inline-block;

    width: 5px;

    height: 5px;

    background: var(--m-blue-500);

    border-radius: 50%;

    flex-shrink: 0;

}



/* ============================================================

 * 8. Responsive (mobile <640px)

 * ============================================================ */



@media (max-width: 640px) {

    .manergo-devis-modal {

        width: 100vw;

    }

    .manergo-devis-modal__inner {

        padding: var(--m-space-5);

        gap: var(--m-space-5);

    }

    .manergo-devis-modal__title {

        font-size: var(--m-fs-h4);

    }

    .manergo-devis-modal__alt-actions {

        flex-direction: column;

    }

    .manergo-devis-modal__trust {

        justify-content: center;

    }

}



/* Reduced motion : pas d'animation */

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

    .manergo-devis-modal[open] { animation: none; }

    .manergo-cta-devis,

    .manergo-cta-devis__arrow { transition: none; }

}





/* =============================================================

 * Menu de catégories (archives) — barre beige pleine largeur + pills

 * Injecté via la description de catégorie : [product_categories parent=ID]

 * ============================================================= */

.mg-archmenu-title{font-size:22px;font-weight:600;line-height:1.2;color:#380D14;margin:0 0 10px}

.mg-archmenu{padding:16px 0;margin:0 0 28px;background:#FAF6F2;box-shadow:0 0 0 100vmax #FAF6F2;clip-path:inset(0 -100vmax)}

.mg-archmenu ul.products{display:flex !important;flex-wrap:wrap;gap:2px 12px;margin:0 !important;padding:0 !important;list-style:none !important}

.mg-archmenu ul.products::before,.mg-archmenu ul.products::after{content:none !important;display:none !important}

.mg-archmenu li.product-category{width:auto !important;max-width:none !important;min-width:0 !important;margin:0 !important;padding:0 !important;float:none !important;border:none !important;background:none !important;box-shadow:none !important}

.mg-archmenu li.product-category img{display:none !important}

.mg-archmenu li.product-category a{border:none !important;background:none !important;padding:0 !important;text-decoration:none !important}

.mg-archmenu li.product-category a:has(img):not(:has(.woocommerce-loop-category__title)){display:none !important}

.mg-archmenu li.product-category .woocommerce-loop-category__title{display:inline-flex !important;align-items:center;gap:6px;margin:0 !important;padding:11px 18px !important;border:1px solid #3643BA !important;border-radius:999px !important;color:#3643BA !important;font-size:14px !important;font-weight:600 !important;line-height:1.2 !important;background:#fff !important;transition:background-color .15s,color .15s}

.mg-archmenu li.product-category .woocommerce-loop-category__title mark.count{display:inline !important;background:none !important;color:inherit !important;opacity:.6;font-weight:500 !important;font-size:12.5px !important}

.mg-archmenu li.product-category:hover .woocommerce-loop-category__title{background:#3643BA !important;border-color:#3643BA !important}

.mg-archmenu li.product-category:hover .woocommerce-loop-category__title,.mg-archmenu li.product-category:hover .woocommerce-loop-category__title *{color:#fff !important}





/* =============================================================

 * Fond beige très clair sur les pages produits (boutique + archives)

 * ============================================================= */

body.woocommerce-shop,

body.archive.post-type-archive-product,

body.tax-product_cat {

    background-color: #FAF6F2 !important;

}





/* =============================================================

 * Fiche produit : masquer la section "produit associé" quand elle

 * est vide (shortcodes couleurs/sur-mesure/références sans contenu),

 * pour supprimer l'espace vide avant "Produits similaires".

 * ============================================================= */

body.single-product [class*="produit-associ"]:not(:has(p)):not(:has(a)):not(:has(img)):not(:has(table)):not(:has(li)):not(:has(ul)):not(:has(span)):not(:has(h2)):not(:has(h3)):not(:has(h4)):not(:has(input)):not(:has(button)):not(:has(svg)) {

    display: none !important;

}





/* =============================================================

 * Fiche produit — titres de sections (sur-mesure + produits similaires)

 * en bleu, plus grands ; + espace bas sous "Produits similaires".

 * ============================================================= */

body.single-product .manergo-product-surmesure__title,

body.single-product .related.products h2.ct-module-title {

    color: #3643BA !important;

    font-size: 28px !important;

    font-weight: 700 !important;

    line-height: 1.2 !important;

}

body.single-product .related.products {

    padding-bottom: 64px !important;

}



/* Intro sous le titre sur-mesure : gris foncé prononcé (contraste sur beige) */

body.single-product .manergo-product-surmesure__intro {

    color: #4d4d4d !important;

    max-width: none !important;

}



/* Grille sur-mesure alignée sur la grille "Produits similaires" (4 col, gap 30px) */

body.single-product .manergo-product-surmesure__grid {

    grid-template-columns: repeat(4, 1fr) !important;

    gap: 30px !important;

}

@media (max-width: 768px) {

    body.single-product .manergo-product-surmesure__grid {

        grid-template-columns: repeat(2, 1fr) !important;

        gap: 16px !important;

    }

}



/* =============================================================

 * Menu catégories de la page /catalogue/ (déplacé depuis le contenu

 * de la page pour éviter tout <style> inline visible).

 * ============================================================= */

.mgcat-titlebar{padding:18px 0 0}

.mgcat-title{font-size:22px;font-weight:600;line-height:1.2;color:#380D14;margin:0}

.mgcat-bar{padding:16px 0;margin-top:10px;background:#FAF6F2;box-shadow:0 0 0 100vmax #FAF6F2;clip-path:inset(0 -100vmax)}

.mgcat-bar ul.products{display:flex !important;flex-wrap:wrap;gap:2px 12px;margin:0 !important;padding:0 !important;list-style:none !important}

.mgcat-bar ul.products::before,.mgcat-bar ul.products::after{content:none !important;display:none !important}

.mgcat-bar li.product-category{width:auto !important;max-width:none !important;min-width:0 !important;margin:0 !important;padding:0 !important;float:none !important;border:none !important;background:none !important;box-shadow:none !important}

.mgcat-bar li.product-category img{display:none !important}

.mgcat-bar li.product-category a{border:none !important;background:none !important;padding:0 !important;text-decoration:none !important}

.mgcat-bar li.product-category a:has(img):not(:has(.woocommerce-loop-category__title)){display:none !important}

.mgcat-bar li.product-category .woocommerce-loop-category__title{display:inline-flex !important;align-items:center;gap:6px;margin:0 !important;padding:11px 18px !important;border:1px solid #3643BA !important;border-radius:999px !important;color:#3643BA !important;font-size:14px !important;font-weight:600 !important;line-height:1.2 !important;background:#fff !important;transition:background-color .15s,color .15s}

.mgcat-bar li.product-category .woocommerce-loop-category__title mark.count{display:inline !important;background:none !important;color:inherit !important;opacity:.6;font-weight:500 !important;font-size:12.5px !important}

.mgcat-bar li.product-category:hover .woocommerce-loop-category__title{background:#3643BA !important;border-color:#3643BA !important}

.mgcat-bar li.product-category:hover .woocommerce-loop-category__title,.mgcat-bar li.product-category:hover .woocommerce-loop-category__title *{color:#fff !important}





/* Blog & catégories — espacement haut/bas du contenu (V2) */

body.blog .site-main,

body.category .site-main,

body.single-post .site-main {

    padding-top: var(--m-space-24);

    padding-bottom: var(--m-space-24);

}

@media (max-width: 768px) {

    body.blog .site-main,

    body.category .site-main,

    body.single-post .site-main {

        padding-top: var(--m-space-16);

        padding-bottom: var(--m-space-16);

    }

}





/* Articles — titre hero du contenu en marron (était blanc) */

body.single-post .entry-content h1 {

    color: var(--m-brown-500) !important;

    font-size: clamp(28px, 4vw, 42px) !important;

    line-height: 1.15 !important;

}





/* Articles — fil d'Ariane en haut (au-dessus de l'image à la une) */

body.single-post article.post { display: flex; flex-direction: column; }

body.single-post article.post > .hero-section { order: -1; }





/* Articles — hauteur du fil d'Ariane réduite en haut */

body.single-post .site-main { padding-top: var(--m-space-10, 40px) !important; }

body.single-post .hero-section { padding-top: 0 !important; margin-bottom: var(--m-space-6, 24px) !important; }