/* ==========================================================================
   04 — LE PONT WOOCOMMERCE / OCEANWP

   Ce fichier ne dessine plus la boutique : depuis le 5 septembre 2026, la
   liste, les filtres et la carte produit vivent dans `10-boutique.css`, avec
   leur propre balisage (`woocommerce/content-product.php`). Il ne reste ici
   que ce qui doit valoir PARTOUT où WooCommerce ou OceanWP écrivent du
   balisage qu'on ne remplace pas : le panier, la commande, le compte, la
   fiche produit, et les couleurs héritées qu'aucune de ces pages ne corrige.

   Les sélecteurs ont été relevés dans le navigateur sur les pages réelles,
   pas recopiés d'une documentation.

   ORDRE DE CHARGEMENT — à lire avant de toucher à quoi que ce soit ici.
   Jusqu'au 5 septembre 2026, `woo/woocommerce.min.css` d'OceanWP se chargeait
   APRÈS toutes les feuilles du thème (il s'enfile sur `wp_enqueue_scripts`
   en priorité 99, les nôtres en 20). Toute égalité de spécificité se perdait
   donc, et plusieurs règles écrites ici n'avaient aucun effet — invisible à
   la lecture du fichier. `cp_apres_oceanwp()` dans functions.php ajoute
   maintenant les feuilles d'OceanWP aux dépendances de `cp-tokens` : notre
   chaîne s'imprime après la leur. Si un jour une règle d'ici cesse d'agir
   sans raison, vérifier cet ordre AVANT de surenchérir en spécificité.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. NEUTRALISATION DES COULEURS HÉRITÉES

   Relevé du 5 septembre 2026 sur la boutique et une fiche produit, en lisant
   les couleurs calculées et non les fichiers : #57bf6d apparaissait 103 fois
   sur la seule page de liste, #13aff0 sur le bouton d'ajout au panier de la
   fiche, sur les onglets, sur le bouton de recherche et sur le sélecteur
   grille/liste. Aucune de ces couleurs n'appartient à une palette du site :
   ce sont les valeurs par défaut d'OceanWP et d'Elementor.

   Elles ne gagnaient pas par spécificité mais par absence d'adversaire — le
   remède est donc une règle qui existe, pas un `!important`.
   -------------------------------------------------------------------------- */

/* 1.1 — LES BOUTONS
   La forme reste celle du composant `.cp-btn` du fichier 03. On ne peut pas
   réutiliser la classe : WooCommerce écrit `.button` dans des gabarits qu'on
   ne surcharge pas tous. On en reprend donc les valeurs.

   `button[type="submit"]` figure dans la liste depuis le 5 septembre : c'est
   le sélecteur, dans `oceanwp/style.min.css`, qui peignait en bleu le bouton
   du widget de recherche produit — un `<button>` nu, sans classe `.button`,
   qu'aucune de nos règles ne couvrait. */
body.cp .woocommerce a.button,
body.cp.woocommerce-page a.button,
body.cp .woocommerce button.button,
body.cp.woocommerce-page button.button,
body.cp .woocommerce input.button,
body.cp.woocommerce-page input.button,
body.cp .woocommerce a.button.alt,
body.cp.woocommerce-page a.button.alt,
body.cp .woocommerce button.button.alt,
body.cp.woocommerce-page button.button.alt,
body.cp .woocommerce input.button.alt,
body.cp.woocommerce-page input.button.alt,
body.cp .woocommerce-page a.button,
body.cp .woocommerce-page button.button,
body.cp .woocommerce-page input.button,
body.cp .woocommerce .wp-element-button,
body.cp.woocommerce-page .wp-element-button,
body.cp .woocommerce-cart .wp-element-button,
body.cp .woocommerce-checkout .wp-element-button,
body.cp .wp-block-button__link,
body.cp .woocommerce #respond input#submit,
body.cp.woocommerce-page #respond input#submit,
body.cp .woocommerce button[type="submit"],
body.cp.woocommerce-page button[type="submit"],
body.cp .woocommerce-page button[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--cp-e-2);
  background-color: var(--cp-bordeaux);
  border: 1px solid var(--cp-bordeaux);
  border-radius: var(--cp-r-sm);
  color: var(--cp-blanc);
  font-family: var(--cp-font-texte);
  font-size: var(--cp-t-s);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: none;
  text-decoration: none;
  min-height: 44px;                 /* cible tactile WCAG 2.5.8 */
  padding: 0.95em 1.9em;
  cursor: pointer;
  transition: background-color var(--cp-vite) var(--cp-courbe),
              border-color     var(--cp-vite) var(--cp-courbe),
              color            var(--cp-vite) var(--cp-courbe);
}
body.cp .woocommerce a.button:hover,
body.cp.woocommerce-page a.button:hover,
body.cp .woocommerce button.button:hover,
body.cp.woocommerce-page button.button:hover,
body.cp .woocommerce input.button:hover,
body.cp.woocommerce-page input.button:hover,
body.cp .woocommerce a.button.alt:hover,
body.cp.woocommerce-page a.button.alt:hover,
body.cp .woocommerce button.button.alt:hover,
body.cp.woocommerce-page button.button.alt:hover,
body.cp .woocommerce input.button.alt:hover,
body.cp.woocommerce-page input.button.alt:hover,
body.cp .woocommerce-page a.button:hover,
body.cp .woocommerce-page button.button:hover,
body.cp .woocommerce-page input.button:hover,
body.cp .woocommerce .wp-element-button:hover,
body.cp.woocommerce-page .wp-element-button:hover,
body.cp .wp-block-button__link:hover,
body.cp .woocommerce #respond input#submit:hover,
body.cp.woocommerce-page #respond input#submit:hover,
body.cp .woocommerce button[type="submit"]:hover,
body.cp.woocommerce-page button[type="submit"]:hover,
body.cp .woocommerce-page button[type="submit"]:hover {
  background-color: var(--cp-bordeaux-fonce);
  border-color: var(--cp-bordeaux-fonce);
  color: var(--cp-blanc);
}
body.cp .woocommerce a.button.disabled,
body.cp.woocommerce-page a.button.disabled,
body.cp .woocommerce button.button:disabled,
body.cp.woocommerce-page button.button:disabled,
body.cp .woocommerce button.button[disabled],
body.cp.woocommerce-page button.button[disabled],
body.cp .woocommerce input.button:disabled,
body.cp.woocommerce-page input.button:disabled {
  background-color: var(--cp-gris-voile);
  border-color: var(--cp-trait-fort);
  color: var(--cp-texte-doux);
  opacity: 1;
  cursor: not-allowed;
}

/* 1.2 — LES MONTANTS
   `inherit` plutôt qu'une couleur : le montant prend celle de son contexte —
   encre dans un total, doux dans une ligne barrée, bordeaux dans une
   promotion. Une seule valeur remplace six.

   Le second sélecteur n'est pas une redite. `body.cp .amount` pèse (0,2,1) et
   perdait contre `.woocommerce ul.products li.product .price .amount`, qui
   pèse (0,4,0) : tous les prix de la boutique restaient verts alors que la
   règle existait. C'est la première chose à vérifier si un prix reprend une
   couleur : compter les classes de l'adversaire, pas relire la nôtre. */
body.cp .amount,
body.cp .woocommerce-Price-amount,
body.cp .woocommerce-Price-currencySymbol{ color: inherit; }

body.cp .woocommerce ul.products li.product .price .amount,
body.cp.woocommerce-page ul.products li.product .price .amount,
body.cp .woocommerce ul.products li.product .price del .amount,
body.cp.woocommerce-page ul.products li.product .price del .amount,
body.cp .woocommerce ul.products li.product .price ins .amount,
body.cp.woocommerce-page ul.products li.product .price ins .amount,
body.cp .woocommerce div.product .price .amount,
body.cp.woocommerce-page div.product .price .amount,
body.cp .woocommerce div.product p.price .amount,
body.cp.woocommerce-page div.product p.price .amount,
body.cp .woocommerce div.product span.price .amount,
body.cp.woocommerce-page div.product span.price .amount{ color: inherit; }

/* 1.3 — LA PASTILLE DE COMPTAGE
   Le détail du sélecteur est expliqué dans 05-entete.css, section 4 : chez
   OceanWP `.wcmenucart-count` est l'enveloppe, pas la pastille. */
body.cp .wcmenucart-cart-icon .wcmenucart-count,
body.cp .show-cart .wcmenucart-cart-icon .wcmenucart-count {
  background-color: var(--cp-bordeaux);
  border-color: var(--cp-bordeaux);
  color: var(--cp-blanc);
  font-family: var(--cp-font-texte);
  font-weight: 600;
}
body.cp .wcmenucart-cart-icon .wcmenucart-count::after,
body.cp .show-cart .wcmenucart-cart-icon .wcmenucart-count::after {
  border-color: var(--cp-bordeaux);
}

/* 1.4 — LES BANDEAUX ET LES FILETS GRIS
   `#f5f5f5` sur l'en-tête de page, `#f7f7f7` sur les titres de la colonne des
   totaux, `#f1f1f1` et `#eaeaea` sur les séparateurs : quatre gris froids
   déposés au milieu d'un site crème. Un gris neutre sur un fond chaud paraît
   sale — c'est la raison d'être de l'échelle de neutres du fichier 01. */
body.cp .page-header {
  background-color: transparent;
  border-bottom: 1px solid var(--cp-trait);
}
body.cp .woocommerce table.shop_table thead,
body.cp.woocommerce-page table.shop_table thead{ background: none; }
body.cp .woocommerce .cart-collaterals h2,
body.cp.woocommerce-page .cart-collaterals h2 {
  background-color: transparent;
  border: 0;
  margin: 0;
  padding: 0;
  text-align: left;
  text-transform: none;
  letter-spacing: 0;
}
body.cp .content-area,
body.cp .woocommerce div.product .product_meta,
body.cp.woocommerce-page div.product .product_meta,
body.cp .woocommerce div.product form.cart,
body.cp.woocommerce-page div.product form.cart,
body.cp .woocommerce .owp-nav-link,
body.cp.woocommerce-page .owp-nav-link{ border-color: var(--cp-trait); }

/* 1.5 — LES BLEUS RESTANTS
   Trois endroits, tous relevés le 5 septembre 2026 :
   l'onglet actif de la fiche produit, le titre de widget, et le lien courant
   d'une liste de catégories. Tous portaient le #13aff0 d'Elementor repris
   comme couleur d'accent par le personnalisateur d'OceanWP. */
body.cp .woocommerce div.product .woocommerce-tabs ul.tabs li.active a,
body.cp.woocommerce-page div.product .woocommerce-tabs ul.tabs li.active a,
body.cp .woocommerce div.product .woocommerce-tabs ul.tabs li a:hover,
body.cp.woocommerce-page div.product .woocommerce-tabs ul.tabs li a:hover,
body.cp .widget-title,
body.cp .sidebar-box .widget-title,
body.cp .woocommerce .widget_layered_nav li.chosen a,
body.cp.woocommerce-page .widget_layered_nav li.chosen a,
body.cp .woocommerce .product-categories .current-cat > a,
body.cp.woocommerce-page .product-categories .current-cat > a{ color: var(--cp-encre); }

body.cp .widget-title,
body.cp .sidebar-box .widget-title{ border-color: var(--cp-bordeaux); }

/* --------------------------------------------------------------------------
   2. LES HUIT FAMILLES — LES VARIABLES SONT DANS 01-tokens.css

   Les correspondances `.cp-fam-<slug>` → trois variables ont demenage dans la
   feuille des jetons le 5 septembre 2026, et pour une raison precise : le
   sous-menu « E-shop » de la navigation porte lui aussi ces classes, et il
   s'affiche sur TOUTES les pages du site, alors que cette feuille-ci n'est
   chargee que sur la boutique. Les pastilles de couleur du menu retombaient
   donc toutes au bordeaux sur l'accueil.

   Ne reste ici que ce qui suppose WooCommerce : l'etiquette de famille.
   -------------------------------------------------------------------------- */

/* L'étiquette de famille — la pastille teintée. Elle sert sur la carte, sur
   la fiche et dans le panier : une seule définition pour les trois. */
body.cp .cp-etiquette-famille {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  background: var(--cp-famille-voile);
  color: var(--cp-famille-texte);
  font-family: var(--cp-font-texte);
  font-size: var(--cp-t-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.38em 0.8em;
  border-radius: var(--cp-r-pill);
  transition: background-color var(--cp-vite) var(--cp-courbe);
}
body.cp a.cp-etiquette-famille:hover {
  background: color-mix(in srgb, var(--cp-famille) 18%, var(--cp-famille-voile));
}

/* --------------------------------------------------------------------------
   3. FICHE PRODUIT
   -------------------------------------------------------------------------- */

body.cp .woocommerce div.product .product_title,
body.cp.woocommerce-page div.product .product_title {
  font-family: var(--cp-font-titre);
  font-size: var(--cp-t-xxl);
  font-weight: 400;
  line-height: var(--cp-lh-titre);
  color: var(--cp-encre);
  text-transform: none;
  border: 0;
  margin: var(--cp-e-3) 0 var(--cp-e-3);
  padding: 0;
}

body.cp .woocommerce div.product p.price,
body.cp.woocommerce-page div.product p.price,
body.cp .woocommerce div.product span.price,
body.cp.woocommerce-page div.product span.price {
  font-family: var(--cp-font-texte);
  font-size: var(--cp-t-xl);
  font-weight: 600;
  color: var(--cp-encre);
  font-variant-numeric: tabular-nums;
  margin-bottom: var(--cp-e-5);
}

body.cp .woocommerce div.product form.cart .button,
body.cp.woocommerce-page div.product form.cart .button,
body.cp .woocommerce div.product .single_add_to_cart_button,
body.cp.woocommerce-page div.product .single_add_to_cart_button {
  min-height: 52px;
  padding: 1.05em 2.4em;
  font-family: var(--cp-font-texte);
  font-size: var(--cp-t-m);         /* était 12px */
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
  background: var(--cp-bordeaux);
  border: 1px solid var(--cp-bordeaux);
  border-radius: var(--cp-r-sm);
  color: var(--cp-blanc);
  transition: background-color var(--cp-vite) var(--cp-courbe),
              border-color     var(--cp-vite) var(--cp-courbe);
}
body.cp .woocommerce div.product form.cart .button:hover,
body.cp.woocommerce-page div.product form.cart .button:hover,
body.cp .woocommerce div.product .single_add_to_cart_button:hover,
body.cp.woocommerce-page div.product .single_add_to_cart_button:hover {
  background: var(--cp-bordeaux-fonce);
  border-color: var(--cp-bordeaux-fonce);
}

/* État désactivé tant qu'aucune variation n'est choisie.
   On ne change que la lisibilité : le gris #777 sur blanc plafonne à 4,48:1,
   sous le seuil AA pour du texte de cette taille. */
/* `form.cart` figure dans le selecteur pour une raison de poids, au sens
   propre : la regle d'au-dessus s'ecrit `… div.product form.cart .button`,
   soit cinq classes et TROIS elements. Sans `form.cart` ici, l'etat desactive
   pesait cinq classes et deux elements — il perdait, et le bouton restait
   bordeaux plein alors qu'aucune contenance n'etait choisie. Un bouton d'achat
   qui a l'air actif et ne l'est pas est pire que pas de bouton du tout. */
body.cp .woocommerce div.product form.cart .single_add_to_cart_button.disabled,
body.cp.woocommerce-page div.product form.cart .single_add_to_cart_button.disabled,
body.cp .woocommerce div.product form.cart .single_add_to_cart_button:disabled,
body.cp.woocommerce-page div.product form.cart .single_add_to_cart_button:disabled {
  background: var(--cp-gris-voile);
  border-color: var(--cp-trait-fort);
  color: var(--cp-texte-doux);
  /* TROISIEME ET DERNIER `!important` DU THEME.
     `.woocommerce .button.disabled { opacity: .5 !important }` dans
     `woo/woocommerce.min.css` : aucune specificite ne passe devant un
     `!important`, seul un autre `!important` le peut. Sans lui, le bouton
     « Ajouter au panier » s'affichait en bordeaux delave a 50 %, qu'on lisait
     comme un rose sale — et non comme un bouton en attente d'un choix. La
     lisibilite du libelle blanc y tombait sous le seuil AA. */
  opacity: 1 !important;
}

/* L'ajout se fait sans quitter la page : le bouton passe une fraction de
   seconde en attente. On ne change ni sa taille ni son libellé — un bouton
   qui change de mot sous le doigt fait douter du clic. */
body.cp .woocommerce div.product .single_add_to_cart_button.cp-occupe,
body.cp.woocommerce-page div.product .single_add_to_cart_button.cp-occupe {
  cursor: progress;
  opacity: 0.72;
}

/* Onglets. Le trait actif prend la couleur de la famille : c'est le dernier
   endroit de la fiche où elle pouvait descendre sans jamais porter de texte. */
body.cp .woocommerce div.product .woocommerce-tabs ul.tabs,
body.cp.woocommerce-page div.product .woocommerce-tabs ul.tabs {
  border-bottom: 1px solid var(--cp-trait);
  padding: 0;
  margin: 0 0 var(--cp-e-6);
}
body.cp .woocommerce div.product .woocommerce-tabs ul.tabs::before,
body.cp.woocommerce-page div.product .woocommerce-tabs ul.tabs::before{ display: none; }
body.cp .woocommerce div.product .woocommerce-tabs ul.tabs li,
body.cp.woocommerce-page div.product .woocommerce-tabs ul.tabs li {
  background: transparent;
  border: 0;
  border-radius: 0;
  margin: 0;
  padding: 0;
}
body.cp .woocommerce div.product .woocommerce-tabs ul.tabs li::before,
body.cp.woocommerce-page div.product .woocommerce-tabs ul.tabs li::before,
body.cp .woocommerce div.product .woocommerce-tabs ul.tabs li::after,
body.cp.woocommerce-page div.product .woocommerce-tabs ul.tabs li::after{ display: none; }
body.cp .woocommerce div.product .woocommerce-tabs ul.tabs li a,
body.cp.woocommerce-page div.product .woocommerce-tabs ul.tabs li a {
  display: inline-block;
  font-family: var(--cp-font-texte);
  font-size: var(--cp-t-s);
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0.01em;
  color: var(--cp-texte-doux);
  padding: var(--cp-e-3) 0;
  margin-right: var(--cp-e-6);
  border: 0;
  border-bottom: 2px solid transparent;
}
body.cp .woocommerce div.product .woocommerce-tabs ul.tabs li.active a,
body.cp.woocommerce-page div.product .woocommerce-tabs ul.tabs li.active a {
  color: var(--cp-encre);
  border-bottom-color: var(--cp-famille);
}

/* Sélecteurs de variation : le `<select>` reste dans le document, hors du
   champ visuel — c'est lui qui garde l'état (voir cocopassion.js, § 3). */
body.cp .woocommerce div.product form.cart .variations,
body.cp.woocommerce-page div.product form.cart .variations {
  border: 0;
  margin-bottom: var(--cp-e-5);
}
body.cp .woocommerce div.product form.cart .variations th.label,
body.cp.woocommerce-page div.product form.cart .variations th.label {
  font-family: var(--cp-font-texte);
  font-size: var(--cp-t-s);
  font-weight: 600;
  color: var(--cp-texte);
  padding-bottom: var(--cp-e-2);
}
body.cp .woocommerce div.product .reset_variations,
body.cp.woocommerce-page div.product .reset_variations{ color: var(--cp-texte-doux); }
body.cp .woocommerce div.product .reset_variations:hover,
body.cp.woocommerce-page div.product .reset_variations:hover{ color: var(--cp-bordeaux); }

/* --------------------------------------------------------------------------
   4. PANIER, COMMANDE, PAGINATION
   -------------------------------------------------------------------------- */

body.cp .woocommerce .wp-element-button,
body.cp.woocommerce-page .wp-element-button,
body.cp .woocommerce-cart .wp-element-button,
body.cp .woocommerce-checkout .wp-element-button,
body.cp .wp-block-button__link,
body.cp .woocommerce #respond input#submit,
body.cp.woocommerce-page #respond input#submit,
body.cp .woocommerce button.button.alt,
body.cp.woocommerce-page button.button.alt {
  background-color: var(--cp-bordeaux);
  border-color: var(--cp-bordeaux);
  color: var(--cp-blanc);
  border-radius: var(--cp-r-sm);
  min-height: 44px;
  font-family: var(--cp-font-texte);
  font-weight: 600;
  text-transform: none;
}
body.cp .woocommerce .wp-element-button:hover,
body.cp.woocommerce-page .wp-element-button:hover,
body.cp .woocommerce button.button.alt:hover,
body.cp.woocommerce-page button.button.alt:hover,
body.cp .woocommerce #respond input#submit:hover,
body.cp.woocommerce-page #respond input#submit:hover {
  background-color: var(--cp-bordeaux-fonce);
  border-color: var(--cp-bordeaux-fonce);
}

body.cp .woocommerce table.shop_table,
body.cp.woocommerce-page table.shop_table {
  border: 1px solid var(--cp-trait);
  border-radius: var(--cp-r-md);
  border-collapse: separate;
  border-spacing: 0;
}
body.cp .woocommerce table.shop_table th,
body.cp.woocommerce-page table.shop_table th {
  font-family: var(--cp-font-texte);
  font-size: var(--cp-t-xs);
  letter-spacing: var(--cp-ls-surtitre);
  text-transform: uppercase;
  color: var(--cp-texte-doux);
}
body.cp .woocommerce table.shop_table td,
body.cp.woocommerce-page table.shop_table td{ font-variant-numeric: tabular-nums; }

body.cp .woocommerce nav.woocommerce-pagination,
body.cp.woocommerce-page nav.woocommerce-pagination{ margin-top: var(--cp-e-8); }
body.cp .woocommerce nav.woocommerce-pagination ul,
body.cp.woocommerce-page nav.woocommerce-pagination ul {
  border: 0;
  gap: var(--cp-e-2);
  display: flex;
  justify-content: center;
}
body.cp .woocommerce nav.woocommerce-pagination ul li,
body.cp.woocommerce-page nav.woocommerce-pagination ul li{ border: 0; margin: 0; }
body.cp .woocommerce nav.woocommerce-pagination ul li a,
body.cp.woocommerce-page nav.woocommerce-pagination ul li a,
body.cp .woocommerce nav.woocommerce-pagination ul li span,
body.cp.woocommerce-page nav.woocommerce-pagination ul li span {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--cp-e-2);
  border: 1px solid var(--cp-trait);
  border-radius: var(--cp-r-sm);
  color: var(--cp-texte);
  background: var(--cp-blanc);
  font-family: var(--cp-font-texte);
  font-size: var(--cp-t-s);
  font-weight: 600;
  transition: border-color var(--cp-vite) var(--cp-courbe),
              color        var(--cp-vite) var(--cp-courbe);
}
body.cp .woocommerce nav.woocommerce-pagination ul li a:hover,
body.cp.woocommerce-page nav.woocommerce-pagination ul li a:hover {
  border-color: var(--cp-bordeaux);
  color: var(--cp-bordeaux);
  background: var(--cp-blanc);
}
body.cp .woocommerce nav.woocommerce-pagination ul li span.current,
body.cp.woocommerce-page nav.woocommerce-pagination ul li span.current,
body.cp .woocommerce nav.woocommerce-pagination ul li a.current,
body.cp.woocommerce-page nav.woocommerce-pagination ul li a.current {
  background: var(--cp-bordeaux);
  border-color: var(--cp-bordeaux);
  color: var(--cp-blanc);
}

/* Messages WooCommerce : le liseré vert par défaut n'appartient à aucune
   palette du site. */
body.cp .woocommerce-message,
body.cp .woocommerce-info {
  border-top-color: var(--cp-bordeaux);
  background: var(--cp-bordeaux-voile);
  color: var(--cp-encre);
  border-radius: var(--cp-r-sm);
}
body.cp .woocommerce-message::before,
body.cp .woocommerce-info::before{ color: var(--cp-bordeaux); }

/* --------------------------------------------------------------------------
   5. LES DEUX SEULS !important DU THÈME

   Elementor écrit la couleur de certains boutons directement dans un attribut
   `style` en ligne, généré depuis les réglages du constructeur. Une règle de
   feuille externe, quelle que soit sa spécificité, ne peut pas passer devant
   un style en ligne : `!important` est ici le seul recours correct, et il est
   cantonné à ces deux règles.

   À supprimer le jour où les réglages du kit Elementor sont alignés sur les
   jetons du fichier 01 — c'est la vraie correction, celle-ci est un garde-fou.
   -------------------------------------------------------------------------- */

body.cp .elementor-button[style*="13aff0"],
body.cp .elementor-button-wrapper .elementor-button.elementor-size-md[style*="background"] {
  background-color: var(--cp-bordeaux) !important;
  color: var(--cp-blanc) !important;
}
body.cp a[style*="color: #13aff0"],
body.cp [style*="color:#13aff0"] {
  color: var(--cp-bordeaux) !important;
}