/* ================================================================
   Rocasol — UX/UI global overrides
   Mobile-first, cohérence, accessibilité, navigation
   ================================================================ */

/* ── Variables ──────────────────────────────────────────────────── */
:root {
  --roca-blue:       #1e56a6;
  --roca-blue-dark:  #163d7a;
  --roca-orange:     #f58127;
  --roca-orange-dark:#d96b1a;
  --roca-dark:       #23232d;
  --roca-light:      #f9f9fa;
  --roca-border:     #3d3f4b;
  --roca-radius:     6px;
  --roca-transition: 0.2s ease;
}

/* ── Focus visible — accessibilité clavier ──────────────────────── */
*:focus-visible {
  outline: 2px solid var(--roca-orange);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ── Typographie globale ────────────────────────────────────────── */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ── Liens ──────────────────────────────────────────────────────── */
a {
  transition: color var(--roca-transition), opacity var(--roca-transition);
}
a:hover {
  opacity: 0.85;
}

/* ── Boutons Oxygen — base + hover ──────────────────────────────── */
.ct-link-button,
.atomic-outline-button,
.atomic-primary-button,
.conference-white-outline-button {
  transition: background-color var(--roca-transition),
              border-color var(--roca-transition),
              color var(--roca-transition),
              transform var(--roca-transition),
              box-shadow var(--roca-transition);
  border-radius: var(--roca-radius) !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  text-decoration: none !important;
}

/* Bouton générique Oxygen — remplace le bleu par défaut #1e73be */
.ct-link-button {
  background-color: var(--roca-blue) !important;
  border-color: var(--roca-blue) !important;
  color: #fff !important;
  padding: 12px 24px !important;
}
.ct-link-button:hover {
  background-color: var(--roca-blue-dark) !important;
  border-color: var(--roca-blue-dark) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(30, 86, 166, 0.3);
}

/* Bouton primaire (orange — CTA principal) */
.atomic-primary-button {
  background-color: var(--roca-orange) !important;
  border-color: var(--roca-orange) !important;
  color: #fff !important;
  padding: 14px 32px !important;
}
.atomic-primary-button:hover {
  background-color: var(--roca-orange-dark) !important;
  border-color: var(--roca-orange-dark) !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(245, 129, 39, 0.45);
}

/* Bouton outline (bleu contour) */
.atomic-outline-button {
  border: 2px solid currentColor !important;
  padding: 12px 26px !important;
}
.atomic-outline-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0,0,0,0.2);
  opacity: 1 !important;
}

/* Bouton outline blanc (sur fond sombre) */
.conference-white-outline-button {
  border: 2px solid rgba(255,255,255,0.8) !important;
  color: #fff !important;
  padding: 12px 26px !important;
}
.conference-white-outline-button:hover {
  background-color: rgba(255,255,255,0.1) !important;
  border-color: #fff !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0,0,0,0.2);
}

/* ── Bouton "Ajouter au panier" WooCommerce ─────────────────────── */
.single_add_to_cart_button,
button.single_add_to_cart_button {
  background-color: var(--roca-orange) !important;
  border-color: var(--roca-orange) !important;
  color: #fff !important;
  border-radius: var(--roca-radius) !important;
  font-size: 1rem !important;
  padding: 14px 28px !important;
  transition: background-color var(--roca-transition), transform var(--roca-transition), box-shadow var(--roca-transition) !important;
  letter-spacing: 0.03em;
}
.single_add_to_cart_button:hover {
  background-color: var(--roca-orange-dark) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(245, 129, 39, 0.4) !important;
}

/* ── Grille produits WooCommerce ────────────────────────────────── */
ul.products li.product .woocommerce-loop-product__link {
  text-decoration: none;
}
ul.products li.product {
  transition: transform var(--roca-transition), box-shadow var(--roca-transition);
  border-radius: var(--roca-radius);
  overflow: hidden;
  background: rgba(255,255,255,0.04);
}
ul.products li.product:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 28px rgba(0,0,0,0.2);
}
ul.products li.product .woocommerce-LoopProduct-link img {
  transition: transform 0.3s ease;
}
ul.products li.product:hover .woocommerce-LoopProduct-link img {
  transform: scale(1.04);
}
ul.products .price {
  color: var(--roca-orange) !important;
  font-weight: 700;
  font-size: 1.1em;
}
ul.products .button {
  background-color: var(--roca-blue) !important;
  border-color: var(--roca-blue) !important;
  color: #fff !important;
  border-radius: var(--roca-radius) !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  transition: background-color var(--roca-transition), transform var(--roca-transition), box-shadow var(--roca-transition) !important;
}
ul.products .button:hover {
  background-color: var(--roca-blue-dark) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(30, 86, 166, 0.35) !important;
}

/* ── Produit WooCommerce — page individuelle ─────────────────────── */
.woocommerce div.product p.price,
.woocommerce div.product span.price {
  color: var(--roca-orange) !important;
  font-size: 1.6rem !important;
  font-weight: 700;
}
.woocommerce div.product .woocommerce-product-gallery {
  border-radius: var(--roca-radius);
  overflow: hidden;
}
.woocommerce div.product .woocommerce-product-gallery__image img {
  border-radius: var(--roca-radius);
}
/* Sélecteur de quantité */
.woocommerce .quantity input.qty {
  border-radius: var(--roca-radius) !important;
  border: 1px solid var(--roca-border) !important;
  padding: 10px 12px !important;
  width: 70px !important;
  text-align: center;
  font-size: 1rem;
  transition: border-color var(--roca-transition), box-shadow var(--roca-transition) !important;
}
.woocommerce .quantity input.qty:focus {
  border-color: var(--roca-blue) !important;
  box-shadow: 0 0 0 3px rgba(30, 86, 166, 0.15) !important;
  outline: none !important;
}

/* ── WooCommerce notices (succès, info, erreur) ──────────────────── */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  border-radius: 0 var(--roca-radius) var(--roca-radius) 0;
  padding: 14px 20px !important;
}
.woocommerce-message {
  border-left-color: var(--roca-orange) !important;
}
.woocommerce-info {
  border-left-color: var(--roca-blue) !important;
}
.woocommerce-message a.button,
.woocommerce-info a.button {
  background-color: var(--roca-blue) !important;
  border-color: var(--roca-blue) !important;
  color: #fff !important;
  border-radius: var(--roca-radius) !important;
}

/* ── Ordering / résultats boutique ──────────────────────────────── */
.woocommerce-ordering select {
  border-radius: var(--roca-radius) !important;
  border: 1px solid var(--roca-border) !important;
  padding: 8px 12px !important;
  background: transparent;
  color: inherit;
}

/* ── Stock status ───────────────────────────────────────────────── */
.woocommerce div.product .stock {
  font-weight: 600;
}
.woocommerce div.product .in-stock {
  color: #5cb85c;
}
.woocommerce div.product .out-of-stock {
  color: #d9534f;
}

/* ── Header — lisibilité email + liens ──────────────────────────── */
.oxygen-vsb-responsive-fld a[href^="mailto"] {
  word-break: break-all;
}

/* ── Header sticky — transition douce ───────────────────────────── */
.oxy-header {
  transition: box-shadow 0.3s ease;
}
.oxy-sticky-header-active {
  box-shadow: 0 2px 20px rgba(0,0,0,0.35) !important;
}

/* ── Navigation mobile ──────────────────────────────────────────── */
@media (max-width: 767px) {
  /* Menu mobile plein écran */
  .oxy-nav-menu-list {
    background-color: var(--roca-dark) !important;
  }
  .oxy-nav-menu-list li a {
    padding: 14px 20px !important;
    font-size: 1rem !important;
    border-bottom: 1px solid var(--roca-border);
  }
  /* Hamburger cible tactile ≥ 44px */
  .oxy-menu-toggle {
    padding: 10px !important;
    min-width: 44px;
    min-height: 44px;
    display: flex !important;
    align-items: center;
    justify-content: center;
  }
  /* Textes hero plus lisibles sur mobile */
  #section-2-17 h1,
  #section-2-17 h2 {
    font-size: clamp(1.5rem, 5.5vw, 2.4rem) !important;
    line-height: 1.25 !important;
  }
  /* Boutons pleine largeur sur mobile */
  .atomic-primary-button,
  .atomic-outline-button,
  .conference-white-outline-button {
    display: block !important;
    text-align: center !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  /* Produit WooCommerce : empilement vertical */
  .woocommerce div.product div.images,
  .woocommerce div.product div.summary {
    float: none !important;
    width: 100% !important;
  }
  /* Boutique : 2 colonnes sur mobile au lieu de 4 */
  .woocommerce ul.products.columns-4 {
    --woo-columns: 2;
  }
  .woocommerce ul.products.columns-4 li.product {
    width: calc(50% - 1rem) !important;
  }
}

/* ── Images responsive ──────────────────────────────────────────── */
img {
  max-width: 100%;
  height: auto;
}
/* Lazy loading : géré côté HTML (attribut loading="lazy"), pas en CSS.
   (l'ancienne règle `loading: lazy` n'existe pas en CSS — supprimée car no-op) */

/* ── WooCommerce — page produit ─────────────────────────────────── */
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
  color: var(--roca-blue);
  border-bottom-color: var(--roca-orange);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  color: var(--roca-light);
  transition: color var(--roca-transition);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover {
  color: var(--roca-orange);
}

/* ── Formulaire contact ─────────────────────────────────────────── */
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form textarea {
  border-radius: var(--roca-radius) !important;
  border: 1px solid var(--roca-border) !important;
  padding: 10px 14px !important;
  transition: border-color var(--roca-transition), box-shadow var(--roca-transition) !important;
  width: 100% !important;
  box-sizing: border-box;
}
.wpcf7-form input:focus,
.wpcf7-form textarea:focus {
  border-color: var(--roca-blue) !important;
  box-shadow: 0 0 0 3px rgba(30, 86, 166, 0.15) !important;
  outline: none !important;
}
.wpcf7-submit {
  background-color: var(--roca-blue) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--roca-radius) !important;
  padding: 12px 28px !important;
  cursor: pointer;
  transition: background-color var(--roca-transition), transform var(--roca-transition) !important;
}
.wpcf7-submit:hover {
  background-color: var(--roca-blue-dark) !important;
  transform: translateY(-1px);
}

/* ── Breadcrumb visible ─────────────────────────────────────────── */
.woocommerce-breadcrumb {
  font-size: 0.82rem;
  color: #8a8a9a;
  margin-bottom: 1.5rem;
  padding: 0;
}
.woocommerce-breadcrumb a {
  color: var(--roca-blue);
  text-decoration: none;
}
.woocommerce-breadcrumb a:hover {
  color: var(--roca-orange);
}

/* ── Sélecteur couleur produit — indication claire ──────────────── */
.variations select,
.woo-variation-swatches .variable-items-wrapper {
  border-radius: var(--roca-radius) !important;
}
.variations label {
  font-weight: 600;
  color: var(--roca-light);
}
/* Message "choisir une couleur" plus visible */
.woocommerce-variation-availability,
.woocommerce span.required {
  color: var(--roca-orange) !important;
  font-weight: 600;
}

/* ── Panier mini — icône unique ─────────────────────────────────── */
.oxygen-show-in-sticky-only .oxy-cart-count,
.oxy-hide-in-sticky .oxy-cart-count {
  min-width: 18px;
  min-height: 18px;
  font-size: 0.7rem;
  border-radius: 50%;
  background: var(--roca-orange);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ── Slider — flèches plus visibles ─────────────────────────────── */
.unslider-arrow {
  background: rgba(0,0,0,0.35) !important;
  border-radius: 50% !important;
  width: 36px !important;
  height: 36px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background var(--roca-transition) !important;
}
.unslider-arrow:hover {
  background: rgba(0,0,0,0.65) !important;
}

/* ── Smooth scroll (désactivé si l'utilisateur préfère moins d'animations) ── */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/* ── Print — masquer navigation ─────────────────────────────────── */
@media print {
  header, footer, .oxy-nav-menu { display: none !important; }
}

/* ── Tablette (768–991px) ───────────────────────────────────────── */
@media (min-width: 768px) and (max-width: 991px) {
  .ct-section > .ct-section-inner-wrap {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
  /* Boutique : 3 colonnes sur tablette */
  .woocommerce ul.products.columns-4 li.product {
    width: calc(33.333% - 1rem) !important;
  }
}

/* ── Panier / Checkout ──────────────────────────────────────────── */
/* Fond sombre cohérent avec le reste du site. Les pages panier/commander
   utilisent les templates blocs page-cart/page-checkout (heading + shortcode)
   qui n'ont pas de section Oxygen sombre comme les autres pages : on applique
   donc le fond + texte clair ici, sur la zone <main>. */
.woocommerce-cart main.wp-block-group,
.woocommerce-checkout main.wp-block-group {
  background: var(--roca-dark);
  color: var(--roca-light);
  padding-block: 3rem 4rem;
}
.woocommerce-cart main h1,
.woocommerce-checkout main h1,
.woocommerce-cart main h2,
.woocommerce-checkout main h2,
.woocommerce-checkout main h3,
.woocommerce-cart main label,
.woocommerce-checkout main label,
.woocommerce-cart main .cart-subtotal,
.woocommerce-cart main .order-total,
.woocommerce-checkout main .woocommerce-checkout-review-order {
  color: var(--roca-light);
}
.woocommerce-cart main a:not(.button),
.woocommerce-checkout main a:not(.button) { color: var(--roca-orange); }
/* Tableaux (panier + récap commande) lisibles sur fond sombre */
.woocommerce-cart main table.shop_table,
.woocommerce-checkout main table.shop_table {
  background: rgba(255, 255, 255, 0.04);
  color: var(--roca-light);
}
.woocommerce-cart main table.shop_table th,
.woocommerce-cart main table.shop_table td,
.woocommerce-checkout main table.shop_table th,
.woocommerce-checkout main table.shop_table td {
  border-color: var(--roca-border) !important;
  color: var(--roca-light);
}
/* Champs de saisie restent clairs (lisibilité) */
.woocommerce-cart main input.input-text,
.woocommerce-checkout main input.input-text,
.woocommerce-checkout main textarea,
.woocommerce-checkout main select,
.woocommerce-cart main .quantity input.qty {
  background: #fff !important;
  color: #23232d !important;
}

.woocommerce table.shop_table {
  border-radius: var(--roca-radius);
  overflow: hidden;
  border-collapse: separate;
  border-spacing: 0;
}
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
.woocommerce #payment #place_order {
  background-color: var(--roca-orange) !important;
  border-color: var(--roca-orange) !important;
  color: #fff !important;
  border-radius: var(--roca-radius) !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  font-size: 1.1rem !important;
  padding: 16px 32px !important;
  transition: background-color var(--roca-transition), transform var(--roca-transition), box-shadow var(--roca-transition) !important;
}
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover,
.woocommerce #payment #place_order:hover {
  background-color: var(--roca-orange-dark) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(245, 129, 39, 0.4) !important;
}

/* ── Coupon / cupons ─────────────────────────────────────────────── */
.woocommerce-cart .coupon input.input-text {
  border-radius: var(--roca-radius) !important;
  border: 1px solid var(--roca-border) !important;
  padding: 10px 14px !important;
}
.woocommerce-cart .coupon .button {
  border-radius: var(--roca-radius) !important;
}

/* ── Sélecteur variation (dropdown) ─────────────────────────────── */
.woocommerce div.product .variations select {
  border-radius: var(--roca-radius) !important;
  border: 1px solid var(--roca-border) !important;
  padding: 8px 12px !important;
  background: transparent;
  color: inherit;
  transition: border-color var(--roca-transition) !important;
}
.woocommerce div.product .variations select:focus {
  border-color: var(--roca-blue) !important;
  box-shadow: 0 0 0 3px rgba(30, 86, 166, 0.15) !important;
  outline: none !important;
}

/* ── Accessibilité — état de sélection swatches ─────────────────── */
.woo-variation-swatches .variable-item:not(.radio-variable-item).selected {
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--roca-orange) !important;
}

/* ── Oxy-woo-products (grille Oxygen WooCommerce) ───────────────── */
.oxy-woo-products {
  width: 100% !important;
}

/* ════════════════════════════════════════════════════════════════
   FOOTER — redesign complet
   ════════════════════════════════════════════════════════════════ */

/* Fond amélioré : liseré orange net + dégradé sombre */
#section-55-16 {
  background-image:
    linear-gradient(var(--roca-orange), var(--roca-orange)),
    linear-gradient(160deg, #1e2030 0%, #23232d 60%, #1a1a24 100%) !important;
  background-size: 100% 3px, 100% 100% !important;
  background-repeat: no-repeat !important;
  background-position: top, top !important;
  padding-top: 52px !important;
  padding-bottom: 0 !important;
  position: relative;
}

/* Barre de copyright — bas du footer */
#section-55-16::after {
  content: '© Rocasol 2025 — Kits de pose moquette de pierre, pour particuliers';
  display: block;
  text-align: center;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.28);
  letter-spacing: 0.08em;
  padding: 14px 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  margin-top: 40px;
}

/* Colonnes footer — espacement et séparations verticales */
#new_columns-56-16 {
  gap: 0 !important;
  align-items: flex-start !important;
  padding-bottom: 0 !important;
}
#div_block-57-16 {
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  padding-right: 40px !important;
}
#div_block-59-16 {
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  padding-left: 40px !important;
  padding-right: 40px !important;
}
#div_block-64-16 {
  padding-left: 40px !important;
}

/* ── Logo footer ────────────────────────────────────────────────── */
#image-73-16 {
  opacity: 0.85;
  transition: opacity 0.25s ease;
  margin-bottom: 24px !important;
}
#image-73-16:hover {
  opacity: 1;
}

/* ── Nav principale du footer ─────────────────────────────────── */
#_nav_menu-58-16 .oxy-nav-menu-list,
#_nav_menu-89-16 .oxy-nav-menu-list {
  gap: 2px;
}
#_nav_menu-58-16 .menu-item a {
  position: relative;
  display: inline-block;
  padding-top: 6px !important;
  padding-bottom: 6px !important;
  padding-left: 0 !important;
  font-size: 12px !important;
  color: rgba(255, 255, 255, 0.75) !important;
  transition: color 0.2s ease !important;
}
#_nav_menu-58-16 .menu-item a:hover {
  color: #fff !important;
}
/* Underline orange animé */
#_nav_menu-58-16 .menu-item > a::after {
  content: '';
  position: absolute;
  bottom: 3px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--roca-orange);
  transition: width 0.25s ease;
}
#_nav_menu-58-16 .menu-item > a:hover::after {
  width: 100%;
}
/* Sous-menu */
#_nav_menu-58-16 .sub-menu .menu-item a {
  font-size: 11px !important;
  color: rgba(255, 255, 255, 0.5) !important;
  padding-left: 10px !important;
}
#_nav_menu-58-16 .sub-menu .menu-item a:hover {
  color: var(--roca-orange) !important;
}

/* ── Nav légale (mentions, CGV…) ────────────────────────────────── */
#_nav_menu-89-16 .menu-item a {
  font-size: 11px !important;
  color: rgba(255, 255, 255, 0.5) !important;
  font-weight: 400 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  padding-top: 4px !important;
  padding-bottom: 4px !important;
  padding-left: 0 !important;
  transition: color 0.2s ease !important;
}
#_nav_menu-89-16 .menu-item a:hover {
  color: rgba(255, 255, 255, 0.85) !important;
}

/* ── Partenaires (Geodis, Qualibat) ─────────────────────────────── */
#div_block-115-16 {
  margin-top: 20px !important;
  gap: 16px !important;
  opacity: 0.5;
  filter: grayscale(1) brightness(2);
  transition: opacity 0.25s ease, filter 0.25s ease;
}
#div_block-115-16:hover {
  opacity: 0.8;
  filter: grayscale(0.5) brightness(1.5);
}
#image-120-16,
#image-119-16 {
  height: 32px !important;
  width: auto !important;
  object-fit: contain;
}

/* ── Labels de section ("Suivez-nous", "Restons en contact") ────── */
#headline-65-16,
#headline-67-16 {
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--roca-orange) !important;
  margin-bottom: 14px !important;
  opacity: 0.9;
}
#headline-67-16 {
  margin-top: 32px !important;
}

/* ── Icônes sociales footer ─────────────────────────────────────── */
#_social_icons-66-16.oxy-social-icons a {
  transition: transform 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease !important;
}
#_social_icons-66-16.oxy-social-icons a:hover {
  transform: translateY(-3px) scale(1.08) !important;
  background-color: var(--roca-orange) !important;
  box-shadow: 0 6px 16px rgba(245, 129, 39, 0.45) !important;
}

/* ── Email obfusqué ──────────────────────────────────────────────── */
#_rich_text-121-16 {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 8px;
  direction: ltr; /* l'email est RTL en interne, pas le bloc */
}
#_rich_text-121-16:hover {
  color: rgba(255, 255, 255, 0.95);
}

/* ── Téléphone ───────────────────────────────────────────────────── */
#link_text-69-16 {
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: 0.03em !important;
  color: rgba(255, 255, 255, 0.85) !important;
  text-transform: none !important;
  transition: color 0.2s ease, opacity 0.2s ease !important;
}
#link_text-69-16:hover {
  color: var(--roca-orange) !important;
  opacity: 1 !important;
}

/* ── Responsive footer — tablette ───────────────────────────────── */
@media (max-width: 991px) {
  #div_block-57-16,
  #div_block-59-16 {
    border-right: none;
    padding-right: 20px !important;
    padding-left: 20px !important;
  }
  #div_block-64-16 {
    padding-left: 20px !important;
    text-align: center !important;
    align-items: center !important;
  }
  #section-55-16::after {
    margin-top: 20px;
  }
}

/* ── Responsive footer — mobile ─────────────────────────────────── */
@media (max-width: 767px) {
  #section-55-16 {
    padding-top: 36px !important;
  }
  #div_block-57-16,
  #div_block-59-16,
  #div_block-64-16 {
    text-align: center !important;
    align-items: center !important;
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    padding: 24px 16px !important;
    width: 100% !important;
  }
  #div_block-64-16 {
    border-bottom: none;
    padding-bottom: 8px !important;
  }
  /* Liens nav footer : centrer */
  #_nav_menu-58-16 .menu-item a {
    text-align: center !important;
    padding-left: 0 !important;
  }
  #_nav_menu-58-16 .menu-item > a::after {
    left: 50%;
    transform: translateX(-50%);
  }
  #_nav_menu-58-16 .menu-item > a:hover::after {
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
  }
  #section-55-16::after {
    font-size: 10px;
    padding: 12px 16px;
  }
}

/* ── Titre de section global Oxygen ─────────────────────────────── */
.ct-headline {
  line-height: 1.2;
}

/* ── Diacritiques / sous-menus ──────────────────────────────────── */
.oxy-nav-menu:not(.oxy-nav-menu-open) .sub-menu {
  border-radius: 0 0 var(--roca-radius) var(--roca-radius);
  overflow: hidden;
}

/* ── Alert / notice générique ───────────────────────────────────── */
.ct-section .woocommerce-notices-wrapper:empty {
  display: none;
}

/* ════════════════════════════════════════════════════════════════
   AUDIT UX 2026-06 — correctifs prioritaires tunnel d'achat
   (checkout classique [woocommerce_checkout] + panier)
   ════════════════════════════════════════════════════════════════ */

/* ── CHECKOUT : titres de section + libellés de champs lisibles ────
   Bug : sur le fond sombre du <main>, le titre "Détails de facturation"
   et les libellés (Prénom, Nom, Adresse…) étaient invisibles (couleur
   sombre héritée du thème, plus spécifique que l'override sans !important).
   Correctif : forcer le texte clair sur la zone de formulaire sombre. */
/* Ciblage par l'ID #customer_details (spécificité élevée) pour battre les
   règles du thème/WooCommerce chargées après ux.css. */
#customer_details label,
#customer_details h3,
.woocommerce-checkout #order_review_heading,
.woocommerce-checkout main .woocommerce-account-fields label,
.woocommerce-checkout main .woocommerce-form-login label {
  color: var(--roca-light) !important;
  opacity: 1 !important;
}
/* col-1 / col-2 sur fond transparent (jamais de bandeau blanc derrière les libellés) */
#customer_details,
#customer_details .col-1,
#customer_details .col-2,
.woocommerce-billing-fields,
.woocommerce-additional-fields {
  background: transparent !important;
}
/* Astérisque "champ requis" déjà orange (cf. span.required) — on garde */
.woocommerce-checkout main .required { color: var(--roca-orange) !important; }
/* Placeholders lisibles dans les champs blancs */
.woocommerce-checkout main input::placeholder,
.woocommerce-checkout main textarea::placeholder {
  color: #70707e !important;
  opacity: 1;
}

/* ── CHECKOUT : bloc de paiement #payment en carte claire lisible ──
   Bug : #payment s'affichait en pavé gris (moyens de paiement et logos
   CB noyés). On l'habille en carte claire à texte foncé. */
.woocommerce-checkout #payment {
  background: #ffffff !important;
  border: 1px solid var(--roca-border);
  border-radius: var(--roca-radius);
}
.woocommerce-checkout #payment,
.woocommerce-checkout #payment ul.payment_methods,
.woocommerce-checkout #payment ul.payment_methods li label,
.woocommerce-checkout #payment .payment_box,
.woocommerce-checkout #payment .payment_box p,
.woocommerce-checkout #payment .woocommerce-privacy-policy-text,
.woocommerce-checkout #payment .woocommerce-privacy-policy-text p,
.woocommerce-checkout #payment .woocommerce-terms-and-conditions-checkbox-text {
  color: #23232d !important;
}
.woocommerce-checkout #payment .payment_box {
  background: #f4f4f7 !important;
  border-radius: var(--roca-radius);
}
.woocommerce-checkout #payment a { color: var(--roca-blue) !important; }
/* Bouton "Commander" : orange plein, jamais délavé.
   Le thème applique un background-image (dégradé) sur .wp-element-button →
   on réinitialise le shorthand `background` + on neutralise image/opacité. */
html body.woocommerce-checkout #payment #place_order,
html body.woocommerce-checkout #place_order.wp-element-button,
html body.woocommerce-checkout button#place_order,
html body.woocommerce-checkout button#place_order:hover {
  background: #f58127 !important;
  background-color: #f58127 !important;
  background-image: none !important;
  border-color: #f58127 !important;
  color: #fff !important;
  opacity: 1 !important;
  filter: none !important;
  text-shadow: none !important;
}

/* ── PANIER : encart "Total panier" lisible ────────────────────────
   Bug : la boîte .cart_totals s'affichait blanche avec un texte clair
   (montants sous-total / total INVISIBLES). On rend la boîte sombre,
   cohérente avec le récap de commande du checkout. */
.woocommerce-cart main .cart_totals {
  background: var(--roca-dark) !important;
  border: 1px solid var(--roca-border);
  border-radius: var(--roca-radius);
  padding: 0 18px 18px !important;
}
.woocommerce-cart main .cart_totals h2 { color: var(--roca-light) !important; }
.woocommerce-cart main .cart_totals table.shop_table,
.woocommerce-cart main .cart_totals table.shop_table th,
.woocommerce-cart main .cart_totals table.shop_table td {
  background: transparent !important;
  color: var(--roca-light) !important;
  border-color: var(--roca-border) !important;
}
.woocommerce-cart main .cart_totals .order-total .amount {
  color: var(--roca-orange) !important;
  font-size: 1.15em;
}
.woocommerce-cart main .cart_totals a { color: var(--roca-orange) !important; }

/* ── PANIER : bouton "Mettre à jour le panier" — état lisible ──────
   (désactivé par défaut côté WooCommerce → on le présente comme un
   bouton secondaire en contour, pour qu'il ne paraisse pas "cassé") */
.woocommerce-cart main button[name="update_cart"] {
  background: transparent !important;
  border: 1px solid var(--roca-border) !important;
  color: var(--roca-light) !important;
  border-radius: var(--roca-radius) !important;
  opacity: 0.9 !important;
}
.woocommerce-cart main button[name="update_cart"]:not([disabled]) {
  background: var(--roca-blue) !important;
  border-color: var(--roca-blue) !important;
  opacity: 1 !important;
}

/* ============================================================
   AUDIT UX 2026-06 — Salve hero CTA + voile + réassurance (1.5.0)
   findings #1 (hero CTA + voile) & #2 (réassurance)
   ============================================================ */

/* --- Hero #section-2-17 : voile dégradé sombre --- */
#section-2-17 { position: relative; isolation: isolate; }
#section-2-17::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(180deg,
    rgba(0,0,0,0) 0%,
    rgba(20,20,20,.35) 45%,
    rgba(20,20,20,.78) 100%);
  pointer-events: none;
}
#section-2-17 .ct-section-inner-wrap { position: relative; z-index: 1; }
#section-2-17 .ct-headline { text-shadow: 0 2px 12px rgba(0,0,0,.45); }

/* --- Hero CTA --- */
.roca-hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
  margin-top: 28px;
}
.roca-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 15px 32px;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.1;
  text-decoration: none;
  cursor: pointer;
  border-radius: var(--roca-radius);
  border: 2px solid transparent;
  transition: background-color var(--roca-transition),
              border-color var(--roca-transition),
              color var(--roca-transition),
              transform var(--roca-transition),
              box-shadow var(--roca-transition);
}
.roca-btn--primary {
  background-color: var(--roca-orange);
  color: #1a1a1a;
  border-color: var(--roca-orange);
}
.roca-btn--primary:hover,
.roca-btn--primary:focus-visible {
  background-color: var(--roca-orange);
  border-color: var(--roca-orange-dark);
  color: #1a1a1a;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0,0,0,.3);
}
.roca-btn--ghost {
  background-color: transparent;
  color: #fff;
  border-color: #fff;
}
.roca-btn--ghost:hover,
.roca-btn--ghost:focus-visible {
  background-color: #fff;
  color: var(--roca-dark);
  transform: translateY(-2px);
}
@media (max-width: 767px) {
  .roca-hero-cta { flex-direction: column; align-items: stretch; }
  .roca-btn { width: 100%; }
}

/* --- Bandeau réassurance --- */
.roca-trust { background: var(--roca-dark); padding: 36px 20px; }
.roca-trust__grid {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.roca-trust__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  color: var(--roca-light);
}
.roca-trust__item svg {
  width: 34px; height: 34px;
  stroke: var(--roca-orange);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.roca-trust__item strong { font-size: 1rem; }
.roca-trust__item span { font-size: .85rem; opacity: .8; }
@media (max-width: 767px) {
  .roca-trust__grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
}

/* --- Variante mini (panier / checkout) --- */
.roca-trust--mini {
  padding: 16px;
  margin: 20px 0;
  border: 1px solid var(--roca-border);
  border-radius: var(--roca-radius);
}
.roca-trust--mini .roca-trust__grid { grid-template-columns: repeat(3, 1fr); gap: 16px; }
.roca-trust--mini .roca-trust__item { flex-direction: row; justify-content: center; gap: 8px; }
.roca-trust--mini .roca-trust__item svg { width: 22px; height: 22px; }
.roca-trust--mini .roca-trust__item strong { font-size: .9rem; }
.roca-trust--mini .roca-trust__item span { font-size: .9rem; }
@media (max-width: 767px) {
  .roca-trust--mini .roca-trust__grid { grid-template-columns: 1fr; }
}

/* --- Fond du body sombre (cohérence globale) ----------------------
   Le thème FSE met `body { background: var(--wp--preset--color--base) }`
   = blanc. Sur les pages courtes, ce blanc apparaît sous le footer
   (bande blanche en bas), et dans tout interstice. Comme tout le site
   est sombre, on aligne le fond du body sur --roca-dark.
   Spécificité (0,0,2) > règle `body` du thème (0,0,1) → pas de !important. */
html body {
  background-color: var(--roca-dark);
}

/* --- Sections baked contiguës : suppression du block-gap FSE -------
   La migration Oxygen→FSE rend les sections dans un conteneur
   `.is-layout-flow` qui applique `margin-block-start: 1.2rem` entre
   enfants → le fond blanc du body apparaissait en bandes entre les
   sections. On rétablit le rendu contigu d'origine (Oxygen).
   Spécificité (0,3,1) > la règle `:where(...)` du thème (0). */
.wp-block-post-content.is-layout-flow > [class*="ct-"],
.wp-block-post-content.is-layout-flow > .roca-trust {
  margin-block-start: 0;
  margin-block-end: 0;
}

/* --- Modales Oxygen mortes masquées (finding #9) ------------------
   La migration n'a pas chargé le JS/CSS Oxygen qui masque les modales
   (.ct-modal). 125.css les force même en `display:flex` → elles
   s'affichaient en blocs blancs dans le flux (bande blanche page kit).
   On les masque (elles ne sont plus ouvrables, JS absent). !important
   car `#modal-XX{display:flex}` est en ID. */
.ct-modal,
.oxy-modal-backdrop {
  display: none !important;
}

/* --- Page kit : grille de caractéristiques (icone_reassurance) --------
   Le sprite d'icônes Oxygen est absent après migration → les <use> cassés
   ont été remplacés par des SVG inline (script fix-kit-icons). On stylise
   ici une grille propre + les icônes en orange charte. Le composant
   oxel_logo_slider n'a aucun style chargé (CSS composant non migré). */
.oxel_logo_slider,
.oxel_logo_slider__image_carrier {
  position: static !important;
  width: auto !important;
  height: auto !important;
  transform: none !important;
  overflow: visible !important;
  white-space: normal !important;
}
.oxel_logo_slider__image_carrier {
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
  align-items: start !important;
  gap: 26px 18px !important;
  max-width: 1120px;
  margin: 0 auto !important;
  padding: 4px 16px 8px !important;
}
.oxel_logo_slider__logo {
  position: static !important;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  max-width: none !important;
  margin: 0 !important;
  left: auto !important;
  top: auto !important;
  padding: 18px 10px;
  border-radius: var(--roca-radius);
  transition: background-color var(--roca-transition), transform var(--roca-transition);
}
.oxel_logo_slider__logo:hover {
  background: rgba(255, 255, 255, .04);
  transform: translateY(-3px);
}
.icone_reassurance_produit {
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
}
.icone_reassurance_produit svg {
  width: 40px;
  height: 40px;
  stroke: var(--roca-orange);
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icone_reassurance_text {
  color: var(--roca-light);
  font-size: .95rem;
  line-height: 1.3;
  max-width: 18ch;
}
@media (max-width: 1024px) {
  .oxel_logo_slider__image_carrier { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 600px) {
  .oxel_logo_slider__image_carrier { grid-template-columns: repeat(2, 1fr) !important; gap: 22px 10px !important; }
  .icone_reassurance_produit svg { width: 34px; height: 34px; }
}

/* --- Page kit : éléments bleus → charte orange (cohérence) ---------
   Les boutons/liens du slider info sont en #1e56a6 (bleu) via des règles
   ID dans 125.css, qui charge APRÈS ux.css → !important nécessaire. */
#link_button-53-125, #link_button-54-125,
#link_button-69-125, #link_button-71-125 {
  background-color: var(--roca-orange) !important;
  border-color: var(--roca-orange) !important;
  color: #1a1a1a !important;
}
#link_button-53-125:hover, #link_button-54-125:hover,
#link_button-69-125:hover, #link_button-71-125:hover {
  background-color: var(--roca-orange) !important;
  border-color: var(--roca-orange-dark) !important;
  color: #1a1a1a !important;
}
#link_text-446-125, #link_text-447-125 { color: var(--roca-orange) !important; }
#link_text-446-125:hover, #link_text-447-125:hover { color: var(--roca-orange-dark) !important; }

/* Bouton "Actualiser" du calculateur → ghost neutre (action secondaire,
   le CTA orange "Ajouter au panier" reste l'action principale). */
.zone_boutons .bouton_actualiser button {
  background: transparent !important;
  border: 2px solid var(--roca-border) !important;
  color: var(--roca-light) !important;
}
.zone_boutons .bouton_actualiser button:hover {
  border-color: var(--roca-orange) !important;
  color: #fff !important;
}