/*
 * Identite catalogue PROTEXIA.
 *
 * Une carte produit doit se presenter de la meme facon partout : boutique,
 * archives de categorie, produits similaires et grilles posees dans une
 * page. Les regles ci-dessous s'appliquent a toute boucle marquee par
 * PCO_Catalog_Identity, sans dependre d'une classe de corps de page.
 *
 * Les couleurs proviennent de la configuration ; les valeurs de repli ne
 * servent qu'a garantir un rendu correct si aucun reglage n'est fourni.
 */

:root {
    --pco-catalog-navy: #082b4c;
    --pco-catalog-navy-deep: #051f38;
    --pco-catalog-accent: #f36f21;
    --pco-catalog-accent-dark: #d85a0d;
    /*
     * Le prix a sa propre teinte, plus sombre que l'accent. Deux raisons.
     * Le theme fixe deja le nombre a #c44a00 avec !important : sans cet
     * alignement, le chiffre prenait sa couleur et le symbole monetaire la
     * notre, et un meme prix s'affichait en deux oranges. Et sur fond blanc
     * #f36f21 ne tient pas le contraste AA, la ou #c44a00 l'atteint.
     * L'accent vif reste reserve aux fonds sombres et aux aplats.
     */
    --pco-catalog-price: #c44a00;
    --pco-catalog-line: #dce3ea;
    --pco-catalog-surface: #f8fafc;
    --pco-catalog-muted: #667589;
    --pco-catalog-gap: 26px;
    --pco-catalog-columns: 3;
    /* Hauteur commune aux commandes de variante, couleur comme taille. */
    --pco-control-height: 46px;
}

/* ---------------------------------------------------------------- grille */

ul.products.pco-catalog-grid {
    display: grid !important;
    grid-template-columns: repeat(var(--pco-catalog-columns), minmax(0, 1fr)) !important;
    gap: var(--pco-catalog-gap) !important;
    margin: 0 0 32px !important;
    padding: 0 !important;
    list-style: none !important;
}

ul.products.pco-catalog-grid::before,
ul.products.pco-catalog-grid::after {
    display: none !important;
}

/*
 * WooCommerce annonce lui-meme la densite de chaque boucle par une classe
 * `columns-N` : boutique, produits similaires et vitrine la posent chacun
 * selon leur besoin. S'y rattacher evite d'ecrire un cas par contexte et
 * rend la densite de la vitrine reellement configurable.
 */
ul.products.pco-catalog-grid.columns-1 { --pco-catalog-columns: 1; }
ul.products.pco-catalog-grid.columns-2 { --pco-catalog-columns: 2; }
ul.products.pco-catalog-grid.columns-3 { --pco-catalog-columns: 3; }
ul.products.pco-catalog-grid.columns-4 { --pco-catalog-columns: 4; }
ul.products.pco-catalog-grid.columns-5 { --pco-catalog-columns: 5; }
ul.products.pco-catalog-grid.columns-6 { --pco-catalog-columns: 6; }
ul.products.pco-catalog-grid.columns-7 { --pco-catalog-columns: 7; }
ul.products.pco-catalog-grid.columns-8 { --pco-catalog-columns: 8; }

/* Les lignes denses se resserrent pour garder des cartes lisibles. */
ul.products.pco-catalog-grid.columns-5,
ul.products.pco-catalog-grid.columns-6,
ul.products.pco-catalog-grid.columns-7,
ul.products.pco-catalog-grid.columns-8 {
    --pco-catalog-gap: 18px;
}

/* ----------------------------------------------------------------- carte */

ul.products.pco-catalog-grid li.product {
    background: #fff;
    border: 1px solid var(--pco-catalog-line);
    border-radius: 14px;
    box-shadow: 0 8px 28px rgba(8, 43, 76, .055);
    display: flex !important;
    flex-direction: column;
    float: none !important;
    margin: 0 !important;
    overflow: hidden;
    padding: 14px !important;
    transition: box-shadow .2s, transform .2s;
    width: auto !important;
}

ul.products.pco-catalog-grid li.product:hover {
    box-shadow: 0 15px 38px rgba(8, 43, 76, .12);
    transform: translateY(-3px);
}

ul.products.pco-catalog-grid li.product > a,
ul.products.pco-catalog-grid li.product .woocommerce-loop-product__link {
    color: inherit;
    display: block;
    text-decoration: none;
}

/* Images homogenes : jamais deformees, toujours au meme format. */
ul.products.pco-catalog-grid li.product img {
    aspect-ratio: 1 / 1;
    background: var(--pco-catalog-surface);
    border-radius: 9px;
    display: block;
    height: auto;
    margin: 0 0 4px;
    object-fit: contain;
    width: 100%;
}

/* Titre borne visuellement : la hauteur des cartes reste alignee. */
ul.products.pco-catalog-grid li.product .woocommerce-loop-product__title {
    color: var(--pco-catalog-navy-deep);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    font-size: 1rem !important;
    font-weight: 750;
    line-height: 1.35 !important;
    margin: 0 !important;
    min-height: 4.05em;
    overflow: hidden;
    padding: 12px 2px 6px !important;
}

/*
 * Prix mis en valeur par l'orange PROTEXIA, d'une seule couleur du premier
 * chiffre au symbole monetaire, et de taille identique sur toutes les
 * cartes quel que soit leur contexte.
 */
ul.products.pco-catalog-grid li.product .price,
ul.products.pco-catalog-grid li.product .price .amount,
ul.products.pco-catalog-grid li.product .price .woocommerce-Price-amount,
ul.products.pco-catalog-grid li.product .price .woocommerce-Price-currencySymbol,
ul.products.pco-catalog-grid li.product .price ins,
ul.products.pco-catalog-grid li.product .price bdi {
    color: var(--pco-catalog-price) !important;
    font-size: 1.15rem !important;
    font-weight: 800 !important;
    text-decoration: none;
}

ul.products.pco-catalog-grid li.product .price {
    margin: 4px 2px 10px !important;
}

ul.products.pco-catalog-grid li.product .price del,
ul.products.pco-catalog-grid li.product .price del bdi {
    color: var(--pco-catalog-muted) !important;
    font-size: .95rem !important;
    font-weight: 600 !important;
    text-decoration: line-through;
}

/* Bouton orange, pleine largeur, aligne en bas de chaque carte. */
ul.products.pco-catalog-grid li.product .button,
ul.products.pco-catalog-grid li.product .added_to_cart {
    align-self: stretch;
    background: var(--pco-catalog-accent) !important;
    border: 0 !important;
    border-radius: 8px !important;
    color: #fff !important;
    display: block;
    font-weight: 800 !important;
    line-height: 1.25 !important;
    margin: auto 0 0 !important;
    min-height: 46px;
    padding: 13px 18px !important;
    text-align: center;
    transition: background .15s, transform .15s;
    width: 100%;
}

ul.products.pco-catalog-grid li.product .button:hover,
ul.products.pco-catalog-grid li.product .added_to_cart:hover {
    background: var(--pco-catalog-accent-dark) !important;
    transform: translateY(-1px);
}

/*
 * Bloc reference / disponibilite / couleurs.
 *
 * Le connecteur emet ce balisage sur toutes les boucles produit, mais ne
 * charge sa feuille de style que sur la boutique, les archives de
 * categorie et les fiches. Ailleurs — vitrine d'accueil, page libre — le
 * meme balisage restait sans mise en forme : reference sans majuscules,
 * disponibilite en gris au lieu du vert, pastilles de couleur reduites a
 * rien.
 *
 * Les regles sont donc reprises ici, a l'identique, pour que la carte se
 * presente de la meme facon quel que soit l'endroit. Les couleurs passent
 * par la configuration, comme le reste de l'identite.
 */
ul.products.pco-catalog-grid li.product .pwi-card-meta {
    font-size: .76rem;
    margin: 0 2px 12px;
}

ul.products.pco-catalog-grid li.product .pwi-card-meta__top {
    align-items: center;
    color: var(--pco-catalog-muted);
    display: flex;
    gap: 8px;
    justify-content: space-between;
}

ul.products.pco-catalog-grid li.product .pwi-card-reference {
    font-weight: 750;
    text-transform: uppercase;
}

ul.products.pco-catalog-grid li.product .pwi-card-stock {
    font-weight: 750;
    white-space: nowrap;
}

ul.products.pco-catalog-grid li.product .pwi-card-stock::before {
    content: '●';
    font-size: .65em;
    margin-right: 4px;
}

ul.products.pco-catalog-grid li.product .pwi-card-stock.is-in-stock {
    color: var(--pco-catalog-in-stock);
}

ul.products.pco-catalog-grid li.product .pwi-card-stock.is-out-of-stock {
    color: var(--pco-catalog-out-stock);
}

ul.products.pco-catalog-grid li.product .pwi-card-colors {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 10px;
    min-height: 22px;
}

ul.products.pco-catalog-grid li.product .pwi-mini-swatch {
    background: var(--pwi-color, #c7cdd4);
    border: 2px solid #fff;
    border-radius: 999px;
    box-shadow: 0 0 0 1px #aeb8c2;
    display: inline-block;
    flex: 0 0 auto;
    height: 18px;
    width: 18px;
}

ul.products.pco-catalog-grid li.product .pwi-card-colors small {
    color: var(--pco-catalog-muted);
    font-weight: 700;
}

/* ------------------------------------------------------ vitrine d'accueil */

.pco-showcase {
    display: flex;
    flex-direction: column;
    gap: 54px;
}

/*
 * Chaque bloc se lit de haut en bas : l'intitule seul sur sa ligne, la
 * description en dessous, les produits, puis l'acces a la categorie
 * complete. Titre et description cote a cote se disputaient la meme ligne
 * et se lisaient mal.
 */
.pco-showcase__head {
    margin: 0 auto 24px;
    max-width: 780px;
    text-align: center;
}

.pco-showcase__title {
    color: var(--pco-catalog-navy-deep);
    font-size: clamp(1.35rem, 2.2vw, 1.75rem) !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    margin: 0 !important;
}

.pco-showcase__intro {
    color: var(--pco-catalog-muted);
    font-size: .95rem;
    line-height: 1.6;
    margin: 10px 0 0;
}

/* L'acces a la categorie complete se place apres les produits. */
.pco-showcase__actions {
    margin: 22px 0 0;
    text-align: center;
}

.pco-showcase__more {
    background: transparent;
    border: 2px solid var(--pco-catalog-accent);
    border-radius: 8px;
    color: var(--pco-catalog-accent);
    display: inline-block;
    font-size: .92rem;
    font-weight: 800;
    padding: 11px 26px;
    text-decoration: none;
    transition: background .15s, color .15s;
}

.pco-showcase__more:hover {
    background: var(--pco-catalog-accent);
    color: #fff;
}

.pco-showcase ul.products.pco-catalog-grid {
    margin-bottom: 0 !important;
}

@media (max-width: 767px) {
    .pco-showcase {
        gap: 38px;
    }

    .pco-showcase__more {
        display: block;
    }
}

/* ------------------------------------------- banniere d'en-tete catalogue */

.pco-hero {
    align-items: stretch;
    background: linear-gradient(115deg, var(--pco-catalog-navy-deep) 0%, var(--pco-catalog-navy) 58%, #0d3f6d 100%);
    border-radius: 16px;
    display: grid;
    gap: 0;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    margin: 0 0 30px;
    overflow: hidden;
    position: relative;
}

.pco-hero--sobre {
    grid-template-columns: minmax(0, 1fr);
}

/*
 * Le bloc d'en-tete est centre, comme les blocs de la vitrine et les
 * descriptions de categorie : toutes les entrees en matiere du catalogue
 * se presentent de la meme facon.
 */
.pco-hero__texte {
    padding: 40px 42px;
    text-align: center;
}

.pco-hero__surtitre {
    color: var(--pco-catalog-accent);
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .14em;
    margin: 0 0 10px;
    text-transform: uppercase;
}

.pco-hero__titre {
    color: #fff !important;
    font-size: clamp(1.7rem, 3.4vw, 2.6rem) !important;
    font-weight: 800 !important;
    line-height: 1.1 !important;
    margin: 0 !important;
}

.pco-hero__intro {
    color: rgba(255, 255, 255, .82);
    font-size: .97rem;
    line-height: 1.6;
    margin: 14px auto 0;
    max-width: 70ch;
}

.pco-hero__volume {
    color: rgba(255, 255, 255, .72);
    font-size: .88rem;
    margin: 18px 0 0;
}

.pco-hero__volume strong {
    color: #fff;
    font-size: 1.15rem;
    font-weight: 800;
    margin-right: 4px;
}

/*
 * L'image vient du catalogue : c'est une photographie de produit sur fond
 * clair. Le degrade la fond dans la banniere plutot que de la poser dans
 * un cadre, ce qui evite un rectangle blanc au milieu du marine.
 */
/*
 * Les photographies du catalogue sont carrees. Laissees dans le flux,
 * elles imposeraient leur hauteur a toute la banniere. L'image est donc
 * detachee : la hauteur vient du texte, avec un minimum pour que le visuel
 * reste lisible.
 */
.pco-hero__visuel {
    min-height: 230px;
    position: relative;
}

.pco-hero__visuel::before {
    background: linear-gradient(90deg, var(--pco-catalog-navy) 0%, rgba(8, 43, 76, .35) 42%, transparent 100%);
    content: '';
    inset: 0;
    position: absolute;
    z-index: 1;
}

.pco-hero__visuel img {
    display: block;
    height: 100%;
    inset: 0;
    object-fit: cover;
    object-position: center;
    position: absolute;
    width: 100%;
}

@media (max-width: 900px) {
    .pco-hero {
        grid-template-columns: minmax(0, 1fr);
    }

    .pco-hero__texte {
        padding: 28px 24px;
    }

    .pco-hero__visuel {
        min-height: 190px;
        order: -1;
    }

    .pco-hero__visuel::before {
        background: linear-gradient(180deg, rgba(8, 43, 76, .25) 0%, var(--pco-catalog-navy) 100%);
    }
}

/*
 * Description editoriale de la categorie.
 *
 * Elle est centree sous la banniere, avec une largeur de lecture bornee :
 * un paragraphe centre sur toute la largeur du contenu se suit mal d'une
 * ligne a l'autre.
 */
.pwi-catalog-archive .term-description,
.pwi-catalog-archive .woocommerce-products-header__description {
    color: var(--pco-catalog-muted);
    line-height: 1.7;
    /* Meme largeur que la banniere : les deux blocs se repondent. */
    margin: 0 0 30px;
    max-width: none;
    text-align: center;
}

.pwi-catalog-archive .term-description p,
.pwi-catalog-archive .woocommerce-products-header__description p {
    margin: 0 0 .9em;
}

.pwi-catalog-archive .term-description p:last-child,
.pwi-catalog-archive .woocommerce-products-header__description p:last-child {
    margin-bottom: 0;
}

/* --------------------------------------- boutique : colonne de categories */

/*
 * WooCommerce fait flotter le compteur de resultats a gauche et le tri a
 * droite. Le menu de categories, insere ensuite, ne les degageait pas : il
 * demarrait a la meme hauteur et passait sous eux, masquant la ligne
 * « Affichage de 1–12 sur N resultats ». La grille produit, elle, portait
 * deja `clear: both` — d'ou son alignement correct.
 *
 * Le degagement vaut a toutes les largeurs. Au-dela de 1025 px, la mise en
 * page passe en grille et la propriete devient sans effet, ce qui ne gene
 * pas ; en dessous, elle corrige le recouvrement.
 */
.pwi-catalog-archive .pwi-category-source,
.pwi-catalog-archive .pwi-category-nav-fallback {
    clear: both;
}

/*
 * Le connecteur cherche, dans la page, un bloc de categories ou replacer sa
 * navigation. Ce bloc n'existe plus dans le modele de boutique : le script
 * se rabat alors sur une insertion pleine largeur, juste avant la grille,
 * ou le menu recouvre le compteur de resultats et le tri.
 *
 * Plutot que de dupliquer ce deplacement, la mise en page est reconstruite
 * la ou elle manque : la zone de contenu devient une grille a deux
 * colonnes. Le menu occupe la premiere, le catalogue la seconde. Le script
 * du connecteur garde son comportement, et une boutique qui retrouverait
 * son bloc de categories continuerait de fonctionner.
 */
@media (min-width: 1025px) {
    .pwi-catalog-archive main.site-main {
        align-items: start;
        column-gap: 36px;
        display: grid;
        /*
         * La colonne doit se distinguer d'une carte produit : a largeur
         * egale, le menu se lisait comme un article de plus. Les intitules
         * les plus longs — « Protection des yeux et du visage » — tiennent
         * alors sans repli.
         */
        grid-template-columns: minmax(260px, 320px) minmax(0, 1fr);
    }

    /* Tout le catalogue occupe la colonne de droite. */
    .pwi-catalog-archive main.site-main > * {
        grid-column: 2;
        min-width: 0;
    }

    /* Fil d'ariane, banniere et titre restent en pleine largeur. */
    .pwi-catalog-archive main.site-main > .woocommerce-breadcrumb,
    .pwi-catalog-archive main.site-main > .pco-hero,
    .pwi-catalog-archive main.site-main > .woocommerce-products-header {
        grid-column: 1 / -1;
    }

    /* Le menu commence sous la banniere. */
    .pwi-catalog-archive main.site-main:has(> .pco-hero) > .pwi-category-source {
        grid-row: 4 / span 30;
    }

    /*
     * Le menu prend la colonne de gauche a partir de la premiere rangee de
     * catalogue. La portee couvre largement le nombre de blocs presents :
     * les rangees excedentaires restent vides et sans hauteur.
     */
    .pwi-catalog-archive main.site-main > .pwi-category-source {
        grid-column: 1;
        grid-row: 3 / span 30;
        position: sticky;
        top: 24px;
    }

    /* Le repli pleine largeur du script n'a plus lieu d'etre. */
    .pwi-catalog-archive main.site-main > .pwi-category-nav-fallback {
        margin: 0;
        max-width: none;
        width: auto;
    }
}

/* ------------------------------------------------- fiche produit : titres */

.single-product h1.product_title,
.single-product .elementor-widget-woocommerce-product-title .elementor-heading-title {
    font-size: clamp(1.3rem, 2vw, 1.625rem) !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    margin-bottom: .5rem !important;
}

/*
 * Tous les sous-titres de la fiche partagent la meme taille : « Description »
 * vit dans les onglets WooCommerce, « Produits similaires » dans sa propre
 * section, et l'index des variantes dans un element depliant.
 */
.single-product .related > h2,
.single-product section.related h2,
.single-product .up-sells > h2,
.single-product .cross-sells > h2,
.single-product .woocommerce-tabs h2,
.single-product .woocommerce-Tabs-panel > h2,
.single-product .pwi-variant-index > summary {
    font-size: clamp(1.15rem, 1.5vw, 1.25rem) !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    margin-bottom: 1rem !important;
}

/*
 * Le prix de la fiche reste dominant, mais dans le meme rapport que celui
 * des cartes et dans la meme couleur d'accent.
 */
.single-product .summary .price,
.single-product .summary .price .amount,
.single-product .summary .price .woocommerce-Price-amount,
.single-product .summary .price .woocommerce-Price-currencySymbol,
.single-product .summary .price bdi,
.single-product .summary .price ins,
.single-product .elementor-widget-woocommerce-product-price .price,
.single-product .elementor-widget-woocommerce-product-price .price bdi {
    color: var(--pco-catalog-price) !important;
    font-size: 1.55rem !important;
    font-weight: 800 !important;
    text-decoration: none;
}

.single-product .summary .price del,
.single-product .summary .price del bdi {
    color: var(--pco-catalog-muted) !important;
    font-size: 1.05rem !important;
    font-weight: 600 !important;
    text-decoration: line-through;
}

/* Resume resserre : la colonne droite tient dans la hauteur de l'image. */
.single-product .woocommerce-product-details__short-description,
.single-product .elementor-widget-woocommerce-product-short-description {
    font-size: .95rem;
    line-height: 1.55;
}

.single-product .woocommerce-product-details__short-description ul,
.single-product .elementor-widget-woocommerce-product-short-description ul {
    margin: 0;
    padding-left: 1.1rem;
}

.single-product .woocommerce-product-details__short-description li,
.single-product .elementor-widget-woocommerce-product-short-description li {
    margin-bottom: .35rem;
}

/*
 * Les informations de variante tiennent sur trois colonnes plutot qu'une
 * pile de cinq lignes : meme contenu, hauteur divisee.
 */
.single-product .pwi-product-page .pwi-product-facts,
.single-product .pwi-product-facts {
    gap: 6px 16px !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    padding: 12px 14px !important;
}

.single-product .pwi-product-page .pwi-product-facts small,
.single-product .pwi-product-facts small {
    font-size: .68rem !important;
    letter-spacing: .04em;
    line-height: 1.3 !important;
}

.single-product .pwi-product-page .pwi-product-facts strong,
.single-product .pwi-product-facts strong {
    font-size: .85rem !important;
    line-height: 1.3 !important;
}

@media (max-width: 767px) {
    .single-product .pwi-product-facts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/*
 * Les pastilles de variante gardent leur libelle et leur echantillon de
 * couleur, mais cessent d'occuper la hauteur d'un bouton principal.
 */
/*
 * Choix de la couleur par dépliant.
 *
 * Les pastilles portent leur echantillon et leur nom : c'est la forme la
 * plus lisible pour choisir une teinte. Mais un article peut en proposer
 * neuf, et la liste deployee repoussait alors tout le bas de la fiche.
 *
 * Le dépliant garde donc la liste intacte et ne l'affiche qu'a la demande.
 * Ferme, il montre la couleur retenue ; ouvert, toutes les teintes. Deux
 * coloris comme neuf occupent la meme place au repos.
 */
.single-product .pco-variant-picker {
    max-width: 100%;
}

/* Le dépliant reprend trait pour trait l'apparence de la liste Taille. */
.single-product .pco-variant-picker > summary {
    align-items: center;
    background-color: #fff;
    background-image: linear-gradient(45deg, transparent 50%, var(--pco-catalog-navy) 50%), linear-gradient(135deg, var(--pco-catalog-navy) 50%, transparent 50%);
    background-position: calc(100% - 19px) calc(50% + 1px), calc(100% - 13px) calc(50% + 1px);
    background-repeat: no-repeat;
    background-size: 6px 6px, 6px 6px;
    border: 1px solid var(--pco-catalog-line);
    border-radius: 8px;
    color: var(--pco-catalog-navy-deep);
    cursor: pointer;
    display: flex;
    font-size: .95rem;
    font-weight: 650;
    gap: 9px;
    box-sizing: border-box;
    line-height: 1.35;
    list-style: none;
    min-height: var(--pco-control-height);
    padding: 0 40px 0 14px;
}

.single-product .pco-variant-picker > summary::-webkit-details-marker {
    display: none;
}

.single-product .pco-variant-picker[open] > summary {
    background-image: linear-gradient(135deg, transparent 50%, var(--pco-catalog-navy) 50%), linear-gradient(45deg, var(--pco-catalog-navy) 50%, transparent 50%);
}

.single-product .pco-variant-picker > summary:focus-visible {
    border-color: var(--pco-catalog-accent);
    outline: 2px solid rgba(243, 111, 33, .25);
    outline-offset: 1px;
}

.single-product .pco-variant-picker__swatch {
    background: var(--pwi-color, var(--pco-catalog-line));
    background-image: var(--pwi-color, none);
    border: 1px solid rgba(8, 43, 76, .18);
    border-radius: 999px;
    flex: 0 0 auto;
    height: 20px;
    width: 20px;
}

/*
 * La liste porte un affichage impose par le connecteur ; le repli natif du
 * depliant doit donc etre affirme explicitement.
 */
.single-product .pco-variant-picker:not([open]) .pco-variant-picker__panel,
.single-product .pco-variant-picker:not([open]) .pwi-option-list--colors {
    display: none !important;
}

.single-product .pco-variant-picker__panel {
    background: #fff;
    border: 1px solid var(--pco-catalog-line);
    border-radius: 8px;
    margin-top: 6px;
    max-height: 260px;
    overflow-y: auto;
    padding: 10px;
}

.single-product .pco-variant-picker .pwi-option-list--colors {
    gap: 8px;
    margin-bottom: 0;
}

/*
 * Le menu annonce lui-meme ce qu'il demande — « Choisir : couleur » — et
 * affiche la valeur retenue des qu'elle l'est. Le libelle place au-dessus
 * repetait donc l'information et ajoutait une ligne a chaque attribut.
 *
 * Il n'est pas supprime pour autant : il reste associe a la liste native
 * et continue d'etre annonce par les lecteurs d'ecran, qui n'ont pas le
 * menu visuel pour les renseigner.
 */
.single-product table.variations label,
.single-product .pwi-variation-label {
    border: 0;
    clip-path: inset(50%);
    height: 1px;
    margin: 0;
    overflow: hidden;
    padding: 0;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

.single-product .woocommerce-product-details__short-description,
.single-product .woocommerce-product-details__short-description li,
.single-product .woocommerce-product-details__short-description p {
    font-size: .92rem !important;
    line-height: 1.5 !important;
}

.single-product table.variations tr + tr {
    margin-top: .35rem;
}

.single-product .product_meta {
    font-size: .82rem;
}

/*
 * Les onglets suivaient de trop pres la reference et la categorie : les
 * deux blocs se lisaient comme un seul. Le retrait est pris en marge
 * interne, qui ne se fusionne pas avec celle du bloc precedent.
 */
.single-product .woocommerce-tabs {
    padding-top: 2rem;
}

.single-product .woocommerce-tabs ul.tabs,
.single-product .woocommerce-tabs .wc-tabs {
    margin-bottom: 1.5rem;
}

/* --------------------------------------------- fiche produit : debordement */

/*
 * Sans initialisation du carrousel, WooCommerce laisse ses images alignees
 * cote a cote : le document devient plus large que la fenetre. Contenir la
 * galerie supprime le defilement lateral sans empecher le carrousel de
 * fonctionner lorsqu'il demarre normalement.
 */
.single-product .woocommerce-product-gallery {
    max-width: 100%;
    overflow: hidden;
}

.single-product .woocommerce-product-gallery__wrapper {
    max-width: 100%;
}

.single-product .woocommerce-product-gallery img {
    height: auto;
    max-width: 100%;
}

/* Le tableau des variantes ne doit jamais pousser la page. */
.single-product table.variations {
    display: block;
    max-width: 100%;
    width: 100%;
}

/*
 * Les attributs se placent cote a cote tant que la largeur le permet :
 * couleur et taille tiennent ainsi sur une seule ligne. Le nombre de
 * colonnes s'ajuste seul au nombre d'attributs et a la largeur disponible,
 * sans supposer qu'il y en a exactement deux.
 */
.single-product table.variations tbody {
    display: grid;
    gap: 10px 18px;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    width: 100%;
}

.single-product table.variations tr {
    display: block;
    min-width: 0;
    width: 100%;
}

.single-product table.variations th,
.single-product table.variations td {
    display: block;
    max-width: 100%;
    padding: 0 0 .5rem;
    /*
     * Les listes natives sont masquees visuellement mais restent lues par
     * les technologies d'assistance. Elles sont absolues et declarent
     * `max-width:100%` ; sans ancetre positionne, ce pourcentage se
     * rapporte a la fenetre et elles elargissent le document. La cellule
     * leur sert desormais de cadre de reference.
     */
    position: relative;
    width: 100%;
}

.single-product table.variations select {
    max-width: 100%;
    width: 100%;
}

.single-product .pwi-option-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    max-width: 100%;
}

/* ----------------------------------------------------------- adaptations */

/*
 * Paliers adaptatifs : quelle que soit la densite annoncee, une grille
 * dense devient lisible sur tablette puis sur telephone.
 */
@media (max-width: 1200px) {
    ul.products.pco-catalog-grid.columns-5,
    ul.products.pco-catalog-grid.columns-6,
    ul.products.pco-catalog-grid.columns-7,
    ul.products.pco-catalog-grid.columns-8 {
        --pco-catalog-columns: 4;
    }
}

@media (max-width: 1024px) {
    ul.products.pco-catalog-grid,
    ul.products.pco-catalog-grid[class*="columns-"] {
        --pco-catalog-columns: 2;
    }
}

@media (max-width: 767px) {
    ul.products.pco-catalog-grid,
    ul.products.pco-catalog-grid[class*="columns-"] {
        --pco-catalog-columns: 1;
        --pco-catalog-gap: 16px;
    }
    ul.products.pco-catalog-grid li.product .woocommerce-loop-product__title {
        min-height: 0;
    }
}

/* ---------------------------------------------------- vitrine des categories */

.pco-hub__header {
    margin: 0 auto 34px;
    max-width: 780px;
    text-align: center;
}

.pco-hub__surtitre {
    color: var(--pco-catalog-accent);
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .14em;
    margin: 0 0 8px;
    text-transform: uppercase;
}

.pco-hub__titre {
    color: var(--pco-catalog-navy-deep);
    font-size: clamp(1.4rem, 2.4vw, 1.9rem) !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    margin: 0 !important;
}

.pco-hub__intro {
    color: var(--pco-catalog-muted);
    font-size: .95rem;
    line-height: 1.6;
    margin: 10px 0 0;
}

.pco-hub__grille {
    display: grid;
    gap: 26px;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.pco-hub__carte {
    background: #fff;
    border: 1px solid var(--pco-catalog-line);
    border-radius: 14px;
    box-shadow: 0 8px 28px rgba(8, 43, 76, .055);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: box-shadow .2s, transform .2s;
}

.pco-hub__carte:hover {
    box-shadow: 0 15px 38px rgba(8, 43, 76, .12);
    transform: translateY(-3px);
}

.pco-hub__visuel {
    background: var(--pco-catalog-surface);
    display: block;
}

.pco-hub__visuel img {
    aspect-ratio: 16 / 10;
    display: block;
    object-fit: contain;
    width: 100%;
}

.pco-hub__corps {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 18px 20px 20px;
}

/*
 * Chaque categorie a sa carte, sous-categories comprises. Le nom de la
 * categorie mere situe la carte sans la subordonner : il se lit, il ne
 * se dispute pas la place avec le titre.
 */
.pco-hub__parent {
    color: var(--pco-catalog-muted);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .09em;
    margin: 0 0 6px;
    text-transform: uppercase;
}

.pco-hub__nom {
    font-size: 1.15rem !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
    margin: 0 !important;
}

.pco-hub__nom a {
    color: var(--pco-catalog-navy-deep);
    text-decoration: none;
}

.pco-hub__texte {
    color: var(--pco-catalog-muted);
    font-size: .88rem;
    line-height: 1.55;
    margin: 8px 0 0;
}

.pco-hub__compte {
    color: var(--pco-catalog-accent);
    font-size: .82rem;
    font-weight: 800;
    margin: 8px 0 0;
}

/* Toutes les sous-categories, avec leur volume : rien n'est masque. */
.pco-hub__sous {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    list-style: none;
    margin: 14px 0 0;
    padding: 0;
}

.pco-hub__sous a {
    align-items: center;
    background: var(--pco-catalog-surface);
    border: 1px solid var(--pco-catalog-line);
    border-radius: 999px;
    color: var(--pco-catalog-navy-deep);
    display: inline-flex;
    font-size: .78rem;
    font-weight: 700;
    gap: 6px;
    padding: 5px 11px;
    text-decoration: none;
}

.pco-hub__sous a:hover {
    background: var(--pco-catalog-navy);
    border-color: var(--pco-catalog-navy);
    color: #fff;
}

.pco-hub__sous span {
    color: var(--pco-catalog-muted);
    font-weight: 600;
}

.pco-hub__sous a:hover span {
    color: rgba(255, 255, 255, .8);
}

.pco-hub__lien {
    border: 2px solid var(--pco-catalog-accent);
    border-radius: 8px;
    color: var(--pco-catalog-accent);
    font-size: .88rem;
    font-weight: 800;
    margin-top: auto;
    padding: 10px 18px;
    text-align: center;
    text-decoration: none;
    transition: background .15s, color .15s;
}

.pco-hub__lien:hover {
    background: var(--pco-catalog-accent);
    color: #fff;
}

/* ------------------------------------------------------- filtres catalogue
 *
 * Une barre horizontale au-dessus de la grille, plutot qu'une colonne : la
 * colonne de gauche appartient deja au menu de categories du connecteur, et
 * s'y inserer aurait demande de defaire sa mise en grille.
 *
 * Le filtrage par attribut — taille, couleur — n'est pas propose : les
 * attributs de cette boutique sont locaux et non des taxonomies, donc rien
 * a filtrer. Marque et prix, eux, existent reellement.
 */

.pco-filtres {
    align-items: center;
    background: #ffffff;
    border: 1px solid #dce3ea;
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(3, 31, 65, .06);
    clear: both;
    column-gap: 18px;
    display: flex;
    flex-wrap: wrap;
    margin: 0 0 22px;
    padding: 14px 18px;
    row-gap: 12px;
}

/* Un filtre actif doit se voir : sinon on croit la boutique vide. */
.pco-filtres--actifs {
    border-color: #FB5E04;
    box-shadow: 0 0 0 1px #FB5E04 inset, 0 1px 2px rgba(3, 31, 65, .06);
}

.pco-filtres__titre {
    color: #031F41;
    font-size: .95rem;
    font-weight: 750;
    letter-spacing: .01em;
}

.pco-filtres__groupe {
    align-items: center;
    column-gap: 10px;
    display: flex;
    flex-wrap: wrap;
    row-gap: 8px;
}

.pco-filtres__intitule {
    color: #5b6b7d;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.pco-filtres__choix {
    align-items: center;
    background: #f4f6f8;
    border: 1px solid transparent;
    border-radius: 999px;
    color: #031F41;
    column-gap: 7px;
    cursor: pointer;
    display: inline-flex;
    font-size: .9rem;
    padding: 6px 13px;
}

.pco-filtres__choix:hover {
    border-color: #c9d4df;
}

/* La coche est le seul repere : elle doit rester visible et accessible. */
.pco-filtres__choix input {
    accent-color: #FB5E04;
    height: 15px;
    margin: 0;
    width: 15px;
}

.pco-filtres__choix:has(input:checked) {
    background: #fff1e6;
    border-color: #FB5E04;
    font-weight: 650;
}

.pco-filtres__choix input:focus-visible {
    outline: 3px solid #031F41;
    outline-offset: 2px;
}

.pco-filtres__compte {
    color: #7a8794;
    font-size: .78rem;
}

.pco-filtres__prix input {
    -moz-appearance: textfield;
    appearance: textfield;
    background: #ffffff;
    border: 1px solid #dce3ea;
    border-radius: 9px;
    color: #031F41;
    font-size: .9rem;
    height: 38px;
    padding: 0 10px;
    width: 82px;
}

.pco-filtres__prix input:focus {
    border-color: #FB5E04;
    outline: none;
}

.pco-filtres__tiret,
.pco-filtres__unite {
    color: #5b6b7d;
    font-size: .9rem;
}

.pco-filtres__valider {
    background: #FB5E04;
    border: 0;
    border-radius: 9px;
    color: #ffffff;
    cursor: pointer;
    font-size: .9rem;
    font-weight: 700;
    height: 38px;
    padding: 0 20px;
}

.pco-filtres__valider:hover {
    background: #e05300;
}

.pco-filtres__valider:focus-visible {
    outline: 3px solid #031F41;
    outline-offset: 2px;
}

.pco-filtres__effacer {
    color: #031F41;
    font-size: .88rem;
    text-decoration: underline;
}

/* Sous 640 px, la barre passe en colonne pour rester lisible au pouce. */
@media (max-width: 640px) {
    .pco-filtres {
        align-items: stretch;
        flex-direction: column;
    }

    .pco-filtres__valider {
        width: 100%;
    }
}

/* Listes couleur et taille : lues dans les variations, faute de taxonomie. */
.pco-filtres__liste {
    background: #ffffff;
    border: 1px solid #dce3ea;
    border-radius: 9px;
    color: #031F41;
    font-size: .9rem;
    height: 38px;
    max-width: 160px;
    padding: 0 8px;
}

.pco-filtres__liste:focus {
    border-color: #FB5E04;
    outline: none;
}