/* =====================================================================
   AB SERVICES · Surcouche WordPress / WooCommerce / Elementor
   ---------------------------------------------------------------------
   Fichier MODULAIRE, totalement isolé du design system (style.css).
   Rôle : neutraliser les styles injectés par Hello Elementor, le kit
   Elementor et WooCommerce qui « débordent » sur nos composants, puis
   thématiser proprement les pages WooCommerce (boutique + fiche produit)
   selon la charte AB Services.

   Pourquoi un fichier à part : on ne touche jamais au design system. Si
   un jour on retire WooCommerce ou Elementor, il suffit de ne plus
   charger ce fichier · la maquette reste intacte.

   Spécificité : les feuilles tierces ciblent souvent input[type="email"]
   (0,1,1) ce qui bat nos classes .input (0,1,0). On rétablit donc la
   main avec des sélecteurs plus spécifiques et, là où l'on combat des
   styles tiers très agressifs, !important (ciblé, jamais global).
   ===================================================================== */

/* ------------------------------------------------------------------ *
   1. PLEINE LARGEUR · Hello Elementor contraint .site-header/.site-footer
      (mêmes noms de classe que les nôtres) à max-width:1140px.
 * ------------------------------------------------------------------ */
.site-header:not(.dynamic-header),
.site-footer:not(.dynamic-footer){
  max-width:none !important;
  margin-inline:0 !important;
  width:100% !important;
}
body:not([class*="elementor-page-"]) .site-main{
  max-width:none !important;
  margin-inline:0 !important;
  padding:0 !important;
}

/* ------------------------------------------------------------------ *
   2. CHAMPS DE FORMULAIRE · bat input[type=...] de WooCommerce/Hello
      et harmonise tous nos champs (texte, tel, email, date, number,
      select, textarea), y compris dans le tiroir panier.
 * ------------------------------------------------------------------ */
input.input,
input.input[type="text"],
input.input[type="tel"],
input.input[type="email"],
input.input[type="number"],
input.input[type="date"],
input.input[type="search"],
select.select,
textarea.textarea{
  /* IMPORTANT : sélecteurs NON scopés à .site-main. Les pages WordPress
     (Hello Elementor) ne placent pas toujours le contenu dans .site-main
     (cas du formulaire de contact). Hello (reset.css) cible en plus
     input[type=tel|email] avec une spécificité (0,1,1) qui bat le .input
     du design system (0,1,0) → champs tél/email gris et plus petits.
     On rétablit donc TOUS nos champs en !important ciblé, partout. */
  width:100% !important;
  font-family:var(--font-body) !important;
  font-size:1rem !important;
  line-height:1.4 !important;
  color:var(--ink) !important;
  background:#fff !important;
  border:1.5px solid var(--line) !important;
  border-radius:12px !important;
  padding:.8em 1em !important;
  margin:0 !important;
  min-height:0 !important;
  height:auto !important;
  box-shadow:none;
  transition:border-color .2s, box-shadow .2s;
}
input.input:focus,
select.select:focus,
textarea.textarea:focus{
  outline:none;
  border-color:var(--indigo-500) !important;
  box-shadow:0 0 0 4px rgba(71,54,184,.12);
}
textarea.textarea{min-height:130px;resize:vertical}

/* Le select natif est masqué (on utilise le select custom ABUI). On
   garde la flèche maison uniquement quand il n'est PAS amélioré. */
select.select{
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='%235a5870' viewBox='0 0 16 16'%3E%3Cpath d='M3 6l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 1em center;
  padding-right:2.4em !important;
}
/* Champ date : on garde l'icône calendrier native bien visible */
input.input[type="date"]{
  background-image:none;
  padding-right:1em !important;
}
input.input[type="date"]::-webkit-calendar-picker-indicator{
  cursor:pointer;
  opacity:.7;
  filter:invert(16%) sepia(40%) saturate(2200%) hue-rotate(230deg);
}

/* Cases à cocher / radios natives : couleur de marque */
.site-main input[type="checkbox"],
.site-main input[type="radio"],
.cart-root input[type="checkbox"],
form input[type="checkbox"],
form input[type="radio"]{accent-color:var(--indigo-600)}

/* ------------------------------------------------------------------ *
   3. BOUTONS DESIGN SYSTEM · empêche Hello/Elementor de recolorer nos
      .btn (notamment au :hover via a:hover{color:accent}).
 * ------------------------------------------------------------------ */
.site-main a.btn,
.site-header a.btn,
.site-footer a.btn,
.topbar a.btn,
.cart-root a.btn,
.fab.fab{ /* .fab dupliqué pour la spécificité */
  text-decoration:none;
}
.site-main a.btn,
.site-main a.btn:hover,
.site-main a.btn:focus,
.site-header a.btn,
.site-header a.btn:hover,
.cart-root a.btn,
.cart-root a.btn:hover{
  color:var(--fg);
}
/* Réasserte les variantes (le --fg est défini par la variante) */
.site-main .btn--yellow,.site-header .btn--yellow,.cart-root .btn--yellow{--fg:var(--indigo-900)}
.site-main .btn--dark,.site-header .btn--dark,.cart-root .btn--dark{--fg:#fff}
.site-main .btn--ghost,.cart-root .btn--ghost{--fg:var(--ink)}
.site-main .btn--ghost.on-dark{--fg:#fff}
/* Les liens « soulignés » du contenu ne doivent pas toucher les boutons */
.site-main .btn::after{background:none}

/* ------------------------------------------------------------------ *
   4. PANIER (tiroir Click & Collect) · Hello reset met button{} à plat ;
      on réaffirme la taille des icônes et l'alignement.
 * ------------------------------------------------------------------ */
.cart-toggle{
  width:44px;height:44px;flex:0 0 auto;
  display:grid !important;place-items:center;
  padding:0;line-height:1;
}
.cart-toggle svg{width:21px;height:21px;display:block}
.cart-x{
  width:38px;height:38px;flex:0 0 auto;
  display:grid !important;place-items:center;
  padding:0;line-height:1;background:none;border:0;
}
.cart-x svg{width:20px;height:20px;display:block}
.cart-head{align-items:flex-start}
.ci-del{display:grid;place-items:center;padding:0}
.ci-qty button{display:grid;place-items:center}
/* La barre d'admin WordPress (visible une fois connecté) ne doit pas
   recouvrir le haut du tiroir panier. Sans effet pour les visiteurs. */
.admin-bar .cart-panel{top:32px}
@media (max-width:782px){ .admin-bar .cart-panel{top:46px} }

/* ------------------------------------------------------------------ *
   5. WOOCOMMERCE · boutons aux couleurs de la marque (élimine le
      violet/rose par défaut #7f54b3 et le gris #e9e6ed).
 * ------------------------------------------------------------------ */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit.alt,
.woocommerce .single_add_to_cart_button,
.wc-block-components-button{
  font-family:var(--font-head) !important;
  font-weight:700 !important;
  text-transform:uppercase !important;
  letter-spacing:.04em !important;
  background:var(--red) !important;
  background-color:var(--red) !important;
  color:#fff !important;
  border:0 !important;
  border-radius:999px !important;
  padding:.85em 1.6em !important;
  box-shadow:0 12px 26px rgba(229,35,27,.28);
  transition:transform .2s, box-shadow .2s, background-color .2s;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce .single_add_to_cart_button:hover,
.wc-block-components-button:hover{
  /* Survol = INVERSION (comme les .btn) : fond blanc, texte rouge mis en
     avant, liseré rouge. Lisible, clair, jamais sombre sur couleur. */
  background:#fff !important;
  background-color:#fff !important;
  color:var(--red) !important;
  transform:translateY(-2px);
  box-shadow:inset 0 0 0 2px var(--red), 0 16px 32px rgba(20,13,51,.16) !important;
}
.woocommerce a.button:active,
.woocommerce button.button:active,
.woocommerce .single_add_to_cart_button:active{
  transform:translateY(0);
  filter:brightness(.96);
}
/* Bouton « ajouté au panier » / vue panier : variante secondaire */
.woocommerce a.added_to_cart{
  display:inline-flex;align-items:center;
  margin-left:.6em;
  background:var(--indigo-700) !important;color:#fff !important;
  border-radius:999px;padding:.7em 1.2em;font-family:var(--font-head);
  text-transform:uppercase;font-weight:700;letter-spacing:.04em;text-decoration:none;
}

/* Prix, titres, badges promo aux couleurs de la marque */
.woocommerce .price,
.woocommerce .woocommerce-Price-amount{
  color:var(--indigo-900);font-family:var(--font-head);font-weight:700;
}
.woocommerce span.onsale{
  background:var(--yellow);color:var(--indigo-900);
  font-family:var(--font-head);text-transform:uppercase;font-weight:700;
  border-radius:999px;min-height:0;line-height:1;padding:.4em .8em;
}
.woocommerce-message,
.woocommerce-info{border-top-color:var(--indigo-600)}
.woocommerce-message::before,
.woocommerce-info::before{color:var(--indigo-600)}

/* ------------------------------------------------------------------ *
   6. WOOCOMMERCE · mise en page (boutique + fiche produit) dans la
      charte. La largeur est gérée par .wrap (voir woocommerce.php).
 * ------------------------------------------------------------------ */
/* Le bandeau .page-head fournit déjà titre + fil d'Ariane : on masque
   les doublons natifs de WooCommerce. Selon la version de WooCommerce, le
   titre de la boutique est rendu soit dans .woocommerce-products-header,
   soit directement en <h1 class="page-title"> : on neutralise les deux
   (sinon « BOUTIQUE » s'affiche deux fois, dans le bandeau ET en dessous). */
.ab-woo .woocommerce-breadcrumb,
.ab-woo .woocommerce-products-header,
.ab-woo h1.page-title,
.ab-woo > h1.entry-title{
  display:none !important;
}
.ab-woo h1.product_title{
  font-family:var(--font-head);text-transform:uppercase;color:var(--indigo-900);
  font-size:clamp(1.5rem,2.4vw,2rem);margin-bottom:.3rem;
}
/* La barre tri + nombre de résultats reste utile : on la garde alignée. */
.ab-woo .woocommerce-result-count{color:var(--slate);font-size:.9rem;margin-bottom:1rem}
.ab-woo .woocommerce-ordering{margin-bottom:1.4rem}

/* Grille boutique : cartes brand cohérentes avec .product de la maquette */
.ab-woo ul.products{
  display:grid !important;
  grid-template-columns:repeat(3,1fr);
  gap:24px;margin:0;padding:0;
}
/* WooCommerce ajoute un clearfix ul.products::before/::after (display:table)
   conçu pour les floats. En contexte CSS grid, ces pseudo-éléments
   deviennent de VRAIES cellules de grille : la 1re carte est alors poussée
   en colonne 2 et toute la grille se décale (effet « cartes compressées /
   colonne vide à gauche » sur les produits similaires). On les neutralise. */
.ab-woo ul.products::before,
.ab-woo ul.products::after{
  content:none !important;
  display:none !important;
}
.ab-woo ul.products li.product{
  width:auto !important;margin:0 !important;float:none !important;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;padding:0 0 18px;
  display:flex;flex-direction:column;
  transition:transform .3s, box-shadow .3s, border-color .3s;
}
.ab-woo ul.products li.product:hover{
  transform:translateY(-5px);box-shadow:var(--shadow);border-color:transparent;
}
.ab-woo ul.products li.product a img,
.ab-woo .woocommerce-product-gallery__image img{
  margin:0 0 14px;border-radius:0;
}
.ab-woo ul.products li.product .woocommerce-loop-product__title,
.ab-woo ul.products li.product h2{
  font-family:var(--font-head);text-transform:uppercase;font-size:1.05rem;
  color:var(--indigo-800);padding:0 16px;line-height:1.1;
}
.ab-woo ul.products li.product .price{padding:0 16px;font-size:1.25rem}
.ab-woo ul.products li.product .button,
.ab-woo ul.products li.product a.add_to_cart_button{
  margin:12px 16px 0;align-self:flex-start;
}

/* Fiche produit : 2 colonnes (galerie / résumé) avec respiration.
   IMPORTANT : le conteneur WooCommerce porte la classe « product », qui
   correspond AUSSI à la carte .product du design system (cartes catalogue).
   Sans neutralisation, toute la fiche produit se retrouve enfermée dans un
   cadre (bordure + radius + ombre + survol qui soulève la page entière).
   On annule donc ici cet héritage : la fiche doit être « libre », posée
   directement sur la page blanche. */
.ab-woo div.product{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(24px,4vw,56px);align-items:start;
  background:transparent !important;border:0 !important;border-radius:0 !important;
  overflow:visible !important;box-shadow:none !important;padding:0 !important;
  transform:none !important;
}
.ab-woo div.product:hover{
  transform:none !important;box-shadow:none !important;border-color:transparent !important;
}
.ab-woo div.product .woocommerce-product-gallery{
  width:100% !important;margin:0;float:none;
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  background:var(--paper-2);
}
.ab-woo div.product .summary{
  width:100% !important;margin:0;float:none;
}
.ab-woo div.product .summary .price{font-size:2rem;margin:.4rem 0 1rem}
.ab-woo div.product form.cart{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:1rem 0}

/* --- Sélecteur de quantité : stepper maison (− valeur +) ---
   On masque les flèches natives du <input type=number> (vilaines, mal
   alignées selon le navigateur) et on enrobe le champ de deux boutons
   ronds aux couleurs de la marque, injectés par assets/js/woo.js. */
.ab-woo div.product .quantity input.qty,
.ab-woo .quantity input.qty{
  width:54px;border:0;background:transparent;
  text-align:center;font-family:var(--font-head);font-size:1.1rem;
  color:var(--indigo-900);padding:.4em 0;margin:0;-moz-appearance:textfield;
}
.ab-woo .quantity input.qty::-webkit-outer-spin-button,
.ab-woo .quantity input.qty::-webkit-inner-spin-button{
  -webkit-appearance:none;margin:0;
}
.ab-woo .ab-qty{
  display:inline-flex;align-items:center;
  border:1.5px solid var(--line);border-radius:999px;
  background:#fff;overflow:hidden;height:48px;
}
.ab-woo .ab-qty .ab-qty-btn{
  width:42px;height:46px;flex:0 0 auto;
  display:grid !important;place-items:center;
  border:0;background:transparent;cursor:pointer;padding:0;margin:0;
  font-family:var(--font-head);font-size:1.5rem;line-height:1;font-weight:600;
  color:var(--indigo-700) !important;
  transition:background .15s,color .15s;
}
.ab-woo .ab-qty .ab-qty-btn:hover,
.ab-woo .ab-qty .ab-qty-btn:focus{background:var(--indigo-700) !important;color:#fff !important}
.ab-woo .ab-qty .ab-qty-btn:active{background:var(--indigo-900) !important;color:#fff !important}

/* Stepper du panier (tiroir Click & Collect) : mêmes garanties anti-repeint. */
.cart-root .ci-qty button{ color:var(--indigo-700) !important; }
.cart-root .ci-qty button:hover,
.cart-root .ci-qty button:focus{ background:var(--indigo-700) !important; color:#fff !important; }
.cart-root .ci-qty button:active{ background:var(--indigo-900) !important; color:#fff !important; }

/* --- Onglets fiche produit : pilules de marque (au lieu du gris natif) --- */
.ab-woo .woocommerce-tabs{grid-column:1/-1;margin-top:2.5rem}
.ab-woo .woocommerce-tabs ul.tabs{
  display:flex;flex-wrap:wrap;gap:10px;
  list-style:none;margin:0 0 1.6rem;padding:0;border:0;
}
.ab-woo .woocommerce-tabs ul.tabs::before,
.ab-woo .woocommerce-tabs ul.tabs::after{display:none !important;content:none !important}
.ab-woo .woocommerce-tabs ul.tabs li{
  background:transparent;border:0;border-radius:999px;margin:0;padding:0;
}
.ab-woo .woocommerce-tabs ul.tabs li::before,
.ab-woo .woocommerce-tabs ul.tabs li::after{display:none !important}
.ab-woo .woocommerce-tabs ul.tabs li a{
  /* WooCommerce single-product cible .woocommerce div.product …li a
     (spécificité 0,4,4) avec padding:0 : on impose la pilule. */
  display:block !important;padding:.6em 1.4em !important;border-radius:999px;
  background:var(--paper-2);color:var(--indigo-800);
  font-family:var(--font-head);text-transform:uppercase;font-weight:700;
  letter-spacing:.03em;font-size:.95rem;text-decoration:none;
  transition:background .15s,color .15s;
}
.ab-woo .woocommerce-tabs ul.tabs li a:hover{background:#e7e3f5}
.ab-woo .woocommerce-tabs ul.tabs li.active a{background:var(--indigo-800);color:#fff}
.ab-woo .woocommerce-tabs .panel{margin:0}
.ab-woo .woocommerce-tabs .panel>h2{
  font-family:var(--font-head);text-transform:uppercase;color:var(--indigo-900);
  font-size:clamp(1.3rem,2vw,1.7rem);margin-bottom:1rem;
}
/* Tableau « Informations complémentaires » aux couleurs de la marque */
.ab-woo .woocommerce-product-attributes th{
  background:var(--paper-2);color:var(--indigo-900);font-family:var(--font-head);
  text-transform:uppercase;letter-spacing:.02em;
}
.ab-woo .woocommerce-product-attributes td{color:var(--ink)}

/* --- Produits similaires / ventes croisées --- */
.ab-woo .related.products,
.ab-woo .up-sells{grid-column:1/-1;margin-top:2.5rem}
.ab-woo .related.products>h2,
.ab-woo .up-sells>h2{
  font-family:var(--font-head);text-transform:uppercase;color:var(--indigo-900);
  font-size:clamp(1.4rem,2.2vw,1.9rem);margin-bottom:1.4rem;
}

/* Placeholder image produit : fond charte (la vraie image SVG est servie
   par le filtre PHP woocommerce_placeholder_img_src). */
.ab-woo img.woocommerce-placeholder,
.ab-woo .wp-post-image[src*="placeholder"]{
  background:radial-gradient(circle at 50% 40%,#2c2160,#140d33);
}

/* ------------------------------------------------------------------ *
   6 bis. CATALOGUE · illustration propre (au lieu d'une photo générique).
   Les cartes produit du catalogue affichent une illustration SVG de marque
   sur fond indigo tant que le client n'a pas mis sa propre photo produit.
   Bat la photo de fond définie par .product .ph dans style.css.
 * ------------------------------------------------------------------ */
.product .ph.ab-illo{
  background:radial-gradient(circle at 50% 34%, var(--indigo-600), var(--indigo-900)) !important;
}
.product .ph.ab-illo::before{content:none !important}
.product .ph.ab-illo svg{
  width:74px;height:74px;color:rgba(255,255,255,.92);
  filter:drop-shadow(0 4px 12px rgba(0,0,0,.35));
}

/* ------------------------------------------------------------------ *
   7. Responsive WooCommerce
 * ------------------------------------------------------------------ */
@media (max-width:900px){
  .ab-woo ul.products{grid-template-columns:repeat(2,1fr)}
  .ab-woo div.product{grid-template-columns:1fr}
}
@media (max-width:560px){
  .ab-woo ul.products{grid-template-columns:1fr}
}

/* ------------------------------------------------------------------ *
   8. ANTI-ROSE · neutralise le mauve/rose par défaut de WooCommerce
      (#a46497 sur les liens et boutons secondaires) que l'on voyait
      « en noir sur rose » au survol. On force partout les couleurs de
      marque : liens indigo→rouge, boutons rouges à texte blanc.
 * ------------------------------------------------------------------ */
/* Contrôles natifs (cases, sélecteurs) : teinte de marque, pas le défaut navigateur. */
:root{ accent-color: var(--indigo-600); }

/* >>> CAUSE PRINCIPALE DU « ROSE AU SURVOL » <<<
   Hello Elementor (reset.css) impose un fond ROSE #cc3366 sur
   button/input[type=button|submit|reset] au :hover ET :focus. Résultat :
   chips de filtre, bouton de liste déroulante, boutons de formulaire, etc.
   viraient au rose partout. On neutralise ce fond... */
button:hover, button:focus,
input[type="button"]:hover, input[type="button"]:focus,
input[type="submit"]:hover, input[type="submit"]:focus,
input[type="reset"]:hover, input[type="reset"]:focus,
[type="button"]:hover, [type="button"]:focus,
[type="submit"]:hover, [type="submit"]:focus,
[type="reset"]:hover, [type="reset"]:focus{
  background-color: transparent;
}
/* ...puis on RÉAFFIRME le fond propre des boutons de marque au survol
   (sinon ils deviendraient transparents). */
.btn:hover, .btn:focus{ background: var(--bg); }
.btn--ghost:hover{ background: var(--indigo-600); }
.btn--ghost.on-dark:hover{ background: #fff; }
.chip:hover{ background: var(--paper-2); }
.cselect__btn:hover{ background: #fff; }
.cart-toggle:hover{ background: #fff; }
.ci-qty button:hover, .ci-qty button:focus{ background: #fff; }

/* Liens de contenu WooCommerce : indigo, puis rouge au survol (au lieu du mauve). */
.woocommerce a:not(.button):not(.add_to_cart_button):not(.added_to_cart):not([class*="wc-block"]),
.woocommerce-page a:not(.button):not(.add_to_cart_button):not(.added_to_cart):not([class*="wc-block"]){
  color: var(--indigo-700);
}
.woocommerce a:not(.button):not(.add_to_cart_button):not(.added_to_cart):not([class*="wc-block"]):hover,
.woocommerce-page a:not(.button):not(.add_to_cart_button):not(.added_to_cart):not([class*="wc-block"]):hover{
  color: var(--red);
}

/* Boutons blocs / WordPress : rouge de marque, texte blanc au survol
   (jamais de texte sombre sur fond mauve). */
.wc-block-components-button,
.wp-block-button__link,
.wp-element-button,
.woocommerce .wp-element-button{
  background-color: var(--red) !important;
  color: #fff !important;
  border-color: var(--red) !important;
}
.wc-block-components-button:hover,
.wp-block-button__link:hover,
.wp-element-button:hover,
.woocommerce .wp-element-button:hover{
  background-color: #fff !important;
  color: var(--red) !important;
  box-shadow: inset 0 0 0 2px var(--red) !important;
}

/* Onglets fiche produit : survol clairement « bleu marque » (et non rosé). */
.ab-woo .woocommerce-tabs ul.tabs li a:hover{ background:#e3e6f5; color:var(--indigo-900); }

/* Sélection de texte aux couleurs de marque (détail de finition). */
::selection{ background: var(--indigo-700); color:#fff; }

/* ------------------------------------------------------------------ *
   9. SURVOL DES BOUTONS · le texte garde TOUJOURS sa couleur.
      Hello/Elementor repeignait le texte des boutons au survol (le lien
      <a> hérite d'un a:hover sombre), d'où le « texte noir/bleu sur fond
      indigo » (ex. bouton « Découvrir », CTA du héros, « Ajouter au
      panier »). On verrouille la couleur via la variable --fg de chaque
      variante, en !important, partout (pas seulement dans .site-main).
 * ------------------------------------------------------------------ */
.btn, a.btn, button.btn,
.btn:hover, a.btn:hover, button.btn:hover,
.btn:focus, a.btn:focus, button.btn:focus,
.btn:active, a.btn:active,
.btn:visited, a.btn:visited{
  color: var(--fg) !important;
}
/* Couleurs de texte de base des variantes contour. */
.btn--ghost{ --fg:var(--ink); }
.btn--ghost.on-dark{ --fg:#fff; }

/* SURVOL : le bouton s'INTENSIFIE et se SOULÈVE (jamais d'inversion vers le
   blanc — sur une section blanche un bouton blanc disparaîtrait : « blanc sur
   blanc »). Lisible sur n'importe quel fond, et bien vivant. */
.btn{ transition:background .2s, color .2s, box-shadow .25s, transform .2s; }
.btn:hover, .btn:focus-visible{
  --bg:var(--red-dark); --fg:#fff;
  transform:translateY(-2px);
  box-shadow:0 12px 26px rgba(229,35,27,.34);
}
.btn--dark:hover, .btn--dark:focus-visible{
  --bg:var(--indigo-600); --fg:#fff;
  transform:translateY(-2px);
  box-shadow:0 12px 26px rgba(20,13,51,.36);
}
.btn--yellow:hover, .btn--yellow:focus-visible{
  --bg:#f2c200; --fg:var(--indigo-900);
  transform:translateY(-2px);
  box-shadow:0 12px 26px rgba(255,206,0,.42);
}
/* Le bouton « contour » se remplit : indigo sur fond clair, blanc sur foncé. */
.btn--ghost:hover, .btn--ghost:focus-visible{
  --bg:var(--indigo-700); --fg:#fff;
  background:var(--indigo-700) !important; border-color:var(--indigo-700) !important;
  transform:translateY(-2px); box-shadow:0 12px 26px rgba(20,13,51,.3);
}
.btn--ghost.on-dark:hover, .btn--ghost.on-dark:focus-visible{
  --bg:#fff; --fg:var(--indigo-900);
  background:#fff !important; border-color:#fff !important;
  transform:translateY(-2px); box-shadow:0 12px 26px rgba(0,0,0,.3);
}
.btn:active{ transform:translateY(0) scale(.99); }

/* Bouton « Réserver » des cartes catalogue : rouge plus foncé + soulèvement. */
.product .add{ color:#fff !important; }
.product .add:hover, .product .add:focus{
  background:var(--red-dark) !important; color:#fff !important;
  filter:none; transform:translateY(-2px);
  box-shadow:0 10px 22px rgba(229,35,27,.36);
}
/* Liens-cartes : pas de repeint bleu du texte au survol. */
a.card:hover, a.card:focus, a.hp-item:hover{ color:var(--ink) !important; }

/* ------------------------------------------------------------------ *
   9b. LISTES DÉROULANTES MAISON (.cselect : point de retrait, etc.)
       Hello/Elementor repeignait le bouton et les options au survol
       (texte qui devenait BLANC sur fond blanc = illisible). On verrouille.
 * ------------------------------------------------------------------ */
.cselect__btn,
.cselect__btn:hover,
.cselect__btn:focus{
  color:var(--ink) !important;
  background:#fff !important;
}
.cselect__btn:hover{ border-color:var(--indigo-500) !important; }
.cselect__list li{ color:var(--slate) !important; background:transparent !important; }
.cselect__list li:hover,
.cselect__list li:focus{
  background:var(--paper-2) !important;
  color:var(--indigo-800) !important;
}
.cselect__list li[aria-selected="true"]{
  background:var(--indigo-700) !important;
  color:#fff !important;
}