/* ==========================================================================
   Pro HD — Panneau de la barre de recherche : COMPTEUR ET BOUTON PANIER
   Module `prohdrecherche`, depuis la 1.0.6 (24/09/2026). Interrupteur en
   back-office : « Mettre le compteur de quantité aux couleurs du site ».

   CE QUE LA FEUILLE HABILLE. Dans le modele de carte de Doofinder, le bouton
   panier est declare `quantity="true" quantity_pinned="true"` depuis le
   24/09/2026 : chaque carte montre en permanence un compteur − 1 + et un
   bouton de validation. Doofinder les dessine avec sa propre charte (boutons
   carres colles, coche bleue). Cette feuille leur donne celle du site :

   - le compteur est celui de la FICHE PRODUIT (`.m-qty__btn`, releve en
     production le 24/09) : boutons 40 x 40, coins 10 px, bord #E3E9ED,
     signe bleu ; chiffre 22 px gras, sans cadre, 2 px d ecart ;
   - le bouton de validation est celui des BLOCS PRODUITS (`button.add-to-cart`
     des vignettes) : rond, rose, avec la meme icone de panier (`../img/
     panier.svg`, copiee du gabarit `miniatures/product.tpl`).

   L ORDRE DES ENFANTS EST FAUX CHEZ DOOFINDER, ET C EST VOULU CHEZ EUX. Dans le
   DOM le compteur est : supprimer / moins / plus / champ / valider. Doofinder
   les replace par sa propre mise en page ; des qu on la touche, il faut
   reposer l ordre a la main (`order`), sinon on lit « − + 1 ».

   LE BOUTON « SUPPRIMER » EST MASQUE : en mode epingle il ne fait rien (le
   script de Doofinder l ignore quand `quantityPinned` est vrai). Le « moins »
   reste a sa place meme a la quantite minimale — Doofinder l y cache, ce qui
   ferait sauter la mise en page d un clic a l autre — mais il y est GRISE ET
   INACTIF : voir le bloc « A LA QUANTITE MINIMALE » plus bas.

   LE RETOUR VISUEL DE DOOFINDER EST PRESERVE. Pendant l ajout, Doofinder
   remplace le contenu du bouton par une roue, puis une coche ou une croix, et
   pose `dfd-btn-loading`, `dfd-btn-done` ou `dfd-btn-error` sur le bouton.
   L icone panier n est donc posee QUE hors de ces trois etats : sinon le
   client cliquerait sans jamais voir que l ajout a eu lieu.

   PORTEE : `.dfd-root .dfd-card`, donc les trois variantes de Doofinder. Rien
   ici ne touche a la position ni a la boite du panneau — ce sont des regles de
   contenu, sans risque pour la variante plein ecran ni pour la page integree.

   `!important` pour la meme raison que dans `couleurs.css` : Doofinder pose ses
   styles de bouton par variables sur `.dfd-root button`, et les rejoue dans
   ses feuilles chargees deux fois.
   ========================================================================== */

/* ---- la rangee : compteur a gauche, bouton panier a droite -------------- */

html .dfd-root .dfd-card-row[data-quantity-pinned=true] .dfd-card-select-quantity {
    display: flex !important;
    align-items: center !important;
    gap: 2px !important;
    width: 100% !important;
}

html .dfd-root .dfd-card-select-quantity .dfd-cart-delete-button {
    display: none !important;
}

html .dfd-root .dfd-card-select-quantity .dfd-cart-decrease-button { order: 1; display: flex !important; }
html .dfd-root .dfd-card-select-quantity input                     { order: 2; }
html .dfd-root .dfd-card-select-quantity .dfd-cart-increase-button { order: 3; }
html .dfd-root .dfd-card-select-quantity .dfd-cart-check-button    { order: 4; }

/* ---- moins et plus : les boutons de la fiche produit --------------------- */

html .dfd-root .dfd-card-select-quantity .dfd-cart-decrease-button,
html .dfd-root .dfd-card-select-quantity .dfd-cart-increase-button {
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
    padding: 0 !important;
    background: #FFFFFF !important;
    border: 1px solid #E3E9ED !important;
    border-radius: 10px !important;
    box-shadow: none !important;
}

html .dfd-root .dfd-card-select-quantity .dfd-cart-decrease-button:hover,
html .dfd-root .dfd-card-select-quantity .dfd-cart-increase-button:hover {
    border-color: var(--prohdrech-lien, #0C5DA2) !important;
}

/* A LA QUANTITE MINIMALE, LE « MOINS » EST GRISE ET INACTIF — CORRECTIF 1.0.7.
   C est ainsi que Doofinder empeche de descendre sous le minimum : il cache le
   bouton par un style EN LIGNE (`style="display: none;"`), il ne borne PAS la
   valeur. La 1.0.6 le reaffichait en `!important` pour eviter que la rangee
   saute d un clic a l autre, et le compteur descendait alors a 0 (mesure en
   production le 24/09/2026 : 2 → 1 → 0). On garde la place du bouton, mais on
   lui retire le clic des que Doofinder a voulu le cacher.
   ET DOOFINDER NE LE CACHE PAS TOUJOURS (meme releve : une carte sur trois a 1
   avait encore son « moins » actif). D ou, en 1.0.8, `views/js/quantite.js`,
   qui lit la valeur, bloque le clic au minimum et pose `prohdrech-au-min`. */
html .dfd-root .dfd-card-select-quantity .dfd-cart-decrease-button[style*="none"],
html .dfd-root .dfd-card-select-quantity .dfd-cart-decrease-button.prohdrech-au-min {
    opacity: .35 !important;
    pointer-events: none !important;
    cursor: default !important;
}

html .dfd-root .dfd-card-select-quantity .dfd-cart-decrease-button svg,
html .dfd-root .dfd-card-select-quantity .dfd-cart-increase-button svg {
    width: 20px !important;
    height: 20px !important;
    fill: var(--prohdrech-lien, #0C5DA2) !important;
}

/* ---- le chiffre : 22 px gras, sans cadre ni fleches ---------------------- */

html .dfd-root .dfd-card-select-quantity input {
    width: 30px !important;
    height: 40px !important;
    padding: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    text-align: center !important;
    font-family: inherit !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    color: var(--prohdrech-encre, #22303F) !important;
    -moz-appearance: textfield;
}

html .dfd-root .dfd-card-select-quantity input::-webkit-inner-spin-button,
html .dfd-root .dfd-card-select-quantity input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* ---- valider : le bouton panier rond et rose des blocs produits ---------- */

html .dfd-root .dfd-card-select-quantity .dfd-cart-check-button {
    margin-left: auto !important;
    width: 48px !important;
    min-width: 48px !important;
    height: 48px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 9999px !important;
    box-shadow: none !important;
    background-color: var(--prohdrech-panier, #DF1576) !important;
    --dfd-btn-bg: var(--prohdrech-panier, #DF1576) !important;
    --dfd-btn-hover-bg: var(--prohdrech-panier-survol, #B01059) !important;
    --dfd-btn-color: #FFFFFF !important;
    --dfd-btn-hover-color: #FFFFFF !important;
}

html .dfd-root .dfd-card-select-quantity .dfd-cart-check-button:hover {
    background-color: var(--prohdrech-panier-survol, #B01059) !important;
}

html .dfd-root .dfd-card-select-quantity .dfd-cart-check-button:not(.dfd-btn-loading):not(.dfd-btn-done):not(.dfd-btn-error) {
    background-image: url("../img/panier.svg") !important;
    background-position: center !important;
    background-size: 44px 42px !important;
    background-repeat: no-repeat !important;
}

html .dfd-root .dfd-card-select-quantity .dfd-cart-check-button:not(.dfd-btn-loading):not(.dfd-btn-done):not(.dfd-btn-error) > svg {
    display: none !important;
}

html .dfd-root .dfd-card-select-quantity .dfd-cart-check-button svg {
    fill: #FFFFFF !important;
}

/* ==========================================================================
   LE CHOIX DE LA DECLINAISON (taille, conditionnement…) — depuis la 1.1.0
   Doofinder recoit les declinaisons depuis le 24/09/2026 (module Doofinder :
   « Indexer les combinaisons d attributs de produits ») et le modele de carte
   declare les types a proposer. Pour une fiche qui a des declinaisons, il pose
   dans la carte un bouton par type (`.dfd-cart-select-button`), qui ouvre un
   volet (`.dfd-card-selector`) avec une tuile par valeur.

   CES BOUTONS VIVENT DANS `.dfd-cart-add-button`, QUE DOOFINDER CACHE EN MODE
   EPINGLE. On reaffiche donc la zone — sauf pour un visiteur non connecte, d ou
   le `body:not(.-notLogged)` — et on y cache seulement l ancien bouton panier,
   puisque c est celui du compteur qui ajoute.

   Le style reprend les declinaisons de la FICHE PRODUIT (`.m-product__
   declinaison`, releve le 24/09) : coins 8 px, bord #C9D6DE, texte #22303F ;
   choisie : fond #F1F5F8, bord et texte bleus. `views/js/quantite.js` pose le
   libelle propre du type (`data-prohdrech-libelle`) et la classe
   `prohdrech-a-choisir` tant que rien n est choisi.
   ========================================================================== */

html body:not(.-notLogged) .dfd-root .dfd-card .dfd-card-row[data-quantity-pinned=true] .dfd-cart-add-button {
    display: block !important;
    width: 100% !important;
    margin: 0 0 8px 0 !important;
}

html .dfd-root .dfd-card .dfd-card-row[data-quantity-pinned=true] .dfd-cart-add-button > button[data-role="add_to_cart"] {
    display: none !important;
}

/* UNE FICHE A DECLINAISONS N EST JAMAIS EN MODE EPINGLE — mesure le 24/09/2026 :
   Doofinder y force `data-quantity-pinned="false"`. Sa rangee est donc visee par
   `data-variants` (non vide), et la zone des choix prend toute la largeur. */
html body:not(.-notLogged) .dfd-root .dfd-card .dfd-card-row[data-variants]:not([data-variants=""]) .dfd-cart-add-button {
    display: block !important;
    width: 100% !important;
    margin: 0 0 8px 0 !important;
}

/* Tant que rien n est choisi, l ancien bouton panier de Doofinder est cache :
   c est `quantite.js` (classe `prohdrech-choix-auto` sur <html>) qui ouvre le
   compteur des qu une valeur est choisie. SANS LE SCRIPT, la classe manque et
   le bouton reste visible — dans le rond rose ci-dessous — pour que le client
   puisse toujours commander. */
html.prohdrech-choix-auto .dfd-root .dfd-card .dfd-card-row[data-variants]:not([data-variants=""]) .dfd-cart-add-button > button[data-role="add_to_cart"],
html .dfd-root .dfd-card .dfd-card-row[data-status=quantity] .dfd-cart-add-button > button[data-role="add_to_cart"] {
    display: none !important;
}

html .dfd-root .dfd-card .dfd-card-row[data-variants]:not([data-variants=""]) .dfd-cart-add-button > button[data-role="add_to_cart"] {
    width: 48px !important;
    min-width: 48px !important;
    height: 48px !important;
    margin: 0 0 0 auto !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 9999px !important;
    background: var(--prohdrech-panier, #DF1576) url("../img/panier.svg") center / 44px 42px no-repeat !important;
}

html .dfd-root .dfd-card .dfd-card-row[data-variants]:not([data-variants=""]) .dfd-cart-add-button > button[data-role="add_to_cart"] svg {
    display: none !important;
}

/* Compteur ouvert sur une fiche a declinaisons : meme rangee que les autres. */
html .dfd-root .dfd-card .dfd-card-row[data-status=quantity] .dfd-card-select-quantity {
    display: flex !important;
    align-items: center !important;
    gap: 2px !important;
    width: 100% !important;
}

/* ---- le bouton de choix : « TAILLE      Choisir ▾ » ---------------------- */

html .dfd-root .dfd-card .dfd-cart-select-button {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
    min-height: 40px !important;
    height: auto !important;
    margin: 0 0 6px 0 !important;
    padding: 6px 12px !important;
    /* Doofinder pose `line-height: 38px` sur ses boutons (52 px mesures). */
    line-height: 1.25 !important;
    background: #FFFFFF !important;
    border: 1px solid #C9D6DE !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    cursor: pointer !important;
}

html .dfd-root .dfd-card .dfd-cart-select-button:hover {
    border-color: var(--prohdrech-lien, #0C5DA2) !important;
}

html .dfd-root .dfd-card .dfd-cart-select-button::before {
    content: attr(data-prohdrech-libelle);
    flex: 0 0 auto;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--prohdrech-lien, #0C5DA2);
}

html .dfd-root .dfd-card .dfd-cart-select-button input {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: auto !important;
    height: auto !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    text-align: right !important;
    text-overflow: ellipsis !important;
    font-family: inherit !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: var(--prohdrech-lien, #0C5DA2) !important;
    pointer-events: none !important;
}

/* Rien de choisi : le champ contient le nom technique du type (« taille ») —
   on le tait et on affiche « Choisir ▾ » a la place. */
html .dfd-root .dfd-card .dfd-cart-select-button.prohdrech-a-choisir input {
    display: none !important;
}

html .dfd-root .dfd-card .dfd-cart-select-button.prohdrech-a-choisir::after {
    content: "Choisir \25BE";
    margin-left: auto;
    font-size: 13px;
    font-weight: 700;
    color: var(--prohdrech-lien, #0C5DA2);
}

/* Choisi : l aspect « selectionne » de la fiche produit. */
html .dfd-root .dfd-card .dfd-cart-select-button:not(.prohdrech-a-choisir)[data-prohdrech-libelle] {
    background: #F1F5F8 !important;
    border-color: var(--prohdrech-lien, #0C5DA2) !important;
}

/* ---- le volet des valeurs : tuiles de la fiche produit ------------------- */

html .dfd-root .dfd-card .dfd-card-selector {
    background: #FFFFFF !important;
    backdrop-filter: none !important;
    border: 1px solid var(--prohdrech-lien, #0C5DA2) !important;
    border-radius: 4px !important;
}

html .dfd-root .dfd-card .dfd-card-selector .dfd-card-selector-header {
    margin: 16px 40px 4px 14px !important;
    text-align: left !important;
}

html .dfd-root .dfd-card .dfd-card-selector .dfd-card-selector-header .dfd-title-sm {
    font-size: 13px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    color: var(--prohdrech-lien, #0C5DA2) !important;
}

html .dfd-root .dfd-card .dfd-card-selector .dfd-card-variants {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    padding: 8px 14px 14px !important;
    place-items: stretch !important;
    justify-content: stretch !important;
}

html .dfd-root .dfd-card .dfd-card-selector .dfd-card-variants.one-column {
    grid-template-columns: 1fr !important;
}

html .dfd-root .dfd-card .dfd-card-selector .dfd-card-variant-button {
    width: 100% !important;
    min-height: 44px !important;
    height: auto !important;
    padding: 8px 10px !important;
    background: #FFFFFF !important;
    border: 1px solid #C9D6DE !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    color: var(--prohdrech-encre, #22303F) !important;
    font-family: inherit !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.25 !important;
    white-space: normal !important;
    text-align: center !important;
}

html .dfd-root .dfd-card .dfd-card-selector .dfd-card-variant-button:hover {
    border-color: var(--prohdrech-lien, #0C5DA2) !important;
    color: var(--prohdrech-lien, #0C5DA2) !important;
}

html .dfd-root .dfd-card .dfd-card-selector .dfd-card-variant-button.selected {
    background: #F1F5F8 !important;
    border-color: var(--prohdrech-lien, #0C5DA2) !important;
    color: var(--prohdrech-lien, #0C5DA2) !important;
    font-weight: 700 !important;
}

/* En rupture : grise, comme Doofinder le prevoit, sans son trait en travers. */
html .dfd-root .dfd-card .dfd-card-selector .dfd-card-variant-button.out-stock {
    color: #9AA6B2 !important;
    border-style: dashed !important;
}

html .dfd-root .dfd-card .dfd-card-selector .dfd-card-variant-button.out-stock::after {
    display: none !important;
}