/**
 * ------------------------------------------------------------------------
 * CARDS — STYLES PARTAGÉS DES ENCARTS PRODUIT BLONDEAU
 * ------------------------------------------------------------------------
 *
 * Contient exclusivement les styles des cartes produit et des sections
 * suggestions. Chargé sur toutes les pages affichant des encarts :
 * catalogue, fiches produit, page d'accueil, calculateurs.
 *
 * catalog.css garde les styles spécifiques au catalogue (grille, filtres,
 * hero, pagination). Les deux fichiers sont complémentaires sur les pages
 * catalogue ; cards.css seul suffit pour les autres contextes.
 *
 * @author  Pietro Giacomini
 * @package Blondeau
 * @file    cards.css
 * @version 1.2.0 — focus clavier unifié : bord or foncé + halo or collé, comme les champs (DETTE-398) — 2026-10-23
 * @version 1.1.0 — icônes du jeu commun : compteur de coloris, badge Nouveau — 2026-10-15
 * @version 1.0.2 — code mort retiré (règles sans aucun élément ciblé), rendu identique — 2026-10-14
 * ------------------------------------------------------------------------
 */

/* ========================================================================
 * CARTE — BASE COMMUNE (Woo + Blondeau)
 * ======================================================================== */

.blondeau-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: transparent;
    height: 100%;
    padding: 0.55rem;
    overflow: visible;
    transition: box-shadow 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        background-color 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* État « survol » reproduit à l'identique pour (2026-10-01) :
 *  - .is-touch-open : 1er toucher sur écran tactile (main.js,
 *    initCardTouchReveal — 2e toucher = ouverture du produit) ;
 *  - :focus-within : navigation clavier (les vignettes du panneau recevaient
 *    le focus alors qu'il restait invisible — WCAG 2.4.7). */
ul.products > li.product:hover .blondeau-card,
ul.products > li.product.is-touch-open .blondeau-card,
ul.products > li.product:focus-within .blondeau-card {
    background: var(--color-bg);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.14);
}

/* ========================================================================
 * LISTE PRODUITS — POSITION + OMBRE AU HOVER
 * ======================================================================== */

/*
 * z-index élevé au hover pour que le panneau mini-variantes passe au-dessus
 * des encarts adjacents. L'ombre est sur .blondeau-card pour éviter tout
 * conflit de spécificité avec .blondeau-catalog et .blondeau-related.
 */
ul.products > li.product {
    position: relative;
    z-index: 1;
    overflow: visible;
    transition: z-index 0s 0s; /* délai court : libère le z-index avant la fin du shadow fade-out */
}

ul.products > li.product:hover,
ul.products > li.product.is-touch-open,
ul.products > li.product:focus-within {
    z-index: 10;
    transition: z-index 0s;
}

/* ========================================================================
 * MEDIA — IMAGE (ratio fixe pour homogénéité Woo + Blondeau)
 * ======================================================================== */

.blondeau-card__media {
    position: relative;
    aspect-ratio: 1 / 1;
    background: var(--color-bg-alt);
    overflow: hidden;
    flex-shrink: 0;
    border-radius: 0;
}

.blondeau-card__media img,
.blondeau-card__media .woocommerce-loop-thumbnail__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0 !important;
    max-width: none !important;
    display: block !important;
}

/* Image hover source — masquée, utilisée par cards-hover.js */
.blondeau-card__media .blondeau-card__image-hover-source {
    display: none !important;
}

.blondeau-card__media a,
.blondeau-card__media-link {
    display: block !important;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.blondeau-card__image {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

.woocommerce-loop-thumbnail__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.has-js .blondeau-card__image {
    opacity: 1;
}

/* Image 'over' créée dynamiquement par cards-hover.js */
.blondeau-card__image-over {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center;
    display: block !important;
    opacity: 0;
    pointer-events: none;
    z-index: 2;
}

.blondeau-card__image-over.is-visible {
    opacity: 1;
}

.blondeau-card__variants-count {
    /* Icône Coloris devant le nombre (2026-10-15) */
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.7rem;
    letter-spacing: 0.04em;
    opacity: 0.85;
    margin-bottom: 0.2rem;
}

/* Marque produit — min-height réservé pour aligner le prix sur toutes les cartes */
.blondeau-card__brand {
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 0;
    min-height: 1rem;
    line-height: 1;
}

.blondeau-card__title {
    font-size: 0.9rem;
    font-weight: 600;
    margin: 0;
    line-height: 1.3;
}

/* ========================================================================
 * CONTENT — PRIX + ACTIONS (sous l'image, commun Woo + Blondeau)
 * ======================================================================== */

.blondeau-card__content {
    display: flex;
    justify-content: space-between;
    padding: 0.6rem 0;
    flex: 1;
    flex-grow: 1;
    gap: 0.5rem;
}

/* Carte WooCommerce */
.blondeau-card--woocommerce .blondeau-card__content {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding-top: 0.4rem;
}

.blondeau-card--woocommerce .blondeau-card__variants-count {
    min-height: 1rem;
    display: block;
}

.blondeau-card--woocommerce .blondeau-card__title {
    font-size: 0.88rem;
    font-weight: 600;
    margin: 0.15rem 0 0;
    color: var(--color-primary);
    line-height: 1.3;
}

.blondeau-card--woocommerce .blondeau-card__title a {
    color: inherit;
    text-decoration: none;
}

.blondeau-card--woocommerce .blondeau-card__title a:hover {
    text-decoration: underline;
}

.blondeau-card--woocommerce .blondeau-card__brand {
    min-height: 1rem;
    display: block;
    font-size: 0.72rem;
    margin: 0;
}

.blondeau-card__price {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--color-accent);
    white-space: nowrap;
}

.blondeau-card__favorite {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    margin-left: auto;
}

/* Actions WooCommerce (bouton panier) */
.blondeau-card__actions {
    padding: 0 0.75rem 0.75rem;
}

.blondeau-card__actions .button {
    display: block;
    width: 100%;
    text-align: center;
    padding: 0.5rem;
    font-size: 0.8rem;
    background: var(--color-primary);
    color: var(--color-text-inverse);
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.2s ease;
}

.blondeau-card__actions .button:hover {
    background: var(--color-primary-light);
}

.blondeau-card__variant {
    aspect-ratio: 1 / 1;
    overflow: hidden;
    cursor: pointer;
    border-radius: 0;
}

.blondeau-card__variant img {
    width: 100%;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 0 !important;
    transition: opacity 0.25s ease;
}

.blondeau-card__variant:hover img {
    opacity: 0.8;
}

/* ========================================================================
 * ACCESSIBILITÉ — FOCUS (cartes uniquement)
 * ======================================================================== */

.blondeau-card:focus-within {
    outline: none;
}

.blondeau-card a:focus-visible,
.blondeau-card button:focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: -2px;
    box-shadow: 0 0 0 3px var(--color-field-halo);
}

/* ========================================================================
 * CARD BLONDEAU — STRUCTURE TEXTILE
 * ======================================================================== */

.blondeau-card--blondeau .blondeau-card__content {
    display: flex;
    flex-direction: column;
    gap: 0;
    flex: 1;
    padding-top: 0.4rem;
}

.blondeau-card--blondeau .blondeau-card__variants-count {
    font-size: 0.7rem;
    color: var(--color-text-muted);
    letter-spacing: 0.03em;
}

.blondeau-card--blondeau .blondeau-card__title {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--color-primary);
    margin: 0 0 0.15rem;
    line-height: 1.3;
}

.blondeau-card--blondeau .blondeau-card__title a {
    color: inherit;
    text-decoration: none;
}

.blondeau-card--blondeau .blondeau-card__title a:hover {
    text-decoration: underline;
}

/* Prix + Favori — margin-top: auto colle au bas de la carte */
.blondeau-card--blondeau .blondeau-card__meta,
.blondeau-card--woocommerce .blondeau-card__meta {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: auto;
}

.blondeau-card--blondeau .blondeau-card__price {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--color-accent);
}

/* ========================================================================
 * BOUTON FAVORI — CŒUR
 * Neutralisation des surcharges Elementor + animations fill / wiggle / pop
 * ======================================================================== */

.blondeau-card__favorite {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    min-height: 0 !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    border-radius: 0 !important;
    cursor: pointer;
    padding: 0 !important;
    color: var(--color-border-dark);
    flex-shrink: 0;
    transition: color 0.2s ease;
}

/* Zone cliquable étendue sans agrandir l'icône visible (WCAG 2.5.8).
   Inset réduit côté gauche (--space-2 vers le prix) pour ne pas empiéter
   sur le texte voisin dans .blondeau-card__meta. */
.blondeau-card__favorite::before {
    content: "";
    position: absolute;
    inset: -8px -8px -8px -4px;
}

.blondeau-card__favorite:hover,
.blondeau-card__favorite:focus {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    color: var(--color-heart);
}

/* :focus-visible dédié — outline:none ci-dessus est en !important, donc
   .blondeau-card button:focus-visible (cards.css plus haut) ne peut pas
   gagner sans !important. Ne s'affiche qu'au clavier, jamais au clic souris. */
.blondeau-card__favorite:focus-visible {
    outline: 2px solid var(--color-focus) !important;
    outline-offset: -2px !important;
    box-shadow: 0 0 0 3px var(--color-field-halo) !important;
}

.blondeau-card__favorite svg path {
    fill: currentColor;
    fill-opacity: 0;
    transition: fill-opacity 0.35s ease;
}

.blondeau-card__favorite.is-active {
    color: var(--color-heart);
}

.blondeau-card__favorite.is-active svg path {
    fill-opacity: 1;
}

.blondeau-card__favorite.is-init svg path {
    transition: none !important;
}

@keyframes blondeau-heart-pop {
    0%   { transform: scale(1); }
    35%  { transform: scale(1.45); }
    65%  { transform: scale(0.88); }
    100% { transform: scale(1); }
}

.blondeau-card__favorite.is-popping svg {
    animation: blondeau-heart-pop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes blondeau-heart-wiggle {
    0%   { transform: rotate(0deg)   scale(1);    }
    20%  { transform: rotate(-14deg) scale(1.12); }
    40%  { transform: rotate(11deg)  scale(1.08); }
    60%  { transform: rotate(-7deg)  scale(1.04); }
    80%  { transform: rotate(4deg)   scale(1.01); }
    100% { transform: rotate(0deg)   scale(1);    }
}

.blondeau-card__favorite.is-wiggling svg {
    animation: blondeau-heart-wiggle 0.65s cubic-bezier(0.36, 0.07, 0.19, 0.97) forwards;
}

/* ========================================================================
 * MINI-VARIANTES
 * ======================================================================== */

/* Position absolute pour ne pas pousser les rangées de la grille */
.blondeau-card--blondeau .blondeau-card__variants,
.blondeau-card--woocommerce .blondeau-card__variants {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    transform: translateY(calc(100% - 8px));
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.3rem;
    padding: 0 0.55rem 0.55rem;
    background: var(--color-bg);
    box-shadow: 0 12px 24px rgba(0,0,0,0.10);
    z-index: 3;
    opacity: 0;
    pointer-events: none;
    /* état repos légèrement remonté (masqué par opacity:0) pour que le panneau tombe d'en haut à l'ouverture */
    clip-path: inset(0px -50px -50px -50px);
    transition:
        opacity 0.3s ease,
        transform 0.3s ease;
}

.blondeau-card--blondeau:hover .blondeau-card__variants,
.blondeau-card--woocommerce:hover .blondeau-card__variants,
.blondeau-card--blondeau.is-touch-open .blondeau-card__variants,
.blondeau-card--woocommerce.is-touch-open .blondeau-card__variants,
.blondeau-card--blondeau:focus-within .blondeau-card__variants,
.blondeau-card--woocommerce:focus-within .blondeau-card__variants {
    opacity: 1;
    transform: translateY(calc(100% - 1px)); /* recouvrement 1px — élimine l'artefact subpixel entre la carte et le panneau */
    pointer-events: auto;
}

.blondeau-card__variant--more {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg-alt);
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--color-text-muted);
    text-decoration: none;
    aspect-ratio: 1 / 1;
    transition: background 0.15s ease;
}

.blondeau-card__variant--more:hover {
    background: var(--color-border);
    color: var(--color-primary);
}

/* ========================================================================
 * BADGES PRODUIT (PROMO / NOUVEAU)
 * ======================================================================== */

.blondeau-card__badges {
    position: absolute;
    top: 0.6rem;
    left: 0.6rem;
    right: 0.6rem;
    z-index: 5;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    pointer-events: none;
    gap: 4px;
}

.blondeau-card__badge {
    /* Pictogramme Nouveauté devant le libellé (2026-10-15) */
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.35rem 0.55rem;
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-inverse);
    pointer-events: none;
}

.blondeau-card__badge--new {
    background: var(--color-accent);
    /* Texte bleu marine sur l'or (6.94:1) au lieu du blanc (2.31:1, texte de
       10px) — WCAG 1.4.3 / RGAA 3.2, 2026-10-01. Le badge reste or. */
    color: var(--color-primary);
}

.blondeau-card__badge--promo {
    background: var(--color-primary);
    margin-left: auto;
}

/* ========================================================================
 * PRIX STRUCTURÉ 2 LIGNES
 * ======================================================================== */

.blondeau-card__price-line {
    line-height: 1.2;
}

.blondeau-card__price-line--top {
    min-height: 1em;
}

.blondeau-card__price-regular {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    text-decoration: line-through;
}

.blondeau-card__price-from {
    font-size: 0.65rem;
    font-weight: 400;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.blondeau-card__price-final {
    font-size: 0.9rem;
    font-weight: 600;
    /* DETTE-91 [OK] — corrigé le 2026-08-06 : var(--color-accent) = 2.31:1 sur
       blanc (WCAG AA texte normal = 4.5:1 requis) — variante texte conforme. */
    color: var(--color-accent-text, var(--color-accent));
}

/* ========================================================================
 * SUGGESTIONS — Section .blondeau-related
 * ======================================================================== */

.blondeau-related {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid var(--color-border);
}

.blondeau-related > h2 {
    font-size: 1.5rem;
    color: var(--color-primary);
    margin-bottom: 1.5rem;
}

/* Page d'accueil : H2 aligné visuellement sur le H2 de la brands-strip */
.home .blondeau-related > h2 {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    text-align: center;
    margin-bottom: var(--space-6);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.blondeau-related ul.products {
    display: grid;
    /* --sugg-count injecté en inline style par blondeau_render_suggestions() — min 6 colonnes */
    grid-template-columns: repeat(var(--sugg-count, 6), 1fr);
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    overflow: visible;
    align-items: stretch;
}

/* Priorité sur .related.products ul.products (woocommerce.css, spécificité 0,2,1) */
.blondeau-related.related.products ul.products {
    grid-template-columns: repeat(var(--sugg-count, 6), 1fr);
}

/* Neutralise le clearfix WooCommerce (woocommerce-layout.css) : ses pseudo-éléments
   ::before/::after (content: " "; display: table) deviennent des items de grille
   sur les ul.products en display: grid et occupent une cellule vierge en tête.
   Classe .products doublée pour garantir la priorité (0,3,1 > 0,2,1) quel que
   soit l'ordre de chargement des feuilles. */
.woocommerce ul.products.products::before,
.woocommerce ul.products.products::after,
.woocommerce-page ul.products.products::before,
.woocommerce-page ul.products.products::after {
    content: none;
}

/* Neutraliser les styles WooCommerce par défaut sur les li de suggestions */
.blondeau-related ul.products > li.product {
    display: flex;
    position: relative;
    z-index: 1;
    list-style: none;
    overflow: visible;
    align-items: stretch;
    align-self: stretch;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.blondeau-related ul.products > li.product:hover,
.blondeau-related ul.products > li.product.is-touch-open,
.blondeau-related ul.products > li.product:focus-within {
    z-index: 10;
    transform: none;
    box-shadow: none !important;
}

.blondeau-related ul.products > li.product .blondeau-card {
    flex: 1;
}

/* Page d'accueil : pas de bordure, largeur contrainte comme le reste du contenu */
.home .blondeau-related {
    border-top: none;
    padding-top: 0;
    max-width: var(--wp--style--global--wide-size, 1400px);
    margin-left: auto;
    margin-right: auto;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    box-sizing: border-box;
}

@media (max-width: 600px) {
    /* Même spécificité que .blondeau-related.related.products ul.products (ligne 616)
       sinon cette règle mobile ne s'applique jamais (0,2,1 perdait contre 0,4,1). */
    .blondeau-related ul.products,
    .blondeau-related.related.products ul.products {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ========================================================================
 * PREFERS-REDUCED-MOTION (éléments carte uniquement)
 * ======================================================================== */

@media (prefers-reduced-motion: reduce) {
    /* .blondeau-card__image-over est exclu : son animation est gérée en JS
       qui lit lui-même prefers-reduced-motion. */
    .blondeau-card,
    .blondeau-card__variants,
    .blondeau-card__variant img,
    .blondeau-card__favorite {
        transition: none !important;
        animation: none !important;
    }
}