/* ==========================================================================
   BOUTONS SHINE — trois types, trois états (charte du 13/08/2026)

   Ce fichier a été REMIS À PLAT : les habillages maison accumulés depuis juillet
   (btn-shine-animation-1, btn-shine-halo-red, shine-btn/--dark/--ghost,
   shine-txt--*, shine-bg--*, btn-tertiary…) ont été supprimés. Trois types
   suffisent, et ils portent leur état dans leur nom.

     shine-btn-primary     vert → noir au survol      (l'action principale)
     shine-btn-secondary   noir → vert au survol      (le primaire inversé)
     shine-btn-tertiary    vert → gris au survol      (action de second rang)

   Dans les trois cas, l'état désactivé est le même : fond gris, contenu blanc.

   🔴 Règle de contraste qui commande tout : le vert #d6ff32 est une couleur
   CLAIRE. Le blanc y tombe à 1,15:1, le noir y monte à 17:1. Un fond vert porte
   donc toujours du NOIR, et un texte d'accent sur fond clair prend le vert FONCÉ.

   Chaque type s'applique **sur le bouton lui-même OU sur son conteneur** : le
   sélecteur ne peint le porteur que s'il est un bouton, sinon il vise les boutons
   à l'intérieur. C'est ce qui permet de poser la classe sur un widget Creative
   Elements, dont on ne maîtrise pas le balisage interne.
   ========================================================================== */

/* ==========================================================================
   1. Les trois types
   ========================================================================== */

/* --- PRIMARY : vert, puis noir au survol -------------------------------- */

.shine-btn-primary:is(.btn, button, a, .elementor-button),
.shine-btn-primary :is(.btn, button, a.btn, .elementor-button, a.elementor-button) {
  color: var(--shine-dark) !important;
  background-color: var(--shine-race) !important;
  border-color: var(--shine-race) !important;
}

.shine-btn-primary:is(.btn, button, a, .elementor-button):hover,
.shine-btn-primary:is(.btn, button, a, .elementor-button):focus-visible,
.shine-btn-primary :is(.btn, button, a.btn, .elementor-button, a.elementor-button):hover,
.shine-btn-primary :is(.btn, button, a.btn, .elementor-button, a.elementor-button):focus-visible {
  color: var(--shine-race) !important;
  background-color: var(--shine-dark) !important;
  border-color: var(--shine-dark) !important;
}

/* --- SECONDARY : noir, puis vert au survol ------------------------------ */

.shine-btn-secondary:is(.btn, button, a, .elementor-button),
.shine-btn-secondary :is(.btn, button, a.btn, .elementor-button, a.elementor-button) {
  color: var(--shine-race) !important;
  background-color: var(--shine-dark) !important;
  border-color: var(--shine-dark) !important;
}

.shine-btn-secondary:is(.btn, button, a, .elementor-button):hover,
.shine-btn-secondary:is(.btn, button, a, .elementor-button):focus-visible,
.shine-btn-secondary :is(.btn, button, a.btn, .elementor-button, a.elementor-button):hover,
.shine-btn-secondary :is(.btn, button, a.btn, .elementor-button, a.elementor-button):focus-visible {
  color: var(--shine-dark) !important;
  background-color: var(--shine-race) !important;
  border-color: var(--shine-race) !important;
}

/* --- TERTIARY : vert, puis gris au survol -------------------------------
   Le contenu reste NOIR au survol : c'est ce qui distingue le survol (gris/noir)
   de l'état désactivé (gris/blanc), à fond identique. */

.shine-btn-tertiary:is(.btn, button, a, .elementor-button),
.shine-btn-tertiary :is(.btn, button, a.btn, .elementor-button, a.elementor-button) {
  color: var(--shine-dark) !important;
  background-color: var(--shine-race) !important;
  border-color: var(--shine-race) !important;
}

.shine-btn-tertiary:is(.btn, button, a, .elementor-button):hover,
.shine-btn-tertiary:is(.btn, button, a, .elementor-button):focus-visible,
.shine-btn-tertiary :is(.btn, button, a.btn, .elementor-button, a.elementor-button):hover,
.shine-btn-tertiary :is(.btn, button, a.btn, .elementor-button, a.elementor-button):focus-visible {
  color: var(--shine-dark) !important;
  background-color: var(--shine-gray) !important;
  border-color: var(--shine-gray) !important;
}

/* --- DÉSACTIVÉ : identique pour les trois types ------------------------- */

.shine-btn-primary:is(.btn, button, a, .elementor-button):is(:disabled, .disabled, [aria-disabled="true"]),
.shine-btn-secondary:is(.btn, button, a, .elementor-button):is(:disabled, .disabled, [aria-disabled="true"]),
.shine-btn-tertiary:is(.btn, button, a, .elementor-button):is(:disabled, .disabled, [aria-disabled="true"]),
.shine-btn-primary :is(.btn, button, a.btn, .elementor-button):is(:disabled, .disabled, [aria-disabled="true"]),
.shine-btn-secondary :is(.btn, button, a.btn, .elementor-button):is(:disabled, .disabled, [aria-disabled="true"]),
.shine-btn-tertiary :is(.btn, button, a.btn, .elementor-button):is(:disabled, .disabled, [aria-disabled="true"]) {
  color: var(--shine-white) !important;
  background-color: var(--shine-gray) !important;
  border-color: var(--shine-gray) !important;
  cursor: not-allowed;
}

/* ==========================================================================
   2. Variables des widgets cyliumelementorextras

   Ces widgets ne peignent pas leurs boutons en CSS : ils posent des variables EN
   LIGNE sur leur enveloppe. Une classe ne peut les dépasser qu'en `!important`,
   que les propriétés personnalisées acceptent.
   ========================================================================== */

.shine-btn-primary,
.shine-btn-tertiary {
  --cee-pr-btn-text: var(--shine-dark) !important;
  --cee-pr-btn-bg: var(--shine-race) !important;
  --cee-pr-badge-text: var(--shine-dark) !important;
  --cee-pr-badge-bg: var(--shine-race) !important;
  --cee-ib-btn-text: var(--shine-dark) !important;
  --cee-ib-btn-bg: var(--shine-race) !important;
}

.shine-btn-primary {
  --cee-pr-btn-text-hover: var(--shine-race) !important;
  --cee-pr-btn-bg-hover: var(--shine-dark) !important;
}

.shine-btn-tertiary {
  --cee-pr-btn-text-hover: var(--shine-dark) !important;
  --cee-pr-btn-bg-hover: var(--shine-gray) !important;
}

.shine-btn-secondary {
  --cee-pr-btn-text: var(--shine-race) !important;
  --cee-pr-btn-bg: var(--shine-dark) !important;
  --cee-pr-btn-text-hover: var(--shine-dark) !important;
  --cee-pr-btn-bg-hover: var(--shine-race) !important;
  --cee-ib-btn-text: var(--shine-race) !important;
  --cee-ib-btn-bg: var(--shine-dark) !important;
}

/* Repli sur le balisage interne des widgets, quand la classe est sur l'enveloppe */
.shine-btn-primary .cyliumee-prices__button,
.shine-btn-tertiary .cyliumee-prices__button {
  color: var(--shine-dark) !important;
  background: var(--shine-race) !important;
}

.shine-btn-primary .cyliumee-prices__button:hover {
  color: var(--shine-race) !important;
  background: var(--shine-dark) !important;
}

.shine-btn-tertiary .cyliumee-prices__button:hover {
  color: var(--shine-dark) !important;
  background: var(--shine-gray) !important;
}

.shine-btn-secondary .cyliumee-prices__button {
  color: var(--shine-race) !important;
  background: var(--shine-dark) !important;
}

.shine-btn-secondary .cyliumee-prices__button:hover {
  color: var(--shine-dark) !important;
  background: var(--shine-race) !important;
}

.cyliumee-prices__badge.cyliumee-prices__badge.cyliumee-prices__badge {
  color: var(--shine-dark) !important;
  background: var(--shine-race) !important;
}

/* Carte mise en avant : liseré noir de charte (demande du 13/08/2026) */
.cyliumee-prices__card--featured.cyliumee-prices__card--featured {
  border-color: var(--shine-dark) !important;
}

/* Coches des listes : le widget pose `--cee-pr-check-icon: #101011` EN LIGNE sur son
   enveloppe — de l'encre noire sur des cartes noires, donc des coches invisibles.
   La variable est forcée ici plutôt que corrigée dans le réglage Elementor : une
   couleur saisie dans le widget se recompile dans le CSS du document et redevient
   noire à la prochaine sauvegarde de la page.
   ⚠ `!important` sur une propriété personnalisée : c'est le seul moyen de passer
   devant un `style=""` posé sur l'élément lui-même. */
.cyliumee-prices {
  --cee-pr-check-icon: var(--shine-white) !important;
}

.cyliumee-prices .cyliumee-prices__check-icon,
.cyliumee-prices .cyliumee-prices__check-icon .ceicon {
  color: var(--shine-white) !important;
}

/* ==========================================================================
   3. Correspondance avec les variantes Bootstrap

   Le thème et PrestaShop posent `.btn-primary` un peu partout : plutôt que de
   reprendre chaque gabarit, on fait pointer les variantes vers les trois types.
   ========================================================================== */

.btn-primary {
  --bs-btn-color: var(--shine-dark);
  --bs-btn-bg: var(--shine-race);
  --bs-btn-border-color: var(--shine-race);
  --bs-btn-hover-color: var(--shine-race);
  --bs-btn-hover-bg: var(--shine-dark);
  --bs-btn-hover-border-color: var(--shine-dark);
  --bs-btn-active-color: var(--shine-race);
  --bs-btn-active-bg: var(--shine-dark);
  --bs-btn-active-border-color: var(--shine-dark);
  --bs-btn-disabled-color: var(--shine-white);
  --bs-btn-disabled-bg: var(--shine-gray);
  --bs-btn-disabled-border-color: var(--shine-gray);
  --bs-btn-focus-shadow-rgb: var(--shine-race-rgb-c);
}

.btn-secondary,
.btn-dark {
  --bs-btn-color: var(--shine-race);
  /* Fond à 50 % : le noir de charte laisse voir ce qu'il y a derrière, ce qui
     pose le bouton sur son support au lieu de le découper dedans.
     ⚠ La transparence est appliquée ICI, sur le jeton local du bouton, et non
     sur --shine-dark : ce dernier sert au texte, aux filets et aux fonds pleins
     partout ailleurs, où il doit rester opaque. */
  --bs-btn-bg: rgb(var(--shine-dark-rgb) / 0.5);
  /* Contour gris neutre plutôt que la couleur du fond : une bordure de la même
     teinte que le remplissage est invisible, et le bouton perd son arête. Le gris
     à 50 % se voit sur fond sombre COMME sur fond blanc. */
  --bs-btn-border-color: var(--shine-border-neutral);
  /* Survol : le gris foncé de charte, à la même transparence que le repos. Le
     bouton s'ÉCLAIRCIT sans changer de nature — c'est le geste juste pour un
     fond translucide, là où l'inversion vers le vert plein (l'ancien survol)
     faisait disparaître d'un coup le support qu'on laisse justement voir.
     Le texte reste vert : sur un gris foncé à 50 %, le noir deviendrait illisible. */
  --bs-btn-hover-color: var(--shine-race);
  --bs-btn-hover-bg: rgb(var(--shine-dark-gray-rgb) / 0.5);
  --bs-btn-hover-border-color: var(--shine-border-neutral);
  --bs-btn-active-color: var(--shine-race);
  --bs-btn-active-bg: rgb(var(--shine-dark-gray-rgb) / 0.5);
  --bs-btn-active-border-color: var(--shine-border-neutral);
  --bs-btn-disabled-color: var(--shine-white);
  --bs-btn-disabled-bg: var(--shine-gray);
  --bs-btn-disabled-border-color: var(--shine-gray);
  --bs-btn-focus-shadow-rgb: var(--shine-ink-rgb-c);
}

/* Les variantes « contour » servent aux actions discrètes du catalogue (tri,
   « voir plus »…). Contour noir sur blanc, remplissage noir au survol. */
.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-dark {
  --bs-btn-color: var(--shine-dark);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: var(--shine-dark);
  --bs-btn-hover-color: var(--shine-race);
  --bs-btn-hover-bg: var(--shine-dark);
  --bs-btn-hover-border-color: var(--shine-dark);
  --bs-btn-active-color: var(--shine-race);
  --bs-btn-active-bg: var(--shine-dark);
  --bs-btn-active-border-color: var(--shine-dark);
  --bs-btn-disabled-color: var(--shine-gray);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--shine-gray);
}

.btn-light {
  --bs-btn-color: var(--shine-dark);
  --bs-btn-bg: var(--shine-white);
  --bs-btn-border-color: var(--shine-line);
  --bs-btn-hover-color: var(--shine-dark);
  --bs-btn-hover-bg: var(--shine-paper-2);
  --bs-btn-hover-border-color: var(--shine-line-strong);
  --bs-btn-disabled-color: var(--shine-gray);
  --bs-btn-disabled-bg: var(--shine-white);
  --bs-btn-disabled-border-color: var(--shine-line);
}

/* ⚠ HORS charte de marque, volontairement : ce sont des codes d'état universels
   (succès, alerte, erreur). Un « rupture de stock » vert clair tromperait. */
.btn-success {
  --bs-btn-color: var(--shine-white);
  --bs-btn-bg: var(--shine-stock);
  --bs-btn-border-color: var(--shine-stock);
  --bs-btn-hover-color: var(--shine-white);
  --bs-btn-hover-bg: var(--shine-stock-d);
  --bs-btn-hover-border-color: var(--shine-stock-d);
}

.btn-warning {
  --bs-btn-color: var(--shine-dark);
  --bs-btn-bg: var(--shine-warn);
  --bs-btn-border-color: var(--shine-warn);
  --bs-btn-hover-color: var(--shine-dark);
  --bs-btn-hover-bg: var(--shine-warn-d);
  --bs-btn-hover-border-color: var(--shine-warn-d);
}

.btn-danger {
  --bs-btn-color: var(--shine-white);
  --bs-btn-bg: var(--shine-race-sale);
  --bs-btn-border-color: var(--shine-race-sale);
  --bs-btn-hover-color: var(--shine-white);
  --bs-btn-hover-bg: var(--shine-dark);
  --bs-btn-hover-border-color: var(--shine-dark);
}

/* ==========================================================================
   4. Forme commune
   ========================================================================== */

.btn {
  font-family: "Anek", system-ui, sans-serif;
  font-weight: 600;
  letter-spacing: 0.02em;
  border-width: 1px;
  /* Bootstrap ne pose `border-color` que dans ses propres classes de variante.
     Un bouton qui n'en porte aucune retombait donc sur la bordure du navigateur.
     En lisant le jeton ici, toute variante — présente ou à venir — voit sa
     couleur appliquée sans avoir à répéter la déclaration. */
  border-color: var(--bs-btn-border-color);
  border-radius: 12px;
  transition: color 0.18s ease, background-color 0.18s ease, border-color 0.18s ease;
}

/* 🔴 La déclaration ci-dessus est HORS COUCHE, donc elle bat TOUTES les règles
   d'état de Bootstrap, qui vivent dans la couche `bs-components` — y compris
   `.btn:disabled { border-color: var(--bs-btn-disabled-border-color) }`. Résultat
   constaté le 03/09/2026 sur « Ajouter au panier » d'un produit en rupture :
   fond gris (le fond, lui, n'est pas redéclaré ici, donc Bootstrap passe) cerclé
   du vert de marque. L'état est donc rejoué au même niveau de cascade.
   Le survol est atteint par le même mécanisme (bordure figée sur le jeton de base
   au lieu de --bs-btn-hover-border-color) : laissé en l'état, un liseré vert sur
   fond noir se lit comme un choix, pas comme un défaut. */
.btn:disabled,
.btn.disabled,
fieldset:disabled .btn {
  border-color: var(--bs-btn-disabled-border-color);
}

.btn-lg {
  padding: 15px 26px;
  font-size: 14px;
}

/* Le halo de focus de Bootstrap est retiré ailleurs (custom.css) ; on garde un
   contour net au clavier, sans quoi la navigation devient invisible. */
.btn:focus-visible {
  outline: 2px solid var(--shine-dark);
  outline-offset: 2px;
}

/* ==========================================================================
   5. Flèches de sliders — produits, catégories, carrousels

   Balisage de cyliumelementorextras et de cyliumproductfields. Actif noir,
   désactivé gris, chevron blanc.

   ⚠ Le module pose ses couleurs en `!important` ET en variables inline sur le
   widget : la classe est répétée pour monter en spécificité sans dépendre du
   conteneur, dont le nom change d'un widget à l'autre.
   ========================================================================== */

.cyliumee-ps__nav.cyliumee-ps__nav.cyliumee-ps__nav,
.cyliumee-cats__nav.cyliumee-cats__nav.cyliumee-cats__nav,
.cyliumee-slider__nav.cyliumee-slider__nav.cyliumee-slider__nav,
.cpf-list-arrow.cpf-list-arrow.cpf-list-arrow {
  color: var(--shine-white) !important;
  background: var(--shine-dark) !important;
  border-color: var(--shine-dark) !important;
  opacity: 1 !important;
}

.cyliumee-ps__nav.cyliumee-ps__nav.cyliumee-ps__nav:hover,
.cyliumee-cats__nav.cyliumee-cats__nav.cyliumee-cats__nav:hover,
.cyliumee-slider__nav.cyliumee-slider__nav.cyliumee-slider__nav:hover,
.cpf-list-arrow.cpf-list-arrow.cpf-list-arrow:hover {
  color: var(--shine-dark) !important;
  background: var(--shine-race) !important;
  border-color: var(--shine-race) !important;
}

.cyliumee-ps__nav.cyliumee-ps__nav.cyliumee-ps__nav.cyliumee-ps__nav--disabled,
.cyliumee-cats__nav.cyliumee-cats__nav.cyliumee-cats__nav.cyliumee-cats__nav--disabled,
.cyliumee-slider__nav.cyliumee-slider__nav.cyliumee-slider__nav.cyliumee-slider__nav--disabled,
.cyliumee-ps__nav.cyliumee-ps__nav.cyliumee-ps__nav.cyliumee-ps__nav[disabled],
.cyliumee-cats__nav.cyliumee-cats__nav.cyliumee-cats__nav.cyliumee-cats__nav[disabled],
.cyliumee-slider__nav.cyliumee-slider__nav.cyliumee-slider__nav.cyliumee-slider__nav[disabled],
.cpf-list-arrow.cpf-list-arrow.cpf-list-arrow.cpf-list-arrow[disabled] {
  color: var(--shine-white) !important;
  background: var(--shine-gray) !important;
  border-color: var(--shine-gray) !important;
  opacity: 1 !important;
}

/* ==========================================================================
   6. Bouton « Aperçu rapide » des miniatures (widget CE)

   C'est un SECONDARY : vert sur noir, inversé au survol. ⚠ Le widget n'expose
   aucune couleur de texte au survol — d'où les trois propriétés forcées ici.
   ========================================================================== */

.elementor-button-combinations,
.elementor-widget-product-miniature-add-to-cart .elementor-button {
  color: var(--shine-race) !important;
  background-color: var(--shine-dark) !important;
  border-color: var(--shine-race) !important;
}

.elementor-button-combinations:hover,
.elementor-button-combinations:focus-visible,
.elementor-widget-product-miniature-add-to-cart .elementor-button:hover,
.elementor-widget-product-miniature-add-to-cart .elementor-button:focus-visible {
  color: var(--shine-dark) !important;
  background-color: var(--shine-race) !important;
  border-color: var(--shine-race) !important;
}

.elementor-button-combinations:hover :is(i, svg, .elementor-button-icon),
.elementor-widget-product-miniature-add-to-cart .elementor-button:hover :is(i, svg, .elementor-button-icon) {
  color: var(--shine-dark) !important;
}